/* Hereda fuentes y colores de ui.css */

/* Animación de entrada para el botón secundario */
@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-pop-in {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Ajustes para el contenedor de la rueda */
#wheelContainer {
    /* Centrado absoluto */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El Canvas del Marco es 200% del tamaño para dibujar los "brazos" fuera de la rueda */
#frameCanvas {
    /* Centrado matemático ya hecho en HTML con top-[-50%] etc */
}

/* El Canvas de la Rueda */
#wheelCanvas {
    border-radius: 50%;
    /* Opcional, solo por si acaso */
}

/* Estilo para el scroll de la lista de ganadores */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    /* Dorado semitransparente */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.6);
}