@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  font-family: 'DM Sans', Arial, sans-serif;
  color: #f8fbff;
  background: #0b1427;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at 50% 0%, #213553 0, #0b1427 56%); }

button { font: inherit; }

.app { width: min(1180px, 100%); margin: auto; padding: 18px; }

.topbar, .footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.topbar { height: 45px; margin-bottom: 12px; }

.brand, .topbar-hint, .footer, .eyebrow, .hud-item > span, .menu-controls { font-family: 'Barlow Condensed', Impact, sans-serif; letter-spacing: .15em; }

.brand { font-weight: 900; font-size: 22px; white-space: nowrap; }
.brand-mark { color: #ffb43c; margin-right: 8px; }
.brand-tag { font-size: 10px; padding: 3px 6px; border: 1px solid #ecac51; border-radius: 2px; color: #ffcb71; vertical-align: middle; margin-left: 4px; }
.topbar-hint, .footer { color: #a8b9cd; font-size: 12px; font-weight: 700; }

.game-shell { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 400px; overflow: hidden; border: 8px solid #101923; border-radius: 26px; background: #7cb6cd; box-shadow: 0 25px 55px #02071380, inset 0 0 0 1px #ffffff2e; }
.game-shell::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 16px; box-shadow: inset 0 0 55px #06101d94; background: repeating-linear-gradient(to bottom, transparent 0 3px, #07162613 4px); }
canvas { display: block; width: 100%; height: 100%; }
.sound-toggle { position: absolute; z-index: 5; top: 92px; right: 18px; padding: 8px 11px; border: 1px solid #d8edff99; border-radius: 5px; background: #0b1e37bf; color: #fff; cursor: pointer; font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.sound-toggle:hover, .sound-toggle:focus-visible { background: #224b72; }
.sound-toggle[aria-pressed="false"] { color: #b7c4d4; }

.hud { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 18px; pointer-events: none; background: linear-gradient(#0815289c, transparent); }
.hud[hidden], .overlay[hidden], .touch-controls[hidden] { display: none !important; }
.hud-item { display: flex; flex-direction: column; gap: 3px; }
.hud-center { align-items: center; }
.hud-right { align-items: flex-end; }
.hud-item > span { color: #e9f2ff; font-size: 12px; font-weight: 800; }
.hud-item strong { font-family: 'Barlow Condensed', Impact, sans-serif; font-size: clamp(26px, 4vw, 50px); font-weight: 900; font-style: italic; line-height: 1; text-shadow: 2px 3px 0 #07162d; }
.hud-item small { font-size: .32em; font-style: normal; }
.nitro-meter { position: absolute; top: 94px; left: 18px; width: 155px; height: 9px; padding: 1px; border: 1px solid #d8faff9c; border-radius: 10px; }
.nitro-meter > div { width: 100%; height: 100%; background: #4be3f2; border-radius: 10px; box-shadow: 0 0 9px #43e8fa; }
.nitro-meter > span { display: block; margin-top: 6px; color: #e8faff; font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-shadow: 1px 2px 2px #0b1c2d; }
.nitro-meter.boosting > div { background: #ffc04d; box-shadow: 0 0 15px #ffe17a; }
.nitro-meter.boosting > span { color: #ffdb83; }

.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(24px, 6vw, 90px); background: linear-gradient(90deg, #091426eb 4%, #101c2ec9 46%, #10243a23 100%); }
.overlay > :not(.intro-car) { position: relative; z-index: 1; }
.intro-car { position: absolute; right: -2%; bottom: 4%; width: min(47%, 550px); max-height: 82%; object-fit: contain; object-position: right bottom; image-rendering: pixelated; filter: drop-shadow(0 18px 8px #0713227a); pointer-events: none; }
.eyebrow { color: #ffbd49; font-size: 16px; font-weight: 800; }
h1, h2 { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 900; text-transform: uppercase; margin: 12px 0 8px; line-height: .82; letter-spacing: -.035em; }
h1 { font-size: clamp(62px, 10vw, 145px); text-shadow: 4px 6px 0 #0b1931; }
h1 em { color: #ffbd49; font-style: normal; }
h2 { font-size: clamp(52px, 8vw, 98px); max-width: 750px; }
.overlay p { max-width: 395px; font-size: clamp(13px, 1.5vw, 17px); line-height: 1.5; color: #e6eff9; margin: 14px 0 25px; }
.primary-button { border: 0; border-radius: 5px; background: #ffc35a; color: #111b2c; cursor: pointer; padding: 15px 20px; min-width: 225px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 20px; font-weight: 900; letter-spacing: .06em; box-shadow: 5px 5px 0 #9a4e28; }
.primary-button:hover, .primary-button:focus-visible { background: #ffdb8e; transform: translateY(-2px); }
.primary-button span { font-size: 25px; }
.menu-controls { color: #b9c7d7; font-size: 13px; margin-top: 20px; }
.menu-controls span { color: #ffbd49; margin: 0 8px; }
.result { background: #0b192bd9; }

.touch-controls { position: absolute; inset: auto 16px 16px; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.steering-controls, .action-controls { display: flex; gap: 9px; }
.control-button, .brake-button, .nitro-button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; border: 1px solid #e7f4ffb7; background: #122947ad; color: white; box-shadow: 0 3px 0 #0b182e; }
.control-button { width: 72px; height: 68px; border-radius: 11px; font-size: 26px; }
.brake-button, .nitro-button { height: 68px; border-radius: 11px; font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 900; letter-spacing: .04em; }
.brake-button { width: 82px; font-size: 18px; }
.nitro-button { width: 108px; font-size: 20px; }
.nitro-button span { color: #60efff; }
.control-button:active, .control-button.active, .brake-button:active, .brake-button.active, .nitro-button:active, .nitro-button.active { background: #2f6481db; transform: translateY(3px); box-shadow: none; }

.footer { padding: 13px 4px 0; }

@media (max-width: 680px) {
  .app { padding: 0; }
  .topbar, .footer { padding-left: 14px; padding-right: 14px; }
  .topbar { height: 48px; margin: 0; }
  .topbar-hint, .footer span:last-child { display: none; }
  .game-shell { border-radius: 0; border-left: 0; border-right: 0; min-height: min(710px, calc(100dvh - 84px)); height: calc(100dvh - 84px); aspect-ratio: auto; }
  .overlay { justify-content: flex-start; padding: clamp(64px, 12vh, 100px) 25px 25px; }
  .intro-car { width: min(80%, 370px); right: 3%; bottom: -1%; opacity: .75; }
  h1 { font-size: clamp(68px, 16vw, 105px); }
  .overlay p { max-width: 300px; }
  .menu-controls { display: none; }
  .hud { padding: 13px; gap: 5px; }
  .hud-item > span { font-size: 10px; }
  .hud-item strong { font-size: clamp(24px, 7vw, 39px); }
  .nitro-meter { top: 75px; left: 13px; width: 130px; }
  .sound-toggle { top: 75px; right: 13px; }
  .touch-controls { inset: auto 12px 13px; }
  .steering-controls, .action-controls { gap: 6px; }
  .control-button { width: clamp(52px, 17vw, 69px); height: 67px; }
  .brake-button { width: clamp(64px, 21vw, 82px); height: 67px; }
  .nitro-button { width: clamp(82px, 27vw, 108px); height: 67px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .app { padding: 0; }
  .topbar, .footer { display: none; }
  .game-shell { height: 100dvh; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
  .overlay { padding: 24px 42px; }
  .sound-toggle { top: 76px; right: 16px; }
  .intro-car { width: 42%; right: 0; bottom: 0; opacity: .75; }
  h1 { font-size: min(16vh, 95px); }
  .overlay p { margin: 6px 0 12px; }
  .menu-controls { margin-top: 12px; }
}