/* =============================================================================
   Pinned-results / games-mode overrides — final layer
   Extracted from pinned-results.css (was the "Appended from main.css" tail
   that grew over time). Loads AFTER pinned-results.css so the rules here win
   cascade collisions. Contains the per-game results-card overrides and
   compact-header design refinements.
   ============================================================================= */

   Bottom Sheet Results + Compact Game Header Variant
   Appended from main.css
   ========================= */

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

/* 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. */
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);
}

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

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink);
  flex: 1;
}

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

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

/* 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 {
  border-left: none;
  border-right: none;
  border-radius: inherit;
}

@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 !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    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;
}
@media (max-width: 480px) {}

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

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

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

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

/* Keep results cards interactive so clipped content can be scrolled into view. */
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 {
}

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:not(.is-collapsed) .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 {
  max-height: min(36vh, 240px);
  overflow: auto;
}

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

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

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

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

@media (max-width: 480px) {
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
  }
}

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

  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 {
  }
}
/* 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 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-width: 1px !important;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label {
  position: static;
  left: auto;
  transform: none;
  display: inline-block;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #5d7387 !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 {
  font-size: 11px !important;
  font-weight: 700 !important;
  opacity: 0.8 !important;
  color: #4a6177 !important;
}

/* 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 {
}
/* Games footer controls: keep game buttons at the same compact height/position as score options. */
body.mode-games .games-controls-shell {
  border-bottom: 0 !important;
}

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

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

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 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-width: 0 !important;
}
@media (max-width: 768px) {
  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 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    left: var(--mobile-page-gutter) !important;
    right: var(--mobile-page-gutter) !important;
  }
}

@media (max-width: 768px) {}
/* 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 .games-controls-shell {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding-left: var(--mobile-page-gutter, 8px) !important;
  padding-right: var(--mobile-page-gutter, 8px) !important;
  border: 1px solid var(--line-cool) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(236, 244, 252, 0.97)) !important;
  box-shadow: 0 -12px 26px -22px rgba(44, 75, 104, 0.38) !important;
}

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 {
  min-height: 50px !important;
  padding: 0 8px 4px !important;
}
body.mode-games .games-controls-shell .games-card-footer {
  padding-top: 2px !important;
}
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
  width: auto !important;
  max-width: none !important;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) {
  bottom: calc(var(--games-footer-h, 126px) + var(--footer-bottom-offset, 0px) + 4px) !important;
}

body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed {
  bottom: calc(var(--games-footer-h, 126px) + var(--footer-bottom-offset, 0px) + 4px) !important;
}

/* Expanded/deployed: keep the toggle visually button-like (same pill treatment). */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap:not(.is-collapsed) .results-collapse-bar {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid rgb(197, 209, 222) !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) 0px 8px 16px -14px !important;
}

/* Collapsed: bar IS the only visible element — style it exactly like a game pill. */
body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid rgb(197, 209, 222) !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) 0px 8px 16px -14px !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 #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 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

:root:not([data-theme="light"]) body.mode-games .games-controls-shell {
  border-color: var(--line-medium) !important;
  background: linear-gradient(180deg, rgba(18, 34, 49, 0.98), rgba(12, 25, 37, 0.97)) !important;
  box-shadow: 0 -14px 30px -24px var(--shadow-deep) !important;
}

: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 {
  border-color: rgba(96, 133, 163, 0.5) !important;
  background: linear-gradient(180deg, rgba(25, 45, 63, 0.98), rgba(14, 29, 42, 0.96)) !important;
  color: #d5e6f7 !important;
  box-shadow: rgba(0, 0, 0, 0.62) 0 8px 16px -14px !important;
}

/* 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. */
body.mode-score #gameTotalsCard.game-totals-card {
  overflow: visible !important;
  border: 2px solid var(--line) !important;
  border-bottom: 0 !important;
  border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0 !important;
  background: var(--panel-alt) !important;
  box-shadow: none !important;
}

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

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

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

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

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

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

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

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 !important;
  padding: 0 16px !important;
  white-space: nowrap !important;
  border-left: 1px solid var(--line) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 0.92 !important;
}

body.mode-score #gameTotalsCard .game-totals-body {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(100% + 8px) !important;
  padding: 8px !important;
  border: 1px solid rgba(136, 165, 191, 0.3) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, var(--surface-l1), var(--surface-l2)) !important;
  box-shadow: 0 20px 38px -26px rgba(53, 84, 112, 0.32) !important;
  max-height: min(58vh, 420px) !important;
  overflow: auto !important;
  z-index: 120 !important;
}

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

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

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

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

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

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