/* =========================
 Footer Dock (single owner)
 Sole authority for .scorecard-controls-shell and .games-controls-shell.
 Rules consolidated here from main/scorecard/shell-layout/score-mode/
 games-mode/ui-polish/pill-light-theme in load order. Loaded LAST so this
 file is the final word on the footer docks — do not style these shells
 elsewhere.
 ========================= */

html.ios-pwa-mode .scorecard-controls-shell,
html.ios-pwa-mode .games-controls-shell {
  /* Hard-pin to the physical bottom in iOS PWA mode so JS viewport-math
   errors during transitions never cause the shell to float. */
  bottom: 0 !important;
  padding-bottom: 0;
  box-shadow: 0 20px 0 0 var(--panel-alt);
}
.scorecard-controls-shell,
.games-controls-shell {
  /* [perf] No backdrop-filter here: the background gradient below is fully
     opaque, so a blur would be 100% occluded — pure GPU/memory waste the
     compositor re-runs every time content behind this fixed dock changes (i.e.
     every score +/- and banker bet tap). The opaque fill gives the identical
     visual. See notes/PERFORMANCE_UPGRADE.md §A.3. */
  /* Fully opaque so the panel's textured-stripe gutters
   (rendered via #gamesEntryPanel::before/::after at z-index:0) don't bleed
   through and make the footer rows look like they live on different surfaces. */
  background: linear-gradient(180deg, rgb(18, 36, 54), rgb(10, 22, 34));
  border-top-color: rgba(151, 185, 210, 0.14);
  box-shadow: 0 -18px 40px -28px rgba(0, 0, 0, 0.85);
}

@media (max-width: 768px) {
  .scorecard-controls-shell,
  .games-controls-shell {
    border: 1px solid var(--line-haze);
    overflow: hidden;
  }
  body.mode-score .scorecard-controls-shell:has(#gameTotalsCard:not([hidden])) {
    overflow: visible;
  }
  .scorecard-controls-shell,
  .games-controls-shell {
    left: 0;
    right: 0;
    bottom: var(--footer-bottom-offset, 0px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-color: rgba(136, 165, 191, 0.22);
    box-shadow: var(--mobile-dock-shadow);
    padding-left: var(--mobile-page-gutter);
    padding-right: var(--mobile-page-gutter);
  }
  .scorecard-controls-shell:has(#gameTotalsCard:not([hidden])) {
    border-top-color: transparent;
  }
  .scorecard-controls-shell:has(#gameTotalsCard.is-collapsed:not([hidden])) .scorecard-card-footer::before {
    display: none;
  }
  .scorecard-controls-shell:has(#gameTotalsCard.is-collapsed:not([hidden])) .scorecard-card-footer {
    padding-top: 0;
  }
}

@media (min-width: 960px) {
  body.mode-score #scoreEntryPanel > .scorecard-controls-shell {
    z-index: 35;
  }
}
:root[data-theme="light"] .scorecard-controls-shell,
:root[data-theme="light"] .games-controls-shell {
  background: linear-gradient(180deg, rgb(250, 253, 255), rgb(239, 246, 253));
  box-shadow: 0 -18px 40px -30px rgba(36, 71, 102, 0.22);
}
.scorecard-controls-shell {
  background: var(--panel-alt);
  border-top: 2px solid var(--line);
  border-left: none;
  border-right: none;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
  padding-bottom: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--footer-bottom-offset, 0px);
  z-index: 35;
  transform: translateZ(0);
  backface-visibility: hidden;
}
body.mode-score .scorecard-controls-shell {
  overflow: visible;
}
.scorecard-controls-shell.has-main-options-open {
  z-index: 120;
  overflow: visible;
}
#scoreEntryPanel > .scorecard-controls-shell {
  order: 3;
  margin-top: auto;
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .games-controls-shell .games-launcher-shell {
    margin: 0;
  }
}

