/*
 * NixScalextric Race Control
 * Current production stylesheet. Responsive overrides are intentionally
 * kept close to the components they refine; historical version numbers
 * have been removed from source comments.
 */


:root {
  color-scheme: dark;
  --navy: #011754;
  --navy-dark: #000f3b;
  --navy-mid: #05205f;
  --navy-light: #062775;
  --ink: #f7f8fb;
  --muted: #b9c4dc;
  --yellow: #ffc400;
  --line: rgba(255,255,255,.14);
  --soft-line: rgba(255,255,255,.09);
  --max: 1500px;
  --header-height: 72px;
  --shadow: 0 18px 48px rgba(0,0,0,.22);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  margin: 0;
  min-height: 100%;
  background: var(--navy);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 85% 10%, rgba(255,196,0,.09), transparent 22rem),
    linear-gradient(180deg, #06163c 0%, var(--navy) 44%, #05112c 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

button, select, input { font: inherit; }

.wrap {
  width: calc(100% - 40px);
  max-width: var(--max);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: rgba(1,23,84,.38);
  border-bottom: 1px solid rgba(255,255,255,.10);
  /* Avoid compositor flashes when crossing the mobile/static -> desktop/sticky breakpoint. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: 210px 1fr auto;
  align-items: center;
  gap: 24px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 205px;
  max-width: 100%;
  height: auto;
}

.nav-title {
  min-width: 0;
}

.nav-title strong {
  display: block;
  margin-top: 2px;
  font-size: 1.02rem;
}

.eyebrow {
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .76rem;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: #111827;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255,196,0,.12);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.button:hover:not(:disabled),
button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255,196,0,.22);
}

.button.secondary,
button.secondary {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 10px 30px rgba(255,196,0,.10);
}

button:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

select, input {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,15,59,.72);
  color: var(--ink);
  padding: .58rem .72rem;
}

main { display: block; }

.timing-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 78% 42%, rgba(255,196,0,.075) 0%, rgba(255,196,0,0) 32%),
    linear-gradient(135deg, #011754 0%, #062775 52%, #011754 100%);
}

.timing-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -8%;
  right: -7%;
  width: 70%;
  height: 116%;
  opacity: .14;
  background-image:
    conic-gradient(
      from 90deg,
      rgba(255,255,255,.88) 0 25%,
      rgba(0,15,59,.88) 0 50%,
      rgba(255,255,255,.88) 0 75%,
      rgba(0,15,59,.88) 0
    );
  background-size: 92px 92px;
  transform: rotate(-4deg) skewX(-8deg);
  transform-origin: center;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 5%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.55) 16%, #000 25%, #000 75%, rgba(0,0,0,.55) 84%, rgba(0,0,0,.18) 90%, transparent 95%),
    linear-gradient(to left, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 24%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.18) 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 5%, rgba(0,0,0,.18) 10%, rgba(0,0,0,.55) 16%, #000 25%, #000 75%, rgba(0,0,0,.55) 84%, rgba(0,0,0,.18) 90%, transparent 95%),
    linear-gradient(to left, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 24%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.18) 78%, transparent 100%);
  mask-composite: intersect;
}

.timing-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 60px;
  min-height: 410px;
  padding-block: 64px;
}

.timing-hero h1 {
  margin: 10px 0 0;
  max-width: 850px;
  font-size: clamp(3rem, 6vw, 5.9rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.timing-hero h1 em {
  color: var(--yellow);
  font-style: italic;
}

.hero-lead {
  max-width: 720px;
  margin: 25px 0 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
}

.hero-logo-card {
  position: relative;
  z-index: 1;
}

.hero-logo-card img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.18));
}

.app-shell {
  display: grid;
  gap: 18px;
  padding-block: 34px 70px;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.status-strip div {
  min-width: 0;
  padding: 17px 18px;
  border-right: 1px solid var(--soft-line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
}

.status-strip div:last-child { border-right: 0; }

.status-strip span,
.coach-summary span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.status-strip strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  background-image: linear-gradient(135deg, #011754 0%, #062775 50%, #011754 100%);
  box-shadow: var(--shadow);
  padding: 26px;
}

.app-shell > .card:nth-of-type(even),
.grid.two > .card:nth-child(even) {
  background-color: var(--navy-dark);
  background-image: linear-gradient(135deg, #000f3b 0%, #05205f 55%, #000f3b 100%);
}

.hero-card::before,
.telemetry-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: -8%;
  right: -7%;
  width: 65%;
  height: 116%;
  opacity: .075;
  background-image:
    conic-gradient(
      from 90deg,
      rgba(255,255,255,.88) 0 25%,
      rgba(0,15,59,.88) 0 50%,
      rgba(255,255,255,.88) 0 75%,
      rgba(0,15,59,.88) 0
    );
  background-size: 72px 72px;
  transform: rotate(-4deg) skewX(-8deg);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 5%, rgba(0,0,0,.45) 15%, #000 28%, #000 72%, rgba(0,0,0,.45) 85%, transparent 95%),
    linear-gradient(to left, rgba(0,0,0,.95), rgba(0,0,0,.55) 50%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 5%, rgba(0,0,0,.45) 15%, #000 28%, #000 72%, rgba(0,0,0,.45) 85%, transparent 95%),
    linear-gradient(to left, rgba(0,0,0,.95), rgba(0,0,0,.55) 50%, transparent 100%);
  mask-composite: intersect;
}

.card > * {
  position: relative;
  z-index: 1;
}

.section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.section-head h2 {
  margin: 4px 0 0;
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  letter-spacing: -.03em;
}

.section-head p { margin: 0; }

.muted { color: var(--muted); }

.pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0,15,59,.66);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  padding: .34rem .72rem;
}

.pill.warning {
  color: var(--yellow);
  border-color: rgba(255,196,0,.25);
}

.grid.two {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
}

.table-wrap { overflow: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th, td {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .78rem .68rem;
  text-align: left;
}

th {
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

tbody tr {
  transition: background .14s ease;
}

tbody tr:hover {
  background: rgba(255,255,255,.035);
}

tr.leader {
  background: linear-gradient(90deg, rgba(255,196,0,.12), transparent 80%);
}

tr.leader td:first-child {
  color: var(--yellow);
  font-weight: 900;
}

.driver-name { width: 145px; }

.car-badge {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255,196,0,.42);
  border-radius: 50%;
  background: rgba(255,196,0,.09);
  color: var(--yellow);
  font-size: .78rem;
  font-weight: 900;
}

.controller-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.controller-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,15,59,.42);
  padding: 15px;
  transition: border-color .14s ease, background .14s ease;
}

.controller-card.active {
  border-color: rgba(255,196,0,.75);
  background: rgba(255,196,0,.055);
}

.controller-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .55rem;
}

.controller-top strong {
  font: 900 1.35rem ui-monospace, SFMono-Regular, Menlo, monospace;
}

.controller-meter {
  overflow: hidden;
  height: 8px;
  margin: .65rem 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.controller-meter i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #d9a900, var(--yellow), #ffe36b);
  transition: width 80ms linear;
}

.controller-raw {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .76rem;
}

.state-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.tag {
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  padding: .18rem .48rem;
}

.tag.on {
  background: var(--yellow);
  color: #111827;
}

.tag.lane.on {
  background: #fff;
  color: var(--navy);
}

.calibration-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.calibration-controls label {
  display: grid;
  gap: 5px;
}

.calibration-status {
  margin: 14px 0;
  border-left: 3px solid var(--yellow);
  border-radius: 0 12px 12px 0;
  background: rgba(0,15,59,.6);
  color: var(--muted);
  padding: 12px 14px;
}

.mapping-list {
  display: grid;
  gap: 7px;
}

.mapping-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(0,15,59,.45);
  padding: .62rem .72rem;
}

.coach-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.coach-summary div {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,15,59,.48);
  padding: 13px;
}

.coach-summary strong {
  color: var(--yellow);
}

#telemetryCanvas {
  width: 100%;
  height: 260px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(0,15,59,.66);
}

.coach-advice {
  margin-top: 12px;
  border: 1px solid rgba(255,196,0,.2);
  border-radius: 15px;
  background: rgba(255,196,0,.05);
  padding: 15px;
}

.coach-advice b { color: var(--yellow); }

.debug summary {
  cursor: pointer;
  color: var(--yellow);
  font-weight: 900;
}

.debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

pre {
  overflow: auto;
  max-height: 390px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,7,28,.82);
  color: #c7d1e8;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 14px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-dark);
  background-image: linear-gradient(135deg, #000f3b 0%, #05205f 55%, #000f3b 100%);
  border-top: 1px solid rgba(255,255,255,.10);
}

.site-footer::before {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -35%;
  left: -6%;
  width: 58%;
  height: 180%;
  opacity: .08;
  background-image:
    conic-gradient(
      from 90deg,
      rgba(255,255,255,.88) 0 25%,
      rgba(0,15,59,.88) 0 50%,
      rgba(255,255,255,.88) 0 75%,
      rgba(0,15,59,.88) 0
    );
  background-size: 68px 68px;
  transform: rotate(4deg) skewX(8deg);
  mask-image: linear-gradient(to right, #000, transparent 90%);
}

.footer-inner {
  position: relative;
  z-index: 1;
  min-height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: var(--muted);
}

.footer-inner img {
  width: 190px;
  height: auto;
}

@media (max-width: 1100px) {
  .nav {
    grid-template-columns: 180px 1fr;
    gap: 18px;
  }

  .top-actions {
    grid-column: 1 / -1;
    justify-content: start;
    padding-bottom: 12px;
  }

  .timing-hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-logo-card {
    display: none;
  }

  .status-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid.two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .timing-hero::before {
    top: -7%;
    right: -24%;
    width: 110%;
    height: 114%;
    opacity: .10;
    background-size: 72px 72px;
  }
}

@media (max-width: 720px) {
  .wrap {
    width: calc(100% - 28px);
  }

  .site-header {
    position: static;
  }

  .nav {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: 12px;
  }

  .nav-title {
    display: none;
  }
.top-actions {
    grid-column: auto;
    padding-bottom: 0;
  }

  .timing-hero-inner {
    min-height: 330px;
    padding-block: 48px;
  }

  .timing-hero h1 {
    font-size: clamp(2.6rem, 13vw, 4.2rem);
  }

  .controller-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .coach-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .timing-hero::before {
    top: -6%;
    right: -44%;
    width: 148%;
    height: 112%;
    opacity: .085;
    background-size: 58px 58px;
  }

  .status-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .controller-grid {
    grid-template-columns: 1fr;
  }

  .card {
    border-radius: 18px;
    padding: 18px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.calibration-ready{margin:12px 0 14px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(0,15,59,.46);color:var(--muted);font-weight:800}.calibration-ready.ready{border-color:rgba(255,196,0,.28);background:rgba(255,196,0,.07);color:var(--yellow)}.compact-table{margin-top:10px}.compact-table th,.compact-table td{padding-top:.56rem;padding-bottom:.56rem}.status-chip{display:inline-flex;align-items:center;min-width:84px;justify-content:center;border-radius:999px;padding:.22rem .55rem;font-size:.68rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(255,255,255,.12)}.status-verified{color:#111827;background:var(--yellow);border-color:var(--yellow)}.status-probable{color:var(--yellow);background:rgba(255,196,0,.08);border-color:rgba(255,196,0,.28)}.status-conflict{color:#ffd7d7;background:rgba(255,80,80,.12);border-color:rgba(255,80,80,.32)}.status-ambiguous{color:#d6e2ff;background:rgba(113,182,255,.10);border-color:rgba(113,182,255,.25)}.status-untested{color:var(--muted);background:rgba(255,255,255,.04)}.mapping-title{margin:18px 0 8px;font-size:.92rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}


.signature-cell {
  white-space: nowrap;
}

.signature-cell code + code {
  margin-left: .15rem;
}

.protocol-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.protocol-map>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(0,15,59,.42)}
.protocol-map span{color:var(--muted);font-size:.8rem}.protocol-map strong{color:var(--yellow)}.protocol-note{margin-top:14px}
@media(max-width:680px){.protocol-map{grid-template-columns:1fr}}


.race-setup-card {
  position: relative;
  overflow: hidden;
}

.race-setup-grid {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(360px, 1.4fr) minmax(240px, .8fr);
  gap: 22px;
  align-items: stretch;
}

.race-config {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}

.race-config label,
.setup-label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.race-config select,
.race-config input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,15,59,.6);
  color: var(--ink);
}

.race-rule {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.race-rule span { color: var(--muted); }
.race-rule strong { color: var(--yellow); letter-spacing: .08em; }

.participant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.participant-option {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}

.participant-option.selected,
.participant-option:has(input:checked) {
  border-color: rgba(255,196,0,.65);
  background: rgba(255,196,0,.08);
}

.participant-option input[type="checkbox"] {
  width: 17px;
  height: 17px;
  padding: 0;
  accent-color: var(--yellow);
}

.setup-help { margin: 10px 0 0; }

.race-status-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(255,196,0,.25);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 15%, rgba(255,196,0,.1), transparent 9rem),
    rgba(0,15,59,.48);
}

.race-status-panel > strong {
  margin-top: 4px;
  font-size: 1.45rem;
}

.race-status-panel > div:not(.countdown-display) {
  margin-top: 5px;
  color: var(--muted);
}

.countdown-display {
  min-height: 54px;
  margin-top: 8px;
  color: var(--yellow);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.04em;
}

.finish-order-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--soft-line);
}

.finish-order-panel > div:first-child strong {
  display: block;
  margin-top: 2px;
}

.finish-order {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.finish-chip {
  padding: 7px 10px;
  border: 1px solid rgba(255,196,0,.28);
  border-radius: 999px;
  background: rgba(255,196,0,.07);
}

.finish-chip b { color: var(--yellow); }

.timing-table tr.inactive-racer {
  opacity: .48;
}

.timing-table tr.inactive-racer input {
  opacity: 1;
}

@media (max-width: 1050px) {
  .race-setup-grid { grid-template-columns: 1fr 1fr; }
  .race-status-panel { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .race-setup-grid,
  .race-config { grid-template-columns: 1fr; }
  .race-rule { grid-column: auto; }
  .participant-grid { grid-template-columns: 1fr 1fr; }
  .finish-order-panel { align-items: flex-start; flex-direction: column; }
  .finish-order { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .participant-grid { grid-template-columns: 1fr; }
}


.start-lights {
  display: grid;
  grid-template-columns: repeat(5, minmax(38px, 1fr));
  gap: 12px;
  width: min(100%, 390px);
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(10,14,28,.96), rgba(2,6,18,.96));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.45),
    0 18px 36px rgba(0,0,0,.24);
}

.start-light {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.08), transparent 22%),
    #151923;
  box-shadow:
    inset 0 5px 12px rgba(255,255,255,.035),
    inset 0 -7px 14px rgba(0,0,0,.6);
  transition:
    background .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    transform .12s ease;
}

.start-light.red {
  border-color: rgba(255,80,80,.62);
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.7), transparent 18%),
    radial-gradient(circle, #ff463d 0 46%, #a60d12 72%, #42050a 100%);
  box-shadow:
    0 0 14px rgba(255,45,45,.75),
    0 0 34px rgba(255,20,20,.28),
    inset 0 -8px 14px rgba(85,0,0,.5);
  transform: translateY(-1px);
}

.start-light.green {
  border-color: rgba(80,255,150,.72);
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.72), transparent 18%),
    radial-gradient(circle, #35ef7e 0 46%, #079b48 72%, #034d27 100%);
  box-shadow:
    0 0 15px rgba(41,255,128,.72),
    0 0 36px rgba(21,220,98,.30),
    inset 0 -8px 14px rgba(0,75,35,.46);
}

.start-light.yellow {
  border-color: rgba(255,220,70,.76);
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.74), transparent 18%),
    radial-gradient(circle, #ffd928 0 46%, #d39d00 72%, #634200 100%);
  box-shadow:
    0 0 15px rgba(255,218,41,.75),
    0 0 36px rgba(255,196,0,.32),
    inset 0 -8px 14px rgba(91,61,0,.48);
}

.light-status {
  margin-top: 10px;
  min-height: 1.5em;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .03em;
}

.race-status-panel[data-light-state="countdown"] .light-status {
  color: #ff8b87;
}

.race-status-panel[data-light-state="go"] .light-status {
  color: #65f3a0;
}

.race-status-panel[data-light-state="finished"] .light-status {
  color: var(--yellow);
}

.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: 480px) {
  .start-lights {
    gap: 8px;
    padding: 10px;
  }
}


/* --- race-control UX --- */
.race-control-app .timing-hero { display: none; }
.race-control-app .race-main { padding-top: 28px; padding-bottom: 44px; }
.race-control-app .site-header { position: sticky; top: 0; z-index: 30; }
.race-control-app .nav { min-height: 76px; }
.race-control-app .card { border-radius: 22px; }

.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}
.connection-pill i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6e778a;
  box-shadow: 0 0 0 4px rgba(110,119,138,.1);
}
.connection-pill.connected { color: #bdf8d2; }
.connection-pill.connected i {
  background: #35df7b;
  box-shadow: 0 0 0 4px rgba(53,223,123,.12);
}

.race-board {
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
}
.race-board::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: -8%;
  right: -7%;
  width: 70%;
  height: 116%;
  opacity: .14;

  background-image:
    conic-gradient(
      from 90deg,
      rgba(255,255,255,.88) 0 25%,
      rgba(0,15,59,.88) 0 50%,
      rgba(255,255,255,.88) 0 75%,
      rgba(0,15,59,.88) 0
    );
  background-size: 92px 92px;

  transform: rotate(-4deg) skewX(-8deg);
  transform-origin: center;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 5%,
      rgba(0,0,0,.18) 10%,
      rgba(0,0,0,.55) 16%,
      #000 25%,
      #000 75%,
      rgba(0,0,0,.55) 84%,
      rgba(0,0,0,.18) 90%,
      transparent 95%
    ),
    linear-gradient(
      to left,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.88) 24%,
      rgba(0,0,0,.58) 52%,
      rgba(0,0,0,.18) 78%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to bottom,
      transparent 5%,
      rgba(0,0,0,.18) 10%,
      rgba(0,0,0,.55) 16%,
      #000 25%,
      #000 75%,
      rgba(0,0,0,.55) 84%,
      rgba(0,0,0,.18) 90%,
      transparent 95%
    ),
    linear-gradient(
      to left,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.88) 24%,
      rgba(0,0,0,.58) 52%,
      rgba(0,0,0,.18) 78%,
      transparent 100%
    );
  mask-composite: intersect;
}
.race-board-top {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.race-identity h1 {
  margin: 5px 0 5px;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .96;
  letter-spacing: -.04em;
}
.race-message { color: var(--muted); font-weight: 650; }
.race-clock-block {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.race-clock {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 5vw, 3.7rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.race-clock-block > span:last-child { color: var(--muted); font-size: .9rem; }
.race-state-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,196,0,.12);
  color: var(--yellow);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.race-gantry-row {
  display: grid;
  grid-template-columns: minmax(300px, 470px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}
.race-control-app .race-status-panel {
  padding: 0;
  min-height: 0;
  background: transparent;
  border: 0;
}
.race-control-app .start-lights {
  width: 100%;
  margin: 0;
  max-width: 470px;
}
.race-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.button.danger {
  background: rgba(221,61,68,.12);
  color: #ff9da2;
  border: 1px solid rgba(255,96,106,.32);
}
.button.danger:hover { background: rgba(221,61,68,.20); }

.primary-timing-table table { table-layout: fixed; }

/* Cross-browser table geometry: keep <td> elements as true table cells so
   Firefox/WebKit/Blink all paint row separators continuously. */
.primary-timing-table table {
  border-collapse: collapse;
  border-spacing: 0;
}
.primary-timing-table tbody td {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.primary-timing-table tbody tr:last-child td {
  border-bottom-color: rgba(255,255,255,.08);
}
.primary-timing-table th:nth-child(1) { width: 72px; }
.primary-timing-table th:nth-child(2) { width: 34%; }
.primary-timing-table th:not(:nth-child(2)) { text-align: right; }
.primary-timing-table td:not(:nth-child(2)) { text-align: right; }
.primary-timing-table td {
  padding-top: 17px;
  padding-bottom: 17px;
  font-variant-numeric: tabular-nums;
}
.primary-timing-table td[data-field="position"] {
  font-size: 1.45rem;
  font-weight: 950;
}
.driver-cell {
  text-align: left !important;
}
.driver-cell-content {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.driver-cell strong { font-size: 1.05rem; }
.timing-table tbody tr { cursor: pointer; }
.timing-table tbody tr.inactive-racer { opacity: .27; }
.timing-table tbody tr.leader {
  background: linear-gradient(90deg, rgba(255,196,0,.13), rgba(255,196,0,.02));
}
.table-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.results-view { padding-top: 8px; }
.results-heading { text-align: center; margin-bottom: 12px; }
.results-heading h2 {
  margin: 4px 0 0;
  font-size: clamp(2rem, 5vw, 3.3rem);
}
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  align-items: end;
  max-width: 880px;
  margin: 26px auto 30px;
}
.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 20px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  text-align: center;
}
.podium-place.p1 {
  min-height: 248px;
  padding-top: 28px;
  border-color: rgba(255,196,0,.42);
  background: linear-gradient(180deg, rgba(255,196,0,.13), rgba(255,196,0,.025));
}
.podium-place.p2 { min-height: 205px; }
.podium-place.p3 { min-height: 180px; }
.podium-place strong { font-size: clamp(1rem, 2.2vw, 1.35rem); }
.podium-place small, .podium-place > span:not(.car-badge) { color: var(--muted); }
.podium-rank {
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1;
  font-weight: 950;
  color: var(--yellow);
}
.podium-empty { color: var(--muted); font-weight: 900; }

.classification-block {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 18px;
}
.classification-list { margin-top: 12px; }
.classification-row {
  display: grid;
  grid-template-columns: 54px minmax(160px,1fr) 100px 130px;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.classification-row > span:nth-child(n+3) { text-align: right; color: var(--muted); }
.post-race-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.technical-tools { margin-top: 18px; }
.technical-tools > summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--muted);
}
.compact-status { margin: 18px 0; }
.tech-grid { margin-top: 20px; }

.race-dialog {
  width: min(960px, calc(100% - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: #06163f;
  color: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.race-dialog::backdrop {
  /* Native dialog backdrop blur can flash while the modal scroll layer repaints. */
  background: rgba(0,8,29,.88);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dialog-shell { padding: clamp(20px,4vw,34px); }
.dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dialog-head h2 { margin: 5px 0 5px; font-size: clamp(1.7rem,4vw,2.6rem); }
.dialog-head p { margin: 0; color: var(--muted); }
.icon-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 1.7rem;
}
.setup-modal-grid {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap: 28px;
  padding: 24px 0;
}
.modal-participants { grid-template-columns: repeat(2, minmax(0,1fr)); }
.modal-participants .participant-option {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  gap: 10px;
  align-items: center;
}
.participant-driver-name {
  min-width: 0;
  width: 100%;
  padding: 10px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #fff;
  font: inherit;
}
.dialog-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.analysis-select {
  display: block;
  max-width: 340px;
  margin: 22px 0 16px;
}
.analysis-dialog canvas { width: 100%; margin-top: 16px; }
.analysis-stats { margin-top: 22px; }

.race-control-app .race-status-panel[data-light-state="paused"] .light-status {
  color: #ffcf55;
  letter-spacing: .12em;
}

@media (max-width: 820px) {
  .race-board-top,
  .race-gantry-row,
  .setup-modal-grid {
    grid-template-columns: 1fr;
  }
  .race-clock-block { justify-items: start; }
  .race-actions { justify-content: flex-start; }
  .modal-participants { grid-template-columns: 1fr; }
  .classification-row {
    grid-template-columns: 44px minmax(120px,1fr);
  }
  .classification-row > span:nth-child(n+3) {
    text-align: left;
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .race-control-app .nav-title { display: none; }
  .connection-pill { display: none; }
  .race-control-app .top-actions { gap: 6px; }
  .race-control-app .top-actions .button { padding-inline: 10px; }
  .podium {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .podium-place.p1 { order: -1; }
  .podium-place.p1,
  .podium-place.p2,
  .podium-place.p3 { min-height: 0; border-radius: 14px; }
  .primary-timing-table th:nth-child(4),
  .primary-timing-table td:nth-child(4) { display: none; }
  .primary-timing-table th:nth-child(2) { width: 42%; }
}


/* --- finish-light emphasis --- */
@keyframes race-finished-yellow-blink {
  0%, 42% {
    opacity: 1;
    filter: brightness(1);
  }
  50%, 92% {
    opacity: .18;
    filter: brightness(.62);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.race-status-panel[data-light-state="finished"] .start-light.yellow {
  animation: race-finished-yellow-blink 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .race-status-panel[data-light-state="finished"] .start-light.yellow {
    animation: none;
  }
}


/* --- race setup polish --- */
[hidden] {
  display: none !important;
}

.modal-participants .participant-driver-name {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  background: rgba(0,15,59,.72);
  color: #fff;
  opacity: 1;
}

.modal-participants .participant-driver-name::placeholder {
  color: rgba(255,255,255,.48);
}

.icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  padding: 0;
  line-height: 1;
  text-align: center;
}

.dialog-actions-end {
  justify-content: flex-end;
}


/* --- modal close-button centering --- */
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  line-height: 0;
}

.icon-button svg {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
  pointer-events: none;
}

.icon-button svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
}


.race-warning {
  margin: 0 0 14px;
  padding: 11px 14px;
  border: 1px solid rgba(255,196,0,.42);
  border-radius: 12px;
  background: rgba(255,196,0,.10);
  color: #ffe188;
  font-weight: 800;
}


/* --- paused-race caution lights --- */
@keyframes race-paused-yellow-blink {
  0%, 44% {
    opacity: 1;
    filter: brightness(1);
  }
  50%, 94% {
    opacity: .16;
    filter: brightness(.58);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.race-status-panel[data-light-state="paused"] .start-light.yellow {
  animation: race-paused-yellow-blink .8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .race-status-panel[data-light-state="paused"] .start-light.yellow {
    animation: none;
  }
}


/* --- controller-colour UX --- */
:root {
  --controller-1: #ef4444;
  --controller-2: #35df7b;
  --controller-3: #4f8cff;
  --controller-4: #ffc400;
  --controller-5: #ff962d;
  --controller-6: #f5f7fb;
}

.controller-badge {
  background: var(--controller-soft, rgba(255,196,0,.09));
  border-color: rgba(255,255,255,.28);
  border-color: color-mix(in srgb, var(--controller-accent, var(--yellow)) 60%, white 12%);
  color: var(--controller-ink, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.driver-meta {
  display: grid;
  gap: 2px;
}

.driver-meta strong {
  font-size: 1.05rem;
}

.driver-meta span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.controller-card {
  border-left: 4px solid var(--controller-accent, rgba(255,255,255,.2));
}

.modal-setup-help {
  margin: 10px 0 14px;
  max-width: 64ch;
  color: var(--muted);
  font-size: .92rem;
}

.modal-participants {
  grid-template-columns: 1fr;
  gap: 12px;
}

.modal-participants .participant-option {
  position: relative;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(230px, .95fr);
  align-items: start;
  gap: 14px;
  padding: 14px 15px;
  border-left: 4px solid var(--controller-accent, rgba(255,255,255,.2));
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.modal-participants .participant-option:has(input:checked) {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 1px rgba(255,196,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 1px color-mix(in srgb, var(--controller-accent, var(--yellow)) 44%, transparent);
}

.participant-toggle-wrap {
  display: inline-grid;
  justify-items: start;
  gap: 7px;
  padding-top: 2px;
}

.participant-toggle-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.participant-controller-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.participant-controller-copy {
  display: grid;
  gap: 3px;
}

.participant-controller-copy strong {
  font-size: 1rem;
}

.participant-controller-copy span {
  color: var(--muted);
  font-size: .82rem;
}

.participant-name-field {
  display: grid;
  gap: 7px;
}

.participant-name-field > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 800;
}

.participant-name-field em {
  font-style: normal;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
}

.podium-place {
  position: relative;
  overflow: hidden;
}

.podium-place::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.04));
  pointer-events: none;
}

.podium-trophy {
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.15), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.22);
}

.podium-trophy svg {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.22));
}

.podium-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
}

.podium-empty .podium-rank {
  color: rgba(255,255,255,.42);
}

.classification-row .car-badge,
#statsBody .car-badge,
.driver-cell .car-badge,
.controller-top .car-badge,
.podium-place .car-badge {
  vertical-align: middle;
}

@media (max-width: 820px) {
  .modal-participants .participant-option {
    grid-template-columns: 1fr;
  }

  .participant-toggle-wrap {
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
  }
}


/* --- header/footer polish --- */
.site-header .brand-link {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.site-header .brand-logo {
  display: block;
  width: min(100%, 210px);
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}

.site-header .top-actions .button,
.site-header .top-actions button {
  background: var(--yellow);
  color: #111827;
  border-color: var(--yellow);
  box-shadow: 0 10px 30px rgba(255,196,0,.16);
}

.site-header .top-actions .button.secondary,
.site-header .top-actions button.secondary {
  background: #0a2a72;
  color: #ffffff;
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.site-header .top-actions .button.secondary:hover:not(:disabled),
.site-header .top-actions button.secondary:hover:not(:disabled) {
  background: #123780;
}

.footer-inner {
  min-height: 104px;
  padding-block: 24px;
  text-align: center;
}

.footer-inner p {
  max-width: 980px;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

.footer-inner img {
  display: none;
}

@media (max-width: 720px) {
}


/* --- controller selection emphasis --- */
.modal-participants .participant-option:has(.participant-toggle:checked) {
  border-color: var(--controller-accent, var(--yellow));
  border-left-color: var(--controller-accent, var(--yellow));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--controller-accent, var(--yellow)) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--controller-accent, var(--yellow)) 32%, transparent),
    0 10px 28px color-mix(in srgb, var(--controller-accent, var(--yellow)) 14%, transparent);
}


/* --- podium helmet polish --- */
.podium-icons {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 10px;
  min-height: 82px;
}

.podium-helmet {
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(0,0,0,.20);
}

.podium-helmet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.22));
}

