/* =========================
   Game Shell Layout (Desktop)
   ========================= */

@media (min-width: 960px) {
  .scorecard-container {
    max-width: min(1920px, 100vw);
    margin-left: auto;
    margin-right: auto;
    border-radius: 18px 18px 0 0;
  }

  .game-section {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    background: linear-gradient(
      to bottom,
      var(--bg) 0px,
      var(--panel-alt) 40px,
      var(--panel-alt) calc(100% - 40px),
      var(--bg) 100%
    );
  }

  /* Striped side-gutter texture — .game-section variant (619px lane).
     Distinct scope from the entry-panel gutters owned by games-mode.css
     (516px lane) — see the single-owner header there. A dead 516px
     .game-section copy in main.css (shadowed by this one) was deleted. */
  .game-section::before,
  .game-section::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: max(0px, calc(50vw - 619px));
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(120% 85% at 50% 0%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 56%),
      linear-gradient(180deg, rgba(223, 233, 244, 0.92), rgba(209, 221, 234, 0.82));
    box-shadow: inset -1px 0 0 var(--line-mute);
  }

  .game-section::before { left: 0; }

  .game-section::after {
    right: 0;
    box-shadow: inset 1px 0 0 var(--line-mute);
  }

  :root:not([data-theme="light"]) .game-section::before,
  :root:not([data-theme="light"]) .game-section::after {
    background:
      radial-gradient(120% 85% at 50% 0%, rgba(151, 185, 210, 0.28), rgba(151, 185, 210, 0) 56%),
      linear-gradient(180deg, rgba(19, 37, 56, 0.82), rgba(12, 26, 40, 0.74));
    box-shadow: inset -1px 0 0 var(--line-warm);
  }

  :root:not([data-theme="light"]) .game-section::after {
    box-shadow: inset 1px 0 0 var(--line-warm);
  }

  /* Center the inner table content. !important on margin overrides inline
     style="margin: 10px 12px 0" set by JS on child elements (some games set
     margins inline during render — see main.css for the matching note). */
  .game-section > * {
    max-width: 1238px;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    z-index: 1;
  }

  :root[data-font-size="large"] .game-section > * {
    max-width: 1486px;
  }

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

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(1032px, 100vw);
    max-width: 100vw;
  }

  :root[data-font-size="large"] body.mode-games .game-section[aria-hidden="false"] .results-card-wrap {
    width: min(1238px, 100vw);
  }

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals,
  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap .live-results-card {
    border-left: revert;
    border-right: revert;
    border-radius: 18px 18px 0 0;
  }

  body.mode-games .game-section[aria-hidden="false"] .results-card-wrap.is-collapsed .results-collapse-bar {
    border-left: revert;
    border-right: revert;
    border-radius: 18px 18px 0 0;
  }

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

/* =========================
   Games Launcher / Sections
   Appended from main.css
   ========================= */

/* =========================
   Games Launcher / Sections
   ========================= */
.games-launcher-shell {
  margin: var(--space-xs) var(--space-lg) 0;
}



.games-card-footer {
  min-height: 53px;
  padding: 3px 8px 0;
  border-top: none;
}



/* Mini scroll indicator track + thumb. The track element is always rendered
   so its height is reserved on first paint — prevents the footer from
   bouncing 7px when JS later adds the overflow class — but it must stay
   transparent until there's actually something to scroll: a handful of
   tabs on a narrow phone can land within a few px of the container width
   (WebKit/Blink font-metric rounding differs enough to flip this either
   way per-device), and a permanently-tinted bar reads as a stray "stripe"
   rather than a scroll hint when there's nothing to scroll to. */
.gamesbar-scroll-indicator {
  position: relative;
  height: 3px;
  margin: 4px 8px 0;
  border-radius: 2px;
  background: transparent;
  pointer-events: none;
}

.gamesbar-scroll-indicator__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 2px;
  background: #4a9eff;
  opacity: 0;
  transition: left 80ms linear, width 120ms ease, opacity 120ms ease;
}

.games-launcher-shell.has-scroll-overflow .gamesbar-scroll-indicator {
  background: rgba(74, 158, 255, 0.18);
}

.games-launcher-shell.has-scroll-overflow .gamesbar-scroll-indicator__thumb {
  opacity: 0.95;
}








.gamesbar {
  margin: 0;
  display: flex;
  gap: var(--games-launcher-gap, 6px);
  flex-wrap: wrap;
  align-items: center;
  overflow: visible;
  position: relative;
}

body.mode-games .gamesbar {
  margin-top: 0;
}

.game-toggle-item {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  flex: 1 1 180px;
  min-width: 0;
}
/* Honor the [hidden] attribute. The explicit display:inline-flex above
   wins over the UA's default [hidden]{display:none}, so without this
   override an item with hidden=true still renders (which broke per-round
   games-picker visibility filtering). */
