/* ════════════════════════════════════════════════════════════════════════
   GAME PAGE — one page for every state of a game, from the approved
   prototype ("Game card", professor-prototype/app.html, October 2026) and
   the design system (design_system.css: square corners, one action colour,
   type scale, 44px targets). Built by game_detail.js + game_page.js.

     ≥1024   scoreboard, then two columns (1.55 : 1) and full-width rows
     <1024   one column; the cards of both columns fall into one reading
             order (display: contents + order)
   Loaded after game_detail.css, whose drawer rules it replaces.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The page itself: a full screen over the app, not a sheet ── */
.game-detail-overlay { justify-content: stretch; }
.game-detail-overlay .game-detail-backdrop { display: none; }
.game-detail-panel.gp {
  position: absolute;
  inset: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--ds-t-layer) ease-out, transform var(--ds-t-layer) ease-out;
}
.game-detail-overlay.open .game-detail-panel.gp { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .game-detail-panel.gp { transition: none; transform: none; }
}

/* ── Top bar: back, and what this game is ── */
.gp-bar {
  position: sticky;
  top: 0;
  z-index: 20;   /* above the box score's sticky name column (z 6) */
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 6px 16px;
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-line);
}
.gp-back {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0;
  margin-inline-start: -10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink);
  cursor: pointer;
}
html[dir="ltr"] .gp-back svg { transform: scaleX(-1); }
.gp-back:hover { background: var(--ds-soft); }
.gp-back:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
.gp-bar-title {
  min-width: 0;
  font: 800 var(--ds-fs-17)/1.2 var(--ds-font);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gp-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 16px 0;
  box-sizing: border-box;
}

/* ── Cards ── */
.gp-card,
.gp-hero {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 20px;
  padding: 24px;
  background: var(--ds-card);
  border: 1px solid var(--ds-line);
  border-radius: 0;
  color: var(--ds-ink);
}
.gp-card[hidden] { display: none; }
.gp-card h2,
.gp-h {
  display: block;
  margin: 0 0 12px;
  font: 800 var(--ds-fs-20)/1.25 var(--ds-font);
  color: var(--ds-ink);
  text-wrap: balance;
}
.gp-kick {
  display: block;
  margin: 0 0 6px;
  font: 700 var(--ds-fs-13)/1.3 var(--ds-font);
  color: var(--ds-ink2);
}
.gp-mut { margin: 0 0 12px; font: 400 var(--ds-fs-14)/1.5 var(--ds-font); color: var(--ds-ink2); }
.gp-tx  { margin: 0 0 10px; font: 400 var(--ds-fs-15)/1.7 var(--ds-font); color: var(--ds-ink2); }
.gp-tx:last-child { margin-bottom: 0; }
.gp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Folding card: the summary row is the 44px target. */
.gp-fold { padding: 0; }
.gp-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 16px 24px;
  list-style: none;
  cursor: pointer;
}
.gp-fold > summary::-webkit-details-marker { display: none; }
.gp-fold > summary h2 { margin: 0; }
.gp-fold > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border: solid var(--ds-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--ds-t-ctrl);
}
.gp-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.gp-fold > summary:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
.gp-fold > .gp-fold-body { padding: 0 24px 20px; }

/* ── Scoreboard ── */
.gp-hero { margin-bottom: 0; }
.gp-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 16px;
}
.gp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-soft);
  font: 700 var(--ds-fs-13)/1.2 var(--ds-font);
  color: var(--ds-ink);
}
.gp-tag.is-live { color: var(--ds-live); background: color-mix(in srgb, var(--ds-live) 10%, var(--ds-card)); }
.gp-tag.is-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: gpPulse 1.6s ease-in-out infinite;
}
.gp-tag.is-half { background: var(--ds-ink); color: var(--ds-card); }
@keyframes gpPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gp-tag.is-live::before { animation: none; } }
.gp-meta { font: 400 var(--ds-fs-14)/1.4 var(--ds-font); color: var(--ds-ink2); white-space: nowrap; }

.gp-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
/* The two clubs are buttons: each opens its team page. */
.gp-hero .gp-team {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  text-align: start;
  cursor: default;
}
/* The old drawer's .gd-club stacked the crest over the name; both sides are
   set explicitly here so the two halves of the scoreboard mirror each other. */
.gp-hero .gp-team { flex: 1 1 0; flex-direction: row; justify-content: flex-start; border-radius: 0; }
.gp-hero .gp-team--b { flex-direction: row-reverse; text-align: end; }
.gp-hero .gp-team:active { transform: none; }
.gp-hero .gp-team.gd-club--tappable { cursor: pointer; }
.gp-hero .gp-team.gd-club--tappable:hover { background: var(--ds-soft); }
.gp-hero .gp-team:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.gp-hero .gp-team:disabled { opacity: 1; }
.gp-tn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-tn b { font: 800 var(--ds-fs-17)/1.25 var(--ds-font); color: var(--ds-ink); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; text-wrap: balance; }
.gp-tn small { font: 400 var(--ds-fs-14)/1.3 var(--ds-font); color: var(--ds-ink2); }
.gp-tn small:empty { display: none; }
/* The crest: the disc drawn by crest.js fills this slot at every size. */
.gp-hero .gp-crest { flex: none; display: block; width: 52px; height: 52px; }
.gp-hero .gp-crest .team-crest { width: 100% !important; height: 100% !important; }
.gp-hero .gp-crest .team-crest--flag { font-size: 42px !important; line-height: 1; }
.gp-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 700 64px/1 var(--ds-font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ds-ink);
}
.gp-score i { font-style: normal; color: var(--ds-ink2); }
.gp-score .gp-time { font-size: .62em; }

