#boosterOpening { width:min(1000px,96vw); max-height:95dvh; overflow:auto; padding:30px 24px 38px; color:#f0f8ff; text-align:center; background:radial-gradient(ellipse at center,#193e5066,transparent 65%),#080e18; border:1px solid #12d9f4; }
#boosterOpening::backdrop { background:#020611ed; backdrop-filter:blur(9px); }
#closeBoosterOpening { position:absolute; right:12px; top:8px; background:none; color:white; border:0; font-size:30px; cursor:pointer; }
#boosterOpeningTitle { font:900 clamp(20px,4vw,34px) var(--display); color:#b7f20c; margin:12px 0; }
#boosterOpeningHint { color:#bdd0df; font-size:12px; min-height:32px; }
#tearBooster { position:relative; display:flex; flex-direction:column; justify-content:center; gap:24px; margin:35px auto; width:220px; height:330px; border:3px solid #ffdb36; color:white; background:repeating-linear-gradient(135deg,transparent 0 32px,#12d9f41a 33px 40px),linear-gradient(150deg,#f72c6880,#091323 40% 70%,#12d9f488); clip-path:polygon(0 0,100% 0,98% 7%,100% 12%,100% 100%,0 100%,2% 92%,0 87%); cursor:pointer; box-shadow:0 0 40px #12d9f466; animation:pack-float 3s ease-in-out infinite; }
#tearBooster::before { content:'TIRER POUR OUVRIR ›››'; position:absolute; top:18px; left:0; right:0; padding:8px; background:#ffdb36; color:#101522; font:900 11px var(--display); border-bottom:2px dashed #101522; }
#tearBooster b { font:900 38px var(--display); transform:rotate(-7deg); }#tearBooster small { color:#12d9f4; letter-spacing:.2em; }
#openingCards { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:760px; margin:32px auto; }
[data-stage="opened"] #tearBooster { display:none; }[data-stage="opened"] #openingCards { display:grid; }
[data-stage="opened"] #openingCards::before { content:''; position:absolute; left:15%; right:15%; top:45%; height:3px; background:#12d9f4; box-shadow:0 0 40px 12px #12d9f477; pointer-events:none; animation:seal-burst .6s ease-out both; }
@keyframes seal-burst { from { opacity:1; transform:scaleX(.1); } to { opacity:0; transform:scaleX(1.4); } }
.opening-card { position:relative; aspect-ratio:2/3; border:0; padding:0; background:none; color:white; cursor:pointer; perspective:900px; animation:pack-deal .5s ease-out both; animation-delay:calc(var(--index)*.13s); }
.opening-back { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:20px; font:900 40px var(--display); color:#ffda32; border:2px solid #ffda32; background:repeating-linear-gradient(45deg,transparent 0 36px,#ff315f66 37px 40px),#101726; transition:transform .5s,opacity .3s; }.opening-back span { font-size:10px; letter-spacing:.1em; }
.opening-face { position:absolute; inset:0; container-type:inline-size; overflow:hidden; animation:pack-flip .5s ease-out both; box-shadow:0 0 28px var(--rarity); }
.is-revealed .opening-back { transform:rotateY(90deg); opacity:0; }
.opening-caption { position:absolute; top:calc(100% + 10px); left:-8px; right:-8px; font:900 10px var(--display); color:var(--rarity); }
.opening-card:focus-visible,#tearBooster:focus-visible { outline:3px solid white; outline-offset:5px; }
.opening-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:54px; padding-top:20px; border-top:1px solid #12d9f444; }
.opening-actions[hidden] { display:none; }
.opening-actions .button { min-height:50px; font-size:14px; }
#openAnotherBooster { background:var(--cyan); color:#08141b; }
.opening-actions .button:focus-visible { outline:3px solid white; outline-offset:-4px; }
@keyframes pack-float { 50% { transform:translateY(-8px) rotate(2deg); } }
@keyframes pack-deal { from { opacity:0; transform:translateY(40px) scale(.7) rotate(-8deg); } to { opacity:1; transform:none; } }
@keyframes pack-flip { from { opacity:0; transform:rotateY(-90deg); filter:brightness(2); } to { opacity:1; transform:rotateY(0); filter:brightness(1); } }
@media(max-width:600px) { #openingCards { gap:10px; }.opening-back { font-size:25px; }.opening-caption { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { #tearBooster,.opening-card,.opening-face { animation:none; }.opening-back { transition:none; }[data-stage="opened"] #openingCards::before { display:none; } }