*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#f8f9fa;color:#212529;min-height:100vh;-webkit-tap-highlight-color:transparent}.app{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:16px}.app-header{margin-bottom:12px}.app-header h1{font-size:28px;font-weight:700;color:#343a40;letter-spacing:-.5px;user-select:none;-webkit-user-select:none}.app-main{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:460px}.score-board{display:flex;justify-content:space-between;width:100%;padding:10px 16px;background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000014}.score-item{display:flex;flex-direction:column;align-items:center;gap:2px}.score-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#868e96;font-weight:600}.score-value{font-size:16px;font-weight:600;color:#343a40}.errors-count{color:#e53935}.timer{font-variant-numeric:tabular-nums}.board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:100%;aspect-ratio:1;max-width:460px;background:#343a40;gap:1px;padding:2px;border-radius:8px;box-shadow:0 2px 12px #0000001a;-webkit-user-select:none;user-select:none}.board .cell:nth-child(9n+1){margin-left:1px}.board .cell:nth-child(9n+4){margin-left:1px}.board .cell:nth-child(9n+7){margin-left:1px}.board .cell:nth-child(9n){margin-right:1px}.board .cell:nth-child(-n+9){margin-top:1px}.board .cell:nth-child(n+28):nth-child(-n+36){margin-top:1px}.board .cell:nth-child(n+55):nth-child(-n+63){margin-top:1px}.board .cell:nth-child(n+73){margin-bottom:1px}.cell{display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;position:relative;transition:background-color .1s ease}.cell-value{font-size:clamp(20px,5.5vw,32px);font-weight:500;line-height:1;color:hsl(var(--hue),69%,48%)}.cell.given .cell-value{color:#343a40;font-weight:700}.cell.error .cell-value{color:#e53935}.cell.selected{background:hsl(var(--hue),89%,86%)}.cell.highlighted-row,.cell.highlighted-col,.cell.highlighted-box{background:hsl(var(--hue),22%,93%)}.cell.same-number{background:hsl(var(--hue),84%,88%)}.cell.same-number.highlighted-row,.cell.same-number.highlighted-col,.cell.same-number.highlighted-box{background:hsl(var(--hue),81%,83%)}.cell.error{background:#ffebee}.cell.celebrating:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;animation:celebrateGlow 1.4s ease-in-out forwards;pointer-events:none}.cell.celebrating .cell-value{animation:celebrateText 1.4s ease-in-out}@keyframes celebrateGlow{0%{background:#ffd54f00}12%{background:#ffd54f73}24%{background:#ffc10759}36%{background:#ffd54f40}55%{background:#ffe08226}80%{background:#ffecb30d}to{background:#ffecb300}}.cell.auto-blinking .cell-value{animation:autoFillBlink .4s ease-in-out infinite}@keyframes autoFillBlink{0%,to{opacity:1;text-shadow:0 0 10px rgba(255,152,0,.7)}50%{opacity:.25;text-shadow:0 0 0 transparent}}@keyframes celebrateText{0%{transform:scale(1)}12%{color:#f57f17;transform:scale(1.25)}24%{color:#ff8f00;transform:scale(.9)}36%{color:#ffa000;transform:scale(1.1)}55%{color:#ffb300;transform:scale(1)}80%{transform:scale(1)}to{transform:scale(1)}}.cell-notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:1px}.note{display:flex;align-items:center;justify-content:center;font-size:clamp(9px,2vw,11px);color:#868e96;line-height:1}.number-pad{width:100%;display:flex;flex-direction:column;gap:10px}.number-buttons{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}.num-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 0;border:none;border-radius:8px;background:#fff;cursor:pointer;box-shadow:0 1px 4px #00000014;transition:all .15s ease}.num-btn:hover:not(:disabled){background:hsl(var(--hue),89%,96%);transform:translateY(-1px);box-shadow:0 2px 6px #0000001f}.num-btn:active:not(:disabled){transform:translateY(0)}.num-btn:disabled{opacity:.35;cursor:default}.num-btn.highlighted{background:hsl(var(--hue),89%,86%);box-shadow:0 0 0 2px hsl(var(--hue),69%,48%),0 2px 6px #0000001f}.num-btn-value{font-size:clamp(16px,4vw,22px);font-weight:600;color:hsl(var(--hue),69%,48%);line-height:1}.num-btn-count{font-size:9px;color:#adb5bd;line-height:1}.pad-actions{display:flex;gap:8px}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:none;border-radius:8px;background:#fff;color:#495057;font-size:14px;font-weight:500;cursor:pointer;box-shadow:0 1px 4px #00000014;transition:all .15s ease}.action-btn:hover{background:#f1f3f5}.action-btn.active{background:hsl(var(--hue),69%,48%);color:#fff;box-shadow:0 2px 8px hsla(var(--hue),69%,48%,.3)}.game-controls{width:100%;display:flex;flex-direction:column;gap:8px}.controls-row{display:flex;gap:8px}.controls-row+.controls-row{margin-top:4px}.difficulty-select{flex:1;padding:10px 12px;border:1px solid #dee2e6;border-radius:8px;background:#fff;font-size:14px;font-family:inherit;color:#495057;cursor:pointer;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.difficulty-select:focus{outline:none;border-color:hsl(var(--hue),69%,48%);box-shadow:0 0 0 3px hsla(var(--hue),69%,48%,.15)}.checkbox-label{display:flex;align-items:center;gap:10px;margin:4px 0;padding:8px 14px;background:#fff;border-radius:8px;box-shadow:0 1px 4px #00000014;font-size:14px;font-weight:500;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease}.checkbox-label:hover{background:#f1f3f5}.checkbox-label input[type=checkbox]{display:none}.toggle-track{position:relative;width:36px;height:20px;background:#ced4da;border-radius:10px;transition:background .2s ease;flex-shrink:0}.toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #00000026;transition:transform .2s ease}.checkbox-label input:checked+.toggle-track{background:hsl(var(--hue),69%,48%)}.checkbox-label input:checked+.toggle-track:after{transform:translate(16px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .15s ease}.btn:disabled{opacity:.4;cursor:default}.btn-primary{flex:1;background:hsl(var(--hue),69%,48%);color:#fff;box-shadow:0 2px 6px hsla(var(--hue),69%,48%,.25)}.btn-primary:hover:not(:disabled){background:hsl(var(--hue),72%,42%);box-shadow:0 3px 8px hsla(var(--hue),69%,48%,.35)}.btn-secondary{flex:1;background:#fff;color:#495057;box-shadow:0 1px 4px #00000014}.btn-secondary:hover:not(:disabled){background:#f1f3f5}.btn-icon{flex:0;padding:10px}.btn-large{padding:14px 28px;font-size:16px}.btn-block{width:100%}.confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:200;pointer-events:none}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease;padding:16px}.modal{background:#fff;border-radius:16px;padding:32px;text-align:center;box-shadow:0 8px 32px #00000026;max-width:340px;width:100%;animation:slideUp .3s ease}.modal h2{font-size:24px;color:#2e7d32;margin-bottom:4px}.modal p{color:#868e96;margin-bottom:20px}.modal-stats{display:flex;justify-content:space-around;margin-bottom:24px;padding:16px 0;border-top:1px solid #f1f3f5;border-bottom:1px solid #f1f3f5}.modal-stat{display:flex;flex-direction:column;gap:4px}.modal-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#868e96;font-weight:600}.modal-stat-value{font-size:18px;font-weight:700;color:#343a40}.modal-actions{display:flex;gap:10px;margin-top:20px}.modal-actions .btn{flex:1}.settings-list{display:flex;flex-direction:column;gap:10px;margin:20px 0}.settings-list .checkbox-label{margin:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:480px){.app{padding:10px 8px}.app-header h1{font-size:22px}.app-main{gap:10px}.score-board{padding:8px 12px}.number-buttons{gap:4px}.num-btn{padding:6px 0;border-radius:6px}.pad-actions{gap:6px}.action-btn{padding:8px;font-size:13px}.controls-row{gap:6px}.btn{padding:8px 12px;font-size:13px}}@media(min-width:768px){.app{padding:32px}.app-header{margin-bottom:20px}.app-header h1{font-size:32px}}.app.dark{background:#1a1a2e;color:#e0e0e0}.app.dark .app-header h1{color:#e0e0e0}.app.dark .score-board{background:#16213e;box-shadow:0 2px 8px #0000004d}.app.dark .score-label{color:#8a8a9a}.app.dark .score-value{color:#e0e0e0}.app.dark .board{background:#4a4a6a;box-shadow:0 2px 12px #0006}.app.dark .cell{background:#1a1a2e}.app.dark .cell-value{color:hsl(var(--hue),87%,68%)}.app.dark .cell.given .cell-value{color:#e0e0e0}.app.dark .cell.error .cell-value{color:#ef5350}.app.dark .cell.selected{background:hsl(var(--hue),56%,23%)}.app.dark .cell.highlighted-row,.app.dark .cell.highlighted-col,.app.dark .cell.highlighted-box{background:#16213e}.app.dark .cell.same-number{background:hsl(var(--hue),50%,21%)}.app.dark .cell.same-number.highlighted-row,.app.dark .cell.same-number.highlighted-col,.app.dark .cell.same-number.highlighted-box{background:hsl(var(--hue),45%,18%)}.app.dark .cell.error{background:#3e1a1a}.app.dark .note{color:#6a6a7a}.app.dark .num-btn{background:#16213e;box-shadow:0 1px 4px #0000004d}.app.dark .num-btn:hover:not(:disabled){background:hsl(var(--hue),56%,23%)}.app.dark .num-btn.highlighted{background:hsl(var(--hue),72%,17%);box-shadow:0 0 0 2px hsl(var(--hue),87%,68%),0 2px 6px #0000004d}.app.dark .num-btn-value{color:hsl(var(--hue),87%,68%)}.app.dark .num-btn-count{color:#5a5a6a}.app.dark .btn-secondary{background:#16213e;color:#c0c0d0;box-shadow:0 1px 4px #0000004d}.app.dark .btn-secondary:hover:not(:disabled){background:#1a2a45}.app.dark .btn-primary{background:hsl(var(--hue),72%,42%);box-shadow:0 2px 6px hsla(var(--hue),72%,42%,.4)}.app.dark .btn-primary:hover:not(:disabled){background:hsl(var(--hue),69%,48%)}.app.dark .difficulty-select{background:#16213e;border-color:#2a2a4a;color:#c0c0d0}.app.dark .difficulty-select:focus{border-color:hsl(var(--hue),87%,68%);box-shadow:0 0 0 3px hsla(var(--hue),87%,68%,.15)}.app.dark .action-btn{background:#16213e;color:#c0c0d0;box-shadow:0 1px 4px #0000004d}.app.dark .action-btn:hover{background:#1a2a45}.app.dark .action-btn.active{background:hsl(var(--hue),72%,42%);color:#fff}.app.dark .modal-overlay{background:#0009}.app.dark .modal{background:#16213e;box-shadow:0 8px 32px #00000080}.app.dark .modal h2{color:#e0e0e0}.app.dark .modal p{color:#8a8a9a}.app.dark .modal-stats{border-color:#2a2a4a}.app.dark .modal-stat-label{color:#8a8a9a}.app.dark .modal-stat-value{color:#e0e0e0}.app.dark .checkbox-label{background:#1a1a2e;box-shadow:0 1px 4px #0000004d;color:#c0c0d0}.app.dark .checkbox-label:hover{background:#1a2a45}.app.dark .toggle-track{background:#3a3a5a}.app.dark .settings-list .checkbox-label{background:#1a1a2e}
