/* Glass House Live: the broadcast. Chrome, cold open, desk, and the shared segment furniture that
   FRONT-2/FRONT-3 segments reuse (plates, captions, chips, segment headers, tags, locked cards).
   Tokens come from tokens.css. Motion: transform + opacity only; idle loops live in CSS keyframes and
   switch off under reduced motion / the Still Frame Feed (html.is-still). */

:root {
  --col: 480px;                                                  /* the broadcast column */
  --seg-top: calc(var(--safe-top) + var(--chrome-top-h) + var(--space-5)); /* segment content starts below the chrome */
  /* Spacing roles: block-level spacing in every broadcast stylesheet uses these (on the tokens.css scale).
     Inside a component, use 4, 8, 12 or 16 only. */
  --gap-weld: var(--space-2);   /*  8px: a caption welded to its stat, card or bug */
  --gap-list: var(--space-4);   /* 16px: siblings in a list (bugs, notes, rows, cards) */
  --gap-head: var(--space-5);   /* 24px: a segment head to its first block */
  --gap-block: var(--space-6);  /* 32px: blocks within a segment (board → note → bugs) */
  --gap-moment: var(--space-7); /* 48px: before a set piece (the envelope, Next Time, the outlook, Goodnight) */
  --seg-bottom: 88px;
  --cap-bg: rgba(8, 14, 34, 0.88);
  --gold-ink: #9A6A10;
  /* small text needs 4.5:1. Cream on coral is 3.0:1, so coral plates that carry small text use a deeper
     coral (cream on it ~5:1); cream-faint (3.1-3.3:1) stays for strokes and dots, labels use cream-label. */
  --coral-plate: color-mix(in srgb, var(--coral) 75%, #000);
  --cream-label: rgba(255,244,226,0.62);
}

*, *::before, *::after { box-sizing: border-box; }
/* Nothing may widen the phone's layout viewport: Chrome/Safari lay out every position: fixed element (the
   chrome, ticker, remote) against it, so one start state poking past the column would push them off screen.
   clip (not hidden) on the root and the broadcast column: no scroll container, nothing sideways to pan. */
html { overflow-anchor: none; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
body {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-s);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
  background-color: var(--navy);
  background-image:
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1.2px),
    radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.2px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ball); outline-offset: 3px; }
.num { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================== stage + desktop backdrop */

.stage {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: calc(var(--ticker-h) + var(--safe-bottom));
  isolation: isolate;
}
.broadcast { position: relative; z-index: var(--z-segment); overflow-x: clip; }

.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }
/* desktop: the floodlight blooms and the court floor either side of the column, standing still */
.backdrop__bloom {
  position: absolute; top: -40vmax; width: 80vmax; height: 80vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,214,140,0.24), rgba(255,194,61,0.08) 50%, rgba(255,194,61,0));
  animation: none;
}
.backdrop__bloom--l { left: -26vmax; }
.backdrop__bloom--r { right: -26vmax; }
.backdrop__floor {
  position: absolute; left: -30vw; right: -30vw; bottom: -8vh; height: 52vh;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(255,244,226,0.07) calc(10% - 2px) 10%),
    linear-gradient(to bottom, rgba(31,79,216,0), rgba(31,79,216,0.26));
  transform: perspective(700px) rotateX(62deg);
  transform-origin: 50% 100%;
}

@media (min-width: 700px) {
  body { background-color: #070E22; }
  .backdrop { display: block; }
  .stage {
    background-color: var(--navy);
    background-image:
      radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1.2px),
      radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1.2px);
    background-size: 3px 3px, 5px 5px;
    box-shadow: 0 0 0 1px rgba(191,244,255,0.10), 0 0 90px rgba(0,0,0,0.6), 0 0 200px rgba(31,79,216,0.16);
  }
}

/* Shared keyframes. Idle loops are few and slow (one per screen, more or less): the LIVE dot breathes, the
   cold-open floodlights breathe, the ticker crawls. livepulse is the ident's LIVE dot while the ident is up. */
@keyframes breathe { from { opacity: 0.62; } to { opacity: 1; } }
@keyframes livepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }
@keyframes onair-breathe { from { opacity: 1; } to { opacity: 0.45; } }

/* ============================================================== shared furniture */

/* Plates: parallelograms = "this is official". --slant sets the cut; content stays upright. */
.plate {
  --slant: 10px;
  position: relative;
  display: inline-flex; align-items: center;
  padding: 6px calc(var(--slant) + 10px);
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  background: var(--plate-bg, var(--cobalt));
  color: var(--plate-fg, var(--cream));
  overflow: hidden;
}
.plate--cobalt { --plate-bg: var(--cobalt); }
.plate--ball { --plate-bg: var(--ball); --plate-fg: var(--navy); }
.plate--coral { --plate-bg: var(--coral); }
.plate--gold { --plate-bg: var(--gold); --plate-fg: var(--navy); }
.plate--navy { --plate-bg: var(--navy-2); }
.plate--glass { --plate-bg: var(--glass); }
.has-sheen { position: relative; overflow: hidden; }
.sheen {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%;
  pointer-events: none; z-index: 3;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5) 50%, rgba(255,255,255,0));
  transform: translateX(-160%) skewX(-16deg);
}