/* ── Clock row and the four numbers: they hang from the scoreboard ── */
.gp-venue,
.gp-clock,
.gp-strip { box-sizing: border-box; background: var(--ds-card); border: 1px solid var(--ds-line); border-top: 0; }
.gp-venue[hidden],
.gp-clock[hidden],
.gp-strip[hidden] { display: none; }
.gp-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  font: 400 var(--ds-fs-13)/1.35 var(--ds-font);
  color: var(--ds-ink2);
}
.gp-ck-r {
  flex: none;
  font: 700 var(--ds-fs-17)/1 var(--ds-font-num);
  letter-spacing: .04em;
  color: var(--ds-ink);
  white-space: nowrap;
}
.gp-sst { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.gp-sst > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border-inline-start: 1px solid var(--ds-line);
}
.gp-sst > div:first-child { border-inline-start: 0; }
.gp-sst b { font: 800 var(--ds-fd-32)/.95 var(--ds-font-num); font-variant-numeric: tabular-nums; }
.gp-sst span { font: 400 var(--ds-fs-13)/1.3 var(--ds-font); color: var(--ds-ink2); }
.gp-sst2 .gp-sv2 { display: flex; align-items: baseline; gap: 6px; color: var(--ds-ink); }
.gp-sst2 .gp-sv2 b { font: 800 var(--ds-fs-24)/1 var(--ds-font-num); }
.gp-sst2 .gp-sv2 i { font-style: normal; color: var(--ds-ink2); }
.gp-sst2 > div > span:first-child { font-size: var(--ds-fs-12); }
.gp-top { margin-bottom: 20px; }

/* ── Columns ── */
.gp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 0 20px;
  align-items: start;
}
.gp-col { display: flex; flex-direction: column; min-width: 0; }

/* ── Marks, bars, tables ── */
.gp-mk { display: inline-block; flex: none; width: 12px; height: 12px; box-shadow: inset 0 0 0 1.5px var(--ds-ink); }
.gp-mk--dot { border-radius: 50%; }
.gp-mt { margin-bottom: 16px; }
.gp-mt:last-child { margin-bottom: 0; }
.gp-mtt { margin-bottom: 6px; font: 600 var(--ds-fs-15)/1.35 var(--ds-font); }
.gp-mr { display: grid; grid-template-columns: 16px minmax(0, 1fr) 64px; align-items: center; gap: 10px; margin-bottom: 6px; }
.gp-mr b { font: 700 var(--ds-fs-20)/1 var(--ds-font-num); text-align: end; }
.gp-trk { height: 16px; background: color-mix(in srgb, var(--ds-ink) 9%, var(--ds-card)); }
.gp-trk i { display: block; height: 100%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-ink) 35%, transparent); }
.gp-mt3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.gp-qt-wrap { overflow-x: auto; }
.gp-qt { width: 100%; border-collapse: collapse; }
.gp-qt th,
.gp-qt td { padding: 10px 6px; border-bottom: 1px solid var(--ds-line); text-align: center; }
.gp-qt thead th { font: 600 var(--ds-fs-12)/1.2 var(--ds-font); color: var(--ds-ink2); }
.gp-qt tbody th { text-align: start; font: 600 var(--ds-fs-14)/1.3 var(--ds-font); white-space: nowrap; }
.gp-qt tbody th .gp-mk { margin-inline-end: 8px; vertical-align: -1px; }
.gp-qt td { font: 600 var(--ds-fs-20)/1 var(--ds-font-num); font-variant-numeric: tabular-nums; }
.gp-qt .gp-qt-tot { font-weight: 800; }
.gp-qt tbody tr:last-child th,
.gp-qt tbody tr:last-child td { border-bottom: 0; }

.gp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font: 400 var(--ds-fs-14)/1.4 var(--ds-font); color: var(--ds-ink2); }
.gp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gp-chip { padding: 2px 8px; background: var(--ds-soft); font-weight: 600; color: var(--ds-ink); }

/* Form: a win filled, a loss a ring; the letter says it in words too. */
.gp-frm { display: inline-flex; gap: 3px; vertical-align: middle; }
.gp-frm i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  font: 700 11px/1 var(--ds-font);
  font-style: normal;
}
.gp-frm .w { background: var(--ds-ink); color: var(--ds-card); border-radius: 50%; }
.gp-frm .l { border: 1.5px solid var(--ds-ink); color: var(--ds-ink); }

/* Prediction */
.gp-prb { margin: 10px 0 4px; }
.gp-prn { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font: 400 var(--ds-fs-14)/1.3 var(--ds-font); }
.gp-prn b { font: 700 var(--ds-fs-24)/1 var(--ds-font-num); }
.gp-prt { display: flex; gap: 3px; height: 12px; }
.gp-prt i { display: block; height: 100%; box-shadow: inset 0 0 0 1.5px var(--ds-ink); }

/* Numbered list (four things to watch) */
.gp-wl { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.gp-wl li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; font: 400 var(--ds-fs-15)/1.6 var(--ds-font); color: var(--ds-ink2); }
.gp-wl b { color: var(--ds-ink); }
.gp-wn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 1.5px solid var(--ds-ink);
  font: 700 var(--ds-fs-15)/1 var(--ds-font-num);
  color: var(--ds-ink);
}

/* The one dark card: the player who decides it (and its dark-theme twin). */
.gp-card.gp-ink { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-card); }
.gp-card.gp-ink .gp-kick,
.gp-card.gp-ink .gp-tx,
.gp-card.gp-ink h2 { color: var(--ds-card); }
.gp-card.gp-ink .glossary-term { color: inherit; }
.gp-lead { border-top: 3px solid var(--ds-ink); }

/* Buttons: one action colour. */
.gp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ds-h-btn);
  padding: 0 18px;
  box-sizing: border-box;
  border: 1.5px solid var(--ds-ink);
  border-radius: 0;
  background: var(--ds-ink);
  color: var(--ds-card);
  font: 700 var(--ds-fs-15)/1.2 var(--ds-font);
  text-decoration: none;
  cursor: pointer;
}
.gp-btn--ghost { background: transparent; color: var(--ds-ink); }
.gp-btn:hover { filter: brightness(1.12); }
.gp-btn--ghost:hover { filter: none; background: var(--ds-soft); }
.gp-btn:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.gp-btn:disabled { opacity: .5; cursor: default; }
.gp-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* Loading lines */
.gp-skel {
  height: 14px;
  margin: 10px 0;
  background: color-mix(in srgb, var(--ds-ink) 9%, var(--ds-card));
  animation: gpShim 1.2s ease-in-out infinite;
}
.gp-skel.s { width: 62%; }
@keyframes gpShim { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gp-skel { animation: none; } }

