/* board.css — board, squares, pieces, highlights */

/* ─── Center column ──────────────────────────────────────────────────────── */

#center-column {
  grid-area: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  overflow: hidden;
}

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */

#board-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ─── Board wrapper ──────────────────────────────────────────────────────── */

#board-container {
  width:  var(--board-size);
  height: var(--board-size);
  flex-shrink: 0;

  display: grid;
  grid-template-columns: repeat(8, var(--square-size));
  grid-template-rows:    repeat(8, var(--square-size));

  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--bg),
    0 12px 48px rgba(0,0,0,.6),
    0 0 80px rgba(200,168,107,.04);

  user-select: none;
}

/* ─── Squares ─────────────────────────────────────────────────────────────── */

.square {
  width:    var(--square-size);
  height:   var(--square-size);
  position: relative;
  display:  flex;
  align-items:     center;
  justify-content: center;
  overflow: hidden;
  transition: background var(--dur) var(--ease);
}

.square--light { background: #c8b89a; }
.square--dark  { background: #6b4f3a; }

/* Selected */
.square--selected {
  background: var(--accent) !important;
}

/* Last move */
.square--last-move.square--light { background: #d4c87a; }
.square--last-move.square--dark  { background: #9a9040; }

/* King in check */
.square--check {
  background: radial-gradient(circle, #e05030 0%, #b03020 60%, transparent 100%) !important;
}

/* Legal move dots */
.square--legal::after {
  content: '';
  position: absolute;
  width:  30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  transition: transform var(--dur) var(--ease);
}

/* If the legal square has a piece (capture) — ring instead of dot */
.square--legal:has(.piece)::after {
  width:  88%;
  height: 88%;
  background: transparent;
  border: 3px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

/* ─── Pieces ──────────────────────────────────────────────────────────────── */

.piece {
  position: absolute;
  top:    5%;
  left:   5%;
  width:  90%;
  height: 90%;
  object-fit: contain;
  cursor: grab;
  z-index: 2;
  transition: transform var(--dur) var(--ease), filter var(--dur);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  user-select: none;
  -webkit-user-drag: element;
}

.piece:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.7));
}

.piece--dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* ─── Coordinates ────────────────────────────────────────────────────────── */
/*
  File labels (a–h) on the bottom rank,
  rank labels (1–8) on the leftmost file.
  Rendered via CSS counters on squares to avoid extra DOM elements.
*/

/* ─── Current line display ────────────────────────────────────────────────── */

#current-line-bar {
  width: var(--board-size);
  min-height: 28px;
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: nowrap;
}

#current-line-bar strong {
  color: var(--text-muted);
  font-weight: 400;
  margin-right: var(--sp-2);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}