/* =========================
   Bottom Sheet Results + Compact Game Header Variant
   ========================= */

/* =========================
  A) Base Mode Scaffolding
  ========================= */

/* Compact header trims top-heavy chrome while preserving sticky behavior. */
body.mode-games .game-section-header {
  min-height: 42px;
  padding: 8px 10px;
  gap: 8px;
}

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 !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 14px;
}

/* In-viewport results card behavior for all games (integrated, not footer-like). */
body.mode-games .game-section[aria-hidden="false"] {
  padding-bottom: calc(var(--games-footer-h, 126px) + 12px);
}

/* Render desktop-style textured side gutters in both modes at all widths.
   This keeps any empty side space visually consistent instead of flat grey. */
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%),
    repeating-linear-gradient(135deg, rgba(136, 165, 191, 0.18) 0 10px, rgba(136, 165, 191, 0.08) 10px 20px),
    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%),
    repeating-linear-gradient(135deg, rgba(99, 138, 171, 0.24) 0 10px, rgba(99, 138, 171, 0.12) 10px 20px),
    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. */
body.mode-score #gameTotalsCard.game-totals-card {
  width: calc(100% - 16px);
  max-width: calc(100% - 16px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 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 !important;
}

@media (max-width: 1024px) {
  body.mode-score .scorecard-controls-shell {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
  }

  body.mode-score .scorecard-controls-shell .scorecard-card-footer,
  body.mode-score .scorecard-controls-shell .footer-entry-switcher {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
}

/* 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%),
    repeating-linear-gradient(135deg, rgba(136, 165, 191, 0.18) 0 10px, rgba(136, 165, 191, 0.08) 10px 20px),
    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%),
    repeating-linear-gradient(135deg, rgba(99, 138, 171, 0.24) 0 10px, rgba(99, 138, 171, 0.12) 10px 20px),
    linear-gradient(180deg, rgba(19, 37, 56, 0.82), rgba(12, 26, 40, 0.74));
}

body.mode-games .game-section[aria-hidden="false"] {
  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 {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 8px;
  margin: 2px 0 6px;
}

.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) !important;
  background: var(--panel-alt) !important;
}

#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;
  }
}

/* User preference: keep games footer to 2 rows (game tabs + score/games switch). */
.games-quick-nav,
.games-live-hint {
}: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-toggle-btn:has(input:checked),
  :root:not([data-theme="light"]) .game-options-panel .vegas-choice-btn:has(input:checked),
  :root:not([data-theme="light"]) .game-options-panel .vegas-opt-flag:has(input:checked) {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.38), rgba(23, 109, 198, 0.34)) !important;
  border-color: rgba(106, 201, 255, 0.9) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  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) !important;
}: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-toggle-btn,
  :root[data-font-size="large"] .vegas-choice-btn,
  :root[data-font-size="large"] .vegas-opt-flag {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

: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 !important;
  padding-bottom: 5px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* 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 {
  position: relative;
  display: flex;
  align-items: center;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar {
}

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;
}

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

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 {
}

/* Dark theme: keep Games totals control visually aligned with dark footer cards. */
: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 .results-collapse-label {
  color: #d5e6f7 !important;
}

: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 !important;
  opacity: 0.92 !important;
}

/* 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 {
  visibility: visible !important;
}

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 !important;
}

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) !important;
  opacity: 1 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

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 {
}

: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;
}

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

/* 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 !important;
}

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 .results-collapse-bar::before {
  content: attr(data-label);
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
}

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

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

/* Requested polish: square bottom corners and remove seam gap above footer. */
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,
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar {
  margin-bottom: 0 !important;
}

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) {
}

@media (min-width: 769px) {
  /* The seam overlay can sit above the results bar and fade text to near-invisible. */
  body.mode-games .games-controls-shell::before {
    display: none !important;
  }
}

