/* game-card.css - the styling for THE game card, shared by every page that
 * draws one: the Line Shop board and every /odds/<hub>/<slug> matchup page.
 *
 * Split out of lineshop.html's inline <style> alongside the renderer itself
 * (static/game-card.js) and for the same reason: a card whose markup comes
 * from one place and whose styling comes from two will drift, and the drift
 * shows up as a card that is subtly wrong on the page nobody screenshots.
 *
 * SCOPE. Only rules the card itself draws. The board around it (the toolbar,
 * the day pills, the book-filter dropdown, the futures table, the skeleton,
 * the grid the cards sit in) stayed in lineshop.html, because a matchup page
 * has none of those and would only inherit surprises.
 *
 * LIGHT MODE lives where it always has, in static/theme-light.css, scoped
 * under html[data-theme="light"]. That file is loaded site-wide, so the card
 * gets its light overrides on the matchup pages for free. When you add a
 * hard-coded dark colour here, add its light override THERE.
 */

@keyframes og-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
    /* In-play chip on a live card's header, where the start time normally sits */
    .gc-live-chip {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: #ff8a8e;
    }
    .gc-live-chip .live-dot {
      width: 6px; height: 6px; border-radius: 50%; background: #e5484d;
      animation: og-live-pulse 1.6s ease-in-out infinite;
    }
    .gc-live-chip .gc-live-sub { font-weight: 600; color: var(--text); letter-spacing: 0; }
    /* Live score, FanDuel treatment (Dan 2026-07-18 round 2): a crisp
       boxed number pushed to the RIGHT edge of the team column - vertically
       centered on its team's row, sitting just left of the price cells. */
    /* width:100% -> the box's right edge is ALWAYS the team column's right
       edge, so the gap to the price cell is the grid's column-gap on every
       row of every card - one fixed distance, never a function of name
       length (Dan 2026-07-18 round 3). */
    .gc-team-name { display: flex; align-items: center; gap: 6px; width: 100%; }
    .gc-score {
      margin-left: auto; flex-shrink: 0;
      min-width: 22px; height: 22px; padding: 0 4px;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 12px; color: var(--text);
      font-variant-numeric: tabular-nums;
      background: var(--bg3); border: 1px solid #3A3A3A; border-radius: 5px;
    }
    html[data-theme="light"] .gc-score { border-color: var(--border); }

    /* ── Game card ── */
    .game-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      transition: border-color 0.15s;
    }
    .game-card:hover { border-color: #3A3A3A; }

    /* Game-header layout: ALWAYS stacked.  Top row = sport chip + time
       (left) and the "More Odds" caret (right).  Second row = the markets
       grid taking the full card width.  This way the 4-column markets
       grid (team + spread + total + ML) always has the entire card to
       work with — no more clipping moneyline off the right edge when the
       cards-grid is in 2-col mode. */
    .game-header {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "left more"
        "markets markets";
      align-items: center;
      padding: 12px 16px;
      cursor: pointer;
      user-select: none;
      column-gap: 14px;
      row-gap: 8px;
    }
    .gc-more { cursor: pointer; padding: 6px 4px; border-radius: 6px; transition: background 0.12s; }
    .gc-more:hover { background: var(--bg3); }

    /* Top-left, two deliberate rows (Dan 2026-07-16): league + time on the
       first line, History + hold on the second. No more wrap lottery. */
    .gc-left {
      grid-area: left;
      display: flex; flex-direction: column; align-items: flex-start;
      gap: 6px; min-width: 0;
    }
    .gc-l1, .gc-l2 {
      display: flex; flex-direction: row; align-items: center;
      flex-wrap: wrap; gap: 4px 10px; min-width: 0;
    }
    /* Top-right column: save star above the All Books toggle. */
    .gc-right {
      grid-area: more;
      display: flex; flex-direction: column; align-items: flex-end;
      gap: 2px; align-self: start;
    }
    .sport-chip {
      background: var(--bg3); color: var(--gold);
      font-size: 10px; font-weight: 800; padding: 3px 7px;
      border-radius: 4px; letter-spacing: 0.5px;
      display: inline-block; flex-shrink: 0;
    }
    .game-time {
      /* Never ellipsize the kickoff time — wrap onto a second line instead.
         The old nowrap+ellipsis cut "Jul 11, 6:00 PM ET" to "Jul 11, 6:0…"
         whenever the hold chip + star squeezed the header row. */
      font-size: 11px; color: var(--muted);
      white-space: normal; line-height: 1.25; min-width: 0;
    }

    /* Markets grid: 4 columns → [team col | spread | total | moneyline].
       3 rows: header / away / home.  EVERY cell uses explicit grid-column
       + grid-row placement so the team labels always sit in column 1 and
       align with their corresponding pill row.

       Team col is sized to fit "LA Lakers" / "HOU Rockets" on a single
       line.  Longer names ("POR Trail Blazers", "WAS Commanders") wrap
       to 2 lines via .gc-team-name { white-space: normal }. */
    .gc-markets {
      grid-area: markets;
      display: grid;
      grid-template-columns: minmax(72px, 110px) repeat(3, minmax(72px, 1fr));
      grid-template-rows: auto 1fr 1fr;
      column-gap: 8px;
      row-gap: 4px;
      align-items: stretch;
      min-width: 0;
    }
    .gc-col-label {
      font-size: 10px; font-weight: 700; color: var(--muted);
      letter-spacing: 0.5px; text-align: center;
      grid-row: 1;
    }
    .gc-col-label.lbl-spread { grid-column: 2; }
    .gc-col-label.lbl-total  { grid-column: 3; }
    .gc-col-label.lbl-ml     { grid-column: 4; }

    /* Team-stack: AWAY centered in upper half (row 2), AT in the middle,
       HOME centered in lower half (row 3).  Living inside the markets grid
       means each team label vertically aligns with its row of Spread / Total
       / ML pills.  Internal grid `1fr auto 1fr` centers each team in its
       half.  All text left-aligned. Labels wrap to 2 lines for longer names. */
    .gc-team-stack {
      grid-column: 1; grid-row: 2 / span 2;
      display: grid;
      grid-template-rows: 1fr auto 1fr;
      align-items: center;
      justify-items: start;
      min-width: 0;
      padding-right: 2px;
      text-align: left;
    }
    /* display:contents promotes the link's three children (away / AT / home)
       back into the stack's centered 1fr-auto-1fr rows - wrapping them in a
       plain block collapsed all three into row one, pinning names to the top
       of the card instead of centered against their odds rows. */
    .gc-team-link { display: contents; color: inherit; text-decoration: none; }
    .gc-team-link:hover .gc-team-name { color: var(--gold); }
    .gc-team-name {
      font-size: 13px; font-weight: 800; color: var(--text);
      line-height: 1.15; max-width: 100%;
      /* Allow wrapping to 2 lines when "POR Trail Blazers" doesn't fit
         on one — never truncate to "POR Trail Bla...". */
      white-space: normal;
      overflow-wrap: break-word;
      word-break: normal;
      letter-spacing: 0.2px;
      text-align: left;
    }
    .gc-team-name.fav { color: var(--gold); }
    .gc-team-at {
      font-size: 9px; font-weight: 700; color: var(--muted);
      letter-spacing: 1.4px; text-transform: uppercase;
      line-height: 1; padding: 2px 0;
      text-align: left;
    }

    /* Explicit pill placement — no auto-flow guessing. */
    .bet-pill.pos-spread-away  { grid-column: 2; grid-row: 2; }
    .bet-pill.pos-totals-over  { grid-column: 3; grid-row: 2; }
    .bet-pill.pos-ml-away      { grid-column: 4; grid-row: 2; }
    .bet-pill.pos-spread-home  { grid-column: 2; grid-row: 3; }
    .bet-pill.pos-totals-under { grid-column: 3; grid-row: 3; }
    .bet-pill.pos-ml-home      { grid-column: 4; grid-row: 3; }
    .pd-ev { color: var(--gold); font-size: 12px; font-weight: 700; margin: 0 2px 8px; }
    .pd-sub { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin: 14px 2px 6px; }
    .ls-hold { color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
    .ls-hold.arb { color: var(--green, #4caf7d); }
    /* Price-watch row under the expanded Moneyline table */
    .watch-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); }
    .watch-row select, .watch-row input { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 12.5px; font-family: inherit; }
    .watch-row input { width: 84px; }
    .watch-row .w-set { background: var(--gold); border: none; color: #000; font-weight: 700; border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 12px; font-family: inherit; }
    /* +/- toggle — mobile numeric keyboards have no minus key */
    .watch-row .w-sign { background: var(--bg3); border: 1px solid var(--border); color: var(--gold); font-weight: 800; font-size: 14px; border-radius: 6px; padding: 4px 11px; cursor: pointer; font-family: inherit; }
    .watch-row .w-note { font-size: 12px; color: var(--gold); }
    .gp-link { padding: 9px 12px; border-top: 1px solid var(--border); font-size: 12.5px; text-align: center; }
    .gp-link a { color: var(--gold); text-decoration: none; font-weight: 700; }
    .gp-link a:hover { color: var(--gold-lt); }
    /* Always-visible History chip on the card header - the game pages (line
       movement + every book) were only reachable through the invisible
       team-name link and a buried table footer (Dan, 2026-07-16). */
    .gc-history {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 600; color: var(--muted);
      border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px;
      text-decoration: none; white-space: nowrap; line-height: 1.4;
    }
    .gc-history:hover { color: var(--gold); border-color: var(--gold); }
    .gc-history .spark {
      display: inline-block; width: 10px; height: 9px; position: relative;
    }
    .gc-history .spark::before {
      content: ''; position: absolute; left: 0; bottom: 0; width: 10px; height: 9px;
      background: linear-gradient(to top right, transparent 44%, currentColor 46%, currentColor 54%, transparent 56%);
    }
    .gc-history .spark::after {
      content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: currentColor; opacity: 0.55;
    }@media (max-width: 480px) {
      .gc-history { font-size: 10px; padding: 2px 6px; gap: 3px; }
  }

    /* Top-of-expanded game-page bar: visible on EVERY market tab */
    /* Its own band, not a line floating above the tab strip. The zero bottom
       padding used to put this flush against .market-tabs, which carries its
       own lighter --bg3 background, so on mobile the link read as part of the
       SPREAD / TOTAL / MONEYLINE bar. Darker bg + centred + its own bottom
       rule separates the two. Palette variables only, so light mode follows
       the :root flip with no override needed. */
    .gp-top {
      padding: 10px 14px; font-size: 12px; text-align: center;
      background: var(--bg2); border-bottom: 1px solid var(--border);
    }
    .gp-top a { color: var(--gold); text-decoration: none; font-weight: 700; }
    .gp-top a:hover { color: var(--gold-lt); }
    /* (pill "Bet now" CTA removed 2026-07-12 — slip + hedge finder carry it) */
    /* Badge sits just above the price line, not pinned to the cell's top
       edge (Dan, 2026-07-12: "too far up... looks weird"). */
    .ls-ev { position: absolute; top: 4px; left: 5px; font-size: 9px; font-weight: 800; color: var(--gold); line-height: 1; z-index: 2; }
    .gc-soccer-pill { position: relative; ; padding-bottom: 16px; position: relative; }
    .gc-soccer-pill.has-ev, .gc-ufc-pill.has-ev { border-color: rgba(212,175,55,.55); }
    .bet-pill.has-ev { border-color: rgba(212,175,55,.55); }
    .bet-pill {
      position: relative;
      background: var(--bg3); border: 1px solid var(--border);
      border-radius: 8px;
      /* Extra top padding so the book chip never overlaps the primary line;
         bottom padding reserves the pinned opener row. */
      padding: 22px 8px 16px;
      text-align: center; line-height: 1.2;
      min-height: 64px;
      display: flex; flex-direction: column; justify-content: center; gap: 3px;
    }
    .bet-pill.empty { color: var(--muted); font-size: 13px; opacity: 0.5; min-height: 64px; padding: 20px 8px 8px; }
    .bet-line  { font-size: 16px; font-weight: 800; color: var(--text); white-space: nowrap; }
    .bet-juice { font-size: 11px; color: var(--muted); white-space: nowrap; }
    /* Opener: SMALL, pinned to the pill's bottom edge, never moves. The
       pill reserves the space via padding-bottom so content can't shift. */
    .bet-open  { position: absolute; left: 0; right: 0; bottom: 4px; font-size: 9.5px; line-height: 1.1; color: #7c818a; white-space: nowrap; text-align: center; }
    .bet-open.op-toward { color: #5DCAA5; }
    .bet-open.op-away   { color: #EF9F27; }
    /* Spread / Total cells: invert visual hierarchy from the default pill.
       The point number ("+11.5", "O 214.5") is small + light; the odds
       ("-101", "+102") match the moneyline odds — slightly larger + bold. */
    .bet-line.bet-line-num   { font-size: 13px; font-weight: 600; color: #BBB; }
    .bet-juice.bet-juice-odds { font-size: 16px; font-weight: 800; color: var(--text); }

    /* Kalshi taker-fee tag.  Surfaces the per-contract fee that's already
       baked into the displayed American odds, so users know we're showing the
       price they'd actually pay (not the raw market). */
    .fee-tag {
      display: inline-block; font-size: 9.5px; font-weight: 700;
      color: var(--muted); letter-spacing: 0.2px;
      background: rgba(182,152,98,0.10);
      border: 1px solid rgba(182,152,98,0.25);
      border-radius: 3px; padding: 0 4px; margin-top: 2px;
      cursor: help;
    }
    /* Wording: the fee is ALREADY baked into the displayed American odds,
       so this tag is a transparency note (not an additional charge).
       Past wording "+1.4¢ fee" read as "plus 1.4¢ extra". "incl." makes
       inclusion explicit. */
    .fee-tag::before { content: "incl. "; }
    .fee-tag::after  { content: "¢ fee"; }

    /* Book chip pinned to the top-right corner — logo if we have one,
       tiny text abbrev (DK / FD / …) as fallback. */
    /* SCOPED TO THE CARD (2026-08-17). These override the site-wide chip in
       site-chrome.css to pin a chip into a pill's top-right corner, which is
       right inside a game card and wrong everywhere else: position:absolute
       plus pointer-events:none would tear the chip out of a player-prop side
       pill on a matchup page, where this file and the props styles now load
       together. Verified before scoping that every .book-chip on a rendered
       Line Shop board sits inside a .game-card, so nothing here changes. */
    .game-card .book-chip {
      position: absolute; top: 3px; right: 4px;
      display: inline-flex; align-items: center; justify-content: center;
      height: 16px; min-width: 16px;
      line-height: 1;
      pointer-events: none;
    }
    .game-card .book-chip-img {
      display: block;
      height: 16px; width: 16px;
      object-fit: contain;
      border-radius: 3px;
      background: var(--bg2);
    }
    .game-card .book-chip-text {
      font-size: 8.5px; font-weight: 800; letter-spacing: 0.3px;
      color: var(--gold);
      background: rgba(182,152,98,0.14);
      border: 1px solid rgba(182,152,98,0.40);
      border-radius: 3px; padding: 1px 4px;
      white-space: nowrap;
    }
    /* When an image is present, hide the text fallback */
    .game-card .book-chip .book-chip-img ~ .book-chip-text { display: none; }
    /* When onerror fires we add this class to show the text again */
    .game-card .book-chip.book-chip-fallback .book-chip-text { display: inline-block; }
    /* Tie-count badge: shown when 2+ books offer the best price.  Slightly
       stronger background + tighter padding so a single digit reads clearly
       in the 16px chip slot. */
    .game-card .book-chip-tie .book-chip-text {
      background: rgba(182,152,98,0.22);
      border-color: rgba(182,152,98,0.55);
      padding: 1px 5px;
      font-size: 9.5px;
    }

    /* Top-right: "More Odds" caret. */
    .gc-more {
      grid-area: more;
      display: flex; flex-direction: row; align-items: center;
      gap: 4px;
      /* Both children below carry their own size, so this only ever set the
         button's line box, and it was inheriting the body's 16px and
         reserving vertical space nothing drew into. Sized to match its
         larger child so the box fits the content. */
      font-size: 13px;
    }
    .more-odds { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.3px; }
    .expand-icon {
      font-size: 13px; color: var(--gold); transition: transform 0.2s;
    }
    .game-card.expanded .expand-icon { transform: rotate(180deg); }

    /* Mobile: tighten everything up; hide "More Odds" label.  Team col
       still wide enough for "LA Lakers" / "HOU Rockets" on one line; longer
       names wrap to 2 lines (handled by .gc-team-name overflow-wrap). */
    @media (max-width: 640px) {
      .gc-markets {
        grid-template-columns: minmax(64px, 88px) repeat(3, minmax(56px, 1fr));
        column-gap: 6px;
      }
      .gc-team-name { font-size: 11px; line-height: 1.1; letter-spacing: 0.1px; }
      .gc-team-at   { font-size: 8px; letter-spacing: 1.2px; padding: 1px 0; }
      .more-odds    { font-size: 9px; }   /* shrink to fit alongside caret on mobile */
      .gc-col-label { font-size: 9px; }
      .bet-line   { font-size: 14px; }
      .bet-line.bet-line-num    { font-size: 11px; }
      .bet-juice.bet-juice-odds { font-size: 14px; }
    }

    /* ── Soccer card (3-way ML / DK-style 3-pill + TNB row + alt totals) ── */
    /* Replaces the gc-markets grid for soccer rows.  Stacked sections instead
       of a 4-column grid; ML row has 3 pills horizontally (Home / Draw /
       Away), Total row has 2 (Over / Under), TNB row has 2 (Home / Away). */
    .gc-soccer { grid-area: markets; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
    .gc-soccer-section { display: flex; flex-direction: column; gap: 4px; }
    .gc-soccer-label {
      font-size: 10px; font-weight: 700; color: var(--muted);
      letter-spacing: 0.5px; text-transform: uppercase;
    }
    .gc-soccer-pills {
      display: grid;
      grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
      gap: 6px;
    }
    .gc-soccer-pills.cols-3 { --cols: 3; }
    .gc-soccer-pill {
      position: relative;
      background: var(--bg3); border: 1px solid var(--border);
      border-radius: 8px;
      padding: 22px 8px 16px;   /* bottom band reserved for the pinned opener */
      text-align: center;
      min-height: 64px;
      display: flex; flex-direction: column; justify-content: center; gap: 3px;
    }
    .gc-soccer-pill.empty { color: var(--muted); opacity: 0.5; min-height: 64px; }
    .gc-soccer-side {
      font-size: 12px; font-weight: 700; color: var(--text);
      letter-spacing: 0.2px; line-height: 1.1;
      white-space: normal; overflow-wrap: break-word;
    }
    .gc-soccer-side.draw { color: var(--muted); }
    .gc-soccer-odds {
      font-size: 16px; font-weight: 800; color: var(--text); white-space: nowrap;
    }
    .gc-soccer-line  {
      font-size: 11px; font-weight: 600; color: #BBB; white-space: nowrap;
    }@media (max-width: 640px) {
      .gc-soccer-side { font-size: 11px; }
      .gc-soccer-odds { font-size: 14px; }
      .gc-soccer-line { font-size: 10px; }
      .gc-soccer-pill { min-height: 60px; padding: 20px 6px 16px; }
  }


    /* ── UFC card (h2h-only — no spread/total columns) ──────────────────────
       Two-column body: fighter names on the left, single moneyline pill on
       the right.  Cells are placed explicitly by grid-column/grid-row in
       the template — no display:contents or auto-flow tricks, so the
       layout can't shift around when items are added or removed.
       Reference: DraftKings mobile UFC layout. */
    .gc-ufc {
      grid-area: markets;
      display: grid;
      grid-template-columns: 1fr minmax(0, 240px);
      grid-template-rows: auto auto auto auto;
      gap: 4px 12px;
      align-items: center;
      min-width: 0;
    }
    .gc-ufc-col-label {
      font-size: 11px; font-weight: 700; color: var(--muted);
      letter-spacing: 0.5px; text-transform: uppercase; text-align: center;
      margin-bottom: 2px;
    }
    .gc-ufc-name {
      font-size: 15px; font-weight: 700; color: var(--text);
      line-height: 1.2; padding: 8px 0;
      overflow-wrap: break-word;
    }
    /* No favorite tinting for UFC — both fighters get the same white text,
       since the favorite is implicit in the negative odds and "home/away"
       is arbitrary for fights (just the order The Odds API returned them). */
    .gc-ufc-vs {
      font-size: 12px; color: var(--muted);
      padding: 4px 0; text-transform: lowercase;
    }
    /* Wrapper around the pill keeps the pill stretched to the column width
       without forcing align-items:stretch on the whole grid (which would
       distort the name cells). */
    .gc-ufc-pill-wrap { display: block; }
    .gc-ufc-pill {
      position: relative;
      background: var(--bg3); border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 12px;
      text-align: center;
      min-height: 56px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 800; color: var(--text);
    ; padding-bottom: 16px; position: relative; }
    .gc-ufc-pill.empty { color: var(--muted); opacity: 0.5; }
    .gc-ufc-odds { white-space: nowrap; }@media (max-width: 640px) {
      .gc-ufc { grid-template-columns: 1fr minmax(0, 180px); }
      .gc-ufc-name { font-size: 14px; padding: 6px 0; }
      .gc-ufc-pill { font-size: 17px; padding: 12px 10px; min-height: 50px; }
      .gc-ufc-col-label { font-size: 10px; }
  }


    /* Totals slider (alternate lines) */
    .alt-totals-slider {
      display: flex; gap: 4px; align-items: center;
      padding: 6px 0 2px; margin-top: 2px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .alt-totals-stop {
      flex: 0 0 auto;
      background: var(--bg3); color: var(--muted);
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 11px; font-weight: 700;
      padding: 4px 8px;
      cursor: pointer;
      transition: all 0.12s;
    }
    .alt-totals-stop:hover { color: var(--text); border-color: var(--gold); }
    .alt-totals-stop.active {
      color: var(--gold); border-color: var(--gold);
      background: rgba(182,152,98,0.08);
    }
    /* Subtle marker on the consensus rung so it's identifiable even when
       the "All" button is the active selection (default mount state). */
    .alt-totals-stop.is-consensus:not(.active) {
      color: var(--text);
      border-style: dashed;
    }
    /* The "All" / reset button — emphasized slightly so it's an obvious
       deselect target without competing with the active gold highlight. */
    .alt-totals-stop.alt-line-all {
      font-style: italic;
    }

    /* ── Odds table container ── */
    .game-body { display: none; border-top: 1px solid var(--border); }
    .game-card.expanded .game-body { display: block; }

    /* ── Market tabs within card ── */
    .market-tabs {
      display: flex; gap: 0;
      border-bottom: 1px solid var(--border);
      padding: 0 18px;
      background: var(--bg3);
    }
    .market-tab {
      font-size: 12px; font-weight: 600; color: var(--muted);
      padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent;
      margin-bottom: -1px; transition: all 0.15s; letter-spacing: 0.3px;
      text-transform: uppercase;
    }
    .market-tab:hover { color: var(--text); }
    .market-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

    /* ── Full odds table (horizontally scrollable on mobile) ── */
    .odds-section { display: none; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .odds-section.active { display: block; }

    .full-odds-table {
      width: 100%; min-width: 420px; border-collapse: collapse;
      font-size: 13px;
      /* Fixed layout = every outcome column is the SAME width regardless of
         header length, so a long name like "New Zealand" can't widen its
         column and throw the table out of alignment. */
      table-layout: fixed;
    }
    .full-odds-table th {
      background: var(--bg3); color: var(--muted);
      font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
      padding: 8px 12px; text-align: right; white-space: normal;
      border-bottom: 1px solid var(--border);
      position: sticky;
    }
    .full-odds-table th:first-child {
      text-align: left; width: 128px;
      position: sticky; left: 0; z-index: 2;
      background: var(--bg3);
    }
    .full-odds-table td {
      padding: 9px 12px; border-bottom: 1px solid var(--border);
      text-align: right; white-space: nowrap;
    }
    .full-odds-table td:first-child {
      text-align: left; font-weight: 600; color: var(--text);
      background: var(--bg2); position: sticky; left: 0; z-index: 1;
    }
    .full-odds-table tr:last-child td { border-bottom: none; }
    .full-odds-table tr:hover td { background: var(--bg3); }
    .full-odds-table tr:hover td:first-child { background: var(--bg3); }
    /* Tap-to-add cells in the expanded all-books table (spreads + totals).
       Each book's cell adds that book's exact line to the Bet Slip. */
    .full-odds-table td.leg-cell { cursor: pointer; }
    .full-odds-table td.leg-cell:hover {
      background: #2a2a2a; box-shadow: inset 0 0 0 1px #3a3a3a;
    }
    .full-odds-table td.leg-cell.parlay-selected {
      background: #1f1a0d; box-shadow: inset 0 0 0 2px var(--gold);
    }

    .odds-pos { color: var(--yellow); font-weight: 600; }
    .odds-neg { color: var(--yellow); font-weight: 600; }
    .odds-default { color: var(--yellow); font-weight: 600; }
    .odds-best-cell { font-weight: 800; color: var(--green) !important; }
    .odds-na { color: var(--border); font-size: 12px; }

    /* Total line display */
    .total-line { font-size: 11px; color: var(--muted); }

    /* ── No data ── */
    .no-data {
      padding: 24px 18px; color: var(--muted); font-size: 13px;
      text-align: center; font-style: italic;
    }

    /* ── Odds-Change Pulse (#166) ──
       FD/DK-style movement flash: when a price changes between board
       refreshes (the 60s live tick especially) the cell flashes green
       (better price for that side's backer) or red (worse), fading over
       1.2s. Classes are applied per cell by applyOddsPulse() after each
       render. Light-mode tints live in theme-light.css. */
    @keyframes ogPulseUp   { 0% { background-color: rgba(0, 200, 150, 0.38); } 100% { background-color: transparent; } }
    @keyframes ogPulseDown { 0% { background-color: rgba(229, 72, 77, 0.36); } 100% { background-color: transparent; } }
    .odds-pulse-up   { animation: ogPulseUp 1.2s ease-out 1; }
    .odds-pulse-down { animation: ogPulseDown 1.2s ease-out 1; }@media (prefers-reduced-motion: reduce) {
      .odds-pulse-up, .odds-pulse-down { animation: none !important; }
  }
@media (min-width: 861px) {
      /* Expanded card spans the full grid row (2026-07-15): the book tables
         were squeezing into one ~640px column while neighbor cards sat
         idle beside them. Collapsing back returns it to its column. */
      .game-card.expanded { grid-column: 1 / -1; }
      /* At full row width a 3-column table gets comically wide cells; keep
         the per-book tables readable and centered inside the wide panel. */
      .game-card.expanded .full-odds-table { max-width: 860px; margin: 0 auto; }
  }