/* Shared square-grid kit: sizing via --cell + optional gridlines.

Usage:
- Put class="sq-board" on the grid container and set grid-template-columns in JS.
- Put class="sq-cell" on each cell.
- Add sq-lines to draw subtle gridlines once at the board level.
*/

.sq-board{
  display: grid;
  gap: 0;
  justify-content: center;
  touch-action: manipulation;
  user-select: none;

  /* default cell size; JS should override */
  --cell: 20px;

  padding: 0;
  border-radius: 10px;
}

.sq-cell{
  width: var(--cell);
  height: var(--cell);
}

/* Draw gridlines once (avoids double-thick seams from per-cell borders). */
.sq-board.sq-lines{
  --gridline: rgba(230,237,246,0.06);
  background-image:
    linear-gradient(to right, var(--gridline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gridline) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: 0 0;
}