/* Caixa Misteriosa — visual mais realista */
.mbox-wrap {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 8px;
    font-family: 'Fredoka', 'Segoe UI', Arial, sans-serif;
}

.mbox-spark {
    position: fixed;
    width: var(--s);
    height: var(--s);
    left: var(--x);
    top: 110%;
    background: radial-gradient(circle, rgba(255, 235, 170, 0.85) 0%, rgba(255, 215, 106, 0.2) 55%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: mboxFloatUp var(--d) linear infinite;
    animation-delay: var(--dl);
    opacity: 0;
}

@keyframes mboxFloatUp {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: 0.7; }
    90%  { opacity: 0.35; }
    100% { transform: translateY(-115vh) translateX(30px); opacity: 0; }
}

.mbox-title {
    font-family: 'Lilita One', 'Fredoka', sans-serif;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 8px;
    background: linear-gradient(180deg, #fff3c4 10%, #ffd76a 45%, #e89b1c 75%, #ffdf8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 rgba(120, 60, 0, 0.45)) drop-shadow(0 0 18px rgba(255, 200, 80, 0.35));
}

.mbox-hint {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    text-align: center;
    margin-bottom: 14px;
    transition: opacity 0.4s;
}

.mbox-hint .tap {
    display: inline-block;
    animation: mboxTapBounce 1.6s ease-in-out infinite;
}

@keyframes mboxTapBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.mbox-wrap.is-opened .mbox-hint,
.mbox-wrap.is-opening .mbox-hint {
    opacity: 0;
}

.mbox-scene {
    width: 360px;
    height: 430px;
    max-width: 100%;
    margin: 0 auto;
    perspective: 1200px;
    position: relative;
}

.mbox-floor {
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 280px;
    height: 70px;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse at center, rgba(255, 210, 120, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 72%);
    border-radius: 50%;
    filter: blur(1px);
    z-index: 0;
}

.mbox-shadow {
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 210px;
    height: 36px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.62) 0%, transparent 72%);
    border-radius: 50%;
    z-index: 1;
    transition: transform 0.35s ease, opacity 0.35s ease;
    animation: mboxShadowIdle 5.5s ease-in-out infinite;
}

@keyframes mboxShadowIdle {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.95; }
    50%      { transform: translateX(-50%) scaleX(1.06); opacity: 0.8; }
}

.mbox-wrap.is-rattling .mbox-shadow,
.mbox-wrap.is-opening .mbox-shadow {
    animation: none;
    transform: translateX(-50%) scaleX(0.92);
    opacity: 0.75;
}

.mbox-wrap.is-opened .mbox-shadow {
    transform: translateX(-50%) scaleX(1.12);
    opacity: 0.55;
}

.mbox-tilt {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(-16deg) rotateY(-18deg);
    z-index: 2;
}

.mbox-shaker {
    position: absolute;
    left: 50%;
    top: 64%;
    transform-style: preserve-3d;
}

.mbox-wrap.is-rattling .mbox-shaker {
    animation: mboxRattle 0.75s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes mboxRattle {
    0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0); }
    12% { transform: translate3d(-5px, -2px, 0) rotateZ(-3deg); }
    24% { transform: translate3d(6px, 1px, 0) rotateZ(3.5deg); }
    36% { transform: translate3d(-4px, -3px, 0) rotateZ(-2.5deg); }
    48% { transform: translate3d(5px, 0, 0) rotateZ(2deg); }
    60% { transform: translate3d(-3px, -2px, 0) rotateZ(-1.5deg); }
    72% { transform: translate3d(3px, 1px, 0) rotateZ(1.5deg); }
    84% { transform: translate3d(-2px, 0, 0) rotateZ(-1deg); }
}

.mbox-box {
    position: absolute;
    transform-style: preserve-3d;
    animation: mboxIdleSway 7s ease-in-out infinite;
}

@keyframes mboxIdleSway {
    0%, 100% { transform: rotateY(0deg) translateY(0); }
    50%      { transform: rotateY(14deg) translateY(-6px); }
}

