/*
 * Grand Prix: shared tokens and components, in Buzzsprout's colors (from
 * the Buzzsprout repo's tailwind.config.js), styled like a modern racing
 * game's menus: calm frosted panels, thin numbers, bold italic titles, a
 * glow on the few things that matter right now, and slants only on small
 * accents (the phase tag, the main button, lane tags, the leader's bar).
 * phone.css, judge.css and screen.css build on these.
 */

:root {
  color-scheme: dark;

  --bg: #0E1714;
  --bg-deep: #0B1511;
  --surface: rgb(26 41 36 / 0.62);     /* frosted panels over the background */
  --surface-2: rgb(33 55 48 / 0.72);
  --surface-solid: #172420;            /* sheets and toasts that sit over content */
  --line: rgb(159 184 170 / 0.2);
  --hairline: rgb(159 184 170 / 0.13);
  --brand-dark: #214538;  /* dark-green 800, the wordmark green */
  --ink: #F4F6F5;         /* dark-green 100 */
  --muted: #9FB8AA;       /* dark-green 400 */
  --accent: #40D134;      /* the bolt */
  --accent-ink: #0B1511;
  --gold: #F4D05E;        /* yellow 400 */
  --silver: #C7C8CA;
  --bronze: #E6A704;
  --red: #DE6751;
  --red-soft: #F5B3A6;
  --green: #71E569;       /* green 500 */
  --green-soft: #DBF9D9;
  --blue: #6995FF;
  --blue-soft: #DAE5FF;

  --glow: 0 0 24px rgb(64 209 52 / 0.38);
  --glow-soft: 0 0 30px rgb(64 209 52 / 0.18);
  --glow-gold: 0 0 24px rgb(244 208 94 / 0.32);

  --font: "Saira", "Helvetica Neue", system-ui, sans-serif;
  --display: var(--font);
  --body: var(--font);
  --logo: "Barlow Condensed", "Arial Narrow", sans-serif;  /* the race logo's letters only */

  --radius: 18px;
  --radius-sm: 12px;
  --slant: -12deg;
}

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

html { -webkit-text-size-adjust: 100%; }

/* Hidden means hidden, even for elements styled with a display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: 0.005em;
}

p { margin: 0; }

a { color: var(--accent); }

code { font-size: 0.9em; color: var(--blue); word-break: break-all; }

.eyebrow {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.pill {
  display: inline-block;
  padding: 0.1em 0.65em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 0.75em;
  font-weight: 600;
  font-style: normal;
  color: var(--accent);
  white-space: nowrap;
  vertical-align: middle;
}

.stack > * + * { margin-top: 0.85rem; }

.split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* --- Slanted accents --------------------------------------------------------
 * A parallelogram drawn behind upright text, so the label stays readable and
 * the element keeps its box. Set --slant-fill and --slant-glow to recolor. */

.slanted, .button--go, .lane, .phase-tag { position: relative; isolation: isolate; }

.slanted::before, .button--go::before, .lane::before, .phase-tag::before {
  content: "";
  position: absolute;
  inset: 0 var(--slant-inset, 6px);
  z-index: -1;
  border-radius: var(--slant-radius, 6px);
  background: var(--slant-fill, var(--accent));
  box-shadow: var(--slant-glow, none);
  transform: skewX(var(--slant));
  transition: background 0.2s, box-shadow 0.2s;
}

