/* ==========================================================================
   NBA Game Detail -- /nba/game/<visitor>-<home>
   static/js/nba/nba-game-detail/gameDetailNBA*.js

   The page is the NFL game page's markup (#nfl-game-detail, .ngd-*), styled
   by css/nfl/nfl-game-detail.css, which index.html links on NBA documents
   for it. This sheet holds only what NBA adds: the route's view hides, the
   NBA box columns, the combo-market fold and the board's wider market
   track, the live prop progress, the play-by-play host and its palette, and
   the by-player view's three-column count (wide screens). The slate column
   is the shared one (core/style.css).
   Linked on NBA documents only. Phone sizes are 980-canvas px (the shell
   has no viewport meta), like the NFL sheet's <=1000px band.
   ========================================================================== */

/* ── 1. the route ──────────────────────────────────────────────────────
   gameDetailNBA.js stamps body.nba-gd-active while the page is up (and at
   module evaluation on a direct load). The NBA workbench still boots under
   it -- its board and #your-parlay-container are the add path -- so its
   chrome and the boot loader stand down here instead of being skipped.
   #content-section too (NBA batch 1): with every child hidden it was still a
   flex:1 item of .main-content, 128px of the 980 canvas beside the page
   until scheduleCore's route sync hid it -- the page jumped left on every
   cold load (CLS 0.055-0.058). gameDetailNFL hides it inline for the same
   reason; the route sync owns it again once the class goes. */
body.nba-gd-active #content-section,
body.nba-gd-active #schedule-container,
body.nba-gd-active #workbench-section,
body.nba-gd-active #player-data-section,
body.nba-gd-active #trend-sheets-container,
body.nba-gd-active #your-parlay-column,
body.nba-gd-active #suggested-legs-column,
body.nba-gd-active #player-lines-column,
body.nba-gd-active #loading-animation { display: none !important; }

/* ── 2. the shell and the slate rail ───────────────────────────────────
   #nba-gd-shell and the column (.nba-games-rail, its .gc cards and badges)
   are the shared game-page column's: css/core/style.css "GAME PAGES:
   SHARED PALETTE AND GAMES COLUMN" (founder 2026-10-15), with MLB's and
   NFL's. Nothing for them here: this sheet loads after that one, so a copy
   of the phone pass-through here would win over the shared wide grid. */

/* ── 3. the NBA box: MIN PTS RBS AST 3PM (+ FG wide), G/F/C colours ──── */
#nfl-game-detail .ngd-bx-id em[data-pos="G"] { color: var(--ngd-blue); }
#nfl-game-detail .ngd-bx-id em[data-pos="F"] { color: var(--ngd-green); }
#nfl-game-detail .ngd-bx-id em[data-pos="C"] { color: var(--ngd-amber); }
#nfl-game-detail .ngd-bx-dnp {
  margin: 0;
  padding: 0 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ngd-fg-mute);
}

@media (min-width: 1001px) {
  #nfl-game-detail .ngd-bx[data-kind="nba"] .ngd-bx-st { grid-template-columns: 46px 46px 46px 46px 46px 58px; }
}
@media (max-width: 1000px) {
  #nfl-game-detail .ngd-bx[data-kind="nba"] .ngd-bx-st { grid-template-columns: 76px 84px 84px 84px 84px; }
  #nfl-game-detail .ngd-bx-dnp { padding: 0 32px; font-size: 25px; }
}

/* ── 4. the combo-market fold on a player card ─────────────────────────
   "4 combo markets  PRA · P+R · P+A · R+A  ›", closed until tapped; the
   rows it opens are ordinary .ngd-mrow rows. */