@media (max-width: 640px) {
  .podium-icons {
    gap: 8px;
  }

  .podium-trophy,
  .podium-helmet {
    width: 68px;
    height: 68px;
  }
}

/* --- timing-row accents + helmet redraw --- */
.primary-timing-table tbody tr {
  box-shadow: inset 4px 0 0 var(--controller-accent, transparent);
}

.primary-timing-table tbody tr:hover {
  box-shadow:
    inset 4px 0 0 var(--controller-accent, transparent),
    inset 0 0 0 999px rgba(255,255,255,.018);
}

.primary-timing-table tbody tr.leader {
  box-shadow:
    inset 4px 0 0 var(--controller-accent, var(--yellow)),
    inset 0 0 0 999px color-mix(in srgb, var(--controller-accent, var(--yellow)) 6%, transparent);
}

.podium-helmet {
  width: 94px;
  height: 74px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.018));
}

.podium-helmet img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* --- event-site pane background + neutral border --- */
.race-board {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background-color: #062775;
  background-image:
    linear-gradient(120deg, #011754 0%, #062775 52%, #011754 100%);
}

.race-board::after {
  content: none;
}

.classification-heading {
  display: block;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .02em;
}


/* Exact responsive chequered-flag treatment from the NixScalextric event-site hero. */
@media (max-width: 900px) {
  .race-board::before {
    top: -7%;
    right: -24%;
    width: 110%;
    height: 114%;
    opacity: .10;
    background-size: 72px 72px;
  }
}

@media (max-width: 520px) {
  .race-board::before {
    top: -6%;
    right: -44%;
    width: 148%;
    height: 112%;
    opacity: .085;
    background-size: 58px 58px;
  }
}


/* --- live leaderboard position movement --- */
.primary-timing-table tbody tr {
  transition:
    transform 320ms cubic-bezier(.2,.8,.2,1),
    background .14s ease,
    opacity .14s ease,
    box-shadow .14s ease;
  will-change: transform;
}

.primary-timing-table tbody tr.leaderboard-row-moving {
  z-index: 2;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .primary-timing-table tbody tr {
    transition:
      background .14s ease,
      opacity .14s ease,
      box-shadow .14s ease;
  }
}


/* --- podium WebP helmets --- */
.podium-helmet {
  width: 116px;
  height: 88px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.podium-helmet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.24));
}

