@import "https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nunito:wght@700;800;900&display=swap";:root{color:#fff;font-synthesis:none;--yellow:#ffd321;--coral:#ff5438;--cyan:#29e5ff;--ink:#07131d;background:#06141f;font-family:Nunito,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{color:inherit;cursor:pointer;touch-action:manipulation;border:0;font:900 16px/1 Nunito,sans-serif}button:active{transform:translateY(2px)scale(.985)}#game{isolation:isolate;background:radial-gradient(circle at 50% 38%,#17485d,#061722 72%);width:100%;height:100%;min-height:480px;position:relative;overflow:hidden}#game-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}#vignette{pointer-events:none;background:linear-gradient(#061522bb 0,#0000 24% 67%,#04101cbd 100%),radial-gradient(circle,#0000 45%,#020a11a6 105%);position:absolute;inset:0}#impact{pointer-events:none;opacity:.16;background:repeating-conic-gradient(from 12deg,transparent 0 8deg,#65eeff 9deg 10deg,transparent 11deg 22deg);mix-blend-mode:screen;position:absolute;inset:-12%}#game[data-state=playing] #impact{animation:30s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#hud{z-index:8;inset:env(safe-area-inset-top) 0 auto;text-shadow:0 2px 4px #0009;pointer-events:none;grid-template-columns:92px 1fr 96px;gap:9px;padding:10px 12px 0;display:grid;position:absolute}.time,.score,#stack-count{background:linear-gradient(155deg,#10293ee6,#07141ee6);border:2px solid #ffffff48;border-radius:13px;height:52px;padding:6px 10px;box-shadow:0 8px 18px #00101f77,inset 0 1px #fff2}.time span,.score span,#stack-count span{letter-spacing:1.4px;color:#a7dfe9;font-size:9px;display:block}.time strong,.score strong{font:22px/1 Black Han Sans,sans-serif;display:block}.score{text-align:right}#heat{text-align:center;background:linear-gradient(135deg,#eb3e2de8,#8f152ce8);border:2px solid #ffac7791;border-radius:13px;height:52px;padding:5px 8px;position:relative}#heat b{font:21px/1 Black Han Sans,sans-serif}#heat>span{letter-spacing:2px;font-size:9px;display:block}#heat i{background:#330815;border-radius:5px;height:4px;position:absolute;bottom:4px;left:8px;right:8px;overflow:hidden}#heat em{transform-origin:0;background:linear-gradient(90deg,#ffe632,#ff732d);width:100%;height:100%;display:block;box-shadow:0 0 8px #ffcf31}#stack-count{text-align:center;background:linear-gradient(145deg,#1b8ab7e8,#07587ae8);width:70px;height:62px;position:absolute;top:70px;right:12px}#stack-count b{color:#fef55b;font:30px/1 Black Han Sans,sans-serif;display:block}#order{background:#081522d9;border:1px solid #fff3;border-radius:12px;gap:4px;padding:5px;display:flex;position:absolute;top:72px;left:12px}#order i{letter-spacing:.5px;background:linear-gradient(145deg,#ff8b31,#e4472b);border-radius:8px;place-items:center;width:42px;height:30px;font-size:8px;font-style:normal;display:grid;box-shadow:inset 0 1px #fff6}#callout{text-align:center;letter-spacing:.5px;color:#e5fbff;background:#06131dcc;border:1px solid #83eaff66;border-radius:99px;width:min(82vw,430px);padding:7px 12px;font-size:10px;position:absolute;top:137px;left:50%;transform:translate(-50%)}#audio{right:12px;top:calc(env(safe-area-inset-top) + 142px);z-index:14;letter-spacing:.7px;background:#07131dbc;border:1px solid #fff3;border-radius:9px;padding:7px 9px;font-size:9px;position:absolute}#toast{z-index:20;text-align:center;opacity:0;pointer-events:none;text-shadow:0 2px #892313;background:linear-gradient(120deg,#ff4c2d,#f18b18);border:2px solid #fff8;border-radius:12px;width:max-content;max-width:88%;padding:10px 17px;font:16px/1 Black Han Sans,sans-serif;position:absolute;top:28%;left:50%;transform:translate(-50%,-8px)scale(.85);box-shadow:0 10px 30px #0008}#toast.show{animation:.95s ease-out toast}@keyframes toast{15%,60%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-18px)scale(.94)}}#wobble{z-index:8;background:#06121ad4;border:1px solid #fff4;border-radius:99px;height:8px;position:absolute;bottom:108px;left:22%;right:22%;overflow:hidden}#wobble span{transform-origin:0;background:linear-gradient(90deg,#39e596 0 50%,#ffdb31 72%,#ff4731 100%);width:100%;height:100%;display:block}#wobble.danger{animation:.35s infinite alternate pulse;box-shadow:0 0 18px #ff3d2a}@keyframes pulse{to{transform:scaleY(1.45)}}.screen{z-index:10;text-align:center;pointer-events:auto;place-items:center;padding:24px;display:none;position:absolute;inset:0}.screen.active{display:grid}#menu{background:radial-gradient(circle at 50% 26%,#21bed635,#0000 42%),linear-gradient(#03111e80,#03111ef2);align-content:center}.logo{filter:drop-shadow(0 9px #07101c)drop-shadow(0 15px 18px #0008);transform:rotate(-2deg)}.logo h1{letter-spacing:-3px;color:#fff;-webkit-text-stroke:2px #111b27;margin:0;font:clamp(54px,12vw,96px)/.73 Black Han Sans,sans-serif}.logo h1 em{color:var(--yellow);-webkit-text-stroke:3px #d33a24;text-shadow:4px 5px #d33a24;font-style:normal}.logo p{background:var(--cyan);color:#062034;letter-spacing:2px;margin:15px 0 20px;padding:5px 14px;font:14px/1 Black Han Sans,sans-serif;display:inline-block;transform:rotate(2deg);box-shadow:4px 4px #d04431}.menu-card{text-align:left;background:#07131edb;border:1px solid #55eaff55;border-radius:16px;grid-template-columns:auto 1fr;gap:5px 12px;width:min(340px,84vw);margin:0 auto 22px;padding:13px 16px;display:grid;box-shadow:0 18px 35px #0008,inset 0 1px #fff2}.menu-card b{color:var(--yellow);letter-spacing:1px;font-size:11px}.menu-card span{color:#c1e3e9;font-size:11px}.primary{color:#301400;letter-spacing:.4px;background:linear-gradient(#ffe83d,#f49c18);border-radius:16px;min-width:min(330px,84vw);padding:17px 28px;font:21px/1 Black Han Sans,sans-serif;box-shadow:0 7px #ac3f14,0 14px 30px #0008,inset 0 2px #fff9}.primary span{float:right;font-size:30px;line-height:15px}.key-hint{color:#a8d2d9;letter-spacing:.3px;margin:17px 0 0;font-size:10px}.boot-error{background:#2b1015e8;border:2px solid #ff6659;border-radius:18px;gap:10px;max-width:480px;padding:24px;display:grid}.boot-error b{font:24px Black Han Sans,sans-serif}.boot-error span{color:#ffd7d2;font-size:12px}#pause{background:#04111dd8}.modal,.result-panel{background:linear-gradient(150deg,#16314af2,#07131ff5);border:2px solid #68e4ff5e;border-radius:22px;width:min(410px,90vw);padding:24px;box-shadow:0 24px 60px #000b,inset 0 1px #fff2}.modal h2,.result-panel h2{color:var(--yellow);margin:0 0 8px;font:32px/1 Black Han Sans,sans-serif}.modal p{color:#aed2d9;margin:0 0 22px}.modal .primary{min-width:100%}#spill{background:#e73d216b;align-content:center;animation:.16s 4 alternate spill}#spill h2{color:#fff;text-shadow:4px 5px #a41a22,-2px -2px #ffdc24;margin:0;font:clamp(48px,11vw,88px)/.9 Black Han Sans,sans-serif;transform:rotate(-4deg)}#spill p{color:#ffef58;letter-spacing:1px;background:#07131d;padding:7px 14px;font:12px Black Han Sans,sans-serif}@keyframes spill{to{transform:translate(7px)}}#results{background:radial-gradient(circle,#13d8f635,#0000 45%),#03101dd1;align-content:center}.result-panel{padding-top:28px;position:relative}.result-panel h2{text-shadow:3px 4px #bf3428;font-size:37px}.result-panel:before,.result-panel:after{content:"★";color:#ffdb2d;font-size:28px;position:absolute;top:18px}.result-panel:before{left:20px;transform:rotate(-18deg)}.result-panel:after{right:20px;transform:rotate(18deg)}#result-stage{background:radial-gradient(at bottom,#2addef44,#0000 65%);height:122px;margin:7px 0}.result-stats{grid-template-columns:1.4fr .8fr 1fr;gap:6px;display:grid}.result-stats div{background:#06131ec7;border-radius:10px;padding:9px 4px}.result-stats strong,.result-stats span{display:block}.result-stats strong{color:#fff;font:18px Black Han Sans,sans-serif}.result-stats span{color:#7fc7d3;font-size:8px}.token{color:#41200a;background:#ffcd2d;border-radius:99px;margin:10px 0;padding:8px;font-size:12px}#upgrade{color:#e9fcff;background:#1ba3bb;border-radius:10px;width:100%;margin-bottom:11px;padding:10px;font-size:11px}.result-panel .primary{min-width:100%;padding:14px}.text-button{color:#83dcea;letter-spacing:1px;background:0 0;margin-top:13px;font-size:11px}#controls{z-index:12;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));pointer-events:none;height:100px;position:absolute}#joystick{pointer-events:auto;touch-action:none;background:radial-gradient(circle,#20516c88 0 34%,#07131d99 36%);border:2px solid #c7f8ff55;border-radius:50%;width:92px;height:92px;position:absolute;bottom:0;left:22px;box-shadow:inset 0 0 20px #57eaff2b}#knob{will-change:transform;background:linear-gradient(145deg,#8ff6ff,#16bdd4);border-radius:50%;width:34px;height:34px;position:absolute;top:27px;left:27px;box-shadow:0 5px 9px #00151f,inset 0 2px #fff8}#dash,#brake{pointer-events:auto;text-shadow:0 2px #0007;border:2px solid #fff7;border-radius:50%;width:76px;height:76px;font-size:11px;position:absolute;bottom:4px;box-shadow:0 6px #341120,0 11px 20px #0007,inset 0 3px #fff6}#dash span,#brake span{margin-bottom:2px;font-size:24px;display:block}#dash{background:linear-gradient(145deg,#ffaf2d,#f0442f);right:111px}#brake{background:linear-gradient(145deg,#38dff1,#0874ac);right:22px}#model-badge{z-index:5;color:#6dddea;letter-spacing:.8px;background:#06131db3;border:1px solid #60e8ff36;border-radius:6px;padding:4px 7px;font-size:7px;position:absolute;bottom:7px;left:8px}.hidden{display:none!important}@media (orientation:landscape){#hud{grid-template-columns:86px 180px 86px;justify-content:space-between}.logo h1{font-size:58px}.logo p{margin-bottom:10px}.menu-card{margin-bottom:12px}.screen{padding:12px}#menu{grid-template-columns:1fr 1fr;column-gap:5vw}.logo{justify-self:end}.menu-card,#start,.key-hint{grid-column:2}.menu-card{grid-row:1;align-self:end}.primary{min-width:300px}#wobble{bottom:48px}.result-panel{padding:14px 20px}.result-panel h2{font-size:29px}#result-stage{height:60px}.result-stats div{padding:5px}.token{margin:6px 0}.result-panel .primary{padding:10px}#joystick{width:80px;height:80px}#knob{top:23px;left:23px}#dash,#brake{width:66px;height:66px}}@media (max-width:380px){#hud{grid-template-columns:80px 1fr 84px;gap:5px;padding-inline:7px}.time,.score,#heat{height:47px}.time strong,.score strong,#heat b{font-size:18px}#stack-count{top:62px;right:7px}#order{top:64px;left:7px}#callout{top:128px}.logo h1{font-size:51px}.menu-card{margin-bottom:16px}#dash{right:97px}#dash,#brake{width:68px;height:68px}#brake{right:17px}#joystick{width:82px;height:82px;left:17px}#knob{top:23px;left:23px}}#game{min-height:0}#game[data-state=results] #impact{opacity:.25;animation:18s linear infinite spin}#results{padding-bottom:max(18px,env(safe-area-inset-bottom));background:linear-gradient(#0000 0 40%,#03101da6 68%,#03101de8 100%);align-content:end}#results .result-panel{background:linear-gradient(150deg,#16314aef,#07131ff3);padding:15px 18px 14px}#results .result-panel h2{margin-bottom:2px;font-size:30px}#results #result-stage{display:none}#results .result-stats div{padding:6px 3px}#results .token{margin:7px 0;padding:6px}#results #upgrade{margin-bottom:7px;padding:8px}#results .primary{padding:11px}#results .text-button{margin-top:9px}#shift-select{grid-template-columns:repeat(5,1fr);gap:5px;width:min(390px,92vw);margin:0 auto 10px;display:grid}.shift-chip{background:#071522e8;border:1px solid #82efff55;border-radius:11px;min-width:0;padding:6px 3px;box-shadow:0 6px 15px #0007}.shift-chip strong,.shift-chip span,.shift-chip small{display:block}.shift-chip strong{background:#1d8ca8;border-radius:50%;width:21px;height:21px;margin:auto;padding-top:4px;font-size:10px}.shift-chip span{text-overflow:ellipsis;margin-top:3px;font-size:8px;overflow:hidden}.shift-chip small{color:#7fdbe8;font-size:6px}.shift-chip.selected{background:linear-gradient(155deg,#2b7d91,#122839);border-color:#ffe34a;transform:translateY(-3px);box-shadow:0 5px #d17917,0 11px 20px #0008}.shift-chip.selected strong{color:#431c08;background:#ffbd24}.shift-chip:disabled{filter:grayscale();opacity:.48;cursor:not-allowed}#menu .menu-card{margin-bottom:12px;padding:11px 14px}#menu .logo p{margin-bottom:12px}.time span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (orientation:landscape){#results{background:linear-gradient(90deg,#0000 0 50%,#03101dcc 71%,#03101df1 100%);align-content:center;justify-items:end}#results .result-panel{width:335px;margin-right:16px;padding:11px 15px}#results .result-panel h2{font-size:26px}#results .result-stats div{padding:4px}#results .token{margin:5px 0}#results #upgrade{margin-bottom:5px;padding:6px}#results .primary{padding:9px}#results .text-button{margin-top:6px}}