#nfl-game-detail .ngd-combo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ngd-line-soft);
  color: var(--ngd-fg-dim);
  font: 600 13px/1.2 var(--ngd-sans);
  text-align: left;
  cursor: pointer;
}
#nfl-game-detail .ngd-combo:hover { color: var(--ngd-fg); }
#nfl-game-detail .ngd-combo-s {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ngd-fg-mute);
  font-weight: 500;
  font-size: 12px;
}
#nfl-game-detail .ngd-combo-c {
  font-style: normal;
  font-size: 16px;
  color: var(--ngd-fg-mute);
  transition: transform .15s ease;
}
#nfl-game-detail .ngd-combo[aria-expanded="true"] .ngd-combo-c { transform: rotate(90deg); }
#nfl-game-detail .ngd-combos[hidden] { display: none; }

@media (max-width: 1000px) {
  #nfl-game-detail .ngd-combo { gap: 14px; padding: 24px 28px; font-size: 30px; }
  #nfl-game-detail .ngd-combo-s { font-size: 24px; }
  #nfl-game-detail .ngd-combo-c { font-size: 40px; }
}

/* NBA market labels run to "PTS + RBS + AST": a wider market track, and the
   board floor that follows (886 + 32). The track list itself is the NFL
   sheet's (--ngd-cols, section 1), which reads --ngd-c-mk on this same
   element. Board tokens only: the phone never renders the board. */
#nfl-game-detail.ngd--nba { --ngd-c-mk: 116px; --ngd-board-min: 918px; }

/* ── 5. live prop progress (the Props tab once the game has tipped) ────
   The card's market row with the number so far against the line on the
   right ("9 / 24.5") and a thin fill under the label; accent once it has
   cleared, muted red when a final game fell short. */
#nfl-game-detail .nbagd-prog-row { grid-template-columns: minmax(0, 1fr) auto; }
#nfl-game-detail .nbagd-prog {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 4px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--ngd-line);
  overflow: hidden;
}
#nfl-game-detail .nbagd-prog > i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ngd-fg-dim);
}
#nfl-game-detail .nbagd-prog.is-hit > i { background: var(--ngd-accent); }
#nfl-game-detail .nbagd-prog.is-miss > i { background: var(--ngd-red); }
#nfl-game-detail .nbagd-progv {
  justify-self: end;
  white-space: nowrap;
  font-family: var(--ngd-mono);
  font-size: 13px;
  color: var(--ngd-fg-dim);
}
#nfl-game-detail .nbagd-progv b { font-weight: 700; color: var(--ngd-fg); }
#nfl-game-detail .nbagd-progv em { font-style: normal; color: var(--ngd-fg-mute); }
#nfl-game-detail .nbagd-progv.is-hit b { color: var(--ngd-accent); }
#nfl-game-detail .nbagd-progv.is-miss b { color: var(--ngd-red); }

@media (max-width: 1000px) {
  #nfl-game-detail .nbagd-prog { max-width: none; height: 8px; margin-top: 14px; border-radius: 6px; }
  #nfl-game-detail .nbagd-progv { font-size: 31px; }
}

/* ── 6. play-by-play (playByPlay.js) inside the page ───────────────────
   Its feed caps itself at 400px and scrolls inside on a wide screen; on
   this page it flows with the document like every other tab. */
#nfl-game-detail .ngd-pbp .pbp-feed { max-height: none; overflow: visible; }
/* Its colours are custom properties it falls back from to the retired
   tracker's greys (css/nba/play-by-play.css: #1a1d24 cards, #2a2d35 lines,
   #e0e0e0 text). Here they are the page's ink, as every game page's
   (founder 2026-10-15). Its muted lines are 11-14px body copy, so they take
   the dim tier, not the 3:1 mute one. */
#nfl-game-detail.ngd--nba .ngd-pbp {
  --surface: var(--ngd-ink-050);
  --surface-raised: var(--ngd-ink-100);
  --border: var(--ngd-line-soft);
  --border-subtle: var(--ngd-line-soft);
  --text-primary: var(--ngd-fg);
  --text-secondary: var(--ngd-fg-dim);
  --text-muted: var(--ngd-fg-dim);
}

