/* ==========================================================================
   NFL Game Detail -- /nfl/game/<visitor>-<home>
   Desktop stylesheet for the markup emitted by
   static/js/nfl/nfl-game-detail/{gameDetailNFL,gameDetailNFLBoard,
   gameDetailNFLMatchup}.js

   Every selector below is scoped under #nfl-game-detail. The SPA shell is
   shared with MLB and NBA, so a single unscoped rule would leak onto their
   routes; there is deliberately no :root block and no global element reset.

   Design language is ported from design-prototypes/patriots-seahawks-
   matchup.html: near-black surfaces, hairline borders, a mint accent, dense
   tabular numerics and letter-spaced uppercase eyebrow labels. The accent is
   read from the app's global theme token so the page re-themes with the rest
   of the site.

   File is plain ASCII by design -- the MLB game-detail sheet is
   double-encoded and this one must not repeat that.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS -- declared exactly once, on the page container.
   ========================================================================== */

#nfl-game-detail {
  /* Accent comes from the theme so the page follows the user's palette. */
  --ngd-accent:        rgb(var(--theme-accent-rgb, 0, 211, 189));
  --ngd-accent-90:     rgba(var(--theme-accent-rgb, 0, 211, 189), .90);
  --ngd-accent-70:     rgba(var(--theme-accent-rgb, 0, 211, 189), .70);
  --ngd-accent-40:     rgba(var(--theme-accent-rgb, 0, 211, 189), .40);
  --ngd-accent-28:     rgba(var(--theme-accent-rgb, 0, 211, 189), .28);
  --ngd-accent-14:     rgba(var(--theme-accent-rgb, 0, 211, 189), .14);
  --ngd-accent-08:     rgba(var(--theme-accent-rgb, 0, 211, 189), .08);
  --ngd-accent-ink:    #04231D;

  /* Surfaces */
  --ngd-ink-000:  #000000;
  --ngd-ink-050:  #0B0C0C;
  --ngd-ink-075:  #08090A;
  --ngd-ink-100:  #131515;
  --ngd-ink-150:  #1A1D1D;
  --ngd-line:      #1F2323;
  --ngd-line-soft: #171A1A;
  --ngd-line-hi:   #2C3232;

  /* Type */
  --ngd-fg:       #F2F5F4;
  --ngd-fg-dim:   #8A9391;
  --ngd-fg-mute:  #59615F;
  --ngd-fg-faint: #414847;

  /* Signal */
  --ngd-red:       #FF5C5C;
  --ngd-red-soft:  rgba(255, 92, 92, .13);
  --ngd-red-line:  rgba(255, 92, 92, .30);
  --ngd-amber:      #F5B544;
  --ngd-amber-soft: rgba(245, 181, 68, .12);
  --ngd-amber-line: rgba(245, 181, 68, .30);

  /* The two sides of a comparison bar. Left = visitor, right = home. */
  --ngd-side-l: var(--ngd-accent-70);
  --ngd-side-r: #4A7FBF;

  --ngd-sans: "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ngd-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
              monospace;

  --ngd-r:  14px;
  --ngd-r2: 10px;
  --ngd-r3: 7px;

  /* Board geometry. The track list is declared once and consumed by BOTH
     .ngd-thead and .ngd-row-main so a column can never drift between the
     header and the body. See section 6. */
  --ngd-gap: 12px;
  --ngd-pad: 16px;
  --ngd-c-add: 76px;
  /* Two flexible tracks, 2.2 : 1 -- the name column absorbs most of the
     slack but the defence cell keeps growing with it, so a wide screen does
     not leave a dead gap between the player and the first number. */
  /* 9 tracks: player | market | line | price | score | avg | L5 | defense | chev.
     Player and market used to share one 2.2fr track as a stacked cell; they are
     split so each can head its own sortable column, and the old track's width is
     split with them. */
  --ngd-cols: minmax(150px, 1.4fr) minmax(96px, 0.8fr) 104px 84px 104px 76px 68px minmax(240px, 1fr) 22px;
  --ngd-board-min: 1070px;
}


/* ==========================================================================
   2. CHASSIS
   ========================================================================== */

#nfl-game-detail {
  /* .main-content is a horizontal flex row; claim the full width of it. */
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 12px 20px 56px;

  display: flex;
  flex-direction: column;
  gap: 18px;

  font-family: var(--ngd-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ngd-fg);
  -webkit-font-smoothing: antialiased;
}

#nfl-game-detail *,
#nfl-game-detail *::before,
#nfl-game-detail *::after { box-sizing: border-box; }

#nfl-game-detail h3,
#nfl-game-detail h4,
#nfl-game-detail p,
#nfl-game-detail ul,
#nfl-game-detail li { margin: 0; padding: 0; }

#nfl-game-detail ul { list-style: none; }

#nfl-game-detail button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  letter-spacing: inherit;
}

#nfl-game-detail button:disabled { cursor: default; opacity: .55; }

#nfl-game-detail :focus-visible {
  outline: 2px solid var(--ngd-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Every numeric cell in the app carries .num -- tabular figures are what
   keeps the price and score columns from wobbling row to row. */
#nfl-game-detail .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* [hidden] has to be re-asserted: several of the elements it lands on are
   given an explicit display below, which out-ranks the UA sheet. */
#nfl-game-detail [hidden] { display: none !important; }

/* ...and the ROOT needs its own rule, not just the descendant one above.
   This element is a child of .main-content, which is a horizontal flex row.
   The display:flex it is given up top beats the UA `[hidden]{display:none}`,
   so a hidden-but-present container still claims `flex: 1 1 auto` and
   squeezes the workbench (measured: #content-section 1600px -> 515px).
   gameDetailNFL.js now removes the node off-route so this should never
   fire; it stays as a backstop because the failure is silent and severe. */
#nfl-game-detail[hidden] { display: none !important; }

/* ---- top bar ---- */

#nfl-game-detail .ngd-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
}

/* Matches the MLB research sub-pages' back link (mlb-pitcher-matchups.css
   .pm-back and its Home Run Zone twin): a bare accent-coloured arrow + label
   rather than a bordered pill. */
#nfl-game-detail .ngd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 0;
  background: transparent;
  border: none;
  color: var(--ngd-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
#nfl-game-detail .ngd-back:hover { transform: translateX(-1px); }
#nfl-game-detail .ngd-back svg { flex: none; }
/* Wide: the one back-link recipe every NFL page shares (player dashboard
   .pbpd-back-btn, trends .t2-back, defensive rankings .dr-back — founder
   2026-09-07): 15px/700 label, 18px arrow, 8px gap, 28px between the nav
   and the link and 12px between the link and what follows. The root is a
   flex column padded 12px on top with an 18px gap, so the row drops its
   34px min-height, carries 6px on top (12 + 6 = 18, plus the 10px the
   root sits under the nav = 28) and pulls the 18px gap down to 12 with a
   trailing -6px. The phone block (max-width:1000px) keeps its 110px tap
   row untouched. */
@media (min-width: 1001px) {
  #nfl-game-detail .ngd-topbar { min-height: 0; margin: 6px 0 -6px; }
  #nfl-game-detail .ngd-back {
    gap: 8px;
    padding: 6px 8px 6px 0;
    font-size: 15px;
    line-height: 1.2;
  }
  #nfl-game-detail .ngd-back svg { width: 18px; height: 18px; }
}

/* ---- body / props column ---- */

#nfl-game-detail .ngd-body {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

#nfl-game-detail .ngd-props {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

#nfl-game-detail #ngd-list { min-width: 0; }

#nfl-game-detail #ngd-context {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#nfl-game-detail #ngd-context:empty { display: none; }

/* ---- placeholders ---- */

#nfl-game-detail .ngd-loading,
#nfl-game-detail .ngd-empty {
  padding: 40px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ngd-fg-mute);
  background: var(--ngd-ink-050);
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r);
}

#nfl-game-detail .ngd-loading { letter-spacing: .01em; }


/* ==========================================================================
   3. GAME CARD
   ========================================================================== */

#nfl-game-detail .ngd-gamecard {
  background: var(--ngd-ink-050);
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r);
}

#nfl-game-detail .ngd-gc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 20px 26px 22px;
}

#nfl-game-detail .ngd-team {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
#nfl-game-detail .ngd-team-home {
  flex-direction: row-reverse;
  text-align: right;
}

#nfl-game-detail .ngd-crest {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ngd-line);
  /* --c is the team's primary colour, dimmed to a chip rather than a slab. */
  background-color: var(--c, #1f2a37);
  background-image: linear-gradient(158deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .74));
  overflow: visible;
}
#nfl-game-detail .ngd-crest img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
#nfl-game-detail .ngd-crest b {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ngd-fg);
}

#nfl-game-detail .ngd-team-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#nfl-game-detail .ngd-team-city {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ngd-fg-mute);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-team-name {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.06;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- wide-screen game card: prices per side, total in the middle ----
   The mockup folds each side's own spread and moneyline in under its team and
   keeps the total (which belongs to neither) in the centre column. All of this
   is >1000px only; the phone card is unchanged and carries no prices. */

#nfl-game-detail .ngd-gc-bets {
  display: flex;
  gap: 8px;
  min-width: 0;
  margin-top: 11px;
}
/* Home reads right-to-left, so its prices hug the name above them. */
#nfl-game-detail .ngd-team-home .ngd-gc-bets { justify-content: flex-end; }

/* One price chip. <b> is the market (a spread, "ML", "Over"), <em> its odds --
   the same two-part shape the board's price pill uses, so the page has one
   vocabulary for "a number you can bet". */
#nfl-game-detail .ngd-bet {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  background: var(--ngd-ink-100);
  border: 1px solid var(--ngd-line-soft);
  border-radius: 11px;
  white-space: nowrap;
}
#nfl-game-detail .ngd-bet b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
#nfl-game-detail .ngd-bet em {
  font-style: normal;
  font-family: var(--ngd-mono);
  font-size: 10px;
  color: var(--ngd-accent);
}

#nfl-game-detail .ngd-gc-tot { margin-top: 10px; }
#nfl-game-detail .ngd-gc-tot-l {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ngd-fg-mute);
  line-height: 1.2;
}
#nfl-game-detail .ngd-gc-tot-l b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ngd-fg);
  font-variant-numeric: tabular-nums;
  margin-left: 5px;
}
#nfl-game-detail .ngd-gc-tot-l.is-empty {
  letter-spacing: .04em;
  text-transform: none;
  font-size: 11.5px;
}
#nfl-game-detail .ngd-gc-tot-o {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 7px;
}



#nfl-game-detail .ngd-gc-mid {
  text-align: center;
  min-width: 0;
  padding: 0 4px;
}
#nfl-game-detail .ngd-gc-at {
  font-size: 14px;
  color: var(--ngd-fg-mute);
  line-height: 1.1;
}
#nfl-game-detail .ngd-gc-meta {
  font-size: 11.5px;
  color: var(--ngd-fg-mute);
  line-height: 1.3;
  margin-top: 5px;
  white-space: nowrap;
}

/* ---- wide screens: the crest is the full height of the block ----
   The old 44px chip left the card mostly air once the prices moved in beside
   it. Sized to stand as tall as city + name + prices together, so the crest
   sets the card's height instead of floating in the middle of it. */
