:root {
  --bg: #111317;
  --panel: #181b20;
  --raised: #1f232a;
  --line: #2b3038;
  --text: #e6e8eb;
  --soft: #c2c7ce;
  --muted: #8b929c;
  --trace: #6cb6ff;
  --o: #e39a5c;
  --band-in: #e0894a2e;
  --band-spread: #4caf6a21;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--trace); outline-offset: 3px; }

.bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}
.name { font-weight: 600; }
nav { display: flex; gap: 20px; }
nav a { color: var(--muted); text-decoration: none; font-size: 14px; }

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 48px;
  align-items: start;
}

/* Game */
.tally { display: flex; gap: 32px; margin-bottom: 20px; }
.tally div { display: flex; flex-direction: column; }
.tally b { font: 600 26px/1 var(--mono); font-variant-numeric: tabular-nums; }
.tally span { color: var(--muted); font-size: 13px; margin-top: 6px; }

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
}
.cell {
  background: none;
  border: 0 solid var(--line);
  padding: 16%;
  color: var(--text);
  transition: background .12s;
}
.cell:nth-child(3n+1), .cell:nth-child(3n+2) { border-right-width: 2px; }
.cell:nth-child(-n+6) { border-bottom-width: 2px; }
.cell:disabled { opacity: 1; cursor: default; }
.cell[data-mark="o"] { color: var(--o); }
.cell svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; }
.cell svg * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .26s ease-out forwards; }
.cell svg path + path { animation-delay: .1s; }
.cell.win { background: #ffffff0b; }
.cell.chosen { box-shadow: inset 0 0 0 1px #e39a5c66; }
@keyframes draw { to { stroke-dashoffset: 0; } }

#status { min-height: 1.5em; margin: 20px 0 14px; font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions button {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 14px;
}
.actions .primary { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
progress { display: block; width: 100%; max-width: 420px; height: 6px; margin-top: 14px; accent-color: var(--trace); }
.note { max-width: 420px; color: var(--muted); font-size: 13px; }

/* Only real pointers get hover styles; on touch screens they stick after a tap. */
@media (hover: hover) {
  nav a:hover { color: var(--text); }
  .cell:not(:disabled):hover { background: #ffffff07; }
  .actions button:not(:disabled):hover { border-color: #414854; }
}

/* Brain panel */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-title { font-weight: 600; }
.pill { font-size: 12px; color: var(--muted); background: var(--raised); border-radius: 999px; padding: 2px 10px; }
.pill[data-state="thinking"], .pill[data-state="loading"] { color: var(--trace); }
.pill[data-state="awake"] { color: #8fd19e; }
.pill[data-state="lost"] { color: #f08c7a; }
.map { display: block; width: 100%; height: auto; background: #0c0e11; border-radius: 8px; }

.traces { display: grid; gap: 2px; margin-top: 12px; }
.trace { display: grid; grid-template-columns: 118px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.trace-name { font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace canvas { display: block; width: 100%; height: 28px; }
.trace-value { font: 12px var(--mono); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.caption { font-size: 13px; color: var(--soft); margin: 12px 0 14px; }

.scores-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.scores-head span:last-child { font-family: var(--mono); font-size: 12px; }
.score { display: grid; grid-template-columns: 118px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; color: var(--soft); padding: 3px 0; }
.score .bar { height: 8px; background: var(--raised); border-radius: 4px; overflow: hidden; }
.score .bar i { display: block; height: 100%; background: #4b535e; border-radius: 4px; }
.score.picked { color: var(--text); }
.score.picked .bar i { background: var(--trace); }
.score span:last-child { text-align: right; font: 12px var(--mono); color: var(--muted); }
.fine { font-size: 12px; color: var(--muted); margin: 14px 0 0; }

/* Text */
.how { max-width: 1120px; margin: 0 auto; padding: 8px 24px 32px; }
.how > * { max-width: 660px; }
.how h2 { font-size: 18px; margin: 16px 0 8px; }
.how p { color: var(--soft); }
.how table { border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
.how th, .how td { text-align: left; padding: 6px 18px 6px 0; border-bottom: 1px solid var(--line); }
.how th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.how td.num { font-family: var(--mono); text-align: right; }
.table-wrap { overflow-x: auto; }
footer { max-width: 1120px; margin: 0 auto; padding: 20px 24px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* One column: keep the board a sensible size and centered, also on landscape phones. */
@media (max-width: 880px) {
  main { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .game { width: 100%; max-width: 520px; margin: 0 auto; }
  .board { max-width: min(520px, 100%, 70vh); margin: 0 auto; }
  .note, progress { max-width: none; }
  .panel { width: 100%; max-width: 640px; margin: 0 auto; }
  .how > * { max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 440px) {
  body { font-size: 14px; }
  .bar { padding: 14px 16px; }
  main, .how, footer { padding-left: 16px; padding-right: 16px; }
  main { padding-top: 20px; gap: 24px; }
  nav a:first-child { display: none; }
  .tally { gap: 24px; margin-bottom: 14px; }
  .actions button { padding: 8px 10px; font-size: 14px; }
  .panel { padding: 12px; }
  .trace, .score { grid-template-columns: 104px minmax(0, 1fr) 40px; gap: 8px; }
  .trace-name, .score { font-size: 12px; }
  .how th, .how td { padding-right: 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cell svg * { animation: none; stroke-dashoffset: 0; }
  .cell { transition: none; }
}