/* Palette. The three surface tokens are translucent on purpose — see the glass
   notes in /site.css. --panel-2 is every inlay tile (gauge, seats, mark pills,
   recorder buttons), --line every hairline, --bg every recessed input well;
   retheming them here is what turns the whole tool to glass without touching
   the per-component geometry below. The body paints the real canvas colour
   itself, so --bg no longer has to be opaque. */
:root {
  --felt: #0b6b3a;
  --felt-dark: #084a28;
  --bg: var(--g-well);
  --panel: rgba(255,255,255,.04);
  --panel-2: var(--g-in-fill);
  --ink: #e8edf2;
  --muted: #93a1b0;
  --line: var(--g-in-line);
  --gold: #f0c419;
  --green: #36d07a;
  --red: #ff5d5d;
  --yellow: #ffd24d;
  --accent: #4aa8ff;
  --shadow: var(--g-drop);
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  /* the green "closed / hit" fills, translucent so they sit in the glass */
  --green-fill: rgba(54,208,122,.16);
  --green-line: rgba(54,208,122,.45);
  --red-fill: rgba(255,93,93,.14);
  --red-line: rgba(255,93,93,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
button, .mark-cell, .segmented, input[type="range"] { touch-action: manipulation; }
button, .mark-cell { -webkit-tap-highlight-color: transparent; }
.rec-buttons button:active, .rec-target button:active, .mark-cell:active .mark-pill,
.stepper button:active, .ghost:active, .chips .chip:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  .rec-buttons button:active, .rec-target button:active, .mark-cell:active .mark-pill,
  .stepper button:active, .ghost:active, .chips .chip:active { transform: none; }
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--g-bg);   /* the colour fields behind the glass are site.css's body::before */
  color: var(--ink);
  line-height: 1.45;
  padding-bottom: 40px;
}
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
button { font: inherit; cursor: pointer; }
code { font-family: var(--mono); font-size: .9em; }
input, select { font: inherit; }

/* ---------- top bar ---------- */
/* the felt header as a tinted pane: green in the fill, the backdrop showing
   through, a gold hairline where the 3px slab used to be */
.topbar {
  text-align: center;
  padding: 22px 16px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(11,107,58,.62), rgba(8,74,40,.38));
  border-bottom: 1px solid rgba(240,196,25,.45);
  box-shadow: var(--g-hi), 0 1px 0 rgba(240,196,25,.25), var(--shadow);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  position: relative;
}
.brand { display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.brand h1 { font-size: 1.6rem; letter-spacing: .3px; }
.brand h1 .muted { font-weight: 400; }
.brand .dart { font-size: 1.3rem; }
.tagline { margin: 6px 0 0; color: #d8efe0; font-size: .92rem; }

/* ---------- tabs / layout ---------- */
/* .mode-tabs lives in /site.css — it is shared with the tracker and the stud app */
.hidden { display: none !important; }

main#lab-main, .match-wrap, .cal-wrap {
  max-width: 1180px; margin: 18px auto; padding: 0 16px;
}
main#lab-main { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
/* scoreboard leads (it's what you touch every turn); the advisor follows */
.match-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; }
.cal-wrap { display: flex; flex-direction: column; gap: 16px; }

/* glass — the material is in /site.css */
.panel {
  background: var(--g-sheen), var(--g-base);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-lg);
  padding: 16px 18px;
  box-shadow: var(--g-hi), var(--g-lo), var(--shadow);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
.panel > h2 { font-size: 1.05rem; color: var(--gold); }

