/* Sudoku: stone. A newspaper-puzzle grid: the printed clues in the slab
   face, your numbers in blue in the sans, heavy lines around each box, and a
   warm highlight on the square you're on. */

:root {
  --stone: #d6cfc4; --pen: #2f5d9e; --sel: #fbe5a0; --peer: #f5f2ec; --same: #e8dfcc;
  --clash: #c8372d; --clash-bg: #fde6e2; --thin: #d8d2c7;
}
.sudoku { --game: var(--stone); gap: 14px; padding-top: 14px; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.levels { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--wash); }
.levels .lv { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 14px var(--ui); color: var(--muted); }
.levels .lv.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.clock { margin: 0; font: 700 17px var(--ui); font-variant-numeric: tabular-nums; }

.grid {
  display: grid; grid-template-columns: repeat(9, 1fr); width: 100%; aspect-ratio: 1;
  border: 2.5px solid var(--ink); background: var(--paper); user-select: none;
}
.cell {
  position: relative; display: grid; place-items: center; min-width: 0; padding: 0;
  border: 0; border-right: 1px solid var(--thin); border-bottom: 1px solid var(--thin); border-radius: 0;
  background: var(--paper); cursor: pointer; font: 500 clamp(20px, 6.6vw, 28px)/1 var(--ui); color: var(--pen);
  font-variant-numeric: lining-nums tabular-nums;
}
.cell:nth-child(9n) { border-right: 0; }
.cell:nth-child(n + 73) { border-bottom: 0; }
.cell.rb { border-right: 2.5px solid var(--ink); }
.cell.bb { border-bottom: 2.5px solid var(--ink); }
.cell.given { font: 700 clamp(21px, 6.8vw, 29px)/1 var(--slab); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.cell.peer { background: var(--peer); }
.cell.same { background: var(--same); }
.cell.sel { background: var(--sel); }
.cell.bad { color: var(--clash); }
.cell.bad:not(.sel) { background: var(--clash-bg); }
.cell:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.pencil { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); }
.pencil i { display: grid; place-items: center; font: 600 clamp(8px, 2.4vw, 11px)/1 var(--ui); font-style: normal; color: #7a7366; }

.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
  border: 0; border-radius: 8px; background: none; cursor: pointer; font: 600 13px var(--ui); color: var(--ink);
}
.tool:hover { background: var(--wash); }
.tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool b { font-weight: 700; color: var(--muted); }
.tool.on { color: var(--pen); }
.tool.on b { color: var(--pen); }

.pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.num {
  height: 56px; padding: 0; border: 0; border-radius: 8px; background: var(--wash); cursor: pointer;
  font: 600 clamp(22px, 6.5vw, 28px)/1 var(--slab); color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
}
.num:hover { background: #ebe7df; }
.num:active { transform: scale(0.95); }
.num.full { color: #c2bcb1; }

body.over .grid { pointer-events: none; }
body.over .tools, body.over .pad { opacity: 0.4; pointer-events: none; }

@media (min-width: 520px) { .grid { max-width: 468px; margin: 0 auto; } }