@media (max-width: 640px) {
  .podium-helmet {
    width: 104px;
    height: 78px;
  }
}


/* --- podium redesign --- */
.results-view { padding-top: 10px; }
.results-heading { text-align: center; margin-bottom: 4px; }
.results-heading h2 { margin-top: 2px; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.045em; }

.podium {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.12fr) minmax(0, .92fr);
  gap: 18px;
  align-items: end;
  max-width: 980px;
  margin: 34px auto 50px;
  padding: 34px 26px 0;
}
.podium::before {
  content: "";
  position: absolute;
  inset: 0 5% 6%;
  z-index: 0;
  pointer-events: none;
  border-radius: 40px;
  background: radial-gradient(circle at 50% 30%, rgba(0,15,59,.58), rgba(0,15,59,.18) 46%, transparent 76%);
}
.podium-place {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 20px 18px 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px 22px 8px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018));
  text-align: center;
  overflow: visible;
}
.podium-place::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 7px;
  border-radius: 0 0 8px 8px;
  background: rgba(255,255,255,.10);
  opacity: .8;
}
.podium-place.p1 {
  min-height: 360px;
  padding-top: 24px;
  border-color: rgba(255,196,0,.52);
  background: radial-gradient(circle at 50% 18%, rgba(255,196,0,.12), transparent 13rem), linear-gradient(180deg, rgba(255,196,0,.11), rgba(255,255,255,.018));
  box-shadow: 0 18px 38px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-10px);
}
.podium-place.p1::after { background: linear-gradient(90deg, #d9a900, #ffc400, #ffe06a); opacity: 1; }
.podium-place.p2 { min-height: 310px; }
.podium-place.p2::after { background: linear-gradient(90deg, #8f9bad, #c7d1e8, #eef3ff); }
.podium-place.p3 { min-height: 282px; }
.podium-place.p3::after { background: linear-gradient(90deg, #8f542d, #d28a4f, #efbd8d); }

.podium-helmet-wrap { display: grid; place-items: center; min-height: 108px; margin-bottom: 0; }
.podium-place.p1 .podium-helmet { width: 154px; height: 112px; }
.podium-place.p2 .podium-helmet,
.podium-place.p3 .podium-helmet { width: 132px; height: 98px; }
.podium-helmet { display: grid; place-items: center; padding: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.podium-helmet img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 12px 18px rgba(0,0,0,.28)); }

.podium-position-row { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; }
.podium-position { font-size:clamp(2.7rem,5vw,4.7rem); line-height:.85; font-weight:950; letter-spacing:-.06em; color:#fff; font-variant-numeric:tabular-nums; }
.podium-place.p1 .podium-position { color:var(--yellow); font-size:clamp(3.3rem,6vw,5.4rem); }
.podium-place.p2 .podium-position { color:#e3e8f2; }
.podium-place.p3 .podium-position { color:#d9a174; }

.podium-cup-mini { display:inline-grid; place-items:center; width:38px; height:38px; opacity:.95; }
.podium-cup-mini .podium-trophy { width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.055); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.podium-cup-mini .podium-trophy svg { width:26px; height:26px; filter:none; }

.podium-driver { margin-top:2px; font-size:clamp(1.18rem,2.5vw,1.55rem)!important; line-height:1.1; letter-spacing:-.02em; }
.podium-place.p1 .podium-driver { font-size:clamp(1.35rem,3vw,1.78rem)!important; }
.podium-result-line { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; color:var(--muted); font-size:.93rem; font-weight:700; font-variant-numeric:tabular-nums; }
.podium-empty { display:grid; place-items:center; gap:8px; min-height:120px; color:rgba(255,255,255,.34); }
.podium-empty-position { font-size:3.4rem; line-height:1; font-weight:950; letter-spacing:-.06em; }
.classification-block { margin-top:10px; padding-top:24px; }

@media (max-width:760px) {
  .podium { grid-template-columns:1fr; align-items:stretch; max-width:560px; padding-inline:0; gap:14px; }
  .podium-place.p1 { order:-1; transform:none; }
  .podium-place.p1,.podium-place.p2,.podium-place.p3 { min-height:0; border-radius:18px; }
  .podium-place.p1 .podium-helmet,.podium-place.p2 .podium-helmet,.podium-place.p3 .podium-helmet { width:136px; height:100px; }
  .podium-position-row { min-height:44px; }
}


/* --- active green lights + stable race setup sizing --- */
.race-status-panel[data-light-state="racing"] .light-status {
  color: #65f3a0;
}

.race-config > label {
  grid-template-rows: 1.25rem 44px;
  min-height: 70px;
  align-content: start;
}

.race-config > label > select,
.race-config > label > input {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
}

#lapTargetField,
#timeTargetField {
  min-height: 70px;
}

#lapTargetField,
#timeTargetField,
.race-config > label {
  white-space: nowrap;
}


/* --- consistent race configuration controls --- */
.race-config {
  width: 100%;
}

.race-config > label {
  width: 100%;
  min-width: 0;
}

#raceMode,
#targetLaps,
#durationMinutes {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

#lapTargetField,
#timeTargetField {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* --- start-light focus + scale refinement --- */
.race-status-panel {
  scroll-margin-top: 112px;
}

.start-lights {
  grid-template-columns: repeat(5, minmax(34px, 1fr));
  gap: 9px;
  width: min(100%, 340px);
  padding: 11px;
  border-radius: 15px;
}

@media (max-width: 480px) {
  .start-lights {
    gap: 7px;
    padding: 9px;
  }

  .race-status-panel {
    scroll-margin-top: 94px;
  }
}


/* --- live-race viewport + HUD refinement --- */

/*
 * The race should open on the whole control HUD, not just the gantry.
 * This offset clears the sticky application header.
 */
.race-board {
  scroll-margin-top: 92px;
}

/* The old gantry-specific scroll target is no longer needed. */
.race-status-panel {
  scroll-margin-top: 0;
}

/* Slightly denser hierarchy keeps clock, lights and standings in one view. */
.race-board[data-race-phase="countdown"] .race-board-top,
.race-board[data-race-phase="racing"] .race-board-top,
.race-board[data-race-phase="paused"] .race-board-top {
  padding-bottom: 14px;
}

.race-board[data-race-phase="countdown"] .race-identity h1,
.race-board[data-race-phase="racing"] .race-identity h1,
.race-board[data-race-phase="paused"] .race-identity h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.race-board[data-race-phase="countdown"] .race-clock,
.race-board[data-race-phase="racing"] .race-clock,
.race-board[data-race-phase="paused"] .race-clock {
  font-size: clamp(2rem, 4vw, 3.15rem);
}

.race-board[data-race-phase="countdown"] .race-gantry-row,
.race-board[data-race-phase="racing"] .race-gantry-row,
.race-board[data-race-phase="paused"] .race-gantry-row {
  padding: 14px 0 12px;
}

.race-board[data-race-phase="countdown"] .light-status,
.race-board[data-race-phase="racing"] .light-status,
.race-board[data-race-phase="paused"] .light-status {
  margin-top: 7px;
}

/* Make the top of the live standings feel like part of the same race HUD. */
.primary-timing-table {
  border-top: 1px solid rgba(255,255,255,.07);
}

.primary-timing-table thead th {
  background: rgba(0,15,59,.18);
}

/* Hidden non-participants should not reserve any table space during a race. */
.primary-timing-table tr[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  .race-board {
    scroll-margin-top: 82px;
  }

  .race-board-top {
    gap: 12px;
  }

  .race-gantry-row {
    gap: 14px;
  }
}


/* --- configure-race UX + controller 6 badge --- */

/* White controller: keep a white identity ring but use a dark centre so the number stays readable. */
.controller-6 {
  background: #102653;
  border-color: rgba(255,255,255,.86);
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.06);
}

/* Modal hierarchy */
.race-setup-head {
  align-items: center;
}

.dialog-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.modal-start-top {
  min-width: 126px;
  white-space: nowrap;
}

.setup-modal-grid {
  align-items: start;
}

.race-config-panel,
.race-drivers-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

.modal-section-title {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}

.modal-section-title .eyebrow {
  font-size: .68rem;
}

.modal-section-title strong {
  font-size: 1rem;
  color: var(--ink);
}

.race-config-panel .race-config {
  grid-template-columns: 1fr;
}

.race-config-panel .race-rule {
  grid-column: auto;
}

.setup-action-copy {
  display: grid;
  gap: 2px;
  margin-right: auto;
}

.setup-action-copy strong {
  color: #fff;
  font-size: .92rem;
}

.setup-action-copy span {
  color: var(--muted);
  font-size: .78rem;
}

.modal-start-primary {
  min-width: 150px;
  padding-inline: 22px;
  box-shadow: 0 10px 28px rgba(255,196,0,.18);
}

.modal-start-primary:not(:disabled),
.modal-start-top:not(:disabled) {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #00164f;
}

.modal-start-primary:disabled,
.modal-start-top:disabled {
  opacity: .42;
}

/* Keep the action area visible while the dialog body scrolls. */
#raceSetupDialog .dialog-shell {
  overflow-y: auto;
  max-height: min(88vh, 900px);
}

@media (max-width: 820px) {
  .race-setup-head {
    align-items: flex-start;
  }

  .dialog-head-actions {
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .modal-start-top {
    display: none;
  }

  .race-config-panel,
  .race-drivers-panel {
    padding: 14px;
  }
}

@media (max-width: 560px) {
  .race-setup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .setup-action-copy {
    margin-right: 0;
  }

  .modal-start-primary {
    width: 100%;
  }
}


/* --- modal layout + form control polish --- */

/*
 * The modal is a three-row layout: header / scrollable content / footer.
 * This avoids the sticky action bar covering driver rows.
 */
#raceSetupDialog .dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  height: min(88vh, 900px);
  max-height: min(88vh, 900px);
}

#raceSetupDialog .setup-modal-grid {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 24px 2px 28px 0;
}

#raceSetupDialog .race-setup-actions {
  position: relative;
  bottom: auto;
  z-index: 1;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
  background: #06163f;
  box-shadow: none;
  backdrop-filter: none;
}

/* Both desktop Start race actions use exactly the same dimensions. */
.modal-start-top,
.modal-start-primary {
  width: 150px;
  min-width: 150px;
  height: 50px;
  min-height: 50px;
  padding: 0 22px;
  white-space: nowrap;
  flex: 0 0 150px;
}

/* More breathing room between control text and the select chevron. */
#raceMode {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, #c9d4eb 50%),
    linear-gradient(135deg, #c9d4eb 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 13px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Keep number steppers away from the field edge and visually aligned. */
#targetLaps,
#durationMinutes {
  padding-right: 10px;
}

#targetLaps::-webkit-inner-spin-button,
#durationMinutes::-webkit-inner-spin-button {
  margin-left: 8px;
  margin-right: 3px;
  opacity: .78;
}

#targetLaps::-webkit-outer-spin-button,
#durationMinutes::-webkit-outer-spin-button {
  margin-right: 3px;
}

/* Use one custom focus treatment for race-setup form controls. Native select
   focus rings vary between Blink, Gecko and WebKit and can otherwise produce
   a visibly different double-ring from text/number fields. */
#raceMode:focus,
#targetLaps:focus,
#durationMinutes:focus,
#raceMode:focus-visible,
#targetLaps:focus-visible,
#durationMinutes:focus-visible {
  outline: none;
  border-color: rgba(255,196,0,.78);
  box-shadow: 0 0 0 2px rgba(255,196,0,.58);
}

