body,
.emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", "EmojiOne", sans-serif;
}

body {
    padding-top: 80px;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

main>.container,
main .container {
    padding-top: 80px;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/* Error Modal Animations */
.angry-bird-stomping {
    display: inline-block;
    animation: angryBirdStomp 0.6s infinite;
    filter: brightness(1.3) saturate(1.5);
    transform-origin: bottom center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes angryBirdStomp {
    0% {
        transform: translateY(0px) scale(1) rotate(-2deg);
    }

    25% {
        transform: translateY(-12px) scale(1.15) rotate(2deg);
    }

    50% {
        transform: translateY(0px) scale(1.1) scaleX(1.2) rotate(0deg);
    }

    75% {
        transform: translateY(4px) scale(0.9) scaleX(1.3) rotate(-1deg);
    }

    100% {
        transform: translateY(0px) scale(1) rotate(1deg);
    }
}

.angry-bird-stomping::before {
    content: "💢💥";
    position: absolute;
    top: -25px;
    right: -15px;
    font-size: 0.5em;
    animation: angerExplosion 0.8s infinite;
}

.angry-bird-stomping::after {
    content: "🔥";
    position: absolute;
    top: -15px;
    left: -15px;
    font-size: 0.4em;
    animation: flameFlicker 1s infinite;
}

@keyframes angerExplosion {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.3) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
}

@keyframes flameFlicker {

    0%,
    100% {
        opacity: 0.7;
        transform: scale(0.8);
    }

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

/* Make both modals identical in size and stacking */
.modal-dialog.modal-unified {
    max-width: 400px;
    width: 100%;
}

/* Overlapping modals: adjust stacking context */
#authenticationModal {
    z-index: 1061;
}

#loginModalError {
    z-index: 1060;
}

/* Both placed in center, absolutely (Bootstrap modal does this) */
/* Fade transition for authentication modal */
#authenticationModal.show {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s linear;
    /* Normale transition na 10s wachten */
}

#authenticationModal.fading-out {
    opacity: 0;
    pointer-events: none;
}

/* Error modal ready while above fades */
#loginModalError.show {
    opacity: 1;
    pointer-events: auto;
}

/* Show the error modal's close button */
#loginModalError .modal-footer {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s linear;
}

@keyframes flamingBackdrop {
    0% {
        background: radial-gradient(circle, rgba(255, 71, 87, 0.08), rgba(255, 0, 0, 0.2));
    }

    100% {
        background: radial-gradient(circle, rgba(255, 100, 100, 0.15), rgba(200, 0, 0, 0.3));
    }
}

/* Modal fade out transition for authentication modal */
.modal.fading-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    /* Normale transition na wachten */
}

.user-multi-col-list {
    column-count: 3;
    /* maximaal 3 kolommen */
    column-gap: 16px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 0;
}

.user-online-user-badge {
    background: #f3f6fa;
    border-radius: 12px;
    padding: 8px 16px;
    margin-bottom: 8px;
    display: block;
    break-inside: avoid;
    /* voorkom dat badge in 2 kolommen splitst */
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
}