/* =========================
   Manito Golf Games — Optimized CSS
   Version: 2.0
   Last Updated: November 13, 2025

   Features:
   - CSS custom properties for maintainability
   - Consolidated game table components
   - Simplified light theme
   - Responsive design with iOS optimizations
   ========================= */

/* The UA `[hidden] { display: none }` rule has specificity (0,1,0), tied with
   any single class selector. Class rules in author CSS load later → win. So
   `<div class="foo" hidden>` will render whenever `.foo { display: flex }`
   exists — silently breaking the semantic intent of the attribute. The
   `!important` here makes the attribute mean what it says regardless of
   later class rules. If you need to override hidden, toggle the attribute,
   don't fight the CSS. */
[hidden] { display: none !important; }

/* ---- CSS Custom Properties ---- */
/* ============================================================================
   Canonical responsive breakpoints — use these for any NEW @media rules.
   (CSS @media conditions cannot consume custom properties, so these stay
   as documentation rather than tokens. Existing intermediate breakpoints
   600/640/720/900/960 are deliberate exceptions for layout transitions
   between the three canonical zones — keep using them in their existing
   files but prefer one of the three below for new rules.)

     Phone     →  @media (max-width: 480px)     [or min-width: 481px]
     Tablet    →  @media (max-width: 768px)     [or min-width: 769px]
     Desktop   →  @media (max-width: 1024px)    [or min-width: 1024px]

   Earlier near-miss values (380px/760px/1000px) were aligned to the
   nearest canonical break in the 2026-05 standardization pass.
   ============================================================================ */
:root {
  /* Build identifier. Embedded for cache and asset-pipeline diagnostics. */
  --sm-bundle: "sm-bundle-7K9Q3MEW2NPLZJVB";

  /* Spacing tokens */
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;

  /* Border radius tokens */
  --radius-sm: 6px;

  /* Touch target sizes (iOS optimized). Scale up with --font-grow so buttons
     accommodate larger labels without clipping their content. */
  --touch-min: calc(44px + var(--font-grow));
  --touch-comfortable: calc(48px + var(--font-grow));
  
  /* Z-index layers (in-content stacking: sticky table chrome, dropdowns) */
  --z-sticky-col: 30;
  --z-sticky-header: 3;
  --z-sticky-corner: 4;
  --z-sticky-first-col: 5;
  --z-shadow: 6;
  --z-dropdown: 10;

  /* Overlay / dialog z-index scale — the app-chrome ladder above page
     content. Surveyed 2026-06 across stylesheet/*.css and the
     style.cssText sites in docs/js; these tokens are the documented home
     for every full-screen layer. New overlay code MUST use a token;
     existing consumers (listed below) migrate incrementally.

     token            value   role / who lives there today
     ---------------  ------  ------------------------------------------------
     --z-overlay      10000   full-screen confirm scrims + toast panel:
                              js/init/reset-clear.js (cloud-session confirms),
                              js/init/lifecycle.js (reload veil),
                              js/cloudsync/qr/qr-code.js (QR share overlay),
                              ui-polish.css .toast-notification
     --z-scanner      10010   QR camera scanner (js/cloudsync/qr/qr-scan.js) —
                              one step above --z-overlay so it covers the
                              share overlay that launches it
     --z-dialog       10050   standard app dialogs + blocking status
                              overlays: js/init/reset-clear.js
                              (chooseEraseAction),
                              js/cloudsync/qr/share-mode-dialog.js,
                              js/ui/join-success-toast.js,
                              game-options-ui.css modal (10050/10051),
                              ui-dialogs.css (.ui-dialog-scrim)
     --z-overlay-top  21050   overlays that must beat the welcome overlay
                              (welcome-overlay.css, 20000) and the
                              delete-confirm panel (scorecard.css, 20060):
                              js/cloudsync/bridges/course-picker.js
     --z-dialog-top   21100   dialogs above --z-overlay-top:
                              js/cloudsync/ui/dialogs.js (round-name +
                              sign-in-provider prompts)
     --z-progress     30050   blocking session-join progress veil
                              (js/cloudsync/session/join-progress.js)
     --z-critical     99999   debug/diagnostic readouts that must beat
                              everything
                              (js/cloudsync/realtime/remote-apply.js) */
  --z-overlay: 10000;
  --z-scanner: 10010;
  --z-dialog: 10050;
  --z-overlay-top: 21050;
  --z-dialog-top: 21100;
  --z-progress: 30050;
  --z-critical: 99999;
  
  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.25s;
  --transition-slow: 0.3s;
  
  /* Font sizes (responsive clamp). Each token includes --font-size-step so
     the small/medium/large user setting scales typography globally. */
  --font-size-step: 0px;
  --text-xs: calc(11px + var(--font-size-step));
  --text-sm: calc(12px + var(--font-size-step));
  --text-base: calc(13px + var(--font-size-step));
  --text-md: calc(14px + var(--font-size-step));
  --text-lg: calc(15px + var(--font-size-step));
  --text-xl: calc(16px + var(--font-size-step));
  --text-2xl: calc(18px + var(--font-size-step));
  --text-3xl: clamp(calc(18px + var(--font-size-step)), 3.5vw, calc(28px + var(--font-size-step)));

  /* Unified app font stack — System (SF Pro / Roboto / Segoe). */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Font scaling controls
      Medium (default): descriptive +1px, data/non-descriptive +3px */
    --font-descriptive-adjust: 1px;
    --font-data-adjust: 3px;
    /* Container/button growth tied to font scaling so larger fonts get a
       proportionally taller box and don't clip. ~1.5× the font step keeps
       things balanced (small: -1.5px, large: +7.5px). */
    --font-grow: calc(var(--font-size-step) * 1.5);

  /* Scorecard typography tokens (--text-base/--text-xl already include --font-size-step) */
  --scorecard-header-font-size: calc(var(--text-base) + var(--font-data-adjust));
  --scorecard-data-font-size: calc(var(--text-xl) + var(--font-data-adjust));
  --scorecard-name-font-size: var(--scorecard-data-font-size);
  
  /* Table dimensions */
  --table-cell-width: 48px;
  --table-input-width: 44px;
  --table-ch-width: 60px;
  --games-launcher-gap: 6px;
  --score-header-height-scale: 1.1;
  --score-sticky-head-top: 0px;
  --game-header-height-scale: 1.1;
  --game-sticky-head-top: 0px;
  --score-sticky-par-top: 39px;
  --score-sticky-hcp-top: 100px;
  --footer-action-h-desktop: 53px;
  --footer-action-h-mobile: 48px;
  --footer-action-h: var(--footer-action-h-desktop);
  --app-dvh: 100dvh;
  --footer-bottom-offset: 0px;
  --safe-bottom-inset: 0px;
  --footer-row-bottom-clearance: 8px;
  --safe-top-dynamic: 0px;
  --safe-top-inset: var(--safe-top-dynamic);
}

/* In standalone/PWA mode, bootstrap a conservative safe-area default so the
   first CSS paint does not clip under the status bar before JS measures.
   JS (syncSafeTopInset) will overwrite --safe-top-dynamic with the exact px. */

/* Native iOS shell: same first-paint bootstrap need as the PWA. env() is live
   (it self-corrects to the real notch inset the moment WKWebView receives the
   UIKit safe-area insets, which can land after first paint), and the 20px
   floor covers the pre-arrival window. JS overwrites with exact px after boot.
   The class is injected at document start by ViewController's WKUserScript. */
html.ios-native-app {
  --safe-top-dynamic: max(20px, env(safe-area-inset-top, 0px));
}

