/*
 * The projector. Sized in vw/vh so it fills any 16:9 display without
 * scrolling, and readable from the back of the room. Calm frosted panels
 * most of the time; the big moments (a race being called, the awards) get
 * the glow and the motion.
 */

body.screen {
  font-size: 1.15vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgb(64 209 52 / 0.08), transparent 70%),
    repeating-linear-gradient(90deg, rgb(244 246 245 / 0.025) 0 1px, transparent 1px 7.5vw),
    var(--bg);
}

.screen__fullscreen.is-idle { opacity: 0; pointer-events: none; }

.screen__fullscreen {
  transition: opacity 0.6s;
  position: fixed;
  right: 1vw;
  bottom: 1vw;
  z-index: 50;
  padding: 0.5em 1em;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--muted);
  font: inherit;
  font-size: 0.8vw;
  cursor: pointer;
}

.stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  padding: 0 2.6vw 2vw;
}

.stage__header {
  display: flex;
  align-items: center;
  gap: 1.6vw;
  padding: 1.7vw 0 1.3vw;
}

.stage__brand { min-height: 2.6vw; margin-right: auto; display: flex; align-items: center; }
.stage__logo { font-size: 1.75vw; }
.stage__phase { font-size: 1.3vw; }

.countdown--header .countdown__time { font-size: 2.5vw; }
.countdown--header .countdown__note { display: none; }
.countdown--header.is-paused .countdown__note { display: block; font-size: 0.85vw; text-align: right; color: var(--muted); }

.stage__body { min-height: 0; display: grid; }

.screen .eyebrow { font-size: 1vw; }
.mega { font-family: var(--display); font-size: 9vw; font-weight: 800; font-style: italic; line-height: 0.95; text-transform: uppercase; text-shadow: 0 0 0.3em rgb(64 209 52 / 0.3); }
.title { font-size: 4vw; text-transform: uppercase; }
.lead { font-size: 1.7vw; font-weight: 300; color: var(--muted); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.6vw;
  padding: 1.6vw;
}

.panel h2 { font-size: 1.8vw; margin-bottom: 0.8vw; text-transform: uppercase; }

.screen .pill { font-size: 0.7em; }

/* --- Welcome --------------------------------------------------------------- */

.welcome { display: grid; grid-template-rows: auto 1fr; gap: 1.6vw; }
.welcome__title { display: grid; justify-items: center; gap: 0.6vw; text-align: center; }
.welcome__logo { width: 40vw; }
.welcome__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6vw; align-items: start; }

.schedule { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45vw; font-size: 1.45vw; }
.schedule li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--hairline); padding-bottom: 0.45vw; }
.schedule li span:last-child { color: var(--muted); font-weight: 300; font-variant-numeric: tabular-nums; }

.points-table { width: 100%; border-collapse: collapse; font-size: 1.45vw; }
.points-table td { padding: 0.45vw 0; border-bottom: 1px solid var(--hairline); }
.points-table td:last-child { text-align: right; font-weight: 300; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }

.screen .rules { font-size: 1.45vw; gap: 0.5vw; padding-left: 1.4vw; }

/* --- Registration ---------------------------------------------------------- */

.register { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4vw; align-items: center; padding: 0 1vw; }
.register__main { display: grid; gap: 2.4vw; }
.register__logo { width: 100%; }
.register__count { display: grid; gap: 1vw; }
.register__tally { font-family: var(--display); font-weight: 200; font-size: 8vw; line-height: 0.9; font-variant-numeric: tabular-nums; }
.register__n { color: var(--accent); text-shadow: 0 0 0.3em rgb(64 209 52 / 0.35); }
.register__label { display: block; font-family: var(--body); font-weight: 500; font-size: 1.3vw; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-top: 0.8vw; }

.register__qr {
  display: grid;
  justify-items: center;
  gap: 1vw;
  padding: 2vw;
  border-radius: 1.8vw;
  background: var(--surface);
  border: 1px solid var(--line);
}

