.mmf-coin-shell {
    --coin-rim: #c98f2b;
    --coin-rim-dark: #8f6317;
    --coin-core: #f8c766;
    --coin-core-dark: #d99c3f;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 42%),
        linear-gradient(140deg, var(--coin-core), var(--coin-core-dark));
    border: 5px solid var(--coin-rim);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -5px 10px rgba(108, 67, 10, 0.28),
        0 8px 16px rgba(0, 0, 0, 0.22);
}

.mmf-coin-shell::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 2px solid rgba(255, 244, 214, 0.45);
    pointer-events: none;
}

.mmf-coin-image {
    width: 78%;
    height: 78%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.mmf-coin-image.mmf-coin-image-heads {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    transform: scale(0.99);
    transform-origin: center center;
}

.mmf-coin-stage {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
}

.mmf-coin-flip {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.mmf-coin-flip.is-flipping {
    animation: mmfCoinFlipToss 1100ms cubic-bezier(0.23, 0.69, 0.27, 1) forwards;
}

.mmf-coin-flip.is-revealed {
    transform: rotateY(180deg);
}

.mmf-coin-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mmf-coin-face-front {
    transform: rotateY(180deg);
}

.mmf-coin-face-back {
    transform: rotateY(0deg);
}

@keyframes mmfCoinFlipToss {
    0% {
        transform: rotateY(0deg) rotateX(0deg) translateY(0);
    }
    35% {
        transform: rotateY(540deg) rotateX(20deg) translateY(-8px);
    }
    70% {
        transform: rotateY(1080deg) rotateX(6deg) translateY(-2px);
    }
    100% {
        transform: rotateY(1260deg) rotateX(0deg) translateY(0);
    }
}

@media (max-width: 576px) {
    .mmf-coin-shell {
        border-width: 4px;
    }

    .mmf-coin-shell::after {
        inset: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mmf-coin-flip.is-flipping {
        animation: none !important;
    }
}