.back{display:inline-block;color:var(--muted);text-decoration:none}
.back:hover{color:var(--fg)}
.rules{color:var(--muted);font-size:.95rem;margin:4px 0 12px}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:10px}
.controls label{flex-direction:column}
#board{touch-action:none;margin:0 auto;overflow:hidden}
#board>*{min-width:0;min-height:0;overflow:hidden}
#board .sq{font-size:inherit}
.sq.home{box-shadow:inset 0 0 0 1px #81b64c55}
.pan{display:flex;gap:6px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.pan button{min-width:44px}
#viewinfo{color:var(--muted);font-size:.8rem;text-align:center}
#board.ring{display:block;aspect-ratio:1;box-shadow:none;overflow:visible}
#board.ring svg{width:100%;height:100%;display:block}
.cell{stroke:#0005;stroke-width:.4;cursor:pointer}
.cell.l{fill:var(--light)}.cell.d{fill:var(--dark)}
.cell.last{fill:#d9b65a}.cell.sel{fill:#f6d360}.cell.check{fill:#e05555}
.dot{fill:#0005;pointer-events:none}.dot.ring{fill:none;stroke:#0006;stroke-width:1.5}
#board svg text.pc{text-anchor:middle;dominant-baseline:central;pointer-events:none;font-family:system-ui,sans-serif}
#board svg text.pc.w{fill:#fff;stroke:#000;stroke-width:.5;paint-order:stroke}
#board svg text.pc.b{fill:#111}
.hub{fill:var(--panel)}
#status{text-align:center;margin:0}
.oc-right .controls{flex-direction:column;align-items:stretch;margin:0}
.oc-right .pan{justify-content:flex-start}