/* =====================================================================
   Circuits: a complete show made of several rounds.

   One device carries the identity: the route (.cx-route), the numbered
   stations of the circuit. It appears on the catalogue card, in the lobby,
   in the opening, between rounds (the current station lit) and in the
   final, so players always know where the show is.

   Colour is functional, from tokens.css:
     --spot    circuit points, the circuit's own name, the winner
     --signal  where the show is now (the current station, progress)
     player    each contestant's colour on their name (.cx-who)
   A round's own points stay neutral: never confused with circuit points.
   ===================================================================== */

/* --- Names in their player colour ------------------------------------ */
.cx-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; color: var(--text-1); }
.cx-who::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--pc, var(--text-3)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, transparent) 22%, transparent); }
.cx-muted { color: var(--text-3); font-weight: 500; }

/* --- Circuit points: the amber badge (always with its unit) ----------- */
.cx-pts {
  display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--spot-soft); border: 1px solid var(--spot-line); color: var(--spot-strong);
  font-size: var(--fs-2xs); font-weight: 600;
}
.cx-pts strong { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--spot); font-variant-numeric: tabular-nums; }

/* --- The route ---------------------------------------------------------- */
.cx-route {
  --stop: 44px;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
  counter-reset: none;
}
.cx-stop { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
/* The line between stations: drawn from the previous station's centre. */
.cx-stop + .cx-stop::before {
  content: ""; position: absolute; top: calc(var(--stop) / 2 - 1px); right: calc(50% + var(--stop) / 2 + 4px); left: calc(-50% + var(--stop) / 2 + 4px);
  height: 2px; border-radius: 2px; background: var(--line-2);
}
.cx-stop.is-done + .cx-stop::before, .cx-stop.is-done + .cx-stop.is-current::before { background: var(--spot-line); }
.cx-stop-mark {
  position: relative; display: grid; place-items: center; width: var(--stop); height: var(--stop); border-radius: 50%;
  background: var(--ink-3); border: 1px solid var(--line-2); color: var(--text-2);
}
.cx-stop-mark i { font-size: calc(var(--stop) * .45); }
.cx-stop-num {
  position: absolute; top: -5px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--ink-1); border: 1px solid var(--line-3);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums;
}
.cx-stop-text { display: grid; gap: 1px; min-width: 0; max-width: 100%; }
.cx-stop-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.05; color: var(--text-1); overflow-wrap: anywhere; }
.cx-stop-sub { font-size: var(--fs-2xs); color: var(--text-3); overflow-wrap: anywhere; }
.cx-stop.is-done .cx-stop-mark { background: var(--spot-soft); border-color: var(--spot-line); color: var(--spot); }
.cx-stop.is-current .cx-stop-mark { background: var(--signal-soft); border-color: var(--signal); color: var(--signal-strong); box-shadow: var(--glow-signal); }
.cx-stop.is-current .cx-stop-num { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.cx-stop.is-next .cx-stop-name { color: var(--text-2); }
.cx-route--compact { --stop: 34px; }
.cx-route--compact .cx-stop-name { font-size: var(--fs-sm); }
/* Many rounds or a narrow column: the stations wrap instead of shrinking. */
@container (max-width: 360px) { .cx-route { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; } }
@media (max-width: 420px) {
  .cx-route { --stop: 36px; }
  .cx-route .cx-stop-sub { display: none; }
}

/* --- Circuit points by position ---------------------------------------- */
.cx-scale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cx-scale li {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .03); border: 1px solid var(--line-1); font-size: var(--fs-xs); color: var(--text-3);
}
.cx-scale strong { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--spot); font-variant-numeric: tabular-nums; }
.cx-scale li:first-child { border-color: var(--spot-line); }

.cx-h { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text-1); letter-spacing: .01em; }
.cx-note { margin: 8px 0 0; font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-3); max-width: 62ch; }

/* --- Home entrance ------------------------------------------------------ */
.gs-cta--circuit { border-color: var(--spot-line); }
.gs-cta--circuit > i { color: var(--spot); }
@media (hover: hover) { .gs-cta--circuit:hover { border-color: var(--spot); } }

