/* sudoku Ninja: focused, mobile-first playing surface. */
:root{--yellow:#f5ce33;--paper:#fffdf4;--cream:#fff8dd;--ink:#25343a;--muted:#707569;--orange:#ec7139;--line:#e7dfbe;--grid:#a39c7a;--font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:#f6f3e9;color:var(--ink);font:14px var(--font)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border:0}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #b4471f;outline-offset:3px}a{color:inherit}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.site-header{max-width:484px;margin:22px auto 0;padding:0 12px 18px;display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;gap:9px;align-items:center;text-decoration:none;font-size:23px;letter-spacing:-1px;font-weight:750}.wordmark b{font-weight:900}.brand-mascot{display:block;width:42px;height:44px;object-fit:contain;flex:none}.icon-button{width:40px;height:40px;border:1px solid #dedacc;border-radius:50%;font-weight:700;background:transparent}
.layout{width:min(100% - 24px,484px);margin:auto}.game-card{position:relative;padding:18px;background:var(--paper);border:1px solid #e4dfcd;border-radius:16px}.difficulty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:#f1eddf;border-radius:9px;padding:3px}.difficulty button{min-height:40px;background:transparent;border-radius:6px;color:#62685d;font-size:13px;font-weight:650}.difficulty button[aria-pressed=true]{background:var(--yellow);color:var(--ink)}
.game-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:9px 0}.new-button{background:transparent;border-radius:6px;min-height:40px;padding:0 6px;font-size:12px;font-weight:650;white-space:nowrap}.new-button span{font-size:17px}.clock{display:flex;align-items:center;gap:7px}.clock time{font-size:15px;font-weight:650;letter-spacing:.8px;font-variant-numeric:tabular-nums}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.clock>svg{width:15px;height:15px;color:var(--muted)}.clock button{display:grid;place-items:center;width:40px;height:40px;padding:9px;background:transparent;border-radius:6px}.clock button svg{height:18px;width:18px;stroke-width:2}
.board-wrap{position:relative}#board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));aspect-ratio:1;border:2px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--paper)}.cell{padding:0;aspect-ratio:1;position:relative;display:grid;place-items:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);font-size:25px;line-height:1;font-weight:450;color:var(--ink);font-variant-numeric:tabular-nums;outline-offset:-4px!important}.cell.box-right{border-right:2px solid var(--grid)}.cell.box-bottom{border-bottom:2px solid var(--grid)}.cell.row-end{border-right:0}.cell.last-row{border-bottom:0}.cell.related{background:#fbf5da}.cell.same{background:#f8e99b;font-weight:750}.cell.entered{color:#bc5023}.cell.conflict{color:#bc3434;background:#fde5d8}.cell.selected{background:#f5d650;box-shadow:inset 0 0 0 2px var(--orange)}.cell.given{font-weight:650}.cell .pencil-grid{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:3px;font-size:10px;color:#647265;line-height:1;align-items:center}.pencil-grid span{min-height:10px;text-align:center}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.tools button{min-height:48px;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:#626b60}.tools svg{width:19px;height:19px}.tools button[aria-pressed=true]{background:#f9e8a6;color:#813f20;box-shadow:inset 0 0 0 1px #e6c36e}
#number-pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}#number-pad button{display:grid;place-items:center;min-height:52px;padding:0;background:#f5d54d;border-radius:6px;font-size:25px;font-weight:600}
#status:not(.sr-only),#save-state:not(.sr-only){font-size:12px;line-height:1.5;color:#874324;margin:12px 0 0}#save-state:not(.sr-only){margin-top:8px}footer{max-width:484px;margin:8px auto 0;padding:0 12px max(16px,env(safe-area-inset-bottom));text-align:center}footer button{min-height:40px;font-size:10px;color:#7a7e73;background:transparent}
#pause-cover{position:absolute;inset:0;background:var(--cream);border:2px solid var(--ink);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:3}#pause-cover[hidden]{display:none}.pause-mark{font-size:36px;color:var(--orange)}#pause-cover h3{font-size:20px;margin:15px 0 24px}.primary{background:var(--ink);color:white;border-radius:9px;padding:13px 20px;min-height:44px;font-weight:650;font-size:13px}.primary span{margin-left:12px}.secondary{background:#efeada;padding:13px 20px;min-height:44px;border-radius:9px;font-size:13px}
dialog{border:1px solid #dfd5b3;border-radius:16px;padding:28px;max-width:420px;width:calc(100% - 32px);color:var(--ink);background:var(--paper);box-shadow:0 24px 70px #17202f33}dialog::backdrop{background:#28313666;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:8px;top:8px;width:40px;height:40px;background:transparent;font-size:24px}.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:24px}#dialog-title{font-size:22px;margin:12px 0}#dialog-icon{color:var(--orange);font-size:28px}#dialog-body{font-size:13px;line-height:1.8;color:#626b60}#dialog-body p{margin:10px 0}#dialog-body strong{color:var(--ink)}.skip{position:absolute;top:-100px}.skip:focus{top:8px;left:10px;z-index:10;background:white;padding:12px}
@media(hover:hover){.new-button:hover,.icon-button:hover,.clock button:hover{background:#f4ebc7}.tools button:hover{background:#f2eedc}#number-pad button:hover{background:#f5c529}.cell:hover{box-shadow:inset 0 0 0 1px #dcad33}}
@media(max-width:520px){.site-header{margin:8px auto 0;padding:0 16px 8px}.layout{width:calc(100% - 20px)}.game-card{padding:12px;border-radius:12px}.wordmark{font-size:22px}.difficulty button{font-size:12px}.cell{font-size:23px}.cell .pencil-grid{font-size:9px;padding:2px}.tools{margin:8px 0}.tools button{font-size:11px;gap:5px}#number-pad{gap:4px}#number-pad button{font-size:23px;min-height:48px}.game-meta{margin:6px 0}footer{margin-top:4px}}
@media(max-width:350px){.game-card{padding:10px}.cell{font-size:21px}.tools button{font-size:10px}#number-pad{gap:3px}#number-pad button{font-size:21px;min-height:44px}}
@media(min-width:521px) and (max-height:800px){.site-header{max-width:414px;margin-top:10px;padding-bottom:8px}.layout{max-width:414px}.game-card{padding:14px}.tools{margin:6px 0}#number-pad button{min-height:48px}.game-meta{margin:5px 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}