/* ============================================================================
   BANKER BOTTOM SHEET
   Additive UI layer. To remove: delete this entire block and js/banker-sheet.js.
   ============================================================================ */

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

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

/* 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-summary-cell {
  padding: 6px 8px !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.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: 6px;
  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(0, 188, 140, 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: 6px;
  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: hide the standalone stroke pill
     and instead tint the name + amount cells (green = receiving stroke,
     red = giving stroke via plus handicap). */
  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);
  }

  html[data-font-size="large"] body.banker-sheet-active .bss-col-bets .bss-bet-p2x-label {
    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. */
}

/* ---------------- Stroke-tinting on bss compact rows (all widths) ----------------
   Green = receives strokes (negative CH). Red = gives strokes (plus handicap).
   Mirrors the unconditional .banker-sheet-bet-card-stroke-{up,down} treatment
   used inside the bet entry modal. The bss-bet-line uses display:contents,
   so the `>` combinator still matches the rendered children. */
body.banker-sheet-active .bss-bet-stroke-down > .bss-bet-name,
body.banker-sheet-active .bss-bet-stroke-down > .bss-bet-amt {
  background: rgba(0, 188, 140, 0.18);
  color: var(--accent);
  font-weight: 700;
}
body.banker-sheet-active .bss-bet-stroke-up > .bss-bet-name,
body.banker-sheet-active .bss-bet-stroke-up > .bss-bet-amt {
  background: rgba(220, 53, 69, 0.18);
  color: var(--danger, #dc3545);
  font-weight: 700;
}
body.banker-sheet-active .bss-col-banker.bss-bet-stroke-down .bss-banker-name {
  color: var(--accent);
}
body.banker-sheet-active .bss-col-banker.bss-bet-stroke-up .bss-banker-name {
  color: var(--danger, #dc3545);
}

/* ---------------- Sheet container ---------------- */
.banker-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.002);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  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;
  -webkit-overflow-scrolling: touch;
  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: #fff;
}
.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(0, 188, 140, 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(0, 188, 140, 0.95);
  box-shadow: 0 0 0 2px rgba(0, 188, 140, 0.28), inset 0 0 0 1px rgba(0, 188, 140, 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: 12px;
  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: 12px;
  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(0, 188, 140, 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(0, 188, 140, 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 !important;
}
:root:not([data-theme="light"]) .bss-bet-stroke.is-stroke-down {
  color: var(--accent) !important;
}

:root:not([data-theme="light"]) .bss-bet-stroke.is-stroke-up {
  color: var(--danger, #dc3545) !important;
}
:root:not([data-theme="light"]) .banker-sheet-pill-stroke.is-stroke-down {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
:root:not([data-theme="light"]) .banker-sheet-pill-stroke.is-stroke-up {
  color: var(--danger, #dc3545) !important;
  border-color: var(--danger, #dc3545) !important;
}
.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 {
  padding: 10px 16px calc(10px + 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 + 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;
  border-left: 3px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  min-height: 22px;
}
.bsr-row.bsr-player-win {
  background: rgba(104, 211, 145, 0.18);
  border-left-color: var(--accent);
}
.bsr-row.bsr-banker-win {
  background: rgba(255, 107, 107, 0.18);
  border-left-color: var(--danger);
}
.bsr-row.bsr-tie {
  background: rgba(255, 180, 84, 0.14);
  border-left-color: var(--warn);
}
.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;
}

/* Large font mode parity with tablet: emphasize the P2X label in yellow. */
html[data-font-size="large"] body.banker-sheet-active .bss-col-bets .bss-bet-p2x-label {
  color: var(--warn, #f0ad4e) !important;
}

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

/* Large font mode: Wolf chart needs explicit column budgeting so Decision and
   Result stay readable on phones without horizontal crowding. */
:root[data-font-size="large"] #wolfTable {
  table-layout: fixed;
}

:root[data-font-size="large"] #wolfTable thead th:first-child,
:root[data-font-size="large"] #wolfTable tbody td:first-child {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding-left: 2px;
  padding-right: 2px;
}

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

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

:root[data-font-size="large"] #wolfTable tbody td:nth-child(4) {
  white-space: normal;
  line-height: 1.25;
  text-align: left;
}

:root[data-font-size="large"] #wolfTable .wolf-decision {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: var(--text-sm);
}

.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(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: calc(12px + var(--font-size-step));
  transition: all 0.2s;
}

.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) !important;
}

.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) !important;
  }

  /* Compact button rows on desktop: reduce vertical padding by half */
  .game-toggle {
    padding: 5px 2px;
  }
}

.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) !important;
  border-width: 2px !important;
}

.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 !important;
}
.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);
  border-left: 2px solid var(--accent);
}

.banker-result-row.is-banker-win {
  background: rgba(255, 107, 107, 0.15);
  border-left: 2px solid var(--danger);
}

.banker-result-row.is-tie {
  background: rgba(255, 180, 84, 0.1);
  border-left: 2px solid var(--warn);
}

.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));
}

#hiloTable .hilo-team-label-full,
#hiloHoleTable .hilo-team-label-full,
#hiloResultsBottom .hilo-team-label-full {
  display: inline;
}

#hiloTable .hilo-team-label-short,
#hiloHoleTable .hilo-team-label-short,
#hiloResultsBottom .hilo-team-label-short {
  display: none;
}

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

  #hiloTable .hilo-team-label-short,
  #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 {
  background: rgba(255, 255, 255, 0.006);
}

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

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

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

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

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

: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 !important;
}

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

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

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

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

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

: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 !important;
}

/* Banker selected toggle emphasis */
:root[data-theme="light"] .banker-toggle-btn {
  background: #d4dee8;
  border-color: #aebac7;
  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;
  border-left: 3px solid #1f9d55;
}

:root[data-theme="light"] .banker-result-row.is-banker-win {
  background: #ffe3e3;
  border-left: 3px solid #d44848;
}

:root[data-theme="light"] .banker-result-row.is-tie {
  background: #fff1d8;
  border-left: 3px solid #d08a1a;
}