.qr { width: 26vw; max-width: 52vh; aspect-ratio: 1; padding: 1.2vw; background: #fff; border-radius: 1.2vw; }
.qr svg { display: block; width: 100%; height: 100%; }
.register__url { font-family: var(--display); font-size: 2.2vw; font-weight: 300; }
.register__url strong { color: var(--accent); font-weight: 800; font-style: italic; letter-spacing: 0.06em; }
.register__code { font-size: 1.5vw; color: var(--muted); }
.register__code strong { font-family: var(--display); font-size: 2.6vw; color: var(--accent); letter-spacing: 0.15em; margin-left: 0.3em; }

/* The starting grid: an empty spot per driver, filled with their face as they join. */
.grid-slots { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.9vw; max-width: 44vw; margin-top: 0.6vw; }
.grid-slots__slot { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgb(159 184 170 / 0.3); }
.grid-slots__slot.is-filled { border: 2px solid var(--accent); box-shadow: 0 0 1vw rgb(64 209 52 / 0.45); font-size: 1.5vw; animation: slot-in 0.5s ease-out both; }

@keyframes slot-in { from { opacity: 0; transform: scale(0.6); } }

/* --- Team reveal ----------------------------------------------------------- */

.reveal-countdown { display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.5vw; }
.moment--screen { font-size: 24vw; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1.2vw; }

.team-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.2vw;
  align-content: center;
  padding: 1.2vw 1.6vw;
  border-radius: 1.6vw;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  animation: flip-in 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
  animation-delay: calc(var(--reveal-index) * 0.45s);
}

.team-card__number {
  position: absolute;
  right: 1.2vw;
  top: 0.2vw;
  font-family: var(--display);
  font-size: 5vw;
  font-weight: 200;
  color: rgb(244 246 245 / 0.07);
}

.team-card__faces { grid-row: span 2; align-self: center; font-size: 2.7vw; }
.team-card__name { font-size: 2.3vw; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-card__name.is-unnamed { color: var(--muted); font-weight: 300; }
.team-card__members { font-size: 1.4vw; color: var(--accent); font-weight: 500; }

@keyframes flip-in {
  from { opacity: 0; transform: perspective(60vw) rotateX(-75deg) translateY(2vw); }
  to { opacity: 1; transform: none; }
}

/* --- Build: the ringed clock and Early Bird beside the standings ----------- */

.build { display: grid; grid-template-columns: 29vw minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1.2vw 1.6vw; min-height: 0; }

.build__clock { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 1.2vw; min-height: 0; padding: 1.6vw 2vw; }

.countdown--hero { width: min(19vw, 36vh); --ring-width: 2.4; }
.countdown--hero .countdown__label { font-size: 0.8vw; }
.countdown--hero .countdown__time { font-size: min(3.9vw, 7.4vh); }
.countdown--hero.is-expired .countdown__time { font-size: min(2.2vw, 4.2vh); }
.countdown--hero .countdown__note { display: none; }
.countdown--hero.is-paused .countdown__note { display: block; font-size: 0.9vw; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* The 15/5/1-minute warnings take over the whole screen for a few seconds. */
.countdown--hero[data-warning] .countdown__note {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  font-size: 8vw;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 0.3em rgb(64 209 52 / 0.4);
  animation: rise-in 0.4s ease-out;
}

.early-birds { align-self: stretch; }
.early-birds h2 { font-size: 1.45vw; margin-bottom: 0.3vw; }
.early-birds__list { list-style: none; margin: 0; padding: 0; }
.early-birds__place { display: grid; grid-template-columns: 3vw minmax(0, 1fr) auto; align-items: baseline; gap: 1vw; padding: 0.65vw 0; border-top: 1px solid var(--hairline); font-size: 1.35vw; }
.early-birds__rank { font-size: 0.9vw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.early-birds__place--2 .early-birds__rank { color: var(--silver); }
.early-birds__place--3 .early-birds__rank { color: var(--bronze); }
.early-birds__team { min-width: 0; overflow: hidden; }
.early-birds__place.is-open .early-birds__team { color: var(--muted); font-weight: 300; }
.early-birds__bonus { font-weight: 300; font-size: 1.5vw; }
.early-birds__place.is-open .early-birds__bonus { color: var(--muted); }

.build__board { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding: 1.3vw 2.2vw 0.8vw; }
.build__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.5vw; }
.build__head h2 { margin: 0; font-size: 1.9vw; }
.build__head .eyebrow { font-size: 0.8vw; }

.build-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: minmax(0, 1fr); min-height: 0; }

.build-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 3.6vw minmax(0, 1fr) 7vw 5.5vw;
  align-items: center;
  min-height: 0;
  border-top: 1px solid var(--hairline);
  font-size: 1.7vw;
}

