/* Sudoku 6x6: six rows of six cells, blocks of 2 rows by 3 columns marked by thicker lines. */
.sudoku { position: relative; 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(--ink); padding: 0; cursor: pointer; }   /* every number in the same colour (Daniel, 12/10/2026) */
.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); background: #efeaf3; cursor: default; }   /* the fixed numbers: a different background (Daniel, 12/10/2026) */
.sudoku .same { background: #f6f1fb; }
.sudoku .picked { background: var(--lilac); }
.sudoku .wrong { color: #c62828; background: repeating-linear-gradient(45deg, #fde6e6 0 .35rem, #f6c4c4 .35rem .7rem); }   /* a repeated number: the cell hatched (Daniel, 12/10/2026) */
.sudoku .hinted { background: #e6f3e7; }   /* a number from Dica: a soft green cell, the number in the same colour as the others */
.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; }
.unit-glow { position: absolute; z-index: 5; pointer-events: none; border-radius: .5rem;   /* a block, row or column completed right (game.js outline): the board's colour, glowing outward */
  box-shadow: 0 0 0 3px var(--ink), 0 0 .9rem .3rem rgba(71, 6, 109, .55), 0 0 2rem .6rem rgba(165, 114, 228, .45); }
.unit-glow.whole { border-radius: 1rem; box-shadow: 0 0 0 3px var(--ink), 0 0 1.2rem .45rem rgba(71, 6, 109, .55), 0 0 2.6rem .9rem rgba(165, 114, 228, .5); }