@media (min-width: 1001px) {
  /* The crest is TALLER than city + name + prices (152 vs ~123), so it — not
     the text — sets the row height, and the card's padding comes down to match
     so the tile reads as spanning the block rather than floating inside it. */
  #nfl-game-detail .ngd-gc-head { padding: 12px 18px; }
  #nfl-game-detail .ngd-team { gap: 18px; }
  #nfl-game-detail .ngd-crest {
    width: 122px;
    height: 122px;
    border-radius: 21px;
  }
  /* 84% of the tile: the logo carries the identity here, so it is given the
     tile rather than sitting as a chip in the middle of one. */
  #nfl-game-detail .ngd-crest img { width: 102px; height: 102px; }
  #nfl-game-detail .ngd-team-name { font-size: 25px; }
  #nfl-game-detail .ngd-team-city { font-size: 9px; }

  /* The middle column carries the same weight of information as either side --
     a total is a market exactly like a spread -- but every part of it was set
     two or three steps smaller than the blocks flanking it (14 / 11.5 / 9.5 and
     a 15px number against a 31px club name), so it read as a caption between
     two headlines. Scaled to sit WITH them: the total becomes a headline number
     in its own right and its prices match the size of the ones either side. */
  #nfl-game-detail .ngd-gc-mid { padding: 0 15px; }
  /* The @ and the kickoff grow into the slack that was sitting under them as
     .ngd-gc-tot's top margin, so the block reads bigger at the same height. */
  #nfl-game-detail .ngd-gc-at { font-size: 17px; }
  #nfl-game-detail .ngd-gc-meta { font-size: 14px; margin-top: 5px; }
  #nfl-game-detail .ngd-gc-tot { margin-top: 6px; }
  /* "TOTAL" and the number are set to nearly the same glyph height, the number
     only a little taller -- 13 and 18 is a 1.38x ratio, where 9 and 20 was
     2.2x and read as a caption bolted to a headline. Both use the same face,
     so the font-size ratio IS the cap-height ratio. */
  #nfl-game-detail .ngd-gc-tot-l { font-size: 13px; letter-spacing: .12em; }
  #nfl-game-detail .ngd-gc-tot-l b { font-size: 18px; margin-left: 9px; }
  #nfl-game-detail .ngd-gc-tot-o { gap: 10px; margin-top: 10px; }
  #nfl-game-detail .ngd-gc-tot-o .ngd-bet { padding: 8px 17px; }
  #nfl-game-detail .ngd-gc-tot-o .ngd-bet b { font-size: 14px; }
  #nfl-game-detail .ngd-gc-tot-o .ngd-bet em { font-size: 11px; }
}

/* ---- market strip ---- */








/* ==========================================================================
   4. CONTROLS
   ========================================================================== */

#nfl-game-detail .ngd-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#nfl-game-detail .ngd-group {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--ngd-ink-050);
  border: 1px solid var(--ngd-line-soft);
  border-radius: 9px;
}

#nfl-game-detail .ngd-group button {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ngd-fg-mute);
  border-radius: 6px;
  white-space: nowrap;
  transition: color .14s, background .14s;
}
#nfl-game-detail .ngd-group button:hover { color: var(--ngd-fg-dim); }
#nfl-game-detail .ngd-group button.is-on {
  background: var(--ngd-ink-150);
  color: var(--ngd-fg);
}
/* The side switch is the one control that changes what the numbers mean, so
   it gets the accent rather than plain white. */
#nfl-game-detail .ngd-group[data-group="side"] button.is-on { color: var(--ngd-accent); }


/* ==========================================================================
   5. BOARD -- shell, header row, legend
   ========================================================================== */

#nfl-game-detail .ngd-board {
  background: var(--ngd-ink-050);
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r);
  /* The board is the one wide surface on the page. It scrolls inside itself
     rather than being clipped, and never widens the document. */
  overflow-x: auto;
  overflow-y: visible;
}

#nfl-game-detail .ngd-thead,
#nfl-game-detail .ngd-rows,
#nfl-game-detail .ngd-legend { min-width: var(--ngd-board-min); }

#nfl-game-detail .ngd-thead {
  display: grid;
  grid-template-columns: var(--ngd-c-add) var(--ngd-cols);
  gap: var(--ngd-gap);
  align-items: center;
  padding: 11px var(--ngd-pad);
  border-bottom: 1px solid var(--ngd-line);
}

#nfl-game-detail .ngd-th {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ngd-fg-mute);
  transition: color .13s;
  min-width: 0;
}
#nfl-game-detail .ngd-th:hover { color: var(--ngd-fg-dim); }
#nfl-game-detail .ngd-th.is-sorted { color: var(--ngd-fg); }

#nfl-game-detail .ngd-th.ta-r { flex-direction: row-reverse; text-align: right; }
#nfl-game-detail .ngd-th.ta-c { justify-content: center; text-align: center; }

/* The player column is offset by the width of the team stripe so its header
   sits over the name, not over the stripe. */
#nfl-game-detail .ngd-th-pl { padding-left: 13px; }
#nfl-game-detail .ngd-th-def { padding-right: 2px; }

#nfl-game-detail .ngd-dir {
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  color: var(--ngd-accent);
}

/* The Avg header shares data-sort="player" with the name column, so both
   light up together. Keeping it a shade quieter stops it reading as a second
   active sort. */
#nfl-game-detail .ngd-th-avg { letter-spacing: .11em; }
#nfl-game-detail .ngd-th-avg.is-sorted { color: var(--ngd-fg-dim); }

/* ---- legend ---- */

#nfl-game-detail .ngd-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 11px var(--ngd-pad);
  border-top: 1px solid var(--ngd-line-soft);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ngd-fg-mute);
}
#nfl-game-detail .ngd-legend b { color: var(--ngd-fg-dim); font-weight: 600; }

/* The prose items share the slack; the swatches never shrink. */
#nfl-game-detail .ngd-legend > span:not(.ngd-lg):not(.ngd-legend-season) {
  flex: 1 1 280px;
  min-width: 220px;
}

/* Provenance caveat -- which season the columns actually describe. It gets
   its own line and an amber cast because it qualifies every number above. */
#nfl-game-detail .ngd-legend-season {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px dashed var(--ngd-line);
  color: var(--ngd-amber);
}

#nfl-game-detail .ngd-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--ngd-fg-dim);
}
#nfl-game-detail .ngd-lg i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--ngd-tier, var(--ngd-fg-faint));
}

/* ---- tier palette (shared by .ngd-score and the legend) ---- */

#nfl-game-detail [data-tier="GREEN"] { --ngd-tier: var(--ngd-accent); }
#nfl-game-detail [data-tier="AMBER"] { --ngd-tier: var(--ngd-amber); }
#nfl-game-detail [data-tier="RED"]   { --ngd-tier: var(--ngd-red); }


/* ==========================================================================
   6. BOARD ROWS

   Column alignment contract: .ngd-thead lays out
       [add] + var(--ngd-cols)
   and a row lays out [add] + [main], where .ngd-row-main re-lays
       var(--ngd-cols)
   inside its own track. Because the gap is identical at both levels the
   total gutter count matches (1 + 7 == 8), so the fr tracks resolve to the
   same widths and a column cannot drift.
   ========================================================================== */

#nfl-game-detail .ngd-rows { min-width: var(--ngd-board-min); }

#nfl-game-detail .ngd-row {
  display: grid;
  grid-template-columns: var(--ngd-c-add) minmax(0, 1fr);
  column-gap: var(--ngd-gap);
  align-items: center;
  padding: 0 var(--ngd-pad);
  border-bottom: 1px solid var(--ngd-line-soft);
  transition: background .14s;
}
#nfl-game-detail .ngd-row:last-child { border-bottom: 0; }
#nfl-game-detail .ngd-row:hover { background: var(--ngd-ink-075); }
#nfl-game-detail .ngd-row.is-open { background: var(--ngd-ink-100); }

/* The expanded panel is a third grid item and always spans the full row. */
#nfl-game-detail .ngd-row > .ngd-detail { grid-column: 1 / -1; }

/* ---- add-to-slip cell ---- */

#nfl-game-detail .ngd-addcell {
  display: flex;
  align-items: center;
  align-self: stretch;
}

#nfl-game-detail .ngd-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ngd-fg-dim);
  white-space: nowrap;
  border: 1px solid var(--ngd-line);
  border-radius: 8px;
  transition: color .14s, background .14s, border-color .14s;
}
#nfl-game-detail .ngd-add:hover {
  color: var(--ngd-fg);
  border-color: var(--ngd-accent-40);
  background: var(--ngd-ink-150);
}
#nfl-game-detail .ngd-add.is-on {
  background: var(--ngd-accent);
  border-color: var(--ngd-accent);
  color: var(--ngd-accent-ink);
}
#nfl-game-detail .ngd-add.is-on:hover {
  background: var(--ngd-accent-90);
  border-color: var(--ngd-accent-90);
  color: var(--ngd-accent-ink);
}
#nfl-game-detail .ngd-add-t { line-height: 1.2; }

/* ---- the clickable row ---- */

#nfl-game-detail .ngd-row-main {
  position: relative;
  display: grid;
  grid-template-columns: var(--ngd-cols);
  column-gap: var(--ngd-gap);
  align-items: center;
  min-width: 0;
  padding: 13px 0;
}

#nfl-game-detail .ngd-pl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-left: 13px;
}
#nfl-game-detail .ngd-pname {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-pteam {
  font-size: 11.5px;
  color: var(--ngd-fg-mute);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Its own column now, so it sits on the row's centre line rather than under
   the name. */
#nfl-game-detail .ngd-pmk {
  font-size: 12.5px;
  color: var(--ngd-fg-dim);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-row-main:hover .ngd-pname { color: var(--ngd-accent); }

#nfl-game-detail .ngd-pline {
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
/* Empty <i>: a mint pip that says "this is not the main number". */
#nfl-game-detail .ngd-alt {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ngd-accent);
  margin-left: 6px;
  vertical-align: 3px;
}

#nfl-game-detail .ngd-pprice {
  text-align: right;
  font-family: var(--ngd-mono);
  font-size: 13px;
  color: var(--ngd-fg-dim);
  white-space: nowrap;
}

/* ---- score cell ---- */

#nfl-game-detail .ngd-pscore {
  display: flex;
  justify-content: flex-end;
}

#nfl-game-detail .ngd-score {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  color: var(--ngd-tier, var(--ngd-fg-dim));
  font-variant-numeric: tabular-nums;
}
#nfl-game-detail .ngd-score b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}
/* One element does both the track and the fill, driven by --w. */
#nfl-game-detail .ngd-score i {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background-image: linear-gradient(to right,
    currentColor 0, currentColor var(--w, 0%),
    var(--ngd-ink-150) var(--w, 0%), var(--ngd-ink-150) 100%);
}

/* Absence must not read as a zero: no bar, no tier colour, muted glyph. */
#nfl-game-detail .ngd-score.is-none,
#nfl-game-detail .ngd-def.is-none {
  color: var(--ngd-fg-faint);
  font-weight: 500;
  /* no tracking: it turns the "--" placeholder into two loose hyphens */
  letter-spacing: 0;
}
#nfl-game-detail .ngd-score.is-none { font-size: 13px; }

/* ---- average, hit rate ---- */

#nfl-game-detail .ngd-pavg {
  text-align: right;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ngd-fg-dim);
}
#nfl-game-detail .ngd-pavg.is-strong  { color: var(--ngd-accent); }
#nfl-game-detail .ngd-pavg.is-lean    { color: var(--ngd-accent-70); }
#nfl-game-detail .ngd-pavg.is-neutral { color: var(--ngd-fg-dim); }
#nfl-game-detail .ngd-pavg.is-soft    { color: var(--ngd-amber); }
#nfl-game-detail .ngd-pavg.is-against { color: var(--ngd-red); }