/* Player chips: avatar disc ringed in the player's colour (+ name). Set --pc via ctx.playerChip(). */
.chip { --sz: 34px; display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; min-width: 0; }
.chip__av {
  width: var(--sz); height: var(--sz); flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 42%, var(--navy-2)), var(--navy-2) 72%);
  box-shadow: inset 0 0 0 2px var(--pc), 0 0 0 2px var(--navy);
  font-size: calc(var(--sz) * 0.54); line-height: 1;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', var(--font-body);
  font-weight: 800; color: var(--cream);
}
.chip__name { font: 800 15px/1 var(--font-body); font-stretch: 92%; color: var(--pc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip--s { --sz: 26px; gap: 6px; }
.chip--s .chip__name { font-size: 13.5px; }
.chip--m { --sz: 34px; }
.chip--l { --sz: 52px; gap: 10px; }
.chip--l .chip__name { font-size: 17px; }
.chip--xl { --sz: 76px; gap: 12px; }
.chip--xl .chip__name { font-size: 20px; }
.chip--me .chip__av { box-shadow: inset 0 0 0 2px var(--pc), 0 0 0 2px var(--navy), 0 0 0 4px var(--ball); }

/* Player names anywhere: their colour. The viewer gets a crisp ball-yellow underline (a translucent
   highlighter muddied the player colour into olive on navy). */
.pname { color: var(--pc, var(--cream)); font-weight: 800; }
.pname.is-me {
  text-decoration-line: underline; text-decoration-color: var(--ball); text-decoration-thickness: clamp(2px, 0.12em, 5px);
  text-underline-offset: 0.18em; text-decoration-skip-ink: none;
}
/* names that clip their overflow need room below the baseline for the underline */
.mbug__team .pname.is-me { padding-bottom: 5px; margin-bottom: -5px; }

/* Booth captions: [ROLF]: setup / punch. Solid backing for legibility; the punch lands on its own line. */
.cap {
  position: relative; isolation: isolate;
  margin: var(--gap-weld) 0 0;
  padding: 9px 13px 10px 14px;
  font: 500 15px/1.38 var(--font-body);
  color: var(--cream);
  text-wrap: pretty;
}
.cap__bar {
  position: absolute; inset: 0; z-index: -1;
  background: var(--cap-bg);
  border-left: 3px solid var(--booth, var(--ball));
  border-radius: 0 5px 5px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.cap__tag { font: 900 13.5px/1 var(--font-display); letter-spacing: 0.1em; color: var(--booth, var(--ball)); text-transform: uppercase; white-space: nowrap; }
.cap__setup { font-weight: 500; }
.cap__punch { display: block; margin-top: 3px; font-weight: 650; color: var(--cream); }
.cap .w { display: inline; white-space: nowrap; } /* a word never breaks after its dash ("1–
7") */
.cap[data-booth="rolf"] { --booth: var(--ball); }
.cap[data-booth="siv"] { --booth: rgba(191,244,255,1); }
.cap[data-booth="weather"] { --booth: var(--gold); }
.cap[data-booth="bench-cam"] { --booth: var(--coral); }
/* [CURATOR]: the Trophy Cabinet's voice, a museum placard: pale brass, letter-spaced, a hairline brass edge */
.cap[data-booth="curator"] { --booth: color-mix(in srgb, var(--gold) 62%, var(--cream)); }
.cap[data-booth="curator"] .cap__tag { font: 700 11.5px/1 var(--font-body); font-stretch: 118%; letter-spacing: 0.2em; }
.cap[data-booth="curator"] .cap__bar { border-left-width: 2px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 26%, transparent), 0 6px 18px rgba(0,0,0,0.28); }
.cap--s { font-size: 14px; padding: 7px 11px 8px 12px; }
.cap--s .cap__tag { font-size: 12.5px; }
.cap--l { font-size: 17px; }
.cap--me .cap__bar { box-shadow: inset 0 0 0 1px rgba(228,255,58,0.4), 0 6px 18px rgba(0,0,0,0.28); }
.cap--me::after {
  content: 'You'; position: absolute; top: -8px; right: 10px;
  padding: 3px 6px 2px; background: var(--ball); color: var(--navy);
  font: 900 10px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;
}
.cap--empty { display: none; }
/* The quiet caption (ctx.lineEl(line, { plain: true })): a secondary line that must not compete with the
   segment's one booth caption. No bar, no [TAG] (the booth name is a visually hidden prefix), cream at 80%. */
.cap.cap--plain {
  padding: 0; margin-top: var(--gap-weld);
  font-size: 14px;
  color: color-mix(in srgb, var(--cream) 80%, transparent);
}
.cap--plain .cap__punch { display: block; color: inherit; }
.cap--plain.cap--me::after { display: none; }

/* Segment header: timecode plate + court-line fragments + big title. Build with ctx.segHead(). */
.seg-head { margin-bottom: var(--gap-head); }
.seg-head__top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.seg-head__time {
  flex: none; padding: 5px 13px 4px 10px;
  background: var(--cobalt); color: var(--ball);
  font: 800 15px/1 var(--font-display); letter-spacing: 0.06em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.seg-head__court { flex: 1; display: grid; gap: 4px; }
.seg-head__court i { display: block; height: 2px; background: rgba(255,244,226,0.8); transform-origin: 0 50%; }
.seg-head__court i:last-child { height: 4px; width: 58%; background: var(--cobalt); }
.seg-head__title {
  margin: 0;
  font: 900 clamp(48px, 14vw, 70px)/0.86 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.004em; color: var(--cream);
}
.seg-head__line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.seg-head__line > span { display: block; }
.seg-head__sub { margin: 8px 0 0; color: var(--cream-dim); font: 600 12.5px/1.35 var(--font-body); font-stretch: 92%; letter-spacing: 0.02em; }

/* Small skewed tags (SWEEP, DECIDER, ...) and rubber stamps. */
.tag {
  display: inline-block; padding: 4px 8px 3px;
  font: 900 11.5px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;
  transform: skewX(-12deg);
}
.tag--decider { box-shadow: inset 0 0 0 1.5px rgba(255,244,226,0.6); color: var(--cream); }
.tag--comeback { background: var(--gold); color: var(--navy); }
.tag--upset { background: var(--coral-plate); color: var(--cream); }
.tag--ball { background: var(--ball); color: var(--navy); }
.tag--new { background: var(--coral-plate); color: var(--cream); }

/* Thin-data card for show.*.locked lines. Build with ctx.lockedEl(line, { title }). */
.locked {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border-radius: 8px;
  background: repeating-linear-gradient(-45deg, rgba(255,244,226,0.035) 0 10px, transparent 10px 20px), var(--navy-2);
  border: 1px dashed rgba(255,244,226,0.22);
}
.locked__icon { position: relative; flex: none; width: 24px; height: 30px; margin-top: 4px; }
.locked__icon::before { content: ''; position: absolute; left: 4px; right: 4px; top: 0; height: 16px; border: 3px solid var(--cream-dim); border-bottom: 0; border-radius: 9px 9px 0 0; }
.locked__icon::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 17px; border-radius: 3px; background: var(--gold); }
.locked__body { flex: 1; min-width: 0; }
.locked__title { margin: 0 0 6px; font: 900 16px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.locked .cap { margin: 0; }

/* Reduced-motion stand-in for confetti. */
.sticker {
  position: absolute; top: -12px; right: 2px; z-index: 4;
  color: var(--ball); font: 16px/1 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
  transform: rotate(-12deg); text-shadow: 0 0 8px rgba(228,255,58,0.6); pointer-events: none;
}

/* ============================================================== segments */

.seg { position: relative; padding: var(--seg-top) var(--safe-x) var(--seg-bottom); }
.seg--coldopen { padding: 0; }
/* off air until its build: invisible and untappable, but still focusable (Tab into it and main.js composes
   it at once) and still read by screen readers */
.seg.is-pending > * { opacity: 0; pointer-events: none; }
.seg.is-pending::before {
  content: attr(data-standby);
  position: absolute; left: var(--safe-x); right: var(--safe-x); top: var(--seg-top);
  padding-top: 12px; border-top: 1px dashed rgba(255,244,226,0.18);
  font: 800 13px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; white-space: pre;
  color: var(--cream-label);
}

/* a segment scrolled off screen holds its idle loops (main.js toggles is-offair) */
.seg.is-offair *, .seg.is-offair *::before, .seg.is-offair *::after { animation-play-state: paused !important; }

/* "Coming up after the break" for segments that are not on air yet */
.after-break { position: relative; padding-bottom: 6px; }
.after-break__bars { display: grid; grid-template-columns: repeat(7, 1fr); height: 132px; border-radius: 6px 6px 0 0; overflow: hidden; }
.bar--ball { background: var(--ball); }
.bar--cream { background: var(--cream); }
.bar--cobalt { background: var(--cobalt); }
.bar--coral { background: var(--coral); }
.bar--gold { background: var(--gold); }
.bar--glass { background: #8FD9E8; }
.bar--navy { background: var(--navy-3); }
.after-break__plate { --slant: 14px; display: block; margin: -30px 14px 0; padding: 16px 30px 16px; box-shadow: var(--shadow-panel); }
.after-break__kicker { margin: 0; font: 900 13px/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ball); }
.after-break__title { margin: 7px 0 5px; font: 900 36px/0.95 var(--font-display); text-transform: uppercase; }
.after-break__time { margin: 0; font: 500 12.5px/1.3 var(--font-body); color: var(--cream-dim); }

/* ============================================================== chrome */

.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-chrome);
  max-width: var(--col); margin: 0 auto;
  height: calc(var(--safe-top) + var(--chrome-top-h));
  padding: var(--safe-top) var(--safe-x) 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
.chrome::before {
  content: ''; position: absolute; inset: 0 0 -22px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,21,48,0.94), rgba(11,21,48,0.66) 58%, rgba(11,21,48,0));
  transition: opacity 0.4s;
}
.chrome[data-seg="coldopen"]::before { opacity: 0.35; }

