/* Shared iOS-style treatment for game info/options menus. */
.game-section-header .controls {
  gap: 10px;
}

.game-options-icon-btn,
.banker-options-icon-btn {
  border-radius: var(--game-menu-control-radius);
  border-color: var(--line-soft);
  background: linear-gradient(180deg, var(--hi-bright), rgba(240, 247, 255, 0.88));
  color: #173149;
  box-shadow: inset 0 1px 0 var(--hi-strong), 0 12px 20px -18px rgba(36, 71, 102, 0.32);
}

.game-options-icon-btn.is-open,
.banker-options-icon-btn.is-open,
.game-options-toggle.is-open {
  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.42);
}

.game-options-panel {
  margin-top: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(136, 165, 191, 0.22);
  border-radius: var(--game-menu-radius);
  background: linear-gradient(180deg, rgba(245, 249, 253, 0.75), rgba(231, 239, 247, 0.65));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 36px -28px rgba(53, 84, 112, 0.24);
}

/* Game info/options dialog: gear + info icon buttons open the panel as a
   centered modal over a blurred backdrop (matches the dialog style used by
   the round report / overrides sheets). */
.game-options-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 26, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10050;
}

.game-options-modal-backdrop[hidden] {
  display: none;
}

/* When a game-options-panel is promoted to a modal dialog (.is-options-modal
   added by the gear-menu opener), it must escape the inline-panel cascade and
   render centered, fixed, sized like a dialog. The panel's inline-mode styles
   live in many higher-specificity selectors — body.mode-games .game-section >
   .game-options-panel, scorecard.css's #scorecardOptionsPanel.game-options-panel
   (spec 1,2,1), themed variants — which would otherwise force the panel back
   into the inline strip. !important on every positional/sizing/background
   property below forces modal layout regardless of those wins. Removing the
   !important on `background` was tried and produced a 1.8% pixel diff on
   options-panel snapshots (proven load-bearing). */
.game-options-panel.is-options-modal {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  /* Cap at 90% of the viewport so the dialog doesn't run edge-to-edge top
     and bottom — leaves breathing room above and below. Subtract the
     Android nav-bar inset (--safe-bottom-inset) and status-bar inset
     (--safe-top-inset) so on Android the modal can't extend under the
     system bars (env() is 0 in Android WebView). */
  max-height: min(
    calc(90dvh - 32px - var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) - var(--safe-top-inset, env(safe-area-inset-top, 0px))),
    calc(90svh - 32px - var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) - var(--safe-top-inset, env(safe-area-inset-top, 0px)))
  ) !important;
  margin: 0 !important;
  /* TOP padding is 0 so the sticky .game-options-modal-header below
     can sit flush with the panel's actual top edge. position:sticky;
     top:0 anchors to the scroll container's padding-box (inside
     padding), so with a 12px top padding the header floated 12px
     below the visible top and scrolled content bled through that
     gap. Same fix applied to .final-round-report-sheet. */
  padding: 0 12px 12px !important;
  overflow-y: auto !important;
  z-index: 10051 !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45) !important;
  /* As a dialog the panel must be a SOLID card, not a frosted/translucent
     layer — otherwise the blurred backdrop shows through and the menu is hard
     to read. Use an opaque version of the panel's own gradient (same look) and
     drop the panel's self-blur; the dedicated .game-options-modal-backdrop is
     what blurs the page behind. */
  background: linear-gradient(180deg, #f5f9fd, #e7eff7) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: gameOptionsModalIn 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes gameOptionsModalIn {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Report-style header injected as the first child of a panel shown as a dialog:
   the game's name on the left, a "Close" .btn on the right. Sticky + opaque so
   it stays pinned while a tall panel scrolls and content doesn't bleed under
   it. Negative margins span the modal's 12px padding (forced uniform on
   .is-options-modal below so info panels align too). Mirrors
   .final-round-report-header. */