/* Holds the L5 strip now rather than an "x/10" number, so it centres a flex
   child instead of text. */
#nfl-game-detail .ngd-phit {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ngd-fg-dim);
}
#nfl-game-detail .ngd-l5-none { color: var(--ngd-fg-mute); }

/* ---- opponent-defense cell ---- */

#nfl-game-detail .ngd-pdef { min-width: 0; }

/* The bar length is SOFTNESS (32nd fills the track, 1st barely registers),
   so the colour and the length say the same thing and neither can be read
   as a quality score on its own. Both are deliberately low-contrast: this
   is a supporting column, not the headline. */
#nfl-game-detail .ngd-def {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  --ngd-def-c: #3E4746;
}
#nfl-game-detail .ngd-def.is-soft  { --ngd-def-c: var(--ngd-accent-70); }
#nfl-game-detail .ngd-def.is-tough { --ngd-def-c: rgba(255, 92, 92, .62); }

#nfl-game-detail .ngd-def-t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
#nfl-game-detail .ngd-def-l {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  color: var(--ngd-fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-def-t b {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--ngd-fg);
}
/* Retained for the expanded/raw variant of the cell: the compact board cell
   prints the adjusted RANK only, because the raw allowance did not produce
   it and the two disagree often enough to matter. */
#nfl-game-detail .ngd-def-v {
  flex: none;
  font-family: var(--ngd-mono);
  font-size: 10.5px;
  color: var(--ngd-fg-faint);
}
#nfl-game-detail .ngd-def-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--ngd-ink-150);
}
#nfl-game-detail .ngd-def-bar i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 2px;
  background: var(--ngd-def-c);
}

/* A rank we do not have gets a dash, not an empty bar. */
#nfl-game-detail .ngd-def.is-none {
  display: inline-block;
  font-size: 13px;
}

/* ---- chevron ---- */

#nfl-game-detail .ngd-chev {
  justify-self: end;
  font-size: 17px;
  line-height: 1;
  color: var(--ngd-fg-faint);
  transition: transform .2s, color .2s;
}
#nfl-game-detail .ngd-row.is-open .ngd-chev {
  transform: rotate(90deg);
  color: var(--ngd-accent);
}


/* ==========================================================================
   7. EXPANDED DETAIL
   ========================================================================== */

#nfl-game-detail .ngd-detail {
  border-top: 1px solid var(--ngd-line-soft);
  background: var(--ngd-ink-075);
  margin: 0 calc(var(--ngd-pad) * -1);
  padding: 0 var(--ngd-pad) 20px;
  animation: ngdFade .2s ease;
}

@keyframes ngdFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* One flat grid, two equal columns: game log | ladder, then opportunity |
   performance, then context across the full width. .ngd-why is display:contents
   HERE ONLY so its arms become items of this grid -- the phone sheet renders
   the same markup and still needs it as a real flex column. */
#nfl-game-detail .ngd-detail-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding-top: 18px;
  align-items: start;
}
#nfl-game-detail .ngd-detail-in > .ngd-why { display: contents; }

#nfl-game-detail .ngd-detail-in > .ngd-logwrap,
#nfl-game-detail .ngd-detail-in .ngd-arm-opp { grid-column: 1; }
#nfl-game-detail .ngd-detail-in > .ngd-ladder,
#nfl-game-detail .ngd-detail-in .ngd-arm-perf { grid-column: 2; }
#nfl-game-detail .ngd-detail-in .ngd-arm-ctx,
#nfl-game-detail .ngd-detail-in .ngd-notice,
#nfl-game-detail .ngd-detail-in .ngd-why-stamp,
#nfl-game-detail .ngd-detail-in > .ngd-books { grid-column: 1 / -1; }

/* The log and the ladder get the same panel chrome as an arm, so the four
   blocks read as one set. */
#nfl-game-detail .ngd-detail-in > .ngd-logwrap,
#nfl-game-detail .ngd-detail-in > .ngd-ladder {
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r2);
  background: var(--ngd-ink-050);
  padding: 11px 13px 12px;
  min-width: 0;
}

#nfl-game-detail .ngd-sub-h {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ngd-fg-mute);
}
#nfl-game-detail .ngd-sub-h span {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ngd-fg-faint);
}

/* ---- game log ---- */

/* preserveAspectRatio="none" means the bars stretch to whatever width they
   are given; capped so a 20-game season does not become slabs. */
#nfl-game-detail .ngd-logwrap { min-width: 0; }
#nfl-game-detail .ngd-log {
  display: block;
  width: 100%;
  max-width: 520px;
  height: 58px;
}
/* Uniform scaling, so the tick text is not stretched by the viewBox. */
#nfl-game-detail .ngd-log.has-axes {
  max-width: none;
  height: auto;
}
#nfl-game-detail .ngd-log text {
  fill: var(--ngd-fg-mute);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
#nfl-game-detail .ngd-log .ngd-log-ttl {
  fill: var(--ngd-fg-faint);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#nfl-game-detail .ngd-log .ngd-log-lbl {
  fill: var(--ngd-fg-dim);
  font-weight: 600;
}
#nfl-game-detail .ngd-log rect.is-hit  { fill: var(--ngd-accent-40); }
#nfl-game-detail .ngd-log rect.is-miss { fill: rgba(255, 92, 92, .26); }
#nfl-game-detail .ngd-log line.ngd-log-line {
  stroke: rgba(242, 245, 244, .30);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

/* ---- book comparison ---- */

#nfl-game-detail .ngd-books { min-width: 0; }
#nfl-game-detail .ngd-books-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#nfl-game-detail .ngd-book {
  flex: 0 1 148px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 9px;
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r3);
  background: var(--ngd-ink-050);
}
#nfl-game-detail .ngd-book span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ngd-fg-mute);
}
#nfl-game-detail .ngd-book b {
  font-family: var(--ngd-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ngd-fg-dim);
}
#nfl-game-detail .ngd-book.is-best {
  border-color: var(--ngd-accent-28);
  background: var(--ngd-accent-08);
}
#nfl-game-detail .ngd-book.is-best b { color: var(--ngd-accent); }

/* ---- ladder ---- */

#nfl-game-detail .ngd-ladder { min-width: 0; }

#nfl-game-detail .ngd-rungs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}

#nfl-game-detail .ngd-rung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 8px;
  background: var(--ngd-ink-050);
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r3);
  transition: background .14s, border-color .14s;
}
#nfl-game-detail .ngd-rung:hover {
  background: var(--ngd-ink-100);
  border-color: var(--ngd-line-hi);
}
#nfl-game-detail .ngd-rung.is-on {
  background: var(--ngd-accent-08);
  border-color: var(--ngd-accent-40);
}

#nfl-game-detail .ngd-rung-l {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.15;
}
#nfl-game-detail .ngd-rung-p {
  font-family: var(--ngd-mono);
  font-size: 10.5px;
  color: var(--ngd-fg-mute);
  line-height: 1.2;
}
#nfl-game-detail .ngd-rung-tag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ngd-fg-faint);
}
#nfl-game-detail .ngd-rung.is-main .ngd-rung-tag { color: var(--ngd-fg-mute); }

/* ---- why panel ---- */

#nfl-game-detail .ngd-why {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#nfl-game-detail .ngd-arm {
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r2);
  background: var(--ngd-ink-050);
  padding: 11px 13px 12px;
}

#nfl-game-detail .ngd-arm-h {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
#nfl-game-detail .ngd-arm-h b {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ngd-fg-dim);
}
#nfl-game-detail .ngd-arm-h em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--ngd-fg-faint);
}
#nfl-game-detail .ngd-arm-s {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ngd-accent);
  background: var(--ngd-accent-08);
  border: 1px solid var(--ngd-accent-28);
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.3;
}

#nfl-game-detail .ngd-arm ul {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 9px;
}
#nfl-game-detail .ngd-arm li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 6px 0 6px 9px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--ngd-line-soft);
  font-size: 12px;
}
#nfl-game-detail .ngd-arm li:last-child { border-bottom: 0; }

#nfl-game-detail .ngd-why-l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ngd-fg-mute);
}
#nfl-game-detail .ngd-why-t {
  color: var(--ngd-fg-dim);
  line-height: 1.5;
}

/* Sentences that actually move the number are marked; the rest are context. */
#nfl-game-detail .ngd-arm li.is-moving {
  border-left-color: var(--ngd-accent-40);
  background: var(--ngd-accent-08);
}
#nfl-game-detail .ngd-arm li.is-moving .ngd-why-l { color: var(--ngd-accent); }
#nfl-game-detail .ngd-arm li.is-moving .ngd-why-t { color: var(--ngd-fg); }

#nfl-game-detail .ngd-arm-ctx { background: transparent; }
#nfl-game-detail .ngd-arm-ctx .ngd-why-t { color: var(--ngd-fg-mute); }

/* Context runs as one horizontal strip rather than a stack of rows: each item
   is a label-then-text pair, and the provenance stamp rides at the far right
   of the same line. Only inside the desktop detail grid -- the phone sheet
   keeps the stacked list, where there is no width to run them side by side. */
#nfl-game-detail .ngd-detail-in .ngd-ctx-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
#nfl-game-detail .ngd-detail-in .ngd-ctx-row ul {
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 22px;
  min-width: 0;
}
#nfl-game-detail .ngd-detail-in .ngd-arm-ctx li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 0;
  border-left: 0;
  border-bottom: 0;
  min-width: 0;
}
#nfl-game-detail .ngd-detail-in .ngd-ctx-row .ngd-why-stamp {
  margin-left: auto;
  white-space: nowrap;
  flex: none;
}

#nfl-game-detail .ngd-notice {
  font-size: 11px;
  line-height: 1.55;
  color: var(--ngd-amber);
  background: var(--ngd-amber-soft);
  border: 1px solid var(--ngd-amber-line);
  border-radius: var(--ngd-r3);
  padding: 8px 11px;
}

/* "Based on the <year> season." -- a quieter provenance line than .ngd-notice
   because it qualifies the prose rather than warning about it. */
#nfl-game-detail .ngd-why-stamp {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ngd-fg-faint);
  padding-left: 2px;
}


/* ==========================================================================
   8. BY-PLAYER CARD VIEW
   ========================================================================== */

#nfl-game-detail .ngd-cardview {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#nfl-game-detail .ngd-pgroup { min-width: 0; }

#nfl-game-detail .ngd-pgroup-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ngd-fg-mute);
}

#nfl-game-detail .ngd-pcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
  align-items: start;
}

#nfl-game-detail .ngd-pcard {
  background: var(--ngd-ink-050);
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r);
  transition: border-color .14s;
  min-width: 0;
}
#nfl-game-detail .ngd-pcard:hover { border-color: var(--ngd-line-hi); }

#nfl-game-detail .ngd-pcard-h {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  min-width: 0;
}

#nfl-game-detail .ngd-pcard-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#nfl-game-detail .ngd-pcard-n {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: color .14s;
}
#nfl-game-detail .ngd-pcard-n:hover { color: var(--ngd-accent); }
#nfl-game-detail .ngd-pcard-m {
  font-size: 11px;
  color: var(--ngd-fg-mute);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nfl-game-detail .ngd-oppchip {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--ngd-line);
  color: var(--ngd-fg-dim);
  white-space: nowrap;
}
#nfl-game-detail .ngd-oppchip.is-soft {
  border-color: var(--ngd-accent-28);
  background: var(--ngd-accent-08);
  color: var(--ngd-accent);
}
#nfl-game-detail .ngd-oppchip.is-tough {
  border-color: var(--ngd-red-line);
  background: var(--ngd-red-soft);
  color: var(--ngd-red);
}

