html, body { margin: 0; height: 100%; overflow: hidden; background: #171717; color: white; }
body { height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; }
#racer { flex: none; width: min(100%, calc(100dvh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; container-type: inline-size; margin: 0; border: 0; overflow: hidden; }
#canvas { width: 100%; height: 100%; }
#hud { width: auto; max-width: calc(100% - 124px); top: max(12px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); padding: 0; border: 0; background: none; color: white; font-family: Arial, sans-serif; text-shadow: 0 2px 8px #000b; pointer-events: none; }
#hud .hud { float: none; display: block; margin: 0; padding: 0; border: 0; background: none; white-space: nowrap; }
#hud .hud-label { display: inline-block; width: 9cqw; font-size: clamp(9px, 1.4cqw, 14px); font-weight: 800; letter-spacing: .15em; }
#hud .value { color: inherit; font: italic 900 clamp(24px, 6.3cqw, 64px)/1.05 monospace; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
#hud #current_lap_time { float: none; }
#hud #fast_lap_time { width: auto; margin: 4px 0 0; text-align: left; color: #ffe78e; }
#hud #fast_lap_time .value { font-size: clamp(18px, 3.5cqw, 36px); }
#hud #last_lap_time { float: none; display: none; margin-top: 5px; color: #ffffffb3; }
#hud #last_lap_time .value { font-size: clamp(12px, 1.8cqw, 18px); }
#hud #speed { float: none; margin-top: 6px; font-size: 11px; color: #ffffffa6; }
#hud #speed .value { font: bold 12px monospace; letter-spacing: 0; }
#hud .fastest { background: none; }
#music { display: none; }

#touch-controls { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#steering-pad, #brake { position: absolute; bottom: max(5%, env(safe-area-inset-bottom)); pointer-events: auto; color: #ffffff85; border: 1px solid #ffffff55; background: transparent; box-shadow: inset 0 1px 0 #ffffff44, 0 5px 24px #0002; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
#steering-pad { left: max(5%, env(safe-area-inset-left)); width: clamp(96px, 17cqw, 170px); aspect-ratio: 1; border-radius: 50%; border-style: dashed; font-size: clamp(24px, 3cqw, 36px); }
#steering-pad:before, #brake:after { content: ''; position: absolute; inset: 15%; border: 1px solid #ffffff22; border-radius: 50%; pointer-events: none; }
#steering-pad span { pointer-events: none; }
#steering-pad .left, #steering-pad .right { position: absolute; top: 50%; transform: translateY(-50%); }
#steering-pad .left { left: 8%; }
#steering-pad .right { right: 8%; }
#steering-pad .thumb { position: absolute; inset: 26%; border-radius: 50%; background: linear-gradient(145deg,#ffffff15,#ffffff02); border: 1px solid #ffffff65; box-shadow: inset 0 1px 0 #ffffff70, 0 4px 16px #0002; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: transform .07s; }
#steering-pad[data-direction="-1"] .thumb { transform: translateX(-58%); }
#steering-pad[data-direction="1"] .thumb { transform: translateX(58%); }
#steering-pad[data-direction="-1"] .left, #steering-pad[data-direction="1"] .right { color: white; text-shadow: 0 0 15px white; }
#brake { right: max(4%, env(safe-area-inset-right)); width: clamp(88px, 14cqw, 140px); aspect-ratio: 1; border-radius: 50%; padding: 0; font: 800 clamp(14px, 2cqw, 22px) Arial, sans-serif; letter-spacing: .1em; text-shadow: 0 1px 2px #0007; }
#brake.pressed { color: white; border-color: white; background: #ffffff12; }
#steering-pad:focus-visible, #brake:focus-visible { outline: 3px solid #ffd447; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #steering-pad .thumb { transition: none; } }

#music-toggle, #game-close { position: absolute; z-index: 4; top: max(8px, env(safe-area-inset-top)); right: calc(64px + env(safe-area-inset-right)); box-sizing: border-box; text-decoration: none; font: 32px Arial, sans-serif; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff55; border-radius: 50%; background: #ffffff08; color: #ffffffa6; cursor: pointer; }
#game-close { right: max(8px, env(safe-area-inset-right)); }
#music-toggle:focus-visible, #game-close:focus-visible { outline: 3px solid white; outline-offset: 2px; }
#music-toggle[aria-pressed="false"] .sound-on, #music-toggle[aria-pressed="true"] .sound-off { display: none; }
#music-status { position: absolute; z-index: 4; right: max(8px, env(safe-area-inset-right)); top: calc(64px + env(safe-area-inset-top)); max-width: calc(100% - 16px); background: #171717; color: white; font-size: 12px; }

#game-start { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; background: #171717aa; color: #ffd447; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
#game-start strong { font: bold clamp(20px, 6cqw, 36px) Arial, sans-serif; }
#game-start span { font: 14px Arial, sans-serif; color: white; padding: 0 16px; }
#game-start[hidden] { display: none; }
#game-start:focus-visible { outline: 3px solid #ffd447; outline-offset: -5px; }

@media (pointer: coarse) {
  #racer { width: 100%; height: 100%; aspect-ratio: auto; }
}
/* Rotate the whole game when native orientation locking is unavailable. */
@media (pointer: coarse) and (orientation: portrait) {
  #racer { position: absolute; left: 50%; top: 50%; width: 100dvh; height: 100dvw; transform: translate(-50%, -50%) rotate(90deg); }
  #hud { top: max(12px, env(safe-area-inset-right)); left: max(20px, env(safe-area-inset-top)); }
  #steering-pad { left: max(5%, env(safe-area-inset-top)); bottom: max(5%, env(safe-area-inset-left)); }
  #brake { right: max(4%, env(safe-area-inset-bottom)); bottom: max(5%, env(safe-area-inset-left)); }
  #music-toggle, #game-close { top: max(8px, env(safe-area-inset-right)); }
  #music-toggle { right: calc(64px + env(safe-area-inset-bottom)); }
  #game-close { right: max(8px, env(safe-area-inset-bottom)); }
}