
.board{position:relative}.cell{padding:0;border-top:0;border-left:0;border-radius:0;cursor:pointer;position:relative;aspect-ratio:1}.cell.given{font-weight:800}.cell.entered{color:#3c7ba0}.cell.peer{background:#edf2e7}.cell.same{background:#e0ebd6}.cell.selected{background:#cddfc0;box-shadow:inset 0 0 0 2px #62846b}.cell.conflict{color:#bd563e;background:#fcebe2}.cell:focus-visible{outline:2px solid #ee805c;outline-offset:-3px;z-index:1}.notes-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);padding:2px;font:500 10px system-ui;line-height:1}.notes-grid span{display:grid;place-items:center}.key{cursor:pointer;font:600 15px system-ui;color:#496545;min-width:34px}.key:hover{background:#e9eee2}.key:disabled{opacity:.35;cursor:default}.game-tools{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:17px}.game-tools button{border:1px solid #dce5d3;background:#f6f8f0;color:#587052;padding:9px 12px;border-radius:8px;font-size:11px}.game-tools button[aria-pressed=true]{background:#183e35;color:white}.game-status{min-height:23px;font-size:12px;text-align:center;color:#718079;margin:15px 0 0}.game-status.win{color:#315c32;font-weight:700}.game-date{font-size:11px!important;color:#718079}.coming{display:none}.notes-grid span{min-width:0}.cell[disabled]{cursor:default}.completion{background:#e9eee2;border-radius:10px;padding:12px;font-size:12px;text-align:center;margin-top:12px}.board-caption{margin-top:18px}@media(max-width:420px){.key{min-width:29px;padding:8px}.notes-grid{font-size:8px}.game-tools button{padding:9px}}

/* Shared puzzle controls and completion layout. */
.board-caption{font-size:14px;color:#4d6659;line-height:1.7}.rule p,.intro-panel p{font-size:14px;color:#4d6659}.game-status{font-size:14px;color:#4d6659;line-height:1.6;min-height:24px}.game-date{font-size:13px!important;color:#4d6659}.under-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;max-width:440px;margin:24px auto 0}.key{min-width:0;min-height:46px;padding:8px 0;font-size:18px;color:#34523c;border-color:#b9c9bc}.game-tools{gap:8px}.game-tools button{min-height:44px;padding:10px 15px;font-size:13px;color:#34523c;border-color:#b9c9bc}.game-tools button:disabled{opacity:.45;cursor:default}.completion-panel{margin:24px 0 0;padding:26px 22px;background:#e9eee2;border:1px solid #c9d8c2;border-radius:18px;text-align:center}.completion-panel[hidden]{display:none}.completion-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#183e35;color:white;font-size:22px}.completion-panel h2{font:800 24px Manrope,Arial,sans-serif;margin:14px 0 10px;letter-spacing:-.6px}.completion-panel p{font-size:14px;line-height:1.7;color:#4d6659;margin:0}.completion-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}.completion-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 16px;border:1px solid #9fb69e;border-radius:10px;font-size:13px;font-weight:700}.completion-actions a:first-child{background:#183e35;color:#fff;border-color:#183e35}.board-panel,.side{min-width:0}@media(max-width:600px){.completion-actions{flex-direction:column}.board-caption{font-size:13px}.game-tools button{padding:10px 12px}.rule p{font-size:14px}.under-board{gap:4px}.key{font-size:17px;min-height:46px}}@media(max-width:360px){.sudoku-main{margin-left:14px;margin-right:14px}.board-panel{padding:20px 12px}.key{min-height:44px}.completion-panel{padding:22px 16px}}

.key.number-filled:disabled{opacity:1;background:#e9eee2;border-color:#c9d8c2;color:#62846b;font-size:20px;cursor:default}

/* Completion dialog */
dialog.completion-panel{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto;padding:36px 30px;border:1px solid #c9d8c2;background:#f7f8f2;border-radius:24px;box-shadow:0 24px 90px #183e3533;color:#183e35}dialog.completion-panel::backdrop{background:#183e3566;backdrop-filter:blur(3px)}.completion-panel .completion-mark{width:52px;height:52px;font-size:28px}.completion-panel .completion-actions{flex-direction:column}.completion-actions button{min-height:46px;padding:12px 16px;border:1px solid #9fb69e;border-radius:10px;background:#e9eee2;color:#183e35;font:700 14px 'DM Sans',Arial,sans-serif;cursor:pointer}.completion-stay{background:transparent;border:0;color:#4d6659;font:500 13px 'DM Sans',Arial,sans-serif;text-decoration:underline;text-underline-offset:4px;padding:14px 8px;margin-top:12px;min-height:44px;cursor:pointer}@media(max-width:420px){dialog.completion-panel{padding:30px 22px}}

.key{position:relative}.key.number-filled:disabled{font-size:18px;color:#45644f}.key.number-filled::after{content:'✓';position:absolute;top:2px;right:3px;font-size:11px;font-weight:800;line-height:1;color:#315c32;background:#e9eee2;border-radius:50%;padding:1px}.notes-mode-indicator{width:fit-content;max-width:100%;margin:16px auto 0;padding:7px 12px;background:#183e35;color:white;border-radius:20px;font-size:12px;text-align:center}.notes-mode-indicator[hidden]{display:none}.cell.check-error{background:#fcebe2;color:#983d2b;box-shadow:inset 0 0 0 2px #bd563e}.board{width:min(100%,470px);max-width:470px}.under-board{max-width:470px}@media(max-width:600px){.key.number-filled:disabled{font-size:17px}.key.number-filled::after{right:2px;font-size:10px}}

.game-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0;min-height:0}.game-status.status-visible{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:15px 0 0;min-height:24px}

.notes-grid{font-size:12px;font-weight:600;padding:1px;color:#345f75}.game-tools #check{min-width:76px}.game-tools #check.check-success{background:#e9eee2;border-color:#62846b;color:#315c32}@media(max-width:600px){.notes-grid{font-size:10px}}@media(max-width:360px){.notes-grid{font-size:9px}}

.auto-clean-setting{display:flex;align-items:center;justify-content:center;gap:9px;margin:18px 0 0;font-size:12px;line-height:1.6;color:#4d6659;cursor:pointer;min-height:44px}.auto-clean-setting input{width:18px;height:18px;accent-color:#183e35;flex-shrink:0}.reset-dialog{width:min(440px,calc(100% - 32px));padding:30px;border:1px solid #c9d8c2;border-radius:22px;background:#f7f8f2;color:#183e35}.reset-dialog::backdrop{background:#183e3566;backdrop-filter:blur(3px)}.reset-dialog h2{font:800 24px Manrope,Arial;margin:0 0 14px}.reset-dialog p{font-size:14px;line-height:1.8;color:#4d6659}.reset-actions{display:flex;gap:10px;margin-top:24px}.reset-actions button{flex:1;border:1px solid #b9c9bc;border-radius:10px;padding:12px;font:600 13px 'DM Sans',Arial;min-height:44px;background:#e9eee2;color:#183e35}.reset-actions #reset-confirm{background:#183e35;color:white}

/* Fixed candidate positions, independent of which notes are present. */
.notes-grid{position:absolute;inset:0;width:auto;height:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:0;align-content:stretch;justify-content:stretch}.notes-grid span{min-width:0;min-height:0;line-height:1;display:grid;place-items:center;font-variant-numeric:tabular-nums}

/* Keep the mode visible in a fixed space above the board. */
body[data-difficulty] .board-top:has(.notes-mode-indicator){display:flex;justify-content:center;margin:0 0 10px;min-height:30px}
body[data-difficulty] .notes-mode-indicator{display:inline-flex;align-items:center;justify-content:center;width:100px;height:30px;margin:0;padding:4px 10px;border-radius:8px;background:#eef2e8;color:#4d6659;font-size:12px;box-sizing:border-box}
body[data-difficulty] .notes-mode-indicator.active{background:#183e35;color:#fff}
.under-board:has(.clear-key){grid-template-columns:repeat(10,minmax(0,1fr))}

.how-to-play{border-top:1px solid #e1e6dd;margin-top:18px;padding-top:16px}.how-to-play h3{font-size:14px;margin:0 0 8px}.how-to-play p{font-size:13px;line-height:1.7;color:#4d6659;margin:8px 0}

/* The mode indicator is the single Notes toggle. */
body[data-difficulty] button.notes-mode-indicator{border:1px solid #b9c9bc;min-height:44px;height:44px;width:112px;font:600 12px 'DM Sans',Arial,sans-serif;cursor:pointer}
body[data-difficulty] button.notes-mode-indicator.active{border-color:#183e35}
body[data-difficulty] button.notes-mode-indicator:disabled{opacity:.45;cursor:default}
body[data-difficulty] button.notes-mode-indicator:focus-visible{outline:2px solid #ee805c;outline-offset:3px}
