/* ============================================================
   renju.eu – Brett (SVG), Steine und Diagramme
   ============================================================ */

.board-svg { display: block; width: 100%; height: auto; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); }
.board-svg .bg-rect { fill: var(--board); }
.board-svg .grid-line { stroke: var(--board-line); stroke-width: 1.2; opacity: 0.85; }
.board-svg .grid-edge { stroke: var(--board-line); stroke-width: 2.2; }
.board-svg .star-point { fill: var(--board-line); }
.board-svg .coord { fill: var(--text-muted); font-size: 12px; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.board-svg .hit { fill: transparent; cursor: pointer; }
.board-svg .hit:hover { fill: rgba(255, 255, 255, 0.14); }
.board-svg .stone { stroke-width: 1; }
.board-svg .stone.black { fill: var(--stone-black); stroke: rgba(0, 0, 0, 0.45); }
.board-svg .stone.white { fill: var(--stone-white); stroke: #7a7468; }
.board-svg .stone.last-move { stroke: var(--accent); stroke-width: 3; }
.board-svg .ghost { pointer-events: none; }
.board-svg .ghost.black { fill: var(--stone-black); opacity: 0.55; }
.board-svg .ghost.white { fill: var(--stone-white); opacity: 0.6; stroke: #7a7468; }
.board-svg .win-line { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; opacity: 0.95; }
.board-svg.disabled .hit { cursor: default; }
.board-svg.disabled .hit:hover { fill: transparent; }