#nfl-game-detail .ngd-mkts { border-top: 1px solid var(--ngd-line-soft); }

#nfl-game-detail .ngd-mrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px 96px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  border-bottom: 1px solid var(--ngd-line-soft);
  transition: background .14s;
}
#nfl-game-detail .ngd-mrow:last-child { border-bottom: 0; }
#nfl-game-detail .ngd-mrow:hover { background: var(--ngd-ink-075); }
#nfl-game-detail .ngd-mrow.is-open { background: var(--ngd-ink-100); }

/* The detail panel opens inside a card row too, and spans it. */
#nfl-game-detail .ngd-mrow > .ngd-detail {
  grid-column: 1 / -1;
  margin: 0 -12px 0 -14px;
  padding: 0 14px 16px;
}
/* A player card is ~340px wide, so the detail's two-column split and its
   fixed label gutter both have to collapse inside one. */
#nfl-game-detail .ngd-mrow > .ngd-detail .ngd-detail-in {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
#nfl-game-detail .ngd-mrow > .ngd-detail .ngd-arm li {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
#nfl-game-detail .ngd-mrow > .ngd-detail .ngd-book { flex: 1 1 120px; }

#nfl-game-detail .ngd-mrow-l {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 6px 4px 0;
}
#nfl-game-detail .ngd-mrow-n {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ngd-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-mrow-l:hover .ngd-mrow-n { color: var(--ngd-fg); }
#nfl-game-detail .ngd-mrow-sub {
  font-size: 10.5px;
  color: var(--ngd-fg-mute);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nfl-game-detail .ngd-mrow-score {
  display: flex;
  justify-content: flex-end;
}
#nfl-game-detail .ngd-mrow-score .ngd-score i { width: 44px; }

#nfl-game-detail .ngd-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 7px;
  border: 1px solid var(--ngd-line);
  border-radius: var(--ngd-r3);
  transition: background .14s, border-color .14s, color .14s;
}
#nfl-game-detail .ngd-pill:hover {
  border-color: var(--ngd-accent-40);
  background: var(--ngd-ink-150);
}
#nfl-game-detail .ngd-pill b {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#nfl-game-detail .ngd-pill em {
  font-style: normal;
  font-family: var(--ngd-mono);
  font-size: 10.5px;
  line-height: 1.15;
  color: var(--ngd-fg-mute);
}
#nfl-game-detail .ngd-pill.is-alt::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ngd-accent);
}
#nfl-game-detail .ngd-pill.is-on {
  background: var(--ngd-accent);
  border-color: var(--ngd-accent);
  color: var(--ngd-accent-ink);
}
#nfl-game-detail .ngd-pill.is-on em { color: var(--ngd-accent-ink); opacity: .78; }
#nfl-game-detail .ngd-pill.is-on::after { background: var(--ngd-accent-ink); }


/* ==========================================================================
   9. CONTEXT PANELS -- trends, defense, usage, injuries
   ========================================================================== */

#nfl-game-detail .ngd-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 10px;
  align-items: start;
}

#nfl-game-detail .ngd-panel {
  background: var(--ngd-ink-050);
  border: 1px solid var(--ngd-line-soft);
  border-radius: var(--ngd-r);
  padding: 16px 18px 14px;
  min-width: 0;
}
#nfl-game-detail .ngd-panel h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
#nfl-game-detail .ngd-sub {
  font-size: 11.5px;
  color: var(--ngd-fg-mute);
  margin-bottom: 14px;
  line-height: 1.45;
}

/* ---- two-sided comparison rows ---- */

#nfl-game-detail .ngd-cmp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ngd-line);
}
#nfl-game-detail .ngd-cmp-head span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ngd-fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-cmp-head span:first-child { text-align: right; }

#nfl-game-detail .ngd-cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ngd-line-soft);
}
#nfl-game-detail .ngd-cmp-row:last-child { border-bottom: 0; }

#nfl-game-detail .ngd-cmp-v {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ngd-fg-mute);
  min-width: 0;
}
#nfl-game-detail .ngd-cmp-v.is-l { justify-content: flex-end; }
#nfl-game-detail .ngd-cmp-v.is-r { justify-content: flex-start; }
#nfl-game-detail .ngd-cmp-v.is-win { color: var(--ngd-fg); }

#nfl-game-detail .ngd-cmp-rank {
  font-style: normal;
  font-family: var(--ngd-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ngd-fg-faint);
  background: var(--ngd-ink-100);
  border-radius: 4px;
  padding: 1px 5px;
  flex: none;
}
#nfl-game-detail .ngd-cmp-v.is-l .ngd-cmp-rank { order: -1; }
#nfl-game-detail .ngd-cmp-v.is-win .ngd-cmp-rank { color: var(--ngd-fg-dim); }

#nfl-game-detail .ngd-cmp-mid { min-width: 0; }
#nfl-game-detail .ngd-cmp-lab {
  font-size: 11px;
  color: var(--ngd-fg-mute);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-cmp-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  margin-top: 6px;
  /* the track is the RIGHT team's colour; the fill is the LEFT team's share */
  background: var(--ngd-side-r);
}
#nfl-game-detail .ngd-cmp-bar i {
  display: block;
  height: 100%;
  width: var(--l, 50%);
  border-radius: 3px 0 0 3px;
  background: var(--ngd-side-l);
}

/* ---- usage share ---- */

#nfl-game-detail .ngd-share-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
}
#nfl-game-detail .ngd-share-n {
  flex: none;
  width: 168px;
  font-size: 12.5px;
  color: var(--ngd-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-share-n i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ngd-fg-faint);
  margin-left: 7px;
}
#nfl-game-detail .ngd-share-bar {
  flex: 1;
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--ngd-ink-150);
  min-width: 0;
}
#nfl-game-detail .ngd-share-bar i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 4px;
  background: var(--ngd-accent-70);
}
/* Wide enough for the longest label the writer emits ("27.2 ATT/G") so the
   figure never wraps under its own unit. */
#nfl-game-detail .ngd-share-row b {
  flex: none;
  width: 80px;
  text-align: right;
  white-space: nowrap;
  font-family: var(--ngd-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ngd-fg-dim);
}

/* ---- injuries ---- */

#nfl-game-detail .ngd-inj {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#nfl-game-detail .ngd-inj-row {
  display: grid;
  grid-template-columns: 88px minmax(120px, 190px) minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ngd-line-soft);
}
#nfl-game-detail .ngd-inj-row:last-child { border-bottom: 0; }

/* Statuses arrive as written ("Questionable", "PUP-P", "IR"), so the badge
   stays sentence case -- uppercasing "Questionable" does not fit the column
   and truncating a status is worse than a slightly wider chip. */
#nfl-game-detail .ngd-inj-b {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--ngd-ink-150);
  color: var(--ngd-fg-dim);
  white-space: nowrap;
}
#nfl-game-detail .ngd-inj-b[data-tone="out"]   { background: var(--ngd-red-soft);   color: var(--ngd-red); }
#nfl-game-detail .ngd-inj-b[data-tone="doubt"] { background: rgba(255, 92, 92, .09); color: #D98080; }
#nfl-game-detail .ngd-inj-b[data-tone="quest"] { background: var(--ngd-amber-soft); color: var(--ngd-amber); }

#nfl-game-detail .ngd-inj-n {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ngd-fg);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nfl-game-detail .ngd-inj-n i {
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  color: var(--ngd-fg-mute);
  margin-left: 7px;
}
#nfl-game-detail .ngd-inj-x {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ngd-fg-mute);
  min-width: 0;
}

#nfl-game-detail .ngd-inj-empty {
  padding: 18px 0 6px;
  font-size: 12.5px;
  color: var(--ngd-fg-mute);
}

#nfl-game-detail .ngd-inj-stamp {
  font-size: 11px;
  color: var(--ngd-fg-faint);
  padding: 0 2px;
}


/* ==========================================================================
   10. NARROWER DESKTOP WIDTHS

   The board keeps its full track list and scrolls inside .ngd-board rather
   than being squeezed; only the panel pairs and the detail split reflow.
   ========================================================================== */

@media (max-width: 1180px) {
  #nfl-game-detail .ngd-detail-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 1040px) {
  #nfl-game-detail { padding-left: 14px; padding-right: 14px; }
  #nfl-game-detail .ngd-two { grid-template-columns: minmax(0, 1fr); }
  #nfl-game-detail .ngd-cmp-head,
  #nfl-game-detail .ngd-cmp-row { grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); }
  #nfl-game-detail .ngd-team-name { font-size: 22px; }
  #nfl-game-detail .ngd-gc-head { padding: 14px 18px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #nfl-game-detail .ngd-detail { animation: none; }
  #nfl-game-detail .ngd-chev,
  #nfl-game-detail .ngd-add,
  #nfl-game-detail .ngd-rung,
  #nfl-game-detail .ngd-pill,
  #nfl-game-detail .ngd-row,
  #nfl-game-detail .ngd-mrow,
  #nfl-game-detail .ngd-th,
  #nfl-game-detail .ngd-back { transition: none; }
}


/* ==========================================================================
   11. PHONE -- one block, appended; nothing above this line is modified.

   THE 980px CANVAS. This app ships no <meta name="viewport"> and never will
   (founder decision, tried and reverted). A phone therefore lays the page
   out on its 980px fallback canvas and then scales the whole thing down to
   fit the glass -- on a 390px device that is 390/980 = 0.398x.

   So every length in this block is authored at PHYSICAL x 2.513. A 15px
   label would land at 6px on glass and be unreadable; the same label is
   authored here as 38px. The numbers below look absurd in the source and
   that is exactly right.

   The layout decisions are ported from
   design-prototypes/patriots-seahawks-mobile.html, which is authored on a
   392px device canvas -- so its px values convert at 980/392 = x2.5.

   What changes shape (not just scale):
     - the board stops being a wide grid and becomes one card per prop:
       player + score on top, opponent-defense under it, and the Add button
       as a full-height tap target on the right;
     - the column headers become a horizontally scrollable row of sort
       chips, because a stacked card has no columns but sorting must
       survive;
     - the controls become one scrollable chip row with the view toggle
       pinned to the left as a segmented control;
     - the market strip becomes a horizontal snap carousel;
     - .ngd-two, the detail split and the arm rows all collapse to one
       column.
   Nothing is clipped to make it fit: the board no longer needs its own
   scroller because the cards fit the canvas.
   ========================================================================== */

