/* =============================================================================
   games-mode.css
   Single source of truth for the games-mode shell, pinned results card, and
   scroll model. Replaces three previously-load-order-dependent files:
     pinned-results.css → results-card-overrides.css → scroll-model.css

   The original 3-file split existed only because each later file was a fresh
   way to win cascade collisions against the file before it. Now that they
   live together, intra-file source order alone is enough — many !important
   flags can be dropped in a follow-up pass. The sections below are sequenced
   in the same order the three files used to load, so existing cascade outcomes
   are preserved byte-for-byte.
   ============================================================================= */

/* ============================================================================
   §1  (was pinned-results.css)  Games-mode pinned results + game shell layout
   ============================================================================ */
/* =========================
   A) Base mode scaffolding
   ========================= */

body.mode-games .game-section-header h2 {
  font-size: calc(16px + var(--font-size-step));
  line-height: 1.12;
}

body.mode-games .game-section-header .controls {
  gap: 6px;
}

body.mode-games .game-section-header .game-options-icon-btn,
body.mode-games .game-section-header .banker-options-icon-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 14px;
}

/* In-viewport results card behavior for all games (integrated, not footer-like). */

/* =========================================================================
   STRIPED SIDE-GUTTER TEXTURE — single owner for the entry panels.
   Renders desktop-style textured side gutters in both modes at all widths,
   keeping any empty side space visually consistent instead of flat grey.

   This block is THE owner for #gamesEntryPanel / #scoreEntryPanel gutters
   (content lane constant: 516px half-width). Two dead verbatim copies
   (main.css and the whole of score-mode.css, both 516px) were deleted
   2026-06 — this unconditional copy always won by load order. The only
   other live variant is game-shell.css's .game-section gutter (619px lane,
   different scope: game sections, not the entry panels); main.css also had
   a dead 516px .game-section copy that game-shell's 619px one shadowed.
   Do not re-add per-mode duplicates — edit this block. */
body.mode-games #gamesEntryPanel,
body.mode-score #scoreEntryPanel {
  position: relative;
}

body.mode-games #gamesEntryPanel::before,
body.mode-games #gamesEntryPanel::after,
body.mode-score #scoreEntryPanel::before,
body.mode-score #scoreEntryPanel::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: max(var(--mobile-page-gutter, 8px), calc(50vw - 516px));
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, rgba(223, 233, 244, 0.92), rgba(209, 221, 234, 0.82));
  box-shadow: inset -1px 0 0 var(--line-mute);
}

body.mode-games #gamesEntryPanel::before,
body.mode-score #scoreEntryPanel::before {
  left: 0;
}

body.mode-games #gamesEntryPanel::after,
body.mode-score #scoreEntryPanel::after {
  right: 0;
  box-shadow: inset 1px 0 0 var(--line-mute);
}

:root:not([data-theme="light"]) body.mode-games #gamesEntryPanel::before,
:root:not([data-theme="light"]) body.mode-games #gamesEntryPanel::after,
:root:not([data-theme="light"]) body.mode-score #scoreEntryPanel::before,
:root:not([data-theme="light"]) body.mode-score #scoreEntryPanel::after {
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(151, 185, 210, 0.28), rgba(151, 185, 210, 0) 56%),
    linear-gradient(180deg, rgba(19, 37, 56, 0.82), rgba(12, 26, 40, 0.74));
  box-shadow: inset -1px 0 0 var(--line-warm);
}

:root:not([data-theme="light"]) body.mode-games #gamesEntryPanel::after,
:root:not([data-theme="light"]) body.mode-score #scoreEntryPanel::after {
  box-shadow: inset 1px 0 0 var(--line-warm);
}

:root[data-font-size="large"] body.mode-games #gamesEntryPanel::before,
:root[data-font-size="large"] body.mode-games #gamesEntryPanel::after {
  display: none;
}

body.mode-games #gamesEntryPanel > *,
body.mode-score #scoreEntryPanel > * {
  position: relative;
  z-index: 1;
}

/* Score mode: keep the popped totals card centered in its footer container
   and let side gutters show the same continuous texture surface. */

/* Inner card-footer is transparent — only the outer .scorecard-controls-shell
   provides the unified surface that all rows sit on. (Previously the shell
   was transparent too, which made score mode show body bg and games mode show
   the shell's gradient — two different surfaces, the inconsistency the user
   reported.) */
body.mode-score .scorecard-card-footer {
  background: transparent;
}

@media (max-width: 1024px) {
  /* Specificity 21 (body + .mode-score + .scorecard-controls-shell) already
     wins over the comma-list rules in main.css / shell-layout.css that set
     max-width: min(1600/1920px, 100vw) on the unmodified class (specificity
     10). !important previously here was redundant — removed. */
  

  
}

/* Match desktop side-gutter texture in Games mode so empty side space
   around the pinned totals card/table is not flat grey. */
body.mode-games #gamesEntryPanel {
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, rgba(223, 233, 244, 0.92), rgba(209, 221, 234, 0.82));
}

:root:not([data-theme="light"]) body.mode-games #gamesEntryPanel {
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(151, 185, 210, 0.28), rgba(151, 185, 210, 0) 56%),
    linear-gradient(180deg, rgba(19, 37, 56, 0.82), rgba(12, 26, 40, 0.74));
}

