.explode-btn {
    position: relative;
    overflow: visible;
    border-radius: inherit;
    transition: transform 0.08s;
    z-index: 1;
}

.explode-btn:active {
    transform: scale(0.95);
}

.explode-btn::after {
    content: "";

    position: absolute;

    inset: -3px;

    border-radius: inherit;

    background:
        linear-gradient(90deg,
            rgba(255, 90, 90, 0.75),
            rgba(255, 180, 90, 0.75),
            rgba(255, 230, 120, 0.75),
            rgba(120, 255, 160, 0.75),
            rgba(120, 220, 255, 0.75),
            rgba(140, 160, 255, 0.75),
            rgba(220, 140, 255, 0.75),
            rgba(255, 90, 90, 0.75));

    opacity: 0;

    transform: scale(0.92);

    filter: blur(2px);

    z-index: -1;

    pointer-events: none;
}

.explode-btn:active::after {
    animation: balancedExplosion 0.28s ease-out;
}

@keyframes balancedExplosion {

    0% {
        opacity: 0.95;
        transform: scale(0.92);
        filter: blur(2px);
    }

    40% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: scale(1.35);
        filter: blur(10px);
    }
}