/* ── 7. "By player" in three position columns (wide screens) ───────────
   gameDetailNBABoard cardsHtml marks the view .ngd-cardview--cols above
   1000px: Guards | Forwards | Centers side by side, each one stack of cards,
   and an empty position keeps its column (founder 2026-10-15). The phone
   keeps the stacked groups. The columns, the compact card and the head's
   "by points line" are the shared wide rules (nfl-game-detail.css section
   14.3, NFL's four columns); this sheet sets only NBA's count. #ngd-list is
   the ngd-list container there, and (1,2,0) here beats its (1,1,0). */
@media (min-width: 1001px) {
  /* NBA: three positions. One stack under 760px of list, the three side by
     side from there (each >= 245px, so a market row never wraps). */
  @container ngd-list (min-width: 520px) {
    #nfl-game-detail.ngd--nba .ngd-cardview--cols { grid-template-columns: minmax(0, 1fr); }
  }
  @container ngd-list (min-width: 760px) {
    #nfl-game-detail.ngd--nba .ngd-cardview--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  /* The combo fold on a compact card: the market rows' 12px inset, and its
     market list in the dim tier (the mute tier carries no readable text on
     these cards any more). */
  #nfl-game-detail .ngd-cardview--cols .ngd-combo { padding: 8px 12px; }
  #nfl-game-detail .ngd-cardview--cols .ngd-combo-s { color: var(--ngd-fg-dim); }
}

/* ── NBA batch 2: the cold document's scaffold (index.html includes
   scaffolds/_nba_game_boot.html on /nba/game) ─────────────────────────────
   The page's own shell, drawn by the server under the route's pre-paint hold
   (html.is-pb-game) and adopted by gameDetailNBA's ensureContainer, which
   drops data-pb-ssr. Both layouts are in it: the width shows its own. While
   it stands, the black boot pane stays down (index.html #nba-gd-init: the
   scaffold is the loading state), and a failed boot (PBBoot fail,
   body.pb-boot-failed) takes it down for the crawl content. Its back link is
   a real link (no script yet): dressed as the page's button. */
@media (max-width: 1000px) {
  #nfl-game-detail[data-pb-ssr] .pbngd-dk { display: none !important; }
}
@media (min-width: 1001px) {
  #nfl-game-detail[data-pb-ssr] .pbngd-ph { display: none !important; }
}
html body.pb-boot-failed #nba-gd-shell[data-pb-ssr] { display: none !important; }
/* System faces until the module repaints it: the scaffold's text would
   otherwise start the page's web fonts (~57 KB) while the scripts are still
   downloading, and DOMContentLoaded moved ~100 ms later on fast 4G. Under the
   loading blur the difference does not show. */
#nfl-game-detail[data-pb-ssr],
#nfl-game-detail[data-pb-ssr] * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }
#nfl-game-detail a.ngd-back { text-decoration: none; }
@media (max-width: 1000px) {
  #nfl-game-detail a.ngd-back { line-height: normal; }
}

/* Ghost price chips (gameDetailNBA sideBetsHtml / totalHtml, and this
   scaffold) while the game-lines feed is out are the shared rule now:
   nfl-game-detail.css section 3, "Ghost price chips" (NFL's scaffold draws
   them too), at the pregame header's weight so its dim "TOTAL" does not
   show through.

   The server scaffold's crests are bare chips with no <img> (see the
   template). The wide pregame header draws the crest flat, the logo on the
   card with no tile (nfl-game-detail.css section 3), which left two empty
   72px boxes under the blur until the module painted the logos: here they
   keep the flat tile instead (the header spec's dark-logo fallback, 14px
   radius), and only while the scaffold stands (data-pb-ssr goes when the
   module adopts it). */
@media (min-width: 1001px) {
  #nfl-game-detail[data-pb-ssr]:not(.is-live):not(.is-final):not(.is-stale) .ngd-crest {
    background: var(--ngd-ink-100);
    border: 1px solid var(--ngd-line-soft);
    border-radius: 14px;
  }
}