.build-row:first-child { border-top-color: transparent; }
.build-row__rank { width: 2.1vw; height: 2.1vw; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(159 184 170 / 0.5); font-size: 0.95vw; font-weight: 600; }
.build-row__team { min-width: 0; }
.build-row__team .badge__name { font-weight: 500; }
.build-row__tests { text-align: right; font-weight: 300; font-size: 1.45vw; color: var(--muted); font-variant-numeric: tabular-nums; }
.build-row__tests small { font-size: 0.7em; }
.build-row__points { text-align: right; font-weight: 300; font-size: 2.2vw; font-variant-numeric: tabular-nums; }
.build-row__tests.is-penalty, .build-row__points.is-penalty { color: var(--red); }

/* The leader rides a slanted, glowing bar. */
.build-row.is-leader::before {
  content: "";
  position: absolute;
  inset: 0.3vw -0.9vw;
  z-index: -1;
  border-radius: 0.5vw;
  border: 1.5px solid var(--accent);
  background: rgb(64 209 52 / 0.14);
  box-shadow: var(--glow);
  transform: skewX(var(--slant));
}

.build-row.is-leader, .build-row.is-leader + .build-row { border-top-color: transparent; }
.build-row.is-leader .build-row__rank { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.build-row.is-leader .badge__name { font-weight: 700; font-style: italic; }
.build-row.is-leader .build-row__points { color: var(--accent); }

.build__rules { grid-column: 1 / -1; text-align: center; font-size: 1vw; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.screen .board { font-size: 1.75vw; }
.screen .board th { font-size: 0.85vw; }
.screen .board td { padding: 0.45vw 0.8vw; line-height: 1.2; }
.screen .board .board__team { max-width: 30vw; }

/* --- Check-in ---------------------------------------------------------------- */

.checkin { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2vw; align-items: start; }
.checkin__table { padding: 1.3vw 1.8vw; }
.checkin__table .eyebrow { margin-bottom: 0.6vw; }
.screen .leaders { gap: 2vw; font-size: 2.1vw; }
.screen .leaders dd { font-weight: 300; }
.checkin__leaders h2 { font-size: 2.2vw; }
.checkin__thumb img { display: block; width: 4.5vw; height: 3.4vw; object-fit: cover; border-radius: 0.5vw; margin: 0 auto; }

/* --- Voting ------------------------------------------------------------------ */

.voting { display: grid; grid-template-columns: 24vw 1fr; gap: 2vw; min-height: 0; }
.voting__head { display: grid; align-content: center; gap: 1.5vw; }
.ballots { font-family: var(--display); font-size: 1.3vw; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.ballots strong { display: block; font-size: 6vw; font-weight: 200; line-height: 1; letter-spacing: 0; color: var(--accent); text-shadow: 0 0 0.3em rgb(64 209 52 / 0.3); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 1vw; min-height: 0; }
.gallery__item { margin: 0; position: relative; min-height: 0; border-radius: 1.2vw; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.gallery__photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; aspect-ratio: auto; font-size: 6vw; }
.gallery__item figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2vw 1vw 0.7vw;
  background: linear-gradient(transparent, #000c);
  font-size: 1.5vw;
}

/* --- Racing ------------------------------------------------------------------ */

.racing { display: grid; grid-template-columns: 23vw 1fr; gap: 1.4vw; min-height: 0; }
.racing__side { display: grid; align-content: start; gap: 1.2vw; }

.now-racing {
  display: grid;
  gap: 1vw;
  padding: 1.3vw;
  border-radius: 1.6vw;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--glow-soft);
}

.now-racing > .eyebrow { color: var(--accent); }
.now-racing__lane { display: grid; grid-template-columns: 8.4vw minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.9vw; row-gap: 0.45vw; align-items: center; }
.now-racing__photo { grid-row: span 2; width: 8.4vw; height: 6.3vw; object-fit: cover; border-radius: 0.8vw; border: 1.5px solid var(--accent); font-size: 3.2vw; aspect-ratio: auto; }
.now-racing__lane--2 .now-racing__photo { border-color: var(--gold); }
.now-racing__lane .lane { justify-self: start; align-self: end; font-size: 0.8vw; }
.now-racing__name { align-self: start; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.8vw; line-height: 1.05; overflow-wrap: anywhere; }
.rerun { font-family: var(--display); font-size: 1.8vw; font-weight: 800; font-style: italic; color: var(--red); text-transform: uppercase; animation: blink 1s steps(2, start) 6; }

.on-deck { padding: 1vw 1.4vw; border-radius: 1.2vw; background: var(--surface); border: 1px solid var(--line); font-size: 1.35vw; }
.on-deck .eyebrow { color: var(--gold); font-size: 0.85vw; margin-bottom: 0.2vw; }

.champion-banner { display: grid; justify-items: center; gap: 0.8vw; text-align: center; padding: 1.5vw; border-radius: 1.6vw; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent), var(--surface)); border: 1px solid var(--accent); box-shadow: var(--glow); animation: rise-in 0.6s ease-out both; }
.champion-banner h2 { font-size: 2.8vw; }
.champion-banner__photo { width: 100%; border-radius: 1vw; aspect-ratio: 4 / 3; object-fit: cover; font-size: 6vw; }

