/* Race Dash - shell, HUD and overlay styling */

:root {
  --bg: #07070f;
  --panel: #14142a;
  --panel-2: #1b1b34;
  --line: #2b2b4d;
  --text: #edeaf7;
  --muted: #9c9cc0;
  --accent: #5858FD;
  --amber: #ffb703;
  /* The start screen borrows the palette of an eighties seafront: hot pink and
     cyan over deep violet. It is the same sunset the dusk circuit races into,
     so the menu and the track read as one place. */
  --neon-pink: #ff4fa3;
  --neon-cyan: #37e0ee;
  --neon-violet: #7a3cff;
}

* { box-sizing: border-box; }

/* A class that sets `display` beats the browser's own `[hidden]` rule, so an
   element hidden from JavaScript with `el.hidden = true` stays on screen and
   the code looks correct while doing nothing. That is exactly how the Fire
   button stayed visible without a blaster: `.tbtn` sets `display: grid`. This
   reset settles it for every element, now and later. */
[hidden] { display: none !important; }


html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #101020;
  touch-action: none;
}

/* HUD */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.hud[hidden] { display: none; }
.hud-row { display: flex; align-items: flex-end; gap: 12px; }
.hud-top { justify-content: flex-start; flex-wrap: wrap; }
.hud-bottom { justify-content: space-between; align-items: flex-end; }

.hud-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  min-width: 108px;
  border-radius: 10px;
  background: rgba(10, 10, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
}
.hud-label {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.hud-value { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; }

.speedo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  background: rgba(10, 10, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
}
.speedo-value { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }
.speedo-unit { font-size: 13px; color: var(--muted); letter-spacing: 1px; }

.hud-btn {
  pointer-events: auto;
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 22, 0.62);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.hud-btn:hover { border-color: var(--accent); }

/* Centre flash message (lap times, countdown) */
.flash {
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(30px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: -1.5px;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.65);
  animation: flashIn .28s ease-out;
}
.flash[hidden] { display: none; }
@keyframes flashIn {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}

/* Overlays (modal pattern: head / scrolling body / foot) */
.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(4, 4, 12, 0.82);
  backdrop-filter: blur(7px);
  z-index: 20;
}
.overlay[hidden] { display: none; }

.panel {
  width: min(620px, 100%);
  max-height: 86vh;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.panel-sm { width: min(460px, 100%); }

.panel-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-head h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.8px;
  background: linear-gradient(96deg, var(--neon-pink) 8%, #ffd0e6 45%, var(--neon-cyan) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* A thin sunset rule under the header, the way a chrome badge catches light. */
.panel-head {
  background:
    linear-gradient(180deg, rgba(255, 79, 163, 0.10), rgba(20, 20, 42, 0) 78%),
    linear-gradient(90deg, var(--neon-pink), var(--neon-violet) 52%, var(--neon-cyan)) bottom / 100% 2px no-repeat;
}
.panel-head h2 { margin: 0; font-size: 21px; letter-spacing: -0.4px; }
.kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

/* ---------------------------------------------------------------- the garage */
.garage {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 79, 163, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 79, 163, 0.16), rgba(0, 0, 0, 0) 62%),
    radial-gradient(110% 90% at 92% 100%, rgba(55, 224, 238, 0.14), rgba(0, 0, 0, 0) 58%),
    var(--panel-2);
  box-shadow: inset 0 0 26px rgba(122, 60, 255, 0.14);
}
.garage-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px 12px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(10, 8, 26, 0.85), rgba(28, 12, 40, 0.75));
  border: 1px solid rgba(55, 224, 238, 0.22);
}
.garage-hero canvas { width: 100%; max-width: 260px; height: auto; display: block; }
.garage-hero-name {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  background: linear-gradient(92deg, var(--neon-cyan), #ffffff 55%, var(--neon-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.garage-hero-note {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--muted);
  text-align: center;
}
.garage-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  align-content: start;
}
.garage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px 7px;
  border-radius: 9px;
  background: rgba(8, 8, 20, 0.62);
  /* Each rival's own colour lights its card, so the grid reads as a field of
     six machines rather than as six identical tiles. */
  border: 1px solid color-mix(in srgb, var(--card-glow, #5858FD) 42%, transparent);
  box-shadow: inset 0 -14px 22px -14px var(--card-glow, #5858FD);
}
.garage-card canvas { width: 100%; height: auto; display: block; }
.garage-card-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text);
}
.garage-card-kind {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 560px) {
  .garage { grid-template-columns: minmax(0, 1fr); }
  .garage-grid { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
}
.link-back { color: var(--muted); font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.link-back:hover { color: var(--text); }
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }

.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 26px 22px;
}
.intro { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }

.field { margin-bottom: 20px; }
.field-label {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px 5px;
  border-radius: 10px;
  border: 2px solid transparent;
  outline: 1px solid var(--line);
  cursor: pointer;
  background: rgba(8, 8, 20, 0.55);
  transition: transform .15s ease, border-color .15s ease;
}
.swatch canvas { width: 100%; height: auto; display: block; pointer-events: none; }
.swatch-name {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.is-on .swatch-name { color: var(--text); }
.swatch.is-on {
  border-color: #fff;
  outline-color: var(--neon-pink);
  box-shadow: 0 0 0 1px rgba(255, 79, 163, 0.5), 0 0 16px rgba(255, 79, 163, 0.45);
}

.segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}
.segmented button {
  padding: 8px 18px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.segmented button:hover { color: var(--text); }
.segmented button.is-on {
  background: linear-gradient(96deg, var(--neon-pink), var(--neon-violet));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 18px rgba(255, 79, 163, 0.35);
}

.controls { border-top: 1px solid var(--line); padding-top: 18px; }
.controls h2 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.controls ul {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 22px;
}
.controls li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.controls li span { color: var(--text); }
kbd {
  display: inline-block;
  min-width: 26px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-family: inherit;
  font-size: 11.5px;
  text-align: center;
}

.stats { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 15px; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.record-note {
  margin: 18px 0 0;
  padding: 10px 14px;
  border-radius: 9px;
  background: rgba(255, 183, 3, 0.12);
  border: 1px solid rgba(255, 183, 3, 0.35);
  color: var(--amber);
  font-size: 13.5px;
}
.record-note[hidden] { display: none; }

.panel-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.foot-note { color: var(--muted); font-size: 13px; }
.btn {
  padding: 11px 24px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #4646e0; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }

@media (max-width: 620px) {
  .hud {
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .hud-box { min-width: 74px; padding: 5px 9px; }
  .hud-value { font-size: 15px; }
  /* Kept on the pause and results panels, dropped here so the top row stays on
     one line and cannot wrap down underneath the running order. */
  .hud-box-wide { display: none; }
  .speedo-value { font-size: 32px; }
  .panel-head h1 { font-size: 24px; }
}

/* ---------------------------------------------------------------- HUD extras */

/* Live delta against your best lap */
.delta-chip {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 10, 22, 0.62);
  backdrop-filter: blur(6px);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  transition: color .2s ease, border-color .2s ease;
}
.delta-chip[hidden] { display: none; }
.delta-chip.is-up { color: #ff7676; border-color: rgba(255, 118, 118, 0.4); }
.delta-chip.is-down { color: #4fe3a1; border-color: rgba(79, 227, 161, 0.4); }

/* Lap progress rail */
.progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; max-width: 420px; }
.progress-track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(10, 10, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: visible;
}
.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #8f8fff);
}
.progress-car {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
.progress-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Speed and boost cluster */
.speedo-group { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.boost {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(10, 10, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
}
.boost-label, .boost-key {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.boost-key kbd { font-size: 10px; padding: 2px 5px; }
.boost-track {
  width: 132px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  overflow: hidden;
}
.boost-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb703, #ff7b00);
  transition: width .12s linear;
}
.boost.is-empty .boost-fill { background: #6a6a80; }
.boost.is-firing { border-color: rgba(255, 183, 3, 0.55); }

.hud-buttons { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; }
.hud-btn .sound-off { display: none; }
.hud-btn[aria-pressed="true"] .sound-on { display: none; }
.hud-btn[aria-pressed="true"] .sound-off { display: inline; }
.hud-btn[aria-pressed="true"] { color: #ff8c8c; border-color: rgba(255, 140, 140, 0.35); }

/* Start lights */
.lights {
  position: absolute;
  top: 22%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 18px;
}
.lights[hidden] { display: none; }
.light {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(20, 20, 34, 0.8);
  border: 3px solid rgba(255, 255, 255, 0.16);
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.light.is-red { background: #e23b3b; border-color: #ff8080; box-shadow: 0 0 26px rgba(226, 59, 59, 0.75); }
.light.is-green { background: #35d17a; border-color: #8bf0bb; box-shadow: 0 0 30px rgba(53, 209, 122, 0.8); }

/* Touch controls, shown only on touch devices */
.touch {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  /* Boost, Brake and Go plus their gaps used to add up to more than a 375px
     phone is wide, so the Go button sat off the right edge. Everything here is
     sized off the viewport instead, and kept clear of notches and the home bar. */
  padding: 0 max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom))
             max(12px, env(safe-area-inset-left));
  pointer-events: none;
}
.touch[hidden] { display: none; }
.touch-left {
  display: flex;
  gap: clamp(8px, 2.4vw, 12px);
  align-items: flex-end;
  min-width: 0;
}
/* Boost sits on its own row above Brake and Go rather than beside them. Three
   buttons in a row reached inwards far enough to sit over the car at the bottom
   centre of the screen, which is both a control you cannot see under and a car
   you cannot see past. Stacked, the group stays at the edge where the car never
   reaches, whatever the width. */
.touch-right {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    ".     boost"
    "brake gas";
  gap: clamp(8px, 2.4vw, 12px);
  justify-items: end;
  align-items: end;
  min-width: 0;
}
.tbtn-boost { grid-area: boost; }
.tbtn-brake { grid-area: brake; }
.tbtn-gas { grid-area: gas; }
.tbtn {
  pointer-events: auto;
  flex: 0 0 auto;
  width: clamp(50px, 15vw, 64px);
  height: clamp(50px, 15vw, 64px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 10, 22, 0.55);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
}
.tbtn:active { background: rgba(88, 88, 253, 0.6); }
.tbtn-gas {
  width: clamp(62px, 19vw, 84px);
  height: clamp(62px, 19vw, 84px);
  background: rgba(53, 209, 122, 0.28);
}
.tbtn-brake { background: rgba(226, 59, 59, 0.25); }
.tbtn-boost {
  width: clamp(46px, 13.5vw, 58px);
  height: clamp(46px, 13.5vw, 58px);
  font-size: 11px;
  background: rgba(255, 183, 3, 0.22);
}
/* A latched control stays lit so its state is never a guess */
.tbtn[aria-pressed="true"] {
  background: rgba(255, 183, 3, 0.6);
  border-color: rgba(255, 214, 120, 0.9);
  color: #1a1400;
}

/* Lap by lap table on the results panel */
.laps { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 14px; }
.laps caption {
  text-align: left;
  padding-bottom: 10px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.laps td { padding: 8px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.laps td:last-child { text-align: right; font-weight: 700; }
.laps tr.is-best td { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .flash { animation: none; }
  .boost-fill { transition: none; }
}

@media (max-width: 620px) {
  .progress { max-width: 168px; }
  .boost-track { width: 72px; }
  .hud-buttons .hud-btn { padding: 7px 10px; font-size: 12px; }
}

/* Screen reader only, for status announcements that have no visual equivalent */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- live order and rankings */

/* The running order, pinned clear of the top HUD row and the lap progress rail. */
.standings {
  position: absolute;
  top: 92px;
  right: 22px;
  margin: 0;
  padding: 8px;
  list-style: none;
  width: 208px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 10, 22, 0.62);
  backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}
.standings li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--muted);
}
.standings li.is-you {
  background: rgba(88, 88, 253, 0.22);
  color: var(--text);
  font-weight: 700;
}
.st-pos { width: 14px; text-align: right; opacity: .75; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.st-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The vehicle a racer drew, shown only in a surprise race. */
.st-veh, .board .st-veh {
  margin-left: 6px; font-size: 0.82em; letter-spacing: 0.02em;
  color: var(--muted); font-weight: 400;
}
.st-gap { font-size: 12px; opacity: .85; }

/* Driver name */
.text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.text-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* Classification and driver ranking tables */
.board {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.board caption {
  text-align: left;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.board th, .board td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.board th {
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.board td:first-child, .board th:first-child { width: 34px; color: var(--muted); }
.board tr.is-you td { background: rgba(88, 88, 253, 0.16); color: var(--text); font-weight: 700; }
.board tr.is-you td em { font-style: normal; color: var(--muted); font-weight: 500; }
.board td.empty { color: var(--muted); text-align: center; padding: 14px 8px; }
.board .dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

@media (max-width: 620px) {
  .standings { top: 76px; right: max(12px, env(safe-area-inset-right)); width: 148px; padding: 5px; }
  .standings li { font-size: 11.5px; gap: 6px; padding: 3px 4px; }
  .st-gap { font-size: 10.5px; }
  .board { font-size: 13px; }
}

@media (max-height: 480px) {
  .standings { top: 64px; width: 138px; padding: 4px; }
  .standings li { font-size: 11px; padding: 2px 4px; }
}

/* Below this there is no room for it without covering the road or the HUD. */
@media (max-height: 360px) {
  .standings { display: none; }
}

/* The touch pad sits along the bottom of the screen and used to be painted over
   the HUD's own bottom row, so Pause and Fullscreen were unreachable on a phone.
   Lift that row clear of the tallest touch button plus its padding. */
/* Clears the touch controls. Lifting this by the full height of the two row
   stack put it in the middle of the picture on a short landscape phone, so it
   keeps its old height and steps left of the Boost button instead. */
body.has-touch .hud-bottom {
  margin-bottom: clamp(78px, 24vw, 108px);
  margin-right: clamp(58px, 16vw, 76px);
}

/* ------------------------------------------------------------- portrait hint */

.rotate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 4, 12, 0.94);
  text-align: center;
}
.rotate[hidden] { display: none; }
.rotate-inner { max-width: 320px; }
.rotate h2 { margin: 0 0 10px; font-size: 21px; }
.rotate p { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.rotate-icon {
  display: block;
  width: 64px;
  height: 40px;
  margin: 0 auto 22px;
  border: 3px solid var(--accent);
  border-radius: 7px;
  animation: tilt 1.8s ease-in-out infinite;
}
@keyframes tilt {
  0%, 45% { transform: rotate(90deg); }
  55%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rotate-icon { animation: none; transform: rotate(0deg); }
}


/* A short text link is a poor tap target on a phone; pad it out to a real one. */
.link-back {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 2px;
}

/* ------------------------------------------------------- the More sheet */
/* On a phone the only settings worth a permanent tap target is Pause. Sound,
   music and fullscreen are moved into this sheet by setupMoreMenu, which moves
   the real buttons rather than copying them, so there is no second copy of any
   state to keep in step. */
.hud-more { display: none; }
body.has-touch .hud-more { display: inline-flex; }
.more-sheet {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(12, 12, 26, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  min-width: 148px;
}
.more-sheet[hidden] { display: none; }
.more-sheet .hud-btn { width: 100%; justify-content: center; }
.hud-buttons { position: relative; }

/* A 24px high button is a poor tap target. On touch every HUD control gets a
   real one, which is also what the audit script checks for. */
body.has-touch .hud-btn {
  min-height: 40px;
  min-width: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* On a short landscape phone a stacked sheet is tall enough to come down over
   the touch controls, and a settings panel that covers Run and Fire mid level
   is how a player dies reading a menu. It lays out as a row there instead. */
@media (max-height: 520px) {
  .more-sheet { flex-direction: row; }
  .more-sheet .hud-btn { width: auto; }
}

/* ------------------------------------------------- input specific guidance */
/* A phone has no Shift key and a desktop has no Go button. Showing either one
   the other's controls is noise at best and wrong at worst, so every guide is
   tagged with the input it describes and only that input's version is shown.
   has-touch is set from the touch setup, so the default is the keyboard. */
/* Hiding only, and marked important on purpose: the elements being gated carry
   layout rules of their own (.controls ul, .keys .key-row) whose specificity
   beats a plain attribute selector, so a polite rule here silently loses and
   both guides show at once. Nothing sets the visible state - whatever display
   the element already had is the right one. */
body:not(.has-touch) [data-input="touch"] { display: none !important; }
body.has-touch [data-input="key"] { display: none !important; }
/* The stand-in for a kbd badge on a touch guide: it names an on screen button
   rather than a key, so it must not look like a key. */
.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- awards */
.awards-title {
  margin: 18px 0 8px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.awards { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.award {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(8, 8, 20, 0.5);
  opacity: 0.45;
}
.award.is-earned { opacity: 1; border-color: rgba(255, 79, 163, 0.45); }
.award.is-new {
  border-color: var(--neon-pink);
  box-shadow: 0 0 18px rgba(255, 79, 163, 0.35);
}
.award-name { font-weight: 700; font-size: 13px; }
.award-note { flex: 1 1 auto; font-size: 11.5px; color: var(--muted); }
.award-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #17000c;
  background: var(--neon-pink);
  padding: 2px 7px;
  border-radius: 999px;
}

/* Confetti, added and removed by celebrate(). Decoration only, and skipped
   entirely under prefers-reduced-motion - the awards are the substance. */
#ovDone .panel-head { position: relative; overflow: hidden; }
.confetti {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
  pointer-events: none;
}
@keyframes confetti-fall {
  0% { opacity: 0; transform: translateY(-12px) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(150px) rotate(420deg); }
}

/* The grid strip is informational only, and the colour picker above it already
   shows the machine you will drive. On a phone it was a long scroll between the
   pickers and the Start race button, so it is desktop only. */
body.has-touch #gridField { display: none; }