html.ios-pwa-mode {
  --safe-top-dynamic: 20px;
  /* env() falls back to the static 24/20 values for non-home-indicator devices
     (iPhone 8 Plus / SE), and scales up on Pro / Max devices where the home
     indicator is ~34px tall. The packaged WKWebView extends edge-to-edge with
     contentInsetAdjustmentBehavior = .never, so without env() the footer rows
     land directly on the home indicator. */
  --safe-bottom-inset: max(24px, env(safe-area-inset-bottom, 0px));
  --footer-row-bottom-clearance: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}

/* Native Android app: targetSdk 35 (Android 15) forces edge-to-edge, so the
   WebView draws behind the system navigation bar. Without bottom safe-area
   clearance the fixed footer's Score/Games switcher lands behind the nav bar
   and looks hidden under the controls row above it.

   Unlike iOS WKWebView, Android WebView does NOT feed the system-bar heights
   into env(safe-area-inset-*) — it resolves to 0 except for display cutouts —
   so MainActivity measures the insets natively and injects them as
   --android-safe-top / --android-safe-bottom (see injectSafeAreaInsets()).
   Prefer those; fall back to env() then a static floor for the first paint
   before the native listener fires. js/layout-sync.js mirrors this when it
   writes the inline --safe-bottom-inset so it never clobbers the clearance
   back to 0 on Android. */
html.is-android-native {
  --safe-bottom-inset: max(16px, var(--android-safe-bottom, env(safe-area-inset-bottom, 0px)));
  --footer-row-bottom-clearance: max(16px, calc(var(--android-safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px));
  --safe-top-dynamic: var(--android-safe-top, env(safe-area-inset-top, 0px));
}

/* Standalone PWA: ensure fixed footer shells reach the actual screen bottom.
   Anchor explicitly to bottom:0, give the panel-alt background enough
   padding-bottom to fill into the home-indicator safe area, and pin html/body
   to the dynamic viewport so iOS doesn't shrink the layout viewport. */
html.ios-pwa-mode,
html.ios-pwa-mode body {
  height: var(--app-dvh, 100dvh);
  min-height: var(--app-dvh, 100dvh);
}



:root[data-font-size="small"] {
  --font-size-step: -3px;
  --font-descriptive-adjust: 0px;
  --font-data-adjust: 1px;
}

:root[data-font-size="medium"] {
  --font-size-step: 0px;
  --font-descriptive-adjust: 1px;
  --font-data-adjust: 3px;
}

:root[data-font-size="large"] {
  --font-size-step: 8px;
  --font-descriptive-adjust: 2px;
  --font-data-adjust: 6px;
}

/* On desktop, small and medium settings use noticeably smaller base sizes */
@media (min-width: 900px) {
  :root[data-font-size="small"] {
    --font-size-step: -5px;
  }

  :root[data-font-size="medium"] {
    --font-size-step: 0px;
  }

  :root[data-font-size="large"] {
    --font-size-step: 9px;
  }
}.btn,
  .cloud-code-badge-btn,
  .entry-switcher-btn,
  .game-toggle,
  .font-size-btn,
  .scorecard-add-player-btn,
  .game-options-toggle {
  min-height: calc(var(--btn-base-h, 40px) + var(--font-grow));
}

#scorecard input,
.score-input,
.ch-input {
  min-height: calc(30px + var(--font-grow));
}

/* ---- Base / Resets ---- */
* {
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Re-enable text selection for inputs and editable content */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* (The active-user beacon that lived here as a body::after background-image
   was dead — the decorative body::after rule later in this file resets the
   `background` shorthand, same specificity, later source order. It now fires
   as a JS Image ping in docs/js/init/lifecycle.js.) */

/* Screen reader only utility class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Prevent iOS zoom on input focus — must be 16px or larger */
input, select, textarea {
  font-size: max(16px, 1em);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  background-color: var(--bg);
  color: var(--ink);
  color-scheme: dark;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* NOTE: Do NOT add padding-bottom: env(safe-area-inset-bottom) here — the
     fixed footer shells (.scorecard-controls-shell / .games-controls-shell)
     own the bottom safe-area. Body padding-bottom can cause iOS standalone
     PWAs to anchor fixed children above the home indicator, leaving a gap. */
  padding: var(--safe-top-inset) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top-inset);
  /* Status-bar safe-area fill blends into the header surface (.top-pinned-shell)
     rather than the lighter page background, so the iOS status-bar region reads
     as one continuous surface with the header below it. --header-surface swaps
     per theme (see the token dictionary). */
  background: var(--header-surface);
  pointer-events: none;
  z-index: 30;
}

/* Ensure status-bar region is filled on iOS (WebKit) and Android Chrome */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    background-color: var(--bg);
  }
}

@media (display-mode: standalone) {
  html,
  body {
    background-color: var(--bg);
  }
}

/* ---- Global font scaling ---- */
/* Descriptive text: +1px at medium */
.small,
.note,
.meta,
.pill,
.warn,
.control label,
.junk-ach-labels,
#saveStatus,
#playerCountDisplay {
  font-size: calc(var(--text-sm) + var(--font-descriptive-adjust));
}

h1 {
  font-size: calc(var(--text-3xl) + var(--font-descriptive-adjust));
}

.small {
  font-size: calc(var(--text-xs) + var(--font-descriptive-adjust));
}

.control label {
  font-size: calc(var(--text-base) + var(--font-descriptive-adjust));
}

/* Data / non-descriptive text: +3px at medium */
th,
td,
.btn,
.theme-toggle,
.game-toggle,
.name-edit,
.score-input,
.ch-input,
.par-row input,
.hcp-row input,
select,
input[type="number"],
input[type="text"] {
  font-size: calc(var(--text-base) + var(--font-data-adjust));
}

.btn,
.theme-toggle,
.game-toggle {
  font-size: calc(var(--text-lg) + var(--font-data-adjust));
}

.name-edit {
  font-size: calc(var(--text-md) + var(--font-data-adjust));
}

.score-input,
.ch-input,
.par-row input,
.hcp-row input,
input[type="number"],
input[type="text"] {
  font-size: calc(var(--text-xl) + var(--font-data-adjust));
}

/* Game tables: enforce font scaling on every cell, input, and inner element.
   Uses class selectors so it covers all six tables:
     .banker-table  -> #bankerTable, #wolfTable
     .vegas-table   -> #vegasTable, #hiloTable
     .skins-table   -> #skinsTable
     .junk-table    -> #junkTable
   Universal descendant selector (* ) makes sure spans, labels, small,
   strong, b, em, a, p, etc. inside cells also resize. !important is
   required because some inputs have a more specific id+attribute rule
   (e.g. input[type="number"]) that would otherwise win the cascade. */
.banker-table,
.vegas-table,
.skins-table,
.junk-table,
.live-results-table,
.banker-header-totals-table,
.banker-table *,
.vegas-table *,
.skins-table *,
.junk-table *,
.live-results-table *,
.banker-header-totals-table * {
  font-size: calc(12px + var(--font-data-adjust) + var(--font-size-step)) !important;
}

/* =============================================================================
   Visual Refresh
   Modern app-style finish with richer surfaces and stronger mobile framing.
   ============================================================================= */
