:root {
  --bg: #ffffff;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --line: #e2e2e6;
  --accent: #b5452f;
  --code-bg: #f5f5f7;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1e;
    --fg: #f2f2f7;
    --muted: #a1a1a6;
    --line: #3a3a3c;
    --accent: #ff8a65;
    --code-bg: #2c2c2e;
  }
}
body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.4 system-ui, sans-serif; }
h1 { font-size: 15px; margin: 0 0 8px; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--fg); cursor: pointer; }
button:hover { border-color: var(--accent); }
button.danger { color: var(--accent); }
.muted { color: var(--muted); }
.log { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.log li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; }
.log li:hover { background: var(--code-bg); }
.log li.separator { padding: 0; margin: 8px 0; border-top: 2px solid var(--line); border-radius: 0; }
.log li.separator:hover { background: none; }
.log .time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 40px; }
.log .player { font-weight: 700; }
.chips { display: inline-flex; gap: 3px; }
.card { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 30px; border-radius: 4px; font-size: 13px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.die { display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center; width: 24px; height: 24px; padding: 3px; box-sizing: border-box; border: 1px solid #c8c8c8; border-radius: 5px; background: #fff; color: #222; font-weight: 700; }
.die .pip { width: 4px; height: 4px; border-radius: 50%; background: #222; }
pre { background: var(--code-bg); padding: 8px; border-radius: 6px; overflow: auto; margin: 4px 0 0; }

/* Replay (replay.js) */
:root { --sea: #3b7fb3; --pulse: #ffd54f; }
@media (prefers-color-scheme: dark) { :root { --sea: #1f4d73; } }
.panel { border: 1px solid var(--line); border-radius: 10px; }
.panel h2 { font-size: 13px; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.replay { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
@media (max-width: 860px) { .replay { grid-template-columns: 1fr; } }
.replay .board { display: block; width: 100%; height: auto; max-height: 72vh; }
.replay .board-wrap { min-height: 0; }
.replay .board-empty { padding: 40px 24px; text-align: center; }
.replay .board .sea { fill: var(--sea); }
.replay .board .pulse { fill: none; stroke: var(--pulse); stroke-width: 4; animation: pulse 1.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.25); } }
.replay .status { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 32px; border-top: 1px solid var(--line); }
.replay .status .chips { margin-left: auto; }
.replay .status .game-over { font-weight: 700; }
.replay .status .note { order: -1; padding: 2px 8px; border-radius: 999px; background: var(--pulse); color: #3a2c00; font-size: 12px; font-weight: 600; }
.replay .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.replay .controls button { min-width: 36px; height: 32px; font-size: 15px; }
.replay .controls .play { min-width: 64px; font-weight: 600; }
.replay .controls input[type=range] { flex: 1 1 200px; accent-color: var(--accent); }
.replay .controls select { font: inherit; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.replay-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.replay .players li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.replay .players li:last-child { border-bottom: 0; }
.replay .players li.current { background: var(--code-bg); }
.replay .players .player { font-weight: 700; }
.replay .players .vp { font-weight: 700; font-variant-numeric: tabular-nums; }
.replay .players .hand { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.replay .players .hand > span { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.replay .players .hand .card { width: 18px; height: 24px; font-size: 11px; }
.replay .players .hand .empty { opacity: .35; }
.replay .dashboard { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 12px; border-top: 1px solid var(--line); }
.replay .dash-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.replay .dash-title .player { font-weight: 700; }
.replay .dash-cards { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.replay .dash-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.replay .stack { position: relative; display: inline-flex; }
.replay .stack .card { width: 26px; height: 36px; font-size: 15px; }
.replay .stack.big .card { width: 34px; height: 48px; font-size: 20px; }
.replay .stack.empty { opacity: .35; }
.replay .stack .count { position: absolute; right: -7px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--fg); color: var(--bg); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.replay .stack.big .count { min-width: 20px; height: 20px; line-height: 20px; font-size: 12px; border-radius: 10px; }
.replay .feed .log { position: relative; overflow-y: auto; padding: 4px; font-size: 14px; }
.replay .feed .game-log { max-height: 40vh; }
.replay .feed .chat-log { max-height: 18vh; }

/* One-screen layout (pages with body.fit-screen) on desktop-sized windows: the
   page is exactly the window's height; the board takes the space left in its
   column and the game log the space left in the side column. Narrow windows
   keep the stacked, scrolling layout above. */
@media (min-width: 861px) {
  html:has(body.fit-screen) { height: 100%; }
  body.fit-screen { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
  body.fit-screen > header, body.fit-screen > nav { flex: none; }
  body.fit-screen .fill { flex: 1 1 0; min-height: 0; }
  body.fit-screen .fill.scroll { overflow: auto; }
  body.fit-screen .replay { height: 100%; grid-template-rows: minmax(0, 1fr); gap: 12px; }
  body.fit-screen .replay-main { display: flex; flex-direction: column; min-height: 0; }
  body.fit-screen .replay .board-wrap { flex: 1 1 0; display: flex; }
  body.fit-screen .replay .board { height: 100%; max-height: none; }
  body.fit-screen .replay .board-empty { margin: auto; }
  body.fit-screen .replay-side { min-height: 0; gap: 12px; }
  body.fit-screen .replay .log-panel { flex: 1 1 0; min-height: 90px; display: flex; flex-direction: column; }
  body.fit-screen .replay .log-panel .game-log { flex: 1 1 0; max-height: none; }
  body.fit-screen .replay .chat-panel { flex: none; }
  body.fit-screen .replay .chat-panel .chat-log { max-height: 96px; }
  body.fit-screen .replay .players-panel { flex: none; }
  body.fit-screen .replay .players li { padding: 6px 12px; }
  body.fit-screen .replay .controls { padding: 8px 12px; }
  body.fit-screen .replay .dashboard { padding: 10px 12px; }
}
.replay .feed .chat-empty { margin: 0; padding: 8px 12px; }
.replay .feed li { cursor: pointer; }
.replay .feed li.future { display: none; }
.replay .feed li.latest { background: var(--code-bg); }
kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }

/* Statistics (stats-view.js) */
.stats { display: flex; flex-direction: column; gap: 16px; }
.stats .stats-body { padding: 12px; }
.stats .stats-scroll { overflow-x: auto; }
.dice-chart { display: grid; grid-template-columns: repeat(11, minmax(28px, 1fr)); gap: 8px; height: 220px; }
.dice-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.dice-track { position: relative; flex: 1; width: 100%; max-width: 56px; }
.dice-bar { position: absolute; bottom: 0; left: 0; right: 0; background: var(--accent); border-radius: 4px 4px 0 0; opacity: .85; }
.dice-col.seven .dice-bar { background: #3b3b3b; }
@media (prefers-color-scheme: dark) { .dice-col.seven .dice-bar { background: #9aa0a6; } }
.dice-expected { position: absolute; left: -3px; right: -3px; border-top: 2px dashed var(--fg); opacity: .6; }
.dice-count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dice-number { font-weight: 700; }
.dice-legend { margin: 12px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dice-expected-key { display: inline-block; width: 18px; border-top: 2px dashed var(--fg); opacity: .6; }
.stats-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.stats-table th, .stats-table td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.stats-table tr:first-child th { border-bottom: 2px solid var(--line); }
.stats-table th { font-weight: 500; white-space: nowrap; }
.stats-table .player { font-weight: 700; }
.stats-table td.me, .stats-table th.me { background: var(--code-bg); }
.stats-table td.zero { color: var(--muted); }
.stats-table .stats-section td { padding-top: 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stat-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 12px; }
.stat-chips > span { display: inline-flex; align-items: center; gap: 3px; }
.stat-chips .card { width: 14px; height: 20px; font-size: 9px; }

/* Colour-blind mode (settings.js): player names become labels in their colour. */
.color-blind .player { background: var(--pc); color: var(--pc-text) !important; padding: 0 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .6); }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.toggle input { accent-color: var(--accent); margin: 0; }
.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.header-actions .toggle { margin-right: 6px; }

/* Resources from dice: actual bar, expected marker with its value, difference. */
.resource-chart { grid-template-columns: repeat(5, minmax(48px, 1fr)); }
.resource-chart .dice-track { max-width: 72px; }
.expected-label { position: absolute; right: -2px; transform: translate(100%, 50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.up { color: #2e9d4f; }
.delta.down { color: #d64545; }