.mbox-wrap.is-rattling .mbox-box,
.mbox-wrap.is-spinning .mbox-box,
.mbox-wrap.is-opening .mbox-box,
.mbox-wrap.is-opened .mbox-box {
    animation: none;
}

.mbox-wrap.is-spinning .mbox-box {
    animation: mboxSpin 1.4s cubic-bezier(0.12, 0.7, 0.2, 1) forwards;
}

.mbox-wrap.is-spinning .mbox-shadow {
    animation: mboxShadowSpin 1.4s cubic-bezier(0.12, 0.7, 0.2, 1);
}

@keyframes mboxSpin {
    0%   { transform: rotateY(0deg) translateY(0) scale(1); }
    35%  { transform: rotateY(420deg) translateY(-14px) scale(1.04); }
    70%  { transform: rotateY(860deg) translateY(-6px) scale(1.02); }
    100% { transform: rotateY(1080deg) translateY(0) scale(1); }
}

@keyframes mboxShadowSpin {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.55; }
    35% { transform: translateX(-50%) scale(0.82); opacity: 0.35; }
    70% { transform: translateX(-50%) scale(0.9); opacity: 0.45; }
}

.mbox-face {
    position: absolute;
    left: -78px;
    top: -62px;
    width: 156px;
    height: 124px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 28%),
        linear-gradient(90deg, transparent 43%, #8a6410 43%, #f6d56a 47%, #e7b52d 53%, #8a6410 57%, transparent 57%),
        linear-gradient(145deg, #d94a5c 0%, #b21f3a 42%, #8e1630 78%, #6f1024 100%);
    border: 1px solid rgba(40, 8, 14, 0.35);
    border-radius: 2px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.18);
}

.mbox-face::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    pointer-events: none;
}

.mbox-right,
.mbox-left { filter: brightness(0.78) saturate(0.95); }

.mbox-back { filter: brightness(0.62) saturate(0.9); }

.mbox-face::after {
    content: '?';
    position: absolute;
    left: 50%;
    top: 52%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lilita One', 'Fredoka', sans-serif;
    font-size: 26px;
    color: #6f1024;
    background:
        radial-gradient(circle at 32% 28%, #fff8d6 0%, #ffd76a 48%, #c99418 100%);
    border: 2px solid #8a6410;
    border-radius: 50%;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.4),
        inset 0 2px 3px rgba(255, 255, 255, 0.65),
        inset 0 -2px 4px rgba(120, 70, 0, 0.25);
}

.mbox-wrap.is-opened .mbox-face::after,
.mbox-wrap.is-opening .mbox-face::after {
    opacity: 0.35;
    filter: blur(0.2px);
}

.mbox-front  { transform: translateZ(78px); }
.mbox-back   { transform: rotateY(180deg) translateZ(78px); }
.mbox-right  { transform: rotateY(90deg) translateZ(78px); }
.mbox-left   { transform: rotateY(-90deg) translateZ(78px); }

.mbox-bottom {
    position: absolute;
    left: -78px;
    top: -78px;
    width: 156px;
    height: 156px;
    background:
        linear-gradient(145deg, #5a1022 0%, #3d0a16 100%);
    transform: rotateX(-90deg) translateZ(62px);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45);
}