@media (max-width: 1000px) {

  /* ---- 11.1 chassis -------------------------------------------------- */

  #nfl-game-detail {
    /* The bottom gutter clears TWO fixed overlays, not one: the app's tab
       bar and the parlay pill that floats above it once a leg is added. */
    padding: 16px 35px 200px;
    gap: 45px;
    font-size: 37px;
    line-height: 1.45;
  }

  #nfl-game-detail :focus-visible {
    outline-width: 4px;
    outline-offset: 4px;
    border-radius: 10px;
  }

  #nfl-game-detail .ngd-body { gap: 62px; }
  #nfl-game-detail .ngd-props { gap: 30px; }
  #nfl-game-detail #ngd-context { gap: 22px; }

  #nfl-game-detail .ngd-loading,
  #nfl-game-detail .ngd-empty {
    padding: 96px 40px;
    font-size: 31px;
    border-radius: 34px;
  }

  /* ---- 11.2 top bar -------------------------------------------------- */

  /* The 110px min-height below is a 44px TOUCH TARGET, not a visual box: the
     label inside it is only 48px tall, so ~31px of the button is empty. That
     read as padding while the back control was a bordered pill that filled the
     height; as a bare link it reads as a gap, and it stacks on top of the 45px
     root gap for ~30 physical px of air under the label. Pull the row up by
     most of its own dead space -- the target is untouched, only the space after
     it. Same fix, same reason, as .pm-topbar in mlb-pitcher-matchups.css. */
  #nfl-game-detail .ngd-topbar {
    gap: 26px;
    min-height: 110px;
    margin-bottom: -33px;
  }
  #nfl-game-detail .ngd-back {
    gap: 14px;
    /* min-height carries the 44px touch target; the label stays 13px on glass. */
    min-height: 110px;
    padding: 0 14px 0 0;
    font-size: 33px;
  }
  #nfl-game-detail .ngd-back svg { width: 34px; height: 34px; }

  /* ---- 11.3 game card ------------------------------------------------ */

  #nfl-game-detail .ngd-gamecard { border-radius: 34px; }

  #nfl-game-detail .ngd-gc-head {
    gap: 18px;
    padding: 34px 28px 30px;
  }
  #nfl-game-detail .ngd-team { gap: 18px; }
  #nfl-game-detail .ngd-crest {
    width: 84px;
    height: 84px;
    border-radius: 24px;
  }
  #nfl-game-detail .ngd-crest img { width: 58px; height: 58px; }
  #nfl-game-detail .ngd-crest b { font-size: 26px; }

  #nfl-game-detail .ngd-team-city {
    font-size: 19px;
    letter-spacing: .14em;
  }
  #nfl-game-detail .ngd-team-name {
    font-size: 38px;
    margin-top: 4px;
  }
  /* The kickoff line is the only thing standing between the two team names,
     so it is capped and allowed to wrap rather than pushing them into an
     ellipsis. */
  #nfl-game-detail .ngd-gc-mid {
    max-width: 210px;
    padding: 0;
  }
  #nfl-game-detail .ngd-gc-at { font-size: 30px; }
  #nfl-game-detail .ngd-gc-meta {
    font-size: 24px;
    line-height: 1.35;
    margin-top: 8px;
    white-space: normal;
  }


  #nfl-game-detail .ngd-mgrp {
    flex: 0 0 88%;
    min-width: 0;
    scroll-snap-align: start;
    padding: 24px 30px 30px;
  }
  #nfl-game-detail .ngd-mgrp-l {
    font-size: 22px;
    letter-spacing: .18em;
    margin-bottom: 16px;
  }
  #nfl-game-detail .ngd-mgrp-r { gap: 20px; }
  #nfl-game-detail .ngd-mo {
    padding: 20px 10px 22px;
    border-radius: 22px;
  }
  #nfl-game-detail .ngd-mo b { font-size: 33px; }
  #nfl-game-detail .ngd-mo em { font-size: 27px; margin-top: 6px; }


  /* ---- 11.4 controls: one scrollable chip row ------------------------ */

  /* The row bleeds to the page edges so a chip can sit flush; the view
     toggle sticks to the left so the Board / By player switch is always
     reachable without scrolling back. */
  #nfl-game-detail .ngd-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 35px;
    margin: 0 -35px;
  }
  #nfl-game-detail .ngd-controls::-webkit-scrollbar { display: none; }

  #nfl-game-detail .ngd-group {
    flex: 0 0 auto;
    gap: 5px;
    padding: 6px;
    border-radius: 24px;
  }
  #nfl-game-detail .ngd-group button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 98px;           /* ~39 physical px, plus the 6px pad = ~44 */
    padding: 0 30px;
    font-size: 29px;
    border-radius: 18px;
  }
  /* Pinned so Board / By player is reachable without scrolling the row back.
     It bleeds into the page gutter (-35 margin, +35 of extra padding) so a
     chip scrolling underneath cannot show in the strip to its left; the
     6px is the group's own padding, which keeps its buttons on the same
     left edge as every other group when the row sits at scrollLeft 0. */
  #nfl-game-detail .ngd-group[data-group="view"] {
    position: sticky;
    left: 0;
    z-index: 3;
    margin-left: -35px;
    padding-left: 41px;
    border-left: 0;
    border-radius: 0 24px 24px 0;
    box-shadow: 16px 0 22px -14px var(--ngd-ink-000);
  }
  #nfl-game-detail .ngd-group[data-group="view"] button {
    min-width: 170px;
  }

  /* ---- 11.5 board shell ---------------------------------------------- */

  /* The cards fit the canvas, so the board stops being its own scroller
     and stops imposing a minimum width. */
  #nfl-game-detail .ngd-board {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  #nfl-game-detail .ngd-thead,
  #nfl-game-detail .ngd-rows,
  #nfl-game-detail .ngd-legend { min-width: 0; }

  /* The column-header row used to double as the phone's sort control, since
     a stacked card has no columns but the sort still had to live somewhere.
     The Sort button and its chip replaced it, so showing both put two sort
     controls on screen with the strip scrolling under the chips. Hidden --
     the rules below are kept because the strip is still the desktop header
     and this override is cheaper to read than unpicking them. */
  #nfl-game-detail .ngd-thead { display: none; }

  #nfl-game-detail .ngd-thead.ngd-thead--legacy {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 35px 22px;
    margin: 0 -35px;
    border-bottom: 0;
  }
  #nfl-game-detail .ngd-thead::-webkit-scrollbar { display: none; }

  /* The two structural spacers in the header row have no chip. */
  #nfl-game-detail .ngd-thead > span:empty { display: none; }

  #nfl-game-detail .ngd-thead::before {
    content: "Sort";
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ngd-fg-faint);
  }

  #nfl-game-detail .ngd-th {
    flex: 0 0 auto;
    justify-content: center;
    min-height: 92px;
    padding: 0 28px;
    gap: 10px;
    font-size: 22px;
    letter-spacing: .12em;
    border: 1px solid var(--ngd-line);
    border-radius: 999px;
    background: var(--ngd-ink-050);
  }
  /* ta-r reversed the icon on the desktop grid; a chip reads left to right. */
  #nfl-game-detail .ngd-th.ta-r { flex-direction: row; text-align: center; }
  #nfl-game-detail .ngd-th-pl { padding-left: 28px; }
  #nfl-game-detail .ngd-th-def { padding-right: 28px; }
  #nfl-game-detail .ngd-th.is-sorted {
    background: var(--ngd-ink-150);
    border-color: var(--ngd-line-hi);
  }
  #nfl-game-detail .ngd-dir { font-size: 22px; }

  /* ---- 11.6 board rows -> stacked cards ------------------------------ */

  #nfl-game-detail .ngd-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* DOM order is [add][main][detail] and cannot change, so the card is laid
     out by named areas: main on the left, the Add button as a full-height
     column on the right, and the expanded panel across the bottom. */
  #nfl-game-detail .ngd-row {
    grid-template-columns: minmax(0, 1fr) 196px;
    grid-template-areas:
      "ngdmain ngdadd"
      "ngddet  ngddet";
    column-gap: 22px;
    row-gap: 0;
    align-items: stretch;
    padding: 24px 30px;
    background: var(--ngd-ink-050);
    border: 1px solid var(--ngd-line-soft);
    border-radius: 34px;
  }
  #nfl-game-detail .ngd-row:last-child { border-bottom: 1px solid var(--ngd-line-soft); }
  #nfl-game-detail .ngd-row.is-open { background: var(--ngd-ink-050); border-color: var(--ngd-line-hi); }

  #nfl-game-detail .ngd-addcell { grid-area: ngdadd; align-self: stretch; }
  #nfl-game-detail .ngd-row-main { grid-area: ngdmain; }
  #nfl-game-detail .ngd-row > .ngd-detail { grid-area: ngddet; }

  #nfl-game-detail .ngd-add {
    height: 100%;
    min-height: 132px;          /* ~53 physical px */
    padding: 10px;
    font-size: 30px;
    border-radius: 24px;
  }

  /*  st | player and market .......... | score | chev
      st | opponent-defense ........... | line  | chev
      st | avg | L10 ................   | price | chev

      Two structural decisions:
      - the name SPANS the L10 track instead of competing with it, because
        the name is the one thing on this card that must never truncate;
      - score / line / price stack in one right-hand column, which is the
        prototype's pill position and keeps the three numbers a user
        actually prices the bet on in a single vertical read. */
  #nfl-game-detail .ngd-row-main {
    grid-template-columns: 6px minmax(0, 1fr) auto auto 30px;
    grid-template-areas:
      "ngdst ngdid  ngdid  ngdsc    ngdcv"
      "ngdst ngddef ngddef ngdline  ngdcv"
      "ngdst ngdavg ngdhit ngdprice ngdcv";
    /* 22 not 16: a long under line ("U 229.5") otherwise runs straight into
       the defence rank sitting at the end of the row above it. */
    column-gap: 22px;
    row-gap: 13px;
    align-items: center;
    padding: 4px 0;
  }

  #nfl-game-detail .ngd-pl {
    grid-area: ngdid;
    padding-left: 0;
  }
  #nfl-game-detail .ngd-pname { font-size: 33px; line-height: 1.2; }
  #nfl-game-detail .ngd-pmkt { font-size: 26px; margin-top: 3px; }

  #nfl-game-detail .ngd-pline {
    grid-area: ngdline;
    font-size: 34px;
  }
  #nfl-game-detail .ngd-alt {
    width: 12px;
    height: 12px;
    margin-left: 12px;
    vertical-align: 6px;
  }

  #nfl-game-detail .ngd-pscore { grid-area: ngdsc; }
  #nfl-game-detail .ngd-score { gap: 9px; }
  #nfl-game-detail .ngd-score b { font-size: 38px; }
  #nfl-game-detail .ngd-score i { width: 112px; height: 7px; }
  #nfl-game-detail .ngd-score.is-none { font-size: 32px; }

  #nfl-game-detail .ngd-pdef { grid-area: ngddef; }
  #nfl-game-detail .ngd-def { gap: 13px; }
  #nfl-game-detail .ngd-def-t { gap: 18px; }
  #nfl-game-detail .ngd-def-l { font-size: 26px; }
  #nfl-game-detail .ngd-def-t b { font-size: 31px; }
  #nfl-game-detail .ngd-def-bar { height: 10px; border-radius: 5px; }
  #nfl-game-detail .ngd-def-bar i { border-radius: 5px; }
  #nfl-game-detail .ngd-def.is-none { font-size: 30px; }

  /* Without a header row these two numbers are unlabelled, so the label is
     generated here rather than left to the reader to guess. */
  #nfl-game-detail .ngd-pavg {
    grid-area: ngdavg;
    text-align: left;
    font-size: 27px;
  }
  #nfl-game-detail .ngd-phit {
    grid-area: ngdhit;
    text-align: right;
    font-size: 27px;
  }
  #nfl-game-detail .ngd-pavg::before,
  #nfl-game-detail .ngd-phit::before {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .13em;
    color: var(--ngd-fg-faint);
    margin-right: 9px;
  }
  #nfl-game-detail .ngd-pavg::before { content: "AVG"; }
  #nfl-game-detail .ngd-phit::before { content: "L10"; }

  #nfl-game-detail .ngd-pprice {
    grid-area: ngdprice;
    font-size: 27px;
  }

  #nfl-game-detail .ngd-chev {
    grid-area: ngdcv;
    align-self: center;
    justify-self: end;
    font-size: 38px;
  }

  /* ---- 11.7 legend --------------------------------------------------- */

  #nfl-game-detail .ngd-legend {
    gap: 16px 30px;
    margin-top: 20px;
    padding: 28px 30px;
    background: var(--ngd-ink-050);
    border: 1px solid var(--ngd-line-soft);
    border-radius: 34px;
    font-size: 26px;
    line-height: 1.55;
  }
  #nfl-game-detail .ngd-legend > span:not(.ngd-lg):not(.ngd-legend-season) {
    flex: 1 1 100%;
    min-width: 0;
  }
  #nfl-game-detail .ngd-lg { gap: 12px; }
  #nfl-game-detail .ngd-lg i { width: 20px; height: 20px; border-radius: 5px; }
  #nfl-game-detail .ngd-legend-season {
    padding-top: 20px;
    font-size: 26px;
  }

  /* ---- 11.8 expanded detail ------------------------------------------ */

  #nfl-game-detail .ngd-row > .ngd-detail {
    margin: 24px -30px -24px;
    padding: 0 30px 34px;
    border-radius: 0 0 33px 33px;
  }

  #nfl-game-detail .ngd-detail-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    padding-top: 34px;
  }

  #nfl-game-detail .ngd-sub-h {
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 20px;
    font-size: 23px;
    letter-spacing: .15em;
  }
  #nfl-game-detail .ngd-sub-h span { font-size: 25px; }

  #nfl-game-detail .ngd-log {
    max-width: none;
    height: 150px;
  }

  #nfl-game-detail .ngd-books-row { gap: 18px; }
  #nfl-game-detail .ngd-book {
    flex: 1 1 calc(50% - 9px);
    gap: 8px;
    padding: 20px 22px 22px;
    border-radius: 18px;
  }
  #nfl-game-detail .ngd-book span { font-size: 22px; letter-spacing: .09em; }
  #nfl-game-detail .ngd-book b { font-size: 30px; }

  #nfl-game-detail .ngd-rungs {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
  }
  #nfl-game-detail .ngd-rung {
    min-height: 132px;
    gap: 7px;
    padding: 20px 8px 18px;
    border-radius: 18px;
  }
  #nfl-game-detail .ngd-rung-l { font-size: 31px; }
  #nfl-game-detail .ngd-rung-p { font-size: 25px; }
  #nfl-game-detail .ngd-rung-tag { font-size: 19px; letter-spacing: .12em; }

  #nfl-game-detail .ngd-why { gap: 18px; }
  #nfl-game-detail .ngd-arm {
    padding: 24px 26px 26px;
    border-radius: 24px;
  }
  #nfl-game-detail .ngd-arm-h { gap: 6px 18px; }
  #nfl-game-detail .ngd-arm-h b { font-size: 23px; letter-spacing: .15em; }
  #nfl-game-detail .ngd-arm-h em { font-size: 25px; }
  #nfl-game-detail .ngd-arm-s {
    font-size: 29px;
    padding: 3px 18px;
  }
  #nfl-game-detail .ngd-arm ul { gap: 2px; margin-top: 18px; }
  #nfl-game-detail .ngd-arm li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px 0 16px 18px;
    border-left-width: 4px;
    font-size: 28px;
  }
  #nfl-game-detail .ngd-why-l { font-size: 22px; letter-spacing: .12em; }

  #nfl-game-detail .ngd-notice {
    font-size: 26px;
    padding: 20px 24px;
    border-radius: 18px;
  }
  #nfl-game-detail .ngd-why-stamp { font-size: 25px; }

  /* ---- 11.9 by-player card view -------------------------------------- */

  #nfl-game-detail .ngd-cardview { gap: 44px; }
  #nfl-game-detail .ngd-pgroup-h {
    gap: 16px;
    margin-bottom: 20px;
    font-size: 24px;
    letter-spacing: .16em;
  }
  #nfl-game-detail .ngd-pcards {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  #nfl-game-detail .ngd-pcard { border-radius: 34px; }

  #nfl-game-detail .ngd-pcard-h {
    gap: 22px;
    min-height: 112px;
    padding: 24px 28px;
  }
  #nfl-game-detail .ngd-pcard-n { font-size: 35px; }
  #nfl-game-detail .ngd-pcard-m { font-size: 27px; margin-top: 6px; }
  #nfl-game-detail .ngd-oppchip {
    font-size: 23px;
    padding: 7px 16px;
    border-radius: 12px;
  }

  /* TWO columns now: label, then the pill pair. The old third track existed
     for a separate score cell -- the score moved inside each pill when both
     sides started rendering, and the orphaned 230px track was squeezing the
     label enough to truncate "avg 229.6 - 6/10". */
  #nfl-game-detail .ngd-mrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 16px 26px;
  }
  #nfl-game-detail .ngd-mrow-l {
    min-height: 112px;
    justify-content: center;
    padding: 4px 0;
  }
  #nfl-game-detail .ngd-mrow-n { font-size: 30px; }
  #nfl-game-detail .ngd-mrow-sub { font-size: 25px; margin-top: 7px; }
  #nfl-game-detail .ngd-mrow-score .ngd-score i { width: 100px; }

  #nfl-game-detail .ngd-pill {
    min-height: 112px;          /* ~45 physical px */
    justify-content: center;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 20px;
  }
  #nfl-game-detail .ngd-pill b { font-size: 31px; }
  #nfl-game-detail .ngd-pill em { font-size: 26px; }
  #nfl-game-detail .ngd-pill.is-alt::after {
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
  }

  #nfl-game-detail .ngd-mrow > .ngd-detail {
    margin: 0 -26px;
    padding: 0 26px 32px;
  }
  /* The nested-detail collapses that section 8 applies inside a 340px card
     are already the phone layout, so they only need their sizes lifting. */
  #nfl-game-detail .ngd-mrow > .ngd-detail .ngd-book {
    flex: 1 1 calc(50% - 9px);
  }

  /* ---- 11.10 context panels ------------------------------------------ */

  #nfl-game-detail .ngd-two {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  #nfl-game-detail .ngd-panel {
    padding: 34px 30px 30px;
    border-radius: 34px;
  }
  #nfl-game-detail .ngd-panel h3 { font-size: 33px; margin-bottom: 8px; }
  #nfl-game-detail .ngd-sub { font-size: 26px; margin-bottom: 28px; }

  /* The mid track is 210, not 250: the two side headers are the longest
     strings in the panel ("New England defence") and an ellipsised team
     name is worse than a slightly narrower label column. */
  #nfl-game-detail .ngd-cmp-head,
  #nfl-game-detail .ngd-cmp-row {
    grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
    gap: 20px;
  }
  #nfl-game-detail .ngd-cmp-head { padding-bottom: 18px; }
  #nfl-game-detail .ngd-cmp-head span { font-size: 21px; letter-spacing: .10em; }
  #nfl-game-detail .ngd-cmp-row { padding: 18px 0; }
  #nfl-game-detail .ngd-cmp-v { gap: 14px; font-size: 32px; }
  #nfl-game-detail .ngd-cmp-rank {
    font-size: 22px;
    padding: 3px 11px;
    border-radius: 8px;
  }
  #nfl-game-detail .ngd-cmp-lab { font-size: 24px; }
  #nfl-game-detail .ngd-cmp-bar {
    height: 11px;
    border-radius: 6px;
    margin-top: 12px;
  }
  #nfl-game-detail .ngd-cmp-bar i { border-radius: 6px 0 0 6px; }

  #nfl-game-detail .ngd-share-row { gap: 22px; padding: 13px 0; }
  #nfl-game-detail .ngd-share-n { width: 300px; font-size: 29px; }
  #nfl-game-detail .ngd-share-n i { font-size: 22px; margin-left: 14px; }
  #nfl-game-detail .ngd-share-bar { height: 15px; border-radius: 8px; }
  #nfl-game-detail .ngd-share-bar i { border-radius: 8px; }
  #nfl-game-detail .ngd-share-row b { width: 190px; font-size: 27px; }

  #nfl-game-detail .ngd-inj { gap: 20px; }
  #nfl-game-detail .ngd-inj-row {
    grid-template-columns: 175px minmax(0, 1fr);
    grid-template-areas:
      "ngdib ngdin"
      "ngdib ngdix";
    align-items: start;
    gap: 8px 22px;
    padding: 20px 0;
  }
  #nfl-game-detail .ngd-inj-b {
    grid-area: ngdib;
    font-size: 23px;
    padding: 8px 8px 9px;
    border-radius: 10px;
  }
  #nfl-game-detail .ngd-inj-n {
    grid-area: ngdin;
    font-size: 30px;
    white-space: normal;
  }
  #nfl-game-detail .ngd-inj-n i { font-size: 26px; margin-left: 14px; }
  #nfl-game-detail .ngd-inj-x { grid-area: ngdix; font-size: 25px; }
  #nfl-game-detail .ngd-inj-empty { font-size: 29px; padding: 24px 0 8px; }
  #nfl-game-detail .ngd-inj-stamp { font-size: 25px; }

  /* ---- 11.9 price pill replaces the Add column ----------------------- */
  /* The mobile prototype has no separate Add button on the board: the price
     itself is the control, which is also the only way to keep a 53px tap
     target without stealing a third of the card width. */

  #nfl-game-detail .ngd-addcell { display: none; }

  #nfl-game-detail .ngd-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "ngdmain"
      "ngddet";
  }

  /* Line and price merge into one pill occupying the old line/price rows. */
  #nfl-game-detail .ngd-row-main {
    grid-template-areas:
      "ngdst ngdid  ngdid  ngdsc   ngdcv"
      "ngdst ngddef ngddef ngdpill ngdcv"
      "ngdst ngdavg ngdhit ngdpill ngdcv";
  }

  #nfl-game-detail .ngd-ppill {
    display: flex;
    grid-area: ngdpill;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 250px;
    min-height: 132px;                 /* ~53 physical px */
    padding: 14px 22px;
    background: var(--ngd-ink-150);
    border: 1px solid var(--ngd-line-hi);
    border-radius: 26px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  #nfl-game-detail .ngd-ppill.is-on {
    background: rgba(var(--theme-accent-rgb, 0, 211, 189), .16);
    border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), .55);
  }
  #nfl-game-detail .ngd-ppill.is-busy { opacity: .55; }

  /* They are flex children of the pill now, not grid items of the row. */
  #nfl-game-detail .ngd-ppill .ngd-pline,
  #nfl-game-detail .ngd-ppill .ngd-pprice {
    grid-area: auto;
    justify-self: auto;
    text-align: center;
  }
  #nfl-game-detail .ngd-ppill .ngd-pline { font-size: 34px; }
  #nfl-game-detail .ngd-ppill .ngd-pprice {
    font-size: 27px;
    color: rgb(var(--theme-accent-rgb, 0, 211, 189));
  }

  /* ---- 11.10 bottom sheet -------------------------------------------- */
  /* Expanding in place is wrong at this type scale -- the drawer is taller
     than the viewport, so it buries the board and loses the user's place.
     The prototype uses a sheet, so this does too. */

  #nfl-game-detail .ngd-veil {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 1400;
  }
  #nfl-game-detail.is-sheet-open .ngd-veil { opacity: 1; pointer-events: auto; }

  #nfl-game-detail .ngd-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86vh;
    background: var(--ngd-ink-100);
    border-top: 1px solid var(--ngd-line-hi);
    border-radius: 56px 56px 0 0;
    transform: translateY(103%);
    transition: transform .22s ease;
    z-index: 1401;
  }
  #nfl-game-detail.is-sheet-open .ngd-sheet { transform: none; }

  #nfl-game-detail .ngd-sheet-b {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 30px 34px 60px;        /* was 12: the grip used to sit above */
  }

  #nfl-game-detail .ngd-sheet-h {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 12px 0 6px;
  }
  #nfl-game-detail .ngd-sheet-id { flex: 1; min-width: 0; }
  #nfl-game-detail .ngd-sheet-n {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -.02em;
  }
  #nfl-game-detail .ngd-sheet-m {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 26px;
    color: var(--ngd-fg-mute);
  }
  /* Matches the workbench props toolbar's .nptb-sheet-x: a plain muted glyph,
     no disc. The disc version sat off-centre because the glyph was a bare
     text character with its own line-box. */
  #nfl-game-detail .ngd-sheet-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 56px;
    min-height: 56px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ngd-fg-mute);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
  }

  #nfl-game-detail .ngd-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 22px 0 6px;
  }
  #nfl-game-detail .ngd-tile {
    padding: 22px 24px;
    background: var(--ngd-ink-050);
    border: 1px solid var(--ngd-line-soft);
    border-radius: 26px;
  }
  #nfl-game-detail .ngd-tile span {
    display: block;
    font-size: 22px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ngd-fg-mute);
  }
  #nfl-game-detail .ngd-tile b {
    display: block;
    margin: 8px 0 4px;
    font-size: 52px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  #nfl-game-detail .ngd-tile b[data-tier] { color: var(--ngd-tier, inherit); }
  #nfl-game-detail .ngd-tile em {
    font-style: normal;
    font-size: 23px;
    color: var(--ngd-fg-dim);
  }

  #nfl-game-detail .ngd-takes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 18px;
    margin: 22px 0;
  }
  #nfl-game-detail .ngd-take {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    min-height: 140px;
    background: var(--ngd-ink-150);
    border: 1px solid var(--ngd-line-hi);
    border-radius: 26px;
    cursor: pointer;
  }
  #nfl-game-detail .ngd-take.is-on {
    background: rgba(var(--theme-accent-rgb, 0, 211, 189), .16);
    border-color: rgba(var(--theme-accent-rgb, 0, 211, 189), .55);
  }
  #nfl-game-detail .ngd-take-t { font-size: 30px; font-weight: 650; }
  #nfl-game-detail .ngd-take-p {
    font-size: 32px;
    color: rgb(var(--theme-accent-rgb, 0, 211, 189));
  }
  #nfl-game-detail .ngd-take-e { font-size: 22px; color: var(--ngd-fg-mute); }

  #nfl-game-detail .ngd-ssec { margin: 26px 0; }
  #nfl-game-detail .ngd-ssec h4 {
    margin: 0 0 14px;
    font-size: 24px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ngd-fg-mute);
  }
  #nfl-game-detail .ngd-snote {
    margin: 12px 0 0;
    font-size: 24px;
    line-height: 1.45;
    color: var(--ngd-fg-dim);
  }
  #nfl-game-detail .ngd-dl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ngd-line-soft);
    font-size: 26px;
  }
  #nfl-game-detail .ngd-dl-row:last-child { border-bottom: 0; }
  #nfl-game-detail .ngd-dl-row span { color: var(--ngd-fg-mute); }
  #nfl-game-detail .ngd-dl-row b { font-variant-numeric: tabular-nums; }

  /* The sheet supplies its own ladder, so the inline drawer stays shut. */
  #nfl-game-detail .ngd-row > .ngd-detail { display: none; }

  #nfl-game-detail .ngd-more {
    gap: 22px;
    margin-top: 24px;
    min-height: 130px;              /* ~52 physical px */
    padding: 24px;
    border-radius: 30px;
    font-size: 31px;
  }
  #nfl-game-detail .ngd-more span { font-size: 26px; }

  /* ---- 11.11a Last-5 bars -------------------------------------------- */
  /* Same visual language as the prop cards' Last-5 box
     (prop-cards.css:2106-2130): a hit/miss strip, newest on the right. The
     colours are that box's literals, not tokens, so the two surfaces cannot
     drift apart. Scaled for the 980px canvas. */
  #nfl-game-detail .ngd-mrow-sub {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  #nfl-game-detail .ngd-l5 {
    display: inline-flex;
    /* flex-end, so the caption sits on the base of the strips rather than
       floating centred against them. NOT `baseline`: the bars are empty <i>
       elements, so their baseline is their bottom edge, and against this fixed
       26px height that pushes the caption down until its descenders hang below
       the bars. */
    align-items: flex-end;
    gap: 6px;
    height: 26px;
  }
  /* Caption inherits .ngd-mrow-sub's muted colour and size, so it reads exactly
     as the "avg 4.5" text it replaces. line-height:1 keeps the 26px row height
     from being pushed out by the text box, and lands the text bottom on the
     bar bottom under the flex-end above. */
  #nfl-game-detail .ngd-l5-lab {
    line-height: 1;
    margin-right: 7px;
    white-space: nowrap;
  }
  #nfl-game-detail .ngd-l5 i {
    width: 8px;                     /* ~3 physical px */
    height: 26px;                   /* ~10 physical px */
    border-radius: 3px;
    background: var(--ngd-line-hi);
  }
  #nfl-game-detail .ngd-l5 i.is-hit  { background: #22c55e; }
  #nfl-game-detail .ngd-l5 i.is-miss { background: #ef4444; }

  /* ---- 11.11b market rows: BOTH sides ------------------------------- */
  /* The phone card shows every available side, so a two-way market renders
     two pills side by side and a one-way market renders one. No filters
     exist on this screen, so a hidden side would be unreachable. */
  /* A fixed two-column track, always. With a plain flex row the block's width
     followed its content, so a one-sided market's lone pill landed at a
     different x than the two-sided rows above it and the label column kept
     resizing under it (which is what truncated "avg 229.6 - 6/10"). */
  #nfl-game-detail .ngd-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    flex: none;
    width: 420px;
  }
  /* A lone pill fills the pair rather than sitting in half of it. */
  #nfl-game-detail .ngd-pills > .ngd-pill:only-child { grid-column: 1 / -1; }
  #nfl-game-detail .ngd-mrow .ngd-pill {
    min-width: 0;
    min-height: 128px;              /* ~51 physical px */
    gap: 2px;
  }
  /* The label column now has a stable width, so let it use it. */
  #nfl-game-detail .ngd-mrow-l { min-width: 0; }
  #nfl-game-detail .ngd-mrow-sub { white-space: nowrap; }

  /* ---- 11.11c why this page does NOT skip off-screen cards ----------- */
  /*
   * Deliberately NO content-visibility here, and it must stay that way.
   *
   * It was tried twice. The workbench uses it (prop-cards.css:100) and its own
   * comment says why: "when 600+ props are in the DOM". That is the regime
   * where skipping off-screen work pays for the churn of re-rendering content
   * when it comes back. THIS PAGE HAS 19 CARDS. Measured repaint counts over a
   * full scroll down and back up:
   *
   *     with content-visibility     down 47   up 24
   *     without                     down 32   up  4
   *
   * It made the page repaint MORE in BOTH directions, and the up-scroll
   * re-render was visible as content redrawing itself on the way back --
   * founder-reported, and the mechanism is exactly what the property is
   * designed to do. Scale is the whole story; do not re-apply it here.
   */

  /* ---- 11.12 tabs ---------------------------------------------------- */
  /* Props / Matchup / Injuries. Only the active panel is in the DOM, which is
     what keeps this page scrollable: the context panels alone were 7,274px. */
  #nfl-game-detail .ngd-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    /* Negative, on purpose: the root is a flex column with gap:45px, so the
       tabs already sat 53 canvas px (~21 physical) below the game card before
       their own 22px of button padding. Pulling back against the gap is the
       only way to tighten this pair without shrinking every other gap. */
    margin: -24px 0 0;
    border-bottom: 1px solid var(--ngd-line-soft);
  }
  #nfl-game-detail .ngd-tab {
    flex: 0 1 auto;                 /* centred as a group, not stretched */
    min-height: 108px;              /* ~43 physical px */
    padding: 14px 46px;
    background: none;
    border: 0;
    border-bottom: 4px solid transparent;
    color: var(--ngd-fg-mute);
    font-size: 32px;
    font-weight: 600;
    cursor: pointer;
  }
  #nfl-game-detail .ngd-tab.is-on {
    color: rgb(var(--theme-accent-rgb, 0, 211, 189));
    border-bottom-color: rgb(var(--theme-accent-rgb, 0, 211, 189));
  }

  /* ---- 11.13 phone controls: view toggle + Filter/Sort + chips -------- */
  #nfl-game-detail .ngd-controls-phone {
    display: block;
    /* The root's 35px gutter alone left the segmented toggle and the chip row
       visually welded to the screen edge. */
    padding: 22px 0 6px 18px;
  }
  #nfl-game-detail .ngd-ctl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  #nfl-game-detail .ngd-ctl-actions { display: flex; gap: 14px; flex: none; }
  #nfl-game-detail .ngd-ctl-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 100px;              /* ~40 physical px */
    padding: 0 26px;
    background: var(--ngd-ink-050);
    border: 1px solid var(--ngd-line-soft);
    border-radius: 22px;
    color: var(--ngd-fg);
    font-size: 28px;
    font-weight: 600;
    cursor: pointer;
  }

  #nfl-game-detail .ngd-chips {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    /* Trailing inset so the last chip can scroll clear of the edge. */
    padding-right: 35px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #nfl-game-detail .ngd-chips::-webkit-scrollbar { display: none; }
  #nfl-game-detail .ngd-chip {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    background: var(--ngd-ink-100);
    border: 1px solid var(--ngd-line-hi);
    border-radius: 20px;
    overflow: hidden;
  }
  #nfl-game-detail .ngd-chip-t {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 88px;
    padding: 0 8px 0 22px;
    background: none;
    border: 0;
    color: var(--ngd-fg);
    font-size: 27px;
    font-weight: 600;
    cursor: pointer;
  }
  #nfl-game-detail .ngd-chip-dir {
    font-style: normal;
    color: var(--ngd-fg-mute);
  }
  #nfl-game-detail .ngd-chip-x {
    padding: 0 22px 0 8px;
    background: none;
    border: 0;
    color: var(--ngd-fg-mute);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
  }

  /* ---- 11.14 control-sheet options ----------------------------------- */
  #nfl-game-detail .ngd-sheet-sec {
    margin: 26px 0 12px;
    font-size: 23px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ngd-fg-mute);
  }
  #nfl-game-detail .ngd-opts {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  #nfl-game-detail .ngd-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 118px;              /* ~47 physical px */
    padding: 0 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ngd-line-soft);
    color: var(--ngd-fg);
    font-size: 30px;
    text-align: left;
    cursor: pointer;
  }
  #nfl-game-detail .ngd-opt:last-child { border-bottom: 0; }
  #nfl-game-detail .ngd-opt-tick {
    font-style: normal;
    color: rgb(var(--theme-accent-rgb, 0, 211, 189));
    opacity: 0;
    font-size: 30px;
  }
  #nfl-game-detail .ngd-opt.is-on { color: rgb(var(--theme-accent-rgb, 0, 211, 189)); }
  #nfl-game-detail .ngd-opt.is-on .ngd-opt-tick { opacity: 1; }

  /* By-player card header carries the same avatar as a board row. */
  #nfl-game-detail .ngd-pcard-h { align-items: center; gap: 18px; }
  #nfl-game-detail .ngd-pcard-h .ngd-avatar { grid-area: auto; }

  /* ---- 11.15 player avatar ------------------------------------------- */
  #nfl-game-detail .ngd-avatar {
    grid-area: ngdav;
    position: relative;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ngd-ink-150);
  }
  #nfl-game-detail .ngd-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #nfl-game-detail .ngd-avatar i {
    font-style: normal;
    font-size: 30px;
    font-weight: 700;
    color: var(--ngd-fg-mute);
  }

  /* The avatar takes its own column, left of the identity block. */
  /* Cleaner card: identity + score on top, matchup + price underneath.
     AVG and L10 are dropped on the phone -- four numbers competing at this
     size read as a spreadsheet, and both are still one tap away in the row
     sheet. */
  #nfl-game-detail .ngd-pavg,
  #nfl-game-detail .ngd-phit { display: none; }

  #nfl-game-detail .ngd-row-main {
    grid-template-columns: auto minmax(0, 1fr) auto 30px;
    grid-template-areas:
      "ngdav ngdid  ngdsc   ngdcv"
      "ngdav ngddef ngdpill ngdcv";
    row-gap: 16px;
  }
}