body.mode-games .game-section[aria-hidden="false"] {
  padding-bottom: calc(var(--games-footer-h, 126px) + 12px);
  background: transparent;
}

@media (max-width: 480px) {
  body.mode-games .game-section-header {
    padding: 7px 8px;
  }

  body.mode-games .game-section-header .game-options-icon-btn,
  body.mode-games .game-section-header .banker-options-icon-btn {
    border-radius: 12px;
  }
}

/* =========================
   B) Optional Quick Navigation (currently hidden)
   ========================= */

/* Quick game-flap navigation row above the games tab rail. */

.games-quick-nav-btn {
  min-height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.games-quick-nav-btn:disabled {
  opacity: 0.45;
}

.games-quick-nav-more {
  border-style: dashed;
}

.games-live-hint {
  margin: 0 2px 6px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
  letter-spacing: 0.015em;
}

#gameTotalsCard.game-totals-card:not(.is-collapsed) {
  border-top-color: var(--panel-alt);
  background: var(--panel-alt);
}

#gameTotalsCard.game-totals-card:not(.is-collapsed) .game-totals-header {
  background: var(--panel-alt);
}

.games-launcher-shell.showing-all-games .games-quick-nav-more {
  border-style: solid;
}

:root:not([data-theme="light"]) .games-quick-nav-btn {
  background: linear-gradient(180deg, rgba(24, 44, 62, 0.94), rgba(15, 30, 44, 0.92));
  border-color: rgba(99, 138, 171, 0.42);
  color: #ddecf9;
}
@media (max-width: 480px) {
  .games-quick-nav {
    gap: 6px;
    margin-bottom: 5px;
  }

  .games-quick-nav-btn {
    min-height: 32px;
    border-radius: 11px;
    font-size: 11px;
  }

  .games-live-hint {
    font-size: 10px;
  }
}:root:not([data-theme="light"]) .game-options-panel .hcp-mode-btn[data-active="true"],
  :root:not([data-theme="light"]) .game-options-panel .skins-toggle-btn:has(input:checked),
  :root:not([data-theme="light"]) .game-options-panel .vegas-choice-btn:has(input:checked) {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.38), rgba(23, 109, 198, 0.34));
  border-color: rgba(106, 201, 255, 0.9);
  color: var(--on-accent);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(70, 177, 255, 0.3), 0 12px 24px -20px var(--shadow-deep);
}:root[data-font-size="large"] .btn,
  :root[data-font-size="large"] .game-toggle,
  :root[data-font-size="large"] .entry-switcher-btn,
  :root[data-font-size="large"] .hcp-mode-btn,
  :root[data-font-size="large"] .game-totals-tab,
  :root[data-font-size="large"] .course-option,
  :root[data-font-size="large"] .skins-toggle-btn,
  :root[data-font-size="large"] .vegas-choice-btn {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

:root[data-font-size="large"] input[type="text"],
:root[data-font-size="large"] input[type="number"],
:root[data-font-size="large"] select,
:root[data-font-size="large"] textarea {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Games mode: mirror score-area mini totals control styling for results/totals bar. */

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-chevron {
  position: static;
  right: auto;
  top: auto;
  transform: none;
}

:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label {
  color: #d5e6f7;
}

:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-chevron::before,
:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-chevron::before {
  color: #b6cde2;
  opacity: 0.92;
}

/* Hard fallback: if module updates clear the label span, render from data-label. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label {
  position: static;
  left: auto;
  transform: none;
  display: inline-block;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  visibility: visible;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar:has(.results-collapse-label:empty)::after {
  content: attr(data-label);
  display: inline-block;
  margin-left: 2px;
  color: #5d7387;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar:has(.results-collapse-label:empty)::after {
  color: #d5e6f7;
}

/* Final authority: keep Games results/totals control text highly visible. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar {
  border-color: #97aec7;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label,
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar:has(.results-collapse-label:empty)::after {
  color: var(--ink);
  opacity: 1;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label,
:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar:has(.results-collapse-label:empty)::after,
:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-chevron::before,
:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-chevron::before {
  text-shadow: none;
}

/* Deterministic label rendering for Games results bar (desktop + mobile).
   Use pseudo text so nested span overrides cannot make labels appear blank. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label,
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-chevron {
  display: none;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar::before {
  content: attr(data-label);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar::after {
  content: '\25B2\00a0Hide';
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar::after {
  content: '\25BC\00a0Show';
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

@media (min-width: 769px) {
  /* The seam overlay can sit above the results bar and fade text to near-invisible. */
  
}

/* Final authority: score-mode gear options panel must render above scorecard. */


/* The game tabs (Junk/Banker/Vegas/Add) must read as the SAME control as the
   Score / Games switcher directly below them — equal height. Match the
   switcher's natural, content-driven height with the SAME 10px vertical
   padding, instead of forcing the taller --footer-action-h (48px mobile /
   53px desktop) action-button size, which made the game tabs visibly bigger
   than Score/Games in both light and dark mode. An explicit `height` here is
   what kept winning the cascade and reintroducing the mismatch — don't restore
   it; keep both rows driven by padding + content so they stay locked. */





body.mode-games:has(.game-section[aria-hidden="false"] .results-card-wrap.is-collapsed) .games-card-footer {
  border-top: 0;
  padding-top: 2px;
}



@media (max-width: 768px) {

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    text-align: center;
    margin: 0;
    white-space: nowrap;
  }
}