.gp-empty { margin: 0; font: 400 var(--ds-fs-15)/1.6 var(--ds-font); color: var(--ds-ink2); }

/* ── Phone and tablet: one column, cards in reading order ── */
@media (max-width: 1023px) {
  .gp-page { padding: 12px 12px 0; }
  .gp-card,
  .gp-hero { padding: 16px; }
  .gp-card h2,
  .gp-h,
  .gp-fold > summary h2 { font-size: var(--ds-fs-17); }
  .gp-fold > summary { padding: 14px 16px; }
  .gp-fold > .gp-fold-body { padding: 0 16px 16px; }

  /* Stretch, not the wide layout's "start": a card sized to its content let
     a long quarter table push the page sideways at 320px. */
  .gp-grid { display: flex; flex-direction: column; align-items: stretch; }
  .gp-grid .gp-col { display: contents; }
  .gp-o0 { order: 0; } .gp-o1 { order: 1; } .gp-o2 { order: 2; } .gp-o3 { order: 3; }
  .gp-o4 { order: 4; } .gp-o5 { order: 5; } .gp-o6 { order: 6; } .gp-o7 { order: 7; }
  .gp-mt3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* Scoreboard: crest above the name on each side, the score level with the crests. */
  .gp-hero-row { gap: 8px; align-items: start; }
  .gp-hero .gp-team,
  .gp-hero .gp-team--b { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .gp-tn b { font-size: var(--ds-fs-15); line-height: 1.2; }
  .gp-tn small { font-size: var(--ds-fs-13); }
  .gp-hero .gp-crest { width: 46px; height: 46px; }
  .gp-score { height: 54px; font-size: 48px; gap: 6px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .gp-hero .gp-crest { width: 56px; height: 56px; }
  .gp-score { height: 64px; font-size: 56px; }
  .gp-tn b { font-size: var(--ds-fs-17); }
}
@media (max-width: 700px) {
  .gp-sst > div { padding: 10px 8px; }
  .gp-sst b { font-size: var(--ds-fs-24); }
  .gp-sst2 .gp-sv2 b { font-size: var(--ds-fs-17); }
  .gp-sst span { font-size: var(--ds-fs-12); }
}
@media (max-width: 480px) {
  .gp-sst2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gp-sst2 > div:nth-child(3) { border-inline-start: 0; }
  .gp-sst2 > div:nth-child(n + 3) { border-top: 1px solid var(--ds-line); }
}
@media (max-width: 360px) {
  .gp-score { height: 46px; font-size: 40px; gap: 4px; }
  .gp-tn b { font-size: var(--ds-fs-13); }
  .gp-hero-row { gap: 4px; }
  .gp-hero .gp-crest { width: 40px; height: 40px; }
}

/* ── The game-flow chart (drawn by game_detail.js on a canvas) ── */
.gp .gd-story-chart { display: block; width: 100%; height: 200px; margin: 4px 0 8px; touch-action: none; cursor: crosshair; }
.gp .gd-story-readout {
  min-height: 22px;
  margin: 0;
  font: 400 var(--ds-fs-13)/1.5 var(--ds-font);
  color: var(--ds-ink2);
}
.gp .gd-story-readout.live { color: var(--ds-ink); }
.gp .gd-story-readout b { font-weight: 700; }
.gp-lg-flip {
  display: inline-block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--ds-ink);
  border-radius: 50%;
  background: var(--ds-card);
}
.gp-lg-dash { display: inline-block; width: 14px; height: 0; border-top: 2px dashed var(--ds-ink); }
.gp .gd-story-busy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 var(--ds-fs-15)/1.5 var(--ds-font); color: var(--ds-ink2); }
.gp .gd-story-skeleton { min-height: 260px; }

/* Old drawer blocks reused as slots: their sheet-era chrome goes. */
.gp .gd-narrative { text-align: start; }
.gp .gd-narrative::before { display: none; }
.gp #gd-report { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }

/* ── After the game: the middle rows ── */
.gp-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.gp-mid-col { display: flex; flex-direction: column; min-width: 0; }
.gp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.gp-pl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.gp-pn { font: 800 var(--ds-fs-17)/1.3 var(--ds-font); }
.gp-pl .gp-mut { margin: 0; }
.gp-pl-tx { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ds-line); }
.gp-share { margin-bottom: 20px; }
.gp-key { margin: -4px 0 14px; }
.gp-dec-tx { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ds-line); }
@media (max-width: 1023px) {
  .gp-mid,
  .gp-two { grid-template-columns: minmax(0, 1fr); }
}

/* ── Highlights ── */
.gp-hl-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.gp-hl-card:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 3px; }
.gp-hl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ds-soft); }
.gp-hl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-hl-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: var(--ds-ink);
  color: var(--ds-card);
}
.gp-hl-card:hover .gp-hl-play { filter: brightness(1.15); }
.gp-hl-title { display: block; margin-top: 10px; font: 600 var(--ds-fs-14)/1.4 var(--ds-font); color: var(--ds-ink2); }
.gp-hl-frame { position: relative; aspect-ratio: 16 / 9; }
.gp-hl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gp .gd-highlights { padding: 24px; }
@media (max-width: 1023px) { .gp .gd-highlights { padding: 16px; } }

/* ── Box score card: tabs as chips, the action colour when chosen ── */
.gp .gd-deep-dive { text-align: start; cursor: auto; transition: none; overflow: visible; }
.gp .gd-deep-dive:hover { background: var(--ds-card); }
.gp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.gp .gd-dd-tab {
  min-height: var(--ds-h-btn);
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--ds-line);
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink);
  font: 600 var(--ds-fs-15)/1 var(--ds-font);
  cursor: pointer;
}
.gp .gd-dd-tab:hover { background: var(--ds-soft); }
.gp .gd-dd-tab.active { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-card); }
.gp .gd-dd-tab:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
@media (max-width: 1023px) {
  .gp-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .gp .gd-dd-tab { flex: none; white-space: nowrap; }
}

