/* The GOAT Machine — refined editorial system, August 2026. */

:root {
  --cream: #fff4df;
  --paper: #f7ecd7;
  --black: #101119;
  --blue: #1149c9;
  --red: #ff4b32;
  --orange: #ffad20;
  --sky: #55d2e8;
}

html { scroll-behavior: smooth; }
body.goat-arena { background: var(--black); color: var(--black); }
body.goat-arena::before { opacity: .07; }
button, select, a { -webkit-tap-highlight-color: transparent; }

/* Navigation */
.goat-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  min-height: 78px;
  padding: 15px clamp(20px, 4vw, 58px);
  background: transparent;
  border: 0;
}
.goat-nav::after { display: none; }
.goat-nav .wordmark,
.goat-nav a.nav-link { color: var(--cream); }
.goat-nav .wordmark { gap: 11px; transform: none; }
.goat-nav .wordmark img { width: 40px; height: 40px; filter: none; }
.goat-nav .wordmark .brand-type { display: flex; flex-direction: row; align-items: baseline; gap: 5px; line-height: 1; white-space: nowrap; }
.goat-nav .wordmark .brand-type i { color: var(--sky); font: 800 7px/1 "Archivo"; font-style: normal; letter-spacing: .12em; }
.goat-nav .wordmark .brand-type b { color: var(--cream); font: 900 24px/.8 "Archivo"; font-stretch: condensed; letter-spacing: -.095em; transform: skew(-7deg); transform-origin: left bottom; }
.goat-nav .wordmark .brand-type small { margin: 0; color: var(--cream); font: 800 9px/1 "Archivo"; letter-spacing: .025em; }
.goat-nav .wordmark sup { align-self: flex-start; margin: 3px 0 0 -2px; color: var(--orange); font: 800 6px/1 "Archivo"; letter-spacing: .04em; }
.goat-nav a.nav-link { font-size: 10px; border-bottom: 1px solid rgba(255,244,223,.5); padding-bottom: 5px; }
.goat-nav a.nav-link:hover { color: var(--orange); border-color: var(--orange); }

/* Landing foundation */
#view-landing { max-width: none; padding: 0; background: var(--cream); overflow: hidden; }
.goat-hero {
  width: 100%;
  min-height: 760px;
  margin: 0;
  left: auto;
  display: grid;
  align-items: center;
  text-align: left;
  overflow: hidden;
  background: var(--blue);
  isolation: isolate;
}
.goat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10,38,112,.98) 0%, rgba(17,73,201,.88) 31%, rgba(17,73,201,.24) 52%, transparent 72%);
}
/* The hero shell now only dresses the heavyweight tournament, which is boxing
   alone; the sport tag it printed named three sports it never ran. */