/* Tighten score footer stack spacing between Score Options row and Score/Games row. */












/* Final authority: both footer shells are full-bleed edge-to-edge.
   Score-mode is intentionally NOT in this rule — at ≤1024px the score
   shell uses `left: 50%; transform: translate3d(-50%, 0, 0)` (line ~122)
   to center within the viewport with mobile-page-gutter padding. Forcing
   transform:none here was zeroing that centering, leaving the shell
   offset by half its width and clipping the right-side icon buttons off
   the right edge of the screen. Games shell still gets the override —
   it uses `left: gutter; right: gutter` positioning which doesn't depend
   on transform. */




/* Game Totals card sits ABOVE the score footer; align its left/right
   edges with the button rows below by matching the same inset. The
   inner Game Totals toggle has its own 4px margin so the visible
   button edge lands at the same x as +Player / Score buttons. */
body.mode-score #gameTotalsCard.game-totals-card {
  width: auto;
  max-width: none;
  margin-left: 17px;
  margin-right: 17px;
  box-sizing: border-box;
}

body.mode-games #gameTotalsCard.game-totals-card {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 768px) {
  body.mode-score #gameTotalsCard.game-totals-card {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .game-totals-toggle,
body.mode-games #gameTotalsCard.game-totals-card .game-totals-toggle {
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgb(197, 209, 222);
  border-radius: 18px;
  background: rgb(255, 255, 255);
  color: rgb(71, 85, 105);
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--shadow-tint) 0 8px 16px -14px;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .game-totals-toggle:hover,
body.mode-games #gameTotalsCard.game-totals-card .game-totals-toggle:hover,
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar:hover {
  filter: brightness(0.97);
}

@media (min-width: 769px) {

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) {
    bottom: 105px;
  }

}

/* =========================
   H) Desktop Audit + Icon Safety
   ========================= */

/* Desktop audit pass: widen score/games lanes and clean footer/options artifacts. */
@media (min-width: 960px) {
  body.mode-score .scorecard-container {
    max-width: min(1920px, calc(100vw - 8px));
    scrollbar-gutter: stable;
  }

  body.mode-games .game-section > *:not(.game-scroll-body):not(.game-section-header) {
    max-width: min(1120px, calc(100vw - 24px));
  }

  /* Scroll body must fill the full section width for the locked-scroll model. */
  body.mode-games .game-scroll-body {
    width: 100%;
    max-width: 100%;
  }

  /* Header spans the full DEVICE width on desktop (not just the entry-panel's
     1600px cap). Full-bleed technique: margin-left/right with negative values
     pulls the bar to the viewport edges. Inner content stays padded so title
     + controls align with the 1120px content lane.
     Uses a SOLID opaque background so the panel's textured gutter doesn't
     bleed through (--panel-alt is semi-transparent in both themes). */
  body.mode-games .game-section-header {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(12px, calc((100vw - 1120px) / 2));
    padding-right: max(12px, calc((100vw - 1120px) / 2));
    background: #f4f9ff;
    box-shadow: 0 2px 0 0 var(--line);
  }

  :root:not([data-theme="light"]) body.mode-games .game-section-header {
    background: #122436;
  }

  :root[data-font-size="large"] body.mode-games .game-section > * {
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
  }

  /* Results card spans full device width on desktop AND the inner collapse-bar
     + live-results-card fill it. No padding lane — the bar IS the row, sitting
     flush above the games-controls-shell. */
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
    left: 0;
    right: 0;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .game-section::before,
  .game-section::after,
  body.mode-games #gamesEntryPanel::before,
  body.mode-games #gamesEntryPanel::after {
    width: max(0px, calc(50vw - 560px));
  }

  :root[data-font-size="large"] .game-section::before,
  :root[data-font-size="large"] .game-section::after,
  :root[data-font-size="large"] body.mode-games #gamesEntryPanel::before,
  :root[data-font-size="large"] body.mode-games #gamesEntryPanel::after {
    width: 0;
    display: none;
  }

  .scorecard-footer-controls > .btn#scorecardOptionsToggle,
  .scorecard-footer-controls > .game-options-toggle#scorecardOptionsToggle {
    font-size: clamp(17px, calc(15px + (var(--font-size-step) * 0.5)), 21px);
    letter-spacing: 0.01em;
  }

  body.mode-score #scorecardOptionsPanel {
    font-size: calc(var(--text-md) + var(--font-data-adjust));
  }

  body.mode-score #scorecardOptionsPanel .btn,
  body.mode-score #scorecardOptionsPanel .hcp-mode-btn,
  body.mode-score #scorecardOptionsPanel .course-option {
    font-size: clamp(14px, calc(13px + (var(--font-size-step) * 0.65)), 20px);
  }

  body.mode-score #scorecardOptionsPanel .small {
    font-size: clamp(13px, calc(12px + (var(--font-size-step) * 0.55)), 18px);
  }
}.scorecard-clear-actions-toggle,
  .scorecard-theme-toggle {
  line-height: 1;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}.scorecard-clear-actions-toggle svg,
  .scorecard-theme-toggle svg {
  display: block;
}

