/* board.css — the grid.
 *
 * No cell borders anywhere. An SVG overlay paints hairlines between cells and
 * thicker separators in the page's ground colour along region edges, so each
 * box reads as its own plate. Jigsaw regions come out right with no extra work.
 */

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--ground);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--plate);
}

.board-lines,
.board-cages {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: var(--radius);
}

.lines-hair line {
  stroke: var(--line);
  stroke-width: 1.4;
}

.lines-region line {
  stroke: var(--sep);
  stroke-width: 6.5;
  stroke-linecap: round;
}

.cage-outline line {
  stroke: var(--chalk-faint);
  stroke-width: 2.6;
  stroke-dasharray: 8 6.5;
  stroke-linecap: round;
  opacity: 0.8;
}

/* ---- cells -------------------------------------------------------------- */

.cell {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--plate);
  cursor: pointer;
  transition: background 0.13s ease;
}

.cell.is-window::after,
.cell.is-diag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass);
  opacity: 0.055;
  pointer-events: none;
}

.cell-value {
  position: relative;
  z-index: 2;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: calc(var(--cell-px) * 0.56);
  line-height: 1;
  color: var(--brass);
  font-weight: 500;
  transition: color 0.15s ease;
}

/* The given grid sits quiet and structural; what you put down is the warm,
   living part of the board. */
.cell.is-given .cell-value {
  color: var(--chalk-dim);
  font-weight: 600;
}

.cell-notes {
  position: absolute;
  inset: 7%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--note-cols), 1fr);
  align-content: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: calc(var(--cell-px) * 0.2);
  line-height: 1;
  color: var(--chalk-faint);
  pointer-events: none;
}

.note {
  display: grid;
  place-items: center;
  font-style: normal;
  visibility: hidden;
}
.note.on { visibility: visible; }

.cell.notes-auto .cell-notes { opacity: 0.62; }

.cage-sum {
  position: absolute;
  top: 5%;
  left: 8%;
  z-index: 3;
  font-size: calc(var(--cell-px) * 0.22);
  font-weight: 600;
  line-height: 1;
  color: var(--chalk-dim);
  letter-spacing: 0.01em;
  pointer-events: none;
}
.cell.has-cage-sum .cell-notes { inset: 30% 7% 7%; }

/* ---- states ------------------------------------------------------------- */

/* Highlights lift the plate rather than tint it — a brass wash over this
   petrol ground turns olive. The brass stays on the ring and the digit. */
.cell.is-peer { background: var(--plate-2); }
.cell.is-same { background: var(--plate-3); }
.cell.is-same .cell-value { color: var(--brass-bright); }
.cell.is-given.is-same .cell-value { color: var(--chalk); }

.cell.is-selected {
  background: var(--plate-3);
  box-shadow: inset 0 0 0 2px var(--brass);
  z-index: 4;
}

.cell.is-conflict .cell-value,
.cell.is-wrong .cell-value { color: var(--coral); }
.cell.is-wrong { background: var(--coral-soft); }

.cell.is-hint { background: var(--plate-2); }
.cell.is-hint-target { box-shadow: inset 0 0 0 1.5px var(--brass-line); }
.cell.is-hint-focus {
  background: var(--plate-3);
  box-shadow: inset 0 0 0 2px var(--brass);
}

.cell.mark-1 { background: rgba(79, 209, 165, 0.16); }
.cell.mark-2 { background: rgba(227, 168, 87, 0.18); }
.cell.mark-3 { background: rgba(255, 111, 111, 0.16); }

.board:not(.is-won) .cell.is-empty:hover { background: var(--plate-2); }

/* ---- motion ------------------------------------------------------------- */

@keyframes cell-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  45% { transform: translateX(3px); }
  70% { transform: translateX(-2px); }
}
.cell.shake { animation: cell-shake 0.42s ease; }

@keyframes cell-reveal {
  0% { background: var(--brass); }
  100% { background: var(--plate); }
}
.cell.reveal { animation: cell-reveal 0.7s ease; }

@keyframes cell-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.board.is-won .cell {
  animation: cell-pop 0.52s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  animation-delay: calc(var(--wave, 0) * 42ms);
}
.board.is-won { box-shadow: 0 0 0 1px var(--jade), var(--shadow-2); }
.board.is-won .cell-value { color: var(--jade); transition: color 0.5s ease; }

/* ---- size tuning -------------------------------------------------------- */

/* Stroke widths live in viewBox units, and the viewBox scales with the number
   of cells — so each size needs its own value to look identically weighted. */
.board-n16 .cell-value { font-size: calc(var(--cell-px) * 0.52); }
.board-n16 .cell-notes { font-size: calc(var(--cell-px) * 0.19); inset: 5%; }
.board-n16 .lines-region line { stroke-width: 9; }
.board-n16 .lines-hair line { stroke-width: 2.5; }

.board-n6 .cell-value { font-size: calc(var(--cell-px) * 0.5); }
.board-n6 .lines-region line { stroke-width: 3.9; }
.board-n6 .lines-hair line { stroke-width: 0.95; }
.board-n6 .cage-outline line { stroke-width: 1.9; stroke-dasharray: 5.5 4.5; }