:root{
  --cell-size: 60px;
}
body{font-family: Arial, Helvetica, sans-serif; margin:0; padding:0;}
.hidden{display:none}
header{background:#222;color:#fff;padding:10px}
main{padding:16px}
.card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
/* The board will be a CSS grid with an aspect-ratio set by JS to keep cells square regardless of board dimensions. */
.board{display:grid; gap:0; margin:0 auto;}
.row{display:flex;gap:0 /* no gap between cells */}
.row .cell { width:var(--cell-size); height:var(--cell-size); }
/* Make sizing include borders so borders don't add extra space */
*, *::before, *::after { box-sizing: border-box; }
/* For grid-rendered boards (JS sets display:grid on .board), let cells stretch to the grid track size.
  For row-based rendering, `.row .cell` provides fixed sizing. */
.board > .cell { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f0d9b5; border:1px solid #b58863; margin:0; }
.cell.light { background: #f0d9b5; }
.cell.dark { background: #b58863; }
.board.flipped{transform:rotate(180deg)}
.piece{width:70%;height:70%;object-fit:contain}
.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.controls button{margin-left:8px}