.randombox-card {
    --tier-accent: #8b5cf6;
    --tier-accent-soft: rgba(139, 92, 246, 0.18);
    --tier-glow: rgba(139, 92, 246, 0.22);
    --idle-delay: 0ms;
}
.randombox-card:nth-child(2) { --idle-delay: 160ms; }
.randombox-card:nth-child(3) { --idle-delay: 320ms; }
.randombox-card:nth-child(4) { --idle-delay: 90ms; }
.randombox-card:nth-child(5) { --idle-delay: 260ms; }
.randombox-card:nth-child(6) { --idle-delay: 420ms; }
.randombox-card--starter {
    --tier-accent: #64748b;
    --tier-accent-soft: rgba(100, 116, 139, 0.16);
    --tier-glow: rgba(100, 116, 139, 0.18);
}
.randombox-card--lucky {
    --tier-accent: #0f766e;
    --tier-accent-soft: rgba(20, 184, 166, 0.16);
    --tier-glow: rgba(20, 184, 166, 0.2);
}
.randombox-card--gold {
    --tier-accent: #d97706;
    --tier-accent-soft: rgba(245, 158, 11, 0.2);
    --tier-glow: rgba(245, 158, 11, 0.24);
}
.randombox-card--platinum {
    --tier-accent: #7c3aed;
    --tier-accent-soft: rgba(124, 58, 237, 0.18);
    --tier-glow: rgba(124, 58, 237, 0.25);
}
.randombox-card--diamond {
    --tier-accent: #0891b2;
    --tier-accent-soft: rgba(34, 211, 238, 0.2);
    --tier-glow: rgba(34, 211, 238, 0.26);
}
.randombox-card--royal {
    --tier-accent: #f59e0b;
    --tier-accent-soft: rgba(168, 85, 247, 0.22);
    --tier-glow: rgba(245, 158, 11, 0.32);
}
.randombox-card::after {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: -1;
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 16%, var(--tier-accent-soft), transparent 24%),
        radial-gradient(circle at 84% 22%, rgba(236, 72, 153, 0.2), transparent 26%),
        radial-gradient(circle at 50% 88%, var(--tier-glow), transparent 30%);
    opacity: 0.68;
    filter: blur(14px);
    transform: translateZ(0);
    animation: randombox-card-breath 3.8s ease-in-out var(--idle-delay) infinite;
}
.randombox-card__stage::before,
.randombox-card__stage::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 16px;
    pointer-events: none;
    opacity: 0;
}
.randombox-card__stage::before {
    z-index: 1;
    border: 2px solid var(--tier-accent);
    box-shadow: 0 0 0 0 var(--tier-glow), inset 0 0 24px var(--tier-accent-soft);
    transform: scale(0.82);
}
.randombox-card__stage::after {
    z-index: 5;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.98), transparent 26%),
        linear-gradient(120deg, transparent 26%, rgba(255, 255, 255, 0.8) 47%, transparent 68%);
    transform: translateX(-42%) rotate(8deg);
}
.randombox-card__stage {
    transform: translateZ(0);
}
.randombox-card__stage::before {
    animation: randombox-idle-ring 2.8s ease-in-out var(--idle-delay) infinite;
}
.randombox-card__stage::after {
    animation: randombox-idle-sweep 3.4s ease-in-out var(--idle-delay) infinite;
}
.randombox-card__image {
    will-change: transform, filter;
    animation: randombox-idle-box-float 2.9s ease-in-out var(--idle-delay) infinite;
}
.randombox-card__image::before,
.randombox-card__image::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
}
.randombox-card__image::before {
    inset: 13% 8% auto;
    height: 32%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.86), transparent 62%);
    opacity: 0.55;
    filter: blur(8px);
    animation: randombox-idle-aura 2.5s ease-in-out var(--idle-delay) infinite;
}
.randombox-card__image::after {
    left: 50%;
    bottom: -6%;
    width: 52%;
    height: 12%;
    background: rgba(15, 23, 42, 0.16);
    filter: blur(7px);
    transform: translateX(-50%);
    animation: randombox-idle-shadow 2.9s ease-in-out var(--idle-delay) infinite;
}
.randombox-card__image img {
    animation: randombox-idle-image-glow 3.1s ease-in-out var(--idle-delay) infinite;
}
.randombox-card__jackpot {
    border: 1px solid rgba(255, 255, 255, 0.58);
    text-shadow: 0 1px 2px rgba(17, 24, 39, 0.22);
    animation: randombox-badge-tick 2.6s ease-in-out var(--idle-delay) infinite;
}
.randombox-card:hover .randombox-card__stage::before,
.randombox-card:hover .randombox-card__stage::after {
    animation-duration: 1.2s;
}
.randombox-card:hover .randombox-card__image {
    animation: randombox-hover-tempt 0.74s cubic-bezier(0.18, 0.9, 0.24, 1.32) infinite;
}
.randombox-card:hover .randombox-buy-button:not(:disabled) {
    box-shadow: 0 16px 34px rgba(124, 58, 237, 0.28), 0 0 24px rgba(236, 72, 153, 0.28);
}
.randombox-buy-button:not(:disabled) {
    animation: randombox-cta-pulse 2.5s ease-in-out infinite;
}
.randombox-reveal {
    position: relative;
    overflow: hidden;
}
.randombox-card--gold .randombox-card__stage,
.randombox-card--platinum .randombox-card__stage,
.randombox-card--diamond .randombox-card__stage,
.randombox-card--royal .randombox-card__stage {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 14px 32px var(--tier-glow);
}
.randombox-card.is-charging {
    border-color: var(--tier-accent);
    transform: translateY(-4px) scale(1.01);
}
.randombox-card.is-charging .randombox-card__stage::before {
    animation: randombox-charge-ring 0.62s ease-out forwards;
}
.randombox-card.is-charging .randombox-card__image {
    animation: randombox-charge-float 0.62s ease-out forwards;
}
.randombox-card.is-rolling {
    border-color: var(--tier-accent);
    box-shadow: 0 24px 60px var(--tier-glow);
}
.randombox-card.is-rolling .randombox-card__stage {
    animation: randombox-slot-stage-roll 0.36s linear infinite;
}
.randombox-card.is-rolling .randombox-card__stage::before {
    opacity: 0.95;
    transform: scale(1.02);
    animation: randombox-rolling-ring 0.46s ease-in-out infinite;
}
.randombox-card.is-rolling .randombox-card__stage::after {
    opacity: 0.82;
    animation: randombox-rolling-sweep 0.5s linear infinite;
}
.randombox-card.is-rolling .randombox-card__image {
    animation: randombox-reel-anticipation 0.34s cubic-bezier(0.28, 0.8, 0.34, 1.18) infinite;
}
.randombox-card.is-opening .randombox-card__image {
    animation: randombox-box-open-v2 0.76s cubic-bezier(0.28, 0.8, 0.34, 1.18) infinite;
}
.randombox-card.is-opening .randombox-card__stage::before {
    opacity: 0.88;
    transform: scale(1);
    box-shadow: 0 0 34px 8px var(--tier-glow), inset 0 0 30px var(--tier-accent-soft);
}
.randombox-card.is-flashing .randombox-card__stage::after {
    animation: randombox-stage-flash 0.34s ease-out forwards;
}
.randombox-card.is-flashing .randombox-card__image {
    animation: randombox-pop-reveal 0.36s ease-out forwards;
}
.randombox-card.is-blasting {
    border-color: #facc15;
    box-shadow: 0 28px 70px rgba(217, 119, 6, 0.28), 0 0 0 2px rgba(250, 204, 21, 0.24);
}
.randombox-card.is-blasting .randombox-card__stage {
    animation: randombox-stage-detonate 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.randombox-card.is-blasting .randombox-card__image {
    animation: randombox-blast-pop 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.randombox-card.is-blasting .randombox-card__stage::before {
    opacity: 1;
    animation: randombox-blast-ring 0.72s ease-out forwards;
}
.randombox-card.is-blasting .randombox-card__stage::after {
    opacity: 1;
    animation: randombox-blast-whiteout 0.58s ease-out forwards;
}
.randombox-card--tier-5.is-opening .randombox-card__stage::before,
.randombox-card--tier-6.is-opening .randombox-card__stage::before {
    animation: randombox-royal-pulse 0.62s ease-in-out infinite;
}
.randombox-card.is-hit,
.randombox-card.is-jackpot {
    animation: randombox-result-card-impact 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.randombox-card.is-hit .randombox-reveal,
.randombox-card.is-jackpot .randombox-reveal {
    border-color: var(--tier-accent);
    box-shadow: 0 12px 28px var(--tier-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.82);
    animation: randombox-result-reveal-impact 0.86s cubic-bezier(0.16, 1, 0.3, 1);
}
.randombox-card.is-jackpot .randombox-reveal {
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.28), 0 18px 42px rgba(217, 119, 6, 0.28);
    animation: randombox-result-reveal-impact 0.86s cubic-bezier(0.16, 1, 0.3, 1), randombox-jackpot-result-pulse 1.4s ease-in-out 2;
}
.randombox-card.is-hit .randombox-reveal::before,
.randombox-card.is-jackpot .randombox-reveal::before {
    content: "";
    position: absolute;
    inset: -28%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95), transparent 24%),
        conic-gradient(from 0deg, transparent, rgba(250, 204, 21, 0.5), transparent, rgba(168, 85, 247, 0.42), transparent);
    opacity: 0;
    animation: randombox-result-flash 0.92s ease-out forwards;
}
.randombox-card.is-hit .randombox-reveal::after,
.randombox-card.is-jackpot .randombox-reveal::after {
    content: "WIN";
    position: absolute;
    right: 12px;
    top: 10px;
    color: #ffffff;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--tier-accent), #ec4899);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    box-shadow: 0 10px 22px var(--tier-glow);
    transform: rotate(-8deg) scale(0.2);
    opacity: 0;
    animation: randombox-result-stamp 1.08s cubic-bezier(0.2, 1.45, 0.36, 1) forwards;
}
.randombox-card.is-jackpot .randombox-reveal::after {
    content: "JACKPOT";
    color: #422006;
    background: linear-gradient(135deg, #fef3c7, #facc15 48%, #f97316);
    font-size: 13px;
}
.randombox-card.is-low .randombox-reveal {
    animation: randombox-result-reveal-impact 0.52s ease-out;
}
.randombox-card.is-hit .randombox-reveal strong,
.randombox-card.is-jackpot .randombox-reveal strong {
    color: #111827;
    font-size: 18px;
}
.randombox-prize-burst {
    position: absolute;
    left: var(--burst-x, 50%);
    top: var(--burst-y, 32%);
    z-index: 8;
    width: var(--burst-size, 8px);
    height: var(--burst-size, 8px);
    background: var(--burst-color, #facc15);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--burst-color, #facc15);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--burst-rotate));
    animation: randombox-prize-burst-v2 var(--burst-duration, 1320ms) ease-out var(--burst-delay, 0ms) forwards;
}
.randombox-prize-burst--coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #78350f;
    font-size: 8px;
    font-weight: 900;
}
.randombox-prize-burst--coin::before {
    content: "P";
}
.randombox-prize-burst--spark {
    border-radius: 0;
    clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 65%, 50% 100%, 38% 65%, 0 50%, 38% 35%);
}
.randombox-prize-burst--gem {
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(var(--burst-rotate)) rotate(45deg);
}
.randombox-prize-burst--chip {
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.76);
}
.randombox-prize-burst--ray {
    width: calc(var(--burst-size, 8px) * 0.58);
    height: calc(var(--burst-size, 8px) * 2.2);
    border-radius: 999px;
}
@keyframes randombox-card-breath {
    0%, 100% { opacity: 0.48; transform: scale(0.98); }
    50% { opacity: 0.82; transform: scale(1.03); }
}
@keyframes randombox-idle-ring {
    0%, 100% {
        opacity: 0.22;
        transform: scale(0.88);
        box-shadow: 0 0 0 0 var(--tier-glow), inset 0 0 16px var(--tier-accent-soft);
    }
    50% {
        opacity: 0.58;
        transform: scale(1);
        box-shadow: 0 0 30px 6px var(--tier-glow), inset 0 0 26px var(--tier-accent-soft);
    }
}
@keyframes randombox-idle-sweep {
    0%, 18% { opacity: 0; transform: translateX(-70%) rotate(8deg); }
    38% { opacity: 0.42; }
    64%, 100% { opacity: 0; transform: translateX(72%) rotate(8deg); }
}
@keyframes randombox-idle-box-float {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    38% { transform: translateY(-5px) rotate(-0.7deg) scale(1.012); }
    68% { transform: translateY(2px) rotate(0.5deg) scale(0.998); }
}
@keyframes randombox-idle-aura {
    0%, 100% { opacity: 0.34; transform: scaleX(0.82); }
    50% { opacity: 0.72; transform: scaleX(1.04); }
}
@keyframes randombox-idle-shadow {
    0%, 100% { opacity: 0.18; transform: translateX(-50%) scaleX(0.9); }
    50% { opacity: 0.08; transform: translateX(-50%) scaleX(1.12); }
}
@keyframes randombox-idle-image-glow {
    0%, 100% { filter: drop-shadow(0 18px 16px rgba(17, 24, 39, 0.16)); }
    50% { filter: drop-shadow(0 20px 18px var(--tier-glow)) saturate(1.06); }
}
@keyframes randombox-badge-tick {
    0%, 72%, 100% { transform: scale(1); filter: brightness(1); }
    82% { transform: scale(1.08); filter: brightness(1.12); }
    90% { transform: scale(0.96); }
}
@keyframes randombox-hover-tempt {
    0%, 100% { transform: translateY(-4px) rotate(-1deg) scale(1.035); }
    50% { transform: translateY(-8px) rotate(1.2deg) scale(1.06); }
}
@keyframes randombox-cta-pulse {
    0%, 100% { box-shadow: 0 12px 24px rgba(124, 58, 237, 0.24); }
    50% { box-shadow: 0 14px 30px rgba(124, 58, 237, 0.3), 0 0 18px rgba(236, 72, 153, 0.2); }
}
@keyframes randombox-charge-ring {
    0% {
        opacity: 0;
        transform: scale(0.78);
        box-shadow: 0 0 0 0 var(--tier-glow);
    }
    70% {
        opacity: 0.9;
        transform: scale(1.04);
        box-shadow: 0 0 42px 12px var(--tier-glow), inset 0 0 28px var(--tier-accent-soft);
    }
    100% {
        opacity: 0.68;
        transform: scale(1);
        box-shadow: 0 0 28px 6px var(--tier-glow), inset 0 0 24px var(--tier-accent-soft);
    }
}
@keyframes randombox-charge-float {
    0% { transform: translateY(0) scale(1); }
    55% { transform: translateY(-7px) scale(1.03); }
    100% { transform: translateY(0) scale(1.01); }
}
@keyframes randombox-box-open-v2 {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1.01); }
    18% { transform: translateX(-9px) translateY(-4px) rotate(-4deg) scale(1.05); }
    36% { transform: translateX(9px) translateY(3px) rotate(4deg) scale(1.07); }
    58% { transform: translateX(-7px) translateY(-6px) rotate(-3deg) scale(1.08); }
    78% { transform: translateX(6px) translateY(2px) rotate(3deg) scale(1.05); }
}
@keyframes randombox-slot-stage-roll {
    0%, 100% { filter: brightness(1) saturate(1); transform: translateZ(0); }
    50% { filter: brightness(1.18) saturate(1.22); transform: translateY(-1px); }
}
@keyframes randombox-rolling-ring {
    0%, 100% { box-shadow: 0 0 30px 8px var(--tier-glow), inset 0 0 28px var(--tier-accent-soft); }
    50% { box-shadow: 0 0 46px 14px var(--tier-glow), inset 0 0 38px var(--tier-accent-soft); }
}
@keyframes randombox-rolling-sweep {
    0% { transform: translateX(-82%) rotate(8deg); }
    100% { transform: translateX(82%) rotate(8deg); }
}
@keyframes randombox-reel-anticipation {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1.04); }
    20% { transform: translateX(-7px) translateY(-4px) rotate(-3deg) scale(1.08); }
    42% { transform: translateX(8px) translateY(2px) rotate(3deg) scale(1.09); }
    64% { transform: translateX(-5px) translateY(-6px) rotate(-2deg) scale(1.1); }
    82% { transform: translateX(5px) translateY(3px) rotate(2deg) scale(1.07); }
}
@keyframes randombox-stage-detonate {
    0% { transform: scale(1); filter: brightness(1); }
    28% { transform: scale(1.035); filter: brightness(1.45) saturate(1.42); }
    62% { transform: scale(0.988); filter: brightness(1.18) saturate(1.18); }
    100% { transform: scale(1); filter: brightness(1); }
}
@keyframes randombox-blast-pop {
    0% { transform: scale(1.03); filter: brightness(1.08) saturate(1.16); }
    32% { transform: scale(1.3) rotate(-2deg); filter: brightness(1.6) saturate(1.45); }
    68% { transform: scale(0.94) rotate(1deg); }
    100% { transform: scale(1.04); filter: brightness(1.08) saturate(1.12); }
}
@keyframes randombox-blast-ring {
    0% { transform: scale(0.84); box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
    48% { transform: scale(1.16); box-shadow: 0 0 70px 24px rgba(250, 204, 21, 0.42), inset 0 0 44px var(--tier-accent-soft); }
    100% { transform: scale(1.04); box-shadow: 0 0 34px 8px var(--tier-glow), inset 0 0 30px var(--tier-accent-soft); }
}
@keyframes randombox-blast-whiteout {
    0% { opacity: 0; transform: scale(0.2); }
    30% { opacity: 0.92; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.6); }
}
@keyframes randombox-stage-flash {
    0% { opacity: 0; transform: translateX(-42%) rotate(8deg); }
    35% { opacity: 1; transform: translateX(0) rotate(8deg); }
    100% { opacity: 0; transform: translateX(48%) rotate(8deg); }
}
@keyframes randombox-pop-reveal {
    0% { transform: scale(1.02); filter: saturate(1.12); }
    55% { transform: scale(1.16); filter: saturate(1.35) brightness(1.22); }
    100% { transform: scale(1.03); filter: saturate(1.12); }
}
@keyframes randombox-royal-pulse {
    0%, 100% { opacity: 0.72; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.05); }
}
@keyframes randombox-result-card-impact {
    0% { transform: translateY(0) scale(1); }
    32% { transform: translateY(-8px) scale(1.035); }
    62% { transform: translateY(2px) scale(0.992); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes randombox-jackpot-result-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.28), 0 18px 42px rgba(217, 119, 6, 0.28); }
    50% { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.34), 0 24px 58px rgba(217, 119, 6, 0.38); }
}
@keyframes randombox-result-reveal-impact {
    0% { transform: scale(0.94); filter: brightness(1); }
    38% { transform: scale(1.045); filter: brightness(1.16); }
    100% { transform: scale(1); filter: brightness(1); }
}
@keyframes randombox-result-flash {
    0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    20% { opacity: 0.86; }
    100% { opacity: 0; transform: scale(1.45) rotate(22deg); }
}
@keyframes randombox-result-stamp {
    0% { opacity: 0; transform: rotate(-12deg) scale(0.2); }
    34% { opacity: 1; transform: rotate(-8deg) scale(1.24); }
    55% { transform: rotate(-8deg) scale(0.92); }
    78% { opacity: 1; transform: rotate(-8deg) scale(1); }
    100% { opacity: 0.98; transform: rotate(-8deg) scale(1); }
}
@keyframes randombox-prize-burst-v2 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--burst-rotate)) translateY(0) scale(0.4);
    }
    16% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--burst-rotate)) translateY(calc(var(--burst-distance) * -1)) scale(0);
    }
}