*{box-sizing:border-box}
:root{color-scheme:dark;--amber:#ffb92e;--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0;background:#0b0d12;color:#e9e6dc;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center}
#wrap{width:100%;display:flex;justify-content:center;padding:8px 8px 0}
#stage{position:relative;width:min(100%,calc((100dvh - 120px)*16/9));max-width:1440px;aspect-ratio:16/9;background:#18271c;border:2px solid #1d2230;border-radius:12px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{width:100%;height:100%;display:block}
#overlay{position:absolute;z-index:5;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,10,16,.89);text-align:center;padding:20px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
#overlay.show{display:flex}
#panel,#result{max-width:650px;width:100%;margin:auto}
[hidden]{display:none!important}
.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:#9daca3}
h1{font-size:clamp(36px,5vw,64px);line-height:1;margin:10px 0;letter-spacing:.12em;color:var(--amber);text-shadow:3px 3px 0 #b3261e}
h2{font-size:clamp(28px,5vw,46px);margin:0 0 10px;color:var(--amber)}
.tag{font-size:20px;margin:12px 0;font-weight:700}
.rules,.keys,#rtext{font-size:16px;line-height:1.45;margin:12px 0;color:#d0d2c8}
.keys{font-size:14px;color:#aeb8ac}.fiction{font-size:12px;color:#a0a99f;margin:12px 0 0}
#menu{display:grid;gap:6px;margin:20px auto;max-width:420px}
button{font:inherit;font-weight:800;cursor:pointer;border:2px solid var(--amber);background:#1a1f2d;color:#ffe9b0;border-radius:10px;padding:10px 14px;font-size:16px;min-height:48px;touch-action:none;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}button:hover,button.pressed{background:var(--amber);color:#14110a}
button.primary{background:var(--amber);color:#14110a}#menu button{min-height:56px}
#hs{display:block;font-size:12px;margin-top:4px}.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
#hud{position:absolute;inset:12px 136px auto 14px;display:flex;gap:18px;align-items:flex-start;pointer-events:none;text-shadow:0 2px 4px #000}
.speed,.navigation,.boost-meter{padding:8px 12px;border-radius:10px;background:#0b111ac9;backdrop-filter:blur(4px)}
.speed strong{display:block;font-size:32px;line-height:1;color:#8ae5a2;font-variant-numeric:tabular-nums}.speed span{font-size:11px}.navigation{flex:1;max-width:280px}.navigation span{display:block;font-size:10px;letter-spacing:.06em;color:#b6cfb9}.navigation strong{display:block;font-size:17px;color:var(--amber);margin-top:3px}
.boost-meter{width:95px;font-size:10px}.boost-meter>div{background:#394339;height:7px;margin-top:6px;border-radius:3px;overflow:hidden}#boostFill{display:block;background:#ff7f37;height:100%;width:100%}
#utilities{position:absolute;right:12px;top:12px;display:flex;gap:6px}#utilities button{min-height:48px;font-size:11px;padding:8px;background:#0b111ac9;border-color:#647067}
#touch{display:none}.mobile-help{display:none}
#touchHint{display:none;pointer-events:none}
@media (pointer:coarse){body.playing #touchHint{display:block;position:absolute;left:0;right:0;bottom:calc(122px + var(--safe-bottom));text-align:center;font-size:12px;color:#fff;text-shadow:0 1px 3px #000;background:#10191d88;padding:4px}}
@media (pointer:coarse) and (orientation:landscape){body.playing #touchHint{bottom:calc(92px + var(--safe-bottom))}}
body:not(.playing) #hud,body:not(.playing) #utilities{display:none}
footer{width:100%;max-width:960px;padding:10px 14px 18px;font-size:12px;line-height:1.5;color:#9a978c;text-align:center}footer p{margin:2px 0}footer a{color:var(--amber)}
@media (pointer:coarse){
  #wrap{padding:0}#stage{width:100%;height:100svh;height:100dvh;aspect-ratio:auto;max-width:none;border:0;border-radius:0;padding-top:env(safe-area-inset-top,0px)}
  canvas{height:calc(100% - 112px - var(--safe-bottom));width:100%}
  #touch{position:absolute;display:flex;justify-content:space-between;align-items:center;gap:8px;bottom:0;left:0;right:0;height:calc(112px + var(--safe-bottom));padding:10px max(10px,env(safe-area-inset-right,0px)) calc(10px + var(--safe-bottom)) max(10px,env(safe-area-inset-left,0px));background:#10191d;border-top:1px solid #34433a}
  .steering,.pedals{display:flex;gap:7px}#touch button{width:54px;height:72px;padding:0;font-size:11px;border-radius:16px;background:#202d32;flex-shrink:0}#touch button.pressed{background:var(--amber);color:#151b17}#touch .steering button{font-size:25px;border-color:#9eb5a6}#tGas{border-color:#7bd88f!important}#tBoost{border-color:#ef703e!important}
  #hud{inset:calc(10px + env(safe-area-inset-top,0px)) 96px auto max(10px,env(safe-area-inset-left,0px));gap:6px;flex-wrap:wrap}
  .speed,.navigation,.boost-meter{padding:6px 8px;border-radius:8px}.speed strong{font-size:26px}.speed span{font-size:9px}.navigation{max-width:none;min-width:116px}.navigation strong{font-size:14px}.navigation span{font-size:8px}.boost-meter{width:80px;font-size:9px}
  #utilities{right:max(8px,env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));gap:4px;flex-direction:column}#utilities button{min-width:76px;min-height:48px}
  #overlay{padding:calc(22px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) calc(22px + var(--safe-bottom)) max(22px,env(safe-area-inset-left,0px))}
  h1{font-size:44px}.tag{font-size:20px}.rules,#rtext{font-size:16px}.keys{font-size:15px}.desktop-help{display:none}.mobile-help{display:block}#menu{margin:20px auto}.eyebrow{font-size:10px}
  body.playing{overflow:hidden;overscroll-behavior:none}body.playing footer{display:none}
  body:not(.playing) #touch{visibility:hidden}
}
@media (pointer:coarse) and (orientation:landscape){
  canvas{height:calc(100% - 86px - var(--safe-bottom))}#touch{height:calc(86px + var(--safe-bottom));padding-top:6px;padding-bottom:calc(6px + var(--safe-bottom))}#touch button{height:60px;width:70px}.steering,.pedals{gap:12px}#utilities{flex-direction:row}#hud{right:184px;flex-wrap:nowrap}.boost-meter{min-width:80px}#overlay{align-items:flex-start}#panel{max-width:740px}h1{font-size:36px;margin:6px 0}.tag{margin:8px 0}.rules{margin:8px 0}#menu{margin:12px auto}
}
@media (pointer:fine) and (max-height:780px){#stage{width:min(100%,calc((100dvh - 100px)*16/9))}#overlay{padding:14px}.rules{font-size:14px;margin:8px 0}.tag{margin:8px 0;font-size:18px}h1{font-size:44px}#menu{margin:12px auto}.keys{margin:6px 0}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}