:root{--blue:#0878f9;--deep:#07318d;--navy:#061d58;--cyan:#18d7ff;--pink:#ff4aa2;--yellow:#ffd238;--green:#22d984;--white:#fff;--ice:#eef9ff;--ink:#071d52}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;overflow:hidden;background:#086bea;color:var(--white);font-family:Nunito,Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}body{background:radial-gradient(circle at 50% 0,#24a9ff 0,#0674ef 36%,#034dc4 75%,#03369c 100%)}body:before,body:after{content:"";position:fixed;border-radius:50%;background:#ffffff10;pointer-events:none}body:before{width:280px;height:280px;left:-110px;top:-90px}body:after{width:340px;height:340px;right:-150px;bottom:-170px}.game-shell{position:relative;z-index:1;width:min(100%,760px);height:100dvh;margin:auto;padding:10px clamp(9px,2vw,18px) 12px;display:flex;flex-direction:column}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;flex:none}.brand{display:flex;align-items:center;gap:10px;font-weight:1000;font-size:clamp(1.35rem,3vw,2rem);letter-spacing:-.055em;text-shadow:0 4px 0 #07318d,0 7px 14px #00317b80}.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#ff75bd,#ff258d);border:3px solid #ffb6db;box-shadow:0 5px 0 #b70b60,0 9px 18px #03246f88;color:#fff}.header-actions{display:flex;gap:8px}.icon-btn{width:44px;height:44px;border:2px solid #72e6ff;border-radius:50%;background:linear-gradient(#20c7ff,#0791f4);box-shadow:0 4px 0 #045bad,0 7px 15px #00337988;color:#fff;font-size:1.12rem;font-weight:900;cursor:pointer}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #045bad}.sound-off{opacity:.55}.game-card{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,#087cfaed,#075fddeb);border:3px solid #62dfff;border-radius:27px;padding:clamp(10px,1.7vh,18px);box-shadow:inset 0 1px 0 #ffffff80,0 7px 0 #063aa1,0 18px 40px #00287088}.game-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(7px,1vh,11px)}.eyebrow{display:inline-block;color:#fff;background:#05aee9;border:2px solid #72edff;border-radius:999px;padding:5px 13px;font-size:.72rem;font-weight:1000;letter-spacing:.1em;box-shadow:0 3px 0 #0568bf}.game-head h1{margin:5px 0 0;font-size:clamp(1rem,2.3vh,1.35rem);font-weight:1000;text-shadow:0 2px #0644aa}.new-btn{min-height:44px;padding:0 17px;border:2px solid #fff199;border-radius:14px;background:linear-gradient(#ffe966,#ffc51e);box-shadow:0 5px 0 #d47b00,0 8px 15px #00337770;color:#082763;font-weight:1000;cursor:pointer}.new-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #d47b00}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:clamp(8px,1.2vh,12px)}.stats>div{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #39caff;border-radius:13px;background:linear-gradient(180deg,#084dbf,#063894);box-shadow:inset 0 1px #ffffff35}.stat-label{color:#9feaff;font-size:.65rem;font-weight:1000;letter-spacing:.09em}.stats strong{font-size:clamp(.95rem,2.2vh,1.16rem);font-weight:1000;font-variant-numeric:tabular-nums}.board-wrap{position:relative;width:min(100%,57dvh,610px);margin:auto}.board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;background:#b5e9ff;border:4px solid #052d85;border-radius:17px;overflow:hidden;gap:1px;box-shadow:0 6px 0 #01246a,0 13px 28px #00317680}.cell{position:relative;display:grid;place-items:center;min-width:0;padding:0;border:0;background:linear-gradient(145deg,#fff,#e9f8ff);color:var(--ink);font-size:clamp(1.08rem,3.8dvh,1.72rem);font-weight:1000;cursor:pointer;transition:background .12s,transform .12s,color .12s}.cell:nth-child(3n):not(:nth-child(9n)){border-right:3px solid #0a4aa5}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:3px solid #0a4aa5}.cell.given{color:#102d66}.cell.peer{background:#d6f2ff}.cell.same{background:#bcecff;color:#075fcf}.cell.selected{z-index:2;background:linear-gradient(145deg,#ffe668,#ffc82d);color:#10245c;box-shadow:inset 0 0 0 3px #f4a900}.cell.error{background:#ff5b94;color:#fff;animation:shake .25s}.cell.hinted{animation:pop .35s}.notes{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:3px;color:#1170cc;font-size:clamp(.42rem,1.2dvh,.66rem);font-weight:900}.notes i{display:grid;place-items:center;font-style:normal}.toast{position:absolute;left:50%;bottom:12px;z-index:4;transform:translate(-50%,12px);padding:9px 15px;border:2px solid #6be7ff;border-radius:999px;background:#07318deb;color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:.22s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.tools{width:min(100%,610px);display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:clamp(8px,1.1vh,12px) auto}.tools button{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid #ffffff75;border-radius:15px;color:#fff;font-weight:1000;cursor:pointer;box-shadow:0 5px 0 #07318d,0 8px 13px #00307875}.tools button:nth-child(1){background:linear-gradient(#ff73bd,#f63791)}.tools button:nth-child(2){background:linear-gradient(#36caff,#079bea)}.tools button:nth-child(3){background:linear-gradient(#3ee99a,#16bd6d)}.tools button:nth-child(4){background:linear-gradient(#ffe05a,#ffbd18);color:#09265d}.tools button>span{font-size:1.25rem;line-height:1}.tools small{font-size:.72rem;font-weight:1000}.tools b{font-size:.58rem;color:inherit}.tools button.active{outline:3px solid #fff;outline-offset:2px}.tools button:active{transform:translateY(3px);box-shadow:0 2px 0 #07318d}.keypad{width:min(100%,610px);display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin:auto}.keypad button{height:clamp(40px,5.7vh,57px);padding:0;border:2px solid #ffffff70;border-radius:12px;background:linear-gradient(#33cfff,#0794ec);box-shadow:0 4px 0 #07318d;color:#08265e;font-size:clamp(1.1rem,3vh,1.4rem);font-weight:1000;cursor:pointer}.keypad button:nth-child(3n+2){background:linear-gradient(#ff79bd,#ff3b9a)}.keypad button:nth-child(3n){background:linear-gradient(#ffe567,#ffc621)}.keypad button:active{transform:translateY(3px);box-shadow:0 1px 0 #07318d}.keypad button.complete{opacity:.35;filter:saturate(.5);pointer-events:none}.progress-track{width:min(100%,610px);height:7px;margin:10px auto 0;border:2px solid #65e6ff;border-radius:999px;background:#063488;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff48a2,#ffd636,#22e590);transition:width .3s}.below{height:27px;display:flex;justify-content:space-between;align-items:end;gap:8px;padding:0 5px;color:#d8f5ff;font-size:.72rem;font-weight:800}.below p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}dialog{width:min(90vw,430px);padding:27px;border:3px solid #68e2ff;border-radius:25px;background:linear-gradient(180deg,#087ff7,#0553ca);box-shadow:0 8px 0 #05318b,0 30px 80px #001b69cc;color:#fff;text-align:center}dialog::backdrop{background:#00194bc9;backdrop-filter:blur(6px)}dialog h2{margin:12px 0 18px;font-size:1.8rem;font-weight:1000;text-shadow:0 3px #07318d}dialog p{color:#dff8ff;line-height:1.45}.difficulty-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.difficulty-grid button{padding:13px;border:2px solid #ffffff55;border-radius:14px;background:#0642a7;color:#fff;text-align:left;cursor:pointer}.difficulty-grid b,.difficulty-grid small{display:block}.difficulty-grid b{font-size:1rem}.difficulty-grid small{margin-top:3px;color:#aeeeff;font-size:.72rem}.difficulty-grid button.selected{border-color:#ffe35c;background:#0d65d5;box-shadow:inset 0 0 0 2px #ffe35c}.assist-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0;padding:13px;border:2px solid #36caff;border-radius:15px;background:#073b9b;text-align:left}.assist-row b,.assist-row small{display:block}.assist-row small{margin-top:3px;color:#afeaff;font-size:.7rem}.toggle{width:50px;height:30px;padding:3px;border:0;border-radius:999px;background:#4769a8;cursor:pointer}.toggle span{display:block;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}.toggle.on{background:#22d984}.toggle.on span{transform:translateX(20px)}.primary-btn,.pause-dialog button,#winDialog>button{width:100%;padding:14px;border:2px solid #fff199;border-radius:14px;background:linear-gradient(#ffe666,#ffc51f);box-shadow:0 5px 0 #d47b00;color:#09265d;font-weight:1000;cursor:pointer}.pause-icon,.win-icon{display:grid;place-items:center;width:70px;height:70px;margin:4px auto 16px;border:3px solid #fff08a;border-radius:22px;background:linear-gradient(#ffe35c,#ffbd18);box-shadow:0 5px 0 #d47b00;color:#07318d;font-size:2.2rem;font-weight:1000}.confetti{color:#ffe45d;letter-spacing:.22em}.final-score{margin:15px;font-size:1.25rem;font-weight:1000}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes pop{50%{transform:scale(1.12);background:#27e496;color:#063c77}}@media(max-height:710px){.topbar{height:46px}.brand{font-size:1.15rem}.logo{width:34px;height:34px}.icon-btn{width:36px;height:36px}.game-card{padding:8px;border-radius:20px}.game-head h1{display:none}.stats>div{min-height:41px}.board-wrap{width:min(100%,53dvh,520px)}.tools{margin:6px auto}.tools button{min-height:47px}.keypad button{height:36px}.progress-track{margin-top:6px}.below{display:none}}@media(max-width:420px){.game-shell{padding-left:7px;padding-right:7px}.game-card{padding-left:7px;padding-right:7px}.brand{font-size:1.18rem}.tools{gap:4px}.tools button{border-radius:12px}.keypad{gap:3px}.keypad button{border-radius:9px}.new-btn{padding:0 12px}}@media(min-width:900px){.game-shell{width:min(94vw,900px)}}
