/* ---------------------------------------------------------------------------
   Rounds: round start (09), the break between rounds and match results (10),
   the live scoreboard (11), the career board (12) and the ranked preview (13).
   Spec: docs/art/glow-front-end-2026-10-02/.

   The concepts' vocabulary, in CSS: very dark translucent ink rectangles with
   sharp corners, narrow aged-bronze rules, ivory condensed uppercase labels,
   an ivory selected bar with ink text for YOUR row, cobalt for your team and
   vermilion for theirs, K/D the strongest number on a bronze-tinted column.

   Every class carries the `rd-` prefix, so nothing here can restyle the HUD
   or the door by accident. The door's house law holds: nothing under 11px,
   and every animation has a reduced-motion answer at the bottom.
   --------------------------------------------------------------------------- */

:root {
  --rd-ink: rgba(7, 9, 14, .86);
  --rd-ink-soft: rgba(7, 9, 14, .62);
  --rd-bronze: #a8844a;
  --rd-bronze-soft: rgba(168, 132, 74, .35);
  --rd-bronze-tint: rgba(168, 132, 74, .16);
  --rd-ivory: #f2e8cf;
  --rd-ivory-dim: #b9b2a0;
  --rd-cobalt: #5b97e6;
  --rd-vermilion: #e4593f;
  --rd-sel: #efe2bf;
  --rd-sel-ink: #17120b;
  --rd-face: "Glow Condensed", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --rd-digits: "Display Digits", "Glow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
}

/* ---- shared pieces --------------------------------------------------------- */

.rd-layer {
  position: fixed; inset: 0; z-index: 7; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 18px 16px; font-family: var(--rd-face); color: var(--rd-ivory);
  text-transform: uppercase; letter-spacing: 1px;
}
.rd-layer[hidden] { display: none; }

.rd-score { display: flex; align-items: stretch; gap: 0; font-size: 15px; letter-spacing: 2px; }
.rd-score .rd-side { display: flex; align-items: center; padding: 6px 16px; background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); }
.rd-score .rd-side.is-mine { color: var(--rd-cobalt); border-right: 0; box-shadow: inset 0 -2px 0 var(--rd-cobalt); }
.rd-score .rd-side.is-theirs { color: var(--rd-vermilion); border-left: 0; box-shadow: inset 0 -2px 0 var(--rd-vermilion); }
.rd-score .rd-num { font-family: var(--rd-digits); font-size: 30px; line-height: 1; padding: 6px 14px; background: var(--rd-ink); border-top: 1px solid var(--rd-bronze); border-bottom: 1px solid var(--rd-bronze); }
.rd-score .rd-num.is-mine { color: var(--rd-cobalt); }
.rd-score .rd-num.is-theirs { color: var(--rd-vermilion); }
.rd-score .rd-bar { display: flex; align-items: center; background: var(--rd-ink); border-top: 1px solid var(--rd-bronze); border-bottom: 1px solid var(--rd-bronze); }
.rd-score .rd-bar::before { content: ""; width: 18px; height: 3px; background: var(--rd-ivory-dim); }
.rd-score.is-big .rd-num { font-size: 46px; padding: 6px 22px; }
.rd-score.is-big { font-size: 20px; }

.rd-where { margin: 8px 0 0; font-size: 13px; letter-spacing: 3px; color: var(--rd-ivory-dim); }
.rd-note { margin: 10px 0 0; font-size: 13px; letter-spacing: 4px; color: var(--rd-ivory);
  display: flex; align-items: center; gap: 12px; }
.rd-note::before, .rd-note::after { content: ""; width: 120px; height: 1px; background: var(--rd-bronze-soft); }
.rd-hint { margin: 10px 0 0; font-size: 12px; letter-spacing: 1px; text-transform: none; color: var(--rd-ivory-dim); }

/* The class portrait as a round head-and-shoulders avatar ringed in the team's
   colour: the whole 147x304 painting squeezed into 22px read as a muddy red
   blob on either side (round-start judge), so .is-cast below carries a crop of
   the head instead of the whole body. */
.rd-icon { width: 32px; height: 32px; object-fit: cover; object-position: 50% 30%; border-radius: 50%; flex: none;
  display: inline-block; background: #0b111a; border: 2px solid var(--rd-bronze-soft); }
.rd-panels .rd-panel:first-child .rd-icon, .is-mine .rd-icon { border-color: var(--rd-cobalt); }
.rd-panels .rd-panel:last-child .rd-icon, .is-theirs .rd-icon { border-color: var(--rd-vermilion); }
/* A bot is a small styled badge, not a boxed debug tag. */
.rd-layer u, .rd-results u, #board u { font-family: var(--rd-face); }

/* ---- a standings panel ------------------------------------------------------ */

.rd-panels { display: flex; gap: 14px; margin-top: 14px; width: min(1040px, 100%); justify-content: center; }
.rd-panel { flex: 1 1 0; min-width: 0; background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); }
.rd-panel header { display: flex; align-items: baseline; gap: 12px; padding: 8px 12px 6px; border-bottom: 1px solid var(--rd-bronze-soft); }
.rd-panel header b { font-size: 20px; letter-spacing: 2px; }
.rd-panel header small { font-size: 13px; letter-spacing: 3px; color: #d7b56e; }
.rd-panel[data-team="0"] header b { color: var(--rd-cobalt); }
.rd-panel[data-team="1"] header b { color: var(--rd-vermilion); }
.rd-panels .rd-panel:first-child { box-shadow: inset 3px 0 0 var(--rd-cobalt); }
.rd-panels .rd-panel:last-child { box-shadow: inset -3px 0 0 var(--rd-vermilion); }
.rd-panels .rd-panel:first-child header b { color: var(--rd-cobalt); }
.rd-panels .rd-panel:last-child header b { color: var(--rd-vermilion); }
.rd-panel table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rd-panel th { font-size: 12px; letter-spacing: 2px; font-weight: 600; color: #d8d0bb; padding: 5px 8px; text-align: center; }
.rd-panel td { padding: 7px 8px; text-align: center; font-family: var(--rd-digits); border-top: 1px solid rgba(168, 132, 74, .14); }
.rd-panel .rd-c-player { text-align: left; font-family: var(--rd-face); text-transform: none; letter-spacing: .5px; }
.rd-panel td.rd-c-player { max-width: 0; width: 46%; }
.rd-panel .rd-who { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.rd-panel .rd-who span { overflow: hidden; text-overflow: ellipsis; }
.rd-panel td.rd-c-player u { text-decoration: none; font-size: 11px; color: var(--rd-ivory-dim); }
.rd-panel td.rd-c-player em { font-style: normal; font-size: 11px; letter-spacing: 1px; padding: 1px 5px; color: var(--rd-sel-ink); background: var(--rd-bronze); }
/* K/D is the strongest column: bolder, larger, on a bronze tint. */
.rd-panel .rd-c-kd { background: var(--rd-bronze-tint); font-weight: 700; font-size: 16px; color: var(--rd-ivory); }
.rd-panel th.rd-c-kd { font-size: 11px; }
/* Your row: lit, not inverted. A warm wash and a gold edge, the same
   treatment the round card gives you, instead of a cream slab four judges in
   a row called the loudest thing on the screen. */
.rd-panel tr.is-self td { background: rgba(241, 210, 125, .14); color: var(--rd-ivory); font-weight: 700; }
.rd-panel tr.is-self td:first-child { box-shadow: inset 3px 0 0 #f1d27d; }
.rd-panel tr.is-self td.rd-c-kd { background: rgba(241, 210, 125, .24); }
.rd-panel tr.rd-total td { color: var(--rd-ivory-dim); border-top: 1px solid var(--rd-bronze-soft); font-size: 13px; }
.rd-panel tr.rd-total td.rd-c-player { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }

/* ---- 09: round start ------------------------------------------------------- */

#rd-intro { justify-content: center; background: radial-gradient(ellipse at center, rgba(4, 6, 11, .62), rgba(4, 6, 11, .2) 75%);
  animation: rd-intro-in .35s ease-out; }
/* One framed card. Everything the round start says lives inside it, so the
   level behind is a picture and never a second layout. */
#rd-intro .rd-card { display: flex; flex-direction: column; align-items: center; width: min(860px, 100%);
  padding: 18px 26px 16px; background: rgba(7, 9, 14, .9); border: 1px solid var(--rd-bronze-soft);
  border-top: 2px solid var(--rd-bronze); border-bottom: 2px solid var(--rd-bronze);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55); }
#rd-intro .rd-where { margin: 8px 0 10px; }
#rd-intro .rd-strip { width: 100%; padding: 8px 24px 12px; text-align: center;
  border-top: 1px solid var(--rd-bronze-soft); border-bottom: 1px solid var(--rd-bronze-soft); }