/* --- Catalogue (full screen) ------------------------------------------- */
#modalCircuits { align-items: stretch; justify-content: stretch; padding: 0; background: rgb(3 5 10 / .9); overflow: hidden; }
.cx-catalog-intro {
  width: 100%; max-width: 880px; margin: 0 auto; padding: 14px max(16px, var(--safe-r)) 4px max(16px, var(--safe-l));
  font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-body);
}
.cx-catalog-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); align-content: start; gap: 14px;
  width: 100%; max-width: 880px; margin: 0 auto;
  padding: 10px max(16px, var(--safe-r)) calc(20px + var(--safe-b)) max(16px, var(--safe-l));
}
.cx-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding: 40px 16px; text-align: center; color: var(--text-2); }
.cx-empty p { margin: 0; }

.cx-card {
  position: relative; display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg);
  background: var(--surface-raised); border: 1px solid var(--line-2); box-shadow: var(--edge-highlight), var(--shadow-2);
  container-type: inline-size;
}
/* The card's top edge carries the show's light. */
.cx-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; background: var(--spot); }
.cx-card-head { display: flex; align-items: center; gap: 12px; }
.cx-card-icon { font-size: 30px; color: var(--spot); }
.cx-card-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.cx-card-desc { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2); max-width: 60ch; }
.cx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); color: var(--text-1); font-weight: 600; }
.cx-facts li { display: inline-flex; align-items: center; gap: 6px; }
.cx-facts i { color: var(--text-3); }
.cx-card-cta { justify-self: start; }

/* --- Lobby panel ------------------------------------------------------- */
.mc-setup--circuit .mc-estimate { margin-top: 4px; }
.cx-lobby { display: grid; gap: 18px; container-type: inline-size; }
.cx-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-choice {
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface-control);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
}
.cx-choice.active { border-color: var(--spot); color: var(--spot-strong); background: var(--spot-soft); }
.cx-lobby-head { display: flex; gap: 12px; align-items: flex-start; }
.cx-lobby-head > i { font-size: 28px; color: var(--spot); margin-top: 2px; }
.cx-lobby-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; text-transform: uppercase; }
.cx-lobby-desc { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-body); }
.cx-admission { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--line-1); }
.cx-seats { grid-row: span 2; display: grid; grid-template-columns: repeat(3, 14px); gap: 5px; }
.cx-seat { width: 14px; height: 14px; border-radius: 4px; border: 1px dashed var(--line-3); }
.cx-seat.is-needed { border-style: solid; }
.cx-seat.is-taken { border: 0; background: var(--signal); box-shadow: 0 0 8px rgb(57 207 238 / .35); }
.cx-admission-count { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.cx-admission-count strong { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--text-1); line-height: 1; }
.cx-admission-count span { color: var(--text-3); }
.cx-admission-status { margin: 0; font-size: var(--fs-sm); color: var(--warning); }
.cx-admission-status.is-ready { color: var(--success); }
.chip--circuit { color: var(--spot-strong); border-color: var(--spot-line); background: var(--spot-soft); }

