/* Sudoku: bàn 9×9 vuông vừa một màn hình, khối 3×3 kẻ đậm, dãy số + công cụ bên dưới cùng bề rộng bàn. */
.sdk { --w: min(94vw, 480px, calc(100dvh - 250px)); width: var(--w); gap: 10px; }
.tools { width: 100%; display: flex; gap: 6px; }
.tools > * { flex: 1; min-width: 0; padding: 7px 6px; }
.tools select { flex: 1.2; cursor: pointer; }
.badge { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #f59e0b; color: #1b1300; font-size: 11px; display: inline-grid; place-items: center; }
.badge:empty { display: none; }
.erase { color: #ff9ea1; }
#wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; }
#grid {
  width: 100%; height: 100%; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  border: 3px solid #e8f1fa; border-radius: 10px; overflow: hidden; background: #0f1822; box-shadow: 0 10px 30px #0006;
}
#grid > div {
  display: grid; place-items: center; cursor: pointer; border-right: 1px solid #2a4560; border-bottom: 1px solid #2a4560;
  font-size: calc(var(--w) * .062); font-variant-numeric: tabular-nums; transition: background-color 75ms;
}
#grid > .br { border-right: 3px solid #e8f1fa; }
#grid > .bb { border-bottom: 3px solid #e8f1fa; }
#grid > .given { color: #fff; font-weight: 800; }
#grid > .user { color: #6cb6ff; font-weight: 600; }
#grid > .rel { background: #17324d; }
#grid > .sel { background: #2f7fe0; color: #fff; }
#grid > .err { background: #5a1d24; color: #ff9ea1; }
#grid > .sel.err { background: #b3343f; color: #fff; }
.notes { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); padding: 1px; pointer-events: none; }
.notes i { font-style: normal; font-size: calc(var(--w) * .022); line-height: 1; display: grid; place-items: center; color: var(--muted); font-weight: 600; }
#grid > .sel .notes i { color: #dbeafe; }
.overlay .big { font-size: 20px; padding: 12px 28px; border-radius: 999px; }
.numpad { width: 100%; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.numpad button { padding: 0; aspect-ratio: 4 / 5; max-height: 52px; width: 100%; font-size: calc(var(--w) * .055); font-weight: 600; color: #6cb6ff; }
@media (hover: hover) and (pointer: fine) { .sdk { --w: min(94vw, 520px, calc(100dvh - 230px)); } }