:root{--ink: #eef3fb;--dim: rgba(238, 243, 251, .55);--glass: rgba(12, 16, 24, .52);--edge: rgba(255, 255, 255, .16);--gas: #3ecf6d;--brake: #e2483c;--boost: #ffb020;--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0b0d12;color:var(--ink);font:500 16px/1.2 Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#stage{position:fixed;inset:0;width:100%;height:100%;display:block}#hud{position:fixed;inset:0;pointer-events:none;touch-action:none}#speedo{position:absolute;left:50%;bottom:calc(14px + var(--safe-b));transform:translate(-50%);width:168px;height:104px;display:grid;place-items:center;filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}#speedo-dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible}#speedo-dial path{fill:none;stroke-linecap:round}#dial-track{stroke:#ffffff29;stroke-width:9}#dial-value{stroke:#7fd4ff;stroke-width:9;transition:stroke .14s linear}#dial-boost{stroke:var(--boost);stroke-width:9;opacity:.95}#speed-read{position:absolute;bottom:4px;display:flex;align-items:baseline;gap:5px;text-shadow:0 2px 10px rgba(0,0,0,.8)}#speed-num{font:800 44px/.9 Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}#speed-unit{font-size:12px;letter-spacing:2px;color:var(--dim)}#speedo.boosting #speed-num{color:var(--boost)}.pad{position:absolute;bottom:calc(18px + var(--safe-b));display:flex;gap:14px}#pad-left{left:calc(18px + var(--safe-l))}#pad-right{right:calc(18px + var(--safe-r))}.key{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;appearance:none;border:1px solid var(--edge);border-radius:20px;background:var(--glass);backdrop-filter:blur(8px);color:var(--ink);font-weight:800;letter-spacing:1px;cursor:pointer;transition:transform 60ms ease,filter 60ms ease,background 60ms ease}.key.down{transform:scale(.94);filter:brightness(1.5)}.steer{width:84px;height:84px;font-size:30px;line-height:1}.pedal{width:92px;height:104px;font-size:14px}.pedal.gas{background:linear-gradient(180deg,#3ecf6d4d,#0c10189e);border-color:#3ecf6d8c}.pedal.brake{background:linear-gradient(180deg,#e2483c4d,#0c10189e);border-color:#e2483c8c}#btn-boost{position:absolute;right:calc(38px + var(--safe-r));bottom:calc(140px + var(--safe-b));width:92px;height:92px;border-radius:50%;display:grid;place-items:center;padding:0;border-color:#ffb02080;background:radial-gradient(circle at 50% 35%,#ffb02057,#0c1018a8)}#btn-boost.cooling{opacity:.42}#btn-boost.armed{box-shadow:0 0 22px #ffb02073}#boost-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}#boost-ring circle{fill:none;stroke-width:7}#boost-track{stroke:#ffffff21}#boost-cool{stroke:var(--boost);stroke-linecap:round}#boost-label{font-size:13px;letter-spacing:1.5px;z-index:1}#banner{position:absolute;top:calc(104px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);padding:7px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);font-size:13px;letter-spacing:1.2px;color:var(--dim);opacity:0;transition:opacity .26s ease;white-space:nowrap;will-change:opacity}#banner.show{opacity:1}#warn{position:absolute;top:calc(104px + env(safe-area-inset-top,0px));left:calc(16px + var(--safe-l));padding:6px 12px;border-radius:8px;background:#e2483cd9;font-size:12px;font-weight:800;letter-spacing:1px;display:none}#warn.show{display:block}.hint{position:absolute;bottom:calc(2px + var(--safe-b));font-size:10px;letter-spacing:2px;font-weight:700;color:#eef3fb6b;text-shadow:0 1px 4px rgba(0,0,0,.9);white-space:nowrap}#hint-left{left:calc(18px + var(--safe-l))}#hint-right{right:calc(18px + var(--safe-r))}#fx-hit{position:fixed;inset:0;pointer-events:none;z-index:60;display:none;opacity:0;background:radial-gradient(ellipse at center,#ff5a3c00 42%,#ff46288c);mix-blend-mode:screen}#fx-hit.on{display:block}#stage.kick{will-change:transform}@media (max-width: 720px){.steer{width:76px;height:76px}.pedal{width:82px;height:96px}#speedo{width:140px;height:88px}#speed-num{font-size:36px}.hint{font-size:9px;letter-spacing:1.4px}}