/* The game page: the canvases fill the window, and every screen is a layer
   over them. Sizes that must line up with the canvas HUD use --hud-scale
   (CSS px per HUD unit, set by game.js). */
html, body { height: 100%; overflow: hidden; }

.canvas-shell { position: fixed; inset: 0; line-height: 0; background: #080812; }
.canvas-shell > canvas#game,
.canvas-shell > canvas#game3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.countdown-banner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  font: italic 900 5rem/1 var(--font); color: #fff; pointer-events: none;
}

.screens { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.screen { position: absolute; inset: 0; pointer-events: auto; }

/* ---- Pit lane (Showroom) ---- */
.pitlane {
  background: linear-gradient(90deg, rgba(7, 7, 12, 0.94) 0%, rgba(7, 7, 12, 0.6) 34%, rgba(7, 7, 12, 0) 58%);
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr auto;
  /* The driver's row is never shorter than the driver: a short window
     scrolls rather than slide the strip over the career chip. */
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  grid-template-areas:
    "top choices choices"
    "driver . ."
    "strip strip start";
  gap: 16px 24px;
  padding: clamp(14px, 2.4vw, 28px);
  /* Short windows scroll rather than cut off the strip and Start. */
  overflow-y: auto;
}
.pitlane-top { grid-area: top; display: flex; align-items: center; gap: 14px; }
.wordmark { font: italic 900 1.1rem/1 var(--font); text-decoration: none; letter-spacing: 0.02em; }
.crumb { color: var(--muted); font: italic 700 0.8rem/1 var(--font); letter-spacing: 0.12em; }
.pitlane-choices { grid-area: choices; justify-self: end; text-align: right; display: grid; gap: 8px; align-content: start; }
.choice-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.choice-label { color: var(--muted); font: 700 0.7rem/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; margin-right: 4px; }
.cup-circuits { margin: 2px 0 0; padding: 0; list-style: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font: 600 0.8rem/1.3 var(--font); }
.cup-circuits li + li::before { content: "›"; margin-right: 12px; color: var(--red); }
.cup-circuits small { display: block; color: #d8c48a; font-weight: 600; font-size: 0.72rem; }
/* Random and custom cups: the circuits numbered in race order. */
.cup-circuits.is-numbered { counter-reset: race; }
.cup-circuits.is-numbered li + li::before { content: none; }
.cup-circuits.is-numbered li[data-circuit] { counter-increment: race; display: inline-flex; align-items: center; gap: 6px; }
.cup-circuits.is-numbered li[data-circuit]::before {
  content: counter(race); display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em;
  background: var(--red); color: #fff; font: italic 900 0.72rem/1 var(--font);
  transform: skew(-12deg);
}
.cup-circuits li.is-todo { color: rgba(255, 255, 255, 0.5); font-style: italic; }
.cup-circuits li.is-todo::before { content: none; }
/* The row under Race: the reroll, the picker, the single race's pick. */
#cup-row[hidden], #pick-row[hidden] { display: none; }
.pick-controls { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pick-btn { border-color: rgba(255, 255, 255, 0.5); background: rgba(225, 6, 0, 0.12); }
.pick-btn:hover, .pick-btn:focus-visible { border-color: #fff; background: rgba(225, 6, 0, 0.28); }
.pick-btn i { font-style: normal; display: inline-block; margin-right: 2px; }
.pitlane-driver { grid-area: driver; align-self: center; max-width: 440px; }
.driver-name { margin: 8px 0 4px; font-size: clamp(2rem, min(5vw, 7vh), 4.2rem); }
.driver-title { margin: 0 0 18px; color: var(--muted); font-weight: 600; }
.stat-bars { display: grid; gap: 8px; margin-bottom: 18px; }
.stat span { display: block; color: var(--muted); font: 700 0.68rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.stat-bar { height: 6px; background: rgba(255, 255, 255, 0.12); }
.stat-bar i { display: block; height: 100%; background: var(--red); }
/* (A scroll box's grid row would shrink to nothing and let the strip ride up
   over the driver: it keeps its tiles' height, and room for a thin scrollbar.) */
.driver-strip { grid-area: strip; display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; align-self: end; scrollbar-width: thin; min-height: calc(44px + 10px + 12px); }
.driver-tile {
  flex: 0 0 auto; width: 48px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, var(--team), rgba(0, 0, 0, 0.55)); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 800 0.72rem/1 var(--font);
}
.driver-tile b { font-size: 0.95rem; }
.driver-tile span { opacity: 0.85; font-size: 0.62rem; letter-spacing: 0.08em; }
.driver-tile.is-on { outline: 2px solid #fff; outline-offset: 2px; }
#start-cup { grid-area: start; justify-self: end; align-self: end; font-size: clamp(1rem, 1.6vw, 1.35rem); }

/* A very short window: the grid and weather hints are left out, and the
   players' unless it says something (the season's reason, the two players'
   keys); the race's and the season's stay. */
@media (max-height: 680px) and (min-width: 761px) {
  #grid-hint, #weather-hint, #players-hint.is-plain { display: none; }
  .pitlane-choices { gap: 7px; }
}

@media (max-height: 620px) {
  .pitlane { gap: 8px 24px; }
  .driver-title { margin-bottom: 8px; }
  .stat-bars { gap: 4px; margin-bottom: 8px; }
}

@media (max-width: 760px) {
  .pitlane {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(min-content, 1fr) auto auto;
    grid-template-areas: "top" "choices" "driver" "strip" "start";
    background: rgba(7, 7, 12, 0.72);
    overflow-y: auto;
  }
  .pitlane-choices { justify-self: start; text-align: left; }
  .choice-row, .cup-circuits, .pick-controls { justify-content: flex-start; }
  #start-cup { justify-self: stretch; text-align: center; }
}

/* A phone held upright: the driver block tighter and the choices' hints left
   out (the season's stays), so the strip and Start fit on the screen. */
@media (max-width: 760px) and (max-height: 900px) {
  .pitlane { gap: 10px 24px; }
  .choice-hint:not(#season-hint) { display: none; }
  .driver-name { font-size: clamp(1.6rem, 7vw, 2.4rem); margin: 4px 0 2px; }
  .driver-title { margin-bottom: 8px; }
  .stat-bars { gap: 4px; margin-bottom: 10px; }
}

/* ---- Race: timing tower and feed ticker, lined up with the HUD ---- */
.tower {
  position: absolute;
  left: calc(20px * var(--hud-scale, 1));
  top: calc(146px * var(--hud-scale, 1));
  width: 190px;
  transform: scale(var(--hud-scale, 1));
  transform-origin: top left;
  pointer-events: none;
  border-left: 3px solid var(--red);
}
.tower-gap { height: 6px; background: rgba(8, 8, 14, 0.6); }
.ticker {
  position: absolute;
  left: 50%;
  bottom: calc(116px * var(--hud-scale, 1));
  transform: translateX(-50%);
  max-width: 80vw;
  padding: 0.45em 1em;
  background: rgba(8, 8, 14, 0.82);
  border-left: 3px solid var(--red);
  font: 700 0.9rem/1.2 var(--font);
  pointer-events: none;
  transition: opacity 0.4s;
}
.ticker.is-fading { opacity: 0; }

/* ---- Overlays: results, podium, career, settings, phone note ---- */
.overlay {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 36px);
  background: rgba(5, 5, 10, 0.78);
  backdrop-filter: blur(6px);
}
.overlay-card {
  width: min(640px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border-top: 3px solid var(--red);
  padding: clamp(18px, 3vw, 32px);
}
.overlay-card.wide { width: min(880px, 100%); }
.overlay-card.narrow { width: min(460px, 100%); }
.overlay-title { margin: 8px 0 16px; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.overlay-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 22px; }

.results-table { display: grid; margin-top: 14px; }
.result-row, .result-head {
  display: grid; grid-template-columns: 3rem 4px minmax(0, 1fr) 6.5rem 6rem 5.5rem 3.5rem 3.5rem; gap: 10px; align-items: center;
  padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--line); font-weight: 600;
}
.result-head { color: var(--muted); font: 700 0.68rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; }
.result-row b { color: var(--red); }
.result-row i { display: block; width: 4px; height: 1.1em; }
.result-row.is-player { background: rgba(225, 6, 0, 0.18); }
.result-row .is-fastest { color: #c77dff; }
.results-table.constructors { margin-top: 22px; }
.constructors .result-head:not(:first-child) { margin-top: 18px; }
.constructors .result-row, .constructors .result-head { grid-template-columns: 3rem 4px minmax(0, 1fr) 4.5rem; }
.new-season { justify-self: end; margin-top: 6px; }
#results-career { margin-top: 6px; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; margin: 18px 0; }
.podium-step { text-align: center; }
.podium-step .block { margin-top: 8px; background: var(--panel-2); border-top: 4px solid var(--team); display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; font: italic 900 2rem/1 var(--font); color: var(--red); }
.podium-step.p1 .block { height: 150px; }
.podium-step.p2 .block { height: 110px; }
.podium-step.p3 .block { height: 80px; }
.podium-step strong { display: block; font: italic 900 1.1rem/1.1 var(--font); text-transform: uppercase; }
.podium-step span { color: var(--muted); font-size: 0.85rem; }
.podium-step.is-player strong { color: var(--red); }

/* The ceremony in 3D (r3d/podium.js): the screen opens up over the scene, the
   title on a broadcast-style band at the top, Continue at the bottom, and the
   2D steps give way to name plates under each driver (Screens.placePodium). */
/* Show podium pressed while the ceremony readies (Screens.podiumLoading). */
#results-next[aria-disabled="true"] { opacity: 0.78; cursor: progress; }
.podium-plates { display: none; }
#podium-screen.is-3d { background: none; backdrop-filter: none; padding: 0; align-items: stretch; justify-content: stretch; pointer-events: none; }
#podium-screen.is-3d .overlay-card {
  width: 100%; max-height: none; overflow: visible; background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* The steps stay for screen readers (the plates are drawn for the eye). */
#podium-screen.is-3d .podium { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#podium-screen.is-3d .podium-head, #podium-screen.is-3d .podium-foot { pointer-events: auto; }
#podium-screen.is-3d .podium-head {
  padding: clamp(14px, 3vh, 30px) clamp(16px, 4vw, 56px) clamp(28px, 6vh, 60px);
  background: radial-gradient(ellipse 58% 100% at 0 0, rgba(4, 5, 10, 0.9) 35%, rgba(4, 5, 10, 0));
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
#podium-screen.is-3d .podium-head .career-strip { max-width: min(520px, 100%); margin-top: 10px; padding: 0.5em 0.8em; font-size: 0.85rem; line-height: 1.45; background: rgba(10, 8, 14, 0.62); }
#podium-screen.is-3d .overlay-title { margin: 4px 0 0; }
#podium-screen.is-3d .podium-foot {
  padding: clamp(26px, 6vh, 60px) clamp(16px, 4vw, 56px) clamp(14px, 3vh, 28px);
  background: linear-gradient(0deg, rgba(4, 5, 10, 0.5), rgba(4, 5, 10, 0));
}
#podium-screen.is-3d .podium-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; }
#podium-screen.is-3d .podium-foot .overlay-actions { margin: 0 0 0 auto; }
#podium-screen.is-3d .podium-plates { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#podium-screen.is-3d .podium-plate { opacity: 0; transition: opacity 0.5s ease-out; }
#podium-screen.is-3d.plates-in .podium-plate { opacity: 1; }
.podium-plate {
  position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline;
  max-width: min(30vw, 300px); padding: 8px 14px 9px; line-height: 1.15;
  background: linear-gradient(160deg, rgba(14, 14, 22, 0.88), rgba(21, 21, 31, 0.82));
  border-top: 3px solid var(--team); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.podium-plate b { grid-row: span 2; font: italic 900 clamp(1.1rem, 2.2vw, 1.9rem)/1 var(--font); color: #fff; }
.podium-plate.p1 b { color: #e3b54a; }
.podium-plate strong { font: italic 900 clamp(0.8rem, 1.35vw, 1.15rem)/1.1 var(--font); text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0.14em; }
.podium-plate span { font-size: clamp(0.66rem, 0.95vw, 0.82rem); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium-plate em { grid-column: 2; font: 700 clamp(0.7rem, 1vw, 0.88rem)/1.2 var(--font); font-style: normal; color: #fff; }
.podium-plate.is-player strong { color: #ff4a3d; }
/* Narrow: two plates to a row (the winner's below), so each can be wider. */
@media (max-width: 560px) { .podium-plate { max-width: calc(50vw - 20px); } }

.career-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.career-tier { font: italic 900 2.4rem/1 var(--font); text-transform: uppercase; }
.career-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 16px 0; }
.career-stat { background: rgba(8, 8, 14, 0.6); border-left: 3px solid var(--red); padding: 0.6em 0.8em; }
.career-stat span { display: block; color: var(--muted); font: 700 0.66rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.career-stat strong { font-size: 1.3rem; }
.career-bests { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.career-best { display: flex; justify-content: space-between; gap: 10px; padding: 0.5em 0.7em; background: rgba(8, 8, 14, 0.5); font-weight: 600; }
.career-best span { color: var(--muted); }
.career-history { width: 100%; border-collapse: collapse; margin-top: 8px; font-weight: 600; }
.career-history th { text-align: left; color: var(--muted); font: 700 0.66rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; padding: 6px; }
.career-history td { padding: 6px; border-top: 1px solid var(--line); }
.career-history .up { color: #39d98a; }
.career-history .down { color: #ff6b6b; }
.career-section { margin: 22px 0 8px; }

.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 700; }

/* Shown while the 3D car loads, in place of any stand-in drawing. */
.view-loading {
  position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transform: translate(-50%, -50%); pointer-events: none;
  color: var(--muted); font: italic 700 0.8rem/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase;
}
.view-loading[hidden] { display: none; }
#graphics-setting[hidden] { display: none; }
.view-loading[data-where="garage"] { left: 68%; top: 58%; }
.view-loading[data-where="race"] { left: 50%; top: 50%; }
.view-loading-bar { position: relative; width: 140px; height: 3px; background: var(--line); overflow: hidden; }
.view-loading-bar::after {
  content: ""; position: absolute; inset: 0; width: 40%; background: var(--red);
  animation: view-loading 1.1s ease-in-out infinite;
}
@keyframes view-loading { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .view-loading-bar::after { animation: none; width: 100%; opacity: 0.6; } }

/* Race times line up digit for digit. */
.result-row .r-time, .result-row .r-gap { font-variant-numeric: tabular-nums; }
.result-row .r-gap { color: var(--muted); }
.result-row > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  /* Narrow windows keep time, gap and both points columns; the best lap goes.
     Gap is wide enough for its longest form, an estimate like "~+7:12.345". */
  .result-row, .result-head { grid-template-columns: 2.2rem 4px minmax(4.5rem, 1fr) 5.4rem 6rem 2.2rem 2.2rem; gap: 6px; padding-inline: 0.4rem; }
  .result-row > span:nth-child(6), .result-head > span:nth-child(6) { display: none; }
}
@media (max-width: 520px) {
  /* Phone widths: position, driver, race time and cup points. */
  .result-row, .result-head { grid-template-columns: 2rem 4px minmax(4.5rem, 1fr) 5.4rem 2.2rem; gap: 6px; }
  .result-row > span:nth-child(5), .result-head > span:nth-child(5),
  .result-row > span:nth-child(7), .result-head > span:nth-child(7) { display: none; }
}

/* Qualifying classification: the starting grid. */
.quali-lede { margin: 4px 0 0; }
.quali-table .result-row, .quali-table .result-head { grid-template-columns: 3rem 4px minmax(0, 1fr) 7rem 6rem; }
.quali-row.is-pole b { color: #c77dff; }
.quali-row.is-pole .r-time { color: #c77dff; }
@media (max-width: 520px) {
  .quali-table .result-row, .quali-table .result-head { grid-template-columns: 2rem 4px minmax(4.5rem, 1fr) 5.6rem 4.6rem; gap: 6px; }
}
.choice-hint { margin: 2px 0 0; color: var(--muted); font-size: 0.8rem; text-align: right; }
.settings-credits { margin-top: 16px; text-align: left; line-height: 1.45; }
.settings-credits a { color: inherit; }
.quali-note { margin: 6px 0 0; font-weight: 700; }

/* Your drivers: every career on this browser. */
.career-drivers tr.is-current td { color: #fff; font-weight: 700; }
.career-drivers tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--line); cursor: pointer; }
.link-btn:hover, .link-btn:focus-visible { text-decoration-color: var(--red); color: #fff; }

/* ---- Replay: broadcast graphics over the picture, and the controls ----
   One unit (--u) sizes everything, from the window's width and height, so
   the graphics keep their proportions and stay on screen at any size. */
.replay-btn[hidden] { display: none; }
.replay {
  --u: clamp(9px, min(1.08vw, 1.95vh), 16px);
  --bc-panel: rgba(9, 9, 16, 0.86);
  font-size: var(--u);
  pointer-events: none;
  color: #fff;
}
.replay button, .replay input { pointer-events: auto; }

.bc-tag {
  position: absolute; top: 1.4em; right: 1.6em;
  display: flex; align-items: stretch; gap: 0;
  font: italic 900 1.5em/1 var(--font); letter-spacing: 0.06em;
}
.bc-tag b { background: var(--red); padding: 0.32em 0.8em 0.3em 0.9em; clip-path: polygon(0.45em 0, 100% 0, calc(100% - 0.45em) 100%, 0 100%); }
.bc-tag em { font-style: italic; font-size: 0.62em; align-self: center; margin-left: 0.5em; padding: 0.3em 0.6em; background: var(--bc-panel); }
.bc-tag em:empty { display: none; }

.bc-tower {
  position: absolute; top: 1.4em; left: 1.6em; width: 15em;
  background: var(--bc-panel);
  box-shadow: 0 0.4em 1.6em rgba(0, 0, 0, 0.35);
  font-weight: 700;
}
.bc-tower-head {
  display: flex; flex-direction: column; gap: 0.35em;
  padding: 0.5em 0.7em 0.5em; background: linear-gradient(90deg, var(--red), #9d0400);
  font: italic 900 1.15em/1 var(--font); letter-spacing: 0.04em; text-transform: uppercase;
}
.bc-tower-head strong { white-space: nowrap; }
/* The SAFETY CAR sign, as the race's HUD shows it: the FIA's flag yellow (Pantone Yellow C). */
.bc-safety-car { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); color: #FEDD00; font: bold clamp(1.6rem, 3.2vw, 2.9rem)/1 Georgia, serif; white-space: nowrap; pointer-events: none; }
.bc-tower-head span { order: -1; min-width: 0; font: 700 0.56em/1 var(--font); letter-spacing: 0.14em; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-row {
  display: grid; grid-template-columns: 1.9em 0.28em 1fr auto; align-items: center; gap: 0.55em;
  height: 1.75em; padding-right: 0.6em; border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95em;
}
.bc-row b { text-align: center; background: rgba(255, 255, 255, 0.92); color: #0b0b12; height: 100%; display: grid; place-items: center; font: 900 0.95em/1 var(--font); }
.bc-row i { display: block; height: 62%; }
.bc-row span { letter-spacing: 0.08em; }
.bc-row em { font-style: normal; font-variant-numeric: tabular-nums; color: #d6d6e0; font-size: 0.9em; }
.bc-row.is-player span { color: #ffd9d6; }
.bc-row.is-focus { background: rgba(225, 6, 0, 0.9); }
.bc-row.is-focus b { background: #fff; }
.bc-row.is-focus em { color: #fff; }
.bc-row-gap { height: 0.35em; background: rgba(0, 0, 0, 0.5); }

.bc-third {
  position: absolute; left: 1.6em; bottom: 6.6em;
  max-width: calc(100% - 3.2em);
}
.bc-third-card {
  display: flex; align-items: stretch;
  background: var(--bc-panel); box-shadow: 0 0.4em 1.6em rgba(0, 0, 0, 0.35);
  border-left: 0.35em solid var(--team);
  animation: bc-in 0.35s ease-out;
}
@keyframes bc-in { from { transform: translateX(-1.2em); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bc-third-card { animation: none; } }
.bc-third-pos { display: grid; place-items: center; min-width: 2.6em; padding: 0 0.6em; background: var(--red); font: italic 900 1.6em/1 var(--font); }
.bc-third-num { display: grid; place-items: center; min-width: 2.2em; padding: 0 0.5em; color: var(--team); font: italic 900 1.9em/1 var(--font); filter: brightness(1.35) saturate(1.1); }
.bc-third-name { display: flex; flex-direction: column; justify-content: center; padding: 0.55em 1.1em 0.5em 0.2em; min-width: 0; }
.bc-third-name strong { font: 600 1.35em/1.05 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-third-name strong em { font-style: italic; font-weight: 900; letter-spacing: 0.02em; }
.bc-third-name small { margin-top: 0.3em; color: #c9c9d4; font: 700 0.78em/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; }
.bc-third-int:empty { display: none; }
.bc-third-int { display: grid; place-items: center; padding: 0 0.9em; border-left: 1px solid rgba(255, 255, 255, 0.12); font: 800 1.05em/1 var(--font); font-variant-numeric: tabular-nums; color: #ffd166; }

.bc-trace {
  position: absolute; right: 1.6em; bottom: 6.6em; width: 17em;
  background: var(--bc-panel); box-shadow: 0 0.4em 1.6em rgba(0, 0, 0, 0.35);
  padding: 0.6em 0.7em 0.7em;
}
.bc-trace-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.45em; font: 700 0.72em/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: #c9c9d4; }
.bc-trace-head b { font: italic 900 1.9em/1 var(--font); color: #fff; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bc-trace-head b small { font: 700 0.36em/1 var(--font); letter-spacing: 0.14em; color: #c9c9d4; margin-left: 0.3em; }
.bc-trace-body { display: grid; grid-template-columns: 0.7em 0.7em 1fr; gap: 0.4em; height: 4.6em; }
.bc-bar { position: relative; background: rgba(255, 255, 255, 0.1); }
.bc-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.bc-bar.is-throttle i { background: #39d98a; }
.bc-bar.is-brake i { background: #ff3b30; }
.bc-trace canvas { width: 100%; height: 100%; display: block; }
.bc-steer { position: relative; height: 0.32em; margin-top: 0.55em; background: rgba(255, 255, 255, 0.12); }
.bc-steer i { position: absolute; left: calc(50% - 0.5em); top: -0.18em; width: 1em; height: 0.68em; background: #fff; }

.bc-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em;
  padding: 0.9em 1.6em 1em;
  background: linear-gradient(0deg, rgba(5, 5, 10, 0.92), rgba(5, 5, 10, 0.55) 70%, rgba(5, 5, 10, 0));
}
.bc-group { display: flex; align-items: center; gap: 0.25em; }
.bc-btn {
  min-width: 2.4em; height: 2.3em; padding: 0 0.75em;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(12, 12, 20, 0.7); color: #fff;
  font: 700 0.85em/1 var(--font); letter-spacing: 0.04em; cursor: pointer;
}
.bc-btn:hover { border-color: rgba(255, 255, 255, 0.5); }
.bc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.bc-btn[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.bc-btn.is-live:not([aria-pressed="true"]) { box-shadow: inset 0 -0.22em 0 var(--red); }
.bc-play { width: 2.9em; padding: 0; display: grid; place-items: center; }
.bc-icon-play { width: 0; height: 0; border-style: solid; border-width: 0.5em 0 0.5em 0.85em; border-color: transparent transparent transparent #fff; margin-left: 0.15em; }
.bc-icon-pause { width: 0.8em; height: 1em; border-left: 0.28em solid #fff; border-right: 0.28em solid #fff; }
.bc-seek { flex: 1 1 14em; display: flex; align-items: center; gap: 0.8em; min-width: 10em; }
.bc-seek input { flex: 1; accent-color: var(--red); height: 1.6em; cursor: pointer; }
.bc-time { font: 700 0.85em/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; color: #d6d6e0; }
.bc-focus span { min-width: 3.4em; text-align: center; font: italic 900 1em/1 var(--font); letter-spacing: 0.08em; }
.bc-auto { margin-left: 0.25em; }
.bc-exit { margin-left: auto; background: #fff; color: #0b0b12; border-color: #fff; }

/* Narrow windows: the seek bar takes a row of its own, under the buttons. */
@media (max-width: 900px) {
  .bc-seek { order: 10; flex-basis: 100%; }
  .bc-third, .bc-trace { bottom: 9.8em; }
}
/* Short windows: the tower keeps the top five (and the car in view). */
@media (max-height: 520px) {
  .bc-row:nth-child(n+6):not(.is-focus) { display: none; }
}
@media (max-width: 560px) {
  .bc-trace { display: none; }
  .bc-tower { width: 12.5em; }
}

/* ---- Two-player split screen: player 2's driver, and the P1 / P2 tags ---- */
.second-driver[hidden] { display: none; }
.second-pick { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.second-name { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; min-width: 0; }
.second-name i { display: inline-block; width: 4px; height: 1.1em; background: var(--team, var(--red)); }
.second-name small { color: var(--muted); font-weight: 600; }
.ptag {
  display: inline-block; margin-left: 0.4em; padding: 0 0.35em; border-radius: 2px;
  font: 900 0.72em/1.45 var(--font); letter-spacing: 0.04em; color: #0b0b12; background: #75d5ff; vertical-align: 0.1em;
}
.is-p2 .ptag { background: #ff7ac6; }
.tower-row.is-p2 { background: rgba(255, 122, 198, 0.24); }
.result-row.is-p2 { background: rgba(255, 122, 198, 0.16); }
/* Side by side, the feed ticker sits under the first view, clear of the divider. */
body[data-split="side"] .ticker { left: 25%; max-width: 44vw; }

/* ---- The circuit picker: a custom cup's four, or a single race's one ---- */
.picker-card { width: min(1040px, 100%); display: flex; flex-direction: column; }
.picker-card .overlay-title { margin-bottom: 12px; }
.picker-search input {
  width: 100%; box-sizing: border-box; padding: 0.7em 0.9em;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-left: 3px solid var(--red);
  color: var(--ink); font: 600 1rem/1.2 var(--font);
}
.picker-search input::placeholder { color: rgba(255, 255, 255, 0.4); }
.picker-search input:focus { outline: none; border-color: #fff; border-left-color: var(--red); background: rgba(255, 255, 255, 0.09); }
.circuit-order { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.circuit-order[hidden] { display: none; }
.circuit-order li {
  display: flex; align-items: center; gap: 4px; min-height: 2.6rem; padding: 0 5px 0 0;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font: 700 0.8rem/1.2 var(--font);
}
.circuit-order li > b {
  align-self: stretch; display: grid; place-items: center; min-width: 2rem;
  background: var(--red); color: #fff; font: italic 900 1rem/1 var(--font);
}
.circuit-order li > span { flex: 1; min-width: 0; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circuit-order li.is-empty { border-style: dashed; color: rgba(255, 255, 255, 0.4); font-style: italic; }
.circuit-order li.is-empty > b { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); }
.cc-btn {
  flex: 0 0 auto; width: 1.45rem; height: 1.7rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 7, 12, 0.6); color: var(--ink); font: 800 0.95rem/1 var(--font); cursor: pointer;
}
.cc-btn:hover:not(:disabled), .cc-btn:focus-visible { border-color: #fff; }
.cc-btn:disabled { opacity: 0.3; cursor: default; }
.picker-count { text-align: left; margin-top: 10px; }
.circuit-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
  margin-top: 10px; padding: 2px; overflow-y: auto; min-height: 7rem; max-height: min(52vh, 560px);
}
.circuit-card {
  position: relative; display: grid; grid-template-rows: auto auto auto; gap: 2px; text-align: left;
  padding: 8px 10px 10px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  color: var(--ink); cursor: pointer; font: inherit;
}
.circuit-card:hover, .circuit-card:focus-visible { border-color: rgba(255, 255, 255, 0.6); }
.circuit-card.is-on { border-color: var(--red); background: linear-gradient(160deg, rgba(225, 6, 0, 0.28), rgba(225, 6, 0, 0.06)); }
.circuit-card.is-full:not(.is-on) { opacity: 0.45; }
.circuit-card strong { font: 700 0.84rem/1.2 var(--font); }
.circuit-card span { color: var(--muted); font: 600 0.72rem/1.2 var(--font); }
.cc-map { width: 100%; height: auto; aspect-ratio: 120 / 76; margin-bottom: 4px; }
.cc-map path { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.6; stroke-linejoin: round; }
.cc-map circle { fill: var(--red); }
.circuit-card.is-on .cc-map path { stroke: #fff; }
.cc-slot {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
  background: var(--red); color: #fff; font: italic 900 0.95rem/1 var(--font); transform: skew(-12deg);
}
.picker-empty { grid-column: 1 / -1; margin: 18px 0; }
.picker-card .overlay-actions { margin-top: 14px; }
.picker-card .overlay-actions [hidden] { display: none; }
@media (max-width: 1000px) {
  .circuit-order { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .circuit-cards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); max-height: none; }
}