.game-toggle-item[hidden] {
  display: none !important;
}

.gamesbar::-webkit-scrollbar {
  display: none;
}

.game-toggle {
  cursor: pointer;
  border: 2px solid var(--line);
  background: var(--panel-alt);
  border-radius: var(--radius-3xl);
  padding: 10px 2px;
  /* Match the Score / Games entry-switcher height EXACTLY by sharing its
     height variable. --footer-action-h is 40px on desktop and 48px on
     mobile; the old calc(--btn-base-h…) resolved to 40px everywhere, so the
     game buttons were 8px shorter than Score/Games on mobile (the recurring
     regression). Keep this in lock-step with .entry-switcher-btn. */
  min-height: var(--footer-action-h);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(104, 211, 145, 0.1);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  position: relative;
  z-index: 1;
  font-size: 19px;
}

.game-toggle.active {
  background: rgba(74, 158, 255, 0.2);
  border-color: #4a9eff;
  color: #d8ecff;
  box-shadow: inset 0 0 0 1px rgba(74, 158, 255, 0.45), 0 0 0 1px rgba(74, 158, 255, 0.25);
}

/* Pop keyframe plays when a game tab becomes active (JS adds/removes class) */
@keyframes gameTabActivate {
  0%   { transform: scale(0.93); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.game-toggle.tab-activating {
  animation: gameTabActivate 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.game-section {
  display: none;
  position: relative;
  margin: 0 0 24px;
  padding: 0 0 var(--space-md);
  border: none;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: var(--panel-alt);
  overflow: visible;
  /* Layout-isolate each game's panel so a score edit in Banker
     doesn't dirty Vegas's layout (only the open panel renders, but
     prior to this hint the engine still recomputed inherited styles
     across the whole tree on every input). Combined `layout style
     paint` is safe here because .game-section already has
     position:relative (so it's already a containing block for
     position:absolute descendants — no behavior change), and no
     game-section descendant uses position:fixed to escape the
     section. Big win on Android WebView during score updates. */
  contain: layout style paint;
}

.game-section.open {
  display: block;
}

/* Game tables stretch edge-to-edge; inset only non-table children. */
.game-section > *:not(.vegas-wrap):not(.banker-wrap):not(.live-results-panel):not(.live-results-card):not(#bankerFooterTotals):not(.vegas-controls):not(.hilo-bottom-results):not(.game-options-panel):not(.results-card-wrap):not(.game-scroll-body) {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Scroll body is the sole vertical-scroll container inside each game section.
   Its direct children get the same side padding as game-section direct children. */
.game-scroll-body {
  padding-left: 0;
  padding-right: 0;
}

.game-scroll-body > *:not(.vegas-wrap):not(.banker-wrap) {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Game options open as a popover over the game content (do not reflow table). */
.game-section > .game-options-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--game-sticky-head-top, 0px) + 52px);
  z-index: 60;
  margin: 0;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overflow-x: visible;
  background: var(--panel-alt, #1a2a38);
  border: 1.5px solid var(--line, #2b3a47);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.game-section h2 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.1;
}

.game-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 6px 0;
  min-height: 44px;
  position: sticky;
  top: 0;
  z-index: 31;
  background: var(--panel-alt);
  box-shadow: 0 2px 0 0 var(--line);
  overflow: visible;
}

.game-section-header h2 {
  margin: 0;
  flex: 1 1 auto;
}

.skins-header-value {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-left: 6px;
}

/* Stakes card shown just above the Skins table: a labeled per-hole/player
   dollar value on the left, the Press Holes action on the right. */
.skins-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* Gap below the section header above; breathing room inside so the text
     isn't flush to the card edges. */
  margin: 14px 0 12px;
    padding: 18px clamp(24px, 6vw, 42px);
  border: 1px solid var(--line-base, rgba(136, 165, 191, 0.22));
  border-radius: var(--game-menu-radius, 16px);
  /* White in light mode, appropriate dark surface in dark mode — same var the
     header buttons use, so the card reads white like them. */
  background: var(--panel);
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.45);
}
.skins-stakes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.skins-stakes-label {
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.skins-summary-card .skins-header-value {
  margin-left: 0;
  font-size: calc(var(--text-lg, 18px) + 3px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
/* Press Holes: a normal-height control, not the chunky default .btn box. */
.skins-press-btn {
  flex: 0 0 auto;
  height: calc(var(--btn-base-h, 40px) + var(--font-grow));
  min-height: calc(var(--btn-base-h, 40px) + var(--font-grow));
  white-space: nowrap;
}

.game-section-header .controls {
  display: flex;
  align-items: center;
  margin: 0;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  overflow: visible;
}

/* .game-activity-toggle rules removed 2026-06 — the activity-toggle pill
   markup was deleted from all game partials; nothing renders that class. */

.game-section.is-inactive > :not(.game-section-header):not(.game-inactive-state) {
  display: none;
}

.game-inactive-state {
  margin: 14px 0 8px;
  padding: 18px 14px;
  border: 1px dashed color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-alt) 82%, transparent);
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}

.game-toggle.is-inactive {
  opacity: 0.55;
}

.live-results-card {
  display: block;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, #000 10%, transparent);
  overflow-x: auto;
  /* Independent island — internal table layout shouldn't affect the
     parent .game-section. The card already establishes a scroll
     container via overflow-x; adding layout containment + style/paint
     isolation prevents the inner live-results-table re-layouts from
     thrashing the outer scorecard on Android. */
  contain: layout style paint;
}

.live-results-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.live-results-table th,
.live-results-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  text-align: center;
  padding: 7px 8px;
  white-space: nowrap;
  font-size: var(--text-md);
}

.live-results-title-row th {
  height: 34px;
  font-size: var(--text-md);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel-alt) 96%, transparent),
    color-mix(in srgb, var(--panel-alt) 90%, transparent)
  );
  color: var(--ink);
}

