/* G.O.A.T. — art direction per GOAT-STRATEGY.md §19. Fight poster, not dashboard. */

/* Self-hosted fonts (§19: free, self-hosted; keeps the offline/zip story true).
   Archivo ships as a single variable font covering weights 400-900. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-latin.woff2?v=23aab0b269") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/archivo-var-latin.woff2?v=7150c0ec5a") format("woff2");
}

:root {
  --bg: #0b0b0e;
  --bg-raised: #141418;
  --bg-card: #17171c;
  --ink: #f4f1ea;
  --ink-dim: #a8a6a0;
  --ink-faint: #6a6a70;
  --gold: #ffad20;
  --gold-bright: #ffc55e;
  --red: #c0392b;
  --red-bright: #e0473a;
  --green: #2f8fa8;
  --border: rgba(244, 241, 234, 0.1);
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", -apple-system, "Segoe UI", system-ui, sans-serif;
  min-height: 100%;
}

body.goat-arena {
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(201, 162, 39, 0.10), transparent 60%),
    radial-gradient(ellipse 1200px 800px at 50% 110%, rgba(192, 57, 43, 0.06), transparent 60%),
    var(--bg);
  min-height: 100vh;
}

.goat-display {
  font-family: "Anton", "Archivo Black", "Archivo", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

a { color: var(--gold); }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- nav */
.goat-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.goat-nav .wordmark {
  font-family: "Anton", sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.goat-nav .wordmark .dot { color: var(--gold); }
.goat-nav a.nav-link {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  margin-left: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.goat-nav a.nav-link:hover { color: var(--gold); }

/* ---------------------------------------------------------------- shared layout */
.view { max-width: 900px; margin: 0 auto; padding: 0 20px 80px; }

.goat-hero { text-align: center; padding: 56px 20px 24px; }
.goat-hero .wordmark-hero {
  font-family: "Anton", sans-serif;
  font-size: clamp(48px, 10vw, 96px);
  letter-spacing: 0.05em;
  line-height: 1;
  margin: 0;
}
.goat-hero .wordmark-hero .dot { color: var(--gold); }
.goat-hero .tagline {
  color: var(--ink-dim);
  font-size: 16px;
  margin-top: 10px;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- daily fight */
.daily-fight {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.daily-fight .label {
  font-family: "Anton", sans-serif;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 4px;
}
.daily-fight .matchup { font-size: 20px; font-weight: 700; }
.daily-fight .streak { color: var(--ink-dim); font-size: 13px; }
.daily-fight button { flex-shrink: 0; }

/* ---------------------------------------------------------------- mode rows */
.mode-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 24px;
}
.mode-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--ink-dim);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.03em;
  transition: all 160ms var(--ease-standard);
}
.mode-btn.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  font-weight: 700;
}

.btn-gold {
  display: block;
  margin: 0 auto;
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: 10px;
  padding: 16px 40px;
  font-family: "Anton", sans-serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  transition: transform 80ms var(--ease-standard), background 160ms;
}
.btn-gold:hover { background: var(--gold-bright); }
.btn-gold:active { transform: scale(0.97); }
.btn-gold:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------------------------------------------- roster grid */
.roster-heading { font-size: 13px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; margin: 40px 0 12px; }
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.roster-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 160ms;
}
.roster-chip:hover { border-color: var(--gold); }
.roster-chip .crest-mini { width: 32px; height: 32px; margin: 0 auto 6px; }

