@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --bg:#090b1b; --surface:#11142b; --surface2:#181c37; --ink:#f4f5ff; --muted:#8e94b5; --cyan:#3df4e6; --violet:#a77cff; --pink:#ff5bbd; --line:#34395d; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; background:var(--bg); color:var(--ink); font-family:'Space Grotesk',sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; border:0; } .app-shell { width:min(100%,540px); min-height:100vh; margin:auto; padding:env(safe-area-inset-top,20px) 22px max(26px,env(safe-area-inset-bottom)); position:relative; overflow:hidden; }
.topbar { height:68px; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; }.brand { color:var(--ink); text-decoration:none; font-size:16px; font-weight:700; letter-spacing:2px; }.brand span { color:var(--cyan); }.brand-mark { font-size:23px; margin-right:5px; vertical-align:-2px; }.icon-button { background:var(--surface2); border:1px solid #292e50; width:39px; height:39px; border-radius:50%; font-size:24px; line-height:1; }
.start-screen { padding-top:48px; position:relative; }.hero-glow { position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(74,50,171,.35),transparent 68%); top:-88px; left:-120px; pointer-events:none; }.eyebrow { color:var(--cyan); font:500 10px 'DM Mono',monospace; letter-spacing:1.8px; margin:0 0 13px; } h1 { position:relative; margin:0; font-size:clamp(48px,14vw,68px); line-height:.98; letter-spacing:-3.5px; } h1 em { font-style:normal; color:var(--violet); } .intro { color:var(--muted); line-height:1.55; max-width:300px; margin:26px 0 42px; font-size:15px; }
.difficulty-picker { display:grid; gap:10px; }.difficulty { min-height:76px; padding:13px 17px; display:grid; grid-template-columns:35px 1fr auto; align-items:center; text-align:left; background:rgba(24,28,55,.72); border:1px solid #292e50; border-radius:14px; transition:.2s; }.difficulty span { font:12px 'DM Mono',monospace; color:#636a93; }.difficulty strong { font-size:17px; }.difficulty small { color:var(--muted); font-size:12px; }.difficulty.active { border-color:var(--cyan); background:linear-gradient(100deg,rgba(44,235,220,.14),rgba(24,28,55,.9)); box-shadow:0 0 20px rgba(61,244,230,.12); }.difficulty.active strong { color:var(--cyan); }
.primary-button { margin-top:28px; width:100%; background:var(--cyan); color:#061313; height:58px; border-radius:13px; font-weight:700; font-size:16px; box-shadow:0 8px 28px rgba(61,244,230,.2); }.primary-button span { float:right; font-size:24px; margin-right:19px; margin-top:-2px; }.install-hint { text-align:center; color:#747b9f; font-size:12px; margin-top:19px; }
.hidden { display:none!important; }.game-screen { padding-top:28px; }.game-meta { display:flex; justify-content:space-between; align-items:end; margin-bottom:21px; }.game-meta .eyebrow { margin-bottom:5px; }.game-meta > div > strong { font:500 25px 'DM Mono',monospace; letter-spacing:-1px; }.mistakes { text-align:right; }.mistakes span { display:block; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:1px; margin-bottom:6px; }.mistakes strong { color:var(--pink); font-size:16px!important; }.mistakes i { color:var(--muted); font-style:normal; }
.board-wrap { padding:3px; background:linear-gradient(135deg,var(--cyan),var(--violet)); border-radius:14px; box-shadow:0 0 30px rgba(92,91,244,.18); }.sudoku-board { display:grid; grid-template-columns:repeat(9,1fr); background:#0d1022; border-radius:11px; overflow:hidden; }.cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:#10142a; border-right:1px solid #282d4c; border-bottom:1px solid #282d4c; color:var(--ink); font-size:clamp(15px,5.2vw,23px); font-weight:600; position:relative; transition:background .15s; }.cell:nth-child(3n) { border-right:2px solid #596087; }.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 #596087; }.cell.given { color:#e1e4ff; }.cell.related { background:#191d39; }.cell.same { color:var(--cyan); }.cell.selected { background:#2b315b; box-shadow:inset 0 0 0 2px var(--cyan); z-index:1; }.cell.wrong { color:var(--pink); background:#3b1939; }.notes { display:grid; grid-template-columns:repeat(3,1fr); width:72%; height:72%; font:8px 'DM Mono',monospace; color:#aeb5e2; }.notes span { text-align:center; line-height:1.2; }
.status-text { min-height:21px; text-align:center; color:var(--muted); font-size:13px; margin:17px 0 12px; }.tools { display:flex; justify-content:center; gap:8px; }.tool-button { background:transparent; color:var(--muted); padding:8px 10px; font-size:12px; }.tool-button span { color:var(--violet); font-size:17px; margin-right:4px; }.tool-button[aria-pressed="true"] { color:var(--cyan); }.tool-button b { font:10px 'DM Mono',monospace; color:var(--cyan); margin-left:2px; }.number-pad { display:grid; grid-template-columns:repeat(9,1fr); gap:6px; margin-top:10px; }.number-pad button { height:45px; border-radius:10px; background:var(--surface2); border:1px solid #2b3051; font-size:18px; font-weight:600; }.number-pad button:disabled { opacity:.25; }.number-pad button:not(:disabled):active { background:var(--violet); }
.modal { position:fixed; inset:0; padding:24px; display:grid; place-items:center; background:rgba(4,5,15,.79); backdrop-filter:blur(8px); z-index:3; }.modal-card { width:min(100%,370px); text-align:center; background:linear-gradient(145deg,#1a1e42,#10132b); border:1px solid #555c90; border-radius:20px; padding:39px 28px 30px; box-shadow:0 0 60px rgba(125,90,255,.3); }.sparkles { color:var(--cyan); font-size:26px; letter-spacing:15px; margin-bottom:24px; }.modal-card h2 { margin:0; font-size:30px; letter-spacing:-1.5px; }.modal-card p:not(.eyebrow) { color:var(--muted); margin:14px 0 0; }.modal-card .primary-button { margin-top:26px; }
@media (min-width:600px) { .app-shell { padding-left:32px; padding-right:32px; }.cell { font-size:25px; }.number-pad button { height:52px; } }