:root {
  --bg: #14120f;
  --panel: #1e1b16;
  --panel-2: #2a241c;
  --ink: #f3ead7;
  --muted: #b5a78a;
  --gold: #d4a853;
  --gold-dim: #8a6d2f;
  --live: #e85d4c;
  --ok: #7cbc6e;
  --fail: #c45c4a;
  --sq-dark: #22c55e;
  --sq-light: #4ade80;
  --sq-dark-mode: #16a34a;
  --white-piece: #ffffff;
  --black-piece: #000000;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100%; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 28px 24px 48px; }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; border-bottom: 1px solid #3a3226; padding-bottom: 14px;
}
.top .ply-readout {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 40%;
  text-align: right;
}
.brand { font-size: 28px; letter-spacing: 0.04em; margin: 0; }
.brand span { color: var(--gold); }
.sub { color: var(--muted); font-size: 14px; }

.table-wrap { background: var(--panel); border: 1px solid #3a3226; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #2f2920; }
th { color: var(--gold); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: #231e18; }
tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #2a241c; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.badge.live { background: #3a1814; color: #ffb4aa; border: 1px solid #8a3a2a; }
.badge.done { background: #1c2a18; color: #b6e0aa; border: 1px solid #3d6a34; }
.badge.idle { background: #2a241c; color: var(--muted); border: 1px solid #4a4030; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.layout { display: grid; grid-template-columns: minmax(520px, 1fr) 340px; gap: 20px; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.board-card, .moves-card, .controls {
  background: var(--panel); border: 1px solid #3a3226; border-radius: 12px; box-shadow: var(--shadow);
}
.board-card { padding: 18px 18px 14px; }
.board-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 10px; height: 1.4em; min-height: 1.4em; max-height: 1.4em;
  overflow: hidden;
}
.board-head .meta-line {
  min-width: 0; flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-head .ply-readout {
  flex: 0 0 auto; white-space: nowrap;
}
.ply-readout { color: var(--gold); font-size: 15px; }
.meta-line { color: var(--muted); font-size: 13px; }
@media (max-width: 980px) {
  .top { flex-wrap: nowrap; gap: 10px; }
  .top > div:first-child { min-width: 0; flex: 1 1 auto; }
  .top .brand { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top .ply-readout { flex: 0 1 auto; max-width: 42%; }
}

/* 12x12 square cells — GameBoard.tsx: border-2, rounded-md, shadow-lg */
.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  aspect-ratio: 1 / 1;
  width: min(90vw, 560px);
  max-width: 100%;
  margin: 8px auto 0;
  user-select: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.2);
}
.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  line-height: 1;
}
/* isDark = (row + col) % 2 === 1 → bg-green-500 / light bg-green-400 */
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.sq.wall {
  background-color: #6b7280;
  background-image:
    linear-gradient(to right, #4b5563 1px, transparent 1px),
    linear-gradient(to bottom, #4b5563 1px, transparent 1px),
    linear-gradient(to right, #4b5563 1px, transparent 1px);
  background-size: 50% 33%, 50% 33%, 50% 33%;
  background-position: 0 0, 0 33%, 25% 66%;
}
.sq.last { outline: 3px solid var(--gold); outline-offset: -3px; }

.piece {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  height: 85%;
  font-size: min(calc(560px / 12 * 0.85), calc((min(90vw, 560px) / 12) * 0.85));
  line-height: 1;
  paint-order: stroke fill;
  font-variant-emoji: text;
  user-select: none;
}
.piece.white {
  color: #ffffff;
  -webkit-text-stroke: 1px #000000;
}
.piece.black {
  color: #000000;
  -webkit-text-stroke: 1px #ffffff;
}
.pawn-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.coord {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.5rem, 1vw, 0.75rem);
  opacity: 0.6;
  pointer-events: none;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1;
}
.coord.rank { left: 2px; top: 2px; }
.coord.file { right: 2px; bottom: 2px; }

.moves-card { display: flex; flex-direction: column; align-self: start; }
.moves-card[open] { max-height: 420px; }
.moves-card summary {
  margin: 0; padding: 10px 12px; font-size: 13px; color: var(--gold);
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
}
.moves-card summary::-webkit-details-marker { display: none; }
.moves-card summary::after { content: "+"; font-size: 14px; color: var(--muted); }
.moves-card[open] summary::after { content: "–"; }
.moves {
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  max-height: 360px;
  padding: 0 6px 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.25;
}
.moves .empty { padding: 16px 8px; font-size: 12px; }
.move-row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 4px; padding: 1px 4px; border-radius: 4px; }
.move-row .n { color: var(--muted); }
.move-row button {
  all: unset; cursor: pointer; padding: 1px 4px; border-radius: 3px; color: var(--ink);
}
.move-row button:hover, .move-row button.active { background: #3a3226; color: var(--gold); }
.move-row button.fail { color: var(--fail); }
.move-row button.ok { color: var(--ok); }

.controls { padding: 14px 16px 16px; margin-top: 16px; }
.ctrl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
button.ctrl {
  background: var(--panel-2); color: var(--ink); border: 1px solid #4a4030;
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 14px;
}
button.ctrl:hover { border-color: var(--gold); color: var(--gold); }
button.ctrl.primary { background: #3a2e16; border-color: var(--gold-dim); color: var(--gold); }
.speeds { display: flex; gap: 6px; flex-wrap: wrap; }
.speeds button.active { background: #3a2e16; border-color: var(--gold); color: var(--gold); }
input[type="range"] { width: 180px; accent-color: var(--gold); }
.hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
.ply-scrub {
  margin-top: 12px; height: 28px; display: flex; align-items: center;
}
.ply-scrub input[type="range"] { width: 100%; accent-color: var(--gold); }
.captured { margin-top: 10px; color: var(--muted); font-size: 13px; }
.empty { padding: 40px; color: var(--muted); text-align: center; }

.pace-card {
  background: var(--panel); border: 1px solid #3a3226; border-radius: 12px;
  box-shadow: var(--shadow); margin-top: 20px; padding: 16px 16px 14px;
}
.pace-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; margin-bottom: 8px;
}
.pace-head h2 {
  margin: 0; font-size: 15px; color: var(--gold); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
}
.pace-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: 12px;
}
.pace-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.swatch {
  display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--muted);
}
.swatch.minutes { background: var(--gold); height: 4px; }
.swatch.think { background: #b5a78a; height: 2px; opacity: 0.8; }
.swatch.cost { background: var(--ok); height: 4px; }
.swatch.marker { width: 2px; height: 12px; background: var(--live); border-radius: 1px; }
.pace-chart {
  width: 100%; height: 240px; display: block; cursor: crosshair;
  touch-action: manipulation; background: #16130f; border-radius: 8px;
  border: 1px solid #2f2920;
}
.pace-totals {
  margin-top: 10px; color: var(--ink); font-size: 15px; letter-spacing: 0.01em;
}
.pace-caption { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  .pace-chart { height: 200px; }
  .pace-totals { font-size: 13px; }
  .pace-head h2 { font-size: 13px; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lib-actions {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
}
.select-all {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 14px; cursor: pointer; user-select: none;
}
.select-all input { accent-color: var(--gold); width: 16px; height: 16px; }
th.check, td.check { width: 42px; text-align: center; padding-left: 12px; padding-right: 8px; }
td.check { cursor: default; }
td.check input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }
tbody tr.picked { background: #2a2218; }
button.ctrl.danger {
  background: #3a1814; border-color: #8a3a2a; color: #ffb4aa;
}
button.ctrl.danger:hover:not(:disabled) { border-color: var(--live); color: #ffd4ce; }
button.ctrl.danger:disabled { opacity: 0.4; cursor: not-allowed; }


.comments-card {
  background: var(--panel); border: 1px solid #3a3226; border-radius: 12px;
  box-shadow: var(--shadow); margin-top: 20px; padding: 16px 16px 14px;
}
.comments-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; margin-bottom: 10px;
}
.comments-head h2 {
  margin: 0; font-size: 15px; color: var(--gold); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
}
.comments-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow: auto; }
.comments-list .empty { padding: 20px 8px; }
.comment {
  background: #1a1712; border: 1px solid #2f2920; border-radius: 8px; padding: 10px 12px;
}
.comment-meta { font-size: 13px; margin-bottom: 4px; }
.comment-meta strong { color: var(--gold); }
.comment-text { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.45; }
.comments-form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.comments-form textarea {
  width: 100%; min-height: 72px; resize: vertical;
  background: #16130f; color: var(--ink); border: 1px solid #4a4030;
  border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 15px;
}
.comments-form textarea:focus, .comments-form input:focus {
  outline: none; border-color: var(--gold);
}
.comments-form-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.ply-field {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px;
}
.ply-field input {
  width: 88px; background: #16130f; color: var(--ink); border: 1px solid #4a4030;
  border-radius: 8px; padding: 7px 8px; font: inherit; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.badge.comments {
  background: #2a241c; color: var(--gold); border: 1px solid var(--gold-dim);
  margin-left: 6px; vertical-align: middle;
}

th.comments-col, td.comments-count {
  width: 1%;
  white-space: nowrap;
}