/* ============================================================================
   BANKER BOTTOM SHEET
   Additive UI layer. To remove: delete this entire block and the four
   js/games/banker-sheet/*.js sub-modules (helpers, render, summary, main).
   ============================================================================ */

/* When active, hide the native banker input cells (Banker select, Max Bet,
   Bets column, Banker 2×, Result) and show a single collapsed summary row. */
body.banker-sheet-active #bankerBody td.banker-cell-pad,
body.banker-sheet-active #bankerBody td.banker-bets-cell,
body.banker-sheet-active #bankerBody td.banker-result-cell,
body.banker-sheet-active #bankerBody tr > td:nth-child(3),
body.banker-sheet-active #bankerBody tr > td:nth-child(5) {
  display: none;
}
/* In sheet mode, hide extra cells only for the desktop header row.
   Keep tablet "Results" header visible so it can remain sticky. */
body.banker-sheet-active #bankerTable thead.banker-table-desktop-header tr th:not(:first-child) {
  display: none;
}

body.banker-sheet-active #bankerTable thead.banker-table-tablet-header tr th {
  display: table-cell;
}

/* Tablet header visibility */
.banker-table-desktop-header {
  display: table-header-group;
}

.banker-table-tablet-header {
  display: none;
}

/* Phone/narrow (<1024px): Show simplified "Results" header when content would scroll */
@media (max-width: 1023px) {
  .banker-table-desktop-header {
    display: none;
  }

  .banker-table-tablet-header {
    display: table-header-group;
  }
}

body.banker-sheet-active #bankerBody tr { cursor: pointer; }
body.banker-sheet-active #bankerBody tr:hover td { background: var(--hi-thin); }
/* Banker-sheet mobile summary cell. !important on padding/text-align overrides
   game-tables.css `.banker-table td { padding: 4px 6px; text-align: center }`
   (spec 0,2,0) which wins by specificity over our (0,1,0) base.
   DECISION (2026-06): responsive-layout.css used to carry a competing
   `padding: 4px 6px !important` for ≤480px, but THIS file loads later so the
   6px 8px below has always won at every width. The shipped look is 6px 8px
   everywhere; the dead ≤480px tightening was deleted rather than revived. */