:root {
  --bg: #07141f;
  --panel: rgba(13, 26, 39, 0.9);
  --panel-solid: #0c1926;
  --panel-alt: rgba(18, 36, 54, 0.94);
  --panel-alt-solid: #112335;
  --ink: #eff8ff;
  --muted: #93a9bb;
  --accent: #1f9d55;
  --line: rgba(143, 170, 192, 0.22);
  --warn: #ffbf69;
  --danger: #ff6b6b;
  --shadow: rgba(2, 12, 22, 0.42);
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --mobile-page-gutter: 8px;
  --mobile-results-inset: 9px;
  --mobile-card-radius: 22px;
  --mobile-dock-radius: 30px;
  --mobile-surface-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.78);
  --mobile-surface-shadow-light: 0 18px 36px -24px rgba(53, 84, 112, 0.24);
  --mobile-dock-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.72);
  --game-menu-inset: 12px;
  --game-menu-mobile-inset: 10px;
  --game-menu-radius: 24px;
  --game-menu-control-radius: 20px;
  --game-menu-chip-radius: 18px;
}
/* =========================================================================
   Repeated-color tokens (Tier 1B / P3 from refactor plan).
   Each captures an rgba() value that was repeated 7-21+ times across the
   stylesheet. Theme-agnostic — applies to both dark and light. Add new ones
   here, never invent a fresh rgba() literal inline.
   ========================================================================= */
:root {
  --line-soft:    rgba(136, 165, 191, 0.24);  /* 21× — neutral border tint */
  --line-medium:  rgba(96, 133, 163, 0.34);   /* 17× — stronger border tint */
  --line-warm:    rgba(112, 148, 178, 0.3);   /* 10× — warm-light border  */
  --line-mute:    rgba(136, 165, 191, 0.26);  /* 10× — softer border tint */
  --line-cool:    rgba(136, 165, 191, 0.28);  /*  8× — slightly stronger  */
  --line-haze:    rgba(151, 185, 210, 0.16);  /*  8× — very faint outline */
  --line-base:    rgba(128, 153, 178, 0.2);   /*  8× — pure neutral 20%   */

  --shadow-deep:  rgba(0, 0, 0, 0.72);        /* 11× — heavy drop shadow */
  --shadow-navy:  rgba(21, 32, 43, 0.2);      /* 10× — tinted dim shadow */
  --shadow-tint:  rgba(36, 71, 102, 0.2);     /*  8× — light theme shadow */

  --hi-thin:      rgba(255, 255, 255, 0.03);  /* 12× — barely-there gloss */
  --hi-faint:     rgba(255, 255, 255, 0.05);  /*  8× — faint gloss layer */
  --hi-soft:      rgba(255, 255, 255, 0.08);  /*  7× — gentle gloss      */
  --hi-medium:    rgba(255, 255, 255, 0.24);  /*  8× — medium overlay    */
  --hi-strong:    rgba(255, 255, 255, 0.94);  /*  7× — nearly opaque white */
  --hi-bright:    rgba(255, 255, 255, 0.96);  /*  9× — almost solid white */

  --accent-btn-bg:   rgba(20, 93, 171, 0.78);  /* 8× — accent button bg  */
  --accent-glow:     rgba(35, 132, 220, 0.24); /* 7× — accent focus ring */

  --surface-l1:   rgba(242, 247, 252, 0.98);  /* 8× — light card surface */
  --surface-l2:   rgba(230, 239, 248, 0.96);  /* 8× — light card surface (alt) */
  --surface-d1:   rgba(27, 47, 66, 0.96);     /* 7× — dark card surface */
  --surface-d2:   rgba(16, 31, 46, 0.94);     /* 7× — dark card surface (alt) */
}

/* =========================================================================
   Theme-swap token dictionary — DARK values. Each token below is re-valued
   in the :root[data-theme="light"] dictionary block near the bottom of this
   file (which carries the full token → dark → light table). A rule styled
   with these tokens needs NO :root[data-theme="light"] override — when
   migrating a dark-literal/light-override pair, point the dark rule at the
   token and delete the light override.
   ========================================================================= */
:root {
  /* header / status-bar chrome */
  --header-surface: rgba(7, 20, 31, 0.96);
  --header-line: rgba(147, 169, 187, 0.12);
  --header-ink: var(--ink);

  /* results / games cards */
  --card-bg: linear-gradient(180deg, rgba(19, 39, 57, 0.98), rgba(13, 26, 39, 0.96));
  --card-bg-hover: linear-gradient(180deg, rgba(27, 52, 74, 0.98), rgba(18, 36, 54, 0.96));
  --card-line: rgba(151, 185, 210, 0.18);
  --card-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.82);
  --card-shadow-soft: 0 14px 28px -24px rgba(0, 0, 0, 0.68);
  --card-divider: var(--line-haze);

  /* buttons / interactive chrome */
  --btn-bg: var(--panel);             /* flat default .btn face (header.css base) */
  --btn-line: var(--line);
  --chrome-btn-bg: linear-gradient(180deg, var(--hi-soft), var(--hi-thin));  /* glossy face */
  --chrome-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 22px -18px rgba(0, 0, 0, 0.8);
  --accent-press: linear-gradient(180deg, #2384dc, #176dc6);  /* active/selected fill */
  --accent-press-line: #176dc6;
  --accent-soft-bg: #14202a;          /* .btn.accent face (header.css base) */
  --accent-soft-line: #224;

  /* text */
  --ink-strong: var(--ink);           /* near-black body text on light chrome */

  /* boxes / tables */
  --box-bg: var(--panel);             /* .control-box/.team-box/.opts-box face */
  --box-line: var(--line);
  --table-head-bg: var(--panel-alt);  /* universal thead th / tfoot td */

  /* status tints */
  --warn-soft-bg: rgba(255, 180, 84, 0.14);   /* .view-mode-banner fill */
  --warn-line: var(--warn);
  --ok-ink: #a7f3c8;                  /* live/success badge (utilities.css) */
  --ok-bg: rgba(28, 118, 67, 0.28);
  --ok-line: rgba(104, 211, 145, 0.55);

  /* theme-agnostic (NOT re-valued in light) */
  --on-accent: #ffffff;               /* text on accent/press fills */
  --success-strong: #28a745;          /* scorecard ring green */
  --danger-strong: #dc3545;           /* strong danger red (rings, delete) */
}

body {
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at top left, rgba(31, 157, 85, 0.16), transparent 32%),
    radial-gradient(circle at top right, rgba(78, 140, 255, 0.18), transparent 36%),
    linear-gradient(180deg, #0b1a29 0%, #07141f 54%, #05111a 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.06), transparent 18%),
    radial-gradient(circle at 78% 10%, rgba(31, 157, 85, 0.09), transparent 16%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%);
  z-index: 0;
}