.bug { display: flex; align-items: stretch; height: 30px; pointer-events: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); min-width: 0; }
.bug__logo {
  position: relative; z-index: 2; flex: none;
  display: grid; place-items: center; padding: 0 13px 0 10px;
  background: var(--ball); color: var(--navy);
  font: 900 17px/1 var(--font-display); letter-spacing: 0.05em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.bug__label {
  position: relative; display: flex; align-items: center; min-width: 0;
  margin-left: -7px; padding: 0 15px 0 16px;
  background: var(--cobalt);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  overflow: hidden;
  font: 800 15px/1 var(--font-display); letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
  transform-origin: 0 50%;
  transition: transform 0.32s var(--ease-out), opacity 0.32s;
}
/* an empty label (setBug(''): the cold open) folds away, so the bug is just the logo. Out of the flow too, so
   a tag beside it never sits after a gap; the next label grows back from the logo's edge. */
.bug__label.is-empty { position: absolute; transform: scaleX(0); opacity: 0; }
.bug__text { display: block; }
.bug__wipe { position: absolute; inset: 0; background: var(--ball); transform: scaleX(0); transform-origin: 0 50%; }
.bug__tag, .bug__me {
  align-self: center; margin-left: 6px; padding: 4px 7px 3px;
  font: 900 11px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  transform: skewX(-12deg);
  transition: opacity 0.3s;
}
.bug__tag { box-shadow: inset 0 0 0 1.5px var(--coral); color: var(--coral); background: rgba(11,21,48,0.85); }
/* the viewer's tag never pushes the segment label out of the bug */
.bug__me { background: var(--ball); color: var(--navy); flex: 0 1 auto; min-width: 0; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }
.bug__tag[hidden], .bug__me[hidden] { display: none; }
/* one tag on the bug at a time: RERUN belongs to the cold open, the viewer's tag to everything after it */
.chrome:not([data-seg="coldopen"]) .bug__tag, .chrome[data-seg="coldopen"] .bug__me { display: none; }
/* nor on the viewer's own lens: the ISO card already says whose lens it is (one KIM per screen) */
.chrome[data-seg="melens"] .bug__me { display: none; }

.onair { display: flex; align-items: stretch; height: 26px; margin-top: 2px; pointer-events: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); flex: none; }
.onair__pill {
  display: flex; align-items: center; gap: 6px; padding: 0 9px 0 8px;
  background: var(--coral-plate); color: var(--cream);
  font: 900 14px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 4px 0 0 4px;
}
/* the LIVE dot breathes slowly (2.4 s there and back): on air, not alarmed */
.onair__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cream); animation: onair-breathe 1.2s ease-in-out infinite alternate; }
.onair__clock {
  display: flex; align-items: center; padding: 0 7px;
  background: rgba(6,12,30,0.94); color: var(--ball);
  font: 800 15px/1 var(--font-display);
  box-shadow: inset 0 1px 0 var(--navy-3), inset 0 -1px 0 var(--navy-3);
  transform-origin: 100% 50%;
  transition: transform 0.32s var(--ease-out), opacity 0.32s;
}
.onair__digit { display: inline-block; width: 0.56em; text-align: center; }
.onair__colon { display: inline-block; width: 0.26em; text-align: center; opacity: 0.75; }
.onair__transport {
  display: grid; place-items: center; min-width: 26px; padding: 0 6px;
  background: var(--navy-2); color: var(--cream-dim);
  font: 700 9.5px/1 var(--font-body); letter-spacing: -0.04em; white-space: nowrap;
  border-radius: 0 4px 4px 0; box-shadow: inset 0 0 0 1px var(--navy-3);
  transform-origin: 100% 50%;
  transition: transform 0.32s var(--ease-out), opacity 0.32s;
}
.onair__transport[data-mode="rew"] { color: var(--coral); }
.onair__transport[data-mode="ff"] { color: var(--ball); }
.onair[data-state="aired"] .onair__pill { background: #56617F; }
.onair[data-state="aired"] .onair__dot { animation: none; border-radius: 1px; width: 0; height: 0; background: none; border-left: 7px solid var(--cream); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.onair[data-state="pilot"] .onair__pill { background: var(--cobalt); }
.onair[data-state="pilot"] .onair__dot { background: var(--ball); }

.chrome.is-collapsed .bug__label { transform: scaleX(0); opacity: 0; }
.chrome.is-collapsed .bug__tag, .chrome.is-collapsed .bug__me { opacity: 0; }
.chrome.is-collapsed .onair__clock, .chrome.is-collapsed .onair__transport { transform: scaleX(0); opacity: 0; }
.chrome.is-collapsed .onair__pill { border-radius: 4px; }

/* ticker */
.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-chrome);
  max-width: var(--col); margin: 0 auto;
  height: calc(var(--ticker-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  display: flex; align-items: stretch;
  background: rgba(6,12,30,0.96);
  box-shadow: 0 -2px 0 var(--ball), 0 -10px 30px rgba(0,0,0,0.35);
  transition: transform 0.36s var(--ease-out);
}
.ticker.is-collapsed { transform: translateY(calc(100% + 4px)); }
.ticker__label {
  flex: none; display: flex; align-items: center;
  padding: 0 16px 0 var(--safe-x); margin-right: -2px;
  background: var(--cobalt);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  font: 900 14px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
  position: relative; z-index: 1;
}
.ticker__label.is-breaking { background: var(--coral-plate); }
.ticker__window {
  flex: 1; min-width: 0; overflow: hidden; position: relative; margin-right: var(--space-7); /* the remote's room */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent);
}
.ticker__track { display: flex; align-items: center; width: max-content; height: 100%; will-change: transform; }
.ticker__run { display: flex; align-items: center; flex: none; height: 100%; }
.ticker__item {
  appearance: none; border: 0; background: none; height: 100%; padding: 0 14px;
  font: 800 15px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream); cursor: default;
}
.ticker__item[data-seg] { cursor: pointer; }
.ticker__item[data-seg]:hover, .ticker__item[data-seg]:focus-visible { color: var(--ball); }
.ticker__sep { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ball); }
.ticker__track.is-still { width: 100%; }
.ticker__track.is-still .ticker__item { width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

/* remote */
/* the remote lives on the right end of the ticker band, poking up like it was left on the sofa */
.remote {
  position: fixed; z-index: calc(var(--z-chrome) + 1);
  right: calc(max(0px, (100% - var(--col)) / 2) + 6px);
  bottom: calc(var(--safe-bottom) + 3px);
  width: 40px; height: 48px; padding: 2px 5px;
  border: 0; border-radius: 10px; background: none; cursor: pointer;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
  transform: rotate(-8deg);
  transition: transform 0.36s var(--ease-out);
}
.remote:hover, .remote:focus-visible { transform: rotate(-2deg) translateY(-3px); }
.remote svg { width: 100%; height: 100%; display: block; }
.remote__body { fill: var(--navy-3); stroke: rgba(191,244,255,0.5); stroke-width: 1.5; }
.remote__power { fill: var(--coral); }
.remote__line { fill: rgba(255,244,226,0.35); }
.remote:hover .remote__body, .remote[aria-expanded="true"] .remote__body { stroke: var(--ball); }
.remote.is-low { transform: rotate(-8deg) translateY(4px); }

/* rundown */
.rundown {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(5,10,24,0.66);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.rundown__panel {
  width: min(100%, var(--col)); max-height: 90vh; overflow: auto; overscroll-behavior: contain;
  padding: var(--space-4) var(--safe-x) calc(var(--space-5) + var(--safe-bottom));
  background: linear-gradient(to bottom, rgba(26,42,87,0.99), rgba(11,21,48,0.995));
  border-top: 2px solid var(--ball); border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
}
.rundown__head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 12px; margin-bottom: 14px; }
.rundown__title { margin: 0; font: 900 44px/0.86 var(--font-display); text-transform: uppercase; }
.rundown__ep { margin: 4px 0 0; font: 600 12.5px/1.3 var(--font-body); color: var(--cream-dim); }
.rundown__close {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--glass-edge); background: rgba(11,21,48,0.6); cursor: pointer;
}
.rundown__close svg { width: 18px; height: 18px; }
.rundown__close path { stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.rundown__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.rundown__item {
  width: 100%; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px;
  min-height: 50px; padding: 6px 14px; border: 0; border-radius: 8px;
  background: rgba(255,244,226,0.045); text-align: left; cursor: pointer;
}
.rundown__item:hover { background: rgba(255,244,226,0.09); }
.rundown__time { font: 800 17px/1 var(--font-display); color: var(--ball); letter-spacing: 0.03em; }
.rundown__name { font: 800 22px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; }
.rundown__state { font: 800 11px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-label); }
.rundown__item.is-now { background: var(--cobalt); }
.rundown__item.is-now .rundown__state { color: var(--ball); }
.rundown__item.is-done .rundown__name { color: var(--cream-dim); }
.rundown__keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--space-4); }
.key {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid rgba(255,244,226,0.14); background: rgba(6,12,30,0.55);
  cursor: pointer; text-align: left;
}
.key i, .key-dot { display: inline-block; width: 18px; height: 12px; border-radius: 3px; background: var(--key); box-shadow: 0 0 10px color-mix(in srgb, var(--key) 50%, transparent); }
.key--red { --key: var(--coral); }
.key--green { --key: #3DDC97; }
.key-dot--yellow { --key: var(--gold); }
.key span { font: 700 14.5px/1.1 var(--font-body); }
.key b { font: 900 14px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-label); }
.key[aria-pressed="true"] { border-color: var(--key); }
.key[aria-pressed="true"] b { color: var(--ball); }
.rundown__label { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font: 700 14.5px/1 var(--font-body); }
.rundown__people { display: flex; flex-wrap: wrap; gap: 8px; }
.rundown__person {
  min-height: 46px; padding: 5px 14px 5px 5px; border-radius: 999px;
  border: 1.5px solid rgba(255,244,226,0.16); background: rgba(255,244,226,0.04); cursor: pointer;
}
.rundown__person[aria-pressed="true"] { border-color: var(--ball); box-shadow: inset 0 0 0 1px var(--ball); }
.rundown__person--fan { padding: 0 18px; font: 700 14px/1 var(--font-body); }
html.rundown-open { overflow: hidden; }