.live-results-data-row td {
  height: var(--touch-min);
  background: transparent;
  color: var(--ink);
  font-weight: 650;
}

.live-results-table tbody tr.live-results-data-row:nth-child(odd) td {
  background: color-mix(in srgb, var(--panel) 97%, transparent);
}

.live-results-table tbody tr.live-results-data-row:nth-child(even) td {
  background: color-mix(in srgb, var(--panel-alt) 90%, transparent);
}

.live-results-table tbody tr.live-results-data-row:hover td {
  background: color-mix(in srgb, var(--panel-alt) 84%, transparent);
}.game-totals-hilo-mini-table tbody th,
.game-totals-hilo-mini-table tbody td {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

.game-totals-skins-mini-table tbody th,
.game-totals-skins-mini-table tbody td {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

.live-results-label {
  text-align: left;
  font-weight: 700;
  position: sticky;
  left: 0;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  z-index: 2;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  padding-left: 8px;
  padding-right: 8px;
  box-shadow: 2px 0 0 0 var(--line);
}

.live-results-title-row .live-results-label {
  background: color-mix(in srgb, var(--panel-alt) 95%, transparent);
}

.live-results-data-row .live-results-label {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

.live-results-table td:not(.live-results-label),
.live-results-table th:not(.live-results-label) {
  font-variant-numeric: tabular-nums;
}

.live-results-table td.banker-total-positive,
.live-results-table th.banker-total-positive {
  color: var(--accent);
  font-weight: 700;
}

.live-results-table td.banker-total-negative,
.live-results-table th.banker-total-negative {
  color: var(--danger);
  font-weight: 700;
}

.live-results-table tr:last-child td {
  border-bottom: none;
}

.live-results-card.is-disabled {
  background: color-mix(in srgb, var(--panel) 82%, #808080 18%);
}

.live-results-card.is-disabled .live-results-table {
  opacity: 0.72;
}

.live-results-card.is-disabled .live-results-warning-row td {
  opacity: 1;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
}

.vegas-results-placeholder .live-results-warning-row td {
  height: 34px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.vegas-results-table {
  table-layout: fixed;
}

/* Rotation settlement: let columns size naturally and scroll when narrow */
.vegas-results-table.is-rotation {
  table-layout: auto;
  width: max-content;
  min-width: 460px;
}

.vegas-results-table col.lr-col-label,
.wolf-results-table col.lr-col-label {
  width: 60px;
}

.hilo-results-table col.lr-col-label {
  width: 160px;
}

.hilo-results-table {
  table-layout: auto;
}

.hilo-results-table .live-results-label {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
  text-align: left;
  font-weight: 600;
  width: 160px;
  min-width: 120px;
  max-width: 200px;
  box-shadow: 2px 0 0 0 var(--line);
  white-space: normal;
}

.live-results-title-row .hilo-results-table .live-results-label {
  background: var(--panel-alt);
}

.hilo-results-table .live-results-data-row .live-results-label {
  background: transparent;
}

.vegas-results-table .live-results-label {
  position: static;
  left: auto;
  z-index: auto;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  padding-left: 6px;
  padding-right: 6px;
  box-shadow: none;
}

.wolf-results-table {
  table-layout: fixed;
}

.wolf-results-table .live-results-label {
  position: static;
  left: auto;
  z-index: auto;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  padding-left: 5px;
  padding-right: 5px;
  box-shadow: none;
}

/* ── Stroke Play: traditional leaderboard treatment ───────────────────────
   Distinguishes the leaderboard from the money-game result cards above:
   colored vs-par tone, a tinted title bar, a highlighted leader row, and a
   small HCP pill on net-mode rows. */

/* Card renders edge-to-edge in the games area (it's a static, always-visible
   leaderboard now — see docs/partials/games/strokeplay.html — not a floating
   pinned-results drawer), so it doesn't need the inset the generic
   .game-scroll-body child padding gives every other game's results card.
   ID-scoped so it can't drift into the shared cross-game padding rules. */
#strokePlaySection .game-scroll-body,
#strokePlaySection .game-scroll-body > .strokeplay-bottom-results {
  padding-left: 0;
  padding-right: 0;
}

/* Fixed layout + explicit column widths: Pos only ever holds a rank badge
   or medal, so give it a small fixed share and let Player take the rest.
   table-layout:auto (the shared default) would otherwise size columns off
   the widest content the *table* has ever rendered, splitting width more
   evenly than the columns actually need. */
.strokeplay-standings-table {
  table-layout: fixed;
}

.strokeplay-standings-table col.sp-col-pos    { width: 14%; }
.strokeplay-standings-table col.sp-col-player { width: 38%; }
.strokeplay-standings-table col.sp-col-num    { width: 18%; }

.strokeplay-standings-table .live-results-title-row th {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 16%, var(--panel-alt) 84%),
    color-mix(in srgb, var(--accent) 8%, var(--panel-alt) 92%)
  );
}

.strokeplay-standings-table .live-results-data-row td {
  height: 42px;
}

.strokeplay-rank-num {
  font-weight: 700;
  color: var(--muted);
}

/* Player column is a fixed width (see .sp-col-player) — a long name
   truncates with an ellipsis instead of overflowing into the Net/vs Par
   columns. min-width:0 is required for a flex/block child to shrink below
   its content size instead of forcing the row wider. */
.strokeplay-player-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Net mode: name + HCP chip share the row via flex so the chip never
   shrinks or wraps away — only the name truncates. */
.strokeplay-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.strokeplay-name-row .strokeplay-player-name {
  flex: 1 1 auto;
}

/* Small chip that sits right next to the name — just the handicap number,
   no "HCP" label. */
.strokeplay-hcp-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
  color: var(--muted);
}

td.strokeplay-score-under { color: var(--accent); font-weight: 700; }
td.strokeplay-score-over  { color: var(--danger); font-weight: 700; }
td.strokeplay-score-even  { color: var(--ink); font-weight: 700; }

.strokeplay-standings-table tbody tr.live-results-data-row.strokeplay-leader-row td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

td.strokeplay-leader {
  color: var(--accent);
  font-weight: 800;
}

/* ── Stableford: points leaderboard treatment ──────────────────────────────
   Same visual language as Stroke Play's own block above (tinted title bar,
   highlighted leader row, HCP pill on net-mode rows) — the one semantic flip
   is the points tone: this is a DESCENDING/higher-is-better leaderboard (most
   points wins), so a value ABOVE the par-equivalent (2 points) reads positive
   (green) and a value BELOW it reads negative (red) — the mirror image of
   Stroke Play's vsPar tone, where a LOWER score is the good direction. */

#stablefordSection .game-scroll-body,
#stablefordSection .game-scroll-body > .stableford-bottom-results {
  padding-left: 0;
  padding-right: 0;
}