/* Firefox can apply an additional UA focus ring to select controls. */
#raceMode:-moz-focusring {
  color: var(--ink);
  text-shadow: 0 0 0 var(--ink);
  outline: none;
}

@media (max-width: 820px) {
  #raceSetupDialog .dialog-shell {
    height: min(92vh, 900px);
    max-height: min(92vh, 900px);
  }
}

@media (max-width: 560px) {
  #raceSetupDialog .race-setup-actions {
    padding-top: 14px;
  }

  .modal-start-primary {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }
}


/* --- connected-next-step + compact live race HUD --- */

body[data-race-phase="racing"] .race-main,
body[data-race-phase="countdown"] .race-main,
body[data-race-phase="paused"] .race-main {
  padding-top: 12px;
}

body[data-race-phase="racing"] .site-header .nav,
body[data-race-phase="countdown"] .site-header .nav,
body[data-race-phase="paused"] .site-header .nav {
  min-height: 66px;
}

.race-board[data-race-phase="racing"] .race-board-top,
.race-board[data-race-phase="countdown"] .race-board-top,
.race-board[data-race-phase="paused"] .race-board-top {
  gap: 18px;
  align-items: center;
  padding-bottom: 10px;
}

.race-board[data-race-phase="racing"] .race-identity .eyebrow,
.race-board[data-race-phase="countdown"] .race-identity .eyebrow,
.race-board[data-race-phase="paused"] .race-identity .eyebrow {
  display: none;
}

.race-board[data-race-phase="racing"] .race-identity h1,
.race-board[data-race-phase="countdown"] .race-identity h1,
.race-board[data-race-phase="paused"] .race-identity h1 {
  margin: 0 0 3px;
  font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  line-height: 1;
}

.race-board[data-race-phase="racing"] .race-message,
.race-board[data-race-phase="countdown"] .race-message,
.race-board[data-race-phase="paused"] .race-message {
  font-size: .9rem;
}

.race-board[data-race-phase="racing"] .race-clock,
.race-board[data-race-phase="countdown"] .race-clock,
.race-board[data-race-phase="paused"] .race-clock {
  font-size: clamp(2rem, 3.5vw, 2.9rem);
}

.race-board[data-race-phase="racing"] .race-clock-block,
.race-board[data-race-phase="countdown"] .race-clock-block,
.race-board[data-race-phase="paused"] .race-clock-block {
  gap: 2px;
}

.race-board[data-race-phase="racing"] .race-gantry-row,
.race-board[data-race-phase="countdown"] .race-gantry-row,
.race-board[data-race-phase="paused"] .race-gantry-row {
  grid-template-columns: minmax(270px, 350px) 1fr;
  gap: 18px;
  padding: 10px 0 9px;
}

.race-board[data-race-phase="racing"] .start-lights,
.race-board[data-race-phase="countdown"] .start-lights,
.race-board[data-race-phase="paused"] .start-lights {
  width: min(100%, 310px);
  gap: 8px;
  padding: 9px;
  margin-top: 0;
  border-radius: 14px;
}

.race-board[data-race-phase="racing"] .light-status,
.race-board[data-race-phase="countdown"] .light-status,
.race-board[data-race-phase="paused"] .light-status {
  min-height: 1.2em;
  margin-top: 4px;
  font-size: .82rem;
}

.race-board[data-race-phase="racing"] .race-actions,
.race-board[data-race-phase="countdown"] .race-actions,
.race-board[data-race-phase="paused"] .race-actions {
  gap: 8px;
}

.race-board[data-race-phase="racing"] .race-actions .button,
.race-board[data-race-phase="countdown"] .race-actions .button,
.race-board[data-race-phase="paused"] .race-actions .button {
  min-height: 42px;
  padding: 0 16px;
}

.race-board[data-race-phase="racing"] .primary-timing-table td,
.race-board[data-race-phase="countdown"] .primary-timing-table td,
.race-board[data-race-phase="paused"] .primary-timing-table td {
  padding-top: 11px;
  padding-bottom: 11px;
}

.race-board[data-race-phase="racing"] .primary-timing-table th,
.race-board[data-race-phase="countdown"] .primary-timing-table th,
.race-board[data-race-phase="paused"] .primary-timing-table th {
  padding-top: 9px;
  padding-bottom: 9px;
}

.race-board[data-race-phase="racing"] .table-hint,
.race-board[data-race-phase="countdown"] .table-hint,
.race-board[data-race-phase="paused"] .table-hint {
  display: none;
}

body[data-race-phase="setup"] .connection-pill.connected ~ #connectBtn:disabled + #configureBtn {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #00164f;
  box-shadow: 0 8px 22px rgba(255,196,0,.16);
}

@media (max-width: 820px) {
  .race-board[data-race-phase="racing"] .race-gantry-row,
  .race-board[data-race-phase="countdown"] .race-gantry-row,
  .race-board[data-race-phase="paused"] .race-gantry-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .race-board[data-race-phase="racing"] .race-actions,
  .race-board[data-race-phase="countdown"] .race-actions,
  .race-board[data-race-phase="paused"] .race-actions {
    justify-content: flex-start;
  }
}


/* --- connection flow + consistent compact race HUD --- */

/*
 * Header actions share the same button language. Their enabled/disabled state,
 * not a different colour scheme, communicates availability.
 */
.site-header .top-actions #connectBtn,
.site-header .top-actions #configureBtn {
  background: var(--yellow);
  color: #111827;
  border-color: var(--yellow);
  box-shadow: 0 10px 30px rgba(255,196,0,.16);
}

.site-header .top-actions #connectBtn:hover:not(:disabled),
.site-header .top-actions #configureBtn:hover:not(:disabled) {
  background: var(--yellow);
}

.site-header .top-actions #connectBtn:disabled,
.site-header .top-actions #configureBtn:disabled {
  opacity: .4;
  box-shadow: none;
}

/*
 * Keep the upper race-control footprint the same in every phase.
 * The compact dimensions previously used only once racing started are now
 * the baseline, eliminating the setup -> countdown -> race layout jump.
 */
.race-control-app .race-main {
  padding-top: 12px;
}

.site-header .nav {
  min-height: 66px;
}

.race-board .race-board-top {
  gap: 18px;
  align-items: center;
  padding-bottom: 10px;
}

.race-board .race-identity .eyebrow {
  display: none;
}

.race-board .race-identity h1 {
  margin: 0 0 3px;
  font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  line-height: 1;
}

.race-board .race-message {
  font-size: .9rem;
}

.race-board .race-clock {
  font-size: clamp(2rem, 3.5vw, 2.9rem);
}

.race-board .race-clock-block {
  gap: 2px;
}

.race-board .race-gantry-row {
  grid-template-columns: minmax(270px, 350px) 1fr;
  gap: 18px;
  padding: 10px 0 9px;
}

.race-board .start-lights {
  width: min(100%, 310px);
  gap: 8px;
  padding: 9px;
  margin-top: 0;
  border-radius: 14px;
}

.race-board .light-status {
  min-height: 1.2em;
  margin-top: 4px;
  font-size: .82rem;
}

.race-board .race-actions {
  gap: 8px;
}

.race-board .race-actions .button {
  min-height: 42px;
  padding: 0 16px;
}

/* Remove the previous setup-only Configure race colour override. */
body[data-race-phase="setup"] .connection-pill.connected ~ #connectBtn:disabled + #configureBtn {
  background: var(--yellow);
  color: #111827;
  border-color: var(--yellow);
}

@media (max-width: 820px) {
  .race-board .race-gantry-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .race-board .race-actions {
    justify-content: flex-start;
  }
}


/* --- mobile podium accent refinement --- */
@media (max-width: 760px) {
  /*
   * The desktop bottom "podium step" stripe looks detached once the cards
   * stack vertically. On mobile, use a restrained top accent instead.
   */
  .podium-place::after {
    content: none;
  }

  .podium-place.p1,
  .podium-place.p2,
  .podium-place.p3 {
    border-radius: 18px;
    overflow: hidden;
    border-bottom-color: rgba(255,255,255,.12);
  }

  .podium-place.p1 {
    border-top: 4px solid #ffc400;
  }

  .podium-place.p2 {
    border-top: 4px solid #c7d1e8;
  }

  .podium-place.p3 {
    border-top: 4px solid #d28a4f;
  }
}


/* --- mobile connection status + Configure race modal --- */
@media (max-width: 560px) {
  /* Keep live Bluetooth state visible on mobile. */
  .connection-pill {
    display: inline-flex;
    min-height: 38px;
    padding: 0 10px;
    gap: 7px;
    font-size: .78rem;
    order: -1;
  }

  .connection-pill i {
    width: 8px;
    height: 8px;
  }

  .race-control-app .top-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .race-control-app .top-actions .button {
    min-height: 42px;
    padding: 0 13px;
    font-size: .88rem;
  }

  /* When already connected, the disabled Connect button adds no value on a
     narrow screen. The status pill carries that state instead. */
  .connection-pill.connected ~ #connectBtn:disabled {
    display: none;
  }

  /* Mobile Configure race behaves like a focused app sheet. */
  #raceSetupDialog {
    width: calc(100% - 16px);
    max-width: none;
    max-height: 96dvh;
    border-radius: 18px;
  }

  #raceSetupDialog .dialog-shell {
    height: 96dvh;
    max-height: 96dvh;
    padding: 14px;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  #raceSetupDialog .race-setup-head {
    gap: 12px;
    padding-bottom: 12px;
    align-items: flex-start;
  }

  #raceSetupDialog .race-setup-head > div:first-child {
    min-width: 0;
  }

  #raceSetupDialog .race-setup-head .eyebrow {
    font-size: .66rem;
  }

  #raceSetupDialog .race-setup-head h2 {
    margin: 4px 0 6px;
    font-size: clamp(1.7rem, 8.5vw, 2.2rem);
    line-height: 1.05;
  }

  #raceSetupDialog .race-setup-head p {
    max-width: 30ch;
    font-size: .88rem;
    line-height: 1.42;
  }

  #raceSetupDialog .icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  #raceSetupDialog .setup-modal-grid {
    display: block;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 1px 18px 0;
    scrollbar-gutter: auto;
  }

  #raceSetupDialog .race-config-panel,
  #raceSetupDialog .race-drivers-panel {
    padding: 12px;
    border-radius: 14px;
  }

  #raceSetupDialog .race-drivers-panel {
    margin-top: 12px;
  }

  #raceSetupDialog .modal-section-title {
    margin-bottom: 10px;
  }

  #raceSetupDialog .modal-section-title strong {
    font-size: .95rem;
  }

  #raceSetupDialog .race-config {
    gap: 10px;
  }

  #raceSetupDialog .race-config > label {
    min-height: 64px;
    grid-template-rows: 1.1rem 42px;
    gap: 5px;
    font-size: .76rem;
  }

  #raceSetupDialog #raceMode,
  #raceSetupDialog #targetLaps,
  #raceSetupDialog #durationMinutes {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
  }

  #raceSetupDialog .race-rule {
    padding: 10px 11px;
    font-size: .82rem;
  }

  #raceSetupDialog .modal-setup-help {
    margin: 6px 0 10px;
    font-size: .82rem;
    line-height: 1.4;
  }

  /* Controller cards become two compact rows: selection/identity, then name. */
  #raceSetupDialog .modal-participants {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #raceSetupDialog .modal-participants .participant-option {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "toggle controller"
      "name name";
    gap: 9px 10px;
    min-height: 0;
    padding: 10px;
    border-radius: 12px;
  }

  #raceSetupDialog .participant-toggle-wrap {
    grid-area: toggle;
    align-self: center;
    justify-self: start;
  }

  #raceSetupDialog .participant-controller-summary {
    grid-area: controller;
    min-width: 0;
  }

  #raceSetupDialog .participant-name-field {
    grid-area: name;
    min-width: 0;
  }

  #raceSetupDialog .participant-controller-copy strong {
    font-size: .9rem;
  }

  #raceSetupDialog .participant-controller-copy span {
    font-size: .74rem;
  }

  #raceSetupDialog .participant-name-field > span {
    font-size: .72rem;
  }

  #raceSetupDialog .modal-participants .participant-driver-name {
    min-height: 40px;
    height: 40px;
    padding: 8px 10px;
  }

  /* Footer stays fixed as a true dialog footer, but is much shallower. */
  #raceSetupDialog .race-setup-actions {
    gap: 10px;
    padding: 12px 0 0;
  }

  #raceSetupDialog .setup-action-copy {
    gap: 1px;
  }

  #raceSetupDialog .setup-action-copy strong {
    font-size: .82rem;
  }

  #raceSetupDialog .setup-action-copy span {
    font-size: .7rem;
  }

  #raceSetupDialog .modal-start-primary {
    width: 100%;
    min-height: 46px;
    height: 46px;
  }
}

@media (max-width: 380px) {
  .race-control-app .top-actions {
    gap: 6px;
  }

  .connection-pill {
    padding-inline: 9px;
  }

  .race-control-app .top-actions .button {
    padding-inline: 11px;
    font-size: .82rem;
  }

  #raceSetupDialog .dialog-shell {
    padding: 12px;
  }
}


/* --- focused race mode + mobile leaderboard --- */

/*
 * Once a race session is active, the site header has no useful race-control
 * function. Remove it for countdown/racing/paused so the live HUD and
 * leaderboard own the viewport. It returns automatically on finish/reset.
 */
body[data-race-phase="countdown"] .site-header,
body[data-race-phase="racing"] .site-header,
body[data-race-phase="paused"] .site-header {
  display: none;
}

body[data-race-phase="countdown"] .race-board,
body[data-race-phase="racing"] .race-board,
body[data-race-phase="paused"] .race-board {
  scroll-margin-top: 10px;
}