/* breaking band (live updates) */
.breaking {
  position: fixed; left: 0; right: 0; z-index: calc(var(--z-chrome) - 1);
  top: calc(var(--safe-top) + var(--chrome-top-h) - 4px);
  max-width: var(--col); margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 7px var(--safe-x);
  background: var(--coral-plate); color: var(--cream);
  box-shadow: 0 12px 30px rgba(255,77,61,0.3);
}
.breaking__label {
  flex: none; padding: 5px 9px 4px; background: var(--navy);
  font: 900 13px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;
  transform: skewX(-12deg);
}
.breaking__text {
  flex: 1; min-width: 0; font: 800 17px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.breaking__go {
  flex: none; min-height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1.5px solid var(--cream); background: none; cursor: pointer;
  font: 900 13px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
}

/* glass wipe between segments, VHS tracking line on rewind, the fx layer */
.wipe { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: var(--col); margin: 0 auto; z-index: var(--z-fx); pointer-events: none; overflow: hidden; }
.wipe__move { position: absolute; inset: 0; }
.wipe__pane {
  position: absolute; top: -10%; bottom: -10%; left: 10%; width: 64%;
  background: linear-gradient(100deg, rgba(191,244,255,0), rgba(191,244,255,0.13) 22%, rgba(191,244,255,0.2) 50%, rgba(191,244,255,0.09) 78%, rgba(191,244,255,0));
  border-left: 1px solid rgba(191,244,255,0.35); border-right: 1px solid rgba(191,244,255,0.2);
  transform: skewX(-14deg);
}
.wipe__streak { position: absolute; top: -10%; bottom: -10%; left: 40%; width: 9px; background: rgba(255,255,255,0.5); transform: skewX(-14deg); box-shadow: 0 0 18px rgba(255,255,255,0.6); }
.vhs {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: var(--col); margin: 0 auto; height: 22px; z-index: var(--z-fx); pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,244,226,0.28) 0 2px, transparent 2px 6px),
    linear-gradient(to bottom, transparent, rgba(191,244,255,0.32) 45%, rgba(255,244,226,0.24) 60%, transparent);
  opacity: 0.8;
}
.fx { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: var(--col); margin: 0 auto; z-index: var(--z-fx); pointer-events: none; overflow: hidden; }
.fx__confetti { position: absolute; inset: 0; width: 100%; height: 100%; }
.impact { position: absolute; inset: 0; }
.impact__flash {
  position: absolute; left: var(--ix, 50%); top: var(--iy, 36%);
  width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(228,255,58,0.42) 36%, rgba(191,244,255,0));
  opacity: 0; will-change: transform, opacity;
}
.impact__ring {
  position: absolute; left: var(--ix, 50%); top: var(--iy, 36%);
  width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%;
  border: 2.5px solid rgba(191,244,255,0.8);
  box-shadow: 0 0 20px rgba(191,244,255,0.35), inset 0 0 14px rgba(191,244,255,0.25);
  opacity: 0; will-change: transform, opacity;
}
.impact__ring--1 { border-width: 1.5px; border-color: rgba(255,244,226,0.55); }
.impact__ring--2 { border-width: 1px; border-color: rgba(228,255,58,0.5); }
.scuff { position: absolute; left: var(--ix, 50%); top: var(--iy, 36%); width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.scuff__mark { width: 100%; height: 100%; opacity: 0; overflow: visible; will-change: opacity; }
.scuff__fibres line { stroke: rgba(228,255,58,0.5); stroke-width: 1.5; stroke-linecap: round; }
.spot {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: var(--col); margin: 0 auto;
  z-index: calc(var(--z-fx) - 1); pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(4,8,20,0) 0, rgba(4,8,20,0) 130px, rgba(4,8,20,0.9) 230px);
}

/* ============================================================== cold open */