/* =========================
   I) Mobile Safety Overrides
   ========================= */

/* iOS/mobile safety pass: keep results cards unmistakably visible above footer.
   (A z-index:700 wrap rule was removed 2026-06 — it never applied; the
   single-owner pin's ID :is() selector outranks it at z-index 180.) */
@media (max-width: 768px) {
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .live-results-card,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals {
    background: var(--panel-alt);
    border: 1px solid var(--line);
    color: var(--ink);
    min-height: 72px;
  }

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar {
    position: relative;
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
  }
}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css
   ========================================================================= */

:root[data-theme="light"] .games-quick-nav-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 252, 0.92));
  border-color: rgba(124, 150, 172, 0.34);
  color: #24435d;
}:root[data-theme="light"] .game-options-panel .hcp-mode-btn[data-active="true"],
  :root[data-theme="light"] .game-options-panel .skins-toggle-btn:has(input:checked),
  :root[data-theme="light"] .game-options-panel .vegas-choice-btn:has(input:checked) {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.28), rgba(23, 109, 198, 0.24));
  border-color: rgba(20, 93, 171, 0.86);
  color: #0f3f66;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 0 0 2px var(--accent-glow);
}

/* ============================================================================
   §2  (was results-card-overrides.css)  Results-card per-game refinements
   ============================================================================ */
/* Compact header trims top-heavy chrome while preserving sticky behavior. */
body.mode-games .game-section-header {
  min-height: 42px;
  padding: 8px 10px;
  gap: 8px;
}
/* Override older id-specific fixed positioning rules from earlier sections. */

/* Remove forced edge-to-edge look from older footer-sheet rules. */
body.mode-games #bankerSection[aria-hidden="false"] #bankerResultsWrap .banker-header-totals,
body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap .live-results-card,
body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap .live-results-card,
body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap .live-results-card,
body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap .live-results-card,
body.mode-games #bankerSection[aria-hidden="false"] #bankerResultsWrap.is-collapsed .results-collapse-bar,
body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap.is-collapsed .results-collapse-bar,
body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap.is-collapsed .results-collapse-bar,
body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap.is-collapsed .results-collapse-bar,
body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap.is-collapsed .results-collapse-bar {
  /* live-results-card / banker-header-totals — strip side borders so the
     inner table merges with the wrap edges; that's still correct. The
     collapsed results-collapse-bar lines below were ALSO in this list
     until 2026-05; they're handled separately by the
     `.results-card-wrap.is-collapsed .results-collapse-bar` rule
     further down (border: 2px solid, border-radius: 18px → proper pill),
     which the user expects to match score-mode's seam-free Game Totals
     button. Forcing `border-radius: inherit` here pulled the wrap's
     edge-to-edge 0px radius into the bar and turned its 2px top/bottom
     borders into visible horizontal seams. */
  border-left: none;
  border-right: none;
}
/* Honor the per-state shape rules: collapsed = full pill, expanded =
   top-rounded / bottom-flat so the bar continues into the table.
   Specificity matches the id-list above so this wins at mobile widths. */
body.mode-games #bankerSection[aria-hidden="false"] #bankerResultsWrap.is-collapsed .results-collapse-bar,
body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap.is-collapsed .results-collapse-bar,
body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap.is-collapsed .results-collapse-bar,
body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap.is-collapsed .results-collapse-bar,
body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap.is-collapsed .results-collapse-bar {
  border: 2px solid var(--line-soft);
  border-radius: 18px;
}

@media (max-width: 480px) {
  body.mode-games .game-section-header .game-options-icon-btn,
  body.mode-games .game-section-header .banker-options-icon-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
    left: auto;
    right: auto;
    bottom: auto;
    border-radius: 16px;
  }

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
    border-radius: 16px 16px 0 0;
  }

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
    border-radius: 16px;
  }
}

/* Quick game-flap navigation row above the games tab rail. */
.games-quick-nav {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 8px;
  margin: 2px 0 6px;
}

/* User preference: keep games footer to 2 rows (game tabs + score/games switch). */
.games-quick-nav,
.games-live-hint {
  display: none;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .live-results-card, body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals {
  border: none;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: none;
  max-height: min(36vh, 240px);
  overflow: auto;
}

/* Games mode: mirror score-area mini totals control styling for results/totals bar. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar {
  min-height: 36px;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid rgba(128, 153, 178, 0.3);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  background: color-mix(in srgb, var(--panel-alt) 92%, transparent);
  position: relative;
  display: flex;
  align-items: center;
}

/* Label rendering is done via ::before pseudo on .results-collapse-bar (see
   earlier rule at ~L353) — keep this span hidden in games mode so we don't
   render the title twice ("Junk Results | Junk Results ▼ Show"). */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label {
  display: none;
}
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-chevron::before,
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-chevron::before {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
  color: #4a6177;
}

/* Games footer controls: keep game buttons at the same compact height/position as score options. */

/* Unified card stack in Games mode: collapsed totals bar + footer should read as one surface. */
body.mode-games #bankerSection[aria-hidden="false"] #bankerResultsWrap, body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap, body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap, body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap, body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap, body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
  isolation: isolate;
  border-radius: 18px;
  border: 1px solid rgba(128, 153, 178, 0.34);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  box-shadow: 0 12px 20px -16px rgba(0, 0, 0, 0.32);
  transform: none;
}

