.dice-container {
    display: flex;
    flex-wrap: wrap; /* Para que los dados pasen a la siguiente línea */
    justify-content: center; /* Centra los dados horizontalmente */
    gap: 0.8rem; /* Espacio entre dados */
    padding: 1rem 0; /* Espacio vertical alrededor de los dados */
    margin-bottom: 1rem; /* Separación con los botones/sumario */
}

.dice {
    --dice-size: 4rem; /* Tamaño base del dado */
    width: var(--dice-size);
    height: var(--dice-size);
    background-color: var(--front-darker);
    color: var(--bg-color);
    border: 2px solid var(--middle-darker); /* Borde gris oscuro */
    border-radius: var(--border-radius-lg);
    font-size: calc(var(--dice-size) * 0.4); /* Tamaño del número relativo al dado */
    font-weight: bold;
    display: inline-flex;
    align-items: center; /* Centra el número verticalmente */
    justify-content: center; /* Centra el número horizontalmente */
    cursor: pointer; /* Indica que se puede hacer clic */
    user-select: none; /* Evita seleccionar el número al hacer clic */
    transition: background-color 0.2s ease, border-color 0.2s ease, border-style 0.2s ease, transform 0.1s ease; /* Transición suave */
}

.dice:active {
    transform: scale(0.95); /* Efecto al presionar */
    filter: brightness(100%);
}

.dice.locked {
    border-color: var(--middle-darker); /* Borde gris */
    border-style: dashed; /* Borde punteado */
    filter: brightness(40%);
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 400px) {
    .dice {
        --dice-size: 3rem; /* Dados más pequeños en pantallas estrechas */
    }
}