/* ---------------------------------------------------------------- crest */
.crest {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Anton", sans-serif;
  font-size: 24px;
  border: 3px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.crest .initials { position: relative; z-index: 1; letter-spacing: 0.02em; }
.crest-mini.crest { border-width: 2px; font-size: 12px; }
.fighter-card .crest { font-size: 26px; }
.pick-btn .crest { font-size: 18px; }

/* ---------------------------------------------------------------- ceremony stage */
.ceremony-stage {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ceremony-state {
  width: 100%;
  animation: stateIn 420ms var(--ease-standard) both;
}
@keyframes stateIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.skip-hint {
  position: absolute;
  bottom: 16px;
  right: 0;
  color: var(--ink-faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- tale of the tape ---- */
.tale-of-tape { display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fighter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  width: 280px;
  animation: slideIn 500ms var(--ease-standard) both;
}
.fighter-card.side-a { animation-name: slideInLeft; }
.fighter-card.side-b { animation-name: slideInRight; }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

.fighter-card .crest { width: 88px; margin: 0 auto 12px; }
.fighter-card .fname { text-align: center; font-family: "Anton", sans-serif; font-size: 20px; letter-spacing: 0.02em; }
.fighter-card .fnick { text-align: center; color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.fighter-card .fmeta { text-align: center; color: var(--ink-faint); font-size: 11px; margin-bottom: 14px; }

.attr-row { margin-bottom: 8px; }
.attr-row .attr-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.attr-row .attr-value { color: var(--ink); font-weight: 700; }
.attr-bar-track { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.attr-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius: 3px; width: 0%; transition: width 600ms var(--ease-standard); }
.attr-row.judgment .attr-label { font-style: italic; opacity: 0.8; }

.vs-glyph {
  font-family: "Anton", sans-serif;
  font-size: 32px;
  color: var(--red);
  align-self: center;
  margin: 0 4px;
}

/* ---- lock-in ---- */
.lock-in { text-align: center; }
.lock-in h2 { font-family: "Anton", sans-serif; font-size: clamp(28px, 6vw, 44px); margin-bottom: 28px; }
.pick-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.pick-btn {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 20px 32px;
  min-width: 200px;
  transition: transform 80ms var(--ease-standard), border-color 160ms;
}
.pick-btn:hover { border-color: var(--gold); }
.pick-btn:active { transform: scale(0.97); }
.pick-btn .crest { width: 56px; margin: 0 auto 10px; }
.pick-btn .pname { font-family: "Anton", sans-serif; font-size: 16px; color: var(--ink); }
.pick-btn.locked { border-color: var(--gold); background: rgba(201,162,39,0.08); }
.pick-btn.dimmed { opacity: 0.35; }
.pick-stamp {
  display: inline-block;
  margin-top: 28px;
  font-family: "Anton", sans-serif;
  color: var(--gold);
  border: 2px solid var(--gold);
  padding: 6px 18px;
  border-radius: 6px;
  transform: rotate(-4deg) scale(1.15);
  animation: stampIn 250ms var(--ease-overshoot) both;
}
@keyframes stampIn { from { opacity: 0; transform: rotate(-4deg) scale(0.6); } to { opacity: 1; transform: rotate(-4deg) scale(1.15); } }
.skip-link { display: block; margin-top: 20px; color: var(--ink-faint); font-size: 12px; text-decoration: underline; }

/* ---- simulation tally ---- */
.simulation { text-align: center; }
.simulation h2 { font-family: "Anton", sans-serif; font-size: clamp(22px, 5vw, 32px); color: var(--ink-dim); margin-bottom: 24px; letter-spacing: 0.04em;}
.tally-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
.tally-num { font-family: "Anton", sans-serif; font-size: clamp(48px, 12vw, 88px); font-variant-numeric: tabular-nums; }
.tally-num.a { color: var(--ink); }
.tally-num.b { color: var(--gold); }
.tally-dash { font-family: "Anton", sans-serif; font-size: 32px; color: var(--ink-faint); }
.prob-bar-track { height: 14px; max-width: 500px; margin: 0 auto; background: rgba(255,255,255,0.06); border-radius: 7px; overflow: hidden; display: flex; }
.prob-bar-fill-a { background: var(--ink); height: 100%; transition: width 220ms linear; }
.prob-bar-fill-b { background: var(--gold); height: 100%; transition: width 220ms linear; }
.milestone-flash { margin-top: 16px; font-size: 14px; color: var(--ink-dim); min-height: 20px; font-variant-numeric: tabular-nums; }

/* ---- black beat ---- */
.black-beat { height: 70vh; background: #000; }

/* ---- verdict ---- */
.verdict { text-align: center; }
.verdict .verdict-winner {
  font-family: "Anton", sans-serif;
  font-size: clamp(32px, 7vw, 56px);
  color: var(--gold);
  animation: slam 320ms var(--ease-overshoot) both;
}
@keyframes slam { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: scale(1); } }
.verdict .verdict-pct {
  font-family: "Anton", sans-serif;
  font-size: clamp(64px, 16vw, 140px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: slam 380ms var(--ease-overshoot) both;
}
.verdict .verdict-sub { color: var(--ink-dim); font-size: 15px; margin-top: 8px; }
.method-breakdown { display: flex; justify-content: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.method-breakdown .method-row {
  animation: stateIn 320ms var(--ease-standard) both;
  min-width: 140px;
}
.method-breakdown .method-row .m-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.method-breakdown .method-row .m-value { font-family: "Anton", sans-serif; font-size: 22px; }
.pick-grade {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: "Anton", sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.pick-grade.correct { background: rgba(85,210,232,0.16); color: #8fe3f2; border: 1px solid var(--green); }
.pick-grade.wrong { background: rgba(192,57,43,0.15); color: var(--red-bright); border: 1px solid var(--red); }

/* ---- afterglow ---- */
.afterglow { padding-top: 20px; }
.afterglow-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
.crowd-delta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--ink-dim);
}
.crowd-delta strong { color: var(--ink); }

/* ---------------------------------------------------------------- watch / HUD */
.watch-view { background: var(--bg-raised); border-radius: 14px; padding: 20px; margin-top: 20px; }
.fight3d-viewport {
  width: 100%;
  height: clamp(240px, 48vw, 420px);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #0b0b0e;
}
.fight3d-viewport canvas { display: block; width: 100% !important; height: 100% !important; }
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hud-fighter { flex: 1; }
.hud-fighter.right { text-align: right; }
.hud-name { font-family: "Anton", sans-serif; font-size: 15px; letter-spacing: 0.02em; margin-bottom: 6px; }
.hud-bar-track { height: 10px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; margin-bottom: 4px; }
.hud-bar-fill { height: 100%; border-radius: 5px; transition: width 500ms var(--ease-standard); }
.hud-bar-fill.damage { background: linear-gradient(90deg, var(--red), var(--red-bright)); }
/* Neutral, not green: green is off the house palette, and a coloured bar
   under a name reads as that player's colour. */
.hud-bar-fill.stamina { background: var(--cream, #fff4df); }
.hud-bar-label { font-size: 9px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.hud-center { text-align: center; padding: 0 12px; }
.hud-round { font-family: "Anton", sans-serif; font-size: 22px; color: var(--gold); }
.hud-scorecards { display: flex; gap: 10px; justify-content: center; margin-top: 4px; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.momentum-ribbon { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin: 14px 0; overflow: hidden; }
.momentum-ribbon .fill { height: 100%; width: 50%; background: var(--ink-faint); transition: all 400ms var(--ease-standard); }

.ticker {
  min-height: 140px;
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.6;
}
.ticker .tline { opacity: 0; animation: tickerIn 300ms var(--ease-standard) forwards; margin-bottom: 4px; }
@keyframes tickerIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }
.ticker .tline.emph { color: var(--gold); font-weight: 700; }

.count-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.count-overlay .count-num {
  font-family: "Anton", sans-serif;
  font-size: clamp(80px, 20vw, 180px);
  color: var(--red-bright);
  animation: slam 260ms var(--ease-overshoot) both;
}
.count-overlay .count-num.resolution {
  font-size: clamp(24px, 5.5vw, 42px);
  text-align: center;
  padding: 0 24px;
  line-height: 1.3;
}
.count-overlay .count-label { position: absolute; top: 30%; text-align: center; width: 100%; font-family: "Anton", sans-serif; font-size: 18px; color: var(--ink-dim); letter-spacing: 0.1em; }

.watch-controls { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }

.shake-sm { animation: shakeSm 120ms linear; }
.shake-lg { animation: shakeLg 200ms linear; }
@keyframes shakeSm { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
@keyframes shakeLg { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.flash-flag { animation: flashFlag 260ms ease-out; }
@keyframes flashFlag { 0%{ background: rgba(255,255,255,0.9);} 100%{ background: transparent; } }

/* ---------------------------------------------------------------- share card */
.share-canvas-wrap { text-align: center; margin: 20px 0; }
#share-canvas { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }

/* ---------------------------------------------------------------- fighter modal */
.goat-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  z-index: 100;
  overflow: auto;
  padding: 24px 16px;
}
.goat-modal-inner {
  max-width: 520px;
  margin: 24px auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px;
}
.fm-head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.fm-head .crest { width: 84px; flex-shrink: 0; font-size: 24px; }
.fm-name { font-family: "Anton", sans-serif; font-size: 24px; }
.fm-nick { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.fm-meta { color: var(--ink-faint); font-size: 12px; margin-top: 6px; }
.fm-bio { color: var(--ink-dim); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.fm-attr { margin-bottom: 14px; }
.fm-attr-head { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); margin-bottom: 4px; }
.fm-attr-head em { color: var(--gold); font-style: italic; text-transform: none; letter-spacing: 0; }
.fm-attr-val { font-weight: 700; color: var(--ink); }
.fm-basis { color: var(--ink-faint); font-size: 12px; line-height: 1.5; margin-top: 5px; }
.fm-attr.judgment .fm-basis { font-style: italic; }
.fm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---------------------------------------------------------------- roster chip nickname */
.roster-chip .chip-nick { color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; min-height: 12px; }

/* ---------------------------------------------------------------- commentary feed */
.commentary {
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 16px 18px;
  max-height: 300px;
  overflow-y: auto;
}
.commentary-title { font-family: "Anton", sans-serif; font-size: 12px; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 10px; }
.commentary-round { font-size: 14px; line-height: 1.65; color: var(--ink-dim); margin-bottom: 12px; animation: tickerIn 300ms var(--ease-standard); }
.commentary-round .commentary-r { font-family: "Anton", sans-serif; color: var(--gold); font-size: 12px; margin-right: 6px; }
.commentary-summary { font-size: 15px; line-height: 1.6; color: var(--ink); border-top: 1px solid var(--border); padding-top: 12px; font-style: italic; }

/* ---------------------------------------------------------------- round histogram */
.round-histo {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px 12px;
  margin: 16px 0;
}
.histo-title { font-family: "Anton", sans-serif; font-size: 12px; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 12px; }
.histo-bars { display: flex; gap: 6px; align-items: flex-end; height: 64px; }
.histo-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.histo-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.histo-bar { width: 100%; background: linear-gradient(180deg, var(--red-bright), var(--red)); border-radius: 2px 2px 0 0; min-height: 1px; transition: height 600ms var(--ease-standard); }
.histo-x { font-size: 9px; color: var(--ink-faint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.histo-note { font-size: 12px; color: var(--ink-dim); margin-top: 8px; }

/* ---------------------------------------------------------------- watch controls wrap */
.watch-controls { flex-wrap: wrap; }

/* ---------------------------------------------------------------- tournament */
.view-wide { max-width: 1280px; }
.tournament-cta { display: block; margin: 14px auto 0; }
.tournament-status {
  text-align: center;
  font-family: "Anton", sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  min-height: 22px;
  margin-bottom: 14px;
}
.bracket-scroll { overflow-x: auto; padding-bottom: 12px; }
.bracket { display: flex; gap: 14px; align-items: center; min-width: max-content; padding: 4px 2px; }
.bracket-col { display: flex; flex-direction: column; gap: 10px; justify-content: space-around; align-self: stretch; }
.bracket-col-title {
  font-family: "Anton", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: 2px;
}
.bout-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  width: 190px;
  cursor: pointer;
  transition: border-color 160ms;
}
.bout-card:hover { border-color: var(--gold); }
.bout-side {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-faint);
  padding: 3px 0;
}
.bout-side.winner { color: var(--ink); font-weight: 700; }
.bout-side .bout-seed {
  font-family: "Anton", sans-serif;
  font-size: 10px;
  color: var(--gold);
  min-width: 16px;
}
.bout-side .bout-pct { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; }
.bout-side.winner .bout-pct { color: var(--gold); }
.champion-col { justify-content: center; }
.champion-card {
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 22px 26px;
  text-align: center;
  width: 190px;
  animation: slam 320ms var(--ease-overshoot) both;
}
.champion-card .crest { width: 84px; margin: 0 auto 12px; }
.champion-card .fname { font-family: "Anton", sans-serif; font-size: 18px; }
.champion-card .fnick { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- fight night */
.daily-fight .airtime { color: var(--gold); font-size: 12px; margin-top: 6px; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ========================================================================
   THE GOAT MACHINE — master brand layer
   A neutral broadcast chassis: team colours belong to the matchup, not the UI.
   ======================================================================== */
:root {
  --bg: #10120f;
  --bg-raised: #171a16;
  --bg-card: #1b1e19;
  --ink: #f2f0e8;
  --ink-dim: #b2b2a9;
  --ink-faint: #767a70;
  --gold: #ffad20;
  --gold-bright: #ffc55e;
  --red: #ff4b32;
  --red-bright: #ff795c;
  /* Semantic "correct" accent is SKY, not green: the brand forbids the
     yellow-green family outright and reads any green as turf, not UI. */
  --green: #55d2e8;
  --border: rgba(242, 240, 232, 0.14);
  --grid: rgba(242, 240, 232, 0.035);
}

body.goat-arena {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(ellipse 850px 540px at 76% 0%, rgba(17,73,201,.10), transparent 68%),
    radial-gradient(ellipse 760px 560px at 8% 48%, rgba(255,91,53,.045), transparent 70%);
  background-size: 48px 48px, 48px 48px, auto, auto;
}

body.goat-arena::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: .08;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.15) 4px);
  mix-blend-mode: overlay;
}

.goat-nav {
  min-height: 72px;
  padding: 13px clamp(18px,4vw,56px);
  background: rgba(16,18,15,.86);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.goat-nav .wordmark {
  display: grid;
  grid-template-columns: auto auto auto 8px;
  gap: 5px;
  align-items: baseline;
  text-decoration: none;
  line-height: .85;
  letter-spacing: 0;
}
.wordmark-the { font-family: "Archivo",sans-serif; font-size: 8px; font-weight: 900; transform: rotate(-90deg) translate(-2px,1px); }
.wordmark-goat { font-size: 25px; }
.wordmark-machine { font-family: "Archivo",sans-serif; font-size: 10px; font-weight: 900; letter-spacing: .18em; color: var(--gold); }
.status-light { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); align-self: center; animation: machinePulse 2s steps(1) infinite; }
@keyframes machinePulse { 0%,84%{opacity:1} 85%,92%{opacity:.2} 93%,100%{opacity:1} }

.goat-nav a.nav-link { font-weight: 800; letter-spacing: .1em; }
.view { max-width: 1080px; }
.goat-hero { padding: clamp(64px,10vw,118px) 10px 36px; position: relative; }
.goat-hero::after { content:"TGM / 001"; position:absolute; right:0; top:40%; color:var(--ink-faint); font:700 9px/1 "Archivo"; letter-spacing:.18em; writing-mode:vertical-rl; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:20px; color:var(--ink-dim); font-size:10px; font-weight:800; letter-spacing:.2em; }
.live-pip { width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 14px var(--red); }
.goat-hero .wordmark-hero { font-size:clamp(62px,13.4vw,146px); letter-spacing:-.045em; line-height:.75; text-wrap:balance; }
.goat-hero .wordmark-hero > span { display:inline-block; font-family:"Archivo",sans-serif; font-size:.13em; letter-spacing:.08em; transform:rotate(-90deg) translateY(-.55em); transform-origin:center; }
.goat-hero .wordmark-hero em { color:var(--gold); font-style:normal; -webkit-text-stroke:1px var(--gold); text-shadow:7px 7px 0 rgba(255,75,50,.12); }
.hero-kicker { margin:26px 0 0; font-family:"Anton",sans-serif; font-size:clamp(22px,4vw,44px); letter-spacing:.03em; }
.hero-kicker span { color:transparent; -webkit-text-stroke:1px var(--ink-dim); }
.goat-hero .tagline { max-width:660px; margin:13px auto 0; font-size:clamp(15px,2vw,18px); line-height:1.55; }
.proof-strip { display:flex; justify-content:center; gap:0; margin:34px auto 0; border:1px solid var(--border); width:max-content; max-width:100%; background:rgba(16,18,15,.6); }
.proof-strip span { padding:10px 18px; color:var(--ink-faint); font-size:10px; text-transform:uppercase; letter-spacing:.07em; border-right:1px solid var(--border); white-space:nowrap; }
.proof-strip span:last-child { border-right:0; }
.proof-strip b { color:var(--ink); font-size:12px; }

.daily-fight { border-radius:0; border:1px solid var(--ink); padding:0; position:relative; overflow:hidden; background:linear-gradient(105deg,#20241d,#171a16); }
.daily-fight::before { content:"FEATURED TRANSMISSION"; position:absolute; top:0; right:0; background:var(--red); color:#10120f; padding:5px 9px; font-size:8px; font-weight:900; letter-spacing:.12em; }
.daily-fight > div:not(.daily-index) { padding:24px 12px; }
.daily-index { align-self:stretch; display:grid; place-items:center; min-width:72px; padding:12px!important; border-right:1px solid var(--border); color:var(--ink-faint); font:400 34px/1 "Anton"; }
.daily-fight .label { color:var(--gold); }
.daily-fight .matchup { font-size:clamp(18px,3vw,27px); }
.daily-fight .btn-gold { margin-right:24px; }

.mode-btn { border-radius:0; border-right:0; background:transparent; padding:10px 22px; font-weight:800; text-transform:uppercase; }
.mode-btn:last-child { border-right:1px solid var(--border); }
.mode-btn.active { background:var(--gold); color:var(--bg); border-color:var(--gold); box-shadow:4px 4px 0 rgba(255,75,50,.15); }
.btn-gold { border-radius:0; color:#10120f; }
.btn-secondary { border-radius:0; }
.tournament-cta { border-style:dashed; }
.roster-heading { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--border); padding-bottom:10px; }
.roster-heading span { color:var(--ink); font-family:"Anton"; font-size:22px; letter-spacing:.04em; }
.roster-heading small { font-size:9px; font-weight:700; }
.roster-chip { border-radius:0; text-align:left; position:relative; overflow:hidden; padding:14px; }
.roster-chip::after { content:"↗"; position:absolute; top:9px; right:10px; color:var(--ink-faint); }
.roster-chip:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.25); }
.crest { border-radius:20%; transform:rotate(45deg); }
.crest .initials { transform:rotate(-45deg); }

@media (max-width: 680px) {
  .goat-nav nav { display:flex; }
  .goat-nav a.nav-link { font-size:9px; margin-left:11px; }
  .goat-hero { padding-top:64px; }
  .goat-hero::after { display:none; }
  .proof-strip { width:100%; }
  .proof-strip span { flex:1; padding:9px 7px; white-space:normal; line-height:1.3; }
  .daily-index { min-width:50px; }
  .daily-fight .btn-gold { margin:0 16px 16px 66px; width:calc(100% - 82px); }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .tale-of-tape { flex-direction: column; align-items: center; }
  .vs-glyph { margin: 4px 0; }
  .fighter-card { width: 100%; max-width: 340px; }
  .hud-top { flex-direction: row; }
}

/* ---------------------------------------------------------------- team-sport HUD */
.watch-view.sport-team .hud-bar-label,
.watch-view.sport-team .hud-bar-track { display: none; }
/* Basketball: the first bar is points toward 21; the log carries no stamina,
   no TV pace to switch to, and no written commentary (narrate.js covers
   boxing and MMA), so those stand down rather than sit empty. The beat feed
   is basketball's commentary. */
.watch-view.sport-court .hud-label-stamina,
.watch-view.sport-court .hud-track-stamina,
.watch-view.sport-court #watch-pace,
.watch-view.sport-court .commentary { display: none; }
.watch-view.sport-team .hud-name { margin-bottom: 0; }

/* ---------------------------------------------------------------- THE MOMENT */
.moment-overlay {
  position: fixed;
  inset: 0;
  background: #07070a;
  z-index: 200;
  animation: stateIn 400ms var(--ease-standard);
}
.moment-stage { position: absolute; inset: 0; }
.moment-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.moment-controls {
  position: absolute;
  bottom: 22px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}
.moment-controls .btn-secondary { background: rgba(11,11,14,0.7); backdrop-filter: blur(6px); }

.moment-btn { font-size: 16px; padding: 14px 26px; }

/* ---------------------------------------------------------------- v2 brand: sportswear editorial, four sports as peers */
:root {
  --bg: #f5eddd;
  --bg-raised: #ffffff;
  --bg-card: #ffffff;
  --ink: #101119;
  --ink-dim: #545666;
  --ink-faint: #747585;
  --gold: #ff4b32;
  --gold-bright: #ff6a2a;
  --red: #ff4b32;
  --red-bright: #ff6a2a;
  --green: #16a7c8;
  --blue: #1149c9;
  --sky: #55d2e8;
  --border: rgba(16,17,25,.17);
}
html, body { background:#f5eddd; color:var(--ink); }
body.goat-arena { background:#f5eddd; }
body.goat-arena::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; z-index:1000; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.goat-nav { padding:12px clamp(16px,4vw,54px); border:0; background:#f5eddd; color:#101119; position:relative; }
.goat-nav::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,#1149c9 0 55%,#ff4b32 55% 79%,#ffad20 79%); }
.goat-nav .wordmark { display:flex; align-items:center; gap:10px; color:#101119; transform:none; }
.goat-nav .wordmark img { width:46px; height:46px; }
.goat-nav .wordmark > span { display:flex; flex-direction:column; line-height:.78; }
.goat-nav .wordmark b { font:400 23px/1 "Anton"; letter-spacing:.01em; }
.goat-nav .wordmark small { font:900 8px/1 "Archivo"; letter-spacing:.32em; color:#ff4b32; margin-top:6px; }
.goat-nav a.nav-link { color:#101119; font-weight:900; }
.goat-nav a.nav-link:hover { color:#ff4b32; }
.view { max-width:1180px; padding-left:clamp(14px,3vw,32px); padding-right:clamp(14px,3vw,32px); }
.goat-hero { min-height:680px; margin:0 calc(clamp(14px,3vw,32px) * -1) 34px; padding:0; text-align:left; overflow:hidden; background:#1149c9; position:relative; display:flex; align-items:center; isolation:isolate; }
.goat-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,73,201,.98) 0%,rgba(17,73,201,.9) 34%,rgba(17,73,201,.12) 63%,transparent 100%); z-index:1; }
.goat-hero::after { content:"GREATEST / OF / ALL / TIME"; position:absolute; right:22px; top:30px; color:#fff4df; font:900 9px/1.3 "Archivo"; letter-spacing:.2em; writing-mode:vertical-rl; z-index:3; }
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.hero-copy { position:relative; z-index:2; width:min(610px,58%); padding:70px clamp(26px,6vw,74px); color:#fff4df; }
.eyebrow { display:inline-block; color:#101119; background:#ffad20; transform:rotate(-2deg); padding:8px 12px; font:900 10px/1 "Archivo"; letter-spacing:.17em; margin:0 0 24px; }
.goat-hero .wordmark-hero { color:#fff4df; font-size:clamp(68px,10vw,132px); line-height:.75; letter-spacing:-.045em; text-shadow:7px 7px 0 #101119; }
.goat-hero .wordmark-hero em { color:#ff4b32; -webkit-text-stroke:0; text-shadow:7px 7px 0 #101119; }
.hero-kicker { color:#fff4df; font-size:clamp(20px,3vw,36px); margin:30px 0 0; }
.hero-kicker span { color:#55d2e8; -webkit-text-stroke:0; }
.goat-hero .tagline { color:#fff4df; max-width:510px; margin:12px 0 0; font-weight:650; }
.proof-strip { margin:25px 0 0; border:2px solid #fff4df; background:#101119; }
.proof-strip span { color:#fff4df; border-color:rgba(255,244,223,.3); }
.proof-strip b { color:#ffad20; }
.hero-jump { display:inline-block; margin-top:25px; color:#101119; background:#fff4df; padding:14px 18px; font:900 11px/1 "Archivo"; letter-spacing:.1em; text-decoration:none; box-shadow:5px 5px 0 #ff4b32; }
.hero-stamp { position:absolute; z-index:2; right:32px; bottom:28px; width:108px; height:108px; border:3px solid #fff4df; border-radius:50%; display:grid; place-items:center; text-align:center; color:#fff4df; font:900 9px/1.25 "Archivo"; letter-spacing:.09em; transform:rotate(8deg); }
.daily-fight { background:#ff4b32; color:#101119; border:3px solid #101119; box-shadow:8px 8px 0 #101119; }
.daily-fight::before { background:#101119; color:#fff4df; }
.daily-fight .label,.daily-fight .streak,.daily-fight .airtime { color:#101119; }
.daily-index { color:#101119; border-color:#101119; }
.btn-gold { background:#1149c9; color:#fff4df; box-shadow:5px 5px 0 #101119; }
.btn-gold:hover { background:#0b3aaa; }
.mode-btn.active { background:#1149c9; color:#fff4df; border-color:#101119; box-shadow:4px 4px 0 #ff4b32; }
.btn-secondary { border-color:#101119; color:#101119; background:#fff; }
.roster-heading { border-color:#101119; }
.roster-chip { border:2px solid #101119; background:#fff; box-shadow:3px 3px 0 rgba(16,17,25,.14); }
.roster-chip:hover { border-color:#1149c9; box-shadow:5px 5px 0 #55d2e8; }
.crest { border-color:#101119; }
.fighter-card,.goat-modal-inner { border:2px solid #101119; box-shadow:6px 6px 0 #1149c9; }
.attr-bar-fill { background:linear-gradient(90deg,#1149c9,#55d2e8); }
@media (max-width:720px) {
  .goat-hero { min-height:700px; align-items:flex-end; }
  .goat-hero::before { background:linear-gradient(0deg,#1149c9 0%,rgba(17,73,201,.92) 43%,rgba(17,73,201,.08) 73%); }
  .hero-art { object-position:66% center; }
  .hero-copy { width:100%; padding:290px 22px 40px; }
  .goat-hero .wordmark-hero { font-size:clamp(62px,20vw,96px); }
  .hero-stamp { width:80px; height:80px; right:14px; top:18px; bottom:auto; font-size:7px; }
  .proof-strip { width:100%; }
}

/* ---------------------------------------------------------------- v3 editorial system: remove product-UI/card language */
body.goat-arena { background:#101119; }
#view-landing { background:#f5eddd; padding-bottom:0; }
.goat-nav { position:absolute; inset:0 0 auto; z-index:50; background:transparent; color:#fff4df; min-height:76px; }
.goat-nav::after { display:none; }
.goat-nav .wordmark,.goat-nav a.nav-link { color:#fff4df; }
.goat-nav .wordmark small { color:#ffad20; }
.goat-nav .wordmark img { filter:drop-shadow(3px 3px 0 #101119); }
.goat-hero { min-height:100svh; width:100vw; max-width:none; left:50%; margin:0 0 0 -50vw; }
.goat-hero::before { background:linear-gradient(90deg,rgba(7,25,73,.98) 0%,rgba(17,73,201,.8) 38%,rgba(17,73,201,.03) 68%); }
.hero-copy { padding-top:130px; }
.goat-hero .wordmark-hero { font-size:clamp(82px,11.8vw,168px); }
.hero-jump { box-shadow:none; border-bottom:7px solid #ff4b32; transform:skew(-5deg); }
.proof-strip { border:0; background:transparent; width:auto; }
.proof-strip span { border:0; border-left:4px solid #ff4b32; padding:2px 28px 2px 10px; font-size:9px; }
.proof-strip span:first-child { padding-left:10px; }
.proof-strip b { display:block; color:#fff4df; font:400 30px/1 "Anton"; }
.daily-fight { width:100vw; max-width:none; left:50%; margin:0 0 0 -50vw; min-height:150px; padding:0 clamp(24px,8vw,120px); border:0; box-shadow:none; background:#ff4b32; display:grid; grid-template-columns:95px 1fr auto; border-bottom:12px solid #101119; }
.daily-fight::before { top:auto; bottom:0; right:clamp(24px,8vw,120px); padding:6px 12px; }
.daily-index { border:0; border-right:1px solid rgba(16,17,25,.35); font-size:70px; }
.daily-fight > div:not(.daily-index) { padding:35px 30px; }
.daily-fight .matchup { font:400 clamp(30px,4vw,58px)/.95 "Anton"; text-transform:uppercase; letter-spacing:-.02em; }
.daily-fight .btn-gold { margin:0; background:#101119; box-shadow:none; min-width:160px; align-self:stretch; }
.daily-fight .btn-gold:hover { background:#1149c9; }
.roster-heading i { color:#ff4b32; font:900 10px/1 "Archivo"; letter-spacing:.08em; vertical-align:top; font-style:normal; margin-right:10px; }
.tournament-cta { display:block; margin:20px auto 82px; border:0; border-bottom:2px solid #101119; background:transparent; }
.roster-heading { width:100vw; max-width:none; position:relative; left:50%; margin:0 0 0 -50vw; padding:70px clamp(24px,8vw,120px) 24px; border:0; background:#1149c9; color:#fff4df; }
.roster-heading span { color:#fff4df; font-size:clamp(42px,7vw,92px); letter-spacing:-.03em; }
.roster-heading small { color:#fff4df; max-width:300px; text-align:right; line-height:1.4; }
.roster-grid { width:100vw; max-width:none; position:relative; left:50%; margin-left:-50vw; padding:0 clamp(24px,8vw,120px) 90px; background:#1149c9; grid-template-columns:repeat(3,1fr); gap:0; counter-reset:goatindex; }
.roster-chip { counter-increment:goatindex; min-height:95px; padding:18px 10px 18px 0; display:grid; grid-template-columns:35px 54px 1fr; align-items:center; gap:12px; border:0; border-top:1px solid rgba(255,244,223,.45); background:transparent; color:#fff4df; box-shadow:none; font-size:15px; }
.roster-chip::before { content:counter(goatindex,decimal-leading-zero); color:#55d2e8; font:900 9px/1 "Archivo"; }
.roster-chip::after { display:none; }
.roster-chip:hover { border-color:#ffad20; color:#ffad20; box-shadow:none; transform:none; }
.roster-chip .crest-mini { margin:0; }
.roster-chip .chip-nick { color:#a9c0ff; font-size:9px; grid-column:3; margin-top:-22px; }
#view-tournament .goat-hero { min-height:330px; width:auto; left:auto; margin:0; padding:110px 30px 40px; background:#1149c9; display:block; }
#view-tournament .goat-hero::before { display:none; }
#view-tournament .goat-hero .tagline { margin:18px auto 0; color:#fff4df; }
@media (max-width:760px) {
  .goat-nav { position:absolute; }
  .goat-nav nav { display:none; }
  .goat-hero { min-height:820px; }
  .hero-copy { padding-top:340px; }
  .daily-fight { grid-template-columns:60px 1fr; padding:0 16px; }
  .daily-fight .btn-gold { grid-column:2; width:100%; min-height:58px; margin:0 0 18px; }
  .daily-index { font-size:44px; }
  .daily-fight > div:not(.daily-index) { padding:25px 16px; }
  .roster-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .roster-heading small { text-align:left; }
  .roster-grid { grid-template-columns:1fr; padding-left:20px; padding-right:20px; }
}

/* ------------------------------------------------------------------
   Touch ergonomics. Most shared links open on a phone, and the sport
   and mode toggles were landing at 34-40px — under the 44px minimum
   both Apple's HIG and WCAG 2.5.8 ask for, which makes them genuinely
   fiddly to hit one-handed.
   ------------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 760px) {
  .mode-btn,
  .btn-secondary,
  .moment-controls button {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .goat-nav a.nav-link {
    display: inline-block;
    padding: 12px 4px;
    min-height: 44px;
  }
}

/* Keyboard users get a visible, on-brand focus ring everywhere. */
:focus-visible {
  /* Two-tone so it reads on every surface: the gold ring vanished on cream
     and orange, which is most of the site. Ink ring + gold halo. */
  outline: 3px solid #101119;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #ffad20;
}

/* Watch-overlay controls: keep every label on one line and clear of the
   ticker strip, on phones as well as desktop. */
.moment-controls button { white-space: nowrap; }
@media (max-width: 420px) {
  .moment-controls { gap: 6px; bottom: 14px; }
  .moment-controls button { padding-left: 10px; padding-right: 10px; font-size: 13px; }
}

/* ---------------------------------------------------------------- FILM ACT BREAKS

   js/edit.js compiles a quarter card into the cut and budgets film time for
   it; until now the renderer spent that hold on the same small
   down-and-distance dip that covers every ordinary snap, so the film had no
   act structure a viewer could see. This is that card: cobalt ground, poster
   type, the down and distance demoted to small print under the rule. */
.gi-chapter-card {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0;
  padding: 0 clamp(24px, 7vw, 96px);
  background: #1149c9;
  color: #fff4df;
  opacity: 0;
  visibility: hidden;
  text-transform: uppercase;
  transition: opacity 140ms linear, visibility 140ms linear;
}
.gi-chapter-card.is-visible { opacity: 1; visibility: visible; }
.gi-chapter-card span {
  font: 900 clamp(9px, 1.1vw, 13px)/1 "Archivo", system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #ffad20;
}
.gi-chapter-card strong {
  margin: clamp(10px, 1.6vw, 20px) 0 0;
  font: 400 clamp(52px, 11vw, 168px)/0.82 "Anton", sans-serif;
  letter-spacing: -0.035em;
}
.gi-chapter-card small {
  margin-top: clamp(12px, 1.8vw, 22px);
  padding-top: clamp(10px, 1.4vw, 16px);
  /* One hard ink line, no glow: the rule under a printed act break. */
  border-top: 3px solid #101119;
  font: 900 clamp(9px, 1.1vw, 13px)/1.2 "Archivo", system-ui, sans-serif;
  letter-spacing: 0.13em;
  color: #fff4df;
}

/* ------------------------------------------------------- FILM LOADING PROGRESS

   The cast is ~12MB of GLB. A card that never moves for ten seconds reads as
   a broken page, so the loader reports what has actually landed. */
.gi-rig-progress {
  display: block;
  width: min(320px, 62vw);
  margin: clamp(18px, 3vw, 30px) auto 0;
}
.gi-rig-progress b {
  display: block;
  font: 400 clamp(22px, 3.4vw, 38px)/1 "Anton", sans-serif;
  letter-spacing: -0.02em;
  color: #ffad20;
}
.gi-rig-track {
  display: block;
  height: 10px;
  margin: 10px 0 9px;
  background: #101119;
  border: 2px solid #fff4df;
}
.gi-rig-track > i {
  display: block;
  width: 0;
  height: 100%;
  background: #ff4b32;
  transition: width 180ms linear;
}
.gi-rig-progress small {
  display: block;
  font: 900 11px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #fff4df;
  /* Motion of its own, so a stalled byte counter still looks alive. */
  animation: gi-rig-pulse 1.6s steps(2, end) infinite;
}
@keyframes gi-rig-pulse { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .gi-rig-progress small { animation: none; }
  .gi-rig-track > i { transition: none; }
}

/* The act break replaces the live frame rather than sitting on top of it. The
   card fades in over 140ms, and for those frames it is semi-transparent: a
   score bug reading through a printed title page is the one thing that would
   break it, so the broadcast furniture leaves the frame with the football.
   The transition sits on the base rule so the furniture eases back in when
   the act break ends as well, rather than snapping on at the first snap. */
#gi-matchup,
#gi-bug,
#gi-playcall,
#gi-dd,
#gi-ticker { transition: opacity 120ms linear; }
.edit-chapter-active #gi-matchup,
.edit-chapter-active #gi-bug,
.edit-chapter-active #gi-playcall,
.edit-chapter-active #gi-dd,
.edit-chapter-active #gi-ticker { opacity: 0; }