@media (max-width: 768px) {
  /* Edge-to-edge on mobile/tablet so the card visually unifies with the
     games footer below it. Side borders + radius removed so the wrap reads
     as a continuous surface against the device bezel, matching the shell
     treatment on .games-controls-shell. */
  body.mode-games #bankerSection[aria-hidden="false"] #bankerResultsWrap,
  body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap,
  body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap,
  body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap,
  body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
    transform: none;
    width: auto;
    max-width: none;
    margin: 0;
    left: 0;
    right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  /* Keep the results-collapse-bar's natural pill shape at mobile widths.
     The earlier override forced `border-radius: 0` here, which turned
     the bar's 2px top/bottom borders into visible horizontal seams
     between the section above and the games tab rail below — score
     mode shows the same element as a self-contained pill, and games
     mode should match. The wrap above stays edge-to-edge (the rule
     immediately above this one); only the inner bar reverts to its
     rounded form so it reads as a chip floating inside the wrap. */
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
    /* Intentionally empty — rely on the unprefixed rules below
       (border-radius: 18px when collapsed, top-corners-only when
       expanded) instead of forcing flat edges. */
  }

  /* Hide the fixed-position side-gutter overlays in games mode at
     mobile/tablet widths. They paint position:fixed 8px-wide diagonal
     stripes on top of everything (z-index above the card), so the
     results-card-wrap appears inset by ~8px on each side even when it
     genuinely spans the full viewport. The panel itself has its own
     subtler diagonal background (#gamesEntryPanel), so the texture above
     the card is preserved — only the painted-over-the-card portion goes. */
  body.mode-games #gamesEntryPanel::before,
  body.mode-games #gamesEntryPanel::after {
    display: none;
  }

  /* The .game-section itself receives margin-left/right: var(--mobile-page-gutter)
     and border-radius: var(--mobile-card-radius) from main.css at mobile
     widths — that 8px inset + 22px radius is what was making the whole
     panel (table + Vegas Results bar + games footer) read as a single
     rounded card floating in front of the stripey panel background.
     In games mode we want the section to be flush against the device
     bezel so the card and footer don't appear inset. */
  body.mode-games .game-section {
    margin-left: 0;
    margin-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

/* Final cleanup: treat Games footer stack as one unified 3-row shell.
   Rows: results/totals bar + game toggles + score/games switcher.
   Edge-to-edge across all widths — the 8px outer gutter became a dark
   stripe on both mobile and desktop, breaking continuity with the
   surrounding shell. Outer gutter is now internal padding so the inner
   game-toggle and Score/Games buttons keep their original x-coords. */





body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
  width: auto;
  max-width: none;
}

/* Seam fix: the open game-section carries a downward drop-shadow
   (0 20px 38px -28px rgba(0,0,0,.86) on mobile / 0 18px 36px -24px on desktop,
   from main.css). Its only visible edge is the bottom one, which lands right
   on the games footer below and reads as a dark horizontal seam through the
   Results/Totals bar — most obvious in light mode where the shell carries no
   lift shadow of its own. In games mode the section fills the area between the
   sticky header and the fixed footer, so it needs no float shadow; drop it so
   the card + bar + footer read as one surface. */
body.mode-games .game-section[aria-hidden="false"] {
  box-shadow: none;
}

/* The Game-Totals bar/card is the TOP SEGMENT of the bottom pill in BOTH the
   collapsed and expanded states: flush on the fixed shell (no gap), square
   bottom corners, edge-to-edge — so it reads as one piece with the buttons.
   !important is load-bearing: the per-game wraps are positioned by an
   ID-selector rule in game-shell.css (#bankerResultsWrap etc., specificity
   2,1,1) that adds a gap below the bar; that gap (body background showing
   through) was the seam, and a class rule can't outrank two IDs without it.
   The wrap's own border-radius + overflow:hidden rounds the bottom corners,
   so they're squared here too. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
  bottom: calc(var(--games-footer-h, 126px) + var(--footer-bottom-offset, 0px)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* The bar itself, BOTH states: square bottom corners + NO bottom/side border,
   so it merges into the pill with no visible edge (top border + rounded top
   kept as the pill's top cap). !important beats the many ID-selector and
   media-query rules above that set the collapsed bar to a full border-radius
   (16px/18px) with side/bottom borders. Theme-agnostic — the dark-mode rules
   only restyle border-COLOR + background, not border width or radius, so this
   squares + de-borders the bar in light AND dark. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Expanded: bar sits ABOVE the live-results table and merges visually with
   it. Top corners rounded, bottom corners flat so the bar+table read as a
   single sheet. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-width: 1px;
  min-height: var(--footer-action-h);
  height: var(--footer-action-h);
  padding: 0 12px;
  border: 2px solid var(--line-soft);
  border-bottom: 0;
  background: linear-gradient(180deg, var(--surface-l1), var(--surface-l2));
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--mobile-surface-shadow-light);
}

/* Collapsed: bar IS the only visible element — match the score-mode collapsed
   Game Totals pill exactly (fully rounded, soft border, surface gradient, light
   shadow) so the games-mode footer reads identically to score-mode. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
  /* Top segment of the pill: rounded top, FLAT bottom that merges into the
     button rows below — no bottom border, no drop shadow, no gap. This is what
     removes the seam between "Game Totals" and the rest of the bottom pill. */
  border: 2px solid var(--line-soft);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  min-height: var(--footer-action-h);
  height: var(--footer-action-h);
  padding: 0 12px;
  /* Same surface as the pill below (.games-controls-shell + its ::before
     bridge), NOT the standard --surface card gradient. Matching it means the
     bar, the bridge, and the button shell read as one continuous surface even
     if the JS-measured --games-footer-h leaves a hairline gap. */
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(236, 244, 252, 0.97));
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  box-shadow: none;
}