.screen .podium { font-size: 1.45vw; }
.screen .card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.4vw; padding: 1.2vw; }
.screen .card h3 { font-size: 1.4vw; text-transform: uppercase; }

.racing__bracket { min-height: 0; }

.bracket { display: grid; grid-template-rows: auto auto; gap: 1.2vw; font-size: 1.2vw; }
.bracket__side h3 { font-size: 1.25vw; text-transform: uppercase; margin-bottom: 0.5vw; }
.bracket__rounds { display: flex; gap: 0.6vw; }
.bracket__round { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto 1fr; gap: 0.4vw; }
.bracket__round-title { font-size: 0.8vw; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bracket__matches { display: flex; flex-direction: column; justify-content: space-around; gap: 0.5vw; }
.bracket__round--final { flex: 1.1 1 0; }

.match {
  position: relative;
  display: grid;
  gap: 0.15vw;
  padding: 0.35vw 0.6vw 0.45vw;
  border-radius: 0.7vw;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.match.is-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0 0 1.4vw rgb(64 209 52 / 0.4); }
.match__title { font-size: 0.78vw; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.match.is-current .match__title { color: var(--accent); }
.match__slot { display: flex; justify-content: space-between; align-items: center; gap: 0.4vw; font-weight: 500; min-width: 0; }
.match__team { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; overflow-wrap: anywhere; }
.match__slot.is-tbd { color: var(--muted); font-weight: 300; font-style: italic; }
.match__slot.is-winner { color: var(--green); font-weight: 700; }
.match__slot.is-loser { color: var(--muted); font-weight: 300; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 60%, transparent); }

/* --- The burst: a new race takes over the screen for a few seconds ---------- */

.burst { display: none; }

/* A column whose cars take whatever height the optional lines leave. */
.burst.is-bursting {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.6vw 4vw 2.4vw;
  background:
    radial-gradient(ellipse 60% 55% at 50% 58%, rgb(64 209 52 / 0.16), transparent 70%),
    repeating-linear-gradient(90deg, rgb(244 246 245 / 0.025) 0 1px, transparent 1px 7.5vw),
    var(--bg);
  animation: burst-in 0.5s ease-out both, burst-out 0.6s ease-in 6.4s forwards;
}

.burst__eyebrow { font-size: 1.2vw; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent); }
.burst__title { font-size: 7vw; font-weight: 800; font-style: italic; line-height: 1; text-transform: uppercase; text-shadow: 0 0 0.4em rgb(64 209 52 / 0.35); }
.burst__round { margin-top: 0.4vw; font-size: 1.1vw; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }

.burst__cars { flex: 1; align-self: stretch; width: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 7vw minmax(0, 1fr); align-items: center; margin-top: 2vw; }

.burst__car {
  margin: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 1.8vw;
  border: 2px solid var(--accent);
  background: var(--surface);
  box-shadow: 0 0 3vw rgb(64 209 52 / 0.3);
  animation: car-in-left 0.6s 0.15s ease-out both;
}