/* --- Stage interstitials (opening, results, next round) ----------------- */
.mc-intro--circuit { place-items: center; }
.cx-intro-card {
  position: relative; width: min(1040px, 100%); padding: clamp(18px, 3vw, 34px); border-radius: var(--r-lg);
  background: var(--surface-raised); border: 1px solid var(--line-2); box-shadow: var(--edge-highlight), var(--shadow-3);
  container-type: inline-size;
}
.cx-intro-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: var(--spot); }
.cx-intro-card--intro, .cx-intro-card--opening { width: min(820px, 100%); }
.cx-stage { display: grid; gap: clamp(12px, 2vw, 20px); }
.cx-kicker { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: .02em; color: var(--spot); }
/* The title is the broadcast caption: big, condensed, set tight. */
.cx-title {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5.2rem); line-height: .9; letter-spacing: -.005em; text-wrap: balance;
}
.cx-title--round { display: flex; align-items: center; gap: .25em; font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem); }
.cx-title--round i { font-size: .8em; color: var(--text-2); }
.cx-lede { margin: 0; max-width: 60ch; font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-2); }
.cx-cast { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cx-cast li { padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / .04); border: 1px solid var(--line-1); }
.cx-opening-foot, .cx-results-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.cx-results-foot .cx-route { flex: 1 1 320px; }
.cx-next-line { margin: 0; font-size: var(--fs-md); color: var(--text-2); }
.cx-next-line strong { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-1); text-transform: uppercase; }
.cx-countdown { margin: 0 0 0 auto; display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.cx-countdown strong { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: .9; color: var(--text-1); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

/* Results between rounds */
.cx-winner { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-lg); color: var(--text-2); }
.cx-winner > i { color: var(--spot); font-size: 1.3em; }
.cx-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
@container (max-width: 680px) { .cx-columns { grid-template-columns: minmax(0, 1fr); } }
.cx-panel { padding: 14px; border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--line-1); min-width: 0; }
.cx-panel--general { border-color: var(--spot-line); }
.cx-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.cx-table th { padding: 4px 6px 8px; text-align: left; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-3); }
.cx-table td { padding: 7px 6px; border-top: 1px solid var(--line-1); vertical-align: middle; }
.cx-table tr.is-me td { background: rgb(255 255 255 / .05); }
.cx-rank { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.cx-num { color: var(--text-2); font-weight: 600; }
.cx-standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cx-row { display: grid; grid-template-columns: 2.6ch minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); }
.cx-row.is-me { background: rgb(255 255 255 / .05); }
.cx-row.is-out { opacity: .6; }
.cx-row:first-child .cx-rank { color: var(--spot); }
.cx-total { display: inline-flex; align-items: baseline; gap: 4px; justify-self: end; color: var(--text-3); font-size: var(--fs-2xs); }
.cx-total strong { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--spot); }
.cx-move { display: inline-flex; align-items: center; gap: 1px; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-move.is-up { color: var(--success); }
.cx-move.is-down { color: var(--danger-strong); }
.cx-move.is-same { color: var(--text-3); }

/* The next round */
.cx-next { justify-items: start; }
.cx-next-mark {
  position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: var(--signal-soft); border: 2px solid var(--signal); box-shadow: var(--glow-signal); color: var(--signal-strong);
}
.cx-next-mark i { font-size: 46px; }
.cx-next-mark span {
  position: absolute; top: -4px; right: -10px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--signal); color: var(--signal-ink);
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700;
}
.cx-next-mech { margin: -6px 0 0; font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-2); }
.cx-next .cx-route { width: 100%; }
.cx-next .cx-countdown { margin-left: 0; }

/* One orchestrated moment: the station of the round that comes lights up. */
@media (prefers-reduced-motion: no-preference) {
  .mc-intro--circuit:not(.hidden) .cx-intro-card { animation: modalIn var(--dur-slow) var(--ease-out); }
  .cx-intro-card--intro .cx-next-mark { animation: cxLight 900ms var(--ease-out) both; }
  .cx-intro-card--intro .cx-stop.is-current .cx-stop-mark { animation: cxLight 900ms 200ms var(--ease-out) both; }
}
@keyframes cxLight {
  0% { transform: scale(.82); box-shadow: 0 0 0 0 rgb(57 207 238 / 0); opacity: .4; }
  60% { transform: scale(1.06); box-shadow: 0 0 0 10px rgb(57 207 238 / .14); opacity: 1; }
  100% { transform: scale(1); }
}

/* --- Final of the circuit (production desk) ----------------------------- */
body.circuit-final #finishedTitle, body.circuit-final #finishedSubtitle, body.circuit-final #podium,
body.circuit-final #restRanking, body.circuit-final .finished-show > .gs-caption { display: none; }
body.circuit-final .mc-results { margin-top: 0; }
.cx-final { display: grid; gap: 18px; text-align: left; container-type: inline-size; }
.cx-final-title {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); line-height: .9; overflow-wrap: anywhere;
}
.cx-final-title .cx-who { color: var(--pc); }
.cx-final-title .cx-who::before { display: none; }
/* The player's avatar in place of the colour dot (lists, podium, winner). */
.cx-who.has-face::before { display: none; }
.cx-face { flex-shrink: 0; width: 26px; height: 26px; }
.cx-final-title .cx-face { width: .9em; height: .9em; }
.cx-step-names .cx-who.has-face { flex-direction: column; gap: 4px; }
.cx-step-names .cx-face { width: 40px; height: 40px; }
.cx-final-names { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--font-display); font-size: var(--fs-2xl); }
.cx-amp { color: var(--text-3); font-size: var(--fs-md); }