/* Dark mode: a broad rule below re-adds a drop shadow to the collapse bar,
   which would re-draw the seam under the merged Game-Totals segment. Override
   it for the COLLAPSED bar only (more specific via .is-collapsed) so the
   merged-pill look holds in both themes; the expanded bar + toggle keep theirs. */
:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
  box-shadow: none;
  border-bottom: 0;
  /* Match the dark pill surface (games-mode.css dark .games-controls-shell)
     so the merged segment is continuous in dark mode too. */
  background: linear-gradient(180deg, rgba(18, 34, 49, 0.98), rgba(12, 25, 37, 0.97));
}
@media (min-width: 769px) {

  /* Specificity 221 (2 IDs + body + mode-class + attr + element class). No
     other rule competes at this level — !important removed. */
  body.mode-games #bankerSection[aria-hidden="false"] #bankerResultsWrap,
  body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap,
  body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap,
  body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap,
  body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap {
    bottom: 105px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
  }
}





:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar,
:root:not([data-theme="light"]) body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .game-totals-toggle,
:root:not([data-theme="light"]) body.mode-games #gameTotalsCard.game-totals-card .game-totals-toggle {
  border-color: rgba(96, 133, 163, 0.5);
  background: linear-gradient(180deg, rgba(25, 45, 63, 0.98), rgba(14, 29, 42, 0.96));
  color: #d5e6f7;
  box-shadow: rgba(0, 0, 0, 0.62) 0 8px 16px -14px;
}

/* Score-mode game totals row: restyled to match the games-mode results
   collapse-bar pattern ("Banker Totals ▼ Show"). Single flat bar with a
   shared --panel-alt background, label on left, status+chevron on right;
   Round Report sits flush on the right edge as a secondary tab with just
   a left-border seam — no floating pill backgrounds on individual buttons. */
/* Specificity 121 (body + .mode-score + #gameTotalsCard + .game-totals-card)
   already crushes any non-id rule on this element; competing rules at
   main.css/game-totals.css use only #gameTotalsCard or .game-totals-card
   in isolation (specificity 100 or 10). !important removed. */
body.mode-score #gameTotalsCard.game-totals-card {
  overflow: visible;
  border: 2px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
  background: var(--panel-alt);
  margin-bottom: 0;
  box-shadow: none;
}

:root:not([data-theme="light"]) body.mode-score #gameTotalsCard.game-totals-card {
  background: linear-gradient(180deg, rgba(22, 39, 55, 0.98), rgba(11, 24, 36, 0.96));
  border-color: var(--line-medium);
  box-shadow: var(--mobile-surface-shadow);
}

:root:not([data-theme="light"]) body.mode-score #gameTotalsCard.game-totals-card.is-collapsed {
  background: linear-gradient(180deg, rgba(22, 39, 55, 0.98), rgba(11, 24, 36, 0.96));
  border-color: var(--line-medium);
  box-shadow: var(--mobile-surface-shadow);
}

body.mode-score .footer-entry-switcher {
  margin-top: 12px;
}

body.mode-score #gameTotalsCard .game-totals-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  min-height: 44px;
}

body.mode-score #gameTotalsCard .game-totals-toggle,
body.mode-score #gameTotalsCard .game-totals-report-btn {
  min-height: 44px;
  height: 44px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

body.mode-score #gameTotalsCard .game-totals-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  position: relative;
  cursor: pointer;
}

body.mode-score #gameTotalsCard .game-totals-toggle:hover,
body.mode-score #gameTotalsCard .game-totals-report-btn:hover {
  background: color-mix(in srgb, var(--panel-alt) 85%, var(--accent) 15%);
}

body.mode-score #gameTotalsCard .game-totals-label {
  position: static;
  left: auto;
  transform: none;
  text-align: left;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  opacity: 1;
}

body.mode-score #gameTotalsCard .game-totals-toggle-state {
  margin-left: auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  opacity: 0.85;
}

body.mode-score #gameTotalsCard .game-totals-chevron {
  margin-left: 4px;
  opacity: 0.7;
}

body.mode-score #gameTotalsCard .game-totals-report-btn {
  /* Sits flush on the right as a secondary tab — left-border seam separates
     it from the Game Totals toggle without floating-pill borders/shadows. */
  margin: 0;
  padding: 0 16px;
  white-space: nowrap;
  border-left: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  opacity: 0.92;
}