/* ── The box-score table (built by _renderBoxScore), on the design's terms ── */
.gp .gd-bs-team { padding: 0 0 20px; border-bottom: 0; }
.gp .gd-bs-team + .gd-bs-team { padding-top: 16px; border-top: 1px solid var(--ds-line); }
.gp .gd-bs-team-label {
  margin: 0 0 8px;
  font: 800 var(--ds-fs-15)/1.3 var(--ds-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-ink);
}
.gp .gd-bs-table { font-family: var(--ds-font-num); }
.gp .gd-bs-table th {
  padding: 8px 6px;
  font: 600 var(--ds-fs-12)/1.2 var(--ds-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-ink2);
  border-bottom: 1px solid var(--ds-line);
}
.gp .gd-bs-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--ds-line);
  font: 600 var(--ds-fs-15)/1.15 var(--ds-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
}
.gp .gd-bs-table th.gd-bs-name-col,
.gp .gd-bs-table td.gd-bs-name-col {
  background: var(--ds-card);
  box-shadow: inset -1px 0 0 var(--ds-line);
  font: 600 var(--ds-fs-14)/1.3 var(--ds-font);
}
html[dir="ltr"] .gp .gd-bs-table th.gd-bs-name-col,
html[dir="ltr"] .gp .gd-bs-table td.gd-bs-name-col { box-shadow: inset 1px 0 0 var(--ds-line); }
.gp .gd-bs-table th.gd-bs-sep,
.gp .gd-bs-table td.gd-bs-sep { border-right: 0; border-inline-start: 1px solid var(--ds-line); }
.gp .gd-bs-table td.gd-bs-pts strong { font-size: var(--ds-fs-17); font-weight: 800; }
.gp .gd-bs-table td.gd-bs-mins,
.gp .gd-bs-table td.gd-bs-sub,
.gp .gd-bs-muted { color: var(--ds-ink2); }
.gp .gd-bs-pct { font: 500 var(--ds-fs-12)/1.2 var(--ds-font-num); color: var(--ds-ink2); }
/* Hot and cold shooting, plus and minus: the status colours, which read on the card. */
.gp .gd-bs-fg-hot,
.gp .gd-bs-pm-pos { color: var(--ds-ok); }
.gp .gd-bs-fg-cold,
.gp .gd-bs-pm-neg { color: var(--ds-live); }
.gp .gd-bs-section-row td { background: var(--ds-soft); }
.gp .gd-bs-section-label { font: 700 var(--ds-fs-12)/1.2 var(--ds-font); letter-spacing: 0; text-transform: none; color: var(--ds-ink2); }
.gp .gd-bs-total-row td { font-weight: 800; border-top: 2px solid var(--ds-ink); background: var(--ds-card); }
.gp .gd-bs-name-link { color: var(--ds-ink); text-decoration: underline; text-decoration-color: var(--ds-line); text-underline-offset: 3px; cursor: pointer; }
.gp .gd-bs-name-link:hover { text-decoration-color: var(--ds-ink); }
.gp .gd-bs-dnp-tag { background: var(--ds-soft); color: var(--ds-ink2); }
.gp .gd-bs-dnp-cell { color: var(--ds-ink2); font-family: var(--ds-font); }
.gp .gd-bs-loading,
.gp .gd-bs-error { font: 400 var(--ds-fs-15)/1.5 var(--ds-font); color: var(--ds-ink2); }
.gp .gd-dd-tab { flex: none; }
/* A sign beside digits is neutral in a Hebrew line and lands on the wrong
   side ("8-"); every signed number is its own left-to-right island. */
.gp .gd-bs-pm-pos,
.gp .gd-bs-pm-neg,
.gp .gd-bs-table tr:not(.gd-bs-section-row):not(.gd-bs-row-dnp) td:last-child { direction: ltr; unicode-bidi: isolate; }

/* ── Teams tab ── */
.gp-tw3 { max-width: 760px; margin: 0 auto; }
.gp-tw3h { display: flex; justify-content: space-between; gap: 12px; padding: 0 0 12px; }
.gp-tw3h span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.gp-tw3h b { font: 800 var(--ds-fs-17)/1.25 var(--ds-font); }
.gp-tg3 { margin-bottom: 22px; }
.gp-tg3:last-child { margin-bottom: 0; }
.gp-tg3 h4 {
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ds-line);
  font: 700 var(--ds-fs-13)/1.2 var(--ds-font);
  color: var(--ds-ink2);
}
.gp-tr3 { display: grid; grid-template-columns: 76px minmax(0, 1fr) 150px minmax(0, 1fr) 76px; align-items: center; gap: 10px; min-height: 44px; }
.gp-tn3 { text-align: center; font: 600 var(--ds-fs-14)/1.25 var(--ds-font); color: var(--ds-ink2); }
.gp-tv { font: 600 var(--ds-fs-20)/1 var(--ds-font-num); font-variant-numeric: tabular-nums; color: var(--ds-ink2); }
.gp-tv.lead { font-weight: 800; }
.gp-tr3 .gp-tv:first-child { text-align: start; }
.gp-tr3 .gp-tv:last-child { text-align: end; }
.gp-tb { display: flex; height: 14px; background: color-mix(in srgb, var(--ds-ink) 8%, var(--ds-card)); }
.gp-tb i { display: block; height: 100%; }
.gp-tb--b { justify-content: flex-end; }
@media (max-width: 1023px) {
  .gp-tr3 { grid-template-columns: 58px minmax(0, 1fr) 96px minmax(0, 1fr) 58px; gap: 6px; }
  .gp-tn3 { font-size: var(--ds-fs-12); }
  .gp-tv { font-size: var(--ds-fs-17); }
}
@media (max-width: 400px) {
  .gp-tr3 { grid-template-columns: 52px minmax(0, 1fr) 76px minmax(0, 1fr) 52px; gap: 4px; }
}