.stableford-standings-table {
  table-layout: fixed;
}

.stableford-standings-table col.stbf-col-pos    { width: 14%; }
.stableford-standings-table col.stbf-col-player { width: 38%; }
.stableford-standings-table col.stbf-col-num    { width: 18%; }

.stableford-standings-table .live-results-title-row th {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 16%, var(--panel-alt) 84%),
    color-mix(in srgb, var(--accent) 8%, var(--panel-alt) 92%)
  );
}

.stableford-standings-table .live-results-data-row td {
  height: 42px;
}

.stableford-rank-num {
  font-weight: 700;
  color: var(--muted);
}

/* Player column is a fixed width (see .stbf-col-player) — a long name
   truncates with an ellipsis instead of overflowing into the Points/Thru
   columns. min-width:0 is required for a flex/block child to shrink below
   its content size instead of forcing the row wider. */
.stableford-player-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Net mode: name + HCP chip share the row via flex so the chip never
   shrinks or wraps away — only the name truncates. */
.stableford-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.stableford-name-row .stableford-player-name {
  flex: 1 1 auto;
}

/* Small chip that sits right next to the name — just the handicap number,
   no "HCP" label. */
.stableford-hcp-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
  color: var(--muted);
}

/* Points tone — HIGHER is better (flipped from Stroke Play's vsPar tone,
   where lower is better): above-par-equivalent (>2 points) reads positive/
   green, below (<2 points) reads negative/red, exactly-par (2) is neutral. */
