/* Hex's SVG board, inside the shared game shell (public/css/board.css) */

.hex-board {
    position: relative;
    display: flex;
    justify-content: center;
}

.hex-board svg {
    display: block;
    touch-action: none;
}

.hex-cell {
    fill: rgba(231, 208, 171, 0.9);
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.12s var(--ease);
}

.hex-cell:hover {
    fill: rgba(231, 208, 171, 1);
}

.hex-edge.red {
    stroke: rgb(220, 20, 20);
}

.hex-edge.blue {
    stroke: rgb(20, 150, 255);
}

.stone,
.last-move-dot,
.path-mark {
    pointer-events: none;
}

.stone.red {
    fill: rgba(220, 58, 58, 0.95);
}

.stone.blue {
    fill: rgba(58, 130, 220, 0.95);
}

.last-move-dot,
.path-mark {
    fill: #000;
}

/* Player bar stone icons */
.piece-icon.red {
    background: rgb(220, 58, 58);
    border-color: rgb(150, 30, 30);
    color: #fff;
}

.piece-icon.blue {
    background: rgb(58, 130, 220);
    border-color: rgb(25, 80, 150);
    color: #fff;
}

.hex-board + .player-bar {
    margin: 8px 0 0;
}

/* The result card sits over the board like on the square boards */
.hex-board .result-overlay {
    border-radius: 10px;
}