.banker-sheet-summary-cell {
  padding: 6px 8px !important;
  text-align: left !important;
  vertical-align: middle;
}
.banker-sheet-row-empty .banker-sheet-summary-cell {
  color: var(--muted);
  font-style: italic;
}
.banker-sheet-summary-empty {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Compact desktop-like inline layout shown inside mobile banker rows.
   Mimics the original 5 columns (Banker | Max | Bets | Banker 2× | Result)
   at mobile-friendly sizes. Row stays tappable to open the edit sheet. */
.bss-grid {
  display: grid;
  grid-template-columns:
    minmax(64px, auto)   /* banker */
    minmax(42px, auto)   /* max */
    1fr                  /* bets */
    minmax(42px, auto)   /* banker 2× */
    minmax(90px, 1.2fr); /* result */
  gap: 2px 6px;
  align-items: start;
  font-size: calc(12px + var(--font-size-step));
  line-height: 1.25;
}
.bss-col { min-width: 0; }
.bss-col-label {
  font-size: calc(9px + var(--font-size-step));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
.bss-banker-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 700;
  color: var(--accent);
}

.bss-banker-name-text {
  min-width: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.bss-banker-stroke-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bss-banker-stroke-slot:empty {
  display: none;
}
.bss-max-val {
  font-weight: 700;
  white-space: nowrap;
}
.bss-bet-list {
  display: grid;
  /* stroke | name (flex) | amount (right-aligned, $ aligns across rows) | 2× */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 6px;
  row-gap: 0;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.bss-bet-p2x-label {
  display: none;
}

html[data-font-size="large"] .bss-bet-p2x-label {
  color: var(--warn, #f0ad4e);
}
.bss-bet-line {
  /* Let children participate in the parent grid so columns align across rows */
  display: contents;
}
.bss-bet-line > * {
  padding: 3px 4px;
  border-bottom: 1px solid var(--line);
}
.bss-bet-line:last-child > * {
  border-bottom: 0;
}
.bss-bet-line > .bss-bet-stroke-slot { padding-left: 6px; }
.bss-bet-line > .bss-bet-mult-slot { padding-right: 6px; }
/* Previously tinted doubled rows orange — removed per product decision.
   The 2× button inside .bss-bet-mult-slot is a sufficient indicator. */
.bss-bet-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bss-bet-stroke-slot,
.bss-bet-mult-slot {
  /* fixed-width alignment slots; empty slots still hold a column */
  min-width: 20px;
  text-align: center;
}
.bss-bet-amt {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}
.bss-bet-empty .bss-bet-amt { color: var(--muted); font-weight: 500; }
.bss-bet-mult {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--warn, #f0ad4e);
  color: #000;
  font-weight: 800;
  font-size: calc(10px + var(--font-size-step));
  line-height: 1.4;
}
.bss-bet-stroke {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(31, 142, 241, 0.18);
  color: #1f8ef1;
  font-weight: 700;
  font-size: calc(10px + var(--font-size-step));
  line-height: 1.4;
  white-space: nowrap;
}

.bss-bet-stroke.is-stroke-down {
  background: rgba(31, 157, 85, 0.18);
  color: var(--accent);
}

.bss-bet-stroke.is-stroke-up {
  background: rgba(220, 53, 69, 0.18);
  color: var(--danger, #dc3545);
}
.bss-bdbl-val {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--panel-alt);
  color: var(--muted);
  font-weight: 800;
  font-size: calc(11px + var(--font-size-step));
}
.bss-bdbl-val.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.bss-result-block {
  font-size: calc(11px + var(--font-size-step));
  line-height: 1.3;
  max-width: 100%;
  /* Was: overflow: hidden — that clipped result text on narrow phones.
     Let rows wrap so "4 v 3 -$20 (2×)" and player names stay fully visible. */
  overflow: visible;
  white-space: normal;
  word-break: break-word;
}
.bss-result-block > * {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}
.bss-result-empty { color: var(--muted); }

.bss-phone-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 4px;
}

.bss-phone-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-alt);
  color: var(--ink);
  font-size: calc(10px + var(--font-size-step));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bss-phone-chip-banker {
  color: var(--accent);
}

.bss-phone-compact-result {
  font-size: calc(11px + var(--font-size-step));
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline "Max $X" shown under the banker name — hidden on desktop (where
   we have a dedicated Max column), revealed on tablet-width screens. */
.bss-max-inline {
  display: none;
  font-size: calc(10px + var(--font-size-step));
  font-weight: 600;
  color: var(--muted);
  margin-top: 1px;
}

/* Tablets / narrow desktops (421px and up, when the bottom sheet is active):
   drop the standalone Max column, stack "Max $X" under the banker name,
   shrink Banker 2× to a terse "BX", and push Result onto its own full-width
   row below so each player's result line fills the table (one line per
   player, no empty right gutter). Scoped to `body.banker-sheet-active` so
   wide touch tablets (1024–1366px) get the same treatment as 768px tablets. */
/* Tablet / large phone (≥481px) compact tablet layout. Phones ≤480 use the
   block above. */
@media (min-width: 481px) {
  body.banker-sheet-active .bss-grid {
    grid-template-columns:
      clamp(96px, 18vw, 132px)  /* banker (with max stacked) */
      minmax(0, 1fr)            /* bets */
      44px;                     /* BX (fixed for row-to-row alignment) */
  }
  body.banker-sheet-active .bss-grid .bss-col-max { display: none; }
  body.banker-sheet-active .bss-max-inline { display: block; }
  body.banker-sheet-active .bss-col-bdbl { text-align: center; }
  body.banker-sheet-active .bss-col-bdbl .bss-col-label { letter-spacing: 0.06em; }
  /* Result spans every column on its own row */
  body.banker-sheet-active .bss-grid .bss-col-result {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
  }
  body.banker-sheet-active .bss-col-result .bss-col-label { display: none; }

  /* Reclaim room for full player names while keeping the stroke chip as the
     sole visual indicator of the player's stroke direction. */
  body.banker-sheet-active .bss-bet-list {
    grid-template-columns: 24px minmax(0, 1fr) 64px 44px;
    column-gap: 0;
    align-items: stretch;
  }
  body.banker-sheet-active .bss-col-bets {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "bets p2x"
      "list list";
    align-items: end;
    column-gap: 6px;
    row-gap: 2px;
  }
  body.banker-sheet-active .bss-col-bets > .bss-col-label {
    grid-area: bets;
    margin: 0;
    line-height: 1.2;
  }
  body.banker-sheet-active .bss-col-bets .bss-bet-p2x-label {
    grid-area: p2x;
    display: block;
    margin: 0;
    text-align: center;
    min-width: 44px;
    font-size: calc(9px + var(--font-size-step));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--warn, #f0ad4e);
  }

  body.banker-sheet-active .bss-col-bets .bss-bet-list {
    grid-area: list;
  }
  body.banker-sheet-active .bss-bet-line > .bss-bet-amt {
    min-width: 64px;
    padding-right: 8px;
  }
  body.banker-sheet-active .bss-bet-line > .bss-bet-mult-slot {
    min-width: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  body.banker-sheet-active .bss-col-bdbl > .bss-col-label {
    margin: 0;
    min-width: 44px;
    width: 44px;
    line-height: 1.2;
    color: var(--accent);
  }
  body.banker-sheet-active .bss-col-bdbl .bss-bdbl-val {
    min-width: 44px;
    width: 44px;
    box-sizing: border-box;
  }
  body.banker-sheet-active .bss-bet-stroke-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    width: 24px;
    padding-left: 0;
    padding-right: 0;
  }
  body.banker-sheet-active .bss-bet-line > .bss-bet-name {
    padding-left: 4px;
  }
  body.banker-sheet-active .bss-bet-line > .bss-bet-name .bss-bet-stroke-inline {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
  }

  /* Stroke-tint name+amount rules now live outside this @media block so
     they apply on narrow phones (≤480px) as well — see below. */
}

/* ---------------- Sheet container ---------------- */
.banker-sheet-backdrop {
  position: fixed;
  inset: 0;
  /* [perf] Flat dim, no backdrop-filter (was blur(5px), then blur(2px)) — a
     filtered layer still forces the compositor to re-sample the full viewport
     every frame of the opacity fade, even at a small radius. The dim alone
     reads the same at a glance and drops the last open-animation paint cost
     on this sheet. See notes/PERFORMANCE_UPGRADE.md §A.3. */
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 9000;
}
.banker-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.banker-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Keep the sheet top BELOW the iOS status bar / notch so the close +
     prev/next buttons are always tappable. Use the larger of the safe-area
     inset or a 56px floor (covers browsers that report 0 for safe-area in
     non-standalone mode). Uses dvh so collapsing URL bars don't clip it. */
  top: auto;
  max-height: calc(100dvh - max(env(safe-area-inset-top, 0px), 56px));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--ink);
  border-top: 2px solid var(--line);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: none;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 9001;
}
.banker-sheet.is-open {
  transform: translateY(0);
  box-shadow: 0 -12px 32px rgba(0,0,0,0.4);
}
@media (min-width: 720px) {
  .banker-sheet {
    left: 50%;
    right: auto;
    bottom: 24px;
    transform: translate(-50%, 120%);
    width: min(760px, calc(100vw - 32px));
    max-height: min(86vh, 820px);
    border-radius: var(--radius-lg);
    border: 2px solid var(--line);
  }
  .banker-sheet.is-open { transform: translate(-50%, 0); }
}

.banker-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
  background: var(--panel-alt);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}.banker-sheet-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.banker-sheet-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  min-width: 140px;
  text-align: center;
}
.banker-sheet-navbtn {
  background: transparent;
  border: 2px solid var(--line);
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: calc(20px + var(--font-size-step));
  cursor: pointer;
  line-height: 1;
}.banker-sheet-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.banker-sheet-close {
  background: rgba(220, 53, 69, 0.18);
  border: 2px solid rgba(220, 53, 69, 0.7);
  color: #ffdfe3;
  box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.2);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: calc(16px + var(--font-size-step));
  cursor: pointer;
}
.banker-sheet-close:hover {
  background: rgba(220, 53, 69, 0.3);
  border-color: rgba(220, 53, 69, 0.9);
}
.banker-sheet-navbtn:not(:disabled):hover { background: var(--hi-faint); }
.banker-sheet-body {
  padding: 12px 16px 4px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.banker-sheet-block {
  padding: 10px 0 14px;
  border-bottom: 2px solid var(--line);
}
.banker-sheet-block:last-child { border-bottom: none; }
.banker-sheet-block-title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.banker-sheet-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.banker-sheet-pill {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel-alt);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}.banker-sheet-pill:hover { border-color: var(--accent); }
.banker-sheet-pill:active { transform: scale(0.97); }
.banker-sheet-pill[data-active="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.banker-sheet-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.banker-sheet-suggestion {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--accent);
  border: 2px dashed var(--accent);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.banker-sheet-suggestion:hover { background: rgba(31, 157, 85, 0.08); }

.banker-sheet-suggestion-muted {
  color: var(--muted);
  border-color: var(--line);
  border-style: solid;
}
.banker-sheet-suggestion-muted:hover { background: rgba(255,255,255,0.04); }
.banker-sheet-hint {
  color: var(--muted);
  font-style: italic;
  padding: 10px 0;
}.banker-selection-warning {
  color: var(--warn, #f0ad4e);
}
.banker-sheet-auto-label {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: -2px 0 8px;
  letter-spacing: 0.02em;
}

.banker-sheet-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.banker-sheet-stepbtn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel-alt);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  font-size: calc(22px + var(--font-size-step));
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.banker-sheet-stepbtn:hover { border-color: var(--accent); }
.banker-sheet-stepbtn:active { transform: scale(0.95); }
.banker-sheet-stepbtn-sm { width: 51px; height: 51px; font-size: calc(24px + var(--font-size-step)); border-radius: 8px; }

.banker-sheet-amount {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--panel-alt);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  min-height: 44px;
  flex: 1 1 auto;
  max-width: 200px;
}
.banker-sheet-amount.banker-sheet-amount-chip-hit {
  border-color: rgba(31, 157, 85, 0.95);
  box-shadow: 0 0 0 2px rgba(31, 157, 85, 0.28), inset 0 0 0 1px rgba(31, 157, 85, 0.22);
  animation: banker-chip-hit 220ms ease-out;
}
@keyframes banker-chip-hit {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
.banker-sheet-amount-sm {
  height: 51px;
  min-height: unset;
  padding: 0 8px;
  max-width: 112px;
  min-width: 92px;
  flex: 0 1 112px;
}
.banker-sheet-dollar { color: var(--muted); font-weight: 700; }
.banker-sheet-amount-input,
.banker-sheet-bet-input {
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 700;
  width: 100%;
  padding: 6px 4px;
  text-align: right;
}
.banker-sheet-amount-input::-webkit-outer-spin-button,
.banker-sheet-amount-input::-webkit-inner-spin-button,
.banker-sheet-bet-input::-webkit-outer-spin-button,
.banker-sheet-bet-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.banker-sheet-dblbtn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--panel-alt);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.banker-sheet-dblbtn[data-active="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}.banker-sheet-dblbtn-mult {
  font-size: var(--text-xl);
  font-weight: 800;
  min-width: 36px;
  text-align: center;
  color: inherit;
}
.banker-sheet-dblbtn-label {
  flex: 1;
  color: inherit;
}

