/* Sudoku 6x6: six rows of six cells, blocks of 2 rows by 3 columns marked by thicker lines. */
.sudoku { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); border: 3px solid var(--ink); border-radius: 1rem; overflow: hidden; background: var(--card); }
.sudoku button { border: 0; border-right: 1px solid #d9d0e2; border-bottom: 1px solid #d9d0e2; background: var(--card); font: 800 clamp(1.5rem, 7vw, 2.25rem) var(--title); color: var(--orange); padding: 0; cursor: pointer; }
.sudoku button:nth-child(3n) { border-right: 3px solid var(--ink); }
.sudoku button:nth-child(6n) { border-right: 0; }
.sudoku button:nth-child(n+7):nth-child(-n+12), .sudoku button:nth-child(n+19):nth-child(-n+24) { border-bottom: 3px solid var(--ink); }
.sudoku button:nth-child(n+31) { border-bottom: 0; }
.sudoku .given { color: var(--ink); cursor: default; }
.sudoku .same { background: #f6f1fb; }
.sudoku .picked { background: var(--lilac); }
.sudoku .wrong { color: #c62828; background: #fdecec; }
.sudoku .hinted { color: var(--green); }
.keypad { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.keypad button { font: 800 1.375rem var(--title); color: var(--ink); background: #f1edf4; border: 0; border-radius: .9rem; padding: .7rem 0; cursor: pointer; }
.keypad .erase { grid-column: span 1; font-size: 1rem; }
.finished .keypad { opacity: .45; pointer-events: none; }