body.mode-score #gameTotalsCard .game-totals-body {
  position: absolute;
  /* Inset from the panel edges so the tray reads as an elevated sheet over
     the scorecard, not a band fused into the footer dock. */
  left: 8px;
  right: 8px;
  bottom: calc(100% + 8px);
  padding: 8px;
  border: 1px solid rgba(136, 165, 191, 0.42);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-l1), var(--surface-l2));
  box-shadow:
    0 24px 48px -18px rgba(53, 84, 112, 0.45),
    0 4px 14px rgba(53, 84, 112, 0.14);
  max-height: min(58vh, 420px);
  overflow: auto;
  z-index: 120;
  animation: gg-totals-rise 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes gg-totals-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-score #gameTotalsCard .game-totals-body {
    animation: none;
  }
}

:root:not([data-theme="light"]) body.mode-score #gameTotalsCard .game-totals-body {
  border-color: rgba(115, 145, 171, 0.34);
  background: linear-gradient(180deg, rgba(19, 36, 52, 0.98), rgba(11, 23, 34, 0.97));
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.72),
    0 4px 14px rgba(0, 0, 0, 0.3);
}

body.mode-score #gameTotalsCard .game-totals-tabs-shell {
  display: block;
  margin-bottom: 8px;
}

/* With a single active game the one-chip tab row is pure noise — the tray
   content already identifies the game. Hide the whole shell so the totals
   table starts at the top of the tray. */
body.mode-score #gameTotalsCard .game-totals-tabs-shell:has(.game-totals-tab:only-child) {
  display: none;
  margin-bottom: 0;
}

body.mode-score #gameTotalsCard .game-totals-scroll-indicator,
body.mode-score #gameTotalsCard .gamesbar-scroll-indicator {
  display: none;
}

body.mode-score #gameTotalsCard.is-collapsed .game-totals-body,
body.mode-score #gameTotalsCard .game-totals-body[hidden] {
  display: none;
}

@media (max-width: 768px) {
  body.mode-score #gameTotalsCard .game-totals-header {
    gap: 6px;
  }

  body.mode-score #gameTotalsCard .game-totals-toggle,
  body.mode-score #gameTotalsCard .game-totals-report-btn {
    min-height: 40px;
    height: 40px;
    font-size: 12px;
  }

  body.mode-score #gameTotalsCard .game-totals-body {
    bottom: calc(100% + 6px);
    max-height: min(52vh, 360px);
  }
}

/* ============================================================================
   §3  (was scroll-model.css)  Games-mode locked-scroll model
   ============================================================================ */
/* 1. Lock the panel — nothing outside the scroll body scrolls vertically.
   Zero out base padding-bottom so section height: 100% fills the full
   panel height (base CSS has padding-bottom ~130px which would eat into it). */
body.mode-games #gamesEntryPanel {
  overflow: hidden;
  padding-bottom: 0;
}

/* Results card: anchor above the games footer. Later rules override bottom/left/right
   for mobile vs tablet vs desktop variants. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
  bottom: calc(var(--games-footer-h, 126px) + var(--footer-bottom-offset, 0px) + 10px);
  left: 0;
  right: 0;
}

/* 2. Active game section fills the panel height as a flex column. */
body.mode-games #gamesEntryPanel .game-section[aria-hidden="false"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: visible;
}

/* 3. Header never scrolls — it is always pinned at the top of the section. */
body.mode-games .game-section-header {
  flex-shrink: 0;
  position: relative;
}

/* 4. Scroll body is the sole vertical scroll container.
   Do NOT set touch-action here — it propagates down via intersection and
   would block horizontal panning on the table wraps inside. Default (auto)
   lets the browser handle pan-x and pan-y based on which ancestor can scroll. */
body.mode-games .game-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}

/* 5. Table wraps: horizontal scroll only inside the scroll body.
   overflow-y: hidden prevents the browser from coercing overflow-y to "auto"
   when overflow-x is set, which would create a competing vertical scroll container.
   max-height: none cancels the 62vh clip from responsive-layout.css (mobile rule)
   so all rows expand into the parent .game-scroll-body's scroll area.
   touch-action: pan-x pan-y allows both directions — wrap handles horizontal (it
   has overflow-x:auto), parent handles vertical (wrap has overflow-y:hidden so
   it can't scroll vertically and the gesture bubbles up). Do NOT use just pan-x
   here — that blocks vertical touches entirely and breaks all vertical scroll. */
body.mode-games .banker-wrap,
body.mode-games .vegas-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: auto;
}