.co { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
/* lights and court belong to the first screen, even when the pilot cold open runs taller */
.co__lights { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; pointer-events: none; z-index: 0; }
.co__blooms { position: absolute; inset: 0; }
.co__bloom {
  position: absolute; top: -34%; width: 130%; height: 84%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,226,168,0.6), rgba(255,194,61,0.26) 36%, rgba(255,194,61,0.08) 64%, rgba(255,194,61,0));
}
.co__bloom--l { left: -70%; }
.co__bloom--r { right: -70%; }
.co__beam {
  position: absolute; top: 0; height: 92%; width: 78%;
  background: linear-gradient(to bottom, rgba(255,236,190,0.2), rgba(255,236,190,0.05) 60%, rgba(255,236,190,0));
}
.co__beam--l { left: -6%; clip-path: polygon(6% 0, 20% 0, 100% 100%, 46% 100%); }
.co__beam--r { right: -6%; clip-path: polygon(80% 0, 94% 0, 54% 100%, 0 100%); }
.co__haze { position: absolute; inset: 0; background: radial-gradient(130% 55% at 50% 0%, rgba(255,244,226,0.07), transparent 62%); }
.co__bank { position: absolute; top: 4px; width: 92px; }
.co__bank--l { left: -10px; transform: rotate(13deg); }
.co__bank--r { right: -10px; transform: rotate(-13deg); }
.co__housing {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px;
  background: #091024; border: 1px solid #23315E; border-radius: 4px;
  box-shadow: 0 3px 0 #040917, 0 8px 18px rgba(0,0,0,0.4);
}
.co__lamp { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; background: #1A2445; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6); }
.co__lamp b {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 28%, #FFEBB8 56%, var(--gold) 100%);
  box-shadow: 0 0 10px 3px rgba(255,214,140,0.75), 0 0 26px 6px rgba(255,194,61,0.35);
}
.co__court { will-change: transform; position: absolute; left: 0; top: 44vh; top: 44svh; width: 100%; height: 56vh; height: 56svh; z-index: 0; opacity: 0.5; transform-origin: 50% 100%; }
.court__floor { stroke: none; }
.court__line { stroke: rgba(255,244,226,0.5); stroke-width: 2; vector-effect: non-scaling-stroke; }
.court__net { fill: rgba(6,12,30,0.55); stroke: rgba(255,244,226,0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.court__tape { stroke: rgba(255,244,226,0.85); stroke-width: 2.5; }
.court__side { fill: rgba(191,244,255,0.045); stroke: rgba(191,244,255,0.24); stroke-width: 1; vector-effect: non-scaling-stroke; }
.court__glass { stroke: rgba(191,244,255,0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.co::after { /* keeps the lower content readable over the court */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,21,48,0), rgba(11,21,48,0.55));
}

.co__ball { position: absolute; left: var(--ix, 50%); top: var(--iy, 36%); width: 170px; height: 170px; margin: -85px 0 0 -85px; z-index: 8; opacity: 0; pointer-events: none; will-change: transform; }
.ball__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ball__seam path { fill: none; stroke: #FFF8E6; stroke-width: 5; stroke-linecap: round; opacity: 0.92; }
.ball__gloss { fill: rgba(255,255,255,0.34); }
.ball__ghost { opacity: 0; filter: blur(4px); }
.ball__ghost .ball__seam, .ball__ghost .ball__gloss { display: none; }

.co__identfly { position: absolute; left: var(--ix, 50%); top: var(--iy, 36%); width: min(82%, 370px); transform: translate(-50%, -50%); z-index: 7; pointer-events: none; }
.ident { display: flex; flex-direction: column; align-items: center; will-change: transform; }
.ident__art { position: relative; width: 100%; }
.ident__svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.ident__svg--extrude { position: absolute; inset: 0; }
.ident__shadow { position: absolute; left: 6%; right: 6%; top: 18%; bottom: -8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.5), rgba(0,0,0,0)); }
.ident__plate {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 2px;
  padding: 7px 22px 6px 18px;
  background: var(--coral); color: var(--cream);
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  font: 900 34px/1 var(--font-display); letter-spacing: 0.34em; text-indent: 0.1em;
  position: relative; overflow: hidden;
}
.ident__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cream); animation: livepulse 1.2s ease-in-out infinite; }
/* the ident has flown into the bug (or the build has landed): its dot holds still */
.co__identfly.is-gone .ident__dot, .co--idle .ident__dot { animation: none; }

/* The first screen, top to bottom: slate, strap, the MVP (+ the one caption), last place, the cue. Explicit
   steps instead of one gap: the slate and strap belong together, the faces get air. */
.co__content {
  position: relative; z-index: 3;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--safe-top) + var(--chrome-top-h) + var(--space-3)) var(--safe-x) calc(var(--ticker-h) + var(--safe-bottom) + var(--space-3));
  display: flex; flex-direction: column; gap: 0;
}
.co__content > .co__strap { margin-top: var(--space-3); }
.co__content > .hero--mvp, .co:not(.co--pilot) .co__content > .co__greeting { margin-top: var(--gap-head); }
.co__content > .hero--last { margin-top: var(--gap-block); }
.co__content > .co__upnext { margin-top: var(--space-4); }

.co__slate { display: flex; align-items: stretch; max-width: 100%; }
.co__code { --slant: 9px; flex: none; padding: 8px 19px 7px 12px; font: 900 22px/1 var(--font-display); letter-spacing: 0.04em; }
.co__slatebody { --slant: 9px; flex: 0 1 auto; min-width: 0; margin-left: -9px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 6px 24px 6px 22px; }
.co__eptitle { margin: 0; max-width: 100%; font: 900 22px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co__date { font: 650 11px/1.1 var(--font-body); font-stretch: 90%; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,244,226,0.8); white-space: nowrap; }

.co__strap {
  margin-inline: calc(-1 * var(--safe-x));
  display: flex; align-items: stretch; min-height: 54px;
  background: var(--coral);
  box-shadow: 0 12px 34px rgba(255,77,61,0.3);
  transform-origin: 0 50%;
  position: relative; overflow: hidden;
}
.co__straplabel {
  flex: none; display: flex; align-items: center;
  width: 96px; padding: 0 16px 0 var(--safe-x);
  background: #B82012;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font: 900 14px/0.98 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;
}
.co__headline { flex: 1; min-width: 0; display: flex; align-items: center; padding: 7px var(--safe-x) 6px 12px; font: 900 27px/0.94 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--cream); text-wrap: balance; }
.co__strap.is-previously { background: var(--navy-2); box-shadow: inset 0 1px 0 var(--navy-3), inset 0 -1px 0 var(--navy-3); }
.co__strap.is-previously .co__straplabel { background: var(--navy-3); color: var(--cream-dim); }

.co__greeting { margin-top: 0; }

