/* Figma 497:2 — original illustrations, cream card and canonical orange CTA. */
.mystery-box-entry {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: 65px;
    height: 65px;
    padding: 3px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    z-index: var(--z-sticky, 300);
}
.mystery-box-entry img { position: absolute; object-fit: contain; pointer-events: none; }
.mystery-box-entry .mystery-box-entry-disc { left: -8px; top: -2px; width: 80px; height: 88px; }
.mystery-box-entry .mystery-box-entry-box { left: 3px; top: 2px; width: 59px; height: 59px; }
.mystery-box-dialog {
    box-sizing: border-box;
    width: min(343px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #1a1a1a;
    font-family: 'SFProText', 'SF Pro Text', sans-serif;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--z-modal-tier-3, 800);
}
.mystery-box-dialog::backdrop { background: var(--ds-overlay, #0006); }
.mystery-box-dialog[open] { display: block; }
.mystery-box-card { position: relative; box-sizing: border-box; padding: 22px 24px 18px 23px; border-radius: 10px; background: #fef2e5; overflow: hidden; }
body.mystery-box-visible { overflow: hidden; }
.mystery-box-close {
    position: absolute;
    top: 6px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #1a1a1a;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: var(--z-above-base, 2);
}
.mystery-box-scene { position: relative; width: calc(100% + 47px); aspect-ratio: 343 / 242; margin: -22px -24px 0 -23px; pointer-events: none; }
.mystery-box-layer { position: absolute; display: block; object-fit: contain; pointer-events: none; }
.mystery-box-art { left: 17.4927%; top: 9.0909%; width: 64.723%; height: 91.7355%; }
.mystery-box-free-rays { left: 11.6618%; top: 6.1983%; width: 76.3848%; height: 60.3306%; }
.mystery-box-free-hill { left: 0; top: 63.2231%; width: 100%; height: 64.876%; }
.mystery-box-paid-hill { display: none; left: 0; top: 62.449%; width: 100%; height: 104.4898%; }
.mystery-box-closed-shadow { left: 19.6793%; top: 64.6694%; width: 60.6414%; height: 38.843%; }
.mystery-box-opening-hill, .mystery-box-opened-shadow, .mystery-box-confetti, .mystery-box-ticket { display: none; }
.mystery-box-dialog[data-free='false'][data-state='ready'] .mystery-box-scene { aspect-ratio: 343 / 245; }
.mystery-box-dialog[data-free='false'][data-state='ready'] .mystery-box-art { top: 8.9796%; height: 90.6122%; }
.mystery-box-dialog[data-free='false'][data-state='ready'] .mystery-box-free-hill { display: none; }
.mystery-box-dialog[data-free='false'][data-state='ready'] .mystery-box-paid-hill { display: block; }
.mystery-box-dialog[data-state='opening'] .mystery-box-scene, .mystery-box-dialog[data-state='opened'] .mystery-box-scene { aspect-ratio: 343 / 339; }
.mystery-box-dialog[data-state='opening'] .mystery-box-card, .mystery-box-dialog[data-state='opened'] .mystery-box-card { min-height: 409px; }
.mystery-box-dialog[data-state='opening'] .mystery-box-art, .mystery-box-dialog[data-state='opened'] .mystery-box-art { left: 0; top: 20.649%; width: 100%; height: 79.351%; }
.mystery-box-dialog[data-state='opening'] .mystery-box-free-rays, .mystery-box-dialog[data-state='opened'] .mystery-box-free-rays,
.mystery-box-dialog[data-state='opening'] .mystery-box-free-hill, .mystery-box-dialog[data-state='opened'] .mystery-box-free-hill,
.mystery-box-dialog[data-state='opening'] .mystery-box-closed-shadow, .mystery-box-dialog[data-state='opened'] .mystery-box-closed-shadow,
.mystery-box-dialog[data-state='reward'] .mystery-box-free-rays, .mystery-box-dialog[data-state='reward'] .mystery-box-free-hill,
.mystery-box-dialog[data-state='reward'] .mystery-box-closed-shadow { display: none; }
.mystery-box-dialog[data-state='opening'] .mystery-box-opening-hill, .mystery-box-dialog[data-state='opened'] .mystery-box-opening-hill { display: block; left: 0; top: 63.1268%; width: 100%; height: 57.5221%; }
.mystery-box-dialog[data-state='opened'] .mystery-box-opened-shadow { display: block; left: 6.2682%; top: 65.0442%; width: 82.2157%; height: 34.5133%; }
.mystery-box-dialog[data-state='opened'] .mystery-box-art { z-index: var(--z-above-base, 2); }
.mystery-box-dialog[data-state='opened'] .mystery-box-confetti, .mystery-box-dialog[data-state='reward'] .mystery-box-confetti { display: block; left: 0; top: 0; width: 100%; height: 120.649%; }
.mystery-box-dialog[data-state='reward'] .mystery-box-confetti { height: 169.0083%; }
.mystery-box-dialog[data-state='reward'] .mystery-box-ticket { display: block; }
.mystery-box-dialog[data-state='reward'] .mystery-box-card { padding-bottom: 21px; }
.mystery-box-dialog[data-state='reward'] .mystery-box-message { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mystery-box-reward-details { margin-top: 8px; padding: 12px 23px; border-radius: 10px; background: #fef2e5; text-align: center; font-size: 14px; line-height: 1.5; }
.mystery-box-reward-details p { margin: 6px 0 0; font-size: 12px; }
.mystery-box-reward-rays { left: 0; top: 0; width: 100%; height: 135.9504%; }
.mystery-box-ticket-outline { left: 15.4519%; top: 35.124%; width: 69.0962%; height: 57.438%; }
.mystery-box-ticket-shadow { left: 16.035%; top: 35.9504%; width: 67.93%; height: 55.7851%; }
.mystery-box-ticket-border { left: 17.4927%; top: 38.0165%; width: 65.0146%; height: 51.6529%; }
.mystery-box-ticket-fill { left: 18.0758%; top: 38.843%; width: 63.8484%; height: 50%; }
.mystery-box-ticket-logo { left: 32.07%; top: 41.7355%; width: 23.9067%; height: 33.8843%; }
.mystery-box-ticket-label { position: absolute; left: 23.3236%; top: 75.6198%; width: 41.3994%; text-align: center; font: 600 15px/1.2 'SFProText', sans-serif; }
.mystery-box-message, [data-box-actions], .mystery-box-balances, .mystery-box-error { position: relative; z-index: var(--z-above-base, 2); }
[data-box-actions] { display: flow-root; }
.mystery-box-message { margin: 0 0 12px; text-align: center; line-height: 1.5; font-size: 15px; }
.mystery-box-message:empty { display: none; }
.mystery-box-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    margin: 0 0 8px;
    padding: 12px;
    border: 0;
    border-radius: 10px;
    background: var(--ds-brand, #ea794c);
    /* White on the brand orange is 2.86:1; the fixed dark CTA label is 5.4:1 (design-system/AI_RULES.md §6). */
    color: var(--ds-on-cta, #1a1a1a);
    font: 500 15px/1.5 'SFProText', 'SF Pro Text', sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.mystery-box-button:hover { background: var(--ds-brand-hover, #ee8e60); }
.mystery-box-button:disabled { background: #e6d5c6; color: #675c52; cursor: default; }
.mystery-box-button--secondary { background: transparent; border: 1px solid #ad7752; color: #1a1a1a; }
.mystery-box-button--coming-soon { background: #ad9987; color: #1a1a1a; }
.mystery-box-button [data-coming-soon] { background: #fff; color: #665246; border-radius: 4px; font-size: 11px; padding: 2px 6px; }
.mystery-box-balances { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 14px 0 0; font-size: 12px; line-height: 16px; }
.mystery-box-balances strong { font-weight: 500; }
.mystery-box-odds { margin-top: 8px; padding: 12px 23px 8px; border-radius: 10px; background: #fef2e5; font-size: 12px; line-height: 1.6; }
.mystery-box-odds summary { cursor: pointer; min-height: 28px; font-weight: 600; }
.mystery-box-odds ul { list-style: none; padding: 0; }
.mystery-box-odds li { display: flex; gap: 10px; justify-content: space-between; padding: 5px 0; }
.mystery-box-error { margin: 12px 0; color: #a3291b; font-size: 13px; line-height: 1.6; }
.mystery-box-link { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 10px 4px; min-height: 44px; box-sizing: border-box; margin: 0 auto; color: #9a4224; background: transparent; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.mystery-box-dialog > .mystery-box-content > .mystery-box-link { margin-top: 8px; width: 100%; border-radius: 10px; background: #fef2e5; }
.mystery-box-dialog[data-free='true'][data-state='ready'] .mystery-box-balances { display: none; }
.mystery-box-dialog[data-free='true'][data-state='ready'] [data-box-actions] .mystery-box-button { margin-bottom: 0; }
.mystery-box-history h3 { margin: 4px 0 12px; font: 600 20px/1.4 'Montserrat', sans-serif; }
.mystery-box-history ul { padding: 0; margin: 0; list-style: none; }
.mystery-box-history li { margin-bottom: 10px; padding: 12px; border: 1px solid #dcc5ad; border-radius: 10px; font-size: 13px; }
.mystery-box-history li strong { display: block; margin-bottom: 5px; }
.mystery-box-history li p { margin: 4px 0; line-height: 1.5; }
.mystery-box-history time { font-size: 11px; color: #62564c; }
.mystery-box-reward-title { display: block; font: 600 20px/1.4 'Montserrat', sans-serif; }
.mystery-box-page-header { display: flex; justify-content: space-between; max-width: 900px; margin: 16px auto; padding: 0 20px; font-family: var(--ds-font-sans); }
.mystery-box-page-header .mystery-box-link { margin: 0; }
.mystery-box-page { box-sizing: border-box; max-width: 480px; margin: 24px auto; padding: 24px; border-radius: 16px; background: #fef2e5; color: #1a1a1a; text-align: center; font-family: 'SFProText', sans-serif; }
.mystery-box-page img { max-width: 100%; object-fit: contain; }
.mystery-box-page h1 { font: 600 26px/1.4 'Montserrat', sans-serif; }
.mystery-box-page p { line-height: 1.6; }
.mystery-box-page .mystery-box-button { margin-top: 24px; }
.mystery-box-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mystery-box-dialog [hidden] { display: none !important; }
.mystery-box-dialog button:focus-visible, .mystery-box-dialog a:focus-visible, .mystery-box-dialog summary:focus-visible, .mystery-box-entry:focus-visible, .mystery-box-page button:focus-visible { outline: 3px solid #9a4224; outline-offset: 3px; }
.mystery-box-dialog[data-state='opening'] .mystery-box-art { animation: mystery-box-shake .55s ease-in-out infinite; transform-origin: 50% 75%; }
.mystery-box-dialog[data-state='reward'] .mystery-box-art { animation: mystery-box-reveal .35s ease-out; }
@keyframes mystery-box-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes mystery-box-reveal { from { transform: scale(.9); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@media (min-width: 768px) { .mystery-box-entry { bottom: 30px; right: 24px; } }
@media (max-width: 520px) { .mystery-box-page { margin: 16px; } }
@media (prefers-reduced-motion: reduce) { .mystery-box-dialog .mystery-box-art { animation: none !important; } }