/* ── Before the game ── */
.gp-stack { display: flex; flex-direction: column; min-width: 0; }
.gp-stack[hidden] { display: none; }
@media (max-width: 1023px) { .gp-grid .gp-stack { display: contents; } .gp-grid .gp-stack[hidden] { display: none; } }
.gp-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 12px 16px 14px; border-top: 1px solid var(--ds-line); font: 400 var(--ds-fs-14)/1.4 var(--ds-font); color: var(--ds-ink2); }
.gp-frow-note { font-size: var(--ds-fs-12); }
.gp-frr { display: flex; align-items: center; gap: 10px; color: var(--ds-ink); font-weight: 600; }
.gp-arena-note { margin: 0; font: 400 var(--ds-fs-15)/1.6 var(--ds-font); color: var(--ds-ink2); }
.gp-rsg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.gp-rsh { display: block; margin-bottom: 4px; font: 800 var(--ds-fs-15)/1.3 var(--ds-font); }
.gp-rr { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ds-line); font: 400 var(--ds-fs-14)/1.35 var(--ds-font); }
.gp-rr bdi { font: 600 var(--ds-fs-15)/1.2 var(--ds-font-num); color: var(--ds-ink2); white-space: nowrap; }
.gp-wait { margin: 0 0 14px; font: 400 var(--ds-fs-15)/1.6 var(--ds-font); color: var(--ds-ink2); }
.gp-wait strong { color: var(--ds-ink); }
@media (max-width: 700px) {
  .gp-frow { display: grid; gap: 10px; }
  .gp-frr { justify-content: space-between; }
  .gp-rsg { grid-template-columns: minmax(0, 1fr); }
}

/* ── Half-time: the locker room ── */
.gp-hs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ds-line); }
.gp-hs h3 { margin: 0 0 4px; font: 800 var(--ds-fs-17)/1.3 var(--ds-font); color: var(--ds-ink); }
.gp .gd-halftime { text-align: start; }

/* ── Live: the insight box and the ask row ── */
.gp-bub { border-top: 3px solid var(--ds-ink); }
.gp-bub-k { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font: 700 var(--ds-fs-13)/1.3 var(--ds-font); color: var(--ds-ink2); }
.gp-bub-h { margin: 0 0 6px; font: 800 var(--ds-fs-20)/1.3 var(--ds-font); color: var(--ds-ink); text-wrap: balance; }
.gp-bub .gp-btns { margin-top: 12px; }
.gp-askrow { display: flex; gap: 8px; }
.gp-askrow input {
  flex: 1;
  min-width: 0;
  min-height: var(--ds-h-field);
  padding: 0 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--ds-line);
  border-radius: 0;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font: 400 var(--ds-fs-15)/1.3 var(--ds-font);
}
.gp-askrow input:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 0; border-color: var(--ds-ink); }
.gp-askrow .gp-btn { min-height: var(--ds-h-field); width: 52px; padding: 0; }
html[dir="rtl"] .gp-askrow .gp-btn svg { transform: scaleX(-1); }

/* ── Live: players to watch (built by _renderStoryCard) ── */
.gp .gd-players { padding: 0; }
.gp-kp { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gp .story-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: 0;
  background: var(--ds-card);
  box-shadow: none;
  cursor: default;
}
.gp .story-card::before { display: none; }
.gp .story-card-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-soft);
  color: var(--ds-ink);
  font: 700 var(--ds-fs-14)/1 var(--ds-font-num);
}
.gp .story-card-name { font: 800 var(--ds-fs-15)/1.3 var(--ds-font); color: var(--ds-ink); }
.gp .story-card-team { font: 400 var(--ds-fs-13)/1.3 var(--ds-font); color: var(--ds-ink2); }
.gp .story-card-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-soft);
  color: var(--ds-ink);
  font: 600 var(--ds-fs-12)/1.4 var(--ds-font);
}
.gp .story-card-fuel { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 var(--ds-fs-12)/1.2 var(--ds-font); color: var(--ds-ink2); }
.gp .story-card-fuel-bar { flex: 1; height: 6px; background: var(--ds-soft); border-radius: 0; overflow: hidden; }
.gp .story-card-fuel-fill { height: 100%; border-radius: 0; }
.gp .gd-narrative-text {
  font: 400 var(--ds-fs-15)/1.6 var(--ds-font);
  letter-spacing: 0;
  color: var(--ds-ink);
  text-shadow: none;
  text-align: start;
}
.gp .gd-narrative-text.loading {
  min-height: 72px;
  border-radius: 0;
  background: color-mix(in srgb, var(--ds-ink) 9%, var(--ds-card));
  animation: gpShim 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .gp .gd-narrative-text.loading { animation: none; } }
.gp .gd-narrative-text h2 { text-shadow: none; }

