.coin {
    position: fixed;
    width: var(--coin-size, 34px);
    height: var(--coin-size, 34px);
    background-image: url('../images/coin.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
    filter: drop-shadow(0 7px 8px rgba(55, 21, 0, 0.42)) drop-shadow(0 0 5px rgba(255, 218, 104, 0.52));
    pointer-events: none;
    transform: translate(-50%, -50%) translateZ(0);
    will-change: transform, opacity;
    z-index: 9999;
    animation: coin-flight var(--duration, 900ms) cubic-bezier(.18, .78, .22, 1) var(--delay, 0ms) forwards;
}

.coin::after {
    content: "";
    position: absolute;
    inset: 12% 20% auto auto;
    width: 32%;
    height: 18%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    filter: blur(2px);
    transform: rotate(-22deg);
}

.coin-spark {
    position: fixed;
    width: var(--spark-size, 7px);
    height: var(--spark-size, 7px);
    border-radius: 50%;
    background: radial-gradient(circle, #fff9c8 0%, #ffd45a 45%, rgba(255, 150, 28, 0) 72%);
    box-shadow: 0 0 12px rgba(255, 210, 83, 0.88);
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    z-index: 9998;
    animation: coin-spark-flight var(--duration, 480ms) cubic-bezier(.12, .8, .28, 1) var(--delay, 0ms) forwards;
}

.coin-flash {
    position: fixed;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 232, 0.95) 0%, rgba(255, 209, 72, 0.64) 42%, rgba(255, 111, 30, 0) 72%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    z-index: 9997;
    animation: coin-flash-pop 420ms cubic-bezier(.16, .8, .3, 1) forwards;
}

@keyframes coin-flight {
    0% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg) rotateY(0deg) scale(0.55);
        opacity: 0;
    }

    35% {
        transform: translate(-50%, -50%) translate3d(var(--mid-x), var(--mid-y), 0) rotate(var(--mid-rotate)) rotateY(var(--mid-tilt)) scale(1.12);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translate3d(var(--end-x), var(--end-y), 0) rotate(var(--rotate)) rotateY(var(--tilt)) scale(0.72);
        opacity: 0;
    }
}

@keyframes coin-spark-flight {
    0% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.4);
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) translate3d(var(--end-x), var(--end-y), 0) scale(0);
        opacity: 0;
    }
}

@keyframes coin-flash-pop {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0.95;
    }

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