td.stableford-points-good { color: var(--accent); font-weight: 700; }
td.stableford-points-bad  { color: var(--danger); font-weight: 700; }
td.stableford-points-even { color: var(--ink); font-weight: 700; }

.stableford-standings-table tbody tr.live-results-data-row.stableford-leader-row td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

td.stableford-leader {
  color: var(--accent);
  font-weight: 800;
}

/* Compact layout on narrow screens so all player columns fit without scrolling */
@media (max-width: 600px) {
  .live-results-table th,
  .live-results-table td {
    padding: 4px 5px;
    font-size: var(--text-sm);
  }
  .live-results-title-row th {
    height: 28px;
    font-size: var(--text-sm);
  }
  .live-results-data-row td {
    height: 36px;
  }

  .vegas-results-table .live-results-label {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .wolf-results-table .live-results-label {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .strokeplay-standings-table .live-results-data-row td {
    height: 36px;
  }

  .stableford-standings-table .live-results-data-row td {
    height: 36px;
  }
}

/* ── Bingo Bango Bongo: points leaderboard treatment ───────────────────────
   Same visual language as Stableford's own block above (tinted title bar,
   highlighted leader row) — BBB has no gross/net split (fixed
   handicapMode:'gross', no scoring-mode toggle at all), so there's no HCP
   pill / net-mode row variant to carry over, just the plain leaderboard. */

#bbbSection .game-scroll-body,
#bbbSection .game-scroll-body > .bbb-bottom-results {
  padding-left: 0;
  padding-right: 0;
}

.bbb-standings-table {
  table-layout: fixed;
}

.bbb-standings-table col.bbb-col-pos    { width: 12%; }
.bbb-standings-table col.bbb-col-player { width: 28%; }
.bbb-standings-table col.bbb-col-num    { width: 12%; }

.bbb-standings-table .live-results-title-row th {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 16%, var(--panel-alt) 84%),
    color-mix(in srgb, var(--accent) 8%, var(--panel-alt) 92%)
  );
}

.bbb-standings-table .live-results-data-row td {
  height: 42px;
}

.bbb-rank-num {
  font-weight: 700;
  color: var(--muted);
}

.bbb-standings-table tbody tr.live-results-data-row.bbb-leader-row td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

td.bbb-leader {
  color: var(--accent);
  font-weight: 800;
}

/* Per-hole Bingo/Bango/Bongo picker table (bbbTable/bbbBody) — same sticky-
   header/bordered-cell chrome as Vegas/Banker/Skins/Junk's own hole tables
   (game-tables.css's shared .vegas-table/.banker-table/.skins-table/
   .junk-table chain), written standalone here rather than threaded into
   that chain: BBB's table has no tfoot totals row and no team/achievement
   columns, so joining the shared multi-selector chain would carry rules
   (tfoot styling, team-column widths) this table never uses. */
#bbbTable {
  width: max(100%, 480px);
  border-collapse: separate;
  border-spacing: 0;
}

#bbbTable th,
#bbbTable td {
  border-bottom: 2px solid var(--line);
  padding: 4px 6px;
  text-align: center;
  white-space: nowrap;
  font-size: var(--text-lg);
}

#bbbTable thead th {
  position: sticky;
  top: var(--game-sticky-head-top, 0px);
  background: var(--table-head-bg);
  z-index: var(--z-sticky-header);
  transform: translateZ(0);
  touch-action: pan-x pan-y;
}

#bbbTable thead th:first-child,
#bbbTable tbody td:first-child {
  width: 52px;
  min-width: 52px;
  position: sticky;
  left: 0;
  background-color: var(--panel);
  z-index: var(--z-sticky-col);
  border-right: 2px solid var(--line);
  transform: translateZ(0);
}

#bbbTable thead th:first-child {
  z-index: var(--z-sticky-corner);
  background-color: var(--panel);
}

#bbbBody tr:last-child td,
#bbbBody tr:last-child th {
  border-bottom: 2px solid var(--line);
}

.bbb-hole-num {
  font-weight: 700;
  color: var(--muted);
}

.bbb-pick-cell {
  padding: 3px 4px !important;
}

.bbb-picker-select {
  width: 100%;
  min-width: 84px;
  max-width: 130px;
}

:root[data-theme="light"] #bbbTable thead th {
  background: var(--table-head-bg);
}