.goat-hero::after { content: none; }
.hero-art { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(780px, 62%);
  padding: 132px 5vw 72px;
  color: var(--cream);
}
.eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding: 7px 10px;
  color: var(--black);
  background: var(--orange);
  font: 900 10px/1 "Archivo";
  letter-spacing: .16em;
  transform: rotate(-1deg);
}
.goat-hero .wordmark-hero {
  max-width: 800px;
  margin: 0;
  color: var(--cream);
  font-size: clamp(62px, 8.2vw, 128px);
  line-height: .84;
  letter-spacing: -.045em;
  text-shadow: none;
}
.goat-hero .wordmark-hero em {
  display: inline;
  color: var(--red);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.goat-hero .tagline {
  max-width: 650px;
  margin: 25px 0 0;
  color: var(--cream);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.45;
  font-weight: 650;
}
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.hero-jump {
  margin: 0;
  padding: 15px 18px 13px;
  color: var(--black);
  background: var(--cream);
  border: 0;
  border-bottom: 6px solid var(--red);
  box-shadow: none;
  font: 900 11px/1 "Archivo";
  letter-spacing: .1em;
  text-decoration: none;
}
.hero-link { color: var(--cream); font: 900 10px/1 "Archivo"; letter-spacing: .12em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.proof-strip { display: flex; justify-content: flex-start; width: auto; margin: 34px 0 0; border: 0; background: transparent; }
.proof-strip span { min-width: 140px; padding: 0 24px 0 11px; color: rgba(255,244,223,.76); border: 0; border-left: 3px solid var(--red); font-size: 9px; line-height: 1.35; white-space: normal; }
.proof-strip b { display: block; color: var(--cream); font: 400 25px/1 "Anton"; letter-spacing: .02em; }
.hero-stamp { right: 28px; bottom: 26px; width: 112px; height: 112px; color: var(--black); border-color: var(--black); background: rgba(255,244,223,.74); backdrop-filter: none; }

/* Explanation */
.how-it-works { position: relative; overflow: hidden; padding: clamp(70px,9vw,130px) clamp(22px,8vw,120px); background: var(--cream); }
.how-it-works::after { content: ""; position: absolute; width: 42vw; height: 42vw; right: -18vw; top: -20vw; border: 1px solid rgba(16,17,25,.18); border-radius: 50%; box-shadow: 0 0 0 40px rgba(16,17,25,.035), 0 0 0 90px rgba(16,17,25,.025); }
.section-kicker { color: var(--red); font: 900 10px/1 "Archivo"; letter-spacing: .16em; }
.how-it-works h2 { position: relative; z-index: 1; max-width: 980px; margin: 13px 0 18px; font: 400 clamp(50px,8vw,112px)/.86 "Anton"; letter-spacing: -.03em; }
.how-lede { max-width: 660px; margin: 0; font-size: clamp(17px,2vw,23px); line-height: 1.45; font-weight: 650; }
.how-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); margin: 65px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--black); }
.how-steps li { min-height: 210px; padding: 18px 30px 20px 0; border-right: 1px solid rgba(16,17,25,.28); }
.how-steps li + li { padding-left: 30px; }
.how-steps li:last-child { border-right: 0; }
.how-steps span { display: block; margin-bottom: 38px; color: var(--red); font: 900 10px/1 "Archivo"; }
.how-steps strong { display: block; font: 400 clamp(24px,2.5vw,38px)/1 "Anton"; }
.how-steps p { max-width: 340px; color: #4d4d55; font-size: 14px; line-height: 1.5; }

.tournament-cta { margin: 24px auto 0; color: #b6b8c1; background: transparent; border: 0; border-bottom: 1px solid #6c6f79; }

/* Editorial featured matchup */
.daily-feature { position: relative; min-height: 660px; overflow: hidden; background: var(--paper); }
.daily-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.daily-feature .daily-fight { position: absolute; left: 50%; bottom: 0; width: min(1100px, calc(100% - 44px)); min-height: 180px; margin: 0; padding: 0; transform: translateX(-50%); display: grid; grid-template-columns: 88px 1fr 190px; color: var(--black); background: rgba(255,244,223,.94); border: 0; border-top: 8px solid var(--red); box-shadow: none; }
.daily-feature .daily-fight::before { display: none; }
.daily-feature .daily-index { color: var(--red); border-right: 1px solid rgba(16,17,25,.25); font-size: 52px; }
.daily-feature .daily-fight > div:not(.daily-index) { padding: 27px 24px; }
.daily-feature .daily-fight .label { color: var(--blue); }
.daily-feature .daily-fight .matchup { margin: 4px 0 8px; color: var(--black); font: 400 clamp(27px,3.5vw,48px)/.95 "Anton"; }
.daily-feature .daily-fight .streak,
.daily-feature .daily-fight .airtime { color: #555661; }
.daily-feature .daily-fight .btn-gold { width: 100%; margin: 0; align-self: stretch; color: var(--cream); background: var(--blue); box-shadow: none; }

/* Index */
.roster-heading { position: static; left: auto; width: auto; margin: 0; padding: 85px clamp(22px,8vw,120px) 28px; color: var(--cream); background: var(--blue); border: 0; }
.roster-heading span { color: var(--cream); font-size: clamp(48px,7vw,92px); }
.roster-heading small { max-width: 360px; color: #c7d3fa; font-size: 10px; line-height: 1.5; }
.roster-grid { position: static; left: auto; width: auto; margin: 0; padding: 0 clamp(22px,8vw,120px) 90px; grid-template-columns: repeat(3,1fr); color: var(--cream); background: var(--blue); }
.roster-chip { min-height: 100px; padding: 18px 14px 18px 0; color: var(--cream); background: transparent; border: 0; border-top: 1px solid rgba(255,244,223,.44); box-shadow: none; }
.roster-chip:hover { color: var(--orange); border-color: var(--orange); box-shadow: none; transform: none; }

/* Ceremony and verdict experience */
#view-fight { max-width: none; min-height: 100vh; padding: 100px clamp(18px,5vw,70px) 70px; color: var(--cream); background: var(--black); }
.ceremony-stage { min-height: calc(100vh - 170px); }
.tale-of-tape { width: 100%; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: stretch; gap: 0; }
.fighter-card { width: auto; padding: clamp(22px,4vw,42px); color: var(--black); background: var(--cream); border: 0; border-top: 7px solid var(--blue); border-radius: 0; box-shadow: none; }
.fighter-card.side-b { border-color: var(--red); }
.fighter-card .crest { margin-left: 0; }
.fighter-card .fname,.fighter-card .fnick,.fighter-card .fmeta { text-align: left; }
.vs-glyph { margin: 0; display: grid; place-items: center; color: var(--red); background: #181a22; font-size: 42px; }
.lock-in h2 { color: var(--cream); font-size: clamp(52px,8vw,104px); }
.pick-btn { border: 1px solid #454752; border-radius: 0; background: #191b23; }
.pick-btn:hover,.pick-btn.locked { border-color: var(--red); background: #242631; }
.pick-btn .pname { color: var(--cream); font-size: 22px; }
.skip-link { color: #a4a6af; }
.simulation h2 { color: var(--cream); font-size: clamp(36px,6vw,76px); }
.tally-row { width: min(720px,100%); margin: 0 auto 22px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: clamp(12px,3vw,28px); }
.tally-side { min-width: 0; padding: 16px clamp(12px,3vw,28px) 14px; display: grid; align-content: center; background: #191b23; border: 2px solid #454752; }
.tally-side small,.tally-side b { overflow: hidden; color: #c8cad2; font: 900 clamp(8px,1vw,11px)/1.25 "Archivo"; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.tally-side b { color: var(--cream); font-size: 10px; letter-spacing: .14em; }
.tally-num { display: block; line-height: .95; }
/* Each side of the tally is a slab of that player's ink (js/sides.js, set
   on .simulation by js/app.js): the colour he wore on THE PICK and wears on
   the call slab, the machine and the reveal. Never a seat colour. */
.tally-side.side-a { background: var(--side-a, #191b23); border-color: var(--side-a, #454752); }
.tally-side.side-b { background: var(--side-b, #191b23); border-color: var(--side-b, #454752); }
.tally-side.side-a small, .tally-side.side-a b { color: var(--side-a-ink, var(--cream)); }
.tally-side.side-b small, .tally-side.side-b b { color: var(--side-b-ink, var(--cream)); }
.tally-num.a { color: var(--side-a-ink, var(--cream)); }
.tally-num.b { color: var(--side-b-ink, var(--cream)); }
.tally-dash { color: var(--cream); }
.prob-bar-track { height: 18px; background: #07080b; border: 2px solid #545762; border-radius: 0; }
.prob-bar-fill-a { background: var(--side-a, var(--blue)); }
.prob-bar-fill-b { background: var(--side-b, var(--orange)); }
.tally-box { border-radius: 0; background: #191b23; border: 1px solid #343641; }
.tally-count { color: var(--cream); }
.verdict .verdict-winner { color: var(--cream); font-size: clamp(42px,7vw,96px); }
.verdict .verdict-pct { color: var(--red); font-size: clamp(110px,23vw,280px); text-shadow: none; }
.verdict .verdict-sub { color: #afb1bb; }
.method-row,.crowd-delta,.round-histo { border-radius: 0; }
.afterglow { width: min(1120px,100%); margin: 0 auto; }
.persistent-verdict { margin-bottom: 34px; color: var(--black); background: var(--cream); border-top: 8px solid var(--red); text-align: left; }
.persistent-verdict > header { min-height: 46px; padding: 0 clamp(20px,4vw,44px); display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--cream); background: var(--black); }
.persistent-verdict > header span,.persistent-verdict > header b,.persistent-verdict-main span,.persistent-verdict-main small,.persistent-verdict-evidence span,.persistent-verdict-evidence small,.persistent-verdict footer { font: 900 10px/1.35 "Archivo"; letter-spacing: .11em; }
.persistent-verdict > header span { color: var(--orange); }
.persistent-verdict > header b { color: #aeb0b9; }
.persistent-verdict-main { padding: clamp(28px,4vw,48px) clamp(20px,4vw,44px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 34px; align-items: end; }
.persistent-verdict-main > div > span { color: var(--blue); }
.persistent-verdict-main h1 { max-width: 760px; margin: 12px 0 15px; font: 400 clamp(50px,8vw,106px)/.82 "Anton"; letter-spacing: -.03em; text-transform: uppercase; }
.persistent-verdict-main p { max-width: 720px; margin: 0; color: #4d4e56; font-size: 13px; line-height: 1.55; font-weight: 650; }
.persistent-verdict-main > strong { color: var(--red); font: 400 clamp(72px,12vw,152px)/.78 "Anton"; letter-spacing: -.03em; white-space: nowrap; }
.persistent-verdict-main > strong small { display: block; margin-top: 14px; color: var(--black); text-align: right; }
.persistent-verdict-evidence { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--black); border-bottom: 1px solid var(--black); }
.persistent-verdict-evidence article { min-height: 132px; padding: 18px clamp(20px,4vw,44px); border-right: 1px solid rgba(16,17,25,.3); }
.persistent-verdict-evidence article:last-child { border-right: 0; }
.persistent-verdict-evidence span { color: var(--blue); }
.persistent-verdict-evidence strong { display: block; margin: 18px 0 8px; font: 400 clamp(30px,4vw,52px)/.9 "Anton"; text-transform: uppercase; }
.persistent-verdict-evidence small { display: block; color: #666872; letter-spacing: .04em; }
.persistent-verdict footer { min-height: 48px; padding: 0 clamp(20px,4vw,44px); display: flex; align-items: center; gap: 16px; color: var(--cream); background: var(--blue); }
.persistent-verdict footer b { color: var(--orange); font-size: 14px; }
.matchup-story-result { margin-bottom: 34px; text-align: left; color: var(--cream); border-top: 7px solid var(--red); background: #171920; }
.matchup-story-result > header { padding: 30px clamp(20px,4vw,44px); border-bottom: 1px solid #444650; }
.matchup-story-result > header > span,.matchup-data > span { color: var(--orange); font: 900 10px/1 "Archivo"; letter-spacing: .13em; }
.matchup-story-result h2 { margin: 13px 0 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; font: 400 clamp(34px,5vw,65px)/.9 "Anton"; text-transform: uppercase; }
.matchup-story-result h2 i { color: var(--red); font-size: .5em; font-style: normal; }
.matchup-story-result > header p { max-width: 760px; margin: 0; color: #b3b5be; font-size: 12px; line-height: 1.55; }
.matchup-case { display: grid; grid-template-columns: 1fr 1fr; }
.matchup-case article { min-height: 205px; padding: 28px clamp(20px,4vw,44px); border-right: 1px solid #444650; }
.matchup-case article:last-child { border-right: 0; }
.matchup-case span { color: var(--sky); font: 900 10px/1 "Archivo"; letter-spacing: .12em; text-transform: uppercase; }
.matchup-case article:last-child span { color: var(--red); }
.matchup-case h3 { margin: 21px 0 12px; font: 400 clamp(25px,3vw,39px)/.95 "Anton"; text-transform: uppercase; }
.matchup-case p { margin: 0; color: #c1c3ca; font-size: 12px; line-height: 1.55; }
.matchup-data { padding: 28px clamp(20px,4vw,44px) 38px; color: var(--black); background: var(--orange); }
.matchup-data > span { color: var(--black); }
.matchup-data { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.matchup-data > span { grid-column: 1 / -1; margin-bottom: 18px; }
.matchup-data article { min-height: 180px; padding: 17px 18px 0 0; border-top: 3px solid var(--black); border-right: 1px solid rgba(16,17,25,.4); }
.matchup-data article + article { padding-left: 18px; }
.matchup-data article:last-child { border-right: 0; }
.matchup-data small,.matchup-data b { display: block; font: 900 10px/1.25 "Archivo"; letter-spacing: .09em; text-transform: uppercase; }
.matchup-data article > div { margin: 14px 0 7px; display: flex; gap: 8px; align-items: center; }
.matchup-data strong { font: 400 38px/1 "Anton"; }
.matchup-data i { color: var(--red); font-style: normal; }
.matchup-data b { color: var(--blue); }
.matchup-data p { margin: 12px 0 0; font-size: 10px; line-height: 1.45; }
.afterglow-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.afterglow-actions .btn-gold,.afterglow-actions .btn-secondary { width: 100%; margin: 0; min-height: 58px; border-radius: 0; }
.afterglow-actions .moment-btn:first-child { grid-column: 1 / -1; }
.afterglow > .mode-row { justify-content: flex-start; border-top: 1px solid #41434d; padding-top: 20px; }
.share-canvas-wrap { border-radius: 0; background: #181a22; }
.watch-view { margin: 0; padding: 0; background: #08090d; border: 0; border-radius: 0; }
.watch-controls { padding: 12px; background: #11131a; }
.watch-controls .btn-secondary { color: var(--cream); background: transparent; border-color: #4a4c56; }
.goat-modal { background: rgba(8,9,13,.92); }
.goat-modal-inner { border: 0; border-top: 8px solid var(--red); border-radius: 0; box-shadow: none; }

/* Tournament */
#view-tournament { max-width: none; padding: 0 clamp(18px,5vw,70px) 80px; color: var(--cream); background: var(--black); }
#view-tournament .goat-hero { margin: 0 calc(clamp(18px,5vw,70px) * -1) 40px; width: auto; min-height: 360px; padding: 130px clamp(22px,8vw,120px) 55px; background: var(--blue); }
.bracket-bout { border-radius: 0; background: #191b23; }

/* Controls must read as things you can press, not decorative color fields. */
.btn-gold,
.btn-secondary,
.pick-btn {
  position: relative;
  border: 2px solid var(--black);
  box-shadow: 0 5px 0 var(--black);
  transition: transform 100ms ease, box-shadow 100ms ease, background-color 140ms ease, color 140ms ease;
}
.btn-gold:hover,
.btn-secondary:hover,
.pick-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--black); }
.btn-gold:active,
.btn-secondary:active,
.pick-btn:active { transform: translateY(4px) scale(.99); box-shadow: 0 1px 0 var(--black); }
/* ↗ means "leaves this site". Buttons never do, so they carry no arrow; the
   one place that does leave (a card's source links, new tab) wears it. */
.fm-sources a::after,
.matchup-sources a::after { content: " ↗"; }
.lock-in .pick-btn { border-color: #5c5f6b; box-shadow: 0 5px 0 var(--red); }
.lock-in .pick-btn:hover { border-color: var(--cream); box-shadow: 0 7px 0 var(--red); }
.lock-in .pick-btn:active { transform: translateY(4px) scale(.99); box-shadow: 0 1px 0 var(--red); }
.daily-feature .daily-fight .btn-gold { border: 2px solid var(--black); box-shadow: inset 5px 0 0 var(--red), 0 5px 0 var(--black); }
.afterglow-actions .btn-gold,
.afterglow-actions .btn-secondary { border: 2px solid var(--cream); box-shadow: 0 5px 0 var(--red); }
.afterglow-actions .btn-secondary { color: var(--cream); background: #191b23; }
.watch-controls .btn-secondary,
.moment-controls .btn-secondary { border: 2px solid var(--cream); box-shadow: 0 4px 0 var(--red); }

@media (max-width: 820px) {
  .goat-nav nav { display: none; }
  .goat-hero { min-height: 790px; align-items: end; }
  .goat-hero::before { background: linear-gradient(0deg, rgba(10,38,112,.99) 0%, rgba(17,73,201,.91) 42%, rgba(17,73,201,.08) 72%); }
  .hero-art { object-position: 65% center; }
  .hero-copy { width: 100%; padding: 330px 22px 42px; }
  .goat-hero .wordmark-hero { font-size: clamp(54px,14vw,84px); }
  .goat-hero .tagline { font-size: 15px; }
  .proof-strip span { min-width: 0; flex: 1; padding-right: 8px; }
  .hero-stamp { width: 82px; height: 82px; top: 96px; right: 16px; bottom: auto; font-size: 10px; }
  .how-steps { grid-template-columns: 1fr; }
  .how-steps li,.how-steps li + li { min-height: 0; padding: 20px 0 26px; border-right: 0; border-bottom: 1px solid rgba(16,17,25,.25); }
  .how-steps span { margin-bottom: 14px; }
  .daily-feature { min-height: 720px; }
  .daily-feature > img { object-position: center top; height: 68%; }
  .daily-feature .daily-fight { width: 100%; grid-template-columns: 58px 1fr; }
  .daily-feature .daily-fight .btn-gold { grid-column: 2; min-height: 62px; }
  .roster-heading { display: block; }
  .roster-heading small { display: block; margin-top: 14px; text-align: left; }
  .roster-grid { grid-template-columns: 1fr; }
  .tale-of-tape { grid-template-columns: 1fr; gap: 8px; }
  .vs-glyph { min-height: 58px; }
  .matchup-case { grid-template-columns: 1fr; }
  .matchup-case article { min-height: 0; border-right: 0; border-bottom: 1px solid #444650; }
  .matchup-data { grid-template-columns: 1fr 1fr; }
  .matchup-data article:nth-of-type(2) { border-right: 0; }
  .afterglow-actions { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .goat-nav .wordmark .brand-type small,
  .goat-nav .wordmark sup { display: none; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .proof-strip { gap: 8px; }
  .proof-strip span { padding-left: 7px; font-size: 10px; }
  .proof-strip b { font-size: 21px; }
  .how-it-works { padding-left: 18px; padding-right: 18px; }
  .matchup-data { grid-template-columns: 1fr; }
  .matchup-data article,.matchup-data article + article { min-height: 0; padding: 17px 0 22px; border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==================================================================
   Watch-first product shell — the broadcast is the product, not a modal.
   ================================================================== */

body.goat-arena { padding-top: 78px; }
.skip-to-content {
  position: fixed;
  z-index: 500;
  top: 8px;
  left: 8px;
  padding: 10px 13px;
  color: var(--black);
  background: var(--orange);
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--red);
  font: 900 10px/1 "Archivo";
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 120ms ease;
}
.skip-to-content:focus { transform: translateY(0); }
body.broadcast-open { overflow: hidden; }
/* iOS Safari lets a touch drag scroll the page behind an open film or fight
   despite body overflow:hidden; the lock that actually holds there is
   position:fixed. Phone shell only — the desktop scrollbar must not be
   yanked — and app.js (syncScrollLock) remembers the scroll position the
   fixed lock resets, then restores it on close. */
body[data-shell="phone"].scroll-locked { position: fixed; left: 0; right: 0; width: 100%; }
.goat-nav {
  position: fixed;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--black);
  border-bottom: 1px solid #393b44;
}
.goat-nav::after { display: block; content: ""; position: absolute; left: 0; bottom: -1px; width: 32%; height: 4px; background: var(--red); }
.site-tabs { align-self: stretch; display: flex; gap: 0; }
.site-tab {
  min-width: 132px;
  display: grid;
  place-items: center;
  padding: 0 18px;
  color: #a9abb4;
  background: transparent;
  border: 0;
  border-left: 1px solid #393b44;
  border-bottom: 5px solid transparent;
  font: 900 11px/1 "Archivo";
  letter-spacing: .105em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.site-tab:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }
.site-tab span { margin-right: 8px; color: #6f727d; font-size: 10px; }
.site-tab:hover { color: var(--cream); background: #1a1c24; }
.site-tab.active { color: var(--cream); border-bottom-color: var(--red); background: #1a1c24; }
.site-tab.active span { color: var(--sky); }
.page-view { max-width: none; min-height: calc(100vh - 78px); padding: 0; }

/* Hero broadcast */
.watch-hero {
  /* Was calc(100vh - 78px), which guaranteed the sport doors sat below the
     fold: a visitor's first screen was an NFL trailer, so the product looked
     like an NFL site with other sports buried, and the three doors read as a
     footnote rather than as the choice the whole thing hangs on. The concept
     and the three ways in now share the first screen. */
  position: relative;
  min-height: min(640px, calc(68vh - 78px));
  display: grid;
  grid-template-columns: minmax(340px, 38%) 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  color: var(--cream);
  background: var(--black);
}
.watch-hero-copy {
  position: relative;
  z-index: 4;
  padding: clamp(38px, 4.4vw, 62px) clamp(28px, 4.6vw, 72px) 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #393b44;
  background: var(--blue);
}
.watch-hero-copy::after { content: "WATCH / 01"; position: absolute; right: -37px; top: 52%; padding: 8px 13px; color: var(--black); background: var(--orange); font: 900 10px/1 "Archivo"; letter-spacing: .14em; transform: rotate(90deg); }
.watch-hero-copy .eyebrow { width: fit-content; margin-bottom: 17px; }
.watch-proof { margin: 0 0 15px !important; color: #becdf8 !important; font: 900 9px/1 "Archivo" !important; letter-spacing: .13em; }
.watch-proof b { margin: 0 6px; color: var(--red); }
.watch-hero-copy h1 { margin: 0; font: 400 clamp(44px, 4.7vw, 78px)/.82 "Anton"; letter-spacing: -.035em; text-transform: uppercase; }
.watch-hero-copy h1 span { display: block; }
.watch-hero-copy h1 i { display: block; margin: .55em 0 .4em; color: var(--red); font-size: .39em; line-height: 1; font-style: normal; }
.watch-hero-copy > p:last-of-type { max-width: 540px; margin: 16px 0 0; color: var(--cream); font-size: 15px; line-height: 1.55; font-weight: 650; }
/* Stacked buttons cost 136px of the first screen for two controls that fit
   side by side. The height they were taking is the height the sport doors
   needed. */
.watch-hero-copy .hero-actions { align-items: stretch; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero-watch-button {
  min-height: 62px;
  display: flex;
  align-items: center;
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--cream);
  box-shadow: 0 6px 0 var(--black);
  font: 900 13px/1 "Archivo";
  letter-spacing: .08em;
  text-align: left;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease, background 120ms ease;
}
.hero-watch-button { padding: 0 18px 0 0; background: var(--red); }
.hero-watch-button .play-icon { align-self: stretch; width: 62px; margin-right: 16px; display: grid; place-items: center; color: var(--cream); border-right: 2px solid var(--black); background: var(--black); font-size: 20px; }
.hero-watch-button small { display: block; margin-top: 7px; font-size: 10px; letter-spacing: .12em; }
.hero-watch-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--black); background: var(--orange); }
.hero-watch-button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--black); }
.watch-hero-screen { position: relative; min-width: 0; overflow: hidden; background: #07080b; }
#watch-hero-stage { display: none; }
#watch-hero-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.goat-reel-art { position: absolute; inset: 0; background: var(--cream) url("../assets/goat-universe-reel-v1.jpg") center/cover no-repeat; transform: scale(1.015); transition: opacity 500ms ease, transform 1800ms cubic-bezier(.2,.75,.2,1), background-position 900ms ease; }
.watch-hero-screen[data-reel-scene="nfl"] .goat-reel-art { background-image: url("../assets/goat-football-hero-v2.jpg"); background-position: 52% 35%; transform: scale(1.08); }
.watch-hero-screen[data-reel-scene="boxing"] .goat-reel-art { background-position: 76% 12%; transform: scale(1.38); }
.watch-hero-screen[data-reel-scene="mma"] .goat-reel-art { background-position: 96% 67%; transform: scale(1.48); }
.watch-hero-screen[data-reel-scene="basketball"] .goat-reel-art { background-position: 18% 78%; transform: scale(1.42); }
.watch-hero-screen[data-reel-scene="universe"] .goat-reel-art { background-position: center; transform: scale(1.015); }
.goat-reel-type { position: absolute; z-index: 4; left: clamp(18px,4vw,52px); top: 50%; max-width: min(470px,70%); transform: translateY(-45%); color: var(--black); pointer-events: none; }
.goat-reel-type span,.goat-reel-type small { display: block; width: fit-content; padding: 7px 9px; color: var(--cream); background: var(--black); font: 900 10px/1.1 "Archivo"; letter-spacing: .13em; }
.goat-reel-type strong { display: block; margin: 11px 0; font: 400 clamp(52px,7vw,108px)/.78 "Anton"; letter-spacing: -.035em; text-transform: uppercase; text-shadow: 3px 3px 0 var(--cream); }
.goat-reel-type small { color: var(--black); background: var(--orange); }
.watch-hero-screen[data-reel-scene="nfl"] .goat-reel-type { top: 112px; transform: none; color: var(--cream); }
.watch-hero-screen[data-reel-scene="nfl"] .goat-reel-type strong { font-size: clamp(38px,5vw,72px); text-shadow: 3px 3px 0 var(--black); }
.goat-reel-cast-board { position: absolute; z-index: 3; right: clamp(18px,3.4vw,52px); bottom: clamp(70px,8vw,112px); width: min(56%,560px); min-height: 250px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transform: rotate(-2deg); transition: opacity 380ms ease,transform 700ms cubic-bezier(.2,.75,.2,1); }
.goat-reel-cast-card { position: relative; min-width: 0; min-height: 250px; margin: 0; overflow: hidden; background: var(--cream); border: 3px solid var(--black); box-shadow: 7px 7px 0 var(--orange); }
.goat-reel-cast-card-b { transform: translateY(34px) rotate(3deg); box-shadow: 7px 7px 0 var(--red); }
.goat-reel-cast-card img { display: block; width: 100%; height: 100%; min-height: 250px; object-fit: cover; filter: saturate(1.08) contrast(1.04); transition: transform 650ms cubic-bezier(.16,1,.3,1); }
.goat-reel-cast-card-a img { object-position: 27% center; }
.goat-reel-cast-card-b img { object-position: 73% center; }
.goat-reel-cast-card:hover img { transform: scale(1.055); }
.goat-reel-cast-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,transparent 54%,rgba(16,17,25,.9)); }
.goat-reel-cast-card figcaption { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; color: var(--cream); }
.goat-reel-cast-card figcaption span { display: block; color: var(--orange); font: 900 10px/1 "Archivo"; letter-spacing: .13em; }
.goat-reel-cast-card figcaption strong { display: block; margin-top: 7px; font: 400 clamp(25px,3vw,42px)/.85 "Anton"; letter-spacing: -.02em; }
.goat-reel-cast-board-label { position: absolute; right: -9px; top: -22px; padding: 8px 10px; color: var(--black); background: var(--orange); border: 2px solid var(--black); transform: rotate(5deg); }
.goat-reel-cast-board-label span,.goat-reel-cast-board-label b { display: block; font: 900 10px/1.2 "Archivo"; letter-spacing: .12em; }
.goat-reel-cast-board-label b { margin-top: 4px; font-size: 9px; }
.watch-hero-screen[data-reel-scene="universe"] .goat-reel-cast-board,.watch-hero-screen[data-reel-scene="boxing"] .goat-reel-cast-board,.watch-hero-screen[data-reel-scene="mma"] .goat-reel-cast-board,.watch-hero-screen[data-reel-scene="basketball"] .goat-reel-cast-board { opacity: 0; transform: translateY(14px) rotate(-2deg); pointer-events: none; }
.goat-reel-index { position: absolute; z-index: 5; right: 24px; top: 94px; display: flex; border: 2px solid var(--black); }
.goat-reel-index button { min-height: 34px; padding: 0 10px; color: var(--black); background: var(--cream); border: 0; border-right: 1px solid var(--black); border-radius: 0; font: 900 10px/1 "Archivo"; letter-spacing: .08em; cursor: pointer; }
.goat-reel-index button:last-child { border-right: 0; }
.goat-reel-index button:hover,.goat-reel-index button.active { color: var(--cream); background: var(--blue); }
.goat-reel-index button[aria-pressed="true"] { color: var(--cream); background: var(--blue); }
/* The page owns the matchup strap; the replay owns live score and play data.
   These explicit lanes prevent the two broadcast systems colliding. */
#watch-hero-stage #gi-matchup { display: none !important; }
#watch-hero-stage #gi-bug { top: 84px !important; }
#watch-hero-stage #gi-playcall,#watch-hero-stage #gi-dd { top: 126px !important; }
#watch-hero-stage #gi-ticker { left: 14px !important; bottom: 136px !important; transform: none !important; }
#watch-hero-stage #gi-featured-player { bottom: 136px !important; }
.watch-hero-screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,244,223,.08), inset 0 -150px 130px rgba(7,8,11,.64); }
.hero-stage-hit { position: absolute; inset: 0; z-index: 3; padding: 26px; display: flex; align-items: flex-start; justify-content: flex-end; color: var(--cream); background: transparent; border: 0; cursor: pointer; }
.hero-stage-hit span { margin-top: auto; padding: 13px 15px; border: 2px solid var(--cream); background: var(--black); box-shadow: 4px 4px 0 var(--red); font: 900 9px/1 "Archivo"; letter-spacing: .12em; }
.hero-stage-hit b { margin-top: auto; padding: 12px 14px; color: var(--black); background: var(--orange); border: 2px solid var(--cream); font-size: 14px; }
.hero-stage-hit:hover span { color: var(--black); background: var(--cream); }
.hero-trailer-label { position: absolute; z-index: 4; left: 24px; bottom: 24px; padding: 9px 11px; color: var(--black); background: var(--sky); border: 2px solid var(--black); font: 900 10px/1 "Archivo"; letter-spacing: .12em; pointer-events: none; }

/* A compact contents page for the whole product: four equal doors, one GOAT
   question per sport, no lead cell. Each sport is somebody's reason for being
   here, and the data door below carries the platform weight. */
.sport-universe { display: grid; grid-template-columns: repeat(4, 1fr); color: var(--cream); background: var(--black); border-top: 8px solid var(--red); border-bottom: 2px solid var(--cream); }
.sport-universe > * { position: relative; min-width: 0; min-height: 330px; padding: 28px 25px 24px; display: flex; flex-direction: column; align-items: flex-start; color: inherit; background: transparent; border: 0; border-right: 1px solid #4b4d57; border-radius: 0; text-align: left; cursor: pointer; overflow: hidden; }
/* Four real choices now; the "more coming" caption that used to sit under
   three is gone, and the fourth cell is basketball. */
.sport-universe > *:last-child { border-right: 0; }
.sport-universe > *::after { content: ""; position: absolute; width: 150px; height: 150px; right: -45px; bottom: -70px; border: 22px solid var(--blue); border-radius: 50%; opacity: .65; }
.sport-universe > *:nth-child(2)::after { border-color: var(--red); }
.sport-universe > *:nth-child(3)::after { border-color: var(--sky); }
.sport-universe > *:nth-child(4)::after { border-color: var(--orange); }

.sport-universe span,.sport-universe small,.sport-universe b { position: relative; z-index: 1; display: block; font: 900 10px/1.35 "Archivo"; letter-spacing: .11em; }
.sport-universe span { color: var(--orange); }
.sport-universe strong { position: relative; z-index: 1; margin: auto 0 12px; font: 400 clamp(46px,5vw,78px)/.8 "Anton"; letter-spacing: -.025em; }
.sport-universe small { max-width: 210px; color: #aaaeba; }
.sport-universe b { margin-top: 20px; padding-bottom: 6px; color: var(--cream); border-bottom: 4px solid var(--red); }
.sport-universe button:hover { color: var(--black); background: var(--orange); }
.sport-universe button:hover span,.sport-universe button:hover small,.sport-universe button:hover b { color: var(--black); }
.sport-universe button:hover::after { border-color: var(--cream); transform: scale(1.12); }

.data-door { position: relative; min-height: 0; padding: clamp(40px,4vw,64px) clamp(22px,7vw,108px) 76px; display: grid; grid-template-columns: 110px minmax(320px,1.15fr) minmax(300px,.85fr); gap: 45px; align-items: center; color: var(--cream); background: var(--blue); overflow: hidden; }
.data-door::after { content: ""; position: absolute; right: -130px; top: 40px; width: 520px; height: 520px; border: 72px solid var(--sky); border-radius: 50%; opacity: .18; }
.data-door-number { align-self: start; color: var(--orange); font: 400 clamp(80px,10vw,160px)/.75 "Anton"; writing-mode: vertical-rl; transform: rotate(180deg); }
.data-door > div:nth-child(2) { position: relative; z-index: 1; }
.data-door > div:nth-child(2) > span { color: var(--orange); font: 900 9px/1 "Archivo"; letter-spacing: .14em; }
.data-door h2 { margin: 14px 0 0; font: 400 clamp(44px,5vw,86px)/.82 "Anton"; letter-spacing: -.04em; }
.data-door h2 i { color: var(--red); font-style: normal; }
.data-door-copy { position: relative; z-index: 1; align-self: end; padding: 0 0 10px 30px; border-left: 2px solid rgba(255,244,223,.55); }
.data-door-copy p { margin: 0 0 32px; font-size: clamp(16px,1.7vw,23px); line-height: 1.48; font-weight: 680; }
.data-door-copy .inline-action { background: var(--orange); color: var(--black); box-shadow: 0 5px 0 var(--red); }
.data-door-rule { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; min-height: 48px; display: flex; justify-content: space-around; align-items: center; color: var(--black); background: var(--orange); font: 900 10px/1 "Archivo"; letter-spacing: .12em; }
.data-door-rule span { white-space: nowrap; }
/* The four chips carry their baselines now and need ~920px on one line.
   Narrower desktops get two clean rows instead of chips broken mid-phrase. */
@media (max-width: 1100px) {
  body[data-shell="desktop"] .data-door { padding-bottom: 104px; }
  body[data-shell="desktop"] .data-door-rule { flex-wrap: wrap; justify-content: flex-start; gap: 10px 28px; padding: 10px clamp(22px,7vw,108px); }
}

.watch-explainer { min-height: 480px; padding: clamp(70px, 8vw, 120px); display: grid; grid-template-columns: 1.3fr .7fr; gap: 45px 90px; align-items: end; color: var(--black); background: var(--cream); }
.watch-explainer > div > span { color: var(--red); font: 900 9px/1 "Archivo"; letter-spacing: .15em; }
.watch-explainer h2 { margin: 15px 0 0; font: 400 clamp(54px, 8vw, 112px)/.84 "Anton"; letter-spacing: -.03em; }
.watch-explainer > p { max-width: 520px; margin: 0; font-size: clamp(18px, 2vw, 25px); line-height: 1.4; font-weight: 650; }
.inline-action { grid-column: 2; width: fit-content; min-height: 50px; padding: 0 16px; color: var(--cream); background: var(--black); border: 2px solid var(--black); box-shadow: 0 5px 0 var(--red); font: 900 10px/1 "Archivo"; letter-spacing: .1em; cursor: pointer; }
.inline-action span { margin-left: 18px; color: var(--orange); }

/* The flagship matchup is presented as an episode: characters, verdict,
   watchable game and defining plays in one authored story. */
.flagship-episode { display: grid; grid-template-columns: minmax(360px,43%) 1fr; color: var(--black); background: var(--cream); }
.episode-art { position: relative; min-height: 720px; overflow: hidden; background: var(--orange); }
.episode-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.episode-art::after { content: ""; position: absolute; inset: 0; box-shadow: inset -70px 0 100px rgba(16,17,25,.12); pointer-events: none; }
.episode-art > span { position: absolute; z-index: 2; left: 22px; top: 22px; padding: 9px 12px; color: var(--cream); background: var(--black); border-bottom: 4px solid var(--red); font: 900 10px/1 "Archivo"; letter-spacing: .13em; }
.episode-story { padding: clamp(60px,7vw,105px) clamp(28px,6vw,92px) 56px; }
.episode-kicker { color: var(--red); font: 900 9px/1 "Archivo"; letter-spacing: .15em; }
.episode-story h2 { margin: 15px 0 25px; font: 400 clamp(60px,8vw,118px)/.79 "Anton"; letter-spacing: -.035em; }
.episode-story h2 i { color: var(--red); font-style: normal; }
.episode-story > p { max-width: 680px; margin: 0 0 38px; font-size: clamp(17px,1.8vw,22px); line-height: 1.45; font-weight: 650; }
.episode-verdict { display: grid; grid-template-columns: 1.2fr .8fr .8fr; border-top: 3px solid var(--black); border-bottom: 1px solid var(--black); }
.episode-verdict > div { min-height: 126px; padding: 16px 18px 16px 0; border-right: 1px solid rgba(16,17,25,.28); }
.episode-verdict > div + div { padding-left: 18px; }
.episode-verdict > div:last-child { border-right: 0; }
.episode-verdict span,.episode-verdict small { display: block; font: 900 10px/1.3 "Archivo"; letter-spacing: .1em; }
.episode-verdict span { color: var(--blue); }
.episode-verdict strong { display: block; margin: 20px 0 8px; font: 400 clamp(28px,3.3vw,48px)/.88 "Anton"; }
.episode-verdict small { color: #656670; }
.episode-actions { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; margin-top: 32px; }
.episode-actions button { width: 100%; min-height: 62px; margin: 0; }
.replay-lab-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.replay-lab-button small { color: var(--orange); font-size: 10px; letter-spacing: .14em; }
.episode-key-plays { grid-column: 1 / -1; padding: 28px clamp(22px,6vw,92px) 72px; color: var(--cream); background: var(--black); border-top: 7px solid var(--red); }
.episode-key-plays > span { color: var(--sky); font: 900 9px/1 "Archivo"; letter-spacing: .14em; }
#episode-key-plays { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 17px; border-top: 1px solid #484a54; }
.episode-play { min-height: 150px; padding: 21px 24px 20px 0; color: var(--cream); background: transparent; border: 0; border-right: 1px solid #484a54; text-align: left; cursor: pointer; }
.episode-play + .episode-play { padding-left: 24px; }
.episode-play:last-child { border-right: 0; }
.episode-play span,.episode-play small { display: block; color: #92949e; font: 900 10px/1.35 "Archivo"; letter-spacing: .1em; }
.episode-play span { color: var(--orange); }
.episode-play strong { display: block; margin: 24px 0 12px; font: 400 clamp(22px,2.2vw,34px)/.95 "Anton"; }
.episode-play:hover strong { color: var(--red); }

/* Episode dossier: facts, story and the named goat cast. It reads like the
   back half of a sports magazine, not another product-feature card stack. */
.episode-dossier { color: var(--black); background: var(--cream); border-top: 2px solid var(--black); }
.dossier-head { min-height: 560px; padding: clamp(68px,8vw,120px) clamp(22px,8vw,120px); display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(40px,8vw,130px); align-items: end; background: linear-gradient(108deg,var(--cream) 0 66%,var(--orange) 66%); }
.dossier-head span,.era-comparison-head > span,.cast-sheet header span,.episode-anecdotes header > span,.episode-sources > span { color: var(--red); font: 900 9px/1 "Archivo"; letter-spacing: .15em; }
.dossier-head h2 { margin: 17px 0 0; font: 400 clamp(63px,9vw,132px)/.8 "Anton"; letter-spacing: -.035em; }
.dossier-head > p { max-width: 620px; margin: 0; padding: 0 6% 12px 0; font-size: clamp(20px,2.35vw,31px); line-height: 1.35; font-weight: 760; }
.episode-fact-note { padding: 18px clamp(22px,8vw,120px); color: var(--cream); background: var(--blue); border-top: 5px solid var(--black); border-bottom: 5px solid var(--black); font: 850 9px/1.55 "Archivo"; letter-spacing: .06em; text-transform: uppercase; }
.episode-chapters { display: grid; grid-template-columns: repeat(12,1fr); padding: clamp(66px,8vw,112px) clamp(22px,8vw,120px); gap: 34px; }
.episode-chapters article { grid-column: span 4; padding-top: 18px; border-top: 5px solid var(--black); }
.episode-chapters article:nth-child(2) { transform: translateY(70px); border-top-color: var(--red); }
.episode-chapters article:nth-child(3) { border-top-color: var(--blue); }
.episode-chapters span { color: var(--red); font: 900 10px/1 "Archivo"; letter-spacing: .12em; }
.episode-chapters h3 { margin: 34px 0 18px; max-width: 390px; font: 400 clamp(34px,4vw,58px)/.93 "Anton"; text-transform: uppercase; }
.episode-chapters p { margin: 0; color: #50515a; font-size: 15px; line-height: 1.66; }
.era-comparison { display: grid; grid-template-columns: 35% 1fr 1fr; color: var(--cream); background: var(--black); border-top: 8px solid var(--orange); }
.era-comparison-head { padding: clamp(45px,6vw,82px) clamp(22px,5vw,70px); border-right: 1px solid #454751; }
.era-comparison-head h3 { margin: 18px 0 0; font: 400 clamp(44px,5.5vw,78px)/.85 "Anton"; }
.era-team { padding: clamp(45px,6vw,82px) clamp(20px,4vw,54px); border-right: 1px solid #454751; }
.era-team:last-child { border-right: 0; background: #181a22; }
.era-team header { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 25px; border-bottom: 3px solid currentColor; }
.era-team header span { color: var(--sky); font: 400 clamp(31px,4vw,55px)/.9 "Anton"; }
.era-team:last-child header span { color: var(--red); }
.era-team header strong { font: 400 clamp(40px,5vw,70px)/.8 "Anton"; }
.era-team header small { grid-column: 2; color: #8d909c; font: 900 10px/1 "Archivo"; letter-spacing: .1em; }
.era-stat-line { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; }
.era-stat-line div { min-height: 92px; padding: 15px 12px 15px 0; border-bottom: 1px solid #454751; }
.era-stat-line div:nth-child(even) { padding-left: 16px; border-left: 1px solid #454751; }
.era-stat-line strong,.era-stat-line span { display: block; }
.era-stat-line strong { color: var(--orange); font: 400 clamp(27px,3vw,43px)/1 "Anton"; }
.era-stat-line span { margin-top: 7px; color: #9699a4; font: 900 10px/1.2 "Archivo"; letter-spacing: .1em; }
.era-team > p { margin: 28px 0 0; color: #c1c2c8; font-size: 13px; line-height: 1.55; }
.cast-sheet { padding: clamp(70px,8vw,120px) clamp(22px,8vw,120px); color: var(--black); background: var(--orange); }
.cast-sheet > header { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: end; }
.cast-sheet header h3 { margin: 18px 0 0; font: 400 clamp(62px,8.5vw,126px)/.8 "Anton"; letter-spacing: -.035em; }
.cast-sheet > header > p { max-width: 560px; margin: 0 0 10px; font-size: clamp(17px,1.7vw,23px); line-height: 1.45; font-weight: 720; }
.cast-spotlight { margin-top: 58px; min-height: 610px; display: grid; grid-template-columns: 1fr .78fr 1fr; color: var(--cream); background: var(--black); border: 4px solid var(--black); box-shadow: 12px 12px 0 var(--blue); }
.cast-spotlight-player { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #0b0d13; }
.cast-spotlight-player img { display: block; width: 100%; height: 100%; min-height: 610px; object-fit: cover; filter: saturate(1.08) contrast(1.04); transform: scale(1.01); transition: transform .45s cubic-bezier(.2,.75,.2,1); }
.cast-spotlight-1968 img { object-position: 32% center; }
.cast-spotlight-2024 img { object-position: 70% center; }
.cast-spotlight-player:hover img { transform: scale(1.045); }
.cast-spotlight-player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 48%,rgba(8,9,13,.93)); pointer-events: none; }
.cast-spotlight-player figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 24px; }
.cast-spotlight-player figcaption span,.cast-spotlight-callout > span { color: var(--orange); font: 900 10px/1 "Archivo"; letter-spacing: .14em; }
.cast-spotlight-player figcaption strong { display: block; margin-top: 10px; font: 400 clamp(28px,3vw,44px)/.88 "Anton"; }
.cast-spotlight-callout { position: relative; z-index: 2; padding: 58px clamp(24px,3vw,46px); display: flex; flex-direction: column; justify-content: center; background: var(--blue); border-right: 2px solid var(--cream); border-left: 2px solid var(--cream); }
.cast-spotlight-callout h4 { margin: 18px 0 24px; font: 400 clamp(43px,5vw,73px)/.82 "Anton"; letter-spacing: -.025em; }
.cast-spotlight-callout p { margin: 0; color: #dbe4ff; font-size: 14px; line-height: 1.55; font-weight: 700; }
.cast-spotlight-callout .btn-gold { width: 100%; min-height: 66px; margin: 34px 0 0; padding: 0 16px; color: var(--black); background: var(--orange); box-shadow: 0 6px 0 var(--black); }
.cast-spotlight-callout .btn-gold small { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .12em; }
.cast-tabs,.cast-unit-tabs { display: flex; margin-top: 54px; border-bottom: 4px solid var(--black); }
.cast-unit-tabs { margin-top: 0; border-bottom-width: 1px; }
.cast-tabs button,.cast-unit-tabs button { min-height: 59px; padding: 0 25px; color: var(--black); background: transparent; border: 2px solid var(--black); border-bottom: 0; border-radius: 0; font: 900 10px/1 "Archivo"; letter-spacing: .1em; cursor: pointer; }
.cast-tabs button + button,.cast-unit-tabs button + button { border-left: 0; }
.cast-tabs button.active,.cast-tabs button[aria-selected="true"] { color: var(--cream); background: var(--black); }
.cast-unit-tabs button { min-height: 45px; border-width: 0 1px 0 0; font-size: 10px; }
.cast-unit-tabs button.active,.cast-unit-tabs button[aria-pressed="true"] { color: var(--cream); background: var(--blue); }
.cast-tabs button:hover,.cast-unit-tabs button:hover { color: var(--cream); background: var(--red); }
.cast-note { margin: 22px 0 30px; max-width: 840px; font-size: 12px; line-height: 1.5; font-weight: 750; }
.cast-roster { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--black); }
.cast-player { min-height: 170px; display: grid; grid-template-columns: 105px 1fr; border-bottom: 1px solid rgba(16,17,25,.5); }
.cast-player:nth-child(odd) { border-right: 1px solid rgba(16,17,25,.5); }
.cast-number { display: grid; align-content: center; justify-items: center; color: var(--cream); background: var(--blue); border-right: 1px solid var(--black); }
.cast-player:nth-child(4n+2) .cast-number,.cast-player:nth-child(4n+3) .cast-number { background: var(--red); }
.cast-number small { font: 900 10px/1 "Archivo"; letter-spacing: .1em; }
.cast-number strong { margin-top: 6px; font: 400 57px/1 "Anton"; }
.cast-player-copy { padding: 24px 26px; }
.cast-player-copy h4 { margin: 0; font: 400 clamp(24px,2.5vw,37px)/.9 "Anton"; text-transform: uppercase; }
.cast-player-copy b,.cast-player-copy span { display: block; font: 900 10px/1.35 "Archivo"; letter-spacing: .09em; text-transform: uppercase; }
.cast-player-copy b { margin-top: 10px; color: var(--blue); }
.cast-player-copy p { margin: 12px 0; max-width: 480px; color: #3f4047; font-size: 12px; line-height: 1.45; }
.cast-player-copy span { color: #7a4d19; }
.episode-anecdotes { padding: clamp(72px,8vw,116px) clamp(22px,8vw,120px); color: var(--cream); background: var(--blue); }
.episode-anecdotes header { display: grid; grid-template-columns: 32% 68%; align-items: start; }
.episode-anecdotes header > span { color: var(--orange); }
.episode-anecdotes h3 { margin: 0; font: 400 clamp(55px,7.8vw,112px)/.82 "Anton"; letter-spacing: -.03em; }
#episode-anecdotes { margin: 60px 0 0 32%; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--cream); }
#episode-anecdotes article { min-height: 245px; padding: 27px 28px 27px 0; border-bottom: 1px solid rgba(255,244,223,.35); }
#episode-anecdotes article:nth-child(odd) { border-right: 1px solid rgba(255,244,223,.35); }
#episode-anecdotes article:nth-child(even) { padding-left: 28px; }
#episode-anecdotes article > span { color: var(--orange); font: 400 28px/1 "Anton"; }
#episode-anecdotes h4 { margin: 30px 0 12px; font: 400 clamp(25px,3vw,40px)/.95 "Anton"; text-transform: uppercase; }
#episode-anecdotes p { margin: 0; color: #d5d7e0; font-size: 13px; line-height: 1.6; }
.episode-sources { padding: 34px clamp(22px,8vw,120px) 48px; display: grid; grid-template-columns: 32% 68%; color: var(--cream); background: var(--black); border-top: 6px solid var(--red); }
.episode-sources > span { color: var(--sky); padding-top: 10px; }
#episode-sources { display: grid; grid-template-columns: 1fr 1fr; }
#episode-sources a { padding: 10px 16px 10px 0; color: #c6c8d0; font: 750 10px/1.35 "Archivo"; text-decoration: none; border-bottom: 1px solid #3c3e47; }
#episode-sources a:nth-child(even) { padding-left: 16px; }
#episode-sources a:hover { color: var(--orange); }
#episode-sources a span { display: block; margin-bottom: 3px; color: #777a84; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* Page-specific editorial fields */
#view-rankings { color: var(--cream); background: var(--blue); }
#view-rankings .roster-heading { padding-top: clamp(75px, 9vw, 125px); }
/* THE GREATS' sport tabs: THE PICK's component, dressed for the cobalt page. */
.greats-bar { padding: 0 clamp(22px,8vw,120px) 28px; background: var(--blue); }
.greats-sports .pick-sport { color: var(--cream); background: transparent; }
.greats-bar .greats-sports { border-bottom-color: var(--cream); }
.greats-sports .pick-sport.active { border-bottom-color: var(--orange); }
.rankings-tournament[hidden] { display: none; }
.rankings-tournament { padding: clamp(70px,8vw,110px) clamp(22px,8vw,120px); color: var(--black); background: var(--orange); }
.rankings-tournament > span { font: 900 9px/1 "Archivo"; letter-spacing: .14em; }
.rankings-tournament h2 { margin: 15px 0 36px; font: 400 clamp(54px,8vw,112px)/.85 "Anton"; letter-spacing: -.03em; }
.rankings-tournament .btn-gold { min-height: 60px; padding: 0 22px; color: var(--cream); background: var(--blue); }
#view-about { background: var(--cream); }
#view-about .how-it-works { padding-top: clamp(75px, 9vw, 125px); }

/* Full 3D broadcast player */
.broadcast-overlay { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: 76px minmax(0,1fr) 116px; color: var(--cream); background: #07080b; }
.broadcast-header { display: grid; grid-template-columns: 215px 1fr 215px; align-items: stretch; border-bottom: 2px solid var(--cream); background: var(--black); }
.broadcast-exit,.broadcast-controls button { color: var(--cream); background: #1a1c24; border: 0; border-right: 1px solid #464852; border-radius: 0; font: 900 10px/1 "Archivo"; letter-spacing: .1em; cursor: pointer; }
.broadcast-exit { border-right: 2px solid var(--cream); text-align: left; padding: 0 20px; }
.broadcast-exit span { margin-right: 12px; color: var(--orange); font-size: 18px; }
.broadcast-exit:hover,.broadcast-controls button:hover { color: var(--black); background: var(--cream); }
.broadcast-matchup { min-width: 0; display: grid; grid-template-columns: 1fr 52px 1fr; place-items: center; font: 400 clamp(16px,2.4vw,31px)/1 "Anton"; letter-spacing: .015em; }
.broadcast-matchup span:first-child { justify-self: end; color: var(--sky); }
.broadcast-matchup span:last-child { justify-self: start; color: var(--cream); }
.broadcast-matchup b { width: 38px; height: 38px; display: grid; place-items: center; color: var(--black); background: var(--red); font: 400 14px/1 "Anton"; }
.broadcast-proof { padding: 0 18px; display: flex; flex-direction: column; justify-content: center; border-left: 2px solid var(--cream); }
.broadcast-proof strong { color: var(--orange); font: 900 9px/1 "Archivo"; letter-spacing: .11em; }
.broadcast-proof span { margin-top: 6px; color: #8f929d; font: 900 10px/1 "Archivo"; letter-spacing: .09em; }
.broadcast-stage-wrap { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 270px; }
.broadcast-main-stage { position: relative; min-width: 0; overflow: hidden; }
.broadcast-stage-wrap .moment-stage { position: absolute; inset: 0; }
/* Full broadcast already names both sides in its fixed header. */
#watchlive-stage #gi-matchup { display: none !important; }
#watchlive-stage #gi-bug { top: 12px !important; }
#watchlive-stage #gi-dd { top: 54px !important; }
/* The outer broadcast already owns play copy and live captions. Keeping the
   inner ticker/player plates created the overlapping debug-HUD look. */
#watchlive-stage #gi-playcall,#watchlive-stage #gi-ticker,#watchlive-stage #gi-featured-player { display: none !important; }

/* Produced game-film layer: illustrated identity before each kept snap, then
   an authored illustrated sequence for the flagship golden play. */
.gi-film-card,.gi-illustrated-play { position: absolute; z-index: 6; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; background: var(--cream); transition: opacity 120ms linear,visibility 120ms linear; }
.gi-film-card.is-visible,.gi-illustrated-play.is-visible { opacity: 1; visibility: visible; }
.gi-film-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,rgba(16,17,25,.16),transparent 42%); mix-blend-mode: multiply; }
.gi-film-card > img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.018); transition: transform 1100ms cubic-bezier(.16,1,.3,1); }
.gi-film-card.is-visible > img { transform: scale(1.055); }
.gi-film-card-copy { position: absolute; z-index: 2; top: 50%; width: min(43%,560px); transform: translateY(-50%); color: var(--black); }
.gi-film-card.side-a .gi-film-card-copy { right: clamp(24px,6vw,90px); text-align: right; }
.gi-film-card.side-b .gi-film-card-copy { left: clamp(24px,6vw,90px); text-align: left; }
.gi-film-card-copy span,.gi-film-card-copy small { display: block; font: 900 clamp(7px,.8vw,11px)/1.3 "Archivo"; letter-spacing: .13em; text-transform: uppercase; }
.gi-film-card-copy span { color: var(--red); }
.gi-film-card-copy strong { display: block; margin: 13px 0 16px; font: 400 clamp(42px,7vw,112px)/.82 "Anton"; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.gi-film-card-copy small { color: var(--blue); }
.gi-film-card.mode-score .gi-film-card-copy strong { color: var(--red); font-size: clamp(56px,9vw,142px); }
.gi-film-card > b { position: absolute; z-index: 2; right: 20px; bottom: 17px; color: var(--black); font: 900 10px/1 "Archivo"; letter-spacing: .15em; }
.gi-film-card.side-b > b { right: auto; left: 20px; }
.gi-illustrated-play { z-index: 5; background: #050609; }
.gi-illustrated-play > img { width: 100%; height: 100%; display: block; object-fit: cover; will-change: transform; filter: contrast(1.03) saturate(1.04); }
.gi-illustrated-play::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px var(--cream); background: linear-gradient(0deg,rgba(5,6,9,.58),transparent 36%),linear-gradient(90deg,rgba(5,6,9,.24),transparent 30%); }
.gi-illustrated-stamp { position: absolute; z-index: 2; left: 18px; top: 18px; padding: 9px 11px; color: var(--black); background: var(--orange); border: 2px solid var(--black); font: 900 10px/1 "Archivo"; letter-spacing: .13em; }
.gi-illustrated-play > strong { position: absolute; z-index: 2; right: 22px; bottom: 22px; max-width: 64%; color: var(--cream); text-align: right; text-shadow: 3px 3px 0 var(--black); font: 400 clamp(30px,5.4vw,82px)/.86 "Anton"; letter-spacing: -.025em; }
#gi-cut { z-index: 2; }
.broadcast-play-context { position: absolute; z-index: 8; left: 18px; top: 18px; width: min(325px,calc(100% - 36px)); padding: 13px 15px; color: var(--cream); background: rgba(16,17,25,.94); border-left: 6px solid var(--red); pointer-events: none; }
.broadcast-play-context span,.broadcast-play-context small { display: block; color: var(--orange); font: 900 10px/1.3 "Archivo"; letter-spacing: .11em; }
.broadcast-play-context strong { display: block; margin: 6px 0; font: 400 clamp(18px,2vw,27px)/1 "Anton"; }
.broadcast-play-context small { color: #b5b7c0; letter-spacing: .04em; }
.broadcast-call { position: absolute; z-index: 8; right: 18px; bottom: 18px; width: min(370px,calc(100% - 36px)); padding: 13px 15px; color: var(--cream); background: rgba(16,17,25,.94); border-top: 5px solid var(--sky); pointer-events: none; }
.broadcast-call span,.broadcast-call small { display: block; font: 900 10px/1.35 "Archivo"; letter-spacing: .08em; }
.broadcast-call span { color: var(--sky); }
.broadcast-call strong { display: block; margin: 7px 0 6px; color: var(--cream); font: 400 clamp(17px,1.7vw,24px)/1 "Anton"; }
.broadcast-call small { color: #aeb0ba; }
/* Never stack the briefing and the live call. The image is the hero: the
   short setup card gives way to the call once the ball is in motion. */
#watchlive-stage[data-goat-phase="setup"] ~ .broadcast-call,
#watchlive-stage[data-goat-phase="action"] ~ .broadcast-play-context,
#watchlive-stage[data-goat-phase="bridge"] ~ .broadcast-play-context,
#watchlive-stage[data-goat-phase="bridge"] ~ .broadcast-call { opacity: 0; visibility: hidden; transform: translateY(8px); }
.broadcast-play-context,.broadcast-call { transition: opacity 140ms ease,transform 140ms ease,visibility 140ms ease; }
.broadcast-verdict-card { position: absolute; z-index: 14; inset: 0; padding: clamp(32px,6vw,92px); display: flex; flex-direction: column; justify-content: center; color: var(--cream); background: radial-gradient(circle at 78% 28%,rgba(17,73,201,.48),transparent 34%),linear-gradient(112deg,rgba(7,8,11,.98) 0 58%,rgba(7,8,11,.88)); opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity 220ms ease,transform 420ms cubic-bezier(.16,1,.3,1),visibility 220ms; }
.broadcast-verdict-card.is-visible { opacity: 1; visibility: visible; transform: scale(1); }
.broadcast-verdict-card > span { color: var(--orange); font: 900 clamp(8px,1vw,13px)/1 "Archivo"; letter-spacing: .15em; }
.broadcast-verdict-card > strong { margin: 18px 0 22px; display: flex; flex-direction: column; font-style: normal; text-transform: uppercase; }
.broadcast-verdict-card > strong b { color: var(--sky); font: 400 clamp(92px,14vw,210px)/.72 "Anton"; letter-spacing: -.05em; }
.broadcast-verdict-card > strong i { max-width: 780px; color: var(--cream); font: 400 clamp(34px,5vw,72px)/.88 "Anton"; font-style: normal; }
.broadcast-verdict-card > p { max-width: 720px; margin: 0; color: #c8cad2; font: 650 clamp(12px,1.2vw,17px)/1.5 "Archivo"; }
.broadcast-verdict-card > p em { color: var(--orange); font-style: normal; font-weight: 900; }
.broadcast-verdict-card > div { margin-top: clamp(24px,4vw,46px); display: flex; gap: 12px; }
.broadcast-verdict-card button { min-height: 64px; padding: 12px 20px; color: var(--black); background: var(--orange); border: 0; border-bottom: 5px solid var(--red); text-align: left; font: 900 10px/1 "Archivo"; letter-spacing: .08em; cursor: pointer; }
.broadcast-verdict-card button:last-child { color: var(--cream); background: var(--blue); }
.broadcast-verdict-card button small { display: block; margin-top: 7px; font-size: 10px; letter-spacing: .12em; }
.broadcast-verdict-card button:hover { transform: translateY(-2px); filter: brightness(1.08); }
#watchlive-stage.film-card-active ~ .broadcast-play-context,#watchlive-stage.film-card-active ~ .broadcast-call,#watchlive-stage.illustrated-play-active ~ .broadcast-play-context,#watchlive-stage.illustrated-play-active ~ .broadcast-call,#watchlive-stage.edit-bridge-active ~ .broadcast-play-context,#watchlive-stage.edit-bridge-active ~ .broadcast-call { opacity: 0; visibility: hidden; }
.broadcast-chapters { position: relative; z-index: 9; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; color: var(--cream); background: #11131a; border-left: 2px solid var(--cream); }
.chapter-heading { padding: 17px 16px 13px; border-bottom: 1px solid #42444e; }
.chapter-heading span,.chapter-heading small { display: block; font: 900 10px/1 "Archivo"; letter-spacing: .12em; }
.chapter-heading span { color: var(--sky); }
.chapter-heading small { margin-top: 6px; color: #777a85; font-size: 6px; }
#watchlive-chapters { overflow-y: auto; }
#watchlive-chapters button { width: 100%; min-height: 68px; padding: 12px 14px; color: #989aa4; background: transparent; border: 0; border-bottom: 1px solid #343640; border-left: 5px solid transparent; text-align: left; cursor: pointer; }
#watchlive-chapters button span { display: block; color: #777a85; font: 900 6px/1 "Archivo"; letter-spacing: .1em; }
#watchlive-chapters button strong { display: block; margin-top: 7px; font: 400 15px/1 "Anton"; }
#watchlive-chapters button:hover { color: var(--cream); background: #1c1e27; }
#watchlive-chapters button.active { color: var(--cream); border-left-color: var(--red); background: #1c1e27; }
#watchlive-chapters button.active span { color: var(--orange); }
.chapter-step { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #42444e; }
.chapter-step button { min-height: 46px; color: var(--cream); background: var(--black); border: 0; border-right: 1px solid #42444e; font: 900 10px/1 "Archivo"; letter-spacing: .08em; cursor: pointer; }
.chapter-step button:hover { color: var(--black); background: var(--orange); }
.broadcast-overlay.without-chapters .broadcast-stage-wrap { grid-template-columns: 1fr; }
.broadcast-overlay.without-chapters .broadcast-chapters { display: none; }
.broadcast-overlay.without-chapters .broadcast-play-context { display: none; }
.broadcast-footer { position: relative; background: var(--black); border-top: 2px solid var(--cream); }
.broadcast-timeline { height: 36px; padding: 0 18px; display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 12px; color: #afb1bb; font: 900 9px/1 "Archivo"; font-variant-numeric: tabular-nums; }
.broadcast-timeline input { width: 100%; height: 6px; margin: 0; accent-color: var(--red); cursor: pointer; }
.broadcast-controls { height: 78px; display: grid; grid-template-columns: repeat(5,minmax(105px,1fr)) minmax(150px,.8fr); border-top: 1px solid #393b44; }
.broadcast-controls button { min-height: 54px; border-bottom: 5px solid transparent; }
.broadcast-controls button:hover { border-bottom-color: var(--red); }
.broadcast-controls button span { margin-right: 9px; color: var(--orange); font-size: 16px; }
.broadcast-controls .broadcast-utility { color: #a8aab3; background: var(--black); }

@media (max-width: 980px) {
  .site-tab { min-width: 105px; padding: 0 11px; }
  .watch-hero { grid-template-columns: 42% 58%; }
  .flagship-episode { grid-template-columns: 38% 62%; }
  .sport-universe { grid-template-columns: repeat(4, 1fr); }
  .sport-universe strong { font-size: clamp(38px,4vw,60px); }
  .data-door { grid-template-columns: 72px 1fr 1fr; gap: 28px; }
  .episode-art { min-height: 650px; }
  .episode-verdict { grid-template-columns: 1fr 1fr; }
  .episode-verdict > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(16,17,25,.28); }
  .era-comparison { grid-template-columns: 1fr 1fr; }
  .era-comparison-head { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #454751; }
  .cast-player { grid-template-columns: 82px 1fr; }
}

@media (max-width: 760px) {
  body.goat-arena { padding-top: 118px; }
  .goat-nav { min-height: 118px; grid-template-columns: 1fr; grid-template-rows: 65px 53px; padding: 0; }
  .goat-nav .wordmark { padding: 0 17px; }
  .goat-nav .wordmark img { width: 35px; height: 35px; }
  .goat-nav nav.site-tabs { display: flex; width: 100%; overflow-x: auto; border-top: 1px solid #393b44; }
  .site-tab { min-width: 25%; flex: 1; padding: 0 5px; border-left: 0; font-size: 9px; }
  .site-tab span { display: none; }
  .watch-hero { min-height: calc(100vh - 118px); grid-template-columns: 1fr; grid-template-rows: minmax(330px,45vh) auto; }
  .watch-hero-screen { grid-row: 1; }
  .watch-hero-copy { grid-row: 2; padding: 38px 20px 44px; border: 0; }
  .watch-hero-copy::after { display: none; }
  .watch-hero-copy h1 { font-size: clamp(48px,15vw,78px); }
  .watch-hero-copy h1 span { display: block; }
  .watch-hero-copy h1 i { display: block; margin: .5em 0 .35em; font-size: .45em; }
  .watch-hero-copy > p:last-of-type { font-size: 14px; }
  .goat-reel-type { top: 48%; left: 18px; max-width: 75%; }
  .goat-reel-type strong { font-size: clamp(46px,13vw,72px); }
  .goat-reel-cast-board { right: 12px; bottom: 58px; width: min(73%,350px); min-height: 150px; gap: 6px; }
  .goat-reel-cast-card,.goat-reel-cast-card img { min-height: 150px; }
  .goat-reel-cast-card-b { transform: translateY(20px) rotate(3deg); }
  .goat-reel-cast-board-label { top: -16px; right: -3px; padding: 6px 7px; }
  .goat-reel-cast-board-label span { font-size: 5px; }
  .goat-reel-cast-board-label b { font-size: 6px; }
  .goat-reel-cast-card figcaption { left: 7px; right: 7px; bottom: 7px; }
  .goat-reel-cast-card figcaption span { font-size: 5px; }
  .goat-reel-cast-card figcaption strong { margin-top: 4px; font-size: clamp(18px,6vw,29px); }
  .goat-reel-index { left: 10px; right: auto; top: 66px; }
  .goat-reel-index button { padding: 0 7px; font-size: 6px; }
  #watch-hero-stage #gi-bug { top: 64px !important; }
  #watch-hero-stage #gi-playcall,#watch-hero-stage #gi-dd { top: 103px !important; }
  .hero-stage-hit { padding: 12px; }
  .hero-stage-hit span { font-size: 10px; }
  .sport-universe { grid-template-columns: 1fr; }
  .sport-universe > * { min-height: 190px; border-right: 0; border-bottom: 1px solid #4b4d57; }
  .data-door { min-height: 0; padding: 65px 20px 82px; grid-template-columns: 1fr; gap: 28px; }
  .data-door-number { writing-mode: initial; transform: none; font-size: 72px; }
  .data-door-copy { padding: 28px 0 0; border-left: 0; border-top: 2px solid rgba(255,244,223,.55); }
  .data-door-rule { padding: 0 12px; justify-content: flex-start; gap: 24px; overflow: hidden; white-space: nowrap; }
  .watch-explainer { grid-template-columns: 1fr; padding: 65px 20px; }
  .watch-explainer > p,.inline-action { grid-column: 1; }
  .hero-trailer-label { left: 10px; bottom: 10px; }
  .flagship-episode { grid-template-columns: 1fr; }
  .episode-art { min-height: 520px; }
  .episode-story { padding: 55px 20px 42px; }
  .episode-actions { grid-template-columns: 1fr; }
  .episode-key-plays { padding: 26px 20px 46px; }
  #episode-key-plays { grid-template-columns: 1fr; }
  .episode-play,.episode-play + .episode-play { min-height: 112px; padding: 18px 0; border-right: 0; border-bottom: 1px solid #484a54; }
  .dossier-head { min-height: 0; padding: 65px 20px; grid-template-columns: 1fr; gap: 35px; background: var(--cream); border-right: 16px solid var(--orange); }
  .dossier-head > p { padding: 0; font-size: 18px; }
  .episode-fact-note { padding: 16px 20px; }
  .episode-chapters { grid-template-columns: 1fr; padding: 60px 20px; gap: 45px; }
  .episode-chapters article { grid-column: 1; }
  .episode-chapters article:nth-child(2) { transform: none; }
  .era-comparison { grid-template-columns: 1fr; }
  .era-comparison-head,.era-team { padding: 45px 20px; border-right: 0; border-bottom: 1px solid #454751; }
  .cast-sheet { padding: 65px 20px; }
  .cast-sheet > header { grid-template-columns: 1fr; gap: 30px; }
  .cast-spotlight { min-height: 0; grid-template-columns: 1fr 1fr; box-shadow: 7px 7px 0 var(--blue); }
  .cast-spotlight-player img { min-height: 430px; }
  .cast-spotlight-callout { grid-column: 1 / -1; grid-row: 2; padding: 42px 24px; border: 0; border-top: 2px solid var(--cream); }
  .cast-spotlight-callout .btn-gold { max-width: 430px; }
  .cast-tabs { margin-top: 40px; }
  .cast-tabs button { flex: 1; padding: 0 10px; }
  .cast-roster { grid-template-columns: 1fr; }
  .cast-player:nth-child(odd) { border-right: 0; }
  .cast-player { grid-template-columns: 76px 1fr; min-height: 156px; }
  .cast-player-copy { padding: 21px 18px; }
  .cast-number strong { font-size: 46px; }
  .episode-anecdotes { padding: 65px 20px; }
  .episode-anecdotes header { grid-template-columns: 1fr; gap: 20px; }
  #episode-anecdotes { margin: 45px 0 0; grid-template-columns: 1fr; }
  #episode-anecdotes article,#episode-anecdotes article:nth-child(even) { min-height: 0; padding: 24px 0 30px; border-right: 0; }
  .episode-sources { padding: 30px 20px 42px; grid-template-columns: 1fr; gap: 18px; }
  #episode-sources { grid-template-columns: 1fr; }
  #episode-sources a:nth-child(even) { padding-left: 0; }
  .broadcast-overlay { grid-template-rows: 106px minmax(0,1fr) 169px; }
  .broadcast-header { grid-template-columns: 112px 1fr; grid-template-rows: 58px 48px; }
  .broadcast-exit { grid-row: 1; padding: 0 11px; font-size: 10px; }
  .broadcast-exit span { margin-right: 5px; }
  .broadcast-matchup { grid-row: 1; grid-column: 2; font-size: clamp(13px,4vw,20px); }
  .broadcast-matchup b { width: 28px; height: 28px; font-size: 11px; }
  .broadcast-proof { grid-row: 2; grid-column: 1 / -1; padding: 0 12px; flex-direction: row; justify-content: space-between; align-items: center; border-left: 0; border-top: 1px solid #393b44; }
  .broadcast-proof span { margin: 0; }
  .broadcast-stage-wrap { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) 104px; }
  .broadcast-chapters { grid-row: 2; display: grid; grid-template-columns: 90px 1fr 105px; grid-template-rows: 1fr; border-left: 0; border-top: 2px solid var(--cream); }
  .chapter-heading { display: flex; flex-direction: column; justify-content: center; padding: 10px; border-bottom: 0; border-right: 1px solid #42444e; }
  #watchlive-chapters { display: flex; overflow-x: auto; overflow-y: hidden; }
  #watchlive-chapters button { min-width: 145px; min-height: 100%; border-left: 0; border-bottom: 5px solid transparent; border-right: 1px solid #343640; }
  #watchlive-chapters button.active { border-left-color: transparent; border-bottom-color: var(--red); }
  .chapter-step { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid #42444e; }
  .chapter-step button { min-height: 50%; }
  .broadcast-play-context { left: 10px; top: auto; bottom: 10px; width: calc(100% - 20px); padding: 10px 12px; }
  .broadcast-call { right: 10px; top: 10px; bottom: auto; width: min(320px,calc(100% - 20px)); padding: 9px 11px; }
  .broadcast-call strong { font-size: 16px; }
  .broadcast-verdict-card { padding: 24px 18px; }
  .broadcast-verdict-card > strong b { font-size: clamp(76px,25vw,120px); }
  .broadcast-verdict-card > strong i { font-size: clamp(30px,9vw,48px); }
  .broadcast-verdict-card > div { flex-direction: column; }
  .broadcast-footer { overflow-x: hidden; }
  .broadcast-timeline { height: 39px; padding: 0 10px; grid-template-columns: 38px 1fr 38px; gap: 6px; }
  .broadcast-controls { height: 130px; grid-template-columns: repeat(5,1fr); grid-template-rows: 74px 56px; }
  .broadcast-controls button { min-width: 0; padding: 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-right: 1px solid #393b44; font-size: 10px; }
  .broadcast-controls button span { margin: 0; }
  .broadcast-controls .broadcast-utility { grid-column: 1 / -1; flex-direction: row; }
}

@media (max-width: 520px) {
  .tally-row { gap: 8px; }
  .tally-side { padding: 12px 8px 10px; }
  .tally-side small { font-size: 10px; }
  .cast-spotlight { grid-template-columns: 1fr; }
  .cast-spotlight-1968 { grid-column: 1; grid-row: 1; }
  .cast-spotlight-2024 { grid-column: 1; grid-row: 2; }
  .cast-spotlight-callout { grid-column: 1; grid-row: 3; }
  .cast-spotlight-player img { min-height: 510px; }
  #watch-hero-stage #gi-dd { top: 140px !important; }
  #watch-hero-stage #gi-ticker { bottom: 144px !important; max-width: calc(100% - 20px) !important; }
  #watch-hero-stage #gi-featured-player { right: 10px !important; bottom: 102px !important; max-width: calc(100% - 20px) !important; }
  #watchlive-stage #gi-dd { top: 91px !important; }
  .gi-film-card.side-a > img { object-position: 31% center; }
  .gi-film-card.side-b > img { object-position: 69% center; }
  .gi-film-card-copy { top: auto; right: 16px !important; bottom: 20px; left: 16px !important; width: auto; padding: 16px; transform: none; color: var(--cream); text-align: left !important; background: rgba(16,17,25,.88); border-left: 6px solid var(--red); }
  .gi-film-card-copy strong { margin: 8px 0 10px; font-size: clamp(34px,10vw,56px); }
  .gi-film-card-copy small { color: var(--sky); }
  .gi-film-card > b { display: none; }
  .gi-illustrated-play > img { object-position: center; }
  .gi-illustrated-stamp { left: 10px; top: 10px; font-size: 6px; }
  .gi-illustrated-play > strong { right: 12px; bottom: 12px; max-width: 84%; font-size: clamp(28px,9vw,54px); }
  .persistent-verdict-main { grid-template-columns: 1fr; gap: 28px; }
  .persistent-verdict-main > strong { font-size: clamp(78px,26vw,116px); }
  .persistent-verdict-main > strong small { text-align: left; }
  .persistent-verdict-evidence { grid-template-columns: 1fr; }
  .persistent-verdict-evidence article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(16,17,25,.3); }
  .persistent-verdict footer { padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; gap: 8px 12px; }
}

/* ==================================================================
   Golden Play film — directed viewing first, tactical Web Cast second.
   ================================================================== */

body.cinematic-open { overflow: hidden; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-hint {
  appearance: none;
  z-index: 8;
  padding: 11px 14px;
  color: var(--cream);
  background: var(--black);
  border: 2px solid var(--cream);
  box-shadow: 4px 4px 0 var(--red);
  font: 900 9px/1 "Archivo";
  letter-spacing: .11em;
  cursor: pointer;
}
.skip-hint:hover,.skip-hint:focus-visible { color: var(--black); background: var(--orange); }
.cinematic-transcript {
  position: absolute;
  z-index: 5;
  left: 24px;
  bottom: 24px;
  max-width: min(430px, calc(100% - 48px));
  color: var(--cream);
  background: rgba(16,17,25,.9);
  border: 1px solid rgba(255,244,223,.45);
  font: 700 11px/1.45 "Archivo";
}
.cinematic-transcript summary { padding: 9px 11px; color: var(--orange); cursor: pointer; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.cinematic-transcript p { margin: 0; padding: 0 11px 11px; }
.cinematic-transcript:focus-within { outline: 3px solid var(--orange); outline-offset: 3px; }
.episode-actions .episode-film-button { grid-column: 1 / -1; min-height: 76px; color: var(--black); background: var(--orange); box-shadow: 0 7px 0 var(--black); }
.episode-actions .episode-film-button small { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .11em; }
.episode-actions .replay-lab-button { color: #686a72; background: transparent; border-color: #777980; box-shadow: 0 5px 0 #777980; }

.cinematic-feature { min-height: 760px; display: grid; grid-template-columns: minmax(390px,42%) 1fr; color: var(--cream); background: var(--black); border-top: 8px solid var(--red); border-bottom: 8px solid var(--orange); }
.cinematic-feature-copy { position: relative; z-index: 2; padding: clamp(64px,7vw,104px) clamp(28px,6vw,88px); display: flex; flex-direction: column; justify-content: center; background: var(--blue); }
.cinematic-feature-copy::after { content: ""; position: absolute; right: -38px; top: 15%; width: 76px; height: 70%; background: var(--blue); transform: skew(-5deg); }
.cinematic-feature-copy > * { position: relative; z-index: 1; }
.cinematic-feature-copy > span { color: var(--orange); font: 900 9px/1 "Archivo"; letter-spacing: .15em; }
.cinematic-feature-copy h2 { margin: 20px 0 28px; font: 400 clamp(48px,6.2vw,92px)/.84 "Anton"; letter-spacing: -.03em; }
.cinematic-feature-copy h2 i { color: var(--sky); font-style: normal; }
.cinematic-feature-copy p { max-width: 620px; margin: 0; color: #e2e5ed; font-size: clamp(15px,1.4vw,19px); line-height: 1.55; font-weight: 650; }
.cinematic-proof-strip { margin: 32px 0; display: grid; grid-template-columns: repeat(2,1fr); border-top: 2px solid var(--cream); border-left: 1px solid rgba(255,244,223,.5); }
.cinematic-proof-strip b { min-height: 48px; padding: 0 12px; display: flex; align-items: center; border-right: 1px solid rgba(255,244,223,.5); border-bottom: 1px solid rgba(255,244,223,.5); color: var(--cream); font: 900 9px/1 "Archivo"; letter-spacing: .1em; }
.cinematic-feature-copy .btn-gold { width: min(420px,100%); min-height: 70px; margin: 0; color: var(--black); background: var(--orange); border-color: var(--cream); box-shadow: 0 7px 0 var(--black); }
.cinematic-feature-copy .btn-gold small { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .12em; }
.cinematic-feature-screen { position: relative; min-width: 0; padding: 0; overflow: hidden; color: var(--cream); background: #050609; border: 0; border-radius: 0; cursor: pointer; text-align: left; }
.cinematic-feature-screen::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(16,17,25,.45),transparent 42%),linear-gradient(0deg,rgba(16,17,25,.86),transparent 48%); }
.cinematic-feature-screen video { width: 100%; height: 100%; min-height: 760px; display: block; object-fit: cover; object-position: 50% center; transition: transform 650ms cubic-bezier(.16,1,.3,1),filter 300ms ease; }
.cinematic-feature-screen > span { position: absolute; z-index: 2; left: clamp(30px,5vw,72px); bottom: clamp(32px,6vw,78px); display: grid; grid-template-columns: 76px 1fr; align-items: center; column-gap: 20px; }
.cinematic-feature-screen > span b { grid-row: 1 / 3; width: 76px; height: 76px; display: grid; place-items: center; color: var(--black); background: var(--orange); border: 3px solid var(--cream); box-shadow: 7px 7px 0 var(--red); font: 400 25px/1 "Anton"; }
.cinematic-feature-screen > span strong { font: 400 clamp(38px,5vw,72px)/.85 "Anton"; letter-spacing: -.02em; }
.cinematic-feature-screen > span small { color: var(--orange); font: 900 10px/1 "Archivo"; letter-spacing: .13em; }
.cinematic-feature-screen:hover video { transform: scale(1.025); filter: contrast(1.05) saturate(1.05); }
.cinematic-feature-screen:hover > span b { color: var(--cream); background: var(--red); }
.cinematic-feature-screen:focus-visible { outline: 6px solid var(--sky); outline-offset: -6px; }

.cinematic-overlay { position: fixed; inset: 0; z-index: 240; display: grid; grid-template-rows: 74px minmax(0,1fr) 104px; color: var(--cream); background: #050609; }
.cinematic-header { display: grid; grid-template-columns: 190px 1fr 230px; min-width: 0; background: var(--black); border-bottom: 2px solid var(--cream); }
.cinematic-exit,.cinematic-buttons button { color: var(--cream); background: #191b23; border: 0; border-radius: 0; font: 900 9px/1 "Archivo"; letter-spacing: .1em; cursor: pointer; }
.cinematic-exit { padding: 0 18px; text-align: left; border-right: 2px solid var(--cream); }
.cinematic-exit span { margin-right: 10px; color: var(--orange); font-size: 18px; }
.cinematic-exit:hover,.cinematic-buttons button:hover { color: var(--black); background: var(--orange); }
.cinematic-exit:focus-visible,.cinematic-buttons button:focus-visible,.cinematic-end-card button:focus-visible { outline: 4px solid var(--sky); outline-offset: -4px; }
.cinematic-title { min-width: 0; padding: 0 24px; display: flex; align-items: center; gap: 18px; }
.cinematic-title > span { color: var(--orange); font: 900 10px/1 "Archivo"; letter-spacing: .13em; white-space: nowrap; }
.cinematic-title strong { overflow: hidden; font: 400 clamp(18px,2.2vw,31px)/1 "Anton"; text-overflow: ellipsis; white-space: nowrap; }
.cinematic-title i { color: var(--red); font-style: normal; }
.cinematic-proof { padding: 0 18px; display: flex; flex-direction: column; justify-content: center; border-left: 2px solid var(--cream); }
.cinematic-proof strong { color: var(--sky); font: 900 10px/1 "Archivo"; letter-spacing: .11em; }
.cinematic-proof span { margin-top: 7px; color: #8d909a; font: 900 6px/1 "Archivo"; letter-spacing: .08em; }
.cinematic-stage { position: relative; min-height: 0; overflow: hidden; background: #020205; }
.cinematic-stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: #020205; }
.cinematic-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(2,2,5,.42),transparent 25%,transparent 75%,rgba(2,2,5,.28)),linear-gradient(0deg,rgba(2,2,5,.54),transparent 24%); }
.cinematic-scorebug { position: absolute; z-index: 3; left: 22px; top: 22px; width: min(440px,calc(100% - 44px)); display: grid; grid-template-columns: 1fr 6px 1fr; color: var(--cream); background: rgba(16,17,25,.94); border: 2px solid var(--cream); box-shadow: 7px 7px 0 rgba(255,75,50,.9); }
.cinematic-scorebug > div { min-height: 58px; padding: 10px 13px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.cinematic-scorebug > div span { font: 900 10px/1.15 "Archivo"; letter-spacing: .08em; }
.cinematic-scorebug > div strong { color: var(--sky); font: 400 31px/1 "Anton"; }
.cinematic-scorebug > div:nth-of-type(2) strong { color: var(--cream); }
.cinematic-scorebug > i { background: var(--red); }
.cinematic-scorebug > small { grid-column: 1 / -1; padding: 8px 13px; color: var(--orange); background: #07080b; font: 900 10px/1 "Archivo"; letter-spacing: .1em; border-top: 1px solid #555761; }
.cinematic-shot { position: absolute; z-index: 3; left: 22px; bottom: 22px; width: min(590px,calc(100% - 44px)); padding: 17px 20px 18px; background: rgba(16,17,25,.94); border-left: 8px solid var(--red); }
.cinematic-shot span,.cinematic-shot small { display: block; font: 900 10px/1.3 "Archivo"; letter-spacing: .11em; }
.cinematic-shot span { color: var(--orange); }
.cinematic-shot strong { display: block; margin: 7px 0; font: 400 clamp(24px,3.1vw,46px)/.9 "Anton"; }
.cinematic-shot small { color: #bdc0c9; letter-spacing: .03em; }
.cinematic-retry { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 56px; padding: 0 24px; border: 3px solid var(--cream); background: var(--black); color: var(--cream); font: 400 20px/1 "Anton", "Archivo Black", sans-serif; letter-spacing: .04em; cursor: pointer; }
.cinematic-retry[hidden] { display: none; }
.cinematic-end-card { position: absolute; z-index: 5; inset: 0; padding: 8vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; opacity: 0; visibility: hidden; background: rgba(16,17,25,.92); transition: opacity 180ms ease; }
.cinematic-overlay.is-ended .cinematic-end-card { opacity: 1; visibility: visible; }
.cinematic-end-card > span { color: var(--orange); font: 900 10px/1 "Archivo"; letter-spacing: .16em; }
.cinematic-end-card > strong { margin-top: 16px; color: var(--cream); font: 400 clamp(62px,10vw,160px)/.8 "Anton"; letter-spacing: -.035em; }
.cinematic-end-card > small { margin-top: 18px; color: var(--sky); font: 900 clamp(11px,1.3vw,18px)/1 "Archivo"; letter-spacing: .12em; }
.cinematic-end-card button { min-height: 58px; margin-top: 38px; padding: 0 22px; color: var(--black); background: var(--orange); border: 2px solid var(--cream); box-shadow: 6px 6px 0 var(--red); border-radius: 0; font: 900 10px/1 "Archivo"; letter-spacing: .1em; cursor: pointer; }
.cinematic-end-card button b { margin-left: 12px; font-size: 18px; }
.cinematic-controls { background: var(--black); border-top: 2px solid var(--cream); }
.cinematic-timeline { height: 34px; padding: 0 18px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 12px; color: #b5b7c1; font: 900 10px/1 "Archivo"; font-variant-numeric: tabular-nums; }
.cinematic-timeline input { width: 100%; height: 7px; margin: 0; accent-color: var(--red); cursor: pointer; }
.cinematic-buttons { height: 68px; display: grid; grid-template-columns: repeat(3,minmax(110px,1fr)) minmax(230px,1.45fr); border-top: 1px solid #3a3c45; }
.cinematic-buttons button { border-right: 1px solid #3a3c45; border-bottom: 5px solid transparent; }
.cinematic-buttons button:hover { border-bottom-color: var(--red); }
.cinematic-buttons button span { margin-right: 9px; color: var(--orange); font-size: 16px; }
.cinematic-buttons button:last-child { color: var(--sky); background: #0c1630; }

@media (max-width: 900px) {
  .cinematic-feature { min-height: 0; grid-template-columns: 1fr; }
  .cinematic-feature-copy { padding: 62px 24px 72px; }
  .cinematic-feature-copy::after { display: none; }
  .cinematic-feature-screen,.cinematic-feature-screen video { min-height: 560px; }
  .cinematic-header { grid-template-columns: 138px 1fr; grid-template-rows: 48px 44px; }
  .cinematic-exit { grid-row: 1; padding: 0 12px; font-size: 10px; }
  .cinematic-title { grid-row: 1; grid-column: 2; padding: 0 12px; }
  .cinematic-title > span { display: none; }
  .cinematic-title strong { font-size: clamp(14px,3vw,22px); }
  .cinematic-proof { grid-row: 2; grid-column: 1 / -1; padding: 0 12px; flex-direction: row; justify-content: space-between; align-items: center; border-left: 0; border-top: 1px solid #393b44; }
  .cinematic-proof span { margin: 0; }
}

@media (max-width: 620px) {
  .cinematic-feature-screen,.cinematic-feature-screen video { min-height: 500px; }
  .cinematic-feature-screen > span { left: 20px; right: 20px; bottom: 26px; grid-template-columns: 60px 1fr; }
  .cinematic-feature-screen > span b { width: 60px; height: 60px; }
  .cinematic-feature-screen > span strong { font-size: 40px; }
  .cinematic-overlay { grid-template-rows: 92px minmax(0,1fr) 142px; }
  .cinematic-stage video { object-fit: cover; }
  .cinematic-scorebug { left: 10px; top: 10px; width: calc(100% - 20px); box-shadow: 4px 4px 0 rgba(255,75,50,.9); }
  .cinematic-scorebug > div { min-height: 48px; padding: 7px 9px; }
  .cinematic-scorebug > div span { font-size: 6px; }
  .cinematic-scorebug > div strong { font-size: 25px; }
  .cinematic-shot { left: 10px; bottom: 10px; width: calc(100% - 20px); padding: 12px 13px; }
  .cinematic-shot strong { font-size: clamp(23px,7vw,34px); }
  .cinematic-shot small { font-size: 6px; }
  .cinematic-timeline { height: 38px; padding: 0 9px; gap: 5px; }
  .cinematic-buttons { height: 102px; grid-template-columns: repeat(3,1fr); grid-template-rows: 57px 45px; }
  .cinematic-buttons button { min-width: 0; padding: 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 6px; }
  .cinematic-buttons button span { margin: 0; font-size: 14px; }
  .cinematic-buttons button:last-child { grid-column: 1 / -1; flex-direction: row; }
  .cinematic-end-card { padding: 30px 20px; }
  .cinematic-end-card > strong { font-size: clamp(58px,19vw,88px); }
}

/* ==================================================================
   How It Works — the simulation contract and the five-block method.
   ================================================================== */

#view-about { overflow: hidden; }

.method-truth {
  position: relative;
  padding: clamp(72px,9vw,132px) clamp(22px,8vw,120px) clamp(48px,6vw,88px);
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 34px;
  color: var(--cream);
  background: var(--blue);
  border-top: 8px solid var(--red);
}
.method-truth::after {
  content: "1000×";
  position: absolute;
  right: -1vw;
  top: -2vw;
  color: rgba(255,244,223,.08);
  font: 400 clamp(110px,22vw,340px)/1 "Anton";
  letter-spacing: -.06em;
  pointer-events: none;
}
.method-truth-head { position: relative; z-index: 1; grid-column: 1 / 8; }
.method-truth-head > span {
  color: var(--orange);
  font: 900 9px/1 "Archivo";
  letter-spacing: .16em;
}
.method-truth h2 {
  margin: 18px 0 0;
  font: 400 clamp(56px,8.1vw,122px)/.82 "Anton";
  letter-spacing: -.035em;
}
.method-truth h2 i { color: var(--sky); font-style: normal; }
.method-truth-rail {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin-top: clamp(34px,5vw,74px);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 2px solid var(--cream);
  border-left: 1px solid rgba(255,244,223,.44);
}
.method-truth-rail > div {
  min-height: 142px;
  padding: 20px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-content: center;
  column-gap: 10px;
  border-right: 1px solid rgba(255,244,223,.44);
}
.method-truth-rail b { color: var(--orange); font: 400 28px/1 "Anton"; }
.method-truth-rail strong { font: 400 clamp(19px,2vw,29px)/1 "Anton"; }

/* THE METHOD. Five short poster blocks on cream: a red number, an Anton head
   leaning like the poster names, a few plain lines. No images, no build log. */
.method-blocks {
  padding: clamp(56px,7vw,110px) clamp(22px,8vw,120px) clamp(70px,8vw,120px);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(40px,5vw,72px) clamp(32px,6vw,96px);
  color: var(--black);
  background: var(--cream);
}
.method-block { position: relative; padding-top: 18px; border-top: 3px solid var(--black); }
.method-block:last-child { grid-column: 1 / -1; max-width: 860px; }
.method-block > span { display: block; color: var(--red); font: 400 28px/1 "Anton"; }
.method-block h3 {
  display: inline-block;
  margin: 14px 0 20px;
  font: 400 clamp(38px,4.6vw,66px)/.86 "Anton";
  letter-spacing: -.025em;
  transform: rotate(-3deg);
  transform-origin: left bottom;
}
.method-block h3 i { color: var(--blue); font-style: normal; }
.method-block p { max-width: 560px; margin: 0 0 12px; color: #3f3f47; font-size: clamp(15px,1.3vw,18px); line-height: 1.55; font-weight: 600; }
.method-block ul { margin: 0 0 14px; padding: 0; list-style: none; border-top: 1px solid rgba(16,17,25,.28); }
.method-block li { padding: 11px 0; border-bottom: 1px solid rgba(16,17,25,.28); font-size: 15px; line-height: 1.45; font-weight: 600; }
.method-block li b { display: inline-block; min-width: 128px; margin-right: 10px; color: var(--red); font: 900 10px/1.4 "Archivo"; letter-spacing: .12em; }

@media (max-width: 1000px) {
  .method-truth-head { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .method-truth { grid-template-columns: 1fr; gap: 30px; padding-left: 20px; padding-right: 20px; }
  .method-truth-head,.method-truth-rail { grid-column: 1; }
  .method-truth h2 { font-size: clamp(54px,16vw,84px); }
  .method-truth-rail { grid-template-columns: 1fr; }
  .method-truth-rail > div { min-height: 84px; border-bottom: 1px solid rgba(255,244,223,.44); }
  .method-blocks { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  .method-block li b { display: block; margin: 0 0 4px; }
}

@media (max-width: 480px) {
  .method-truth-rail > div { padding: 17px 12px; }
}

/* The result page's primary action sits with the verdict, not below the
   story. Measured before this existed: 719px under the fold at 900px tall. */
.afterglow-primary { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 6px; }
.afterglow-primary .moment-btn { width: 100%; margin: 0; min-height: 68px; padding: 16px 30px; font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .04em; }

/* The GOAT Machine itself, during the run. Sized to dominate the simulation
   beat: the wait is the show, so the contraption gets the room, and the tally
   and probability bar read as instrumentation attached to it. */
.goat-machine-canvas {
  display: block;
  width: 100%;
  max-width: 780px;
  height: clamp(240px, 40vh, 420px);
  margin: 18px auto 10px;
  background: var(--cream);
  border: 3px solid #101119;
  box-shadow: 0 6px 0 var(--red);
}
@media (max-width: 640px) { .goat-machine-canvas { height: 250px; box-shadow: 0 4px 0 var(--red); } }

/* Site footer: the commercial minimum — what it is, how it works, privacy,
   terms, who it is not affiliated with. */
.site-footer { padding: 44px clamp(20px,5vw,64px) 56px; color: var(--cream); background: var(--black); border-top: 8px solid var(--red); display: grid; grid-template-columns: 1.2fr auto; gap: 18px 40px; }
.site-footer-brand strong { display: block; font: 400 26px/1 "Anton"; letter-spacing: .02em; }
.site-footer-brand span { display: block; margin-top: 8px; color: #aaaeba; font-size: 14px; font-weight: 650; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-self: end; }
.site-footer-links a, .site-footer-links button { background: none; border: 0; padding: 0; color: var(--cream); font: 900 11px/1 "Archivo"; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-bottom: 2px solid var(--red); padding-bottom: 4px; }
.site-footer-legal { grid-column: 1 / -1; margin: 10px 0 0; max-width: 760px; color: #8a8fa3; font-size: 12px; line-height: 1.5; }
@media (max-width: 640px) { .site-footer { grid-template-columns: 1fr; } .site-footer-links { justify-self: start; } }

.shake { animation: goat-shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes goat-shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

/* .bout-card became a <button>; neutralise the UA button box. */
button.bout-card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---- phones: the film and the machine must survive a small screen ---- */
@supports (height: 100dvh) {
  /* iOS toolbars eat 100vh; dvh is the visible height. */
  #view-fight { min-height: 100dvh; }
  .ceremony-stage { min-height: calc(100dvh - 170px); }
  .page-view { min-height: calc(100dvh - 78px); }
  .broadcast-overlay, #watchlive-overlay, #cinematic-overlay { height: 100dvh; max-height: 100dvh; }
}
@media (max-width: 700px) {
  /* the hero was a full screen tall; doors and the primary CTA sat below it */
  .watch-hero { min-height: 64dvh; }
  /* the live-captions plate sat on the score bug and the down-and-distance */

  /* the rendered film cropped to 36% of its frame with cover; show the frame */
  #cinematic-video { object-fit: contain; background: #06080c; }
  /* film control labels were 6-7px */
  .broadcast-controls button, .cinematic-controls button { font-size: 10px; min-height: 44px; }
  /* the scrub thumb was a 16px grab target next to 44px buttons */
  .broadcast-timeline input, .cinematic-timeline input { height: 30px; touch-action: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* phone landscape: the stage collapsed to 0px between the HUD bar, the
     chapters rail and the control strip */
  .broadcast-stage-wrap { grid-template-columns: 1fr !important; grid-template-rows: minmax(60vh, 1fr) !important; }
  .broadcast-stage-wrap > :not(:first-child) { display: none; }
  #watchlive-stage, .broadcast-stage { min-height: 60vh; }
}
@media (max-width: 700px) {
  /* LIVE CAPTIONS plate sat across the score bug and down-and-distance */
  .broadcast-call { top: 66px !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; }
  .broadcast-call strong { font-size: 15px !important; }
  .broadcast-play-context { left: 8px; bottom: 8px; width: calc(100% - 16px); padding: 9px 11px; }
  .broadcast-play-context strong { font-size: 17px; }
}

/* ==========================================================================
   BAR MODE — one entry, one run, one reveal.
   THE PHONE GATE. This literal is the only breakpoint the product recognises;
   js/app.js declares the same string as GOAT.PHONE_QUERY and
   tests/shell-barmode.test.js fails if the two ever drift.
   ========================================================================== */

/* ---------------------------------------------------------------- THE PICK */
.pick {
  position: relative;
  z-index: 2;
  display: block;
  padding: 92px clamp(16px, 4vw, 58px) 34px;
  background: var(--cream);
  border-bottom: 4px solid var(--black);
}
.pick-bar { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pick-sports { display: grid; grid-template-columns: repeat(4, 1fr); flex: 1; border: 3px solid var(--black); background: var(--black); gap: 3px; }
.pick-sport {
  min-height: 48px;
  padding: 0 6px;
  border: 0;
  border-bottom: 5px solid transparent;
  background: var(--cream);
  color: var(--black);
  font: 400 16px/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.pick-sport.active { border-bottom-color: var(--red); }
/* The reveal's sport bar is a strip, not a stretched pick module. */
.reveal-sports { flex: 0 0 auto; height: 54px; margin: 0 0 18px; }
.reveal-sports .pick-sport { min-height: 48px; height: 48px; }
/* The one sound switch for the pick, the run and the reveal: quiet, square,
   48px, beside the ⋯. Struck through when the visitor has muted. */
.pick-sound {
  flex: 0 0 48px;
  width: 48px;
  min-height: 48px;
  border: 3px solid var(--black);
  background: var(--cream);
  color: var(--black);
  font: 900 20px/1 "Archivo", sans-serif;
  cursor: pointer;
}
.pick-sound[aria-pressed="false"] { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--red); }
.pick-notice { margin: 0 0 10px; padding: 10px 12px; background: var(--black); color: var(--cream); font: 400 18px/1.1 "Anton", "Archivo Black", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.pick-notice[hidden] { display: none; }
.pick-slabs { display: grid; grid-template-columns: 1fr; border: 4px solid var(--black); }
.pick-slab {
  display: block;
  width: 100%;
  min-height: 116px;
  padding: 16px 18px;
  border: 0;
  background: var(--blue);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}
.pick-slab b { display: block; font: 400 clamp(30px, 8vw, 46px)/.92 "Anton", "Archivo Black", sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.pick-slab small { display: block; margin-top: 7px; font: 800 11px/1 "Archivo", sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-vs {
  display: block;
  padding: 5px 0;
  background: var(--red);
  color: var(--cream);
  font: 400 20px/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .12em;
  text-align: center;
}
.pick-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 14px; background: var(--black); border: 3px solid var(--black); }
.pick-mode {
  min-height: 46px;
  border: 0;
  background: var(--cream);
  color: var(--black);
  font: 800 12px/1 "Archivo", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.pick-mode.active { background: var(--black); color: var(--cream); }
.pick-run {
  display: block;
  width: 100%;
  min-height: 74px;
  margin-top: 14px;
  border: 4px solid var(--black);
  background: var(--orange);
  color: var(--black);
  font: 400 clamp(30px, 9vw, 44px)/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}
.pick-run:active { transform: translate(2px, 2px); }
.pick-premise { margin: 11px 0 0; font: 800 10px/1.3 "Archivo", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--black); opacity: .62; text-align: center; }

/* ---------------------------------------------------------------- sheets */
.pick-wheel, .pick-menu, .why-sheet {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr);
  background: var(--cream);
  color: var(--black);
}
.pick-wheel.hidden, .pick-menu.hidden, .why-sheet.hidden { display: none; }
.pick-wheel-head, .why-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border-bottom: 4px solid var(--black);
}
.pick-wheel-head h2, .why-sheet-head h2 { margin: 0; font: 400 22px/1 "Anton", "Archivo Black", sans-serif; letter-spacing: .06em; }
.pick-wheel-head button, .why-sheet-head button { width: 46px; height: 46px; border: 3px solid var(--black); background: var(--cream); color: var(--black); font: 900 16px/1 "Archivo", sans-serif; cursor: pointer; }
.pick-wheel-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pick-wheel-row {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid var(--black);
  background: var(--cream);
  color: var(--black);
  font: 400 26px/64px "Anton", "Archivo Black", sans-serif;
  letter-spacing: .01em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.pick-wheel-row small { margin-left: 10px; font: 800 11px/1 "Archivo", sans-serif; letter-spacing: .14em; }
.pick-wheel-row.current { color: var(--red); }
.pick-menu { grid-template-rows: 1fr; place-items: center; }
.pick-menu-inner { display: grid; gap: 10px; width: min(420px, 88vw); }
.pick-menu-inner h2 { margin: 0 0 6px; font: 400 26px/1 "Anton", "Archivo Black", sans-serif; letter-spacing: .08em; }
.pick-menu-inner button {
  min-height: 56px;
  border: 3px solid var(--black);
  background: var(--cream);
  color: var(--black);
  font: 400 19px/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.why-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 40px; background: var(--cream); }

/* ---------------------------------------------------------------- THE CALL */
/* On a phone THE CALL is pinned over the running machine and the tally
   clears the home indicator; on a desktop the same strip is a block in the
   flow under the machine, so it can never land on the canvas, the prob bar
   or the milestone flash. That only holds because js/app.js appends the strip
   INSIDE .simulation: #ceremony-stage is a `display: flex` row with no wrap,
   and a strip appended there is a second column, not a block underneath. */
.call-strip {
  z-index: 40;
  margin-top: 18px;
  padding: 10px 12px 14px;
  background: var(--black);
  border-top: 4px solid var(--cream);
}
body[data-shell="phone"] .call-strip {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin-top: 0;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
/* A transformed ancestor is the containing block for `position: fixed`, and
   .ceremony-state enters on a translate. The strip now lives inside the run
   state, so on the phone the run fades in without moving: otherwise the
   pinned strip would be pinned to the machine, not the screen, for the 420ms
   that translate is live. Keyed on the latched shell, not the width query,
   so a rotation mid-run cannot drop it. */
body[data-shell="phone"] .simulation.ceremony-state { animation: simIn 420ms var(--ease-standard) both; }
@keyframes simIn { from { opacity: 0; } to { opacity: 1; } }
/* THE CALL ON A DESK. The slabs sat under the machine, below the fold at
   1280x800, so a table round a laptop could not see what to press. During the
   run they are pinned to the bottom of the viewport on the desk too; the strip
   is still appended INSIDE .simulation (see above), the run state fades rather
   than slides so the fixed strip is pinned to the screen, and the run clears
   the strip's height so the skip hint and the flash stay above it. */
body[data-shell="desktop"] .call-strip {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin-top: 0;
  padding: 10px max(16px, calc((100vw - 900px) / 2)) 14px;
}
body[data-shell="desktop"] .simulation.ceremony-state { animation: simIn 420ms var(--ease-standard) both; }
/* Measured at 1280x800: the pinned strip starts at 646px, so the run is
   compacted to keep the machine, the bar, the flash and the skip above it. */
body[data-shell="desktop"] .simulation { margin-top: -76px; padding-bottom: 170px; }
body[data-shell="desktop"] .simulation h2 { font-size: clamp(26px, 3vw, 40px); margin: 0 0 8px; }
body[data-shell="desktop"] .simulation .tally-row { margin-bottom: 6px; }
body[data-shell="desktop"] .simulation .tally-side { padding: 8px 16px; }
body[data-shell="desktop"] .simulation .tally-num { font-size: 56px; }
body[data-shell="desktop"] .simulation .goat-machine-canvas { height: clamp(180px, calc(100vh - 540px), 420px); margin: 8px auto 6px; }
body[data-shell="desktop"] .simulation .milestone-flash { margin-top: 8px; }
body[data-shell="desktop"] .simulation .skip-hint { margin-top: 6px; }
/* SEALED: until the calls lock the tally reads "?" (js/app.js) and the
   probability bar is held back, so nobody calls the leader. */
.simulation.is-sealed .prob-bar-track { visibility: hidden; }
/* SKIP TO VERDICT hangs off the bottom of #ceremony-stage everywhere else,
   but THE CALL now ends the run state and an absolute hint anchored there
   lands on the slabs. In the run it is a block in the flow instead: under the
   milestone flash, above the strip, centred by .simulation's own text-align.
   (It is desktop-only — js/app.js does not build it on the phone.) */
.simulation .skip-hint { position: static; display: inline-block; margin: 14px 0 0; }
.call-q { display: block; margin-bottom: 8px; font: 800 13px/1.2 "Archivo", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); text-align: center; }
/* The run is where the calls are made, so on the phone the machine clears
   the pinned slabs instead of running underneath them. */
body[data-shell="phone"] .simulation { padding-bottom: calc(176px + env(safe-area-inset-bottom)) !important; }
.rating-legend { font: 500 14px/1.5 "Archivo", sans-serif; }
.rating-legend { margin-top: 16px; }
.reveal-rules { margin: 8px 0; font: 700 14px/1.5 "Archivo", sans-serif; }
.reveal-reaction { margin: 12px 0; font: 800 18px/1.4 "Archivo", sans-serif; }
.matchup-data-caveat { display: block; margin: 8px 0 4px; font: 600 13px/1.45 "Archivo", sans-serif; }
.persistent-verdict-method { margin: 0; padding: 14px clamp(20px,4vw,44px) 20px; font: 600 13px/1.5 "Archivo", sans-serif; }
.persistent-verdict-method .inline-action { min-height: 48px; }
.verdict .verdict-pct small { font-size: .22em; letter-spacing: .04em; }
.call-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.call-slab {
  position: relative;
  min-height: 70px;
  padding: 14px 10px 10px;
  border: 0;
  background: var(--blue);
  color: var(--cream);
  font: 400 clamp(18px, 5vw, 26px)/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  cursor: pointer;
}
.call-slab i { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.call-slab:active { transform: translateY(2px); }
.call-slab:disabled { opacity: .55; cursor: default; }
.call-slab:disabled:active { transform: none; }
.call-tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; min-height: 26px; }
.call-token-column { display: flex; flex-wrap: wrap; gap: 4px; }
.call-token {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  background: var(--cream);
  color: var(--black);
  font: 900 12px/1 "Archivo", sans-serif;
}

/* ---------------------------------------------------------------- THE REVEAL */
.reveal { padding: 26px clamp(16px, 4vw, 40px) 30px; background: var(--cream); color: var(--black); border-bottom: 4px solid var(--black); }
.reveal-winner {
  margin: 0;
  /* A wrapped team-season needs room for its own ink offset: at .86 the
     shadow of the first line lands on the second. */
  font: 400 clamp(38px, 11vw, 88px)/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--black);
  /* The poster's hard second impression, scaled to the type rather than
     pinned at 5px: an ink-on-ink offset is mush, so the offset takes the
     second ink. */
  text-shadow: .05em .05em 0 var(--blue);
  animation: revealSlam 250ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.reveal-pct { margin-top: 12px; color: var(--red); font: 400 clamp(40px, 11vw, 64px)/.9 "Anton", "Archivo Black", sans-serif; }
.reveal-evidence { margin: 10px 0 0; font: 800 11px/1.5 "Archivo", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.reveal-stamps { display: flex; flex-wrap: wrap; gap: 9px; min-height: 0; margin-top: 16px; }
.reveal-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 3px solid currentColor;
  font: 900 12px/1 "Archivo", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-6deg) scale(1.5);
}
.reveal-stamp b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; font: 900 12px/1 "Archivo", sans-serif; }
/* Print ink, both ways: a blue CALLED IT beside a cobalt player read as that
   player. The outcome is the word (WRONG is struck through); the colour is
   the side the caller picked, on the number (js/app.js paintStamps). */
.reveal-stamp.called { color: var(--black); }
.reveal-stamp.wrong { color: var(--black); text-decoration: line-through; text-decoration-thickness: 2px; }
.reveal-stamp.is-in { opacity: 1; transform: rotate(-6deg) scale(1); transition: opacity 90ms linear, transform 120ms cubic-bezier(0.55, 0, 1, 0.45); }
.reveal-stamp.stale { color: var(--black); }
.reveal-stale-calls { flex: 1 0 100%; margin: 0; font: 800 10px/1 "Archivo", sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.reveal-too-close { margin: 0; font: 400 22px/1 "Anton", "Archivo Black", sans-serif; letter-spacing: .06em; }
.reveal-watch {
  display: block;
  width: 100%;
  min-height: 72px;
  margin-top: 18px;
  border: 4px solid var(--black);
  background: var(--orange);
  color: var(--black);
  font: 400 clamp(28px, 8vw, 40px)/1 "Anton", "Archivo Black", sans-serif;
  cursor: pointer;
}
.reveal-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.reveal-next {
  flex: 1 0 100%;
  min-height: 54px;
  padding: 8px 12px;
  border: 3px solid var(--black);
  background: var(--cream);
  color: var(--black);
  font: 400 20px/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.reveal-next small { display: block; margin-top: 5px; font: 800 10px/1.2 "Archivo", sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.reveal-link {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid var(--black);
  background: none;
  color: var(--black);
  font: 800 11px/1 "Archivo", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
@keyframes revealSlam { from { opacity: 0; transform: translateY(-14px) scale(1.12); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------ THE FILM / FIGHT ON PHONE */
.phone-film, .phone-fight { display: none; }
.phone-film[hidden], .phone-fight[hidden] { display: none !important; }
.phone-film-controls { position: absolute; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 13; display: flex; gap: 8px; }
.phone-film-controls button {
  min-height: 50px;
  border: 3px solid var(--cream);
  background: var(--black);
  color: var(--cream);
  font: 800 13px/1 "Archivo", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
#phone-film-next { flex: 1; }
#phone-film-exit { width: 56px; }
.watch-end { position: absolute; inset: 0; z-index: 20; display: grid; align-content: center; gap: 10px; padding: 0 18px 90px; background: var(--cream); }
.watch-end[hidden] { display: none; }
/* The view's own ✕ stays above its end card; the play-to-play skip has
   nothing left to skip. */
.phone-film.is-ended .phone-film-controls, .phone-fight.is-ended .phone-fight-controls { z-index: 21; }
.phone-film.is-ended #phone-film-next, .phone-fight.is-ended #pf-end { display: none; }
.phone-film.is-ended #phone-film-exit, .phone-fight.is-ended #pf-exit { margin-left: auto; }
.watch-end button {
  min-height: 60px;
  border: 3px solid var(--black);
  background: var(--cream);
  color: var(--black);
  font: 400 20px/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}
.watch-end button:first-child { background: var(--orange); }

.phone-fight-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  background: var(--black);
  border-bottom: 2px solid var(--cream);
}
.pf-side { min-width: 0; }
.pf-side b { display: block; overflow: hidden; font: 400 13px/1.05 "Anton", "Archivo Black", sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--cream); white-space: nowrap; text-overflow: ellipsis; }
.pf-side .pf-dmg { display: block; height: 3px; margin-top: 3px; background: rgba(255, 244, 223, .2); }
.pf-side .pf-dmg u { display: block; height: 100%; width: 0; background: var(--red); text-decoration: none; }
.pf-side.pf-right { text-align: right; }
/* SOURCES. The records a card's facts were read from, on the card itself. */
.fm-sources, .matchup-sources { margin: 10px 0 14px; padding: 10px 12px; border-left: 4px solid var(--orange); background: rgba(16, 17, 25, .04); font: 700 12px/1.5 "Archivo", sans-serif; }
.fm-sources span, .matchup-sources span { display: inline-block; margin-right: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--black); }
.fm-sources a, .matchup-sources a { display: inline-block; margin-right: 12px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.fm-sources small, .matchup-sources small { display: block; margin-top: 4px; font-weight: 400; color: #5d5a54; }
.matchup-sources { background: rgba(255, 244, 223, .12); }
.matchup-sources span { color: inherit; }
.matchup-sources a { color: inherit; }
.matchup-sources small { color: inherit; opacity: .75; }

/* WHO IS WHO. Every watch view names its two sides in the strip, but the
   picture is two goats in two kits: the chip beside each name is that kit's
   primary with a stripe of its secondary, so the strip and the stage read as
   the same two people. */
.pf-chip { display: inline-block; width: 12px; height: 12px; margin: 0 5px -1px 0; border: 1.5px solid var(--cream); background: var(--blue); vertical-align: baseline; position: relative; overflow: hidden; }
.pf-chip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--chip-secondary, var(--cream)); }
.pf-side.pf-right .pf-chip { margin: 0 0 -1px 5px; }
.hud-name .pf-chip { width: 13px; height: 13px; border-color: var(--black); }
/* Floating tags over the two figures on the 3D stages: the shell projects
   each head through the stage's own camera and parks the tag above it. */
.fight3d-viewport { position: relative; }
.stage-tag { position: absolute; left: 0; top: 0; z-index: 3; display: none; align-items: center; gap: 5px; padding: 3px 7px 3px 5px; color: var(--cream); background: rgba(16, 17, 25, .82); border: 1.5px solid var(--cream); font: 400 11px/1 "Anton", "Archivo Black", sans-serif; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -100%); pointer-events: none; will-change: transform; }
.stage-tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 8px; height: 6px; margin-left: -4px; background: var(--cream); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.stage-tag i { display: block; width: 11px; height: 11px; border: 1.5px solid var(--cream); background: var(--chip-primary, var(--blue)); position: relative; overflow: hidden; }
.stage-tag i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--chip-secondary, var(--cream)); }
.stage-tag.on { display: flex; }
.pf-round { font: 400 14px/1 "Anton", "Archivo Black", sans-serif; letter-spacing: .06em; color: var(--orange); white-space: nowrap; }
.phone-fight-call {
  position: absolute;
  left: 12px; right: 12px; bottom: 80px;
  z-index: 12;
  font: 400 clamp(18px, 5.6vw, 30px)/1.14 "Anton", "Archivo Black", sans-serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--black), 2px 0 0 var(--black), -2px 0 0 var(--black), 0 2px 0 var(--black), 0 -2px 0 var(--black);
  pointer-events: none;
}
.phone-fight-call.punch { animation: callPunch 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes callPunch { from { opacity: 0; transform: translateY(8px) scale(1.06); } to { opacity: 1; transform: none; } }
.phone-fight-controls { position: absolute; left: 10px; right: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 13; display: flex; gap: 8px; }
.phone-fight-controls button {
  min-height: 50px;
  border: 3px solid var(--cream);
  background: var(--black);
  color: var(--cream);
  font: 800 13px/1 "Archivo", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
#pf-end { flex: 1; }
#pf-read { flex: 1; background: var(--orange); color: var(--black); border-color: var(--black); }
#pf-exit { width: 56px; }

/* Nothing that starts on its own may be the only way to read the screen. */
@media (prefers-reduced-motion: reduce) {
  .reveal-winner { animation: none; }
  .reveal-stamp { opacity: 1; transform: rotate(-6deg); transition: none; }
  .phone-fight-call.punch { animation: none; }
  /* The beat feed's still rule is NOT here: it has to come after the
     beatPunch declaration further down this file, or the later rule wins at
     equal specificity and the biggest thing on the screen jumps once per
     logged event for a visitor who asked for no motion. See the block that
     follows @keyframes beatPunch. */
}

/* ==========================================================================
   THE PHONE. Same literal as GOAT.PHONE_QUERY in js/app.js.
   ========================================================================== */
@media (max-width: 760px) {
  /* THE PICK is the landing. Everything else on it moves behind the ⋯ menu;
     nothing is deleted, so desktop and crawlers are unaffected. */
  body[data-shell="phone"] #view-landing > :not(#pick-module) { display: none; }
  body[data-shell="phone"] .goat-nav .site-tabs { display: none; }
  body[data-shell="phone"] .goat-nav .wordmark .brand-type i { display: none; }
  body[data-shell="phone"] #view-landing { min-height: 0; background: var(--cream); }
  /* The four site tabs moved into ⋯, so the two-row masthead becomes one row
     and the 53px it held goes back to the pick. */
  body[data-shell="phone"].goat-arena { padding-top: 65px; }
  body[data-shell="phone"] .goat-nav { min-height: 65px; grid-template-columns: 1fr auto; grid-template-rows: 65px; }
  /* The pick fills the shell rather than floating on an empty cream page:
     the two slabs take whatever height is left between the bar and the
     button, so the pair reads as a poster and not as a form. */
  body[data-shell="phone"] .pick { display: flex; flex-direction: column; min-height: calc(100dvh - 65px); padding-top: 16px; }
  body[data-shell="phone"] .pick-slabs { flex: 1 1 auto; grid-template-rows: 1fr auto 1fr; }
  body[data-shell="phone"] .pick-premise { margin-top: auto; padding-top: 14px; }

  /* THE REVEAL is the page on a phone, not a card floating on a dark one. */
  body[data-shell="phone"] #view-fight { background: var(--cream); }
  body[data-shell="phone"] .reveal { display: flex; flex-direction: column; justify-content: flex-start; min-height: calc(100dvh - 65px); padding-top: 30px; border-bottom: 0; }
  body[data-shell="phone"] #view-fight { padding: 0; min-height: calc(100dvh - 65px); }
  body[data-shell="phone"] .afterglow, body[data-shell="phone"] .ceremony-stage { margin: 0; padding: 0; min-height: 0; }
  .pick-slab { min-height: 104px; }

  /* THE RUN. The machine keeps the top of the screen; THE CALL owns the
     bottom of it and the tally clears the strip. */
  body[data-shell="phone"] .simulation { padding-bottom: 190px; }
  /* The run stands on cream on a phone; the desktop heading is cream type
     for an ink ground and vanished here, leaving a hole above the tally. */
  body[data-shell="phone"] .simulation h2 { color: var(--black); font-size: 22px; letter-spacing: .06em; margin: 8px 0 14px; }
  body[data-shell="phone"] #milestone-flash { font: 800 12px/1.3 "Archivo", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--black); }

}

/* ==========================================================================
   AN OPEN VIEW KEEPS THE SHELL IT OPENED WITH. The film and the fight are
   dressed by the .is-phone class js/app.js writes at open time, NOT by the
   width query: an iPhone at 375x812 becomes 812x375 in landscape and crosses
   the 760px gate, and a rule nested in that query would drop the full-bleed
   stage, the deck and the strip out from under a film already playing.
   ========================================================================== */

/* THE FILM. The stage is the viewport; the header, chapters rail, scrubber
   and the five-button deck leave the phone. */
.broadcast-overlay.is-phone { grid-template-rows: minmax(0, 1fr) !important; }
.broadcast-overlay.is-phone .broadcast-header,
.broadcast-overlay.is-phone .broadcast-chapters,
.broadcast-overlay.is-phone .broadcast-play-context,
.broadcast-overlay.is-phone .broadcast-call { display: none !important; }
/* The footer is not hidden wholesale any more: it carries the film's ONLY
   sound control, and a child of a `display: none !important` parent cannot be
   revealed by any child rule. So the deck is emptied instead and the one
   button that matters is re-hung as a glyph in the top corner, reusing the
   handler, the label sync and the aria-pressed wiring the desktop already has
   rather than growing a third permanent control on a two-button deck. */
.broadcast-overlay.is-phone .broadcast-footer {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: 10px;
  left: auto;
  bottom: auto;
  z-index: 14;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.broadcast-overlay.is-phone .broadcast-timeline,
.broadcast-overlay.is-phone #watchlive-play,
.broadcast-overlay.is-phone #watchlive-speed,
.broadcast-overlay.is-phone #watchlive-mode,
.broadcast-overlay.is-phone #watchlive-restart,
.broadcast-overlay.is-phone #watchlive-capture { display: none !important; }
.broadcast-overlay.is-phone .broadcast-controls { display: block; margin: 0; padding: 0; border: 0; background: none; }
/* Glyph only: "STADIUM FX ON" is desk copy. The label survives for AT in the
   button's own aria-label, which js/app.js already keeps in step. */
.broadcast-overlay.is-phone #watchlive-sound {
  width: 52px;
  min-height: 52px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 0;
  border: 3px solid var(--cream);
  background: var(--black);
  color: var(--cream);
}
.broadcast-overlay.is-phone #watchlive-sound span { font-size: 20px; line-height: 1; }
/* The end card owns the whole screen; the film it would mute has finished.
   A browser without :has() simply drops this rule and keeps the control. */
.broadcast-overlay.is-phone:has(#watch-end:not([hidden])) .broadcast-footer { display: none; }
.broadcast-overlay.is-phone .broadcast-stage-wrap { position: fixed; inset: 0; grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 1fr) !important; }
.broadcast-overlay.is-phone #watchlive-stage { position: fixed; inset: 0; }
.broadcast-overlay.is-phone .phone-film { display: block; }
/* The film's own loading slate is a cream print on the small shell. */
.broadcast-overlay.is-phone #gi-rig-loading { background: #fff4df !important; color: #101119 !important; }
.broadcast-overlay.is-phone #gi-rig-loading b { color: #e2231a !important; }

/* THE FIGHT. Same shell: no card, no padding, no radius. */
body.fight-open { overflow: hidden; }
.watch-view.is-phone { position: fixed; inset: 0; z-index: 210; margin: 0; padding: 0; border-radius: 0; background: var(--black); }
.watch-view.is-phone .fight3d-viewport { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }
.watch-view.is-phone .hud-top,
.watch-view.is-phone .momentum-ribbon { display: none; }
/* Same treatment as the film: the fight's sound control lived in this deck and
   went with it, so a table that wants the crowd off had to leave the fight. */
.watch-view.is-phone .watch-controls {
  position: absolute;
  top: 48px;
  right: 10px;
  left: auto;
  z-index: 14;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.watch-view.is-phone .watch-controls > button { display: none; }
/* READ puts a cream sheet over the fight; the corner control goes with the
   rest of the picture rather than floating on top of the reading. */
.watch-view.is-phone.reading .watch-controls { display: none; }
.watch-view.is-phone #watch-sound {
  display: grid;
  place-items: center;
  width: 70px;
  min-height: 52px;
  padding: 0 4px;
  font: 800 10px/1.1 "Archivo", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 3px solid var(--cream);
  background: var(--black);
  color: var(--cream);
  /* .watch-controls .btn-secondary carries a red drop-shadow bar sized for a
     desk-width deck; at 70px it reads as a stray underline. */
  box-shadow: none;
}
.watch-view.is-phone .phone-fight { display: block; }
.watch-view.is-phone .commentary { display: none; }

/* THE FIGHT WITHOUT A STAGE. The 3D pair is boxing-only — a standing
   exchange over logged grappling would be a lie — and boxing loses the ring
   with no WebGL or under reduced motion. So the ticker IS the picture on
   every one of those paths: the last three beats stacked in Anton, newest
   biggest, cream on ink, over a 6px band of the pair's own colours. It is
   hidden ONLY when #fight3d-viewport is actually the picture. */
.watch-view.is-phone .ticker {
  position: absolute;
  inset: 46px 0 78px;
  z-index: 11;
  display: flex;
  flex-direction: column-reverse;
  /* column-reverse packs from the bottom, so the newest beat sits where the
     call line sat — just above the deck — and the older two stack up behind
     it. The newest line's baseline never moves as the type sizes change. */
  justify-content: flex-start;
  gap: 12px;
  overflow: hidden;
  margin: 0;
  padding: 18px 14px;
  background: var(--black);
  color: var(--cream);
}
.watch-view.is-phone.has-stage .ticker { display: none; }
.watch-view.is-phone .ticker .tline {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  /* css/goat.css fades every desktop ticker line in FROM opacity 0. The print
     is not a feed of arrivals, and a line whose only way onto the screen is
     an animation is a blank screen wherever animations are not running. */
  opacity: 1;
  animation: none;
  color: var(--cream);
  font: 400 clamp(19px, 6vw, 30px)/1.06 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.watch-view.is-phone .ticker .tline:not(:nth-last-child(-n+3)) { display: none; }
.watch-view.is-phone .ticker .tline:nth-last-child(3) { opacity: .34; }
.watch-view.is-phone .ticker .tline:nth-last-child(2) { opacity: .62; }
/* The newest beat IS the big call line on this path, punched in on each
   event; #pf-call stays as the live region so the same words are announced
   once rather than printed twice on a 375px screen. */
.watch-view.is-phone .ticker .tline:nth-last-child(1) { font-size: clamp(30px, 9.5vw, 46px); animation: beatPunch 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* The beat punches on transform alone. callPunch fades from opacity 0, and a
   line whose only way onto the screen is an animation is a blank screen in
   any tab that is not running them. */
@keyframes beatPunch { from { transform: translateY(8px) scale(1.06); } to { transform: none; } }
/* A media query adds no specificity, so this still rule only beats the
   beatPunch declaration above by being later in the file. It must stay below
   it; anything appended to the bar-mode section goes after this block. */
@media (prefers-reduced-motion: reduce) {
  .watch-view.is-phone .ticker .tline:nth-last-child(1) { animation: none; }
}
.watch-view.is-phone .ticker .tline.emph { color: var(--orange); }
.watch-view.is-phone:not(.has-stage) .phone-fight-call { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-band { position: absolute; top: 40px; left: 0; right: 0; z-index: 12; display: none; height: 6px; }
.watch-view.is-phone:not(.has-stage) .pf-band { display: flex; }
.pf-band u { display: block; flex: 1 1 50%; height: 100%; text-decoration: none; }

/* READING MODE. The sheet stops above the deck and the deck rides over it,
   so ✕ EXIT and ⏭ END are never buried; ✕ DONE closes the read. */
.watch-view.is-phone.reading .commentary { display: block; position: absolute; inset: 40px 0 78px; z-index: 30; margin: 0; max-height: none; border-radius: 0; overflow-y: auto; padding: 18px; background: var(--cream); color: var(--black); }
.watch-view.is-phone.reading .phone-fight-controls { z-index: 40; }
.watch-view.is-phone.reading .ticker, .watch-view.is-phone.reading .pf-band { display: none; }
.pf-read-done {
  display: none;
  min-height: 46px;
  margin: 0 0 12px;
  padding: 0 16px;
  border: 3px solid var(--black);
  background: var(--cream);
  color: var(--black);
  font: 800 12px/1 "Archivo", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.watch-view.is-phone.reading .pf-read-done { display: inline-block; }
.pf-read-done[hidden] { display: none !important; }

/* The landscape collapse hides every sibling of the stage; the phone deck is
   the one thing that must survive it. */
@media (max-height: 520px) and (orientation: landscape) {
  .broadcast-stage-wrap > #phone-film:not([hidden]) { display: block; }
}

/* THE MENU BUTTON. Desktop keeps its four site tabs, so the ⋯ only stands in
   the phone masthead, where it opens the same four pages from every page. */
.site-more {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 48px;
  min-height: 48px;
  margin-right: 12px;
  padding: 0;
  border: 2px solid var(--cream);
  background: transparent;
  color: var(--cream);
  font: 900 20px/1 "Archivo", sans-serif;
  cursor: pointer;
}
.site-more:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
body[data-shell="desktop"] .site-more,
body:not([data-shell]) .site-more { display: none; }
/* Between the phone gate (760) and 820 the desktop shell hides the rail for
   width; the ⋯ stands in there too, or that band has no navigation at all. */
@media (max-width: 820px) {
  body[data-shell="desktop"] .goat-nav .site-more { display: grid; }
}

/* The knockdown count is the loudest thing on screen and must stay on top of
   the full-bleed fight shell it is counting over. */
body.fight-open .count-overlay { z-index: 260; }

/* Above the gate the two sides sit side by side; below it they stack, because
   a name set at 46px cannot share a 375px line. */
@media (min-width: 761px) {
  .pick { padding-bottom: 40px; }
  .pick-slabs { grid-template-columns: 1fr 78px 1fr; }
  .pick-vs { display: grid; place-items: center; padding: 0; }
  .pick-modes, .pick-run { max-width: 520px; margin-left: auto; margin-right: auto; }
  .pick-premise { letter-spacing: .3em; }
  .reveal-secondary .reveal-next { flex: 0 0 auto; }
}


/* ==========================================================================
   BAR MODE, SECOND PASS. Everything below is appended deliberately: the
   reduced-motion still rule for the beat feed has to stay the last word on
   .tline:nth-last-child(1), and nothing here touches that selector.
   ========================================================================== */

/* THE PAUSE IS VISIBLE. The whole picture is the pause button on a phone and
   the desktop deck that showed the state is display:none, so a stray tap —
   most likely during a chapter card, which already looks like a still frame —
   was indistinguishable from a film that had frozen. .phone-film is a static
   block whose children position against .broadcast-stage-wrap, so an absolute
   ::after lands full-bleed; pointer-events:none keeps the resume tap on the
   stage underneath, and z-index 14 sits above the deck and under the end card. */
.broadcast-overlay.is-phone.film-paused .phone-film::after {
  content: "\275A\275A";
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-items: center;
  pointer-events: none;
  font: 400 clamp(40px, 12vw, 64px)/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .06em;
  color: var(--cream);
  text-shadow: 4px 4px 0 var(--ink), 0 0 24px rgba(16, 17, 25, .55);
  opacity: .92;
}
/* The fight says the same thing the same way. */
.watch-view.is-phone.fight-paused::after {
  content: "\275A\275A";
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-items: center;
  pointer-events: none;
  font: 400 clamp(40px, 12vw, 64px)/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .06em;
  color: var(--cream);
  text-shadow: 4px 4px 0 var(--ink), 0 0 24px rgba(16, 17, 25, .55);
  opacity: .92;
}
/* The picture is a real button on this shell, so it takes the site's focus
   ring rather than the browser's default outline on a full-bleed canvas. */
.broadcast-overlay.is-phone #watchlive-stage:focus-visible,
.watch-view.is-phone .ticker:focus-visible,
.watch-view.is-phone .fight3d-viewport:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }

/* MMA HAS A PICTURE. setup3D gates the ring to boxing, so on MMA — and on
   boxing without WebGL — the beat feed IS the picture and everything above it
   was flat black. The band is no longer a 6px hairline on those paths: it is
   the field, the same two damage numbers split the same way, with the shape
   the fight is actually held in drawn over it. Nothing here says anything the
   log does not already hold. */
.watch-view.is-phone:not(.has-stage) .pf-band { top: 40px; bottom: 78px; height: auto; z-index: 1; opacity: .17; }
.watch-view.is-phone:not(.has-stage) .ticker { inset: 46px 0 132px; background: none; }
.pf-ring { display: none; }
.watch-view.is-phone:not(.has-stage) .pf-ring {
  display: block;
  position: absolute;
  /* An <svg> is a replaced element: with height auto it takes its viewBox
     ratio and ignores `bottom`, so the square is placed by top and width. */
  top: 84px;
  left: 50%;
  width: min(74vw, 44vh);
  transform: translateX(-50%);
  z-index: 2;
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.4;
  opacity: .22;
  pointer-events: none;
}
.pf-ring-cage, .pf-ring-square, .pf-ring-court { display: none; }
.watch-view.is-phone:not(.has-stage) .pf-ring-square { display: block; }
.watch-view.is-phone.sport-cage:not(.has-stage) .pf-ring-square { display: none; }
.watch-view.is-phone.sport-cage:not(.has-stage) .pf-ring-cage { display: block; }
/* Basketball without WebGL: the half court, basket at the top. */
.watch-view.is-phone.sport-court:not(.has-stage) .pf-ring-square { display: none; }
.watch-view.is-phone.sport-court:not(.has-stage) .pf-ring-court { display: block; }
.watch-view.is-phone.reading .pf-ring { display: none; }

/* THE FRAME YOU CAPTURED. iOS Safari honours `download` on a data: URI
   unreliably, and its usual failure is to navigate the tab to a bare PNG over
   a fixed full-viewport film — a dead end. Where there is no share sheet the
   frame is shown instead, to press and hold. */
.frame-sheet {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--cream);
  color: var(--black);
}
.frame-sheet.hidden { display: none; }
.frame-sheet img { max-width: 100%; max-height: 60vh; border: 3px solid var(--black); }
.frame-sheet p { margin: 0; font: 400 clamp(20px, 6vw, 30px)/1 "Anton", "Archivo Black", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.frame-sheet button {
  min-height: 56px;
  min-width: 200px;
  padding: 0 20px;
  border: 3px solid var(--black);
  background: var(--orange);
  color: var(--black);
  font: 400 20px/1 "Anton", "Archivo Black", sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}

/* THE PICK BEFORE THE DATA. The slabs used to be two empty boxes and RUN IT a
   dead press for as long as the roster took to arrive; the names come off the
   slugs so the module reads as itself from the first frame, and the button
   says it is not ready yet rather than swallowing the tap. */
.pick-slab.is-loading { background: rgba(16, 17, 25, .06); color: var(--black); box-shadow: inset 0 0 0 3px var(--black); opacity: .5; }
.pick-run:disabled { opacity: .45; cursor: default; }
.pick-run:disabled:active { transform: none; }
.pick-failure { margin: 0 0 14px; font: 400 clamp(22px, 7vw, 34px)/1.02 "Anton", "Archivo Black", sans-serif; letter-spacing: .01em; text-transform: uppercase; color: var(--red); }


/* ==========================================================================
   THE LANDING'S LAST TWO BEATS, AND THE FILM ROOM (9 September 2026).

   The homepage used to run 11.7 screens at 1280, of which 8.8 were one
   unsignposted NFL matchup: the Jets episode, its film feature and a 5,689px
   dossier with a 114-cell cast grid. Those three now live on #view-films —
   a routed page owned by the NFL, not a fifth tab (the rail is four pages by
   brand rule) — reached from the teaser below, from the NFL lab's strip and
   from #films. The landing keeps a signposted 420px trailer for it and ends
   on the one thing it wants: pick two greats.
   ========================================================================== */

.episode-teaser {
  display: grid;
  gap: 14px;
  padding: 44px clamp(22px, 6vw, 88px) 46px;
  color: var(--black);
  background: var(--cream);
  border-top: 8px solid var(--red);
}
.episode-teaser-badge { color: var(--red); font: 900 10px/1 "Archivo", sans-serif; letter-spacing: .16em; }
.episode-teaser h2 { margin: 0; font: 400 clamp(38px, 4.4vw, 68px)/.86 "Anton", sans-serif; letter-spacing: -.03em; }
.episode-teaser h2 i { color: var(--red); font-style: normal; }
.episode-teaser-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
.episode-teaser-verdict strong { font: 400 clamp(20px, 2vw, 28px)/1 "Anton", sans-serif; letter-spacing: -.01em; }
.episode-teaser-verdict small { color: #5d5a54; font: 900 10px/1 "Archivo", sans-serif; letter-spacing: .12em; }
.episode-teaser-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.episode-teaser-actions .btn-gold { min-height: 56px; padding: 0 26px; }
.episode-teaser-actions .btn-gold small { display: block; margin-top: 4px; font: 900 9px/1 "Archivo", sans-serif; letter-spacing: .14em; opacity: .75; }
.episode-teaser-actions .inline-action { grid-column: auto; }

.landing-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 30px clamp(22px, 6vw, 88px);
  color: var(--cream);
  background: var(--black);
  border-top: 8px solid var(--orange);
}
.landing-end > span { margin-right: auto; color: var(--orange); font: 900 10px/1 "Archivo", sans-serif; letter-spacing: .16em; }
.landing-end .btn-gold { min-height: 56px; padding: 0 26px; }
.landing-end .inline-action { grid-column: auto; color: var(--black); background: var(--cream); border-color: var(--cream); }


/* The film room's own signpost: the visitor is inside one NFL matchup and
   the page says so before anything else. */
.film-room-head {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 5vw, 76px) clamp(22px, 6vw, 88px) clamp(38px, 4vw, 56px);
  color: var(--cream);
  background: var(--black);
}
.film-room-head::after { content: ""; position: absolute; z-index: 0; right: -90px; top: -70px; width: 300px; height: 300px; border-radius: 50%; background: var(--red); opacity: .9; }
.film-room-head > * { position: relative; z-index: 1; }
.film-room-head > span { color: var(--orange); font: 900 10px/1 "Archivo", sans-serif; letter-spacing: .16em; }
.film-room-head h2 { margin: 16px 0 0; font: 400 clamp(46px, 6vw, 96px)/.82 "Anton", sans-serif; letter-spacing: -.035em; }
.film-room-head h2 i { color: var(--orange); font-style: normal; }
.film-room-head p { max-width: 46ch; margin: 18px 0 24px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; font-weight: 640; }
.film-room-head .inline-action { grid-column: auto; color: var(--black); background: var(--cream); border-color: var(--cream); }

@media (max-width: 640px) {
  .episode-teaser { padding: 34px 20px 36px; }
  .landing-end { padding: 24px 20px; }
  .film-room-head { padding: 38px 20px 32px; }
  .film-room-head::after { width: 190px; height: 190px; right: -70px; top: -60px; }
}

/* The phone shell hides the hero, and with it the page's only <h1>. This is
   that heading for the one screen the phone does render; on desktop it is
   display:none and out of the accessibility tree, so there is never a second. */
.pick-h1 { display: none; }
body[data-shell="phone"] .pick-h1 {
  display: block;
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}