.top-pinned-shell,
.sticky-nav-bar {
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.top-pinned-shell,
.sticky-nav-bar {
  background: linear-gradient(180deg, rgba(7, 20, 31, 0.96), rgba(7, 20, 31, 0.82));
  border-bottom: 1px solid var(--header-line);
}
.header-inner {
  padding: 0 2px 0;
  gap: 0;
}

h1 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
}.control,
  .cloud-control,
  .scorecard-container,
  .game-section,
  #gameTotalsCard.game-totals-card,
  .entry-switcher,
  .scorecard-card-footer,
  .games-card-footer {
  box-shadow: 0 18px 36px -24px var(--shadow);
}.cloud-control {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-color: color-mix(in srgb, var(--line) 84%, transparent);
}.btn,
  .theme-toggle,
  .game-toggle,
  .entry-switcher-btn,
  .hcp-mode-btn,
  .cloud-code-badge-btn,
  .cloud-status-badge,
  .game-totals-tab,
  .scorecard-add-player-btn,
  .scorecard-theme-toggle,
  .scorecard-clear-actions-toggle,
  .scorecard-scan-icon-btn {
  border-radius: 18px;
  transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}.btn,
  .theme-toggle,
  .cloud-code-badge-btn,
  .game-totals-tab,
  .scorecard-add-player-btn,
  .scorecard-theme-toggle,
  .scorecard-clear-actions-toggle {
  border-color: rgba(151, 185, 210, 0.2);
  background: var(--chrome-btn-bg);
  box-shadow: var(--chrome-btn-shadow);
}.btn:hover,
  .theme-toggle:hover,
  .cloud-code-badge-btn:hover,
  .game-totals-tab:hover,
  .scorecard-add-player-btn:hover,
  .scorecard-theme-toggle:hover,
  .scorecard-clear-actions-toggle:hover,
  .game-toggle:hover,
  .entry-switcher-btn:hover,
  .hcp-mode-btn:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--hi-soft), 0 16px 28px -20px rgba(0, 0, 0, 0.85);
}

.font-size-btn.active,
.hcp-mode-btn[data-active="true"],
.entry-switcher-btn.active,
.game-toggle.active,
.game-totals-tab.is-active {
  background: linear-gradient(135deg, rgba(78, 140, 255, 0.28), rgba(31, 157, 85, 0.26));
  border-color: rgba(106, 201, 255, 0.66);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 30px -22px rgba(31, 157, 85, 0.65);
}#cloudSnapshotsToggle,
  #cloudCreateBtn,
  .cloud-control-compact .btn,
  .cloud-status-badge,
  .cloud-code-badge-btn {
  border-color: rgba(151, 185, 210, 0.2);
  background: var(--chrome-btn-bg);
  box-shadow: var(--chrome-btn-shadow);
  color: var(--ink);
}#cloudSnapshotsToggle:hover,
  #cloudCreateBtn:hover,
  .cloud-control-compact .btn:hover,
  .cloud-status-badge:hover,
  .cloud-code-badge-btn:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--hi-soft), 0 16px 28px -20px rgba(0, 0, 0, 0.85);
}

/* Preserve semantic status color, but in the same visual style. */
.cloud-status-badge[data-live="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.entry-switcher {
  background: linear-gradient(180deg, rgba(18, 36, 54, 0.9), rgba(13, 26, 39, 0.88));
  border-color: var(--line-haze);
  box-shadow: 0 16px 28px -22px rgba(2, 12, 22, 0.8);
}
.scorecard-container {
  /* Fully opaque — the sticky name/total columns must never show the body
     background through them on any platform (Android WebView in particular). */
  background: linear-gradient(180deg, rgb(18, 36, 54), rgb(12, 24, 36));
  border-color: rgba(151, 185, 210, 0.18);
  box-shadow: 0 24px 50px -36px rgba(0, 0, 0, 0.9);
}

.game-section {
  background: linear-gradient(180deg, rgba(18, 36, 54, 0.94), rgba(11, 24, 37, 0.94));
  border-top-color: var(--line-haze);
  border-bottom-color: var(--line-haze);
}
/* Per-user game-visibility pref: when the user hides a game type, the
   item gets data-game-hidden-by-pref="true". !important guards against
   game-shell.css's `.game-toggle-item { display: inline-flex }` (spec 10,
   same as ours) winning by source order — game-shell loads after main.css,
   so without !important the hidden item would still render. */
.game-toggle-item[data-game-hidden-by-pref="true"] {
  display: none !important;
}
#gameTotalsCard.game-totals-card {
  border-color: var(--line-haze);
  background: var(--card-bg);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.82);
}

#gameTotalsCard.game-totals-card.is-collapsed {
  border-width: 1px;
  border-style: solid;
  border-radius: 18px;
  margin-bottom: 0;
}

#gameTotalsCard.game-totals-card.is-collapsed .game-totals-toggle {
  border-radius: inherit;
}
/* Main games-view result cards share the refreshed Game Totals language. */
.live-results-card,
.banker-header-totals,
.vegas-rotation-breakdown {
  border-color: var(--card-line);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.results-collapse-bar {
  border-color: var(--card-line);
  background: var(--card-bg);
  box-shadow: var(--card-shadow-soft);
}
.results-collapse-bar:hover {
  background: var(--card-bg-hover);
}
.live-results-table th,
.live-results-table td,
.banker-header-totals-table th,
.banker-header-totals-table td {
  border-bottom-color: var(--card-divider);
}
.live-results-title-row th,
.banker-header-title-row th {
  background: var(--panel-alt);
  color: var(--ink);
}
.live-results-label {
  background: transparent;
  box-shadow: 2px 0 0 0 var(--card-divider);
}

.live-results-data-row td,
.banker-header-data-row td {
  background: transparent;
}

.banker-header-totals-table tr:first-child th,
.banker-header-totals-table tr:first-child td {
  background: var(--panel-alt);
  color: var(--ink);
}

.banker-header-totals-table tr:nth-child(n+2) th,
.banker-header-totals-table tr:nth-child(n+2) td {
  background: transparent;
}

/* Strictly scope first visible DATA row coloring to game totals cards only.
   Hi-Lo is excluded: its thead has the column headers so tbody row 1 is real data. */
#vegasResultsWrap .live-results-table .live-results-title-row + .live-results-data-row th,
#vegasResultsWrap .live-results-table .live-results-title-row + .live-results-data-row td,
#vegasResultsWrap .live-results-table .live-results-data-row:first-child th,
#vegasResultsWrap .live-results-table .live-results-data-row:first-child td,
#junkResultsWrap .live-results-table .live-results-title-row + .live-results-data-row th,
#junkResultsWrap .live-results-table .live-results-title-row + .live-results-data-row td,
#junkResultsWrap .live-results-table .live-results-data-row:first-child th,
#junkResultsWrap .live-results-table .live-results-data-row:first-child td,
#wolfResultsWrap .live-results-table .live-results-title-row + .live-results-data-row th,
#wolfResultsWrap .live-results-table .live-results-title-row + .live-results-data-row td,
#wolfResultsWrap .live-results-table .live-results-data-row:first-child th,
#wolfResultsWrap .live-results-table .live-results-data-row:first-child td,
#bankerResultsWrap .banker-header-totals-table .banker-header-title-row + .banker-header-data-row th,
#bankerResultsWrap .banker-header-totals-table .banker-header-title-row + .banker-header-data-row td,
#bankerResultsWrap .banker-header-totals-table .banker-header-data-row:first-child th,
#bankerResultsWrap .banker-header-totals-table .banker-header-data-row:first-child td {
  background: var(--panel-alt);
  color: var(--ink);
}

/* Hi-Lo: thead column-header row gets the same grey; tbody rows stay transparent */
#hiloResultsWrap .live-results-table thead .live-results-data-row th,
#hiloResultsWrap .live-results-table thead .live-results-data-row td {
  background: var(--panel-alt);
  color: var(--ink);
}
#hiloResultsWrap .live-results-table tbody .live-results-data-row th,
#hiloResultsWrap .live-results-table tbody .live-results-data-row td {
  background: transparent;
}