/* ==========================================================================
   10b. PRICE PILL + PHONE BOTTOM SHEET (base state)
   ========================================================================== */

/* On desktop the wrapper must be invisible to layout: its two children stay
   direct grid items of .ngd-row-main so the Line and Price tracks keep
   lining up with .ngd-thead. display:contents does exactly that. The phone
   block below promotes it to a real flex pill. */
#nfl-game-detail .ngd-ppill { display: contents; }

/* "Show more" for the phone's paged board. Present at every width but only
   ever rendered when the board is capped, which desktop never is. */
#nfl-game-detail .ngd-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  background: var(--ngd-ink-050);
  border: 1px solid var(--ngd-line-soft);
  border-radius: 12px;
  color: var(--ngd-fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#nfl-game-detail .ngd-more:hover { border-color: var(--ngd-line-hi); }
#nfl-game-detail .ngd-more span {
  color: var(--ngd-fg-mute);
  font-weight: 400;
}

/* The sheet is created lazily and only ever opened on a phone, but it lives
   in the DOM afterwards, so it is hidden here rather than by a media query
   (a later rule could otherwise leak it onto desktop). */
#nfl-game-detail .ngd-veil,
#nfl-game-detail .ngd-sheet { display: none; }


@media (min-width: 1001px) {
  /* Avatars on both desktop surfaces. Hidden by default so any OTHER place the
     markup appears stays opt-in. */
  #nfl-game-detail .ngd-avatar { display: none; }
  #nfl-game-detail .ngd-pcard-h .ngd-avatar,
  #nfl-game-detail .ngd-row-main .ngd-avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ngd-ink-150);
  }
  #nfl-game-detail .ngd-pcard-h .ngd-avatar img,
  #nfl-game-detail .ngd-row-main .ngd-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #nfl-game-detail .ngd-pcard-h .ngd-avatar i,
  #nfl-game-detail .ngd-row-main .ngd-avatar i {
    font-style: normal;
    font-weight: 700;
    color: var(--ngd-fg-mute);
  }
  #nfl-game-detail .ngd-pcard-h .ngd-avatar { width: 34px; height: 34px; }
  #nfl-game-detail .ngd-pcard-h .ngd-avatar i { font-size: 12px; }

  /* The board's avatar is taken OUT OF FLOW, the same trick the team stripe
     used to use: the row's 8 cells are a grid on --ngd-cols and must line up
     with the header's 8 columns, and an in-flow avatar would claim track 1 and
     shift every column right. The player cell and its header label are then
     indented by the same amount so the column still reads as one. */
  #nfl-game-detail .ngd-row-main .ngd-avatar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
  }
  #nfl-game-detail .ngd-row-main .ngd-avatar i { font-size: 10px; }
  #nfl-game-detail .ngd-row-main .ngd-pl,
  #nfl-game-detail .ngd-thead .ngd-th-pl { padding-left: 36px; }

  /* O and U on ONE line. The base .ngd-mrow is a 3-track grid built when the
     row still rendered a score between the label and the prices; with the
     score gone the markup is two children, so the pills were landing in the
     66px score track and stacking, leaving the 96px track empty on the right.
     Two tracks, exactly as the phone block already does for the same reason. */
  #nfl-game-detail .ngd-mrow { grid-template-columns: minmax(0, 1fr) auto; }
  /* A fixed width, not auto: it keeps every row's prices on the same x, so a
     one-sided market's lone pill cannot sit at a different offset from the
     pairs above it. */
  #nfl-game-detail .ngd-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 150px;
  }
  #nfl-game-detail .ngd-pills > .ngd-pill:only-child { grid-column: 1 / -1; }

  /* Last-5 strips were styled in the phone block only, so on desktop the <i>
     elements collapsed to nothing and the caption promised bars that were
     never drawn. Same hit/miss literals as the phone block and the prop cards
     so the three surfaces cannot drift apart. */
  #nfl-game-detail .ngd-l5 {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 11px;
  }
  #nfl-game-detail .ngd-l5 i {
    width: 3px;
    height: 11px;
    border-radius: 1.5px;
  }
  #nfl-game-detail .ngd-l5 i.is-hit  { background: #22c55e; }
  #nfl-game-detail .ngd-l5 i.is-miss { background: #ef4444; }
  #nfl-game-detail .ngd-l5-lab {
    line-height: 1;
    margin-right: 5px;
    white-space: nowrap;
  }
}

