/* Premium upsell button (owner 2026-10-20): a pearlescent foil that slowly wobbles in 3D, like the
 * cards in Balatro, so it never blends into a game's own palette. Shared: any game puts
 * class="rp-premium-cta" on its upsell button and links /premium-cta.css. The glare moves with the tilt;
 * with prefers-reduced-motion the button stays flat and still. No emoji: the optional crown is
 * --rp-icon-crown from ui-icons.css (class rp-premium-cta--crown). */

.rp-premium-cta {
    --rp-pearl-ink: #2b1236;
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    min-height: 58px;
    padding: 12px 18px;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    color: var(--rp-pearl-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
    cursor: pointer;
    background:
        linear-gradient(115deg, #fde7f1 0%, #e4d4ff 18%, #cdf3ee 34%, #fff3c9 50%, #ffd6e6 66%, #d9d1ff 82%, #fde7f1 100%);
    background-size: 280% 100%;
    background-position: 0% 50%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -3px 0 rgba(120, 70, 140, .22),
        0 0 0 1px rgba(255, 255, 255, .55),
        0 12px 28px rgba(190, 140, 255, .35),
        0 4px 12px rgba(0, 0, 0, .25);
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
}

/* Fine foil grain and the moving glare. */
.rp-premium-cta::before,
.rp-premium-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.rp-premium-cta::before {
    z-index: -1;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 6px, rgba(255, 255, 255, .22) 6px 7px),
        radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .55), transparent 55%);
    mix-blend-mode: soft-light;
}
.rp-premium-cta::after {
    z-index: 1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 46%, rgba(255, 255, 255, .15) 54%, transparent 70%);
    background-size: 250% 100%;
    background-position: 100% 0;
    mix-blend-mode: overlay;
}

.rp-premium-cta--crown .rp-premium-cta-label::before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 8px;
    vertical-align: -3px;
    background: linear-gradient(135deg, #b0487a, #6d3fbf);
    -webkit-mask: var(--rp-icon-crown) center / contain no-repeat;
    mask: var(--rp-icon-crown) center / contain no-repeat;
}
.rp-premium-cta-label { position: relative; z-index: 2; }

.rp-premium-cta:active { filter: brightness(.96); }
.rp-premium-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
    .rp-premium-cta {
        animation: rp-pearl-tilt 4.8s ease-in-out infinite, rp-pearl-shift 4.8s ease-in-out infinite;
    }
    .rp-premium-cta::after { animation: rp-pearl-glare 4.8s ease-in-out infinite; }
    .rp-premium-cta:active { animation-play-state: paused; }
}

/* A slow circle: the tilt goes round the four edges, the colour band and the glare follow it. */
@keyframes rp-pearl-tilt {
    0%, 100% { transform: perspective(520px) rotateX(5deg) rotateY(0deg); }
    25% { transform: perspective(520px) rotateX(0deg) rotateY(-9deg); }
    50% { transform: perspective(520px) rotateX(-5deg) rotateY(0deg); }
    75% { transform: perspective(520px) rotateX(0deg) rotateY(9deg); }
}
@keyframes rp-pearl-shift {
    0%, 100% { background-position: 50% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 50% 50%; }
    75% { background-position: 0% 50%; }
}
@keyframes rp-pearl-glare {
    0%, 100% { background-position: 55% 0; opacity: .7; }
    25% { background-position: 0% 0; opacity: 1; }
    50% { background-position: 45% 0; opacity: .7; }
    75% { background-position: 100% 0; opacity: 1; }
}