/* ═══════════════════════════════════════════════════════════════════════════
   THE GAME CARD — the layout every sport's matchup page shares (game-card.js).

   Billy, 2026-10-31, the cards mock-up canvas (boards Game-B, Game-B-final, Game-C):
   "the layout changes are perfect ... build it all", the graphics left exactly as
   they are. This sheet arranges; the rings, maps, diamonds and shapes keep their own
   sheets (player-card.css, card-rings.js, matchup-maps.css, tennis-diamonds.css).

   A PHONE (under 1100px), one thing at a time: the name and when, the call (our pick,
   the one big figure, the spread and total on one small line), three or four pills,
   and under them one section, a switch choosing the ring, the team or the view.

   A COMPUTER (1100px and up): the call is a sticky card on the left, 320px, with the
   figures the phone's small line stands for and "the numbers", the comparison table.
   The pills sit over the evidence on the right, which has the room to show the rings
   side by side with the map under them, and both boxes stacked full width.

   Didot for display and never bold, Avenir Next for the rest, tabular figures, every
   button a pill of 44px, green for our side and amber for the other.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the masthead, on a phone ─────────────────────────────────────────────── */
.gc .gc-head { padding: 22px 20px 0; }
.gc .gc-when { margin-top: 4px; }
.gc .gc-body { padding: 0; }
.gc .gc-call { margin: 14px 20px 0; padding: 12px 0 0; border-top: 1px solid var(--border); min-width: 0; }
.gc .gc-main { padding: 0 20px 26px; min-width: 0; }
.gc .gc-main > .pc-tabs { margin-top: 18px; }

/* the call: "our pick: MIN 68% · ✗ missed", then the one big figure, then the small line */
.gc-pick { font-size: 15px; color: var(--text-primary); line-height: 1.35; }
.gc-pick .gc-eb::after { content: ": "; }
.gc-pv { font-weight: 700; color: var(--gold); }
.gc-mk { font-weight: 700; }
.gc-mk::before { content: " · "; font-weight: 400; color: var(--text-tertiary); }
.gc-mk.ok { color: var(--gold); }
.gc-mk.miss { color: var(--warning-text); }
.gc-eb { font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary); }
.gc-pick .gc-eb { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-primary); font-weight: 400; }
.gc-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; margin-top: 4px; }
.gc-big > .gc-eb { display: none; }
.gc-bv {
  font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1.05;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text-primary); white-space: nowrap;
}
.gc-bl { font-size: 12px; color: var(--text-tertiary); }
.gc-small { margin-top: 4px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* what only a computer's call column carries (the one-line read too, unless a page asks for it on a phone) */
.gc-rows, .gc-read { display: none; }
.gc-read.gc-rp {
  display: block; margin: 10px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.05rem; line-height: 1.35; color: var(--text-primary);
}
.gc-call .gc-numbers { display: none; }
.gc-main .gc-numbers { display: block; margin-top: 30px; }
.gc-numbers .pc-rl.gap { margin-top: 28px; }

/* ── the pills ───────────────────────────────────────────────────────────── */
.gc .gc-main .pc-tab { font-size: 13px; padding: 0 8px; }

/* ── a switch: a pill of two or more, the one on show in ink ─────────────── */
.gc-sw {
  display: flex; gap: 3px; margin: 16px 0 0; padding: 3px;
  border: 1px solid var(--border); border-radius: 999px; max-width: 100%;
}
.gc-sw button {
  appearance: none; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 8px;
  font-family: var(--font-button, var(--font-sans)); font-size: 12.5px; font-weight: 600; line-height: 1.2;
  color: var(--text-tertiary); text-align: center; overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
.gc-sw button:hover { background: var(--bg-inset); }
.gc-sw button[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-page); }
.gc-sw button:focus { outline: none; }
.gc-sw button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gc-sw + .gc-sw { margin-top: 10px; }
.gc-sws { display: flex; flex-direction: column; }
.gc-pane.gc-off { display: none; }

/* ── how they play: one ring at a time ───────────────────────────────────── */
.gc-ring { min-width: 0; margin-top: 14px; }
.gc-rh {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.gc-rh em { font-style: normal; font-weight: 400; color: var(--text-tertiary); }
/* a five-spoke ring reserves as much label room above and below as at the sides, and only the sides
   need it: the empty top and bottom are trimmed (a diamond, four spokes, has none to spare) */
.gc-ring .rg-svg { max-width: 400px; margin: 0 auto; }
.gc-ring:not([data-n="4"]) .rg-svg { margin: -12% auto; }
@media (min-width: 721px) { .gc-ring:not([data-n="4"]) .rg-svg { margin: -48px auto; } }
.gc-ring .rg-svg.rg-wrap { margin: 0 auto !important; max-width: 480px !important; }
.gc-ring .rg-rd { margin-top: 14px; }
/* baseball and hockey: two whole sides on a ring, so the heading carries the ring's own name, the key,
   and the pool the places are among on a line under it; a ring with no numbers says so in words */
.gc-rt { margin-right: 4px; color: var(--text-primary); }
.gc-rs { margin: 8px 0 0; font-size: .75rem; line-height: 1.4; color: var(--text-tertiary); }
.gc-none p { margin: 10px 0 0; font-size: .8rem; color: var(--text-tertiary); }
/* the teams in the title open their team cards, and read as the title does */
.gc .pc-name a { color: inherit; text-decoration: none; }
.gc .pc-name a:hover, .gc .pc-name a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.gc-pace { margin: 14px 0 0; font-size: .8rem; color: var(--text-secondary); }
.gc-pace b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gc-play > .pc-cav, .gc-main .pc-cav { margin-top: 18px; }

/* ── the game: the quarters over one team's box ──────────────────────────── */
.gc-q { margin-top: 16px; }
.gc-q .proj-table-wrap .pc-table { max-width: none; }
.gc-q .gc-eb { display: block; margin-bottom: 4px; }
.mu-box .pc-table td.left, .mu-box .pc-table th.left { text-align: left; padding-left: 0; }
.mu-box .pc-table tr.mu-sub td { font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary); padding-top: 12px; }
.mu-box .pc-table tr.mu-tot td { border-bottom: 0; color: var(--text-secondary); }
.mu-box .mu-pos { font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary); }
.mu-box .pc-table td { white-space: nowrap; }
/* ⛔ A box score is never squeezed or cut to fit (Billy 2026-10-31: "user should also be able to scroll
   right and see full box score in any situation"): it keeps every column and, when it must, slides, its
   first column pinned and its edge faded. One team at a time, or stacked, so it rarely has to. */
