/* ===== COINFLIP — Royale Violet ===== */
#game-coinflip {
    --rv-gold: #f5c451;
    --rv-gold-bright: #ffd76a;
    --rv-violet: #8b5cf6;
    --rv-text: #f5f0ff;
    --rv-text2: #a79fc2;
    --rv-text3: #6f6794;
    font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--rv-text);
}
#game-coinflip .game-body { flex-shrink: 0; }

.rv-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 10px;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--rv-text);
}
.rv-title-icon3d {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 14px rgba(139, 92, 246, 0.35);
}

.rv-stage {
    --acc: #f5c451;
    position: relative;
    border-radius: 20px;
    padding: 22px 12px 18px;
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(245, 196, 81, 0.22);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    text-align: center;
}

.coin-container {
    display: flex;
    justify-content: center;
    padding: 6px 0 14px;
    perspective: 600px;
}
.coin-img {
    width: 188px;
    height: 188px;
    border-radius: 50%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(245, 196, 81, 0.3));
    transform-style: preserve-3d;
}
/* the flip: a fast 3D tumble that lands on the server's side */
.coin-img.flipping { animation: coin-tumble 0.45s cubic-bezier(0.3, 0.6, 0.4, 1); }
@keyframes coin-tumble {
    0%   { transform: rotateY(0) translateY(0); }
    35%  { transform: rotateY(540deg) translateY(-34px); }
    70%  { transform: rotateY(1080deg) translateY(6px); }
    100% { transform: rotateY(1440deg) translateY(0); }
}
.coin-result-text {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, #ffe9a8, #f5c451 55%, #c98f1f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

@media (prefers-reduced-motion: reduce) {
    .coin-img.flipping { animation: none; }
}
@media (max-width: 340px) {
    .coin-img { width: 160px; height: 160px; }
}