.banker-sheet-bet-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px) {
  .banker-sheet-bet-cards {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.banker-sheet-bet-card {
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--panel-alt);
}.banker-sheet-bet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.banker-sheet-bet-name { font-weight: 700; font-size: var(--text-md); flex: 1 1 auto; }
.banker-sheet-bet-stroke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--panel);
  border: 2px solid var(--line);
  flex: 0 0 auto;
}

/* Stroke tint for the whole bet card + the banker pill. Applied
   unconditionally (all viewports) inside the bet sheet modal. */
.banker-sheet-bet-card-stroke-down {
  background: rgba(31, 157, 85, 0.08);
}
.banker-sheet-bet-card-stroke-down .banker-sheet-bet-name,
.banker-sheet-bet-card-stroke-down .banker-sheet-bet-stroke {
  color: var(--accent);
  border-color: var(--accent);
}
.banker-sheet-bet-card-stroke-up {
  background: rgba(220, 53, 69, 0.08);
}
.banker-sheet-bet-card-stroke-up .banker-sheet-bet-name,
.banker-sheet-bet-card-stroke-up .banker-sheet-bet-stroke {
  color: var(--danger, #dc3545);
  border-color: var(--danger, #dc3545);
}

.banker-sheet-pill-stroke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 800;
  margin-right: 6px;
  background: var(--hi-soft);
}.banker-sheet-pill-stroke.is-stroke-down {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(31, 157, 85, 0.12);
}
.banker-sheet-pill-stroke.is-stroke-up {
  border-color: var(--danger, #dc3545);
  color: var(--danger, #dc3545);
  background: rgba(220, 53, 69, 0.12);
}

.banker-sheet-pill[data-active="true"] .banker-sheet-pill-stroke {
  background: rgba(0, 0, 0, 0.24);
  border-color: rgba(255, 255, 255, 0.74);
  color: #fff;
}:root:not([data-theme="light"]) .bss-bet-stroke:not(.is-stroke-down):not(.is-stroke-up),
:root:not([data-theme="light"]) .banker-sheet-bet-card-stroke-down .banker-sheet-bet-stroke,
:root:not([data-theme="light"]) .banker-sheet-bet-card-stroke-up .banker-sheet-bet-stroke,
:root:not([data-theme="light"]) .banker-sheet-pill[data-active="true"] .banker-sheet-pill-stroke,
:root:not([data-theme="light"]) .banker-sheet-pill .banker-sheet-pill-stroke:not(.is-stroke-down):not(.is-stroke-up) {
  color: #e8ecf2;
}
:root:not([data-theme="light"]) .bss-bet-stroke.is-stroke-down {
  color: var(--accent);
}

:root:not([data-theme="light"]) .bss-bet-stroke.is-stroke-up {
  color: var(--danger, #dc3545);
}
:root:not([data-theme="light"]) .banker-sheet-pill-stroke.is-stroke-down {
  color: var(--accent);
  border-color: var(--accent);
}
:root:not([data-theme="light"]) .banker-sheet-pill-stroke.is-stroke-up {
  color: var(--danger, #dc3545);
  border-color: var(--danger, #dc3545);
}
.bss-bet-stroke-inline {
  margin-left: 6px;
  vertical-align: middle;
}

.banker-sheet-bet-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.banker-sheet-mult-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 8px;
  min-width: 48px;
  height: 36px;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  margin-left: 0;
}
.banker-sheet-mult-toggle[data-active="true"] {
  background: var(--warn, #f0ad4e);
  border-color: var(--warn, #f0ad4e);
  color: #000;
}
.banker-sheet-bet-cap {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--muted);
}
.banker-sheet-bet-cap.is-invalid { color: var(--danger, #dc3545); font-weight: 600; }

/* Quick-bet chips: $5 / $10 / $20 under each opponent's stepper */
.banker-sheet-bet-quickchips {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.banker-sheet-bet-card > .banker-sheet-mult-toggle {
  display: block;
  width: 100%;
  min-width: 0;
  height: 51px;
  margin-top: 8px;
}
.banker-sheet-bet-chip {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel-alt);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  min-height: 32px;
}
.banker-sheet-bet-chip:hover { border-color: var(--accent); }
.banker-sheet-bet-chip:active { transform: scale(0.97); }

.banker-sheet-result-block .banker-sheet-result-text {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--ink);
}

.banker-sheet-footer {
  /* Prefer --safe-bottom-inset (set by layout-sync.js from Android's
     measured nav-bar inset; falls back to env() for iOS/Web). Without
     this the Accept button is hidden under Android's nav bar. */
  padding: 10px 16px calc(10px + var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)));
  border-top: 2px solid var(--line);
  background: var(--panel-alt);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}.banker-sheet-selection-note {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}.banker-sheet-footer-actions { display: flex; gap: 8px; }
.banker-sheet-done {
  width: 100%;
  min-width: 0;
  background: rgba(220, 53, 69, 0.85);
  border-color: rgba(220, 53, 69, 0.9);
  color: #fff;
  font-weight: 800;
}
.banker-sheet-footer-actions {
  width: 100%;
}
.banker-sheet-done:hover {
  background: rgba(220, 53, 69, 1);
  border-color: rgba(220, 53, 69, 1);
  filter: brightness(1.04);
}
body.banker-sheet-open { overflow: hidden; }

/* ---------------- Mobile compactness (≤719px) ----------------
   Tighten vertical rhythm so Banker + Max + Bets + BX + Result all
   fit in one screen without scrolling on typical phones. */
@media (max-width: 719px) {
  .banker-sheet-header {
    padding: 8px 12px;
  }
  .banker-sheet-title { font-size: var(--text-lg); min-width: 110px; }
  .banker-sheet-navbtn,
  .banker-sheet-close { width: 32px; height: 32px; font-size: calc(16px + var(--font-size-step)); }

  .banker-sheet-body {
    padding: 6px 12px 4px;
  }
  .banker-sheet-block {
    padding: 6px 0 8px;
  }
  .banker-sheet-block-title {
    margin-bottom: 4px;
    font-size: calc(11px + var(--font-size-step));
  }
  .banker-sheet-pills { gap: 8px; }
  .banker-sheet-pill { padding: 9px 18px; font-size: var(--text-md); min-height: 51px; }
  .banker-sheet-suggestions { gap: 8px; margin-top: 8px; }
  .banker-sheet-suggestion,
  .banker-sheet-suggestion-muted { padding: 8px 15px; font-size: var(--text-md); min-height: 45px; }

  .banker-sheet-stepper { gap: 10px; }
  .banker-sheet-stepbtn { width: 57px; height: 57px; font-size: calc(24px + var(--font-size-step)); }
  .banker-sheet-amount { min-height: 57px; padding: 0 10px; }
  .banker-sheet-amount-input { font-size: var(--text-lg); padding: 6px 3px; }

  .banker-sheet-dblbtn { padding: 12px 18px; font-size: var(--text-md); min-height: 48px; }

  .banker-sheet-bet-cards { gap: 8px; }
  .banker-sheet-bet-card { padding: 8px 8px; }
  .banker-sheet-bet-head { margin-bottom: 6px; }
  .banker-sheet-bet-controls {
    display: grid;
    grid-template-columns: 51px 1fr 51px;
    gap: 4px;
    align-items: center;
  }
  .banker-sheet-stepbtn-sm {
    width: 51px;
    height: 51px;
    font-size: calc(24px + var(--font-size-step));
  }
  .banker-sheet-amount-sm {
    height: 51px;
    min-height: unset;
    padding: 0 6px;
    max-width: none;
    width: 100%;
    min-width: 0;
    flex: 1 1 0;
    font-size: var(--text-sm);
  }
  .banker-sheet-bet-card > .banker-sheet-mult-toggle {
    height: 51px;
    font-size: var(--text-sm);
  }
  .banker-sheet-bet-quickchips { gap: 6px; margin-top: 6px; }
  .banker-sheet-bet-chip { padding: 6px 10px; font-size: var(--text-sm); min-height: 36px; }
  .banker-sheet-bet-cap { margin-top: 4px; }

  .banker-sheet-footer {
    padding: 6px 12px calc(6px + var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)));
  }
}

/* ----------------------------------------------------------------------------
   COMPACT BANKER RESULT ROWS (.bsr-*)

   Renders the per-player banker hole result as a single-line full-width
   colored bar inside the inline summary cell AND the bet sheet popup.

   New `.bsr-*` classnames are used (instead of reusing `.banker-result-*`)
   to avoid the dozens of legacy CSS rules elsewhere in this file that
   would otherwise override layout. Banker-sheet.js parses the original
   result cell DOM and re-emits these compact elements.
   ---------------------------------------------------------------------------- */
.bss-result-block,
.banker-sheet-result-block .banker-sheet-result-text {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  font-size: calc(12px + var(--font-size-step));
  line-height: 1.35;
}

.bsr-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 3px 8px;
  margin: 0 0 3px 0;
  gap: 8px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  min-height: 22px;
}
.bsr-row.bsr-player-win {
  background: rgba(104, 211, 145, 0.18);
}
.bsr-row.bsr-banker-win {
  background: rgba(255, 107, 107, 0.18);
}
.bsr-row.bsr-tie {
  background: rgba(255, 180, 84, 0.14);
}
.bsr-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink);
}
.bsr-info {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
}
.bsr-score { color: var(--muted); font-size: 0.92em; }
.bsr-payout { font-weight: 700; }
.bsr-payout.bsr-pos { color: var(--accent); }
.bsr-payout.bsr-neg { color: var(--danger); }
.bsr-payout.bsr-push { color: var(--warn); }
.bsr-mult { color: var(--muted); font-size: 0.85em; margin-left: 2px; }

