/* ---------- ouverture de paquet */
.pack-hero { text-align:center; padding:18px 0 8px;
  background:radial-gradient(ellipse 60% 45% at 50% 58%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 30% at 70% 40%, color-mix(in srgb, #ffb84d 8%, transparent), transparent 70%) }
.pack { width:190px; height:270px; margin:10px auto 22px; border-radius:18px; position:relative; cursor:pointer;
  background:#2b2080; box-shadow:0 18px 40px rgba(40,25,140,.4);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .2s }
.pack:active { transform:scale(.97) }
.pack::before { content:""; position:absolute; inset:10px; border:1px solid rgba(143,132,240,.55); border-radius:11px }
.pack .w { width:92px; height:92px; border-radius:50%; border:1.5px solid #c9c2ff; display:grid; place-items:center;
  font:700 46px/1 Georgia, serif; color:#f3f0ff; padding-top:2px }
.pack .lbl { position:absolute; bottom:24px; left:0; right:0; text-align:center; font-weight:500; letter-spacing:.3em; font-size:11px;
  text-transform:uppercase; color:#c9c2ff; padding-left:.3em }
.pack.opening { animation:wobble .5s ease-in-out }
@keyframes wobble { 25% { transform:rotate(-4deg) scale(1.03) } 75% { transform:rotate(4deg) scale(1.03) } }
/* téléphone : le paquet se règle sur la hauteur de l'écran pour que la scène tienne sans défiler
   (cartes décoratives proportionnelles au paquet) */
@media (max-width:480px) {
  .pack-hero { padding-top:8px }
  .stage { margin:14px auto 16px }
  .pack-hero .pack { width:clamp(140px, 26vh, 190px); height:auto; aspect-ratio:19 / 27 }
  .pack-hero .pack .w { width:48%; height:auto; aspect-ratio:1; font-size:clamp(34px, 6vh, 46px) }
  .pack-hero .pack .lbl { bottom:9% }
  .fanc { width:50%; height:auto; aspect-ratio:96 / 136; top:11% }
  .fanc.l { left:-30% } .fanc.r { right:-30% }
}
@media (max-width:400px) { .fanc.l { left:-23% } .fanc.r { right:-23% } }
/* jamais plus large que l'écran : ce qui dépasse (cartes décoratives inclinées) est coupé au bord */
.pack-hero { overflow-x:clip }
/* paquet entier visible sur un téléphone : 3 cartes puis 2 centrées */
.reveal { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; perspective:1000px }
.reveal .flip { position:relative }
.flip.glow-rare .back { box-shadow:0 0 0 2px var(--rare), 0 0 22px var(--rare) }
.flip.glow-epic .back { box-shadow:0 0 0 2px var(--epic), 0 0 26px var(--epic) }
.flip.glow-legendary .back { box-shadow:0 0 0 2px var(--legendary), 0 0 32px var(--legendary) }
.flip.glow-variant .back { background:linear-gradient(145deg, #ff7ab6, #8b7cff 50%, #7cc4ff);
  box-shadow:0 0 0 2px #fff, 0 0 26px #ff7ab6, 0 0 44px #7cc4ff }
.flip.glow-variant .back::before, .flip.glow-variant .back::after { border-color:rgba(255,255,255,.75) }
.reveal .card .name { font-size:12px }
.reveal .card .kind { font-size:10.5px }
.reveal .card .new { font-size:9.5px; padding:2px 6px; bottom:6px; right:6px }
.reveal .card .body { padding:6px 7px 7px }
@media (min-width:560px) {
  .reveal { grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px }
  .reveal .pslot, .reveal .pslot:nth-child(4) { grid-column:auto }
}
.flip { position:relative; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1);
  cursor:pointer }
.flip.shown { transform:rotateY(180deg) }
/* la face (carte) donne la hauteur ; le dos se superpose exactement */
.flip > * { backface-visibility:hidden; -webkit-backface-visibility:hidden }
.flip .back { position:absolute; inset:0 }
.flip .back { border-radius:14px; background:#2b2080; display:flex; align-items:center;
  justify-content:center; color:#f3f0ff; font:700 30px/1 Georgia, serif; box-shadow:var(--shadow) }
.flip .back::after { content:""; position:absolute; inset:7px; border:1px solid rgba(143,132,240,.55); border-radius:9px }
.flip .back::before { content:""; position:absolute; width:46%; aspect-ratio:1; border-radius:50%; border:1.2px solid #c9c2ff;
  left:50%; top:50%; transform:translate(-50%, -50%) }
.flip .card { transform:rotateY(180deg) }
/* une fois retournée, la carte redevient plate : sinon la couche 3D passe au-dessus des feuilles */
/* le contenu de la page forme sa propre couche : les cartes en 3D ne peuvent pas passer au-dessus
   des fenêtres, sans avoir à les « aplatir » après l'animation (ce qui provoquait un clignotement) */
main { isolation:isolate }

/* Téléphone : ouverture carte par carte (packs.js, oneByOne) */
#packResult.one .reveal { display:block; width:auto !important }
#packResult.one .pslot { display:none }
#packResult.one .pslot.cur { display:flex; margin:0 auto; animation:rin .25s ease-out;
  width:min(76vw, 300px, calc((100dvh - var(--top-h, 56px) - var(--tabs-h, 69px) - 330px) * .8)) }
/* une vraie carte à jouer : image verticale, même hauteur face cachée et face visible (rien ne bouge au retournement) */
#packResult.one .pslot.cur .card .art { aspect-ratio:4 / 5 }
#packResult.one .card .name { font-size:17px }
#packResult.one .card .kind { font-size:13px }
#packResult.one .card .ctop .tier { font-size:11px; padding:3px 7px }
#packResult.one .stag { font-size:12px }
#packResult.one #hint, #packResult.one .ractions { display:none }
@keyframes rin { from { opacity:0; transform:translateX(18px) } }
.rcount { margin:2px 0 12px; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums }
.rcount b { color:var(--accent); font-size:18px }
.rnav { display:flex; align-items:center; justify-content:center; gap:16px; margin:16px 0 12px }
.rarrow { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); display:grid; place-items:center; cursor:pointer }
.rarrow .ico-svg { margin:0 }
.rarrow[data-prev] .ico-svg { transform:rotate(180deg) }
.rarrow:disabled { opacity:.35; cursor:default }
.rdots { display:flex; align-items:center; gap:9px }
/* pastilles : la couleur de la rareté (irisée pour une carte à effet), plus vive une fois la carte retournée */
.rdot { width:12px; height:12px; padding:0; border:0; border-radius:50%; background:var(--t); opacity:.45; cursor:pointer;
  transition:transform .2s, opacity .2s }
.rdot.fx { background:conic-gradient(#ff7ab6, #ffd86b, #7dffcf, #7cc4ff, #c98bff, #ff7ab6) }
.rdot.seen { opacity:1 }
.rdot.on { opacity:1; transform:scale(1.4); box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--t) }
.rdot.fx.on { box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px #c98bff }
.rstep { max-width:320px; margin:0 auto }