.yw-confetti {
    position: fixed;
    top: calc(50vh - 2.55rem);
    left: 50vw;
    width: var(--yw-size);
    height: var(--yw-height);
    border-radius: 2px; /* Render as rectangular confetti pieces */
    background: var(--yw-color);
    z-index: -1; /* Render behind the popup content, but in front of the parent's background */
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity, filter;
    transform: translate3d(calc(-50% + var(--yw-origin-x)), calc(-50% + var(--yw-origin-y)), 0) scale(.3) rotate(var(--yw-rotate));
    animation: yw-sparks-burst var(--yw-duration) linear var(--yw-delay) forwards;
}

/* Hard safety guard: no spark created by any old/new script may show on loss. */
.WinningTip__C:has(.WinningTip__C-body.isL) .yw-confetti,
.WinningTip__C:has(.isLose) .yw-confetti {
    display: none !important;
    animation: none !important;
}

/* Slow controlled spread from the medal, then fade/blur out at final coordinates (no falling down) */
@keyframes yw-sparks-burst {
    0% {
        opacity: 0;
        animation-timing-function: cubic-bezier(.1, .8, .2, 1);
        transform: translate3d(calc(-50% + var(--yw-origin-x)), calc(-50% + var(--yw-origin-y)), 0) scale(.3) rotate(0deg);
        filter: blur(0px);
    }
    /* Burst quickly to scattered coordinates by 25% */
    25% {
        opacity: 1;
        animation-timing-function: cubic-bezier(.22, .61, .36, 1);
        transform: translate3d(calc(-50% + var(--yw-x-mid)), calc(-50% + var(--yw-y-mid)), 0) scale(1.0) rotate(var(--yw-rotate));
        filter: blur(0px);
    }
    /* Drift slightly further outward and fade out */
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--yw-x-end)), calc(-50% + var(--yw-y-end)), 0) scale(0.3) rotate(calc(var(--yw-rotate) * 1.5));
        filter: blur(2px); /* Soft blur fade out */
    }
}

@media (prefers-reduced-motion: reduce) {
    .yw-confetti { display: none; }
}