/* Final shape/spacing authority: square bottom corners + no visible seam gap. */
body.mode-games #bankerSection[aria-hidden="false"] #bankerResultsWrap .results-collapse-bar,
body.mode-games #vegasSection[aria-hidden="false"] #vegasResultsWrap .results-collapse-bar,
body.mode-games #hiloSection[aria-hidden="false"] #hiloResultsWrap .results-collapse-bar,
body.mode-games #junkSection[aria-hidden="false"] #junkResultsWrap .results-collapse-bar,
body.mode-games #wolfSection[aria-hidden="false"] #wolfResultsWrap .results-collapse-bar,
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar {
  transform: translateY(2px) !important;
}

/* Final authority: score-mode gear options panel must render above scorecard. */
body.mode-score .scorecard-controls-shell {
  z-index: 35 !important;
}

body.mode-score .scorecard-controls-shell.has-main-options-open {
  z-index: 120 !important;
  overflow: visible !important;
}

body.mode-score .header-options-panel.footer-mounted-options {
  z-index: 121 !important;
}es #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 {
}

/* =========================
   F) Games Footer Shell Unification
   ========================= */

/* Games footer controls: keep game buttons at the same compact height/position as score options. */
body.mode-games .games-controls-shell {
}

body.mode-games .games-controls-shell::before {
  content: "";
  position: absolute;
  left: var(--mobile-page-gutter, 8px);
  right: var(--mobile-page-gutter, 8px);
  top: -14px;
  height: 14px;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(238, 246, 252, 0.97));
  pointer-events: none;
}

body.mode-games .games-controls-shell .games-card-footer {
}

body.mode-games .games-controls-shell .game-toggle {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
}

body.mode-games .games-controls-shell .footer-entry-switcher .entry-switcher-btn {
  min-height: 40px !important;
  height: 40px !important;
}

/* Unified card stack in Games mode: collapsed totals bar + footer should read as one surface. */
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 {
}

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

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed {
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
}

body.mode-games:has(.game-section[aria-hidden="false"] .results-card-wrap.is-collapsed) .games-controls-shell {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top-width: 0 !important;
  border-top-color: var(--line-soft) !important;
  box-shadow: 0 14px 28px -22px rgba(53, 84, 112, 0.28) !important;
}

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

body.mode-games:has(.game-section[aria-hidden="false"] .results-card-wrap.is-collapsed) .games-controls-shell .footer-entry-switcher {
  margin-top: 0 !important;
  border-top-color: rgba(136, 165, 191, 0.16) !important;
}

@media (max-width: 768px) {
  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 {
  }
}

@media (max-width: 768px) {
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar {
    position: relative !important;
  }

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

/* Tighten score footer stack spacing between Score Options row and Score/Games row. */
.scorecard-controls-shell .scorecard-card-footer {
  padding-bottom: 1px !important;
}

.scorecard-controls-shell .footer-entry-switcher {
  padding-top: 0 !important;
}

/* =========================
   G) Full-Bleed Footer + Toggle Pill Final Pass
   ========================= */

/* Final cleanup: treat Games footer stack as one unified 3-row shell.
   Rows: results/totals bar + game toggles + score/games switcher. */
body.mode-games .games-controls-shell {
}

body.mode-games .games-controls-shell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 40px;
  border: 1px solid var(--line-cool);
  border-bottom: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(236, 244, 252, 0.97));
  pointer-events: none;
}