/* clear-glass buttons: a faint fill and the same top highlight as the tiles */
.ghost { background: var(--g-in-fill); border: 1px solid var(--g-line); color: var(--ink); border-radius: 8px; padding: 6px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
a.ghost { text-decoration: none; display: inline-block; }
.cal-jump { margin-left: 8px; }
.ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--g-in-fill-hover); }
.ghost:disabled { opacity: .45; cursor: default; }
.ghost:disabled:hover { border-color: var(--g-line); color: var(--ink); background: var(--g-in-fill); }
.small-btn { font-size: .82rem; padding: 4px 10px; }
button.primary {
  background: linear-gradient(180deg, #7cc0ff, var(--accent)); color: #04121f;
  border: 1px solid rgba(190,224,255,.6); border-radius: 8px; padding: 8px 16px; font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(74,168,255,.25);
}
button.primary:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* segmented controls: a recessed track, the active option a lit pill */
.segmented { display: inline-flex; border: 1px solid var(--g-in-line); border-radius: 8px; overflow: hidden; flex-wrap: wrap; background: var(--g-well); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.segmented button { background: transparent; color: var(--muted); border: none; padding: 5px 12px; }
.segmented button:hover:not(.active) { background: rgba(255,255,255,.06); color: var(--ink); }
.segmented button.active { background: linear-gradient(180deg, #7cc0ff, var(--accent)); color: #04121f; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }

/* ---------- lab controls ---------- */
.lab-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctl-lbl { font-size: .78rem; color: var(--muted); min-width: 64px; }

/* ---------- the board ---------- */
.board-stack { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin: 0 auto; touch-action: manipulation; }
.board-stack canvas, .board-stack svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.board-stack canvas { border-radius: 50%; background: #0a0d12; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.5); }
.board-stack svg { cursor: crosshair; }
.board-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.board-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.pin-demo { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.pin-demo.best { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.pin-demo.tap { border: 2px dashed #fff; }
.heat-scale i { width: 64px; height: 9px; border-radius: 4px; display: inline-block;
  background: linear-gradient(90deg,#0b0e13,#123a5c,#147a6c,#36d07a,#f0c419); }

.sigma-row { margin-top: 14px; }
.sigma-row label { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.sigma-row label b { color: var(--ink); font-family: var(--mono); font-weight: 650; }
.sigma-row input[type="range"] { width: 100%; accent-color: var(--gold); }
.sigma-ticks { display: flex; justify-content: space-between; font-size: .68rem; color: #6f7d8c; margin-top: 2px; }
.sigma-row .small-btn { margin-top: 8px; }

/* ---------- readouts ---------- */
.verdict { font-size: 1.02rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.verdict .big { color: var(--gold); font-weight: 750; }
.verdict .sub { color: var(--muted); font-size: .85rem; margin-top: 3px; }
.big-verdict { flex: 1; min-width: 220px; min-height: 2.6em; }

.aims-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 14px; }
.aims-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.aims-table .a-name { color: var(--muted); }
.aims-table .a-ev { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.aims-table .a-delta { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aims-table .a-bar { width: 38%; }
.bar { height: 14px; border-radius: 4px; background: var(--panel-2); position: relative; overflow: hidden; }
.bar > span { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg,#1d7a4a,var(--green)); border-radius: 4px; }
.aims-table tr.best td { background: rgba(240,196,25,.07); }
.aims-table tr.best .a-name { color: var(--gold); }
.aims-table tr.tap-row td { background: rgba(255,255,255,.04); }
.ev-pos { color: var(--green); } .ev-neg { color: var(--red); } .ev-zero { color: var(--yellow); }

.dist-block { margin-top: 4px; }
.dist-head { font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.dist-head span { color: var(--ink); }
.prob-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); font-size: .72rem; font-weight: 700; }
.prob-bar > span { display: flex; align-items: center; justify-content: center; color: #06140d; white-space: nowrap; min-width: 0; overflow: hidden; }
.prob-legend { display: flex; gap: 12px; font-size: .74rem; color: var(--muted); margin-top: 5px; flex-wrap: wrap; }
.prob-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 4px; vertical-align: -1px; }
.dist-stats { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.dist-stats .chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .82rem; }
.dist-stats .chip b { font-family: var(--mono); font-weight: 650; }

/* ---------- match: gauge & candidates ---------- */
.adv-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: -2px 0 12px; }
.adv-controls .chk { display: inline-flex; gap: 7px; align-items: center; font-size: .82rem; color: var(--muted); cursor: pointer; user-select: none; }
.adv-controls .chk input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }

/* idle = the advisor has nothing to say yet: collapse to the controls + one
   line of explanation. Expands only on an explicit ask, never mid-entry. */
.adv-idle { margin: 0; line-height: 1.55; }
.advice-panel:not(.idle) .adv-idle { display: none; }
.advice-panel.idle .gauge-row,
.advice-panel.idle .race-line,
.advice-panel.idle .cand-table,
.advice-panel.idle .tie-note { display: none; }

/* stale / in-flight reads dim in place — opacity only, so the geometry (and the
   record buttons under your finger) never move */
.advice-panel .gauge, .advice-panel .big-verdict, .advice-panel #mini-board,
.advice-panel .race-line, .advice-panel .cand-table, .advice-panel .tie-note { transition: opacity .25s; }
.advice-panel.stale .gauge, .advice-panel.stale .big-verdict, .advice-panel.stale #mini-board,
.advice-panel.stale .race-line, .advice-panel.stale .cand-table, .advice-panel.stale .tie-note { opacity: .45; }
.advice-panel.working .cand-table, .advice-panel.working .race-line, .advice-panel.working .tie-note { opacity: .6; }

.gauge-row { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
#mini-board { width: 118px; min-width: 118px; height: 118px; background: #0a0d12; border-radius: 50%; border: 1px solid var(--line); }
.gauge { width: 118px; min-width: 118px; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; }
.gauge .g-num { font-size: 1.7rem; font-weight: 750; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--gold); }
.gauge .g-num.working { color: var(--muted); animation: pulse 1.1s ease-in-out infinite; }
/* always exactly two short lines (label + detail), nowrap — the gauge must
   never change height between idle / rolling / priced / stale states */
.gauge .g-lbl { font-size: .68rem; color: var(--muted); letter-spacing: .04em; line-height: 1.5; min-height: 3em; white-space: nowrap; overflow: hidden; }
.gauge .g-ci { font-size: .68rem; color: #6f7d8c; font-family: var(--mono); white-space: nowrap; overflow: hidden; }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .gauge .g-num.working { animation: none; } }

.cand-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin-bottom: 12px; }
.cand-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cand-table tr { cursor: pointer; }
.cand-table tr:hover td { background: rgba(74,168,255,.06); }
.cand-table tr.best td { background: rgba(240,196,25,.08); }
.cand-table tr.picked td { background: rgba(74,168,255,.12); }
.cand-table .c-play b { color: var(--ink); }
.cand-table .c-play .style { color: var(--muted); font-size: .78rem; }
.cand-table .c-bar { width: 30%; }
.cand-table .c-p { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.cand-table .c-d { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

.tie-note { font-size: .74rem; color: #6f7d8c; line-height: 1.5; margin: -4px 0 12px; }
.tie-note:empty { display: none; }
.race-line { font-size: .82rem; color: var(--muted); line-height: 1.5; margin: -2px 0 12px; }
.race-line b { color: var(--gold); font-family: var(--mono); font-weight: 650; }
.race-line .dim { color: #6f7d8c; font-size: .72rem; }
.race-line:empty { display: none; }

/* ---------- match: recorder (lives in the score panel, right under the grid
   it feeds — on a phone the two share the first screen) ---------- */
.recorder { border-bottom: 1px dashed var(--line); padding: 8px 0 14px; margin-bottom: 12px; }
.recorder:empty { display: none; }
.rec-target { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.rec-target button { min-width: 44px; min-height: 38px; border-radius: 9px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.rec-target button:hover { border-color: var(--accent); }
.rec-target button.active { background: var(--accent); border-color: var(--accent); color: #04121f; }
.rec-alt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* their darts read red, not green — same geometry as your recorder */
.recorder.rec-opp .rec-buttons button.big-hit { background: var(--red-fill); border-color: var(--red-line); color: #ff8b8b; }
.recorder.rec-opp .rec-buttons button.hit { border-color: var(--red-line); color: #ff8b8b; }
.recorder.rec-opp .rec-buttons button.hit:hover, .recorder.rec-opp .rec-buttons button.big-hit:hover { border-color: var(--red); }
.rec-head { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.rec-head b { color: var(--ink); }
.rec-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-buttons button {
  min-width: 64px; min-height: 46px; border-radius: 10px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.rec-buttons button:hover { border-color: var(--gold); background: var(--g-in-fill-hover); }
.rec-buttons button.hit { border-color: var(--green-line); color: var(--green); }
.rec-buttons button.hit:hover { border-color: var(--green); }
.rec-buttons button.big-hit { background: var(--green-fill); border-color: var(--green-line); color: var(--green); }
.rec-buttons button.miss { color: var(--muted); }
.rec-note { font-size: .78rem; color: #6f7d8c; margin-top: 8px; }

/* ---------- match: seats ---------- */
/* One tile per player: name, points, closes, live MPR. Fixed height so an MPR
   appearing after the first dart can never shift the grid below it. */
.seat-row { display: flex; gap: 6px; margin-bottom: 8px; }
.seat {
  flex: 1 1 0; min-width: 0; min-height: 58px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 9px; color: var(--ink); text-align: left;
}
.seat > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .s-name { font-size: .82rem; font-weight: 700; }
.seat .s-pts { font-family: var(--mono); font-size: 1.2rem; font-weight: 750; line-height: 1.15; color: var(--gold); font-variant-numeric: tabular-nums; }
.seat .s-meta { font-size: .62rem; color: var(--muted); }
.seat:hover { border-color: var(--accent); }
.seat.mine .s-name { color: var(--accent); }
.seat.up { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.seat.won { border-color: var(--green-line); background: var(--green-fill); }
.seat.won .s-pts { color: var(--green); }
.seat:active { transform: scale(.97); }

.seat-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
#btn-players.active { border-color: var(--gold); color: var(--gold); }

.roster-edit { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.roster-edit > .ctl { margin-bottom: 10px; }
.roster-edit .chk { display: inline-flex; gap: 7px; align-items: center; font-size: .8rem; color: var(--muted); cursor: pointer; user-select: none; }
.roster-edit .chk input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
.roster-edit > p { margin: 8px 0 0; line-height: 1.5; }
.seat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 10px; }
.seat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.seat-card.mine { border-color: rgba(74,168,255,.45); }
.seat-card .s-num { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #6f7d8c; }
.seat-card input[type="text"] { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; width: 100%; }
.seat-card select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; max-width: 100%; }
.seat-card .s-sig { font-size: .7rem; color: var(--muted); font-family: var(--mono); }

/* ---------- match: which game ---------- */
.game-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.game-row .chk { display: inline-flex; gap: 7px; align-items: center; font-size: .8rem; color: var(--muted); cursor: pointer; user-select: none; }
.game-row .chk input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
.game-seg button { padding: 6px 13px; font-weight: 650; }

/* ---------- match: the x01 board ----------
   Two rows, both a fixed height whatever they hold: the visit in flight, and
   the way out. A checkout appearing after the second dart must not move the
   buttons the third dart is about to be tapped on. */
.x01-board { margin: 4px 0 14px; }
.x01-visit {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px; min-height: 52px; overflow: hidden;
}
.xv-who { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: #6f7d8c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8.5em; }
.xv-darts { display: flex; gap: 5px; flex: 1 1 auto; min-width: 0; }
.xd { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; padding: 2px 4px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); }
.xd b { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.xd i { font-style: normal; font-size: .6rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.xd.bust { border-color: var(--red-line); background: var(--red-fill); }
.xd.bust b, .xd.bust i { color: #ff8b8b; }
.xv-tot, .xv-left { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.xv-tot b { font-family: var(--mono); font-size: 1rem; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.xv-tot.bust b { color: #ff8b8b; }
.xv-left b { font-family: var(--mono); font-size: 1.35rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.xv-tot i, .xv-left i { font-style: normal; font-size: .58rem; color: #6f7d8c; text-transform: uppercase; letter-spacing: .04em; }
.x01-out { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 2.1em; padding: 5px 2px 0; font-size: .82rem; color: var(--muted); }
.x01-out b { color: var(--ink); font-family: var(--mono); }
.x01-out .xo-on { color: var(--gold); font-size: 1rem; }
.xo-warn { color: #ff8b8b; border: 1px solid var(--red-line); background: var(--red-fill);
  border-radius: 999px; padding: 1px 8px; font-size: .72rem; white-space: nowrap; }
/* Cricket has seven targets and shares them across one flex line. x01 has all
   twenty-one, so it is a grid instead: 7 × 3 lands exactly, the rows never
   reflow as the leg goes on, and every chip stays where your thumb left it.
   (This must out-specify the phone rule that makes .rec-target a nowrap flex
   row — 21 chips on one line is 900px wide.) */
.rec-target.x01 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rec-target.x01 button { min-width: 0; min-height: 34px; font-size: .84rem; padding: 0 2px; }

@media (max-width: 420px) {
  .xv-who { display: none; }
  .xd { min-width: 40px; }
  .xv-left b { font-size: 1.2rem; }
}

/* ---------- match: scoreboard ---------- */
.pips { display: inline-flex; gap: 5px; }
.pips i { width: 10px; height: 22px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); }
.pips i.on { background: var(--gold); border-color: var(--gold); }
.rec-head .pips.inline { gap: 3px; margin: 0 6px; vertical-align: -3px; }
.rec-head .pips.inline i { width: 7px; height: 15px; }

/* FIXED layout on purpose: .mark-cell is display:flex, so it is NOT a table
   cell — the browser wraps each one in an anonymous cell — and a percentage
   width on it therefore has nothing to do with the column the header sits over.
   Fixed layout takes the columns from the header row (the only real cells in
   it), every body row fills them, and a long name can't widen a column mid-leg.
   Two players keep the classic you | number | them board; three or four can't
   be centered on anything, so the numbers move to a left rail. */
.score-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.score-grid td { border-bottom: 1px solid var(--line); padding: 3px 4px; text-align: center; }
.score-grid .seg-lbl { font-weight: 750; font-size: 1.05rem; width: 62px; color: var(--ink); }
/* the left rail has to hold "BULL" without spilling into the first column */
.score-grid.wide .seg-lbl { width: 54px; font-size: .95rem; }
.sg-head th { padding: 0 4px 5px; font-size: .72rem; font-weight: 650; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-head th.sg-name.up { color: var(--gold); }
.score-grid .seg-lbl small { display: block; font-size: .62rem; color: #6f7d8c; font-weight: 400; }
/* The cell stays a real table cell — it is what the fixed layout puts in a
   column, and consecutive cells that AREN'T (display:flex used to be) collapse
   into one shared anonymous column, which is exactly how three and four seats
   ended up stacked on top of each other. All the chrome lives on the pill
   inside it, and the gutter between two pills is the cell's own padding. */
.mark-cell { cursor: pointer; }
.mark-pill {
  min-height: 40px; height: 40px; border-radius: 8px; user-select: none;
  font-size: 1.15rem; font-weight: 700; font-family: var(--mono); position: relative;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
td.mark-cell:hover .mark-pill { border-color: var(--accent); }
.mark-cell.m1 .mark-pill, .mark-cell.m2 .mark-pill { color: var(--yellow); }
.mark-cell.m3 .mark-pill { color: var(--green); border-color: var(--green-line); background: var(--green-fill); }
.mark-cell.dead .mark-pill { opacity: .55; }
.mark-cell.scoring .mark-pill { box-shadow: inset 0 0 0 1px var(--gold); }
/* closed & scoring: tapping adds points — the little + says so */
.mark-cell.scoring .mark-pill::after { content: '+'; position: absolute; top: 0; right: 6px; font-size: .78rem; color: var(--gold); }

/* point pad: tap a closed scoring number → bank S/D/T points in one more tap */
/* dialogs are the thickest glass: frosted over a dimmed page, opaque enough to
   read the numbers on first glance */
dialog#point-pad, dialog#picker {
  background: var(--g-sheen), rgba(15,19,27,.78); color: var(--ink);
  border: 1px solid var(--g-line-strong); border-radius: 18px;
  box-shadow: var(--g-hi), var(--g-lo), 0 30px 80px rgba(0,0,0,.6);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
dialog#point-pad { padding: 16px; max-width: min(92vw, 380px); }
dialog#point-pad::backdrop { background: rgba(5,8,12,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog#point-pad h3 { font-size: .95rem; color: var(--gold); margin: 0 0 12px; }
#point-pad .pp-btns { display: flex; gap: 8px; }
#point-pad .pp-btns button {
  flex: 1; min-height: 56px; border-radius: 10px; font-weight: 750; font-size: 1.05rem;
  background: var(--green-fill); border: 1px solid var(--green-line); color: var(--green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
#point-pad .pp-btns button small { font-size: .72rem; color: #9fd4b4; font-weight: 600; }
#point-pad .pp-btns button:hover { border-color: var(--green); }
#point-pad .dlg-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }

.pts-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pts-box { flex: 1; min-width: 138px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: .85rem; color: var(--muted); }
.pts-box .pb-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.stepper button { width: 34px; height: 34px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 1.1rem; }
.stepper input { width: 74px; text-align: center; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; font-family: var(--mono); font-size: 1rem; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.match-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* your line for the leg — one fixed-height row, so a landing number never
   pushes the buttons above it */
.leg-line { margin-top: 10px; font-size: .82rem; color: var(--muted); min-height: 1.6em; line-height: 1.6; }
.leg-line b { color: var(--gold); font-family: var(--mono); font-weight: 650; }
.leg-line .ll-h { color: var(--ink); font-weight: 650; margin-right: 6px; }
.turn-log { margin-top: 6px; max-height: 96px; overflow-y: auto; line-height: 1.5; }

/* ---------- region picker dialog ---------- */
dialog#picker { padding: 14px; max-width: min(92vw, 430px); }
dialog#picker::backdrop { background: rgba(5,8,12,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog#picker h3 { font-size: .95rem; color: var(--gold); }
dialog#picker svg { width: 100%; height: auto; cursor: crosshair; }
dialog#picker .dlg-actions { display: flex; justify-content: space-between; margin-top: 8px; }

/* ---------- calibrate ---------- */
.profile-card { display: flex; gap: 16px; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.profile-card .pc-main { font-size: 1.05rem; }
.profile-card .pc-main b { color: var(--gold); font-family: var(--mono); }
.profile-card .pc-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-card .chip, .chips .chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .82rem; color: var(--muted); }
.profile-card .chip b { color: var(--ink); font-family: var(--mono); font-weight: 650; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chips .chip { cursor: pointer; }
.chips .chip:hover { border-color: var(--gold); color: var(--gold); }
.chips .chip.active { background: linear-gradient(180deg, #ffd955, var(--gold)); border-color: rgba(255,230,140,.7); color: #241c02; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
h3.sub-h { font-size: .92rem; color: var(--gold); margin: 20px 0 .5em; }
.stats-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stats-card .pc-main { font-size: 1.02rem; line-height: 1.5; }
.stats-card .pc-main b { color: var(--gold); font-family: var(--mono); }
.stats-card .pc-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.stats-card .chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .8rem; color: var(--muted); }
.stats-card .chip b { color: var(--ink); font-family: var(--mono); font-weight: 650; }
.sc-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.sc-note { line-height: 1.55; margin: 10px 0 0; }

.mpr-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.mpr-row label { font-size: .85rem; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.mpr-row input { width: 74px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; font-family: var(--mono); font-size: 16px; }

.tally-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.tally-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tally-box .t-lbl { font-size: .82rem; color: var(--muted); min-height: 34px; }
.tally-box .t-lbl b { color: var(--ink); }
.tally-box .stepper button { width: 44px; height: 44px; font-size: 1.3rem; }
.tally-box .stepper input { width: 64px; font-size: 1.15rem; }
.fit-out { margin-top: 6px; font-size: .92rem; }
.fit-out .fit-sigma { font-size: 1.25rem; font-family: var(--mono); color: var(--gold); font-weight: 750; }
.fit-out .lr { margin-top: 4px; }
.cal-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; }

.tbl-scroll { overflow-x: auto; }
.dict-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 560px; }
.dict-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6f7d8c; font-weight: 600; text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.dict-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dict-table th:nth-child(2), .dict-table td:nth-child(2) { text-align: left; font-family: inherit; }
.dict-table tr.you td { background: rgba(240,196,25,.08); }

/* ---------- footer ---------- */
footer { max-width: 1180px; margin: 22px auto 0; padding: 0 16px; }
footer details {
  background: var(--g-sheen), var(--g-base); border: 1px solid var(--g-line); border-radius: 12px; padding: 12px 16px;
  box-shadow: var(--g-hi), var(--g-lo), var(--shadow);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
footer summary { cursor: pointer; color: var(--muted); font-weight: 650; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; font-size: .9rem; }
.foot-grid h4 { color: var(--gold); font-size: .88rem; }

/* ---------- syncing training data off the device ---------- */
.sync-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sync-block .sync-head { font-size: .9rem; font-weight: 650; }
.sync-block .sync-head b { color: var(--gold); }
.sync-block > p { margin: 6px 0 10px; line-height: 1.5; }
.sync-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sync-row input[type="text"] {
  flex: 1 1 190px; min-width: 0; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
.sync-block.on .sync-head { color: var(--green); }
.sync-block.on .sync-head b { color: var(--green); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* stacks in DOM order: scoreboard first, advisor under it. minmax(0,·) so
     no child's min-content can push the track past the viewport */
  main#lab-main, .match-wrap { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  .rec-buttons button { flex: 1 1 30%; min-height: 52px; font-size: 1.05rem; }
}

/* phone-sized: thumb-first layout */
@media (max-width: 640px) {
  /* chrome slims so the score grid + recorder own the first screen */
  .topbar { padding: 10px 12px 8px; }
  .topbar .tagline { display: none; }
  .brand h1 { font-size: 1.15rem; }
  .brand .dart { font-size: .95rem; }
  main#lab-main, .match-wrap, .cal-wrap { margin: 12px auto; padding: 0 10px; }
  .explain { display: none; }              /* how-to boilerplate — desktop only */
  /* iOS zooms any focused control under 16px */
  select, input[type="number"], input[type="text"] { font-size: 16px; }

  .advice-panel .cand-table { margin-bottom: 4px; }
  /* gauge + mini-board share the first row; verdict gets the full width below */
  .gauge-row { align-items: center; }
  .gauge-row .gauge { order: 1; }
  #mini-board { order: 2; width: 96px; min-width: 96px; height: 96px; }
  .big-verdict { order: 3; flex-basis: 100%; min-width: 0; }
  /* declutter: numbers carry the info, drop the bars */
  .cand-table .c-bar, .aims-table .a-bar { display: none; }
  .cand-table td, .aims-table td { padding: 8px 6px; }
  /* reclaim vertical space so the record buttons sit above the fold:
     the pips carry the dart count and the hints are boilerplate */
  #match-verdict .sub, .recorder .rec-note { display: none; }
  .gauge .g-num { font-size: 1.45rem; }
  .gauge { padding: 7px 6px; width: 104px; min-width: 104px; }
  /* fat-finger targets — sized so grid + full recorder + dock share one screen:
     44+54+40 chrome · ~292 grid · ~185 recorder · 69 dock ≈ 770 of 812 */
  .mark-pill { height: 41px; min-height: 41px; font-size: 1.2rem; }
  .score-grid .seg-lbl { font-size: .95rem; }
  .score-grid .seg-lbl small { display: none; }
  .stepper button { width: 44px; height: 44px; }
  .segmented button { padding: 7px 10px; font-size: .85rem; }
  .panel { padding: 12px; }
  .panel > h2 { font-size: .95rem; margin-bottom: .3em; }
  .board-legend { gap: 10px; }
  .turn-log { max-height: 64px; }
  /* seats shrink rather than wrap — four tiles must share one row on a phone */
  .seat-row { gap: 5px; }
  .seat { min-height: 52px; padding: 5px 7px; }
  .seat .s-name { font-size: .74rem; }
  .seat .s-pts { font-size: 1.05rem; }
  .seat .s-meta { font-size: .58rem; }
  .seat-tools { margin-bottom: 8px; }
  .seat-cards { grid-template-columns: 1fr; }
  .score-grid.wide .seg-lbl { width: 46px; font-size: .8rem; }
  .sg-head th { font-size: .64rem; }
  .pts-box { min-width: 126px; }
  /* recorder rows: 7 target chips share one line, hit buttons pack 4-up */
  .recorder { padding: 6px 0 10px; margin-bottom: 10px; }
  .rec-head { margin-bottom: 6px; }
  .rec-target { flex-wrap: nowrap; margin-bottom: 8px; }
  .rec-target button { min-height: 40px; min-width: 0; flex: 1 1 0; padding: 0 2px; }
  .rec-buttons button { flex: 1 1 22%; min-width: 0; min-height: 44px; font-size: 1rem; }

  /* lab: segmented rows scroll in one line instead of stacking three deep */
  .lab-controls .segmented {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .lab-controls .segmented::-webkit-scrollbar { display: none; }
  .lab-controls .segmented button { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; }
  .ctl-lbl { min-width: 0; flex-basis: 100%; }

  /* clearance for the fixed dock below */
  .match-wrap { padding-bottom: 84px; }
}

/* short phones (SE-class): shave the grid so the recorder needs at most a
   flick — during the 3 darts themselves nothing ever moves or scrolls */
@media (max-width: 640px) and (max-height: 700px) {
  .mark-pill { height: 38px; min-height: 38px; font-size: 1.1rem; }
  .score-panel > h2 { display: none; }
  /* the seat tiles say whose turn it is; the advisor's opponent caption is
     boilerplate you read once */
  .seat-tools .muted { display: none; }
  .seat { min-height: 48px; }
}

/* ---------- mobile match dock ---------- */
.match-dock { display: none; }
@media (max-width: 640px) {
  .match-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--g-sheen), rgba(13, 17, 23, .74);
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
    border-top: 1px solid rgba(240, 196, 25, .22);
    border-radius: 18px 18px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -12px 34px rgba(0, 0, 0, .55);
  }
  /* the section's .hidden (display:none !important) wins over this flex,
     so the dock vanishes with the Match tab */
  #match-main.hidden .match-dock { display: none; }
  /* buttons carry captions so the strip reads as a toolbar, never as stray
     glyphs floating at the page bottom */
  .md-btn {
    flex: 0 0 auto;
    width: 56px; height: 50px;
    border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; padding: 0;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--ink);
  }
  .md-btn .md-ic { font-size: 1.05rem; line-height: 1; }
  .md-btn .md-cap { font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; }
  .md-btn:disabled { opacity: .5; }
  .md-btn.md-go { background: linear-gradient(180deg, #ffd955, var(--gold)); border-color: rgba(255,230,140,.7); color: #241c02; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(240,196,25,.28); }
  .md-btn.md-go .md-cap { color: #4a3a08; }
  .md-btn.md-go.working { animation: pulse 1.1s ease-in-out infinite; }
  .md-btn:active:not(:disabled) { transform: scale(.94); }
  .md-read { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
  /* the win% is a little stat tile, so the idle "—" reads as a placeholder */
  .md-win {
    flex: 0 0 auto; min-width: 54px; text-align: center; line-height: 1.1;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 5px 6px;
  }
  .md-win b { display: block; font-family: var(--mono); font-size: 1.05rem; color: var(--gold); font-variant-numeric: tabular-nums; }
  .md-win span { font-size: .54rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
  .md-verdict {
    flex: 1; min-width: 0;
    font-size: .85rem; font-weight: 650; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .md-btn.md-go.working { animation: none; }
    .md-btn:active:not(:disabled) { transform: none; }
  }
}