/*
 * Styling for the Go board and stones. Colours and spacing were chosen to
 * resemble a traditional wooden board while ensuring clarity in a web UI.
 */

.go-board {
    display: inline-block;
    border: 2px solid #333;
    background-color: #f4c27f; /* light wood tone */
    padding: 2px;
    user-select: none;
}

.go-board .row {
    display: flex;
}

.go-board .cell {
    width: 30px;
    height: 30px;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    position: relative;
}

/* remove top border on first row and left border on first column */
.go-board .row:first-child .cell {
    border-top: none;
}
.go-board .cell:first-child {
    border-left: none;
}

.go-board .stone {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 3px;
}
.go-board .stone.black {
    background-color: black;
}
.go-board .stone.white {
    background-color: white;
    border: 1px solid black;
}

/* star points are small centred dots */
.go-board .star-point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* highlight marker for the most recent move */
.go-board .last-move::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
}