/* ── Shot chart: two courts on the design's floor ── */
:root { --sm2-floor: #EDE9DF; --sm2-paint: #E3DED1; --sm2-line: #1C1A17; }
html[data-theme="dark"] { --sm2-floor: #161C2A; --sm2-paint: #1D2538; --sm2-line: #C9D0E0; }
.sm2-court { display: block; width: 100%; height: auto; }
.sm2-floor { fill: var(--sm2-floor); }
.sm2-paint { fill: var(--sm2-paint); }
.sm2-lines { fill: none; stroke: var(--sm2-line); stroke-width: 2.5; stroke-linecap: round; opacity: .85; }
.sm2-markline,
.sm2-hexline { stroke: var(--sm2-floor); stroke-width: 1.8; }
.sm2-hexline { stroke-width: 2; }
.sm2-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.sm2-lab { font: 600 var(--ds-fs-13)/1.2 var(--ds-font); color: var(--ds-ink2); }
.sm2-lab + .gd-dd-tab { margin-inline-start: 2px; }
.sm2-bar .sm2-lab:not(:first-child) { margin-inline-start: 12px; }
.sm2-sel select {
  min-height: var(--ds-h-btn);
  padding: 0 12px;
  border: 1.5px solid var(--ds-line);
  border-radius: 0;
  background: var(--ds-card);
  color: var(--ds-ink);
  font: 600 var(--ds-fs-15)/1.2 var(--ds-font);
}
.sm2-sel select:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.gp-chipx {
  min-height: var(--ds-h-btn);
  padding: 0 14px;
  border: 1.5px solid var(--ds-ink);
  border-radius: var(--ds-r-pill);
  background: transparent;
  color: var(--ds-ink);
  font: 600 var(--ds-fs-14)/1 var(--ds-font);
  cursor: pointer;
}
.sm2-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 4px 0 24px; }
.sm2-ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sm2-ch .gp-mut { margin: 0; }
.sm2-cn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sm2-cn b { font: 800 var(--ds-fs-17)/1.25 var(--ds-font); }
.sm2-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.sm2-st b { display: block; font: 700 var(--ds-fd-28)/1 var(--ds-font-num); }
.sm2-st small { font: 400 var(--ds-fs-13)/1.3 var(--ds-font); color: var(--ds-ink2); }
.sm2-h { margin: 0 0 4px; font: 800 var(--ds-fs-17)/1.3 var(--ds-font); }
.sm2-zr { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 14px; }
.sm2-zr > span { font: 600 var(--ds-fs-15)/1.3 var(--ds-font); }
.sm2-zl { display: grid; grid-template-columns: 16px minmax(0, 1fr) 110px; align-items: center; gap: 8px; margin-bottom: 6px; }
.sm2-zl .gp-trk { height: 12px; }
.sm2-zl b { font: 700 var(--ds-fs-15)/1 var(--ds-font-num); text-align: end; white-space: nowrap; }
@media (max-width: 1023px) {
  .sm2-zr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sm2-bar { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .sm2-g { grid-template-columns: minmax(0, 1fr); }
  .sm2-st b { font-size: var(--ds-fs-24); }
}
.gp .sm-replay-bar { margin-bottom: 12px; }
.gp .sm-rp-btn { min-width: 44px; min-height: 44px; border-radius: 0; border: 1.5px solid var(--ds-line); background: transparent; color: var(--ds-ink); }
.gp .sm-rp-note,
.gp .sm-rp-caption { font: 400 var(--ds-fs-14)/1.4 var(--ds-font); color: var(--ds-ink2); }
.gp .sm-context { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font: 400 var(--ds-fs-14)/1.4 var(--ds-font); color: var(--ds-ink2); }
.gp .sm-context b { color: var(--ds-ink); }
.gp .sm-unavailable,
.gp .sm-loading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 var(--ds-fs-15)/1.5 var(--ds-font); color: var(--ds-ink2); }
/* The old drawer zeroed the padding of an open box score (.gd-deep-dive.expanded). */
.gp .gd-deep-dive,
.gp .gd-deep-dive.expanded { padding: 24px; border-style: solid; border-color: var(--ds-line); }
@media (max-width: 1023px) { .gp .gd-deep-dive, .gp .gd-deep-dive.expanded { padding: 16px; } }

/* ── Box score: one club at a time behind a two-way switch ── */
.gp-seg { display: flex; justify-content: center; margin: 0 auto 16px; max-width: 420px; }
.gp-seg button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--ds-h-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid var(--ds-ink);
  border-radius: 0;
  background: transparent;
  color: var(--ds-ink);
  font: 700 var(--ds-fs-15)/1.2 var(--ds-font);
  cursor: pointer;
}
.gp-seg button + button { border-inline-start-width: 0; }
.gp-seg button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-seg button.on { background: var(--ds-ink); color: var(--ds-card); }
.gp-seg button.on .gp-mk { box-shadow: inset 0 0 0 1.5px var(--ds-card); }
.gp-seg button:hover:not(.on) { background: var(--ds-soft); }
.gp-seg button:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; position: relative; }
.gp-seg ~ .gd-bs-teams .gd-bs-team-label { display: none; }
.gp .gd-bs-team[hidden] { display: none; }
/* "Starters" / "Bench" sit beside the names, where the reader starts. */
.gp .gd-bs-section-row td { text-align: start; }
/* Phone: the three tabs share the row instead of scrolling off it. */
@media (max-width: 1023px) {
  .gp-tabs { flex-wrap: nowrap; overflow: visible; }
  .gp .gp-tabs .gd-dd-tab { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: var(--ds-fs-14); line-height: 1.15; white-space: normal; }
}
@media (max-width: 360px) { .gp .gp-tabs .gd-dd-tab { font-size: var(--ds-fs-13); } }
/* The shot map's own choices (view, quarter) are small chips that keep their words whole and wrap to a second row. */
.gp .sm2-bar .gd-dd-tab { flex: none; min-width: 44px; padding: 0 14px; white-space: nowrap; }

/* The arena warning: a warm-tinted card with a heat-coloured top edge. The tint is the warning colour
   at 10%, so it reads on both themes; the text stays ink. */
.gp-arena {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; box-sizing: border-box;
  border-block-start: 4px solid var(--ds-warn); background: color-mix(in srgb, var(--ds-warn) 11%, var(--ds-card)); color: var(--ds-ink);
}
.gp-arena-top { display: flex; align-items: center; gap: 8px; color: var(--ds-warn); font: 800 var(--ds-fs-14) var(--ds-font); }
.gp-arena-place { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ds-ink2); font: 500 var(--ds-fs-14) var(--ds-font); }
.gp-arena-place b { font: 700 var(--ds-fs-20) var(--ds-font-num); letter-spacing: .02em; text-transform: uppercase; color: var(--ds-ink); direction: ltr; unicode-bidi: isolate; }
.gp-arena-main { margin: 4px 0 0; font: 900 var(--ds-fd-28)/1.2 var(--ds-font); letter-spacing: -.02em; text-wrap: balance; }
.gp-arena-tail { margin: 0; font: 500 var(--ds-fs-15) var(--ds-font); color: var(--ds-ink2); }
.gp-arena .gp-btns { margin-block-start: 8px; }
@container (max-width: 480px) { .gp-arena-main { font-size: 22px; } }

.gp-news { margin-block-start: 14px; }

/* ── Arena row: the arena, and how many were there ── */
.gp-venue {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px;
  padding: 14px 16px; color: var(--ds-ink2); font: 400 var(--ds-fs-13)/1.4 var(--ds-font);
}
.gp-venue-name { display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 180px; font-weight: 800; font-size: var(--ds-fs-20, 20px); line-height: 1.25; color: var(--ds-ink); }
.gp-venue-name svg { flex: none; margin-top: 2px; }
.gp-venue-name bdi { overflow-wrap: anywhere; }
.gp-venue-att { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-inline-start: auto; max-width: 100%; }
.gp-venue-n { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-size: var(--ds-fs-16, 16px); font-weight: 700; color: var(--ds-ink); }
.gp-venue-n b { font: 800 28px/1 var(--ds-font-num); letter-spacing: .02em; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.gp-venue-cap { font-size: 13px; color: var(--ds-ink2); font-variant-numeric: tabular-nums; }
.gp-venue-bar { position: relative; display: block; inline-size: 180px; max-inline-size: 100%; block-size: 4px; background: var(--ds-line); }
.gp-venue-bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ds-ink); }