.phase-tag {
  --slant-glow: var(--glow);
  --slant-inset: 0px;
  --slant-radius: 4px;
  display: inline-block;
  padding: 0.22em 1.05em;
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Brand ----------------------------------------------------------------- */

.lockup { display: inline-flex; align-items: center; gap: 0.55em; color: var(--ink); white-space: nowrap; }
.lockup__mark { width: 1.15em; height: auto; flex: none; }
.lockup__brand { font-weight: 300; font-size: 0.72em; letter-spacing: 0.3em; text-transform: uppercase; }
.lockup__race { font-weight: 800; font-style: italic; letter-spacing: 0.02em; text-transform: uppercase; }
.lockup--compact .lockup__brand { display: none; }

.race-logo { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.race-logo__words { font-family: var(--logo); font-weight: 900; font-style: italic; font-size: 250px; }

/* --- People: Basecamp photos, or initials for anyone without one ---------- */

.avatar {
  display: inline-block;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  background: var(--surface-2);
}

.avatar--initials { display: inline-grid; place-items: center; background: linear-gradient(145deg, var(--brand-dark), var(--surface-2)); }
.avatar--initials > span { font-size: 0.62em; font-weight: 600; font-style: normal; letter-spacing: 0.02em; color: var(--ink); }

/* A team's members overlap, each ringed in the background color. */
.faces { display: inline-flex; align-items: center; flex: none; }
.faces > .avatar { box-shadow: 0 0 0 0.09em var(--bg); }
.faces > .avatar + .avatar { margin-left: -0.45em; }

/* --- Team badge: faces + name, the unit every screen uses ------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  max-width: 100%;
}

.badge__faces { font-size: 0.95em; }

.badge__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge--large { font-size: 1.4em; }
.badge--large .badge__name { font-weight: 800; font-style: italic; }

/* --- Photos -------------------------------------------------------------- */

.photo-fallback {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 60%, rgb(64 209 52 / 0.12), transparent 65%),
    var(--bg-deep);
  border-radius: var(--radius);
  font-size: 4rem;
}

/* No car photo yet: the team's faces, centered whatever photo class it shares. */
.photo-fallback[class] { display: grid; place-items: center; }
img.photo { display: block; }

.faces--photo > .avatar { width: 1.25em; height: 1.25em; box-shadow: 0 0 0 0.05em var(--bg-deep), 0 0.08em 0.4em #0009; }
.faces--photo > .avatar + .avatar { margin-left: -0.3em; }

img.photo, .photo-fallback.photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* --- Countdown ----------------------------------------------------------- */

.countdown {
  position: relative;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.countdown__time { font-weight: 200; }
.countdown__note:empty { display: none; }

.countdown.is-paused .countdown__time { opacity: 0.55; }
.countdown.is-final-minute .countdown__time { color: var(--red); }
.countdown.is-expired .countdown__time { color: var(--red); font-weight: 800; font-style: italic; animation: blink 0.9s steps(2, start) infinite; }

/* The ring empties as the clock runs down; the numbers sit well inside it. */
.countdown--ring {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.35em;
  aspect-ratio: 1;
  text-align: center;
}

.countdown__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
  filter: drop-shadow(0 0 0.5em rgb(64 209 52 / 0.5));
}

.countdown__track, .countdown__progress { fill: none; stroke-width: var(--ring-width, 3); }
.countdown__track { stroke: rgb(159 184 170 / 0.16); }
.countdown__progress { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.25s linear, stroke 0.3s; }
.countdown.is-expired .countdown__progress { opacity: 0; }
.countdown.is-final-minute .countdown__progress { stroke: var(--red); }
.countdown.is-final-minute .countdown__ring, .countdown.is-expired .countdown__ring { filter: drop-shadow(0 0 0.5em rgb(222 103 81 / 0.5)); }
.countdown.is-paused .countdown__progress { stroke: var(--muted); }

.countdown__label {
  position: relative;
  font-weight: 500;
  font-size: 0.75em;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

.countdown--ring .countdown__time, .countdown--ring .countdown__note { position: relative; }

/* --- Tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 -0.25rem; }

.board {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.board th {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.7em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 0.3em 0.4em;
}

.board td {
  padding: 0.45em 0.4em;
  text-align: center;
  border-top: 1px solid var(--hairline);
  white-space: nowrap;
  font-weight: 300;
}

.board .board__team { text-align: left; max-width: 12em; overflow: hidden; font-weight: 500; }
.board__rank { color: var(--muted); width: 1.5em; }
.board td.board__rank { font-weight: 600; }
.board td.board__points { font-weight: 300; font-size: 1.25em; color: var(--accent); }
.board .is-penalty { color: var(--red); }
.board tr.is-mine td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.board tr.is-pending td { color: var(--muted); }
.board tr.is-hidden td { color: var(--muted); }

/* --- Leaders, podium, matchup ------------------------------------------- */

.leaders { display: grid; gap: 0.75rem; margin: 0; }
.leaders dt { font-weight: 800; font-style: italic; text-transform: uppercase; display: flex; gap: 0.5em; align-items: center; }
.leaders dd { margin: 0.15em 0 0; }

.podium__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.podium__list li { display: flex; align-items: center; gap: 0.5rem; }

/* Lane 1 is green and lane 2 gold everywhere, so a car's lane reads at a glance. */
.lane {
  --slant-inset: 0px;
  --slant-radius: 3px;
  display: inline-block;
  padding: 0.12em 0.75em;
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lane--2 { --slant-fill: var(--gold); }

.matchup__lanes { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; }
.matchup__lane { flex: 1; display: grid; gap: 0.35rem; min-width: 0; justify-items: start; }
.matchup__vs { font-family: var(--display); font-weight: 200; color: var(--muted); }

/* --- Flash ---------------------------------------------------------------- */

.flash {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.flash--notice { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 33%, transparent); }
.flash--alert { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 33%, transparent); }

@keyframes blink { to { visibility: hidden; } }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(1.2em) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition: none !important;
  }
}