.ab-board { width: min(94vw, 380px); margin: 10px auto; aspect-ratio: 1/1; position: relative; }
.ab-board svg { width: 100%; height: 100%; }
.ab-hex { fill: #eceff4; stroke: #c8ccd6; stroke-width: 1.5; }
.ab-marble { stroke-width: 2; cursor: pointer; }
.ab-marble.p1 { fill: #ff6b6b; stroke: #b03a3a; }
.ab-marble.p2 { fill: #4d96ff; stroke: #2c5fb3; }
.ab-marble.sel { stroke: #ffd93d; stroke-width: 4; }
.dir-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.dir-btn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); font-size: 18px; cursor: pointer; }
.dir-btn:active { transform: scale(0.92); }