@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

* {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    margin: 0;
}

#celebrationOverlay {
    isolation: isolate;
}

#celebrationBackdrop {
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.22), transparent 42%),
        radial-gradient(circle at 80% 15%, rgba(16, 185, 129, 0.22), transparent 42%),
        radial-gradient(circle at 50% 85%, rgba(250, 204, 21, 0.14), transparent 50%),
        rgba(0, 0, 0, 0.38);
}

#celebrationCard {
    width: min(92vw, 1500px);
    min-height: min(44vh, 460px);
    overflow: hidden;
    border-color: color-mix(in oklab, #618375 65%, #93c5fd 35%);
    background: linear-gradient(135deg, rgba(59, 61, 66, 0.96), rgba(41, 42, 45, 0.96));
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.12),
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 42px rgba(56, 189, 248, 0.2);
}

.celebration-header {
    width: 100%;
    padding: clamp(1rem, 0.7rem + 0.9vw, 1.7rem) clamp(1.3rem, 0.9rem + 1.2vw, 2.4rem);
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.24), rgba(59, 130, 246, 0.18));
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.celebration-card-body {
    min-height: min(30vh, 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1.8rem, 1.2rem + 2vw, 3.4rem);
    justify-content: center;
    gap: clamp(0.55rem, 0.3rem + 0.9vw, 1.1rem);
}

.celebration-chip {
    font-size: clamp(1rem, 0.7rem + 0.65vw, 1.45rem);
    padding-inline: clamp(0.9rem, 0.6rem + 0.8vw, 1.6rem);
    padding-block: clamp(0.4rem, 0.25rem + 0.4vw, 0.75rem);
}

.celebration-team {
    font-size: clamp(3.5rem, 2rem + 4.4vw, 7rem);
    line-height: 1.02;
    font-weight: 800;
}

.celebration-action {
    font-size: clamp(1.65rem, 1.15rem + 1.6vw, 3rem);
    line-height: 1.2;
    font-weight: 600;
    max-width: 26ch;
}

.celebration-stats {
    font-size: clamp(1.25rem, 0.9rem + 1vw, 2rem);
    flex-wrap: wrap;
    justify-content: center;
}

.celebration-points-chip {
    font-size: clamp(1.15rem, 0.8rem + 0.95vw, 1.95rem);
    padding-inline: clamp(1rem, 0.75rem + 0.8vw, 1.8rem);
    padding-block: clamp(0.45rem, 0.25rem + 0.45vw, 0.8rem);
}

.celebration-total {
    font-size: clamp(1.3rem, 0.95rem + 1.05vw, 2.1rem);
}

#celebrationCard.is-team-online .celebration-header {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.28), rgba(34, 211, 238, 0.2));
}

#celebrationCard.is-visible {
    animation: celebrationPulse 1200ms ease-in-out infinite;
}

@keyframes celebrationPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(148, 163, 184, 0.12),
            0 20px 60px rgba(0, 0, 0, 0.5),
            0 0 36px rgba(56, 189, 248, 0.18);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(148, 163, 184, 0.18),
            0 24px 68px rgba(0, 0, 0, 0.56),
            0 0 56px rgba(16, 185, 129, 0.26);
    }
}

@media (prefers-reduced-motion: reduce) {
    #celebrationBackdrop,
    #celebrationCard {
        transition: none !important;
        animation: none !important;
    }
}

@media (min-width: 2560px) {
    #celebrationCard {
        width: min(86vw, 1760px);
        min-height: min(46vh, 520px);
    }
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--background-secondary);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--background);
}