/* ============================================================
   J-SAM Celebration Popup
   ============================================================ */
.jsam-celebrate-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6,6,14,0);
    padding: 16px;
    pointer-events: none;
    transition: background .25s ease;
    overflow: hidden;
}
.jsam-celebrate-overlay--open {
    background: radial-gradient(circle at 50% 30%, rgba(245,197,24,.10), rgba(6,6,14,.85) 65%);
    pointer-events: auto;
}

/* Full-screen confetti rain layer, sits behind the card */
.jsam-celebrate-confetti-field {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
}

.jsam-celebrate-card {
    position: relative; z-index: 2;
    width: 100%; max-width: 380px;
    background: linear-gradient(180deg, #171a30 0%, #12142a 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 38px 26px 26px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    transform: scale(.85) translateY(20px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2,1.2,.4,1), opacity .25s ease;
    font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
}
.jsam-celebrate-overlay--open .jsam-celebrate-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.jsam-celebrate-close {
    position: absolute; top: 12px; right: 14px; z-index: 3;
    background: rgba(255,255,255,.06); border: none; color: rgba(255,255,255,.6);
    font-size: 20px; line-height: 1; cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.jsam-celebrate-close:hover { color: #fff; background: rgba(255,255,255,.14); }

/* ── Icon + glow ─────────────────────────────────────────── */
.jsam-celebrate-icon-wrap {
    position: relative;
    width: 96px; height: 96px; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
}
.jsam-celebrate-icon-glow {
    position: absolute; inset: -30px;
    border-radius: 50%;
    opacity: 0;
}
.jsam-celebrate-icon {
    position: relative; z-index: 1;
    width: 96px; height: 96px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    animation: jsc-pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
.jsam-celebrate-icon svg { width: 48px; height: 48px; }

.jsam-celebrate-card--win .jsam-celebrate-icon {
    color: #171308;
    background: radial-gradient(circle at 35% 30%, #ffe58a, #f5c518 55%, #c9930a 100%);
    box-shadow: 0 0 0 6px rgba(245,197,24,.12), 0 10px 30px rgba(245,197,24,.35);
    animation: jsc-pop .5s cubic-bezier(.2,1.4,.4,1) both, jsc-float 2.4s ease-in-out .6s infinite;
}
.jsam-celebrate-card--win .jsam-celebrate-icon-glow {
    opacity: 1;
    background: radial-gradient(circle, rgba(245,197,24,.5), transparent 70%);
    animation: jsc-glow-pulse 1.8s ease-out .4s infinite;
}
.jsam-celebrate-card--lose .jsam-celebrate-icon {
    color: #ef4444;
    background: radial-gradient(circle, rgba(239,68,68,.18), transparent 70%);
    animation: jsc-pop .5s cubic-bezier(.2,1.4,.4,1) both, jsc-shake .5s ease .5s;
}
.jsam-celebrate-card--placed .jsam-celebrate-icon {
    color: #a78bfa;
    background: radial-gradient(circle, rgba(124,58,237,.22), transparent 70%);
}
.jsam-celebrate-card--info .jsam-celebrate-icon {
    color: #38bdf8;
    background: radial-gradient(circle, rgba(56,189,248,.2), transparent 70%);
}

@keyframes jsc-pop {
    0%   { opacity: 0; transform: scale(.3); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes jsc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes jsc-glow-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245,197,24,.45); }
    70%  { box-shadow: 0 0 0 26px rgba(245,197,24,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,197,24,0); }
}
@keyframes jsc-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* ── Copy ────────────────────────────────────────────────── */
.jsam-celebrate-title {
    font-size: 20px; font-weight: 700; letter-spacing: .3px; color: #fff; margin: 0 0 2px;
    animation: jsc-fade-up .4s ease .15s both;
}
.jsam-celebrate-card--win .jsam-celebrate-title {
    font-size: 34px; font-weight: 800; letter-spacing: .5px; color: #fff;
    text-shadow: 0 2px 18px rgba(245,197,24,.35);
}
.jsam-celebrate-amount {
    font-size: 32px; font-weight: 800; color: #22c55e; margin: 8px 0 10px;
    animation: jsc-fade-up .4s ease .3s both;
}
.jsam-celebrate-card--win .jsam-celebrate-amount { font-size: 30px; color: #f5c518; }
.jsam-celebrate-message {
    font-size: 13.5px; color: #8891a5; margin: 0 0 4px; line-height: 1.5;
    animation: jsc-fade-up .4s ease .22s both;
}
.jsam-celebrate-ok {
    margin-top: 20px;
    background: #7c3aed; color: #fff; border: none;
    font-size: 14px; font-weight: 700;
    padding: 13px 36px; border-radius: 10px; cursor: pointer;
    animation: jsc-fade-up .4s ease .36s both;
    transition: background .15s, transform .15s;
}
.jsam-celebrate-ok:hover { background: #6d28d9; transform: translateY(-1px); }
.jsam-celebrate-card--win .jsam-celebrate-ok { background: #f5c518; color: #171308; }
.jsam-celebrate-card--win .jsam-celebrate-ok:hover { background: #e0b30f; }

@keyframes jsc-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .jsam-celebrate-icon, .jsam-celebrate-icon-glow, .jsam-celebrate-title, .jsam-celebrate-message,
    .jsam-celebrate-amount, .jsam-celebrate-ok { animation: none; }
}

/* Confetti burst around the trophy */
.jsam-celebrate-confetti-piece {
    position: absolute; top: 60px; left: 50%; width: 8px; height: 14px;
    opacity: 0; pointer-events: none;
    animation: jsc-confetti-fall 1.2s ease-out forwards;
}
@keyframes jsc-confetti-fall {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--dx), 200px) rotate(var(--rot)); }
}

/* Full-screen confetti rain (bigger "jackpot" moment) */
.jsam-celebrate-rain-piece {
    position: absolute; top: -20px; width: 8px; height: 14px;
    opacity: .95; pointer-events: none; border-radius: 1px;
    animation-name: jsc-rain-fall;
    animation-timing-function: cubic-bezier(.4,0,.6,1);
    animation-fill-mode: forwards;
}
@keyframes jsc-rain-fall {
    0%   { opacity: .95; transform: translate(0, -20px) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--drift), 110vh) rotate(var(--rot)); }
}

@media (max-width: 420px) {
    .jsam-celebrate-card { padding: 30px 20px 22px; }
    .jsam-celebrate-icon-wrap, .jsam-celebrate-icon { width: 80px; height: 80px; }
    .jsam-celebrate-icon svg { width: 40px; height: 40px; }
    .jsam-celebrate-card--win .jsam-celebrate-title { font-size: 27px; }
    .jsam-celebrate-title { font-size: 18px; }
    .jsam-celebrate-amount { font-size: 26px; }
    .jsam-celebrate-card--win .jsam-celebrate-amount { font-size: 24px; }
}