html,html[data-theme=amber]{--color-bg:#faf9f6;--color-surface:#fff;--color-surface-hover:#f6f5f0;--color-block-alt:#f4f3ee;--color-text-primary:#1c1c1e;--color-text-secondary:#555d6d;--color-text-muted:#949eae;--color-accent:#d97706;--color-accent-rgb:217, 119, 6;--color-user-val:#0284c7;--color-draft:#8e9aa8;--color-draft-active:#0284c7;--color-success:#059669;--color-error:#dc2626;--color-error-bg:#dc26260f;--cell-border:#00000009;--grid-border:#00000012;--color-axis-highlight:#d9770606;--color-same-highlight:#0284c71f;--color-same-border:#0284c752;--overlay-bg:#faf9f6f5;--modal-overlay-bg:#faf9f6a6;--body-glow:#d9770609;--glass-bg:#ffffffbf;--glass-border:#0000000d;--glass-shine:#00000003;--glow-accent:0 0 16px #d977062e;--glow-error:0 0 12px #dc262626;--board-bg:#eae9e4}html[data-theme=indigo]{--color-bg:#f2f5f8;--color-surface:#fff;--color-surface-hover:#f5f7fa;--color-block-alt:#e8edf2;--color-text-primary:#1e293b;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-accent:#3b82f6;--color-accent-rgb:59, 130, 246;--color-user-val:#2563eb;--color-draft:#94a3b8;--color-draft-active:#3b82f6;--color-success:#10b981;--color-error:#ef4444;--color-error-bg:#ef44440d;--cell-border:#00000008;--grid-border:#0000000f;--color-axis-highlight:#3b82f608;--color-same-highlight:#3b82f61f;--color-same-border:#3b82f652;--overlay-bg:#f2f5f8f5;--modal-overlay-bg:#f2f5f8a6;--body-glow:#3b82f609;--glass-bg:#ffffffbf;--glass-border:#0000000a;--glass-shine:#00000003;--glow-accent:0 0 16px #3b82f629;--glow-error:0 0 12px #ef44441f;--board-bg:#e2e8f0}html[data-theme=sage]{--color-bg:#f4f7f4;--color-surface:#fff;--color-surface-hover:#eff4ef;--color-block-alt:#e9efe9;--color-text-primary:#111827;--color-text-secondary:#374151;--color-text-muted:#6b7280;--color-accent:#10b981;--color-accent-rgb:16, 185, 129;--color-user-val:#059669;--color-draft:#9ca3af;--color-draft-active:#10b981;--color-success:#059669;--color-error:#ef4444;--color-error-bg:#ef44440d;--cell-border:#00000008;--grid-border:#0000000f;--color-axis-highlight:#10b98106;--color-same-highlight:#10b9811f;--color-same-border:#10b98152;--overlay-bg:#f4f7f4f5;--modal-overlay-bg:#f4f7f4a6;--body-glow:#10b98109;--glass-bg:#ffffffbf;--glass-border:#0000000a;--glass-shine:#00000003;--glow-accent:0 0 16px #10b98129;--glow-error:0 0 12px #ef44441f;--board-bg:#e1e8e3}:root{--font-display:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-sans:"Inter", -apple-system, sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-sans);justify-content:center;min-height:100vh;display:flex;position:relative;overflow:hidden}body:before{content:"";background:radial-gradient(circle, var(--body-glow) 0%, transparent 70%);z-index:0;pointer-events:none;width:140%;height:50%;position:absolute;top:-10%;left:-20%}#app-container{width:100%;max-width:480px;min-height:100vh;padding:calc(16px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));z-index:1;flex-direction:column;justify-content:space-between;display:flex;position:relative}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px)saturate(120%);border:1px solid var(--glass-border);position:relative;overflow:hidden;box-shadow:0 8px 32px #0006}.glass-panel:after{content:"";background:linear-gradient(90deg, transparent, var(--glass-shine), transparent);height:1px;position:absolute;top:0;left:0;right:0}.app-header{border-radius:16px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:14px 20px;display:flex}.app-logo{font-family:var(--font-display);letter-spacing:-.5px;font-size:20px;font-weight:700}.accent-text{color:var(--color-accent);text-shadow:0 0 8px #e0a96d33}.header-right{align-items:center;gap:12px;display:flex}.sync-indicator{color:var(--color-text-secondary);background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;display:flex}.status-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.status-dot.offline{background-color:var(--color-text-muted)}.status-dot.syncing{background-color:var(--color-accent);animation:1.2s ease-in-out infinite pulse}.status-dot.online{background-color:var(--color-success)}.game-meta{justify-content:space-between;align-items:center;margin-bottom:16px;padding:4px 6px;display:flex}.meta-item{align-items:center;gap:8px;display:flex}.meta-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.badge{color:var(--color-accent);background:#e0a96d1a;border:1px solid #e0a96d33;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:600}.timer-container{background:#ffffff05;border:1px solid #ffffff0a;border-radius:8px;padding:3px 6px 3px 12px}.timer-text{font-family:var(--font-display);color:var(--color-text-primary);text-align:center;width:46px;font-size:15px;font-weight:600}.board-wrapper{aspect-ratio:1;background:var(--board-bg);border:1px solid var(--glass-border);border-radius:16px;width:100%;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:0 12px 40px #00000080}.sudoku-grid{grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);width:100%;height:100%;display:grid}.sudoku-cell{background-color:var(--color-surface);border:.5px solid var(--cell-border);cursor:pointer;justify-content:center;align-items:center;transition:background-color .15s,box-shadow .15s;display:flex;position:relative}.sudoku-cell:first-child{border-top-left-radius:15px}.sudoku-cell:nth-child(9){border-top-right-radius:15px}.sudoku-cell:nth-child(73){border-bottom-left-radius:15px}.sudoku-cell:nth-child(81){border-bottom-right-radius:15px}.sudoku-cell:nth-child(3n){border-right:1.5px solid var(--grid-border)}.sudoku-cell:nth-child(9n){border-right:none}.sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:1.5px solid var(--grid-border)}.sudoku-cell.block-alt{background-color:var(--color-block-alt)}.cell-val{font-family:var(--font-display);font-size:26px;font-weight:600;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.cell-val.given{color:var(--color-text-primary)}.cell-val.user{color:var(--color-user-val)}.sudoku-cell.selected{box-shadow:inset 0 0 0 1.5px var(--color-accent);z-index:2;background-color:rgba(var(--color-accent-rgb), .18)!important}.sudoku-cell.highlight-axis{background-color:var(--color-axis-highlight)}.sudoku-cell.highlight-same{background-color:var(--color-same-highlight)}.sudoku-cell.highlight-same-val{box-shadow:inset 0 0 0 1.5px var(--color-same-border);z-index:1;background-color:var(--color-same-highlight)!important}.sudoku-cell.highlight-same-val .cell-val{transition:transform .2s cubic-bezier(.175,.885,.32,1.275);transform:scale(1.06)}.sudoku-cell.cell-error{background-color:var(--color-error-bg);box-shadow:inset 0 0 8px #ef444440}.sudoku-cell.cell-error .cell-val{color:var(--color-error);animation:.4s ease-in-out shake}.sudoku-cell.focus-hint{z-index:3;animation:1.8s ease-in-out infinite glow-pulse}.cell-notes{pointer-events:none;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:2px;display:grid;position:absolute;top:0;left:0}.note-num{font-family:var(--font-display);color:var(--color-draft);opacity:0;justify-content:center;align-items:center;font-size:9px;font-weight:500;transition:opacity .15s,color .15s;display:flex}.note-num.visible{opacity:1}.note-num.highlight-candidate{color:var(--color-draft-active);font-weight:700;transform:scale(1.1)}.board-overlay{background:var(--overlay-bg);z-index:10;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:absolute;top:0;left:0}.overlay-content{text-align:center;padding:30px}.overlay-content h3{font-family:var(--font-display);letter-spacing:-.5px;margin-bottom:8px;font-size:22px}.overlay-content p{color:var(--color-text-secondary);margin-bottom:24px;font-size:14px}.controls-panel{justify-content:space-between;gap:10px;margin-bottom:20px;display:flex}.control-btn{background:var(--color-surface);border:1px solid var(--glass-border);color:var(--color-text-secondary);cursor:pointer;border-radius:12px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 0;transition:background-color .2s,color .2s,border-color .2s,transform .1s;display:flex}.control-btn:hover{background:var(--color-surface-hover);color:var(--color-text-primary);border-color:#ffffff1a}.control-btn:active{transform:scale(.95)}.btn-icon{justify-content:center;align-items:center;display:flex;position:relative}.btn-badge{color:var(--color-text-primary);letter-spacing:.3px;background:#ffffff26;border:1px solid #ffffff1a;border-radius:4px;padding:1px 4px;font-size:7px;font-weight:700;position:absolute;top:-8px;right:-24px}#action-notes.active{color:var(--color-user-val);border-color:#38bdf84d;box-shadow:0 0 12px #38bdf826}#action-notes.active .btn-badge{background:var(--color-user-val);border-color:var(--color-user-val);color:#0a0a0c}.btn-label{font-size:11px;font-weight:500}.numpad-panel{margin-bottom:24px}.numpad{grid-template-columns:repeat(9,1fr);gap:6px;display:grid}.num-btn{aspect-ratio:.85;background:var(--color-surface);border:1px solid var(--glass-border);color:var(--color-text-primary);font-family:var(--font-display);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;font-size:24px;font-weight:600;transition:all .15s cubic-bezier(.175,.885,.32,1.15);display:flex}.num-btn:hover{background:var(--color-surface-hover);border-color:#ffffff14}.num-btn:active{border-color:var(--color-accent);background:#e0a96d26;transform:scale(.9)}.num-btn.paint-locked{color:var(--color-accent);box-shadow:var(--glow-accent);border-color:var(--color-accent)!important;background:#e0a96d33!important}.app-tabs{border-radius:14px;padding:6px;display:flex}.tab-btn{color:var(--color-text-secondary);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;padding:10px 0;font-size:13px;font-weight:600;transition:all .25s}.tab-btn:hover{color:var(--color-text-primary)}.tab-btn.active{color:var(--color-text-primary);background:#ffffff0f;box-shadow:inset 0 1px #ffffff0d}.modal-overlay{background:var(--modal-overlay-bg);-webkit-backdrop-filter:blur(8px);z-index:100;justify-content:center;align-items:center;width:100vw;height:100vh;padding:24px;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.modal-content{text-align:center;border-radius:24px;width:100%;max-width:380px;padding:24px;animation:.3s cubic-bezier(.16,1,.3,1) slide-up}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-header h4{font-family:var(--font-display);color:var(--color-accent);font-size:18px;font-weight:600}.close-btn{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;font-size:24px;line-height:1}.modal-body{text-align:left;margin-bottom:24px}.step-icon{text-align:center;margin:12px 0;font-size:36px}.hint-text{color:var(--color-text-secondary);font-size:14px;line-height:1.6}.primary-btn{background:var(--color-accent);color:#0a0a0c;width:100%;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:12px;padding:12px 0;font-size:14px;font-weight:700;transition:all .2s}.primary-btn:hover{box-shadow:var(--glow-accent);transform:translateY(-1px)}.primary-btn:active{transform:translateY(1px)}.mini-btn{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;display:flex}.mini-btn:hover{color:var(--color-text-primary);background:#ffffff0d}.level-selector{flex-direction:column;gap:10px;margin-top:20px;display:flex}.level-btn{background:var(--color-surface);border:1px solid var(--glass-border);color:var(--color-text-primary);cursor:pointer;border-radius:14px;padding:14px;font-size:14px;font-weight:600;transition:all .2s}.level-btn:hover{background:var(--color-surface-hover);border-color:#ffffff1a;transform:translateY(-1px)}.academy-menu{flex-direction:column;gap:16px;display:flex}.academy-card{border:1px solid var(--glass-border);background:#ffffff05;border-radius:16px;flex-direction:column;gap:8px;padding:16px;display:flex}.academy-card h5{font-family:var(--font-display);color:var(--color-accent);font-size:14px}.academy-card p{color:var(--color-text-secondary);font-size:12px;line-height:1.5}.mini-primary-btn{background:var(--color-accent);color:#0a0a0c;cursor:pointer;border:none;border-radius:8px;align-self:flex-end;padding:6px 14px;font-size:11px;font-weight:700}.hidden{display:none!important}@keyframes pulse{0%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}to{opacity:.8;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@keyframes glow-pulse{0%{box-shadow:inset 0 0 0 1px #e0a96d33}50%{box-shadow:inset 0 0 14px #e0a96d99}to{box-shadow:inset 0 0 0 1px #e0a96d33}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.icon-btn{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex}.icon-btn:hover{color:var(--color-text-primary);background:#ffffff0d}html[data-theme-actual=light] .icon-btn:hover{background:#0000000a}.theme-icon{display:none!important}html[data-theme=indigo] #theme-icon-auto,html[data-theme=amber] #theme-icon-light,html[data-theme=sage] #theme-icon-dark{display:block!important}body.keyboard-active .numpad-panel,body.keyboard-active .app-tabs{display:none!important}body.keyboard-active #app-container{padding-bottom:env(safe-area-inset-bottom,12px)!important;justify-content:flex-start!important}body.keyboard-active .app-header{margin-bottom:6px!important;padding:10px 16px!important}body.keyboard-active .game-meta{margin-bottom:6px!important}body.keyboard-active .board-wrapper{margin-bottom:8px!important;box-shadow:0 6px 20px #0000004d!important}body.keyboard-active .controls-panel{margin-bottom:4px!important}