.game-options-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 3;
  /* No negative top margin — panel's top padding is 0, so the header
     extends to the modal's actual top edge. Side negative margins
     still span the modal's left/right padding. */
  margin: 0 -12px 12px;
  padding: 12px;
  background: #f5f9fd;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.game-options-modal-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.game-options-modal-header h3 {
  margin: 0;
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  color: #173149;
}
.game-options-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Dark mode: the modal card and header must use dark surfaces. The
   .is-options-modal background above is forced light with !important, so it
   wins in dark mode too — override to opaque dark surfaces (the opaque form of
   the inline dark panel's translucent gradient) so the dialog reads correctly. */
:root:not([data-theme="light"]) .game-options-panel.is-options-modal {
  background: linear-gradient(180deg, #162737, #0b1824) !important;
}
:root:not([data-theme="light"]) .game-options-modal-header {
  background: #162737;
  border-bottom-color: rgba(160, 190, 215, 0.22);
}
:root:not([data-theme="light"]) .game-options-modal-header h3 {
  color: #e5f1fb;
}

/* Score Options shares the score-mode inline panel styles in scorecard.css
   (body.mode-score #scorecardOptionsPanel.game-options-panel — spec 1,2,1).
   When opened as a modal dialog the cascade still picks that inline rule
   on background; !important overrides it so the modal matches other dialogs. */
body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal {
  background: linear-gradient(180deg, #f5f9fd, #e7eff7) !important;
}

body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .control,
  body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .cloud-control,
  body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .control-box,
  body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .team-box,
  body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .opts-box {
  background: rgba(255, 255, 255, 0.46) !important;
}

:root:not([data-theme="light"]) body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal {
  background: linear-gradient(180deg, #162737, #0b1824) !important;
}

:root:not([data-theme="light"]) body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .control,
  :root:not([data-theme="light"]) body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .cloud-control,
  :root:not([data-theme="light"]) body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .control-box,
  :root:not([data-theme="light"]) body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .team-box,
  :root:not([data-theme="light"]) body.mode-score #scorecardOptionsPanel.game-options-panel.is-options-modal .opts-box {
  background: rgba(20, 38, 53, 0.72) !important;
}

/* Info (i) panels should run edge-to-edge like the game area.
   Keep option (wrench) panels padded for controls density. */
#vegasInfoPanel,
#bankerInfoPanel,
#hiloOptionsPanel,
#junkInfoPanel,
#wolfInfoPanel {
  padding: 0;
}

.game-section > .game-options-panel {
  margin-left: 0;
  margin-right: 0;
}

.banker-controls,
.vegas-controls {
  gap: 12px;
  background: transparent;
}

.control-box,
.team-box,
.opts-box {
  border: 1px solid rgba(136, 165, 191, 0.2);
  border-radius: var(--game-menu-control-radius);
  padding: 14px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.game-options-panel .pill,
.game-options-panel .team-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(16, 130, 122, 0.1);
  color: #33556e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.game-options-panel .control {
  background: rgba(255, 255, 255, 0.44);
  border-color: rgba(136, 165, 191, 0.2);
}

.game-options-panel .small,
.game-options-panel .note,
.game-options-panel p {
  color: #4f6578;
}

.game-options-panel .input-label,
.game-options-panel label {
  color: #21384d;
}

.skins-toggle-btn,
.vegas-choice-btn {
  border-radius: var(--game-menu-chip-radius);
  border-color: rgba(136, 165, 191, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 247, 255, 0.86));
  color: #1f3448;
  box-shadow: inset 0 1px 0 var(--hi-strong), 0 10px 18px -18px var(--shadow-tint);
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.1s ease;
}

.skins-toggle-btn:active,
.vegas-choice-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.skins-toggle-btn:has(input:checked),
.vegas-choice-btn:has(input:checked) {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.16), rgba(23, 109, 198, 0.12));
  border-color: rgba(20, 93, 171, 0.48);
  color: #154264;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.game-options-panel .hcp-mode-btn[data-active="true"] {
  background: linear-gradient(180deg, var(--accent-glow), rgba(23, 109, 198, 0.2));
  border-color: rgba(20, 93, 171, 0.8);
  color: #0f3f66;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0 0 2px var(--accent-glow);
}

.game-options-panel .skins-toggle-btn:has(input:checked),
.game-options-panel .vegas-choice-btn:has(input:checked) {
  background: linear-gradient(180deg, var(--accent-glow), rgba(23, 109, 198, 0.2));
  border-color: var(--accent-btn-bg);
  color: #0f3f66;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0 0 2px rgba(35, 132, 220, 0.22);
}

:root:not([data-theme="light"]) .game-options-icon-btn,
:root:not([data-theme="light"]) .banker-options-icon-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 20px -18px var(--shadow-deep);
}

:root:not([data-theme="light"]) .game-options-panel {
  border-color: rgba(96, 133, 163, 0.3);
  background: linear-gradient(180deg, rgba(22, 39, 55, 0.75), rgba(11, 24, 36, 0.65));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 36px -28px var(--shadow-deep);
}

:root:not([data-theme="light"]) .control-box,
:root:not([data-theme="light"]) .team-box,
:root:not([data-theme="light"]) .opts-box,
:root:not([data-theme="light"]) .game-options-panel .control {
  border-color: rgba(96, 133, 163, 0.24);
  background: var(--hi-thin);
  box-shadow: inset 0 1px 0 var(--hi-thin);
}

:root:not([data-theme="light"]) .game-options-panel .pill,
:root:not([data-theme="light"]) .game-options-panel .team-pill {
  background: rgba(31, 157, 85, 0.12);
  color: #b9d6e7;
}

:root:not([data-theme="light"]) .game-options-panel .small,
:root:not([data-theme="light"]) .game-options-panel .note,
:root:not([data-theme="light"]) .game-options-panel p,
:root:not([data-theme="light"]) .game-options-panel .input-label,
:root:not([data-theme="light"]) .game-options-panel label {
  color: #d6e4ef;
}

:root:not([data-theme="light"]) .skins-toggle-btn,
:root:not([data-theme="light"]) .vegas-choice-btn {
  border-color: rgba(96, 133, 163, 0.3);
  background: linear-gradient(180deg, var(--surface-d1), var(--surface-d2));
  color: #e5f1fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 18px -18px rgba(0, 0, 0, 0.62);
}

:root:not([data-theme="light"]) .skins-toggle-btn:has(input:checked),
:root:not([data-theme="light"]) .vegas-choice-btn:has(input:checked) {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.22), rgba(23, 109, 198, 0.16));
  border-color: rgba(20, 93, 171, 0.5);
  color: #ffffff;
}

:root:not([data-theme="light"]) .game-options-panel .hcp-mode-btn[data-active="true"] {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.34), rgba(23, 109, 198, 0.3));
  border-color: rgba(106, 201, 255, 0.88);
  color: #ffffff;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(70, 177, 255, 0.3), 0 12px 24px -20px rgba(0, 0, 0, 0.7);
}

:root:not([data-theme="light"]) .game-options-panel .skins-toggle-btn:has(input:checked),
:root:not([data-theme="light"]) .game-options-panel .vegas-choice-btn:has(input:checked) {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.34), rgba(23, 109, 198, 0.3));
  border-color: rgba(106, 201, 255, 0.84);
  color: #ffffff;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(70, 177, 255, 0.28), 0 12px 24px -20px var(--shadow-deep);
}

@media (max-width: 768px) {
  .game-options-panel {
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--game-menu-radius);
    background: linear-gradient(180deg, rgba(245, 249, 253, 0.75), rgba(231, 239, 247, 0.65));
  }

  .game-section > .game-options-panel {
    margin-left: 0;
    margin-right: 0;
  }

  .game-options-icon-btn,
  .banker-options-icon-btn {
    /* Size (square, font-scaled) is set uniformly with the text toggles in
       game-shell.css; only the mobile corner radius differs here. The old
       fixed 48px was already dead (game-shell loads later) and caused the
       toggle/icon height mismatch — removed. */
    border-radius: var(--game-menu-chip-radius);
  }

  .control-box,
  .team-box,
  .opts-box {
    padding: 12px;
    border-radius: var(--game-menu-chip-radius);
  }
}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css
   ========================================================================= */

:root[data-theme="light"] .game-options-toggle {
  /* Kept: #d7e1ea / #aebdcb have no dictionary tokens (near-miss of
     --btn-bg / --btn-line — do not unify), and the dark face is game-shell
     .css's literal #182430/#2b3a47. Text re-pointed at the token. */
  background: #d7e1ea;
  border-color: #aebdcb;
  color: var(--ink-strong);
}

:root[data-theme="light"] .game-options-toggle:hover {
  background: #cdd9e4;
}

:root[data-theme="light"] .game-options-toggle.is-open {
  /* Kept: the dark open state is game-shell.css's green-accent rule (NOT the
     --accent-press dark values), so the override must stay; its literals are
     re-pointed at the tokens (exact-value swap in light). */
  background: var(--accent-press);
  border-color: var(--accent-press-line);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 1px var(--hi-medium);
}

/* Scorecard-options toggle in its open state — needs the same hover-like
   accent-blue treatment in light mode as the other game options toggles.
   Selector specificity (0,4,2) wins on its own; no !important required. */
:root[data-theme="light"] .scorecard-footer-controls > .game-options-toggle#scorecardOptionsToggle.is-open {
  background: var(--accent-press);
  border-color: var(--accent-press-line);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 1px var(--hi-medium);
}

:root[data-theme="light"] .game-options-toggle.is-open:hover {
  background: var(--accent-press);
  border-color: var(--accent-press-line);
  color: var(--on-accent);
}

/* Vegas-specific game-options control (moved from header.css). */
#vegasGhostRotationWrap[hidden] {
  display: none;
}