/* Three line weights, and the digits are brighter than all of them: hairline
   between cells, --p-rule for the box lines and the frame, rather than the
   text colour the cage used to be drawn in.

   Every line is drawn exactly once, by the cell to its right or below it -
   see ".cell" for why the gutter this board used to have cannot carry them. */
#board {
  display: grid;
  grid-template-columns: repeat(9, minmax(30px, 42px));
  grid-template-rows: repeat(9, minmax(30px, 42px));
  gap: 0;
  background: var(--cell-bg);
  border: 2px solid var(--p-rule);
}

/* Left and top only, never right or bottom: a shared edge is then drawn by one
   cell rather than by both, which is the doubling that borders on all four
   sides produce. It is also why the ruling is a border here and not the gutter
   Minesweeper uses - a gutter shows the board's own ground, so a heavier box
   line has to be drawn *beside* it by a cell, and the two land a pixel apart
   and notch at every crossing. Drawn this way the box lines mitre into each
   other instead. */
.cell {
  position: relative;
  background: var(--cell-bg);
  border: 0;
  border-left: 1px solid var(--p-hairline);
  border-top: 1px solid var(--p-hairline);
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Your digits, in the guest hue the palette assigns them. The puzzle's own
     are .given below, in the chrome's amber - so which half of the board is
     yours is carried by hue rather than by two shades of one. */
  color: var(--p-cyan);
  user-select: none;
}

/* The frame draws the board's own outer edge, so the first row and column draw
   nothing of their own - otherwise every corner carries the frame and a
   hairline a pixel inside it. */
.cell:nth-child(-n + 9) {
  border-top: 0;
}

.cell:nth-child(9n + 1) {
  border-left: 0;
}

/* Thicker lines every 3rd row/column mark the 3x3 boxes. nth-child is 1-based,
   so column/row 4 and 7 are where a new box starts. */
.cell:nth-child(9n + 4),
.cell:nth-child(9n + 7) {
  border-left: 2px solid var(--p-rule);
}

.cell:nth-child(n + 28):nth-child(-n + 36),
.cell:nth-child(n + 55):nth-child(-n + 63) {
  border-top: 2px solid var(--p-rule);
}

/* Clickable like any other cell - selecting one lights its peers - so it keeps
   the pointer. It just takes no digit. */
.cell.given {
  color: var(--fg);
}

/* The scan: every cell the selected one shares a row, column or box with, so
   the constraint you are working against is lit rather than counted. Ground
   only - the ring below is what says which cell is actually selected.

   The wash is kept low so the board's own gap still reads through it: raise it
   and the ruling inside the cross washes out towards the line colour, which is
   exactly where you are counting along a row. Giving each lit cell its own
   inset ring instead was tried and is wrong - two adjacent lit cells then draw
   a line each side of the gap and the pair reads as a double rule. The cells
   carry no borders for the same reason. */
.cell.peer {
  background: color-mix(in srgb, var(--accent) 6%, var(--cell-bg));
}

.cell:hover {
  background: var(--p-panel-lit);
}

/* An inset ring rather than a border, because the cells carry none and one
   here would shift the 81-cell grid by a pixel. Chess and Minesweeper both
   mark a square this way. */
.cell.selected,
.cell.selected:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--cell-bg));
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cell.wrong {
  color: var(--lose);
}

.cell.won {
  color: var(--win);
}

#number-pad {
  /* The pad sits directly under the board in the stack, so it owns the gap
     between them - nothing else is between the two. It is narrower than the
     board, so it centres under it rather than hanging off the left edge. */
  margin: 0.6rem auto 0;
  width: max-content;
  display: grid;
  grid-template-columns: repeat(5, 42px);
  gap: 4px;
}

/* A terminal key, like .btn in shared.css - square, hairline-edged, lit on
   hover. It was the last rounded thing on the site. */
.num-btn {
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--cell-border);
  border-radius: 0;
  background: var(--card-bg);
  color: var(--fg);
  cursor: pointer;
}

.num-btn:hover {
  border-color: var(--p-rule);
  color: var(--p-pale);
}

/* Sized off the digit beside it rather than off the button, so the row reads
   as ten keys of one weight. */
.num-btn.erase .ico {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  margin: 0 auto;
}

/* First click of the two-step confirm on Restart / New puzzle - discarding
   entered digits cannot be undone. */
.controls .btn.confirming {
  background: var(--lose);
  border-color: var(--lose);
  color: var(--p-ground);
}

.instructions h3 {
  margin: 0.7rem 0 0.3rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.instructions h3:first-child {
  margin-top: 0;
}

.instructions li:last-child {
  margin-bottom: 0;
}