.boardContainer {
    display: grid;
    gap: 0.1vmin;
    grid-template-columns: repeat(var(--board-size), var(--cell-size));
    grid-template-rows: repeat(var(--board-size), var(--cell-size));
    flex-grow: 1;
}

.player {
    width: var(--cell-size);
    height: var(--cell-size);
    cursor: pointer;
}

.player1 {
    border: 0.1vmin solid var(--player1-color) !important;
}

.player2 {
    border: 0.1vmin solid var(--player2-color) !important;
}

.player3 {
    border: 0.1vmin solid var(--player3-color) !important;
}

.player4 {
    border: 0.1vmin solid var(--player4-color) !important;
}

.player1.active,
.player1.piece {
    border: none !important;
    background: repeating-linear-gradient(to bottom,
            var(--player1-color) 0%,
            color-mix(in srgb, var(--player1-color) 50%, transparent) 20%) !important;
}

.player2.active,
.player2.piece {
    border: none !important;
    background: repeating-linear-gradient(to bottom,
            var(--player2-color) 0%,
            color-mix(in srgb, var(--player2-color) 50%, transparent) 20%) !important;
}

.player3.active,
.player3.piece {
    border: none !important;
    background: repeating-linear-gradient(to bottom,
            var(--player3-color) 0%,
            color-mix(in srgb, var(--player3-color) 50%, transparent) 20%) !important;
}

.player4.active,
.player4.piece {
    border: none !important;
    background: repeating-linear-gradient(to bottom,
            var(--player4-color) 0%,
            color-mix(in srgb, var(--player4-color) 50%, transparent) 20%) !important;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    border: 0.1vmin solid #000;
    background: repeating-linear-gradient(to bottom,
            var(--cell-color) 0%,
            color-mix(in srgb, var(--cell-color) 50%, transparent) 20%);

    transition: background-color 240ms;
    cursor: pointer;
}

.cell.house {
    background: repeating-linear-gradient(
        to bottom,
        var(--house-color) 0%,
        color-mix(in srgb, var(--house-color) 50%, transparent) 20%
    );
}