body[data-race-phase="countdown"] .race-main,
body[data-race-phase="racing"] .race-main,
body[data-race-phase="paused"] .race-main {
  padding-top: 8px;
}

/* Prevent circular controller badges from flex-shrinking into ovals. */
.car-badge {
  flex: 0 0 27px;
  width: 27px;
  min-width: 27px;
  height: 27px;
  min-height: 27px;
  aspect-ratio: 1 / 1;
  line-height: 1;
}

/*
 * A six-column desktop timing table is too compressed on a phone.
 * On mobile each driver becomes a compact two-row timing card:
 * identity first, then Laps / Gap / Last / Best with explicit labels.
 */
@media (max-width: 560px) {
  .primary-timing-table {
    overflow: visible;
  }

  .primary-timing-table table,
  .primary-timing-table tbody {
    display: block;
    width: 100%;
  }

  .primary-timing-table thead {
    display: none;
  }

  .primary-timing-table tbody {
    display: grid;
    gap: 8px;
  }

  .primary-timing-table tbody tr {
    display: grid;
    grid-template-columns: 44px repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: center;
    width: 100%;
    padding: 10px 8px 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(0,15,59,.16);
  }

  .primary-timing-table tbody tr.leader {
    background: linear-gradient(90deg, rgba(255,196,0,.12), rgba(0,15,59,.10));
  }

  .primary-timing-table td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: center !important;
  }

  .primary-timing-table td[data-field="position"] {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
  }

  .primary-timing-table .driver-cell {
    grid-column: 2 / 6;
    grid-row: 1;
    display: flex;
    min-width: 0;
    gap: 9px;
    padding: 0 0 9px 8px;
    text-align: left !important;
  }

  .primary-timing-table .driver-meta {
    min-width: 0;
  }

  .primary-timing-table .driver-meta strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .98rem;
  }

  .primary-timing-table .driver-meta span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .7rem;
  }

  .primary-timing-table td[data-field="laps"] {
    grid-column: 2;
    grid-row: 2;
  }

  .primary-timing-table td[data-field="gap"] {
    grid-column: 3;
    grid-row: 2;
  }

  .primary-timing-table td[data-field="last"] {
    grid-column: 4;
    grid-row: 2;
  }

  .primary-timing-table td[data-field="best"] {
    grid-column: 5;
    grid-row: 2;
  }

  .primary-timing-table td[data-field="laps"]::before,
  .primary-timing-table td[data-field="gap"]::before,
  .primary-timing-table td[data-field="last"]::before,
  .primary-timing-table td[data-field="best"]::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .primary-timing-table td[data-field="laps"]::before { content: "Laps"; }
  .primary-timing-table td[data-field="gap"]::before { content: "Gap"; }
  .primary-timing-table td[data-field="last"]::before { content: "Last"; }
  .primary-timing-table td[data-field="best"]::before { content: "Best"; }

  .primary-timing-table td[data-field="laps"],
  .primary-timing-table td[data-field="gap"],
  .primary-timing-table td[data-field="last"],
  .primary-timing-table td[data-field="best"] {
    font-size: .88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .primary-timing-table .car-badge {
    flex-basis: 25px;
    width: 25px;
    min-width: 25px;
    height: 25px;
    min-height: 25px;
  }
}


/* --- non-sticky tablet/mobile chrome --- */

/*
 * Sticky navigation is useful on desktop, but on tablets/phones it consumes
 * too much vertical space. Let both header and footer participate in normal
 * document flow up to 1024px wide.
 */
@media (max-width: 1024px) {
  .race-control-app .site-header,
  .site-header {
    position: static;
    top: auto;
  }

  .site-footer {
    position: static;
    bottom: auto;
  }
}


/* --- tablet/mobile modal scroll behaviour --- */

/*
 * Match the page-chrome rule on tablets and phones: the Configure race
 * dialog header and footer should scroll naturally with the modal content,
 * rather than staying fixed while only the middle section scrolls.
 */
@media (max-width: 1024px) {
  #raceSetupDialog .dialog-shell {
    display: block;
    height: auto;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #raceSetupDialog .race-setup-head {
    position: static;
  }

  #raceSetupDialog .setup-modal-grid {
    min-height: 0;
    overflow: visible;
    padding-bottom: 18px;
  }

  #raceSetupDialog .race-setup-actions {
    position: static;
    bottom: auto;
    margin: 0;
    padding-top: 16px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
}

/* Keep the phone-specific sizing while letting the whole sheet scroll. */
@media (max-width: 560px) {
  #raceSetupDialog .dialog-shell {
    height: auto;
    max-height: 96dvh;
    overflow-y: auto;
  }

  #raceSetupDialog .setup-modal-grid {
    overflow: visible;
    padding-bottom: 14px;
  }

  #raceSetupDialog .race-setup-actions {
    padding-top: 12px;
  }
}


/* --- tablet header alignment --- */


/* --- positive whole-number race values --- */
#targetLaps:invalid,
#durationMinutes:invalid {
  border-color: rgba(255,96,106,.72);
  box-shadow: 0 0 0 2px rgba(255,96,106,.10);
}

#targetLaps:valid,
#durationMinutes:valid {
  border-color: var(--line);
}


/* --- mobile controller-card alignment --- */
@media (max-width: 560px) {
  /*
   * Put controller identity first and the Enter control on the far right.
   * This prevents the Enter label and numbered badge from colliding.
   */
  #raceSetupDialog .modal-participants .participant-option {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "controller toggle"
      "name name";
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
  }

  #raceSetupDialog .participant-controller-summary {
    grid-area: controller;
    min-width: 0;
    gap: 10px;
  }

  #raceSetupDialog .participant-toggle-wrap {
    grid-area: toggle;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 42px;
    padding: 0;
  }

  #raceSetupDialog .participant-toggle-label {
    font-size: .62rem;
    letter-spacing: .04em;
    line-height: 1;
  }

  #raceSetupDialog .participant-toggle-wrap input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  #raceSetupDialog .participant-name-field {
    grid-area: name;
  }

  /* Controller-number badge: fixed square geometry, no flex compression. */
  #raceSetupDialog .participant-controller-summary .car-badge {
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
  }

  #raceSetupDialog .participant-controller-copy {
    min-width: 0;
  }

  #raceSetupDialog .participant-controller-copy strong,
  #raceSetupDialog .participant-controller-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #raceSetupDialog .participant-controller-copy strong {
    font-size: .92rem;
  }

  #raceSetupDialog .participant-controller-copy span {
    font-size: .72rem;
  }
}


/* --- controller-entry hit target --- */

/* The card itself is informational/editable, not a single giant checkbox. */
.modal-participants .participant-option {
  cursor: default;
}

/* Only the actual Enter control advertises clickability. */
.modal-participants .participant-toggle-wrap {
  cursor: pointer;
  user-select: none;
}

.modal-participants .participant-toggle-wrap input[type="checkbox"],
.modal-participants .participant-toggle-label {
  cursor: pointer;
}

/* Give the checkbox + Enter label one deliberate, forgiving hit target. */
.modal-participants .participant-toggle-wrap {
  min-width: 58px;
  min-height: 44px;
  padding: 5px 7px;
  margin: -5px -7px;
  border-radius: 9px;
}

.modal-participants .participant-toggle-wrap:hover {
  background: rgba(255,255,255,.045);
}

.modal-participants .participant-toggle-wrap:focus-within {
  outline: 2px solid rgba(255,196,0,.58);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  #raceSetupDialog .participant-toggle-wrap {
    min-width: 52px;
    min-height: 44px;
    padding: 5px 6px;
    margin: -5px -6px;
  }
}


/* --- controller selection restraint --- */

/*
 * Selection is already clear from the checked checkbox.
 * Keep the permanent controller-colour left edge, but do not add an
 * outer coloured border/glow when the controller is entered.
 */
.modal-participants .participant-option.selected,
.modal-participants .participant-option:has(.participant-toggle:checked),
.modal-participants .participant-option:has(input:checked) {
  border-top-color: var(--soft-line);
  border-right-color: var(--soft-line);
  border-bottom-color: var(--soft-line);
  border-left-color: var(--controller-accent, rgba(255,255,255,.2));
  box-shadow: none;
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}


/* --- responsive controller-card container layout --- */

/*
 * The controller card was breaking at an in-between/tablet modal width:
 * the controller identity and Driver name column were both trying to stay
 * side-by-side inside a panel that was too narrow. Base the switch on the
 * actual GRID panel width instead of guessing a viewport breakpoint.
 */
.race-drivers-panel {
  container-type: inline-size;
  container-name: race-drivers;
}

.participant-controller-copy {
  min-width: 0;
}

@container race-drivers (max-width: 760px) {
  .modal-participants .participant-option {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "toggle controller"
      "name name";
    align-items: center;
    column-gap: 12px;
    row-gap: 11px;
  }

  .modal-participants .participant-toggle-wrap {
    grid-area: toggle;
    align-self: center;
  }

  .modal-participants .participant-controller-summary {
    grid-area: controller;
    min-width: 0;
  }

  .modal-participants .participant-name-field {
    grid-area: name;
    min-width: 0;
  }

  .modal-participants .participant-controller-copy strong,
  .modal-participants .participant-controller-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .modal-participants .participant-driver-name {
    width: 100%;
  }
}


/* --- checkbox focus + single modal scrollbar --- */

/* The checkbox itself already communicates focus/selection; do not draw a
   yellow rounded outline around the whole Enter hit target. */
.modal-participants .participant-toggle-wrap:focus-within {
  outline: none;
  outline-offset: 0;
}

/*
 * Prevent the native <dialog> from becoming a second scroll container.
 * Desktop: only the middle setup area scrolls.
 * Tablet/mobile: only the dialog shell scrolls.
 */
#raceSetupDialog {
  overflow: hidden;
  box-sizing: border-box;
}

#raceSetupDialog .dialog-shell {
  box-sizing: border-box;
  width: 100%;
}

/* Desktop: one scrollbar, on the setup content area only. */
@media (min-width: 1025px) {
  #raceSetupDialog .dialog-shell {
    overflow: hidden;
  }

  #raceSetupDialog .setup-modal-grid {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Tablet/mobile: one scrollbar, on the whole modal sheet only. */
@media (max-width: 1024px) {
  #raceSetupDialog .dialog-shell {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
  }

  #raceSetupDialog .setup-modal-grid {
    overflow: visible;
    scrollbar-gutter: auto;
  }
}


/* --- site footer + active race viewport --- */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 92px;
  background: linear-gradient(180deg, #00164f 0%, #000f3b 100%);
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Footer-owned chequered flag, clipped inside the footer. */
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -65% auto -65% -7%;
  width: min(58vw, 900px);
  opacity: .095;
  background-image:
    conic-gradient(
      from 90deg,
      rgba(255,255,255,.9) 0 25%,
      rgba(0,15,59,.9) 0 50%,
      rgba(255,255,255,.9) 0 75%,
      rgba(0,15,59,.9) 0
    );
  background-size: 68px 68px;
  transform: rotate(5deg) skewX(8deg);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.72) 46%,
    rgba(0,0,0,.22) 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,.95) 0%,
    rgba(0,0,0,.72) 46%,
    rgba(0,0,0,.22) 78%,
    transparent 100%
  );
}

.footer-inner {
  position: relative;
  z-index: 1;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  color: var(--muted);
}

.footer-inner p {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  font-size: .82rem;
  line-height: 1.55;
}

/*
 * During countdown/racing/paused the race board owns the app viewport.
 * Diagnostics remain available before and after the race.
 */
body[data-race-phase="countdown"],
body[data-race-phase="racing"],
body[data-race-phase="paused"] {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body[data-race-phase="countdown"] .race-main,
body[data-race-phase="racing"] .race-main,
body[data-race-phase="paused"] .race-main {
  flex: 1 0 auto;
  width: calc(100% - 40px);
  max-width: var(--max);
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  padding-bottom: 8px;
}

body[data-race-phase="countdown"] .race-board,
body[data-race-phase="racing"] .race-board,
body[data-race-phase="paused"] .race-board {
  flex: 1 0 auto;
  min-height: calc(100dvh - 92px - 16px);
  display: flex;
  flex-direction: column;
}

body[data-race-phase="countdown"] .technical-tools,
body[data-race-phase="racing"] .technical-tools,
body[data-race-phase="paused"] .technical-tools {
  display: none;
}

body[data-race-phase="countdown"] #liveRaceView,
body[data-race-phase="racing"] #liveRaceView,
body[data-race-phase="paused"] #liveRaceView {
  flex: 1 0 auto;
}

/* Race flag stays inside the race card. */
.race-board::before {
  clip-path: inset(0 round 22px);
}

@media (max-width: 1024px) {
  body[data-race-phase="countdown"] .race-main,
  body[data-race-phase="racing"] .race-main,
  body[data-race-phase="paused"] .race-main {
    width: calc(100% - 28px);
  }

  .site-footer,
  .footer-inner {
    min-height: 82px;
  }

  .footer-inner {
    padding: 16px 0;
  }

  .footer-inner p {
    font-size: .76rem;
    padding-inline: 8px;
  }

  .site-footer::before {
    width: min(76vw, 720px);
    background-size: 56px 56px;
  }

  body[data-race-phase="countdown"] .race-board,
  body[data-race-phase="racing"] .race-board,
  body[data-race-phase="paused"] .race-board {
    min-height: calc(100dvh - 82px - 16px);
  }
}

@media (max-width: 560px) {
  .site-footer::before {
    inset: -75% auto -75% -20%;
    width: 110vw;
    opacity: .075;
    background-size: 48px 48px;
  }
}


/* --- stable finished view + responsive podium population --- */

/* Do not reserve podium cards for positions that do not exist. */
.podium-place[hidden] {
  display: none !important;
}

.podium[data-count="1"] {
  grid-template-columns: minmax(280px, 440px);
  justify-content: center;
  max-width: 520px;
}

.podium[data-count="1"] .podium-place.p1 {
  grid-column: 1;
  transform: none;
}

.podium[data-count="2"] {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  justify-content: center;
  max-width: 760px;
}

.podium[data-count="2"] .podium-place.p1 {
  order: 1;
  transform: none;
}

.podium[data-count="2"] .podium-place.p2 {
  order: 2;
}

@media (max-width: 760px) {
  .results-view {
    padding-top: 0;
  }

  .podium,
  .podium[data-count="1"],
  .podium[data-count="2"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin: 24px auto 34px;
    padding: 0;
    gap: 12px;
  }

  .podium::before {
    content: none;
  }

  .podium-place,
  .podium-place.p1,
  .podium-place.p2,
  .podium-place.p3 {
    width: 100%;
    min-height: 0;
    transform: none;
    padding: 18px 14px 20px;
  }

  .podium-place.p1 {
    order: 1;
  }

  .podium-place.p2 {
    order: 2;
  }

  .podium-place.p3 {
    order: 3;
  }

  .podium[data-count="1"] .podium-place.p1 {
    max-width: 100%;
  }
}


/* --- restrained empty-value placeholders --- */

/*
 * Use a shorter en dash for unavailable values and keep placeholder-only
 * metrics visually quieter than real timing data.
 */
.coach-metrics strong,
.primary-timing-table td[data-field="gap"],
.primary-timing-table td[data-field="last"],
.primary-timing-table td[data-field="best"],
.classification-row > span:nth-child(n+3),
.podium-meta,
.podium-time {
  font-variant-numeric: tabular-nums;
}

/* The placeholder character should never dominate the metric around it. */
.coach-metrics strong:empty,
.primary-timing-table td:empty {
  font-size: .82em;
}


/* --- authoritative responsive header geometry --- */

.site-header .brand-link {
  display: flex;
  align-items: center;
  align-self: center;
  width: 210px;
  height: 54px;
  flex: 0 0 210px;
  text-decoration: none;
}

.site-header .brand-logo {
  display: block;
  width: 205px;
  max-width: 205px;
  height: auto;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
  transform: none;
}

@media (max-width: 1100px) and (min-width: 721px) {
  .site-header .nav {
    grid-template-columns: 210px minmax(0, 1fr);
    grid-template-areas:
      "brand title"
      "actions actions";
    align-items: center;
    column-gap: 18px;
    row-gap: 10px;
    padding-block: 10px 12px;
  }

  .site-header .brand-link {
    grid-area: brand;
  }

  .site-header .nav-title {
    grid-area: title;
    align-self: center;
  }

  .site-header .top-actions {
    grid-area: actions;
    padding-bottom: 0;
  }
}

@media (max-width: 720px) {
  .site-header .nav {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "actions";
    row-gap: 10px;
    padding-block: 12px;
  }

  .site-header .brand-link {
    grid-area: brand;
    width: 210px;
    height: 54px;
    flex-basis: 210px;
  }

  .site-header .brand-logo {
    width: 205px;
    max-width: 205px;
    max-height: 54px;
  }

  .site-header .top-actions {
    grid-area: actions;
    padding-bottom: 0;
  }
}


.analysis-note {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
}


/* v2.8.8: read-only ARC command diagnostics */
.command-diagnostic-note {
  border-left: 3px solid rgba(255,196,0,.65);
  padding-left: 14px;
}
.command-diagnostic-note span {
  display: block;
  margin-top: 4px;
}


/* --- v2.8.10 modal + responsive-header stability --- */
.race-dialog {
  overscroll-behavior: contain;
}

.race-dialog .dialog-shell {
  overscroll-behavior: contain;
}

.site-header,
.site-header .nav,
.site-header .top-actions {
  visibility: visible;
}

@media (min-width: 1025px) {
  .race-control-app .site-header,
  .site-header {
    position: sticky;
    top: 0;
  }
}

/* v2.8.10 telemetry sectors */
.sector-note {
  margin-top: .75rem;
}

.sector-telemetry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: .9rem 0 1rem;
}

.sector-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: .85rem;
  background: rgba(255,255,255,.035);
  min-width: 0;
}

.sector-card h3 {
  margin: 0 0 .55rem;
  font-size: 1rem;
  letter-spacing: .06em;
}

.sector-card .sector-range {
  display: block;
  margin-top: -.35rem;
  margin-bottom: .65rem;
  color: #9fb0c9;
  font-size: .78rem;
}

.sector-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .7rem;
}

.sector-metrics span {
  color: #9fb0c9;
  font-size: .76rem;
}

.sector-metrics strong {
  display: block;
  margin-top: .12rem;
  font-size: .95rem;
  color: #fff;
}

@media (max-width: 700px) {
  .sector-telemetry { grid-template-columns: 1fr; }
}


/* v2.8.10 telemetry analysis polish */
.coach-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: .9rem 0;
}

.coach-metrics > div {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  padding: .7rem .8rem;
}

.coach-metrics span {
  display: block;
  color: #9fb0c9;
  font-size: .76rem;
  margin-bottom: .18rem;
}

.coach-metrics strong {
  display: block;
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.25;
}

@media (max-width: 600px) {
  .coach-metrics { grid-template-columns: 1fr; }
}

/* --- v2.8.10 Configure race: non-sticky modal header --- */
/*
 * The Configure race modal scrolls as one sheet at every viewport width.
 * This keeps the modal header in normal document flow instead of pinning it
 * above a separately scrolling setup region on desktop.
 */
#raceSetupDialog .dialog-shell {
  display: block;
  height: auto;
  max-height: min(88vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#raceSetupDialog .race-setup-head {
  position: static;
  top: auto;
}

#raceSetupDialog .setup-modal-grid {
  min-height: 0;
  overflow: visible;
  padding: 24px 2px 28px 0;
}

#raceSetupDialog .race-setup-actions {
  position: static;
  bottom: auto;
  margin: 0;
  padding: 16px 0 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

@media (max-width: 1024px) {
  #raceSetupDialog .dialog-shell {
    max-height: 92dvh;
  }
}


/* --- v2.8.10 Driver Analysis modal scroll containment --- */
/* Keep the native dialog itself from owning the scrollbar. The inner sheet
   scrolls and is clipped by the outer 24px radius, matching Configure race. */
#analysisDialog {
  overflow: hidden;
  box-sizing: border-box;
}

#analysisDialog .dialog-shell {
  box-sizing: border-box;
  width: 100%;
  max-height: min(88vh, 900px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 1024px) {
  #analysisDialog .dialog-shell {
    max-height: 92dvh;
  }
}

/* Analysis affordances are only enabled when meaningful race data exists. */
.timing-table tbody tr { cursor: default; }
.timing-table tbody tr.analysis-available { cursor: pointer; }
.timing-table tbody tr:not(.analysis-available) { pointer-events: none; }

.analysis-stats tbody tr.analysis-driver-row:not(.disabled) {
  cursor: pointer;
}
.analysis-stats tbody tr.analysis-driver-row:not(.disabled):hover,
.analysis-stats tbody tr.analysis-driver-row:not(.disabled):focus-visible {
  background: rgba(255,255,255,.045);
  outline: none;
}
.analysis-stats tbody tr.analysis-driver-row.disabled {
  cursor: default;
}


/* --- cross-browser visual consistency (current Chrome/Edge/Firefox/Safari) --- */
/* Normalize controls and table rendering while preserving platform accessibility. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button, input, select {
  line-height: normal;
}
button {
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit needs its prefixed mask declaration wherever the standard property is used. */
.podium-scene::before {
  -webkit-mask-image: linear-gradient(to right, #000, transparent 90%);
}

/* Firefox ignores WebKit scrollbar pseudo-elements; keep native-width scrollbars
   everywhere and only reserve gutter where supported. */
@supports not (scrollbar-gutter: stable) {
  #raceSetupDialog .dialog-shell,
  #analysisDialog .dialog-shell {
    padding-right: 8px;
  }
}

/* Container-query fallback for older engines: at the same practical viewport
   range, stack the participant name beneath controller identity. */
@supports not (container-type: inline-size) {
  @media (max-width: 1180px) {
    .modal-participants .participant-option {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "toggle controller"
        "name name";
      align-items: center;
      column-gap: 12px;
      row-gap: 11px;
    }
    .modal-participants .participant-toggle-wrap { grid-area: toggle; }
    .modal-participants .participant-controller-summary { grid-area: controller; min-width: 0; }
    .modal-participants .participant-name-field { grid-area: name; min-width: 0; }
  }
}

/* 100dvh is progressive enhancement. The preceding vh-based max-height remains
   the fallback in engines that do not support dynamic viewport units. */
@supports (height: 100dvh) {
  @media (max-width: 1024px) {
    #raceSetupDialog .dialog-shell,
    #analysisDialog .dialog-shell { max-height: 92dvh; }
  }
}

/* --- v2.8.10 Configure race: consistent action bottom inset --- */
/* Keep the primary action the same distance from the rounded dialog edge at
   desktop, tablet and phone sizes. Late placement deliberately wins over the
   earlier responsive padding shorthands. */
#raceSetupDialog .dialog-shell {
  padding-bottom: 28px;
}


/* --- v2.8.10 stable header brand composition ---
 * Keep the NixScalextric logo and ARC / Race Control title as one visual unit.
 * Breakpoints may move the action buttons, but never rearrange or hide the
 * pieces of the brand itself. The logo scales continuously rather than
 * snapping to a different breakpoint-specific size.
 */
.site-header .nav {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand-group actions";
  align-items: center;
  column-gap: 24px;
}

.site-header .brand-group {
  grid-area: brand-group;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  gap: 18px;
  white-space: nowrap;
}

.site-header .brand-link {
  width: clamp(164px, 16vw, 210px);
  height: 54px;
  flex: 0 0 auto;
}

.site-header .brand-logo {
  width: 100%;
  max-width: 205px;
  max-height: 54px;
}

.site-header .nav-title {
  display: block;
  flex: 0 0 auto;
  min-width: max-content;
  align-self: center;
}

.site-header .top-actions {
  grid-area: actions;
  padding-bottom: 0;
}

@media (max-width: 1100px) {
  .site-header .nav {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand-group"
      "actions";
    row-gap: 10px;
    padding-block: 10px 12px;
  }

  .site-header .brand-group {
    gap: 16px;
  }

  .site-header .top-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .site-header .nav {
    padding-block: 12px;
  }

  .site-header .brand-group {
    gap: 12px;
    max-width: 100%;
  }

  .site-header .brand-link {
    width: clamp(150px, 48vw, 190px);
    height: 50px;
  }

  .site-header .brand-logo {
    max-height: 50px;
  }

  .site-header .nav-title {
    display: block;
  }

  .site-header .nav-title strong {
    font-size: .94rem;
  }

  .site-header .nav-title .eyebrow {
    font-size: .7rem;
  }
}

@media (max-width: 380px) {
  .site-header .brand-group {
    gap: 10px;
  }

  .site-header .brand-link {
    width: 145px;
    height: 46px;
  }

  .site-header .brand-logo {
    max-height: 46px;
  }

  .site-header .nav-title strong {
    font-size: .88rem;
  }
}

/* --- v2.8.10 podium breakpoint stability + desktop-only sticky header --- */
/*
 * The podium now has explicit desktop / tablet / mobile compositions instead
 * of trying to keep three columns until a very narrow breakpoint. This avoids
 * second/third-place cards collapsing or appearing displaced at intermediate
 * widths and under browser zoom / high-DPI scaling.
 */
.podium {
  grid-template-areas: "p2 p1 p3";
}
.podium-place.p1 { grid-area: p1; }
.podium-place.p2 { grid-area: p2; }
.podium-place.p3 { grid-area: p3; }

@media (max-width: 960px) {
  .podium,
  .podium[data-count="1"],
  .podium[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "p1 p1"
      "p2 p3";
    align-items: stretch;
    width: 100%;
    max-width: 760px;
    margin: 28px auto 42px;
    padding: 24px 18px 0;
    gap: 14px;
  }

  .podium-place.p1,
  .podium-place.p2,
  .podium-place.p3 {
    order: initial;
    transform: none;
    width: auto;
    min-width: 0;
    min-height: 260px;
  }

  .podium-place.p1 {
    min-height: 300px;
  }

  .podium[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "p1";
    max-width: 560px;
  }

  .podium[data-count="2"] {
    grid-template-areas: "p1 p2";
    max-width: 720px;
  }
}

@media (max-width: 640px) {
  .podium,
  .podium[data-count="1"],
  .podium[data-count="2"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "p1"
      "p2"
      "p3";
    max-width: none;
    margin: 22px auto 34px;
    padding: 0;
    gap: 12px;
  }

  .podium[data-count="1"] {
    grid-template-areas: "p1";
  }

  .podium[data-count="2"] {
    grid-template-areas:
      "p1"
      "p2";
  }

  .podium-place.p1,
  .podium-place.p2,
  .podium-place.p3 {
    min-height: 0;
    border-radius: 18px;
  }
}

/*
 * Sticky/translucent navigation is a desktop enhancement only. Tablet and
 * mobile use an opaque in-flow header so content never shows through the
 * navigation and readability is stable across Blink, Gecko and WebKit.
 */
@media (min-width: 1101px) {
  .race-control-app .site-header {
    position: sticky;
    top: 0;
    /* Desktop-only translucency: retain depth without sacrificing readability. */
    background-color: rgba(1,23,84,.82);
  }
}

@media (max-width: 1100px) {
  .race-control-app .site-header {
    position: static;
    top: auto;
    background-color: #011754;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* --- v2.8.10 Configure race: breakpoint-proof action safe area --- */
/* Put the bottom breathing room on the action row itself rather than on the
   scrolling shell. This guarantees that the Start race button keeps the same
   visual inset from the rounded dialog edge at every breakpoint and under
   browser viewport/zoom differences. */
#raceSetupDialog .dialog-shell {
  padding-bottom: 0;
}

#raceSetupDialog .race-setup-actions {
  box-sizing: border-box;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

/* --- v2.8.10 Driver Analysis scroll repaint hardening --- */
/* Keep scrolling on one opaque compositor-backed inner surface. This avoids
   intermittent native-dialog repaint flashes seen while scrolling over the
   patterned race page, especially in Blink/WebKit. */
#analysisDialog {
  background: #06163f;
  isolation: isolate;
  contain: paint;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
}

#analysisDialog .dialog-shell {
  background: #06163f;
  background-clip: padding-box;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
  isolation: isolate;
  contain: layout paint style;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#analysisDialog canvas,
