.dice-images {
    display: flex;
    gap: 3px;
    align-items: center;
}

.dice {
    width: 25px;
    height: 25px;
    border-radius: 3px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 2px;
    box-sizing: border-box;
    gap: 1px;
}

.dice.active {
    background-color: #d32f2f;
}

.dice.passive {
    background-color: #ffffff;
    border: 1px solid #ddd;
}

.dice-dot {
    background-color: transparent;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.dice.active .dice-dot.visible {
    background-color: #ffffff;
}

.dice.passive .dice-dot.visible {
    background-color: #000000;
}

.dice-dot.empty {
    background-color: transparent;
}

.dice[data-value="1"] .dice-dot:nth-child(5),
.dice[data-value="2"] .dice-dot:nth-child(3),
.dice[data-value="2"] .dice-dot:nth-child(7),
.dice[data-value="3"] .dice-dot:nth-child(3),
.dice[data-value="3"] .dice-dot:nth-child(5),
.dice[data-value="3"] .dice-dot:nth-child(7),
.dice[data-value="4"] .dice-dot:nth-child(1),
.dice[data-value="4"] .dice-dot:nth-child(3),
.dice[data-value="4"] .dice-dot:nth-child(7),
.dice[data-value="4"] .dice-dot:nth-child(9),
.dice[data-value="5"] .dice-dot:nth-child(1),
.dice[data-value="5"] .dice-dot:nth-child(3),
.dice[data-value="5"] .dice-dot:nth-child(5),
.dice[data-value="5"] .dice-dot:nth-child(7),
.dice[data-value="5"] .dice-dot:nth-child(9),
.dice[data-value="6"] .dice-dot:nth-child(1),
.dice[data-value="6"] .dice-dot:nth-child(3),
.dice[data-value="6"] .dice-dot:nth-child(4),
.dice[data-value="6"] .dice-dot:nth-child(6),
.dice[data-value="6"] .dice-dot:nth-child(7),
.dice[data-value="6"] .dice-dot:nth-child(9) {
    background-color: currentColor;
}

.dice.active {
    color: #ffffff;
    background-color: #d32f2f;
}

.dice.passive {
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #ddd;
}