:root{--sudoku-ink:#243131;--sudoku-line:#243131;--sudoku-soft:#f7efe0;--sudoku-good:#1f706b}
.sudoku-layout .play-area{display:grid;place-items:center;min-height:0;padding:clamp(14px,3vw,34px);background:linear-gradient(135deg,#e9f0de,#d4ebe5 52%,#f4dfbd)}
.sudoku-stage{width:min(94vmin,680px);max-width:100%;display:grid;gap:14px}
.sudoku-board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:3px solid var(--sudoku-line);background:#fffdf8;box-shadow:0 16px 36px rgb(36 49 49 / .16)}
.cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;border:1px solid #c9d2cd;background:#fffdf8;color:var(--sudoku-ink);font:inherit;font-size:clamp(18px,4vmin,34px);font-weight:700;cursor:pointer}
.cell:nth-child(3n){border-right:2px solid var(--sudoku-line)}
.cell:nth-child(9n){border-right:0}
.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--sudoku-line)}
.cell.given{background:var(--sudoku-soft);cursor:default}
.cell.selected{outline:4px solid #f4c866;outline-offset:-4px;z-index:2}
.cell.peer{background:#eef7f3}
.cell.same:not(.empty){background:#dcefe8}
.cell.mistake{color:#b83f33;background:#fff0ec}
.cell .value{line-height:1}
.notes{position:absolute;inset:5px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);align-items:center;justify-items:center;color:#687a75;font-size:clamp(8px,1.55vmin,13px);font-weight:700;line-height:1}
.notes span{min-width:1ch;min-height:1em}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
.stats span{padding:7px 8px;border-radius:8px;background:#f4f8f2;color:#536b67;font-size:12px}
.stats b{color:#243131}
.status-panel p{min-height:38px;margin:0}
.difficulty-panel{display:grid;grid-template-columns:1fr;gap:6px}
.difficulty-panel label{font-size:12px;font-weight:700;color:#536b67}
.difficulty-panel select{width:100%;padding:8px 9px;border:1px solid #b8cac7;border-radius:7px;background:#fffdf8;color:#243131;font:inherit;font-weight:700}
.controls-panel{display:grid;gap:10px}
.note-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #d9e3df;border-radius:8px;background:#f8fbf5;color:#243131;font-weight:700}
.note-toggle input{width:18px;height:18px;accent-color:var(--sudoku-good)}
.number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.number-pad button,.controls-panel #erase{min-height:38px;border:1px solid #b8cac7;background:#fffdf8;font:inherit;font-size:18px;cursor:pointer}
.number-pad button:hover,.controls-panel #erase:hover{background:#f6ecd6}
.controls-panel #erase{width:100%;font-size:14px}
.note{font-size:10px;color:#84918d;margin:10px 2px}
dialog{border:0;border-radius:16px;max-width:330px;padding:24px;box-shadow:0 12px 40px #1237;color:#243131}
dialog::backdrop{background:#16313b77}
dialog h2{font-size:28px;margin-bottom:8px}
dialog button{margin-top:12px;padding:9px 14px;border-radius:7px;border:0;font:inherit;font-weight:700}
@media(max-width:900px){.sudoku-layout .play-area{min-height:auto}.sudoku-stage{width:min(94vw,640px)}}
@media(max-width:560px){.sudoku-layout .game-sidebar h1{font-size:38px}.sudoku-layout .play-area{padding:12px}.sudoku-board{border-width:2px}.cell{font-size:clamp(17px,7vw,28px)}.notes{inset:3px;font-size:clamp(7px,2.7vw,11px)}.stats{grid-template-columns:1fr}}