.coin {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffd700, #ffb800);
    box-shadow:
        inset 0 0 0 8px rgba(255, 255, 255, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 215, 0, 0.3);
    transform-style: preserve-3d;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-inverse);
}

.flip {
    animation: flip 1.4s ease-in-out;
}

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(540deg);
    }

    100% {
        transform: rotateY(1080deg);
    }
}

/* Coinflip result: persistent style + smooth appear (no style jump) */
.coin-result {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    will-change: transform, opacity;
}

.coin-result.hidden {
    opacity: 0;
}

.coin-result.appear {
    animation: resultAppear 380ms ease-out;
    opacity: 1;
}

@keyframes resultAppear {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
        filter: blur(1px);
    }

    60% {
        opacity: 1;
        transform: translateY(0) scale(1.02);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 3D Coinflip Animation */
.coin-container {
    perspective: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    margin: 2rem 0;
}

.coin {
    width: 110px;
    height: 110px;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
    will-change: transform;
    transition: transform 180ms ease-out;
}

/* Rim / depth illusion */
.coin::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 6px rgba(0, 0, 0, 0.15),
        inset 0 0 15px rgba(0, 0, 0, 0.35),
        0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Thin edge band to simulate thickness */
.coin::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 10px;
    /* visual thickness */
    transform-origin: center;
    background: repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.35) 0px,
            rgba(0, 0, 0, 0.2) 4px,
            rgba(255, 255, 255, 0.15) 7px,
            rgba(0, 0, 0, 0.35) 10px);
    border-radius: 4px;
    /* place at coin radius and rotate to act as edge */
    transform: translateX(-50%) rotateY(90deg) translateZ(0px);
    box-shadow:
        0 0 0 2px #b8860b,
        inset 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Realistic toss: separate arc (container) and 3D spin (coin) */
.coin-container.tossing {
    animation: coinArc 0.7s ease-out;
}

.coin.spinning {
    animation: coinSpinX 0.7s linear infinite;
}

.coin-side {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 3px #b8860b, 0 4px 8px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--accent-primary);
}

.coin-face {
    font-size: 2.4rem;
    /* bigger for emoji */
    font-weight: 800;
    font-family: 'Outfit', system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74%;
    height: 74%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15), inset 0 0 12px rgba(0, 0, 0, .4);
}

.face-heads {
    background: linear-gradient(135deg, #ffb347, #ffcf33 55%, #ffaf2e);
    color: #222;
}

.face-tails {
    background: linear-gradient(135deg, #bcc6cc, #e0e5e9 55%, #c3ccd3);
    color: #222;
}

/* Ensure twemoji SVG/IMG inside coin scales nicely */
.coin-face img.emoji {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.coin-heads {
    background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
    transform: rotateX(0deg);
}

.coin-tails {
    background: linear-gradient(135deg, #c0c0c0, #e0e0e0, #c0c0c0);
    transform: rotateX(180deg);
}

@keyframes coinSpinX {
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(360deg);
    }
}

@keyframes coinArc {
    0% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }

    50% {
        transform: translateY(-80px) scale(1.05);
        filter: brightness(1.08);
    }

    100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
}