:root{--g:#19ff8c;--o:#ff8a1f;--p:#ff3fa4;--c:#3ff3ff;--ink:#1a0b33;--glass:rgba(26,11,51,.55);font-family:"Arial Black","Segoe UI Black",Arial,Helvetica,sans-serif;color:#fff;background:#2a0f5c;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:0;background:none}
button:focus-visible{outline:3px solid var(--c);outline-offset:4px}
svg{width:22px;height:22px;fill:currentColor}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block}
#fx{position:fixed;inset:0;pointer-events:none;z-index:3}
#fx.hit{animation:hit .5s ease-out}#fx.slam{animation:slam .35s ease-out}#fx.boost{animation:boostfx .6s ease-out}#fx.eighty{animation:eighty .8s ease-out}
@keyframes hit{from{box-shadow:inset 0 0 160px 40px rgba(255,40,80,.85)}to{box-shadow:inset 0 0 0 0 rgba(255,40,80,0)}}
@keyframes slam{from{box-shadow:inset 0 -80px 120px 0 rgba(25,255,140,.6)}to{box-shadow:none}}
@keyframes boostfx{from{background:radial-gradient(circle at 50% 70%,rgba(160,250,255,.55),transparent 60%)}to{background:transparent}}
@keyframes eighty{0%,40%{box-shadow:inset 0 0 140px 30px rgba(255,138,31,.75)}to{box-shadow:none}}
body.boosting #fx{box-shadow:inset 0 0 110px 10px rgba(63,243,255,.4)}
header{position:fixed;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) 18px 0;pointer-events:none}
.arcade-mark{color:#fff;line-height:1;font-size:12px;letter-spacing:.5px;text-shadow:0 0 10px var(--p)}.arcade-mark span{display:block;font-size:7px;letter-spacing:4px;margin-top:4px;color:var(--g);text-shadow:0 0 8px var(--g)}
nav{display:flex;gap:8px;pointer-events:auto}
nav button{width:40px;height:40px;border-radius:12px;background:var(--glass);border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;backdrop-filter:blur(6px)}
nav button svg{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}#sound svg path:first-child,#pause svg path{fill:#fff;stroke:none}
#sound.off .wave{opacity:.2}
#intro{position:fixed;inset:0;pointer-events:none;z-index:5}
.title{position:absolute;top:12%;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap}
.badge{font-size:10px;letter-spacing:4px;color:var(--g);text-shadow:0 0 10px var(--g)}
h1{margin:12px 0 0;font-size:clamp(54px,11vw,128px);line-height:.82;font-style:italic;letter-spacing:-3px;transform:skewX(-8deg) rotate(-4deg);
  background:linear-gradient(180deg,#fff 0%,#ffe9a8 38%,#ff8a1f 52%,#ff3fa4 78%,#7a2cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #2a0f5c) drop-shadow(0 0 18px rgba(255,63,164,.65))}
h1 span{display:block;font-size:1.25em;letter-spacing:-4px;background:linear-gradient(180deg,#d9fff0 0%,#19ff8c 50%,#0a8a5a 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 22px rgba(25,255,140,.8))}
.launch{position:absolute;bottom:max(34px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(320px,80vw);text-align:center;pointer-events:auto}
.primary{width:100%;padding:18px 24px;border-radius:16px;font-size:26px;font-style:italic;letter-spacing:2px;color:var(--ink);
  background:linear-gradient(180deg,#b9ffd9,var(--g));box-shadow:0 0 0 2px #fff inset,0 0 30px rgba(25,255,140,.75),0 6px 0 #0a7a4a;transition:transform .08s}
.primary:active{transform:translateY(4px);box-shadow:0 0 0 2px #fff inset,0 0 20px rgba(25,255,140,.6),0 2px 0 #0a7a4a}
.keys{display:flex;justify-content:center;gap:10px;margin-top:16px}.keys span{font-family:Arial,sans-serif;font-weight:900;font-size:13px;padding:5px 9px;border-radius:7px;border:1.5px solid rgba(255,255,255,.5);background:var(--glass)}
@media(hover:none){.keys{display:none}}
#hud{position:fixed;inset:0;pointer-events:none;z-index:4}
.hud-top{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 50px);left:16px;right:16px;display:flex;align-items:center;gap:12px;max-width:620px;margin:auto}
.pill{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:12px;background:var(--glass);border:1.5px solid rgba(255,210,63,.6);box-shadow:0 0 14px rgba(255,170,34,.35);font-size:20px;font-style:italic}
.pint-icon{width:13px;height:20px;border-radius:2px 2px 4px 4px;background:linear-gradient(180deg,#fff6dc 0 26%,#2a1610 26%);box-shadow:0 0 0 2px #ffd23f,0 0 10px #ffaa22}
.route{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.18);position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
#route-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--g),var(--c));box-shadow:0 0 10px var(--g)}
.pub-icon{position:absolute;right:-4px;top:50%;width:14px;height:14px;transform:translateY(-50%);border-radius:3px;background:var(--o);box-shadow:0 0 10px var(--o)}
.lives{display:flex;gap:4px}.lives i{width:22px;height:22px;background:var(--g);filter:drop-shadow(0 0 6px var(--g));transition:opacity .3s,transform .3s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11C9 6 4 7 5.5 10.5 3 12 4 16 8 14.5 7 18 10.5 19 12 15c1.5 4 5 3 4-.5 4 1.5 5-2.5 2.5-4C20 7 15 6 12 11zM11.3 14h1.4l.6 8h-2.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11C9 6 4 7 5.5 10.5 3 12 4 16 8 14.5 7 18 10.5 19 12 15c1.5 4 5 3 4-.5 4 1.5 5-2.5 2.5-4C20 7 15 6 12 11zM11.3 14h1.4l.6 8h-2.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.lives i.lost{opacity:.18;transform:scale(.8);filter:none}
.speed{position:absolute;left:18px;bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:baseline;gap:6px;font-style:italic;transform:skewX(-8deg)}
.speed b{font-size:52px;line-height:1;color:#fff;text-shadow:0 0 12px var(--c),0 0 28px rgba(63,243,255,.6)}
.speed small{font-size:11px;letter-spacing:2px;color:var(--c)}
.speed.hot b{color:#ffe0b0;text-shadow:0 0 12px var(--o),0 0 34px var(--o);animation:flicker .12s steps(2) infinite}.speed.hot small{color:var(--o)}
@keyframes flicker{50%{opacity:.82}}
.jet{position:absolute;right:16px;bottom:max(18px,env(safe-area-inset-bottom));width:74px;height:74px;border-radius:50%;pointer-events:auto;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(26,11,51,.75) 55%,rgba(26,11,51,.35));border:2px solid rgba(63,243,255,.35);opacity:.6;transition:opacity .2s}
.jet svg{width:28px;height:28px;color:rgba(255,255,255,.55)}
.jet .cells{position:absolute;inset:-7px;display:block}.jet .cells i{position:absolute;left:50%;top:50%;width:6px;height:14px;margin:-7px -3px;border-radius:3px;background:rgba(255,255,255,.2)}
.jet .cells i:nth-child(1){transform:rotate(-72deg) translateY(-41px)}.jet .cells i:nth-child(2){transform:rotate(-36deg) translateY(-41px)}.jet .cells i:nth-child(3){transform:translateY(-41px)}.jet .cells i:nth-child(4){transform:rotate(36deg) translateY(-41px)}.jet .cells i:nth-child(5){transform:rotate(72deg) translateY(-41px)}
.jet .cells i.full{background:#ffd23f;box-shadow:0 0 8px #ffaa22}
.jet.ready{opacity:1;border-color:var(--c);box-shadow:0 0 22px rgba(63,243,255,.6);animation:ready 1.1s ease-in-out infinite}.jet.ready svg{color:#fff}
.jet.firing{opacity:1;border-color:#fff;box-shadow:0 0 40px var(--c);background:radial-gradient(circle,rgba(160,250,255,.6),rgba(26,11,51,.4))}.jet.firing svg{color:#fff}
.jet.empty{animation:nope .35s}
@keyframes ready{50%{box-shadow:0 0 34px rgba(63,243,255,.95)}}@keyframes nope{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#gesture{position:fixed;left:50%;bottom:24%;width:150px;height:150px;transform:translateX(-50%);pointer-events:none;z-index:5;animation:fade 2.6s ease-in forwards}
#gesture i{position:absolute;width:26px;height:26px;border:solid #fff;border-width:0 5px 5px 0;filter:drop-shadow(0 0 6px var(--g));opacity:.9}
.g-left{left:0;top:62px;transform:rotate(135deg);animation:nudgeL 1s infinite}.g-right{right:0;top:62px;transform:rotate(-45deg);animation:nudgeR 1s infinite}
.g-up{left:62px;top:0;transform:rotate(-135deg);animation:nudgeU 1s infinite}.g-down{left:62px;bottom:0;transform:rotate(45deg);animation:nudgeD 1s infinite}
@keyframes nudgeL{50%{margin-left:-10px}}@keyframes nudgeR{50%{margin-right:-10px}}@keyframes nudgeU{50%{margin-top:-10px}}@keyframes nudgeD{50%{margin-bottom:-10px}}@keyframes fade{0%,70%{opacity:1}to{opacity:0}}
#notice{position:fixed;top:30%;left:50%;transform:translateX(-50%) skewX(-8deg);font-size:26px;font-style:italic;white-space:nowrap;pointer-events:none;z-index:5;text-shadow:0 0 14px var(--p),0 3px 0 #2a0f5c;animation:pop .25s ease-out}
#notice:empty{display:none}#notice.good{color:#d9fff0;text-shadow:0 0 14px var(--c),0 3px 0 #2a0f5c}#notice.bad{color:#ffd0d8;text-shadow:0 0 14px #ff2850,0 3px 0 #2a0f5c}
#notice.eighty{font-size:58px;color:#fff1c8;text-shadow:0 0 18px var(--o),0 0 40px #ff3a00,0 4px 0 #2a0f5c}
@keyframes pop{from{transform:translateX(-50%) skewX(-8deg) scale(1.6);opacity:0}}
#result{position:fixed;inset:0;display:grid;place-items:center;background:rgba(26,11,51,.45);backdrop-filter:blur(5px);z-index:8;padding:24px}
.result-card{width:min(360px,100%);border-radius:22px;background:linear-gradient(180deg,rgba(58,22,110,.92),rgba(26,11,51,.95));padding:28px 24px;text-align:center;border:2px solid rgba(255,63,164,.6);box-shadow:0 0 40px rgba(255,63,164,.4)}
h2{font-size:40px;font-style:italic;letter-spacing:-1px;line-height:1;margin:16px 0 10px;transform:skewX(-8deg);text-shadow:0 0 16px var(--p)}
.result-card p{font-family:Arial,sans-serif;font-weight:700;font-size:14px;line-height:1.5;color:#e8d9ff;margin:0}
#result-stats{display:flex;justify-content:center;gap:18px;margin:20px 0 22px}#result-stats span{display:flex;flex-direction:column;font-size:9px;letter-spacing:2px;color:var(--c)}#result-stats b{font-size:26px;color:#fff;font-style:italic;letter-spacing:0}
.result-card .primary{font-size:19px;padding:15px}
#error{position:fixed;inset:0;z-index:20;display:grid;align-content:center;padding:30px;background:#2a0f5c;text-align:center;font-family:Arial,sans-serif}
@media(max-width:600px){.speed b{font-size:40px}.hud-top{top:calc(max(16px,env(safe-area-inset-top)) + 48px)}.title{top:14%}}
@media(max-height:520px){.title{top:8%}h1{font-size:54px}.launch{bottom:18px;width:260px}.primary{padding:12px}.hud-top{top:60px}}
@media(prefers-reduced-motion:reduce){#fx,#notice,.jet,.speed b,#gesture i{animation:none!important}}