/* =============================================================================
   mb-mystery.css — Mystery Box page (mystery/show.blade.php).
   Uses mb-checkout.css + mb-lottery.css building blocks.
   ============================================================================= */

.mb-hero {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(244, 114, 182, .35), transparent 60%),
        radial-gradient(360px 240px at 0% 100%, rgba(168, 85, 247, .35), transparent 60%),
        linear-gradient(135deg, #1A0B2E 0%, #3B0764 50%, #701A75 100%);
}
.mb-hl { background: linear-gradient(90deg, #FDE68A, #F9A8D4); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── CSS gift box ─────────────────────────────────────────────────────── */
.mb-giftbox { position: relative; width: 104px; height: 104px; margin: 0 auto; }
.mb-giftbox .mb-body {
    position: absolute; left: 8px; right: 8px; bottom: 0; height: 62%;
    border-radius: 10px;
    background: linear-gradient(160deg, #F472B6, #A21CAF);
    box-shadow: inset 0 -10px 18px rgba(0,0,0,.18), 0 16px 30px -12px rgba(0,0,0,.6);
}
.mb-giftbox .mb-lid {
    position: absolute; left: 0; right: 0; top: 18%; height: 24%;
    border-radius: 10px;
    background: linear-gradient(160deg, #F9A8D4, #C026D3);
    box-shadow: 0 6px 12px -6px rgba(0,0,0,.5);
    z-index: 2;
    transition: transform .5s var(--mb-ease);
}
.mb-giftbox .mb-ribbon {
    position: absolute; left: 50%; top: 18%; bottom: 0; width: 16%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #FDE68A, #F59E0B);
    z-index: 3;
}
.mb-giftbox .mb-ribbon::before, .mb-giftbox .mb-ribbon::after {
    content: ""; position: absolute; top: -22px; width: 26px; height: 22px;
    border: 6px solid #FBBF24; border-radius: 50% 50% 0 50%;
}
.mb-giftbox .mb-ribbon::before { right: 50%; transform: rotate(-20deg); }
.mb-giftbox .mb-ribbon::after { left: 50%; transform: scaleX(-1) rotate(-20deg); }
.lt-hero-visual .mb-giftbox { animation: lt-float-y 3.5s ease-in-out infinite; }
@keyframes lt-float-y { 50% { transform: translateY(-8px); } }
@media (min-width: 640px) { .lt-hero-visual .mb-giftbox { width: 130px; height: 130px; } }

.mb-giftbox-lg { width: 150px; height: 150px; }
.mb-giftbox.is-shaking { animation: mb-shake .5s ease-in-out infinite; }
@keyframes mb-shake {
    0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg) scale(1.02); }
    40% { transform: rotate(6deg); } 60% { transform: rotate(-5deg) scale(1.03); } 80% { transform: rotate(4deg); }
}
.mb-giftbox.is-open .mb-lid { transform: translateY(-60px) rotate(-18deg); }

/* ── Reward cards ─────────────────────────────────────────────────────── */
.mb-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.mb-reward {
    --rc: #64748B; --rc-50: #F1F5F9;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 118px; padding: 20px 8px 12px;
    border-radius: 16px; text-align: center;
    background: linear-gradient(160deg, var(--rc-50), #fff);
    border: 1.5px solid color-mix(in srgb, var(--rc) 30%, #fff);
    transition: transform var(--mb-med) var(--mb-ease), box-shadow var(--mb-med) var(--mb-ease);
}
.mb-reward i { font-size: 1.6rem; color: var(--rc); }
.mb-reward-name { font-size: .8rem; font-weight: 800; color: var(--mb-ink); line-height: 1.25; }
.mb-rarity {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    padding: 1px 8px; border-radius: 999px;
    background: var(--rc); color: #fff;
    font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.mb-r-legendary { --rc: #D97706; --rc-50: #FFF7E0; box-shadow: 0 10px 22px -14px rgba(217,119,6,.8); }
.mb-r-epic      { --rc: #9333EA; --rc-50: #F5EEFF; }
.mb-r-rare      { --rc: #2563EB; --rc-50: #EEF4FF; }
.mb-r-common    { --rc: #0D9488; --rc-50: #EDFBF9; }
.mb-reward.is-out { opacity: .5; filter: grayscale(.6); }
.mb-out { font-size: .64rem; font-weight: 800; color: var(--mb-danger); }
.mb-reward.is-won { transform: scale(1.06); box-shadow: 0 0 0 3px var(--rc), 0 14px 28px -10px color-mix(in srgb, var(--rc) 70%, transparent); }

/* ── Buttons, lists ───────────────────────────────────────────────────── */
body .mb-cta { background: linear-gradient(90deg, #DB2777, #9333EA) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 24px -12px rgba(219, 39, 119, .8) !important; }
.mb-mine-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #F5EEFF; color: #9333EA; }
.mb-st { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.mb-st-pending   { background: var(--mb-warning-50); color: var(--mb-warning); }
.mb-st-delivered { background: var(--mb-success-50); color: var(--mb-success); }
.mb-st-refunded  { background: var(--mb-surface-2); color: var(--mb-muted); }
.mb-won { flex-shrink: 0; max-width: 48%; padding: 4px 9px; border-radius: 8px; background: #F5EEFF; color: #7E22CE; font-size: .72rem; font-weight: 800; text-align: right; }

/* ── Reveal overlay ───────────────────────────────────────────────────── */
.mb-reveal {
    position: fixed; inset: 0; z-index: 99998;
    display: none; align-items: center; justify-content: center; padding: 20px;
    background: radial-gradient(circle at 50% 40%, rgba(88, 28, 135, .92), rgba(8, 4, 20, .97) 70%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#mbResult {
    padding: 22px 18px 18px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
}
#mbResult::before { content: "\f06b"; font-family: "Font Awesome 6 Free"; font-weight: 900; display: block; font-size: 2.2rem; color: #FBBF24; margin-bottom: 6px; }
.mb-hl-ico { color: #F9A8D4; font-size: .9em; }
.mb-reveal.show { display: flex; animation: mb-fade .2s ease; }
@keyframes mb-fade { from { opacity: 0; } to { opacity: 1; } }
.mb-reveal-card { width: 100%; max-width: 380px; text-align: center; color: #fff; }
.mb-stage { min-height: 190px; display: flex; align-items: center; justify-content: center; }
.mb-roll {
    padding: 16px 22px; border-radius: 16px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    font-family: var(--mb-font-display) !important; font-size: 1.35rem; font-weight: 800;
    min-width: 240px;
}
.mb-roll.is-final { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #422006; border-color: #FDE68A; transform: scale(1.08); transition: transform .3s var(--mb-ease); }
.mb-result-label { font-size: .86rem; font-weight: 700; color: #FBCFE8; }
.mb-result-prize {
    margin: 8px 0 10px;
    font-family: var(--mb-font-display) !important; font-size: 1.9rem; font-weight: 800; line-height: 1.2;
    background: linear-gradient(90deg, #FDE68A, #FFFFFF, #F9A8D4); -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: lt-pop .45s var(--mb-ease);
}
.mb-result-note { font-size: .84rem; color: rgba(255,255,255,.8); line-height: 1.5; }
.mb-reveal .co-btn-back { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }