/* CSS for Quiz Mode and Poll Results */

/* Quiz Animations */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: 10000;
    pointer-events: none;
    animation: confetti-fall 3s linear forwards;
}

@keyframes sad-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.sad-animation {
    animation: sad-shake 0.5s ease-in-out;
}

/* Poll Results Modal */
.poll-avatar-stack {
    display: flex;
    align-items: center;
}

.poll-avatar-stack img {
    margin-right: -8px;
    border: 2px solid white;
    transition: transform 0.2s;
}

.poll-avatar-stack img:hover {
    transform: translateY(-2px);
    z-index: 10;
}

/* Quiz Option Stylings */
.quiz-correct {
    background-color: #dcfce7 !important;
    /* green-100 */
    border-color: #22c55e !important;
    /* green-500 */
    color: #14532d !important;
    /* green-900 */
}

.quiz-wrong {
    background-color: #fee2e2 !important;
    /* red-100 */
    border-color: #ef4444 !important;
    /* red-500 */
    color: #7f1d1d !important;
    /* red-900 */
    animation: sad-shake 0.4s;
}