*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a1626;--panel: #14243c;--line: #2a4265;--text: #eaf2ff;--muted: #8fa8cc;--accent: #00c2a8;--given: #eaf2ff;--user: #4dd6ff;--error: #ff5e78}html,body{height:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(900px 500px at 50% -60px,#12294a,var(--bg));color:var(--text);overflow:hidden;touch-action:manipulation}#app{height:100%;display:flex;flex-direction:column;align-items:center}.bar{width:100%;max-width:540px;display:flex;align-items:center;gap:10px;padding:10px 14px}.back{color:var(--muted);text-decoration:none;font-size:1.4rem;padding:2px 8px}.stat{display:flex;flex-direction:column;align-items:center;min-width:54px;flex:1}.stat .label{font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.stat span:last-child{font-size:1.05rem;font-weight:700}.bar-buttons{display:flex;gap:6px}.bar-buttons button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:9px;font-size:1rem;width:38px;height:38px;cursor:pointer}#board-wrap{width:100%;display:flex;justify-content:center;padding:4px 10px}#board{display:grid;grid-template-columns:repeat(9,1fr);background:var(--line);gap:1px;border:2px solid var(--line);border-radius:10px;overflow:hidden;width:min(94vw,62vh,500px);aspect-ratio:1;user-select:none;-webkit-user-select:none}.cell{background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:calc(min(94vw,62vh,500px)/16);font-weight:600;cursor:pointer;position:relative;color:var(--user)}.cell.given{color:var(--given)}.cell.error{color:var(--error)}.cell.sel{background:#1f4a6e;box-shadow:inset 0 0 0 2px var(--accent)}.cell.peer{background:#182f4e}.cell.same{background:#1a4a5e}.cell.br3{border-right:2px solid #5a7db0}.cell.bb3{border-bottom:2px solid #5a7db0}.notes{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:calc(min(94vw,62vh,500px) / 42);font-weight:500;color:var(--muted);pointer-events:none}.notes span{display:flex;align-items:center;justify-content:center}#controls{width:100%;max-width:540px;padding:10px 14px 16px;display:flex;flex-direction:column;gap:8px}#numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}#numpad button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;font-size:1.35rem;font-weight:700;padding:10px 0;cursor:pointer}#numpad button:active{background:var(--accent)}#numpad button.done{opacity:.25;pointer-events:none}#tools{display:flex;gap:8px;justify-content:center}#tools button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:10px;font-size:1.1rem;padding:8px 18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}#tools button span{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}#tools button.on{border-color:var(--accent);box-shadow:0 0 10px -3px var(--accent)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040a16d9;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}.overlay.hidden{display:none}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 32px;text-align:center;display:flex;flex-direction:column;gap:11px;min-width:270px}.panel h1{font-size:1.7rem}.panel h2{font-size:1.4rem}.muted{color:var(--muted);font-size:.9rem}.panel button{border:none;border-radius:10px;padding:12px;font-size:1rem;font-weight:600;cursor:pointer;background:#1d3556;color:var(--text)}.panel button.primary{background:linear-gradient(90deg,#00c2a8,#08c);color:#fff}.link-home{color:var(--muted);font-size:.85rem;text-decoration:none;margin-top:2px}