@media (max-width: 600px) {
  .bbb-standings-table .live-results-data-row td {
    height: 36px;
  }

  #bbbTable th,
  #bbbTable td {
    padding: 4px 5px;
    font-size: var(--text-sm);
  }

  .bbb-picker-select {
    min-width: 64px;
  }
}

/* Persistent bottom results cards (Vegas, Junk) + Banker bottom totals */
.vegas-bottom-results,
.hilo-bottom-results,
.junk-bottom-results,
.wolf-bottom-results,
.bbb-bottom-results,
#bankerFooterTotals {
  margin: 10px 0 0;
}

#bankerFooterTotals {
  position: static;
  z-index: auto;
}

/* Reserve room behind the pinned results card while a game tab is visible.
   Table viewport/padding adjustments are handled in JS so rows can still
   scroll past hole 18. The pin itself (position:fixed + offsets + z-index)
   and the per-game card chrome/height caps moved to games-mode.css 2026-06 —
   see "PINNED RESULTS — single owner" there. Do not re-add pins here. */
body.mode-games #bankerSection[aria-hidden="false"],
body.mode-games #vegasSection[aria-hidden="false"],
body.mode-games #hiloSection[aria-hidden="false"],
body.mode-games #junkSection[aria-hidden="false"],
body.mode-games #wolfSection[aria-hidden="false"] {
  padding-bottom: 108px;
}

/* Collapsed pill corner/border behavior is owned by the rule in games-mode.css
   that matches score-mode's collapsed Game Totals pill — full rounded pill,
   soft border, surface gradient, light shadow. */

/* Results card collapsible wrapper */
.results-card-wrap {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* When collapsed: add margin back */
.results-card-wrap.is-collapsed {
  margin: 10px 0 0;
}

.results-card-wrap .live-results-card,
.results-card-wrap .banker-header-totals {
  margin: 0;
}

/* Collapse button as a real header bar above the card content */
.results-collapse-bar {
  -webkit-appearance: none;
  appearance: none;
  order: -1; /* Always render above the card regardless of DOM order */
  position: static;
  width: 100%;
  height: auto;
  min-height: 40px;
  background: var(--panel-alt);
  border: 2px solid var(--line);
  border-bottom: none;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  z-index: 2;
  gap: 12px;
}

.results-collapse-bar:hover {
  background: color-mix(in srgb, var(--panel-alt) 85%, var(--accent) 15%);
}

/* Game name label always visible */
.results-collapse-label {
  display: inline;
}

.results-collapse-chevron::before {
  content: '▲ Hide';
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.6;
}

.results-collapse-bar:hover .results-collapse-chevron::before {
  opacity: 1;
}

/* Hide the card's own title row — button header replaces it */
.results-card-wrap:not(.is-collapsed) .live-results-title-row,
.results-card-wrap:not(.is-collapsed) .banker-header-title-row,
.results-card-wrap:not(.is-collapsed) .banker-header-totals-table .live-results-title-row {
  display: none;
}

/* Remove top border-radius from card since button is the header */
.results-card-wrap:not(.is-collapsed) .live-results-card,
.results-card-wrap:not(.is-collapsed) .banker-header-totals {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  margin-top: 0;
}

/* When collapsed: full rounded bar with ▼ Show */
.results-card-wrap.is-collapsed .results-collapse-bar {
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  opacity: 1;
}

.results-card-wrap.is-collapsed .results-collapse-bar:hover {
  background: color-mix(in srgb, var(--panel-alt) 80%, var(--accent) 20%);
}

.results-card-wrap.is-collapsed .results-collapse-chevron::before {
  content: '▼ Show';
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
}

.results-card-wrap.is-collapsed .results-collapse-bar:hover .results-collapse-chevron::before {
  opacity: 1;
}

.results-card-wrap.is-collapsed .live-results-card,
.results-card-wrap.is-collapsed .banker-header-totals {
  display: none;
}

.vegas-rotation-breakdown {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-alt);
  color: var(--ink);
  line-height: 1.4;
}

.banker-header-totals {
  display: block;
  width: 100%;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow-x: auto;
}

.banker-header-totals-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.banker-header-totals-table th,
.banker-header-totals-table td {
  border-bottom: 2px solid var(--line);
  text-align: center;
  padding: 4px 8px;
  white-space: nowrap;
  font-size: var(--text-lg);
}

.banker-header-totals-table .banker-header-data-row td {
  min-width: 72px;
}

.banker-header-title-row th {
  height: 34px;
  font-size: var(--text-xl);
  background: var(--panel-alt);
  color: var(--ink);
}

