:root {color-scheme:light;--bg:#f8f9fa;--surface:#fff;--text:#1e293b;--muted:#64748b;--line:#cbd5e1;--selected:#dbeafe;--error:#b91c1c;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);}
:root[data-theme=dark] {color-scheme:dark;--bg:#0f172a;--surface:#1e293b;--text:#f8fafc;--muted:#cbd5e1;--line:#64748b;--selected:#1e40af;--error:#fca5a5;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) {color-scheme:dark;--bg:#0f172a;--surface:#1e293b;--text:#f8fafc;--muted:#cbd5e1;--line:#64748b;--selected:#1e40af;--error:#fca5a5;}}
* {box-sizing:border-box;} body {margin:0;} main {width:min(480px,calc(100% - 24px));margin:8px auto;padding-bottom:max(8px,env(safe-area-inset-bottom));} a {color:inherit;} [hidden] {display:none!important;}
@media(min-width:768px) and (min-height:720px) {body {display:flex;flex-direction:column;min-height:100svh;padding:8px 0;} main {flex:none;margin:auto;}}
button,select {font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:44px;padding:8px 12px;} button {cursor:pointer;} button:disabled {opacity:.5;cursor:default;} :focus-visible {outline:3px solid #2563eb;outline-offset:2px;}
.game-header {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:48px;}
.game-header h1 {margin:0;text-align:center;font-size:1.15rem;line-height:1.25;overflow-wrap:anywhere;}
.icon-button {display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;text-decoration:none;font-size:1.4rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);}
.metrics {display:flex;justify-content:center;align-items:center;gap:16px;font-size:.82rem;min-height:30px;color:var(--muted);}
.preview-badge {font-size:.7rem;border:1px solid var(--line);border-radius:20px;padding:2px 7px;}
.board-area {margin:4px 0 10px;} #board {display:grid;grid-auto-rows:minmax(14px,auto);gap:0;margin:0 auto;width:min(100%,430px,max(280px,calc(100svh - 250px)));}
.cell {min-height:44px;min-width:0;padding:0;border-radius:4px;font-size:1.35rem;aspect-ratio:1;background:var(--surface);touch-action:manipulation;}
.given {font-weight:800;} .selected {background:var(--selected);box-shadow:inset 0 0 0 2px #2563eb;} .invalid {color:var(--error);text-decoration:underline wavy;text-underline-offset:4px;}
.constraint {display:flex;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;min-height:14px;}
.input-row {display:flex;gap:6px;align-items:stretch;margin:0 auto 8px;max-width:430px;} #numbers {display:grid;grid-template-columns:repeat(var(--count,4),minmax(0,1fr));gap:6px;flex:1;min-width:0;}
#numbers button {padding:0;min-width:0;min-height:48px;font-size:1.2rem;} .erase-button {width:44px;flex:none;padding:0;font-size:1.35rem;}
.play-actions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:430px;margin:0 auto;}
.play-actions button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;min-height:52px;font-size:.75rem;line-height:1.2;}
.action-icon {font-size:1.25rem;line-height:1.1;} #status {margin:8px 0 0;min-height:1.5em;font-size:.85rem;line-height:1.5;text-align:center;} #save-notice {margin:8px 0;color:var(--error);font-size:.85rem;line-height:1.5;} #save-notice:empty {display:none;}
#pause-screen {min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;} #pause-screen p {margin:0;}
dialog {color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;width:min(380px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;}
dialog::backdrop {background:rgba(15,23,42,.5);} .dialog-header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;} .dialog-header h2 {margin:0;font-size:1.15rem;}
.dialog-close {min-width:44px;padding:0;font-size:1.3rem;} .menu-list {display:flex;flex-direction:column;gap:12px;} .menu-list label {display:flex;justify-content:space-between;align-items:center;gap:16px;} .menu-list select {min-width:130px;} .menu-list button {width:100%;}
.primary-button {background:#2563eb;color:#fff;border-color:#2563eb;} .muted {color:var(--muted);font-size:.82rem;line-height:1.5;} details {line-height:1.6;margin-top:16px;} summary {cursor:pointer;min-height:44px;display:flex;align-items:center;} details p {font-size:.9rem;margin:8px 0;}
body.classic-shell .game-header {grid-template-columns:44px minmax(0,1fr) 44px;}
body.classic-shell .classic-icon {display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;color:currentColor;}
body.classic-shell .classic-icon svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
body.classic-shell .classic-visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body.classic-shell #theme-toggle .theme-sun, body.classic-shell #theme-toggle[data-theme-action="dark"] .theme-sun {display:none;}
body.classic-shell #theme-toggle[data-theme-action="light"] .theme-moon {display:none;}
body.classic-shell #theme-toggle[data-theme-action="light"] .theme-sun {display:inline;}
body.classic-shell .play-actions button {flex-direction:row;gap:6px;min-height:52px;font-size:.78rem;}
body.classic-shell .play-actions {grid-template-columns:repeat(2,minmax(0,1fr));}
body.classic-shell .classic-menu-home {display:flex;align-items:center;min-height:44px;padding:8px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;color:var(--text);text-decoration:none;}
body.classic-shell .completion-dialog {width:min(360px,calc(100% - 28px));overflow:visible;text-align:center;}
body.classic-shell .completion-dialog .dialog-header,body.classic-shell .completion-dialog .completion-message,body.classic-shell .completion-dialog .completion-actions {position:relative;z-index:2;}
body.classic-shell .completion-dialog .dialog-header {margin-bottom:8px;}
body.classic-shell .completion-message {color:var(--muted);}
body.classic-shell .completion-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;}
body.classic-shell .completion-new-game {min-height:48px;border:1px solid #2563eb;border-radius:12px;background:#2563eb;color:#fff;font:inherit;font-weight:750;cursor:pointer;}
body.classic-shell .experiment-dialog-close {flex:0 0 44px;width:44px;min-width:44px;max-width:44px;height:44px;padding:0;}
body.classic-shell .experiment-home-link {display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font-weight:650;text-decoration:none;}
body.classic-shell .completion-confetti {position:fixed;z-index:1;inset:0;overflow:hidden;pointer-events:none;}
body.classic-shell .completion-confetti i {position:absolute;top:-12px;left:var(--x);width:8px;height:12px;background:hsl(var(--hue) 85% 55%);animation:completion-fall 1.3s var(--delay) ease-in forwards;}
@keyframes completion-fall {to{transform:translateY(105vh) rotate(720deg);opacity:0;}}
@media(prefers-reduced-motion:reduce) {body.classic-shell .completion-confetti {display:none;}}
body.classic-shell main {width:min(430px,calc(100% - 24px));}
body.classic-shell .game-header {min-height:52px;margin-bottom:4px;}
body.classic-shell .game-header h1 {font-size:1.25rem;font-weight:800;letter-spacing:-.035em;}
body.classic-shell .metrics {min-height:30px;margin:0 auto 6px;padding:3px 10px;border:1px solid color-mix(in srgb,var(--line),transparent 35%);border-radius:12px;background:var(--surface);box-shadow:0 1px 3px rgba(15,23,42,.05);font-size:.8rem;}
body.classic-shell #board {border-radius:12px;background:var(--surface);box-shadow:0 3px 12px rgba(15,23,42,.08);}
body.classic-shell .mark-controls {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,430px);margin:0 auto 8px;}
body.classic-shell .mark-controls button,body.classic-shell .input-row button {min-height:48px;border-radius:11px;border-color:var(--line);background:var(--surface);font-weight:650;box-shadow:0 2px 5px rgba(15,23,42,.07);}
body.classic-shell .play-actions {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
body.classic-shell.light-grid .play-actions {grid-template-columns:repeat(2,minmax(0,1fr));}
body.classic-shell .play-actions button {flex-direction:row;gap:6px;min-height:50px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 2px 5px rgba(15,23,42,.07);font-size:.82rem;font-weight:650;}
body.classic-shell #new-toggle {background:var(--text);color:var(--bg);border-color:var(--text);font-weight:750;}
body.classic-shell .classic-menu-home {border-radius:10px;background:var(--bg);font-weight:650;}
body.classic-shell .menu-list .classic-menu-home {margin-bottom:0;}
body.classic-shell dialog button:not(.dialog-close) {width:100%;}
body.classic-shell #theme-toggle .theme-sun,body.classic-shell #theme-toggle[data-theme-action="dark"] .theme-sun {display:none;}
body.classic-shell #theme-toggle[data-theme-action="light"] .theme-moon {display:none;}
body.classic-shell #theme-toggle[data-theme-action="light"] .theme-sun {display:inline;}
@media(max-width:360px) {.game-header h1 {font-size:1.05rem;} .cell {font-size:1.1rem;} .metrics {gap:12px;} #numbers,.input-row {gap:4px;}}

body.classic-shell {--line:#e2e8f0;--selected:#dbeafe;}
:root[data-theme=dark] body.classic-shell {--line:#334155;--selected:#1e40af;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) body.classic-shell {--line:#334155;--selected:#1e40af;}}
body.ten-game-shell .play-actions {grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}