.bsr-summary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  margin-top: 4px;
  font-weight: 700;
  font-size: calc(13px + var(--font-size-step));
  border-top: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsr-summary.bsr-summ-pos { color: var(--accent); }
.bsr-summary.bsr-summ-neg { color: var(--danger); }
.bsr-summary.bsr-summ-push { color: var(--warn); }

.bsr-empty {
  color: var(--muted);
  font-style: italic;
  padding: 4px 6px;
}

/* Phone tightening (all iPhones up to Pro Max 430px) */
@media (max-width: 480px) {
  .bss-result-block,
  .banker-sheet-result-block .banker-sheet-result-text {
    font-size: calc(11px + var(--font-size-step));
  }
  .bsr-row {
    padding: 2px 6px;
    gap: 4px;
    min-height: 20px;
  }
  .bsr-name { max-width: 45%; }
  .bsr-summary { font-size: calc(12px + var(--font-size-step)); padding: 3px 6px; }
}

/* ============================================================================
   END BANKER BOTTOM SHEET
   ============================================================================ */

/* =========================
   Banker Specific Utility Classes
   Appended from main.css
   ========================= */

/* =========================
   Banker specific utility classes
   ========================= */
.banker-cell-pad {
  padding: 4px;
  width: 216px; /* constrain banker column on wide screens */
  max-width: 264px;
}