#vegasResultsWrap .live-results-table .live-results-title-row + .live-results-data-row ~ .live-results-data-row th,
#vegasResultsWrap .live-results-table .live-results-title-row + .live-results-data-row ~ .live-results-data-row td,
#vegasResultsWrap .live-results-table .live-results-data-row:first-child ~ .live-results-data-row th,
#vegasResultsWrap .live-results-table .live-results-data-row:first-child ~ .live-results-data-row td,
#junkResultsWrap .live-results-table .live-results-title-row + .live-results-data-row ~ .live-results-data-row th,
#junkResultsWrap .live-results-table .live-results-title-row + .live-results-data-row ~ .live-results-data-row td,
#junkResultsWrap .live-results-table .live-results-data-row:first-child ~ .live-results-data-row th,
#junkResultsWrap .live-results-table .live-results-data-row:first-child ~ .live-results-data-row td,
#wolfResultsWrap .live-results-table .live-results-title-row + .live-results-data-row ~ .live-results-data-row th,
#wolfResultsWrap .live-results-table .live-results-title-row + .live-results-data-row ~ .live-results-data-row td,
#wolfResultsWrap .live-results-table .live-results-data-row:first-child ~ .live-results-data-row th,
#wolfResultsWrap .live-results-table .live-results-data-row:first-child ~ .live-results-data-row td,
#bankerResultsWrap .banker-header-totals-table .banker-header-title-row + .banker-header-data-row ~ .banker-header-data-row th,
#bankerResultsWrap .banker-header-totals-table .banker-header-title-row + .banker-header-data-row ~ .banker-header-data-row td,
#bankerResultsWrap .banker-header-totals-table .banker-header-data-row:first-child ~ .banker-header-data-row th,
#bankerResultsWrap .banker-header-totals-table .banker-header-data-row:first-child ~ .banker-header-data-row td {
  background: transparent;
}

.results-card-wrap:not(.is-collapsed) .live-results-card,
.results-card-wrap:not(.is-collapsed) .banker-header-totals {
  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.82);
}

@media (max-width: 768px) {
  .live-results-card,
  .banker-header-totals,
  .vegas-rotation-breakdown,
  .results-collapse-bar {
    border-radius: var(--mobile-card-radius);
  }

  .results-card-wrap:not(.is-collapsed) .live-results-card,
  .results-card-wrap:not(.is-collapsed) .banker-header-totals {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .results-card-wrap.is-collapsed .results-collapse-bar {
    border-radius: var(--mobile-card-radius);
  }

  .live-results-table th,
  .live-results-table td,
  .banker-header-totals-table th,
  .banker-header-totals-table td {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  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 {
    left: var(--mobile-results-inset);
    right: var(--mobile-results-inset);
    bottom: calc(var(--games-footer-h, 113px) + var(--footer-bottom-offset, 0px) + 12px);
  }

  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: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0 0 var(--mobile-card-radius) var(--mobile-card-radius);
    overflow: hidden;
  }

  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: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    border-radius: var(--mobile-card-radius);
  }

  .results-card-wrap {
    gap: 0;
  }

  .results-collapse-bar {
    min-height: 50px;
    padding: 10px 14px;
    border-radius: var(--mobile-card-radius) var(--mobile-card-radius) 0 0;
    font-size: 14px;
    letter-spacing: 0.01em;
  }

  .results-collapse-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
    color: #5d7387;
  }

  .results-collapse-chevron::before,
  .results-card-wrap.is-collapsed .results-collapse-chevron::before {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
    color: #4a6177;
  }

  .results-card-wrap:not(.is-collapsed) .live-results-card,
  .results-card-wrap:not(.is-collapsed) .banker-header-totals {
    box-shadow: var(--mobile-surface-shadow-light);
  }
}

@media (max-width: 768px) {
  :root:not([data-theme="light"]) #gameTotalsCard.game-totals-card,
  :root:not([data-theme="light"]) .live-results-card,
  :root:not([data-theme="light"]) .banker-header-totals,
  :root:not([data-theme="light"]) .vegas-rotation-breakdown,
  :root:not([data-theme="light"]) .results-collapse-bar {
    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"]) .results-collapse-bar:hover {
    background: linear-gradient(180deg, rgba(29, 52, 73, 0.98), rgba(16, 33, 49, 0.96));
  }

  :root:not([data-theme="light"]) .results-collapse-label {
    color: #93a9bb;
  }

  :root:not([data-theme="light"]) .results-collapse-chevron::before,
  :root:not([data-theme="light"]) .results-card-wrap.is-collapsed .results-collapse-chevron::before,
  :root:not([data-theme="light"]) .game-totals-toggle-state {
    color: #c7d7e4;
  }

  :root:not([data-theme="light"]) .live-results-data-row td,
  :root:not([data-theme="light"]) .banker-header-data-row td {
    background: rgba(255, 255, 255, 0.02);
  }
}

.game-totals-toggle,
.game-totals-body,
.footer-entry-switcher,
.scorecard-card-footer,
.games-card-footer {
  background: transparent;
}

@media (max-width: 768px) {
  /* Full-bleed mobile: drop the side gutters so game sections, the totals
     card, and the results cards span edge to edge. */
  :root {
    --mobile-page-gutter: 0px;
    --mobile-results-inset: 0px;
  }

  body.mode-score #gameTotalsCard.game-totals-card {
    width: 100%;
    max-width: 100%;
  }

  /* Game tables: drop the side padding/margin so the hole-by-hole results
     table spans edge to edge instead of revealing the striped panel gutter. */
  body.mode-games .game-scroll-body > * {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .header-inner {
    padding: 3.6px 5px 1.6px;
    gap: 0;
  }

  .header-collapse-bar,
  .header-cloud-scroll-indicator {
    margin-left: var(--mobile-page-gutter);
    margin-right: var(--mobile-page-gutter);
  }

  .view-mode-banner,
  .entry-switcher,
  .games-launcher-shell,
  .game-section,
  .scorecard-container {
    margin-left: var(--mobile-page-gutter);
    margin-right: var(--mobile-page-gutter);
  }

  .entry-switcher {
    padding: 5px;
    border-width: 1px;
  }

  .entry-switcher-btn,
  .game-toggle,
  .header-collapse-bar .cloud-status-badge,
  .header-collapse-bar .cloud-code-badge-btn,
  .btn,
  .theme-toggle {
    font-size: calc(15px + var(--font-data-adjust));
  }

  .scorecard-container {
    width: auto;
    border-radius: 24px;
    border-width: 1px;
    border-bottom-width: 1px;
    margin-top: 10px;
  }

  /* Score mode should attach directly under the cloud bar with no extra gap. */
  body.mode-score .scorecard-container {
    margin-top: 0;
  }

  .game-section {
    border: 1px solid var(--line-haze);
    border-radius: var(--mobile-card-radius);
    padding-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 20px 38px -28px rgba(0, 0, 0, 0.86);
  }

  .footer-entry-switcher {
    border-top: 1px solid rgba(151, 185, 210, 0.12);
    padding: 6px 8px max(var(--footer-row-bottom-clearance), 10px);
  }

  .scorecard-card-footer,
  .games-card-footer {
    padding-left: var(--mobile-page-gutter);
    padding-right: var(--mobile-page-gutter);
  }

  .scorecard-add-player-btn {
    border-radius: 16px;
  }
}

/* Bottom dock refinement: cleaner hierarchy for the mobile action rows.
   Footer shell is edge-to-edge — the previous --mobile-page-gutter outer
   inset (and the 18px floating-dock radius/lift) showed dark page bg in
   the left/right margins, breaking the bottom bar's visual continuity.
   Buttons keep their original x-coordinates because the gutter moves
   inward as padding-left/right on the shell. */
