* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  /* 100dvh tracks the *visual* viewport so the iOS Safari address bar
     hiding/showing doesn't leave the game over- or under-sized (100vh would
     count the area behind the toolbar). Fallback to 100% for old browsers. */
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prevent rubber-band scroll / pull-to-refresh on iOS. */
  overscroll-behavior: none;
}

/* The 3D view and the steering-wheel overlay both fill the whole viewport at
   the browser's native aspect ratio (the renderer sizes the canvases in JS).
   The overlay's internal pixel buffer is sized to match the viewport aspect,
   so object-fit: fill introduces no distortion. */
#game-canvas {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%; height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#overlay-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
  touch-action: none;
}

/* #ui spans the whole viewport so the HUD anchors to the real screen corners.
   container-type: size lets the HUD scale in cqh against the full screen. */
#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #fff;
  container-type: size;
}

/* #menu-layer is a centered 9:16 box. Menus live inside it and keep their
   portrait proportions (cqh/cqw resolve against this always-9:16 box) on any
   screen — in landscape they simply sit as a centered column. 100dvh (not
   100vh) keeps it aligned as the iOS Safari toolbar resizes. */
#menu-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 9 / 16;
  height: min(100dvh, 100vw * 16 / 9);
  container-type: size;
  pointer-events: none;
}

/* Only the actual menu screens capture clicks; the layers themselves stay
   transparent to pointers so drag-to-steer reaches the canvas during a race. */
.screen { pointer-events: auto; }
#hud { pointer-events: none; }
#hud .btn-icon { pointer-events: auto; }
#hud #btn-brake { pointer-events: auto; }

/* Vignette over the 3D showroom — darkens the upper area + edges so menu text
   reads clearly over the bright hero car. Fades in only on front-end menus. */
#menu-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background:
    linear-gradient(to bottom, rgba(6,9,16,0.72) 0%, rgba(6,9,16,0.15) 34%, rgba(6,9,16,0) 55%),
    radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%);
}
body.in-showroom #menu-vignette { opacity: 1; }

#screen-countdown,
#screen-respawn { pointer-events: none; }

.hidden { display: none !important; }

#err {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #a00;
  color: #fff;
  font: 12px monospace;
  padding: 4px 8px;
  display: none;
  z-index: 9999;
}

/* ── Screens ─────────────────────────────────────────────────────────────── */
/* Reference frame: 1080 × 1920. 1cqh = 19.2px, 1cqw = 10.8px.              */

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2cqh;
}
/* Title screen: push the title + buttons into the upper half so the rotating
   hero car owns the lower half of the frame. */
#screen-title {
  justify-content: flex-start;
  padding-top: 13cqh;
  gap: 2.4cqh;
}
.game-title {
  font-size: 5.2cqh;
  font-weight: 900;
  letter-spacing: 0.2cqh;
  text-align: center;
  line-height: 1.05;
  padding: 0 3cqw;
  margin-bottom: 1cqh;
  text-shadow: 0 0.3cqh 0.8cqh rgba(0,0,0,0.7), 0 0 3cqh rgba(225,16,30,0.35);
  animation: titleEnter 0.9s cubic-bezier(0.17, 0.89, 0.28, 1.25) both;
}
@keyframes titleEnter {
  0%   { opacity: 0; transform: translateY(-6cqh) scale(0.7); letter-spacing: 2cqh; filter: blur(0.4cqh); }
  60%  { opacity: 1; letter-spacing: 0.05cqh; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 0.2cqh; }
}
.btn-primary {
  background: linear-gradient(180deg, #ff4d5b 0%, #e1101e 100%);
  color: #fff; border: none;
  padding: 1.5cqh 4cqh;
  font-size: 2.2cqh; font-weight: 800;
  border-radius: 1.4cqh; cursor: pointer;
  letter-spacing: 0.25cqh;
  text-transform: uppercase;
  box-shadow: 0 0.8cqh 2cqh rgba(225,16,30,0.45),
              inset 0 0.15cqh 0 rgba(255,255,255,0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 1cqh 2.6cqh rgba(225,16,30,0.6), inset 0 0.15cqh 0 rgba(255,255,255,0.4); }
.btn-primary:active { transform: scale(0.95); }
.btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  padding: 1.2cqh 2.8cqh;
  font-size: 1.8cqh; font-weight: 600;
  border-radius: 1.4cqh; cursor: pointer;
  letter-spacing: 0.15cqh;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0.1cqh 0 rgba(255,255,255,0.15);
  transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-secondary:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }
.btn-secondary:active { transform: scale(0.96); }
/* Main menu: equal-width action buttons, wide enough to keep labels on one line. */
#screen-title .btn-primary,
#screen-title .btn-secondary {
  width: 64cqw;
  text-align: center;
  white-space: nowrap;
}
.btn-icon {
  background: rgba(0,0,0,0.4); color: #fff; border: none;
  width: 4cqh; height: 4cqh;
  font-size: 1.8cqh; font-weight: 700;
  border-radius: 0.8cqh; cursor: pointer;
}
.version { position: absolute; bottom: 1.6cqh; font-size: 1.2cqh; opacity: 0.5; }

