/* Chess page. Colors come from the site tokens in ../style.css, so the
   board follows light and dark mode with everything else. */

.chess-wrap {
  /* One source of truth for the board's size. Because the grid declares both
     explicit rows and columns, every square is exactly 1/8 of this and never
     resizes as pieces move on and off a rank. */
  --board: min(440px, calc(100vw - 40px));
  --sq-light: #e8e5dc;
  --sq-dark: #b9b5a8;
  --piece-ink: #1c1c1a;
  --mark: rgba(28, 28, 26, .26);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chess-wrap {
    --sq-light: #aaa698;
    --sq-dark: #7e7b71;
    --mark: rgba(28, 28, 26, .35);
  }
}

:root[data-theme="dark"] .chess-wrap {
  --sq-light: #aaa698;
  --sq-dark: #7e7b71;
  --mark: rgba(28, 28, 26, .35);
}

.chess-back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color .15s;
}

.chess-back:hover { color: var(--ink); }

.chess-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.chess-lede {
  color: var(--muted);
  margin-bottom: 28px;
  max-width: 48ch;
}

/* Board ------------------------------------------------------------------ */

.chess-board {
  display: grid;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(0, 0, 0, .25);
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);   /* without this, rows size to content */
  width: var(--board);
  height: var(--board);
  border-radius: 3px;
  overflow: hidden;
  user-select: none;
  font-size: calc(var(--board) / 8 * 0.78);
  line-height: 1;
}

.chess-board .sq {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;      /* a glyph can never push the grid around */
}

.chess-board .sq.light { background: var(--sq-light); }
.chess-board .sq.dark  { background: var(--sq-dark); }

/* Solid glyphs for both sides, separated by fill and outline. The hollow
   Unicode variants render inconsistently across platforms. */
.chess-board .sq.white {
  color: #fdfdfb;
  text-shadow: 0 0 1px var(--piece-ink), 0 0 2px var(--piece-ink);
}
.chess-board .sq.black { color: var(--piece-ink); }

/* Board flips as one unit; cells counter-rotate so pieces stay upright. */
.chess-board.flipped { transform: rotate(180deg); }
.chess-board.flipped .sq { transform: rotate(180deg); }

/* Markers ---------------------------------------------------------------- */

.chess-board .sq.lastmove::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(107, 143, 113, .28);
  pointer-events: none;
}

.chess-board .sq.selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.chess-board .sq.target::before {
  content: '';
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: var(--mark);
  pointer-events: none;
}

.chess-board .sq.capture::before {
  content: '';
  position: absolute;
  inset: 7%;
  border: 2px solid var(--mark);
  border-radius: 50%;
  pointer-events: none;
}

.chess-board .sq.check::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(184, 58, 58, .5) 28%, transparent 72%);
  pointer-events: none;
}

/* Controls --------------------------------------------------------------- */

.chess-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: var(--board);
  margin-bottom: 14px;
}

.chess-controls select,
.chess-controls button {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}

.chess-controls select:hover,
.chess-controls button:hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--ink);
}

.chess-controls button:disabled {
  color: var(--faint);
  opacity: .5;
  cursor: default;
}

/* Status ----------------------------------------------------------------- */

.chess-statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: var(--board);
  min-height: 34px;
  margin-top: 14px;
}

.chess-status {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.chess-promotion {
  display: flex;
  gap: 4px;
}

.chess-promotion[hidden] { display: none; }

.chess-promotion button {
  font-size: 22px;
  line-height: 1;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
}

.chess-promotion button:hover { border-color: var(--ink); }
.chess-promotion button.white { color: #fdfdfb; text-shadow: 0 0 1px var(--piece-ink), 0 0 2px var(--piece-ink); }
.chess-promotion button.black { color: var(--ink); }

.chess-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  margin-top: 6px;
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 480px) {
  /* Cap the board by height too, so the whole thing is on screen when the
     page loads rather than running past the fold. Floor of 240px so it
     stays playable on a very short screen; dvh for the visible viewport. */
  .chess-wrap {
    --board: min(calc(100vw - 40px), max(240px, calc(100vh - 400px)));
    --board: min(calc(100vw - 40px), max(240px, calc(100dvh - 400px)));
  }

  .chess-back { margin-bottom: 14px; }
  .chess-lede { margin-bottom: 14px; }

  /* Not var(--board): once the board shrinks to fit a short screen, a
     board-width control row wraps onto an extra line and pushes the
     board down again, shrinking it further. */
  .chess-controls,
  .chess-statusbar {
    width: 100%;
  }
}

@media (pointer: coarse) {
  .chess-controls select,
  .chess-controls button {
    padding: 11px 14px;
    min-height: 44px;
  }

  .chess-promotion button {
    width: 44px;
    height: 44px;
  }

  .chess-back {
    position: relative;
  }

  .chess-back::before {
    content: '';
    position: absolute;
    inset: -12px -8px;
  }
}