:root{--cyan:#22f3ff;--violet:#a35bff;--pink:#ff3fb4;--gold:#ffd36b;--ink:#03040c;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  --f:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:#fff;font-family:var(--f);
  overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
canvas{position:fixed;inset:0;display:block;touch-action:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:calc(var(--st) + 56px) calc(var(--sr) + 20px) calc(var(--sb) + 28px) calc(var(--sl) + 20px);text-align:center}
#start{background:linear-gradient(180deg,rgba(3,4,12,.65),rgba(3,4,12,0) 35%,rgba(3,4,12,0) 55%,rgba(3,4,12,.75))}
.logo{font-weight:900;font-style:italic;font-size:clamp(46px,14vw,104px);letter-spacing:-.02em;line-height:1;
  text-shadow:0 0 18px rgba(34,243,255,.85),0 0 42px rgba(163,91,255,.6);animation:hum 2.4s ease-in-out infinite}
.logo span{color:var(--pink);text-shadow:0 0 18px var(--pink)}
@keyframes hum{50%{text-shadow:0 0 26px rgba(34,243,255,1),0 0 60px rgba(163,91,255,.8)}}
.tag{margin-top:12px;font-size:clamp(15px,4.2vw,20px);color:#c9d2ff}.tag b{color:#fff}
.bottom{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.big{width:min(86vw,380px);padding:20px 0;border-radius:18px;font-weight:900;font-size:clamp(22px,6.4vw,30px);letter-spacing:.06em;color:#020313;
  background:linear-gradient(90deg,var(--cyan),#7fe9ff 45%,var(--violet));box-shadow:0 0 28px rgba(34,243,255,.55),0 10px 30px rgba(0,0,0,.5);
  animation:pulse 1.4s ease-in-out infinite}
.big:active{transform:scale(.97)}
@keyframes pulse{50%{box-shadow:0 0 44px rgba(34,243,255,.9),0 10px 30px rgba(0,0,0,.5)}}
.best{font-size:14px;letter-spacing:.14em;color:#9fb0e6}.best b{color:#fff;font-size:20px;margin-left:6px;letter-spacing:0}
.sub{font-size:12px;color:#7884b8;min-height:1em}
.howto{font-size:13px;color:#8b98cc}
#mute{position:fixed;top:calc(var(--st) + 10px);right:calc(var(--sr) + 10px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,14,40,.6);border:1px solid rgba(34,243,255,.35);color:var(--cyan);z-index:5}
#mute .off{display:none}#mute[data-muted="1"] .on{display:none}#mute[data-muted="1"] .off{display:block}#mute[data-muted="1"]{color:#7884b8;border-color:#333a66}
#hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:center;gap:14px;padding:calc(var(--st) + 10px) 64px 0;pointer-events:none}
.hud-box{min-width:96px;padding:6px 14px;border-radius:14px;background:rgba(5,8,26,.55);border:1px solid rgba(34,243,255,.25);display:flex;flex-direction:column;align-items:center}
.hud-box span{font-weight:900;font-size:30px;line-height:1.05;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(34,243,255,.7)}
.hud-box.right span{color:var(--gold);text-shadow:0 0 12px rgba(255,211,107,.6)}
.hud-box small{font-size:10px;letter-spacing:.2em;color:#8b98cc}
.bump{animation:bump .28s ease-out}@keyframes bump{30%{transform:scale(1.35)}}
#hint{position:fixed;left:0;right:0;top:34%;text-align:center;font-weight:900;font-size:clamp(26px,8vw,40px);letter-spacing:.06em;pointer-events:none;
  text-shadow:0 0 18px rgba(34,243,255,.9);animation:blink 1s steps(2,start) infinite}
#hint small{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:#c9d2ff;margin-top:6px;text-shadow:none}
@keyframes blink{50%{opacity:.55}}
#prompt{position:fixed;left:0;right:0;top:calc(var(--st) + 100px);text-align:center;font-weight:900;font-style:italic;font-size:clamp(34px,11vw,64px);color:var(--pink);pointer-events:none;
  text-shadow:0 0 14px var(--pink),0 0 40px rgba(255,63,180,.7);-webkit-text-stroke:1px #fff}
#prompt.flash{animation:promptin .9s ease-out both}
@keyframes promptin{0%{transform:scale(.4) rotate(-6deg);opacity:0}15%{transform:scale(1.15) rotate(-3deg);opacity:1}25%{transform:scale(1) rotate(-3deg)}
  40%{opacity:1}50%{opacity:.35}60%{opacity:1}100%{transform:scale(1.04) rotate(-3deg);opacity:.9}}
#results{justify-content:center;background:radial-gradient(ellipse at 50% 45%,rgba(3,4,12,.35),rgba(3,4,12,.82))}
.panel{display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px}
#results.in .panel{animation:rin .35s cubic-bezier(.2,1.4,.4,1) both}@keyframes rin{0%{transform:translateY(30px) scale(.9);opacity:0}}
.newbest{font-weight:900;font-size:16px;letter-spacing:.3em;color:#020313;background:var(--gold);padding:6px 14px;border-radius:999px;margin-bottom:8px;box-shadow:0 0 24px rgba(255,211,107,.7);animation:pulse 1s infinite}
.score{font-weight:900;font-size:clamp(68px,22vw,128px);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(163,91,255,.9)}
.pts{font-size:12px;letter-spacing:.3em;color:#8b98cc;margin-top:2px}
.label{margin-top:16px;font-weight:900;font-style:italic;font-size:clamp(26px,8vw,40px);padding:6px 20px;border-radius:999px;border:2px solid var(--cyan);color:var(--cyan);background:rgba(34,243,255,.08)}
.label[data-label="flight-god"]{color:var(--gold);border-color:var(--gold);background:rgba(255,211,107,.1);text-shadow:0 0 16px rgba(255,211,107,.8)}
.label[data-label="absolute-menace"]{color:var(--pink);border-color:var(--pink);background:rgba(255,63,180,.1);text-shadow:0 0 16px rgba(255,63,180,.8)}
.label[data-label="coward-landing"]{color:#9fb0e6;border-color:#4b5893}
.blurb{margin-top:8px;font-style:italic;color:#c9d2ff;font-size:15px}
.row{display:flex;gap:10px;margin:20px 0 6px;width:100%}
.row>div{flex:1;padding:10px 4px;border-radius:14px;background:rgba(10,14,40,.6);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column}
.row b{font-size:22px;font-weight:900}.row small{font-size:10px;letter-spacing:.2em;color:#8b98cc;margin-top:2px}
#rGrade[data-grade="perfect"]{color:var(--gold)}#rGrade[data-grade="crash"]{color:var(--pink)}#rGrade[data-grade="clean"]{color:var(--cyan)}
.math{font-size:12px;color:#7884b8;margin-bottom:18px;min-height:1em}
.ghost{margin-top:12px;width:min(86vw,380px);padding:14px 0;border-radius:16px;font-weight:800;letter-spacing:.14em;border:2px solid rgba(163,91,255,.8);color:#e6dcff;background:rgba(163,91,255,.12)}
.tap{margin-top:12px;font-size:12px;color:#7884b8}
#toast{position:fixed;left:50%;bottom:calc(var(--sb) + 24px);transform:translateX(-50%);padding:10px 18px;border-radius:999px;background:#0e1436;border:1px solid var(--cyan);font-weight:700;font-size:14px;z-index:9}
#toast.show{animation:rin .25s ease-out}
@media (orientation:landscape) and (max-height:560px){
  .screen{padding-top:calc(var(--st) + 14px);padding-bottom:calc(var(--sb) + 12px)}
  .logo{font-size:min(14vh,72px)}.tag{margin-top:4px}
  .score{font-size:min(20vh,96px)}.label{margin-top:6px;font-size:min(7vh,28px)}.row{margin:8px 0 2px}.big{padding:12px 0}.ghost{padding:9px 0;margin-top:6px}.blurb,.tap{display:none}.math{margin-bottom:8px}
  #hint{top:22%}#prompt{top:calc(var(--st) + 70px)}
}