@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600 900; src:url(/fonts/fraunces-var.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Public Sans'; font-style:normal; font-weight:400 700; src:url(/fonts/public-sans-var.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; src:url(/fonts/plex-mono-400.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; src:url(/fonts/plex-mono-500.woff2) format('woff2'); font-display:swap; }

:root {
  --paper:#E7E8E0; --paper-raised:#DEDFD3; --ink:#1C2024; --ink-soft:#4B5158;
  --rule:#C7C8BA; --iron:#3E5164; --ochre:#9C6423; --verdigris:#356A5F;
  --verdigris-soft:#DCEAE5; --plot-empty:#DBDCD0; --danger:#9C3B2E; --danger-soft:#F3DAD4;
  /* Categorical series palette (dataviz skill reference instance) — used only
     for bot identity on the dashboard, deliberately distinct from iron/ochre
     since those already mean "which seat" elsewhere in this app. */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  --series-5:#e87ba4; --series-6:#008300; --series-7:#4a3aa7; --series-8:#e34948;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#131F29; --paper-raised:#1B2C38; --ink:#DEE7EA; --ink-soft:#93A7B1;
    --rule:#2C4353; --iron:#8FA9BA; --ochre:#E0A855; --verdigris:#6FBBAA;
    --verdigris-soft:#1D3934; --plot-empty:#1B2C38; --danger:#E28577; --danger-soft:#3A2320;
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
    --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
  }
}
:root[data-theme="dark"] {
  --paper:#131F29; --paper-raised:#1B2C38; --ink:#DEE7EA; --ink-soft:#93A7B1;
  --rule:#2C4353; --iron:#8FA9BA; --ochre:#E0A855; --verdigris:#6FBBAA;
  --verdigris-soft:#1D3934; --plot-empty:#1B2C38; --danger:#E28577; --danger-soft:#3A2320;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
  --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  font-size: 16.5px; line-height: 1.6; min-height: 100vh;
}
@media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

#app { max-width: 640px; margin: 0 auto; padding: 40px 20px 80px; }

h1, h2 { font-family:'Fraunces',Georgia,serif; margin:0 0 .3em; text-wrap:balance; }
h1 { font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight:900; line-height:.95; }
h2 { font-size: 1.6rem; font-weight:600; }
p { margin: 0 0 1em; }
.dim { color: var(--ink-soft); }
.num { font-family:'IBM Plex Mono', monospace; }
a { color: var(--verdigris); }

.view { text-align: center; }
.view.game, .view.replay { text-align: left; }

.eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--verdigris); margin-bottom:.4em; }
.tagline { font-family:'Fraunces',serif; font-weight:600; font-style:italic; color:var(--ink-soft); font-size:1.1rem; }
.hint { font-size:.9rem; color:var(--ink-soft); }

.btn {
  display:inline-block; font-family:'Public Sans',sans-serif; font-weight:600; font-size:.95rem;
  background:var(--ink); color:var(--paper); border:none; padding:.7em 1.4em; border-radius:4px;
  cursor:pointer; text-decoration:none; margin:.3em;
}
.btn:hover { background:var(--verdigris); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-primary { background:var(--verdigris); }
.btn-primary:hover { background:var(--ink); }
.btn:focus-visible { outline:2px solid var(--verdigris); outline-offset:2px; }

.rules-panel {
  text-align:left; margin-top:2.5em; border:1px solid var(--rule); border-radius:4px;
  background:var(--paper-raised); padding:.2em 1em;
}
.rules-panel summary { cursor:pointer; padding:.8em 0; font-weight:600; }
.rules-body { padding-bottom:1em; font-size:.92rem; }
.rules-body ul { padding-left:1.2em; margin:0; }
.rules-body li { margin-bottom:.5em; }

/* ---- board size picker (landing) ---- */
.size-picker { display:flex; justify-content:center; gap:.5em; flex-wrap:wrap; margin:1.4em 0 .5em; }
.size-opt {
  display:flex; flex-direction:column; align-items:center; gap:.15em;
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:1.1rem;
  background:var(--paper-raised); color:var(--ink); border:1.5px solid var(--rule); border-radius:6px;
  padding:.5em .8em; cursor:pointer; min-width:56px;
}
.size-opt small { font-family:'Public Sans',sans-serif; font-size:.68rem; color:var(--ink-soft); }
.size-opt:hover { border-color:var(--verdigris); }
.size-opt.selected { border-color:var(--verdigris); background:var(--verdigris-soft); color:var(--verdigris); }
.size-opt.selected small { color:var(--verdigris); }
.landing-actions { margin-top:1em; }

.link-box { display:flex; gap:.5em; max-width:420px; margin:0 auto 1.5em; }
.link-box input {
  flex:1; font-family:'IBM Plex Mono',monospace; font-size:.85rem; padding:.6em .7em;
  border:1px solid var(--rule); border-radius:4px; background:var(--paper-raised); color:var(--ink);
}
.spinner {
  width:28px; height:28px; margin:1.2em auto; border-radius:50%;
  border:3px solid var(--rule); border-top-color:var(--verdigris);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-banner, .conn-banner {
  background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger);
  padding:.7em 1em; border-radius:4px; margin-bottom:1.2em; font-size:.9rem;
}
.conn-banner { position:fixed; top:0; left:0; right:0; text-align:center; border-radius:0; z-index:50; display:none; }

/* ---- game header ---- */
.game-header { display:flex; align-items:center; justify-content:space-between; gap:.6em; margin-bottom:1em; flex-wrap:wrap; }
.seat-badge { display:flex; align-items:center; gap:.4em; font-weight:600; font-size:.95rem; }
.seat-badge.iron { color: var(--iron); }
.seat-badge.ochre { color: var(--ochre); }
.chip-count { font-weight:700; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#3FA35A; display:inline-block; }
.status-dot.offline { background:var(--danger); }

.round-label { text-align:center; font-size:.85rem; color:var(--ink-soft); line-height:1.5; }
.priority-indicator {
  display:inline-flex; align-items:center; gap:.35em; margin-top:.2em;
  background:var(--verdigris-soft); border:1px solid var(--verdigris); border-radius:12px;
  padding:.2em .7em; font-size:.8rem; font-weight:600;
}
.priority-icon { color:var(--verdigris); }
.priority-indicator strong.iron { color:var(--iron); }
.priority-indicator strong.ochre { color:var(--ochre); }
.priority-indicator.pulse { animation: priority-pulse 0.9s ease-out; }
@keyframes priority-pulse {
  0% { transform: scale(1.28); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verdigris) 35%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.priority-hint { font-size:.85rem; color:var(--ink-soft); margin-bottom:.9em; }
.priority-hint strong.iron { color:var(--iron); }
.priority-hint strong.ochre { color:var(--ochre); }

/* ---- board (shared by game + replay) ---- */
.board-wrap { overflow-x:auto; margin:0 0 1em; }
.board-wrap svg { width:100%; max-width:480px; height:auto; display:block; margin:0 auto; }
.plot { fill: var(--plot-empty); stroke: var(--rule); stroke-width:1.5; }
.plot.clickable { cursor:pointer; }
.plot.clickable:hover { fill: color-mix(in srgb, var(--verdigris) 25%, var(--plot-empty)); }
.plot.filled { cursor:default; }
.plot.iron { fill: var(--iron); stroke: var(--iron); }
.plot.ochre { fill: var(--ochre); stroke: var(--ochre); }
.plot.largest { stroke: var(--verdigris); stroke-width:3.5; }

.last-round { min-height:1.4em; font-size:.85rem; color:var(--ink-soft); margin-bottom:.6em; }
.panel { background:var(--paper-raised); border:1px solid var(--rule); border-radius:4px; padding:1em 1.2em; margin-bottom:1em; text-align:center; }
.panel label { display:block; font-size:.85rem; margin-bottom:.4em; }
.panel input[type="range"] { width:100%; margin-bottom:.8em; accent-color: var(--verdigris); }
.panel .prompt { font-weight:600; color: var(--verdigris); }
.you-are { text-align:center; font-size:.9rem; color:var(--ink-soft); }
.you-are .iron { color: var(--iron); } .you-are .ochre { color: var(--ochre); }

/* ---- game over ---- */
.gameover { }
.go-detail { font-size:1rem; }
.reason { font-size:.85rem; }
.go-actions { margin-top:1em; }

/* ---- replay ---- */
.replay-summary { font-size:.95rem; }
.replay-summary .iron { color:var(--iron); } .replay-summary .ochre { color:var(--ochre); }
.replay-controls { display:flex; align-items:center; gap:.6em; margin:0 0 1em; }
.replay-controls input[type="range"] { flex:1; accent-color: var(--verdigris); }
.replay-log { min-height:2.4em; font-size:.9rem; background:var(--paper-raised); border:1px solid var(--rule); border-radius:4px; padding:.7em 1em; }

.notfound, .join-prompt, .waiting { padding-top:1em; }

/* ---- dashboard ---- */
#app:has(.view.dashboard) { max-width: 900px; }
.dashboard-header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5em; margin-bottom:1em; }
.dashboard-header h2 { margin:0; }
.live-indicator { display:inline-flex; align-items:center; gap:.4em; font-size:.8rem; color:var(--ink-soft); }
.live-dot { width:7px; height:7px; border-radius:50%; background:#3FA35A; animation: live-blink 1.8s ease-in-out infinite; }
@keyframes live-blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.mode-toggle { display:inline-flex; border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-bottom:1.2em; }
.mode-opt { font-family:'Public Sans',sans-serif; font-size:.82rem; font-weight:600; background:var(--paper-raised); color:var(--ink-soft); border:none; padding:.5em 1em; cursor:pointer; }
.mode-opt + .mode-opt { border-left:1px solid var(--rule); }
.mode-opt.selected { background:var(--verdigris); color:var(--paper); }
.mode-opt:hover:not(.selected) { background:color-mix(in srgb, var(--verdigris) 15%, var(--paper-raised)); }

.stat-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.8em; margin-bottom:1.6em; }
.stat-tile { background:var(--paper-raised); border:1px solid var(--rule); border-radius:4px; padding:.8em 1em; text-align:center; }
.stat-tile .value { display:block; font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-weight:500; }
.stat-tile .label { font-size:.75rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }

.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1em; margin-bottom:1.6em; }
.chart-card { background:var(--paper-raised); border:1px solid var(--rule); border-radius:4px; padding:1em 1.2em; }
.chart-card h3 { font-size:.95rem; margin:0 0 .8em; }
.bar-row { display:grid; grid-template-columns:96px 1fr 52px; align-items:center; gap:.6em; margin-bottom:.55em; position:relative; }
.bar-label { font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { height:14px; background:var(--plot-empty); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; min-width:2px; transition:width .3s ease; }
.bar-value { font-family:'IBM Plex Mono',monospace; font-size:.8rem; text-align:right; }
.bar-row:hover .bar-track { outline:1px solid var(--rule); }

.viz-tooltip {
  position:fixed; z-index:60; background:var(--ink); color:var(--paper);
  font-size:.78rem; padding:.5em .7em; border-radius:4px; pointer-events:none;
  max-width:220px; line-height:1.4; display:none;
}

.line-chart { width:100%; height:auto; display:block; overflow:visible; }
.chart-axis { stroke:var(--rule); stroke-width:1; }
.line-path { stroke-linejoin:round; stroke-linecap:round; }
.line-chart circle { cursor:pointer; }
.line-axis-labels { display:flex; justify-content:space-between; font-size:.7rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; margin-top:.2em; }
.line-legend { display:flex; flex-wrap:wrap; gap:.6em 1em; margin-top:.7em; }
.legend-item { display:inline-flex; align-items:center; font-size:.78rem; color:var(--ink-soft); }

.dashboard-table-wrap { overflow-x:auto; }
.dashboard-table-wrap table { width:100%; border-collapse:collapse; font-size:.85rem; }
.dashboard-table-wrap th, .dashboard-table-wrap td { padding:.5em .7em; text-align:right; border-bottom:1px solid var(--rule); white-space:nowrap; }
.dashboard-table-wrap th:first-child, .dashboard-table-wrap td:first-child { text-align:left; }
.dashboard-table-wrap th { color:var(--ink-soft); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
.dashboard-table-wrap td.num, .dashboard-table-wrap th { font-family:'IBM Plex Mono',monospace; }
.bot-swatch { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.5em; }

.empty-state { text-align:center; padding:2em 1em; color:var(--ink-soft); }
.empty-state code { background:var(--paper-raised); border:1px solid var(--rule); padding:.15em .4em; border-radius:3px; }

@media (max-width: 420px) {
  .game-header { justify-content:center; text-align:center; }
  .round-label { order:3; width:100%; }
}