:root{
  --ink:#17102B;
  --plum:#2E1D4D;
  --plum-2:#3E2A66;
  --gold:#F6C453;
  --gold-deep:#C9922B;
  --blush:#FF7DA8;
  --mint:#6FE3C4;
  --parchment:#FFF6E3;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --r:22px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:"Baloo 2",system-ui,sans-serif;
  font-weight:600;
  overflow:hidden;
  overscroll-behavior:none;
}

/* ---------- screens ---------- */
.screen{
  position:fixed; inset:0;
  display:none;
  padding:calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 96px);
  overflow-y:auto;
  z-index:20;
}
.screen.is-on{display:block}

.stars{
  position:absolute; inset:0; pointer-events:none; opacity:.65;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 78% 12%, var(--mint), transparent),
    radial-gradient(1.8px 1.8px at 33% 62%, var(--gold), transparent),
    radial-gradient(1.3px 1.3px at 88% 71%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 33%, var(--blush), transparent),
    radial-gradient(1.2px 1.2px at 22% 88%, #fff, transparent),
    radial-gradient(120% 90% at 50% 0%, var(--plum) 0%, var(--ink) 70%);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.45}to{opacity:.8}}

/* ---------- start ---------- */
.start-inner{
  position:relative; z-index:2;
  min-height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; gap:6px;
}
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 4px; font-weight:700;
}
.title{
  font-family:"Bungee",cursive;
  font-size:clamp(2.6rem,15vw,4.4rem);
  line-height:.92; margin:0 0 14px; letter-spacing:.01em;
  color:var(--parchment);
  text-shadow:0 3px 0 var(--gold-deep), 0 10px 26px rgba(246,196,83,.35);
}
.title.small{font-size:clamp(1.7rem,8vw,2.4rem)}
.lede{margin:0 0 22px; max-width:22rem; font-size:1.05rem; line-height:1.5; color:#EADFF7}
.fine{font-size:.85rem; color:#B7A8D4; margin:10px 0 0; max-width:20rem}
.signoff{font-family:"Bungee",cursive; color:var(--gold); font-size:1rem; margin:18px 0 24px}

/* ---------- buttons ---------- */
.btn{
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.12rem;
  color:var(--ink); background:var(--gold);
  border:none; border-radius:999px;
  padding:16px 34px; cursor:pointer;
  box-shadow:0 6px 0 var(--gold-deep), var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(5px); box-shadow:0 1px 0 var(--gold-deep)}
.btn-go{font-size:1.28rem; padding:19px 46px; margin-top:6px}
.ghost{
  background:none; border:none; color:#C4B4E4; font-family:inherit; font-weight:700;
  font-size:.95rem; padding:12px; cursor:pointer; text-decoration:underline;
  text-underline-offset:4px;
}
.ghost.danger{color:#FF9AA2}
.btn:focus-visible,.ghost:focus-visible,.chip:focus-visible,input:focus-visible{
  outline:3px solid var(--mint); outline-offset:3px;
}

.mode-row{display:flex; gap:10px; margin-top:26px}
.chip{
  font-family:inherit; font-weight:700; font-size:.9rem;
  background:rgba(255,255,255,.07); color:#C4B4E4;
  border:1.5px solid rgba(255,255,255,.14); border-radius:999px;
  padding:9px 18px; cursor:pointer;
}
.chip.is-on{background:var(--plum-2); color:var(--parchment); border-color:var(--gold)}

/* ---------- hub ---------- */
#s-hub{background:radial-gradient(120% 80% at 50% 0%, var(--plum) 0%, var(--ink) 65%)}
.bar{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:16px; border-bottom:1.5px dashed rgba(246,196,83,.3);
}
.bar-label{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#B7A8D4}
.bar-count{font-family:"Bungee",cursive; color:var(--gold); font-size:1.25rem}

.hub-body{display:grid; grid-template-columns:58px 1fr; gap:18px; padding-top:26px}

/* SIGNATURE ELEMENT: the Forever Thread */
.thread{position:relative; padding:6px 0}
.thread::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:5px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,var(--gold-deep) 0 7px,var(--gold) 7px 14px);
  border-radius:99px; opacity:.55;
  box-shadow:0 0 18px rgba(246,196,83,.3);
}
.node{
  position:relative; z-index:2;
  width:38px; height:38px; margin:0 auto 20px;
  border-radius:50%;
  border:2.5px dashed rgba(255,255,255,.22);
  display:grid; place-items:center;
  font-size:.78rem; color:#8E7CB4;
  background:var(--ink);
}
.node:last-child{margin-bottom:0}
.node.got{
  border:2.5px solid rgba(255,255,255,.55);
  font-size:1.15rem; color:#fff;
  box-shadow:0 0 20px currentColor, inset 0 0 14px rgba(255,255,255,.35);
  animation:snap .45s cubic-bezier(.2,1.6,.4,1);
}
@keyframes snap{0%{transform:scale(.2) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}

.hub-card{
  background:linear-gradient(160deg,var(--plum-2),var(--plum));
  border:1.5px solid rgba(246,196,83,.28);
  border-radius:var(--r); padding:24px 22px; box-shadow:var(--shadow);
}
.riddle{font-size:1.22rem; line-height:1.45; margin:6px 0 22px; color:var(--parchment)}
.hub-card .btn{width:100%}
.hub-card .ghost{display:block; width:100%; margin-top:6px}

/* ---------- AR ---------- */
#ar-layer{position:fixed; inset:0; z-index:1}
#ar-layer .a-enter-vr,#ar-layer .a-enter-ar,#ar-layer .a-orientation-modal{display:none!important}
.ar-ui{position:fixed; inset:0; z-index:30; pointer-events:none}
.ar-ui > *{pointer-events:auto}
.x{
  position:absolute; top:calc(env(safe-area-inset-top) + 14px); right:16px;
  width:46px; height:46px; border-radius:50%; border:none;
  background:rgba(23,16,43,.72); color:var(--parchment); font-size:1.7rem; line-height:1;
  cursor:pointer; backdrop-filter:blur(6px);
}
.reticle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64vw; max-width:290px; aspect-ratio:1; pointer-events:none;
  border:3px dashed rgba(246,196,83,.75); border-radius:26px;
  display:grid; place-items:end center; padding-bottom:12px;
  animation:hunt 2.4s ease-in-out infinite;
}
.reticle span{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(23,16,43,.75); padding:5px 12px; border-radius:99px; color:var(--gold);
}
.reticle.lock{border-style:solid; border-color:var(--mint); animation:none}
.reticle.lock span{color:var(--mint)}
@keyframes hunt{50%{transform:translate(-50%,-50%) scale(.94); opacity:.7}}
.ar-hint{
  position:absolute; left:22px; right:22px; top:calc(env(safe-area-inset-top) + 74px);
  text-align:center; font-size:1rem; color:var(--parchment);
  background:rgba(23,16,43,.72); border-radius:16px; padding:12px 16px;
  backdrop-filter:blur(6px);
}
.btn-open{
  position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom) + 108px);
  transform:translateX(-50%); animation:bob 1.1s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateX(-50%) translateY(-8px)}}