.burst__car--2 { border-color: var(--gold); box-shadow: 0 0 3vw rgb(244 208 94 / 0.24); animation-name: car-in-right; }
.burst__photo { position: relative; min-height: 0; }
.burst__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; font-size: 9vw; }
.burst__photo .lane { position: absolute; left: 1.4vw; top: 1.2vw; font-size: 1.1vw; }
.burst__car figcaption { padding: 0.9vw 1.8vw 1.1vw; font-size: 2.5vw; font-weight: 800; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.burst__vs { justify-self: center; width: 5.4vw; height: 5.4vw; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgb(159 184 170 / 0.4); background: var(--bg); font-size: 1.9vw; font-weight: 200; letter-spacing: 0.06em; }

/* The grand final's stakes, in gold so they read as the rule of the moment. */
.stakes { display: grid; gap: 0.35em; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.stakes__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; line-height: 1.25; }
.stakes__line strong { color: var(--gold); font-weight: 800; font-style: italic; }
.stakes .badge__name { font-weight: 700; }
.stakes--panel { padding: 0.8vw 1vw; border-radius: 1vw; font-size: 1.3vw; }
.stakes--burst { margin-top: 1.2vw; padding: 0.9vw 2.4vw; border-radius: 1.2vw; font-size: 2vw; justify-items: center; }

.burst__deck { margin-top: 1.6vw; padding: 0.9vw 2vw; border-radius: 1.2vw; background: var(--surface); border: 1px solid var(--line); font-size: 1.5vw; }
.burst__deck span { margin-right: 1.2vw; font-size: 0.95vw; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.burst__deck em { font-style: normal; font-weight: 200; color: var(--muted); }

@keyframes burst-in { from { opacity: 0; transform: scale(1.04); } }
@keyframes burst-out { to { opacity: 0; visibility: hidden; } }
@keyframes car-in-left { from { opacity: 0; transform: translateX(-6vw); } }
@keyframes car-in-right { from { opacity: 0; transform: translateX(6vw); } }

/* --- Awards ------------------------------------------------------------------ */

.awards { display: grid; align-content: center; justify-items: center; gap: 2vw; text-align: center; min-height: 0; }
.awards .title { text-shadow: 0 0 0.3em rgb(64 209 52 / 0.25); }
.awards--intro .mega { font-size: 10vw; line-height: 0.9; }
.awards__logo { width: 46vw; }
.awards__facts { display: flex; gap: 5vw; margin-top: 1vw; }
.awards__facts div { display: grid; }
.awards__facts strong { font-family: var(--display); font-size: 5vw; font-weight: 200; line-height: 1; }
.awards__facts span { color: var(--muted); font-size: 1.1vw; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; }

.podium-stage { display: grid; grid-template-columns: repeat(3, 20vw); gap: 2vw; align-items: end; }
.podium-stage__spot { margin: 0; display: grid; gap: 1vw; justify-items: center; animation: rise-in 0.8s ease-out both; }
.podium-stage__spot--3 { animation-delay: 0.3s; }
.podium-stage__spot--2 { animation-delay: 0.9s; }
.podium-stage__spot--1 { animation-delay: 1.6s; }
.podium-stage__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.2vw; font-size: 7vw; }
.podium-stage__spot--1 .podium-stage__photo { box-shadow: 0 0 3vw rgb(64 209 52 / 0.35); }

.podium-stage__step {
  --medal: var(--gold);
  width: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.4vw;
  line-height: 1;
  font-family: var(--display);
  font-size: 4vw;
  font-weight: 800;
  font-style: italic;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--medal) 16%, transparent), var(--surface));
  border: 1px solid var(--line);
  border-top: 0.35vw solid var(--medal);
  border-radius: 1.2vw 1.2vw 0 0;
  box-shadow: 0 -1vw 2.4vw -1.2vw var(--medal);
}

.podium-stage__spot--2 .podium-stage__step { --medal: var(--silver); }
.podium-stage__spot--3 .podium-stage__step { --medal: var(--bronze); }
.podium-stage__step span { font-size: 1.8vw; font-weight: 300; font-style: normal; color: var(--accent); }
.podium-stage__spot--1 .podium-stage__step { height: 22vh; }
.podium-stage__spot--2 .podium-stage__step { height: 16vh; }
.podium-stage__spot--3 .podium-stage__step { height: 12vh; }