/* The only two selectors outside #nfl-game-detail, both necessarily so, and
   both gated on a class that nothing else in the app sets. gameDetailNFL.js
   removes it on close and on teardown.
   1. The scrolling element is the document, so the scroll lock has to be here.
   2. The floating parlay pill is z-index 10050 (parlay-pill.css:14), i.e.
      above any sane sheet, so it painted straight over the sheet's text.
      Hiding it for the duration beats escalating a z-index war -- the sheet
      already shows the added state on its own take buttons. */
/* Pinned, not overflow-hidden: html owns the page scroll, so a body-only
   overflow lock let the background scroll behind an open sheet. openSheet()
   stores the offset in `top` and closeSheet() restores it. */
body.ngd-sheet-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
body.ngd-sheet-lock #parlay-pill { display: none !important; }


/* ==========================================================================
   12. BOOT SKELETON

   Ported from the MLB research sub-pages (mlb-pitcher-matchups.css §Loading
   skeleton, and its Home Run Zone twin). The note there explains why an empty
   loading shell was the problem: with no height the page collapses, the site
   footer slides up under the header for the length of the fetch, and every-
   thing jumps when the board lands. The skeleton below carries the real card
   geometry and is painted before the first await, so the page is full height
   from the first frame.

   Everything except the top bar is blurred while loading -- the back button
   has to stay sharp AND tappable throughout.
   ========================================================================== */

