*{box-sizing:border-box}
:root{
  --page:#f5f7fb;--surface:#fff;--surface-2:#eef3f9;--text:#17233a;--muted:#7d8da5;
  --primary:#347ff2;--primary-dark:#2169d8;--line:#dbe4ef;--shadow:0 10px 28px rgba(35,58,92,.09);
  --radius:18px;--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom)
}
html,body{margin:0;width:100%;min-height:100%;background:#15171b}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Arial,sans-serif;color:var(--text);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-user-select:none;user-select:none}
button:focus-visible{outline:3px solid rgba(52,127,242,.25);outline-offset:2px}
.hidden{display:none!important}
#app{width:100%;min-height:100vh;background:var(--page);overflow:hidden}
.screen{min-height:100vh}
.home-screen{display:flex;justify-content:center}
.home-container{width:min(100%,560px);min-height:100vh;padding:54px 28px calc(32px + var(--safe-bottom));display:flex;flex-direction:column;align-items:stretch}
.logo-area{text-align:center;margin:24px 0 34px}
.logo-icon{width:82px;height:82px;margin:0 auto 16px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#3d86fa,#286ce0);color:#fff;font-size:44px;font-weight:800;box-shadow:0 16px 32px rgba(48,116,234,.24)}
.logo-area h1{margin:0;font-size:34px;line-height:1.15;letter-spacing:.04em}
.logo-area p{margin:8px 0 0;color:var(--muted);font-size:16px;letter-spacing:.06em}
.section-label{font-size:18px;font-weight:750;margin:0 2px 14px}
.difficulty-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.difficulty-card{min-height:116px;padding:18px 16px;border-radius:18px;background:var(--surface);border:1.5px solid var(--line);box-shadow:0 5px 16px rgba(35,58,92,.06);display:grid;grid-template-columns:42px 1fr 18px;grid-template-rows:1fr;align-items:center;text-align:left;transition:.18s ease;touch-action:manipulation}
.difficulty-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.difficulty-card.selected{border-color:var(--primary);background:#f7fbff;box-shadow:0 8px 22px rgba(52,127,242,.12)}
.difficulty-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:28px;line-height:1}
.easy .difficulty-icon{color:#15b93e;background:#e9faef}.normal .difficulty-icon{color:#2879df;background:#e9f2ff}.hard .difficulty-icon{color:#f29a00;background:#fff4df}.expert .difficulty-icon{color:#e52b2b;background:#fff0f0}
.difficulty-content{display:flex;flex-direction:column;gap:5px;min-width:0}
.difficulty-content strong{font-size:18px}.difficulty-content small{font-size:13px;color:var(--muted)}
.difficulty-arrow{font-size:28px;color:#9aabc0;justify-self:end}
.start-game-button{height:64px;margin-top:18px;border-radius:18px;background:linear-gradient(135deg,#3c86f5,#3477e9);color:#fff;font-size:18px;font-weight:750;box-shadow:0 12px 26px rgba(52,127,242,.24);transition:.18s ease}
.start-game-button:hover{transform:translateY(-1px)}.start-game-button:active{transform:translateY(1px)}
.start-game-button span{font-size:15px;margin-right:8px}
.home-footer{text-align:center;color:#a0aec0;font-size:13px;margin:26px 0 14px}
.continue-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #dce6f1;border-radius:16px;padding:13px 14px;margin-bottom:20px;box-shadow:var(--shadow)}
.continue-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#edf4ff;color:var(--primary);font-size:24px}
.continue-info{display:flex;flex-direction:column;gap:4px;flex:1}.continue-info strong{font-size:15px}.continue-info span{font-size:12px;color:var(--muted)}
.continue-button{background:#edf4ff;color:#2469d4;border-radius:11px;padding:9px 13px;font-weight:700}
.home-stats{display:flex;justify-content:center;gap:20px;color:var(--muted);font-size:12px}
.home-stats:empty{display:none}
.game-screen{display:flex;flex-direction:column;background:var(--page)}
.game-header{height:76px;padding:calc(8px + var(--safe-top)) 18px 8px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;background:rgba(245,247,251,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.icon-button{width:44px;height:44px;border-radius:13px;background:#fff;box-shadow:0 4px 14px rgba(35,58,92,.08);font-size:28px;display:grid;place-items:center}
.game-title-area{text-align:center}.game-difficulty{font-size:17px;font-weight:800}.game-status{font-size:12px;color:var(--muted);margin-top:2px}
.game-content{width:min(100%,560px);margin:0 auto;padding:12px 20px calc(28px + var(--safe-bottom));display:flex;flex-direction:column;gap:14px;flex:1}
.game-info{display:grid;grid-template-columns:1.35fr .75fr .75fr;gap:8px}
.info-card{min-height:64px;border-radius:15px;background:#fff;box-shadow:0 4px 14px rgba(35,58,92,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.info-card span{font-size:11px;color:var(--muted)}.info-card strong{font-size:17px}.timer-box strong{font-variant-numeric:tabular-nums}
.sudoku-board{width:min(100%,520px);aspect-ratio:1;margin:0 auto;border:2px solid #27364e;border-radius:10px;overflow:hidden;background:#fff;display:grid;grid-template-columns:repeat(9,1fr);box-shadow:0 12px 30px rgba(35,58,92,.12);touch-action:manipulation}
.cell{position:relative;display:grid;place-items:center;background:#fff;border-right:1px solid #cbd6e3;border-bottom:1px solid #cbd6e3;font-size:clamp(20px,6vw,32px);font-weight:650;color:#2671dc;transition:background .12s,transform .12s}
.cell:nth-child(3n){border-right:2px solid #27364e}.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 #27364e}.cell:nth-child(n+73){border-bottom:0}
.cell.given{color:#18243a;font-weight:800;background:#fbfcfe}.cell.selected{background:#dceaff}.cell.related{background:#f0f6ff}.cell.same-number{background:#dceaff}.cell.error{background:#ffe6e6;color:#df2626;animation:shake .22s}.cell.hint{background:#e6f8eb;color:#13a044}.cell.selected::after{content:"";position:absolute;inset:2px;border:2px solid #347ff2;border-radius:4px;pointer-events:none}
.message-bar{min-height:34px;border-radius:10px;background:#fff5e8;color:#9b6300;display:grid;place-items:center;font-size:13px;padding:7px 12px}.message-bar.hidden{display:none}
.game-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.action-button{height:58px;border-radius:15px;background:#fff;box-shadow:0 4px 14px rgba(35,58,92,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.action-button span{font-size:21px}.action-button small{font-size:11px;color:var(--muted)}.action-button:disabled{opacity:.4;cursor:not-allowed}.primary-action{background:#edf4ff;color:#2671dc}
.number-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:7px}
.number-pad button{height:54px;border-radius:13px;background:#fff;box-shadow:0 4px 12px rgba(35,58,92,.05);font-size:20px;font-weight:750;color:#25344c}.number-pad button.active{background:#347ff2;color:#fff}.number-pad button:disabled{opacity:.35}

.completion-screen{display:grid;place-items:center;background:linear-gradient(180deg,#f5f7fb,#eef4fc)}.completion-container{width:min(100%,430px);padding:36px 26px;text-align:center}.completion-icon{width:82px;height:82px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#e9f8ee;color:#16a24a;font-size:42px;font-weight:700;box-shadow:0 12px 28px rgba(22,162,74,.15)}.completion-container h2{margin:0;font-size:30px}.completion-container>p{margin:8px 0 22px;color:var(--muted)}.completion-time-card{background:#fff;border-radius:18px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}.completion-time-card span{font-size:12px;color:var(--muted)}.completion-time-card strong{font-size:34px;font-variant-numeric:tabular-nums}.new-best{display:inline-block;margin:15px 0 0;padding:7px 12px;border-radius:99px;background:#fff4cf;color:#a66b00;font-size:13px;font-weight:750}.completion-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.stat-card{background:#fff;border-radius:15px;padding:14px;box-shadow:0 5px 16px rgba(35,58,92,.06)}.stat-card span{display:block;color:var(--muted);font-size:11px}.stat-card strong{display:block;font-size:19px;margin-top:5px}.completion-actions{display:grid;gap:10px;margin-top:18px}.primary-btn,.secondary-btn{height:54px;border-radius:15px;font-weight:750}.primary-btn{background:#347ff2;color:#fff}.secondary-btn{background:#fff;border:1px solid var(--line)}
.modal-overlay{position:fixed;inset:0;z-index:50;background:rgba(15,24,38,.42);display:grid;place-items:center;padding:20px;backdrop-filter:blur(4px)}.modal-card,.loading-card{width:min(100%,360px);background:#fff;border-radius:22px;padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.2);text-align:center}.modal-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:17px;background:#edf4ff;color:#347ff2;display:grid;place-items:center;font-size:25px;font-weight:800}.modal-card h2{margin:0;font-size:23px}.modal-card p{margin:8px 0 20px;color:var(--muted);font-size:14px;line-height:1.6}.modal-card button{width:100%;margin-top:9px}.loading-card{width:auto;min-width:190px;padding:24px}.loading-spinner{width:34px;height:34px;border:4px solid #dce8f8;border-top-color:#347ff2;border-radius:50%;margin:0 auto 13px;animation:spin .75s linear infinite}.toast{position:fixed;left:50%;bottom:calc(30px + var(--safe-bottom));transform:translate(-50%,18px);opacity:0;pointer-events:none;background:rgba(25,35,50,.9);color:#fff;padding:10px 15px;border-radius:11px;font-size:13px;z-index:80;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
.screen-enter{animation:fadeUp .25s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:480px){.home-container{padding:36px 18px calc(24px + var(--safe-bottom))}.logo-area{margin:20px 0 28px}.logo-icon{width:76px;height:76px;font-size:40px}.difficulty-card{min-height:108px;padding:14px}.game-content{padding-left:14px;padding-right:14px}.number-pad{gap:5px}.number-pad button{height:50px}.game-header{padding-left:12px;padding-right:12px}}
@media(min-width:700px){#app{width:560px;min-height:100vh;margin:0 auto;box-shadow:0 0 60px rgba(0,0,0,.12)}.screen{min-height:100vh}}