:root{--bg:#061321;--panel:#0c2036;--panel2:#102a46;--ink:#eef7ff;--muted:#9eb4c9;--cyan:#52e3ff;--gold:#ffd464;--danger:#ff6b7a;--line:#274760;--cell:#f8fbff;--cellInk:#10243a;--selected:#c7f3ff;--related:#e8f7fb;--same:#dff6e8;--given:#0d2944;--wrong:#ffe1e5}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020912;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);touch-action:manipulation}
button{font:inherit;border:0;cursor:pointer;color:inherit}
#viewport{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 65% 25%,#17395a 0,#071527 38%,#020912 78%)}
#stage{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform-origin:center center;overflow:hidden;background:linear-gradient(135deg,#071426,#0b1f34 52%,#061321);box-shadow:0 0 80px #0009}
.screen{position:absolute;inset:0;display:none}.screen.active{display:block}
#menuScreen{background:radial-gradient(circle at 22% 27%,#1c5676 0,#0a2036 30%,#061321 64%,#020a13 100%);overflow:hidden}
#menuScreen:before,#menuScreen:after{content:"";position:absolute;border-radius:50%;filter:blur(8px);opacity:.35}#menuScreen:before{width:580px;height:580px;right:-170px;top:-190px;background:#24d8ff}#menuScreen:after{width:420px;height:420px;left:-180px;bottom:-160px;background:#ffd45b}
.cover-grid{position:absolute;left:95px;top:105px;width:610px;height:610px;transform:rotate(-5deg);filter:drop-shadow(0 30px 40px #0008)}
.cover-grid-inner{width:100%;height:100%;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);background:#eff8ff;border:8px solid #e9f7ff;border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 4px #0f3856}
.cover-grid-inner i{position:relative;border:1px solid #b9cfdd;color:#163653;font-style:normal;font-weight:800;font-size:28px;display:flex;align-items:center;justify-content:center}.cover-grid-inner i:nth-child(3n){border-right:4px solid #183c58}.cover-grid-inner i:nth-child(9n){border-right:1px solid #b9cfdd}.cover-grid-inner i:nth-child(n+19):nth-child(-n+27),.cover-grid-inner i:nth-child(n+46):nth-child(-n+54){border-bottom:4px solid #183c58}.cover-grid-inner i:nth-child(1),.cover-grid-inner i:nth-child(11),.cover-grid-inner i:nth-child(21),.cover-grid-inner i:nth-child(31),.cover-grid-inner i:nth-child(41),.cover-grid-inner i:nth-child(51),.cover-grid-inner i:nth-child(61),.cover-grid-inner i:nth-child(71),.cover-grid-inner i:nth-child(81){background:#d9f5fb}.cover-grid-inner i:after{content:"";position:absolute;inset:5px;border:2px dashed #3b9bb3;border-radius:7px;opacity:.45}
.cover-card{position:absolute;right:88px;top:72px;width:590px;height:756px;border:1px solid #ffffff22;background:linear-gradient(180deg,#0e2944e8,#081b30ed);border-radius:34px;padding:46px 52px;box-shadow:0 35px 80px #0008,inset 0 1px #ffffff22;backdrop-filter:blur(14px)}
.eyebrow{font-size:15px;letter-spacing:.24em;font-weight:900;color:var(--cyan);margin-bottom:18px}.cover-card h1{margin:0;line-height:.9}.cover-card h1 span{display:block;font-size:66px;font-weight:950;letter-spacing:-.055em}.cover-card h1 strong{display:block;font-size:45px;color:var(--gold);letter-spacing:.04em;margin-top:12px}.cover-card>p{font-size:18px;line-height:1.55;color:#bed0df;margin:24px 0 24px}.difficulty-label{font-size:13px;color:#9fc2d9;font-weight:900;letter-spacing:.14em;margin-bottom:10px}.difficulty-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:24px}.difficulty-btn{height:52px;background:#102f4d;border:1px solid #2b516e;border-radius:13px;font-weight:900;font-size:13px;transition:.15s}.difficulty-btn:hover{transform:translateY(-2px);background:#163b5d}.difficulty-btn.active{background:linear-gradient(135deg,#53e2ff,#36b6e8);color:#062033;border-color:#93efff;box-shadow:0 7px 25px #21c9ff3d}.difficulty-btn small{display:block;font-size:9px;font-weight:800;opacity:.7}.primary-btn,.danger-btn,.soft-btn,.icon-btn,.tool-btn{transition:transform .12s,filter .12s,background .12s}.primary-btn:hover,.danger-btn:hover,.soft-btn:hover,.icon-btn:hover,.tool-btn:hover{filter:brightness(1.08)}.primary-btn:active,.danger-btn:active,.soft-btn:active,.icon-btn:active,.tool-btn:active{transform:translateY(2px)}
.reward-btn{height:58px;padding:0 24px;border-radius:16px;background:linear-gradient(135deg,#6ef0d3,#49c9f2);color:#052335;font-weight:950;letter-spacing:.035em;box-shadow:0 10px 28px #43dbe644}.reward-btn:hover{filter:brightness(1.08)}.reward-btn:active{transform:translateY(2px)}.primary-btn{height:58px;padding:0 30px;border-radius:16px;background:linear-gradient(135deg,#ffd96a,#ffb93f);color:#2b1c02;font-weight:950;letter-spacing:.04em;box-shadow:0 10px 28px #ffbf3944}.big-btn{width:100%;height:72px;font-size:23px}.soft-btn{height:52px;padding:0 22px;border-radius:14px;background:#123451;color:#dcefff;border:1px solid #2e5573;font-weight:850}.danger-btn{height:54px;padding:0 24px;border-radius:14px;background:linear-gradient(135deg,#ff6f7c,#e6475a);font-weight:900}.cover-actions{display:flex;gap:12px;margin-top:14px}.cover-actions>*{flex:1}.brand{font-size:30px;letter-spacing:.045em;font-weight:950;color:#f2fbff;margin-top:20px;text-align:center;text-shadow:0 4px 18px #0008}.brand b{color:var(--cyan)}
.topbar{height:112px;display:grid;grid-template-columns:330px 1fr 240px;align-items:center;padding:0 52px;border-bottom:1px solid #1c405d;background:#081a2d}.title-mini b{display:block;font-size:26px;letter-spacing:-.02em}.title-mini span{display:block;color:var(--gold);font-weight:900;font-size:16px;letter-spacing:.14em}.top-brand{display:block;margin-top:7px;color:#9edcf2;font-size:15px;font-weight:900;letter-spacing:.06em}.top-stats{display:flex;justify-content:center;gap:28px}.top-stats>div{min-width:130px;text-align:center;padding:12px 18px;background:#0e2842;border:1px solid #20445f;border-radius:16px}.top-stats small{display:block;color:#8fb0c7;font-size:10px;font-weight:900;letter-spacing:.12em}.top-stats b{display:block;margin-top:5px;font-size:18px}.top-buttons{display:flex;justify-content:flex-end;gap:12px}.icon-btn{height:50px;min-width:70px;padding:0 16px;border-radius:14px;background:#12324d;border:1px solid #2a4e69;font-weight:900}.game-layout{height:788px;display:grid;grid-template-columns:780px 1fr;gap:36px;padding:34px 48px 38px}.board-wrap{display:flex;align-items:center;justify-content:center}.sudoku-board{width:700px;height:700px;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);background:#fff;border:6px solid #d7edf5;border-radius:16px;overflow:hidden;box-shadow:0 25px 55px #0006}.cell{position:relative;background:var(--cell);color:var(--cellInk);border-right:1px solid #b9cbd6;border-bottom:1px solid #b9cbd6;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:750;user-select:none}.cell.block-r{border-right:4px solid #25465d}.cell.block-b{border-bottom:4px solid #25465d}.cell.cage-top:before{content:"";position:absolute;left:4px;right:4px;top:4px;border-top:2px dashed #5c7586}.cell.cage-bottom:after{content:"";position:absolute;left:4px;right:4px;bottom:4px;border-bottom:2px dashed #5c7586}.cell .cage-left{position:absolute;left:4px;top:4px;bottom:4px;border-left:2px dashed #5c7586}.cell .cage-right{position:absolute;right:4px;top:4px;bottom:4px;border-right:2px dashed #5c7586}.cage-sum{position:absolute;left:8px;top:5px;font-size:12px;line-height:1;font-weight:900;color:#4e697c;z-index:2}.cell.given .value{font-weight:950;color:var(--given)}.cell.selected{background:var(--selected)}.cell.related{background:var(--related)}.cell.same{background:var(--same)}.cell.wrong{background:var(--wrong);color:#bd2e43}.notes{position:absolute;inset:12px 7px 7px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:10px;font-weight:800;color:#426278}.note{display:flex;align-items:center;justify-content:center}.control-panel{padding:9px 0;display:flex;flex-direction:column;min-width:0}.status-card{background:linear-gradient(180deg,#0f2b47,#0b2239);border:1px solid #254963;border-radius:22px;padding:22px 24px}.status-title{font-size:11px;letter-spacing:.15em;font-weight:950;color:#87abc2}.cage-info{font-size:25px;font-weight:950;color:var(--gold);margin:8px 0 18px}.progress-track{height:8px;background:#071727;border-radius:99px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#53dff9,#7af0cb);border-radius:99px;transition:width .2s}.progress-text{text-align:right;font-size:12px;color:#93afc2;margin-top:8px}.tools-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}.tool-btn{height:76px;border-radius:16px;background:#102d48;border:1px solid #2a4d68;font-size:11px;font-weight:900;color:#cfe0ec}.tool-btn span{display:block;font-size:26px;line-height:28px;margin-bottom:5px}.tool-btn strong{display:block;font-size:11px;font-weight:950;line-height:1.05}.tool-btn.active{background:#1f6c80;border-color:#68e1f3;color:#fff}.tool-btn.reward-ready{background:linear-gradient(180deg,#145268,#10394f);border-color:#58e5da;color:#dffffa;box-shadow:0 0 0 1px #58e5da22 inset}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1}.num-btn{border-radius:18px;background:linear-gradient(180deg,#f4fbff,#dfeef5);color:#14334b;font-weight:950;font-size:36px;box-shadow:inset 0 -5px #c7dbe5}.num-btn.used{opacity:.28}.keyboard-help{font-size:11px;line-height:1.4;text-align:center;color:#779bb4;margin-top:14px}.game-brand{margin-top:8px;font-size:19px;color:#e5f8ff}
.modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#02101bd8;backdrop-filter:blur(10px);z-index:50}.modal.show{display:flex}.modal-card{width:520px;padding:40px;background:linear-gradient(180deg,#102e4b,#081c31);border:1px solid #2f5772;border-radius:28px;box-shadow:0 30px 90px #000b;text-align:center}.modal-badge{display:inline-block;padding:8px 13px;border-radius:999px;background:#153c5c;color:#78e9ff;font-size:11px;font-weight:950;letter-spacing:.16em}.modal-card h2{font-size:42px;margin:18px 0 12px}.modal-card p{font-size:17px;color:#bad0df;line-height:1.55}.modal-card .tip{background:#0b2238;border:1px solid #234a66;border-radius:14px;padding:14px}.modal-card button{width:100%;margin-top:11px}.toast{position:absolute;left:50%;bottom:32px;transform:translate(-50%,20px);background:#061522e8;border:1px solid #3c6681;border-radius:999px;padding:12px 22px;font-weight:850;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:90}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Portrait uses a fixed 900x1440 logical stage; only the scale changes with viewport size. */
#stage.portrait{width:900px;height:1440px}.portrait .cover-grid{left:122px;top:80px;width:656px;height:656px;opacity:.5}.portrait .cover-card{left:60px;right:auto;top:460px;width:780px;height:900px;padding:58px 66px;background:linear-gradient(180deg,#0b2037f2,#07182af8)}.portrait .cover-card h1 span{font-size:76px}.portrait .cover-card h1 strong{font-size:52px}.portrait .cover-card>p{font-size:22px}.portrait .difficulty-grid{gap:12px}.portrait .difficulty-btn{height:62px;font-size:15px}.portrait .big-btn{height:82px}.portrait .topbar{height:160px;grid-template-columns:240px 1fr 150px;padding:0 28px}.portrait .title-mini b{font-size:22px}.portrait .title-mini span{font-size:12px}.portrait .top-brand{font-size:17px;margin-top:7px}.portrait .top-stats{gap:8px}.portrait .top-stats>div{min-width:0;padding:10px 9px}.portrait .top-stats small{font-size:9px}.portrait .top-stats b{font-size:15px}.portrait .top-buttons{gap:8px}.portrait .icon-btn{min-width:58px;padding:0 10px}.portrait .game-layout{height:1280px;display:flex;flex-direction:column;gap:22px;padding:22px 38px 34px}.portrait .board-wrap{height:790px;flex:none}.portrait .sudoku-board{width:780px;height:780px}.portrait .cell{font-size:40px}.portrait .cage-sum{font-size:12px}.portrait .control-panel{height:430px;padding:0;display:grid;grid-template-columns:300px 1fr;grid-template-rows:120px 1fr 34px;gap:12px 18px}.portrait .status-card{grid-column:1;grid-row:1}.portrait .tools-row{grid-column:1;grid-row:2;margin:0;grid-template-columns:repeat(2,1fr)}.portrait .tool-btn{height:auto}.portrait .numpad{grid-column:2;grid-row:1 / span 2;gap:9px}.portrait .num-btn{font-size:34px}.portrait .keyboard-help{grid-column:1 / span 2;grid-row:3;margin:0}.portrait .game-brand{display:none}.portrait .brand:not(.game-brand){font-size:32px}.portrait .modal-card{width:700px;padding:50px}.portrait .modal-card h2{font-size:50px}.portrait .modal-card p{font-size:22px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}