/* ---------- player ---------- */
.player{
  position:fixed; inset:0; z-index:60;
  background:rgba(11,7,22,.94);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:20px;
}
#vid{width:100%; max-width:820px; max-height:74vh; border-radius:18px; background:#000; box-shadow:var(--shadow)}
.player-foot{
  display:flex; align-items:center; gap:18px; margin-top:16px;
}
.player-foot strong{font-family:"Bungee",cursive; font-size:1rem; color:var(--gold)}
.btn-tap{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}

/* ---------- reward ---------- */
#s-reward{background:radial-gradient(110% 80% at 50% 20%, var(--plum-2) 0%, var(--ink) 70%)}
.reward-inner{
  position:relative; z-index:2; min-height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.reward-title{font-family:"Bungee",cursive; font-size:1.5rem; margin:2px 0 16px; line-height:1.25}


/* ---------- walkie ---------- */
.walkie{
  position:fixed; z-index:70;
  left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 18px);
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1rem;
  display:flex; align-items:center; gap:9px;
  background:var(--blush); color:#3A0F20; border:none;
  border-radius:999px; padding:14px 26px; cursor:pointer;
  box-shadow:0 5px 0 #C4576F, var(--shadow);
}
.walkie:active{transform:translateX(-50%) translateY(4px); box-shadow:0 1px 0 #C4576F}
.walkie-dot{width:10px; height:10px; border-radius:50%; background:#3A0F20; animation:blip 1.6s infinite}
@keyframes blip{0%,60%{opacity:1}80%{opacity:.15}}

/* ---------- sheets ---------- */
.sheet{
  position:fixed; inset:0; z-index:90; background:rgba(11,7,22,.8);
  display:grid; place-items:center; padding:20px; backdrop-filter:blur(4px);
}
.sheet-card{
  width:100%; max-width:400px; background:var(--plum);
  border:1.5px solid rgba(246,196,83,.3); border-radius:var(--r);
  padding:26px 24px; box-shadow:var(--shadow); text-align:center;
}
.sheet-card.wide{max-width:520px; text-align:left}
.sheet-card h3{font-family:"Bungee",cursive; font-size:1.15rem; margin:0 0 8px; color:var(--gold)}
#code-input{
  width:100%; margin-top:16px; padding:16px; border-radius:14px;
  border:2px solid rgba(255,255,255,.18); background:rgba(0,0,0,.28);
  color:var(--parchment); font-family:"Bungee",cursive; font-size:1.4rem;
  text-align:center; letter-spacing:.12em; text-transform:uppercase;
}
.err{color:#FF9AA2; font-size:.9rem; min-height:1.2em; margin:8px 0 0}
.code-dad{display:block; width:100%; margin-top:12px}
.word-big{font-family:"Bungee",cursive; font-size:2.2rem; color:var(--gold); letter-spacing:.12em; margin:10px 0 4px; text-shadow:0 0 24px rgba(246,196,83,.35)}
.sheet-row{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:18px}
.parent-list{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0}
.prow{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:10px; padding:5px 8px; color:var(--parchment);
  font-family:inherit; font-weight:600; font-size:.74rem; cursor:pointer;
}
.prow.done{opacity:.45}
.prow b{font-family:"Bungee",cursive; color:var(--gold); font-size:.75rem}
.prow em{font-style:normal; color:#B7A8D4; font-size:.68rem; display:block}

/* Dad Mode: fit everything on one screen */
#sheet-parent .sheet-card{max-height:94vh; overflow-y:auto; padding:14px 14px 12px}
#sheet-parent .prow em{font-size:.64rem}
#sheet-parent h3{margin-bottom:4px}
#sheet-parent .fine{margin:0 0 6px; font-size:.78rem}
#sheet-parent .btn,#sheet-parent .ghost{padding:9px 12px; font-size:.82rem}
#sheet-parent #btn-test{width:100%; margin:4px 0 6px}
#sheet-parent #btn-dev-toggle{display:block; width:100%; text-align:center; margin:0 0 6px}
#sheet-parent .pcheck{margin:4px 0 0}
#sheet-parent .sheet-row{margin-top:10px}

/* Dev step-through button */
#dev-skip{
  position:fixed; z-index:96; left:12px; bottom:calc(env(safe-area-inset-bottom) + 14px);
  border:1.5px dashed rgba(246,196,83,.7); background:rgba(11,7,22,.75);
  color:var(--gold); border-radius:999px; padding:8px 14px;
  font:800 .72rem "Baloo 2",sans-serif; letter-spacing:.08em; cursor:pointer;
}

/* ---------- toast ---------- */
.toast{
  position:fixed; z-index:95; left:50%; transform:translateX(-50%);
  top:calc(env(safe-area-inset-top) + 18px);
  background:var(--gold); color:var(--ink); font-weight:800;
  padding:12px 22px; border-radius:99px; box-shadow:var(--shadow);
}


/* ---------- add-to-home-screen hint (iOS) ---------- */
.a2hs-hint{
  position:fixed; z-index:96; left:50%; transform:translate(-50%,120%);
  bottom:calc(env(safe-area-inset-bottom) + 14px);
  width:min(92vw,420px); display:flex; align-items:center; gap:12px;
  background:linear-gradient(160deg,var(--plum-2),var(--plum));
  border:2px solid rgba(246,196,83,.55); border-radius:20px;
  padding:12px 14px; box-shadow:var(--shadow); color:var(--parchment);
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .4s; opacity:0;
}
.a2hs-hint.show{transform:translate(-50%,0); opacity:1}
.a2hs-icon{width:44px; height:44px; border-radius:11px; flex:none}
.a2hs-text{font-size:.86rem; line-height:1.4}
.a2hs-text strong{color:var(--gold)}
.a2hs-text span{display:block; margin-top:2px}
.a2hs-share{width:1em; height:1em; vertical-align:-.14em; color:var(--gold)}
#a2hs-close{
  flex:none; align-self:flex-start; margin:-4px -4px 0 0;
  background:none; border:none; color:var(--parchment);
  font-size:1.3rem; line-height:1; cursor:pointer; opacity:.7; padding:4px;
}

/* ---------- quiz ---------- */
#s-quiz{background:radial-gradient(120% 80% at 50% 0%, var(--plum) 0%, var(--ink) 65%)}
.quiz-inner{
  position:relative; z-index:2; min-height:100%; max-width:560px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:center;
}
.quiz-q{
  font-family:"Baloo 2",sans-serif; font-weight:800;
  font-size:clamp(1.3rem,5.6vw,1.75rem); line-height:1.3;
  margin:2px 0 22px; color:var(--parchment);
}
.opts{display:grid; gap:11px}
.opt{
  font-family:inherit; font-weight:700; font-size:1.02rem; line-height:1.35;
  text-align:left; color:var(--parchment);
  background:linear-gradient(160deg,var(--plum-2),var(--plum));
  border:2px solid rgba(255,255,255,.14); border-radius:18px;
  padding:16px 18px; cursor:pointer;
  display:flex; gap:13px; align-items:flex-start;
  transition:transform .12s ease, border-color .2s ease, opacity .3s ease;
}
.opt span{
  flex:none; width:26px; height:26px; border-radius:8px;
  background:rgba(246,196,83,.2); color:var(--gold);
  font-family:"Bungee",cursive; font-size:.75rem;
  display:grid; place-items:center; margin-top:1px;
}
.opt:active{transform:scale(.98)}
.opt.miss{opacity:.32; border-color:rgba(255,255,255,.08); pointer-events:none}
.opt.hit{
  border-color:var(--mint); background:linear-gradient(160deg,#1F5A4C,#123C33);
  animation:snap .45s cubic-bezier(.2,1.6,.4,1);
}
.opt.hit span{background:var(--mint); color:#08241D}
.quiz-note{min-height:3em; margin:18px 2px 0; color:var(--gold); font-size:1rem; line-height:1.4}

/* ---------- what dad said ---------- */
#s-says{background:radial-gradient(110% 80% at 50% 20%, var(--plum-2) 0%, var(--ink) 70%)}
.says{
  font-family:"Caveat",cursive; font-weight:700;
  font-size:clamp(1.6rem,7vw,2.3rem); line-height:1.28;
  color:var(--parchment); margin:6px 0 30px; max-width:20rem;
  border:none; padding:0 4px; position:relative;
}
.says::before,.says::after{content:'"'; color:var(--gold); opacity:.6}

/* ---------- charm ---------- */
.charm-big{
  width:124px; height:124px; border-radius:50%; margin-bottom:24px;
  display:grid; place-items:center; font-size:3.2rem; line-height:1;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(255,255,255,.2), 0 0 64px 8px currentColor;
  animation:snap .6s cubic-bezier(.2,1.6,.4,1);
}

/* ---------- the finished bracelet ---------- */
.bracelet{width:min(340px,88vw); height:auto; margin-bottom:22px; overflow:visible}
.bracelet .chain{fill:none; stroke:var(--gold); stroke-width:3.5; stroke-linecap:round; opacity:.85}
.bracelet .link{stroke:var(--gold); stroke-width:2; opacity:.7}
.bracelet .disc{stroke:rgba(255,255,255,.55); stroke-width:2}
.bracelet .gl{font-size:15px; text-anchor:middle; dominant-baseline:central}
.bracelet g{opacity:0; transform-box:fill-box; transform-origin:center;
  animation:hang .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes hang{from{opacity:0; transform:translateY(-10px) scale(.6)}to{opacity:1; transform:none}}


/* =====================================================================
   ARTWORK LAYER
   Grain, depth, springs, medallions, parallax hero, title sequence.
   ===================================================================== */

:root{
  --tx:0; --ty:0;                                   /* tilt, set by art.js */
  --spring:cubic-bezier(.16,1.24,.3,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

#art-defs{position:absolute; width:0; height:0; overflow:hidden}

/* Film grain — the single biggest thing separating "CSS" from "designed" */
.grain{
  position:fixed; inset:-50%; z-index:200; pointer-events:none;
  opacity:.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 1.1s steps(3) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)}
}

/* ---------- parallax hero ---------- */
.sky-deep{position:absolute; inset:0; overflow:hidden; z-index:0}
.sky-deep::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 78% at 50% 106%, rgba(110,60,180,.42) 0%, transparent 62%),
             linear-gradient(180deg,#0A0620 0%,#1B0F3C 52%,#2E1D4D 100%);
}
.par{position:absolute; inset:-8%; will-change:transform}
.par-far{
  background:
    radial-gradient(1.1px 1.1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 38% 9%,  #cfe6ff, transparent),
    radial-gradient(1.2px 1.2px at 66% 28%, #fff, transparent),
    radial-gradient(1px 1px at 88% 14%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 24% 62%, #dbe9ff, transparent),
    radial-gradient(1px 1px at 79% 71%, #fff, transparent);
  opacity:.55;
  transform:translate3d(calc(var(--tx)*4px), calc(var(--ty)*4px), 0);
}
.par-mid{
  background:
    radial-gradient(1.7px 1.7px at 20% 34%, #FFF6E3, transparent),
    radial-gradient(1.5px 1.5px at 72% 18%, #FF7DA8, transparent),
    radial-gradient(1.8px 1.8px at 47% 74%, #6FE3C4, transparent),
    radial-gradient(1.6px 1.6px at 90% 52%, #F6C453, transparent);
  opacity:.8;
  transform:translate3d(calc(var(--tx)*12px), calc(var(--ty)*11px), 0);
  animation:twinkle 5s ease-in-out infinite alternate;
}
.par-near{
  background:
    radial-gradient(2.6px 2.6px at 15% 80%, #FFF6E3, transparent),
    radial-gradient(2.2px 2.2px at 84% 30%, #FFF6E3, transparent);
  opacity:.9;
  transform:translate3d(calc(var(--tx)*26px), calc(var(--ty)*22px), 0);
}
.hero-moon{
  position:absolute; left:50%; bottom:-30vw;
  width:62vw; max-width:300px; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #FFFCF0 0%, #F3E4B6 48%, #C9A968 100%);
  box-shadow:0 0 90px 26px rgba(255,244,214,.24), inset -14px -10px 34px rgba(120,96,50,.4);
  transform:translate3d(calc(-50% + var(--tx)*-16px), calc(var(--ty)*-8px), 0);
  animation:moonrise 2.4s var(--spring) .15s both;
}
@keyframes moonrise{from{opacity:0; bottom:-46vw}to{opacity:1; bottom:-30vw}}

/* the thread, hanging into frame with one charm on it */
.hero-hang{
  position:absolute; top:0; right:13%;
  display:flex; flex-direction:column; align-items:center;
  transform-origin:top center;
  animation:swing 6.5s ease-in-out 1.2s infinite alternate;
}
.hero-hang i{
  display:block; width:2.5px; height:19vh; max-height:150px;
  background:linear-gradient(180deg,transparent,var(--gold-deep) 22%,var(--gold));
  box-shadow:0 0 12px rgba(246,196,83,.45);
}
.hero-hang span{
  display:block; width:52px; margin-top:-3px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));
  animation:drop 1s var(--spring) .55s both;
}
@keyframes swing{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes drop{from{opacity:0; transform:translateY(-30px) scale(.4)}to{opacity:1; transform:none}}

/* ---------- title sequence ---------- */
.t-row{display:inline-block}
.t-ch{
  display:inline-block;
  animation:letterIn .82s var(--spring) both;
}
@keyframes letterIn{
  from{opacity:0; transform:translateY(-46px) rotate(-9deg) scale(.7); filter:blur(6px)}
  to  {opacity:1; transform:none; filter:blur(0)}
}
.start-inner > .eyebrow{animation:fadeUp .7s var(--ease) .1s both}
.start-inner > .lede{animation:fadeUp .8s var(--ease) 1.05s both}
.start-inner > .btn-go{animation:fadeUp .9s var(--spring) 1.25s both}
.start-inner > .mode-row,.start-inner > .fine{animation:fadeUp .8s var(--ease) 1.5s both}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* ---------- charm medallions ---------- */
.charm-svg{display:block; width:100%; height:100%; overflow:visible}
.charm-big{
  width:132px; height:132px; margin-bottom:26px;
  border-radius:50%; background:none; box-shadow:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.6)) drop-shadow(0 0 40px currentColor);
  animation:mint 1s var(--spring) both;
}
@keyframes mint{
  from{opacity:0; transform:scale(.3) rotate(-160deg)}
  60% {opacity:1}
  to  {opacity:1; transform:none}
}
.charm-big .charm-svg{animation:spin 1.1s var(--spring) both}
@keyframes spin{from{transform:rotateY(540deg)}to{transform:none}}

.node.got{
  border:none; background:none!important; padding:0;
  box-shadow:none; overflow:visible;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.55)) drop-shadow(0 0 13px currentColor);
}
.node .charm-svg{width:38px; height:38px}

/* ---------- portrait frame on the video ---------- */
.frame{
  position:relative; width:100%; max-width:820px;
  border-radius:22px; padding:5px;
  background:linear-gradient(150deg,#FFF6E3,#E8B94A 28%,#8A5F1B 58%,#F6C453 100%);
  box-shadow:0 26px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
  animation:frameIn .55s var(--spring) both;
}
.frame::after{
  content:""; position:absolute; inset:5px; border-radius:18px; pointer-events:none;
  box-shadow:inset 0 0 46px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
#vid{width:100%; max-height:70vh; border-radius:18px; display:block; background:#07040F; box-shadow:none}
@keyframes frameIn{from{opacity:0; transform:translateY(22px) scale(.95)}to{opacity:1; transform:none}}

/* ---------- AR lock art ---------- */
.lock-art{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transition:opacity .35s var(--ease);
}
.reticle.lock .lock-art{opacity:1}
.lock-art img{
  width:46%; border-radius:50%;
  border:3px solid rgba(255,246,227,.85);
  box-shadow:0 0 40px rgba(0,0,0,.7), 0 0 60px currentColor;
  animation:pop .6s var(--spring) both, float 3.4s ease-in-out infinite;
}
@keyframes pop{from{opacity:0; transform:scale(.5)}to{opacity:1; transform:none}}
@keyframes float{50%{transform:translateY(-9px)}}

/* ---------- surface depth pass ---------- */
.hub-card,.opt,.sheet-card{
  position:relative;
  box-shadow:0 22px 44px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.13),
             inset 0 -2px 0 rgba(0,0,0,.32);
}
.hub-card::before,.sheet-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 42%);
}
.btn{
  background:linear-gradient(178deg,#FFDF97,var(--gold) 42%,#E0A932);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.opts .opt{animation:fadeUp .5s var(--spring) both}
.opts .opt:nth-child(1){animation-delay:.05s}
.opts .opt:nth-child(2){animation-delay:.12s}
.opts .opt:nth-child(3){animation-delay:.19s}
.opts .opt:nth-child(4){animation-delay:.26s}
.quiz-q{animation:fadeUp .6s var(--ease) both}
.says{animation:fadeUp .9s var(--ease) .15s both}

/* screens arrive instead of appearing */
.screen.is-on{animation:screenIn .42s var(--ease) both}
@keyframes screenIn{from{opacity:0; transform:translateY(10px) scale(.995)}to{opacity:1; transform:none}}

/* ---------- bracelet finish ---------- */
.bracelet .disc{stroke:rgba(255,255,255,.6); stroke-width:2.4}
.bracelet .chain{stroke-width:4; filter:drop-shadow(0 0 6px rgba(246,196,83,.55))}
.bracelet g{filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .par,.hero-moon,.hero-hang span{transform:none!important}
}

/* ---------- sky finale ---------- */
#s-sky{padding:0; background:#050310; overflow:hidden}
.sky-stars{
  position:absolute; inset:0;
  background:
    radial-gradient(1.4px 1.4px at 8% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 27% 9%, #cfe6ff, transparent),
    radial-gradient(1.6px 1.6px at 44% 34%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 63% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 81% 41%, #dbe9ff, transparent),
    radial-gradient(1.2px 1.2px at 15% 58%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 92% 66%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 36% 78%, #cfe6ff, transparent),
    radial-gradient(1.1px 1.1px at 70% 87%, #fff, transparent),
    linear-gradient(180deg,#0A0620 0%,#150C33 55%,#241246 100%);
  animation:twinkle 7s ease-in-out infinite alternate;
}
#skycam{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.1s ease;
}
#skycam.live{opacity:.92}
.sky-veil{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(5,3,16,.52) 0%, rgba(5,3,16,.88) 100%);
}

/* The stage holds the moon, the spark, and the writing. Device orientation
   nudges it opposite to the phone's motion, so everything feels pinned to
   one spot in the real sky instead of glued to the screen. */
.sky-stage{position:absolute; inset:0; z-index:2; will-change:transform}

.moon{
  position:absolute; top:11%; right:13%;
  width:76px; height:76px; border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #FFFBEC 0%, #F3E4B6 52%, #D9C089 100%);
  box-shadow:0 0 42px 12px rgba(255,244,214,.32), inset -8px -6px 18px rgba(140,120,80,.35);
  opacity:0; transform:scale(.7);
  transition:opacity 1.6s ease, transform 1.6s cubic-bezier(.2,1.2,.3,1);
}
.moon.up{opacity:1; transform:scale(1)}
.moon.ping{animation:moonping 1.1s ease-out}
@keyframes moonping{
  40%{box-shadow:0 0 90px 34px rgba(255,244,214,.6); transform:scale(1.14)}
}

.spark{
  position:absolute; top:0; left:0; z-index:3; width:9px; height:9px; border-radius:50%;
  background:#FFF9E8; opacity:0; pointer-events:none;
  box-shadow:0 0 14px 5px rgba(255,240,200,.9), 0 0 40px 14px rgba(246,196,83,.45);
}
.spark.on{opacity:1}

.sky-write{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:2px; padding:0 24px;
  text-align:center; pointer-events:none;
}
.sky-line{
  font-family:"Caveat",cursive; font-weight:700;
  font-size:clamp(2.1rem,10.5vw,4rem); line-height:1.12;
  color:#FFFDF6; white-space:pre-wrap;
  text-shadow:0 0 16px rgba(255,255,255,.75), 0 0 46px rgba(180,205,255,.55);
  transition:filter 18s linear, opacity 18s linear, transform 18s linear;
}
.sky-line.drift{filter:blur(4px); opacity:.45; transform:translateY(-10px) scale(1.03)}
.sky-line i{
  font-style:normal; display:inline-block;
  opacity:0; filter:blur(14px); transform:translateY(9px) scale(1.25);
  transition:opacity .5s ease, filter .6s ease, transform .6s ease;
}
.sky-line i.ink{opacity:1; filter:blur(0); transform:none}

.sky-panel{
  position:absolute; z-index:4; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 40px);
  padding:0 26px; text-align:center;
}
.sky-h{
  font-family:"Bungee",cursive; font-size:clamp(1.5rem,7vw,2rem);
  margin:0 0 14px; line-height:1.15;
  text-shadow:0 3px 0 var(--gold-deep), 0 10px 26px rgba(0,0,0,.6);
}
.meter{
  width:min(300px,78vw); height:14px; margin:0 auto 12px;
  border-radius:99px; background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1.5px rgba(246,196,83,.4);
  overflow:hidden;
}
.meter i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--mint),var(--gold));
  box-shadow:0 0 18px rgba(246,196,83,.7);
  transition:width .18s linear;
}

#confetti{position:fixed; inset:0; z-index:80; pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}
@media (min-width:720px){
  .hub-body{max-width:640px; margin:0 auto}
  .reticle{max-width:340px}
}

/* ---------- additions: finale art + Dad Mode checklist ---------- */
.fin-art{
  display:block;
  width:min(240px,60vw);
  margin:10px auto 4px;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));
}
#btn-test{ width:100%; margin:12px 0 4px; }
.pcheck{
  margin:10px 0 4px;
  text-align:left;
  background:rgba(255,255,255,.05);
  border-radius:14px;
  padding:10px 14px;
}
.pcheck summary{
  cursor:pointer;
  font-weight:700;
  opacity:.9;
}
.pcheck ul{
  margin:10px 0 4px;
  padding-left:20px;
  font-size:14px;
  line-height:1.55;
  opacity:.85;
}
.pcheck li{ margin:6px 0; }

/* hidden attribute must always win over display rules */
[hidden]{display:none!important}

/* ---------- boot splash ---------- */
#splash{
  position:fixed; inset:0; z-index:200; background:#17102B;
  display:grid; place-items:center;
  transition:opacity .7s ease;
}
#splash img{ width:100%; height:100%; object-fit:cover; }
#splash.bye{ opacity:0; pointer-events:none; }

/* ---------- persistent splash artwork behind the main screens ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url(media/art/backdrop.jpg) center bottom / cover no-repeat;
}
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(23,16,43,.78) 0%, rgba(23,16,43,.6) 45%, rgba(23,16,43,.82) 100%);
}
/* let the artwork glow through the quest screens */
#s-hub{background:radial-gradient(120% 80% at 50% 0%, rgba(46,29,77,.55) 0%, rgba(23,16,43,.35) 65%)}
#s-quiz{background:radial-gradient(120% 80% at 50% 0%, rgba(46,29,77,.55) 0%, rgba(23,16,43,.35) 65%)}
#s-reward{background:radial-gradient(110% 80% at 50% 20%, rgba(62,42,102,.55) 0%, rgba(23,16,43,.35) 70%)}
/* keep the camera view clean — no artwork behind AR */
body.in-ar::before, body.in-ar::after{display:none}

/* ---------- birthday ribbon ---------- */
.bday-badge{
  display:inline-block; margin:0 0 10px;
  font-family:"Caveat",cursive; font-weight:700; font-size:1.35rem;
  color:var(--gold); background:rgba(23,16,43,.55);
  border:1.5px solid rgba(246,196,83,.45); border-radius:999px;
  padding:4px 18px;
}
.bar-bday{
  display:block; font-family:"Caveat",cursive; font-size:1.05rem;
  letter-spacing:0; text-transform:none; color:var(--gold); margin-top:2px;
}
/* while the camera is up, hide the quest screens entirely */
body.in-ar .screen{display:none}

/* ---------- the birthday secret (Aug 6 only) ---------- */
.bday-secret{
  margin-top:18px; cursor:pointer;
  font-family:"Caveat",cursive; font-weight:700; font-size:1.3rem;
  color:var(--ink); background:linear-gradient(160deg,#FFE9B0,var(--gold));
  border:none; border-radius:999px; padding:12px 26px;
  box-shadow:0 0 22px rgba(246,196,83,.65), 0 6px 0 var(--gold-deep);
  animation:bday-glow 1.8s ease-in-out infinite alternate;
}
@keyframes bday-glow{
  from{box-shadow:0 0 14px rgba(246,196,83,.45), 0 6px 0 var(--gold-deep); transform:scale(1)}
  to{box-shadow:0 0 34px rgba(246,196,83,.9), 0 6px 0 var(--gold-deep); transform:scale(1.04)}
}
.bday-card{border:2px solid rgba(246,196,83,.6); max-height:80vh; overflow-y:auto}
.bday-line{
  font-family:"Caveat",cursive; font-weight:600; font-size:1.35rem;
  line-height:1.45; color:var(--parchment); margin:0 0 14px;
}
body.bday .bday-badge{animation:bday-glow 1.8s ease-in-out infinite alternate}

/* ---------- voice-guided intro ---------- */
#s-intro{overflow-y:auto}
.intro-inner{max-width:440px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 28px) 22px 40px; text-align:center}
.intro-voice{margin:14px 0 6px}
.intro-orb{
  width:74px; height:74px; margin:0 auto 8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE9B0, var(--gold) 55%, #B8862F);
  box-shadow:0 0 24px rgba(246,196,83,.5);
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.intro-orb span{width:5px; height:12px; border-radius:3px; background:rgba(23,16,43,.75)}
.intro-orb.talking span{animation:orbtalk .7s ease-in-out infinite alternate}
.intro-orb.talking span:nth-child(2){animation-delay:.12s}
.intro-orb.talking span:nth-child(3){animation-delay:.24s}
.intro-orb.talking span:nth-child(4){animation-delay:.36s}
@keyframes orbtalk{from{height:8px}to{height:30px}}
.intro-steps{text-align:left; margin:16px 0; padding:0 0 0 4px; list-style:none; display:grid; gap:10px}
.intro-steps li{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:11px 14px; font-size:.88rem; line-height:1.45;
}
.intro-steps b{color:var(--gold)}

/* ---------- seek mode ---------- */
.seek-ui{position:fixed; inset:0; z-index:80; background:var(--ink)}
#seekcam{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0}
#seekcam.live{opacity:1}
.seek-veil{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, rgba(23,16,43,0) 30%, rgba(23,16,43,.75) 100%)}
.seek-ui .x{
  position:absolute; z-index:3; top:calc(env(safe-area-inset-top) + 12px); right:14px;
  width:42px; height:42px; border-radius:50%; border:none; font-size:1.4rem;
  background:rgba(11,7,22,.6); color:#fff; cursor:pointer;
}
.seek-top{position:absolute; z-index:2; top:calc(env(safe-area-inset-top) + 18px); left:0; right:0; text-align:center}
.seek-dist{display:block; font-family:"Bungee",cursive; color:var(--gold); font-size:1.1rem; text-shadow:0 2px 10px rgba(0,0,0,.6)}
.seek-arrow-wrap{
  position:absolute; z-index:2; left:50%; top:44%;
  width:120px; height:120px; margin:-60px 0 0 -60px;
  display:grid; place-items:center; transition:transform .25s ease, opacity .3s;
}
.seek-arrow{font-size:74px; color:var(--gold); transform:rotate(-90deg); line-height:1}
.seek-card{
  position:absolute; z-index:3; left:50%; top:42%; transform:translate(-50%,-50%);
  width:180px; height:230px; border-radius:20px; border:2px solid var(--gold);
  background:linear-gradient(160deg, #2A1B45, #17102B); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  animation:cardpop .6s cubic-bezier(.2,1.6,.4,1);
}
@keyframes cardpop{from{transform:translate(-50%,-50%) scale(.2); opacity:0}to{transform:translate(-50%,-50%) scale(1); opacity:1}}
.seek-card-glow{position:absolute; inset:-26px; border-radius:32px; background:radial-gradient(ellipse, rgba(246,196,83,.45), transparent 70%); animation:glowpulse 1.4s ease-in-out infinite; pointer-events:none}
@keyframes glowpulse{0%,100%{opacity:.6}50%{opacity:1}}
.seek-card-face{width:110px; height:110px}
.seek-card-face svg{width:100%; height:100%}
.seek-card em{font-style:normal; font-weight:800; color:var(--gold); font-size:.9rem}
.seek-hint{
  position:absolute; z-index:2; bottom:calc(env(safe-area-inset-bottom) + 26px);
  left:0; right:0; text-align:center; color:#E8DFF5; font-size:.9rem; padding:0 30px;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.seek-code-btn{
  position:absolute; z-index:3; bottom:calc(env(safe-area-inset-bottom) + 62px);
  left:50%; transform:translateX(-50%);
  font-size:.95rem; padding:13px 26px;
  animation:fadeUp .5s ease both;
}
.seek-code-btn:active{transform:translateX(-50%) translateY(4px)}

/* ---------- place-cards sheet ---------- */
/* camera placement view */
.place-cam-ui{z-index:90}
#placecam{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0}
#placecam.live{opacity:1}
.placecam-preview{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-58%);
  display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none}
.placecam-card{width:110px; height:150px; display:block;
  animation:placecam-bob 2.6s ease-in-out infinite;
  filter:drop-shadow(0 10px 24px rgba(246,196,83,.45))}
.placecam-card svg{width:100%; height:100%}
.placecam-ring{width:120px; height:34px; border-radius:50%;
  border:2px dashed rgba(246,196,83,.8);
  box-shadow:0 0 24px rgba(246,196,83,.25) inset;
  animation:placecam-ring 2.6s ease-in-out infinite}
.placecam-preview em{font-style:normal; font-size:.7rem; color:var(--gold);
  background:rgba(20,14,40,.72); border-radius:999px; padding:4px 12px}
@keyframes placecam-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes placecam-ring{0%,100%{opacity:.9; transform:scaleX(1)}50%{opacity:.55; transform:scaleX(.88)}}
.placecam-old{
  position:absolute; left:50%; bottom:150px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--mint);
  background:rgba(20,14,40,.72); border-radius:999px; padding:6px 14px}
.placecam-old-arrow{display:inline-block; color:var(--mint); font-size:1rem;
  transform-origin:50% 50%; transition:transform .25s ease-out}
.placecam-drop{position:absolute; left:50%; bottom:64px; transform:translateX(-50%); white-space:nowrap}
.placecam-drop:disabled{opacity:.55}
.place-cam-ui .seek-hint{bottom:24px}
@media (prefers-reduced-motion:reduce){.placecam-card,.placecam-ring{animation:none}}

.place-gps{font-size:.75rem; color:var(--mint); margin:4px 0 8px}
.place-list{display:grid; gap:6px; max-height:52vh; overflow-y:auto}
.place-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:11px; padding:7px 10px; font-size:.78rem; font-weight:600;
}
.place-row b{font-family:"Bungee",cursive; color:var(--gold); font-size:.72rem; margin-right:4px}
.place-row em{display:block; font-style:normal; color:#B7A8D4; font-size:.66rem}
.place-row.is-set em{color:var(--mint)}
.place-row .btn,.place-row .ghost{padding:7px 10px; font-size:.7rem; flex-shrink:0}