.banker-inline-wrap {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.banker-select-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}

.banker-selection-warning {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 1.25;
  white-space: normal;
  text-wrap: pretty;
}

.banker-selection-warning[hidden] {
  display: none;
}

/* Large font mode: banker headers need wider Hole and Banker 2x columns to
  prevent label clipping in sticky headers. */
:root[data-font-size="large"] #bankerTable thead th:first-child,
:root[data-font-size="large"] #bankerTable tbody td:first-child {
  width: 56px;
  min-width: 56px;
}

:root[data-font-size="large"] #bankerTable thead th:nth-child(5),
:root[data-font-size="large"] #bankerTable tbody td:nth-child(5) {
  width: 116px;
  min-width: 116px;
}

/* (Moved) Wolf large-font column rules previously lived here; they now
   live in stylesheet/wolf.css so banker.css only governs banker styles. */

.banker-sheet-guidance {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 173, 78, 0.35);
  border-radius: 10px;
  background: rgba(240, 173, 78, 0.08);
}

.banker-selection-guidance {
  align-self: flex-start;
  width: 100%;
  white-space: normal; /* override banker-table td nowrap */
}

/* Desktop: strip the box treatment — show as plain inline text, no border/background */
.banker-selection-guidance.banker-sheet-guidance {
  padding: 0;
  margin-top: 3px;
  border: none;
  border-radius: 0;
  background: none;
}