.hero { position: relative; z-index: 2; }
.hero__flash {
  position: absolute; left: -24%; top: -36%; width: 120%; height: 150%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,194,61,0.55), rgba(255,194,61,0.15) 55%, rgba(255,194,61,0));
  opacity: 0;
}
.hero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 5px; }
.hero__label { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 3px; font: 900 14px/1 var(--font-display); letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold); }
.hero--last .hero__label { font-size: 12.5px; color: var(--coral); }
.hero__crown { width: 18px; height: 13px; background: var(--gold); clip-path: polygon(0 100%, 0 18%, 26% 58%, 50% 0, 74% 58%, 100% 18%, 100% 100%); }
.hero__sink { width: 11px; height: 9px; background: var(--coral); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hero__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hero__namerow { position: relative; flex: 1; min-width: 0; }
.hero--last .hero__row { flex-wrap: wrap; row-gap: 6px; }
.hero--last .hero__namerow { flex: 0 1 auto; }
.hero__name {
  display: inline-block; white-space: nowrap; max-width: none;
  font-family: var(--font-body); font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; line-height: 0.92; letter-spacing: -0.012em;
  color: var(--pc);
  text-shadow: 0 0 22px color-mix(in srgb, var(--pc) 40%, transparent), 0 4px 0 rgba(0,0,0,0.28);
  transform-origin: 0 60%;
  will-change: transform;
}
/* a name too long even at its smallest size and narrowest width: cut cleanly instead of running off the glass */
.hero__name.is-cut { max-width: 100%; overflow: hidden; overflow: clip; overflow-clip-margin: 24px; text-overflow: ellipsis; vertical-align: bottom; }
/* a long name of two or more words takes two lines rather than lose its second half (coldopen.js fitName) */
.hero__name.is-wrap, .l3__name.is-wrap { white-space: normal; text-wrap: balance; }
.hero__name.is-wrap { line-height: 0.9; padding-bottom: 0.04em; }
.l3__name.is-wrap { line-height: 0.95; }
.hero__name.is-wrap.is-cut, .l3__name.is-wrap.is-cut { overflow-wrap: anywhere; }
.hero--last .hero__name { font-stretch: 62%; font-weight: 700; letter-spacing: 0.03em; filter: saturate(0.55); opacity: 0.92; text-shadow: 0 3px 0 rgba(0,0,0,0.3); }
.hero .cap { margin-top: var(--gap-weld); }
.hero__stat { display: flex; align-items: baseline; gap: 4px 8px; margin: 0; color: var(--cream-dim); white-space: nowrap; }
.hero__rec { font-size: 27px; line-height: 0.9; color: var(--cream); }
.hero--last .hero__rec { font-size: 21px; }
.hero__word { font: 800 11.5px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.hero__delta { font-size: 27px; line-height: 0.9; display: inline-block; }
.hero--last .hero__delta { font-size: 21px; }
.hero__delta.is-up { color: var(--ball); }
.hero__delta.is-down { color: var(--coral); }
.hero__unit { font: 800 11px/1 var(--font-display); letter-spacing: 0.14em; color: var(--cream-label); margin-left: -4px; }
.hero__sep { align-self: center; width: 5px; height: 5px; border-radius: 50%; background: var(--cream-faint); }
.hero__consolation { flex: 1 1 150px; display: flex; align-items: flex-start; gap: 7px; margin: 0; font: italic 500 12px/1.3 var(--font-body); color: var(--cream-dim); }
.hero__arrow { flex: none; width: 9px; height: 9px; margin-top: 3px; border-left: 2px solid var(--cream); border-top: 2px solid var(--cream); }
.confetto {
  position: absolute; left: 70%; top: 0; z-index: 5;
  width: 13px; height: 9px; border-radius: 1.5px;
  background: linear-gradient(135deg, #FFFFFF, var(--cream) 55%, #EAD9B8);
  box-shadow: 0 0 0 1px rgba(11,21,48,0.75), 0 0 10px rgba(255,244,226,0.75);
  opacity: 0; pointer-events: none; will-change: transform;
}
.num.is-landed { color: #FFFFFF; }
/* (the reduced-motion stars sit at the foot of the name: the caption is welded 8px below, so they must not hang into it) */
.hero--mvp .hero__namerow > .sticker { top: auto; bottom: 0; right: 4px; font-size: 14px; letter-spacing: 3px; }

.co__upnext { margin: 0; font: 600 12.5px/1.3 var(--font-body); color: var(--cream-dim); }
.co__upnext b { color: var(--ball); font: 900 12px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; margin-right: 4px; }

.co__cue {
  margin: auto auto 0; display: flex; align-items: center; gap: 9px;
  padding: 10px 20px; min-height: 48px; border: 0; background: none; cursor: pointer;
  font: 900 22px/1 var(--font-display); letter-spacing: 0.06em; color: var(--cream);
}
.cue__dot { font-style: normal; color: var(--cream-faint); }
.cue__n { display: inline-block; }
.cue__arrow { display: inline-block; margin-left: 4px; color: var(--ball); font-size: 27px; }

/* idle life once the build has landed (coldopen.js startIdle): compositor-run keyframes, paused off screen
   (.seg.is-offair) and switched off by the Still Frame Feed */
/* (one loop for both floodlights; the arrow nudges once every five seconds, then rests) */
.co--idle .co__blooms { will-change: opacity; animation: co-breathe 6s ease-in-out infinite alternate; }
.co--idle .cue__arrow { animation: co-nudge 5s ease-in-out infinite; }
@keyframes co-breathe { from { opacity: 1; } to { opacity: 0.85; } }
@keyframes co-nudge { 0%, 14%, 100% { transform: none; } 7% { transform: translateY(6px); } }

/* a frame that only just overflows the first screen tightens up so the cue clears the ticker */
.co--tall .co__content > .co__strap { margin-top: var(--space-2); }
.co--tall .co__content > .hero--mvp, .co--tall:not(.co--pilot) .co__content > .co__greeting { margin-top: var(--space-4); }
.co--tall .co__content > .hero--last { margin-top: var(--space-5); }
.co--tall .co__cue { padding-block: 6px; }

/* pilot */
.co--pilot .co__content { gap: var(--space-4); }
.co--pilot.co--tall .co__content { gap: var(--space-3); }
.co__lockup { position: relative; width: min(80%, 350px); margin: 4px auto 0; z-index: 4; }
.co__stamp {
  align-self: flex-end; position: relative; z-index: 5;
  margin: -38px 14px 0 0; padding: 6px 12px 5px;
  border: 3px solid var(--gold); color: var(--gold); background: rgba(11,21,48,0.72);
  font: 900 21px/1 var(--font-display); letter-spacing: 0.17em; text-transform: uppercase;
  transform: rotate(-7deg); box-shadow: 0 0 0 2px rgba(11,21,48,0.6);
}
/* minmax(0, 1fr): one long name must never widen the whole cast column past the screen */
.co__cast { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-list); }
.co__castlabel { margin: 8px 0 0; font: 900 14px/1 var(--font-display); letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold); }
.co__castempty { margin: 0; font: 500 14px/1.4 var(--font-body); color: var(--cream-dim); }
.l3 { position: relative; }
.l3__plate {
  --slant: 12px;
  display: flex; width: 100%; gap: 12px;
  padding: 9px 30px 9px 16px;
  background: linear-gradient(100deg, var(--navy-2) 30%, color-mix(in srgb, var(--pc) 26%, var(--navy-2)));
  box-shadow: inset 5px 0 0 var(--pc);
}
.l3__av {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-size: 27px; line-height: 1; background: var(--navy);
  box-shadow: inset 0 0 0 2.5px var(--pc);
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
.l3__id { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.l3__name { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 900 32px/0.92 var(--font-body); font-stretch: 120%; text-transform: uppercase; color: var(--pc); }
.l3__nick { font: italic 600 13px/1.15 var(--font-body); color: var(--cream-dim); }
.l3__badge {
  align-self: center; flex: none; padding: 4px 7px 3px;
  box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold);
  font: 900 10.5px/1 var(--font-display); letter-spacing: 0.15em; text-transform: uppercase;
  transform: skewX(-12deg);
}
.l3__strap {
  display: table; margin: 0 0 0 var(--space-4); padding: 6px 12px;
  background: rgba(6,12,30,0.88); box-shadow: inset 2px 0 0 var(--pc);
  font: italic 500 13.5px/1.35 var(--font-body); color: var(--cream);
}
.l3 .cap { margin: var(--gap-weld) 0 0 var(--space-4); }
.l3.is-me .l3__plate { box-shadow: inset 5px 0 0 var(--pc), inset 0 0 0 1.5px var(--ball); }
.co__tease { display: grid; justify-items: start; gap: 6px; padding: 4px 0 0; }
.co__teasekick { font: 900 14px/1 var(--font-display); letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold); }
.co__teasebig { font: 900 54px/0.86 var(--font-display); text-transform: uppercase; color: var(--ball); transform-origin: 0 50%; }
.co__teasesub { font: 500 13.5px/1.4 var(--font-body); color: var(--cream-dim); max-width: 34ch; }

/* ============================================================== the desk */

.board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 2px;
  padding: 12px 6px 11px; border-radius: 8px;
  background-color: #050B1C;
  background-image: radial-gradient(rgba(228,255,58,0.09) 1px, transparent 1.4px);
  background-size: 5px 5px;
  box-shadow: inset 0 0 0 1px var(--navy-3), inset 0 0 36px rgba(0,0,0,0.7);
}
.board__cell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.board__num { display: inline-block; font-size: 40px; line-height: 0.88; color: var(--ball); }
.board__key { font: 800 10.5px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); }

