: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;--color-scrim: rgba(20, 24, 33, .45);--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-xs: .7rem;--font-size-sm: .8125rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 2rem;--font-size-2xl: 3rem;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--letter-spacing-tight: -.02em;--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);--border-width-thin: 1px;--border-width-thick: 2px;--duration-instant: .04s;--duration-press: .05s;--duration-fast: .12s;--duration-base: .15s;--ease-base: ease;--scale-press: .96;--opacity-disabled: .4;--opacity-subtle: .8;--size-icon-sm: 1.5rem;--size-icon-lg: 3.5rem;--size-btn-icon: 2.25rem;--layout-max-width: 960px;--layout-side-min: 240px}:root{--board-size: min(92vw, 540px);--board-bg: var(--color-surface);--board-radius: var(--radius-md);--board-border: var(--border-width-thick) solid var(--color-border-strong);--board-blur-paused: 10px;--cell-bg: var(--color-surface);--cell-bg-peer: var(--color-surface-alt);--cell-bg-same-value: var(--color-primary-100);--cell-bg-selected: var(--color-primary-050);--cell-bg-error: var(--color-danger-100);--cell-text-entry: var(--color-primary-600);--cell-text-given: var(--color-text);--cell-text-error: var(--color-danger-500);--cell-text-note: var(--color-text-muted);--cell-grid-line: var(--border-width-thin) solid var(--color-border);--cell-band-line: var(--border-width-thick) solid var(--color-border-strong);--cell-selected-ring: var(--border-width-thick);--cell-selected-ring-color: var(--color-primary-500);--cell-font-divisor: 16;--cell-note-font-divisor: 42;--cell-note-padding: 2px;--btn-bg: var(--color-surface);--btn-bg-hover: var(--color-surface-alt);--btn-border: var(--border-width-thin) solid var(--color-border);--btn-radius: var(--radius-md);--btn-text: var(--color-text);--btn-active-bg: var(--color-primary-050);--btn-active-border-color: var(--color-primary-500);--btn-active-text: var(--color-primary-600);--overlay-scrim: var(--color-scrim);--overlay-blur: 2px}@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;--color-scrim: rgba(8, 10, 14, .55)}}*{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:var(--layout-max-width);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:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight)}.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(--btn-radius);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 var(--duration-base),color var(--duration-base)}.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:var(--font-weight-semibold);color:var(--color-text-muted);min-width:4.5ch;text-align:center}.best{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);opacity:var(--opacity-subtle);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:var(--font-weight-semibold);padding:var(--space-xs) var(--space-md);border-radius:var(--btn-radius);transition:background var(--duration-base)}.new-game:hover{background:var(--color-primary-600)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--size-btn-icon);height:var(--size-btn-icon);font-size:var(--font-size-lg);border:var(--btn-border);background:var(--btn-bg);color:var(--btn-text);border-radius:var(--btn-radius);transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast)}.icon-btn:hover{background:var(--btn-bg-hover)}.icon-btn.active{border-color:var(--btn-active-border-color);color:var(--btn-active-text);background:var(--btn-active-bg)}.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:var(--layout-side-min);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(--board-bg);border:var(--board-border);border-radius:var(--board-radius);overflow:hidden}.cell{position:relative;border:none;border-right:var(--cell-grid-line);border-bottom:var(--cell-grid-line);background:var(--cell-bg);color:var(--cell-text-entry);font-size:calc(var(--board-size) / var(--cell-font-divisor));font-weight:var(--font-weight-semibold);display:flex;align-items:center;justify-content:center;padding:0;transition:background var(--duration-instant) var(--ease-base)}.cell:focus,.cell:focus-visible{outline:none}.cell.border-right{border-right:var(--cell-band-line)}.cell.border-bottom{border-bottom:var(--cell-band-line)}.cell.given{color:var(--cell-text-given);font-weight:var(--font-weight-bold)}.cell.peer{background:var(--cell-bg-peer)}.cell.same-value{background:var(--cell-bg-same-value)}.cell.selected{background:var(--cell-bg-selected);box-shadow:inset 0 0 0 var(--cell-selected-ring) var(--cell-selected-ring-color)}.cell.error .value{color:var(--cell-text-error)}.cell.error{background:var(--cell-bg-error)}.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:var(--cell-note-padding)}.note{display:flex;align-items:center;justify-content:center;font-size:calc(var(--board-size) / var(--cell-note-font-divisor));font-weight:var(--font-weight-medium);color:var(--cell-text-note);line-height:1}.win-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-scrim);border-radius:var(--board-radius);-webkit-backdrop-filter:blur(var(--overlay-blur));backdrop-filter:blur(var(--overlay-blur))}.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:var(--font-size-2xl)}.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(var(--board-blur-paused))}.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:var(--size-icon-lg);height:var(--size-icon-lg);color:var(--color-primary-500);margin-bottom:var(--space-xs)}.pause-card>span:not(.pause-hint){font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.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:var(--btn-border);background:var(--btn-bg);color:var(--cell-text-entry);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);border-radius:var(--btn-radius);transition:background var(--duration-fast),transform var(--duration-press)}.num-key:hover:not(:disabled){background:var(--btn-bg-hover)}.num-key:active:not(:disabled){transform:scale(var(--scale-press))}.num-key:disabled{opacity:var(--opacity-disabled);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:var(--btn-border);background:var(--btn-bg);color:var(--btn-text);font-size:var(--font-size-sm);padding:var(--space-sm);border-radius:var(--btn-radius);transition:background var(--duration-fast),border-color var(--duration-fast)}.control:hover:not(:disabled){background:var(--btn-bg-hover)}.control:disabled{opacity:var(--opacity-disabled);cursor:default}.control.active{border-color:var(--btn-active-border-color);background:var(--btn-active-bg);color:var(--btn-active-text)}.icon{display:inline-block;width:1em;height:1em;flex-shrink:0}.control-icon{width:var(--size-icon-sm);height:var(--size-icon-sm)}@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}}