@media (max-width: 768px) {
  .scorecard-card-footer,
  .games-card-footer {
    padding: 8px 10px 4px;
    min-height: 58px;
    gap: var(--space-sm);
  }

  .scorecard-footer-controls {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr) repeat(3, 44px);
    gap: var(--space-sm);
  }
  /* Mobile-footer button sizing (1047–1110): the !importants below are
     load-bearing. Each button class (.btn, .scorecard-theme-toggle, etc.) is
     also styled by scorecard.css and responsive-layout.css at equal or higher
     specificity for desktop dimensions. Without !important here, the
     desktop-sized rules win at narrow widths too and the footer overflows. A
     full revert of these to non-!important produced 6 FAIL snapshots ≥1.3%
     drift (proven load-bearing). */
  .scorecard-footer-controls > .btn,
  .scorecard-footer-controls > .scorecard-theme-toggle,
  .scorecard-footer-controls > .scorecard-clear-actions-toggle,
  .scorecard-footer-controls > .scorecard-scan-icon-btn {
    height: 44px !important;
    min-height: 44px !important;
  }

  .scorecard-add-player-btn {
    min-width: 78px !important;
    width: 78px !important;
    justify-content: center;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    padding: 0 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 247, 255, 0.86));
    color: #16334d;
    border-color: rgba(116, 149, 176, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 22px -18px rgba(36, 71, 102, 0.34);
  }

  .scorecard-footer-controls > .btn#scorecardOptionsToggle,
  .scorecard-footer-controls > .game-options-toggle#scorecardOptionsToggle {
    border-radius: 16px;
    justify-content: center;
    padding: 0 10px;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: normal;
    line-height: 1.05;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.92));
    color: #12283d;
    border-color: rgba(106, 140, 168, 0.28);
    box-shadow: inset 0 1px 0 var(--hi-bright), 0 14px 24px -20px rgba(36, 71, 102, 0.38);
  }.scorecard-footer-controls > .scorecard-theme-toggle,
  .scorecard-footer-controls > .scorecard-clear-actions-toggle,
  .scorecard-footer-controls > .scorecard-scan-icon-btn {
    min-width: 44px !important;
    width: 44px !important;
    border-radius: 15px;
    background: linear-gradient(180deg, var(--hi-bright), rgba(242, 248, 255, 0.9));
    border-color: rgba(116, 149, 176, 0.24);
    color: #173149;
    box-shadow: inset 0 1px 0 var(--hi-strong), 0 12px 20px -18px rgba(36, 71, 102, 0.32);
  }

  .scorecard-clear-panel {
    margin-top: 12px;
    padding: 8px 10px 6px;
    min-height: 70px;
    border-top: 1px solid rgba(136, 165, 191, 0.14);
  }

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

  .scorecard-clear-buttons {
    gap: var(--space-sm);
  }

  .scorecard-clear-buttons .btn {
    border-radius: 18px;
    height: 50px !important;
    min-height: 50px !important;
    font-size: 15px !important;
  }

  #gameTotalsCard.game-totals-card {
    margin: 0 0 0;
    border-radius: var(--mobile-card-radius);
    background: linear-gradient(180deg, var(--surface-l1), var(--surface-l2));
    border-color: rgba(136, 165, 191, 0.3);
    box-shadow: 0 20px 38px -26px rgba(53, 84, 112, 0.32);
  }

  #gameTotalsCard.game-totals-card.is-collapsed {
    margin: 0 0 0;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(136, 165, 191, 0.3);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--surface-l1), var(--surface-l2));
    box-shadow: 0 20px 38px -26px rgba(53, 84, 112, 0.32);
    overflow: visible;
  }

  #gameTotalsCard.game-totals-card::before {
    display: none;
  }

  .game-totals-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "label state chevron"
      "tabs tabs tabs";
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    padding: 8px 10px 6px;
  }

  .game-totals-label {
    grid-area: label;
    font-size: 13px;
    line-height: 0.95;
    opacity: 0.8;
    max-width: none;
    font-weight: 700;
    text-align: center;
  }

  .game-totals-tabs-shell {
    grid-area: tabs;
    min-width: 0;
    display: block;
  }

  .game-totals-tabs {
    gap: 5px;
    padding-right: 2px;
  }

  .game-totals-tab {
    min-height: 40px;
    height: 40px;
    padding: 0 13px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.82);
    color: #142a40;
    border-color: rgba(116, 149, 176, 0.24);
  }

  .game-totals-tab.is-active {
    background: linear-gradient(180deg, #2384dc, #176dc6);
    border-color: var(--accent-btn-bg);
    color: #ffffff;
  }

  .game-totals-toggle-state {
    grid-area: state;
    min-width: 0;
    padding: 0 2px 0 0;
    font-size: 11px;
    font-weight: 700;
    color: #31485f;
  }

  .game-totals-chevron {
    grid-area: chevron;
    width: 9px;
    height: 9px;
    opacity: 0.56;
  }

  .game-totals-body {
    padding: 2px 8px 0;
  }

  .footer-entry-switcher {
    margin-top: 6px;
    padding: 8px 10px max(var(--footer-row-bottom-clearance), 10px);
    border-top: 1px solid rgba(136, 165, 191, 0.12);
    background: linear-gradient(180deg, rgba(228, 238, 249, 0.58), rgba(220, 232, 244, 0.34));
  }

  html.ios-pwa-mode .entry-switcher.footer-entry-switcher {
    /* iOS WKWebView fills view to the device bottom (contentInsetAdjustmentBehavior
       = .never), so the Score/Games row would land directly on the home indicator
       without explicit safe-area padding. Use env() so it adapts to devices
       without a home indicator (8 Plus / SE) instead of a fixed 30px. */
    padding-bottom: max(30px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  }

  html.ios-native-app .entry-switcher.footer-entry-switcher {
    /* Native iOS app (WKWebView), but not Safari PWA mode.
       Keep the Score/Games switcher above the home indicator. */
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 28px));
  }

  .footer-entry-switcher.entry-switcher {
    border-width: 0;
    box-shadow: none;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    gap: 10px;
  }

  .scorecard-card-footer {
    position: relative;
    padding-top: 24px;
  }

  .scorecard-card-footer::before {
    content: "";
    display: block;
    position: absolute;
    left: 10px;
    right: 10px;
    top: -4px;
    height: 1px;
    background: linear-gradient(90deg, rgba(136, 165, 191, 0), var(--line-cool), rgba(136, 165, 191, 0));
    pointer-events: none;
  }

  .footer-entry-switcher .entry-switcher-btn {
    min-height: 40px;
    height: 40px;
    border-radius: var(--mobile-card-radius);
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(116, 149, 176, 0.26);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 247, 255, 0.86));
    color: #51677c;
    box-shadow: inset 0 1px 0 var(--hi-bright), 0 12px 24px -22px rgba(36, 71, 102, 0.28);
  }

  .footer-entry-switcher .entry-switcher-btn.active {
    background: linear-gradient(180deg, #2482d8, #176abe);
    color: #ffffff;
    border-color: var(--accent-btn-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 16px 28px -22px rgba(20, 93, 171, 0.45);
  }
}

@media (max-width: 768px) {
  :root:not([data-theme="light"]) #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"]) #gameTotalsCard.game-totals-card.is-collapsed {
    border-width: 1px;
    border-style: solid;
    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"]) .game-totals-card.is-collapsed .game-totals-label {
    color: #93a9bb;
  }

  :root:not([data-theme="light"]) .game-totals-card.is-collapsed .game-totals-toggle-state {
    color: #c7d7e4;
  }

  :root:not([data-theme="light"]) .game-totals-card.is-collapsed .game-totals-toggle:hover {
    background: linear-gradient(180deg, rgba(29, 52, 73, 0.98), rgba(16, 33, 49, 0.96));
  }

  :root:not([data-theme="light"]) .game-totals-toggle-state,
  :root:not([data-theme="light"]) .results-collapse-label,
  :root:not([data-theme="light"]) .results-collapse-chevron::before,
  :root:not([data-theme="light"]) .results-card-wrap.is-collapsed .results-collapse-chevron::before {
    color: #c7d7e4;
  }:root:not([data-theme="light"]) .scorecard-add-player-btn,
  :root:not([data-theme="light"]) .scorecard-footer-controls > .btn#scorecardOptionsToggle,
  :root:not([data-theme="light"]) .scorecard-footer-controls > .game-options-toggle#scorecardOptionsToggle,
  :root:not([data-theme="light"]) .scorecard-footer-controls > .scorecard-theme-toggle,
  :root:not([data-theme="light"]) .scorecard-footer-controls > .scorecard-clear-actions-toggle,
  :root:not([data-theme="light"]) .scorecard-footer-controls > .scorecard-scan-icon-btn,
  :root:not([data-theme="light"]) .game-totals-tab,
  :root:not([data-theme="light"]) .footer-entry-switcher .entry-switcher-btn {
    background: linear-gradient(180deg, var(--surface-d1), var(--surface-d2));
    border-color: var(--line-medium);
    color: #e5f1fb;
    box-shadow: inset 0 1px 0 var(--hi-faint), 0 12px 24px -20px rgba(0, 0, 0, 0.78);
  }

  :root:not([data-theme="light"]) .scorecard-footer-controls > .btn#scorecardOptionsToggle,
  :root:not([data-theme="light"]) .scorecard-footer-controls > .game-options-toggle#scorecardOptionsToggle {
    color: #f2f8ff;
  }

  :root:not([data-theme="light"]) .game-totals-tab.is-active,
  :root:not([data-theme="light"]) .footer-entry-switcher .entry-switcher-btn.active {
    background: linear-gradient(180deg, #2384dc, #176dc6);
    border-color: var(--accent-btn-bg);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 28px -22px rgba(20, 93, 171, 0.45);
  }

  :root:not([data-theme="light"]) .footer-entry-switcher {
    background: linear-gradient(180deg, rgba(17, 32, 46, 0.72), rgba(12, 24, 36, 0.44));
    border-top-color: rgba(96, 133, 163, 0.24);
  }
}
/* .game-options-icon-btn / .banker-options-icon-btn (light + dark base) +
   .game-options-panel (base styling) + their .is-open and mobile-radius
   variants — all defined in stylesheet/game-options-ui.css (the topical
   file). Previously duplicated here; deleted to avoid cascade drift. */

