/* ── Celebration overlay ── */
.celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    animation: celebFadeIn 0.3s ease-out;
}

.celebration-banner {
    background: rgba(0, 0, 0, 0.75);
    border-radius: 16px;
    padding: 24px 48px;
    text-align: center;
    animation: celebBannerPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
}

.celebration-banner h2 {
    color: #ffd700;
    font-size: 2rem;
    margin: 0 0 8px 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.celebration-banner .celebration-winners {
    color: #ffffff;
    font-size: 1.4rem;
    margin: 0;
}

/* ── Keyframes: banner ── */
@keyframes celebFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes celebBannerPop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

/* ── Keyframes: confetti falling ── */
@keyframes celebConfettiFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── Keyframes: card symbols rising ── */
@keyframes celebCardRise {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(-120vh) rotate(360deg) scale(0.5); opacity: 0; }
}

/* ── Keyframes: star burst from centre ── */
@keyframes celebStarBurst {
    0%   { transform: translate(0, 0) scale(0); opacity: 1; }
    30%  { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}

/* ── Keyframes: streamers falling with sway ── */
@keyframes celebStreamerFall {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
    25%  { transform: translateY(27vh) translateX(30px) rotate(90deg); }
    50%  { transform: translateY(55vh) translateX(-20px) rotate(180deg); }
    75%  { transform: translateY(82vh) translateX(25px) rotate(270deg); opacity: 0.8; }
    100% { transform: translateY(110vh) translateX(-10px) rotate(360deg); opacity: 0; }
}