@media (min-width: 960px) {
  .scorecard-controls-shell,
  .games-controls-shell {
    max-width: min(1920px, 100vw);
    margin-left: auto;
    margin-right: auto;
  }
  body.mode-score #scoreEntryPanel > .scorecard-controls-shell {
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    align-self: stretch;
  }
}
.games-controls-shell {
  background: var(--panel-alt);
  border-top: 2px solid var(--line);
  border-left: none;
  border-right: none;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
  padding-bottom: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--footer-bottom-offset, 0px);
  /* Anchor by `bottom` only. A fixed footer must keep top/height auto so it
     hugs the viewport bottom at its content height. Without these, a transient
     `top`/explicit height (seen during games-mode entry) stretches the shell
     up the panel — it ends at the panel's short bottom instead of the
     viewport, leaving a large gap below the Score/Games pill (the "games
     footer floats too high" bug). !important survives any stray inline/CSS
     top or height that the entry transition produces. */
  top: auto !important;
  height: auto !important;
  max-height: none !important;
  z-index: 34;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.games-controls-shell .games-launcher-shell {
  margin: 0;
  width: 100%;
  position: relative;
}
.games-controls-shell .gamesbar {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-right: 12px;
}
.games-controls-shell .game-toggle-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 128px;
}
.games-controls-shell .gamesbar::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1024px) {
  body.mode-score .scorecard-controls-shell {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    transform: none;
  }
  body.mode-score .scorecard-controls-shell .scorecard-card-footer,
  body.mode-score .scorecard-controls-shell .footer-entry-switcher {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

body.mode-score .scorecard-controls-shell.has-main-options-open {
  z-index: 120;
  overflow: visible;
}
body.mode-games .games-controls-shell .game-toggle {
  min-height: 0;
  height: auto;
  padding: 10px 12px;
  border-radius: 18px;
}

@media (min-width: 769px) {
  body.mode-games .games-controls-shell .game-toggle {
    min-height: var(--footer-action-h);
    height: var(--footer-action-h);
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  /* Mode-switcher (Score / Games) pill uses natural button height (~40px) on
     mobile, not --footer-action-h (48px) which is for action buttons — it's
     secondary nav and looked oversized next to the score-mode pill. MOBILE
     ONLY: at >=769px the shared rule keeps both modes the same height. */
  body.mode-games .games-controls-shell .footer-entry-switcher .entry-switcher-btn {
    min-height: 0;
    height: auto;
  }
}
body.mode-games:has(.game-section[aria-hidden="false"] .results-card-wrap.is-collapsed) .games-controls-shell {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-width: 0;
  border-top-color: var(--line-soft);
  box-shadow: 0 14px 28px -22px rgba(53, 84, 112, 0.28);
}
body.mode-games:has(.game-section[aria-hidden="false"] .results-card-wrap.is-collapsed) .games-controls-shell .footer-entry-switcher {
  margin-top: 0;
  border-top-color: rgba(136, 165, 191, 0.16);
}
.scorecard-controls-shell .scorecard-card-footer {
  padding-bottom: 1px;
}
.scorecard-controls-shell .footer-entry-switcher {
  padding-top: 0;
}
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;
  border: 0;
  box-shadow: none;
}
body.mode-games .games-controls-shell .footer-entry-switcher {
  margin-top: 0;
}
body.mode-games .games-controls-shell .games-launcher-shell {
  padding-top: 0;
}
body.mode-games .games-controls-shell .gamesbar-scroll-indicator {
  margin-top: 0;
  margin-bottom: 2px;
}
body.mode-games .games-controls-shell {
  /* border-top-width keeps !important — this file's own later
   :root[data-theme="light"] .games-controls-shell rule (line ~372,
   specificity 0,3,0) would otherwise win over our (0,2,0). */
  border-top-width: 0 !important;
  margin-left: 0;
  margin-right: 0;
  transform: none;
}
body.mode-score .scorecard-controls-shell {
  z-index: 35;
  margin-left: 0;
  margin-right: 0;
}
/* Align the score-mode button row (+Player / Score Options / icon trio) to
   start/end on the same x as the Score / Games entry switcher below it. The
   switcher has an outer margin (16px) + inner padding (5px) = ~21px inset;
   match it here so +Player doesn't butt against the shell edge. Desktop only —
   the @media(max-width:768px) block below resets it to 0 (mobile can't spare
   the ~16px without wrapping the "Score Options" label). */
body.mode-score .scorecard-controls-shell .scorecard-card-footer {
  padding-left: 21px;
  padding-right: 21px;
}
body.mode-games .games-controls-shell .games-card-footer {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 768px) {
  body.mode-score .scorecard-controls-shell .scorecard-card-footer {
    /* Keep the action row aligned with the Score/Games rail below it. The
       shared mobile-page-gutter is intentionally zero for full-bleed tables,
       so the footer needs its own small inset instead of inheriting that
       table setting. */
    --footer-inline-gutter: clamp(6px, 2vw, 8px);
    padding-left: var(--footer-inline-gutter);
    padding-right: var(--footer-inline-gutter);
  }
  body.mode-games .games-controls-shell .games-card-footer {
    --footer-inline-gutter: clamp(6px, 2vw, 8px);
    padding-left: var(--footer-inline-gutter);
    padding-right: var(--footer-inline-gutter);
  }
  .scorecard-controls-shell .footer-entry-switcher,
  .games-controls-shell .footer-entry-switcher {
    /* Use the same gutter on both stacked footer rows so their button edges
       form one clean vertical line at every phone width. */
    padding-left: var(--footer-inline-gutter, clamp(6px, 2vw, 8px));
    padding-right: var(--footer-inline-gutter, clamp(6px, 2vw, 8px));
  }
  body.mode-games .games-controls-shell {
    z-index: 600;
  }
}
body.mode-games .games-controls-shell {
  /* Only border-top-width (above) needs !important, to beat this file's own
     later :root[data-theme="light"] .games-controls-shell rule (0,3,0).
     No other rule in the cascade competes for border-bottom/border/
     border-left/border-right on .games-controls-shell, so those don't
     need !important. */
  border-bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  padding-left: var(--mobile-page-gutter, 8px);
  padding-right: var(--mobile-page-gutter, 8px);
  border: 1px solid var(--line-cool);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow: visible;
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(236, 244, 252, 0.97));
  box-shadow: 0 -12px 26px -22px rgba(44, 75, 104, 0.38);
}
body.mode-games .games-controls-shell .games-card-footer {
  min-height: 50px;
  padding: 0 8px 4px;
  padding-top: 2px;
}
:root:not([data-theme="light"]) body.mode-games .games-controls-shell {
  border-color: var(--line-medium);
  background: linear-gradient(180deg, rgba(18, 34, 49, 0.98), rgba(12, 25, 37, 0.97));
  box-shadow: 0 -14px 30px -24px var(--shadow-deep);
}
.scorecard-controls-shell:has(#gameTotalsCard:not([hidden])) {
  border-top-color: transparent;
}

@media (max-width: 480px) {
  .games-controls-shell .game-toggle-item {
    min-width: 96px;
  }
}
:root[data-theme="light"] .scorecard-controls-shell,
:root[data-theme="light"] .games-controls-shell {
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
}
:root[data-theme="light"] .scorecard-controls-shell,
:root[data-theme="light"] .games-controls-shell,
:root[data-theme="light"] .scorecard-controls-shell .scorecard-card-footer,
:root[data-theme="light"] .games-controls-shell .games-card-footer {
  background: var(--header-surface);
  color: var(--header-ink);
}
:root[data-theme="light"] .scorecard-controls-shell,
:root[data-theme="light"] .games-controls-shell,
:root[data-theme="light"] .scorecard-controls-shell .scorecard-card-footer,
:root[data-theme="light"] .games-controls-shell .games-card-footer {
  border-top: 0;
  box-shadow: none;
}
:root[data-theme="light"] .scorecard-controls-shell .btn,
:root[data-theme="light"] .games-controls-shell .btn,
:root[data-theme="light"] .scorecard-controls-shell .entry-switcher-btn,
:root[data-theme="light"] .games-controls-shell .entry-switcher-btn,
:root[data-theme="light"] .scorecard-controls-shell .theme-toggle {
  background: linear-gradient(180deg, #ffffff, #eef2f7);
  border-color: rgba(26, 42, 61, 0.18);
  color: var(--header-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(26, 42, 61, 0.18);
}
.scorecard-controls-shell,
.games-controls-shell {
  /* Bottom clearance below the Score/Games pill. The full safe-area inset
     (~34px on iOS) left a large empty band of footer background under the
     buttons ("pill sits too high"). Use a small clearance that just clears
     the home indicator instead. */
  padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 16px)) !important;
}
/* Android draws edge-to-edge UNDER the system nav bar, so the footer must
   clear --android-safe-bottom (the injected nav-bar height) or the buttons
   hide behind it. No extra padding beyond that — keeps the gap minimal. */
html.is-android-native .scorecard-controls-shell,
html.is-android-native .games-controls-shell {
  padding-bottom: max(10px, var(--android-safe-bottom, 16px)) !important;
}
/* The outer shell already clears Android's system nav bar. Keep the
   Score/Games row itself tight so the button does not float above an
   extra duplicate safe-area band. */
html.is-android-native .entry-switcher.footer-entry-switcher {
  padding-bottom: 8px;
}
/* The reduced clearance puts the Score/Games pill near the shell's bottom
   edge; make sure nothing along the score-mode footer chain clips the pill's
   rounded bottom corners (the flat-cut-button bug). */
body.mode-score .scorecard-controls-shell,
body.mode-score #scoreEntryPanel,
body.mode-score .scorecard-controls-shell .footer-entry-switcher {
  overflow: visible !important;
}
body.mode-games:has(.game-section[aria-hidden="false"]) .games-controls-shell {
  border-top: 0 !important;
  /* When a game section sits flush above the footer the two should read as
     one continuous surface (matching the border-top:0 above). The shell's
     upward "lift" shadow used to cast a dark band UP onto the results/totals
     bar — a visible horizontal seam through the Junk/Banker/… Results button.
     Kill it here; the lift is only wanted when nothing is docked above. */
  box-shadow: none;
}
/* Dark theme sets a heavier upward shadow (0 -14px 30px -24px) earlier in this
   file at equal specificity — re-assert none for dark so it can't win on order. */
:root:not([data-theme="light"]) body.mode-games:has(.game-section[aria-hidden="false"]) .games-controls-shell {
  box-shadow: none;
}
:root[data-theme="light"] body.mode-games:has(.game-section[aria-hidden="false"]) .games-controls-shell {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* Same equal-specificity/source-order fix as the dark-theme block above:
     the collapsed-only rule earlier in this file (line ~233) sets a real
     box-shadow at specificity (0,6,1), which otherwise wins over the
     general "docked" rule's box-shadow:none (0,4,1) whenever the results
     card is collapsed — the default state. That shadow band is exactly
     the pale/dark seam reported above the games-controls-shell in light
     theme. Only the dark-theme case had a re-assert; light theme was
     missing its own, so the seam only ever showed there. */
  box-shadow: none;
}

/* =========================================================================
   Short viewports (phone landscape): compact the footer dock — the action
   row + Score/Games switcher otherwise stack ~110px of chrome on a ~390px
   screen. max-height gate only, so portrait phones are unaffected.
   ========================================================================= */
@media (max-height: 520px) {
  .scorecard-controls-shell,
  .games-controls-shell {
    --footer-action-h: 34px;
    padding-bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) - 16px)) !important;
  }

  .scorecard-controls-shell .scorecard-card-footer .btn,
  .games-controls-shell .games-card-footer .btn {
    min-height: 32px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .footer-entry-switcher .entry-switcher-btn {
    min-height: 30px;
    height: auto;
    padding: 5px 12px;
  }

  body.mode-games .games-controls-shell .game-toggle {
    padding: 5px 10px;
  }

  body.mode-games .games-controls-shell .games-card-footer {
    min-height: 0;
  }
}