.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(94vmin, 480px);
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(120,80,30,0.28), 0 2px 8px rgba(0,0,0,0.18), 0 0 0 3px rgba(160,125,91,0.30);
  user-select: none;
  touch-action: manipulation;
}
body.dark .chess-board {
  box-shadow: 0 8px 28px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.30), 0 0 0 3px rgba(100,76,44,0.50);
}

.chess-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 7.4vmin, 50px);
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.chess-cell.light { background: #ebd9b3; }
.chess-cell.dark  { background: #a07d5b; }
body.dark .chess-cell.light { background: #c5a87a; }
body.dark .chess-cell.dark  { background: #6a4c2c; }

.chess-cell.last-move {
  background: #d8c060 !important;
}
body.dark .chess-cell.last-move { background: #8e7a3a !important; }

.chess-cell.selected { background: #f5d758 !important; }
.chess-cell.in-check { background: #f65e3b !important; }

.chess-cell .move-dot,
.chess-cell .capture-ring {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.chess-cell .move-dot {
  width: 28%; height: 28%;
  background: rgba(0, 0, 0, 0.28);
}
.chess-cell .capture-ring {
  width: 86%; height: 86%;
  border: 4px solid rgba(0, 0, 0, 0.28);
}
body.dark .chess-cell .move-dot {
  background: rgba(255, 255, 255, 0.32);
}
body.dark .chess-cell .capture-ring {
  border-color: rgba(255, 255, 255, 0.32);
}

.piece {
  user-select: none;
  pointer-events: none;
  font-family: "Noto Sans Symbols", "Segoe UI Symbol", "Apple Symbols", sans-serif;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
  transition: transform 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  height: 88%;
}

.piece-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.chess-cell:hover .piece {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.40));
  transform: scale(1.18);
}

.promote-row button .piece-img {
  width: 36px;
  height: 36px;
}

/* Coordinates corners */
.chess-cell .coord {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.chess-cell .coord.file { right: 2px; bottom: 1px; }
.chess-cell .coord.rank { left: 2px; top: 1px; }
.chess-cell.dark .coord { color: rgba(255, 255, 255, 0.55); }

.captured-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  width: min(94vmin, 480px);
  margin-left: auto;
  margin-right: auto;
}
.captured {
  min-height: 24px;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 100;
  animation: fadein .25s ease-in-out;
}
.overlay[hidden] { display: none; }
.overlay-text {
  font-size: clamp(36px, 8vmin, 56px);
  font-weight: 800;
  color: var(--text-strong);
  text-align: center;
}
.overlay-sub {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 600;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.promote-row {
  display: flex;
  gap: 8px;
}
.promote-row button {
  font-size: 36px;
  width: 56px;
  height: 56px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  font-family: inherit;
  line-height: 1;
}
.promote-row button:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}