:root{
  --ink:#1d1b2e; --paper:#fffaf3; --violet:#2b2350; --gold:#ffc94a; --pink:#ff7aa8;
  --mint:#3ddc97; --red:#ff4d5e; --sky1:#c9d7ff; --sky2:#ffe3d1;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow-x:hidden}
body{font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,#2b2350 0%,#53407e 100%);overscroll-behavior:none}
#app{position:relative;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom));overflow:hidden}
button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}
button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#hud{display:flex;gap:10px;align-items:center;margin-bottom:6px}
#hud[hidden]{display:none}
.meters{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.mlabel{display:flex;justify-content:space-between;color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.bar{height:11px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .35s ease}
#b-supp{background:linear-gradient(90deg,#7ad7ff,#ffd84a,#ff4d5e)}
#b-susp{background:linear-gradient(90deg,#b9a7ff,#ff7aa8,#ff3355)}
.meter.danger .bar{animation:pulse .6s infinite alternate}
@keyframes pulse{to{box-shadow:0 0 0 3px rgba(255,77,94,.55)}}
.pill{flex:none;width:64px;height:52px;border:none;border-radius:16px;background:var(--paper);font-size:22px;font-weight:800;
  box-shadow:0 4px 0 #c8b9a3;display:flex;align-items:center;justify-content:center;gap:2px}
.pill span{font-size:15px}
.pill:active{transform:translateY(3px);box-shadow:0 1px 0 #c8b9a3}
.pill:disabled{opacity:.45}
#sceneTag{color:#ffe7a3;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:2px 2px 6px}
#sceneTag[hidden]{display:none}
#stage{flex:1;position:relative;border-radius:24px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 30px rgba(0,0,0,.25);min-height:0}
footer{text-align:center;color:rgba(255,255,255,.7);font-size:11px;padding:8px 4px 0}
.screen{flex:1;display:flex;flex-direction:column;padding:18px 16px;gap:12px;min-height:0;overflow-y:auto;overflow-x:hidden}
.center{align-items:center;text-align:center;justify-content:center}
h1{font-size:34px;line-height:1.02;margin:0;letter-spacing:-.02em}
h2{font-size:24px;margin:0;line-height:1.1}
p{margin:0;line-height:1.4}
.sub{color:#6a5f80;font-size:14px}
.btn{border:none;border-radius:18px;padding:15px 20px;font-size:18px;font-weight:800;background:var(--violet);color:#fff;
  box-shadow:0 5px 0 #120e26;min-width:180px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #120e26}
.btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 5px 0 #c9921b}
.btn.ghost{background:#ece4f7;color:var(--violet);box-shadow:0 5px 0 #c9bde0}
.title-wrap{background:radial-gradient(circle at 50% 30%,#fff6dd 0,#ffe1ef 45%,#d9e1ff 100%)}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8b5bd6}
.ling{width:150px;height:auto;display:block}
.ling.small{width:64px}
.ling.mid{width:92px}
.ending .bigemoji{font-size:60px}
.aura{filter:drop-shadow(0 0 14px rgba(255,201,74,.9))}
.best{font-size:13px;background:#fff;border-radius:12px;padding:7px 12px;color:#5b4a7a;font-weight:700}
.how{font-size:13.5px;text-align:left;background:rgba(255,255,255,.75);border-radius:14px;padding:10px 12px;color:#3c3355;width:100%}
.how li{margin:3px 0}
.how ul{margin:0;padding-left:18px}
.intro{background:linear-gradient(180deg,var(--sky1),var(--sky2))}
.bigemoji{font-size:84px;line-height:1}
.time{font-weight:800;color:#8b5bd6;font-size:13px;letter-spacing:.1em}
.bubble{background:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 2px 0 rgba(0,0,0,.06);font-size:16px;line-height:1.4;position:relative}
.who{display:flex;align-items:center;gap:10px}
.who .face{font-size:40px;flex:none}
.cards{display:flex;flex-direction:column;gap:10px}
.card{border:none;text-align:left;background:#fff;border-radius:16px;padding:14px;font-size:16px;font-weight:700;
  box-shadow:0 4px 0 #ddd2c3;display:flex;gap:10px;align-items:center}
.card .e{font-size:26px;flex:none}
.card:active{transform:translateY(3px);box-shadow:0 1px 0 #ddd2c3}
.reaction{background:#2b2350;color:#fff;border-radius:16px;padding:14px;font-size:16px;line-height:1.4;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.deltas{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:800}
.deltas span{background:#f1ebfa;border-radius:99px;padding:4px 10px}
.deltas .bad{background:#ffe0e4;color:#b3122a}.deltas .good{background:#dcf7ea;color:#0d7a4b}
.spacer{flex:1}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* dodge */
.field{position:relative;flex:1;min-height:300px;background:linear-gradient(180deg,#9fb4c9,#c9d3dc);overflow:hidden;touch-action:none}
.field .lane{position:absolute;top:0;bottom:0;width:2px;background:repeating-linear-gradient(180deg,#fff 0 18px,transparent 18px 36px);opacity:.7}
.obj{position:absolute;font-size:38px;line-height:1;transform:translate(-50%,0);will-change:top}
.player{position:absolute;bottom:14px;transform:translateX(-50%);transition:left .12s ease-out;width:58px}
.ctrl{display:flex;gap:10px;padding:10px}
.ctrl button{flex:1;height:64px;border:none;border-radius:16px;background:#fff;font-size:28px;box-shadow:0 4px 0 #ddd2c3}
.ctrl button:active{transform:translateY(3px);box-shadow:0 1px 0 #ddd2c3}
.gamebar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-weight:800;font-size:14px;background:#fff;gap:8px}
/* quiz */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{border:none;background:#fff;border-radius:16px;padding:16px 10px;font-size:17px;font-weight:800;box-shadow:0 4px 0 #ddd2c3;position:relative;min-height:66px}
.opt.know::after{content:"✨";position:absolute;top:4px;right:7px;font-size:14px}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 #ddd2c3}
.opt.picked-r{background:#dcf7ea}.opt.picked-w{background:#ffe0e4}
.chalk{background:#24453a;color:#f4f1e6;border-radius:16px;padding:16px;font-size:19px;font-weight:700;min-height:86px;display:flex;align-items:center}
.tally{display:flex;justify-content:space-between;font-size:14px;font-weight:800;color:#5b4a7a}
/* hold */
.holdwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px}
.gauge{position:relative;width:100%;height:38px;border-radius:14px;background:#efe7f8;overflow:hidden;border:3px solid #2b2350}
.gauge .zone{position:absolute;top:0;bottom:0;background:rgba(61,220,151,.55);border-left:2px dashed #0d7a4b;border-right:2px dashed #0d7a4b}
.gauge .danger{position:absolute;top:0;bottom:0;right:0;left:85%;background:rgba(255,77,94,.35)}
.gauge .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#7ad7ff,#ffd84a,#ff4d5e);opacity:.85}
.gauge .needle{position:absolute;top:-2px;bottom:-2px;width:4px;background:#2b2350;left:0}
.gaugelabels{display:flex;justify-content:space-between;width:100%;font-size:11px;font-weight:800;color:#6a5f80}
.holdbtn{width:170px;height:170px;border-radius:50%;border:none;background:radial-gradient(circle at 40% 35%,#ffe58f,#ffb21f);
  box-shadow:0 8px 0 #c9861b,0 0 0 8px rgba(255,201,74,.25);font-size:22px;font-weight:900;color:#3a2600;touch-action:none;user-select:none;-webkit-user-select:none}
.holdbtn.holding{transform:translateY(5px) scale(.97);box-shadow:0 3px 0 #c9861b,0 0 0 18px rgba(255,120,60,.25)}
.event{font-size:20px;font-weight:900}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
/* attack */
.sky{position:relative;flex:1;min-height:260px;background:linear-gradient(180deg,#5a3c8f,#f39bb0 70%,#ffd7a8);overflow:hidden;touch-action:manipulation}
.monster{position:absolute;left:50%;font-size:76px;transform:translateX(-50%);transition:left .6s ease;line-height:1;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.school{position:absolute;bottom:0;left:0;right:0;height:64px;display:flex;align-items:flex-end;justify-content:center;font-size:56px;line-height:1}
.watchers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;background:#fff}
.watcher{border-radius:12px;background:#f3eefb;padding:6px 2px;text-align:center;font-size:11px;font-weight:800;color:#5b4a7a;transition:background .15s}
.watcher .eye{font-size:26px;display:block;line-height:1.2}
.watcher.away{background:#dcf7ea}
.sky.open::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 5px rgba(61,220,151,.9);pointer-events:none}
.status{position:absolute;top:10px;left:0;right:0;text-align:center;color:#fff;font-weight:900;font-size:16px;text-shadow:0 2px 4px rgba(0,0,0,.4);padding:0 10px}
.flick{position:absolute;font-size:40px;animation:fly 1s ease-in forwards}
@keyframes fly{to{transform:translate(160px,-420px) scale(.2) rotate(720deg);opacity:0}}
.flash{position:absolute;inset:0;background:#fff;animation:flash .35s forwards;pointer-events:none}
@keyframes flash{to{opacity:0}}
/* rhythm */
.rarena{position:relative;flex:1;min-height:300px;background:radial-gradient(circle at 50% 45%,#ffcf8a,#f2729a 55%,#4a2d7a);overflow:hidden;touch-action:manipulation}
.target,.ring{position:absolute;left:50%;top:45%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%}
.target{border:6px solid rgba(255,255,255,.95);box-shadow:0 0 18px rgba(255,255,255,.6)}
.ring{border:6px solid #ffe24a;box-shadow:0 0 20px #ffe24a;will-change:transform}
.core{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%)}
.judge{position:absolute;left:0;right:0;top:72%;text-align:center;color:#fff;font-size:26px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.35)}
/* toasts */
#toasts{position:absolute;left:12px;right:12px;bottom:46px;display:flex;flex-direction:column-reverse;align-items:center;gap:6px;pointer-events:none;z-index:20}
.toast{background:#1d1b2e;color:#fff;border-radius:14px;padding:10px 14px;font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(0,0,0,.3);
  animation:tin .25s ease,tout .4s ease 2.2s forwards;max-width:100%;text-align:center}
.toast.boom{background:linear-gradient(90deg,#ff4d5e,#ff9a3c);font-size:15px}
@keyframes tin{from{transform:translateY(-10px);opacity:0}}
@keyframes tout{to{opacity:0;transform:translateY(-8px)}}
/* ending */
.ending.good{background:radial-gradient(circle at 50% 20%,#fff6c9,#dcf7ea 60%,#c9e8ff)}
.ending.mid{background:radial-gradient(circle at 50% 20%,#fff1d6,#ffd9e5 60%,#e3d6ff)}
.ending.bad{background:radial-gradient(circle at 50% 20%,#ffd1c4,#ff9aa8 55%,#a07ad6)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.stat{background:rgba(255,255,255,.8);border-radius:14px;padding:9px;font-size:12px;font-weight:700;color:#5b4a7a}
.stat b{display:block;font-size:20px;color:var(--ink)}
.newbest{background:var(--gold);border-radius:99px;padding:5px 12px;font-weight:900;font-size:13px;animation:pop .3s}
@media (max-height:700px){.ling{width:110px}h1{font-size:28px}.bigemoji{font-size:64px}.holdbtn{width:140px;height:140px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

#power{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:8px 10px 9px;margin-bottom:6px;color:#fff}
#power[hidden]{display:none}
.phead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plabel{font-size:11px;font-weight:900;letter-spacing:.12em;color:#ffe7a3}
.pread b{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pread small{font-size:15px;font-weight:900;margin-left:1px}
.prealm{margin-left:auto;font-size:12px;font-weight:800;background:rgba(255,255,255,.16);border-radius:99px;padding:3px 9px}
#power[data-tier=warm] .pread{color:#ffe27a}
#power[data-tier=hot] .pread{color:#ff9a6b}
#power[data-tier=mtn] .pread,#power[data-tier=max] .pread{color:#ff5a6e;text-shadow:0 0 12px rgba(255,90,110,.7)}
#power[data-tier=max]{animation:pulse .4s infinite alternate}
#p-slider{width:100%;margin:6px 0 6px;accent-color:#ffc94a;height:28px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.chip{border:none;border-radius:10px;background:rgba(255,255,255,.92);color:var(--ink);font-size:11px;font-weight:800;padding:6px 3px;line-height:1.15;min-height:32px}
.chip.on{background:var(--gold);box-shadow:0 0 0 2px #fff}
.chip.danger{background:#ff4d5e;color:#fff;grid-column:span 1}
.hint{font-size:13px;color:#6a4fb0;font-weight:700;line-height:1.35}
.hint.small{font-size:12px;color:#8a7fa3}
.nopad{padding:0;gap:0}
/* sandbox */
.sbox{position:relative;height:250px;flex:none;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#8fc6ff,#dff0ff 70%)}
.sun{position:absolute;top:10px;right:14px;font-size:30px}
.sclouds{position:absolute;top:28px;left:10px;right:60px;font-size:30px;display:flex;justify-content:space-around;transition:opacity .6s,transform .6s}
.mtn{position:absolute;left:50%;bottom:44px;width:190px;transform:translateX(-50%)}
.mtn path{transition:transform 1.2s cubic-bezier(.2,1.4,.4,1)}
.ground{position:absolute;bottom:0;left:0;right:0;height:50px;background:#7bc96f;display:flex;justify-content:space-around;align-items:flex-start;font-size:26px;padding-top:0}
.ground span{margin-top:-20px;transition:transform .6s}
.sbling{position:absolute;left:10px;bottom:22px}
.ball{position:absolute;left:62px;bottom:52px;font-size:22px}
.fx-roll{animation:roll 1s ease-out forwards}
.fx-throw{animation:throw 1.1s ease-out forwards}
.fx-fast{animation:fast .45s ease-in forwards}
@keyframes roll{to{transform:translateX(40px) rotate(360deg)}}
@keyframes throw{50%{transform:translate(120px,-90px)}to{transform:translate(250px,10px) rotate(540deg)}}
@keyframes fast{to{transform:translate(420px,-160px) scale(.4)}}
.crater{position:absolute;right:30px;bottom:30px;font-size:40px;opacity:0;transform:scale(.2);transition:all .4s}
.t-crater .crater,.t-clear .crater,.t-orbit .crater,.t-mountain .crater{opacity:1;transform:scale(1.4)}
.t-clouds .sclouds span{opacity:0}
.t-crater .ground span,.t-clear .ground span,.t-orbit .ground span,.t-mountain .ground span{transform:rotate(25deg)}
.t-clear .sclouds,.t-orbit .sclouds,.t-mountain .sclouds{opacity:0;transform:translateY(-60px)}
.t-orbit .sbling{animation:bonk .6s .5s}
@keyframes bonk{30%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}}
.t-mountain .ml{transform:translate(-26px,6px) rotate(-8deg)}
.t-mountain .mr{transform:translate(26px,6px) rotate(8deg)}
.t-mountain{background:linear-gradient(180deg,#ffb36b,#ffe0b8 70%)}
/* launch */
.launch{position:absolute;inset:0;z-index:50;overflow:hidden;background:linear-gradient(180deg,#000 0%,#06081f 25%,#1b2a7a 45%,#3f7fe0 65%,#8fd0ff 85%,#cfeaff 100%);background-size:100% 500%;background-position:0 100%;animation:skyup 4.2s ease-in forwards}
@keyframes skyup{to{background-position:0 0}}
.stars{position:absolute;inset:0;opacity:0;background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),radial-gradient(2px 2px at 40% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 10% 85%,#fff,transparent),radial-gradient(2px 2px at 55% 45%,#fff,transparent);background-size:180px 180px;animation:fadein 1.5s 2.6s forwards}
@keyframes fadein{to{opacity:1}}
.cloud{position:absolute;top:-15%;font-size:70px;opacity:.95;animation:cloud .9s linear 2 both}
@keyframes cloud{from{top:-15%}to{top:115%}}
.earth{position:absolute;left:50%;top:86%;width:1400px;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 30% 30%,#4cc36a 0 9%,transparent 10%),radial-gradient(circle at 65% 55%,#4cc36a 0 12%,transparent 13%),radial-gradient(circle at 45% 80%,#e9f4ff 0 8%,transparent 9%),radial-gradient(circle at 40% 35%,#6fd3ff,#1e6fd6 55%,#0b3a8a);
  box-shadow:0 0 60px rgba(111,211,255,.8);animation:earth 5.6s ease-in-out forwards}
@keyframes earth{0%{top:86%;width:1400px}30%{top:90%;width:1100px}100%{top:70%;width:150px}}
.rocketling{position:absolute;left:50%;top:38%;transform:translate(-50%,0);text-align:center;animation:rise 4.4s ease-in-out forwards}
.rocketling .ling{width:120px}
.trail{font-size:48px;transform:rotate(180deg);margin-top:-14px;animation:flicker .12s infinite alternate,trailout .6s 3.8s forwards}
@keyframes flicker{to{transform:rotate(180deg) scale(1.15)}}
@keyframes trailout{to{opacity:0}}
@keyframes rise{0%{top:72%}20%{top:42%}80%{top:40%}100%{top:38%;transform:translate(-50%,0) rotate(-12deg)}}
.dots{position:absolute;left:60%;top:33%;background:#fff;border-radius:16px;padding:4px 14px;font-size:24px;font-weight:900;opacity:0;animation:fadein .4s 4.4s forwards}
.lcap{position:absolute;left:16px;right:16px;top:max(40px,env(safe-area-inset-top));text-align:center;color:#fff;opacity:0;animation:fadein .8s 5.2s forwards;display:flex;flex-direction:column;align-items:center;gap:8px}
.lcap p{font-size:22px;font-weight:900;font-style:italic;text-shadow:0 2px 8px #000}
.lcap small{color:#ffe7a3;font-weight:800}