#rd-intro .rd-strip h2 { margin: 0; font-size: 64px; line-height: 1; letter-spacing: 4px; font-weight: 700; color: var(--rd-ivory); }
#rd-intro .rd-strip p { margin: 6px 0 0; font-size: 17px; letter-spacing: .5px; text-transform: none; color: var(--rd-ivory); }
#rd-intro .rd-face { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; width: 100%; margin-top: 14px; }
#rd-intro .rd-count { width: 104px; height: 104px; border-radius: 50%; border: 2px solid var(--rd-bronze);
  display: flex; align-items: center; justify-content: center; font-family: var(--rd-digits); font-size: 46px; font-weight: 700;
  background: var(--rd-ink); }
#rd-intro.is-go .rd-count { color: var(--rd-sel-ink); background: linear-gradient(180deg, #f1d27d, #c99443); border-color: #7a5f38;
  animation: rd-go .5s ease-out; }
#rd-intro .rd-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#rd-intro .rd-roster li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(255, 255, 255, .035);
  font-size: 14px; text-transform: none; letter-spacing: .5px; }
#rd-intro .rd-roster li u { text-decoration: none; padding: 1px 6px; border-radius: 2px; background: rgba(168, 132, 74, .2);
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: var(--rd-bronze); }
#rd-intro .rd-go { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#rd-intro .rd-go small { font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: none; color: #f1d27d; }
#rd-intro .rd-strip p { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rd-stone { width: 16px; height: 16px; fill: #f1d27d; flex: none; }
/* The fold: past INTRO_FULL_MS the card becomes a slim banner at the top
   edge, "ROUND 01" and the GO, and the arena under it is the player's. */
#rd-intro.is-short { justify-content: flex-start; padding-top: 18px; background: none; }
#rd-intro.is-short .rd-card { width: auto; flex-direction: row; gap: 18px; padding: 8px 22px; transition: all .25s ease-out; }
#rd-intro.is-short :is(.rd-score, .rd-where, .rd-first, .rd-roster, .rd-strip p, .rd-go small) { display: none; }
#rd-intro.is-short .rd-strip { border: 0; padding: 0; width: auto; }
#rd-intro.is-short .rd-strip h2 { font-size: 30px; }
#rd-intro.is-short .rd-face { display: block; width: auto; margin: 0; }
#rd-intro.is-short .rd-count { width: 48px; height: 48px; font-size: 22px; }
#rd-intro .rd-roster.is-theirs li { flex-direction: row-reverse; text-align: right; }
#rd-intro .rd-roster.is-mine li { box-shadow: inset 3px 0 0 var(--rd-cobalt); }
#rd-intro .rd-roster.is-theirs li { box-shadow: inset -3px 0 0 var(--rd-vermilion); }
#rd-intro .rd-roster li.rd-roster-head { background: none; box-shadow: none; padding: 0 2px 4px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
#rd-intro .rd-roster.is-mine li.rd-roster-head { color: var(--rd-cobalt); }
#rd-intro .rd-roster.is-theirs li.rd-roster-head { color: var(--rd-vermilion); }
#rd-intro .rd-roster li.is-self { background: rgba(239, 226, 191, .16); color: var(--rd-ivory); font-weight: 700; }

#rd-intro .rd-first { margin: 14px 0 0; padding: 0; font-size: 14px; letter-spacing: 3px; color: #f1d27d; }

/* While the card is up it owns the moment: the HUD's own score box (a second
   copy of the card's score, naming the ZONE you stand in, which the judges read
   as a second map name) and the control crib step aside. The crib comes back
   with play; the card is 2.2 seconds. */
body:has(#rd-intro:not([hidden])) :is(#top, #help, #feed) { visibility: hidden; }

/* ---- 10: the break between rounds ------------------------------------------ */

/* Below the HUD's own score panel, which stays readable above the dim. */
#rd-break { background: rgba(4, 6, 11, .9); padding-top: 64px; animation: rd-dim .3s ease-out; }
#rd-break .rd-head { margin: 0; font-size: 52px; line-height: 1.05; letter-spacing: 3px; font-weight: 800; text-align: center;
  color: var(--rd-ivory); text-shadow: 0 0 24px rgba(240, 176, 84, .35); }
