/* The grid: thin lines between cells, thick ones between boxes. */
.board {
  --size: 9;
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);
  width: 100%;
  max-width: min(100%, calc(100dvh - 400px));
  min-width: min(100%, 280px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  user-select: none;
  -webkit-user-select: none;
}

.cell {
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--b);
  font: inherit;
  font-size: calc(min(100vw - 38px, 442px, 100dvh - 406px) / var(--size) * 0.55);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cell.last-col { border-right: 0; }
.cell.last-row { border-bottom: 0; }
.cell.box-right { border-right: 3px solid var(--line-strong); }
.cell.box-bottom { border-bottom: 3px solid var(--line-strong); }
.cell.given { color: var(--text); font-weight: 800; }
.cell.related { background: var(--surface-2); }
.cell.same { background: var(--hint); }
.cell.selected { background: var(--hint); box-shadow: inset 0 0 0 3px var(--focus); }
.cell.error { color: var(--error); background-image: repeating-linear-gradient(-45deg, var(--error-bg) 0 5px, transparent 5px 10px); }
.cell.flash { animation: flash 0.9s ease; }
.cell:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.board.solved .cell { animation: pop 0.5s ease both; animation-delay: calc(var(--wave) * 35ms); }

/* The number pad: one row for small grids, two for 9×9. */
.pad {
  --keys: 5;
  display: grid;
  grid-template-columns: repeat(var(--keys), 1fr);
  gap: 8px;
  max-width: 420px;
  margin: 14px auto 0;
}
.pad button {
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pad button:active:not(:disabled) { background: var(--surface-2); }
.pad button.used { opacity: 0.35; }
[data-theme="fun"] .pad button { border: 0; background: var(--surface-2); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); font-family: var(--display); }
[data-theme="fun"] .pad button:active:not(:disabled) { translate: 0 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }