#board {grid-template-columns:24px repeat(var(--size,4),minmax(0,1fr)) 62px;gap:4px;}
#board .cell {border:2px solid var(--line);border-radius:6px;min-height:44px;font-size:1.2rem;touch-action:manipulation;}
#board .cell.mark-black {background:#172033;color:white;}
#board .cell.mark-white {background:#fff;color:#172033;}
#board .cell.mark-unknown {background:var(--surface);border-style:dashed;color:var(--muted);}
#board .cell.selected {box-shadow:none;outline:3px solid #2563eb;outline-offset:-3px;}
#board .constraint {min-width:0;font-size:.8rem;overflow-wrap:anywhere;line-height:1.2;text-align:center;}
#board .target {background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:3px 1px;}
#board .target.invalid {border-color:var(--error);font-weight:bold;}
#save-notice:empty {display:none;} #save-notice {color:var(--error);line-height:1.5;}
#mark-controls {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:430px;margin:0 auto 8px;} #mark-controls button {padding:8px 2px;}
@media(max-width:360px) {#board {grid-template-columns:16px repeat(var(--size,4),minmax(0,1fr)) 42px;gap:3px;} #board .constraint {font-size:.7rem;}}