:root{
  --void:#080E14;
  --canopy:#0F2318;
  --teal:#0D3D3A;
  --green:#22C55E;
  --cyan:#5EEAD4;
  --indigo:#3730A3;
  --gold:#F59E0B;
  --gold-soft:#FFD98A;
  --cream:#F5F0E8;
  --lav:#A78BFA;
  --ghost:#E2E8F0;
  --ink:#2a2118;
  --font-title:'Cinzel Decorative',Georgia,serif;
  --font-script:'Great Vibes',cursive;
  --font-hand:'Caveat',cursive;
  --font-ui:'Josefin Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--void);
  color:var(--ghost);
  font-family:var(--font-ui);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- scene ---------- */
#scene{position:fixed;inset:0;overflow:hidden;background:var(--void)}
.bg{
  position:absolute;inset:-6%;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.4s ease;
  will-change:transform,opacity;
}
.bg.show{opacity:1}
#bgVideo{object-fit:cover}
.bg-tint{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(8,14,20,0) 0%, rgba(8,14,20,.35) 55%, rgba(8,14,20,.86) 100%),
    linear-gradient(180deg, rgba(13,61,58,.30) 0%, rgba(8,14,20,.55) 60%, rgba(8,14,20,.92) 100%);
  mix-blend-mode:multiply;
}
.bg-grade{position:absolute;inset:0;background:rgba(11,30,40,.28);mix-blend-mode:soft-light}
#fireflies,#bloom{position:absolute;inset:0;pointer-events:none}
#bloom{z-index:40}

