/* Box Astflye — BASE (nunca mexe aqui).
 * Palco + animação + prêmio + CTA. O visual de cada box mora em themes.css
 * (1 bloco [data-theme="x"] por box). Zero SVG, zero dependências. */

.bx-stage{position:relative;background:#101a2a;border:1px solid rgba(255,255,255,.08);border-radius:20px;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 16px 24px;overflow:hidden}
.bx-stage::before{content:'';position:absolute;left:50%;top:44%;width:220px;height:220px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--stage-glow,rgba(255,77,109,.16)),transparent 70%);transition:background .3s;pointer-events:none}
.bx-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.bx-flash{display:none!important}

/* ── box 3D: corpo + tampa (com faixa H dentro) + fita V + luz + ícone ── */
.box3d{--c1:#7c3aed;--c2:#4c1d95;--rib:#fcd34d;position:relative;width:190px;height:172px;z-index:2;cursor:pointer;transition:transform .3s}
.bx-stage.is-idle .box3d{animation:bxFloat 4.5s ease-in-out infinite}
.bx-stage.is-opening .box3d{animation:bxShake .5s ease-in-out both}
.bx-stage.is-revealed .box3d{transform:scale(.5);opacity:0;pointer-events:none}
.box3d-shadow{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:140px;height:18px;border-radius:50%;background:rgba(0,0,0,.45)}
.box3d-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:172px;height:112px;border-radius:14px 14px 18px 18px;background:linear-gradient(135deg,var(--c1),var(--c2));border:2px solid rgba(255,255,255,.16);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -14px 22px rgba(0,0,0,.3)}
.box3d-lid{position:absolute;top:8px;left:50%;transform:translateX(-50%) perspective(500px) rotateX(6deg);width:192px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--c1),var(--c2));border:2px solid rgba(255,255,255,.2);box-shadow:0 10px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.28);transition:transform .5s ease,opacity .45s ease;z-index:3}
.bx-stage.is-opening .box3d-lid,.bx-stage.is-revealed .box3d-lid{transform:translate(-50%,-120px) rotate(-22deg);opacity:0}
/* faixa H DENTRO da tampa (div real, não ::before) — voa junto com ela */
.box3d-ribh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.box3d-ribh-bar{position:absolute;left:-2px;right:-2px;top:50%;transform:translateY(-50%);height:22px;background:var(--rib)}
.box3d-knot{position:relative;width:30px;height:30px;background:var(--rib);transform:rotate(45deg);border-radius:7px;border:2px solid rgba(0,0,0,.25);z-index:5}
.box3d-light{position:absolute;bottom:20px;left:50%;transform:translateX(-50%) scaleY(0);transform-origin:bottom;width:110px;height:130px;background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,0));opacity:0;transition:transform .4s ease .35s,opacity .4s ease .35s;z-index:1;clip-path:polygon(20% 100%,80% 100%,100% 0,0 0)}
.bx-stage.is-opening .box3d-light,.bx-stage.is-revealed .box3d-light{transform:translateX(-50%) scaleY(1);opacity:1}
.box3d-ribv{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:30px;height:112px;background:var(--rib);z-index:2;border-left:1px solid rgba(0,0,0,.25);border-right:1px solid rgba(0,0,0,.25)}
.box3d-icon{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:16px;background:rgba(12,22,36,.55);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;z-index:3}
.box3d-icon i{font-size:24px;color:#fff}

/* ── cores por raridade (palco + card do prêmio) ── */
.bx-stage[data-rar="comum"]{--rar:#94a3b8;--stage-glow:rgba(148,163,184,.2)}
.bx-stage[data-rar="incomum"]{--rar:#34d399;--stage-glow:rgba(52,211,153,.22)}
.bx-stage[data-rar="raro"]{--rar:#60a5fa;--stage-glow:rgba(96,165,250,.22)}
.bx-stage[data-rar="super_raro"]{--rar:#a78bfa;--stage-glow:rgba(167,139,250,.26)}
.bx-stage[data-rar="lendario"]{--rar:#fbbf24;--stage-glow:rgba(251,191,36,.26)}
.bx-stage[data-rar="mitico"]{--rar:#ff4d6d;--stage-glow:rgba(255,77,109,.3)}

/* ── prêmio revelado ── */
.bx-prize{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:5px;padding:18px 26px;border-radius:16px;text-align:center;background:#101a2a;border:1px solid var(--rar,#94a3b8);opacity:0;transform:scale(.7);pointer-events:none;max-width:86%}
.bx-stage.is-revealed .bx-prize{animation:bxPrizeIn .4s cubic-bezier(.34,1.56,.64,1) both}
.bx-prize-rar{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rar)}
.bx-prize-label{font-size:20px;font-weight:800;color:#eef1f6}
.bx-prize-sub{font-size:11.5px;color:rgba(238,241,246,.6)}
.bx-prize-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--rar);margin-bottom:2px}
.bx-prize-icon i{font-size:20px;color:var(--rar)}

/* ── CTA ── */
.bx-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#eef1f6;font-size:13px;font-weight:700;cursor:pointer;z-index:6}
.bx-cta:hover{background:rgba(255,255,255,.11)}
.bx-stage.is-opening .bx-cta,.bx-stage.is-revealed .bx-cta{display:none}
.bx-no-open .bx-cta,.bx-no-open .bx-prize{display:none!important}

/* ── miniatura (cards da loja/admin): box estática sem animação ──
 * O host vira .bx-stage.bx-mini[data-theme] — reseta o palco para não
 * criar retângulo/fundo dentro dos cards. */
.bx-mini{pointer-events:none}
.bx-mini.bx-stage{background:transparent;border:none;border-radius:0;min-height:165px;height:100%;width:100%;padding:0;overflow:hidden;position:relative}
.bx-mini.bx-stage::before{display:none}
.bx-three-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;pointer-events:none;z-index:2}
.bx-3d-host{position:relative;width:100%;height:100%;min-height:360px;display:flex;align-items:center;justify-content:center}
.bx-mini .box3d{width:120px;height:110px;cursor:default}
.bx-mini .box3d-body{width:108px;height:70px;border-radius:10px 10px 12px 12px}
.bx-mini .box3d-lid{width:120px;height:30px;top:6px;border-radius:8px}
.bx-mini .box3d-ribh-bar{height:14px}
.bx-mini .box3d-knot{width:19px;height:19px;border-radius:5px}
.bx-mini .box3d-ribv{width:19px;height:70px}
.bx-mini .box3d-icon{width:36px;height:36px;bottom:20px;border-radius:10px}
.bx-mini .box3d-icon i{font-size:15px}
.bx-mini .box3d-shadow{width:88px;height:11px;bottom:-9px}
.bx-mini .box3d-light{display:none}

@keyframes bxFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-11px) rotate(1.2deg)}}
@keyframes bxShake{0%{transform:translateX(0) scale(1)}25%{transform:translateX(-3px) scale(1.02)}50%{transform:translateX(3px) scale(1.03)}75%{transform:translateX(-2px) scale(1.04)}100%{transform:translateX(0) scale(1.05)}}
@keyframes bxFlash{0%{opacity:0}100%{opacity:0}}
@keyframes bxPrizeIn{0%{opacity:0;transform:translateY(12px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.bx-stage,.bx-stage *{animation:none!important;transition:none!important}.bx-stage.is-revealed .bx-prize{opacity:1;transform:scale(1)}.bx-stage.is-revealed .box3d{opacity:0}}