.gc-box { margin-top: 16px; }
.gc-box + .gc-box { margin-top: 26px; }
.gc-box > h2.pc-h { display: none; margin: 0 0 6px; font-size: 1.1rem; }
.gc-dnp { margin: 10px 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-tertiary); }
.gc-dnp b { font-weight: 600; color: var(--text-secondary); }
.gc-nobox { margin: 16px 0 0; }

/* the maps' own heading ("Spot by spot") sits under a pill of that name on a phone: the pill is the
   heading there (the review of 2026-10-31: headings that repeat their pill), its italic line stays */
.gc [data-tab="spots"] .pc-h { display: none; }

/* head to head is a small block of the odds here, not a figure of its own */
.gc [data-tab="odds"] .mc-h2h { font-size: 2.3rem; }

/* ── the numbers: a place for each team on each measure, the figure under it ─ */
.gc-ng { margin-top: 14px; }
.gc-nh, .gc-nr { display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px; gap: 8px; align-items: baseline; }
.gc-nh {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-tertiary);
  padding-bottom: 6px; border-bottom: 1px solid var(--text-primary);
}
.gc-nh span:not(:first-child), .gc-nr .v { text-align: right; }
.gc-nr { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .84rem; color: var(--text-secondary); }
.gc-nr:last-child { border-bottom: 0; }
.gc-nr .v {
  font-family: var(--pc-table-face); font-size: calc(1.02rem * var(--pc-table-size, 1)); color: var(--text-primary);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.gc-nr .v small { display: block; margin-top: 3px; font-family: var(--font-sans); font-size: .6875rem; font-weight: 600; color: var(--text-tertiary); }

/* ═══ A COMPUTER: the call on the left, the evidence on the right ═══════════ */
@media (min-width: 1100px) {
  .gc .gc-head { padding: 30px 34px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
  .gc .gc-head > * { margin: 0; }
  .gc .gc-head > .gc-extra { flex: 0 0 100%; margin-top: 4px; }
  .gc .gc-body {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0 38px; align-items: start;
    padding: 0 34px 34px;
  }
  .gc .gc-call {
    margin: 0; padding: 24px 22px 22px; position: sticky; top: var(--gc-top, 16px);
    border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card);
  }
  .gc .gc-main { padding: 0; }
  .gc .gc-main > .pc-tabs { margin-top: 0; }
  .gc .gc-main .pc-tab { flex: 0 0 auto; padding: 0 28px; }

  /* the pick: the figure big, in Didot, never bold */
  .gc-pick { font-size: 15px; }
  .gc-pick .gc-eb { display: block; font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary); }
  .gc-pick .gc-eb::after { content: none; }
  .gc-pv {
    display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(48px, 4.6vw, 62px); line-height: .98; letter-spacing: -.02em; color: var(--text-primary);
    font-variant-numeric: lining-nums tabular-nums; overflow-wrap: break-word;
  }
  .gc-pv.gc-long { font-size: clamp(34px, 3.2vw, 42px); line-height: 1.04; }
  .gc-mk { display: block; margin-top: 10px; font-size: .86rem; }
  .gc-mk::before { content: none; }
  .gc-call > * + * { margin-top: 0; }
  .gc-call > .gc-big, .gc-call > .gc-rows, .gc-call > .gc-read, .gc-call > .gc-numbers {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
  }
  .gc-big { display: block; }
  .gc-big > .gc-eb { display: block; }
  .gc-bv { display: block; margin-top: 4px; font-size: clamp(40px, 3.8vw, 52px); line-height: 1.05; }
  .gc-bl { display: block; margin-top: 4px; }
  .gc-bl-e { display: none; }
  .gc-small { display: none; }
  .gc-rows { display: block; }
  .gc-rows .gc-eb { margin: 0 0 6px; }
  .gc-rr { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: .86rem; color: var(--text-secondary); }
  .gc-rr b { font-weight: 400; color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; }
  .gc-read {
    display: block; margin-bottom: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.05rem; line-height: 1.35; color: var(--text-primary);
  }
  .gc-call .gc-numbers { display: block; }
  .gc-numbers .pc-h { margin: 0; font-size: 1.15rem; }
  .gc-nn { margin: 4px 0 0; font-size: .75rem; line-height: 1.4; color: var(--text-tertiary); }

  /* the switches that choose between rings and teams have nothing to choose: both show; the one
     that is left (as played, as we projected) is a pill the width of its words, not a slab */
  .gc-sw { display: inline-flex; }
  .gc-sw button { flex: 0 0 auto; padding: 6px 22px; }
  .gc-sw.gc-sw-phone { display: none; }
  .gc-sws { align-items: flex-start; }
  .gc-pane.gc-wide-all.gc-off { display: block; }

  /* how they play: the rings side by side, no readout under them (the numbers beside them hold the
     figures), the map under them */
  .gc-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
  .gc-rings .gc-ring { margin-top: 6px; }
  .gc-play .rg-rd { display: none; }
  .gc-pace { display: none; }
  .gc-rings .rg-svg, .gc-rings .rg-svg.rg-wrap { max-width: 100% !important; }
  /* under the rings the map is a section of its own, and says so */
  .gc [data-tab="spots"] .pc-h { display: block; margin-top: 34px; }
  /* a pair under one pill is one above the other here, the rings over their map (the sheet's
     side-by-side is for the player cards' pairs) */
  .gc .gc-main.pc-side2 { display: block; }

  /* the game: both boxes stacked, full width */
  .gc-box > h2.pc-h { display: block; font-size: 1.2rem; }

  /* baseball's three rings: the third takes a row of its own, centered, until the column is wide enough
     for all three side by side (1300px); a ring whose figures the numbers beside the rings do not hold
     (the lineups, the starters, the goalies) keeps its readout under it */
  .gc-play .gc-ring.gc-keep .rg-rd { display: block; }
  .gc-rings[data-n="3"] > .gc-pane:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 17px); justify-self: center; }
}
@media (min-width: 1300px) {
  .gc-rings[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; }
  /* a starter named with his team takes two lines of heading: hold the room for them on all three, so
     the three rings start level */
  .gc-rings[data-n="3"] .gc-rh { min-height: 44px; align-content: flex-start; }
  .gc-rings[data-n="3"] > .gc-pane:nth-child(3) { grid-column: auto; width: auto; justify-self: stretch; }
}