/* ---------- opening overlay ---------- */
#openOverlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(900px 600px at 50% 30%,#1c1436 0%,#08060f 70%);padding:20px}
#openOverlay.show{display:flex}
.ovstage{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:16px}
.bigpack{width:210px;height:290px;border-radius:12px 12px 14px 14px;position:relative;cursor:pointer;
  box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.25);overflow:visible;transition:transform .15s}
.bigpack:hover{transform:scale(1.02)}
.bigpack .pbody,.bigpack .ptop{position:absolute;left:0;right:0;overflow:hidden}
.bigpack .ptop{top:0;height:46px;border-radius:12px 12px 0 0;z-index:3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:transform .55s cubic-bezier(.6,-0.2,.7,1.4),opacity .5s}
.bigpack .ptop::before{content:'';position:absolute;left:0;right:0;top:0;height:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.06));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 8px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 8px)}
.bigpack .ptop::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:repeating-linear-gradient(90deg,#fff3 0 6px,transparent 6px 10px)}
.bigpack .pbody{top:44px;bottom:0;border-radius:0 0 14px 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bigpack .pbody::after{content:'';position:absolute;left:0;right:0;bottom:0;height:14px;
  background:linear-gradient(0deg,rgba(255,255,255,.3),transparent);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 7px);mask:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 7px)}
.bigpack .plogo{position:absolute;left:8%;right:8%;top:60px;text-align:center;z-index:2}
.bigpack .plogo img{max-width:92%;max-height:84%;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.7))}
.bigpack .psheen{position:absolute;inset:0;border-radius:12px;z-index:4;pointer-events:none;overflow:hidden}
.bigpack .psheen::after{content:'';position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.4) 50%,transparent 58%);
  animation:foil 3.6s ease-in-out infinite}
.bigpack.ripped .ptop{transform:translateY(-90px) rotate(-14deg);opacity:0}
.bigpack.ripped{cursor:default}
.riphint{color:var(--dim);font-size:13px;font-weight:600;letter-spacing:.15em;animation:pulse 1.6s ease infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
/* card reveal */
.revealwrap{perspective:1200px;position:relative;width:min(66vw,252px);aspect-ratio:63/88;cursor:pointer;touch-action:none}
.tiltlayer{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .16s ease}
.rcard{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.1,.3,1.2)}
.rcard .facef,.rcard .faceb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4.5%/3.2%;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.7)}
/* iOS-safe face swap: cross-fade at the flip midpoint instead of relying on backface culling
   (Safari breaks backface-visibility when children use mix-blend-mode). */
.rcard .faceb{opacity:1;transition:opacity 0s .25s}
.rcard .facef{transform:rotateY(180deg);background:#20243f;opacity:0;transition:opacity 0s .25s}
.rcard.flip .faceb{opacity:0}
.rcard.flip .facef{opacity:1}
.rcard .facef img{width:100%;height:100%;object-fit:cover;display:block}
.rcard.flip{transform:rotateY(180deg)}
/* ---- shared holographic card overlays (reveal + binder showcase) ---- */
/* rainbow foil that parallaxes with your finger — subtle, only really shows while tilting */
.holo-foil{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;
  opacity:calc(var(--foil,.2) * var(--pd,0) * .55);
  background:repeating-linear-gradient(112deg,#ff2f6e,#ffe94d 7%,#4dff88 14%,#43d0ff 21%,#b14dff 28%,#ff2f6e 35%);
  background-size:210% 210%;
  background-position:calc(50% - var(--px,0)*170%) calc(50% - var(--py,0)*170%);
  mix-blend-mode:soft-light;filter:saturate(1.1)}
/* fine glitter, faint and only when tilting hard */
.holo-foil::after{content:'';position:absolute;inset:0;border-radius:inherit;mix-blend-mode:overlay;
  opacity:calc(var(--pd,0)*.28);
  background:radial-gradient(rgba(255,255,255,.8) 12%,transparent 13%) 0 0/7px 7px,
    radial-gradient(rgba(255,255,255,.6) 12%,transparent 13%) 3px 4px/9px 9px;
  background-position:calc(var(--px,0)*40px) calc(var(--py,0)*40px),calc(var(--px,0)*-30px) calc(var(--py,0)*-30px)}
/* soft moving glare — gentle sheen, never washes out the art */
.holo-glare{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;
  opacity:calc(var(--pd,0)*.5);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),rgba(255,255,255,.06) 24%,transparent 46%),
    linear-gradient(100deg,transparent 38%,rgba(255,255,255,.1) 49%,transparent 60%);
  mix-blend-mode:soft-light}
