body { gap: 16px; }

/* scoreboard chips (labels adapt to the mode in game.js) */
#score {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* mode + difficulty button groups (copied from connect-four) */
#mode,
#difficulty {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mode-btn,
.diff-btn {
  padding: 8px 18px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
}
.mode-btn:hover,
.diff-btn:hover { opacity: 1; background: var(--surface-3); }
.mode-btn.active,
.diff-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}
/* difficulty group is only shown in vs-CPU mode */
#difficulty[hidden] { display: none; }

/* ---- the board ----
   8x8 grid of squares; White sits at the bottom (rendered rank 8 → 1). */
#board {
  --sq: 64px;
  display: grid;
  grid-template-columns: repeat(8, var(--sq));
  grid-template-rows: repeat(8, var(--sq));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 40px var(--shadow);
  border: 3px solid var(--board-edge);
  touch-action: manipulation;
}

/* board palette — light/dark squares tuned per theme */
:root {
  --sq-light:    #ecd9b8;
  --sq-dark:     #b07f54;
  --board-edge:  #6b4a30;
  --sq-sel:      rgba(243, 176, 7, 0.55);   /* selected piece */
  --sq-last:     rgba(243, 176, 7, 0.32);   /* last move */
  --sq-check:    rgba(233, 69, 96, 0.70);   /* king in check */
  --dot:         rgba(30, 40, 80, 0.30);    /* move target marker */
  --piece-w:     #fdfdfd;
  --piece-b:     #1c1c22;
}
:root[data-theme="dark"] {
  --sq-light:    #9aa3c0;
  --sq-dark:     #4b5680;
  --board-edge:  #2a3050;
  --sq-sel:      rgba(255, 212, 96, 0.55);
  --sq-last:     rgba(255, 212, 96, 0.30);
  --sq-check:    rgba(233, 69, 96, 0.78);
  --dot:         rgba(255, 255, 255, 0.35);
  --piece-w:     #fbfbfb;
  --piece-b:     #15151b;
}

.sq {
  width: var(--sq);
  height: var(--sq);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.sq.light { background: var(--sq-light); }
.sq.dark  { background: var(--sq-dark); }
#board.locked .sq { cursor: default; }

/* coordinate labels in the corners (a–h on bottom rank, 1–8 on first file) */
.sq .coord {
  position: absolute;
  font-size: 0.55rem;
  font-weight: 700;
  opacity: 0.55;
  pointer-events: none;
}
.sq .coord.file { right: 3px; bottom: 1px; }
.sq .coord.rank { left: 3px; top: 1px; }
.sq.light .coord { color: var(--sq-dark); }
.sq.dark  .coord { color: var(--sq-light); }

/* the piece artwork (SVG images in images/) */
.piece {
  width: calc(var(--sq) * 0.86);
  height: calc(var(--sq) * 0.86);
  z-index: 2;
  pointer-events: none;            /* clicks fall through to the square */
  transition: transform 0.08s;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* highlights */
.sq.sel::before,
.sq.last::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sq.sel::before  { background: var(--sq-sel); }
.sq.last::before { background: var(--sq-last); }
.sq.check::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, var(--sq-check) 0%, transparent 72%);
}

/* legal-move markers: a dot for a quiet move, a ring for a capture */
.sq.target::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: calc(var(--sq) * 0.3);
  height: calc(var(--sq) * 0.3);
  border-radius: 50%;
  background: var(--dot);
}
.sq.target.capture::after {
  width: calc(var(--sq) * 0.86);
  height: calc(var(--sq) * 0.86);
  background: transparent;
  border: calc(var(--sq) * 0.08) solid var(--dot);
}
.sq:not(.locked-sq):hover.target::after { background: var(--accent); }
.sq.target.capture:hover::after { border-color: var(--accent); background: transparent; }

/* promotion picker */
#promo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px var(--shadow);
}
#promo[hidden] { display: none; }
.promo-label { font-size: 0.9rem; font-weight: 600; }
.promo-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 1.7rem;
  line-height: 1;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.promo-btn:hover { opacity: 1; background: var(--accent); color: var(--accent-text); }
.promo-piece { width: 38px; height: 38px; display: block; pointer-events: none; }

/* responsive: shrink the board on smaller screens */
@media (max-width: 560px) {
  #board { --sq: 40px; }
  .piece { font-size: calc(var(--sq) * 0.82); }
}
@media (max-width: 360px) {
  #board { --sq: 36px; }
}