/* Fullscreen-no-scroll is only right for the race page (fixed canvas +
   HUD overlay) — the menu page below it needs to scroll normally, so this
   is scoped to race.html's own <html class="race">, not shared globally. */
html.race,
html.race body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #05060a;
}

canvas {
  display: block;
}

#driver-nameplates{position:fixed;inset:0;pointer-events:none;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.driver-nameplate{position:absolute;left:0;top:0;transform-origin:center bottom;padding:3px 7px 4px;border-radius:4px;background:rgba(5,8,12,.72);color:#f4f7fa;font-size:10px;font-weight:700;line-height:1;letter-spacing:.025em;white-space:nowrap;text-shadow:0 1px 2px #000;box-shadow:inset 3px 0 var(--driver-color),0 2px 8px rgba(0,0,0,.4);will-change:transform,opacity}
.driver-nameplate[hidden]{display:none}
.driver-nameplate--disconnected{opacity:.45;filter:grayscale(1)}
@media(max-width:760px){.driver-nameplate{padding:3px 6px;font-size:9px}}

/* The race viewport is an interaction surface, not a document: prevent
   Safari/iOS from turning repeated taps or pinch gestures on the WebGL
   canvas into page zoom. Keep this scoped to #app so HUD links/results
   retain normal browser behaviour. */
html.race #app,
html.race #app canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* One shared "glass" surface for HUD chrome that still needs one — just
   the speed/gear cluster now (below); every other piece is plain text with
   a drop shadow instead (see #hud-topleft/#hud-topright). */
.hud-panel {
  background: linear-gradient(180deg, rgba(22, 24, 31, 0.45), rgba(11, 12, 17, 0.35));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Corner HUD instead of bordered cards stacked at top-center — those kept
   fighting each other for the limited room above the horizon, and drew
   the eye to themselves instead of the track. Modeled directly on a real
   sim racer's HUD: plain text with a drop shadow for legibility in each
   corner, the whole middle of the screen left clear. Only the speed/gear
   readout (bottom-right) keeps a background pill, same as the reference —
   it's the one place several numbers share tight quarters. */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text, #e7e9ee);
}

#hud-topleft,
#hud-topright {
  position: absolute;
  top: 0.6rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9);
}

#hud-topleft {
  left: 0.8rem;
}

#hud-topright {
  right: 0.8rem;
  text-align: right;
}

#hud .back-link {
  display: block;
  pointer-events: auto;
  color: var(--text-dim, #9aa1b0);
  text-decoration: none;
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
  width: fit-content;
}

#time {
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

#hud-topleft-row {
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}

.stats-sep {
  margin: 0 0.35em;
  color: var(--text-dim, #9aa1b0);
}

#circuit-name {
  font-size: 0.7rem;
  color: var(--text-dim, #9aa1b0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#best {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
}

#hud-topright-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.6em;
  font-size: 0.8rem;
  color: var(--text-dim, #9aa1b0);
  margin-top: 0.25rem;
}

#hud-telemetry {
  position: fixed;
  left: 0.8rem;
  bottom: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem 0.55rem;
  color: var(--text, #e7e9ee);
  font-size: 0.68rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

#hud-telemetry > div {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.telemetry-label {
  color: var(--text-dim, #9aa1b0);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

#hud-telemetry strong {
  font-size: 0.72rem;
  font-weight: 800;
}

#hint {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-dim, #9aa1b0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.85rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* Real F1 broadcasts flash a "TRACK LIMITS - TIME PENALTY" banner; this is
   the same idea shrunk to fit a HUD that's deliberately kept out of the
   way of the car (see the harmonisation pass earlier in the project) — a
   brief, small notice instead of a screen-filling one. Shown for ~2.5s via
   the .visible class (toggled in main.js) right after a penalized lap. */
#penalty-notice {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-0.4rem);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  background: rgba(225, 6, 0, 0.85);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#penalty-notice.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Safety car caution banner: a persistent bar (not a brief toast, unlike
   most other HUD notices) for as long as the caution period lasts, styled
   after a real broadcast's yellow-flag graphic. */
#caution-banner {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  background: rgba(230, 194, 41, 0.92);
  color: #14161c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

#caution-banner[hidden] {
  display: none;
}

/* Room bot radio calls (#7): same slot style, below the caution bar. */
#radio-banner {
  position: fixed;
  top: 7rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  background: rgba(20, 24, 32, 0.88);
  border: 1px solid #b2c8d566;
  color: #eef4f8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

#radio-banner[hidden] {
  display: none;
}

/* Braking map (#77): heading-up section of the next 300 m, wide and
   see-through at the bottom center, above the controls hint (#89). Touch
   layouts size it between the pedals (race-controls.css). */
#brake-map {
  position: fixed;
  left: 50%;
  bottom: 2.6rem;
  width: min(22rem, 40vw);
  height: auto;
  aspect-ratio: 16 / 10;
  transform: translateX(-50%);
  opacity: 0.9;
  pointer-events: none;
}

/* Top-center instrument cluster: shift lights, DRS/ERS, speed bar and
   gear/speed readout stay in the driver's forward sight line and away
   from the touch controls at the bottom corners. The phone shortcuts
   (VIEW/BOX, #139) sit in a row just below the panel. */
#hud-cluster {
  position: absolute;
  top: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}

#hud-bottomright {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Below this height (a landscape phone) there isn't much vertical room to
   spare — shrink the corner text and the bottom-right cluster a little. */
