/* ============================================================
   game.css — Match screen styles
   Builds on top of style.css variables
   ============================================================ */

.app { max-width: 1080px; margin: 0 auto; padding: 16px; }

/* ── Landing ─────────────────────────────────────────────────── */
#landingScreen {
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 36px; animation: fadeUp .4s ease both;
}
.landing-hero { text-align: center; }
.landing-hero h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.landing-hero p  { color: var(--text-2); }

.landing-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; width: 100%; max-width: 440px;
}
@media (max-width: 420px) { .landing-grid { grid-template-columns: 1fr; } }

.landing-card {
  background: var(--grad-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 32px 20px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: var(--shadow);
  transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s, border-color .2s;
  position: relative; overflow: hidden;
}
.landing-card:hover { transform: translateY(-4px) scale(1.02); }
.landing-card:active { transform: scale(0.98); }
.landing-card.freeplay:hover { border-color: var(--teal); box-shadow: 0 8px 32px rgba(153,35,26,0.22); }
.landing-card.league:hover   { border-color: var(--blue); box-shadow: var(--shadow-blue); }
.landing-card--locked { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.lc-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.lc-icon--fp     { background: var(--teal-bg); border: 1px solid rgba(153,35,26,0.25); }
.lc-icon--lg     { background: var(--blue-bg); border: 1px solid rgba(153,35,26,0.25); }
.lc-icon--locked { background: var(--surface-3); border: 1px solid var(--border-2); }

.lc-title { font-size: 18px; font-weight: 800; }
.lc-sub   { font-size: 12px; color: var(--text-3); }

/* ── League select ───────────────────────────────────────────── */
#leagueSelectScreen {
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; animation: fadeUp .35s ease both;
}
.league-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 12px; width: 100%; max-width: 500px;
}
.league-pick-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--grad-card); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); padding: 16px; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.league-pick-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.lc-div {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; flex-shrink: 0;
}
.div-a { background: var(--blue-bg); border: 1px solid rgba(153,35,26,.3); color: var(--blue-2); }
.div-b { background: var(--red-bg);  border: 1px solid rgba(213,55,42,.3);  color: var(--red-2); }
.lc-body .lc-name { font-size: 14px; font-weight: 700; }
.lc-body .lc-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ── PIN ─────────────────────────────────────────────────────── */
#pinScreen {
  min-height: calc(100vh - 56px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeUp .35s ease both;
}
.pin-wrap {
  background: var(--grad-card); border: 1px solid var(--border-2);
  border-radius: var(--r-xl); padding: 28px 24px;
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow);
}
.pin-title { font-size: 20px; font-weight: 900; text-align: center; }
.pin-sub   { font-size: 13px; color: var(--text-2); text-align: center; margin-top: -8px; }
.pin-display {
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: 14px;
  font-size: 28px; font-weight: 900; text-align: center;
  letter-spacing: 12px; color: var(--blue-2); min-height: 64px;
  transition: border-color .15s;
}
.pin-display.error { border-color: var(--red); color: var(--red-2); animation: shake .35s ease; }
.pin-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.pin-grid button { height: 58px; font-size: 22px; font-weight: 800; border-radius: var(--r-sm); }
.pin-grid button.back  { background: var(--teal-bg); border-color: rgba(153,35,26,.25); color: var(--teal); }
.pin-grid button.enter { background: var(--blue); border-color: transparent; color: #fff; }

/* ── Setup ───────────────────────────────────────────────────── */
#setupScreen { display: flex; flex-direction: column; gap: 16px; animation: fadeUp .35s ease both; }
.mode-bar { display: flex; align-items: center; justify-content: space-between; }
.mode-title { font-size: 18px; font-weight: 900; }

/* ── Game-mode setup (option B redesign) ─────────────────────── */
.gm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 600px) {
  .gm-grid { grid-template-columns: 1fr; gap: 14px; }
}
.gm-col {
  display: flex; flex-direction: column;
}
.gm-pill-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-2, #7b8896);
  margin-bottom: 6px;
}
.gm-pills {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.gm-pills.gm-pills-5 { grid-template-columns: repeat(5, 1fr); }
.gm-pills.gm-pills-6 { grid-template-columns: repeat(6, 1fr); }
.gm-pill {
  background: var(--surface-2, #f2efe8);
  color: var(--text-2, #7b8896);
  border: 1px solid var(--border-2, rgba(18,21,23,0.08));
  border-radius: var(--r-sm, 8px);
  padding: 8px 0; font-size: 13px; font-weight: 700;
  cursor: pointer; text-align: center;
  transition: background .12s, border-color .12s, color .12s;
}
.gm-pill:hover:not(.active) {
  border-color: var(--blue, #99231a);
  color: var(--text, #121517);
}
.gm-pill.active {
  background: var(--blue, #99231a);
  border-color: var(--blue, #99231a);
  color: #fff;
}

.gm-players-header {
  display: flex; align-items: center; justify-content: space-between;
}
.gm-players-count {
  font-size: 11px; font-weight: 700; color: var(--text-3, #7b8896);
  text-transform: none; letter-spacing: normal;
}
.gm-chip-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 36px; margin-bottom: 8px;
}
.gm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-3, #fffefb);
  border: 1px solid var(--border-2, rgba(18,21,23,0.1));
  border-radius: 999px;
  padding: 4px 4px 4px 4px;
  font-size: 13px;
}
.gm-chip-name {
  padding: 0 4px 0 2px;
  font-weight: 600; color: var(--text, #121517);
}
.gm-chip-remove {
  background: transparent; border: none;
  color: var(--text-3, #7b8896);
  font-size: 16px; line-height: 1; padding: 0 6px 0 4px;
  cursor: pointer;
  border-radius: 50%;
}
.gm-chip-remove:hover { color: var(--red-2, #8c2622); }

/* Step 3 (2026-05): per-player start-score badge for asymmetric matches.
   Sits between the player name and the trb/link badge. Tap to override
   that player's starting score (handicap mode). */
.gm-chip-start {
  background: rgba(153,35,26,.14);
  border: 1px solid rgba(153,35,26,.32);
  color: #42535f;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
.gm-chip-start:hover  { background: rgba(153,35,26,.22); }
.gm-chip-start:active { transform: scale(.96); }

.gm-add-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px;
}
.gm-add-input-wrap { position: relative; }
.gm-add-input-wrap input {
  width: 100%; box-sizing: border-box;
  background: var(--surface-2, #f2efe8);
  border: 1px solid var(--border-2, rgba(18,21,23,0.08));
  color: var(--text, #121517);
  padding: 8px 12px; font-size: 13px;
  border-radius: var(--r-sm, 8px);
}
.gm-add-input-wrap input:focus {
  outline: none; border-color: var(--blue, #99231a);
}
.gm-autocomplete {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-2, #f2efe8);
  border: 1px solid var(--border-2, rgba(18,21,23,0.12));
  border-radius: var(--r-sm, 8px);
  z-index: 100;
  max-height: 240px; overflow-y: auto;
  box-shadow: 0 8px 16px rgba(18,21,23,0.14);
}
.gm-ac-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background .1s;
}
.gm-ac-row:hover, .gm-ac-row.active {
  background: var(--surface-3, #fffefb);
}
.gm-ac-name {
  flex: 1; font-weight: 600; color: var(--text, #121517);
}
.gm-ac-user {
  color: var(--text-3, #7b8896);
  font-size: 11px;
}
.gm-ac-hl {
  background: rgba(153,35,26,0.25);
  color: var(--blue-2, #99231a);
  border-radius: 2px;
  padding: 0 1px;
}

/* Button-reset for the topbar back arrow (now a <button> instead of <a>
   so it can run a context-aware handler). */
button.topbar-back {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.gm-summary {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(153,35,26,0.06);
  border: 1px solid rgba(153,35,26,0.2);
  border-radius: var(--r-sm, 8px);
}
.gm-summary-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-3, #7b8896);
  margin-bottom: 2px;
}
.gm-summary-line {
  font-size: 14px; font-weight: 700; color: var(--text, #121517);
  margin-bottom: 2px;
}
.gm-summary-players {
  font-size: 12px;
}

/* ── Team-play roster + settings ─────────────────────────────── */
.tp-roster-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .tp-roster-grid { grid-template-columns: 1fr; }
}
.tp-team-title {
  font-size: 14px; font-weight: 800;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.tp-team-a { color: var(--blue-2, #99231a); border-bottom-color: rgba(153,35,26,0.3); }
.tp-team-b { color: var(--red-2, #8c2622);  border-bottom-color: rgba(213,55,42,0.3); }

.tp-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
  padding: 12px; border-radius: var(--r-sm, 8px);
  background: var(--surface-2, #f2efe8);
  border: 1px solid var(--border-2, rgba(18,21,23,0.06));
}
@media (max-width: 600px) {
  .tp-settings-grid { grid-template-columns: 1fr; }
}

#freeplayForm .fp-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
#freeplayForm .fp-options { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#freeplayForm .fp-options .field { flex: 1 1 120px; min-width: 110px; }

.fixture-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.fx-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.fx-row:hover    { border-color: var(--blue); background: var(--blue-bg); }
.fx-row.selected { border-color: var(--blue-2); background: var(--blue-bg-2, rgba(153,35,26,.18)); }
.fx-row.done     { opacity: .5; }
.fx-names { flex: 1; font-size: 14px; font-weight: 700; }
.fx-vs    { color: var(--text-3); font-size: 12px; margin: 0 4px; }
.fx-week  { font-size: 11px; color: var(--text-3); }
.match-opts { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; }

/* ── Match screen ────────────────────────────────────────────── */
#matchScreen { display: flex; flex-direction: column; gap: 12px; animation: fadeUp .3s ease both; }
.match-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.match-grid {
  /* Layout (display, grid-template-columns) is now driven by the
     canonical .match-grid--solo / --duo / --multi classes in
     css/style.css. Keep only properties not in the canonical here. */
  gap: 12px;
}
/* @media collapse to 1fr at <= 860px removed 2026-05 — canonical
   handles responsive at <= 900px → <= 700px. */

/* Player card */
.player-card {
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.player-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad); border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.player-card.throwing { border-color: rgba(153,35,26,.45); box-shadow: 0 0 0 1px rgba(153,35,26,.2), var(--shadow); }
.player-card.throwing::before { transform: scaleX(1); }

.pc-header { display: flex; align-items: center; justify-content: space-between; }
.pc-name   { font-size: 17px; font-weight: 900; }
.pc-score  {
  font-size: 64px; font-weight: 900; letter-spacing: -3px; line-height: 1;
  color: var(--text); transition: color .15s;
}
.pc-score.pulse { animation: pulse .25s ease; }
/* Checkout keeps the number WHITE.
   It used to repaint it in var(--green-2) — which is #99231a, the house
   RED, because the palette was recoloured at some point and the variable
   names were never changed. So "low" rendered as a red number on the
   throwing card's red panel. The glow is kept as the checkout cue; only
   the colour change is dropped. */
.pc-score.low   { color: inherit; text-shadow: 0 0 30px rgba(153,35,26,.3); }

.pc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.stat-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 10px; text-align: center;
}
.sb-val { font-size: 18px; font-weight: 800; }
.sb-lbl { font-size: 11px; color: var(--text-3); margin-top: 2px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

.pc-extras { display: flex; gap: 6px; flex-wrap: wrap; }

.visit-log {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px;
  max-height: 120px; overflow-y: auto;
  font-size: 12px; color: var(--text-2);
  display: flex; flex-direction: column; gap: 3px;
}

/* Checkout banner */
.checkout-banner {
  background: rgba(153,35,26,.12); border: 1.5px solid rgba(153,35,26,.5);
  border-radius: var(--r-sm); padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.checkout-banner.co-hidden { display: none; }
.co-label { font-size: 10px; font-weight: 800; color: var(--green-2); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 3px; }
.co-route { font-size: 16px; font-weight: 900; }
.co-score { font-size: 28px; font-weight: 900; color: var(--green-2); line-height: 1; }
.co-darts { font-size: 11px; color: var(--text-3); font-weight: 600; text-align: right; margin-top: 2px; }

/* Control card */
.ctrl-card { display: flex; flex-direction: column; gap: 12px; }
.ctrl-input-row { display: flex; gap: 8px; }
.ctrl-input-row input {
  flex: 1; font-size: 24px; font-weight: 900;
  text-align: center; height: 56px; letter-spacing: -.5px;
}
.ctrl-input-row input.invalid { border-color: var(--red); }

/* DEPRECATED 2026-05 — replaced by canonical .numpad in css/style.css.
   The original block here had bare `.numpad button` rules with no
   background, which let buttons fall back to the browser default
   (white). Kept commented for reference; do not re-enable.

.numpad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.numpad button        { height: 56px; font-size: 20px; font-weight: 800; border-radius: var(--r-sm); }
.numpad button.span3  { grid-column: span 3; height: 44px; font-size: 14px; }
.numpad button.span2  { grid-column: span 2; }
*/

/* ── Two-lane toggle (Fast / Per-dart) ────────────────────────────── */
.lane-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--surface-2, #f2efe8);
  border: 1px solid var(--border-2, rgba(18,21,23,0.08));
  border-radius: var(--r-sm, 8px);
  padding: 3px;
  margin: 8px 0 10px;
}
.lt-btn {
  background: transparent;
  color: var(--text-2, #7b8896);
  border: none; border-radius: 6px;
  padding: 7px 0; font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.lt-btn:hover:not(.active) { color: var(--text, #121517); }
.lt-btn.active {
  background: var(--blue, #99231a); color: #fff;
}

/* ── Quick-score buttons in 4-wide rows (option C compactness) ────── */
.quick-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 6px;
}
.quick-row button {
  background: var(--surface-3, #fffefb);
  color: var(--text, #121517);
  border: 1px solid var(--border-2, rgba(18,21,23,0.08));
  border-radius: var(--r-sm, 8px);
  padding: 10px 0; font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.quick-row button:hover {
  background: var(--surface, #f2efe8);
  border-color: var(--blue, #99231a);
}
.quick-row button.quick-miss {
  color: var(--text-2, #7b8896);
}
.quick-row button.quick-180 {
  background: rgba(213,55,42,0.15);
  color: var(--red-2, #8c2622);
  border-color: rgba(213,55,42,0.3);
}
.quick-row button.quick-180:hover {
  background: rgba(213,55,42,0.22);
  border-color: var(--red-2, #8c2622);
}

.dart-entry { border-top: 1px solid var(--border); padding-top: 12px; }
.dart-entry-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.x01-tentative {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 14px; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(153,35,26,0.12); color: var(--blue-2, #99231a);
  border: 1px solid rgba(153,35,26,0.3);
}
.x01-tentative.is-bust {
  background: rgba(213,55,42,0.15); color: var(--red-2, #8c2622);
  border-color: rgba(213,55,42,0.4);
}
.dart-row   { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; }
.dart-row select { font-size: 13px; padding: 8px 10px; }

/* Tappable per-dart slot buttons (replaces the old <select> dropdowns).
   Each slot shows a placeholder dash when empty, the dart label when filled,
   and a highlight border while its keypad is open. */
.x01-slot {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 18px;
  letter-spacing: 0.5px;
  padding: 9px 10px;
  border-radius: var(--r-sm, 8px);
  background: var(--surface-2, #f2efe8);
  border: 1px solid var(--border-2, rgba(18,21,23,0.12));
  color: var(--text-3, #7b8896);
  cursor: pointer;
  text-align: center;
  width: 100%;
  transition: background .12s, border-color .12s, color .12s;
}
.x01-slot:hover {
  background: var(--surface-3, #fffefb);
  border-color: var(--blue, #99231a);
  color: var(--text, #121517);
}
.x01-slot.filled { color: var(--text, #121517); }
.x01-slot.filled.zone-bull   { color: var(--red-2,   #8c2622); border-color: rgba(213,55,42,.35); }
.x01-slot.filled.zone-triple { color: var(--blue-2,  #99231a); border-color: rgba(153,35,26,.35); }
.x01-slot.filled.zone-double { color: var(--green-2, #99231a); border-color: rgba(153,35,26,.35); }
.x01-slot.filled.zone-miss   { color: var(--text-3,  #7b8896); }
.x01-slot.active {
  border-color: var(--blue, #99231a);
  box-shadow: 0 0 0 2px rgba(153,35,26,0.18);
}

/* ── Action row buttons (Undo / Reset leg / Finish & submit / Exit etc.) ──
   The centre column in solo/duo/multi match grids is 320px (280px ≤900px).
   With 4 buttons + 3 gaps, a 90px hard min-width forces overflow because
   4×90 + 3×8 = 384px > 320px. Setting min-width: 0 alone makes `flex: 1`
   shrink them below content width and the labels clip.

   Solution: `flex: 1 1 90px` lets each button claim 90px when there's
   room, but when there isn't (solo at desktop sizes), wrap takes over and
   the row splits to 2-per-row cleanly. Ellipsis on overflow is a defensive
   fallback for very long labels.

   Mobile (≤720px) has its own !important rules in mobile.css that override
   these — leave them intact. */
.ctrl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ctrl-actions button {
  flex: 1 1 90px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Match over ──────────────────────────────────────────────── */
#matchOverScreen {
  min-height: calc(100vh - 56px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 14px 0; animation: fadeUp .4s ease both;
}
.over-card { width: 100%; max-width: 520px; }
/* compact so the winner + full stats + action buttons all fit without scroll */
.over-crown {
  text-align: center; font-size: 32px; font-weight: 900; line-height: 1;
  background: var(--grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.over-title { font-size: 22px; font-weight: 900; text-align: center; margin-top: 2px; }
.over-sub   { font-size: 13px; color: var(--text-2); text-align: center; margin: 2px 0 10px; }
.over-stats {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 3px 14px; align-items: center;
}
.os-val { font-size: 17px; font-weight: 900; text-align: center; line-height: 1.15; }
.os-lbl { font-size: 10.5px; color: var(--text-3); text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.os-hdr { font-size: 12px; color: var(--text-2); text-align: center; font-weight: 700; }
.over-actions { display: flex; gap: 10px; margin-top: 14px; }
.divider-grad { margin: 8px 0; }
.over-actions button { flex: 1; }

/* ── Step 4 (2026-05): match-over tab strip + heatmap panel ────────────────
   Lives inside .over-card, between the divider and the stats grid.
   Stats panel shows by default; Heatmap is revealed when the user taps. */
.over-tabs {
  display: flex; gap: 4px;
  margin: 0 0 14px;
  background: var(--surface-2, #f2efe8);
  border: 1px solid var(--border-2, rgba(18,21,23,0.08));
  border-radius: 10px;
  padding: 3px;
}
.over-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-2, rgba(18,21,23,0.65));
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
  letter-spacing: .3px;
}
.over-tab:hover  { color: var(--text, #121517); }
.over-tab.is-active {
  background: var(--surface-3, #fffefb);
  color: var(--text, #121517);
  box-shadow: 0 1px 0 rgba(18,21,23,0.04) inset;
}

/* the panels use the `hidden` attribute to switch tabs, but the display
   rules below (grid / flex) would override it — force hidden to win so
   Stats vs Heatmap actually swap and the inactive one takes NO space. */
#matchOverScreen [data-over-panel][hidden]{ display: none !important; }
.over-heatmap-panel {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-height: 240px;
  font-family: 'DM Sans', sans-serif;
}
.over-hm-board {
  display: flex; justify-content: center; align-items: center;
  width: 100%;
}
.over-hm-board svg { max-width: 260px; width: 100%; height: auto; }
.over-hm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  width: 100%; max-width: 280px;
}
.over-hm-stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface-2, #f2efe8);
  border: 1px solid var(--border-2, rgba(18,21,23,0.08));
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}
.over-hm-stat-lbl {
  font-size: 10px; font-weight: 700;
  color: var(--text-3, #7b8896);
  text-transform: uppercase; letter-spacing: .4px;
}
.over-hm-stat-val {
  font-size: 18px; font-weight: 800;
  color: var(--text, #121517);
  margin-top: 2px;
}
.over-hm-loading,
.over-hm-empty {
  padding: 40px 12px;
  font-size: 13px;
  color: var(--text-3, #7b8896);
  text-align: center;
  line-height: 1.5;
}
.over-hm-hint {
  display: block; margin-top: 6px;
  font-size: 11px; color: var(--text-3, #7b8896);
}

/* Phone tightening — narrower board on small screens */
@media (max-width: 380px) {
  .over-hm-board svg { max-width: 220px; }
  .over-hm-grid       { max-width: 240px; }
  .over-hm-stat-val   { font-size: 16px; }
}

/* ── Panels ──────────────────────────────────────────────────── */
.panel-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  z-index: 300; display: none; align-items: flex-end; justify-content: center;
}
.panel-backdrop.open { display: flex; }
.panel {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%; max-width: 680px; max-height: 80vh;
  display: flex; flex-direction: column;
  animation: slideUp .22s cubic-bezier(.34,1.2,.64,1);
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
.panel-title { font-size: 16px; font-weight: 800; }
.panel-body  { overflow-y: auto; padding: 16px 20px 28px; flex: 1; }

/* League table in panel */
.lt { width: 100%; border-collapse: collapse; font-size: 13px; }
.lt th {
  padding: 8px; text-align: center; color: var(--text-3);
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; border-bottom: 1px solid var(--border-2);
}
.lt th:nth-child(2) { text-align: left; }
.lt td { padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--border); }
.lt td:nth-child(2) { text-align: left; font-weight: 700; }
.lt tr:hover td { background: var(--surface-2); }
.lt-row-1 td { color: var(--amber-2); }
.lt-row-2 td, .lt-row-3 td { color: var(--blue-2); }

/* Player cell: avatar + name flex row */
.lt-player-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.lt-player-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Modals */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: none; align-items: center; justify-content: center;
  z-index: 500; padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-2); border-radius: var(--r-xl);
  padding: 24px 22px; width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(18,21,23,0.2);
  animation: fadeUp .2s ease both;
  display: flex; flex-direction: column; gap: 14px;
}
.modal-title   { font-size: 18px; font-weight: 800; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }

/* Buttons used in game screens */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r); font-size: 14px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text);
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover   { background: var(--surface-3); border-color: var(--border-3); }
.btn:active  { transform: scale(0.97); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--blue); border-color: transparent; color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: #701812; }
.btn-danger  { background: var(--red-bg); border-color: rgba(213,55,42,.3); color: var(--red-2); }
.btn-danger:hover { background: rgba(213,55,42,.2); border-color: var(--red); }
.btn-warn    { background: var(--amber-bg); border-color: rgba(168,115,12,.3); color: var(--amber-2); }
.btn-warn:hover { background: rgba(168,115,12,.2); border-color: var(--amber-2); }
.btn-ghost   { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-red     { background: var(--red); border-color: transparent; color: #fff; }
.btn-sm      { padding: 6px 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-full    { width: 100%; }

/* Pills */
.pill       { display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface-3);border:1px solid var(--border-2);color:var(--text-2);white-space:nowrap; }
.pill.grad  { background:var(--grad);border-color:transparent;color:#fff; }
.pill.blue  { background:var(--blue-bg);border-color:rgba(153,35,26,.3);color:var(--blue-2); }
.pill.green { background:var(--green-bg);border-color:rgba(153,35,26,.3);color:var(--green-2); }
.pill.red   { background:var(--red-bg);border-color:rgba(213,55,42,.3);color:var(--red-2); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* .match-grid mobile collapse removed — canonical match-grid--*
     classes in style.css handle responsive properly (3-col → 2-col
     at <= 700px, with the scorer spanning full-width below). */
  .pc-score   { font-size: 44px; }
  .visit-log  { max-height: 70px; }
}
@media (max-width: 600px) {
  .app        { padding: 10px; }
  .pc-score   { font-size: 36px; }
  /* .numpad button mobile size — handled by canonical numpad in style.css + mobile.css */
  #freeplayForm .fp-grid { grid-template-columns: 1fr; }
  .dart-row { grid-template-columns: 1fr 1fr; }
  .dart-row button { grid-column: span 2; }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes popIn {
  0%   { transform: scale(.5) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* ══════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
══════════════════════════════════════════════════════════ */

/* Landing */
[data-theme="light"] .landing-card          { background: #ffffff; border-color: rgba(18,21,23,0.042); box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
[data-theme="light"] .landing-hero p        { color: #c6bfae; }
[data-theme="light"] .lc-sub                { color: #7b8896; }
[data-theme="light"] .league-pick-card      { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .lc-body .lc-desc      { color: #7b8896; }

/* Pin */
[data-theme="light"] .pin-wrap              { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .pin-display           { background: rgba(0,0,0,0.04); border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .pin-sub               { color: #c6bfae; }
[data-theme="light"] .pin-grid button       { background: #ffffff; border-color: rgba(0,0,0,0.14); color: #f2efe8; }

/* Setup card */
[data-theme="light"] .mode-title            { color: #f2efe8; }
[data-theme="light"] .fx-row                { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); color: #f2efe8; }
[data-theme="light"] .fx-row:hover          { background: var(--blue-bg); border-color: var(--blue); }
[data-theme="light"] .fx-row.selected       { background: var(--blue-bg-2); border-color: var(--blue-2); }
[data-theme="light"] .fx-vs                 { color: #7b8896; }
[data-theme="light"] .fx-week               { color: #7b8896; }
[data-theme="light"] .match-opts            { border-top-color: rgba(0,0,0,0.09); }

/* Player card */
[data-theme="light"] .player-card           { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .player-card.throwing  { border-color: rgba(112,24,18,0.50); box-shadow: 0 0 0 1px rgba(112,24,18,0.20), 0 4px 16px rgba(18,21,23,0.028); }
[data-theme="light"] .pc-name               { color: #f2efe8; }
[data-theme="light"] .pc-score              { color: #f2efe8; }
[data-theme="light"] .pc-score.low          { color: inherit; }
[data-theme="light"] .stat-box              { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .sb-val                { color: #f2efe8; }
[data-theme="light"] .sb-lbl                { color: #7b8896; }
[data-theme="light"] .visit-log             { background: rgba(0,0,0,0.03); border-color: rgba(18,21,23,0.028); color: #c6bfae; }

/* Control card / numpad
   Light-mode .numpad button overrides removed 2026-05 — the canonical
   numpad in css/style.css uses var(--surface-2) which already swaps to
   #121517 / dark text under [data-theme="light"]. */
[data-theme="light"] .dart-entry            { border-top-color: rgba(0,0,0,0.09); }
[data-theme="light"] .dart-row select       { background: rgba(0,0,0,0.04); border-color: rgba(18,21,23,0.042); color: #f2efe8; }
[data-theme="light"] .dart-row select option { background: #ffffff; color: #f2efe8; }

/* Match header */
[data-theme="light"] .match-header          { color: #f2efe8; }

/* Checkout banner */
[data-theme="light"] .checkout-banner       { background: rgba(112,24,18,0.10); border-color: rgba(112,24,18,0.40); }
[data-theme="light"] .co-darts              { color: #7b8896; }

/* Match over */
[data-theme="light"] .over-card             { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .over-sub              { color: #c6bfae; }
[data-theme="light"] .os-lbl                { color: #7b8896; }
[data-theme="light"] .os-hdr                { color: #c6bfae; }

/* Panel (slide-up) */
[data-theme="light"] .panel                 { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .panel-header          { border-bottom-color: rgba(0,0,0,0.09); }

/* Modal */
[data-theme="light"] .modal                 { background: #ffffff; border-color: rgba(18,21,23,0.042); }
[data-theme="light"] .modal-title           { color: #f2efe8; }

/* League table in panel */
[data-theme="light"] .lt th                 { color: #7b8896; border-bottom-color: rgba(0,0,0,0.10); }
[data-theme="light"] .lt td                 { border-bottom-color: rgba(18,21,23,0.021); }
[data-theme="light"] .lt tr:hover td        { background: rgba(0,0,0,0.03); }

/* Buttons */
[data-theme="light"] .btn                   { background: #121517; border-color: rgba(0,0,0,0.14); color: #f2efe8; }
[data-theme="light"] .btn:hover             { background: #121517; border-color: rgba(0,0,0,0.20); }
[data-theme="light"] .btn-ghost             { background: transparent; border-color: rgba(0,0,0,0.14); color: #c6bfae; }
[data-theme="light"] .btn-ghost:hover       { background: rgba(18,21,23,0.017); color: #f2efe8; }
/* ============================================================================
 * Release #99231a — Setup card redesign
 *
 * Unifies every freeplay setup screen (X01, HalveIt, Shanghai, 121-CO,
 * RTB doubles/trebles, Cricket/Killer/etc., Teamplay) under one shell.
 * Implemented as additive overrides on top of the existing .gm-* and .tp-*
 * classes so the JS handlers (which look up #gmStartBtn / #gmPlayerList /
 * etc. by ID) keep working unchanged.
 *
 * Structure of a setup screen now (top to bottom):
 *   .gm-setup-card
 *     .gm-mode-bar          — title + subtitle inline, "← Modes" button
 *     .gm-grad-divider      — purple→blue→teal brand stripe
 *     .gm-section-players   — players card (always first, always required)
 *     .gm-section-settings  — mode-specific settings (zero or more pill rows)
 *     #gmStartBtn           — full-width gradient when ready
 * ========================================================================== */

/* ── Outer card chrome ─────────────────────────────────────────── */
.gm-setup-card {
  padding: 22px 24px;
}
@media (max-width: 600px) {
  .gm-setup-card { padding: 16px 14px; }
}
.gm-mode-bar {
  align-items: flex-start;
  gap: 12px;
}
.gm-title-wrap {
  display: flex; align-items: baseline; gap: 12px;
  flex: 1; min-width: 0; flex-wrap: wrap;
}
.gm-title {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif;
  font-size: 30px; font-weight: 400;
  letter-spacing: 1.2px;
  line-height: 1; color: var(--text, #121517);
}
.gm-subtitle {
  color: var(--text-3, #7b8896);
  font-size: 13px;
  font-weight: 400;
}
.gm-back-btn {
  background: transparent !important;
  color: var(--text-3, #7b8896) !important;
  border: 1px solid var(--border-2, rgba(18,21,23,0.14)) !important;
  font-size: 12px; padding: 6px 12px !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.gm-back-btn:hover {
  border-color: var(--blue, #99231a) !important;
  color: var(--text, #121517) !important;
}

/* Brand gradient divider — replaces the old uncoloured hairline */
.gm-grad-divider, .grad-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(153,35,26, 0.32) 0%,
    rgba(153,35,26, 0.32) 50%,
    rgba(153,35,26, 0.32) 100%
  );
  border: none;
  margin: 4px 0 6px;
}

/* ── Sections (players + settings) share the same head pattern ── */
.gm-section {
  display: flex; flex-direction: column;
}
.gm-section + .gm-section { margin-top: 6px; }
.gm-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.gm-section-label {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-2, #7b8896);
}
.gm-section-meta {
  font-size: 11px;
  color: var(--text-3, #7b8896);
}

/* ── Players card ──────────────────────────────────────────────── */
.gm-players-card {
  background: var(--surface-3, #ece8dd);
  border: 1px solid rgba(18,21,23, 0.16);
  border-radius: var(--r-sm, 8px);
  padding: 12px 14px;
}
.gm-players-card .gm-chip-list {
  min-height: 0;
  margin-bottom: 0;
}
.gm-players-card .gm-chip-list:not(:empty) {
  margin-bottom: 10px;
}
.gm-players-card .gm-add-row {
  gap: 8px;
}
/* Empty-state hint — rendered by renderGmPlayerList when the list is empty.
   We keep it as a CSS-driven message rather than touching the JS render.
   Achieved via :empty + ::before so it doesn't appear once chips exist. */
.gm-players-card .gm-chip-list:empty::before {
  content: "No players yet — type a name below and tap Add.";
  display: block;
  color: var(--text-3, #7b8896);
  font-size: 12px;
  font-style: italic;
  padding: 4px 0 6px;
}

/* Pill labels inside settings — slim down to match the new section label */
.gm-section-settings .gm-pill-label {
  font-family: 'Bebas Neue', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-2, #7b8896);
  margin-bottom: 8px;
}
.gm-section-settings .gm-pill-label:not(:first-child) {
  margin-top: 14px;
}

/* Pill polish — slightly taller hit area, subtle hover */
.gm-section-settings .gm-pill,
.gm-players-card + * .gm-pill {
  padding: 10px 0;
  font-size: 13px;
}

/* ── Start button — the climax ─────────────────────────────────── */
.gm-start-btn {
  margin-top: 8px;
  padding: 15px 18px !important;
  font-family: 'Bebas Neue', 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  border: none !important;
  border-radius: var(--r-sm, 8px);
  transition: filter .15s ease, transform .08s ease, box-shadow .15s ease;
}
.gm-start-btn:not(:disabled) {
  background: linear-gradient(135deg, #99231a 0%, #99231a 50%, #99231a 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(18,21,23,0.08) inset,
    0 4px 12px rgba(153,35,26, 0.32),
    0 0 0 1px rgba(18,21,23,0.04);
}
.gm-start-btn:not(:disabled):hover {
  filter: brightness(1.08);
  box-shadow:
    0 1px 0 rgba(18,21,23,0.12) inset,
    0 6px 18px rgba(153,35,26, 0.42),
    0 0 0 1px rgba(18,21,23,0.06);
}
.gm-start-btn:not(:disabled):active {
  transform: translateY(1px);
}
.gm-start-btn:disabled {
  background: rgba(18,21,23, 0.06) !important;
  color: #5d6b77 !important;
  border: 1px solid rgba(18,21,23, 0.16) !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Suppress the old "You'll play..." summary block if anywhere on the page
   it still gets rendered (we removed it from buildSetupShell, but in case
   a future change adds it back, hide it under the new shell). */
.gm-setup-card .gm-summary { display: none; }

/* ── Teamplay tinting ──────────────────────────────────────────── */
/* Team A → purple (brand colour 1), Team B → teal (brand colour 3).
   Previous was blue + red which clashed with the brand and read as
   "good vs bad" rather than "two teams". */
.gm-setup-card .tp-team-a {
  color: #99231a; /* purple-300 */
  border-bottom-color: rgba(153,35,26, 0.32);
}
.gm-setup-card .tp-team-b {
  color: #b73a2e; /* teal-300 */
  border-bottom-color: rgba(153,35,26, 0.32);
}
/* Add button on Team B was red — re-tint to teal to match the new identity */
.gm-setup-card .btn-red#teamBAddBtn {
  background: rgba(153,35,26, 0.18) !important;
  border: 1px solid rgba(153,35,26, 0.4) !important;
  color: #b73a2e !important;
}
.gm-setup-card .btn-red#teamBAddBtn:hover {
  background: rgba(153,35,26, 0.28) !important;
  border-color: rgba(153,35,26, 0.6) !important;
}

/* ── HalveIt presets + add button styling ──────────────────────── */
.gm-section-settings #halveitAddBtn {
  background: rgba(153,35,26, 0.14) !important;
  color: #99231a !important;
  border: 1px solid rgba(153,35,26, 0.4) !important;
}
.gm-section-settings #halveitAddBtn:hover {
  background: rgba(153,35,26, 0.22) !important;
}

/* ── Mobile tightening ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .gm-title { font-size: 26px; }
  .gm-subtitle { font-size: 12px; }
  .gm-start-btn { font-size: 16px !important; padding: 14px !important; }
  .gm-players-card { padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   Step 1 (2026-05): Scorer screen declutter
   ───────────────────────────────────────────────────────────────
   - Throwing player card fills solid blue (#99231a). Score + text
     go white. White-text variants for child elements that have
     dark-mode colors hardcoded (stat boxes, pills, visit log).
   - .pc-collapsed-view always visible; .pc-full-view hidden until
     the card has .pc-expanded (set by tapping .pc-strip).
   - .pc-throw-dot replaces the old "Throwing/Waiting" pill.
   - Centre control card gains a kebab (.ctrl-overflow-btn) that
     opens .ctrl-overflow-menu (Reset / Finish / Exit + reserved
     "Match settings" section for Steps 2-3).
   ═══════════════════════════════════════════════════════════════ */

/* ── Throwing-state solid fill ──────────────────────────────────── */
.player-card.throwing {
  background: #99231a;
  border-color: #99231a;
  box-shadow: 0 0 0 1px rgba(153,35,26,.25), 0 6px 18px rgba(153,35,26,.22);
}
/* The gradient bar at top of the active card looks redundant against
   a solid blue fill; hide it. The card colour itself signals state. */
.player-card.throwing::before { display: none; }
.player-card.throwing .pc-name    { color: #ffffff; }
.player-card.throwing .pc-score   { color: #ffffff; }
.player-card.throwing .pc-score.low { color: #ffffff; text-shadow: 0 0 30px rgba(255,255,255,.35); }
/* "Last:" line + strip text need brighter values on coloured ground */
.player-card.throwing .pc-last         { background: rgba(0,0,0,.22); color: rgba(18,21,23,.85); border-color: rgba(18,21,23,.08); }
.player-card.throwing .pc-last-lbl     { color: rgba(18,21,23,.7); }
.player-card.throwing .pc-last-val     { color: #ffffff; }
.player-card.throwing .pc-strip        { color: rgba(18,21,23,.75); border-color: rgba(18,21,23,.18); }
.player-card.throwing .pc-strip strong { color: #ffffff; }
.player-card.throwing .pc-strip-lbl    { color: rgba(18,21,23,.65); }
.player-card.throwing .pc-strip-chev   { color: rgba(18,21,23,.6); }
.player-card.throwing .pc-strip:hover  { background: rgba(18,21,23,.06); border-color: rgba(18,21,23,.28); }
/* Expanded full-view children inside a throwing card */
.player-card.throwing .stat-box    { background: rgba(0,0,0,.22); border-color: rgba(18,21,23,.10); }
.player-card.throwing .sb-val      { color: #ffffff; }
.player-card.throwing .sb-lbl      { color: rgba(18,21,23,.7); }
.player-card.throwing .visit-log   { background: rgba(0,0,0,.22); border-color: rgba(18,21,23,.10); color: rgba(18,21,23,.82); }
.player-card.throwing .text-muted  { color: rgba(18,21,23,.65) !important; }
.player-card.throwing .pill        { background: rgba(18,21,23,.10); border-color: rgba(18,21,23,.16); color: #ffffff; }
.player-card.throwing .pill.blue   { background: rgba(153,35,26,.30); border-color: rgba(153,35,26,.50); color: #ffffff; }
.player-card.throwing .pill.green  { background: rgba(153,35,26,.28);  border-color: rgba(240,205,200,.50); color: #ffffff; }
/* Checkout banner inside a throwing card — brighten the green */
.player-card.throwing .checkout-banner { background: rgba(153,35,26,.22); border-color: rgba(240,205,200,.6); }
/* The whole suggested checkout goes white on the throwing card.
   The route was inheriting `color: var(--text)` from multiplayer.css — dark
   ink, set for a light card, and unreadable once it sits on the red panel.
   The darts count was explicitly dark for the same reason. Three classes
   here, so these beat the single-class rules in multiplayer.css whichever
   order the sheets load in. */
.player-card.throwing .co-label        { color: #ffffff; }
.player-card.throwing .co-route        { color: #ffffff; }
.player-card.throwing .co-score        { color: #ffffff; text-shadow: 0 0 12px rgba(255,255,255,.35); }
.player-card.throwing .co-darts        { color: rgba(255,255,255,.82); }

/* ── Throwing dot (replaces pill) ───────────────────────────────── */
.pc-throw-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: transparent;
  border: 1.5px solid rgba(18,21,23,.18);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.player-card.throwing .pc-throw-dot {
  background: #701812;
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(153,35,26,.85);
  animation: pcDotPulse 1.6s ease-in-out infinite;
}
@keyframes pcDotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(153,35,26,.6); }
  50%      { box-shadow: 0 0 14px rgba(153,35,26,1); }
}

/* ── Collapsed view: pc-strip (legs · 3-avg · chevron) ──────────── */
.pc-strip {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: transparent;
  border: 0; border-top: 1px solid var(--border);
  padding: 8px 2px 6px;
  color: var(--text-3);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: color .12s, background .12s;
  border-radius: 0;
}
.pc-strip:hover { color: var(--text-2); }
.pc-strip-cell  { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.pc-strip-cell strong {
  color: var(--text); font-size: 15px; font-weight: 800; line-height: 1;
}
.pc-strip-lbl   { color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.pc-strip-chev  {
  margin-left: auto; display: inline-flex; align-items: center;
  color: var(--text-3); opacity: .6;
  transition: transform .18s ease, opacity .12s;
}
.pc-strip-chev svg { width: 12px; height: 12px; }
.player-card.pc-expanded .pc-strip-chev { transform: rotate(180deg); opacity: 1; }

/* ── Collapsed view: "Last: X" line ─────────────────────────────── */
.pc-last {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.35;
  display: flex; gap: 4px; align-items: baseline;
  white-space: nowrap; overflow: hidden;
}
.pc-last-lbl { color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; }
.pc-last-val { color: var(--text); font-weight: 800; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* ── Full view: hidden by default, revealed when expanded ───────── */
.pc-full-view {
  display: none;
  flex-direction: column; gap: 12px;
  margin-top: 8px;
}
.player-card.pc-expanded .pc-full-view { display: flex; }
/* The collapsed view itself needs a gap so its children breathe */
.pc-collapsed-view {
  display: flex; flex-direction: column; gap: 8px;
}
/* The .player-card flex gap was 12px; now the collapsed view owns its
   own internal spacing so the card's gap shrinks slightly. */
.player-card { gap: 0; }

/* Bump score size on phones (it was 36px because of the stuff below it;
   now it can breathe). Desktop already gets 64px from base rule. */
.player-card .pc-score { font-size: 60px; letter-spacing: -3px; }
@media (max-width: 860px) {
  .player-card .pc-score { font-size: 56px; }
}
@media (max-width: 600px) {
  .player-card .pc-score { font-size: 52px; }
}
/* ≤380px — tightest phones (e.g. iPhone SE) */
@media (max-width: 380px) {
  .player-card .pc-score { font-size: 44px; letter-spacing: -2px; }
  .pc-strip { gap: 8px; padding: 6px 0 4px; }
  .pc-strip-cell strong { font-size: 13px; }
  .pc-last { font-size: 10px; padding: 4px 6px; }
}

/* ── Centre control card — kebab + popover ──────────────────────── */
.ctrl-card { position: relative; }
.ctrl-overflow-btn {
  position: absolute; top: 6px; right: 6px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-3);
  cursor: pointer; border-radius: 6px;
  transition: color .12s, background .12s;
  z-index: 5;
}
.ctrl-overflow-btn:hover { color: var(--text); background: rgba(18,21,23,.04); }
.ctrl-overflow-btn svg   { width: 18px; height: 18px; }
/* Keep the input row clear of the kebab */
.ctrl-card .ctrl-input-row { padding-right: 40px; }

.ctrl-overflow-menu {
  position: absolute; top: 44px; right: 6px;
  min-width: 200px; max-width: calc(100% - 12px);
  background: rgba(250,247,240,.98);
  border: 1px solid rgba(18,21,23,.12);
  border-radius: 10px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(18,21,23,0.158);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ctrlOverflowIn .14s ease-out;
}
@keyframes ctrlOverflowIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ctrl-overflow-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0;
  color: var(--text); padding: 10px 12px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  border-radius: 6px; cursor: pointer;
  transition: background .1s;
}
.ctrl-overflow-item:hover  { background: rgba(18,21,23,.06); }
.ctrl-overflow-item + .ctrl-overflow-item { margin-top: 1px; }
.ctrl-overflow-item--warn  { color: #a8730c; }
.ctrl-overflow-item--warn:hover { background: rgba(168,115,12,.10); }
.ctrl-overflow-section { border-top: 1px solid rgba(18,21,23,.06); margin-top: 6px; padding-top: 4px; }
.ctrl-overflow-section-lbl {
  font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .4px;
  padding: 4px 12px;
}

/* ── Primary ctrl-actions row (just Undo, full-width) ──────────── */
.ctrl-actions--primary { display: flex; }
.ctrl-actions--primary > button {
  flex: 1 1 auto;
  min-height: 44px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   Step 2 (2026-05): Match-options toggle switches
   ───────────────────────────────────────────────────────────────
   Shared switch component used in two places:
     1. Setup card "Match options" section (default size — title +
        sub-line, larger switch)
     2. Kebab popover "Match settings" section (.tm-toggle--compact
        modifier — smaller switch, no sub-line)
   Native checkbox is visually hidden but kept focusable for
   keyboard / screen-reader accessibility. The :checked state drives
   all visual changes via the sibling .tm-toggle-switch.
   ═══════════════════════════════════════════════════════════════ */
.tm-toggle {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tm-toggle input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.tm-toggle-switch {
  position: relative; flex-shrink: 0;
  width: 36px; height: 20px;
  background: var(--surface-2, #fffefb);
  border: 1px solid rgba(18,21,23,0.12);
  border-radius: 999px;
  transition: background .14s ease, border-color .14s ease;
  margin-top: 1px;
}
.tm-toggle-thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 16px; height: 16px;
  background: var(--text-3, #7b8896);
  border-radius: 50%;
  transition: left .14s ease, background .14s ease, transform .14s ease;
}
.tm-toggle input:checked ~ .tm-toggle-switch {
  background: #99231a;
  border-color: rgba(153,35,26,.5);
}
.tm-toggle input:checked ~ .tm-toggle-switch .tm-toggle-thumb {
  left: 17px;
  background: #ffffff;
}
.tm-toggle input:focus-visible ~ .tm-toggle-switch {
  box-shadow: 0 0 0 3px rgba(153,35,26,.30);
}
.tm-toggle-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.tm-toggle-title {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--text, #121517);
  line-height: 1.3;
}
.tm-toggle-sub {
  display: block;
  font-size: 11px; color: var(--text-3, #7b8896);
  line-height: 1.35;
}
.tm-toggle:hover .tm-toggle-switch { border-color: rgba(18,21,23,.22); }
.tm-toggle:active .tm-toggle-thumb { transform: scale(.92); }

/* Compact variant for the kebab popover — smaller switch, single line */
.tm-toggle--compact {
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  margin: 1px 0;
}
.tm-toggle--compact:hover { background: rgba(18,21,23,.04); }
.tm-toggle--compact .tm-toggle-switch {
  width: 28px; height: 16px;
  margin-top: 0;
}
.tm-toggle--compact .tm-toggle-thumb { width: 12px; height: 12px; }
.tm-toggle--compact input:checked ~ .tm-toggle-switch .tm-toggle-thumb { left: 13px; }
.tm-toggle--compact .tm-toggle-title { font-size: 12px; font-weight: 600; }

/* Setup-card grouping */
.gm-match-options {
  margin-top: 4px;
}
.gm-match-options .tm-toggle:first-of-type { padding-top: 4px; }
.gm-match-options .tm-toggle:last-of-type  { padding-bottom: 4px; }

/* Phone tightening — at very narrow widths the sub-line wraps; let it */
@media (max-width: 380px) {
  .tm-toggle-title { font-size: 12px; }
  .tm-toggle-sub   { font-size: 10px; }
  .tm-toggle-switch { width: 32px; height: 18px; }
  .tm-toggle-thumb  { width: 14px; height: 14px; }
  .tm-toggle input:checked ~ .tm-toggle-switch .tm-toggle-thumb { left: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CLEAN SCORER CARD  (2026-07)
   New 2-player board: spine (names + legs) · trimmed scrollable ledger ·
   two big half/half remaining scores · input dock.
   Scoped under .x01-board so nothing leaks into other screens. All the
   original player-card / control-card element IDs are preserved inside —
   this is a re-layout + re-skin, not a new DOM contract.
   ═════════════════════════════════════════════════════════════════════ */
.x01-board{
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  max-width:760px; margin:0 auto; width:100%;
  /* fill the space under the page chrome; the big scores flex-shrink so the
     spine, visits list AND keypad are always on screen (no drop-off) */
  height:calc(100dvh - 138px); min-height:0; overflow:hidden;
  /* let a single-finger vertical drag anywhere on the board pan the page,
     so nothing on a phone requires a two-finger scroll gesture */
  touch-action:pan-y;
}
/* neutralise the old 3-column grid rules when the board class is present */
.x01-board.match-grid{ grid-template-columns:none; display:flex; }
.x01-heroes-solo{ grid-template-columns:1fr; }

/* ── spine ─────────────────────────────────────────────────────────── */
.x01-spine{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:12px 14px; flex:none;
}
.x01-sp-player{ display:flex; align-items:center; gap:9px; min-width:0; }
.x01-sp-player.right{ flex-direction:row-reverse; }
.x01-sp-av{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  font-family:var(--font-display); font-size:15px; color:#fff;
  background:var(--grad); overflow:hidden;
}
.x01-sp-av img{ width:100%; height:100%; object-fit:cover; }
.x01-sp-player.right .x01-sp-av{ background:linear-gradient(135deg,var(--teal),var(--blue)); }
.x01-sp-name{ font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.x01-sp-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber); flex:none; opacity:0; transition:opacity .2s;
  box-shadow:0 0 0 0 rgba(168,115,12,.55); }
.x01-sp-player.is-throw .x01-sp-dot{ opacity:1; animation:x01Pulse 1.6s infinite; }
@keyframes x01Pulse{0%{box-shadow:0 0 0 0 rgba(168,115,12,.5)}70%{box-shadow:0 0 0 8px rgba(168,115,12,0)}100%{box-shadow:0 0 0 0 rgba(168,115,12,0)}}
.x01-sp-center{ text-align:center; padding:0 6px; }
.x01-sp-legs{ font-family:var(--font-display); font-size:30px; line-height:.9; letter-spacing:1px; }
.x01-sp-legs span{ color:var(--muted, rgba(18,21,23,.42)); margin:0 5px; }
.x01-sp-bo{ font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(18,21,23,.4); margin-top:3px; }

/* ── ledger (last ~3 visits, scroll up for the rest) ───────────────── */
.x01-ledger{
  flex:none; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
}
.x01-lg-head,.x01-lg-row{ display:grid; grid-template-columns:1fr 1fr 46px 1fr 1fr; align-items:center; }
.x01-lg-head{
  padding:9px 4px; border-bottom:1px solid var(--border); flex:none;
  font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(18,21,23,.42); font-weight:700; text-align:center;
}
/* touch-action:pan-y = single-finger vertical drags scroll the list on a
   phone instead of being read as a tap on a score (which forced the awkward
   hold-one-finger, scroll-with-the-other gesture). -webkit-overflow-scrolling
   gives iOS momentum. */
.x01-lg-body{ height:clamp(72px,13vh,140px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.x01-lg-body::-webkit-scrollbar{ width:5px; }
.x01-lg-body::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
.x01-lg-row{ min-height:50px; }
.x01-lg-row:nth-child(odd){ background:rgba(18,21,23,.02); }
.x01-lg-cell{ text-align:center; padding:7px 2px; font-family:var(--font-display); font-size:26px; line-height:1; }
.x01-lg-cell.togo{ font-size:30px; }
.x01-lg-cell.scored{ color:rgba(18,21,23,.6); cursor:pointer; border-radius:8px; transition:background .15s; position:relative; touch-action:pan-y; }
.x01-lg-cell.scored:hover{ background:rgba(18,21,23,.05); }
.x01-lg-cell.bust{ color:var(--red); font-size:20px; }
.x01-lg-darts{ text-align:center; font-family:var(--font-body,'DM Sans',sans-serif); font-weight:700; font-size:12px;
  color:rgba(18,21,23,.4); background:rgba(18,21,23,.03); align-self:stretch; display:grid; place-items:center; }
.x01-lg-row.current .x01-lg-cell.togo{ color:var(--text); }
.x01-lg-row.current .scored.active-scored{ color:var(--text); }
.x01-lg-row.current .scored.active-scored::after{
  content:""; position:absolute; inset:4px 8px; border:2px solid var(--amber); border-radius:40px; opacity:.9;
}
.x01-lg-edit{ width:74px; max-width:90%; text-align:center; font-family:var(--font-display); font-size:24px;
  background:var(--bg); color:var(--text); border:2px solid var(--blue); border-radius:8px; outline:none; }
.x01-lg-empty{ padding:26px 10px; text-align:center; color:rgba(18,21,23,.4); font-size:13px; }

/* ── big half/half remaining scores ───────────────────────────────── */
.x01-heroes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1 1 auto; min-height:74px; }
/* the hero IS the existing .player-card; restyle it into a big centred number.
   container-type:size makes the card a query container so the number can be
   sized as a % of the card's ACTUAL height (cqh) — this keeps it in
   proportion no matter how much the browser chrome squeezes the board. */
.x01-heroes .player-card{
  padding:12px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-align:center; overflow:hidden; margin:0;
  container-type:size;
}
.x01-heroes .player-card::before{ display:none; }
.x01-heroes .pc-header{ justify-content:center; }
.x01-heroes .pc-name{ font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(18,21,23,.42); font-weight:700; }
.x01-heroes .pc-throw-dot{ display:none; }
.x01-heroes .pc-score{
  font-family:var(--font-display); line-height:.8; white-space:nowrap; margin:0;
  /* the smaller of a width-based cap and 62% of the hero height */
  font-size:min(clamp(56px,24vw,168px), 62cqh);
}
.x01-heroes-solo .pc-score{ font-size:min(clamp(80px,20vw,200px), 70cqh); }
/* hide the per-card clutter — the ledger + spine now carry this info */
.x01-heroes .pc-strip,
.x01-heroes .pc-last,
.x01-heroes .pc-full-view{ display:none !important; }
/* checkout hint — a compact single-row bar across the hero: the route +
   darts. The score is dropped (the big number already shows it). Long routes
   (e.g. 170 = T20 T20 Bull) fit on one line. */
.x01-heroes .checkout-banner{
  margin-top:8px; padding:6px 10px; width:96%;
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  border-radius:11px; min-height:0; overflow:hidden;
}
.x01-heroes .checkout-banner > div{ display:contents; }   /* route + darts become inline items */
.x01-heroes .checkout-banner .co-label{ display:none; }   /* redundant */
.x01-heroes .checkout-banner .co-score{ display:none; }   /* redundant with the big number */
.x01-heroes .checkout-banner .co-route{
  font-size:clamp(14px,2.7vw,19px); font-weight:800; letter-spacing:.5px; line-height:1.1;
  white-space:nowrap;
}
.x01-heroes .checkout-banner .co-darts{ font-size:11px; letter-spacing:.3px; opacity:.8; white-space:nowrap; }
.x01-heroes .checkout-banner .co-darts::before{ content:"·"; margin-right:6px; opacity:.55; }
/* When a checkout banner shows, the number takes ~44% of the hero height
   (cqh) so there's always room for the route banner + label. */
.x01-heroes .player-card:has(.checkout-banner:not(.co-hidden)) .pc-score{
  font-size:min(clamp(40px,16vw,116px), 44cqh);
}
@media (max-height:780px){
  .x01-heroes .checkout-banner{ margin-top:5px; padding:5px 10px; }
  .x01-heroes .checkout-banner .co-route{ font-size:clamp(13px,2.8vw,18px); }
}
/* very short viewports (small laptops / landscape): with a checkout showing,
   drop the redundant name label (it's already in the spine) and shrink the
   number so the route banner always fits. */
@media (max-height:680px){
  .x01-heroes .player-card:has(.checkout-banner:not(.co-hidden)) .pc-name{ display:none; }
  .x01-heroes .player-card:has(.checkout-banner:not(.co-hidden)) .pc-score{ font-size:clamp(32px,7vh,58px); }
  .x01-heroes .checkout-banner{ margin-top:3px; }
}

/* clean scorer: the Mode / ID / New match bar is hidden — those live in the
   … menu now, and the board fits to the space it reclaims */
#matchScreen > .match-header{ display:none; }
/* pull the board up under the page chrome — reclaim the container padding
   so there's no empty gap above the spine (only when the board is shown) */
.app:has(.x01-board){ padding-top:4px; }
.x01-board{ margin-top:0; }
.ctrl-menu-info{ padding:10px 14px 6px; font-size:11px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--muted, rgba(18,21,23,.42)); font-weight:700; border-bottom:1px solid var(--border); }
.ctrl-menu-info b{ color:var(--text); }

/* ── input dock — keypad always on, compact so it fits with everything ── */
.x01-board .ctrl-wrap{ flex:none; }
.x01-board .ctrl-card{ box-shadow:var(--shadow); padding:8px; gap:6px; position:relative; }
.x01-hidden-input{ display:none !important; }         /* score buffer, never focusable */
.x01-board .numpad{ gap:6px; }
.x01-board .numpad button{ height:clamp(36px,5.8vh,54px); font-size:20px; }
.x01-board .numpad .np-miss,
.x01-board .numpad button[data-quick]{ height:clamp(26px,3.4vh,38px); font-size:13px; }

/* ── a committed cell being edited (keypad/keyboard routes into it) ────── */
.x01-lg-cell.scored.editing{ color:var(--text); position:relative; }
.x01-lg-cell.scored.editing::after{
  content:""; position:absolute; inset:4px 8px; border:2px solid var(--amber); border-radius:40px;
}

/* ── per-dart entry as a bottom-sheet OVERLAY ─────────────────────────────
   Instead of squashing the board, the per-dart keypad floats up over the
   bottom of the board while you enter the visit. The scores + visits stay
   visible above it. */
.x01-board.x01-perdart #lanePerdart{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:80;
  width:100%; max-width:560px; max-height:82vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border); border-bottom:0;
  border-radius:18px 18px 0 0; padding:12px 14px 22px;
  box-shadow:0 -14px 50px rgba(18,21,23,0.193);
  animation:x01SheetUp .2s ease;
}
@keyframes x01SheetUp{ from{transform:translate(-50%,24px);opacity:0} to{transform:translate(-50%,0);opacity:1} }
.x01-board.x01-perdart #lanePerdart .dart-row{ margin-top:8px; }
.x01-perdart-close{
  margin-left:auto; background:var(--surface-2, rgba(18,21,23,.06)); border:1px solid var(--border);
  color:var(--text); font:inherit; font-weight:700; font-size:12px; padding:5px 12px; border-radius:8px; cursor:pointer;
}
.dart-entry-header{ display:flex; align-items:center; gap:8px; }

/* ── match stats modal (opened from the … menu) ───────────────────────── */
.x01-stats-bg{ position:fixed; inset:0; background:rgba(3,6,15,.72); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:1000; padding:16px; }
.x01-stats-bg.show{ display:flex; }
.x01-stats-card{ width:100%; max-width:460px; max-height:88vh; overflow:hidden; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); }
.x01-stats-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.x01-stats-title{ font-family:var(--font-display); font-size:24px; letter-spacing:1.5px; }
.x01-stats-close{ background:transparent; border:1px solid var(--border); color:var(--text); border-radius:20px;
  padding:6px 16px; font:inherit; font-weight:700; cursor:pointer; }
.x01-stats-names{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:10px 14px; gap:8px; }
.x01-stats-names .n{ font-weight:800; font-size:16px; text-align:center; }
.x01-stats-names .vs{ color:var(--muted, rgba(18,21,23,.42)); font-size:12px; }
.x01-stats-body{ overflow-y:auto; }
.x01-st-row{ display:grid; grid-template-columns:1fr 130px 1fr; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); }
.x01-st-row:nth-child(even){ background:rgba(18,21,23,.02); }
.x01-st-v{ font-family:var(--font-display); font-size:26px; text-align:center; line-height:.95; }
.x01-st-l{ text-align:center; font-size:12.5px; font-weight:700; color:var(--muted-2, rgba(18,21,23,.6)); }
.x01-st-sec{ text-align:center; background:var(--surface-2, rgba(18,21,23,.04)); color:var(--muted-2, rgba(18,21,23,.6));
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:800; padding:7px; }
.x01-stats-note{ padding:10px 14px; font-size:11px; color:var(--muted, rgba(18,21,23,.42)); border-top:1px solid var(--border); }
[data-theme="light"] .x01-st-row:nth-child(even){ background:rgba(0,0,0,.02); }

/* ── live pending row (the box you type into) — pinned below the scroll ── */
.x01-lg-pend-wrap{ flex:none; border-top:1px solid var(--border); background:rgba(153,35,26,.08); }
.x01-lg-pend-wrap .x01-lg-row{ min-height:52px; }
.x01-lg-pendrow .x01-lg-cell.togo{ color:var(--text); }
.x01-lg-cell.x01-pend#x01PendScored{ color:var(--muted-2, rgba(18,21,23,.6)); cursor:default; }
.x01-lg-cell.x01-pend.bust{ color:var(--red); font-size:20px; }
[data-theme="light"] .x01-lg-pend-wrap{ background:rgba(112,24,18,.07); }

/* ── light theme tweaks ───────────────────────────────────────────── */
[data-theme="light"] .x01-spine,
[data-theme="light"] .x01-ledger{ background:#fff; border-color:rgba(0,0,0,.10); }
[data-theme="light"] .x01-sp-bo,
[data-theme="light"] .x01-lg-head,
[data-theme="light"] .x01-lg-cell.scored{ color:rgba(250,247,240,.5); }
[data-theme="light"] .x01-sp-legs span{ color:rgba(250,247,240,.4); }
[data-theme="light"] .x01-lg-darts{ background:rgba(0,0,0,.03); color:rgba(250,247,240,.45); }
[data-theme="light"] .x01-lg-row:nth-child(odd){ background:rgba(0,0,0,.015); }
[data-theme="light"] .x01-heroes .pc-name,
[data-theme="light"] .x01-type-hint{ color:rgba(250,247,240,.45); }

/* ── the throwing hero gets the solid highlight (existing rule already
      paints .player-card.throwing; make its number pop a touch more) ── */
.x01-heroes .player-card.throwing .pc-score{ text-shadow:0 0 34px rgba(153,35,26,.35); }

/* ── responsive: phones ───────────────────────────────────────────── */
@media (max-width:760px){
  .x01-board{ height:calc(100dvh - 118px); gap:10px; max-width:100%; }
  .x01-lg-body{ height:148px; }
  /* give the spine names more room on narrow screens */
  .x01-spine{ padding:10px 12px; }
  .x01-sp-av{ width:28px; height:28px; font-size:13px; }
  .x01-sp-name{ font-size:14px; }
  .x01-sp-legs{ font-size:24px; }
  .x01-sp-bo{ font-size:9.5px; }
}
/* very short screens (landscape phone) — shrink ledger, keep numbers big */
/* short viewports (small laptops / landscape phones): compact everything
   so the spine, scores, visits and keypad all still fit without drop-off */
@media (max-height:780px){
  .x01-board{ gap:8px; }
  .x01-board .numpad button{ height:37px; font-size:19px; }
  .x01-board .numpad .np-miss,
  .x01-board .numpad button[data-quick]{ height:25px; font-size:12px; }
  .x01-lg-body{ height:74px; }
  .x01-spine{ padding:8px 12px; }
  .x01-sp-legs{ font-size:24px; }
  .x01-heroes{ min-height:60px; }
  .x01-heroes .player-card{ padding:6px 8px; }
  .x01-heroes .pc-name{ font-size:10px; letter-spacing:1.2px; }
}
@media (max-height:600px){
  .x01-board .numpad button{ height:32px; font-size:17px; }
  .x01-lg-body{ height:58px; }
  .x01-heroes{ min-height:48px; }
}