/* ── The poll under the crowd question ── */
.gp-poll { display: flex; flex-direction: column; gap: 14px; margin-block: 16px; padding-block-start: 16px; border-top: 1px solid var(--ds-line); }
.gp-poll[hidden] { display: none; }
.gp-poll-head h4 { margin: 0; font: 800 17px/1.35 var(--ds-font); color: var(--ds-ink); }
.gp-poll-head p { margin: 2px 0 0; font: 500 14px/1.5 var(--ds-font); color: var(--ds-ink2); }
.gp-poll-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-poll-opt {
  position: relative; display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: 56px; box-sizing: border-box;
  padding: 10px 14px; margin: 0; text-align: start; font: inherit; color: var(--ds-ink); background: var(--ds-card);
  border: 1px solid var(--ds-line); border-radius: 0; overflow: hidden;
}
button.gp-poll-opt { cursor: pointer; }
button.gp-poll-opt:hover { background: var(--ds-soft); }
button.gp-poll-opt:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.gp-poll-opt.on { border: 2px solid var(--ds-ink); }
.gp-poll-opt.dim, .gp-poll-opt.other { opacity: .78; }
.gp-poll-opt.other { opacity: 1; }
.gp-poll-bar { position: absolute; inset-block: 0; inset-inline-start: 0; background: color-mix(in srgb, var(--ds-ink) 14%, transparent); transform-origin: left center; animation: gpPollGrow .5s cubic-bezier(.2, .8, .2, 1); }
html[dir="rtl"] .gp-poll-bar { transform-origin: right center; }
@keyframes gpPollGrow { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gp-poll-bar { animation: none; } }
.gp-poll-dot { position: relative; flex: none; inline-size: 22px; block-size: 22px; box-sizing: border-box; border: 2px solid var(--ds-ink); border-radius: 50%; display: grid; place-items: center; }
.gp-poll-dot > i { display: block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--ds-ink); transform: scale(0); }
.gp-poll-opt.on .gp-poll-dot > i { transform: scale(1); }
.gp-poll-txt { position: relative; flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: start; font: 600 15px/1.4 var(--ds-font); overflow-wrap: anywhere; }
.gp-poll-opt.on .gp-poll-txt > span:first-child { font-weight: 800; }
.gp-poll-mine { font: 800 12px/1.3 var(--ds-font); color: var(--ds-ink2); }
.gp-poll-pct { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.gp-poll-pct b { font: 800 24px/1 var(--ds-font-num); font-variant-numeric: tabular-nums; color: var(--ds-ink); }
.gp-poll-pct span { font: 500 12px/1.3 var(--ds-font); color: var(--ds-ink2); }
.gp-poll-lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--ds-line); font: 600 14px/1.5 var(--ds-font); color: var(--ds-ink); }
.gp-poll-lock > span { flex: 1 1 200px; }
.gp-poll-note, .gp-poll-total { margin: 0; font: 500 14px/1.55 var(--ds-font); color: var(--ds-ink); }
.gp-poll-total { font-weight: 600; color: var(--ds-ink2); }
.gp-poll-err { padding: 12px 14px; border: 1.5px solid var(--ds-ink); font: 600 14px/1.5 var(--ds-font); color: var(--ds-ink); }
.gp-poll-send { inline-size: 100%; min-block-size: 48px; }
.gp-poll-send[aria-disabled="true"] { opacity: .45; cursor: default; }

/* ── Before the game: "Who will win?" ── */
.gp-win { display: flex; flex-direction: column; gap: 16px; }
.gp-win[hidden] { display: none; }
.gp-win-head h3 { margin: 0; font: 900 20px/1.2 var(--ds-font); letter-spacing: -.01em; color: var(--ds-ink); }
.gp-win-head p { margin: 2px 0 0; font: 500 14px/1.5 var(--ds-font); color: var(--ds-ink2); }
.gp-win-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gp-win-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-block-size: 92px;
  box-sizing: border-box; padding: 12px 8px; margin: 0; font: inherit; color: var(--ds-ink); background: var(--ds-card);
  border: 1px solid var(--ds-line); border-radius: 0; cursor: pointer;
}
.gp-win-btn span { font: 700 15px/1.3 var(--ds-font); text-align: center; overflow-wrap: anywhere; }
.gp-win-btn.on span { font-weight: 800; }
.gp-win-btn em { font: 800 12px/1.3 var(--ds-font); font-style: normal; min-block-size: 16px; }
.gp-win-btn.on { border: 2px solid var(--ds-ink); }
.gp-win-btn.dim { opacity: .75; cursor: default; }
.gp-win-btn[aria-disabled="true"] { cursor: default; }
.gp-win-btn:not([aria-disabled="true"]):hover { background: var(--ds-soft); }
.gp-win-btn:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.gp-win-res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.gp-win-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-inline-size: 0; padding: 12px; border: 1px solid var(--ds-line); }
.gp-win-side.on { border: 2px solid var(--ds-ink); }
.gp-win-who { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.gp-win-who b { font: 800 15px/1.3 var(--ds-font); overflow-wrap: anywhere; color: var(--ds-ink); }
.gp-win-pct { font: 800 40px/1 var(--ds-font-num); font-variant-numeric: tabular-nums; color: var(--ds-ink); }
.gp-win-cnt { font: 500 13px/1.3 var(--ds-font); color: var(--ds-ink2); }
.gp-win-mine { display: inline-flex; align-items: center; gap: 5px; font: 800 12px/1.3 var(--ds-font); color: var(--ds-ink); }
.gp-win-bar { display: flex; block-size: 12px; gap: 3px; }   /* follows the reading direction: the first club is on the same side as its card */
.gp-win-bar i { display: block; block-size: 12px; }
.gp-win-bar i:first-child { background: var(--ds-ink); }
.gp-win-bar i:last-child { background: var(--ds-line); }
.gp-poll-err { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }

/* Explained terms inside the Professor's text: a clear dashed line close under the word, not the thin pale dots
   of the default style (owner, 27.10: too light, and sitting too far below the text). */
.gp-card .term-link {
  color: inherit; text-decoration: underline dashed; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ds-ink) 65%, transparent);
}
.gp-card .term-link:hover { background: var(--ds-soft); }