#analysisDialog .analysis-stats,
#analysisDialog .analysis-note {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* v2.8.10 motorsport-style driver analysis */
.analysis-compare-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: .9rem;
  align-items: end;
  margin: .85rem 0 .65rem;
}
.analysis-reference,
.analysis-lap-select {
  min-width: 0;
}
.analysis-reference {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  padding: .68rem .8rem;
}
.analysis-reference span {
  display: block;
  color: #9fb0c9;
  font-size: .76rem;
  margin-bottom: .18rem;
}
.analysis-reference strong {
  display: block;
  color: #fff;
  font-size: .96rem;
  font-variant-numeric: tabular-nums;
}
.analysis-lap-select {
  margin: 0;
  max-width: none;
}
.analysis-lap-history {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding: .15rem 0 .45rem;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.lap-history-chip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  gap: .1rem .5rem;
  align-items: baseline;
  min-width: 104px;
  padding: .5rem .65rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.lap-history-chip span {
  color: #9fb0c9;
  font-size: .72rem;
}
.lap-history-chip strong {
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.lap-history-chip em {
  grid-column: 1 / -1;
  color: var(--yellow);
  font-size: .62rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}
.lap-history-chip.selected {
  border-color: rgba(255,196,0,.72);
  box-shadow: 0 0 0 2px rgba(255,196,0,.16);
  background: rgba(255,196,0,.06);
}
.lap-history-empty {
  color: #9fb0c9;
  font-size: .78rem;
}

/* Official classification gains a finish interval column. */
.classification-row {
  grid-template-columns: 54px minmax(160px,1fr) 92px 122px 118px;
}
.classification-interval {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .08rem;
  font-variant-numeric: tabular-nums;
}
.classification-interval small {
  color: #7f93b4;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .analysis-compare-controls { grid-template-columns: 1fr; }
  .classification-interval { align-items: flex-start; }
}

@media (max-width: 820px) {
  .classification-row {
    grid-template-columns: 44px minmax(120px, 1fr);
  }
  .classification-row > span:nth-child(n+3) {
    text-align: left;
    grid-column: 2;
  }
}

/* v2.8.10 — optional browser race announcer */
#raceSetupDialog .race-announcer-setting {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: var(--ink);
  cursor: pointer;
}

#raceSetupDialog .race-announcer-setting input[type="checkbox"] {
  width: 19px;
  height: 19px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--yellow);
}

#raceSetupDialog .race-announcer-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#raceSetupDialog .race-announcer-copy strong {
  color: var(--ink);
  font-size: .9rem;
  letter-spacing: 0;
}

#raceSetupDialog .race-announcer-copy small {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

#raceSetupDialog .race-announcer-setting:focus-within {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255,196,0,.28);
}

#raceSetupDialog .race-announcer-setting:has(input:checked),
#raceSetupDialog .race-announcer-setting.selected {
  border-color: rgba(255,196,0,.58);
  background: rgba(255,196,0,.065);
}

#raceSetupDialog .race-announcer-setting:has(input:disabled) {
  cursor: not-allowed;
  opacity: .62;
}

/* v2.8.10 — lap history shows each lap's delta to the driver's best lap. */
.lap-history-chip .lap-history-delta {
  color: #9fb0c9;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* v2.8.10 — lap-history hover is intentionally restrained.
 * Override the global button lift/glow so telemetry chips feel like data controls. */
.lap-history-chip:hover:not(:disabled) {
  transform: none;
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.055);
  box-shadow: none;
}

.lap-history-chip.selected:hover:not(:disabled) {
  border-color: rgba(255,196,0,.72);
  background: rgba(255,196,0,.075);
  box-shadow: 0 0 0 2px rgba(255,196,0,.12);
}

/* --- Safari-safe timing-table controller colours ---
 * Do not fade the entire table row: Safari composites opacity on table rows
 * differently and can wash out controller accents/badges. Mute only content.
 */
.primary-timing-table tbody tr.inactive-racer {
  opacity: 1;
}

.primary-timing-table tbody tr.inactive-racer > td {
  color: rgba(220, 228, 248, .42);
}

.primary-timing-table tbody tr.inactive-racer .driver-meta strong,
.primary-timing-table tbody tr.inactive-racer .driver-meta span,
.primary-timing-table tbody tr.inactive-racer td[data-field="position"],
.primary-timing-table tbody tr.inactive-racer td[data-field="laps"],
.primary-timing-table tbody tr.inactive-racer td[data-field="gap"],
.primary-timing-table tbody tr.inactive-racer td[data-field="last"],
.primary-timing-table tbody tr.inactive-racer td[data-field="best"] {
  opacity: .42;
}

/* Keep controller identity vivid even when the row is inactive. */
.primary-timing-table tbody tr.inactive-racer .car-badge,
.primary-timing-table tbody tr.inactive-racer .controller-badge {
  opacity: 1;
}

.controller-badge {
  border-color: var(--controller-accent, rgba(255,255,255,.34));
}

/* Paint the controller stripe on a real table cell rather than on <tr>.
 * This is consistently rendered by WebKit, Blink and Gecko. */
.primary-timing-table tbody tr {
  box-shadow: none;
}

.primary-timing-table tbody tr > td:first-child {
  box-shadow: inset 4px 0 0 var(--controller-accent, transparent);
}

.primary-timing-table tbody tr:hover > td:first-child {
  box-shadow: inset 4px 0 0 var(--controller-accent, transparent);
}

.primary-timing-table tbody tr.leader > td:first-child {
  box-shadow: inset 4px 0 0 var(--controller-accent, var(--yellow));
}

/* v2.8.10: race-control light status is always presented as an uppercase callout. */
.light-status {
  text-transform: uppercase;
}

/* --- footer social link --- */
.footer-inner {
  flex-direction: column;
  gap: 10px;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.footer-links a:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.footer-links svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

/* --- v2.8.10 deterministic podium centring --- */
/*
 * Keep the visible podium group mathematically centred for every population.
 * Explicit grid definitions avoid the old 2-column / 3-area mismatch and
 * make Safari, Blink and Gecko place the cards identically.
 */
@media (min-width: 961px) {
  .podium {
    width: 100%;
    max-width: 1010px;
    grid-template-columns:
      minmax(260px, 300px)
      minmax(300px, 360px)
      minmax(260px, 300px);
    grid-template-areas: "p2 p1 p3";
    justify-content: center;
  }

  .podium[data-count="1"] {
    max-width: 520px;
    grid-template-columns: minmax(320px, 440px);
    grid-template-areas: "p1";
    justify-content: center;
  }

  .podium[data-count="2"] {
    max-width: 790px;
    grid-template-columns:
      minmax(280px, 360px)
      minmax(280px, 360px);
    grid-template-areas: "p2 p1";
    justify-content: center;
  }
}


/* --- v2.8.10 physical podium redesign ---
 * The result cards now read as a real winners' rostrum: identity/helmet above,
 * metallic 2/1/3 steps below. Controller colour is retained only as a small
 * personal accent. The large redundant "Podium" heading has been removed.
 */
.results-heading {
  margin: 18px 0 8px;
  text-align: center;
}

.podium {
  align-items: end;
  gap: 18px;
  margin-top: 24px;
  padding-top: 12px;
}

.podium::before {
  inset: 4% 2% 0;
  border-radius: 44px;
  background: radial-gradient(circle at 50% 42%, rgba(21,57,142,.22), rgba(0,15,59,.08) 48%, transparent 78%);
}

.podium-place,
.podium-place.p1,
.podium-place.p2,
.podium-place.p3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
  text-align: center;
}

.podium-place::after,
.podium-place.p1::after,
.podium-place.p2::after,
.podium-place.p3::after {
  content: none;
}

.podium-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 222px;
  padding: 0 14px 18px;
}

.podium-place.p1 .podium-identity {
  min-height: 258px;
}

.podium-helmet-wrap {
  min-height: 104px;
}

.podium-place.p1 .podium-helmet {
  width: 158px;
  height: 116px;
}

.podium-place.p2 .podium-helmet,
.podium-place.p3 .podium-helmet {
  width: 136px;
  height: 100px;
}

.podium-driver {
  margin-top: 0;
}

.podium-result-line {
  min-height: 1.4em;
}


.podium-step {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 112px;
  padding: 18px 14px 20px;
  border: 1px solid rgba(255,255,255,.24);
  border-bottom-color: rgba(0,0,0,.22);
  border-radius: 18px 18px 6px 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -18px 30px rgba(0,0,0,.12),
    0 18px 34px rgba(0,0,0,.18);
  overflow: hidden;
}

.podium-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 38%, rgba(0,0,0,.08) 72%, rgba(255,255,255,.06));
  pointer-events: none;
}