.banker-selection-guidance .banker-sheet-guidance-label {
  display: none; /* redundant on desktop — the warning text is self-explanatory */
}

.banker-sheet-guidance-label {
  font-size: calc(11px + var(--font-size-step));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.banker-sheet-guidance-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: calc(13px + var(--font-size-step));
  line-height: 1.35;
  color: var(--warn, #f0ad4e);
  font-weight: 600;
  text-wrap: pretty;
}

.banker-selection-guidance .banker-sheet-guidance-text {
  font-size: calc(11px + var(--font-size-step));
  line-height: 1.3;
  font-weight: 500;
  white-space: normal;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-wrap: pretty;
}

.banker-sheet-guidance-text.is-empty {
  color: var(--muted);
  font-weight: 500;
}

.banker-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 4px;
  font-size: calc(14px + var(--font-size-step));
  font-weight: 500;
}

.banker-hole-cell {
  font-size: calc(17px + var(--font-size-step));
}

.banker-stroke-indicator {
  display: none;
  flex: 0 0 auto;
  min-width: 32px;
  justify-content: center;
  padding: 2px 6px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: calc(11px + var(--font-size-step));
  font-weight: 700;
  line-height: 1.2;
}

.banker-money-box {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 2px;
  background: var(--hi-thin);
  border-radius: 4px;
}

.banker-dollar {
  font-size: calc(11px + var(--font-size-step));
  color: var(--accent);
  text-align: center;
}

.banker-number-input {
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 4px;
  text-align: center;
  font-size: calc(12px + var(--font-size-step));
  font-weight: 600;
  padding: 4px;
}

.banker-maxbet-input {
  width: 55px;
}

.banker-bets-cell {
  padding: 4px;
  font-size: calc(11px + var(--font-size-step));
  overflow: hidden;
  overflow-x: clip;
}

.banker-result-cell {
  font-size: calc(11px + var(--font-size-step));
  padding: 4px;
}

