.dice {
    background-color: var(--front-darker);
}

.dice.bang-arrow {
    color: var(--danger-color); /* Rojo para la flecha, usando variable de colors.css */
    /* El tamaño del emoji se hereda de .dice, ajustar si es necesario */
}

.dice.bang-dynamite {
    background-color: var(--danger-color-dark); /* Fondo rojo oscuro */
    border-color: var(--danger-color);         /* Borde rojo */
    color: var(--text-color-light);            /* Texto claro para contraste */
    /* cursor: default; No es necesario si no tiene listener de click */
}

#results-info {
   text-align: center; margin-top: 1rem; margin-bottom:1rem; min-height: 2.5em; line-height: 1.4;
}

/* Animaciones específicas para BANG! */
@keyframes popInDiceBang {
    from {
        transform: scale(0.5) rotate(-15deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.dice.bang-initial-roll {
    transform-origin: center center;
    /* Usamos una curva de Bézier que da un efecto más "elástico" */
    animation: popInDiceBang 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    /* El JS se encarga del animation-delay escalonado */
}

@keyframes bangRerollAnimation {
    0% {
        transform: scale(1.1) rotate(-10deg) translateY(-5px);
        opacity: 0.7;
    }
    50% {
        transform: scale(0.8) rotate(10deg) translateY(0px);
        opacity: 0.5;
    }
    100% {
        transform: scale(1) rotate(0deg) translateY(0px);
        opacity: 1;
    }
}

.dice.bang-rerolling {
    animation: bangRerollAnimation 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Clases para resaltar texto en #results-info, usando variables de colors.css */
#results-info .highlight {
    color: var(--warning-color-light); /* Un amarillo/ámbar más brillante para el texto */
    font-weight: bold;
}
#results-info .danger {
    color: var(--danger-color-light); /* Un rojo más brillante para el texto */
    font-weight: bold;
}