:root {--black:#1e293b;--white:#fff;--white-text:#1e293b;--unknown:#e2e8f0;--unknown-text:#1e293b;}
:root {--hitori-grid-edge:#64748b;--black:#1e293b;--white:#fff;--white-text:#1e293b;--unknown:#e2e8f0;--unknown-text:#1e293b;}
:root[data-theme=dark] {--hitori-grid-edge:#0f172a;--black:#030712;--white:#cbd5e1;--white-text:#0f172a;--unknown:#64748b;--unknown-text:#f8fafc;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) {--hitori-grid-edge:#0f172a;--black:#030712;--white:#cbd5e1;--white-text:#0f172a;--unknown:#334155;--unknown-text:#f8fafc;}}
#board {grid-template-columns:repeat(4,minmax(0,1fr));gap:0;} .cell {position:relative;border-radius:0;border:1px solid var(--hitori-grid-edge);min-width:44px;min-height:44px;} .cell.black {background:var(--black);color:#fff;} .cell.white {background:var(--white);color:var(--white-text);} .cell.unknown {background:var(--unknown);color:var(--unknown-text);} .number {font-size:1.65rem;font-weight:650;} .state-mark {position:absolute;right:5px;bottom:2px;font-size:.75rem;line-height:1.2;} .cell:disabled {opacity:1;} .cell.selected {outline:3px solid #2563eb;outline-offset:-4px;box-shadow:none;} .cell.invalid {box-shadow:inset 0 0 0 3px var(--error);text-decoration:none;}
.input-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));} .input-row button {min-width:44px;min-height:44px;} .play-actions {grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:360px) {main {width:calc(100% - 16px);} .number {font-size:1.4rem;}}