.banker-toggle-btn {
  border: 2px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: calc(12px + var(--font-size-step));
  /* [perf] Explicit paint-prop transition (was `all 0.2s`): `all` forces the
     style engine to diff every animatable property on each tap and animates
     paint-bound props for 200ms; the bet toggle should feel instant. Shorter +
     scoped keeps a subtle fade without the per-toggle property-diff tax. */
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.banker-toggle-btn.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.banker-hole-toggle.is-active {
  color: #000;
}

.banker-hole-toggle {
  padding: 8px 12px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  font-size: calc(14px + var(--font-size-step));
}

.banker-player-toggle {
  width: 100%;
  min-width: 0;
  padding: 0 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--warn, #f0ad4e);
}

.banker-player-toggle.is-active {
  background: var(--warn, #f0ad4e);
  border-color: var(--warn, #f0ad4e);
  color: #000;
}

/* !important: main.css's global `:root[data-theme="light"] button:not(...)`
   reset otherwise beats this theme-agnostic rule (0,2,0), so the desktop/
   tablet player-double toggle stops visibly responding to taps in light
   mode — the same bug already fixed for banker-sheet-mult-toggle (the
   mobile equivalent of this exact control) above. */
:root[data-theme="light"] .banker-player-toggle.is-active {
  background: var(--warn, #f0ad4e) !important;
  border-color: var(--warn, #f0ad4e) !important;
  color: #000 !important;
}

.banker-player-bet-row {
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  margin-bottom: 2px;
  padding: 2px;
  background: var(--hi-thin);
  border-radius: 4px;
}

.banker-player-name {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(14px + var(--font-size-step));
  font-weight: 500;
}

@media (min-width: 481px) {
  .bss-col-bets .bss-bet-p2x-label {
    color: var(--warn, #f0ad4e);
  }
}

.banker-stroke-slot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.banker-bet-input {
  width: 100%;
  min-width: 0;
}

.banker-bet-input-invalid {
  border-color: var(--danger);
  border-width: 2px;
}

.banker-result-muted {
  color: var(--muted);
  font-size: calc(12px + var(--font-size-step));
}

.banker-result-muted-sm {
  font-size: calc(10px + var(--font-size-step));
}

.banker-result-warning {
  color: var(--warn, #f0ad4e);
  font-weight: 700;
}

.banker-inline-stroke-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  font-size: calc(11px + var(--font-size-step));
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid transparent;
  white-space: nowrap;
}

:root:not([data-theme="light"]) .banker-stroke-indicator,
:root:not([data-theme="light"]) .banker-inline-stroke-pill {
  color: #e8ecf2;
}
.banker-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  margin-bottom: 2px;
  border-radius: 3px;
  font-size: calc(12px + var(--font-size-step));
}

.banker-result-row.is-player-win {
  background: rgba(104, 211, 145, 0.15);
}

.banker-result-row.is-banker-win {
  background: rgba(255, 107, 107, 0.15);
}

.banker-result-row.is-tie {
  background: rgba(255, 180, 84, 0.1);
}

.banker-result-name {
  font-weight: 500;
  font-size: calc(14px + var(--font-size-step));
  margin-right: 6px;
}

.banker-result-score {
  font-size: calc(11px + var(--font-size-step));
  color: var(--muted);
}

.banker-result-payout {
  font-weight: 600;
  font-size: calc(13px + var(--font-size-step));
}

.banker-payout-positive {
  color: var(--accent);
}

.banker-payout-negative {
  color: var(--danger);
}

.banker-payout-push {
  color: var(--warn);
}

.banker-result-mult {
  font-size: calc(10px + var(--font-size-step));
  color: var(--muted);
  margin-left: 2px;
}

.banker-result-right {
  display: flex;
  gap: 4px;
  align-items: center;
}

.banker-result-summary {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 2px solid var(--line);
  font-size: calc(15px + var(--font-size-step));
  font-weight: 600;
}

.banker-result-summary-positive {
  color: var(--accent);
}

.banker-result-summary-negative {
  color: var(--danger);
}

.banker-result-summary-push {
  color: var(--warn);
}

.banker-summary-value {
  font-size: calc(13px + var(--font-size-step));
}
.banker-footer-player {
  font-size: calc(11px + var(--font-size-step));
  font-weight: 600;
}

.banker-footer-total {
  font-weight: 700;
  font-size: calc(13px + var(--font-size-step));
}

.banker-total-positive {
  color: var(--accent);
}

.banker-total-negative {
  color: var(--danger);
}

/* Hi-Lo hole-by-hole highlighting */
#hiloHoleTable td {
  font-size: calc(var(--text-md) + var(--font-data-adjust));
}#hiloHoleTable .hilo-team-label-full,
  #hiloResultsBottom .hilo-team-label-full {
  display: inline;
}#hiloHoleTable .hilo-team-label-short,
  #hiloResultsBottom .hilo-team-label-short {
  display: none;
}

@media (max-width: 768px) {#hiloHoleTable .hilo-team-label-full,
  #hiloResultsBottom .hilo-team-label-full {
    display: none;
  }#hiloHoleTable .hilo-team-label-short,
  #hiloResultsBottom .hilo-team-label-short {
    display: inline;
  }
}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css. Co-located
   so banker styling lives in one file; loads before light-theme-overrides
   in index.html so any later-defined :root[data-theme="light"] rule there
   would still win on source order.
   ========================================================================= */

:root[data-theme="light"] body.banker-sheet-active #bankerBody tr:hover td { background: rgba(0,0,0,0.03); }

:root[data-theme="light"] .banker-sheet-backdrop {
  /* [perf] This near-zero background used to be a deliberate no-op — the dim
     was entirely the base rule's backdrop-filter blur, now removed. Give
     light theme its own visible flat dim instead of inheriting nothing. */
  background: rgba(15, 23, 42, 0.12);
}