/* Black-White rares get a silver, monochrome foil */
.bw .holo-foil{background:repeating-linear-gradient(112deg,#ffffff,#c8ccdd 9%,#7f879e 18%,#eef1ff 27%,#ffffff 36%);filter:none}
.bw .holo-foil::after{filter:grayscale(1)}
.cardback{width:100%;height:100%;position:relative;
  background:radial-gradient(circle at 50% 42%,#2b3f8f 0%,#16204e 55%,#0d1330 100%)}
.cardback::before{content:'';position:absolute;inset:0;margin:auto;width:56%;aspect-ratio:1;border-radius:50%;
  border:6px solid #ffcb0533;box-shadow:0 0 0 14px #ffcb0511, inset 0 0 40px #0008}
.cardback::after{content:'POKÉ VEND SIM';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-family:'Bebas Neue';font-size:20px;letter-spacing:.3em;color:#ffcb05aa}
.revealwrap{--rc:#ffd76a}
.glowring{position:absolute;inset:-18px;border-radius:9%;pointer-events:none;opacity:0;z-index:-1;
  background:radial-gradient(closest-side,var(--rc),transparent 78%);transition:opacity .35s}
.revealwrap.glow .glowring{opacity:.95;animation:glowpulse 1.5s ease-in-out infinite}
@keyframes glowpulse{0%,100%{filter:blur(15px) brightness(1);transform:scale(1)}50%{filter:blur(26px) brightness(1.45);transform:scale(1.06)}}
/* rotating light rays behind big pulls */
.revrays{position:absolute;inset:-95%;z-index:-2;opacity:0;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 7deg,var(--rc) 8deg 10deg,transparent 11deg 22deg,
    transparent 0 30deg,var(--rc) 31deg 33deg,transparent 34deg 45deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);
  mix-blend-mode:screen;filter:blur(1px);transition:opacity .45s}
.revealwrap.show-rays .revrays{opacity:.55;animation:rayspin 10s linear infinite}
@keyframes rayspin{to{transform:rotate(360deg)}}
/* card entrance pop (stays flipped) */
.rcard.pop{animation:cardpop .62s cubic-bezier(.2,1.5,.34,1)}
@keyframes cardpop{0%{transform:rotateY(180deg) scale(1)}42%{transform:rotateY(180deg) scale(1.10)}100%{transform:rotateY(180deg) scale(1)}}
/* holographic sweep across the revealed face */
.rcard .facef::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.6) 46%,rgba(170,215,255,.3) 54%,transparent 70%);
  transform:translateX(-130%)}
.rcard.sheen .facef::after{animation:cardsheen 1.15s ease .04s 1}
@keyframes cardsheen{0%{opacity:0;transform:translateX(-130%)}18%{opacity:1}100%{opacity:0;transform:translateX(130%)}}
/* full-screen reveal flash */
.revflash{position:fixed;inset:0;z-index:125;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 42%,var(--fc,#fff),transparent 62%)}
.revflash.go{animation:revflash .55s ease forwards}
@keyframes revflash{0%{opacity:0}12%{opacity:.9}100%{opacity:0}}
/* rarity banner that slams in */
.revbanner{position:fixed;left:50%;top:20%;transform:translate(-50%,0) scale(.4);z-index:132;pointer-events:none;
  font-family:'Bebas Neue';font-size:clamp(26px,7vw,44px);letter-spacing:.1em;line-height:.9;opacity:0;
  text-align:center;max-width:92vw;text-shadow:0 0 26px currentColor,0 3px 12px #000}
.revbanner small{display:block;font-family:'Outfit';font-size:11px;letter-spacing:.34em;font-weight:800;color:#fff;opacity:.9;margin-top:3px}
.revbanner.go{animation:bannerslam 1.8s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes bannerslam{0%{opacity:0;transform:translate(-50%,0) scale(.4)}
  11%{opacity:1;transform:translate(-50%,0) scale(1.2)}22%{transform:translate(-50%,0) scale(1)}
  80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-28px) scale(1)}}
/* sparkle particles */
.spark{position:fixed;z-index:131;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,#fff 0 12%,var(--sc,#ffd76a) 45%,transparent 72%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:sparkfly var(--sd,1s) ease-out forwards}
@keyframes sparkfly{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}18%{opacity:1}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1) rotate(200deg)}}
/* top-tier screen shake */
.ovstage.shake{animation:screenshake .5s ease}
@keyframes screenshake{0%,100%{transform:none}15%{transform:translate(-6px,4px)}30%{transform:translate(6px,-4px)}
  45%{transform:translate(-5px,-3px)}60%{transform:translate(5px,3px)}80%{transform:translate(-3px,2px)}}
.revealmeta{text-align:center;min-height:64px}
.revealmeta .rn{font-size:18px;font-weight:800}
.revealmeta .rr{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.revealmeta .rp{font-size:14px;color:var(--gold);font-weight:700;margin-top:3px}
.revcount{position:absolute;top:18px;right:18px;color:var(--dim);font-weight:700;font-size:13px;letter-spacing:.1em}
.skipbtn{position:absolute;top:12px;left:14px}
/* summary */
.sumgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:100%}
.sumcard{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;aspect-ratio:63/88;background:#181c33;
  outline:2px solid transparent;outline-offset:2px;transition:.15s}
.sumcard img{width:100%;height:100%;object-fit:cover;display:block}
.sumcard.sel{outline-color:var(--green)}
.sumcard .chk{position:absolute;top:3px;right:3px;width:17px;height:17px;border-radius:50%;background:#000a;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff}
.sumcard.sel .chk{background:var(--green);color:#06210f;font-weight:900}
.sumcard .pr{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,#000d,transparent);
  font-size:9px;font-weight:800;color:var(--gold);text-align:center;padding:6px 2px 2px}
.sumttl{text-align:center}
.sumttl .sv{font-size:26px;font-family:'Bebas Neue';letter-spacing:.05em}
.sumttl .sv b{color:var(--gold)}
.sumactions{display:flex;gap:10px;width:100%}
.sumactions .btn{flex:1}