/* ---- Large screen: cap width and center like a native iPad/tablet app ---- */
@media (min-width: 960px) {
  /* NOTE: the shell max-width/centering for .top-pinned-shell, .sticky-nav-bar,
     .entry-panel, and .games-launcher-shell lives in shell-layout.css (loaded
     later). Do not re-add it here — a duplicate group used to sit at this
     spot and was dead. */
  .scorecard-container {
    max-width: min(1600px, 100vw);
    margin-left: auto;
    margin-right: auto;
    border-radius: 18px 18px 0 0;
  }

  .game-section {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    /* Fade top and bottom edges into the page background so the section
       feels integrated rather than framed like a floating window. */
    background: linear-gradient(
      to bottom,
      var(--bg) 0px,
      var(--panel-alt) 40px,
      var(--panel-alt) calc(100% - 40px),
      var(--bg) 100%
    );
  }

  /* Striped side-gutter texture (::before/::after) used to live here twice
     (a .game-section copy and a body.mode-score #scoreEntryPanel mirror,
     both 516px). Both were fully shadowed by later-loading copies and were
     deleted 2026-06: games-mode.css owns the panel gutters (single owner,
     see its header note) and game-shell.css owns the .game-section variant. */

  /* Games mode: center the inner table content without constraining the
     full-bleed background of the game section. !important overrides inline
     margin styles (e.g. style="margin: 10px 12px 0") on child elements. */
  .game-section > * {
    max-width: 1032px;
    position: relative;
    z-index: 1;
  }

  .live-results-card,
  .banker-header-totals,
  .vegas-rotation-breakdown,
  #gameTotalsCard {
    border-radius: 18px;
  }

  /* Fixed results panels: center within full-width game section */
  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 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(1032px, 100vw);
    max-width: 100vw;
  }

  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: revert;
    border-right: revert;
    border-radius: 18px 18px 0 0;
  }

  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: revert;
    border-right: revert;
    border-radius: 18px 18px 0 0;
  }

  #gameTotalsCard {
    width: 100%;
    box-sizing: border-box;
  }
}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css. ui-polish.css
   loads after this file and refines --bg/--panel-alt/--line, so those values
   end up matching ui-polish's palette at runtime (same as before the move).
   ========================================================================= */

:root[data-theme="light"] {
  --bg: #edf4fb;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-solid: #ffffff;
  --panel-alt: rgba(244, 249, 255, 0.96);
  --panel-alt-solid: #f4f9ff;
  --ink: #0f2233;
  --muted: #62788b;
  --accent: #1f9d55;
  /* Navy ACCENT (borders, dividers, subtle backgrounds — NOT text).
     Dark mode falls back to --accent for any consumers using
     var(--accent-navy, var(--accent)). */
  --accent-navy: #1d4ed8;
  --accent-navy-soft: rgba(29, 78, 216, 0.08);
  --line: rgba(104, 137, 163, 0.22);
  --shadow: rgba(36, 71, 102, 0.14);
  /* Restored from the former Bootswatch Flatly block in light-theme-overrides.css.
     The dark-theme :root above sets #ffbf69 / #ff6b6b; light theme uses the
     original Flatly hues. */
  --warn: #f39c12;
  --danger: #e74c3c;
}

/* =========================================================================
   Light-theme token dictionary — LIGHT values for the theme-swap tokens
   declared in the :root dictionary block near the top of this file.
   token → dark → light:

   --header-surface     rgba(7,20,31,.96)                       #d4dce8
   --header-line        rgba(147,169,187,.12)                   rgba(26,42,61,.14)
   --header-ink         var(--ink)                              #1a2a3d
   --card-bg            grad 19,39,57/.98 → 13,26,39/.96        grad --surface-l1 → --surface-l2
   --card-bg-hover      grad 27,52,74/.98 → 18,36,54/.96        grad 247,250,254/.98 → 235,243,251/.96
   --card-line          rgba(151,185,210,.18)                   var(--line-soft)
   --card-shadow        0 18px 40px -28px rgba(0,0,0,.82)       0 20px 38px -26px rgba(53,84,112,.28)
   --card-shadow-soft   0 14px 28px -24px rgba(0,0,0,.68)       0 16px 28px -24px rgba(53,84,112,.22)
   --card-divider       var(--line-haze)                        rgba(136,165,191,.18)
   --btn-bg             var(--panel)                            #d4dee8
   --btn-line           var(--line)                             #aebac7
   --chrome-btn-bg      grad --hi-soft → --hi-thin              grad --hi-bright → 240,247,255/.88
   --chrome-btn-shadow  inset wht/.06 + 12/22 blk/.8            inset wht/.9 + 16/30 36,71,102/.35
   --accent-press       grad #2384dc → #176dc6                  #0b74d1
   --accent-press-line  #176dc6                                 #095ba3
   --accent-soft-bg     #14202a                                 #e0f2ff
   --accent-soft-line   #224                                    #0090e0
   --ink-strong         var(--ink)                              #1a1c1f
   --box-bg             var(--panel)                            #ffffff
   --box-line           var(--line)                             #bcc7d2
   --table-head-bg      var(--panel-alt)                        #e5ecf2
   --warn-soft-bg       rgba(255,180,84,.14)                    #fff2df
   --warn-line          var(--warn)                             #d97706
   --ok-ink             #a7f3c8                                 #0f5b35
   --ok-bg              rgba(28,118,67,.28)                     #d7f8e6
   --ok-line            rgba(104,211,145,.55)                   #45a46f

   Theme-agnostic (defined once in :root, no light re-value):
   --on-accent #ffffff · --success-strong #28a745 · --danger-strong #dc3545
   ========================================================================= */