.mbox-inside {
    position: absolute;
    left: -74px;
    top: -74px;
    width: 148px;
    height: 148px;
    background:
        radial-gradient(circle at 50% 60%, #7a1a30 0%, #3a0b16 55%, #1c050c 100%);
    transform: rotateX(90deg) translateZ(42px);
}

.mbox-tissue {
    position: absolute;
    left: -62px;
    top: -52px;
    width: 124px;
    height: 70px;
    transform: translateY(-8px) translateZ(10px);
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(255, 240, 210, 0.95) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 50%, rgba(255, 220, 180, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 70%, rgba(255, 200, 160, 0.85) 0%, transparent 55%);
    filter: blur(0.3px);
}

.mbox-wrap.is-opened .mbox-tissue {
    animation: mboxTissueOut 0.7s 0.15s ease-out forwards;
}

@keyframes mboxTissueOut {
    0% { opacity: 0; transform: translateY(8px) translateZ(10px) scale(0.7); }
    40% { opacity: 0.95; }
    100% { opacity: 0.85; transform: translateY(-42px) translateZ(18px) scale(1.05); }
}

.mbox-lid {
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: 50% -2px -82px;
    transform: translateY(-72px) rotateX(0deg);
    transition: none;
}

.mbox-wrap.is-opening .mbox-lid,
.mbox-wrap.is-opened .mbox-lid {
    animation: mboxLidOpen 0.95s cubic-bezier(0.2, 0.85, 0.25, 1.15) forwards;
}

@keyframes mboxLidOpen {
    0%   { transform: translateY(-72px) rotateX(0deg); }
    35%  { transform: translateY(-78px) rotateX(42deg); }
    70%  { transform: translateY(-86px) rotateX(118deg); }
    100% { transform: translateY(-90px) rotateX(132deg); }
}

.mbox-lid-face {
    position: absolute;
    left: -84px;
    top: -16px;
    width: 168px;
    height: 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 50%),
        linear-gradient(90deg, transparent 43%, #8a6410 43%, #f6d56a 47%, #e7b52d 53%, #8a6410 57%, transparent 57%),
        linear-gradient(160deg, #e96a7a 0%, #c93a55 55%, #9d213c 100%);
    border: 1px solid rgba(40, 8, 14, 0.3);
    border-radius: 2px;
}

.mbox-lid-right,
.mbox-lid-left { filter: brightness(0.78); }

.mbox-lid-back { filter: brightness(0.62); }

.mbox-lid-front { transform: translateZ(84px); }
.mbox-lid-back  { transform: rotateY(180deg) translateZ(84px); }
.mbox-lid-right { transform: rotateY(90deg) translateZ(84px); }
.mbox-lid-left  { transform: rotateY(-90deg) translateZ(84px); }

.mbox-lid-top {
    position: absolute;
    left: -84px;
    top: -84px;
    width: 168px;
    height: 168px;
    background:
        linear-gradient(90deg, transparent 43%, #8a6410 43%, #f6d56a 47%, #e7b52d 53%, #8a6410 57%, transparent 57%),
        linear-gradient(0deg, transparent 43%, #8a6410 43%, #f6d56a 47%, #e7b52d 53%, #8a6410 57%, transparent 57%),
        radial-gradient(circle at 28% 22%, #f08a96 0%, #d44560 52%, #9d213c 100%);
    border-radius: 2px;
    transform: rotateX(90deg) translateZ(16px);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.18);
}

.mbox-bow {
    position: absolute;
    transform: rotateX(90deg) translateZ(20px);
    transform-style: preserve-3d;
}

.mbox-loop,
.mbox-knot,
.mbox-tail {
    position: absolute;
    background: linear-gradient(180deg, #ffe9a8 0%, #f0c040 55%, #c99418 100%);
    border: 1.5px solid #8a6410;
}

.mbox-loop {
    width: 42px;
    height: 28px;
    top: -14px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.55);
}

.mbox-loop.l { left: -44px; transform: rotate(-22deg); }
.mbox-loop.r { left: 2px; transform: rotate(22deg) scaleX(-1); }

.mbox-knot {
    width: 18px;
    height: 18px;
    left: -9px;
    top: -9px;
    border-radius: 50%;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.6);
}

.mbox-tail {
    width: 12px;
    height: 28px;
    top: 4px;
    border-radius: 0 0 60% 60%;
}

.mbox-tail.l { left: -18px; transform: rotate(14deg); }
.mbox-tail.r { left: 6px; transform: rotate(-14deg); }

.mbox-prize {
    position: absolute;
    left: -70px;
    top: -40px;
    width: 140px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transform: translateY(18px) scale(0.2);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.mbox-prize__icon {
    font-size: 42px;
    line-height: 1;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.mbox-prize__cash {
    min-width: 118px;
    padding: 10px 12px 8px;
    border-radius: 8px;
    text-align: center;
    background:
        linear-gradient(180deg, #1f7a4d 0%, #14633d 55%, #0e4d2f 100%);
    border: 1px solid rgba(200, 255, 210, 0.25);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mbox-prize__cash-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(220, 255, 230, 0.75);
    font-family: 'Barlow Condensed', 'Fredoka', sans-serif;
}

.mbox-prize__cash-value {
    display: block;
    margin-top: 2px;
    font-family: 'Barlow Condensed', 'Fredoka', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #eafff1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.mbox-prize.lose .mbox-prize__icon {
    font-size: 46px;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)) grayscale(0.15);
}

.mbox-wrap.is-opened .mbox-prize {
    animation: mboxPrizeRise 1.05s 0.2s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
}

@keyframes mboxPrizeRise {
    0%   { transform: translateY(18px) scale(0.25); opacity: 0; }
    20%  { opacity: 1; }
    70%  { transform: translateY(-168px) scale(1.05); opacity: 1; }
    100% { transform: translateY(-158px) scale(1); opacity: 1; }
}

.mbox-beam {
    position: absolute;
    left: -40px;
    top: -210px;
    width: 80px;
    height: 220px;
    background: linear-gradient(180deg, rgba(255, 230, 150, 0.55) 0%, rgba(255, 200, 90, 0.18) 45%, transparent 100%);
    filter: blur(8px);
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 3;
}

.mbox-wrap.is-opened .mbox-beam {
    animation: mboxBeamIn 0.7s 0.12s ease-out forwards;
}

@keyframes mboxBeamIn {
    to { opacity: 1; transform: scaleY(1); }
}

.mbox-glow {
    position: absolute;
    left: -150px;
    top: -300px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 220, 120, 0.55) 0%, rgba(255, 190, 80, 0.18) 42%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.35);
    pointer-events: none;
    z-index: 2;
}

.mbox-wrap.is-opened .mbox-glow {
    animation: mboxGlowIn 0.75s 0.18s cubic-bezier(0.3, 1.2, 0.5, 1) forwards, mboxGlowPulse 2.6s 1s ease-in-out infinite;
}

@keyframes mboxGlowIn {
    to { opacity: 1; transform: scale(1); }
}

@keyframes mboxGlowPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.mbox-rays {
    position: absolute;
    left: -140px;
    top: -290px;
    width: 280px;
    height: 280px;
    background: repeating-conic-gradient(
        rgba(255, 225, 140, 0.22) 0deg 10deg,
        transparent 10deg 28deg
    );
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 22%, #000 28%, transparent 70%);
            mask: radial-gradient(circle, transparent 22%, #000 28%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.mbox-wrap.is-opened .mbox-rays {
    animation: mboxRaysIn 0.55s 0.25s forwards, mboxRaysSpin 12s 0.25s linear infinite;
}

@keyframes mboxRaysIn {
    to { opacity: 1; }
}

@keyframes mboxRaysSpin {
    to { transform: rotate(360deg); }
}

.mbox-dust {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: rgba(255, 230, 180, 0.85);
    pointer-events: none;
    opacity: 0;
    z-index: 6;
}

.mbox-wrap.is-opened .mbox-dust {
    animation: mboxDust 0.9s var(--dl) ease-out forwards;
}

@keyframes mboxDust {
    0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    25% { opacity: 0.9; }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); }
}

.mbox-result {
    min-height: 1.7em;
    margin-top: 10px;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #ffd76a;
    text-shadow: 0 0 16px rgba(255, 200, 80, 0.55);
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: all 0.4s cubic-bezier(0.3, 1.3, 0.5, 1);
    text-align: center;
}

.mbox-result.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mbox-confetti {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 9px;
    height: 14px;
    background: var(--c);
    border-radius: 2px;
    pointer-events: none;
    z-index: 999;
    animation: mboxBurst 1.45s ease-out forwards;
}

.mbox-confetti.round {
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

@keyframes mboxBurst {
    0%   { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.65); opacity: 0; }
}

.game-content--mystery .bet-input-group {
    margin-top: 8px;
}

.game-content--mystery,
.game-content--mystery .game-image {
    overflow: visible;
}