body.mode-games .games-controls-shell .games-card-footer,
body.mode-games .games-controls-shell .games-launcher-shell,
body.mode-games .games-controls-shell .footer-entry-switcher {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.mode-games .games-controls-shell .games-card-footer {
}

body.mode-games .games-controls-shell {
  border-top-width: 0 !important;
}

body.mode-games .games-controls-shell .games-card-footer {
}

body.mode-games .games-controls-shell .footer-entry-switcher {
  margin-top: 0 !important;
}

body.mode-games .games-controls-shell .games-launcher-shell {
  padding-top: 0 !important;
}

body.mode-games .games-controls-shell .gamesbar-scroll-indicator {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}

/* 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. */
body.mode-games .games-controls-shell {
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

body.mode-score .scorecard-controls-shell {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Align the score-mode button row (+Player / Score Options / icon trio)
   to start and end on the same x-coordinate as the Score / Games entry
   switcher buttons in the row below. Without this, +Player butts against
   the shell's left edge while the Score button sits ~21px inside due to
   the entry switcher's outer margin (16px) + inner padding (5px). Match
   that combined inset here on desktop only — mobile widths can't spare
   the extra ~16px without wrapping the "Score Options" label, and the
   misalignment there is only ~8px (one mobile-page-gutter) instead of
   ~21px on desktop. Games-mode card-footer keeps its own padding rules
   and is unaffected. */
body.mode-score .scorecard-controls-shell .scorecard-card-footer {
  padding-left: 21px !important;
  padding-right: 21px !important;
}

body.mode-games .games-controls-shell .games-card-footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 768px) {
  body.mode-score .scorecard-controls-shell .scorecard-card-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 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 !important;
  max-width: none !important;
  margin-left: 17px !important;
  margin-right: 17px !important;
}

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

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

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
}

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

/* Final pill treatment for the results toggle in both expanded and collapsed states. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar,
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
}

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 !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid rgb(197, 209, 222) !important;
  border-radius: 18px !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(71, 85, 105) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: var(--shadow-tint) 0 8px 16px -14px !important;
}

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) !important;
}

@media (min-width: 769px) {
  body.mode-games .games-controls-shell,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
  }

  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 !important;
  }

  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 {
  }
}

/* =========================
   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)) !important;
    scrollbar-gutter: stable !important;
  }

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

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

  /* 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 !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: max(12px, calc((100vw - 1120px) / 2)) !important;
    padding-right: max(12px, calc((100vw - 1120px) / 2)) !important;
    background: #f4f9ff !important;
    box-shadow: 0 2px 0 0 var(--line) !important;
  }

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

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

  /* 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 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

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

  :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 !important;
    display: none !important;
  }

  .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) !important;
    letter-spacing: 0.01em;
  }

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

  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) !important;
  }

  body.mode-score #scorecardOptionsPanel .small {
    font-size: clamp(13px, calc(12px + (var(--font-size-step) * 0.55)), 18px) !important;
  }
}

.scorecard-main-options-icon,
.scorecard-clear-actions-toggle,
.scorecard-theme-toggle {
  line-height: 1 !important;
  overflow: hidden !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.scorecard-main-options-icon svg,
.scorecard-clear-actions-toggle svg,
.scorecard-theme-toggle svg {
  display: block;
}

:root:not([data-theme="light"]) body.mode-games .games-controls-shell {
}

:root:not([data-theme="light"]) body.mode-games .games-controls-shell::before {
  border-color: var(--line-medium);
  background: linear-gradient(180deg, rgba(18, 34, 49, 0.98), rgba(12, 25, 37, 0.97));
}

: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 {
}

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

/* iOS/mobile safety pass: keep results cards unmistakably visible above footer. */
@media (max-width: 768px) {
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
    z-index: 700 !important;
  }

  body.mode-games .games-controls-shell {
    z-index: 600 !important;
  }

  /* Footer decorative bridge can overlap results cards in iOS browser mode. */
  body.mode-games .games-controls-shell::before {
    display: none !important;
  }

  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) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    min-height: 72px;
  }

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

/* =========================================================================
   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-toggle-btn:has(input:checked),
  :root[data-theme="light"] .game-options-panel .vegas-choice-btn:has(input:checked),
  :root[data-theme="light"] .game-options-panel .vegas-opt-flag:has(input:checked) {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.28), rgba(23, 109, 198, 0.24)) !important;
  border-color: rgba(20, 93, 171, 0.86) !important;
  color: #0f3f66 !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 0 0 2px var(--accent-glow) !important;
}