:root[data-theme="light"] {
  /* header / status-bar chrome */
  --header-surface: #d4dce8;
  --header-line: rgba(26, 42, 61, 0.14);
  --header-ink: #1a2a3d;

  /* results / games cards */
  --card-bg: linear-gradient(180deg, var(--surface-l1), var(--surface-l2));
  --card-bg-hover: linear-gradient(180deg, rgba(247, 250, 254, 0.98), rgba(235, 243, 251, 0.96));
  --card-line: var(--line-soft);
  --card-shadow: 0 20px 38px -26px rgba(53, 84, 112, 0.28);
  --card-shadow-soft: 0 16px 28px -24px rgba(53, 84, 112, 0.22);
  --card-divider: rgba(136, 165, 191, 0.18);

  /* buttons / interactive chrome */
  --btn-bg: #d4dee8;
  --btn-line: #aebac7;
  --chrome-btn-bg: linear-gradient(180deg, var(--hi-bright), rgba(240, 247, 255, 0.88));
  --chrome-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 30px -24px rgba(36, 71, 102, 0.35);
  --accent-press: #0b74d1;
  --accent-press-line: #095ba3;
  --accent-soft-bg: #e0f2ff;
  --accent-soft-line: #0090e0;

  /* text */
  --ink-strong: #1a1c1f;

  /* boxes / tables */
  --box-bg: #ffffff;
  --box-line: #bcc7d2;
  --table-head-bg: #e5ecf2;

  /* status tints */
  --warn-soft-bg: #fff2df;
  --warn-line: #d97706;
  --ok-ink: #0f5b35;
  --ok-bg: #d7f8e6;
  --ok-line: #45a46f;
}

:root[data-theme="light"] body {
  /* (The radial-gradient stack that used to sit here was dead — the later
     `:root[data-theme="light"] body { background: var(--bg) }` block in this
     file wins the cascade. Only color-scheme survives.) */
  color-scheme: light;
}

/* Kept (not collapsible from here): the live dark backgrounds for these
   shells are owned by later files (header.css paints .top-pinned-shell /
   .sticky-nav-bar with var(--bg)), so the light override must stay until
   those files are migrated. Values re-pointed at the dictionary tokens. */
:root[data-theme="light"] .top-pinned-shell,
:root[data-theme="light"] .sticky-nav-bar {
  background: var(--header-surface);
  color: var(--header-ink);
}:root[data-theme="light"] .btn,
  :root[data-theme="light"] .theme-toggle,
  :root[data-theme="light"] .cloud-code-badge-btn,
  :root[data-theme="light"] .game-totals-tab,
  :root[data-theme="light"] .scorecard-add-player-btn,
  :root[data-theme="light"] .scorecard-theme-toggle,
  :root[data-theme="light"] .scorecard-clear-actions-toggle {
  /* Kept: later files (scorecard.css, game-totals.css, utilities.css) layer
     their own base backgrounds on these selectors between the dark base rule
     above and this override; deleting it would let those win in light. */
  background: var(--chrome-btn-bg);
  box-shadow: var(--chrome-btn-shadow);
}

:root[data-theme="light"] #cloudSnapshotsToggle,
  :root[data-theme="light"] #cloudCreateBtn,
  :root[data-theme="light"] .cloud-control-compact .btn,
  :root[data-theme="light"] .cloud-status-badge,
  :root[data-theme="light"] .cloud-code-badge-btn {
  background: var(--chrome-btn-bg);
  box-shadow: var(--chrome-btn-shadow);
  border-color: rgba(151, 185, 210, 0.24);
  color: #1e293b;
}

:root[data-theme="light"] .entry-switcher {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.92));
}

:root[data-theme="light"] .scorecard-container {
  /* Kept: scorecard.css owns the live dark background (var(--panel-solid)). */
  background: linear-gradient(180deg, rgb(255, 255, 255), rgb(243, 248, 253));
}

:root[data-theme="light"] #gameTotalsCard.game-totals-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 255, 0.94));
}

/* (.live-results-card / .banker-header-totals / .vegas-rotation-breakdown /
   .results-collapse-bar / .live-results-table cell borders / .game-section:
   light overrides deleted — the dark rules earlier in this file now use
   --card-bg/--card-line/--card-shadow/--card-divider which swap per theme;
   the .game-section + .cloud-status-badge[data-live] overrides were dead,
   shadowed by game-shell.css / utilities.css.) */
.results-card-wrap.is-collapsed .results-collapse-bar:hover {
  /* Pre-existing quirk preserved: this selector is theme-unscoped, so the
     collapsed bar gets the light hover gradient in BOTH themes. */
  background: linear-gradient(180deg, rgba(247, 250, 254, 0.98), rgba(235, 243, 251, 0.96));
}

/* =========================================================================
   Shared modal animations — used by JS-injected dialogs in cloudsync.js and
   index.js. Moved from light-theme-overrides.css.
   ========================================================================= */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slideUpFull {
  from {
    transform: translateY(100vh);
    opacity: 0.92;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownFull {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100vh);
    opacity: 0.85;
  }
}

/* =========================================================================
   Light theme overrides — more component-agnostic surfaces (banner, body,
   universal table headers, .btn/.theme-toggle defaults, control boxes).
   Moved from light-theme-overrides.css.
   ========================================================================= */

/* The overrides below are kept because their dark counterparts live in
   later files (header.css .view-mode-banner/.btn/.btn.accent,
   game-controls.css boxes, per-table headers) — those files' agents migrate
   the dark side, then these can be deleted. Values already re-pointed at
   the dictionary tokens. */
:root[data-theme="light"] .view-mode-banner {
  background: var(--warn-soft-bg);
  border-color: var(--warn-line);
  color: var(--ink-strong);
}

:root[data-theme="light"] body {
  background: var(--bg);
  color: var(--ink);
}

:root[data-theme="light"] .control-box,
:root[data-theme="light"] .team-box,
:root[data-theme="light"] .opts-box {
  background: var(--box-bg);
  border-color: var(--box-line);
}

/* Universal table header/footer (game-specific overrides live in game-tables.css). */
:root[data-theme="light"] thead th,
:root[data-theme="light"] tfoot td {
  background: var(--table-head-bg);
  color: var(--ink-strong);
}

:root[data-theme="light"] .btn,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] button:not(.matchplay-tab-select-btn) {
  background: var(--btn-bg);
  border-color: var(--btn-line);
  color: var(--ink-strong);
}

:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] button:not(.matchplay-tab-select-btn):hover {
  background: #c8d4e1;
}

:root[data-theme="light"] .btn.accent {
  background: var(--accent-soft-bg);
  border-color: var(--accent-soft-line);
  color: var(--ink-strong);
}