/* --- Confetti --- */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
}

.confetti {
    position: absolute;
    border-radius: 50%; /* Make particles circular */
    opacity: 0;
    animation: explode 1.5s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
    /* Glow effect using a box-shadow linked to a CSS variable */
    box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color);
}

@keyframes explode {
    0% {
        transform: translate(var(--start-x), var(--start-y)) scale(1.2);
        opacity: 1;
        /* Start with a bright flash */
        filter: brightness(2);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--end-x), var(--end-y)) scale(0);
        opacity: 0;
        filter: brightness(0);
    }
}


/* --- Glowing Frame (for Scoreboard) --- */
.glowing-frame {
    position: relative;
    --glow-intensity: 0; /* JS will update this */
    overflow: hidden; /* This will contain the glow */
}

/* Add a stacking context to the direct children holding content */
.glowing-frame > div {
    position: relative;
    z-index: 2;
}

.glowing-frame::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 750%; 
    height: 800%;
    background: conic-gradient(
        from 0deg,
        var(--accent-color),
        var(--secondary-accent-color),
        var(--success-color),
        var(--accent-color)
    );
    border-radius: inherit;
    filter: blur(60px);
    opacity: calc(var(--glow-intensity) * 0.6);
    transition: opacity 0.5s ease-in-out;
    animation: fire-glow 4s linear infinite;
    z-index: 1;
    transform: translate(-50%, -50%); /* Center the glow */
}

/* Simplified animation for the scoreboard glow */
@keyframes fire-glow {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}