#rd-break .rd-note { margin: 16px 0 0; }
#rd-break .rd-panels { margin-top: 8px; }
#rd-break .rd-sub { margin: 6px 0 12px; font-size: 15px; letter-spacing: 5px; color: var(--rd-ivory); }
#rd-break .rd-next { margin-top: 26px; min-width: 300px; padding: 14px 34px 12px; text-align: center;
  background: linear-gradient(180deg, rgba(241, 210, 125, .1), rgba(7, 9, 14, .92) 60%); border: 1px solid #c99443;
  box-shadow: inset 0 0 0 3px rgba(7, 9, 14, .9), inset 0 0 0 4px rgba(201, 148, 67, .45), 0 10px 40px rgba(0, 0, 0, .5); }
#rd-break .rd-next small { display: block; font-size: 14px; letter-spacing: 4px; color: var(--rd-ivory); }
#rd-break .rd-next b { text-transform: none; display: block; min-height: 64px; margin: 4px 0 6px; font-family: var(--rd-digits); font-size: 64px; line-height: 1; color: #f1d27d; }
#rd-break .rd-next.is-final b { display: none; }
#rd-break .rd-race { display: grid; justify-items: center; gap: 8px; margin-top: 20px; }
#rd-break .rd-race small { font-size: 14px; letter-spacing: 3px; color: var(--rd-ivory); }
.rd-lane { display: grid; grid-template-columns: 130px auto 30px; align-items: center; gap: 12px; }
.rd-lane b { font-size: 13px; letter-spacing: 2px; text-align: right; }
.rd-lane em { font-style: normal; font-family: var(--rd-digits); font-size: 20px; }
.rd-lane.is-mine b, .rd-lane.is-mine em { color: var(--rd-cobalt); }
.rd-lane.is-theirs b, .rd-lane.is-theirs em { color: var(--rd-vermilion); }
.rd-track { display: flex; gap: 6px; }
.rd-track i { width: 34px; height: 12px; transform: skewX(-18deg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.rd-track.is-mine i { border-color: rgba(91, 151, 230, .45); }
.rd-track.is-theirs i { border-color: rgba(228, 89, 63, .45); }
.rd-track.is-mine i.is-on { background: var(--rd-cobalt); border-color: var(--rd-cobalt); }
.rd-track.is-theirs i.is-on { background: var(--rd-vermilion); border-color: var(--rd-vermilion); }
#rd-break .rd-next em { display: block; font-style: normal; font-size: 11px; letter-spacing: 3px; color: var(--rd-ivory-dim);
  border-top: 1px solid var(--rd-bronze-soft); padding-top: 6px; }
/* The beats. Winner first, alone; the score settles; then the standings. */
#rd-break[data-beat="winner"] .rd-head { animation: rd-burst .8s ease-out; }
#rd-break[data-beat="winner"] .rd-panels,
#rd-break[data-beat="winner"] .rd-note,
#rd-break[data-beat="winner"] .rd-next,
#rd-break[data-beat="score"] .rd-panels,
#rd-break[data-beat="score"] .rd-note,
#rd-break[data-beat="score"] .rd-next,
#rd-break[data-beat="winner"] .rd-race,
#rd-break[data-beat="score"] .rd-race { visibility: hidden; }
#rd-break[data-beat="score"] .rd-num { animation: rd-settle .6s ease-out; }
#rd-break[data-beat="standings"] .rd-panels { animation: rd-rise .35s ease-out; }
#rd-break[data-beat="count"] .rd-next b { color: var(--rd-sel); animation: rd-tick 1s ease-out infinite; }

/* The stone banner from a capture lands on the same tick as the round end;
   the break already says it, in its subtitle. */
body:has(#rd-break:not([hidden])) #stonecall { visibility: hidden; }
/* The break owns the screen: the live HUD (vitals, team rail, ability rail,
   the score box saying "round over", the crib, the feed) steps aside while the
   standings are up, and client.js skips the canvas edge markers the same way.
   A body class rounds.js sets with the break (`rd-breaking`), never
   `body:has(#rd-break:not([hidden])) #hud > *` (glow-r4-gpu-nonblocking):
   with a :has subject above the HUD and a universal child after it, every
   text node written anywhere on the page (a HUD number, the shop clock)
   marked the HUD's whole subtree for a style recalc, ~3 ms a write at 1x and
   the page once a frame. `#hud:has(~ #rd-break...)` costs the same. */
body.rd-breaking #hud > * { visibility: hidden; }

/* ---- 11: the live scoreboard ------------------------------------------------ */

#board.rd-board { position: fixed; inset: 0; z-index: 8; display: none; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 96px 16px 16px; background: rgba(4, 6, 11, .55); font-family: var(--rd-face); color: var(--rd-ivory); text-transform: uppercase;
  letter-spacing: 1px; pointer-events: auto; overflow-y: auto; }
#board.rd-board .rd-title { margin: 8px 0 0; font-size: 30px; letter-spacing: 4px; }
.rd-me { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 18px; background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); }
.rd-me span { font-size: 12px; letter-spacing: 2px; color: var(--rd-ivory-dim); }
.rd-me b { font-family: var(--rd-digits); font-size: 30px; line-height: 1; }
.rd-me b.rd-small { font-size: 20px; }
.rd-me i { width: 1px; height: 24px; background: var(--rd-bronze-soft); }

#rd-boardbtn { position: fixed; top: 64px; right: 12px; z-index: 8; min-height: 44px; min-width: 44px; padding: 0 14px;
  background: var(--rd-ink); color: var(--rd-ivory); border: 1px solid var(--rd-bronze); font: 600 13px var(--rd-face);
  letter-spacing: 2px; text-transform: uppercase; }
#rd-boardbtn[hidden] { display: none; }

/* ---- 10 at match end: inside the door's results stage ----------------------- */

.rd-results { display: flex; flex-direction: column; align-items: center; width: 100%; font-family: var(--rd-face);
  color: var(--rd-ivory); text-transform: uppercase; letter-spacing: 1px; }
/* The outcome, first and in one word. The door's own headline and bare score
   step aside while the tables are up (they come back when the tallies retire). */
.hold-results:has(.rd-results) #hold-outcome,
.hold-results:has(.rd-results) #hold-score { display: none; }
.rd-outcome { display: flex; flex-direction: column; align-items: center; width: min(760px, 100%); padding: 6px 0 10px; }
.rd-outcome h2 { margin: 0; font-size: 76px; line-height: 1; letter-spacing: 10px; font-weight: 800; color: var(--rd-ivory);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 32px rgba(240, 176, 84, .35); }
.rd-outcome.is-won h2 { color: #f1d27d; }
.rd-outcome.is-lost h2 { color: var(--rd-vermilion); text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 28px rgba(228, 89, 63, .35); }
.rd-outcome p { margin: 6px 0 0; font-size: 14px; letter-spacing: 4px; color: var(--rd-ivory-dim); }
.rd-outcome::after { content: ""; width: 70%; height: 1px; margin-top: 10px;
  background: linear-gradient(90deg, transparent, var(--rd-bronze), transparent); }
.rd-results .rd-score { margin-top: 10px; }
.rd-hist { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.rd-hist small { font-size: 11px; letter-spacing: 3px; color: var(--rd-ivory-dim); margin-right: 6px; }
.rd-hist i { width: 16px; height: 16px; transform: rotate(45deg); border: 1px solid var(--rd-bronze-soft); }
.rd-hist i.is-won { background: var(--rd-cobalt); }
.rd-hist i.is-lost { background: var(--rd-vermilion); }
.rd-hist i.is-draw { background: transparent; }
.rd-mvp { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 8px 16px; background: var(--rd-ink);
  border: 1px solid var(--rd-bronze); }
.rd-mvp em { font-style: normal; font-size: 12px; letter-spacing: 3px; padding: 2px 7px; color: var(--rd-sel-ink); background: var(--rd-bronze); }
/* 32 is the fallback badge. A painted face keeps the panels' 46 here too
   (.rd-icon.is-cast below, same specificity and later in the file), so the MVP
   strip and the rows it sits over show the one avatar at the one size. The
   strip carries .is-mine / .is-theirs (rounds.js) so the ring is this MVP's
   side; it was bronze on both, and on a strip with no panel around it the ring
   is the only thing that says whose MVP this is. */
.rd-mvp .rd-icon { width: 32px; height: 32px; }
.rd-mvp b { font-size: 22px; text-transform: none; }
.rd-mvp-stats { display: flex; gap: 14px; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--rd-bronze-soft); }
.rd-mvp-stats span { display: flex; align-items: baseline; gap: 5px; font-size: 12px; letter-spacing: 1.5px; color: #d8d0bb; }
.rd-mvp-stats b { font-family: var(--rd-digits); font-size: 18px; color: var(--rd-ivory); }
/* The door's panels are 516px wide; two team tables need the room. */
.hold-panel.hold-results { width: min(1000px, 100%); }
.rd-results .rd-panels { width: 100%; }
/* A bot is a quiet pill, readable on a dark row and on your own cream one. */
.rd-panel td.rd-c-player u { padding: 1px 6px; border: 0; border-radius: 2px; background: rgba(168, 132, 74, .2);
  color: var(--rd-bronze); font-weight: 600; letter-spacing: 1.5px; }
.rd-panel tr.rd-total td { background: rgba(7, 9, 14, .95); }
/* The way back is a quiet button, not an underlined link. */
#hold[data-stage="results"]:has(.rd-results) #hold-lockup { display: none !important; }
/* The painting steps back here as it does in the rooms: the tables are the
   picture, and a bunny half hidden behind them is no longer readable as one. */
#hold[data-stage="results"] .hold-plate { filter: blur(6px) brightness(.38) saturate(.6); transform: scale(1.04); }
/* The two ways out side by side, one button system: same height, same face. */
.hold-panel.hold-results:not([hidden]) { display: grid; grid-template-columns: 1fr auto auto 1fr; column-gap: 14px; justify-items: center; }
.hold-panel.hold-results > * { grid-column: 1 / -1; }
.hold-results #rd-again, .hold-results #hold-again { min-height: 52px; min-width: 210px; }
.hold-results #hold-again { margin: 0; padding: 8px 22px; justify-content: center; border: 1px solid #c99443; background: rgba(7, 9, 14, .85);
  font: 400 17px/1.15 "Display Digits", "Pixelify Sans", monospace; letter-spacing: .05em; text-decoration: none; color: var(--rd-ivory); }
.hold-results #hold-again i { text-decoration: none; }

/* ---- 12 and 13: the career board and the ranked preview --------------------- */

.rd-boardstage { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(980px, 100%);
  font-family: var(--rd-face); color: var(--rd-ivory); text-transform: uppercase; letter-spacing: 1px; }
.rd-boardstage h2 { margin: 0; font-size: 44px; letter-spacing: 5px; font-weight: 800; }
.rd-tabs { display: flex; }
.rd-tab { min-height: 44px; min-width: 180px; padding: 6px 18px; background: var(--rd-ink); color: var(--rd-ivory);
  border: 1px solid var(--rd-bronze-soft); font: 700 16px var(--rd-face); letter-spacing: 3px; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.rd-tab[aria-selected="true"] { background: var(--rd-sel); color: var(--rd-sel-ink); }
.rd-tab small { font-size: 11px; letter-spacing: 2px; font-weight: 500; }
.rd-tab.is-locked { color: var(--rd-ivory-dim); }
.rd-tab.is-locked[aria-selected="true"] { background: #6d6658; color: var(--rd-ivory); }
.rd-scope { font-size: 12px; letter-spacing: 3px; color: var(--rd-ivory-dim); }
#rd-career { width: 100%; display: flex; flex-direction: column; align-items: center; }
.rd-tablehead { display: flex; justify-content: space-between; width: 100%; padding: 6px 12px; background: var(--rd-ink);
  border: 1px solid var(--rd-bronze-soft); border-bottom: 0; }
.rd-tablehead small { font-size: 11px; letter-spacing: 3px; color: var(--rd-ivory-dim); }
.rd-tablehead .rd-sample { color: var(--rd-vermilion); }
.rd-table { width: 100%; background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); max-height: 46vh; overflow-y: auto; }
.rd-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rd-table th { font-size: 11px; letter-spacing: 2px; font-weight: 500; color: var(--rd-ivory-dim); padding: 7px 8px; text-align: center;
  border-bottom: 1px solid var(--rd-bronze-soft); }
.rd-table td { padding: 8px; text-align: center; font-family: var(--rd-digits); border-top: 1px solid rgba(168, 132, 74, .14); }
.rd-table .rd-c-player { text-align: left; font-family: var(--rd-face); text-transform: none; }
.rd-table .rd-c-rank { width: 64px; }
.rd-table .rd-c-kd { background: var(--rd-bronze-tint); font-weight: 700; font-size: 19px; color: var(--rd-ivory); }
.rd-table th.rd-c-kd { font-size: 11px; }
.rd-table tr.is-self td { background: var(--rd-sel); color: var(--rd-sel-ink); }
.rd-ranked { width: 100%; display: flex; flex-direction: column; align-items: center; opacity: .62; filter: saturate(.5); }
.rd-board-msg { margin: 18px 0; font-size: 14px; text-transform: none; color: var(--rd-ivory-dim); }
/* The empty board's one line lives INSIDE the table's frame, where every real
   row is inset by its cell padding. Flush against the border it read as
   unfinished (judged by Dan, 2026-10-04: "it could probably have a little more
   margin to the left"). 12px is the .rd-tablehead inset directly above it, so
   the empty line starts on the same left edge as SORTED BY K/D. */
.rd-table .rd-board-msg { padding: 0 12px; }

@keyframes rd-intro-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-go { from { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes rd-dim { from { background: rgba(4, 6, 11, 0); } to { background: rgba(4, 6, 11, .9); } }
@keyframes rd-burst { 0% { transform: scale(.82); opacity: 0; text-shadow: 0 0 60px rgba(255, 243, 222, .9); } 60% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes rd-settle { 0% { transform: translateY(-10px); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes rd-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rd-tick { 0% { transform: scale(1.25); } 30% { transform: scale(1); } 100% { transform: scale(1); } }

/* Phones: one column of panels, smaller display type. */
@media (max-width: 760px) {
  .rd-panels { flex-direction: column; }
  #rd-intro .rd-strip h2 { font-size: 42px; }
  #rd-break .rd-head { font-size: 30px; }
  #rd-break .rd-next { margin-top: 10px; }
  .rd-outcome h2 { font-size: 44px; letter-spacing: 6px; }
  #rd-intro .rd-face { grid-template-columns: 1fr; justify-items: center; }
  .rd-mvp { flex-wrap: wrap; justify-content: center; }
  .rd-lane { grid-template-columns: 90px auto 24px; gap: 8px; }
  .rd-track i { width: 18px; }
  .rd-score.is-big .rd-num { font-size: 32px; }
  .rd-boardstage h2 { font-size: 30px; }
  .rd-tab { min-width: 130px; }
}

/* Reduced motion: every rd- animation is cut, and the beats become plain cuts. */
@media (prefers-reduced-motion: reduce) {
  #rd-intro, #rd-intro.is-go .rd-count, #rd-break, #rd-break[data-beat="winner"] .rd-head,
  #rd-break[data-beat="score"] .rd-num, #rd-break[data-beat="standings"] .rd-panels,
  #rd-break[data-beat="count"] .rd-next b { animation: none; }
}
.rd-still #rd-intro, .rd-still #rd-break, .rd-still #rd-break * { animation: none !important; }

/* ---- rounds: the judged pass, round two (2026-10-03) ------------------------
   Every rule below answers a defect named by round one's screen judges
   (research/glow-judging-2026-10-02/round1/judge/screens: round-start,
   standings, results). */

/* One display voice. The headlines were a heavy condensed sans beside a
   pixel door ("three competing typefaces"), then the door's pixel face. Dan
   retired the pixel look on 2026-10-05 ("a little too pixelated ... make it
   look a little bit more polished") and the door went to its serif; these
   followed on 2026-10-08 (polish judge aes-04): the door's serif in caps, at
   the results stage's tracking (.14em headlines, .18em panel heads,
   front-identity.css). Numbers keep the rounded digit face (--rd-digits). */
:root { --rd-display: "Glow Serif", "PT Serif", Georgia, "Times New Roman", serif; }
#rd-intro .rd-strip h2, #rd-break .rd-head, .rd-outcome h2, .rd-panel header b, .rd-boardstage h2 {
  font-family: var(--rd-display); font-weight: 700; letter-spacing: .14em; text-wrap: balance; }
.rd-panel header b { letter-spacing: .18em; }

/* -- 09: a banner along the top edge, never a card over the floor ----------- */
#rd-intro { justify-content: flex-start; padding-top: 14px; background: none; }
#rd-intro .rd-card.rd-banner { flex-direction: row; align-items: center; gap: 22px; width: auto; max-width: 100%;
  padding: 10px 12px 10px 10px; background: rgba(7, 9, 14, .88); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
#rd-intro .rd-banner .rd-score { flex: none; font-size: 13px; }
#rd-intro .rd-banner .rd-score .rd-num { font-size: 26px; padding: 6px 12px; }
#rd-intro .rd-banner .rd-strip { width: auto; padding: 0; border: 0; text-align: left; }
#rd-intro .rd-banner .rd-strip h2 { font-size: 34px; letter-spacing: .14em; }
#rd-intro .rd-banner .rd-strip p { justify-content: flex-start; margin: 4px 0 0; font-size: 15px; }
#rd-intro .rd-banner .rd-where { display: block; margin: 5px 0 0; font-size: 11px; letter-spacing: 2.5px; }
#rd-intro .rd-banner .rd-count { width: 64px; height: 64px; font-size: 28px; }
#rd-intro.is-short .rd-card.rd-banner { gap: 16px; padding: 6px 10px; }

/* -- the break: what decided the round, under the headline ------------------ */
#rd-break .rd-reason { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 7px 18px 6px;
  font-size: 19px; letter-spacing: 1.5px; color: #f1d27d; background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); }
#rd-break .rd-sub { margin: 8px 0 12px; font-size: 13px; letter-spacing: 4px; color: var(--rd-ivory-dim); }
#rd-break .rd-reason .rd-stone { width: 14px; height: 14px; }

/* -- the break: a WON round celebrates first (Dan, 2026-10-06) -------------
   Gold headline, a one-shot burst of gold sparks behind it, and the reason
   demoted to a quiet line. Still smaller than the match end's VICTORY (76px
   on the results stage), which stays the bigger word. */
#rd-break .rd-headwrap { position: relative; display: flex; justify-content: center; }
#rd-break .rd-head.is-won { position: relative; font-size: 64px; letter-spacing: .14em; color: #f1d27d;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 34px rgba(241, 210, 125, .55); }
#rd-break .rd-reason.is-quiet { margin: 8px 0 0; padding: 0; background: none; border: 0;
  font-size: 14px; letter-spacing: 2px; color: var(--rd-ivory-dim); }
.rd-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rd-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; opacity: 0;
  background: #f1d27d; box-shadow: 0 0 8px rgba(241, 210, 125, .8);
  animation: rd-spark 1.1s cubic-bezier(.2, .7, .3, 1) var(--t, 0s) 1 both; }
.rd-burst i:nth-child(3n) { background: #c99443; width: 8px; height: 8px; }
.rd-burst i:nth-child(4n) { background: var(--rd-ivory); width: 6px; height: 6px; }
@keyframes rd-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(10px) scale(.6); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1); }
}
@media (max-width: 760px) {
  #rd-break .rd-head.is-won { font-size: 34px; letter-spacing: .1em; }
  .rd-burst { transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) { .rd-burst { display: none; } }
.rd-still .rd-burst { display: none; }

/* -- the panels: side bars that run the full height, a lit self row, a quiet
      bot pill. The inset shadow stopped at the TEAM row, whose cells paint
      over it ("the accent bars end at the last player row"). */
.rd-panels .rd-panel:first-child { box-shadow: none; border-left: 3px solid var(--rd-cobalt); }
.rd-panels .rd-panel:last-child { box-shadow: none; border-right: 3px solid var(--rd-vermilion); }
.rd-panel tr.is-self td { background: rgba(241, 210, 125, .2); }
.rd-panel tr.is-self td:first-child { box-shadow: inset 4px 0 0 #f1d27d; }
.rd-panel tr.is-self .rd-who span { color: #f1d27d; }
.rd-panel td.rd-c-player u { background: rgba(255, 255, 255, .06); color: var(--rd-ivory-dim); font-weight: 500; }

/* WHAT THIS REPLACED, kept because it is the measurement that justifies the
   replacement. The avatar used to be a WINDOW onto the idle sprite strip via
   background-position. Measured on frame 0 of the promoted strips (native
   128x128), the head bands are: doe rows 17..43, cols 39..80, 42 wide; lop
   rows 50..66, cols 55..81, 25 wide. `* { box-sizing: border-box }` plus a 2px
   border meant a 40px icon showed only 36 source pixels, six short of the
   Doe -- her ears cut flat at the left, her muzzle flat at the right, one pale
   band edge to edge, which is exactly what Dan called "stretched". The Lop's
   25px head always fitted, which is why only one of the two ever looked wrong.
   Widening the window to 46 source px fixed the CROP; it could not fix the
   fact that a side-facing gameplay sprite is not a portrait, which is what he
   said next. Hence the painting below. */

/* -- avatars: a painted face, dyed to the side you see it from --------------
   The art is scripts/arena-face-icons.mjs: a head-and-shoulders crop of the
   class painting at 92 px, run through the renderer's own team dye. 92 is
   exactly twice the box, so a 2x display draws it 1:1.

   SMOOTH, NOT `pixelated`, and this is the HUD's one deliberate exception to
   its integer-grid rule. Everything else here is pixel art drawn at its own
   resolution. This is a painting, and the note that produced it was "the way
   they look with the pixelation looks weird" (Dan, 2026-10-04). Nearest
   neighbour at the 0.5 ratio a 1x display asks for throws away every other
   pixel of the lanczos downscale, which is most of what tells the Doe from the
   Lop. The team colour is in the ring above and in the dye, not in the grid.

   THE RING IS 3px HERE, NOT THE BASE 2px, AND THAT IS MEASURED. teamdye's
   premise is that the fur is 76% of a body and so takes the side's colour; a
   head-and-shoulders crop is not a body. Of the Lop's icon only 105 pixels are
   fur the dye owns -- the rest is his authored red headband, scarf and armour,
   which the dye keeps by design -- so the dye alone leaves him warm on both
   sides. With a 3px ring the two sides are dE 43.6 (Lop) and 52.6 (Doe) apart
   and the worst cross pair, an ally Lop against a foe Doe, is 33.8; at 2px
   those are 36.4, 46.3 and 26.0. face-icons.test.mjs recomputes all of it from
   this file, so thinning the ring fails. */
.rd-icon.is-cast { width: 46px; height: 46px; background-color: #0b111a; image-rendering: auto; object-fit: cover;
  border-width: 3px; }

/* -- 10 at match end: the MVP stands beside the outcome --------------------- */
.rd-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; width: 100%; }
.rd-top-main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; }
/* The small FLAT lockup over the outcome (the painterly pass, 2026-10-05): the
   franchise line tracked in the caps face, GLOW in the serif. */
.rd-logo { display: grid; justify-items: center; gap: 2px; margin: 0 0 6px; }
.rd-logo i { font: 400 11px/1 var(--hold-caps, sans-serif); font-style: normal; letter-spacing: .4em; padding-left: .4em; color: var(--rd-ivory); }
.rd-logo b { font: 700 26px/1 var(--hold-serif, serif); letter-spacing: .18em; padding-left: .18em; color: var(--rd-ivory); text-shadow: 0 0 14px rgba(101, 200, 205, .5); }
.rd-victor { grid-column: 1; grid-row: 1; justify-self: end; position: relative; margin: 0 26px 0 0; display: flex; flex-direction: column; align-items: center; }
.rd-victor canvas { display: block; width: 256px; height: 262px; }
/* No glow puddle under the body: the ledge front-door.js draws INTO the canvas
   is what the feet stand on, and a soft ellipse floating behind the caption was
   never under them anyway. Shadows sparingly (AGENTS.md house note); the
   concept art grounds its winners on cut stone. */
.rd-victor figcaption { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.rd-victor figcaption em { font-style: normal; font-size: 12px; letter-spacing: 3px; padding: 2px 7px; color: var(--rd-sel-ink); background: var(--rd-bronze); }
.rd-victor figcaption b { font-size: 20px; text-transform: none; color: var(--rd-ivory); }
.rd-outcome p { font-size: 15px; letter-spacing: 3px; color: var(--rd-ivory); }
.rd-hist i { position: relative; width: 20px; height: 20px; }
.rd-hist i b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: rotate(-45deg);
  font: 600 11px/1 var(--rd-digits); color: var(--rd-sel-ink); }
.rd-hist i.is-draw b { color: var(--rd-ivory-dim); }
.hold-results #rd-again, .hold-results #hold-again { letter-spacing: .1em; }

@media (max-width: 760px) {
  .rd-top { grid-template-columns: 1fr; justify-items: center; }
  .rd-top-main { grid-column: 1; grid-row: auto; }
  .rd-victor { grid-column: 1; grid-row: auto; justify-self: center; margin: 0; }
  .rd-victor canvas { width: 128px; height: 131px; }
  #rd-intro .rd-card.rd-banner { gap: 10px; }
  #rd-intro .rd-banner .rd-strip p, #rd-intro .rd-banner .rd-where { display: none; }
  #rd-intro .rd-banner .rd-strip h2 { font-size: 22px; }
}

/* ---- rounds: the judged pass, round three (2026-10-03) ----------------------
   research/glow-judging-2026-10-02/frontdoor-lane2/judge/screens. */
/* 09: the moment. Two words over the arena, no panel, for INTRO_FULL_MS. */
#rd-intro .rd-moment { position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; font-family: var(--rd-display); text-align: center; }
#rd-intro .rd-moment b { font-weight: 700; font-size: 76px; line-height: 1; letter-spacing: .14em; color: var(--rd-ivory);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 32px rgba(240, 176, 84, .45); }
#rd-intro .rd-moment i { font-style: normal; font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: .18em; color: #f1d27d;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 30px rgba(240, 176, 84, .6); }
#rd-intro.is-short .rd-moment { display: none; }
/* Letter-spacing trails the last letter, so each word sat half a spacing left
   of centre; the same width on the left puts ROUND and GO on the axis. */
#rd-intro .rd-moment b { padding-left: .14em; }
#rd-intro .rd-moment i { padding-left: .18em; }
/* The break: the round count rides the countdown box; no second race strip. */
#rd-break .rd-next em { margin-top: 2px; }
/* 10: the stage, the line under it, your own match on the right. */
.rd-victor .rd-mvp-stats { margin: 6px 0 0; padding: 0; border: 0; gap: 10px; }
.rd-you { grid-column: 3; grid-row: 1; justify-self: start; align-self: center; display: flex; flex-direction: column; gap: 6px; min-width: 220px;
  margin-left: 26px; padding: 12px 16px; background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); border-left: 3px solid #f1d27d; }
.rd-you small { font-size: 12px; letter-spacing: 3px; color: var(--rd-ivory-dim); }
/* aes-12 residual: the GUEST tag is the tables' small chip, not a bar the
   column stretched to its full width. */
.rd-you > .glow-guesttag { align-self: center; }
.rd-you > b { font-size: 22px; text-transform: none; color: #f1d27d; }
.rd-you .rd-mvp-stats { margin: 0; padding: 0; border: 0; flex-wrap: wrap; gap: 6px 12px; }
.rd-you p { margin: 0; font-size: 12px; letter-spacing: 2px; color: var(--rd-ivory-dim); }
.rd-you p b { font-family: var(--rd-digits); font-size: 22px; color: var(--rd-ivory); margin-left: 6px; }
.rd-kdnote { margin: 8px 0 0; font-size: 12px; letter-spacing: .5px; text-transform: none; color: var(--rd-ivory-dim); }
@media (max-width: 760px) {
  .rd-you { grid-column: 1; grid-row: auto; justify-self: center; margin: 10px 0 0; }
  #rd-intro .rd-moment b { font-size: 40px; }
  #rd-intro .rd-moment i { font-size: 28px; }
}
/* While the moment says ROUND and GO, the banner does not say them again: it
   carries the score and the objective, and takes the words back on the fold. */
#rd-intro:not(.is-short) .rd-banner .rd-strip h2,
#rd-intro:not(.is-short) .rd-banner .rd-go { display: none; }

/* ---- polish-hud (2026-10-08): the polish judges' aesthetics pass -------------
   research: /Users/dannolan/dev/worldhopper-art-archive/glow-polish-2026-10-08/
   judges/aesthetics/REPORT.md, issues aes-06 and aes-15. */

/* aes-15: the break's cards are solid. Their ink was 86% and the countdown
   box's top only 10% gold, so a lit bunny on the floor behind showed through
   inside SHOP OPENS IN. The dim behind them stays the dim. (The dim's own
   fade-in used to stop at 58% and then snap to 90%; rd-dim ends at 90% now.) */
#rd-break { --rd-ink: #07090e; }
#rd-break .rd-next { background: linear-gradient(180deg, #1c1a16, #07090e 60%); }

/* The break's standings give the room to the names. Beside the Moment each
   table is ~310px, the player column was a fixed 46% of it, and after the
   46px face and the BOT pill a name had ~22px: "T..", "Dra..." at 1600x900
   (gameplay judge, 2026-10-08). The counts take only their own width now and
   the player column everything else, ~86px of name at that size. */
#rd-break .rd-panel :is(th, td).rd-c-player { width: 100%; }
#rd-break .rd-panel :is(th, td):not(.rd-c-player) { width: 1%; white-space: nowrap; padding-left: 6px; padding-right: 6px; }

/* aes-06: the touch SCORES chip steps aside whenever something else owns the
   top of the screen: the round-start card, the GO banner, the break and the
   shop (index.html, is-shopping). It was drawn over the score box and through
   the break's headline. */
body:has(#rd-intro:not([hidden])) #rd-boardbtn,
body:has(#rd-break:not([hidden])) #rd-boardbtn,
body:has(#roundstart:not([hidden])) #rd-boardbtn { visibility: hidden; }

@media (max-width: 600px) {
  /* Beside the score box on the top row rather than hanging off its corner:
     the box spans 90..300 of a 390 phone, the chip 316..380. */
  #rd-boardbtn { top: 10px; right: 10px; min-height: 44px; padding: 0 9px; font-size: 12px; letter-spacing: 1px; }
}

@media (max-width: 760px) {
  /* The rule label holds one line: the hairlines either side give way first
     ("WHOLE MATCH SO / FAR"). */
  .rd-note { white-space: nowrap; max-width: 100%; font-size: 12px; letter-spacing: 3px; gap: 10px; }
  .rd-note::before, .rd-note::after { flex: 0 1 120px; min-width: 12px; }
  /* The big score strip on one line: the side names drop to the label size
     and never wrap ("YOUR / TEAM"). */
  .rd-score.is-big { font-size: 14px; letter-spacing: 1.5px; }
  .rd-score.is-big .rd-side { padding: 6px 10px; white-space: nowrap; }
  .rd-score.is-big .rd-num { padding: 6px 14px; }
  #rd-break .rd-head { font-size: 30px; letter-spacing: .1em; }
  /* aes-15: on a phone the break is one column taller than the screen, and
     the countdown sat under both tables, off the bottom edge: the one number
     the break is counting was never on a phone's screen. It moves up under
     the score as one compact line, so what fills the screen from the first
     beat is the result, the score and when the shop opens, then the Moment. */
  #rd-break > * { order: 2; }
  #rd-break > :is(.rd-headwrap, .rd-head, .rd-reason, .rd-sub, .rd-score) { order: 0; }
  #rd-break > .rd-next { order: 1; }
  #rd-break .rd-next { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; column-gap: 12px;
    min-width: 0; width: min(100%, 340px); margin-top: 10px; padding: 8px 16px 6px; }
  #rd-break .rd-next small { font-size: 13px; letter-spacing: 3px; }
  #rd-break .rd-next b { min-height: 0; margin: 0; font-size: 30px; }
  #rd-break .rd-next em { grid-column: 1 / -1; margin-top: 6px; text-align: center; }
  #rd-break .rd-note { margin-top: 12px; }
}

/* ---- animation-12 (round-2 animation judge, 2026-10-08): the outcome performs --
   The body on the ledge cheers for the side that won, on a defeat too (Dan,
   2026-10-08; results-stage.mjs, drawn by
   front-door.js). Around it: the outcome's side colour bleeds into the
   backdrop, the word lands, the rows come in one after another, the losing
   side settles and dims, and the MVP's row catches the lamp once. All of it
   is over in about 1.4 s and none of it holds READY or LEAVE, which never
   animate. `.is-settled` is a redraw of results already on screen: no second
   entrance. Reduced motion: none of it moves; the end states hold. */
.rd-results .rd-top { position: relative; isolation: isolate; }
.rd-results .rd-top::before { content: ""; position: absolute; inset: -40px -6% -24px; z-index: -1; pointer-events: none; opacity: 0; }
.rd-results.is-won .rd-top::before {
  background: radial-gradient(ellipse 34% 90% at 22% 62%, rgba(91, 151, 230, .30), transparent 70%),
    radial-gradient(ellipse 30% 70% at 50% 40%, rgba(241, 210, 125, .14), transparent 70%);
  animation: rd-bleed 900ms 120ms ease-out forwards; }
.rd-results.is-lost .rd-top::before {
  background: radial-gradient(ellipse 34% 90% at 22% 62%, rgba(228, 89, 63, .24), transparent 70%),
    linear-gradient(180deg, rgba(5, 7, 12, .35), transparent 80%);
  animation: rd-bleed 1100ms 300ms ease-out forwards; }
@keyframes rd-bleed { to { opacity: 1; } }

.rd-results.is-won .rd-outcome h2 { animation: rd-word-won 460ms 120ms cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes rd-word-won {
  0% { opacity: 0; transform: scale(1.18); text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 60px rgba(241, 210, 125, .9); }
  60% { opacity: 1; }
  100% { transform: scale(1); }
}
.rd-results.is-lost .rd-outcome h2 { animation: rd-word-lost 620ms 180ms cubic-bezier(.3, .7, .3, 1) both; }
@keyframes rd-word-lost {
  0% { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 1; transform: none; }
}
.rd-results:is(.is-won, .is-lost) .rd-outcome p { animation: rd-fade-up 360ms 420ms ease-out both; }

/* The caption under the body arrives with it. */
.rd-results:is(.is-won, .is-lost) .rd-victor :is(figcaption, .rd-mvp-stats) { animation: rd-fade-up 320ms 700ms ease-out both; }
.rd-results:is(.is-won, .is-lost) .rd-victor .rd-mvp-stats { animation-delay: 780ms; }
@keyframes rd-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rd-results:is(.is-won, .is-lost) .rd-you { animation: rd-fade-up 360ms 260ms ease-out both; }

/* The rows, one after another down each table, the opponents a beat behind. */
.rd-results:is(.is-won, .is-lost) .rd-panel tbody tr { animation: rd-row-in 300ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: 220ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel tbody tr:nth-child(2) { animation-delay: 275ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel tbody tr:nth-child(3) { animation-delay: 330ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel tbody tr:nth-child(4) { animation-delay: 385ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel tbody tr:nth-child(n+5) { animation-delay: 440ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel + .rd-panel tbody tr { animation-delay: 260ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel + .rd-panel tbody tr:nth-child(2) { animation-delay: 315ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel + .rd-panel tbody tr:nth-child(3) { animation-delay: 370ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel + .rd-panel tbody tr:nth-child(4) { animation-delay: 425ms; }
.rd-results:is(.is-won, .is-lost) .rd-panel + .rd-panel tbody tr:nth-child(n+5) { animation-delay: 480ms; }
@keyframes rd-row-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
/* The losing side's table settles: the colour goes out of it a little once
   its rows are in. Still every number readable. */
.rd-results.is-won .rd-panel + .rd-panel,
.rd-results.is-lost .rd-panels > .rd-panel:first-child { animation: rd-settle 700ms 760ms ease-out forwards; }
@keyframes rd-settle { to { filter: saturate(.6) brightness(.86); } }
/* The MVP's row catches the lamp once, after the rows are in. */
.rd-results:is(.is-won, .is-lost) .rd-panel tbody tr.is-mvp td { animation: rd-mvp-lamp 1000ms 640ms ease-out both; }
@keyframes rd-mvp-lamp {
  0% { box-shadow: inset 0 0 0 999px rgba(241, 210, 125, 0); }
  30% { box-shadow: inset 0 0 0 999px rgba(241, 210, 125, .22); }
  100% { box-shadow: inset 0 0 0 999px rgba(241, 210, 125, 0); }
}

.rd-results.is-settled, .rd-results.is-settled * { animation-delay: -10s !important; animation-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  .rd-results .rd-top::before { animation: none; opacity: 1; }
  .rd-results .rd-outcome h2, .rd-results .rd-outcome p, .rd-results .rd-you, .rd-results .rd-victor :is(figcaption, .rd-mvp-stats),
  .rd-results .rd-panel tbody tr, .rd-results .rd-panel tbody tr.is-mvp td { animation: none; }
  .rd-results.is-won .rd-panel + .rd-panel,
  .rd-results.is-lost .rd-panels > .rd-panel:first-child { animation: none; filter: saturate(.6) brightness(.86); }
}