/* Overlay UI for the 3D Christmas cards: the WebGL canvas fills the screen, text floats above. */
body.x3d{background:#07090f;color:#f4f1ea;display:block}
.gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.tap{position:fixed;inset:0;z-index:2;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ui{position:fixed;inset:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(30px + env(safe-area-inset-top)) 20px calc(44px + env(safe-area-inset-bottom))}
.ui a,.ui button{pointer-events:auto}
.x-hint{font-size:.64rem;letter-spacing:.36em;text-transform:uppercase;color:#cdb98a;text-shadow:0 1px 8px #000;transition:opacity .6s}
.x-title{margin-top:10px;font-family:var(--script);font-weight:400;line-height:1;color:#ffe2a0;
  text-shadow:0 0 22px rgba(255,190,90,.75),0 0 2px #fff8e0,0 2px 10px rgba(0,0,0,.6);opacity:0;transform:translateY(-8px) scale(.92);filter:blur(10px);
  transition:opacity 1.6s 1s,transform 1.8s 1s,filter 1.6s 1s}
.x-title .x-line{display:block;font-size:clamp(2rem,9vw,3.1rem)}
.x-title .x-name{display:block;font-size:clamp(2.6rem,13vw,4.2rem)}
.done .x-title{opacity:1;transform:none;filter:none}
.done .x-hint{opacity:0}
.x-count{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));font-family:var(--serif);font-style:italic;font-size:1.3rem;color:#f4ead2;text-shadow:0 2px 12px #000;transition:opacity .5s}
.done .x-count{opacity:0;height:0;overflow:hidden}
.x-card{position:absolute;left:50%;bottom:calc(46px + env(safe-area-inset-bottom));translate:-50% 0;width:min(360px,calc(100% - 32px));padding:18px 20px 16px;border-radius:20px;opacity:0;transform:translateY(18px);
  background:linear-gradient(160deg,rgba(30,20,14,.62),rgba(10,8,8,.5));border:1px solid rgba(242,213,138,.22);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);transition:opacity 1s 2.4s,transform 1s 2.4s;display:flex;flex-direction:column;align-items:center;gap:8px}
.done .x-card{opacity:1;transform:none;pointer-events:auto}
.x-msg{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.42;color:#f4ead2}
.x-card .from{color:#f2d58a}
.x3d .btn{background:linear-gradient(180deg,#a3283a,#6e1624);border-color:rgba(242,213,138,.45);box-shadow:0 0 26px -8px #f2d58a}
.x3d .btn--ghost{background:transparent;box-shadow:none}
.x3d .brand{z-index:4}
.loading{position:fixed;inset:0;display:grid;place-items:center;z-index:5;background:#07090f;transition:opacity .6s}
.loading span{width:34px;height:34px;border-radius:50%;border:2px solid rgba(242,213,138,.25);border-top-color:#f2d58a;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nogl .gl{display:none}
.nogl .x-title{opacity:1;filter:none;transform:none}
@media(prefers-reduced-motion:reduce){.x-title,.x-card{transition-duration:.01s;transition-delay:0s}}