/* ── Car Select ──────────────────────────────────────────────────────────── */

.car-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.2cqh; padding: 0 2cqh; max-width: 40cqw;
}
.car-card {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 0.8cqh;
  padding: 1.6cqh;
  text-align: center; cursor: pointer;
  font-size: 1.4cqh; font-weight: 600;
}
.car-card.selected { border-color: #4ecdc4; background: rgba(78,205,196,0.15); }
.car-card.locked { opacity: 0.5; }
.car-card .cost { font-size: 1.2cqh; color: #ffaa00; margin-top: 0.4cqh; }
.gold-display { font-size: 1.8cqh; color: #ffaa00; font-weight: 700; }

/* ── Track Select ────────────────────────────────────────────────────────── */

.track-card .track-best { font-size: 1.1cqh; color: #aaa; margin-top: 0.4cqh; }

/* ── HUD ─────────────────────────────────────────────────────────────────── */

.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.2cqh 1.6cqh;
}
.hud-left, .hud-center, .hud-right { display: flex; flex-direction: column; align-items: center; }
.hud-left { align-items: flex-start; }
.hud-text { font-size: 2cqh; font-weight: 700; text-shadow: 0 0.2cqh 0.4cqh rgba(0,0,0,0.6); }
.hud-text-small { font-size: 1.3cqh; color: #4ecdc4; text-shadow: 0 0.1cqh 0.3cqh rgba(0,0,0,0.6); }

/* Per-lap timing tower (F1-broadcast style): one row per completed lap with the
   fastest lap in purple, plus the current lap ticking live at the bottom. */
.hud-laplist {
  margin-top: 0.6cqh;
  display: flex; flex-direction: column; gap: 0.15cqh;
  font-variant-numeric: tabular-nums;
}
.hud-laplist .lap-row {
  display: flex; gap: 0.6cqh; align-items: baseline;
  font-size: 1.25cqh; font-weight: 700; line-height: 1.35;
  color: #dfe7f0; text-shadow: 0 0.1cqh 0.3cqh rgba(0,0,0,0.7);
}
.hud-laplist .lap-row .ln { color: #9fb0c2; min-width: 2.6cqh; }
.hud-laplist .lap-row.fastest .lt,
.hud-laplist .lap-row.fastest .ln { color: #c77dff; } /* purple = fastest lap */
.hud-laplist .lap-row.current { color: #ffd23f; }      /* live current lap */
.hud-laplist .lap-row.current .ln { color: #ffd23f; }
.hud-position {
  position: absolute; top: 6cqh;
  width: 100%; text-align: center;
  font-size: 2.8cqh; font-weight: 900;
  text-shadow: 0 0.2cqh 0.6cqh rgba(0,0,0,0.6);
}
.hud-bottom { position: absolute; bottom: 2cqh; right: 2cqh; }
.hud-speed { font-size: 2.2cqh; font-weight: 700; text-shadow: 0 0.2cqh 0.4cqh rgba(0,0,0,0.6); }

/* ── Countdown ───────────────────────────────────────────────────────────── */

.countdown-text {
  font-size: 10cqh; font-weight: 900;
  text-shadow: 0 0.4cqh 1.2cqh rgba(0,0,0,0.5);
  animation: countPulse 0.5s ease-out;
}
@keyframes countPulse { from { transform: scale(1.5); opacity: 0.5; } to { transform: scale(1); opacity: 1; } }

/* ── Respawn ─────────────────────────────────────────────────────────────── */

.respawn-text {
  font-size: 3cqh; font-weight: 700; color: #eaf2ff;
  text-shadow: 0 0.2cqh 0.6cqh rgba(0,0,0,0.6);
  animation: blink 0.5s ease-in-out infinite alternate;
}
@keyframes blink { from { opacity: 0.4; } to { opacity: 1; } }

/* ── Finish ───────────────────────────────────────────────────────────────── */

.finish-pos { font-size: 5cqh; font-weight: 900; text-shadow: 0 0.4cqh 0.8cqh rgba(0,0,0,0.5); }
.finish-detail { font-size: 1.6cqh; color: #ccc; }

#screen-finished h2 { font-size: 4cqh; }
#screen-finished .finish-pos { font-size: 9cqh; }
#screen-finished .finish-detail { font-size: 2.4cqh; }
#screen-finished .finish-points { font-size: 3cqh !important; }
#screen-finished .standings-mini {
  width: 86cqw;
  max-width: 86cqw;
  font-size: 2cqh;
  padding: 2cqh 4cqh;
}
#screen-finished .standings-mini .row { padding: 0.6cqh 0; }
#screen-finished .standings-mini .pos { width: 6cqh; }

/* ── Toggle ───────────────────────────────────────────────────────────────── */

.toggle-row { display: flex; align-items: center; gap: 1.2cqh; font-size: 1.6cqh; }
.btn-toggle {
  background: rgba(255,255,255,0.2); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.6cqh 1.6cqh; font-size: 1.4cqh;
  border-radius: 0.4cqh; cursor: pointer;
  min-width: 5cqh;
}
.btn-toggle.active { background: #4ecdc4; color: #000; }

/* ── Brake button ─────────────────────────────────────────────────────────── */
/* Hold to brake. Bottom-left so a left thumb can brake while the right hand
   drags to steer. Keyboard alternative: ArrowDown / S. */
.btn-brake {
  position: absolute;
  bottom: 3cqh;
  left: 3cqw;
  width: 22cqw;
  max-width: 16cqh;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 0.4cqh solid rgba(255,255,255,0.55);
  background: rgba(225,16,30,0.42);
  color: #fff;
  font-size: 2.2cqh;
  font-weight: 800;
  letter-spacing: 0.1cqh;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.btn-brake.active {
  background: rgba(225,16,30,0.92);
  transform: scale(0.94);
}

/* ── Minimap ─────────────────────────────────────────────────────────────── */

#minimap {
  position: absolute;
  top: 6cqh;
  right: 1.6cqh;
  width: 10cqh; height: 10cqh;
  border-radius: 0.8cqh;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ── Career ──────────────────────────────────────────────────────────────── */

.subtitle {
  font-size: 1.4cqh; color: #999;
  margin-bottom: 0.8cqh; text-align: center;
}

.btn-season {
  font-size: 1.8cqh !important;
  padding: 1.4cqh 2.8cqh !important;
  min-width: 26cqw;
}

.career-info {
  display: flex; flex-direction: column; gap: 0.8cqh;
  background: rgba(255,255,255,0.08);
  padding: 1.6cqh 2.4cqh;
  border-radius: 0.8cqh;
  min-width: 60cqw;
}
.career-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 2cqw;
  font-size: 1.5cqh; color: #ccc;
}
.career-row > span:first-child {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.career-row strong { color: #fff; font-size: 1.7cqh; font-weight: 700; flex: 0 0 auto; }

.standings-mini {
  max-width: 60cqw; width: 60cqw;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0.8cqh;
  padding: 0.8cqh 1.2cqh;
  font-size: 1.3cqh; color: #ddd;
  max-height: 30cqh; overflow-y: auto;
}
.standings-mini .row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5cqw;
  padding: 0.3cqh 0;
}
.standings-mini .row.player { color: #4ecdc4; font-weight: 700; }
.standings-mini .pos { width: 2.8cqh; display: inline-block; }
/* Left span (pos + name): truncate long names with ellipsis so the time/pts
   on the right stays visible. */
.standings-mini .row > span:first-child {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.standings-mini .row > span:last-child { flex: 0 0 auto; }

.finish-points { color: #ffaa22; font-size: 2cqh !important; font-weight: 700; }

#career-tier { font-size: 4cqh; letter-spacing: 0.2cqh; }

/* Quick-race tier and track selection grids */
.tier-grid,
.track-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4cqh;
  padding: 0 2cqh;
  max-width: 70cqw;
  width: 70cqw;
}

.track-grid { max-height: 64cqh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; }
.track-grid::-webkit-scrollbar { width: 0.8cqh; }
.track-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 1cqh; }
.track-grid::-webkit-scrollbar-track { background: transparent; }

.tier-card,
.track-card {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 1cqh;
  padding: 1.6cqh 1.4cqh;
  text-align: center; cursor: pointer;
  font-size: 1.8cqh; font-weight: 700;
  letter-spacing: 0.1cqh;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.tier-card:hover,
.track-card:hover { border-color: rgba(78,205,196,0.8); background: rgba(255,255,255,0.12); }
.tier-card:active,
.track-card:active { transform: scale(0.97); }
.tier-card.selected {
  border-color: #4ecdc4;
  background: rgba(78,205,196,0.18);
  box-shadow: 0 0 2cqh rgba(78,205,196,0.35);
}

/* Track-select cards carry a mini preview of the real track shape + a label. */
.track-card { padding: 1cqh; display: flex; flex-direction: column; gap: 0.6cqh; align-items: center; }
.track-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,0.25);
  border-radius: 0.6cqh;
}
.track-label { font-size: 1.5cqh; font-weight: 700; letter-spacing: 0.1cqh; }

/* Class-select: top-aligned so the rotating hero car shows in the lower half. */
#screen-quicktier { justify-content: flex-start; padding-top: 7cqh; gap: 1.6cqh; }
#screen-quicktier .tier-grid { max-width: 64cqw; width: 64cqw; }

/* Spec panel: glassy card showing the selected class's real differences. */
.spec-panel {
  width: 64cqw; max-width: 64cqw;
  background: rgba(10,14,22,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1.2cqh;
  padding: 1.4cqh 2cqh;
  display: flex; flex-direction: column; gap: 0.7cqh;
}
.spec-name { font-size: 2.2cqh; font-weight: 800; letter-spacing: 0.15cqh; text-align: center; }
.spec-row { display: flex; justify-content: space-between; align-items: center; font-size: 1.5cqh; color: #b9c2cf; }
.spec-row strong { color: #fff; font-weight: 700; }
.spec-stars { color: #ffcc33; letter-spacing: 0.3cqh; }

/* A horizontal pair of action buttons (e.g. BACK + SELECT TRACK). */
.row-buttons { display: flex; gap: 1.6cqw; align-items: center; }

/* Headings used by several screens */
h2 { font-size: 3cqh; font-weight: 800; letter-spacing: 0.15cqh; }

/* Multiplayer host picker + waiting screens */
.mp-section-label {
  font-size: 1.3cqh;
  color: #aaa;
  letter-spacing: 0.3cqh;
  margin-top: 1cqh;
  margin-bottom: 0.4cqh;
}
#screen-mphostpick .tier-grid,
#screen-mphostpick .track-grid {
  max-width: 60cqw;
}
#screen-mphostpick .track-grid {
  max-height: 24cqh;
  overflow-y: auto;
}
.tier-card.selected,
.track-card.selected {
  border-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.2);
}

#screen-mpresults .standings-mini {
  width: 86cqw; max-width: 86cqw;
  font-size: 2cqh;
  padding: 2cqh 4cqh;
}
#screen-mpresults .standings-mini .row { padding: 0.6cqh 0; }