body { font-family: system-ui, -apple-system, sans-serif; margin: 0 1em; color: #222; }
h1 { margin: 0.5em 0; }
h2 { border-bottom: 1px solid #ccc; padding-bottom: 0.25em; margin-top: 1em; }
h3 { margin: 0.75em 0 0.25em; }
header { background: #f4f4f4; padding: 0.5em; }
section { margin: 1em 0; }
.row { display: flex; gap: 0.75em; align-items: center; flex-wrap: wrap; margin: 0.5em 0; }
label { display: flex; gap: 0.25em; align-items: center; }
button { padding: 0.3em 0.8em; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
th, td { border: 1px solid #ddd; padding: 0.25em 0.5em; text-align: left; }

.chips { display: flex; gap: 0.25em; }
.chips button { border-radius: 50%; width: 2.4em; height: 2.4em; padding: 0; border: 2px solid #999; background: #fff; }
.chips button.selected { border-color: #ffaa00; background: #fff4d6; font-weight: bold; }

/* --- Felt --- */
#feltWrap { overflow-x: auto; background: #0b3d24; padding: 0.75em; border-radius: 6px; }
#felt { display: block; }
.cell { cursor: default; }
.cell-label { fill: #fff; font-size: 15px; font-weight: bold; pointer-events: none; font-family: monospace; }
.hit { fill: rgba(255,255,255,0.001); stroke: none; cursor: pointer; }
.hit:hover { fill: rgba(255, 210, 0, 0.35); stroke: #ffd200; stroke-width: 1; }
.hit-outside { fill: rgba(255,255,255,0.06); stroke: #999; stroke-width: 1; }
.hit-outside:hover { fill: rgba(255, 210, 0, 0.35); stroke: #ffd200; }
.outside-label { fill: #fff; font-size: 11px; font-weight: bold; pointer-events: none; font-family: monospace; }
.outside-spot { cursor: pointer; }

/* Raw-spot escape hatch: deliberately plain. */
#raw-spot { border: 2px dashed #999; padding: 0.5em; }
#raw-spot legend { font-weight: bold; }

/* --- Self-test --- */
#selftest table { margin-top: 0.5em; }
.st-pass { color: #060; font-weight: bold; }
.st-fail { color: #900; font-weight: bold; }
.st-summary { font-weight: bold; padding: 0.4em; border-radius: 4px; }
.st-summary.pass { background: #dff5df; color: #063; }
.st-summary.fail { background: #fde0e0; color: #900; }

.outcome-won { color: #060; font-weight: bold; }
.outcome-lost { color: #900; }
.outcome-push { color: #666; }
.outcome-halflost { color: #b36b00; font-weight: bold; }

#logBox { background: #111; color: #eee; padding: 0.5em; max-height: 14em; overflow: auto; font-size: 0.8em; }

/* --- Results strip --- */
.results-strip { display: flex; gap: 0.25em; flex-wrap: wrap; }
.results-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; border-radius: 50%; color: #fff; font-weight: bold; font-size: 0.8em; font-family: monospace; }
.results-chip-red { background: #a3111f; }
.results-chip-black { background: #111; }
.results-chip-green { background: #0a6b2f; }

/* --- Racetrack --- */
#racetrack { background: #0b3d24; padding: 0.75em; border-radius: 6px; }
.rt-hit { cursor: pointer; }
.rt-label { fill: #fff; font-size: 11px; font-weight: bold; pointer-events: none; font-family: monospace; }
.rt-pocket.rt-selected .rt-hit { stroke: #ffd200; stroke-width: 3; }
.rt-neighbour-picker, .rt-sectors { margin-top: 0.5em; }
.rt-sectors button { background: #143; color: #fff; border: 1px solid #4a6; }

/* --- Panels --- */
#panels .row { align-items: flex-start; }
.panel-col { flex: 1 1 20em; min-width: 20em; }
.stats-bars { display: flex; gap: 2px; align-items: flex-end; height: 60px; overflow-x: auto; padding: 0.5em 0; }
.stat-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 14px; }
.stat-bar { width: 10px; background: #06c; }
.stat-bar-label { font-size: 0.6em; }
.stats-outside button { font-size: 0.8em; }