@media (max-height: 480px) {
  #time {
    font-size: 1.3rem;
  }
  #hud-topleft-row {
    font-size: 0.85rem;
  }
  /* First thing to drop for height, not the numbers a driver actually
     needs mid-lap — the circuit name is already on the results/menu
     screens either side of the race itself. */
  #circuit-name {
    display: none;
  }
  #hud-bottomright {
    padding: 0.3rem 0.55rem;
    gap: 0.4rem;
  }
  #ers-indicator,
  #drs-indicator {
    font-size: 0.6rem;
  }
  #hud-telemetry {
    gap: 0.55rem;
    font-size: 0.62rem;
  }
}

#shift-lights {
  display: flex;
  gap: 0.2rem;
  flex: 0 0 auto;
}

.shift-led {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #2ecc71; /* the lit color, via currentColor below */
  transition: background-color 0.08s linear, box-shadow 0.08s linear;
}

.shift-led:nth-child(5),
.shift-led:nth-child(6) {
  color: #e6c229;
}

.shift-led:nth-child(7),
.shift-led:nth-child(8) {
  color: #e10600;
}

.shift-led.is-lit {
  background: currentColor;
  box-shadow: 0 0 4px 1px currentColor;
}

/* The bar itself: a track that fills left to right with speed, cyan at
   idle through to red near the top — reads at a glance, and unlike the
   old analog dial it naturally fills the wide bar shape instead of
   leaving empty space around a small circle. */
#speed-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 3rem;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

@media(max-width:620px){#hud-bottomright{gap:.3rem;padding:.3rem .45rem}.speedo-unit{display:none}}

#speed-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #e6c229, #e10600);
  transition: width 0.08s linear;
}

.speedo-readout {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3em;
  flex: 0 0 auto;
  min-width: 4.75rem;
}

/* Gear indicator, styled like the digit on an F1 wheel's dash: its own
   little tile, not just more text — and a quick scale/flash on change
   (triggered by toggling .gear-shift in JS) is the "visual" half of the
   gear shift, the audio click from updateEngineSound() is the other. */
#gear-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3em;
  padding: 0.05em 0.15em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}

#gear-value.gear-shift {
  animation: gear-shift-flash 0.22s ease-out;
}

@keyframes gear-shift-flash {
  0% {
    background: rgba(230, 194, 41, 0.9);
    transform: scale(1.25);
  }
  100% {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1);
  }
}

/* Dim and inert until the zone + gap conditions in updateDrsEligibility()
   are both met, then lights up green like a real F1 dash's DRS prompt. */
#ers-indicator {
  flex: 0 0 auto;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

#ers-indicator.ers-active {
  color: #05060a;
  background: #22d3ee;
  box-shadow: 0 0 6px 1px rgba(34, 211, 238, 0.55);
}

#tyre-compound {
  font-weight: 800;
  letter-spacing: 0.05em;
}

#tyre-compound[data-compound="soft"] {
  color: #e10600;
}

#tyre-compound[data-compound="medium"] {
  color: #e6c229;
}

#tyre-compound[data-compound="hard"] {
  color: #f5f5f5;
}

#drs-indicator {
  flex: 0 0 auto;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

#drs-indicator.drs-active {
  color: #05060a;
  background: #2ecc71;
  box-shadow: 0 0 6px 1px rgba(46, 204, 113, 0.7);
}

#speed-value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.speedo-unit {
  font-size: 0.7rem;
  color: var(--text-dim, #9aa1b0);
}

#touch-controls {
  display: none;
}