/* ---------- hud ---------- */
.hud{position:absolute;top:0;left:0;right:0;z-index:35;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 14px calc(16px + env(safe-area-inset-left));pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;opacity:.9}
.brand img{width:28px;height:28px;object-fit:contain;filter:grayscale(1) sepia(1) saturate(2.4) hue-rotate(2deg) brightness(1.05) drop-shadow(0 0 6px rgba(245,158,11,.45))}
.brand span{font-family:var(--font-script);font-size:24px;color:var(--gold-soft);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.sound-btn{pointer-events:auto;background:rgba(8,14,20,.4);border:.5px solid rgba(245,158,11,.3);color:var(--gold-soft);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;transition:background .3s,transform .2s}
.sound-btn:hover{background:rgba(245,158,11,.16)}
.sound-btn:active{transform:scale(.92)}

/* ---------- title ---------- */
.titleblock{position:absolute;top:13%;left:0;right:0;z-index:34;text-align:center;pointer-events:none;padding:0 24px}
.eyebrow{font-family:var(--font-script);font-size:clamp(26px,7vw,40px);color:var(--gold-soft);line-height:1;text-shadow:0 2px 22px rgba(0,0,0,.7)}
.title{font-family:var(--font-title);font-weight:700;font-size:clamp(30px,9vw,58px);letter-spacing:.14em;color:var(--cream);margin-top:4px;text-shadow:0 0 30px rgba(94,234,212,.25),0 4px 26px rgba(0,0,0,.7)}
.subtitle{font-family:var(--font-ui);font-weight:300;letter-spacing:.18em;text-transform:lowercase;font-size:clamp(11px,2.6vw,13.5px);color:var(--ghost);opacity:.85;margin-top:12px}
.subtitle .tease{display:block;margin-top:10px;color:var(--gold-soft);opacity:.9;font-style:normal;white-space:pre-line;line-height:1.5}

/* ---------- trail + lanterns ---------- */
#trailSvg{position:absolute;inset:0;z-index:31;pointer-events:none}
#trailSvg path{fill:none;stroke:url(#trailGrad);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 9;filter:drop-shadow(0 0 5px rgba(245,158,11,.5))}
.lanterns{position:absolute;inset:0;z-index:33}
.lantern{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;text-align:center;outline:none}
.lantern .swing{transform-origin:50% -38px}
.lantern svg{display:block;margin:0 auto;overflow:visible}
.cap{margin-top:14px;font-family:var(--font-ui);font-weight:400;letter-spacing:.06em;line-height:1.25;white-space:nowrap;color:#cfe0d8;text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8),0 2px 14px rgba(0,0,0,.7)}
.cap b{display:block;font-weight:500;font-size:13px;color:#f0f4ef;text-transform:lowercase}
.cap .date{font-size:10.5px;opacity:.7;letter-spacing:.12em;text-transform:uppercase}
.lantern.locked .cap{color:#7f968f}
.lantern.locked .cap b{color:#9fb3ab}
.tag{display:inline-block;margin-top:7px;font-family:var(--font-ui);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#241a0a;background:var(--gold-soft);border-radius:20px;padding:3px 11px;box-shadow:0 0 18px rgba(245,158,11,.6)}
.lantern.locked{cursor:default}

/* ---------- reveal ---------- */
#reveal{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));background:rgba(4,10,12,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#reveal.open{display:flex}
.letter-card{position:relative;width:100%;max-width:430px;max-height:86vh;max-height:86svh;max-height:min(86svh,86dvh);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:linear-gradient(176deg,#fbf6ec 0%,#f3ead7 100%);color:var(--ink);border-radius:14px;padding:26px 26px 30px;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(245,158,11,.25),inset 0 0 60px rgba(214,180,120,.18);scrollbar-width:thin}
.letter-card::-webkit-scrollbar{width:6px}
.letter-card::-webkit-scrollbar-thumb{background:rgba(120,90,40,.3);border-radius:6px}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.955)}to{opacity:1;transform:none}}
#reveal.open .letter-card{animation:cardIn .55s cubic-bezier(.2,.85,.25,1) both}
@keyframes develop{0%{filter:brightness(.4) contrast(.7) saturate(.35) blur(2px)}55%{filter:brightness(.85) contrast(.92) saturate(.8) blur(.4px)}100%{filter:none}}
#reveal.open .polaroid .frame img,#reveal.open .pcard .frame img{animation:develop 1.9s ease-out both}
.close-x{position:absolute;top:12px;right:14px;background:none;border:0;color:#9a8a6a;cursor:pointer;font-size:20px;line-height:1;z-index:2}
.close-x:hover{color:#5a4a2a}
.daylabel{font-family:var(--font-ui);font-weight:500;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#b07d1a;text-align:center;margin-bottom:14px}

.polaroid{width:200px;max-width:62%;background:#fff;padding:10px 10px 16px;border-radius:3px;margin:0 auto 20px;box-shadow:0 14px 34px rgba(60,40,10,.32);transform:rotate(-2.5deg)}
.polaroid .frame{aspect-ratio:4/5;border-radius:2px;overflow:hidden;background:linear-gradient(150deg,#16302c,#3b5b50 55%,#6d6a43);display:flex;align-items:flex-end;justify-content:center}
.polaroid .frame img{width:100%;height:100%;object-fit:cover;display:block}
.polaroid .frame .ph{font-family:var(--font-ui);font-weight:300;font-size:11px;color:rgba(255,255,255,.72);letter-spacing:.04em;text-align:center;padding:0 12px 14px;line-height:1.5}
.polaroid .scrawl{font-family:var(--font-hand);font-size:18px;color:#4a3f2f;text-align:center;margin-top:8px}
.polaroid-stack{position:relative;width:100%;height:246px;margin:0 auto}
.pcard{position:absolute;width:150px;background:#fbfaf6;padding:7px 7px 12px;border-radius:3px;box-shadow:0 14px 30px rgba(40,25,8,.45)}
.pcard .frame{aspect-ratio:3/4;border-radius:2px;overflow:hidden;background:linear-gradient(150deg,#16302c,#3b5b50 55%,#6d6a43);display:flex;align-items:flex-end;justify-content:center}
.pcard .frame img,.pcard .frame video{width:100%;height:100%;object-fit:cover;display:block}
.pcard .frame .ph{font-family:var(--font-ui);font-weight:300;font-size:10px;color:rgba(255,255,255,.7);text-align:center;padding:0 8px 10px}
.pcard.p1{right:calc(50% - 25px);left:auto;top:18px;transform:rotate(-10deg);transform-origin:bottom right;z-index:2}
.pcard.p2{left:calc(50% - 25px);right:auto;top:6px;transform:rotate(10deg);transform-origin:bottom left;z-index:1}
.stack-scrawl{font-family:var(--font-hand);font-size:18px;color:#4a3f2f;text-align:center;margin:10px 0 16px}
.polaroid-vstack{position:relative;width:100%;height:401px;margin:0 auto}
.polaroid-vstack .pcard{position:absolute;left:50%;width:152px}
.pcard.pv1{top:0;transform:translateX(calc(-50% - 17px)) rotate(-4deg);z-index:2}
.pcard.pv2{top:187px;transform:translateX(calc(-50% + 17px)) rotate(4deg);z-index:1}
.picks{margin:24px 0 4px;opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease;pointer-events:none}
.picks.show{opacity:1;transform:none;pointer-events:auto}
.picks-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(74,63,47,.4),transparent);margin:0 0 16px}
.picks-intro{font-family:var(--font-hand);font-size:18px;line-height:1.4;color:#4a3f2f;text-align:center;margin:0 4px 14px}
.pick-opts{display:flex;flex-direction:column;gap:8px}
.pick-opt{font-family:var(--font-ui);font-weight:400;font-size:13px;line-height:1.35;color:#3a3326;background:rgba(255,252,244,.72);border:1px solid rgba(120,95,40,.32);border-radius:11px;padding:11px 14px;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,box-shadow .25s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
.pick-opt:active{transform:scale(.985)}
.pick-opt.picked{background:linear-gradient(180deg,#f8e4ab,#efc869);border-color:#c69e42;color:#3a2c0c;font-weight:600;box-shadow:0 5px 16px rgba(198,158,66,.4)}
.picks-done{font-family:var(--font-hand);font-size:17px;color:#7a5a18;text-align:center;margin-top:15px}
@keyframes pickPulse{0%{transform:scale(.92);opacity:.3}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
.picks-done.pulse{animation:pickPulse .5s ease-out}
@media (prefers-reduced-motion: reduce){.picks{transition:none}.picks-done.pulse{animation:none}}
.pick-trigger{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;background:rgba(255,250,238,.72);border:1px solid rgba(120,95,40,.4);border-radius:12px;padding:14px 16px;cursor:pointer;text-align:center;transition:border-color .2s ease,box-shadow .25s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
.pick-trigger:active{transform:scale(.99)}
.pick-trigger .pt-value{font-family:var(--font-hand);font-size:19px;line-height:1.25;color:#7a5a18}
.pick-trigger.picked{background:linear-gradient(180deg,#fbf0cf,#f6e3ad);border-color:#c69e42;box-shadow:0 5px 16px rgba(198,158,66,.3)}
.pick-trigger.picked .pt-value{font-weight:600;color:#5a4310}
.pick-trigger .pt-label{font-family:var(--font-ui);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#a07d28}
.pick-trigger .pt-change{font-family:var(--font-ui);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(176,146,80,.85);margin-top:1px}

.gift-heading{font-family:var(--font-script);font-size:clamp(30px,8vw,40px);line-height:1.05;color:#7a4d12;text-align:center;margin-bottom:14px}
.gift-letter{font-family:var(--font-hand);font-size:clamp(19px,4.8vw,22px);line-height:1.55;color:var(--ink);white-space:pre-wrap;min-height:60px;text-align:left;padding:0 2px}
.type-caret{display:inline-block;width:2px;height:1em;vertical-align:-2px;background:var(--gold);margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.gift-sign{font-family:var(--font-script);font-size:clamp(24px,6vw,30px);color:#a8741b;text-align:right;margin-top:16px;padding-right:6px}

/* wheel */
.wheel-blurb{font-family:var(--font-hand);font-size:21px;color:var(--ink);text-align:center;margin-bottom:18px}
.wheel-wrap{position:relative;width:248px;height:248px;margin:0 auto 8px}
.wheel-wrap .pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);z-index:3;color:var(--gold);font-size:24px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
#wheel{transform:rotate(0deg)}
.wheel-result{font-family:var(--font-hand);font-size:24px;color:#7a4d12;text-align:center;margin:14px 0 4px;min-height:30px;line-height:1.3}
.spin-btn,.finale-btn{display:block;margin:14px auto 0;font-family:var(--font-ui);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:#241a0a;background:var(--gold-soft);border:0;border-radius:40px;padding:12px 26px;cursor:pointer;box-shadow:0 8px 24px rgba(245,158,11,.4);transition:transform .15s,box-shadow .3s}
.spin-btn:hover,.finale-btn:hover{box-shadow:0 8px 34px rgba(245,158,11,.6)}
.spin-btn:active,.finale-btn:active{transform:scale(.96)}
.spin-btn[disabled]{opacity:.5;cursor:default}

.finale-foot{text-align:center;margin-top:20px}
.finale-foot .small{font-family:var(--font-hand);font-size:18px;color:#8a6a3a}

/* dev bar (hidden unless ?dev=1) */
#devbar{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;display:none;gap:7px;background:rgba(8,14,20,.7);border:.5px solid rgba(245,158,11,.35);padding:7px 9px;border-radius:30px}
#devbar.on{display:flex}
#devbar button{font-family:var(--font-ui);font-size:11px;letter-spacing:.08em;color:var(--gold-soft);background:transparent;border:.5px solid rgba(245,158,11,.3);border-radius:20px;padding:4px 9px;cursor:pointer}
#devbar button:hover{background:rgba(245,158,11,.15)}

.foot-hint{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:32;font-family:var(--font-ui);font-weight:300;font-size:11.5px;letter-spacing:.14em;color:#9fb3ac;text-transform:lowercase;background:rgba(6,16,18,.42);border:.5px solid rgba(245,158,11,.16);padding:6px 16px;border-radius:30px;text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap}

/* lantern internals */
.swing{position:relative;display:inline-block}
.halo{position:absolute;left:50%;top:48%;width:150px;height:150px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,206,120,.6) 0%,rgba(245,158,11,.3) 35%,rgba(245,158,11,0) 70%);opacity:.4;pointer-events:none;will-change:transform,opacity}
.lantern.lit:not(.today) .halo{opacity:.3}
.lantern.today .halo{width:200px;height:200px;opacity:.6;background:radial-gradient(circle,rgba(255,224,150,.8) 0%,rgba(245,158,11,.4) 32%,rgba(245,158,11,0) 70%);animation:todayPulse 2.8s ease-in-out infinite}
@keyframes todayPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.14);opacity:.72}}
.lantern.locked .halo{display:none}
.lan-svg{position:relative}
.lan-svg .thread{stroke:rgba(214,184,120,.5);stroke-width:1}
.lan-svg .ring{fill:none;stroke:#c8881f;stroke-width:1.4}
.lan-svg .cap{fill:#b3781b;stroke:#8a5d12;stroke-width:.5}
.lan-svg .base{fill:#b3781b}
.lan-svg .body{fill:rgba(20,40,34,.35);stroke:#c8881f;stroke-width:1.6}
.lan-svg .rib{stroke:rgba(200,136,31,.6);stroke-width:.8}
.lan-svg .flame{fill:url(#flameLit)}
.lantern.lit .lan-svg{filter:drop-shadow(0 0 4px rgba(245,158,11,.6))}
.lantern.locked .lan-svg{filter:none;opacity:.85}
.lantern.locked .lan-svg .ring{stroke:#33514b}
.lantern.locked .lan-svg .cap,.lantern.locked .lan-svg .base{fill:#2c423d;stroke:#22332f}
.lantern.locked .lan-svg .body{stroke:#33514b;fill:rgba(15,30,28,.5)}
.lantern.locked .lan-svg .rib{stroke:#2c423d}
.lantern.locked .lan-svg .flame{fill:url(#flameLock)}
.lantern.locked .lan-svg .thread{stroke:rgba(120,140,135,.35)}
.lantern.today .lan-svg{filter:drop-shadow(0 0 5px rgba(255,206,120,.8))}
.lantern .swing,.lantern .cap{transition:opacity .4s}

/* toast */
#toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(12px);z-index:55;font-family:var(--font-ui);font-weight:300;font-size:13px;letter-spacing:.08em;color:var(--cream);background:rgba(8,14,20,.82);border:.5px solid rgba(245,158,11,.4);border-radius:30px;padding:11px 20px;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;text-shadow:0 1px 4px rgba(0,0,0,.6);white-space:nowrap;max-width:90%}
#toast.show{opacity:1;transform:translate(-50%,-50%) translateY(0)}

/* spin-me fab + wheel popup */
.spin-fab{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));z-index:62;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;cursor:pointer;animation:fabIn .5s .25s both}
.spin-fab img{width:60px;height:60px;border-radius:50%;display:block;box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 16px rgba(245,158,11,.5);animation:fabSpin 16s linear infinite}
.spin-fab span{font-family:var(--font-ui);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);text-shadow:0 1px 5px rgba(0,0,0,.85)}
@keyframes fabSpin{to{transform:rotate(360deg)}}
@keyframes fabIn{from{opacity:0;transform:translateY(10px) scale(.6)}to{opacity:1;transform:none}}
#wheelpop,#pickpop{position:absolute;inset:0;z-index:65;display:none;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));background:rgba(4,10,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#wheelpop.open,#pickpop.open{display:flex}
.wheel-card{position:relative;width:100%;max-width:380px;max-height:90svh;overflow-y:auto;background:linear-gradient(176deg,#fbf6ec 0%,#f3ead7 100%);color:var(--ink);border-radius:14px;padding:30px 22px 26px;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(245,158,11,.25);animation:cardIn .5s cubic-bezier(.2,.85,.25,1) both}

@media (max-width:430px){
  .cap b{font-size:12px}
  .cap .date{font-size:9.5px}
  .foot-hint{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .type-caret,.tag{animation:none}
  #reveal.open .letter-card,#reveal.open .polaroid .frame img,#reveal.open .pcard .frame img,.lantern.today .halo,.spin-fab img,.wheel-card{animation:none}
}