/* Pacote de booster em folha metálica (booster-pack.js). Usado na loja do jogo e no painel do admin.
   Variáveis por tema: --m1..--m4 metal da selagem, --c1/--c2 cores da coleção, --name* gradiente do nome, --glow brilho. */
.boosterPack{--m1:#fff6d6;--m2:#d9a441;--m3:#6e4410;--m4:#ffe08a;--c1:#ffb43a;--c2:#3a1a04;--n1:#fff8d8;--n2:#ffd36b;--n3:#b8741a;--stroke:#2a1404;--glow:#ffb43a;
 position:relative;width:100%;height:100%;container-type:inline-size;display:flex;flex-direction:column;filter:drop-shadow(0 4cqw 7cqw #000c);user-select:none;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.boosterPack.theme-prata{--m1:#ffffff;--m2:#aab6c8;--m3:#4a5568;--m4:#e8eef8;--c1:#6f9cff;--c2:#0a1230;--n1:#ffffff;--n2:#cfe0ff;--n3:#6f86b8;--stroke:#0a1430;--glow:#8fb4ff}
.boosterPack.theme-carmim{--m1:#ffd0d8;--m2:#b81c38;--m3:#45040f;--m4:#ff7088;--c1:#ff2d55;--c2:#1a0308;--n1:#fff1c4;--n2:#ffd36b;--n3:#c7781a;--stroke:#3a0410;--glow:#ff2d55}
.boosterPack.theme-abismo{--m1:#d8fbff;--m2:#2a8fc4;--m3:#062a50;--m4:#7fe7ff;--c1:#1fc8ff;--c2:#021024;--n1:#f0feff;--n2:#7fe7ff;--n3:#1a7fb8;--stroke:#021a33;--glow:#1fc8ff}
.boosterPack.theme-aurora{--m1:#effff8;--m2:#7ad6c4;--m3:#3a2e7a;--m4:#d0a0ff;--c1:#9a6bff;--c2:#0b0a20;--n1:#ffffff;--n2:#9fffd8;--n3:#a07aff;--stroke:#120a30;--glow:#9fffd8}
.boosterPack.theme-cobre{--m1:#ffe6cc;--m2:#c46a2a;--m3:#4a1e06;--m4:#f5a868;--c1:#ff8a2a;--c2:#1e0b02;--n1:#fff0dc;--n2:#ffb070;--n3:#9a4a14;--stroke:#2a0e02;--glow:#ff8a2a}

/* ---------- Selagem: alumínio prensado com vincos verticais e dentes ---------- */
.bpCrimp{position:relative;height:8cqw;flex:none;z-index:3;
 background:repeating-linear-gradient(90deg,#ffffff55 0 .5cqw,#0000 .5cqw 1.4cqw,#00000040 1.4cqw 1.9cqw,#0000 1.9cqw 2.6cqw),
  linear-gradient(180deg,#ffffff30,#0000 40%,#0004),
  linear-gradient(100deg,var(--m3),var(--m2) 18%,var(--m1) 28%,var(--m2) 40%,var(--m3) 55%,var(--m4) 72%,var(--m1) 80%,var(--m2) 90%,var(--m3))}
.bpCrimp.top{border-radius:1cqw 1cqw 0 0;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/3cqw 100%;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/3cqw 100%}
.bpCrimp.bottom{-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/3cqw 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/3cqw 100%}
.bpCrimp.top::after{content:'';position:absolute;right:7cqw;top:30%;width:5cqw;height:5cqw;border-radius:50%;background:radial-gradient(circle,#000b 45%,#0000 50%)}/* furo de pendurar */

/* ---------- Corpo do pacote ---------- */
.bpBody{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;background:var(--c2);
 box-shadow:inset 0 0 0 .6cqw #ffffff22,inset 3cqw 0 4cqw -2cqw #0009,inset -3cqw 0 4cqw -2cqw #0009}
.bpBody>*{position:relative;z-index:2}
.bpBack,.bpDeco,.bpCover,.bpTint,.bpWrinkle,.bpHolo,.bpEdge,.bpFoil{position:absolute!important;inset:0;pointer-events:none}
.bpBack{z-index:0;background:radial-gradient(ellipse 90% 60% at 50% 42%,var(--c1),var(--c2) 75%)}
.bpCover{z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:translateY(9cqw) scale(1.08);filter:saturate(1.15) contrast(1.05);
 -webkit-mask:linear-gradient(#0000 6%,#000 26%,#000 66%,#0000 92%);mask:linear-gradient(#0000 6%,#000 26%,#000 66%,#0000 92%)}
.bpTint{z-index:1;background:linear-gradient(180deg,var(--c2) 0%,#0000 28%,#0000 58%,color-mix(in srgb,var(--c2) 80%,transparent) 80%,var(--c2)),
 radial-gradient(ellipse at 50% 40%,#0000 50%,color-mix(in srgb,var(--c1) 25%,transparent))}
/* Folha amassada: dobras diagonais claras e escuras sobre tudo. */
.bpWrinkle{z-index:4;mix-blend-mode:overlay;opacity:.7;background:
 linear-gradient(172deg,#0000 10%,#ffffff40 12%,#0000 15%),linear-gradient(8deg,#0000 38%,#ffffff35 40%,#0000 44%),
 linear-gradient(176deg,#0000 62%,#00000050 64%,#0000 67%),linear-gradient(-6deg,#0000 78%,#ffffff40 80%,#0000 83%),
 linear-gradient(95deg,#0000 20%,#ffffff20 22%,#0000 26%,#0000 74%,#ffffff22 77%,#0000 80%),
 repeating-linear-gradient(0deg,#ffffff08 0 1px,#0000 1px 3px)}
/* Brilho holográfico arco-íris, mais forte na luz. */
.bpHolo{z-index:4;mix-blend-mode:soft-light;opacity:.35;background:linear-gradient(125deg,#ff3d8a 0%,#ffd23d 18%,#3dff9a 36%,#3dc8ff 54%,#a03dff 72%,#ff3d8a 90%) 0 0/300% 300%;animation:bpHolo 8s linear infinite}
@keyframes bpHolo{to{background-position:300% 300%}}
/* Laterais curvas da embalagem: faixa de luz e sombra nas bordas. */
.bpEdge{z-index:5;background:linear-gradient(90deg,#000a 0,#0000 4%,#ffffff40 6%,#0000 9%,#0000 91%,#ffffff30 94%,#0000 96%,#000a 100%)}
.bpFoil{z-index:5;inset:-30%!important;background:linear-gradient(105deg,transparent 40%,#ffffff70 47%,#ffffffb0 50%,#ffffff40 53%,transparent 60%);mix-blend-mode:soft-light;transform:translateX(-60%);animation:bpSheen 4s ease-in-out infinite}
.boosterPack:hover .bpFoil{animation-duration:1.6s}
.boosterPack:hover .bpHolo{opacity:.6}
@keyframes bpSheen{0%,20%{transform:translateX(-60%)}75%,100%{transform:translateX(60%)}}

/* ---------- Cabeçalho ---------- */
.bpHead{display:flex;align-items:center;justify-content:center;gap:2.5cqw;padding:4cqw 5cqw 0}
.bpEmblem{width:14cqw;flex:none}
.bpEmblem svg{display:block;width:100%}
.bpLogoBox{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.bpLogo{font:900 13cqw/0.9 Georgia,'Times New Roman',serif;letter-spacing:.6cqw;font-style:italic;
 color:var(--m1);-webkit-text-stroke:.3cqw var(--stroke);paint-order:stroke fill;
 text-shadow:0 .25cqw 0 var(--m2),0 .55cqw 0 var(--m3),0 .9cqw 0 var(--stroke),0 0 2.5cqw color-mix(in srgb,var(--glow) 55%,transparent)}
.bpKicker{margin-top:1cqw;font:800 3.4cqw/1 system-ui,sans-serif;letter-spacing:.9cqw;color:var(--n1);text-shadow:0 .3cqw .6cqw #000}

/* ---------- Nome da coleção ---------- */
.bpTitle{margin-top:auto;padding:0 4cqw;display:flex;flex-direction:column;align-items:center;transform:skewY(-5deg);margin-bottom:2cqw}
.bpName{font:800 10.5cqw/1 Georgia,'Times New Roman',serif;letter-spacing:.5cqw;text-align:center;overflow-wrap:anywhere;color:var(--n1);
 -webkit-text-stroke:.25cqw var(--stroke);paint-order:stroke fill;text-shadow:0 .5cqw 0 var(--stroke),0 0 3cqw #000,0 0 2cqw color-mix(in srgb,var(--glow) 70%,transparent)}
.bpTag{margin-top:1.6cqw;padding:.8cqw 3cqw;font:800 3.6cqw/1.15 system-ui,sans-serif;text-align:center;color:var(--n1);background:#000a;border-radius:1cqw;transform:skewY(5deg);box-shadow:0 0 0 .3cqw color-mix(in srgb,var(--n2) 60%,transparent)}
.bpCorner{position:absolute;top:0;right:0;width:30cqw;height:30cqw;overflow:hidden;pointer-events:none;z-index:10}
.bpRibbon{position:absolute;top:6.5cqw;right:-12.5cqw;width:46cqw;transform:rotate(45deg);padding:1cqw 0;text-align:center;font:900 3.8cqw/1.2 system-ui,sans-serif;letter-spacing:.7cqw;color:#2a1606;
 background:linear-gradient(#fff6d6,#f0c45a 45%,#b07a1e);box-shadow:0 .8cqw 1.6cqw #000c;border-block:.35cqw solid #fff8;text-shadow:0 .2cqw 0 #fff8}

/* ---------- Rodapé: cartas e preço ---------- */
.bpFoot{display:flex;align-items:flex-end;justify-content:space-between;gap:2cqw;padding:0 4cqw 4cqw}
.bpCount{display:flex;flex-direction:column;align-items:center;line-height:.85}
.bpCount b{font:900 19cqw/0.85 Impact,'Arial Black',sans-serif;color:#fff;-webkit-text-stroke:.5cqw #000;text-shadow:.8cqw .8cqw 0 #000,0 0 3cqw var(--glow)}
.bpCount small{font:900 4.6cqw/1 Impact,'Arial Black',sans-serif;letter-spacing:.6cqw;color:#fff;-webkit-text-stroke:.25cqw #000;text-shadow:.4cqw .4cqw 0 #000}
/* Preço: ícone da moeda e número, direto na arte. */
.bpPrice{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:1.6cqw;white-space:nowrap;max-width:none}
.bpCoin{width:11cqw;height:11cqw;object-fit:contain;filter:drop-shadow(0 .6cqw .8cqw #000c)}
.bpPrice b{font:900 11cqw/1 Impact,'Arial Black',sans-serif;letter-spacing:.2cqw;color:#fff;-webkit-text-stroke:.45cqw #000;text-shadow:.7cqw .7cqw 0 #000}
.bpPrice.bpGold b{color:#ffe08a}
.bpPrice.bpGems b{color:#bff0ff}

/* ---------- Ornamentos de cada tema (atrás do personagem) ---------- */
.bpDeco{z-index:1;opacity:.9}
.theme-ouro .bpDeco{background:repeating-conic-gradient(from 0deg at 50% 45%,#ffd36b30 0 6deg,#0000 6deg 15deg);-webkit-mask:radial-gradient(circle at 50% 45%,#000 20%,#0000 70%);mask:radial-gradient(circle at 50% 45%,#000 20%,#0000 70%)}
.theme-prata .bpDeco{background:radial-gradient(1.2cqw 1.2cqw at 15% 30%,#fff,#0000),radial-gradient(.8cqw .8cqw at 80% 22%,#fff,#0000),radial-gradient(1cqw 1cqw at 70% 60%,#cfe0ff,#0000),radial-gradient(.7cqw .7cqw at 25% 70%,#fff,#0000),radial-gradient(.9cqw .9cqw at 88% 78%,#fff,#0000),radial-gradient(ellipse 60% 40% at 50% 45%,#6f9cff55,#0000)}
.theme-carmim .bpDeco{background:radial-gradient(circle at 50% 40%,#0000 26cqw,#ff2d5566 27cqw,#ff2d5522 34cqw,#0000 45cqw),repeating-linear-gradient(-45deg,#ff2d5512 0 2cqw,#0000 2cqw 5cqw)}
.theme-abismo .bpDeco{background:radial-gradient(circle at 20% 70%,#9ff0ff55 0 1.4cqw,#0000 1.6cqw),radial-gradient(circle at 78% 58%,#9ff0ff44 0 2cqw,#0000 2.2cqw),radial-gradient(circle at 62% 30%,#9ff0ff33 0 1cqw,#0000 1.2cqw),repeating-radial-gradient(ellipse at 50% 120%,#1fc8ff22 0 3cqw,#0000 3cqw 7cqw)}
.theme-aurora .bpDeco{background:linear-gradient(160deg,#0000 20%,#7affc855 30%,#0000 42%),linear-gradient(150deg,#0000 35%,#9a6bff55 46%,#0000 58%),linear-gradient(170deg,#0000 50%,#7aa8ff44 60%,#0000 70%)}
.theme-cobre .bpDeco{background:repeating-radial-gradient(circle at 85% 30%,#ff8a2a30 0 1cqw,#0000 1cqw 3cqw),repeating-linear-gradient(90deg,#ffffff0a 0 .4cqw,#0000 .4cqw 1.2cqw)}

@media(prefers-reduced-motion:reduce){.bpFoil,.bpHolo{animation:none}}
.reduced .bpFoil,.reduced .bpHolo{animation:none}

/* Inclinação 3D com o mouse (tilt.js, o mesmo efeito das cartas): o pacote gira, o reflexo e o holográfico seguem o cursor. */
.boosterPack.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(calc(1 + var(--lift,0) * .04));transform-style:preserve-3d;will-change:transform}
.boosterPack.tilt .bpFoil{animation:none;transform:translateX(calc((var(--px,0) * 45%))) ;opacity:calc(.4 + var(--tilt,0) * .6)}
.boosterPack.tilt .bpHolo{animation:none;background-position:var(--mx,50%) var(--my,50%);opacity:calc(.35 + var(--tilt,0) * .35)}
.boosterPack>.tiltGlare{position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:1cqw;opacity:calc(var(--tilt,0) * .55);mix-blend-mode:soft-light;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#fffc,#fff0 45%)}
.boosterPack.limited .bpHead{padding-right:13cqw;justify-content:flex-start}.boosterPack.limited .bpLogo{font-size:11.5cqw}

/* Fontes do site no pacote (Leo, 02/10/2026): Grenze Gotisch e Alegreya Sans, igual à loja e ao painel */
.boosterPack { font-family: 'Alegreya Sans', system-ui, sans-serif; }
.bpLogo { font-family: 'Grenze Gotisch', Georgia, serif; font-weight: 800; font-style: normal; letter-spacing: .04em; }
.bpName { font-family: 'Grenze Gotisch', Georgia, serif; font-weight: 800; letter-spacing: .03em; }
.bpKicker, .bpTag, .bpRibbon { font-family: 'Alegreya Sans', system-ui, sans-serif; font-weight: 800; }
.bpCount b, .bpCount small, .bpPrice b { font-family: 'Grenze Gotisch', Georgia, serif; font-weight: 800; }

/* Logo sempre centralizada no topo, igual em todos os boosters: a fita LIMITADO não desloca mais o cabeçalho (Leo, 02/10/2026) */
.boosterPack.limited .bpHead { padding: 4cqw 5cqw 0; justify-content: center; }
.boosterPack.limited .bpLogo { font-size: 13cqw; }