/* Board color themes -- picked per-viewer from the theme <select> in
   game.html (see /static/theme.js for how it's remembered across pages
   via localStorage and applied before the board renders, so there's no
   flash of the default colors). --board-light/--board-dark are the only
   pieces that change between themes; everything else about the page
   stays the same. "classic" (the historical default) needs no
   attribute at all, so an unthemed page or an unrecognized value both
   fall back to it automatically via :root. */
:root {
  --board-light: #eed9b6;
  --board-dark: #a97b53;
}
html[data-board-theme="walnut"] {
  --board-light: #e8ded0;
  --board-dark: #6b4a30;
}
html[data-board-theme="coral"] {
  --board-light: #eef4f8;
  --board-dark: #4a7fa5;
}
html[data-board-theme="forest"] {
  --board-light: #eef3e6;
  --board-dark: #4c7a52;
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #f4f1ea;
  color: #222;
  margin: 0;
}
.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
/* The lobby needs more breathing room once it's a main-column-plus-
   sidebar layout (see .lobby-layout below) -- other pages keep the
   narrower default. */
.wrap.wrap-wide { max-width: 1180px; }

/* Lobby: play forms + your games/open games/finished games in a wide
   main column, "Online now" and the learning links tucked into a
   narrower sidebar -- keeps the page from being one long stack of
   full-width cards that all read as equally important. */
.lobby-layout { display: flex; gap: 24px; align-items: flex-start; }
.lobby-main { flex: 3 1 0; min-width: 0; }
.lobby-side { flex: 1 1 260px; min-width: 260px; }
.lobby-side .card { margin-top: 0; margin-bottom: 16px; }
@media (max-width: 860px) {
  .lobby-layout { flex-direction: column; }
  .lobby-side { width: 100%; }
}
h1 { margin-bottom: 4px; }
.dim { color: #888; font-size: 0.9em; }

.banner {
  background: #eee;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
}
.banner.error { background: #fdeaea; color: #a33; }

.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card.two-col, .two-col { display: flex; gap: 32px; flex-wrap: wrap; }
.card.two-col > div, .two-col > div { flex: 1; min-width: 220px; }

form input, form select {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin: 4px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  background: #fff;
}
form.inline { display: inline; margin: 0; }
.field-label { font-size: 0.85em; color: #666; }

/* Groups a form's fields into a row instead of stacking every
   label+input on its own line -- a handful of short selects (color,
   difficulty, time control) reads much better side by side than as a
   tall column, and still wraps cleanly on a narrow screen. */
.field-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }
.field-row[hidden] { display: none; }
.field-row .field { flex: 1; min-width: 130px; }
.field-row .field input, .field-row .field select { margin: 2px 0 0; }

.checkbox-label { display: flex; align-items: center; gap: 6px; margin: 10px 0; font-size: 0.95em; }
.checkbox-label input { width: auto; margin: 0; }

button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 1em;
}
button.primary { background: #2f6f4f; color: #fff; }
button.primary.small { padding: 4px 10px; font-size: 0.85em; }
button.small { padding: 4px 10px; font-size: 0.85em; background: #eee; color: #333; }
button.danger { background: #a33; color: #fff; margin: 10px 0; }
button.link-button { background: none; color: #555; text-decoration: underline; padding: 0; }
button.diff-btn.active { background: #2f6f4f; color: #fff; border-color: #2f6f4f; }

.game-list { list-style: none; padding: 0; }
.game-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.game-list li:last-child { border-bottom: none; }

.stats-table { border-collapse: collapse; width: 100%; }
.stats-table th, .stats-table td { text-align: left; padding: 6px 12px 6px 0; }
.stats-table th { border-bottom: 2px solid #ddd; }
.stats-table td { border-bottom: 1px solid #eee; }

.waiting-card { text-align: center; max-width: 480px; margin-left: auto; margin-right: auto; }
.waiting-card h2 { margin: 4px 0 12px; }
.spinner {
  width: 40px;
  height: 40px;
  margin: 8px auto 16px;
  border: 4px solid #e0dbcd;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.share-row { display: flex; gap: 8px; margin: 14px 0 6px; }
.share-row input {
  flex: 1;
  margin: 0;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 0.85em;
}
.share-row button { flex-shrink: 0; background: #2f6f4f; color: #fff; }

.game-layout {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* 9x9 grid: an outer rank-label column and file-label row wrap the
   actual 8x8 board, rather than the labels sitting on top of the
   corner squares themselves. Putting a label directly over a square
   (especially over a piece glyph, at a small font size, on whichever
   of the two square colors happens to be there) is exactly the
   combination that renders roughest once a screenshot or a real
   device's font rendering compresses fine detail -- a flat, solid-
   color margin outside the board avoids that entirely and reads
   clearly regardless. Same layout convention chess.com/lichess use. */
.board {
  display: grid;
  /* 10x10: a rank-number column on both the left AND right, and a
     file-letter row on both the top AND bottom, so whichever side of
     the table a player is sitting at, the labels closest to them are
     already correctly oriented -- not just the far edge. */
  grid-template-columns: 24px repeat(8, 56px) 24px;
  grid-template-rows: 24px repeat(8, 56px) 24px;
  border: 3px solid #4a3b2a;
  background: #f4f1ea;
  flex-shrink: 0;
}

.square {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  line-height: 1;
  user-select: none;
  cursor: pointer;
}
.square.light { background: var(--board-light); }
.square.dark { background: var(--board-dark); }

.coord-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #4a3b2a;
  user-select: none;
}

.square.selected { outline: 3px solid #2f6f4f; outline-offset: -3px; }
.square.legal-target { box-shadow: inset 0 0 0 4px rgba(47, 111, 79, 0.55); }
.square.hint-square { box-shadow: inset 0 0 0 4px rgba(90, 170, 230, 0.85); }
/* A crisp 8-direction 1px outline (not a blurred glow) behind a bright
   fill -- same technique gui.py's draw_piece_glyph uses in pygame, and
   for the same reason: board.js/analyze.js/tactics.js/openingview.js all
   draw White and Black pieces from the SAME solid glyph shape (see their
   own PIECE_UNICODE), so this outline is what actually distinguishes a
   white piece from a black one on screen, not just contrast against the
   square underneath it. */
.white-piece {
  color: #f8f8f8;
  text-shadow:
    -1px -1px 0 #191919, 1px -1px 0 #191919,
    -1px 1px 0 #191919, 1px 1px 0 #191919,
    -1px 0 0 #191919, 1px 0 0 #191919,
    0 -1px 0 #191919, 0 1px 0 #191919;
}
.black-piece { color: #0f0f0f; }

.sidebar { min-width: 220px; flex: 1; }
.player { font-weight: bold; padding: 4px 0; }
.clock { float: right; font-variant-numeric: tabular-nums; color: #888; }
.clock.low-time { color: #c0392b; }
.clock.running { color: #222; }
.status { margin: 10px 0; font-size: 1.05em; }

.move-list {
  padding-left: 20px;
  max-height: 320px;
  overflow-y: auto;
  font-family: "SF Mono", Consolas, monospace;
}

.button-row { display: flex; gap: 8px; margin: 10px 0; }
.button-row button { flex: 1; }
.analyze-link { display: inline-block; margin-top: 14px; }

@media (max-width: 640px) {
  .board {
    grid-template-columns: 18px repeat(8, 40px) 18px;
    grid-template-rows: 18px repeat(8, 40px) 18px;
  }
  .square { font-size: 28px; }
  .coord-cell { font-size: 11px; }
}