/* ── Pre-game: missing players ── */
.gp-miss { display: flex; flex-direction: column; gap: 14px; }
.gp-miss[hidden] { display: none; }
.gp-miss-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.gp-miss-head h2 { margin: 0; font: 900 20px/1.2 var(--ds-font); letter-spacing: -.01em; color: var(--ds-ink); }
.gp-miss-sub { font: 600 13px var(--ds-font); color: var(--ds-ink2); }
.gp-miss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; align-items: start; }
.gp-miss-team { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.gp-miss-th { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; min-width: 0; }
.gp-miss-tn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gp-miss-tn b { font: 800 16px/1.2 var(--ds-font); overflow-wrap: anywhere; color: var(--ds-ink); }
.gp-miss-cnt { display: flex; align-items: baseline; gap: 12px; flex: none; }
.gp-miss-cnt > span { display: flex; align-items: baseline; gap: 5px; font: 700 12px var(--ds-font); color: var(--ds-ink); }
.gp-miss-cnt > span.d { color: var(--ds-ink2); }
.gp-miss-cnt b { font: 800 28px/1 var(--ds-font-num); }
.gp-miss-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.gp-miss-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--ds-line); }
.gp-miss-list li:first-child { border-top: 1.5px solid var(--ds-ink); }
.gp-miss-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gp-miss-who b { font: 800 16px/1.25 var(--ds-font); color: var(--ds-ink); overflow-wrap: anywhere; }
.gp-miss-who span { font: 500 14px/1.4 var(--ds-font); color: var(--ds-ink2); overflow-wrap: anywhere; }
.gp-miss-st { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.gp-miss-st em { font-style: normal; display: inline-flex; align-items: center; justify-content: center; min-width: 60px; min-height: 28px; box-sizing: border-box; padding: 0 10px; font: 800 13px/1 var(--ds-font); }
.gp-miss-st em.out { background: var(--ds-ink); color: var(--ds-card); border: 1.5px solid var(--ds-ink); }
.gp-miss-st em.doubt { background: transparent; color: var(--ds-ink); border: 1.5px dashed var(--ds-ink); }
.gp-miss-st small { font: 600 12px var(--ds-font); color: var(--ds-ink2); white-space: nowrap; }
.gp-miss-quiet { margin: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; font: 600 14px var(--ds-font); color: var(--ds-ink2); }
.gp-miss-more, .gp-miss-retry { min-height: 44px; border: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); font: 700 14px var(--ds-font); cursor: pointer; }
.gp-miss-more { width: 100%; }
.gp-miss-retry { padding: 0 18px; background: var(--ds-ink); color: var(--ds-card); border: 0; font-weight: 800; }
.gp-miss-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 12px; border-top: 1px solid var(--ds-line); font: 600 12px var(--ds-font); color: var(--ds-ink2); }
.gp-miss-key span { display: flex; align-items: center; gap: 6px; }
.gp-miss-key i { width: 16px; height: 12px; display: inline-block; }
.gp-miss-key i.s { background: var(--ds-ink); }
.gp-miss-key i.d { border: 1.5px dashed var(--ds-ink); }
.gp-miss-load { display: flex; flex-direction: column; gap: 10px; }
.gp-miss-load span { font: 600 14px var(--ds-font); color: var(--ds-ink2); }
.gp-miss-load i { display: block; height: 56px; background: var(--ds-line); animation: gpMissPulse 1.4s ease-in-out infinite; }
.gp-miss-load i:first-of-type { height: 40px; }
.gp-miss-err { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px; border: 1.5px solid var(--ds-ink); font: 700 14px/1.5 var(--ds-font); }
@keyframes gpMissPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .gp-miss-load i { animation: none; } }

/* ── This season between the two clubs: the names at the sides, the wins between them in the middle ── */
.gp-series { display: flex; flex-direction: column; gap: 14px; }
.gp-ser-h { margin: 0; font: 800 var(--ds-fs-14) var(--ds-font); color: var(--ds-ink2); }
.gp-ser-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.gp-ser-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.gp-ser-team b { max-width: 100%; font: 800 var(--ds-fs-15)/1.2 var(--ds-font); text-wrap: balance; overflow-wrap: anywhere; }
.gp-ser-rec { font: 600 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.gp-ser-rec bdi { font: 800 var(--ds-fs-15) var(--ds-font-num); color: var(--ds-ink); }
.gp-ser-score { display: flex; align-items: center; gap: 8px; font: 800 clamp(34px, 11vw, 48px)/1 var(--ds-font-num); direction: ltr; }
html[dir="rtl"] .gp-ser-score { flex-direction: row-reverse; }
.gp-ser-score i { font-style: normal; color: var(--ds-ink2); }
.gp-ser-none i { font: 700 var(--ds-fs-15) var(--ds-font); }
.gp-ser-note { margin: 0; padding-block-start: 10px; border-block-start: 1px solid var(--ds-line); text-align: center; font: 500 var(--ds-fs-13)/1.4 var(--ds-font); color: var(--ds-ink2); }

/* A starter who is in doubt, in the expected line-up */
.gp-rr-q { font: 700 var(--ds-fs-12) var(--ds-font); font-style: normal; color: var(--ds-ink2); border: 1px solid var(--ds-line); padding: 1px 6px; margin-inline-start: 6px; white-space: nowrap; }

/* Each choice (view, quarter) is its own group: the label stays with its chips when the row wraps. */
.sm2-bar { gap: 12px 20px; }
.sm2-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sm2-bar .sm2-grp .sm2-lab { margin-inline-start: 0; flex: none; }

/* A row with nothing in it draws no line. */
.gp-clock:empty, .gp-strip:empty, .gp-venue:empty { display: none; }

/* A key-player card opens the player's page, like a name in the box score. */
.gp .story-card.is-link { cursor: pointer; }
.gp .story-card.is-link:hover { background: var(--ds-soft); }
.gp .story-card.is-link:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }