/* Burke Bot — tournament green: the club vinyl board.
   Dark by default; light theme via [data-theme="light"] (toggle, top right). */

:root {
  --bg: #162117;
  --surface: #1e2b1f;
  --surface-2: #26362a;
  --border: #3a4f3c;
  --ink: #edf1e4;
  --ink-2: #aab8a5;
  --accent: #8fc57f;
  --accent-dim: #527a4b;
  --sq-light: #e9ecd6;
  --sq-dark: #527a4b;
  --good: #4ade80;
  --bad: #f87171;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f0f2e4;
  --surface: #fafbf2;
  --surface-2: #e7ecd8;
  --border: #c6d1b2;
  --ink: #1e2a1d;
  --ink-2: #55684f;
  --accent: #3f5e3a;
  --accent-dim: #527a4b;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 2.2rem 1.2rem 3rem; position: relative; }

.header-actions {
  position: absolute;
  top: 2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.login-btn {
  font: inherit;
  font-size: 0.85rem;
  height: 38px;
  padding: 0 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.login-btn:hover { border-color: var(--accent); }
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:hover { border-color: var(--accent); }

.top { margin-bottom: 1.8rem; }
.wordmark {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  margin: 0 0 0.4rem;
  letter-spacing: 0.01em;
}
.tagline { color: var(--ink-2); margin: 0; max-width: 46rem; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(280px, 1fr);
  gap: 1.6rem;
  align-items: start;
}

.board { width: 100%; }

.controls { display: flex; gap: 0.7rem; margin-top: 0.9rem; }
.btn {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.btn:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-1px); }
.btn.active { border-color: var(--accent); color: var(--accent); }

.panel { display: flex; flex-direction: column; gap: 1rem; }

.status-card, .moves-card, .stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
}

.status-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-bottom: 0.45rem;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-2);
  flex: none;
}
.dot.book { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dot.engine { background: #60a5fa; box-shadow: 0 0 8px rgba(96, 165, 250, 0.6); }
.dot.over { background: var(--ink-2); }
.dot.thinking { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

.status-line { margin: 0; font-size: 0.92rem; }

.moves-card h2, .stats-card h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 1.02rem;
  margin: 0 0 0.55rem;
}

.movelist {
  margin: 0; padding: 0 0 0 1.6rem;
  columns: 2; column-gap: 1.4rem;
  font-size: 0.88rem;
  max-height: 240px;
  overflow-y: auto;
  color: var(--ink-2);
}
.movelist li { padding: 0.06rem 0; break-inside: avoid; }
.movelist .w, .movelist .b { color: var(--ink); display: inline-block; min-width: 3.2em; }

.stats-card dl { margin: 0; font-size: 0.85rem; }
.stats-card dt { color: var(--ink-2); float: left; clear: left; margin-right: 0.6rem; }
.stats-card dd { margin: 0 0 0.3rem 0; text-align: right; }
.stats-card dd .g { color: var(--accent); }

footer {
  margin-top: 2.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 0.82rem;
}
footer a { color: var(--ink-2); }

.bb-me-input {
  font: inherit;
  font-size: 0.85rem;
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 10px;
  padding: 0 0.7rem;
  width: 15ch;
}

/* overlays: pick a color to start; the end screen when it's over */
.board-wrap { position: relative; }
.board-overlay[hidden] { display: none; }
.board-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: rgba(10, 15, 10, 0.78);
}
.ov-kicker {
  margin: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cfd8c8;
}
.ov-buttons { display: flex; gap: 0.8rem; }
.board-overlay .btn { background: var(--surface); }
.ov-title {
  margin: 0;
  font-family: "Alfa Slab One", Georgia, serif;
  font-size: 2.3rem;
  color: #edf1e4;
}
.ov-line {
  margin: 0;
  font-size: 0.95rem;
  color: #cfd8c8;
  text-align: center;
  padding: 0 1rem;
}

/* light mode only: a dark edge so the board stands out on the pale page */
:root[data-theme="light"] .board .cm-chessboard { outline: 2px solid #3a4a36; }

/* board colors (selectors must match theme class "default") */
.cm-chessboard.default .board .square.white { fill: var(--sq-light); }
.cm-chessboard.default .board .square.black { fill: var(--sq-dark); }
.cm-chessboard.default .coordinates .coordinate { fill: var(--ink-2); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .movelist { max-height: 160px; }
}