.banker-header-data-row td {
  height: var(--touch-min);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

.banker-header-totals-table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 600px) {
  .banker-header-totals-table th,
  .banker-header-totals-table td {
    padding: 2px 6px;
    font-size: var(--text-sm);
  }
  .banker-header-totals-table .banker-header-data-row td {
    min-width: 64px;
  }
  .banker-header-title-row th {
    height: 28px;
    font-size: var(--text-lg);
  }
  .banker-header-data-row td {
    height: 36px;
  }
}

.game-options-panel {
  margin-bottom: 10px;
}

.game-options-toggle {
  position: relative;
  gap: 4px;
  border-color: #2b3a47;
  background: #182430;
  white-space: nowrap;
}

.game-options-toggle::after {
  content: '▾';
  font-size: 0.92em;
  transform: rotate(-90deg);
  transition: transform var(--transition-fast) ease;
}

.game-options-icon-btn,
.banker-options-icon-btn {
  /* Square, and the SAME height as the text toggles in the row
     (.game-options-toggle uses this exact calc), so every control in a game
     header is one height and they scale together with the font-size setting.
     Previously these were rigid 40px while the toggles scaled, so they only
     lined up at the "medium" font size. */
  min-width: calc(var(--btn-base-h, 40px) + var(--font-grow));
  width: calc(var(--btn-base-h, 40px) + var(--font-grow));
  min-height: calc(var(--btn-base-h, 40px) + var(--font-grow));
  height: calc(var(--btn-base-h, 40px) + var(--font-grow));
  padding: 0;
  justify-content: center;
  position: relative;
  z-index: 32;
}

.game-options-icon-btn::after,
.banker-options-icon-btn::after {
  content: none;
}

/* Uniform height for every control in a game-section header row. The square
   icon buttons already use this calc; the text toggles ("Press Holes") carry
   full .btn padding, so without pinning them they render at different heights.
   Fixed height (not just min-height) so padding/line-height can't inflate the
   text toggle past the icons. Scoped to game-section headers so the scorecard
   footer's Score Options toggle is unaffected. */
.game-section-header .controls .game-options-toggle {
  min-height: calc(var(--btn-base-h, 40px) + var(--font-grow));
  height: calc(var(--btn-base-h, 40px) + var(--font-grow));
}

.standings-toggle-btn {
  min-width: 36px;
  width: 36px;
  min-height: 36px;
  padding: 0;
  justify-content: center;
  font-size: calc(15px + var(--font-size-step));
}

.standings-toggle-btn.is-collapsed {
  border-color: var(--line);
  background: #1c2b38;
}

.game-options-toggle.is-open {
  border-color: var(--accent);
  background: rgba(104, 211, 145, 0.22);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(104, 211, 145, 0.35);
}

.game-options-toggle.is-open::after {
  transform: rotate(0deg);
}.scorecard-clear-actions-toggle.is-open {
  border-color: var(--accent);
  background: rgba(104, 211, 145, 0.22);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(104, 211, 145, 0.35);
}

/* Dark mode micro-contrast pass for inactive controls.
   The .btn branch excludes selected .hcp-mode-btn-family toggles
   (data-active="true") the same way .active/.is-open already are — those
   components signal "selected" via the attribute instead of a literal
   class, and without this exclusion this rule's specificity (0,6,0) beats
   their selected-state rules (games-mode.css/game-options-ui.css, (0,5,0)
   or lower), flattening the selected look. */
:root:not([data-theme="light"]) .btn:not(.accent):not(.active):not(.is-open):not(.hcp-mode-btn[data-active="true"]),
:root:not([data-theme="light"]) .theme-toggle,
:root:not([data-theme="light"]) .game-toggle:not(.active),
:root:not([data-theme="light"]) .entry-switcher-btn:not(.active),
:root:not([data-theme="light"]) .game-options-toggle:not(.is-open),
:root:not([data-theme="light"]) .banker-toggle-btn:not(.is-active),
:root:not([data-theme="light"]) .junk-cell summary,
:root:not([data-theme="light"]) .junk-cell button {
  background: #232b33;
  border-color: #627080;
  box-shadow: inset 0 0 0 1px var(--hi-thin);
}

:root:not([data-theme="light"]) .btn:not(.accent):not(.active):not(.is-open):not(.hcp-mode-btn[data-active="true"]):hover,
:root:not([data-theme="light"]) .theme-toggle:hover,
:root:not([data-theme="light"]) .game-toggle:not(.active):hover,
:root:not([data-theme="light"]) .entry-switcher-btn:not(.active):hover,
:root:not([data-theme="light"]) .game-options-toggle:not(.is-open):hover,
:root:not([data-theme="light"]) .banker-toggle-btn:not(.is-active):hover,
:root:not([data-theme="light"]) .junk-cell summary:hover,
:root:not([data-theme="light"]) .junk-cell button:hover {
  background: #2a343e;
  border-color: #708093;
}