/* 6. Collapsed-results corner-radius — clean up without locking overflow. */
body.mode-games .game-section[aria-hidden="false"]:has(.results-card-wrap.is-collapsed) {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

body.mode-games .game-section[aria-hidden="false"]:has(.results-card-wrap.is-collapsed) .banker-wrap,
body.mode-games .game-section[aria-hidden="false"]:has(.results-card-wrap.is-collapsed) .vegas-wrap,
body.mode-games .game-section[aria-hidden="false"]:has(.results-card-wrap.is-collapsed) .skins-half-wrap {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: auto;
}

/* ===========================================================================
   PINNED RESULTS — single owner.
   THE pin for the games-mode results cards (.results-card-wrap /
   #bankerResultsWrap etc.): position:fixed + viewport offsets + z-index live
   HERE and only here. Consolidated 2026-06 from four competing blocks:
     - game-shell.css ID pins (z 35; its bottom offset — footer + 4px — and
       left/right:0 were the winning values and were merged into this rule;
       its z-index lost to this rule's 180),
     - this file's old ≤768px "safety" z-index:700 (never won: the ID :is()
       selector below outranks it),
     - pill-light-theme.css's structural pin (z 33, bottom footer+0; only won
       for non-ID wraps — bestBall/ninePoint — which now use this rule too,
       shifting them up 4px and from z 33 to 180, above the z-34 footer shell
       like every other game),
     - dead ≤480px left/right/bottom re-pins further down this file (removed).
   The ID :is() selector (2,2,1) must stay: it outranks main.css's leftover
   per-game media rules (≤768px inset / ≥960px centering) that would
   otherwise spring back to life. The class selector covers wraps without
   listed IDs (bestBall, ninePoint).
   Related, deliberately NOT moved: the open section's contain/margin
   neutralization + per-game card chrome at the end of this file. */
body.mode-games :is(#bankerSection, #vegasSection, #hiloSection, #junkSection, #wolfSection)[aria-hidden="false"] :is(#bankerResultsWrap, #vegasResultsWrap, #hiloResultsWrap, #junkResultsWrap, #wolfResultsWrap),
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
  position: fixed;
  left: 0;
  right: 0;
  /* Flush above the fixed games footer. JS sets --games-footer-h. */
  bottom: calc(var(--games-footer-h, 126px) + var(--footer-bottom-offset, 0px) + 4px);
  z-index: 180;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  overflow: visible;
  isolation: isolate;
}

/* Keep results cards interactive so clipped content can be scrolled into view. */

/* Collapse bar sits flush ABOVE the games-controls-shell as a connected row.
   Top corners rounded (matches the section/shell geometry); bottom corners
   FLAT so the bar visually merges with the shell below — no floating-chip
   appearance. Border-bottom: 0 because the shell's border-top is the seam. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar {
  pointer-events: auto;
  order: 1;
  min-height: 44px;
  border: 1px solid rgba(128, 153, 178, 0.34);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .live-results-card, body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals {
  pointer-events: auto;
  order: 0;
  margin: 0;
  border: 1px solid rgba(128, 153, 178, 0.34);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  max-height: min(36vh, 240px);
  overflow: auto;
}

/* Expanded: results-card-wrap is .live-results-card on TOP (rounded corners)
   + .results-collapse-bar BELOW (flat all around, acts as a separator strip). */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar {
  margin-top: 0;
  border-radius: 0;
  border-top: 1px solid rgba(128, 153, 178, 0.34);
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .live-results-card,
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .banker-header-totals {
  display: none;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

/* (Two ≤480px re-pin blocks removed 2026-06: an edge-to-edge left/right:0
   that is now redundant with the single-owner pin above, and a
   bottom: footer+10px that never won — the ID :is() pin outranked it for the
   five main games and pill-light-theme's old pin outranked it for the rest.) */

@media (min-width: 769px) {
  /* Results card spans full device width on tablet+desktop. Inner content lane
     is constrained by the wrap's padding (set in pinned-results.css @media
     (min-width: 960px)) so the visual bar is full-width but the bar/totals
     content stays in a centered 1120px lane on wide screens. */
  body.mode-games :is(#bankerSection, #vegasSection, #hiloSection, #junkSection, #wolfSection)[aria-hidden="false"] :is(#bankerResultsWrap, #vegasResultsWrap, #hiloResultsWrap, #junkResultsWrap, #wolfResultsWrap),
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
    left: 0;
    right: 0;
    transform: none;
    width: 100vw;
    max-width: 100vw;
  }

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .live-results-card,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ===========================================================================
   PINNED RESULTS — single owner, supporting rules (moved here 2026-06).
   =========================================================================== */

/* STRUCTURAL: the open game-section must drop its layout containment for the
   fixed results-card-wrap to escape to the viewport (moved verbatim from
   pill-light-theme.css, where this theme-agnostic rule was hiding).
   game-shell.css puts `contain: layout style paint` on .game-section; the
   base author noted containment is safe ONLY while no descendant uses
   position:fixed — we pin the wrap, so we drop contain on the open section
   to honor that invariant. !important kept on `contain` because it is a
   critical layout dial — makes the override explicit and survives future
   base-CSS changes. */
body.mode-games .game-section[aria-hidden="false"] {
  position: relative;
  contain: none !important;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Per-game pinned-card chrome (moved verbatim from game-shell.css, where it
   sat next to the now-merged ID pins). Edge-to-edge card: no side borders,
   square corners. The ID specificity (2,3,1) is what keeps main.css's
   leftover ≤768px / ≥960px per-game border+radius variants dead — do not
   weaken these selectors. */
body.mode-games #bankerSection[aria-hidden="false"] #bankerResultsWrap .banker-header-totals,
body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap .live-results-card,
body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap .live-results-card,
body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap .live-results-card,
body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap .live-results-card {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

/* Tighter pinned-card height caps on narrow screens (moved verbatim from
   game-shell.css). Overrides the generic max-height: min(36vh, 240px) by
   ID specificity. */
@media (max-width: 900px) {
  body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap .live-results-card,
  body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap .live-results-card {
    max-height: 156px;
    overflow-y: auto;
  }

  body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap .live-results-card,
  body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap .live-results-card {
    max-height: 220px;
    overflow-y: auto;
  }
}