/* sudoku.css — cuadrícula técnica accesible; adaptable a 360px */
.sudoku{--ok:#1a7f37;--ko:#b3261e;--acc:#1a5fb4;--line:#777;font-family:system-ui,sans-serif;max-width:560px;margin:0 auto;padding:8px;color:#1b1b1b}
.sudoku button{min-height:44px;min-width:44px;font-size:1rem;border:2px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.sudoku button:disabled{opacity:.45;cursor:not-allowed}
.sudoku button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.sudoku .goal{background:#f0f4ff;border-radius:8px;padding:8px}
.sudoku .grid{display:grid;gap:0;margin:10px 0;border:3px solid #222;background:#222;width:100%;max-width:480px}
.sudoku .grid[data-size="4"]{grid-template-columns:repeat(4,1fr)}
.sudoku .grid[data-size="6"]{grid-template-columns:repeat(6,1fr)}
.sudoku .grid[data-size="9"]{grid-template-columns:repeat(9,1fr)}
.sudoku .cell.bb{border-bottom:3px solid #222}
.sudoku .cell.br{border-right:3px solid #222}
.sudoku .cell{border:1px solid #999;border-radius:0;background:#fff;font-size:1.3rem;min-width:0;min-height:0;aspect-ratio:1;padding:0}
.sudoku .cell.given{font-weight:700;background:#efefef}
.sudoku .cell.related{background:#eef4ff}
.sudoku .cell.selected{outline:3px solid var(--acc);outline-offset:-3px}
.sudoku .cell.conflict{background:#fdeceb;color:var(--ko)}
.sudoku .cell.stepped{background:#fff3cd}
.sudoku .cell.sol{background:#e8e8ff;color:#3333aa;font-style:italic}
.sudoku .grid[data-size="4"] .cell{font-size:1.6rem}
.sudoku .notes{display:grid;grid-template-columns:repeat(3,1fr);font-size:.6rem;line-height:1;color:#555;padding:2px}
.sudoku .digits{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.sudoku .actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.sudoku .hint{ background:#fff8e1;border-radius:6px;padding:8px}
.sudoku .feedback{padding:8px;border-radius:6px}
.sudoku .feedback.ok{background:#e9f7ee;color:var(--ok)}
.sudoku .feedback.ko{background:#fdeceb;color:var(--ko)}
.sudoku .progress{font-size:.9rem;color:#444}
.sudoku details{background:#f0f4ff;border-radius:8px;padding:8px;margin:8px 0}
.sudoku .bands{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.sudoku .bands button.on{outline:3px solid var(--acc)}
@media (max-width:400px){.sudoku .cell{font-size:1.05rem}.sudoku button{min-width:40px;min-height:40px}}
@media (prefers-reduced-motion:reduce){.sudoku *{transition:none!important}}