:root[data-theme="light"] .banker-sheet {
  border-top-color: rgba(21, 32, 43, 0.18);
}

:root[data-theme="light"] .banker-sheet.is-open {
  box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.14);
}

:root[data-theme="light"] .banker-sheet-header {
  background: #f8fafc;
}

:root[data-theme="light"] .banker-sheet-navbtn {
  background: #ffffff;
  border-color: var(--shadow-navy);
  color: #0f172a;
}

:root[data-theme="light"] .banker-sheet-close:hover {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.7);
}

:root[data-theme="light"] .banker-sheet-navbtn:not(:disabled):hover { background: rgba(0,0,0,0.05); }

:root[data-theme="light"] .banker-sheet-close {
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.5);
  color: #b4232f;
}

/* !important below: main.css's global `:root[data-theme="light"] button:not(...)`
   reset (specificity 0,3,1) otherwise beats these plain class/attribute
   selectors (0,3,0 / 0,2,0) — a light-only foot-gun since dark mode has no
   competing button rule at all. Without it these toggles silently fall back
   to the generic button face and stop visibly responding to taps in light
   mode. Keep every light-theme banker-sheet toggle rule on this pattern. */
:root[data-theme="light"] .banker-sheet-pill {
  background: #ffffff !important;
  border-color: var(--shadow-navy) !important;
}

:root[data-theme="light"] .banker-sheet-pill[data-active="true"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}

:root[data-theme="light"] .banker-sheet-mult-toggle {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

:root[data-theme="light"] .banker-sheet-mult-toggle[data-active="true"] {
  background: var(--warn, #f0ad4e) !important;
  border-color: var(--warn, #f0ad4e) !important;
  color: #000 !important;
}

:root[data-theme="light"] .banker-sheet-dblbtn {
  background: var(--panel-alt) !important;
  border-color: var(--line) !important;
}

:root[data-theme="light"] .banker-sheet-dblbtn[data-active="true"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000 !important;
}

:root[data-theme="light"] .banker-sheet-suggestion-muted:hover { background: rgba(0,0,0,0.04); }

:root[data-theme="light"] .banker-sheet-bet-card {
  background: #ffffff;
  border-color: rgba(21, 32, 43, 0.16);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

:root[data-theme="light"] .banker-sheet-pill-stroke {
  background: rgba(0,0,0,0.06);
}

:root[data-theme="light"] .bss-bet-stroke:not(.is-stroke-down):not(.is-stroke-up),
:root[data-theme="light"] .banker-sheet-bet-card-stroke-down .banker-sheet-bet-stroke,
:root[data-theme="light"] .banker-sheet-bet-card-stroke-up .banker-sheet-bet-stroke,
:root[data-theme="light"] .banker-sheet-pill[data-active="true"] .banker-sheet-pill-stroke,
:root[data-theme="light"] .banker-sheet-pill .banker-sheet-pill-stroke:not(.is-stroke-down):not(.is-stroke-up) {
  color: #4b5563;
}

:root[data-theme="light"] .bss-bet-stroke.is-stroke-down {
  color: var(--accent);
}

:root[data-theme="light"] .bss-bet-stroke.is-stroke-up {
  color: var(--danger, #dc3545);
}

:root[data-theme="light"] .banker-sheet-pill-stroke.is-stroke-down {
  color: var(--accent);
  border-color: var(--accent);
}

:root[data-theme="light"] .banker-sheet-pill-stroke.is-stroke-up {
  color: var(--danger, #dc3545);
  border-color: var(--danger, #dc3545);
}

:root[data-theme="light"] .banker-sheet-footer {
  background: rgba(248, 250, 252, 0.94);
}

:root[data-theme="light"] .banker-sheet-done {
  background: rgba(200, 40, 56, 0.9);
  border-color: rgba(190, 35, 50, 0.9);
  color: #fff;
}

:root[data-theme="light"] .banker-stroke-indicator,
:root[data-theme="light"] .banker-inline-stroke-pill {
  color: #4b5563;
}

/* Banker selected toggle emphasis. Kept as a specificity guard: the global
   `:root[data-theme="light"] button` rule in main.css beats the (0,1,0)
   dark face above. Face/border point at the dictionary tokens (same
   computed values in light); the #2d3640 ink has no token. */
:root[data-theme="light"] .banker-toggle-btn {
  background: var(--btn-bg);
  border-color: var(--btn-line);
  color: #2d3640;
}

:root[data-theme="light"] .banker-toggle-btn:hover {
  background: #c8d4e1;
  border-color: #a3afbc;
}

:root[data-theme="light"] .banker-toggle-btn.is-active,
:root[data-theme="light"] .banker-toggle-btn.is-active:hover,
:root[data-theme="light"] .banker-toggle-btn.is-active:focus-visible {
  background: #1f9d55;
  border-color: #187a42;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Banker result row contrast */
:root[data-theme="light"] .banker-result-row.is-player-win {
  background: #dff6e8;
}

:root[data-theme="light"] .banker-result-row.is-banker-win {
  background: #ffe3e3;
}

:root[data-theme="light"] .banker-result-row.is-tie {
  background: #fff1d8;
}