/* Dark mode: To Par text in white */
:root:not([data-theme="light"]) .to-par[data-sign="+"],
:root:not([data-theme="light"]) .to-par[data-sign="0"] {
  color: #ffffff;
}

:root:not([data-theme="light"]) .scorecard-mobile-to-par[data-sign="+"],
:root:not([data-theme="light"]) .scorecard-mobile-to-par[data-sign="0"] {
  color: #ffffff;
}

.pill {
  font-size: var(--text-sm);
  color: var(--muted);
}

/* =========================
   Games Native Polish (final overrides)
   Appended from main.css
   ========================= */

/* =========================
   Games Native Polish (final overrides)
   ========================= */

/* Cleaner game surface hierarchy: less border noise, more depth by layer. */
.game-section-header .controls {
  gap: 8px;
}

/* .game-options-icon-btn / .banker-options-icon-btn border-width override —
   identical block lives in ui-polish.css (which loads later and wins).
   Duplicate here removed. */

.final-round-report-panel.game-options-panel {
  background: rgba(255, 255, 255, 0.006);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
:root:not([data-theme="light"]) .final-round-report-panel.game-options-panel {
  background: rgba(0, 0, 0, 0.002);
}
:root:not([data-theme="light"]) .final-round-report-sheet {
  background: #122234;
}

.control-box,
.team-box,
.opts-box {
  border-color: rgba(128, 153, 178, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.game-toggle {
  border-width: 1px;
  border-color: rgba(128, 153, 178, 0.3);
  box-shadow: 0 8px 16px -14px var(--shadow-tint);
}

:root:not([data-theme="light"]) .control-box,
:root:not([data-theme="light"]) .team-box,
:root:not([data-theme="light"]) .opts-box {
  border-color: rgba(112, 148, 178, 0.24);
}

:root:not([data-theme="light"]) .game-toggle {
  border-color: rgba(112, 148, 178, 0.38);
  box-shadow: 0 10px 18px -16px rgba(0, 0, 0, 0.58);
}

@media (max-width: 480px) {
  .game-toggle {
    border-radius: 20px;
  }
}

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

:root[data-theme="light"] .games-launcher-shell.has-scroll-overflow .gamesbar-scroll-indicator {
  background: rgba(37, 99, 235, 0.18);
}

:root[data-theme="light"] .gamesbar-scroll-indicator__thumb {
  background: #2563eb;
}

:root[data-theme="light"] .final-round-report-panel.game-options-panel {
  background: rgba(255, 255, 255, 0.006);
}

:root[data-theme="light"] .final-round-report-sheet {
  background: #f8fbff;
}

/* More light-theme rules — moved from light-theme-overrides.css.
   Note: ui-polish.css also defines :root[data-theme="light"] .game-toggle
   and .entry-switcher-btn.active; the rules below intentionally win the
   cascade because ui-polish loads before this file gets re-loaded... wait,
   that's not the case. To preserve current rendering, the conflicting
   duplicates were removed from ui-polish.css. See git history. */

:root[data-theme="light"] .game-toggle {
  background: #edf2f6;
  border-color: #b3bfcc;
  /* Light values match the dictionary tokens, but the dark .game-toggle rule
     uses var(--muted) text on var(--panel-alt) (not the token dark values),
     so this override cannot be deleted — literals re-pointed at the tokens
     instead (exact-value swap in light). */
  color: var(--ink-strong);
}

:root[data-theme="light"] .game-toggle.active {
  /* Dark .game-toggle.active is rgba(74,158,255,.2) / #4a9eff / #d8ecff —
     NOT the --accent-press token dark values — so the override must stay;
     its literals are re-pointed at the tokens (exact-value swap in light). */
  background: var(--accent-press);
  border-color: var(--accent-press-line);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 1px var(--hi-medium), 0 0 0 1px rgba(11, 116, 209, 0.3);
}

:root[data-theme="light"] .game-section {
  background: #e2e9f0;
  border-color: #bcc7d2;
}

:root[data-theme="light"] .entry-switcher-btn {
  background: #edf2f6;
  border-color: #b3bfcc;
  color: #4a5560;
}

:root[data-theme="light"] .entry-switcher-btn:hover {
  background: #e4ecf2;
  border-color: #b3bfcc;
  color: #2d3640;
}

:root[data-theme="light"] .entry-switcher-btn.active,
:root[data-theme="light"] .entry-switcher-btn.active:hover {
  /* Same active-blue trio as .game-toggle.active above: the dark counterpart
     (owned by a later file) doesn't use the token dark values, so the
     override stays — literals re-pointed at the tokens (exact-value swap). */
  background: var(--accent-press);
  border-color: var(--accent-press-line);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 1px var(--hi-medium);
}