:root {--board-edge:#64748b;--pair-line:#2563eb;--cursor-line:#b45309;}
:root[data-theme=dark] {--board-edge:#94a3b8;--pair-line:#93c5fd;--cursor-line:#fbbf24;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) {--board-edge:#94a3b8;--pair-line:#93c5fd;--cursor-line:#fbbf24;}}
#board {grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:2px solid var(--board-edge);border-radius:8px;overflow:hidden;background:var(--bg);}
.cell {font-size:1.65rem;font-weight:650;border-radius:0;border:1px solid var(--board-edge);min-width:44px;min-height:44px;}
.cell.paired {background:var(--selected);border-color:transparent;}
.cell.edge-top {border-top:3px solid var(--pair-line);} .cell.edge-bottom {border-bottom:3px solid var(--pair-line);} .cell.edge-left {border-left:3px solid var(--pair-line);} .cell.edge-right {border-right:3px solid var(--pair-line);}
.cell.cursor {box-shadow:inset 0 0 0 2px var(--cursor-line);} .cell.pending {outline:3px dashed var(--cursor-line);outline-offset:-6px;}
.cell:disabled {opacity:1;} .pair-actions {max-width:430px;margin:0 auto 8px;display:flex;justify-content:center;} .pair-actions button {min-height:44px;}
.play-actions {grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:360px) {main {width:calc(100% - 16px);} .cell {font-size:1.4rem;}}