/* Above the stacked-layout breakpoint, pin the squad screen to the viewport:
       the page never scrolls, the roster scrolls inside its panel instead. */
    @media (min-width: 901px) {
      #selectionScreen.screen.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
      #selectionScreen header { position: static; flex: none; }
      #selectionScreen main { flex: 1 1 auto; min-height: 0; width: 100%; padding-bottom: 14px; display: block; }
      .team-select-layout { height: 100%; min-height: 0; align-items: stretch; }
      .squad-panel, .xi-panel { display: flex; flex-direction: column; min-height: 0; }
      .squad-panel .squad-roster { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
      .xi-panel .selected-xi-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
      /* The selection pool is a wide stat table; give the left panel the most
         room, but keep the picked-squad panel wide enough that "15  Suryakumar
         Yadav" + OVR + remove never wraps or clips. */
      #selectionScreen .team-select-layout { grid-template-columns: minmax(600px, 2fr) minmax(310px, 0.82fr); }
    }
    /* Soft-rule warnings strip on the generic selection screen. */
    .selection-warnings { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
    .selection-warnings:not(.has-warnings) { display: none; }
    .selection-warn-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; color: #ffcf8f; border: 1px solid rgba(255,176,90,0.40); background: rgba(255,176,90,0.10); }
    /* The selection pool renders as a shared sortable table (tables.js). Rows
       are clickable; picked rows dim and show their squad slot. */
    #selectionPool { padding-right: 0; }
    #selectionPool table { width: 100%; }
    #selectionPool thead th { position: sticky; top: 0; z-index: 2; }
    #selectionPool tbody tr { cursor: pointer; }
    #selectionPool tbody td { padding: 4px 8px; }
    #selectionPool tbody tr.in-xi { opacity: .42; }
    #selectionPool tbody tr.in-xi:hover { opacity: .9; }
    #selectionPool tbody tr.in-xi:hover td { background: rgba(255,110,100,0.07); }
    #selectionPool tbody tr.xi-full { opacity: .5; cursor: not-allowed; }
    #selectionPool tbody tr.xi-full:hover td { background: transparent; }
    #selectionPool tbody tr.sel-disabled { opacity: .4; cursor: not-allowed; }
    #selectionPool tbody tr.sel-disabled:hover td { background: transparent; }
    #selectionPool .sel-retired { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #c9786f; border: 1px solid rgba(201,120,111,0.5); border-radius: 3px; padding: 1px 4px; margin-left: 4px; white-space: nowrap; }
    #selectionPool .roster-ovr { margin: 0 auto; }
    #selectionPool .sel-player { display: flex; align-items: center; gap: 7px; min-width: 0; }
    #selectionPool .sel-player .roster-name { font-weight: 700; }
    #selectionPool .player-role-icon { width: 26px; height: 19px; flex: 0 0 auto; }
    #selectionPool .player-role-icon .role-svg { width: 17px; height: 15px; }
    #selectionPool .sel-role-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #8aa195; }
    #selectionPool .sel-pick { font-weight: 800; font-size: 12px; }
    #selectionPool .sel-pick.add { color: var(--accent); }
    #selectionPool .sel-pick.on { color: #8aa195; }
    #selectionPool .sel-pick.full { color: #8aa195; font-size: 8px; letter-spacing: .05em; }
    /* Stats toggles above the pool (Format: T20/ODI/Test, and Scope:
       Career/Season). Each is a pill-track segmented control; the active pill
       is filled accent with dark text, inactive pills are quiet. */
    .selection-format-bar { display: none; align-items: center; gap: 12px; margin: 2px 0 10px; flex-wrap: wrap; }
    .selection-format-bar.active { display: flex; }
    .selection-bar-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); }
    .selection-seg { display: inline-flex; gap: 2px; padding: 2px; background: rgba(var(--surface-rgb), 0.7); border: 1px solid var(--line); border-radius: 999px; }
    .selection-seg-btn { padding: 4px 15px; font-size: 11px; font-weight: 700; letter-spacing: .03em; background: transparent; color: var(--muted); border: none; border-radius: 999px; cursor: pointer; transition: background .14s ease, color .14s ease; }
    .selection-seg-btn:hover:not(.on) { color: var(--text); background: rgba(var(--accent-rgb), 0.08); }
    .selection-seg-btn.on { background: var(--accent); color: #04210f; box-shadow: 0 1px 7px rgba(var(--accent-rgb), 0.32); }
    /* The picked-squad rows: keep each on one line so long names never wrap and
       overlap the row below (the bug at the narrow width). */
    #selectionPicks .selected-player-main { flex-wrap: nowrap; }
    #selectionPicks .player-role-icon { width: 26px; height: 20px; }
    #selectionPicks .player-role-icon .role-svg { width: 18px; height: 16px; }
    /* Assigned-role badges on picked XI rows (C / WK / B1 / B2). */
    .sel-role-badge { display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 4px; border-radius: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: #04210f; background: var(--accent); }
    /* Recent-XI quick-apply chips above the picked list. */
    .selection-recent { display: none; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
    .selection-recent.active { display: flex; }
    .selection-recent-chip { padding: 4px 11px; font-size: 11px; font-weight: 700; border-radius: 999px; background: rgba(var(--accent-rgb), 0.10); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.38); cursor: pointer; transition: background .12s; }
    .selection-recent-chip:hover { background: rgba(var(--accent-rgb), 0.2); }
    /* Minimal recent-XI dropdown: a quiet outline, not the bright accent fill the
       global button rule would give it. ID-scoped so the Recent Overs selector is
       untouched. */
    #selectionRecent .stats-dd-toggle { width: auto; min-width: 170px; max-width: 280px; background: rgba(255,255,255,0.04); color: #cfe8d6; border: 1px solid rgba(255,255,255,0.14); font-weight: 600; padding: 4px 10px; box-shadow: none; }
    #selectionRecent .stats-dd-toggle:hover { background: rgba(255,255,255,0.07); border-color: rgba(var(--accent-rgb), 0.45); transform: none; filter: none; }
    .player-pool, .selected-xi-list { display: grid; gap: 4px; max-height: none; overflow: visible; align-content: start; }
    .player-chip { width: 100%; min-height: 36px; justify-content: space-between; text-align: left; white-space: normal; padding: 7px 10px; gap: 10px; }
    .player-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .squad-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
    .squad-panel-header h2 { margin: 0; }
    .squad-actions { display: flex; align-items: center; gap: 8px; }
    .squad-roster { display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; }
    .roster-ovr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-size: 12.5px; font-weight: 800; border: 1px solid; }
    .tier-elite { color: #3dffa0; border-color: rgba(61,255,160,0.55); background: rgba(var(--accent-rgb), 0.13); }
    .tier-great { color: #b9ef6b; border-color: rgba(185,239,107,0.45); background: rgba(185,239,107,0.09); }
    .tier-solid { color: #ead2a8; border-color: rgba(234,210,168,0.40); background: rgba(234,210,168,0.07); }
    .tier-dev { color: #93a89c; border-color: rgba(147,168,156,0.35); background: rgba(147,168,156,0.06); }
    .roster-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
    .xi-ovr { justify-self: end; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 8px; border: 1px solid; }
    .roster-ovr-ar, .xi-ovr-ar { font-size: 10px; letter-spacing: 0.5px; }
    .ar-splits { font-size: 10px; font-weight: 700; color: #93a89c; font-variant-numeric: tabular-nums; padding: 1px 5px; border: 1px solid var(--line); border-radius: 6px; opacity: 0.9; white-space: nowrap; }
    #xiCount.complete { border-color: rgba(61,255,160,0.55); color: #3dffa0; }
    .selected-xi-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
    .selected-xi-header h2 { margin: 0; }
    .selected-player-row { min-height: 36px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 26px; gap: 8px; align-items: center; background: rgba(var(--surface-rgb), 0.80); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; cursor: grab; user-select: none; }
    .selected-player-row.dragging { opacity: .55; }
    .selected-player-row.drag-over { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.10); }
    .drag-handle { color: var(--accent); cursor: grab; font-variant-numeric: tabular-nums; }
    .selected-player-main { min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .selected-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .player-role-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 26px; padding: 0; border: 1px solid rgba(234,210,168,.26); border-radius: 999px; background: rgba(255,255,255,0.045); line-height: 1; }
    .player-role-icon .role-svg { width: 24px; height: 22px; display: block; fill: none; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
    .player-role-icon .bat-svg { width: 23px; }
    .player-role-icon .ball-svg { width: 21px; }
    .player-role-icon .allrounder-svg { width: 27px; }
    .player-role-icon .gloves-svg { width: 27px; }
    .bat-blade { fill: #d9b77a; stroke: #f3d69d; }
    .bat-edge, .bat-handle { fill: #7b4a2a; stroke: #e1b26e; }
    .ball-body { fill: #b41f2b; stroke: #ffbcc1; }
    .ball-seam, .ball-stitch { stroke: #fff0d7; }
    .glove-body { fill: #f1e8d8; stroke: #f8fff3; }
    .glove-finger, .glove-thumb { fill: none; stroke: #f1e8d8; stroke-width: 2.7; }
    .glove-pad, .glove-cuff, .glove-web { stroke: #9d3e32; }
    .xi-remove-button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(143,240,189,0.22); border-radius: 50%; background: rgba(255,255,255,0.03); color: #8ff0bd; font-size: 15px; line-height: 1; font-weight: 800; cursor: pointer; box-shadow: none; padding: 0; }
    .xi-remove-button:hover, .xi-remove-button:focus-visible { border-color: rgba(var(--accent-rgb), 0.62); background: rgba(var(--accent-rgb), 0.13); color: #f2fff8; outline: none; }
    .role-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 0; }
    .role-badge { border: 1px solid rgba(var(--accent-rgb), .28); color: var(--accent); border-radius: 999px; padding: 2px 5px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
    /* Fixed so it positions against the viewport (clientX/Y in selOpenContextMenu) and can flip above the cursor near the bottom edge. */
    .xi-context-menu { position: fixed; z-index: 120; min-width: 230px; display: grid; gap: 5px; padding: 8px; background: #07150f; border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 18px 48px rgba(0,0,0,0.45); }
    .xi-context-menu[hidden] { display: none; }
    .xi-context-menu button { justify-content: flex-start; width: 100%; background: rgba(var(--surface-rgb), 0.95) !important; color: var(--text) !important; box-shadow: none !important; }
    /* Toss screen styles live in the "Toss arena" section further down. */

    #matchScreen.screen.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
    .simple-match-shell { padding: 0; max-width: none; margin: 0; width: 100%; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 268px minmax(0, 1fr); background: #050e09; overflow: hidden; }
    .simple-left-rail { background: linear-gradient(180deg, #0b1912 0%, #091510 100%); border-right: 1px solid rgba(var(--accent-rgb), 0.13); padding: 8px 7px; color: white; overflow: auto; display: grid; grid-auto-rows: max-content; align-content: start; gap: 6px; }
    .player-live-card { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 9px 10px; min-height: 0; overflow: hidden; }
    .batter-live-card { padding: 8px 10px; }
    .player-live-card.on-strike { border-color: rgba(var(--accent-rgb), 0.50); background: rgba(var(--accent-rgb), 0.04); box-shadow: inset 3px 0 0 var(--accent); }
    .player-live-card h3 { margin: 0 0 5px; color: #d4f2e2; font-size: 13px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .strike-star { color: var(--accent); margin-right: 4px; }
    .match-end-card { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.05); text-align: center; }
    .match-end-card h3 { color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
    .match-end-result { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; }
    .match-end-winner { font-size: 22px; font-weight: 900; color: #f4fff8; line-height: 1.05; }
    .match-end-margin { font-size: 13px; font-weight: 700; color: var(--accent); }
    .match-end-mom { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; flex-direction: column; gap: 3px; align-items: center; }
    .mom-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #c9a227; }
    .mom-name { font-size: 16px; font-weight: 800; color: #f4fff8; line-height: 1.1; }
    .mom-team { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); }
    .mom-line { font-size: 13px; font-weight: 700; color: var(--accent); }
    .player-live-main { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
    /* Stamina + confidence stack vertically in column 1; the run stays at the end (column 2). */
    .player-live-meters { display: grid; gap: 4px; min-width: 0; }
    .player-live-main small { font-size: 9px; line-height: 1.2; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
    .player-live-runs { font-size: 32px; font-weight: 900; line-height: 0.9; color: #f4fff8; letter-spacing: -0.03em; }
    .player-live-meta { display: grid; grid-template-columns: 1fr 1fr minmax(0, 1.7fr); gap: 4px; margin-top: 8px; }
    .tiny-stat { background: rgba(0,0,0,0.22); border-radius: 6px; padding: 4px 3px; font-size: 8px; line-height: 1.1; text-align: center; min-width: 0; overflow: hidden; color: rgba(255,255,255,0.50); }
    .tiny-stat b { display:block; color:#fff; font-size:11px; line-height: 1.15; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Bowler stamina: a thin strip below the meta row. Green when fresh, warming
       to amber then red as he tires - a compact at-a-glance fatigue read. */
    .bowler-stamina { display:flex; align-items:center; gap:6px; margin-top:7px; font-size:8px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,0.45); }
    .bowler-stamina em { font-style:normal; }
    .bowler-stamina b { color:#fff; font-size:9px; min-width:26px; text-align:right; }
    .bowler-stamina-track { flex:1; height:4px; border-radius:3px; background:rgba(255,255,255,0.12); overflow:hidden; }
    .bowler-stamina-track span { display:block; height:100%; border-radius:3px; background:#5fd08a; transition:width .35s ease; }
    .bowler-stamina.stamina-fatigued .bowler-stamina-track span { background:#f4c542; }
    .bowler-stamina.stamina-tired .bowler-stamina-track span { background:#f0993a; }
    .bowler-stamina.stamina-spent .bowler-stamina-track span { background:#e7553f; }
    .bowler-stamina.stamina-tired b, .bowler-stamina.stamina-spent b { color:#f0993a; }
    /* Ball age (Test): condition cue + the new-ball control once it is on offer. */
    .ball-age-row { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:8px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,0.45); }
    .ball-age-row em { font-style:normal; }
    .ball-age-row b { color:#fff; font-size:9px; }
    .ball-age-row.new-ball-due b { color:#f4c542; }
    .ball-age-row .new-ball-flag { margin-left:auto; color:#f4c542; }
    .take-new-ball-btn { margin-left:auto; font-size:8px; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:4px; border:1px solid rgba(244,197,66,0.6); background:rgba(244,197,66,0.14); color:#f4c542; cursor:pointer; }
    .take-new-ball-btn:hover { background:rgba(244,197,66,0.26); }
    .new-ball-delay { display:block; margin-top:3px; font-size:8px; text-transform:none; letter-spacing:0; color:rgba(244,197,66,0.78); }
    /* Fixed label + value columns so STA and CON bars are exactly equal length and aligned. */
    .confidence-inline { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) 30px; gap: 7px; align-items: center; color: #8fb49d; font-size: 8.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
    .confidence-inline b { color: #dfffea; font-size: 9.5px; line-height: 1; text-align: right; }
    .confidence-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow:hidden; margin-top:0; }
    .confidence-fill { height: 100%; background: var(--accent); border-radius: 999px; }
    .confidence-fill.stamina-fill { background: #f5b942; }
    .batter-tactic-card { margin-top: 5px; border-top: 1px solid rgba(var(--accent-rgb), 0.13); padding-top: 5px; display: grid; gap: 4px; }
    .batter-agg-row { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 3px 6px; align-items: center; padding: 4px 6px; border-radius: 7px; background: rgba(3,8,5,0.32); border: 1px solid rgba(var(--accent-rgb), 0.16); }
    .batter-agg-row:hover { border-color: rgba(var(--accent-rgb), 0.34); background: rgba(var(--accent-rgb), 0.055); }
    .batter-agg-row[data-approach="very_defensive"] { border-color: rgba(120,180,255,0.34); background: rgba(80,130,210,0.11); }
    .batter-agg-row[data-approach="defensive"] { border-color: rgba(120,180,255,0.24); background: rgba(80,130,210,0.065); }
    .batter-agg-row[data-approach="attacking"] { border-color: rgba(240,176,64,0.30); background: rgba(240,176,64,0.070); }
    .batter-agg-row[data-approach="all_out_attack"] { border-color: rgba(240,96,96,0.38); background: rgba(240,96,96,0.090); }
    .batter-matchup { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; color: #d4f2e2; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
    .batter-matchup span, .batter-matchup em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .batter-matchup em { color: #9ee8bd; font-style: normal; font-weight: 900; text-transform: none; letter-spacing: 0; }
    .agg-control { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; align-items: center; grid-column: 1 / -1; gap: 3px; }
    .agg-control button { min-width: 0; width: 18px; height: 16px; padding: 0; border-radius: 5px; border: 1px solid rgba(var(--accent-rgb), 0.26) !important; background: rgba(var(--accent-rgb), 0.09) !important; color: #9ef2c5 !important; box-shadow: none !important; font-size: 13px; line-height: 1; }
    .agg-control button:hover { border-color: rgba(var(--accent-rgb), 0.52) !important; background: rgba(var(--accent-rgb), 0.16) !important; color: #f3fff8 !important; filter: none; transform: none; }
    .agg-control b { min-width: 0; height: 16px; display: grid; place-items: center; padding: 0 5px; border-radius: 5px; background: rgba(var(--accent-rgb), 0.13); border: 1px solid rgba(var(--accent-rgb), 0.18); color: #e8fff2; font-size: 8px; line-height: 1; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .batter-agg-row[data-approach="very_defensive"] .agg-control b,
    .batter-agg-row[data-approach="defensive"] .agg-control b { background: rgba(120,180,255,0.14); border-color: rgba(120,180,255,0.26); color: #dcebff; }
    .batter-agg-row[data-approach="attacking"] .agg-control b { background: rgba(240,176,64,0.15); border-color: rgba(240,176,64,0.30); color: #ffe6ac; }
    .batter-agg-row[data-approach="all_out_attack"] .agg-control b { background: rgba(240,96,96,0.16); border-color: rgba(240,96,96,0.34); color: #ffd2d2; }
    .mini-confidence { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
    .mini-confidence span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #9ee8bd); }
    .batter-tactic-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; grid-column: 1 / -1; min-width: 0; }
    .batter-conf-inline { margin-right: auto; min-width: 0; color: #8fb49d; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
    .batter-conf-inline b { color: #dfffea; font-size: 9px; font-weight: 900; margin-left: 3px; }
    .batter-live-card .player-live-runs { font-size: 34px; }
    .batter-tactic-actions label { min-width: 0; display: inline-flex; flex-direction: row; align-items: center; gap: 4px; color: #9dc5ac; font-size: 8px; line-height: 1; font-weight: 800; text-transform: none; letter-spacing: 0; white-space: nowrap; }
    .batter-tactic-actions input { width: 12px; height: 12px; margin: 0; padding: 0; accent-color: var(--accent); }
    .mini-tactics-btn { min-width: 0; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(var(--accent-rgb), 0.28) !important; background: rgba(var(--accent-rgb), 0.10) !important; color: #dfffea !important; box-shadow: none !important; font-size: 9px; font-weight: 900; }
    .mini-tactics-btn:hover { border-color: rgba(var(--accent-rgb), 0.56) !important; background: rgba(var(--accent-rgb), 0.17) !important; filter: none; transform: none; }
    .bowler-control-card { display: flex; flex-direction: column; }
    .primary-bowler-card { border-color: rgba(var(--accent-rgb), 0.46); background: rgba(var(--accent-rgb), 0.045); box-shadow: inset 3px 0 0 var(--accent); }
    .bowler-figures { display: grid; gap: 3px; margin-top: 7px; padding: 6px 7px; border-radius: 7px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); }
    .bowler-figures div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; align-items: center; }
    .bowler-figures span { color: #96bca4; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
    .bowler-figures b { color: #f3fff8; font-size: 13px; font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
    .bowling-target-card { padding: 8px 10px; background: rgba(255,255,255,0.026); }
    .bowling-target-card h3 { font-size: 12px; margin-bottom: 7px; }
    .target-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px; color: #8fb49d; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
    .target-summary b { color: #f3fff8; font-size: 16px; line-height: 1; font-weight: 900; letter-spacing: 0; }
    .bowling-plan-card h3 { padding-bottom: 8px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.14); }
    .bowl-plan-row { display: grid; gap: 4px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.055); }
    .bowl-plan-row span { color: #9cc7ad; font-size: 9px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bowl-plan-stepper { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px 28px; gap: 4px; align-items: center; }
    .bowl-plan-stepper button { min-width: 0; height: 23px; padding: 0; border-radius: 5px; border: 1px solid rgba(var(--accent-rgb), 0.22) !important; background: rgba(var(--accent-rgb), 0.10) !important; color: #c9ffdf !important; box-shadow: none !important; font-size: 11px; font-weight: 900; }
    .bowl-plan-stepper b { min-width: 0; height: 23px; display: grid; place-items: center; border-radius: 5px; background: rgba(var(--accent-rgb), 0.14); color: #f3fff8; font-size: 9px; font-weight: 900; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bowl-plan-lock { opacity: 0.6; font-size: 11px !important; }
    .bowl-plan-lock.locked { opacity: 1; border-color: rgba(245,185,66,0.55) !important; background: rgba(245,185,66,0.14) !important; }
    .bowl-plan-stepper.plan-locked b { border: 1px solid rgba(245,185,66,0.40); }
    .simple-figures { display: grid; gap: 2px; padding-top: 8px; color: #a7cbb5; font-size: 11px; line-height: 1.35; }
    .simple-figures b { color: #f3fff8; }
    .rail-bowler-control { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: stretch; gap: 5px; padding: 4px; border-radius: 8px; border: 1px solid rgba(158,188,169,0.20); background: rgba(255,255,255,0.035); }
    .change-bowler-card { padding: 6px; }
    .change-bowler-card .rail-bowler-control { margin-top: 0; }
    .rail-picker-zone { min-width: 0; display: grid; align-content: center; gap: 1px; padding: 4px 6px; border: 0 !important; border-radius: 5px; background: transparent !important; color: #eafff0 !important; box-shadow: none !important; text-align: left; }
    .rail-picker-zone span { color: #96bca4; font-size: 8px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
    .rail-picker-zone b { color: #ffffff; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rail-bowler-control:hover { border-color: rgba(var(--accent-rgb), 0.42); background: rgba(255,255,255,0.055); }
    .rail-rotation-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 6px; background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.07); }
    .rail-rotation-toggle button { min-height: 24px; border-radius: 4px; border: 0 !important; background: transparent !important; color: #8fb49d !important; box-shadow: none !important; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; padding: 0 3px; }
    .rail-rotation-toggle button.active { background: rgba(214,232,221,0.14) !important; color: #f3fff8 !important; }
    /* The next-batter picker now reuses the shared `.selection-option` rows
       (see below) so it matches the bowler picker exactly. */
    /* Title + wrapping subtitle stack in the left column; the close button owns
       the right column, so long context copy can never push it onto a new row.
       Compound selector: .retro-dialog-head's display:flex is declared later in
       this file and would otherwise beat .selection-head alone. */
    .retro-dialog-head.selection-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 3px; }
    .selection-head h2 { grid-column: 1; }
    .selection-head #selectionContext { grid-column: 1; min-width: 0; margin: 0; font-size: 12px; }
    .selection-head .modal-close-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .simple-centre { height: 100%; padding: 10px 16px 68px; overflow: hidden; position: relative; background: #060f09; display: flex; flex-direction: column; gap: 8px; }
    .simple-centre #liveStatus { display: none; }
    .compact-scorecard { cursor: pointer; width: min(760px, 100%); margin: 0 auto; background: rgba(10,22,15,0.92); border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 12px; padding: 12px 16px; flex: 0 0 auto; transition: border-color 0.15s; }
    .compact-scorecard:hover { border-color: rgba(var(--accent-rgb), 0.48); }
    .compact-scorecard h2 { margin: 0 0 8px; font-size: 10px; color: rgba(var(--accent-rgb), 0.60); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
    .mini-scorecard { display: grid; gap: 9px; }
    .mini-scorecard-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; }
    .mini-scorecard-head h2 { margin: 0; color: #f3fff8; font-size: clamp(22px, 3vw, 30px); line-height: 1.05; font-weight: 800; letter-spacing: 0; text-transform: none; }
    .mini-score-main { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 18px; color: #9fc8ad; }
    .mini-score-main b { color: #f3fff8; font-size: clamp(30px, 4vw, 42px); line-height: 1; font-weight: 900; letter-spacing: -0.04em; }
    .mini-score-main span { font-size: 12px; font-weight: 800; white-space: nowrap; }
    .mini-score-table { display: grid; gap: 0; border-top: 1px solid rgba(var(--accent-rgb), 0.15); }
    .mini-table-head, .mini-batter-row, .mini-bowler-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) repeat(5, minmax(32px, 46px)); gap: 8px; align-items: center; min-height: 25px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.10); }
    .mini-table-head { color: #8dc9a4; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
    .mini-table-head span:nth-child(n+3) { text-align: right; }
    .mini-batter-row { color: #dfffea; font-size: 13px; }
    .mini-batter-row b, .mini-bowler-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f3fff8; font-size: 15px; font-weight: 800; }
    .mini-bowler-name { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
    .mini-bowler-name .bowl-note { flex: none; color: #8dc9a4; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .04em; }
    .player-live-card h3 .bowl-note { color: #8dc9a4; font-size: 0.62em; font-weight: 700; letter-spacing: .03em; }
    .mini-batter-row span:nth-child(n+3), .mini-bowler-row span:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
    .scorecard-marker { width: 14px; height: 14px; display: inline-grid; place-items: center; justify-self: center; }
    .strike-marker { color: #f2c94c; font-size: 16px; line-height: 1; font-weight: 900; }
    .mini-th-label { display: inline-flex; align-items: center; gap: 5px; }
    .th-glyph { width: 13px; height: 13px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
    .mini-bowler-row { min-height: 30px; color: #dfffea; }
    .mini-bowling-head { margin-top: 2px; }
    /* Footer: a centred chase-equation headline, then a single stats row with the
       run rates grouped together. */
    .mini-score-footer { display: flex; flex-direction: column; }
    /* Two lines: conditions (left) + headline (centred) + Over/RR/Target on line
       one, the P'ship/Last5/FOW row right-aligned under it on line two. The
       headline shares the first line; it is not a row of its own. */
    /* 1fr auto 1fr: equal side columns keep the headline centred on the whole
       panel (not just the gap between the two side blocks). Conditions hug the
       left, the stats grid hugs the right. */
    .msf-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px 16px; color: #9fc8ad; font-size: 12px; font-weight: 700; }
    .msf-conditions { display: flex; align-items: center; gap: 10px; min-width: 0; justify-self: start; }
    .msf-headline { justify-self: center; min-width: 0; text-align: center; font-size: 13px; font-weight: 700; color: #9fc8ad; white-space: nowrap; }
    .msf-headline b { color: #f3fff8; font-weight: 900; }
    /* Stats grid: 3 columns, right-aligned, so the two rows' columns line up. */
    .msf-grid { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; justify-self: end; align-items: baseline; gap: 5px 18px; }
    .msf-grid > .msf-stat { text-align: right; }
    /* Ball-age chip: an aging leather-ball glyph + "Ball Age: N", fed by ball_age_overs (Test). */
    .msf-ball { display: inline-flex; align-items: center; gap: 6px; }
    .ball-glyph { width: 17px; height: 17px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
    .msf-ball-label { white-space: nowrap; }
    .msf-newball-due { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #f4c542; }
    .msf-tallies { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px 14px; }
    .msf-stat { white-space: nowrap; }
    .msf-stat b { color: #f3fff8; font-weight: 900; }
    /* Run Rate + Req kept back-to-back, fenced off so they read as one pair. */
    .msf-rates { display: inline-flex; align-items: baseline; gap: 10px; padding: 0 12px; border-left: 1px solid rgba(255,255,255,0.12); border-right: 1px solid rgba(255,255,255,0.12); }
    .msf-fow { color: #7f9a88; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .msf-fow b { color: #c9d8cd; }
    .mini-empty-row { color: #8aaf97; font-size: 12px; padding: 8px 0; }
    .quick-scoreboard { display: grid; gap: 10px; }
    .quick-score-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(116px, auto); align-items: end; gap: 16px; }
    .quick-score { margin-top: 3px; color: #f3fff8; font-size: clamp(36px, 5vw, 58px); line-height: .9; font-weight: 950; letter-spacing: -0.05em; }
    .quick-overs { color: #8aaf97; font-size: 12px; font-weight: 700; }
    .quick-score-side { justify-self: end; min-width: 116px; padding: 9px 10px; border: 1px solid rgba(var(--accent-rgb), 0.16); border-radius: 8px; background: rgba(255,255,255,0.035); text-align: right; }
    .quick-score-side span { display: block; color: #8aaf97; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .quick-score-side b { display: block; color: #f3fff8; font-size: 22px; line-height: 1.05; margin-top: 3px; }
    .quick-score-side small { color: rgba(255,255,255,0.45); font-size: 10px; }
    .quick-context-row { margin-top: 0; }
    .quick-live-row { margin-top: 0; }
    .match-facts { display:grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; }
    .match-fact { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 6px 8px; color: #8aaf97; font-size: 10px; font-weight: 600; }
    .match-fact b { display:block; color:#f3fff8; font-size:12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .recent-overs-panel { width: min(760px, 100%); overflow: hidden; margin: 0 auto; background: rgba(6,14,10,0.92); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
    /* Three zones: title left, dropdown dead-centre, "Runs" right. The two 1fr
       columns are equal, so the auto-width dropdown sits in the true middle. */
    .recent-overs-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 8px; flex: 0 0 auto; }
    .recent-overs-header h2 { margin: 0; font-size: 10px; color: rgba(var(--accent-rgb), 0.60); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; justify-self: start; min-width: 0; }
    /* Custom stats-view dropdown (replaces the native <select> so the open menu is
       fully styleable and the selected/hovered rows stay legible). */
    .stats-dd { justify-self: center; position: relative; }
    /* Fixed width so the toggle and the open menu line up at the same width; the
       label fits the longest option without resizing per selection. */
    .stats-dd-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 222px; max-width: 100%; background: rgba(255,255,255,0.05); color: #eafff4; border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 6px; padding: 5px 11px; font-size: 11px; font-weight: 700; cursor: pointer; }
    .stats-dd-toggle:hover { border-color: rgba(var(--accent-rgb), 0.5); }
    .stats-dd-toggle:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.6); outline-offset: 1px; }
    .stats-dd-toggle span:first-child { flex: 1 1 auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stats-dd-caret { flex: none; font-size: 9px; line-height: 1; color: rgba(var(--accent-rgb), 0.9); }
    /* Minimal menu: subtle border, quiet hover, soft accent tint for the selected row. */
    .stats-dd-menu { position: fixed; z-index: 60; margin: 0; padding: 4px; list-style: none; background: #08130d; border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 7px; box-shadow: 0 10px 24px rgba(0,0,0,0.5); }
    .stats-dd-menu[hidden] { display: none; }
    .stats-dd-menu li { padding: 6px 11px; font-size: 11.5px; font-weight: 600; color: #cfe8d6; border-radius: 5px; cursor: pointer; white-space: nowrap; }
    .stats-dd-menu li:hover { background: rgba(255,255,255,0.06); color: #eafff4; }
    .stats-dd-menu li.selected { background: rgba(var(--accent-rgb), 0.16); color: #eafff4; font-weight: 800; }
    .recent-overs-runs-label { justify-self: end; text-align: right; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); }
    /* Minimal scrollbar: invisible until the box is hovered, then a thin accent thumb. */
    .recent-overs-body { overflow-y: auto; padding-right: 4px; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
    /* Over grid: cap to ~4 rows and scroll for the earlier overs. */
    .recent-overs-body.overs-scroll { max-height: 212px; }
    .recent-overs-body:hover { scrollbar-color: rgba(var(--accent-rgb), 0.5) transparent; }
    .recent-overs-body::-webkit-scrollbar { width: 8px; }
    .recent-overs-body::-webkit-scrollbar-track { background: transparent; }
    .recent-overs-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
    .recent-overs-body:hover::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.45); }
    .recent-overs-body:hover::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.7); }
    /* Only four overs show at a time, so each row gets more vertical room and the
       delivery boxes are a touch larger. */
    .recent-over-row { display: grid; grid-template-columns: 56px minmax(80px, 124px) 1fr 46px; align-items: center; gap: 6px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.06); }
    .recent-over-row:first-child { border-top: 0; }
    .recent-over-label { color: var(--accent); font-size: 12px; font-weight: 800; }
    .recent-over-bowler { color: #c0d8c8; font-size: 12px; display: flex; align-items: center; gap: 6px; min-width: 0; }
    .recent-over-bowler .rov-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Three zones: an empty left spacer balances the right extras zone so the six
       legal balls (.rov-legal) stay centred; illegal deliveries (.rov-extras) hang
       off to the right without shifting the six. */
    .recent-over-cells { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
    .rov-legal { display: flex; gap: 6px; align-items: center; justify-content: center; }
    .rov-extras { display: flex; gap: 6px; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
    .ball-cell { width: 34px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.80); font-weight: 800; font-size: 13px; flex: none; }
    .ball-cell.empty { opacity: .22; }
    /* Dot ball: a quiet centred dot rather than a "0", so scoring shots stand out. */
    .ball-cell.dot { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.40); font-size: 16px; line-height: 1; }
    .ball-cell.extra { background: rgba(255,210,77,0.18); color: #ffd24d; border: 1px dashed rgba(255,210,77,0.55); font-size: 12px; }
    .ball-cell.free-hit { box-shadow: inset 0 0 0 2px rgba(120,200,255,0.92); }
    .ball-cell.wicket { background: rgba(240,80,80,0.90); color: white; }
    .ball-cell.boundary { background: rgba(250,220,80,0.92); color: #101a08; }
    .ball-cell.six { background: rgba(var(--accent-rgb), .92); color: #001b08; }
    .ball-cell.clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
    .ball-cell.clickable:hover, .ball-cell.clickable:focus-visible { transform: translateY(-1px) scale(1.12); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.65), 0 4px 10px rgba(0,0,0,0.45); filter: brightness(1.08); outline: none; }
    .recent-over-total { color: #f3fff8; text-align: right; font-weight: 900; font-size: 14px; }
    /* ---- Manhattan (runs-per-over) chart view ---- */
    .mh-wrap { display: flex; flex-direction: column; gap: 16px; padding: 4px 0; }
    /* Two-innings (compact) mode: tighter gaps and smaller side labels so both charts fit. */
    .mh-wrap.mh-compact { gap: 10px; }
    .mh-compact .mh-side b, .mh-compact .mh-side span { font-size: 12px; }
    .mh-compact .mh-side small { font-size: 10px; }
    .mh-block { display: flex; align-items: center; gap: 14px; }
    .mh-side { flex: 0 0 92px; line-height: 1.25; }
    .mh-side b { display: block; color: #eafff4; font-size: 13px; font-weight: 800; }
    .mh-side span { display: block; color: #fff; font-size: 13px; font-weight: 700; }
    .mh-side small { color: rgba(255,255,255,0.55); font-size: 11px; }
    .mh-chart { flex: 1 1 auto; min-width: 0; }
    .mh-svg { width: 100%; height: auto; display: block; }
    .mh-grid { stroke: rgba(255,255,255,0.10); stroke-width: 0.35; }
    .mh-base { stroke: rgba(255,255,255,0.35); stroke-width: 0.5; }
    .mh-axis { fill: rgba(255,255,255,0.55); font-size: 6px; font-weight: 700; }
    .mh-w { font-size: 6px; font-weight: 800; }
    /* ---- Current Partnership view ---- */
    .cp { display: flex; flex-direction: column; gap: 16px; padding: 8px 6px; }
    .cp-head { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: baseline; gap: 8px; }
    .cp-name { font-size: 13px; font-weight: 700; color: #eafff4; }
    .cp-name.left { text-align: left; }
    .cp-name.right { text-align: right; }
    .cp-strike { color: var(--accent); }
    .cp-title { text-align: center; color: #cfe8d6; font-size: 14px; font-weight: 700; }
    .cp-body { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 8px; }
    .cp-col { display: flex; flex-direction: column; gap: 2px; }
    .cp-col.left { align-items: flex-start; }
    .cp-col.right { align-items: flex-end; }
    .cp-label { color: var(--accent); font-size: 11px; font-weight: 800; margin-bottom: 1px; }
    .cp-stat { color: #dfece4; font-size: 12px; }
    .cp-centre { text-align: center; color: #eafff4; font-size: 14px; font-weight: 700; }
    /* ---- Partnerships / Fall of Wickets table ---- */
    .fow-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .fow-table th { text-align: left; color: var(--accent); font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.14); white-space: nowrap; }
    .fow-table td { padding: 4px 8px; color: #dfece4; border-bottom: 1px solid rgba(255,255,255,0.05); white-space: nowrap; }
    .fow-table tbody tr:last-child td { border-bottom: 0; }
    .fow-num { font-variant-numeric: tabular-nums; }
    .fow-table td.fow-num:first-child { color: var(--accent); font-weight: 800; }
    .fow-bats { color: #c9d8cd; white-space: normal; }
    .ball-anim-dialog { width: min(720px, 96vw); }
    .ball-anim-body { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
    .ball-anim-stage { flex: 1 1 320px; display: flex; justify-content: center; position: relative; }
    .ball-anim-stage canvas { border-radius: 50%; box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
    /* Fielder name tooltip on hover in the replay. Anchored to the stage; JS sets
       left/top in canvas pixels (the canvas sits at the stage origin). */
    .fielder-tooltip { position: absolute; transform: translate(-50%, -140%); pointer-events: none; background: rgba(6,16,10,0.95); color: #eafff4; border: 1px solid rgba(var(--accent-rgb), 0.6); border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 0.08s; z-index: 5; }
    .fielder-tooltip.show { opacity: 1; }
    .ball-anim-info { flex: 1 1 200px; display: flex; flex-direction: column; gap: 12px; }
    .ball-anim-outcome { font-size: 26px; font-weight: 900; letter-spacing: 0.06em; border: 2px solid currentColor; border-radius: 10px; padding: 8px 12px; text-align: center; text-transform: uppercase; }
    .ball-anim-line { margin: 0; display: flex; flex-direction: column; gap: 2px; }
    .ball-anim-line span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); }
    .ball-anim-line b { color: #e6f5ec; font-size: 14px; text-transform: capitalize; }
    .field-editor-dialog { width: min(840px, 96vw); }
    .field-editor-body { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
    .field-editor-stage { flex: 1 1 360px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .field-editor-stage canvas { border-radius: 50%; box-shadow: 0 12px 40px rgba(0,0,0,0.5); touch-action: none; cursor: grab; }
    .field-editor-stage canvas:active { cursor: grabbing; }
    .field-editor-hint { font-size: 11px; text-align: center; margin: 0; max-width: 320px; }
    .field-editor-side { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; }
    .field-editor-presets { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
    /* High specificity (.field-editor-presets button.field-preset-chip) so these win
       over the global green `button` rule that otherwise made the chips unreadable. */
    .field-editor-presets button.field-preset-chip { text-align: left; align-items: stretch; background: #11211a !important; border: 1px solid rgba(255,255,255,0.10); border-left: 3px solid var(--chip-accent, rgba(255,255,255,0.25)); border-radius: 10px; padding: 9px 12px; color: #eaf6ee !important; box-shadow: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .12s ease, background .12s ease; }
    .field-editor-presets button.field-preset-chip:hover { background: #17291f !important; border-color: rgba(var(--accent-rgb), 0.45); transform: none; filter: none; }
    .field-editor-presets button.field-preset-chip.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.14) !important; }
    .field-editor-presets button.field-preset-chip b { font-size: 13.5px; font-weight: 800; color: #ffffff; }
    .field-editor-presets button.field-preset-chip small { font-size: 11px; line-height: 1.35; color: rgba(231,245,237,0.74); }
    .field-editor-presets button.field-preset-chip.illegal { opacity: 0.62; border-left-color: #ff7a6b; background: rgba(40,18,16,0.55) !important; }
    .field-editor-presets button.field-preset-chip.illegal:hover { border-color: rgba(255,122,107,0.5); }
    .field-preset-illegal { font-size: 10px; font-weight: 800; color: #ff9c8e; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
    .field-preset-chip.tempo-accent-0 { --chip-accent: #6fcaff; }
    .field-preset-chip.tempo-accent-1 { --chip-accent: #79d6c0; }
    .field-preset-chip.tempo-accent-2 { --chip-accent: #cfe6b0; }
    .field-preset-chip.tempo-accent-3 { --chip-accent: #f4dc52; }
    .field-preset-chip.tempo-accent-4 { --chip-accent: #ffb066; }
    .field-preset-chip.tempo-accent-5 { --chip-accent: #ff7a6b; }
    .field-preset-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .field-preset-tempo { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor; }
    .field-preset-tempo.tempo-0 { color: #6fcaff; }
    .field-preset-tempo.tempo-1 { color: #79d6c0; }
    .field-preset-tempo.tempo-2 { color: #cfe6b0; }
    .field-preset-tempo.tempo-3 { color: #f4dc52; }
    .field-preset-tempo.tempo-4 { color: #ffb066; }
    .field-preset-tempo.tempo-5 { color: #ff7a6b; }
    .field-editor-legality { font-size: 11px; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
    .field-editor-legality.ok { background: rgba(var(--accent-rgb), 0.10); color: #9fe9c4; border: 1px solid rgba(var(--accent-rgb), 0.3); }
    .field-editor-legality.invalid { background: rgba(240,120,80,0.12); color: #ffba9a; border: 1px solid rgba(240,120,80,0.4); }
    .restriction-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 2px; }
    .restriction-row { display: flex; justify-content: space-between; gap: 10px; }
    .restriction-row b { font-variant-numeric: tabular-nums; }
    .restriction-row.over b { color: #ff7a6b; }
    .restriction-status { margin-top: 3px; font-weight: 700; }
    .field-editor-legality.server-rejected { background: rgba(240,80,80,0.16); border-color: rgba(240,80,80,0.55); color: #ffb3b3; }
    /* Placement coverage hint (boundary / ring / catching), shown above the legality readout. */
    .coverage-title { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
    .coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 2px 0 6px; }
    .coverage-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); cursor: help; }
    .coverage-cell b { font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1; }
    .coverage-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
    .coverage-level { font-size: 8.5px; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; }
    .coverage-cell.cov-low { color: #9bb0a5; }
    .coverage-cell.cov-mid { color: #ffd24d; border-color: rgba(255,210,77,0.30); }
    .coverage-cell.cov-high { color: #20d982; border-color: rgba(var(--accent-rgb),0.40); }
    /* Apply lives in the dialog head (top right, always visible - the side
       column scrolls and a bottom button forced a scroll just to apply). */
    .fe-head-apply { margin-left: auto; padding: 8px 22px; white-space: nowrap; }
    .field-editor-apply:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); transform: none; box-shadow: none; }
    .field-editor-apply:disabled:hover { filter: grayscale(0.5); transform: none; }
    /* Current-field badge in the dialog head */
    .fe-head-titles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .fe-current { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
    .fe-current-label { font-weight: 800; color: #eafff4; }
    .fe-current-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #04210f; background: var(--accent); padding: 2px 8px; border-radius: 999px; }
    /* Fielder roster */
    .field-editor-roster-wrap { display: flex; flex-direction: column; gap: 5px; }
    .fe-roster-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
    .fe-roster-head .muted { font-size: 9px; text-transform: none; letter-spacing: 0; }
    .field-editor-roster { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; padding-right: 4px; }
    .field-editor-roster button.fe-roster-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: #0e1b14 !important; color: #dcefe2 !important; border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; padding: 5px 8px; box-shadow: none; cursor: pointer; font-weight: 600; }
    .field-editor-roster button.fe-roster-row:hover { background: #142319 !important; border-color: rgba(var(--accent-rgb), 0.4); transform: none; filter: none; }
    .field-editor-roster button.fe-roster-row.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.14) !important; }
    .fe-roster-num { flex: 0 0 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #20342a; color: #9ff2c5; font-size: 10px; font-weight: 800; }
    .fe-roster-row.active .fe-roster-num { background: var(--accent); color: #04210f; }
    .fe-roster-num.fixed { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); font-size: 8.5px; }
    .fe-roster-name { flex: 1; font-size: 12px; }
    .fe-roster-zone { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.9; color: rgba(255,255,255,0.5); }
    .fe-roster-zone.zone-boundary { color: #ffb066; }
    .fe-roster-zone.zone-catcher { color: #ff9c8e; }
    .fe-roster-zone.zone-ring { color: #9fe9c4; }
    .fe-roster-fixed { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 11px; color: rgba(255,255,255,0.5); }
    /* Create-custom button + saved-field chips */
    .fe-new-custom { width: 100%; margin-bottom: 8px; background: rgba(var(--accent-rgb), 0.10) !important; color: #9ff2c5 !important; border: 1px dashed rgba(var(--accent-rgb), 0.5) !important; box-shadow: none; font-weight: 800; font-size: 12px; letter-spacing: 0.02em; }
    .fe-new-custom:hover { background: rgba(var(--accent-rgb), 0.16) !important; transform: none; filter: none; }
    .fe-presets-divider { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin: 8px 0 2px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
    .field-preset-actions { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
    .field-preset-act { font-size: 13px; line-height: 1; opacity: 0.6; padding: 3px 4px; border-radius: 5px; cursor: pointer; }
    .field-preset-act:hover { opacity: 1; background: rgba(255,255,255,0.12); }
    .field-preset-act.field-preset-del:hover { background: rgba(255,122,107,0.2); }
    /* Custom field builder panel */
    .field-editor-custom-panel { display: flex; flex-direction: column; gap: 9px; background: rgba(var(--accent-rgb), 0.05); border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 10px; padding: 12px; }
    .field-editor-custom-panel[hidden] { display: none; }
    #fieldEditorPresetsPanel[hidden] { display: none; }
    .fe-custom-head { font-size: 13px; font-weight: 800; color: #eafff4; }
    .fe-custom-blurb { font-size: 11px; line-height: 1.4; margin: 0; }
    .fe-custom-name-label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.65); }
    .fe-custom-name { font: inherit; font-size: 13px; font-weight: 600; color: #eafff4; background: #0c1812; border: 1px solid rgba(255,255,255,0.18); border-radius: 7px; padding: 8px 10px; }
    .fe-custom-name:focus { outline: none; border-color: var(--accent); }
    .fe-save-custom { width: 100%; }
    .fe-cancel-custom { width: 100%; background: transparent !important; color: #9fb8a9 !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: none; font-weight: 700; }
    .fe-cancel-custom:hover { color: #eafff4 !important; transform: none; filter: none; }
    /* In custom mode the map gets more room; Apply is replaced by Save. */
    .retro-overlay.custom-mode .field-editor-stage { flex: 1 1 480px; }
    .retro-overlay.custom-mode .field-editor-side { flex: 0 1 250px; }
    .retro-overlay.custom-mode .field-editor-apply { display: none; }
    .field-control-card { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
    .field-control-card:hover, .field-control-card:focus-visible { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.06); outline: none; }
    .field-control-card .rail-picker-zone { cursor: pointer; }
    .field-control-card .rail-picker-zone b { text-transform: capitalize; }
    .simple-bottom-bar { position:absolute; left:0; right:0; bottom:0; height:60px; background: #07100d; border-top: 1px solid rgba(var(--accent-rgb), 0.16); display:flex; align-items:center; gap:12px; padding:0 16px; }
    .simple-bottom-bar .status { flex: 1; color: #8aaf97; font-size: 12px; font-weight: 600; transition: color .2s ease; }
    /* Backend rejection flash: the bar pulses amber so an illegal field / wrong-role
       tactic reads as a rejection, then settles back to normal status colour. */
    .status.status-error { color: #ffd24d; font-weight: 800; animation: status-error-pulse 0.5s ease-in-out 0s 3; }
    @keyframes status-error-pulse { 0%,100% { color: #ffd24d; } 50% { color: #ff6a6a; } }
    .speed-control { display:flex; align-items:center; gap:8px; color:#8aaf97; font-size: 12px; font-weight:700; min-width: 270px; }
    .speed-control input { width: 150px; accent-color: var(--accent); }
    .pause-toggle { height: 30px; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: #a8c6b3; font-size: 11px; font-weight: 800; text-transform: none; letter-spacing: 0; white-space: nowrap; }
    .pause-toggle input { width: auto; accent-color: var(--accent); margin: 0; }
    .pause-options { position: relative; }
    .pause-options-toggle { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px !important; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.05) !important; color: #a8c6b3 !important; font-size: 11px !important; font-weight: 800 !important; text-transform: none; letter-spacing: 0; white-space: nowrap; box-shadow: none !important; }
    .pause-options-toggle b { color: #dfffea; font-weight: 800; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
    .pause-options-toggle:hover { border-color: rgba(var(--accent-rgb), 0.5) !important; }
    .pause-caret { font-size: 9px; opacity: .7; }
    .pause-options-menu { position: absolute; bottom: 40px; left: 0; min-width: 180px; display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: #0b1812; box-shadow: 0 16px 40px rgba(0,0,0,0.5); z-index: 30; }
    .pause-options-menu .pause-toggle { height: 24px; }
    .pause-options-menu[hidden] { display: none; }
    .play-toggle.playing { background: rgba(32,100,255,0.18)!important; border-color: rgba(80,140,255,0.55)!important; color: #80b8ff!important; }
    .match-retro-shell { padding: 0; max-width: none; height: calc(100vh - 120px); min-height: 420px; display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 0; background: #00390c; overflow: hidden; }
    #matchScreen header { background: #07110e; border-bottom: 1px solid rgba(var(--accent-rgb), 0.18); box-shadow: none; padding-top: 8px; padding-bottom: 8px; }
    #matchScreen header h1 { color: #f3fff8; text-align: center; font-size: clamp(15px, 1.8vw, 20px); letter-spacing: -0.01em; font-weight: 800; margin: 0; }
    #matchScreen header .hero { align-items: center; }
    /* match-meta-header is width:100%, so without these the nav gets squeezed to one button per row */
    #matchScreen header .hero-nav { flex-wrap: nowrap; flex-shrink: 0; }
    #matchScreen header .eyebrow, #matchScreen header .muted { color: #8aaf97; font-size: 11px; }
    .match-meta-header { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr); align-items: center; gap: 16px; width: 100%; }
    .match-meta-left, .match-meta-right { color: #8aaf97; font-size: 11px; line-height: 1.3; font-weight: 600; }
    /* Indent the clock so the fixed top-left full-screen toggle never crowds it. */
    #matchScreen .match-meta-left { padding-left: 40px; }
    .match-meta-left b, .match-meta-right b { display: block; color: #f3fff8; font-size: 13px; font-weight: 700; }
    .match-title-block { text-align: center; }
    .match-subtitle { color: #8aaf97; font-size: 11px; margin-top: 2px; }
    .simple-centre .retro-blue-btn, .retro-score-strip .retro-blue-btn { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: #b8d4c4; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; text-shadow: none; box-shadow: none; }
    .simple-bottom-bar .retro-blue-btn { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: #b8d4c4; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; text-shadow: none; box-shadow: none; }
    .retro-left-rail { background: linear-gradient(110deg, #255da7 0%, #265ca0 72%, #143e77 73%, #143e77 100%); border-right: 3px solid #092955; padding: 8px; color: white; height: 100%; overflow: auto; box-shadow: inset -18px 0 34px rgba(0,0,0,0.22); }
    .retro-manager-card { background: rgba(9,43,90,0.66); border: 1px solid rgba(144,191,255,0.22); margin-bottom: 7px; padding: 6px; }
    .retro-player-name { color: #ffff00; font-weight: 800; font-size: 13px; margin-bottom: 4px; }
    .retro-player-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; }
    .retro-avatar { width: 56px; height: 56px; background: linear-gradient(#d9d9d9, #7e8b94); clip-path: polygon(28% 8%, 72% 8%, 82% 32%, 74% 54%, 94% 88%, 8% 88%, 26% 54%, 18% 32%); }
    .retro-big-score { font-size: 28px; line-height: 1; text-align: right; }
    .retro-fitness { height: 5px; background: #08f06b; margin-top: 4px; }
    .retro-mini-control { display: grid; grid-template-columns: 28px 1fr 28px; gap: 4px; align-items: center; margin-top: 5px; font-size: 10px; }
    .retro-arrow, .retro-blue-btn { border: 1px solid #69a7ff; background: linear-gradient(#2f7bd1, #134f9b); color: white; border-radius: 4px; padding: 3px 5px; text-align: center; box-shadow: inset 0 1px rgba(255,255,255,0.25); }
    .retro-intent { background: #1d0098; color: white; text-align: center; padding: 3px 4px; }
    .retro-current-bowler { color: #ffff00; font-size: 11px; font-weight: 800; margin-top: 8px; }
    .retro-score-strip { background: #09160f; border-bottom: 1px solid rgba(var(--accent-rgb), 0.14); min-height: 36px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 0 8px; color: #8aaf97; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
    .retro-score-strip .live-score { color: var(--accent); font-weight: 800; }
    .score-strip-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
    .mini-score-strip { display: flex; align-items: center; gap: clamp(20px, 8vw, 90px); min-width: 0; }
    .mini-score-team { display: inline-flex; align-items: center; gap: 12px; min-width: 76px; color: #8aaf97; border: none !important; background: none !important; padding: 4px 6px !important; margin: -4px -6px; border-radius: 8px; box-shadow: none !important; cursor: pointer; font: inherit; text-transform: none; letter-spacing: normal; min-height: 0; height: auto; }
    .mini-score-team:hover { background: rgba(var(--accent-rgb), .12) !important; }
    .mini-score-team em { color: #dfffea; font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
    .mini-score-team b { color: var(--accent); font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
    .mini-score-lead { color: #dfffea; font-size: 12px; font-weight: 900; letter-spacing: .03em; white-space: nowrap; margin-right: 10px; }
    .pp-badge { margin-left: 5px; color: #c9962f; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
    .inn-ordinal { color: #8aaf97; opacity: .75; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-left: -7px; align-self: start; }
    .scorecard-lead-note { align-self: center; color: rgba(210,226,216,.78); font-size: 12px; font-weight: 700; margin-left: 4px; white-space: nowrap; }
    .field-stage { height: 100%; background: linear-gradient(rgba(0,72,18,0.78), rgba(0,40,9,0.90)), radial-gradient(circle at 52% 35%, rgba(40,160,58,0.45), transparent 42%), linear-gradient(90deg, rgba(0,0,0,0.35), transparent 28%, rgba(0,0,0,0.22)), #004b11; position: relative; overflow: hidden; padding: 10px 16px 62px; }
    .field-stage::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 70px), linear-gradient(transparent 72%, rgba(70,150,70,0.18)); opacity: 0.45; pointer-events: none; }
    .field-stage > * { position: relative; z-index: 1; }
    .retro-scoreboard { background: rgba(0,40,8,0.74); border: 1px solid rgba(35,145,49,0.55); box-shadow: 0 18px 50px rgba(0,0,0,0.38), inset 0 0 45px rgba(7,80,20,0.32); max-width: 920px; max-height: calc(100% - 118px); overflow: auto; margin: 8px auto 0; padding: 12px 14px; }
    .retro-bottom-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: linear-gradient(#e6ebe8, #8e9693); border-top: 1px solid white; display: flex; align-items: center; gap: 10px; padding: 8px 10px; z-index: 2; }
    .retro-bottom-bar .status { flex: 1; color: white; text-shadow: 0 1px 1px #333; font-size: 13px; }
    .bowl-button { margin-left: auto; min-width: 118px; height: 44px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb), 0.55) !important; background: rgba(var(--accent-rgb), 0.12) !important; color: var(--accent) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.06em; text-shadow: none; box-shadow: none; text-transform: uppercase; }    .retro-control-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
    .retro-control-panel button, .retro-control-panel select { height: 30px; }
    .retro-overlay { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,0.62); }
    .retro-overlay.open { display: flex; }
    .retro-dialog { width: min(920px, 96vw); max-height: 88vh; overflow: auto; background: #08130d; border: 1px solid #60756b; box-shadow: 0 30px 90px rgba(0,0,0,0.65); padding: 14px; color: var(--text); }
    #detailsOverlay .retro-dialog { width: min(1150px, 96vw); }
    .retro-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
    .retro-dialog h2 { margin: 0; color: #d4f2e2; }
    .modal-close-btn { width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.20); background: rgba(255,255,255,0.08); color: #f3fff8; font-size: 22px; line-height: 1; padding: 0; box-shadow: none; }
    .modal-close-btn:hover { border-color: rgba(190,203,196,0.45); background: rgba(255,255,255,0.13); }
    .scorecard-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .scorecard-tab { border: 1px solid rgba(141,165,155,.55); background: rgba(255,255,255,.06); color: var(--text); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 800; cursor: pointer; }
    .scorecard-tab.active { border-color: var(--accent); background: rgba(var(--accent-rgb), .16); color: #dfffea; }
    .detailed-scorecard-panel { display: grid; gap: 12px; }
    .scorecard-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
    .scorecard-kpi { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px 12px; color: rgba(210,226,216,.72); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
    .scorecard-kpi b { display:block; color:white; font-size:17px; margin-top:3px; text-transform: none; letter-spacing: -.02em; }
    .scorecard-table td:first-child { width: 60%; }
    .bat-cell { display: flex; flex-flow: row wrap; align-items: baseline; column-gap: 8px; row-gap: 1px; line-height: 1.3; }
    .bat-name { font-weight: 700; color: var(--text); }
    .how-out { font-size: 11.5px; color: var(--muted); }
    .how-out b { color: rgba(210,226,216,0.92); font-weight: 600; }
    .how-out.not-out { color: var(--accent); font-weight: 600; }
    .how-out.yet-to-bat { color: rgba(210,226,216,0.45); font-style: italic; }
    .bat-runs { font-weight: 700; color: var(--text); }
    .bat-runs.live { color: var(--accent); }
    .sc-situation { font-size: 12.5px; font-weight: 800; color: var(--accent); margin: 0 0 12px; letter-spacing: -.01em; }
    .sc-situation.chase { color: #e2b34a; }
    .sc-situation b { color: var(--text); font-weight: 900; }
    .sc-situation .sc-sit-sub { color: var(--muted); font-weight: 600; font-size: 11px; margin-left: 5px; }
    .card-foot { display: grid; gap: 6px; padding: 12px 10px 4px; }
    .card-foot-row.extras span { color: rgba(210,226,216,0.75); }
    .card-foot-row.extras .extras-breakdown { color: var(--muted); font-weight: 500; margin-left: 4px; }
    .card-foot-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--muted); }
    .card-foot-row b { color: var(--text); font-variant-numeric: tabular-nums; }
    .card-foot-row.total { font-size: 13px; padding-top: 8px; border-top: 1px solid var(--line-strong); }
    .card-foot-row.total span { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 11px; color: rgba(210,226,216,0.8); }
    .card-foot-row.total b { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; }
    .card-foot-row.total small { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
    .card-foot-note { font-size: 11px; color: var(--muted); line-height: 1.5; }
    .card-foot-note span { color: rgba(210,226,216,0.75); font-weight: 600; }
    #selectionOverlay { background: rgba(1, 4, 6, 0.78); backdrop-filter: blur(3px); }
    #selectionOverlay .retro-dialog { width: min(980px, 96vw); max-height: 86vh; background: #0b0f12; border: 1px solid rgba(219,226,232,0.16); border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,0.72); padding: 18px; color: #eef3f6; }
    #selectionOverlay .retro-dialog-head { margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(219,226,232,0.10); }
    #selectionOverlay .retro-dialog h2 { color: #f8fbfc; font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; }
    #selectionOverlay #selectionContext { color: #aab6bd; font-size: 13px; line-height: 1.45; margin: 0; }
    #selectionOverlay .modal-close-btn { width: 34px; height: 34px; background: #151b20; border-color: rgba(219,226,232,0.16); color: #eef3f6; font-size: 20px; }
    #selectionOverlay .modal-close-btn:hover { background: #202832; border-color: rgba(219,226,232,0.34); }
    .selection-modal-body { display: grid; gap: 8px; }
    #selectionOverlay .selection-option { width: 100%; min-height: 58px; display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(280px, 1fr) 88px; gap: 14px; align-items: center; justify-content: stretch; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(219,226,232,0.12); background: #11171c; color: #eef3f6; box-shadow: none; white-space: normal; }
    #selectionOverlay .selection-option:nth-child(even) { background: #0e1419; }
    #selectionOverlay .selection-option:hover { border-color: rgba(219,226,232,0.28); background: #182129; filter: none; transform: none; }
    #selectionOverlay .selection-option.disabled, #selectionOverlay .selection-option:disabled { opacity: .52; cursor: not-allowed; filter: grayscale(.25); }
    #selectionOverlay .selection-option:disabled:hover { border-color: rgba(219,226,232,0.12); background: #10161b; }
    .selection-copy { min-width: 0; }
    .selection-copy b { color: #ffffff; font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .selection-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .selection-name b { flex: 0 1 auto; min-width: 0; }
    .end-badge { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), 0.55); color: var(--accent); white-space: nowrap; line-height: 1.4; }
    .end-badge-other { border-color: rgba(255, 178, 64, 0.5); color: #ffb240; }
    .selection-copy small { color: #aeb8bf; display: block; margin-top: 3px; font-size: 12px; line-height: 1.25; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .selection-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .selection-stats span { color: #89959d; font-size: 9px; line-height: 1.15; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-left: 1px solid rgba(219,226,232,0.10); padding-left: 8px; }
    .selection-stats b { display: block; color: #f4f7f8; font-size: 13px; line-height: 1.2; margin-top: 2px; letter-spacing: 0; text-transform: none; }
    .selection-stats span.metric-hinted { cursor: help; border-bottom: 1px dotted rgba(219,226,232,0.30); }
    .selection-action { justify-self: end; color: #f7fbfc; background: rgba(219,226,232,0.08); border: 1px solid rgba(219,226,232,0.16); border-radius: 8px; padding: 7px 10px; font-weight: 900; font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
    .selection-option:hover .selection-action { background: rgba(219,226,232,0.14); border-color: rgba(219,226,232,0.24); }
    #batterTacticsOverlay { background: rgba(1, 8, 5, 0.66); backdrop-filter: blur(2px); }
    #batterTacticsOverlay .batter-tactics-dialog { width: min(330px, 92vw); padding: 12px; border-radius: 10px; border-color: rgba(var(--accent-rgb), 0.30); background: #08130d; box-shadow: 0 22px 70px rgba(0,0,0,0.72); }
    #batterTacticsOverlay .retro-dialog-head { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.12); }
    #batterTacticsOverlay h2 { color: #d4f2e2; font-size: 15px; }
    .batter-tactics-body { display: grid; gap: 7px; }
    .batter-tactics-body p { margin: 0 0 2px; color: #8fb49d; font-size: 11px; font-weight: 700; }
    .tactic-toggle { width: 100%; min-height: 38px; display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb), 0.14) !important; background: rgba(3,8,5,0.76) !important; color: #edf8f2 !important; box-shadow: none !important; font-size: 12px; font-weight: 800; text-align: left; }
    .tactic-toggle::after { content: "Off"; color: #6d987f; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
    .tactic-toggle.active { border-color: rgba(var(--accent-rgb), 0.54) !important; background: rgba(var(--accent-rgb), 0.12) !important; color: #eafff3 !important; }
    .tactic-toggle.active::after { content: "On"; color: var(--accent); }

    .selection-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 6px; margin: 10px 0; }
    .selection-list label { background: rgba(var(--surface-rgb), 0.80); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; color: var(--text); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; flex-direction: row; align-items: center; cursor: pointer; transition: border-color 0.1s; }
    .selection-list label:hover { border-color: var(--line-strong); }
    .selection-list input { width: auto; margin-right: 8px; accent-color: var(--accent); }
    .game-shell { position: relative; min-height: 100vh; overflow-x: hidden; }
    /* Parked top-LEFT, tucked just under the full-screen button (left/top:14px,
       26px tall) so it never overlaps the hero nav or any crucial top-right
       controls. Small and unobtrusive - it's a version stamp, not a control. */
    .build-badge { position: fixed; left: 16px; top: 48px; z-index: 60; padding: 3px 6px; border: 1px solid rgba(var(--accent-rgb), 0.34); border-radius: 6px; background: rgba(3,8,5,0.84); color: #9ee8bd; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0,0,0,0.28); pointer-events: none; }
    /* Floating theme toggle -- fixed so it rides above every screen without
       touching per-screen layouts. Themed via tokens, so it recolors itself.
       Hidden by default: the light theme is dev-only (?themedev=1) and
       theme.js reveals the button only when that flag is present. */
    .theme-toggle { position: fixed; right: 14px; top: 78px; z-index: 61; width: 34px; height: 34px; display: none; place-items: center; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.28); transition: border-color 0.15s, transform 0.1s, background 0.15s; }
    .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
    .theme-toggle:active { transform: translateY(0); }
    /* Floating full-screen toggle -- minimal, parked in the TOP-LEFT corner so
       it never crosses the build badge or the hero nav (both top-right). Styled
       to match the build badge (dark translucent, mint glyph). The !important
       beats the global accent-fill button rule in 02-base.css. Shown by
       default; fullscreen.js removes it on touch devices / where the API is
       missing. */
    .fullscreen-toggle { position: fixed; left: 16px; top: 14px; z-index: 61; width: 26px; height: 26px; display: none; place-items: center; padding: 0 !important; border-radius: 7px; border: 1px solid rgba(var(--accent-rgb), 0.34) !important; background: rgba(3,8,5,0.84) !important; color: #9ee8bd !important; font-size: 13px; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important; transition: border-color 0.15s, transform 0.1s; }
    .fullscreen-toggle:hover { border-color: var(--accent) !important; transform: translateY(-1px); }
    .fullscreen-toggle:active { transform: translateY(0); }
    .scanline, .flicker-layer { display: none; }
    .screen { display: none; animation: screenIn 0.22s ease both; }
    .screen.active { display: block; }
    .screen.active.start-screen { display: grid; animation-name: screenFadeIn; }
    @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    /* The start screen is exactly 100vh tall; a translateY entrance would flash a scrollbar. */
    @keyframes screenFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .start-screen { position: relative; height: 100vh; place-items: center; padding: clamp(12px, 2.5vh, 32px) clamp(16px, 4vw, 48px); overflow: hidden; }
    .start-backdrop { position: absolute; inset: 0; pointer-events: none; }
    .floodlight { position: absolute; top: -18%; width: 46%; height: 85%; opacity: 0.5; filter: blur(6px); }
    .floodlight-left { left: -6%; background: conic-gradient(from 152deg at 18% 0%, transparent 0deg, rgba(var(--accent-rgb), 0.10) 9deg, rgba(220,255,236,0.07) 17deg, rgba(var(--accent-rgb), 0.05) 26deg, transparent 36deg); }
    .floodlight-right { right: -6%; background: conic-gradient(from 172deg at 82% 0%, transparent 0deg, rgba(var(--accent-rgb), 0.05) 10deg, rgba(220,255,236,0.07) 19deg, rgba(var(--accent-rgb), 0.10) 27deg, transparent 36deg); }
    .pitch-strip { position: absolute; left: 50%; bottom: -16vh; transform: translateX(-50%) perspective(560px) rotateX(64deg); width: min(420px, 60vw); height: 64vh; border-radius: 26px; background: linear-gradient(180deg, rgba(201,176,120,0.05), rgba(201,176,120,0.13)); border: 1px solid rgba(201,176,120,0.14); box-shadow: 0 0 90px rgba(var(--accent-rgb), 0.07); }
    .pitch-strip::before, .pitch-strip::after { content: ""; position: absolute; left: 12%; right: 12%; height: 2px; background: rgba(226,238,231,0.16); }
    .pitch-strip::before { top: 11%; } .pitch-strip::after { bottom: 11%; }
    .start-card { position: relative; width: min(1060px, 100%); max-height: 100%; border: 1px solid rgba(var(--accent-rgb), 0.26); border-radius: var(--r-xl); padding: clamp(18px, 3.6vh, 44px) clamp(20px, 4vw, 52px); background: linear-gradient(140deg, rgba(var(--surface-2-rgb), 0.97), rgba(4,10,8,0.96)); box-shadow: 0 24px 80px rgba(0,0,0,0.50), inset 0 0 60px rgba(var(--accent-rgb), 0.04); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "main art" "features features"; gap: clamp(12px, 2.4vh, 30px) clamp(18px, 3vw, 36px); align-items: center; }
    .start-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: linear-gradient(90deg, transparent, var(--accent) 30%, #7dffc1 50%, var(--accent) 70%, transparent); opacity: 0.65; }
    .start-main { grid-area: main; }
    .start-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: dotPulse 2.2s ease-in-out infinite; }
    @keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
    .brand-title-lockup { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); margin-bottom: clamp(8px, 1.6vh, 16px); }
    .brand-mark { flex: 0 0 auto; width: clamp(62px, 8vw, 94px); aspect-ratio: 1; display: block; border-radius: 18px; border: 1px solid rgba(234,210,168,0.28); background: #f1e7d5; box-shadow: 0 14px 28px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.30); object-fit: cover; }
    .title-xl { font-size: clamp(32px, min(5.5vw, 8vh), 70px); font-weight: 900; line-height: 0.92; letter-spacing: -0.06em; margin-bottom: 0; }
    .title-accent { background: linear-gradient(95deg, var(--accent) 10%, #8dffcb 50%, var(--accent) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .start-tagline { color: #a9c7b6; font-size: clamp(12.5px, 1.5vw, 15px); line-height: 1.55; max-width: 56ch; margin-bottom: clamp(12px, 2.2vh, 22px); }
    .start-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .start-cta { padding: 14px 30px; font-size: 15px; border-radius: var(--r-lg); gap: 10px; box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.30), inset 0 1px 0 rgba(255,255,255,0.25) !important; }
    .start-cta .cta-arrow { transition: transform 0.15s; }
    .start-cta:hover .cta-arrow { transform: translateX(4px); }
    .format-pills { display: flex; gap: 8px; }
    .format-pill { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--accent-dim); color: #9ee8bd; font-size: 11px; font-weight: 800; letter-spacing: 0.10em; }
    .start-subline { margin: clamp(8px, 1.6vh, 14px) 0 0; color: var(--muted); font-size: 12px; letter-spacing: 0.02em; }
    .start-art { grid-area: art; justify-self: center; width: min(300px, 100%, 36vh); }
    .start-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 32px rgba(0,0,0,0.45)); }
    .start-ball { animation: ballFloat 4.5s ease-in-out infinite; transform-origin: 92px 92px; }
    @keyframes ballFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(7deg); } }
    .start-features { grid-area: features; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(8px, 1.4vh, 12px); padding-top: clamp(10px, 2vh, 22px); border-top: 1px solid var(--line); }
    .start-feature { display: flex; gap: 12px; align-items: flex-start; padding: clamp(8px, 1.6vh, 13px) 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--surface-rgb), 0.65); transition: border-color 0.15s, transform 0.15s; }
    .start-feature:hover { border-color: var(--line-strong); transform: translateY(-2px); }
    .start-feature .feature-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); background: var(--accent-dim); border: 1px solid var(--line-strong); color: var(--accent); font-size: 16px; }
    .start-feature b { display: block; font-size: 13px; margin-bottom: 3px; letter-spacing: -0.01em; }
    .start-feature span:not(.feature-icon) { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
    @media (max-width: 820px) { .start-card { grid-template-columns: 1fr; grid-template-areas: "main" "features"; } .start-art { display: none; } .start-screen { height: auto; min-height: 100vh; } }
    @media (max-width: 520px) { .brand-title-lockup { align-items: flex-start; } .brand-mark { width: 54px; border-radius: 14px; } }
    @media (max-height: 720px) and (min-width: 821px) {
      .start-feature span:not(.feature-icon) { display: none; }
      .start-feature { align-items: center; }
      .start-feature .feature-icon { width: 28px; height: 28px; font-size: 13px; }
      .start-feature b { margin-bottom: 0; }
      .start-eyebrow { margin-bottom: 8px; }
      .start-cta { padding: 11px 24px; font-size: 14px; }
    }

    /* ---- Super over (tie-breaker) ------------------------------------------ */
    .super-over-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: var(--r-md); background: var(--accent-dim); }
    .so-pill { font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
    .so-scores { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
    .so-line.live { color: var(--text); }
    .so-line.done { color: var(--muted); }
    .so-line b { color: var(--text); }
    .so-vs { color: var(--muted); font-size: 11px; }
    .inn-ordinal.so-ordinal { color: var(--accent); font-weight: 900; }
    .inn-dec { color: #f4c542; font-size: 9px; font-weight: 900; margin-left: 1px; vertical-align: top; cursor: help; }
    .inn-dec-big { color: #f4c542; font-size: 0.6em; font-weight: 900; vertical-align: super; margin-left: 2px; }
    .mini-score-team.is-super em { color: var(--accent); }
    /* Super-over batter picks: order badge + chosen highlight reuse the selection list */
    .selection-option.chosen { border-color: var(--accent); background: var(--accent-dim); }
    .so-order { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--accent); color: #021a0e; font-size: 11px; font-weight: 900; }
    .so-confirm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }