:root{--color-bg: #f4f5f7;--color-surface: #ffffff;--color-surface-alt: #eef0f4;--color-border: #d6dae1;--color-border-strong: #2b2f36;--color-text: #1c1f24;--color-text-muted: #6b7280;--color-text-inverse: #ffffff;--color-primary-500: #3b6cf0;--color-primary-600: #2f57c4;--color-primary-100: #dbe4fd;--color-primary-050: #eaf0fe;--color-danger-500: #e5484d;--color-danger-100: #fbe0e1;--color-highlight: #fef3c7;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-size-sm: .8125rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 2rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-md: 0 4px 16px rgba(20, 24, 33, .1);--shadow-lg: 0 12px 40px rgba(20, 24, 33, .18);--board-size: min(92vw, 540px)}@media (prefers-color-scheme: dark){:root{--color-bg: #14171c;--color-surface: #1c2027;--color-surface-alt: #242a33;--color-border: #333a44;--color-border-strong: #e6e9ee;--color-text: #e6e9ee;--color-text-muted: #9aa3b1;--color-primary-500: #5b83f5;--color-primary-600: #7196f7;--color-primary-100: #26324f;--color-primary-050: #1e2637;--color-danger-500: #f2696d;--color-danger-100: #3a2224;--color-highlight: #3f3a1e}}*{box-sizing:border-box}body{margin:0;font-family:var(--font-family-base);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.app{max-width:960px;margin:0 auto;padding:var(--space-lg) var(--space-md) var(--space-xl)}.header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-lg)}.title{margin:0;font-size:var(--font-size-xl);font-weight:700;letter-spacing:-.02em}.header-meta{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.difficulty{display:inline-flex;background:var(--color-surface-alt);border-radius:var(--radius-md);padding:var(--space-2xs)}.diff-btn{border:none;background:transparent;color:var(--color-text-muted);font-size:var(--font-size-sm);text-transform:capitalize;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:background .15s,color .15s}.diff-btn.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-md)}.clock{display:flex;flex-direction:column;align-items:center;line-height:1.1}.timer{font-variant-numeric:tabular-nums;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text-muted);min-width:4.5ch;text-align:center}.best{font-size:.7rem;font-weight:500;color:var(--color-text-muted);opacity:.8;font-variant-numeric:tabular-nums}.new-game{border:none;background:var(--color-primary-500);color:var(--color-text-inverse);font-size:var(--font-size-sm);font-weight:600;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md);transition:background .15s}.new-game:hover{background:var(--color-primary-600)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;font-size:var(--font-size-lg);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-md);transition:background .12s,border-color .12s,color .12s}.icon-btn:hover{background:var(--color-surface-alt)}.icon-btn.active{border-color:var(--color-primary-500);color:var(--color-primary-600);background:var(--color-primary-050)}.play-area{display:flex;gap:var(--space-xl);align-items:flex-start;flex-wrap:wrap}.board-wrap{position:relative;width:var(--board-size)}.side{flex:1;min-width:240px;display:flex;flex-direction:column;gap:var(--space-lg)}.board{width:var(--board-size);height:var(--board-size);display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);background:var(--color-surface);border:2px solid var(--color-border-strong);border-radius:var(--radius-md);overflow:hidden}.cell{position:relative;border:none;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:var(--color-surface);color:var(--color-primary-600);font-size:calc(var(--board-size) / 16);font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;transition:background .04s ease}.cell:focus,.cell:focus-visible{outline:none}.cell.border-right{border-right:2px solid var(--color-border-strong)}.cell.border-bottom{border-bottom:2px solid var(--color-border-strong)}.cell.given{color:var(--color-text);font-weight:700}.cell.peer{background:var(--color-surface-alt)}.cell.same-value{background:var(--color-primary-100)}.cell.selected{background:var(--color-primary-050);box-shadow:inset 0 0 0 2px var(--color-primary-500)}.cell.error .value{color:var(--color-danger-500)}.cell.error{background:var(--color-danger-100)}.cell .value{line-height:1}.notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:2px}.note{display:flex;align-items:center;justify-content:center;font-size:calc(var(--board-size) / 42);font-weight:500;color:var(--color-text-muted);line-height:1}.win-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#14182173;border-radius:var(--radius-md);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.win-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;box-shadow:var(--shadow-lg)}.win-emoji{font-size:3rem}.win-card h2{margin:var(--space-xs) 0;font-size:var(--font-size-lg)}.win-card p{margin:0 0 var(--space-lg);color:var(--color-text-muted);text-transform:capitalize}.board-wrap.paused .board{filter:blur(10px)}.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.pause-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);border:none;background:transparent;color:var(--color-text)}.pause-icon{width:3.5rem;height:3.5rem;color:var(--color-primary-500);margin-bottom:var(--space-xs)}.pause-card>span:not(.pause-hint){font-size:var(--font-size-lg);font-weight:700}.pause-hint{font-size:var(--font-size-sm);color:var(--color-text-muted)}.number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}.num-key{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-primary-600);font-size:var(--font-size-xl);font-weight:600;border-radius:var(--radius-md);transition:background .12s,transform .05s}.num-key:hover:not(:disabled){background:var(--color-surface-alt)}.num-key:active:not(:disabled){transform:scale(.96)}.num-key:disabled{opacity:.4;cursor:default}.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.control{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);padding:var(--space-sm);border-radius:var(--radius-md);transition:background .12s,border-color .12s}.control:hover:not(:disabled){background:var(--color-surface-alt)}.control:disabled{opacity:.4;cursor:default}.control.active{border-color:var(--color-primary-500);background:var(--color-primary-050);color:var(--color-primary-600)}.icon{display:inline-block;width:1em;height:1em;flex-shrink:0}.control-icon{width:1.5rem;height:1.5rem}@media (max-width: 720px){:root{--board-size: min(94vw, 460px)}.play-area{flex-direction:column;align-items:center}.side{width:var(--board-size);flex:none}}