:root{--cobalt:#1c3ff0;--deep:#0a1677;--orange:#ff5a1f;--amber:#ffc94a;--cream:#f6eedb;--ink:#050a33;--pix:"Press Start 2P", monospace;--term:"VT323", monospace}*{box-sizing:border-box}html,body{background:var(--ink);height:100%;color:var(--cream);font-family:var(--term);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;margin:0;overflow:hidden}#app{position:fixed;inset:0}#game{width:100%;height:100%;image-rendering:pixelated;display:block;position:absolute;inset:0}.hidden{display:none!important}#hud{pointer-events:none;font-family:var(--pix);text-shadow:3px 3px 0 var(--deep);position:absolute;inset:0}.hud-top{top:max(14px, env(safe-area-inset-top));grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;display:grid;position:absolute;left:16px;right:16px}.hud-block .lbl{color:var(--amber);letter-spacing:2px;font-size:10px}.hud-block .val{white-space:nowrap;margin-top:6px;font-size:22px}.hud-block .val small{margin-left:4px;font-size:10px}.hud-block .sub{font-family:var(--term);opacity:.85;text-shadow:2px 2px 0 var(--deep);margin-top:4px;font-size:18px}.hud-block.center{text-align:center}.hud-block.right{text-align:right}.hud-block .val.big{color:#fff;text-shadow:4px 4px 0 var(--orange), 7px 7px 0 var(--deep);font-size:40px;font-style:italic}.hud-block .val.big.low{color:#fff;text-shadow:4px 4px 0 #ff1f3d, 7px 7px 0 var(--deep);animation:.5s steps(2,end) infinite pulse}@keyframes pulse{50%{color:#ff6b6b}}.boost{left:16px;bottom:max(18px, env(safe-area-inset-bottom));width:min(260px,40vw);position:absolute}.boost .lbl{color:var(--amber);letter-spacing:2px;margin-bottom:6px;font-size:10px}.boost .bar{border:3px solid var(--cream);height:14px;box-shadow:3px 3px 0 var(--deep);background:#0a167799}#boost-fill{background:repeating-linear-gradient(90deg, var(--orange) 0 8px, var(--amber) 8px 12px);width:0%;height:100%}#boost-fill.active{background:repeating-linear-gradient(90deg, #fff 0 8px, var(--amber) 8px 12px)}#popups{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:34%;left:50%;transform:translate(-50%)}.popup{font-family:var(--pix);white-space:nowrap;text-shadow:3px 3px 0 var(--deep);font-size:18px;font-style:italic;animation:1.1s steps(8,end) forwards pop}.popup.good{color:var(--amber)}.popup.big{color:#fff;text-shadow:3px 3px 0 var(--orange), 6px 6px 0 var(--deep);font-size:26px}.popup.bad{color:#ff4d5e}@keyframes pop{0%{opacity:0;transform:translateY(14px)scale(.7)}15%{opacity:1;transform:translateY(0)scale(1.1)}70%{opacity:1;transform:translateY(-6px)scale(1)}to{opacity:0;transform:translateY(-24px)scale(1)}}.overlay{background:linear-gradient(#050a338c,#050a3326 45%,#050a3399);place-items:center;padding:16px;display:grid;position:absolute;inset:0}#over,#pause{background:#050a339e}.title-wrap{text-align:center;max-width:640px}h1{font-family:var(--pix);color:#fff;text-shadow:4px 4px 0 var(--orange), 8px 8px 0 var(--deep);margin:0;font-size:clamp(28px,7vw,64px);font-style:italic;line-height:1.15;transform:skew(-8deg)}h1 span{display:block}h2{font-family:var(--pix);color:#fff;text-shadow:4px 4px 0 var(--orange), 8px 8px 0 var(--deep);margin:0 0 18px;font-size:clamp(24px,6vw,44px);font-style:italic}.tag{color:var(--amber);text-shadow:2px 2px 0 var(--deep);margin:18px 0 22px;font-size:26px}.controls{text-shadow:2px 2px 0 var(--deep);font-size:22px;line-height:1.5}.dim{opacity:.8;font-size:19px}kbd{font-family:var(--pix);background:var(--cream);color:var(--deep);box-shadow:2px 2px 0 var(--deep);vertical-align:2px;margin:0 2px;padding:5px 6px 4px;font-size:10px;display:inline-block}.start{font-family:var(--pix);background:var(--orange);color:#fff;box-shadow:4px 4px 0 var(--deep);cursor:pointer;text-shadow:2px 2px 0 var(--deep);border:0;margin-top:26px;padding:14px 22px;font-size:16px}.start:active{box-shadow:2px 2px 0 var(--deep);transform:translate(2px,2px)}.blink{animation:1s steps(2,end) infinite blink}@keyframes blink{50%{filter:brightness(1.35)}}.best,.opts{text-shadow:2px 2px 0 var(--deep);margin-top:16px;font-size:20px}.stats{font-family:var(--pix);text-shadow:2px 2px 0 var(--deep);gap:8px;font-size:14px;display:grid}.stats>div{justify-content:space-between;gap:32px;min-width:min(360px,80vw);display:flex}.stats .lbl{color:var(--amber)}.newbest{font-family:var(--pix);color:var(--amber);margin-top:18px;font-size:18px;animation:.4s steps(2,end) infinite blink}#touch{left:0;right:0;bottom:max(16px, env(safe-area-inset-bottom));justify-content:space-between;align-items:flex-end;gap:12px;padding:0 16px;display:flex;position:absolute}.tbtn{border:3px solid var(--cream);width:76px;height:76px;color:var(--cream);font-family:var(--pix);box-shadow:3px 3px 0 var(--deep);touch-action:none;background:#0a167773;font-size:22px}.tbtn.small{width:96px;height:44px;font-size:10px}.tbtn.on{background:var(--orange)}.tmid{flex-direction:column;gap:10px;display:flex}@media (width<=640px){.hud-block .val{font-size:14px}.hud-block .val.big{font-size:28px}.hud-block .sub{font-size:15px}.boost{bottom:110px}}.combo{opacity:.35;align-items:center;gap:8px;margin-top:6px;transition:opacity .15s;display:flex}.combo.on{opacity:1}#combo{color:var(--amber);font-size:16px;font-style:italic}.combo.hot #combo{color:#fff;text-shadow:3px 3px 0 var(--orange), 5px 5px 0 var(--deep)}.combo-bar{border:2px solid var(--cream);background:#0a167799;width:70px;height:6px}#combo-fill{background:var(--amber);width:0%;height:100%}.route{width:min(380px,46vw);margin:8px auto 0}.route-line{border:2px solid var(--cream);height:6px;box-shadow:2px 2px 0 var(--deep);background:#0a16778c;position:relative}.route-line .cp{background:var(--amber);width:4px;height:12px;margin-left:-2px;position:absolute;top:-5px}.route-line .flag{background:repeating-conic-gradient(#fff 0 25%, #141414 0 50%) 0 0 / 7px 6px;border:2px solid var(--cream);width:14px;height:18px;position:absolute;top:-9px;right:-8px}.route-line .me{background:var(--orange);width:14px;height:14px;box-shadow:2px 2px 0 var(--deep);border:2px solid #fff;margin-left:-7px;position:absolute;top:-6px;left:0%}.route .sub{text-align:center}.popup.trick{color:#fff;text-shadow:3px 3px 0 var(--cobalt), 6px 6px 0 var(--deep);font-size:22px}.banner{font-family:var(--pix);white-space:nowrap;color:var(--cream);border-top:3px solid var(--amber);border-bottom:3px solid var(--amber);text-shadow:3px 3px 0 var(--deep);background:#0a16778c;padding:10px 16px;font-size:clamp(14px,2.4vw,22px);font-style:italic;animation:2.2s steps(10,end) forwards bannerIn;position:absolute;top:22%;left:50%;transform:translate(-50%)}.banner.warn{color:#141414;background:repeating-linear-gradient(-45deg, var(--amber) 0 18px, #ffd970 18px 36px);text-shadow:none;border-color:#141414}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%)scaleX(.3)}12%{opacity:1;transform:translate(-50%)scaleX(1)}80%{opacity:1}to{opacity:0}}#over{overflow-y:auto}.results h2{margin-bottom:6px}.rank{font-family:var(--pix);color:var(--amber);text-shadow:6px 6px 0 var(--orange), 11px 11px 0 var(--deep);margin:4px 0 18px;font-size:clamp(64px,14vw,120px);font-style:italic;line-height:1.1}.rank.S{color:#fff;text-shadow:6px 6px 0 var(--cobalt), 11px 11px 0 var(--orange)}.rank.F{color:#ff4d5e}.results .stats{gap:7px;font-size:12px}.results .stats .sep{background:#f6eedb59;height:2px;margin:4px 0}.results .stats .pts span:last-child{color:var(--amber)}.total{min-width:min(360px,80vw);max-width:360px;font-family:var(--pix);text-shadow:3px 3px 0 var(--deep);justify-content:space-between;gap:32px;margin:14px auto 0;font-size:20px;display:flex}.total .lbl{color:var(--amber)}.tcol{align-items:flex-end;display:flex}.tmid .tbtn.small{width:104px}#title .controls{background:#050a3380;border-top:3px solid #ffc94a99;border-bottom:3px solid #ffc94a99;padding:10px 16px;display:inline-block}#title .tag{margin:14px 0 16px}