#nfl-game-detail > *:not(.ngd-topbar) {
  transition: filter .28s ease, opacity .28s ease;
}
#nfl-game-detail.is-loading > *:not(.ngd-topbar) {
  filter: blur(7px);
  opacity: .5;
  pointer-events: none;
}

@keyframes ngd-skel-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
#nfl-game-detail .ngd-skel-card {
  animation: ngd-skel-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}

#nfl-game-detail .ngd-skel-av,
#nfl-game-detail .ngd-skel-bar,
#nfl-game-detail .ngd-skel-chip,
#nfl-game-detail .ngd-skel-pill {
  display: block;
  background: rgba(148, 163, 184, .14);
  border-radius: 6px;
}

#nfl-game-detail .ngd-skel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
}
#nfl-game-detail .ngd-skel-av   { width: 34px; height: 34px; border-radius: 50%; flex: none; }
#nfl-game-detail .ngd-skel-id   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#nfl-game-detail .ngd-skel-chip { width: 54px; height: 18px; flex: none; border-radius: 5px; }
#nfl-game-detail .ngd-skel-bar  { height: 11px; }
#nfl-game-detail .ngd-skel-bar.short { height: 9px; }
#nfl-game-detail .ngd-skel-bar.w30 { width: 30%; }
#nfl-game-detail .ngd-skel-bar.w35 { width: 35%; }
#nfl-game-detail .ngd-skel-bar.w55 { width: 55%; }
#nfl-game-detail .ngd-skel-bar.w60 { width: 60%; }

/* Mirrors .ngd-mrow: label column, then the two price pills. */
#nfl-game-detail .ngd-skel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  border-bottom: 1px solid var(--ngd-line-soft);
}
#nfl-game-detail .ngd-skel-row:last-child { border-bottom: 0; }
#nfl-game-detail .ngd-skel-l { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#nfl-game-detail .ngd-skel-pill { width: 72px; height: 40px; border-radius: var(--ngd-r3); }

/* Phone: the 980px canvas scales 0.398x, so every value is authored as
   N * 2.513 to land N physical px -- the same rule as the rest of this file. */
@media (max-width: 1000px) {
  #nfl-game-detail .ngd-skel-head {
    gap: 22px;
    min-height: 112px;
    padding: 24px 28px;
  }
  #nfl-game-detail .ngd-skel-av   { width: 108px; height: 108px; }
  #nfl-game-detail .ngd-skel-id   { gap: 14px; }
  #nfl-game-detail .ngd-skel-chip { width: 132px; height: 44px; border-radius: 12px; }
  #nfl-game-detail .ngd-skel-bar  { height: 26px; border-radius: 13px; }
  #nfl-game-detail .ngd-skel-bar.short { height: 22px; }
  #nfl-game-detail .ngd-skel-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px;
    padding: 16px 26px;
  }
  #nfl-game-detail .ngd-skel-l { gap: 12px; }
  #nfl-game-detail .ngd-skel-pill {
    width: 198px;
    height: 112px;
    border-radius: 20px;
  }
}

/* ── dashboard hand-off (founder 2026-08-30) ─────────────────────────────
   Desktop: the row click stays the expand; the drawer's footer carries the
   explicit route to the player dashboard. Phone: the card's avatar is a
   tap target alongside the name button (both carry data-open-player). */
#nfl-game-detail .ngd-detail-cta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}
#nfl-game-detail .ngd-viewstats {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  /* all:unset leaves INHERITED props inheriting — inside .ngd-sub-h that
     means .13em uppercase unless neutralized here */
  letter-spacing: normal;
  text-transform: none;
  color: var(--ngd-accent-90);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), .4);
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), .07);
}
/* in the game-log header: right-aligned, a notch more compact */
#nfl-game-detail .ngd-sub-h .ngd-viewstats {
  margin-left: auto;
  align-self: center;
  font-size: 11.5px;
  padding: 5px 11px;
}
#nfl-game-detail .ngd-viewstats:hover {
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), .14);
}
#nfl-game-detail .ngd-viewstats:focus-visible {
  outline: 2px solid var(--ngd-accent);
  outline-offset: 2px;
}
#nfl-game-detail .ngd-pcard-h .ngd-avatar[data-open-player] { cursor: pointer; }