:root {
  --ink: #1c1917;
  --paper: #f3efe6;
  --board: #e7d9b8;
  --board-line: #6b4423;
  --accent: #854d0e;
  --accent-ink: #ffffff;
  --good: #166534;
  --danger: #b91c1c;
  --card: #fffdf7;
  --muted: #57534e;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.45;
}
.topbar { padding: 20px 20px 4px; max-width: 1200px; margin: 0 auto; }
.topbar h1 { margin: 0; font-size: 2rem; letter-spacing: .01em; }
.tagline { margin: 4px 0 0; color: var(--muted); max-width: 62ch; }
.layout {
  max-width: 1200px; margin: 0 auto; padding: 16px 20px 28px;
  display: grid; grid-template-columns: minmax(320px, 1.35fr) minmax(280px, 1fr);
  gap: 20px; align-items: start;
}
.stats { grid-column: 1 / -1; }
/* Keep wide tables inside their scroll boxes instead of widening the page. */
.board-panel, .side, .stats, .card { min-width: 0; }
.board-panel { background: var(--card); border: 1px solid #d6cdb4; padding: 16px; }
.status { font-size: 1.12rem; font-weight: bold; min-height: 1.6em; margin-bottom: 8px; }
.message { color: var(--danger); min-height: 1.4em; font-weight: bold; }
.board-wrap { max-width: 640px; margin: 0 auto; }
svg.board { width: 100%; height: auto; display: block; }
.board-bg { fill: var(--board); stroke: var(--board-line); stroke-width: 2; }
.board-line { stroke: var(--board-line); stroke-width: 3; fill: none; }
.point-dot { fill: #fffdf7; stroke: var(--board-line); stroke-width: 2; }
g.point { cursor: pointer; outline: none; }
g.point:focus-visible .point-dot, g.point:focus-visible .piece { stroke: #1d4ed8; stroke-width: 5; }
.piece { stroke-width: 2.5; }
.piece.white { fill: #fafaf9; stroke: #292524; }
.piece.black { fill: #292524; stroke: #0c0a09; }
.hint-ring { fill: none; stroke: var(--good); stroke-width: 4; opacity: .85; pointer-events: none; }
.selected-ring { fill: none; stroke: #1d4ed8; stroke-width: 5; pointer-events: none; }
.capture-ring { fill: none; stroke: var(--danger); stroke-width: 5; pointer-events: none; }
.last-ring { fill: none; stroke: #a16207; stroke-width: 3; stroke-dasharray: 6 5; pointer-events: none; }
.coord { font-size: 13px; fill: var(--muted); font-family: ui-monospace, monospace; }
.side { display: grid; gap: 16px; }
.card { background: var(--card); border: 1px solid #d6cdb4; padding: 16px; }
.card h2 { margin: 0 0 10px; font-size: 1.25rem; }
.card h3 { margin: 18px 0 8px; }
label { display: block; font-weight: bold; margin: 10px 0 4px; }
select, button { font: inherit; padding: 8px 10px; }
select { width: 100%; background: #fff; border: 1px solid #a8a29e; }
button { border: 1px solid var(--accent); background: #fff; color: var(--accent); cursor: pointer; }
button:hover:not(:disabled) { background: #fef3c7; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--accent-ink); font-weight: bold; }
button.primary:hover { background: #713f12; }
.row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: .92rem; }
.game-over { border: 2px solid var(--good); padding: 12px; margin-top: 10px; background: #f0fdf4; }
.game-over p { margin: 0 0 10px; font-weight: bold; font-size: 1.1rem; }
.player-line { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e7e5e4; }
.player-line.active { font-weight: bold; }
.chip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #292524; vertical-align: -2px; margin-right: 6px; }
.chip.white { background: #fafaf9; } .chip.black { background: #292524; }
.history { max-height: 280px; overflow: auto; margin: 0; padding-left: 36px; font-family: ui-monospace, monospace; font-size: .92rem; }
.history .empty { font-family: inherit; color: var(--muted); }
details.rules summary { font-weight: bold; cursor: pointer; font-size: 1.1rem; }
table { border-collapse: collapse; width: 100%; margin: 8px 0 4px; font-size: .95rem; }
th, td { border-bottom: 1px solid #e7e5e4; padding: 6px 8px; text-align: right; }
th:first-child, td:first-child { text-align: left; }
thead th { border-bottom: 2px solid #a8a29e; }
.table-scroll { overflow-x: auto; }
.footer { max-width: 1200px; margin: 0 auto; padding: 0 20px 24px; color: var(--muted); font-size: .9rem; }
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}