:root{--shape-paper:#fff;--shape-ink:#111827;--shape-note:#64748b;--shape-grid:#94a3b8}
#board{width:min(100%,400px,max(220px,calc(100svh - 220px)));aspect-ratio:1;grid-template-columns:repeat(4,minmax(44px,1fr));grid-template-rows:repeat(4,minmax(44px,1fr));max-width:400px}.shape-cell{position:relative;min-width:44px;min-height:44px;width:100%;height:100%;padding:0;border-radius:0;border:1px solid var(--shape-grid);background:var(--shape-paper);color:var(--shape-ink);touch-action:manipulation;font-size:1.15rem}.shape-cell.fixed{background:var(--shape-ink);color:var(--shape-paper);font-weight:800}.shape-cell.selected{background:var(--shape-paper);box-shadow:inset 0 0 0 3px #2563eb}.shape-cell.error{outline:3px solid var(--error);outline-offset:-4px}.shape-cell.fixed.selected{background:var(--shape-ink)}.triangle{position:absolute;inset:0;background:var(--shape-ink);pointer-events:none}.triangle[data-direction="1"]{clip-path:polygon(0 0,100% 0,0 100%)}.triangle[data-direction="2"]{clip-path:polygon(0 0,100% 0,100% 100%)}.triangle[data-direction="3"]{clip-path:polygon(100% 0,100% 100%,0 100%)}.triangle[data-direction="4"]{clip-path:polygon(0 0,0 100%,100% 100%)}.unknown-mark,.white-mark{position:relative;z-index:1;color:var(--shape-note);font-size:.85rem}.white-mark{font-size:.6rem}.mark-controls{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:4px;margin:8px auto;max-width:400px}.mark-controls button{background:var(--shape-paper);color:var(--shape-ink);min-width:44px;min-height:44px;padding:0;font-size:1.35rem}.mark-controls button[aria-pressed="true"]{background:var(--shape-paper);box-shadow:inset 0 0 0 2px #2563eb}.play-actions{grid-template-columns:repeat(3,1fr)}.play-actions button{min-height:44px}