.qualifying-timing{display:none}
.qualifying-timing[hidden]{display:none}
@media(orientation:landscape){
  .qualifying-timing{display:block;position:fixed;z-index:115;top:5.4rem;left:max(12px,env(safe-area-inset-left,0px));width:180px;color:#eef8ff;pointer-events:none;font:700 10px/1.2 system-ui;text-shadow:0 1px 3px #000,0 0 8px #000}
  .qualifying-timing__title{padding:2px 4px 6px;color:#c2d3dd;font-size:8px;letter-spacing:.13em}
  .qualifying-timing ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
  .qualifying-timing li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:5px;min-height:19px;padding:0 4px;border-left:1px solid #ffffff28;background:linear-gradient(90deg,#06101970,transparent)}
  .qualifying-timing li.is-player{border-left:2px solid #70e1c5;background:linear-gradient(90deg,#70e1c52b,transparent);color:#fff}
  .qualifying-timing li.is-disconnected{opacity:.4;filter:grayscale(1)}
  .qualifying-timing__position{color:#8ca3b3;text-align:center}
  .qualifying-timing__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .qualifying-timing strong{font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
}
@media(orientation:landscape) and (max-height:520px){
  .qualifying-timing{top:4rem;left:max(7px,env(safe-area-inset-left,0px));width:140px;font-size:8px}
  .qualifying-timing__title{padding-bottom:3px;font-size:7px}
  .qualifying-timing li{grid-template-columns:12px minmax(0,1fr) auto;gap:3px;min-height:14px;padding:0 3px}
  .qualifying-timing strong{font-size:7px}
}

/* Touch controls: shown only when JS (see index.html) detects real touch
   support and adds .touch to <html>. Detecting it in JS instead of relying
   purely on the (hover: none)/(pointer: coarse) media query, because that
   query is reported inconsistently by some mobile browsers and was hiding
   the buttons on real devices that clearly are touchscreens. */
html.touch #hint {
  display: none;
}

html.touch #hud-telemetry {
  display: none;
}

html.touch #touch-controls {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  touch-action: none;
}

.touch-group {
  display: flex;
  gap: 1rem;
}

.touch-btn {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 22, 28, 0.6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text, #e7e9ee);
  font-size: 2.1rem;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.touch-btn:active {
  background: rgba(225, 6, 0, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.touch-btn--big {
  width: 7.5rem;
  height: 7.5rem;
  font-size: 2.6rem;
}

/* F1-style steering wheel: an actual wheel shape (flat-bottom rim, center
   hub, top marker). It's one continuous drag surface (see main.js) rather
   than two side-by-side buttons, so a finger can slide across it without
   losing the press — that's what a wheel needs to be usable one-handed.
   Sized up from the original 7rem and given its own drop shadow (the SVG
   itself has no shadow — it's flat artwork) so it reads as a solid object
   sitting on the glass instead of a flat sticker, and is comfortably
   bigger under a thumb. */
#wheel-control {
  position: relative;
  width: 10rem;
  height: 10rem;
  border-radius: 50% 50% 20% 20%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

#wheel-control svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* --- Start lights: F1 gantry (race) / pit-exit light (qualifying) --------- */

.start-lights[hidden],
.engine-gate[hidden] {
  display: none;
}

.start-lights {
  position: fixed;
  top: max(3.2rem, env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 500;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.start-lights.is-leaving {
  opacity: 0;
  transform: translate(-50%, -12px);
}

.start-lights-gantry {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #16181d, #0a0b0e);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.start-light-pod {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 7px;
  border-radius: 8px;
  background: #050506;
}

.start-light-pod i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3a1414, #1b0707 70%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
  transition: background 0.06s linear, box-shadow 0.06s linear;
}

.start-light-pod.is-red i {
  background: radial-gradient(circle at 38% 34%, #ffb3a8, #ff1a0a 45%, #b00000 80%);
  box-shadow: 0 0 18px 4px rgba(255, 30, 10, 0.75), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.start-light-pod.is-green i {
  background: radial-gradient(circle at 38% 34%, #d4ffd9, #1fe05a 45%, #07902f 80%);
  box-shadow: 0 0 18px 4px rgba(40, 230, 100, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

.start-lights-caption {
  margin: 0;
  font: 800 0.72rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px #000;
}

.start-lights-caption:empty {
  display: none;
}

@media (max-width: 760px) {
  .start-lights { top: max(2.4rem, env(safe-area-inset-top, 0px)); }
  .start-lights-gantry { gap: 6px; padding: 7px 8px; }
  .start-light-pod { gap: 5px; padding: 5px; }
  .start-light-pod i { width: 20px; height: 20px; }
}

/* Engine fire-up gate: purely visual — the key/tap listener is on window,
   so the HUD's back link stays clickable underneath. */
.engine-gate {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
}

.engine-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 30px;
  border: 1px solid rgba(225, 6, 0, 0.6);
  border-radius: 14px;
  background: rgba(10, 11, 15, 0.86);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
  animation: engine-gate-pulse 1.6s ease-in-out infinite;
}

.engine-gate-kicker {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #ff5a4f;
}

.engine-gate-card strong {
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.engine-gate-card small {
  font-size: 0.8rem;
  color: #aeb5c1;
}

@keyframes engine-gate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(225, 6, 0, 0); }
}

/* --- Post-race results overlay ------------------------------------------- */

#results-overlay[hidden] {
  display: none;
}

#results-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(5, 6, 10, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Fades in a few seconds after the flag, while the car rolls on (#157). */
#results-overlay {
  opacity: 0;
  transition: opacity 0.9s ease;
}

#results-overlay.is-visible {
  opacity: 1;
}

.results-card {
  width: 100%;
  max-width: 26rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--surface, #14171f);
  border: 1px solid var(--border, #262b36);
  border-radius: 14px;
  padding: 1.25rem 1.75rem;
  color: var(--text, #e7e9ee);
  text-align: center;
}

.results-card h2 {
  margin: 0 0 0.75rem;
  flex: 0 0 auto;
}

/* With up to ten finishers, the list can get taller than the viewport —
   only it scrolls (min-height: 0 is what lets a flex child shrink below
   its content size at all), so the title, points and action buttons stay
   in view instead of getting pushed off top or bottom. */
#results-order {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* A harmless fade at the very bottom edge — invisible when the list
     fits, but on a short screen it hints there's more below instead of
     the list just quietly ending after however many rows fit. */
  mask-image: linear-gradient(to bottom, black calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 14px), transparent 100%);
}

#results-order li {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--border, #262b36);
}

#results-order li.is-player {
  font-weight: 700;
  color: var(--accent, #e10600);
}

#results-points {
  color: var(--text-dim, #9aa1b0);
  margin: 0.75rem 0 1rem;
  flex: 0 0 auto;
}

.results-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex: 0 0 auto;
}

.results-btn {
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--border, #262b36);
  color: var(--text, #e7e9ee);
  text-decoration: none;
  font-size: 0.9rem;
}

.results-btn--primary {
  background: var(--accent, #e10600);
  border-color: var(--accent, #e10600);
  color: #fff;
  font-weight: 600;
}

/* Phones in landscape have ~350px of height: stacked, the ten-row list
   squeezes to nothing and the buttons sit at the bottom edge (or under the
   home indicator with viewport-fit=cover). Side by side instead: standings
   scroll on the left, title/points/actions stay on the right. */
@media (orientation: landscape) and (max-height: 560px) {
  #results-overlay {
    padding:
      max(8px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  .results-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 1.25rem;
    max-width: 46rem;
    height: 100%;
    max-height: 22rem;
    padding: 0.75rem 1rem;
  }

  #results-order {
    grid-column: 1;
    grid-row: 1 / -1;
    font-size: 0.85rem;
  }

  #results-order li {
    padding: 0.25rem;
  }

  .results-card h2 {
    grid-column: 2;
    grid-row: 1;
    margin: 0.25rem 0 0.5rem;
    font-size: 1.2rem;
  }

  #results-points {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 0.5rem;
  }

  .results-actions {
    grid-column: 2;
    grid-row: 4;
    flex-direction: column;
    gap: 0.5rem;
  }

  .results-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Circuit menu (index.html) ------------------------------------------- */

.difficulty-select {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  max-width: 640px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
}

.difficulty-btn {
  flex: 1 1 0;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border, #262b36);
  background: var(--surface, #14171f);
  color: var(--text-dim, #9aa1b0);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.difficulty-btn.active {
  background: var(--accent, #e10600);
  border-color: var(--accent, #e10600);
  color: #fff;
}

.menu-standings {
  max-width: 640px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
}

.menu-standings table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface, #14171f);
  border: 1px solid var(--border, #262b36);
  border-radius: 12px;
  overflow: hidden;
}

.menu-standings th,
.menu-standings td {
  padding: 0.6rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border, #262b36);
}

.menu-standings tr:last-child td {
  border-bottom: none;
}

.menu-standings td:last-child,
.menu-standings th:last-child {
  text-align: right;
}

/* The player's pick (#253): tint, bold and an inset bar, so the row reads
   without relying on colour alone. */
.menu-standings tr.is-selected td {
  background: rgba(255, 255, 255, 0.1);
  font-weight: 700;
}

.menu-standings tr.is-selected td:first-child {
  box-shadow: inset 4px 0 0 #fff;
}

#champion-banner {
  max-width: 640px;
  margin: 0 auto 1.5rem;
  padding: 0.9rem 1.25rem;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent, #8b5cf6), var(--accent-2, #22d3ee));
  color: #05060a;
  font-weight: 700;
  text-align: center;
}

.menu-actions {
  max-width: 640px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
  text-align: right;
}

.reset-btn {
  background: none;
  border: 1px solid var(--border, #262b36);
  color: var(--text-dim, #9aa1b0);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.circuit-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.circuit-status {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--accent, #8b5cf6);
  font-weight: 600;
}

/* F1 Racer home: stronger race-weekend hierarchy while preserving the
   existing menu controls generated by menu.js. */
body:not(:has(#app)) {
  background:
    radial-gradient(circle at 75% 0%, rgba(225, 6, 0, 0.16), transparent 32rem),
    linear-gradient(180deg, #0b0d12 0%, #05060a 55%);
}
.f1-home-hero {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 1.25rem 2.5rem;
  text-align: left;
}
.f1-home-kicker {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #e10600;
}
.f1-home-hero .wordmark {
  margin: 0;
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  line-height: 0.86;
  letter-spacing: -0.065em;
}
.f1-home-lead {
  max-width: 36rem;
  margin: 1.2rem 0 1.4rem;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  color: var(--text-dim, #9aa1b0);
}
.f1-home-section {
  width: min(68rem, calc(100% - 2rem));
  margin: 0 auto 2rem;
}
.f1-home-section-head {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}
.f1-home-section-head > span {
  color: #e10600;
  font-size: 0.72rem;
  font-weight: 900;
  padding-top: 0.35rem;
}
.f1-home-section-head h2 { margin: 0; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.f1-home-section-head p { margin: 0.15rem 0 0; color: var(--text-dim, #9aa1b0); font-size: 0.8rem; }
.f1-home-section .menu-standings { margin: 0; }
@media (max-width: 600px) {
  .f1-home-hero { padding-top: 2.6rem; }
  .f1-home-section { width: min(100% - 1.2rem, 68rem); }
}

.garage-entry{width:min(68rem,calc(100% - 2rem));margin:0 auto 2rem}.garage-entry a{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border:1px solid rgba(225,6,0,.45);border-radius:12px;background:linear-gradient(90deg,rgba(225,6,0,.14),rgba(255,255,255,.03));text-decoration:none;color:#fff}.garage-entry span{color:var(--text-dim,#9aa1b0)}

/* Home command hierarchy: garage and multiplayer are the two dominant
   commands (#40: playing with others over solo, to grow the player base).
   No secondary solo-play shortcut (#40 follow-up) — solo circuit
   selection is reached by scrolling to its own section further down. */
html{scroll-behavior:smooth}
.f1-home-hero{padding-bottom:1.5rem}
.home-command-center{width:min(68rem,calc(100% - 2rem));margin:0 auto 2.6rem;display:grid;grid-template-columns:1.15fr .85fr;gap:12px}
.home-command{position:relative;min-height:132px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:14px 18px;padding:22px 24px;border:1px solid rgba(255,255,255,.14);border-radius:16px;color:#fff;text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .2s,border-color .2s}
.home-command::before{content:"";position:absolute;z-index:-1;inset:0;opacity:.85}
.home-command--garage{border-color:rgba(225,6,0,.7)}.home-command--garage::before{background:radial-gradient(circle at 82% 40%,rgba(255,73,53,.3),transparent 31%),linear-gradient(125deg,#3a0b0d,#120d12 70%)}
.home-command--multiplayer::before{background:radial-gradient(circle at 80% 30%,rgba(62,185,220,.14),transparent 35%),linear-gradient(125deg,#151923,#0c0e13)}
/* Help shortcut to the game modes guide (#123): small round "?" in the hero corner. */
.f1-home-hero{position:relative}.home-help{position:absolute;top:max(1rem,env(safe-area-inset-top));right:1.25rem;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:#fff;font-weight:800;font-size:1.1rem;text-decoration:none;background:rgba(255,255,255,.04);transition:border-color .15s,background .15s}.home-help:hover,.home-help:focus-visible{border-color:#e10600;background:rgba(225,6,0,.18);outline:none}
.home-command:hover{transform:translateY(-2px);border-color:#fff}.home-command:focus-visible{outline:2px solid #fff;outline-offset:4px}
.home-command-index{grid-column:1/-1;font-size:.65rem;font-weight:900;letter-spacing:.16em;color:#d5a5a7}.home-command--multiplayer .home-command-index{color:#91a3b9}
.home-command-copy{align-self:end;display:flex;flex-direction:column;gap:5px}.home-command-copy strong{font-size:clamp(1.35rem,3vw,2rem);letter-spacing:-.035em}.home-command-copy small{color:#afb5c0;font-size:.75rem}
.home-command-arrow{align-self:end;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#e10600;font-size:1.5rem;font-weight:300}.home-command--multiplayer .home-command-arrow{background:#252b36}
.race-setup-panel{margin-bottom:2.7rem}.race-setup-grid{display:flex;flex-direction:column;gap:14px}.setup-choice{min-width:0;padding:18px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(17,20,27,.82)}
.setup-choice-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.setup-choice-head strong{display:flex;align-items:center;gap:8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.setup-choice-head strong i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#292e38;color:#c7cbd3;font-size:.64rem;font-style:normal}.setup-choice-head span{font-size:.65rem;color:#7f8795;text-transform:uppercase;letter-spacing:.08em}
.setup-choice .difficulty-select{max-width:none;margin:0;padding:0}.difficulty-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.driver-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.setup-choice .difficulty-btn{position:relative;min-width:0;min-height:52px;margin:0;padding:9px;border-radius:8px;background:#10131a;border-color:#303541;overflow:hidden}.setup-choice .difficulty-btn::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;pointer-events:none}.setup-choice .difficulty-btn.active{background:linear-gradient(145deg,#3d1013,#1b1015);border-color:#e10600;box-shadow:inset 3px 0 #e10600}.setup-choice .difficulty-btn.active::after{border-color:rgba(255,255,255,.08)}
.difficulty-option{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}.difficulty-option strong{font-size:.8rem}.difficulty-option small{margin-top:3px;color:#777f8d;font-size:.61rem;font-weight:500}.difficulty-option.active small{color:#d0b4b6}
.driver-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;text-align:left}.driver-option>span{color:#616977;font-size:.58rem;font-weight:800}.driver-option>strong{min-width:0;font-size:.7rem;line-height:1.12;overflow-wrap:anywhere}.driver-option.active>span{color:#ff8c86}
.championship-panel{padding-top:1rem;border-top:1px solid rgba(255,255,255,.09)}.championship-panel .menu-standings{max-width:none;padding:0}.championship-panel .menu-standings table{background:rgba(15,18,24,.78)}.championship-panel .reset-btn{display:block;min-height:44px;margin:14px 0 0 auto}
@media(max-width:700px){html{scroll-padding-top:10px}.f1-home-hero{padding:2.3rem .9rem 1.2rem}.f1-home-lead{margin:.9rem 0 1rem}.home-command-center{width:calc(100% - 1.2rem);grid-template-columns:1fr;margin-bottom:2rem}.home-command{min-height:112px;padding:17px 18px}.home-command--garage{order:-1}.home-command-copy strong{font-size:1.45rem}.race-setup-grid{gap:10px}.setup-choice{padding:14px}.setup-choice-head{margin-bottom:12px}.difficulty-control{gap:6px}.driver-control{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.setup-choice .difficulty-btn{min-height:54px;padding:8px 7px}.driver-option{grid-template-columns:1fr;align-content:center;gap:3px;text-align:center}.driver-option>span{font-size:.55rem}.driver-option>strong{font-size:.68rem}.race-setup-panel{margin-bottom:2.2rem}.championship-panel{margin-top:.5rem}}
@media(max-width:365px){.driver-control{grid-template-columns:repeat(2,minmax(0,1fr))}.driver-option{grid-template-columns:auto minmax(0,1fr);text-align:left}.difficulty-option strong{font-size:.72rem}.difficulty-option small{font-size:.55rem}}

/* Circuit selection is a focused, swipeable stage instead of a grid of
   equally weighted cards. The current map stays large enough to read on a
   phone and every navigation target is thumb-sized. */
.circuit-stage{overflow:hidden}
.circuit-carousel{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:stretch;gap:10px;outline:none}
.circuit-carousel:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:18px}
.circuit-viewport{overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(135deg,#141821,#090b10);touch-action:pan-y;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.circuit-track{display:flex;transition:transform .46s cubic-bezier(.22,.8,.25,1);will-change:transform}
.circuit-slide{flex:0 0 100%;min-width:0}
.circuit-card{min-height:360px;display:grid;grid-template-columns:minmax(270px,.9fr) minmax(0,1.1fr);color:#fff;text-decoration:none}
.circuit-map{position:relative;display:grid;place-items:center;min-height:360px;padding:34px;background:radial-gradient(circle at 45% 48%,rgba(225,6,0,.22),transparent 58%),linear-gradient(145deg,#191d25,#0b0d12);overflow:hidden}
.circuit-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000,transparent)}
.circuit-map svg{position:relative;width:min(100%,390px);height:auto;filter:drop-shadow(0 0 12px rgba(225,6,0,.55))}
.circuit-map polyline{fill:none;stroke:#f2f4f8;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.circuit-map>span{position:absolute;left:22px;bottom:15px;font-size:3.6rem;font-weight:900;line-height:1;color:rgba(255,255,255,.08)}
.circuit-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,64px)}
.circuit-meta{display:flex;gap:8px;margin-bottom:18px}.circuit-meta span{padding:5px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#bcc2ce}
.circuit-copy h2{max-width:12ch;margin:0;font-size:clamp(2rem,4vw,3.8rem);line-height:.95;letter-spacing:-.055em}
.circuit-copy>p{margin:18px 0 24px;color:#9da6b5;font-size:1rem}
.circuit-facts{display:flex;flex-wrap:wrap;gap:18px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);font-size:.76rem;color:#aeb5c1}.circuit-facts b{color:#fff;font-size:1rem}
.circuit-launch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px}.circuit-race-link{min-height:44px;display:flex;align-items:center;padding:0 16px;background:#e10600;color:#fff;border:1px solid #ef3b35;border-radius:3px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-decoration:none}.circuit-race-link:focus-visible{outline:2px solid #fff;outline-offset:4px}
.circuit-arrow{min-width:48px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#11141b;color:#fff;font-size:2.3rem;cursor:pointer}.circuit-arrow:hover{border-color:#e10600;background:#1d1114}.circuit-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px}
.circuit-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}.circuit-dots button{width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}.circuit-dots button::after{content:"";display:block;width:8px;height:8px;margin:auto;border-radius:50%;background:#4a4f5b;transition:.2s}.circuit-dots button[aria-current=true]::after{width:26px;border-radius:9px;background:#e10600}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:700px){.circuit-carousel{grid-template-columns:1fr}.circuit-arrow{position:absolute;z-index:2;top:145px;width:48px;height:48px;min-width:48px;border-radius:50%;background:rgba(7,8,12,.88)}.circuit-arrow--prev{left:8px}.circuit-arrow--next{right:8px}.circuit-card{min-height:0;grid-template-columns:1fr}.circuit-map{min-height:250px;padding:34px 48px}.circuit-copy{padding:25px 20px 24px}.circuit-copy h2{font-size:2.25rem}.circuit-copy>p{margin:12px 0 18px}.circuit-race-link{min-height:48px;padding:0 12px}.circuit-meta{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.circuit-track{transition:none}}
.garage-page{min-height:100vh;background:radial-gradient(circle at 35% 25%,#222733,#07080c 55%);color:#fff}.garage-head{display:flex;gap:1.4rem;align-items:flex-start;width:min(88rem,calc(100% - 2rem));margin:auto;padding:1.2rem 0}.garage-head a{color:#aaa;text-decoration:none}.garage-head span{font-size:.68rem;letter-spacing:.2em;color:#e10600;font-weight:800}.garage-head h1{margin:.1rem 0;font-size:clamp(2.3rem,5vw,4rem)}.garage-head p{margin:0;color:#aeb3bf}.garage-layout{width:min(88rem,calc(100% - 2rem));margin:auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(18rem,.75fr);gap:1rem}.garage-car-panel,.garage-config{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(7,8,12,.68);overflow:hidden}.garage-car-panel{position:relative;min-height:68vh}.garage-canvas,#garage-canvas{height:58vh;touch-action:none}.garage-hint{text-align:center;color:#8e95a4;font-size:.75rem}.garage-drop{margin:0 1rem 1rem;padding:.8rem;border:1px dashed rgba(255,255,255,.25);border-radius:10px;text-align:center;color:#9aa1b0}.garage-drop.over{border-color:#e10600;color:#fff;background:rgba(225,6,0,.12)}.garage-config{padding:1rem}.garage-stats{display:grid;gap:.55rem;margin-bottom:1.2rem}.garage-stats>div{display:grid;grid-template-columns:5rem 1fr;gap:.6rem;align-items:center;font-size:.72rem;text-transform:uppercase}.garage-stats>div>div{height:.4rem;background:#252832;border-radius:99px;overflow:hidden}.garage-stats i{display:block;height:100%;background:#e10600;border-radius:99px}.garage-part{padding:.75rem 0;border-top:1px solid rgba(255,255,255,.08)}.garage-part h2{font-size:.82rem;text-transform:uppercase;margin:0 0 .55rem}.garage-part>div{display:flex;gap:.4rem;flex-wrap:wrap}.garage-part button{background:#151821;color:#b7bdc9;border:1px solid #303542;border-radius:7px;padding:.5rem .65rem;cursor:grab}.garage-part button.active{border-color:#e10600;color:#fff;background:rgba(225,6,0,.16)}@media(max-width:760px){.garage-layout{grid-template-columns:1fr}.garage-car-panel{min-height:auto}.garage-canvas,#garage-canvas{height:48vh}.garage-head{flex-direction:column;gap:.5rem}}

.garage-mounts{position:absolute;inset:0;pointer-events:none}.garage-mount{position:absolute;pointer-events:auto;padding:.38rem .55rem;border:1px dashed rgba(255,255,255,.35);border-radius:999px;background:rgba(7,8,12,.72);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:#c5cad4;transition:.15s}.garage-mount.front{left:50%;top:70%;transform:translateX(-50%)}.garage-mount.rear{left:50%;top:18%;transform:translateX(-50%)}.garage-mount.floor{left:50%;top:48%;transform:translateX(-50%)}.garage-mount.brakes{right:9%;top:54%}.garage-mount.suspension{left:9%;top:54%}body[data-drag-part="frontWing"] .garage-mount.front,body[data-drag-part="rearWing"] .garage-mount.rear,body[data-drag-part="floor"] .garage-mount.floor,body[data-drag-part="brakes"] .garage-mount.brakes,body[data-drag-part="suspension"] .garage-mount.suspension,.garage-mount.over{border-color:#e10600;background:rgba(225,6,0,.3);color:#fff;box-shadow:0 0 0 4px rgba(225,6,0,.08)}.garage-mount.just-mounted{transform:scale(1.12)}.garage-mount.front.just-mounted,.garage-mount.rear.just-mounted,.garage-mount.floor.just-mounted{transform:translateX(-50%) scale(1.12)}.garage-status{margin:.4rem 1rem 1rem;text-align:center;color:#d6dae2;font-size:.78rem}

/* Home: quick repeated taps (carousel arrows/dots) must not trigger double-tap
   zoom, and a pinch over the carousel must still work — with pan-y alone, a
   zoomed-in page could not be pinched back out once the carousel filled the
   screen. Page zoom itself stays enabled for accessibility. */
.f1-home :is(a,button,[role="radio"]){touch-action:manipulation}
.f1-home .circuit-viewport{touch-action:pan-y pinch-zoom}

/* Multiplayer room lobby (room.html, #36 — part of #1). Reuses the home
   page's dark theme and button/grid idioms rather than inventing new ones. */
.room-hero .f1-home-kicker a{color:inherit;text-decoration:none}
.room-hero .f1-home-kicker a:hover{text-decoration:underline}
/* Room help (#127): round "?" in the hero corner opens a short how-to. */
.room-help>summary{list-style:none;cursor:pointer}.room-help>summary::-webkit-details-marker{display:none}.room-help[open]>summary{border-color:#e10600;background:rgba(225,6,0,.25)}
.room-help-panel{max-width:40rem;margin-top:.4rem;padding:1rem 1.2rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);font-size:.9rem;line-height:1.5}
.room-help-panel h2{margin:0 0 .6rem;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}
.room-help-panel ol{margin:0 0 .7rem;padding-left:1.2rem}.room-help-panel li{margin:.3rem 0}.room-help-panel p{margin:0;color:var(--text-dim,#9aa1b0)}.room-help-panel a{color:#ff6b61}
.room-lobby{width:min(46rem,calc(100% - 2rem));margin:0 auto 3rem}
.room-field{display:flex;flex-direction:column;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9aa1ad;margin-bottom:16px}
.room-field input,.room-field select{font:inherit;text-transform:none;letter-spacing:normal;padding:11px 13px;border-radius:8px;border:1px solid #303541;background:#10131a;color:#fff}
.room-entry-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.room-join-row{display:flex;gap:8px}
.room-join-row input{width:7rem;padding:11px 13px;border-radius:8px;border:1px solid #303541;background:#10131a;color:#fff;text-transform:uppercase;letter-spacing:.1em;font-weight:700;text-align:center}
.room-btn{min-height:46px;padding:0 20px;border-radius:8px;border:1px solid #303541;background:#161a23;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.room-btn:hover{border-color:#4a5162}
.room-btn:disabled{opacity:.55;cursor:default}
.room-btn--primary{background:#e10600;border-color:#e10600}
.room-btn--primary:hover{background:#ff2419}
.room-btn--ghost{background:transparent}
.room-status{min-height:1.2em;margin:10px 0 0;font-size:.8rem;color:#ff8c86}
.room-status--started{color:#7cffb0;font-weight:700}
.room-view-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.room-code-block{display:flex;flex-direction:column;gap:2px}
.room-code-block>span{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:#7f8795}
.room-code-block>strong{font-size:1.6rem;letter-spacing:.16em;font-family:monospace}
.room-participants,.room-drivers{margin-top:26px}
.room-participants h2,.room-drivers h2{margin:0 0 12px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.room-participant-count{color:#7f8795;font-weight:500}
#room-participant-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.room-participant{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);font-size:.8rem}
.room-participant--grace{border-color:rgba(255,196,0,.5);background:rgba(255,196,0,.06)}
.room-participant-name{font-weight:700}
.room-participant-driver{color:#9aa1ad}
.room-participant-ready{color:#7cffb0;font-size:.72rem}
.room-participant-state{margin-left:auto;font-size:.68rem;color:#ffcf4d;text-transform:uppercase;letter-spacing:.06em}
.room-driver-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.room-driver-option{display:flex;align-items:center;gap:8px;min-height:52px;padding:10px 12px;border-radius:10px;border:1px solid #303541;background:#10131a;color:#fff;font:inherit;text-align:left;cursor:pointer}
.room-driver-option i{width:18px;height:18px;flex:none;border-radius:50%;background:var(--primary);box-shadow:inset 0 0 0 2px #081019}
.room-driver-option strong{font-size:.78rem;line-height:1.15}
.room-driver-option small{display:block;color:#7f8795;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em}
.room-driver-option.active{border-color:#e10600;background:rgba(225,6,0,.14)}
.room-driver-option:disabled{opacity:.45;cursor:default}
.room-session-setup{margin-top:26px}
.room-session-setup h2{margin:0 0 12px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.room-session-fields{display:flex;flex-wrap:wrap;gap:14px}
.room-session-fields .room-field{flex:1;min-width:160px;margin-bottom:0}
.room-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.room-ready-toggle{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem}
.room-ready-toggle input{width:20px;height:20px}
@media(max-width:700px){.room-lobby{width:calc(100% - 1.2rem)}.room-entry-actions{flex-direction:column;align-items:stretch}.room-join-row{width:100%}.room-join-row input{flex:1;width:auto}.room-driver-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Team colours in home (#151): two-tone livery stripe, team name, active border. */
.setup-choice .driver-option{padding-left:14px}.setup-choice .driver-option::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--team) 0 62%,var(--team2) 62%)}
.driver-option>strong small{display:block;margin-top:2px;color:#7f8795;font-size:.52rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.setup-choice .driver-option.active{background:linear-gradient(145deg,color-mix(in srgb,var(--team) 24%,#10131a),#141820);border-color:var(--team);box-shadow:none}.driver-option.active>span{color:var(--team)}.driver-option.active>strong small{color:#c7cbd3}
.team-name{display:inline-flex;align-items:center;gap:8px}.team-name::before{content:"";width:3px;height:1.05em;border-radius:1px;background:linear-gradient(var(--team) 0 62%,var(--team2) 62%)}
/* Driver locked during a championship (#155). */
.setup-choice .driver-option:disabled{opacity:.35;cursor:not-allowed;filter:saturate(.4)}
.home-command--free{grid-column:1/-1;min-height:104px}.home-command--free::before{background:radial-gradient(circle at 85% 50%,rgba(255,196,64,.16),transparent 34%),linear-gradient(125deg,#1c1a10,#0d0d0b)}
.bank-readout{margin-top:.25rem;font:600 .72rem system-ui;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);text-align:right}
/* Free-drive car picker (#313): one small native select under the circuit name, clear of the touch controls. */
.car-picker{display:inline-flex;align-items:center;gap:6px;margin-top:8px;pointer-events:auto;color:#cfd8e2;font:700 .7rem system-ui;letter-spacing:.06em}.car-picker select{padding:5px 8px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(10,14,20,.7);color:#fff;font:700 .75rem system-ui;cursor:pointer}.car-picker select:focus-visible{outline:2px solid #fff;outline-offset:2px}html.touch .car-picker select{min-height:44px;padding:0 12px}
/* Classiche (#317): the driver card swipes between the F1 and the period-car drivers; the tab of the series you race carries a dot. */
.series-tabs{display:flex;gap:6px;margin:-4px 0 10px}.series-tabs button{flex:1;min-height:36px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:transparent;color:#aab2bf;font:800 .68rem system-ui;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}.series-tabs button[aria-selected="true"]{background:#fff;color:#0c0e13;border-color:#fff}.series-tabs button.is-series::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-radius:50%;background:#e10600;vertical-align:middle}
.series-pages{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.series-pages::-webkit-scrollbar{display:none}.series-page{flex:0 0 100%;min-width:0;scroll-snap-align:start}

.room-session-fields select:disabled{opacity:1;color:#c7cbd3;background:#151922;border-color:#303541;cursor:default}

/* Multiplayer lobby layout refresh (#353): clearer desktop hierarchy while
   preserving the same controls and mobile flow. */
.room-lobby{width:min(72rem,calc(100% - 2rem))}
.room-entry{max-width:44rem;margin:0 auto;padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.025)}
.room-entry>.room-field{margin-bottom:14px}
.room-entry-actions{justify-content:space-between}
.room-view{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(7,9,13,.45)}
.room-view-actions{display:flex;align-items:center;gap:8px}
.room-lobby-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,320px);gap:18px;align-items:start;margin-top:18px}
.room-main-column{display:grid;gap:18px;min-width:0}
.room-side-column{display:grid;gap:14px;position:sticky;top:16px}
.room-panel{margin-top:0;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)}
.room-participants h2,.room-drivers h2,.room-session-setup h2{margin:0 0 12px}
.room-driver-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.room-driver-option{min-width:0}
.room-session-fields{display:grid;grid-template-columns:1fr;gap:12px}
.room-session-fields .room-field{min-width:0;width:100%}
.room-session-fields select{width:100%}
.room-actions{margin-top:0;align-items:stretch;flex-direction:column}
.room-ready-toggle{min-height:46px;padding:0 12px;border:1px solid #303541;border-radius:8px;background:#10131a}
.room-actions .room-btn{width:100%}
.room-session-fields select:disabled{opacity:.72}
@media(max-width:900px){
  .room-lobby{width:calc(100% - 1.2rem)}
  .room-lobby-grid{grid-template-columns:1fr}
  .room-side-column{position:static;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr)}
  .room-driver-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .room-view{padding:12px;border-radius:14px}
  .room-view-head{align-items:stretch;flex-direction:column}
  .room-view-actions{width:100%}
  .room-view-actions .room-btn{flex:1}
  .room-side-column{grid-template-columns:1fr}
  .room-entry{padding:14px}
}

/* Lobby growth strategy (#353): keep all interaction controls above the
   participant list so joins never push driver/session controls downward. */
.room-participants--bottom{margin-top:18px}
@media(max-width:620px){
  .room-code-block{flex-direction:row;align-items:baseline;gap:10px}
  .room-code-block>strong{font-size:1.35rem}
}