:root{--bg:#f4f5f7;--panel:#fff;--text:#1d2433;--muted:#6b7385;--line:#c3c8d4;--thick:#1d2433;--accent:#3b6df0;--accent-t:#fff;--sel:#cfdcff;--peer:#e8eefc;--same:#bcd0ff;--given:#1d2433;--user:#2f5bd8;--err:#d63a3a;--err-bg:#fde3e3}
:root[data-theme=dark]{--bg:#12151c;--panel:#1b1f2a;--text:#e8ebf2;--muted:#8e97ab;--line:#3a4152;--thick:#9aa4bd;--accent:#6f94ff;--accent-t:#0d1220;--sel:#2c3f78;--peer:#232a3b;--same:#34498c;--given:#e8ebf2;--user:#8fb0ff;--err:#ff7a7a;--err-bg:#4a2326}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#app{max-width:480px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px)}
header,.bar,.stats{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
h1{font-size:1.4rem;margin:0}
button,select{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.chip{min-width:44px}.primary{background:var(--accent);color:var(--accent-t);border-color:var(--accent);font-weight:600}
[hidden]{display:none!important}.left,.tools{display:flex;align-items:center;gap:8px}.stats{color:var(--muted);font-size:.95rem}
#board{--s:calc((min(100vw,480px) - 24px)/9);display:grid;grid-template-columns:repeat(9,1fr);border:2px solid var(--thick);background:var(--panel);aspect-ratio:1}
.cell{position:relative;display:flex;align-items:center;justify-content:center;border:0;border-radius:0;padding:0;background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:calc(var(--s)*.56);color:var(--user);line-height:1}
.cell.g{color:var(--given);font-weight:700}
.cell.bR{border-right:2px solid var(--thick)}.cell.bB{border-bottom:2px solid var(--thick)}
.cell:nth-child(9n){border-right:0}.cell:nth-child(n+73){border-bottom:0}
.cell.err{background:var(--err-bg)}
.cell.peer{background:var(--peer)}.cell.same{background:var(--same)}.cell.sel{background:var(--sel)}
.cell .d.e{color:var(--err)}
.cell.bad{box-shadow:inset 0 0 0 2px var(--err)}
/* two numbers in one box: each at half size, diagonal corners */
.cell.two .d{position:absolute;font-size:calc(var(--s)*.28);font-weight:600}
.cell.two .d:first-child{top:9%;left:13%}
.cell.two .d:last-child{bottom:9%;right:13%}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 8px}
#pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
#pad button{padding:8px 0 5px;font-size:1.35rem;font-weight:600;color:var(--user);display:flex;flex-direction:column;align-items:center;line-height:1.15}
#pad small{font-size:.65rem;font-weight:500;color:var(--muted)}
#pad button.active{background:var(--accent);color:var(--accent-t);border-color:var(--accent)}#pad button.active small{color:var(--accent-t)}
#pad button.done{opacity:.35}
.msg{margin-top:10px;padding:12px;border-radius:10px;background:var(--accent);color:var(--accent-t);text-align:center;font-weight:700}
.msg.warn{background:var(--err-bg);color:var(--err)}
#menu .sub{color:var(--muted);margin:6px 0 14px;text-align:center}
.lvl{display:flex;width:100%;justify-content:space-between;align-items:center;padding:16px;margin-bottom:10px;font-size:1.1rem;text-align:left}
.lvl small{display:block;color:var(--muted);font-weight:400;font-size:.8rem;margin-top:2px}
.dots{color:var(--accent);letter-spacing:2px}
#btnContinue{width:100%;padding:16px;margin-bottom:16px;font-size:1.05rem}
.hint{color:var(--muted);font-size:.8rem;text-align:center;margin:10px 0 0}
/* starting (given) numbers are underlined */
.cell.g .d{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}