:root{--sudoku-bg: #ffffff;--sudoku-surface: #f8f9fa;--sudoku-cell-a: #f8f9fa;--sudoku-cell-b: #f1f3f5;--sudoku-border: #d9e2ee;--sudoku-border-thick: #9aa5b8;--sudoku-fixed: #152238;--sudoku-user: #0f766e;--sudoku-highlight: #ccfbf1;--sudoku-same-number: #a7f3d0;--sudoku-error: #ef4444;--sudoku-error-bg: #fee2e2;--sudoku-success: #10b981;--sudoku-accent: #f59e0b;--sudoku-text: #152238;--sudoku-text-soft: #4d607a;--sudoku-shadow: rgba(17, 24, 39, .08)}[data-theme=dark]{--sudoku-bg: #1e1e2e;--sudoku-surface: #2a2a3e;--sudoku-cell-a: #252535;--sudoku-cell-b: #2a2a3e;--sudoku-border: #4a4a6a;--sudoku-border-thick: #6a6a8a;--sudoku-fixed: #e0e0e0;--sudoku-user: #64b5f6;--sudoku-highlight: #2e2e45;--sudoku-same-number: #3a3a5a;--sudoku-error: #ff4444;--sudoku-error-bg: #4a2020;--sudoku-success: #4ade80;--sudoku-accent: #fbbf24;--sudoku-text: #ffffff;--sudoku-text-soft: #ffffff99;--sudoku-shadow: rgba(0, 0, 0, .3)}.sudoku-demo{position:relative;padding:20px;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.sudoku-demo h3{margin:0 0 16px;font-size:16px;color:var(--sudoku-text-soft);font-weight:600;text-align:center}.sudoku-board{display:grid;grid-template-columns:repeat(9,1fr);gap:0;background:var(--sudoku-bg);border:2px solid var(--sudoku-border-thick);border-radius:8px;overflow:hidden;box-shadow:0 8px 24px var(--sudoku-shadow);width:min(360px,90vw);aspect-ratio:1}.sudoku-cell{position:relative;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;border:.5px solid var(--sudoku-border);transition:all .2s ease;cursor:default}.sudoku-cell:nth-child(3n){border-right:1.5px solid var(--sudoku-border-thick)}.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(--sudoku-border-thick)}.sudoku-cell.cell-a{background:var(--sudoku-cell-a)}.sudoku-cell.cell-b{background:var(--sudoku-cell-b)}.sudoku-cell.fixed{color:var(--sudoku-fixed)}.sudoku-cell.user-filled{color:var(--sudoku-user)}.sudoku-cell.highlighted{background:var(--sudoku-highlight)!important}.sudoku-cell.same-number{background:var(--sudoku-same-number)!important}.sudoku-cell.error{background:var(--sudoku-error-bg);color:var(--sudoku-error)}.sudoku-cell.selected{box-shadow:inset 0 0 0 2px var(--sudoku-accent)}@keyframes cellFill{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.sudoku-cell.filling .cell-number{animation:cellFill .3s ease-out forwards}.cell-number{display:block}@keyframes boardCelebrate{0%,to{transform:scale(1);box-shadow:0 8px 24px var(--sudoku-shadow)}25%{transform:scale(1.02);box-shadow:0 12px 32px var(--sudoku-shadow),0 0 20px var(--sudoku-success)}50%{transform:scale(.98)}75%{transform:scale(1.01);box-shadow:0 10px 28px var(--sudoku-shadow),0 0 15px var(--sudoku-accent)}}.sudoku-board.celebrating{animation:boardCelebrate 1s ease-in-out}@keyframes cellPulse{0%,to{background:var(--sudoku-highlight)}50%{background:var(--sudoku-same-number)}}.sudoku-board.celebrating .sudoku-cell{animation:cellPulse .5s ease-in-out infinite}.reward-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:16px;padding:20px 32px;box-shadow:0 12px 48px #f59e0b66;z-index:10;opacity:0;pointer-events:none}.reward-popup.show{opacity:1;pointer-events:auto}@keyframes rewardPopIn{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.reward-popup.show{animation:rewardPopIn .5s cubic-bezier(.68,-.55,.265,1.55) forwards}.reward-content{text-align:center;color:#fff}.reward-xp{font-size:36px;font-weight:800;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,.2)}.reward-label{font-size:14px;opacity:.9;margin-bottom:12px}.reward-level{display:inline-block;background:#fff3;padding:6px 16px;border-radius:20px;font-size:14px;font-weight:700}@keyframes levelUpFlash{0%,to{background:#fff3}50%{background:#fff6;transform:scale(1.05)}}.reward-level.leveling-up{animation:levelUpFlash .6s ease-in-out}.confetti-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.theme-toggle{position:absolute;top:12px;right:12px;background:var(--sudoku-surface);border:1px solid var(--sudoku-border);border-radius:8px;padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:20}.theme-toggle:hover{background:var(--sudoku-highlight);border-color:var(--sudoku-accent)}.theme-toggle svg{width:18px;height:18px;fill:var(--sudoku-text)}.theme-toggle .sun-icon,[data-theme=dark] .theme-toggle .moon-icon{display:none}[data-theme=dark] .theme-toggle .sun-icon{display:block}.animation-progress{position:absolute;bottom:12px;left:50%;transform:translate(-50%);width:calc(100% - 40px);height:4px;background:var(--sudoku-border);border-radius:2px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--sudoku-accent),var(--sudoku-success));border-radius:2px;width:0%;transition:width .1s linear}.animation-status{position:absolute;bottom:24px;left:50%;transform:translate(-50%);font-size:13px;color:var(--sudoku-text-soft);font-weight:600;white-space:nowrap}@media(max-width:920px){.sudoku-board{width:min(300px,85vw)}.sudoku-cell{font-size:16px}}@media(max-width:500px){.sudoku-board{width:min(260px,80vw)}.sudoku-cell{font-size:14px}.reward-popup{padding:16px 24px}.reward-xp{font-size:28px}.reward-label{font-size:12px}.reward-level{font-size:12px;padding:4px 12px}}@media(prefers-reduced-motion:reduce){.sudoku-cell.filling .cell-number,.sudoku-board.celebrating,.sudoku-board.celebrating .sudoku-cell,.reward-popup.show,.reward-level.leveling-up{animation:none;transition:none}}.sudoku-demo.loading .sudoku-board{opacity:.5;pointer-events:none}.sudoku-demo.loading:after{content:"";position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:3px solid var(--sudoku-border);border-top-color:var(--sudoku-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}