/* Heart Effect Styles */
#btn-create-duel {
    position: relative;
    overflow: visible !important;
    /* Allow hearts to fly out */
    z-index: 10;
    /* Keep button text on top */
}

.heart-particle {
    position: absolute;
    color: var(--primary);
    font-size: 1rem;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: -1;
    /* Behind button */
    opacity: 0;
}

.heart-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: var(--primary);
    font-size: 5rem;
    pointer-events: none;
    z-index: -2;
    animation: heartPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(0.5) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
        transform: translateY(-10px) scale(1) rotate(10deg);
    }

    100% {
        transform: translateY(-50px) scale(1.2) rotate(-10deg);
        opacity: 0;
    }
}

@keyframes heartPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Logo Heart Effect */
.logo-heart {
    position: absolute;
    bottom: -15px;
    /* Start below */
    color: var(--primary);
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 1;
    /* Behind logo (which is z-2) */
    opacity: 0;
    animation: floatUpLogo 4s linear forwards;
}

@keyframes floatUpLogo {
    0% {
        transform: translateY(0) scale(0.5) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
        /* Increased visibility */
    }

    50% {
        transform: translateY(-40px) scale(0.8) rotate(180deg);
        /* Slight spin */
    }

    100% {
        transform: translateY(-90px) scale(0.5) rotate(360deg);
        opacity: 0;
    }
}