@font-face{font-family:Andika;font-weight:700;font-display:swap;src:url(fonts/andika-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Andika;font-weight:700;font-display:swap;src:url(fonts/andika-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02AF}
@font-face{font-family:Grandstander;font-weight:800;font-display:swap;src:url(fonts/grandstander-latin-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Grandstander;font-weight:800;font-display:swap;src:url(fonts/grandstander-latin-ext-800.woff2) format("woff2");unicode-range:U+0100-02AF}
@property --lx{syntax:"<length>";inherits:true;initial-value:50vw}
@property --ly{syntax:"<length>";inherits:true;initial-value:40vh}

:root{--midnight:#0c123c;--dusk:#2d4d86;--snow:#e6eefa;--lantern:#ffd873;--holly:#2f7a55;--berry:#b1443f;--ink:#1a1a33}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:var(--midnight);color:var(--snow);font-family:Andika,"Trebuchet MS",sans-serif;font-weight:700;overscroll-behavior:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
h1,h2,.display{font-family:Grandstander,"Trebuchet MS",sans-serif;font-weight:800;margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:4px solid #fff;outline-offset:3px}

.pill{min-height:60px;padding:8px 24px;border-radius:32px;background:#ffffff22;font-size:21px;white-space:nowrap}
.pill:active{transform:scale(.96)}
.pill.gold{background:var(--lantern);color:var(--ink);box-shadow:0 0 26px #ffd87377}
.pill.big{min-height:80px;font-size:28px;padding:8px 34px;font-family:Grandstander,sans-serif;font-weight:800}
.pill[disabled]{opacity:.4}

/* gate + loading */
.gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:linear-gradient(var(--midnight),var(--dusk));text-align:center;padding:24px}
.gate h1{font-size:clamp(44px,8vw,84px);color:var(--lantern)}
.gate p{font-size:24px;margin:0}
.gate .sub{font-size:clamp(18px,2.6vw,26px);opacity:.85;margin-top:-12px}
.gate .hint{font-size:17px;opacity:.6}
.bar{width:min(420px,70vw);height:16px;border-radius:8px;background:#ffffff22;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--lantern);transition:width .15s}

/* stage */
.stage{position:relative;flex:1;min-height:0;overflow:hidden}
.stage svg.scene{position:absolute;inset:0;width:100%;height:100%}
.veil{position:absolute;inset:0;pointer-events:none;--lx:50vw;--ly:40vh;
  background:radial-gradient(circle min(36vh,330px) at var(--lx) var(--ly),#0000 45%,#080c33a8 100%);
  transition:--lx .55s cubic-bezier(.3,.9,.3,1),--ly .55s cubic-bezier(.3,.9,.3,1)}
.top{position:absolute;top:max(12px,env(safe-area-inset-top));left:14px;right:14px;display:flex;align-items:center;justify-content:flex-end;gap:14px;z-index:7}
.top .pill{background:#0c123ccc}
.scene-card{position:absolute;inset:0;display:grid;place-items:center;background:#0c123cf0;text-align:center;z-index:4;animation:fade .35s}
.scene-card h2{font-size:clamp(46px,8vw,92px);color:var(--lantern)}
.scene-card p{font-size:26px;margin:0 0 8px}

.c{transition:opacity .4s}
.c.hidden{opacity:0}
.inner{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s}
.c .m-open{display:none}
.c.talk .m-open{display:block;animation:mo .26s steps(2,jump-none) infinite alternate}
.c.talk .m-closed{display:none}
.c.talk .inner{animation:bob .46s ease-in-out infinite alternate}
.c.f-scared.talk .inner{animation:shiver .1s linear infinite alternate}
.c.f-sad.talk .inner{animation:droop 1.1s ease-in-out infinite alternate}
.c.f-excited.talk .inner{animation:hop .3s ease-in-out infinite alternate}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.4s infinite}
.tw{animation:tw 2.6s ease-in-out infinite alternate}
@keyframes mo{from{transform:scaleY(.25);transform-box:fill-box;transform-origin:center}to{transform:scaleY(1);transform-box:fill-box;transform-origin:center}}
@keyframes bob{from{transform:translateY(0) scale(1.05)}to{transform:translateY(-10px) scale(1.08)}}
@keyframes hop{from{transform:translateY(0) scale(1.06)}to{transform:translateY(-30px) scale(1.1)}}
@keyframes shiver{from{transform:translateX(-4px) scale(1.05)}to{transform:translateX(4px) scale(1.05)}}
@keyframes droop{from{transform:translateY(0) scale(1.03) rotate(-1.5deg)}to{transform:translateY(6px) scale(1.03) rotate(1.5deg)}}
@keyframes blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes tw{from{opacity:1}to{opacity:.3}}
@keyframes fade{from{opacity:0}}
.flakes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.flakes i{position:absolute;top:-16px;width:10px;height:10px;border-radius:50%;background:#fff;opacity:.8;animation:fall linear infinite}
@keyframes fall{to{transform:translate(50px,110vh)}}

/* caption strip */
.caption{flex:none;display:flex;align-items:center;gap:20px;min-height:clamp(150px,25vh,210px);padding:14px 24px calc(14px + env(safe-area-inset-bottom));background:var(--snow);color:var(--ink)}
.words{flex:1;min-width:0}
.who{font:800 21px Grandstander,sans-serif;color:#40508c;margin:0 0 9px}
.line{font-size:clamp(25px,3.5vw,40px);line-height:1.3;margin:0;max-width:30em}
.line.long{font-size:clamp(21px,2.75vw,31px)}
.line span{transition:color .1s}
.line.karaoke span{color:#9aa3bd}
.line.karaoke span.on{color:var(--ink)}
.line span.now{background:var(--lantern);border-radius:7px}
.controls{flex:none;display:flex;gap:12px;align-items:center}
.controls .pill{background:#1a1a331c}
.controls .pill.gold{background:var(--holly);color:#fff;box-shadow:none}

/* finale */
.finale{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#0c123ccc;text-align:center;animation:fade .5s}
.finale h2{font-size:clamp(52px,9vw,110px);color:var(--lantern)}
.finale p{font-size:clamp(20px,3vw,30px);margin:0}
#rotate{display:none;position:fixed;inset:0;z-index:50;background:var(--midnight);place-items:center;font:800 clamp(26px,7vw,40px) Grandstander,sans-serif;padding:24px;color:var(--lantern);text-align:center}
@media (orientation:portrait) and (max-width:1100px){#rotate{display:grid}}
@media (max-height:640px){.caption{min-height:120px}.controls .pill{min-height:50px;font-size:17px;padding:4px 14px}}
/* phones held sideways */
@media (max-height:500px){.caption{min-height:96px;padding:8px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.who{font-size:15px;margin-bottom:3px}.line{font-size:20px}.line.long{font-size:16px}.controls{gap:8px}.controls .pill{min-height:44px;padding:4px 14px}.top .pill{min-height:44px;font-size:16px}.pill.big{min-height:60px;font-size:22px}.gate{gap:16px}.gate h1{font-size:44px}.scene-card h2{font-size:40px}.scene-card p{font-size:18px}.finale h2{font-size:52px}}
@media (prefers-reduced-motion:reduce){.flakes,.tw,.c.talk .inner,.eyes{animation:none}.veil{transition:none}}