.podium-place.p1 .podium-step {
  min-height: 154px;
  border-color: rgba(255,218,77,.62);
  background: linear-gradient(180deg, #d9aa00 0%, #ffc400 38%, #b98500 100%);
}

.podium-place.p2 .podium-step {
  min-height: 116px;
  border-color: rgba(226,233,245,.58);
  background: linear-gradient(180deg, #cbd4e3 0%, #aeb9cc 46%, #78869d 100%);
}

.podium-place.p3 .podium-step {
  min-height: 92px;
  border-color: rgba(226,165,111,.58);
  background: linear-gradient(180deg, #d69a64 0%, #b8733c 46%, #7d4728 100%);
}

.podium-step .podium-position {
  color: #07143e;
  font-size: clamp(3rem, 5vw, 4.8rem);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.podium-place.p1 .podium-step .podium-position {
  color: #081640;
  font-size: clamp(3.7rem, 6vw, 5.7rem);
}

.podium-place.p3 .podium-step .podium-position {
  color: #160e09;
}

.podium-step .podium-cup-mini {
  width: 42px;
  height: 42px;
}

.podium-step .podium-cup-mini .podium-trophy {
  width: 42px;
  height: 42px;
  background: rgba(1,23,84,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

.podium-step .podium-cup-mini .podium-trophy svg {
  width: 28px;
  height: 28px;
}

/* Tablet: retain the explicit responsive composition while reducing step mass. */
@media (max-width: 960px) {
  .podium-identity,
  .podium-place.p1 .podium-identity {
    min-height: 210px;
    padding-bottom: 14px;
  }

  .podium-place.p1 .podium-step { min-height: 126px; }
  .podium-place.p2 .podium-step { min-height: 104px; }
  .podium-place.p3 .podium-step { min-height: 88px; }
}

/* Mobile: keep the rostrum language without making each result excessively tall. */
@media (max-width: 640px) {
  .podium {
    gap: 16px;
  }

  .podium-identity,
  .podium-place.p1 .podium-identity {
    min-height: 0;
    padding: 8px 10px 12px;
  }

  .podium-place.p1 .podium-helmet,
  .podium-place.p2 .podium-helmet,
  .podium-place.p3 .podium-helmet {
    width: 118px;
    height: 88px;
  }

  .podium-place.p1 .podium-step { min-height: 92px; }
  .podium-place.p2 .podium-step { min-height: 78px; }
  .podium-place.p3 .podium-step { min-height: 70px; }

  .podium-step .podium-position,
  .podium-place.p1 .podium-step .podium-position {
    font-size: 3.25rem;
  }
}


/* --- v2.8.10 final podium refinement ---
 * One connected, matte rostrum silhouette with tighter identity spacing.
 * Position numbers carry the hierarchy; redundant trophy icons are removed.
 */
.results-heading {
  margin: 12px 0 0;
}

.podium {
  margin-top: 8px;
  padding-top: 0;
}

@media (min-width: 961px) {
  .podium,
  .podium[data-count="2"] {
    gap: 0;
  }

  .podium[data-count="1"] {
    gap: 0;
  }

  .podium-place + .podium-place {
    margin-left: -1px;
  }
}

.podium-identity {
  gap: 5px;
  min-height: 202px;
  padding: 0 14px 10px;
}

.podium-place.p1 .podium-identity {
  min-height: 226px;
}

.podium-helmet-wrap {
  min-height: 94px;
}

.podium-place.p1 .podium-helmet {
  width: 150px;
  height: 108px;
}

.podium-place.p2 .podium-helmet,
.podium-place.p3 .podium-helmet {
  width: 130px;
  height: 94px;
}

.podium-result-line {
  margin-top: 1px;
}


.podium-step {
  min-height: 112px;
  padding: 16px 14px 18px;
  border-color: rgba(255,255,255,.20);
  border-bottom-color: rgba(0,0,0,.26);
  border-radius: 12px 12px 3px 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 26px rgba(0,0,0,.16);
}

.podium-step::before {
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 24%, rgba(0,0,0,.05));
}

.podium-place.p1 .podium-step {
  min-height: 160px;
  border-color: rgba(255,218,77,.46);
  background: linear-gradient(180deg, #e7bb18 0%, #d7a900 100%);
  border-radius: 14px 14px 3px 3px;
}

.podium-place.p2 .podium-step {
  min-height: 124px;
  border-color: rgba(224,232,244,.42);
  background: linear-gradient(180deg, #c5cedd 0%, #9da9bc 100%);
  border-radius: 14px 4px 3px 3px;
}

.podium-place.p3 .podium-step {
  min-height: 92px;
  border-color: rgba(222,159,105,.42);
  background: linear-gradient(180deg, #c7834d 0%, #9b5a31 100%);
  border-radius: 4px 14px 3px 3px;
}

.podium-step .podium-position {
  font-size: clamp(3.15rem,5.1vw,4.9rem);
  text-shadow: none;
}

.podium-place.p1 .podium-step .podium-position {
  font-size: clamp(3.9rem,6.1vw,5.8rem);
}

.podium-step .podium-cup-mini {
  display: none !important;
}

.classification-block {
  margin-top: 4px;
}

@media (max-width: 960px) {
  .results-heading { margin-top: 10px; }
  .podium { margin-top: 6px; }
  .podium-identity,
  .podium-place.p1 .podium-identity {
    min-height: 188px;
    padding-bottom: 10px;
  }
  .podium-place.p1 .podium-step { min-height: 128px; }
  .podium-place.p2 .podium-step { min-height: 102px; }
  .podium-place.p3 .podium-step { min-height: 78px; }
}

@media (max-width: 640px) {
  .podium {
    gap: 12px;
  }
  .podium-identity,
  .podium-place.p1 .podium-identity {
    min-height: 0;
    padding: 6px 10px 10px;
  }
  .podium-place.p1 .podium-step { min-height: 88px; }
  .podium-place.p2 .podium-step { min-height: 72px; }
  .podium-place.p3 .podium-step { min-height: 62px; }
  .classification-block { margin-top: 0; }
}

/* --- v2.8.10 compact premium podium pass ---
 * Keep the connected rostrum idea, but reduce its visual mass so the drivers
 * remain the focal point. Helmets sit closer to the step tops and the finish
 * surfaces are deliberately flatter/more broadcast-like.
 */
.results-heading {
  margin: 8px 0 0;
}

@media (min-width: 961px) {
  .podium {
    max-width: 820px;
    grid-template-columns:
      minmax(205px, 235px)
      minmax(245px, 275px)
      minmax(205px, 235px);
    margin-top: 2px;
  }

  .podium[data-count="2"] {
    max-width: 570px;
    grid-template-columns:
      minmax(225px, 255px)
      minmax(245px, 275px);
  }

  .podium[data-count="1"] {
    max-width: 310px;
    grid-template-columns: minmax(245px, 275px);
  }
}

.podium-identity {
  min-height: 170px;
  gap: 4px;
  padding: 0 10px 2px;
  transform: translateY(5px);
  position: relative;
  z-index: 2;
}

.podium-place.p1 .podium-identity {
  min-height: 186px;
}

.podium-helmet-wrap {
  min-height: 78px;
}

.podium-place.p1 .podium-helmet {
  width: 128px;
  height: 94px;
}

.podium-place.p2 .podium-helmet,
.podium-place.p3 .podium-helmet {
  width: 108px;
  height: 80px;
}

.podium-driver {
  font-size: clamp(1.05rem, 1.8vw, 1.28rem) !important;
}

.podium-place.p1 .podium-driver {
  font-size: clamp(1.16rem, 2vw, 1.42rem) !important;
}

.podium-result-line {
  font-size: .84rem;
  line-height: 1.25;
}


.podium-step {
  min-height: 76px;
  padding: 10px 12px 12px;
  border-radius: 8px 8px 2px 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 18px rgba(0,0,0,.13);
}

.podium-step::before {
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 28%);
}

.podium-place.p1 .podium-step {
  min-height: 112px;
  background: #e0b300;
  border-color: rgba(255,222,92,.48);
  border-radius: 9px 9px 2px 2px;
}

.podium-place.p2 .podium-step {
  min-height: 88px;
  background: #aeb9ca;
  border-color: rgba(229,235,245,.40);
  border-radius: 9px 3px 2px 2px;
}

.podium-place.p3 .podium-step {
  min-height: 68px;
  background: #ad6d40;
  border-color: rgba(222,163,111,.40);
  border-radius: 3px 9px 2px 2px;
}

.podium-step .podium-position {
  font-size: clamp(2.45rem, 4vw, 3.65rem);
  line-height: .9;
}

.podium-place.p1 .podium-step .podium-position {
  font-size: clamp(3rem, 4.8vw, 4.4rem);
}

.podium-place.p3 .podium-step .podium-position {
  color: #fff3e9;
}

.classification-block {
  margin-top: 0;
}

@media (max-width: 960px) {
  .podium-identity,
  .podium-place.p1 .podium-identity {
    min-height: 154px;
    transform: none;
    padding-bottom: 6px;
  }

  .podium-place.p1 .podium-step { min-height: 96px; }
  .podium-place.p2 .podium-step { min-height: 78px; }
  .podium-place.p3 .podium-step { min-height: 64px; }
}

@media (max-width: 640px) {
  .podium-identity,
  .podium-place.p1 .podium-identity {
    min-height: 0;
    padding: 4px 8px 8px;
  }

  .podium-place.p1 .podium-helmet,
  .podium-place.p2 .podium-helmet,
  .podium-place.p3 .podium-helmet {
    width: 104px;
    height: 76px;
  }

  .podium-place.p1 .podium-step { min-height: 76px; }
  .podium-place.p2 .podium-step { min-height: 64px; }
  .podium-place.p3 .podium-step { min-height: 56px; }
}

/* --- v2.8.10 hybrid premium podium refinement ---
 * Combine the stronger metallic finish/controller accents of the earlier
 * podium with the restrained proportions of the compact pass. Each step is
 * visually independent so the rostrum reads cleanly instead of overlapping.
 */
@media (min-width: 961px) {
  .podium {
    column-gap: 16px;
  }

  .podium[data-count="2"] {
    column-gap: 16px;
  }
}


.podium-step {
  border-radius: 12px 12px 5px 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -12px 20px rgba(0,0,0,.12),
    0 10px 20px rgba(0,0,0,.15);
}

.podium-step::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 28%, transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 42%, rgba(0,0,0,.07));
}

.podium-place.p1 .podium-step {
  background: linear-gradient(180deg, #ffd94f 0%, #efbd00 42%, #c89500 100%);
  border-color: rgba(255,224,101,.66);
}

.podium-place.p2 .podium-step {
  background: linear-gradient(180deg, #eef3fb 0%, #c5cfdd 44%, #9aa7bb 100%);
  border-color: rgba(238,243,251,.62);
}

.podium-place.p3 .podium-step {
  background: linear-gradient(180deg, #e3aa79 0%, #bc7544 44%, #91552f 100%);
  border-color: rgba(232,178,130,.60);
}

/* Tonal position numerals: darker versions of their own podium finish. */
.podium-place.p1 .podium-step .podium-position {
  color: #775900;
  text-shadow: 0 1px 0 rgba(255,255,255,.26);
}

.podium-place.p2 .podium-step .podium-position {
  color: #566276;
  text-shadow: 0 1px 0 rgba(255,255,255,.38);
}

.podium-place.p3 .podium-step .podium-position {
  color: #63351f;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}

/* Keep each block visually separate on responsive layouts too. */
@media (max-width: 960px) {
  .podium {
    gap: 14px;
  }
}


/* --- v2.8.10 finished-result presentation polish ---
 * Keep the podium ceremonial rather than data-heavy: no controller underline,
 * no empty 0-lap metrics, sequential reveal, and one restrained winner burst.
 */
.results-view {
  position: relative;
  isolation: isolate;
}

.results-heading,
.podium,
.classification-block {
  position: relative;
  z-index: 2;
}

.podium-identity,
.podium-place.p1 .podium-identity {
  gap: 3px;
  transform: translateY(7px);
}

.podium-result-line {
  margin-top: 0;
}


.results-confetti {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: visible;
  pointer-events: none;
  contain: paint;
}

.confetti-piece {
  --confetti-origin-x: 50%;
  --confetti-origin-y: 0px;
  --confetti-pop-x: 0px;
  --confetti-mid-x: 0px;
  --confetti-spread-x: 0px;
  --confetti-apex-y: -140px;
  --confetti-fall-y: 360px;
  --confetti-delay: 0ms;
  --confetti-duration: 1400ms;
  --confetti-rotation: 360deg;
  --confetti-scale: 1;
  position: absolute;
  top: var(--confetti-origin-y);
  left: var(--confetti-origin-x);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--confetti-scale));
  will-change: transform, opacity;
}

.confetti-piece.gold { background: #ffc400; }
.confetti-piece.yellow { background: #ffe36a; }
.confetti-piece.white { background: #ffffff; }
.confetti-piece.silver { background: #cbd4e3; }

.results-confetti.active .confetti-piece {
  animation: none;
}

.results-confetti.active .confetti-piece.confetti-fallback {
  animation: result-confetti-burst 3000ms linear forwards;
}

.results-view.result-reveal .podium-place {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.985);
  animation: podium-result-reveal 520ms cubic-bezier(.18,.72,.22,1) forwards;
  will-change: transform, opacity;
}

/* A short ceremony pause, then 3rd → 2nd → 1st with more breathing room. */
.results-view.result-reveal .podium-place.p3 { animation-delay: 250ms; }
.results-view.result-reveal .podium-place.p2 { animation-delay: 950ms; }
.results-view.result-reveal .podium-place.p1 { animation-delay: 1650ms; }

.results-view.result-reveal .classification-block {
  opacity: 0;
  animation: result-classification-reveal 360ms ease 2480ms forwards;
}

@keyframes podium-result-reveal {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes result-classification-reveal {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes result-confetti-burst {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(calc(var(--confetti-scale) * .86));
  }

  /* One coherent launch: virtually all pieces leave together. */
  6% {
    opacity: .98;
    transform: translate3d(var(--confetti-pop-x), calc(var(--confetti-apex-y) * .13), 0)
      rotate(calc(var(--confetti-rotation) * .07)) scale(var(--confetti-scale));
  }

  /* Build the fan progressively rather than snapping to its full width. */
  22% {
    opacity: 1;
    transform: translate3d(calc(var(--confetti-mid-x) * .48), calc(var(--confetti-apex-y) * .55), 0)
      rotate(calc(var(--confetti-rotation) * .22)) scale(var(--confetti-scale));
  }

  40% {
    opacity: 1;
    transform: translate3d(var(--confetti-mid-x), calc(var(--confetti-apex-y) * .94), 0)
      rotate(calc(var(--confetti-rotation) * .40)) scale(var(--confetti-scale));
  }

  /* Brief, smooth apex float. */
  52% {
    opacity: 1;
    transform: translate3d(calc(var(--confetti-mid-x) * 1.05), var(--confetti-apex-y), 0)
      rotate(calc(var(--confetti-rotation) * .53)) scale(var(--confetti-scale));
  }

  64% {
    opacity: .99;
    transform: translate3d(calc(var(--confetti-spread-x) * .72), calc(var(--confetti-apex-y) * .82), 0)
      rotate(calc(var(--confetti-rotation) * .65)) scale(var(--confetti-scale));
  }

  /* Gravity takes over gradually, with the full fan maintained. */
  82% {
    opacity: .94;
    transform: translate3d(calc(var(--confetti-spread-x) * .90), calc(var(--confetti-fall-y) * .34), 0)
      rotate(calc(var(--confetti-rotation) * .83)) scale(var(--confetti-scale));
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--confetti-spread-x), var(--confetti-fall-y), 0)
      rotate(var(--confetti-rotation)) scale(calc(var(--confetti-scale) * .97));
  }
}

@media (prefers-reduced-motion: reduce) {
  .results-view.result-reveal .podium-place,
  .results-view.result-reveal .classification-block,
  .results-confetti.active .confetti-piece {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .results-confetti {
    display: none;
  }
}

/* --- v2.8.10 podium spacing + mobile edge polish ---
 * Give the driver identity stack more breathing room above the podium step,
 * especially after the 0-lap line is suppressed, and keep stacked mobile
 * steps comfortably rounded for P2/P3.
 */
.podium-identity {
  gap: 6px;
  padding-bottom: 10px;
}

.podium-place.p1 .podium-identity {
  padding-bottom: 12px;
}

.podium-driver {
  margin-bottom: 2px;
  line-height: 1.14;
}

.podium-result-line {
  margin-top: 1px;
}

@media (max-width: 960px) {
  .podium-identity,
  .podium-place.p1 .podium-identity {
    gap: 8px;
    padding-bottom: 14px;
  }
}

@media (max-width: 640px) {
  .podium-identity,
  .podium-place.p1 .podium-identity {
    gap: 10px;
    padding: 6px 8px 14px;
  }

  .podium-step,
  .podium-place.p1 .podium-step,
  .podium-place.p2 .podium-step,
  .podium-place.p3 .podium-step {
    border-radius: 14px;
  }
}

/* --- v2.8.10 Configure race: stronger bottom action safe area ---
 * Keep the primary Start race action comfortably clear of the rounded modal
 * edge at every viewport size. This late rule deliberately wins over earlier
 * tablet/mobile padding shorthands and preserves platform safe-area insets.
 */
#raceSetupDialog .race-setup-actions {
  padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 16px));
}

@media (max-width: 1024px) {
  #raceSetupDialog .race-setup-actions {
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 16px));
  }
}

@media (max-width: 560px) {
  #raceSetupDialog .race-setup-actions {
    padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 14px));
  }
}


/* --- v2.8.10 CLS layout stability ---
 * Keep the race board from collapsing when switching between the live timing
 * table and the finished-results view. The initial rendered footprint is
 * measured before first paint and can only grow, never shrink, during a session.
 */
.race-board {
  min-height: var(--race-board-reserved-height, 0px);
}

@media (min-width: 561px) {
  .primary-timing-table {
    min-height: var(--timing-area-reserved-height, 0px);
  }
}

body[data-race-phase="countdown"] .race-board,
body[data-race-phase="racing"] .race-board,
body[data-race-phase="paused"] .race-board {
  min-height: max(
    var(--race-board-reserved-height, 0px),
    calc(100dvh - 92px - 16px)
  );
}

@media (max-width: 1024px) and (min-width: 561px) {
  body[data-race-phase="countdown"] .race-board,
  body[data-race-phase="racing"] .race-board,
  body[data-race-phase="paused"] .race-board {
    min-height: max(
      var(--race-board-reserved-height, 0px),
      calc(100dvh - 82px - 16px)
    );
  }
}

@media (max-width: 560px) {
  .race-board {
    min-height: 0;
  }
}


/* --- v2.8.10 keyboard focus + zoom-safe footer polish --- */

/* Keep the footer at the bottom of the viewport when zooming out. */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header,
.site-footer {
  flex: 0 0 auto;
}

.race-main {
  flex: 1 0 auto;
}

.site-footer {
  width: 100%;
  margin-top: auto;
}

/* At wide CSS viewports (including browser zoom-out), keep the standard
 * left-anchored chequer treatment instead of recentering/enlarging it. */
@media (min-width: 1800px) {
  .site-footer::before {
    inset: -65% auto -65% -7%;
    left: -7%;
    width: min(58vw, 900px);
    opacity: .085;
    transform: rotate(5deg) skewX(8deg);
    transform-origin: center;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,.72) 46%,
      rgba(0,0,0,.22) 78%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      rgba(0,0,0,.95) 0%,
      rgba(0,0,0,.72) 46%,
      rgba(0,0,0,.22) 78%,
      transparent 100%
    );
  }
}

/* Consistent keyboard focus treatment. */
button:focus-visible,
.button:focus-visible,
.icon-button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.race-board:focus {
  outline: none;
}

.race-board:focus-visible {
  box-shadow:
    0 0 0 3px rgba(255,196,0,.42),
    var(--shadow);
}


/* --- v2.8.10 pre-launch FAQ --- */
.footer-link-button {
  appearance: none;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.footer-link-button:hover {
  transform: none;
  background: rgba(255,255,255,.08);
  box-shadow: none;
  color: #fff;
}

.footer-link-button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.faq-dialog {
  width: min(760px, calc(100vw - 28px));
}

.faq-shell {
  max-height: min(820px, calc(100dvh - 28px));
  overflow: auto;
}

.faq-list {
  display: grid;
  gap: 10px;
  padding: 2px 2px 12px;
}

.faq-list details {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  overflow: clip;
}

.faq-list summary {
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 850;
}

.faq-list details[open] summary {
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.faq-list details p {
  margin: 0;
  padding: 12px 16px 0;
  color: var(--muted);
}

.faq-list details p:last-child {
  padding-bottom: 14px;
}

.faq-contact-link {
  color: var(--yellow);
  font-weight: 800;
}