/* PARTY MODE — paper-collage F1 race strip */

:root {
  --paper: #ece3d0;
  --paper-2: #e2d7bf;
  --ink: #1d1a16;
  --ink-soft: #4a443a;
  --road: #2b2926;
  --accent: #e10600;
  --card: #f7f1e3;
  --shadow: rgba(30, 20, 5, 0.35);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  background-image: var(--grain);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

/* ---------- top bar ---------- */
#topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px 14px;
  background: var(--ink);
  background-image: var(--grain);
  color: var(--card);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 97% 100%, 93% 90%, 88% 99%, 83% 91%, 77% 100%, 71% 92%, 66% 99%, 60% 90%, 54% 100%, 48% 91%, 42% 99%, 36% 90%, 30% 100%, 24% 92%, 18% 99%, 12% 90%, 6% 100%, 2% 91%, 0 97%);
  padding-bottom: 22px;
  z-index: 30;
}

.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }

.brand h1 {
  font-family: "Archivo Black", sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  margin: 0;
  color: var(--card);
  text-shadow: 3px 3px 0 var(--accent);
  white-space: nowrap;
}

.brand .sub {
  font-family: "Permanent Marker", cursive;
  font-size: 13px;
  color: #cfc4ac;
  white-space: nowrap;
}

/* site nav + discreet sharing (sits between brand and race chips) */
.topnav { display: flex; align-items: center; gap: 6px; }
.topnav-link {
  font-family: "Archivo Black", sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #cfc4ac;
  padding: 6px 10px;
  border-radius: 0;
  border: 1px solid #ffffff22;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.topnav-link:hover { color: var(--card); background: #ffffff14; }
.share { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.share .sh {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: #cfc4ac;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.share .sh:hover { color: var(--card); background: rgba(0, 0, 0, 0.28); border-color: rgba(255, 255, 255, 0.14); }
.share .sh svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.share .sh.copied { color: #7fe0a3; }
.share .sh.native { display: none; } /* revealed by JS where navigator.share exists */

.race-info { display: flex; align-items: center; gap: 10px; font-weight: 600; flex-wrap: wrap; justify-content: flex-end; }
#race-name { font-size: 14px; letter-spacing: 0.4px; }

.chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-radius: 0;
  transform: rotate(-1.2deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.chip.mode { background: var(--accent); color: #fff; transform: rotate(1.4deg); }
.chip.flag-green { background: #2e9e44; color: #fff; }
.chip.flag-yellow { background: #f3c623; color: var(--ink); }
.chip.flag-sc { background: #f57f17; color: #fff; }
.chip.flag-red { background: #d32f2f; color: #fff; }
.chip.flag-chequered { background: repeating-conic-gradient(#1d1a16 0 90deg, #fff 0 180deg) 0 0/12px 12px; color: transparent; }

/* ---------- race library ---------- */
.brand .home-link { text-decoration: none; }

body.library #stage,
body.library #trace,
body.library #controls,
body.library #lap-counter,
body.library #flag-chip,
body.library #mode-chip { display: none; }

#library {
  flex: 1;
  overflow-y: auto;
  padding: 28px 34px 50px;
}

.lib-title {
  font-family: "Permanent Marker", cursive;
  font-size: 20px;
  color: var(--ink-soft);
  margin: 0 0 20px;
  transform: rotate(-1deg);
}

#lib-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 26px;
  max-width: 1200px;
}

.lib-card {
  background: var(--card);
  background-image: var(--grain);
  padding: 16px 18px 14px;
  box-shadow: 5px 6px 0 var(--shadow);
  clip-path: polygon(1% 3%, 99% 0%, 100% 97%, 2% 100%);
  transform: rotate(-0.8deg);
}
.lib-card:nth-child(2n) { transform: rotate(0.9deg); }
.lib-card:nth-child(3n) { transform: rotate(-1.4deg); }

.lib-year {
  font-family: "Permanent Marker", cursive;
  font-size: 13px;
  color: var(--accent);
}
.lib-gp {
  font-family: "Archivo Black", sans-serif;
  font-size: 18px;
  line-height: 1.15;
  margin: 2px 0 4px;
}
.lib-where { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.lib-date { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

.lib-sessions { display: flex; gap: 8px; margin-top: 12px; }
.lib-btn {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  background: var(--ink);
  color: var(--card);
  padding: 5px 12px;
  box-shadow: 2px 2px 0 var(--shadow);
  transform: rotate(-1deg);
}
.lib-btn:nth-child(2n) { transform: rotate(1.2deg); }
.lib-btn:hover { background: var(--accent); color: #fff; }
.lib-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.lib-btn.soon { opacity: 0.4; cursor: not-allowed; }
.lib-btn.soon:hover { background: var(--ink); color: var(--card); }

/* ---------- stage ---------- */
#stage { flex: 1; display: flex; min-height: 0; }

#viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
#viewport.dragging { cursor: grabbing; }

#track-strip {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--track-y, 62%));
  height: 34px;
  background: var(--road);
  background-image: var(--grain);
  clip-path: polygon(0 6%, 3% 0, 9% 5%, 17% 1%, 26% 6%, 35% 0, 44% 5%, 53% 1%, 62% 6%, 71% 0, 80% 5%, 89% 1%, 100% 5%, 100% 94%, 96% 100%, 88% 95%, 79% 100%, 70% 94%, 61% 99%, 52% 94%, 43% 100%, 34% 95%, 25% 100%, 16% 94%, 8% 99%, 0 95%);
}

#track-strip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  background: repeating-linear-gradient(90deg, #d9cfb8 0 26px, transparent 26px 52px);
  opacity: 0.85;
}

/* gap gridlines */
#gridlines { position: absolute; inset: 0; pointer-events: none; }
.gridline {
  position: absolute;
  top: 8%;
  bottom: 18%;
  width: 2px;
  background: rgba(60, 50, 30, 0.12);
}
.gridline .gl-label {
  position: absolute;
  bottom: -22px;
  left: -30px;
  width: 60px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(60, 50, 30, 0.55);
  font-variant-numeric: tabular-nums;
}

/* ---------- car sprites ---------- */
.car {
  position: absolute;
  bottom: calc(100% - var(--track-y, 62%));
  left: 0;
  width: 0;
  cursor: pointer;
  transition: opacity 0.4s;
}

.car-inner {
  position: absolute;
  bottom: -6px;
  left: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: bottom center;
}

.car.selected .car-inner { z-index: 25 !important; }
.car.selected { z-index: 400 !important; } /* beats the inline x-based z so the picked head surfaces */
.car.radio-live { z-index: 380 !important; } /* speech bubble surfaces over neighboring heads */
.car.out { opacity: 0.72; filter: grayscale(0.55); }
.car.idle { opacity: 0.55; filter: saturate(0.5); } /* quali: in the garage */

/* the comically large head, emerging from the cockpit */
.stack {
  position: relative;
  width: var(--car-w, 120px);
}

.head-wrap {
  position: absolute;
  left: 30%;
  bottom: 24%;
  transform: translateX(-50%);
  transition: transform 0.35s ease-in-out; /* eases the look-back lean */
  z-index: 1; /* behind the car body — neck disappears into the cockpit */
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(4px 6px 5px var(--shadow));
}

.head-anim {
  animation: bob var(--bob-dur, 2.3s) ease-in-out var(--bob-delay, 0s) infinite alternate;
  transform-origin: 50% 95%;
}

.head-wrap img {
  display: block;
  width: var(--head-size, 92px);
  height: auto;
  clip-path: polygon(2% 38%, 9% 12%, 22% 4%, 38% 0%, 57% 2%, 73% 7%, 86% 15%, 95% 31%, 98% 52%, 93% 71%, 97% 86%, 84% 95%, 65% 99%, 42% 97%, 24% 100%, 10% 91%, 4% 74%, 0% 55%);
  pointer-events: none;
}

/* generated collage art carries its own scissor-cut edges — drop the CSS
   clip/white-outline and keep only the soft paper-lift shadow */
.head-wrap.art {
  filter: drop-shadow(4px 6px 5px var(--shadow));
}
.head-wrap.art img {
  clip-path: none;
}
.car-body.art {
  filter: drop-shadow(3px 5px 4px var(--shadow));
}
.car-body img {
  display: block;
  width: 100%;
  height: auto;
}

/* placeholder when a driver has no usable headshot */
.head-fallback {
  width: var(--head-size, 92px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Archivo Black", sans-serif;
  font-size: 26px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  clip-path: polygon(2% 38%, 9% 12%, 22% 4%, 38% 0%, 57% 2%, 73% 7%, 86% 15%, 95% 31%, 98% 52%, 93% 71%, 97% 86%, 84% 95%, 65% 99%, 42% 97%, 24% 100%, 10% 91%, 4% 74%, 0% 55%);
}

@keyframes bob {
  from { transform: rotate(var(--tilt, -3deg)) translateY(0); }
  to   { transform: rotate(calc(var(--tilt, -3deg) * -1)) translateY(-3px); }
}

/* mood changes: quick pop on any swap, rage-shake while angry, joy-bounce while happy */
.head-wrap img.pop { animation: mood-pop 0.45s ease; }
@keyframes mood-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22) rotate(2deg); }
  100% { transform: scale(1); }
}

body.playing .head-wrap.angry .head-anim { animation: rage var(--bob-dur, 2.3s) ease-in-out infinite; }
@keyframes rage {
  0%, 100% { transform: rotate(-2.5deg) translateX(-1.5px); }
  12% { transform: rotate(2deg) translateX(1.5px); }
  24% { transform: rotate(-2deg) translateX(-1px); }
  36% { transform: rotate(1.5deg) translateX(1px); }
  50% { transform: rotate(-1deg); }
}

body.playing .head-wrap.happy .head-anim { animation: joy calc(var(--bob-dur, 2.3s) * 0.55) ease-in-out infinite alternate; }

/* retired: head droops and shudders with sobs */
body.playing .head-wrap.crying .head-anim { animation: sob calc(var(--bob-dur, 2.3s) * 0.8) ease-in-out infinite; }
@keyframes sob {
  0%, 100% { transform: rotate(4deg) translateY(2px); }
  18% { transform: rotate(5.5deg) translateY(4px) translateX(-1px); }
  26% { transform: rotate(4.5deg) translateY(3px) translateX(1px); }
  34% { transform: rotate(6deg) translateY(4.5px) translateX(-1px); }
  42% { transform: rotate(4.5deg) translateY(3px); }
  70% { transform: rotate(3deg) translateY(1.5px); }
}

/* glancing back at the car behind: lean the whole head rearward a touch.
   the lean lives on .head-wrap (no animation runs there) so the 0.35s
   transition tweens it; the bob keeps running underneath, no snap */
.head-wrap.back { transform: translateX(-50%) rotate(-7deg) translateX(-5px); }
@keyframes joy {
  from { transform: rotate(var(--tilt, -3deg)) translateY(0) scale(1); }
  to   { transform: rotate(calc(var(--tilt, -3deg) * -1)) translateY(-7px) scale(1.05); }
}

body.paused .head-anim { animation-play-state: paused; }

/* car body (svg or generated art) */
.car-body {
  position: relative;
  z-index: 2;
  width: var(--car-w, 120px);
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(3px 5px 4px var(--shadow));
}
.car-body svg { display: block; width: 100%; height: auto; }

.wheel-spin { transform-box: fill-box; transform-origin: center; }
body.playing .wheel-spin { animation: spin 0.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tag under the car */
.tag {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--card);
  border-left: 4px solid var(--team, #888);
  padding: 2px 7px 2px 5px;
  border-radius: 0;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--shadow);
  transform: rotate(var(--tag-tilt, -1.5deg));
  font-variant-numeric: tabular-nums;
}
.tag .pos { font-family: "Archivo Black", sans-serif; font-size: 11px; margin-right: 4px; color: var(--ink); }
.tag .gap { color: var(--ink-soft); margin-left: 4px; }
.tag .lapped { color: #b3382c; }

.car.alt .car-inner .tag { margin-top: 26px; }

/* ---------- detail card ---------- */
#detail-card {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5000;
  width: 270px;
  background: var(--card);
  background-image: var(--grain);
  padding: 12px 14px;
  transform: rotate(-1deg);
  box-shadow: 5px 6px 0 var(--shadow);
  clip-path: polygon(1% 3%, 99% 0%, 100% 97%, 2% 100%);
}

/* generated car art across the top of the card (hides itself if missing) */
#detail-card .dc-render {
  display: block;
  width: 100%;
  height: auto;
  margin: -2px 0 6px;
  filter: drop-shadow(2px 3px 3px var(--shadow));
}

/* chassis designation, a small spec label under the car render */
#detail-card .dc-model {
  font-family: "Archivo Black", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-soft);
  margin: -4px 2px 8px;
}

#detail-card .dc-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
#detail-card .dc-head img { width: 64px; clip-path: polygon(2% 38%, 9% 12%, 22% 4%, 38% 0%, 57% 2%, 73% 7%, 86% 15%, 95% 31%, 98% 52%, 93% 71%, 97% 86%, 84% 95%, 65% 99%, 42% 97%, 24% 100%, 10% 91%, 4% 74%, 0% 55%); }
#detail-card .dc-name { font-family: "Archivo Black", sans-serif; font-size: 16px; line-height: 1.1; }
#detail-card .dc-team { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
#detail-card .dc-close { position: absolute; top: 6px; right: 10px; cursor: pointer; font-weight: 700; font-size: 14px; background: none; border: none; color: var(--ink-soft); }

#detail-card table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#detail-card td { padding: 3px 0; border-top: 1px dashed rgba(0,0,0,0.15); }
#detail-card td:last-child { text-align: right; font-weight: 700; }

/* ---------- tyre strategy panel ---------- */
#strategy {
  position: absolute;
  inset: 10px 12px 14px;
  z-index: 4500;
  background: var(--card);
  background-image: var(--grain);
  box-shadow: 6px 7px 0 var(--shadow);
  clip-path: polygon(0.5% 1%, 99.5% 0%, 100% 99%, 1% 100%);
  padding: 12px 18px 14px;
  transform: translateY(24px) rotate(-0.4deg);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#strategy.open { transform: translateY(0) rotate(-0.4deg); opacity: 1; }

.strat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.strat-title { font-family: "Archivo Black", sans-serif; font-size: 15px; letter-spacing: 1.2px; }
.strat-lap { font-size: 11px; }

.strat-ruler { position: relative; height: 14px; margin-left: 46px; }
.strat-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-soft);
}

.strat-rows { position: relative; flex: 1; overflow-y: auto; min-height: 0; }
.strat-row {
  display: flex;
  align-items: center;
  height: 21px;
  gap: 8px;
}
.strat-row.out { opacity: 0.45; }
.strat-acr {
  width: 38px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  border-left: 4px solid var(--team, #888);
  padding-left: 5px;
}
.strat-track { position: relative; flex: 1; height: 15px; }

.stint {
  position: absolute;
  top: 0;
  height: 100%;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  padding-left: 5px;
  overflow: hidden;
}
.stint-SOFT { background: #d32f2f; }
.stint-MEDIUM { background: #b58900; }
.stint-HARD { background: #555; }
.stint-INTERMEDIATE { background: #2e7d32; }
.stint-WET { background: #1565c0; }
.stint-UNKNOWN { background: #888; }
.stint.used { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.18) 0 3px, transparent 3px 7px); }

.strat-pit {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 19px;
  background: var(--ink);
}
.strat-pit::after {
  content: "";
  position: absolute;
  bottom: -3px; left: -2px;
  width: 6px; height: 3px;
  background: var(--ink);
}

.strat-x { position: absolute; top: 0; font-size: 11px; font-weight: 700; color: var(--ink-soft); }

.strat-playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* ---------- battle chips ---------- */
#battle-chips {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.battle-chip {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--card);
  background-image: var(--grain);
  color: var(--ink);
  border: none;
  border-left: 4px solid var(--team-a, #888);
  border-right: 4px solid var(--team-b, #888);
  padding: 4px 9px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  transform: rotate(-1deg);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.battle-chip:nth-child(2n) { transform: rotate(1.1deg); }
.battle-chip.show { opacity: 1; }
.battle-chip.on { background: var(--accent); color: #fff; }
.battle-chip b { font-family: "Archivo Black", sans-serif; font-size: 11px; }
.battle-chip i { font-family: "Permanent Marker", cursive; font-style: normal; margin: 0 2px; }
.battle-chip span { color: var(--ink-soft); margin-left: 3px; }
.battle-chip.on span { color: #ffd9d6; }

/* ---------- team radio ---------- */
.radio-bubble {
  position: absolute;
  bottom: calc(var(--car-w, 120px) * 1.05);
  left: 4px;
  font-size: 17px;
  line-height: 1;
  background: var(--card);
  background-image: var(--grain);
  border: none;
  padding: 5px 7px 4px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  clip-path: polygon(4% 10%, 96% 0%, 100% 88%, 64% 92%, 48% 100%, 44% 90%, 2% 96%);
  transform: rotate(-4deg) scale(0.4);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 30;
}
.radio-bubble.show { transform: rotate(-4deg) scale(1); opacity: 1; }
.radio-bubble:hover { transform: rotate(-4deg) scale(1.15); }

/* transcribed clips: proper comic-book speech bubble with a tail */
.radio-bubble.comic {
  clip-path: none;
  width: max-content;
  max-width: 200px;
  text-align: left;
  font-family: "Permanent Marker", cursive;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 0;
  padding: 6px 9px 7px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.radio-bubble.comic:hover { transform: rotate(-4deg) scale(1.05); }
.radio-bubble.comic i {
  display: block;
  font-style: normal;
  font-family: "Space Grotesk", sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 2px;
}
.radio-bubble.comic::after,
.radio-bubble.comic::before {
  content: "";
  position: absolute;
  border: solid transparent;
  border-bottom: 0;
  pointer-events: none;
}
.radio-bubble.comic::after {
  left: 14px;
  bottom: -12px;
  border-width: 13px 4px 0 12px;
  border-top-color: var(--ink);
}
.radio-bubble.comic::before {
  left: 17px;
  bottom: -7px;
  border-width: 9px 3px 0 8px;
  border-top-color: var(--card);
  z-index: 1;
}

.dc-radio { margin-top: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dc-radio-cap { font-family: "Permanent Marker", cursive; font-size: 10px; color: var(--ink-soft); }
.dc-radio-play {
  font-family: "Space Grotesk", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--ink);
  color: var(--card);
  border: none;
  padding: 2px 7px;
  cursor: pointer;
  box-shadow: 1px 1px 0 var(--shadow);
}
.dc-radio-play:hover { background: var(--accent); color: #fff; }

.dc-spark { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(0, 0, 0, 0.15); }
.dc-spark-svg { display: block; width: 100%; height: auto; }
.dc-spark-cap {
  font-family: "Permanent Marker", cursive;
  font-size: 10px;
  color: var(--ink-soft);
}

.hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) rotate(-0.6deg);
  font-family: "Permanent Marker", cursive;
  font-size: 12px;
  color: rgba(60, 50, 30, 0.5);
  pointer-events: none;
}

/* ---------- leaderboard ---------- */
#leaderboard {
  width: 295px;
  flex-shrink: 0;
  background: var(--paper-2);
  background-image: var(--grain);
  border-left: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.board-head {
  font-family: "Archivo Black", sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 10px 14px 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#board-note { font-family: "Space Grotesk"; font-size: 10px; color: var(--ink-soft); }

#board-rows { overflow-y: auto; padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 4px; }

.brow {
  display: grid;
  grid-template-columns: 24px 30px 1fr 62px 58px;
  align-items: center;
  gap: 6px;
  background: var(--card);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-left: 4px solid var(--team, #888);
  box-shadow: 2px 2px 0 rgba(30, 20, 5, 0.18);
  cursor: pointer;
  order: var(--ord, 99);
}
.brow:hover, .brow.selected { outline: 2px solid var(--ink); }
.brow.out { opacity: 0.45; filter: grayscale(0.8); }

.brow .bpos { font-family: "Archivo Black", sans-serif; font-size: 12px; }
.brow .bhead { width: 26px; height: 26px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; background: #d8cdb4; }
.brow .bacr { letter-spacing: 0.5px; }
.brow .btyre { font-size: 9px; font-weight: 800; margin-left: 4px; padding: 1px 4px; border-radius: 0; border: 1.5px solid; }
.brow .bgap { text-align: right; color: var(--ink-soft); }
.brow .blap { text-align: right; }
.brow .blap.best { color: #7b1fa2; font-weight: 800; }

.tyre-SOFT { color: #d32f2f; border-color: #d32f2f; }
.tyre-MEDIUM { color: #b58900; border-color: #b58900; }
.tyre-HARD { color: #555; border-color: #555; }
.tyre-INTERMEDIATE { color: #2e7d32; border-color: #2e7d32; }
.tyre-WET { color: #1565c0; border-color: #1565c0; }

/* ---------- race trace scrubber ---------- */
#trace {
  position: relative;
  height: 96px;
  flex-shrink: 0;
  background: var(--ink);
  background-image: var(--grain);
  cursor: grab;
  touch-action: none;
  z-index: 25;
  clip-path: polygon(0 10%, 4% 2%, 9% 9%, 15% 1%, 22% 8%, 28% 0, 35% 7%, 41% 1%, 48% 9%, 55% 2%, 61% 8%, 68% 0, 74% 7%, 81% 1%, 87% 8%, 93% 2%, 100% 9%, 100% 100%, 0 100%);
}
#trace.panning { cursor: grabbing; }
#trace canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.trace-playhead {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: var(--accent);
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.2s;
}
/* dimmed when playback has run off the panned (detached) window */
.trace-playhead.off { opacity: 0.3; }
.trace-playhead::after {
  content: "";
  position: absolute;
  bottom: 0; left: -3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--accent);
}

.trace-label {
  position: absolute;
  top: 12px; left: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--card);
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  border-radius: 0;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* re-pins the window to the playhead; only shown once a pan detaches it */
.trace-follow {
  position: absolute;
  top: 8px; right: 10px;
  z-index: 2;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
  border: none;
  padding: 4px 9px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.trace-follow:active { transform: translate(2px, 2px); box-shadow: none; }

/* one-time gesture hint, fades out on first interaction */
.trace-hint {
  position: absolute;
  top: 11px; right: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(236, 227, 208, 0.5);
  pointer-events: none;
  transition: opacity 0.4s;
}
.trace-hint.gone { opacity: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
  border: 0;
}

/* ---------- controls ---------- */
#controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 14px;
  background: var(--ink);
  background-image: var(--grain);
  color: var(--card);
  z-index: 30;
}

#controls .btn,
#controls .group button {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12px;
  background: var(--card);
  color: var(--ink);
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

#controls .btn.big { font-size: 16px; padding: 6px 16px; transform: rotate(-1deg); }
#controls .group { display: flex; gap: 4px; }
#controls .group button.on { background: var(--accent); color: #fff; }
#controls .group button:active, #controls .btn:active { transform: translate(2px, 2px); box-shadow: none; }

.scrub-wrap { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 100px; }
.clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; min-width: 80px; }

#scrubber { flex: 1; accent-color: var(--accent); height: 6px; cursor: pointer; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  #stage { flex-direction: column; }
  #leaderboard { width: 100%; max-height: 30%; border-left: none; border-top: 3px solid var(--ink); }
  .brand .sub { display: none; }
  #topbar { flex-wrap: wrap; gap: 8px 12px; }
  .topnav { order: 3; }
  #controls { flex-wrap: wrap; }
  #trace { height: 64px; }
  .trace-label { display: none; }
}

/* ---------- start countdown (js/countdown.js) ---------- */
/* A real-F1 light gantry — 5 tall black panels, 4 lights each — overlaid DIRECTLY
   on the live race grid (no backdrop; the cars + drivers stay visible behind it).
   Built in CSS so each light is sequenced; subtle grain keeps the paper-collage
   feel, the LEDs are glossy. At lights-out every light snaps off in the same frame
   the race starts, then the gantry vanishes. */
#start-overlay {
  position: absolute;
  inset: 0;
  z-index: 4800; /* above cars (~400) / radio (380), below #detail-card (5000) */
  overflow: hidden;
  pointer-events: auto; /* swallow clicks on the frozen grid during the lights */
}
#start-overlay.out { pointer-events: none; }

/* freeze interaction with the live UI while the lights run (the overlay only
   covers #viewport, so the footer / trace / leaderboard siblings need blocking
   too — else a leaderboard-row click would pop #detail-card over the lights).
   No dimming: the brief is to show the real race screen behind the gantry. */
body.starting #controls,
body.starting #trace,
body.starting #leaderboard { pointer-events: none; }
body.starting #detail-card { display: none; }

/* the gantry: a row of 5 tall black light panels (the real FIA layout). Built in
   CSS so all 20 lights are individually sequenced. Subtle grain + a per-panel
   wobble keep the paper-collage feel; the LEDs are glossy/photorealistic. */
.so-gantry {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(7px, 1.7vw, 13px);
  transition: transform 0.4s ease-in, opacity 0.4s ease-in;
}
#start-overlay.out .so-gantry { transform: translateX(-50%) translateY(-12%); opacity: 0; }

/* one light panel (column) — the near-black rounded housing from the reference.
   Height is intrinsic (4 lights + gaps + padding) so it needs no parent height. */
.so-col {
  flex: 0 0 auto;
  width: clamp(40px, 9.5vw, 62px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(7px, 1.6vw, 11px);
  padding: clamp(7px, 1.6vw, 11px) 0;
  background: #08080a;
  background-image: var(--grain);
  border-radius: 0;
  box-shadow: 0 7px 0 var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}
.so-col:nth-child(odd) { transform: rotate(-0.7deg); }  /* hand-cut wobble */
.so-col:nth-child(even) { transform: rotate(0.7deg); }

/* a light: recessed dark bulb when off (matches the reference), glossy red on */
.so-light {
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #26262b, #0c0c0e 72%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  transition: background 0.08s ease, box-shadow 0.08s ease;
}
/* an ignited column glows its top two lights red (the iconic two-row F1 look) */
.so-col.on .so-light:nth-child(-n+2) {
  background: radial-gradient(circle at 50% 36%, #ff6a5e 0%, #f4200f 38%, #c40700 72%, #7e0400 100%);
  box-shadow:
    0 0 14px 3px rgba(240, 22, 12, 0.7), 0 0 30px 7px rgba(240, 22, 12, 0.32),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.55);
}
/* LIGHTS OUT: every lit light snaps off in the SAME frame the race starts */
#start-overlay.out .so-col.on .so-light {
  background: radial-gradient(circle at 50% 38%, #26262b, #0c0c0e 72%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  transition: none;
}

/* loading state (hidden once the lights are armed) */
.so-caption {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Permanent Marker", cursive;
  color: var(--ink-soft);
  font-size: 16px;
  letter-spacing: 0.5px;
}
.so-bar {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 6px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0;
  overflow: hidden;
}
.so-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; }
#start-overlay.armed .so-caption, #start-overlay.armed .so-bar { display: none; }

@media (max-width: 900px) {
  .so-gantry { height: min(260px, 40%); top: 8%; }
}

@media (prefers-reduced-motion: reduce) {
  .so-gantry { transition: opacity 0.2s ease; }
  .so-col:nth-child(odd), .so-col:nth-child(even) { transform: none; }
  #start-overlay.out .so-gantry { transform: translateX(-50%); opacity: 0; } /* fade, no rise */
}

/* ======================================================================
   WIN ODDS — race-winner prediction page (predictions.html)
   ====================================================================== */
body.predict { overflow: hidden; }
.topnav-link.current { color: var(--ink); background: var(--card); border-color: var(--card); }

#predict-stage {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px clamp(12px, 4vw, 40px) 28px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.pred-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pred-title-wrap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pred-title { font-family: "Archivo Black", sans-serif; font-size: clamp(24px, 5vw, 40px); margin: 0; letter-spacing: 1px; transform: rotate(-1deg); }
.beta-tag {
  display: inline-block; vertical-align: super; margin-left: 8px;
  background: var(--accent); color: #fff;
  font-family: "Archivo Black", sans-serif; font-size: 12px; letter-spacing: 2px;
  padding: 2px 8px; transform: rotate(3deg); box-shadow: 2px 2px 0 var(--shadow);
}
.pred-status { font-family: "Permanent Marker", cursive; font-size: 13px; color: var(--ink-soft); }

.metric-toggle { display: flex; gap: 4px; background: var(--ink); padding: 4px; box-shadow: 2px 2px 0 var(--shadow); }
.metric-toggle button {
  font-family: "Archivo Black", sans-serif; font-size: 11px; letter-spacing: 0.6px;
  border: none; padding: 7px 14px; cursor: pointer; color: var(--card);
  background: transparent;
}
.metric-toggle button.on { background: var(--accent); color: #fff; }

/* ---- favourite hero ---- */
.favorite {
  position: relative; display: grid; align-items: center;
  grid-template-columns: auto 1fr auto; gap: 16px;
  background: var(--card); background-image: var(--grain);
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow);
  padding: 16px 20px; margin-bottom: 22px;
  border-left: 12px solid var(--team, var(--accent));
  transform: rotate(-0.4deg);
}
.fav-badge {
  position: absolute; top: -12px; left: 18px; background: var(--accent); color: #fff;
  font-family: "Archivo Black", sans-serif; font-size: 11px; letter-spacing: 1px;
  padding: 3px 10px; transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--shadow);
}
.fav-head {
  position: relative;
  width: 76px; height: 76px; border-radius: 50%; background: var(--team, #999) center/cover;
  border: 3px solid var(--ink); display: grid; place-items: center; overflow: hidden;
  font-family: "Archivo Black", sans-serif; color: #fff; font-size: 22px;
}
.fav-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fav-head.has-img { color: transparent; }
.fav-name { font-family: "Archivo Black", sans-serif; font-size: clamp(22px, 4vw, 34px); line-height: 1; }
.fav-team { font-family: "Permanent Marker", cursive; color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.fav-reason { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.fav-pct { text-align: right; line-height: 0.92; }
.fav-pct span { font-family: "Archivo Black", sans-serif; font-size: clamp(34px, 8vw, 58px); color: var(--accent); font-variant-numeric: tabular-nums; }
.fav-pct small { display: block; font-family: "Permanent Marker", cursive; font-size: 12px; color: var(--ink-soft); }

/* ---- ranked board ---- */
.pred-board { display: flex; flex-direction: column; gap: 7px; }

.prow {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  background: var(--paper-2); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 8px 14px 8px 10px; min-height: 50px;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.prow.out { opacity: 0.5; }
/* the team-coloured probability fill behind the row content */
.pbar-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: color-mix(in srgb, var(--team, #888) 30%, transparent);
  border-right: 3px solid var(--team, #888);
  transition: width 0.25s ease; z-index: 0; pointer-events: none;
}
.prow > * { position: relative; z-index: 1; }

.prank { font-family: "Archivo Black", sans-serif; font-size: 16px; width: 22px; text-align: center; color: var(--ink-soft); }
.ppos { font-family: "Archivo Black", sans-serif; font-size: 11px; background: var(--ink); color: var(--card); padding: 3px 6px; min-width: 30px; text-align: center; }
.phead {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%; background: var(--team, #999) center/cover; flex: none;
  border: 2px solid var(--ink); display: grid; place-items: center; overflow: hidden;
  font-family: "Archivo Black", sans-serif; color: #fff; font-size: 12px;
}
.phead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.phead.has-img { color: transparent; }
.pname { display: flex; flex-direction: column; min-width: 0; }
.pacr { font-family: "Archivo Black", sans-serif; font-size: 15px; line-height: 1; }
.pfull { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pmeta { display: flex; align-items: center; gap: 7px; margin-left: auto; flex: none; }
.tyre {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-family: "Archivo Black", sans-serif; font-size: 11px; color: #fff; border: 2px solid rgba(0,0,0,0.35);
}
.tyre small { font-weight: 700; }
.tyre-SOFT { background: #d32f2f; } .tyre-MEDIUM { background: #b58900; } .tyre-HARD { background: #555; }
.tyre-INTERMEDIATE { background: #2e7d32; } .tyre-WET { background: #1565c0; } .tyre-UNKNOWN { background: #888; }
.tyre-age { font-size: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 24px; }
.pgap { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; min-width: 56px; text-align: right; }
.ppit {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.4px;
  padding: 3px 6px; border: 1.5px solid var(--ink); white-space: nowrap;
}
.ppit.due { background: #f3c623; color: var(--ink); }
.ppit.due2 { background: #f57f17; color: #fff; }
.ppit.set { background: transparent; color: var(--ink-soft); border-color: transparent; }

.ppct { display: flex; align-items: baseline; gap: 4px; min-width: 78px; justify-content: flex-end; }
.ppct b { font-family: "Archivo Black", sans-serif; font-size: 19px; font-variant-numeric: tabular-nums; }
.pmom { font-size: 12px; width: 12px; }
.pmom.up { color: #2e9e44; } .pmom.down { color: #d32f2f; } .pmom.flat { color: var(--ink-soft); opacity: 0.5; }

.pred-note { font-size: 11px; color: var(--ink-soft); line-height: 1.5; margin: 22px 2px 0; max-width: 640px; }

/* ---- controls footer ---- */
#pred-controls {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px 14px; background: var(--ink); background-image: var(--grain);
  color: var(--card); z-index: 30; flex-wrap: wrap;
}
#pred-controls .btn, #pred-controls .group button {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 12px;
  background: var(--card); color: var(--ink); border: none; padding: 6px 10px; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
#pred-controls .btn.big { font-size: 15px; padding: 6px 14px; }
#pred-controls .group { display: flex; gap: 4px; }
#pred-controls .group button.on { background: var(--accent); color: #fff; }
#pred-controls .group button:active, #pred-controls .btn:active { transform: translate(2px, 2px); box-shadow: none; }
#pred-controls #scrubber { flex: 1; accent-color: var(--accent); height: 6px; cursor: pointer; min-width: 120px; }
#pred-controls .clock { color: var(--card); }
.race-select {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 12px;
  background: var(--card); color: var(--ink); border: none; padding: 6px 8px; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); max-width: 200px;
}
body.predict.live #pred-controls .group,
body.predict.live #pred-controls #scrubber,
body.predict.live #pred-controls #play-btn,
body.predict.live #pred-controls .race-select { display: none; }

@media (max-width: 720px) {
  .pfull { display: none; }
  .favorite { grid-template-columns: auto 1fr; }
  .fav-pct { grid-column: 1 / -1; text-align: left; }
  .pmeta { gap: 5px; }
  .pgap { min-width: 44px; }
}
/* very tight: keep the acronym + odds legible, shed the secondary columns */
@media (max-width: 560px) {
  .prow { gap: 8px; padding: 8px 9px; }
  .pname { flex: 0 0 auto; }       /* never let the acronym get squeezed */
  .tyre-age, .pgap { display: none; }
  .ppos { min-width: 26px; padding: 3px 4px; }
  .ppit { font-size: 9px; padding: 2px 4px; }
  .ppct { min-width: 54px; }
  .ppct b { font-size: 17px; }
}