.cx-podium { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 8px; }
.cx-step { display: grid; gap: 8px; min-width: 0; }
.cx-step-names { display: grid; gap: 4px; justify-items: center; text-align: center; }
.cx-step-names .cx-who { font-size: var(--fs-sm); max-width: 100%; }
.cx-step-pts { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--text-1); line-height: 1; }
.cx-step-block {
  display: grid; place-items: center; border-radius: var(--r-md) var(--r-md) 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--step) 28%, var(--ink-3)), var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--step) 55%, transparent); border-bottom: 0;
}
.cx-step-rank { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--step); }
.cx-step--1 { --step: var(--gold); }
.cx-step--2 { --step: var(--silver); }
.cx-step--3 { --step: var(--bronze); }
.cx-step--1 .cx-step-block { height: 104px; box-shadow: 0 -14px 40px rgb(246 197 72 / .16); }
.cx-step--2 .cx-step-block { height: 76px; }
.cx-step--3 .cx-step-block { height: 56px; }
.cx-step--1 .cx-step-pts { color: var(--gold); font-size: var(--fs-2xl); }
@media (prefers-reduced-motion: no-preference) {
  .cx-step-block { transform-origin: bottom; animation: cxRise 700ms var(--ease-out) both; }
  .cx-step--2 .cx-step-block { animation-delay: 120ms; }
  .cx-step--1 .cx-step-block { animation-delay: 260ms; }
}
@keyframes cxRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.cx-final-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cx-final-row {
  display: grid; grid-template-columns: 2.6ch minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--r-sm); border: 1px solid transparent;
}
.cx-final-row.is-me { background: rgb(255 255 255 / .05); }
.cx-final-row.is-winner { border-color: var(--spot-line); background: var(--spot-soft); }
.cx-final-row.is-winner .cx-rank { color: var(--spot); }
.cx-final-who { display: grid; gap: 2px; min-width: 0; }
.cx-final-who small { font-size: var(--fs-2xs); }
.cx-cells { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.cx-cell {
  width: 38px; display: grid; justify-items: center; padding: 3px 0; border-radius: var(--r-xs);
  background: var(--surface-sunken); border: 1px solid var(--line-1);
}
.cx-cell-pts { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text-1); line-height: 1.1; }
.cx-cell-rank { font-size: 10px; color: var(--text-3); }
.cx-cell > i { font-size: 11px; color: var(--text-3); }
.cx-cell.is-first { border-color: var(--spot-line); }
.cx-cell.is-first .cx-cell-pts { color: var(--spot); }
.cx-cell.is-none { place-items: center; color: var(--text-3); }
.cx-final-row .cx-total { white-space: nowrap; min-width: 4ch; }
.cx-final-row .cx-total strong { font-size: var(--fs-2xl); }
@container (max-width: 460px) {
  .cx-final-row { grid-template-columns: 2.4ch minmax(0, 1fr) auto; }
  .cx-final-row .cx-cells { grid-column: 2 / -1; grid-row: 2; }
}

/* Small screens: the interstitial scrolls, the countdown stays visible first. */
@media (max-width: 639px), (orientation: landscape) and (max-height: 540px) {
  .mc-intro--circuit { place-items: start center; }
  .cx-intro-card { padding: 16px; }
  .cx-title { font-size: clamp(2rem, 1.2rem + 6vw, 3rem); }
  .cx-lede { font-size: var(--fs-md); }
  .cx-results-foot, .cx-opening-foot { flex-direction: column-reverse; align-items: stretch; }
  .cx-results-foot .cx-route { flex: none; }
  .cx-table th { white-space: nowrap; }
  .cx-table th, .cx-table td { padding-inline: 4px; }
  .cx-pts > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cx-countdown { margin: 0; justify-content: flex-end; }
  .cx-next-mark { width: 72px; height: 72px; }
  .cx-next-mark i { font-size: 34px; }
}

/* The HUD caption of a circuit: discreet, under the round's own information. */
.hud-block--circuit { color: var(--text-2); font-weight: 600; }