/* ───────────────────────────────────────────────────────────────────── Bottom-pill light-theme treatment. Lives in its own file (loaded LAST in index.html) so source-order priority wins over base rules in game-totals.css, game-shell.css, games-mode.css, ui-polish.css. Previously this whole block lived in main.css with ~47 `!important` flags to fight those later-loaded stylesheets — moving it here drops most of them. The handful that remain are where the base rule ALSO uses `!important` (e.g. game-shell.css's `border-top-width: 0 !important`) or where the override must beat a more-specific selector. Bounds the whole "experiment" treatment, so easy to delete if we want to revert to the original light-theme footer look: drop this file's in _src/index.html. ───────────────────────────────────────────────────────────────── */ /* Firebase Auth Emulator banner suppression — SDK injects this via document.body.appendChild. Covers common class-name variants across SDK versions. !important kept because the SDK sets `display: block` via inline style which has the highest specificity. */ .firebase-emulator-warning, [class*="firebase-emulator-warning"], [class*="firebase-emulator"][class*="warning"] { display: none !important; } /* Stacked bottom-pill surfaces (totals card → footer → switcher) all paint the SAME solid soft slate so they read as one continuous panel — solid (not gradient) avoids per-element gradient banding where they stack. */ :root[data-theme="light"] #gameTotalsCard .game-totals-header, :root[data-theme="light"] .scorecard-card-footer, :root[data-theme="light"] .games-card-footer, :root[data-theme="light"] .footer-entry-switcher { background: var(--header-surface); color: var(--header-ink); } /* Kill inter-row seams: the card-footer's and entry-switcher's dark `border-top` (and the 12px gap above the switcher) printed visible horizontal lines on top of the unified pill bg. With borders/shadows neutralized and the entry-switcher gap zeroed, all three rows + the totals card read as one solid panel. The shells THEMSELVES are included now too: main.css gives them a dark upward box-shadow (0 -18px 40px) that, on the light pill, cast a visible shadow band ABOVE the dock — the desktop score-mode "seam" (it renders over #scoreEntryPanel, which is why the inspector caught the panel, not the dock). Dark mode keeps the shadow (dark-on-dark, no visible band). */ :root[data-theme="light"] .scorecard-card-footer, :root[data-theme="light"] .games-card-footer { border-top: 0; box-shadow: none; } :root[data-theme="light"] .footer-entry-switcher { border-top: 0; margin-top: 0; box-shadow: none; } /* Game Totals card COLLAPSED — drop ALL borders, rounded top corners, and box-shadow so the header looks like a continuation of the pill below instead of a separate floating card. Base CSS sets `border: 1px solid var(--line); border-radius: 14px 14px 0 0;`. When EXPANDED, base styling returns so the light card body floats as a distinct surface above the dark pill. */ :root[data-theme="light"] #gameTotalsCard.game-totals-card.is-collapsed { border: 0; border-radius: 0; box-shadow: none; } /* Game Totals header inner controls — toggle + Round Report + all inner text. Base styles set these to a dark ink that doesn't read well on the soft slate header; force them to the cool-navy ink. */ :root[data-theme="light"] #gameTotalsCard .game-totals-toggle, :root[data-theme="light"] #gameTotalsCard .game-totals-report-btn, :root[data-theme="light"] #gameTotalsCard .game-totals-label, :root[data-theme="light"] #gameTotalsCard .game-totals-toggle-state, :root[data-theme="light"] #gameTotalsCard .game-totals-chevron, :root[data-theme="light"] #gameTotalsCard .game-totals-header, :root[data-theme="light"] #gameTotalsCard .game-totals-header * { color: var(--header-ink); } /* Round Report — flat-tab affordance inside the header, NOT a distinct pill. Transparent so it inherits the header's soft slate; thin left divider to separate it from the Show/Hide toggle. */ :root[data-theme="light"] #gameTotalsCard .game-totals-report-btn { background: transparent; border: 0; border-left: 1px solid rgba(26, 42, 61, 0.18); border-radius: 0; box-shadow: none; } :root[data-theme="light"] #gameTotalsCard .game-totals-toggle:hover, :root[data-theme="light"] #gameTotalsCard .game-totals-report-btn:hover { background: rgba(26, 42, 61, 0.06); } /* All buttons inside the pill → white-to-pale gradient with dark navy text. .game-toggle is the Junk/Banker/Vegas tab style — not a .btn so it needs its own selector. */ :root[data-theme="light"] .footer-entry-switcher .entry-switcher-btn, :root[data-theme="light"] .game-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); } /* NOTE: do NOT add a light-mode min-height/padding override for .game-toggle here. It now shares --footer-action-h with the Score/Games switcher in the base CSS (game-shell.css), so the pill buttons match in BOTH themes. A light-only shrink is exactly what kept reintroducing the "game buttons shorter than Score/Games" regression. Light mode only restyles the colors/gradient above. */ /* Push the shell's content above the iOS home-indicator safe area so the buttons aren't clipped by it. !important kept because base CSS in game-shell.css sets `padding-bottom: 0` with !important. */ /* Games-mode results bar (Junk Results / Banker Totals / etc.) — match the pill below it. */ :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar, :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar { background: var(--header-surface); border-color: rgba(26, 42, 61, 0.18); color: var(--header-ink); } /* STRUCTURAL pin + open-section contain/margin neutralization moved to games-mode.css 2026-06 ("PINNED RESULTS — single owner") — it was theme-agnostic and had no business hiding in a theme file. This file is light-theme colors/chrome only. */ /* Label / chevron / state text inside the bar — base styles set each to its own dark color; unify to the cool-navy ink. The bar uses a ::after pseudo to render the "▼ Show" / "▲ Hide" text with a hardcoded color that the parent's `color:` doesn't reach. */ :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar, :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-label, :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-chevron, :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-toggle-state { color: var(--header-ink); } :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar::after, :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar::before { color: var(--header-ink); } /* Square bottom corners on the bar (top corners stay rounded) so it visually connects to the games pill directly below as one continuous surface. */ :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .results-collapse-bar, :root[data-theme="light"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Shell border + corner cleanup so the bar's flat bottom edge meets the pill's now-flat top edge as one continuous surface. !important on border-top fights game-shell.css's `border-top: 2px solid ... !important` rule. */ /* Paint the bottom safe-area inset (iOS home indicator / Android nav bar) the same soft slate as the shell, so the strip below the fixed shell doesn't reveal the body bg in score mode. body::before and body::after are both taken (safe-top-inset / radial-gradient overlay) so we hijack :root::after. */ :root[data-theme="light"]::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: max(var(--safe-bottom-inset, 0px), env(safe-area-inset-bottom, 0px)); background: var(--header-surface); pointer-events: none; z-index: 33; } /* Active button state keeps the blue accent so the user can tell where they are. The white-button rule above would otherwise win on source order, so this needs to come AFTER it. */ :root[data-theme="light"] .footer-entry-switcher .entry-switcher-btn.active, :root[data-theme="light"] .game-totals-tab.is-active, :root[data-theme="light"] .game-totals-tab[aria-selected="true"], :root[data-theme="light"] .game-toggle.active { background: linear-gradient(180deg, #2384dc, #176dc6); border-color: #176dc6; color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 4px rgba(20, 93, 171, 0.4); }