:root{--color-bg: #fafafa;--color-text: #1a1a1a;--color-surface: #ffffff;--color-border: #e0e0e0;--color-cell-border: #111111;--color-conflict: #dc2626;--color-conflict-bg: rgba(220, 38, 38, .15);--color-accent: #2563eb;--color-accent-hover: #1d4ed8;--color-muted: #6b7280;--color-success: #16a34a;--region-0: #E69F00;--region-1: #56B4E9;--region-2: #009E73;--region-3: #F0E442;--region-4: #0072B2;--region-5: #D55E00;--region-6: #CC79A7;--region-7: #999999;--region-8: #E8D5B7;--region-0-fill: rgba(230, 159, 0, .4);--region-1-fill: rgba( 86, 180, 233, .4);--region-2-fill: rgba( 0, 158, 115, .4);--region-3-fill: rgba(240, 228, 66, .4);--region-4-fill: rgba( 0, 114, 178, .4);--region-5-fill: rgba(213, 94, 0, .4);--region-6-fill: rgba(204, 121, 167, .4);--region-7-fill: rgba(153, 153, 153, .4);--region-8-fill: rgba(232, 213, 183, .4);color-scheme:light dark}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg: #1a1a1a;--color-text: #f0f0f0;--color-surface: #2a2a2a;--color-border: #444444;--color-cell-border: #111111;--color-conflict: #ef4444;--color-conflict-bg: rgba(239, 68, 68, .2);--color-accent: #60a5fa;--color-accent-hover: #3b82f6;--color-muted: #9ca3af;--color-success: #22c55e;--region-0: #F97316;--region-1: #3B82F6;--region-2: #22C55E;--region-3: #EAB308;--region-4: #A855F7;--region-5: #EF4444;--region-6: #E879F9;--region-7: #94A3B8;--region-8: #06B6D4;--region-0-fill: rgba(249, 115, 22, .5);--region-1-fill: rgba( 59, 130, 246, .5);--region-2-fill: rgba( 34, 197, 94, .5);--region-3-fill: rgba(234, 179, 8, .5);--region-4-fill: rgba(168, 85, 247, .5);--region-5-fill: rgba(239, 68, 68, .5);--region-6-fill: rgba(232, 121, 249, .5);--region-7-fill: rgba(148, 163, 184, .5);--region-8-fill: rgba( 6, 182, 212, .5);color-scheme:dark}}:root[data-theme=dark]{--color-bg: #1a1a1a;--color-text: #f0f0f0;--color-surface: #2a2a2a;--color-border: #444444;--color-cell-border: #111111;--color-conflict: #ef4444;--color-conflict-bg: rgba(239, 68, 68, .2);--color-accent: #60a5fa;--color-accent-hover: #3b82f6;--color-muted: #9ca3af;--color-success: #22c55e;--region-0: #F97316;--region-1: #3B82F6;--region-2: #22C55E;--region-3: #EAB308;--region-4: #A855F7;--region-5: #EF4444;--region-6: #E879F9;--region-7: #94A3B8;--region-8: #06B6D4;--region-0-fill: rgba(249, 115, 22, .5);--region-1-fill: rgba( 59, 130, 246, .5);--region-2-fill: rgba( 34, 197, 94, .5);--region-3-fill: rgba(234, 179, 8, .5);--region-4-fill: rgba(168, 85, 247, .5);--region-5-fill: rgba(239, 68, 68, .5);--region-6-fill: rgba(232, 121, 249, .5);--region-7-fill: rgba(148, 163, 184, .5);--region-8-fill: rgba( 6, 182, 212, .5);color-scheme:dark}:root[data-theme=light]{color-scheme:light}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100dvh}.app{display:flex;flex-direction:column;align-items:center;min-height:100dvh;max-width:600px;margin:0 auto;padding:1rem;padding-bottom:max(1rem,env(safe-area-inset-bottom));gap:.75rem}.app-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%}.app-title{grid-column:2;margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.theme-btn{grid-column:3;justify-self:end;padding:.25rem .6rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-muted);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.theme-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.board{display:grid;gap:0;width:100%;max-width:min(90vmin,500px);aspect-ratio:1}.cell-wrapper{border:1px solid var(--color-cell-border);aspect-ratio:1}.cell{width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:background-color .1s}.region-0{background-color:var(--region-0-fill)}.region-1{background-color:var(--region-1-fill)}.region-2{background-color:var(--region-2-fill)}.region-3{background-color:var(--region-3-fill)}.region-4{background-color:var(--region-4-fill)}.region-5{background-color:var(--region-5-fill)}.region-6{background-color:var(--region-6-fill)}.region-7{background-color:var(--region-7-fill)}.region-8{background-color:var(--region-8-fill)}.cell-icon{font-size:clamp(14px,4vmin,28px);line-height:1;pointer-events:none}.cell-queen .cell-icon{font-size:clamp(18px,5vmin,36px)}.cell-x .cell-icon{color:var(--color-muted);font-weight:300}.cell-conflict{background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--color-conflict-bg) 3px,var(--color-conflict-bg) 6px);box-shadow:inset 0 0 0 2px var(--color-conflict)}.cell-won{cursor:default}.timer{display:flex;align-items:baseline;gap:.75rem;font-variant-numeric:tabular-nums}.timer-value{font-size:1.25rem;font-weight:600}.timer-best{font-size:.85rem;color:var(--color-muted)}.controls{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;position:relative}.controls-row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.size-selector{display:flex;gap:.25rem}.size-btn{padding:.35rem .65rem;border:2px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s}.size-btn:hover{border-color:var(--color-accent)}.size-btn-active{border-color:var(--color-accent);background:var(--color-accent);color:#fff}.ctrl-btn{padding:.5rem 1rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .15s;min-width:70px}.ctrl-btn:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-accent);color:#fff}.ctrl-btn:disabled{opacity:.4;cursor:not-allowed}.confirm-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:60}.confirm-dialog{background:var(--color-surface);border-radius:12px;padding:1.5rem;max-width:300px;width:90%;text-align:center;box-shadow:0 20px 60px #0000004d}.confirm-dialog p{margin:0 0 1.25rem;font-size:1rem;line-height:1.5}.confirm-actions{display:flex;gap:.75rem;justify-content:center}.confirm-btn{padding:.5rem 1.25rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .15s}.confirm-btn:hover{border-color:var(--color-accent)}.confirm-btn-danger{background:#dc2626;border-color:#dc2626;color:#fff}.confirm-btn-danger:hover{background:#b91c1c;border-color:#b91c1c}.toast{position:fixed;bottom:max(2rem,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);padding:.5rem 1.25rem;background:var(--color-text);color:var(--color-bg);border-radius:8px;font-size:.9rem;font-weight:500;animation:toast-in .2s ease-out;z-index:100}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.win-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:50;animation:fade-in .3s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.win-content{background:var(--color-surface);border-radius:16px;padding:2rem;text-align:center;max-width:320px;width:90%;box-shadow:0 20px 60px #0000004d;animation:slide-up .3s ease-out}@keyframes slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.win-confetti{font-size:3rem;margin-bottom:.5rem}.win-title{margin:0 0 .5rem;font-size:1.5rem}.win-time{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;margin:.5rem 0}.win-best{color:var(--color-success);font-weight:600;margin:0 0 1rem}.win-actions{display:flex;gap:.75rem;justify-content:center}.win-btn{padding:.6rem 1.25rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text);font-size:1rem;font-weight:500;cursor:pointer;transition:all .15s}.win-btn:hover{border-color:var(--color-accent)}.win-btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.win-btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}@media(prefers-reduced-motion:reduce){.win-overlay,.win-content,.toast,.cell{animation:none;transition:none}.win-confetti{display:none}}