.pnote {
  position: relative; margin: var(--gap-block) 10px 4px auto; max-width: 300px;
  padding: var(--space-5) var(--space-4) var(--space-3);
  background: linear-gradient(176deg, #FFF6D8, #FDE9B2);
  color: #18214A;
  transform: rotate(-2.2deg);
  box-shadow: 0 16px 26px rgba(0,0,0,0.42), inset 0 -18px 30px rgba(196,150,40,0.12);
}
.pnote__tape { position: absolute; top: -11px; left: 50%; width: 96px; height: 23px; margin-left: -48px; background: rgba(191,244,255,0.42); transform: rotate(3deg); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.pnote__head { margin: 0 0 7px; font: 900 12px/1 var(--font-display); letter-spacing: 0.17em; text-transform: uppercase; color: #B82012; }
.pnote__text { margin: 0; font: italic 600 17px/1.34 var(--font-body); font-stretch: 88%; }
.pnote__sig { margin: 9px 0 0; text-align: right; font: 700 12px/1 var(--font-body); color: #47507A; }
.pnote__sig::before { content: ''; display: inline-block; width: 16px; height: 1.5px; margin: 0 6px 4px 0; background: currentColor; vertical-align: middle; }

.bugs { display: grid; gap: var(--gap-list); margin-top: var(--gap-block); }
.mbug-wrap { position: relative; }
.mbug {
  position: relative; display: grid; grid-template-columns: 40px 1fr;
  background: linear-gradient(180deg, rgba(26,42,87,0.94), rgba(15,27,62,0.97));
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(191,244,255,0.13), var(--shadow-panel);
}
.mbug__flash { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px var(--gold), 0 0 28px rgba(255,194,61,0.55); }
.mbug__n {
  grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--cobalt); border-radius: 6px 0 0 6px;
  font: 900 25px/0.85 var(--font-display); color: var(--cream);
}
.mbug__n span { font-size: 11px; letter-spacing: 0.1em; color: var(--ball); }
.mbug__rows { grid-row: 1; display: grid; min-width: 0; }
.mbug__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 26px; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px 0 14px; }
.mbug__row + .mbug__row { box-shadow: inset 0 1px 0 rgba(255,244,226,0.08); }
/* the losing pair is set narrower and a touch paler (mixed towards cream, so contrast goes up, not down) */
.mbug__row.is-loss .mbug__team { font-stretch: 76%; }
.mbug__row.is-loss .mbug__team .pname { color: color-mix(in srgb, var(--pc) 70%, var(--cream)); }
.mbug__edge { position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px; background: var(--gold); }
.mbug__row.is-loss .mbug__edge { display: none; }
/* both partners always show: each name takes what it needs, and when the pair doesn't fit they share the
   room (a short name keeps its width, a long one is cut). desk.js falls back to first names before cutting. */
.mbug__team { display: flex; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; font: 800 16px/1 var(--font-body); font-stretch: 84%; text-transform: uppercase; letter-spacing: 0.02em; }
.mbug__team .pname { flex: 1 1 0; min-width: 0; max-width: max-content; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbug__amp { flex: none; font-style: normal; margin: 0 6px; color: var(--cream-faint); font-weight: 500; }
/* a pair too long for one line stacks, one partner per line, like a doubles scoreboard */
.mbug__team.is-stacked { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding-block: 6px; font-size: 15px; }
.mbug__team.is-stacked .pname { flex: none; max-width: 100%; }
.mbug__team.is-stacked .mbug__amp { display: none; }
.mbug__row .mbug__team.is-squeezed { font-stretch: 64%; font-size: 13px; letter-spacing: 0; }
.mbug__tbc { color: var(--cream-label); font-style: italic; text-transform: none; font-weight: 600; }
.mbug__delta { min-width: 30px; text-align: right; font: 800 13.5px/1 var(--font-display); letter-spacing: 0.04em; color: var(--cream-label); }
.mbug__delta.is-up { color: var(--ball); }
.mbug__delta.is-down { color: var(--coral); }
.mbug__games { display: flex; gap: 6px; }
.gdot { position: relative; display: block; width: 15px; height: 15px; border-radius: 50%; }
.gdot.is-won { background: radial-gradient(circle at 34% 30%, #FBFFD0, var(--ball) 42%, #A3BC12); }
.gdot.is-won::after { content: ''; position: absolute; inset: 2px -3px 2px 8px; border-left: 1.5px solid rgba(255,248,230,0.85); border-radius: 50%; }
.gdot.is-lost { box-shadow: inset 0 0 0 1.5px rgba(255,244,226,0.26); }
.gdot.is-none::after { content: ''; position: absolute; left: 4px; right: 4px; top: 7px; height: 1.5px; background: rgba(255,244,226,0.16); }
.mbug__score { font-size: 28px; line-height: 1; text-align: center; color: var(--cream-faint); }
.mbug__row.is-win .mbug__score { color: var(--ball); }
.mbug__foot {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px;
  padding: 7px 12px 8px 12px;
  background: rgba(5,10,26,0.45); border-radius: 0 0 6px 6px;
  box-shadow: inset 0 1px 0 rgba(255,244,226,0.07);
}
/* plain text flow, so a long bench list wraps between names, never inside one */
.mbug__bench { margin-left: auto; text-align: right; font: 600 12px/1.35 var(--font-body); color: var(--cream-dim); }
.mbug__bench .pname { white-space: nowrap; }
.mbug__bench > i { display: inline-block; vertical-align: 0.1em; width: 12px; height: 7px; border: 1.5px solid var(--cream-faint); border-top: 0; margin-right: 5px; }
/* SWEEP: stamped straight over the losing pair's empty game dots */
.stamp {
  position: absolute; right: 42px; top: calc(50% - 11px); z-index: 3;
  padding: 3px 6px 2px 8px;
  border: 2.5px solid var(--ball); border-radius: 3px;
  color: var(--ball); background: rgba(11,21,48,0.78);
  font: 900 12.5px/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase;
  transform: rotate(-11deg);
  pointer-events: none;
}
.mbug-wrap > .cap { margin: var(--gap-weld) 0 0 var(--space-4); }
/* the caption is welded to its score bug; the connector wipes on with the caption bar */
.mbug-wrap > .cap > .cap__bar::before { content: ''; position: absolute; left: -13px; top: -8px; width: 9px; height: 22px; border-left: 1.5px solid rgba(255,244,226,0.32); border-bottom: 1.5px solid rgba(255,244,226,0.32); border-radius: 0 0 0 4px; }
.mbug--empty { opacity: 0.92; }
.desk__waiting { display: grid; gap: 12px; }
.desk__awaiting { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font: 900 18px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ball); }
/* blinks three times, then stays on */
.desk__blink { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); animation: blink 1.1s steps(1) 3; }
.desk__waitnote { margin: 0; font: 500 13.5px/1.4 var(--font-body); color: var(--cream-dim); }

.benchcam { margin-top: var(--gap-block); }
.benchcam__screen {
  position: relative; overflow: hidden; padding: 12px 14px 14px; border-radius: 9px;
  background: linear-gradient(160deg, #0F1C40, #081026);
  box-shadow: inset 0 0 0 1px rgba(191,244,255,0.2), inset 0 0 0 5px rgba(5,10,26,0.6), var(--shadow-panel);
}
.benchcam__screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px); }
.benchcam__rec { display: inline-flex; align-items: center; gap: 7px; font: 900 12px/1 var(--font-display); letter-spacing: 0.17em; text-transform: uppercase; }
.benchcam__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.benchcam__who { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: 12px; }
.benchcam__seat { display: flex; align-items: center; gap: 9px; }
.benchcam__n { font: 800 12.5px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }

/* the envelope */
.env { position: relative; margin-top: var(--gap-moment); text-align: center; }
.env__kicker { margin: 0; font: 900 13px/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.env__title { margin: 7px 0 6px; font: 900 46px/0.88 var(--font-display); text-transform: uppercase; color: var(--cream); text-shadow: 0 0 30px rgba(255,194,61,0.25); }
/* the help line and the snark share one slot between the title and the envelope */
.env__stage { position: relative; display: grid; justify-items: center; padding-top: calc(var(--space-7) + var(--space-2)); }
.env__help, .env__snark {
  position: absolute; top: 0; left: 8%; right: 8%; height: var(--space-7); margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.env__help { gap: 6px; font: 600 13px/1.3 var(--font-body); color: var(--cream-dim); transition: opacity 0.3s; }
.env__helpkey { display: inline-block; padding: 4px 9px 3px; background: var(--gold); color: var(--navy); font: 900 12px/1 var(--font-display); letter-spacing: 0.15em; text-transform: uppercase; transform: skewX(-12deg); }
.env__snark { font: italic 650 14.5px/1.3 var(--font-body); color: var(--coral); }
.env__snark:empty { display: none; }
.env.has-snark .env__help { visibility: hidden; }
.env.is-open .env__help, .env.is-open .env__snark { opacity: 0; }
/* opened, the flap and the card rise into the head's room: the card carries the title now */
.env__head { transition: opacity 0.3s; }
.env.is-open .env__head { opacity: 0; }
.env__btn {
  position: relative; display: block; width: min(300px, 86%); aspect-ratio: 3 / 2;
  padding: 0; border: 0; background: none; cursor: grab;
  touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.env__btn.is-holding { cursor: grabbing; }
.env__btn:disabled, .env__btn[aria-disabled="true"] { cursor: default; }
.env__btn:focus-visible { outline-offset: 10px; border-radius: 8px; }
.env__shake { position: absolute; inset: 0; display: block; will-change: transform; }
.env__paper { position: absolute; inset: 0; display: block; perspective: 800px; }
.env__back { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(160deg, #F6DFA6, #E3B95E 62%, #CF9E41); box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 0 60px rgba(255,194,61,0.2); }
.env__card {
  position: absolute; left: 7%; right: 7%; top: 7%; height: 86%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 5px; background: linear-gradient(180deg, #FFFBF0, #FFF0D0); color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px #FFF7E4, inset 0 0 0 6px rgba(255,194,61,0.6), 0 6px 14px rgba(0,0,0,0.22);
}
.env__cardkind { font: 900 13px/1 var(--font-display); letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold-ink); }
.env__big { display: inline-block; font-size: 66px; line-height: 0.88; color: var(--navy); }
.env__big.is-down { color: #B82012; }
.env__unit { font: 800 11px/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: #6B5428; }
.env__front {
  position: absolute; inset: 0; z-index: 2; border-radius: 8px;
  background: linear-gradient(172deg, #F4DA98, #E0B458);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}
.env__front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(28deg, transparent 49.6%, rgba(120,80,20,0.18) 50%, transparent 50.6%), linear-gradient(-28deg, transparent 49.6%, rgba(120,80,20,0.18) 50%, transparent 50.6%); }
.env__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 64%; z-index: 3;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, #F2D38D, #D9A94B);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env__seal { position: absolute; left: 50%; top: 64%; width: 82px; height: 82px; margin: -41px 0 0 -41px; z-index: 4; display: grid; place-items: center; }
.env__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.env__ringbg { fill: none; stroke: rgba(11,21,48,0.2); stroke-width: 5; }
.env__ringfill { fill: none; stroke: var(--ball); stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(228,255,58,0.9)); }
.env__wax {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #FF7B6C, #DE2F1D 55%, #9C170A);
  box-shadow: 0 3px 9px rgba(0,0,0,0.38), inset 0 -3px 7px rgba(0,0,0,0.28), inset 0 2px 4px rgba(255,255,255,0.28), 0 0 0 3px rgba(222,47,29,0.35);
  color: rgba(255,244,226,0.86); font: 900 15px/1 var(--font-display); letter-spacing: 0.06em;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
}
.env__flash {
  position: absolute; left: 50%; top: 30%; z-index: 5; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,246,206,0.98), rgba(255,194,61,0.55) 38%, rgba(255,194,61,0));
  opacity: 0; pointer-events: none;
}
.env__reveal { position: relative; display: grid; justify-items: center; gap: 12px; margin-top: var(--space-5); }
.env__who { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-4); }
.env__reveal .cap { text-align: left; width: 100%; }
.env__reveal[hidden] { display: none; }

/* ============================================================== no signal */

.nosignal { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.nosignal__bars { display: grid; grid-template-columns: repeat(7, 1fr); height: 46vh; }
.nosignal__plate { margin: -40px var(--safe-x) 0; padding: var(--space-5); background: var(--navy-2); box-shadow: var(--shadow-panel); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.nosignal__kicker { margin: 0; font: 900 13px/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral); }
.nosignal__title { margin: 8px 0 8px; font: 900 52px/0.9 var(--font-display); text-transform: uppercase; }
.nosignal__text { margin: 0 0 16px; font: 500 15px/1.4 var(--font-body); color: var(--cream-dim); max-width: 34ch; }
.nosignal__retry { min-height: 50px; padding: 0 22px; border: 0; background: var(--ball); color: var(--navy); font: 900 17px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* ============================================================== Still Frame Feed */

/* Only short opacity crossfades survive. transition-property must be narrowed along with the duration: the
   default is "all", so a bare duration on every element would make every inline change (a name being fitted,
   a GSAP set) animate over 150 ms, and every measurement would read a value halfway there. */
html.is-still *, html.is-still *::before, html.is-still *::after {
  animation: none !important; transition-duration: 0.15s !important; transition-delay: 0s !important;
  transition-property: opacity, stroke-opacity !important;
}
html.is-still .ticker.is-collapsed { transform: none; opacity: 0 !important; pointer-events: none; }
html.is-still .chrome.is-collapsed .bug__label, html.is-still .chrome.is-collapsed .onair__clock,
html.is-still .chrome.is-collapsed .onair__transport { transform: none; opacity: 0; }
html.is-still .remote.is-low { transform: rotate(-8deg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition-duration: 0.15s !important; transition-delay: 0s !important;
    transition-property: opacity, stroke-opacity !important; scroll-behavior: auto !important;
  }
  .ticker.is-collapsed { transform: none; opacity: 0 !important; pointer-events: none; }
  .chrome.is-collapsed .bug__label, .chrome.is-collapsed .onair__clock, .chrome.is-collapsed .onair__transport { transform: none; opacity: 0; }
  .remote.is-low { transform: rotate(-8deg); }
}
html.is-still .onair__dot { opacity: 1; }

/* integrator: the viewer's score-bug tag is whole or absent, never 'K…' */
.bug__me.is-tight { letter-spacing: .04em; padding-left: 5px; padding-right: 5px; }
.bug__me.is-out { display: none; }
/* integrator: no one-word widow on the envelope snark */
.env__snark { text-wrap: balance; }
/* integrator: a soft scrim so the court's back line never strikes through the hero labels */
.hero__top { position: relative; z-index: 1; }
.hero__top::before {
  content: ''; position: absolute; inset: -4px -10px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 21, 48, .85) 0 65%, rgba(11, 21, 48, 0));
}