/* =========================
 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 {
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.scorecard-controls-shell,
.games-controls-shell {
  /* 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;
  -webkit-transform: translateZ(0);
  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;
  -webkit-transform: translateZ(0);
  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;
}
.games-controls-shell .game-toggle-item {
  scroll-snap-align: start;
}
.games-controls-shell .gamesbar::-webkit-scrollbar {
  display: none;
}
.games-controls-shell .game-toggle-item {
  flex: 0 0 auto;
  min-width: 128px;
}

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

@media (min-width: 769px) {
  body.mode-games .games-controls-shell::before {
    display: none;
  }
}
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 — ui-polish.css's light-theme rule
   sets border-top: 1px (0,3,0) which 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 {
    padding-left: 0;
    padding-right: 0;
  }
  body.mode-games .games-controls-shell {
    z-index: 600;
  }
  body.mode-games .games-controls-shell::before {
    display: none;
  }
}
body.mode-games .games-controls-shell {
  /* border:/border-left:/border-right: keep !important — ui-polish.css's
   light-theme rule sets border-top at (0,3,0) which would otherwise win
   over our (0,2,0) and change the light-theme border-top color. */
  border-bottom: 0 !important;
  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) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  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::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 40px;
  /* Pure background bridge joining the fixed pill to the content above.
   NO border: the old 1px var(--line-cool) frame drew a hard seam between
   the Game-Totals bar and the button pill — score-mode has no such overlay
   and reads clean. Keep only the gradient so the surface is continuous. */
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(236, 244, 252, 0.97));
  pointer-events: none;
  border: 0;
}
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);
}
: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));
  border-color: var(--line-medium);
}
.scorecard-controls-shell:has(#gameTotalsCard:not([hidden])) {
  border-top-color: transparent;
}
.games-controls-shell .gamesbar {
  padding-right: 12px;
}

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

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