.bonus-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; width: 100%; }
.bonus-card { text-align: left; padding: 2vw; animation: rise-in 0.6s ease-out both; }
.bonus-card:nth-child(2) { animation-delay: 0.5s; }
.bonus-card:nth-child(3) { animation-delay: 1s; }
.bonus-card h2 { font-size: 2.4vw; }
.bonus-card__line { font-size: 2.1vw; font-weight: 600; margin-top: 0.9vw; }
.bonus-card__line .muted { font-weight: 300; }

.awards--choice { grid-template-columns: 1.1fr 1fr; text-align: left; align-items: center; gap: 4vw; width: 100%; min-height: 0; }
.awards--choice > * { justify-self: stretch; }
.choice-winner { display: grid; gap: 1vw; animation: rise-in 0.8s ease-out both; }
.choice-winner__photos { display: grid; grid-template-columns: repeat(var(--winners), 1fr); gap: 1.2vw; }
.choice-winner__team { margin: 0; display: grid; gap: 0.6vw; min-width: 0; }
/* Names shrink as a tie adds photos, so they never run into each other. */
.choice-winner__team figcaption { font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(1.3vw, calc(5.2vw / var(--winners)), 2.6vw); line-height: 1.05; overflow-wrap: anywhere; }
.choice-winner__photo { width: 100%; max-height: 48vh; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.4vw; font-size: 8vw; box-shadow: 0 0 3vw rgb(64 209 52 / 0.3); }
.vote-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8vw; font-size: 1.5vw; }
.vote-bars__row { display: grid; grid-template-columns: 14vw 1fr 3vw; align-items: center; gap: 1vw; }
.vote-bars__team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.vote-bars__bar { display: block; height: 1.4vw; border-radius: 0.7vw; background: var(--accent); box-shadow: 0 0 1vw rgb(64 209 52 / 0.4); width: var(--share); min-width: 0.3vw; animation: grow 1.2s ease-out both; transform-origin: left; }
.vote-bars__n { font-family: var(--display); font-weight: 300; font-size: 2vw; text-align: right; font-variant-numeric: tabular-nums; }

@keyframes grow { from { transform: scaleX(0); } }

.awards--standings .board, .awards--champion .board { width: min(80vw, 100%); }
.awards--standings .board tbody tr { animation: rise-in 0.6s ease-out both; animation-delay: calc(var(--reveal-index) * 0.6s); }
.awards--champion .board { font-size: 1.1vw; }
.awards--champion .board td { padding: 0.25vw 0.6vw; }

.champion { display: flex; gap: 3vw; justify-content: center; }
.champion__team { margin: 0; display: grid; grid-template-columns: 22vw auto; gap: 2vw; align-items: center; text-align: left; animation: rise-in 1s ease-out both; }
.champion__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.4vw; font-size: 9vw; border: 2px solid var(--accent); box-shadow: 0 0 4vw rgb(64 209 52 / 0.4); }
.champion__team figcaption { display: grid; gap: 0.5vw; }
.champion__name { font-family: var(--display); font-size: 5vw; font-weight: 800; font-style: italic; line-height: 1; color: var(--accent); text-shadow: 0 0 0.3em rgb(64 209 52 / 0.4); }
.champion__members { font-size: 2vw; font-weight: 600; }
.champion__points { font-size: 1.6vw; font-weight: 300; color: var(--muted); }

.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.confetti i {
  position: absolute;
  top: -3vh;
  left: calc(var(--i) * 2.5%);
  width: 0.7vw;
  height: 1.3vw;
  background: var(--accent);
  animation: fall 4.5s linear infinite;
  animation-delay: calc(var(--i) * -0.29s);
}
.confetti i:nth-child(3n) { background: var(--gold); animation-duration: 5.5s; }
.confetti i:nth-child(3n + 1) { background: var(--ink); animation-duration: 3.8s; }
.confetti i:nth-child(4n) { background: var(--blue); }

@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  /* Still shown, just without the timed fade (which would end it at once). */
  .burst.is-bursting { animation: none !important; }
}