:root{--ink:#1f2a36;--muted:#6f7c88;--paper:#fffdf9;--cream:#f4f0e8;--line:#bdc7cd;--navy:#183f52;--teal:#1e7f7b;--mint:#dff1ed;--coral:#e46f58;--yellow:#f2c96d;--shadow:0 20px 60px #2336401f}*{box-sizing:border-box}html{background:var(--cream)}body{color:var(--ink);background:radial-gradient(circle at 10% 0%, #fff9ed 0, transparent 32%), var(--cream);min-height:100vh;margin:0;font-family:ui-rounded,Avenir Next,Segoe UI,sans-serif}button{font:inherit}a{color:inherit}.app-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffdf9e0;border-bottom:1px solid #183f521f;justify-content:space-between;align-items:center;height:86px;padding:0 max(28px,50vw - 560px);display:flex}.brand{color:var(--navy);cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:12px;display:flex}.brand-mark{background:var(--navy);border-radius:12px;grid-template-columns:1fr 1fr;gap:3px;width:46px;height:46px;padding:4px;display:grid;transform:rotate(-2deg);box-shadow:0 7px 18px #183f5238}.brand-mark i{color:var(--teal);background:#fffdf8;border-radius:4px;place-items:center;font-size:10px;font-style:normal;font-weight:800;display:grid}.brand strong{letter-spacing:-.5px;font-family:Georgia,serif;font-size:26px;display:block}.brand small{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:11px;display:block}.rules-link{color:var(--teal);cursor:pointer;background:0 0;border:0;padding:10px;font-weight:700}.topbar-actions{align-items:center;gap:6px;display:flex}.install-button{background:var(--mint);color:var(--teal);cursor:pointer;border:1px solid #1e7f7b38;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:800}.language-select{display:inline-flex;position:relative}.language-select select{background:var(--paper);min-width:92px;color:var(--navy);cursor:pointer;font:inherit;border:1px solid #183f5229;border-radius:10px;padding:8px 28px 8px 10px;font-size:12px;font-weight:750}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.game-layout{grid-template-columns:minmax(520px,660px) 300px;justify-content:center;align-items:start;gap:52px;width:min(1120px,100% - 40px);margin:36px auto 28px;display:grid}.statusbar{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.difficulty-tabs{background:#183f5212;border-radius:12px;padding:4px;display:flex}.difficulty-tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9px;padding:8px 18px;font-size:14px;font-weight:700}.difficulty-tabs button.active{color:var(--navy);background:var(--paper);box-shadow:0 2px 10px #183f521a}.timer{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:9px;font-size:12px;display:flex}.timer strong{min-width:54px;color:var(--navy);letter-spacing:.02em;font-variant-numeric:tabular-nums;font-size:17px}.timer button{width:30px;height:30px;color:var(--teal);background:var(--mint);cursor:pointer;border:0;border-radius:50%;font-weight:800}.board-wrap{background:var(--paper);box-shadow:var(--shadow);border-radius:20px;padding:12px}.board{aspect-ratio:1;border:3px solid var(--navy);background:var(--line);border-radius:11px;grid-template-columns:repeat(10,1fr);gap:1px;width:100%;display:grid;position:relative;overflow:hidden}.cell{background:var(--paper);min-width:0;color:var(--teal);cursor:pointer;border:0;place-items:center;font-size:clamp(18px,3vw,30px);font-weight:650;transition:background .12s,color .12s;display:grid;position:relative}.cell:nth-child(10n+2),.cell:nth-child(10n+4),.cell:nth-child(10n+6),.cell:nth-child(10n+8){border-right:2px solid var(--navy)}.cell:nth-child(n+11):nth-child(-n+20),.cell:nth-child(n+31):nth-child(-n+40),.cell:nth-child(n+51):nth-child(-n+60),.cell:nth-child(n+71):nth-child(-n+80){border-bottom:2px solid var(--navy)}.cell.given{color:var(--ink);font-weight:800}.cell.peer{background:#edf5f2}.cell.same{color:var(--navy);background:#d5ebe6}.cell.selected{background:var(--yellow);color:var(--navy);z-index:2;box-shadow:inset 0 0 0 2px #c9952f}.cell.wrong{color:#bb3d32;background:#fde2dc}.digit{line-height:1}.notes{color:#3f5f6b;font-variant-numeric:tabular-nums;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(5,1fr);place-items:center;font-size:clamp(8px,1vw,11px);font-weight:800;line-height:1;display:grid;position:absolute;inset:3px}.notes i{place-items:center;width:100%;height:100%;font-style:normal;display:grid}.cell.selected .notes{color:var(--navy)}.pause-cover{z-index:10;color:var(--navy);cursor:pointer;background:#fffdf9f5;border:0;place-content:center;justify-items:center;gap:12px;display:grid;position:absolute;inset:0}.pause-cover span{background:var(--mint);width:64px;height:64px;color:var(--teal);border-radius:50%;place-items:center;padding-left:4px;font-size:24px;display:grid}.controls{padding-top:56px}.score-strip{background:#fffdf999;border:1px solid #183f521f;border-radius:14px;grid-template-columns:1.2fr 1fr 1fr;margin-bottom:20px;display:grid}.score-strip div{justify-content:space-between;align-items:center;padding:11px 16px;display:flex}.score-strip div+div{border-left:1px solid #183f521f}.score-strip span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px}.score-strip strong{color:var(--navy)}.keypad{grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:18px;display:grid}.keypad button{aspect-ratio:1;background:var(--paper);color:var(--navy);cursor:pointer;border:0;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition:transform .1s,background .1s;display:flex;box-shadow:0 5px 14px #183f5217}.keypad button strong{font-size:23px;line-height:1}.keypad button small{color:var(--muted);white-space:nowrap;font-size:8px;font-weight:650}.keypad button.complete{color:#9aa4a8;box-shadow:none;background:#fffdf994}.keypad button.complete small{color:var(--teal)}.keypad button:hover{background:var(--mint);transform:translateY(-2px)}.keypad button:active{transform:translateY(0)}.records-card{background:#fffdf9a6;border:1px solid #183f521f;border-radius:14px;margin:2px 0 14px;overflow:hidden}.records-card>header{border-bottom:1px solid #183f521a;justify-content:space-between;align-items:center;padding:10px 13px 8px;display:flex}.records-card>header strong{color:var(--navy);font-size:12px}.records-card>header small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:9px}.record-grid{grid-template-columns:1fr 1fr;display:grid}.record-grid>div{flex-direction:column;gap:1px;min-height:68px;padding:9px 13px 10px;display:flex}.record-grid>div+div{border-left:1px solid #183f521a}.record-grid span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:9px}.record-grid strong{color:var(--teal);font-variant-numeric:tabular-nums;font-size:19px}.record-grid small{color:var(--muted);font-size:9px}.record-grid em{color:#9aa4a8;margin-top:7px;font-size:11px;font-style:normal}.tool-grid{grid-template-columns:repeat(5,1fr);gap:4px;margin:20px 0;display:grid}.tool-grid button{min-width:0;height:74px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:3px;display:flex}.tool-grid button:hover,.tool-grid button.active{color:var(--teal);background:#1e7f7b1a}.tool-grid button:disabled{opacity:.35;cursor:default}.tool-grid span{font-size:22px;line-height:1}.tool-grid strong{font-size:11px}.tool-grid small{color:var(--teal);font-size:9px}.new-game{background:var(--teal);color:#fff;cursor:pointer;border:0;border-radius:13px;width:100%;padding:14px;font-weight:800;box-shadow:0 8px 20px #1e7f7b38}.reveal{width:100%;color:var(--muted);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:13px;font-size:13px;text-decoration:underline}.keyboard-tip{text-align:center;color:#98a1a8;font-size:10px}footer{color:var(--muted);letter-spacing:.03em;text-align:center;margin:auto auto 20px;font-size:11px}footer nav{justify-content:center;gap:14px;margin-top:7px;display:flex}footer a{text-underline-offset:3px}.legal-page{min-height:100vh;padding:42px 20px 70px}.legal-page>*{width:min(720px,100%);margin-left:auto;margin-right:auto}.legal-toolbar{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.legal-back{color:var(--teal);font-size:14px;font-weight:750;text-decoration:none;display:block}.legal-page article{background:var(--paper);box-shadow:var(--shadow);border-radius:22px;padding:clamp(26px,5vw,54px)}.legal-page h1{color:var(--navy);margin:0 0 22px;font-family:Georgia,serif;font-size:clamp(32px,6vw,48px)}.legal-page h2{color:var(--navy);margin:30px 0 8px;font-size:18px}.legal-page p{color:var(--muted);line-height:1.65}.legal-page .legal-kicker{color:var(--teal);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;font-size:11px;font-weight:800}.loading{min-height:100vh;color:var(--navy);place-content:center;justify-items:center;gap:16px;display:grid}.loading p{color:var(--muted);font-size:14px}.spinner{border:4px solid #cfe4df;border-top-color:var(--teal);border-radius:50%;width:42px;height:42px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.modal-backdrop{z-index:30;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0d1f287a;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:var(--paper);border-radius:22px;width:min(430px,100%);padding:34px;position:relative;box-shadow:0 30px 80px #081b2240}.modal h2{color:var(--navy);margin:0 36px 10px 0;font-family:Georgia,serif;font-size:26px}.modal p,.modal li{color:var(--muted);font-size:14px;line-height:1.55}.modal ol{margin:18px 0 0;padding-left:20px}.modal li+li{margin-top:8px}.modal-close{background:var(--cream);width:32px;height:32px;color:var(--muted);cursor:pointer;border:0;border-radius:50%;font-size:20px;position:absolute;top:16px;right:18px}.modal-actions{justify-content:flex-end;gap:10px;margin-top:26px;display:flex}.modal-actions button{cursor:pointer;border:0;border-radius:10px;padding:11px 18px;font-weight:750}.modal-actions .primary{background:var(--teal);color:#fff}.modal-actions .secondary{background:var(--cream);color:var(--muted)}.celebration{text-align:center}.celebration h2{margin-right:0}.trophy{background:var(--yellow);color:#9a651d;border-radius:50%;place-items:center;width:72px;height:72px;margin:-5px auto 20px;font-size:36px;display:grid;box-shadow:0 0 0 10px #fff4d7}.score-result{background:var(--mint);text-align:left;border-radius:14px;margin:20px 0 4px;padding:15px 18px}.score-result>strong{color:var(--teal);text-align:center;margin-bottom:9px;font-size:24px;display:block}.score-result dl{margin:0}.score-result dl div{color:var(--muted);justify-content:space-between;padding:3px 0;font-size:12px;display:flex}.score-result dt,.score-result dd{margin:0}.score-result dd{color:var(--navy);font-weight:750}@media (max-width:900px){.game-layout{grid-template-columns:minmax(0,640px);gap:0}.controls{padding-top:22px}.keypad{grid-template-columns:repeat(10,1fr);gap:5px}.keypad button{border-radius:9px;font-size:clamp(16px,4vw,22px)}.tool-grid{max-width:420px;margin-inline:auto}.new-game,.reveal,.score-strip,.records-card{max-width:420px;margin-left:auto;margin-right:auto}.keyboard-tip{display:none}}@media (max-width:560px){.topbar{height:70px;padding:env(safe-area-inset-top) 12px 0}.brand-mark{width:40px;height:40px}.brand strong{font-size:22px}.brand small{display:none}.rules-link{font-size:13px}.topbar-actions{gap:0}.rules-link{padding:6px;font-size:11px}.language-select select{width:70px;min-width:70px;padding:7px 18px 7px 6px;font-size:11px}.install-button{display:none}.game-layout{width:100%;margin-top:18px}.statusbar{padding:0 12px}.difficulty-tabs{flex:1}.difficulty-tabs button{white-space:nowrap;flex:1;padding:7px;font-size:11px}.timer span{display:none}.board-wrap{border-radius:0;padding:5px;box-shadow:0 9px 30px #23364017}.board{border-radius:5px}.cell{font-size:clamp(17px,6vw,26px)}.notes{font-size:clamp(8px,2.25vw,9px);font-weight:850;inset:1px}.controls{padding:18px 12px 0}.score-strip{margin-bottom:14px}footer{padding:0 18px max(4px, env(safe-area-inset-bottom))}.legal-page{padding-top:max(28px, env(safe-area-inset-top))}}