/* Boosters AnimalDex — ouverture façon « TCG » (CSS pur, transform/opacity uniquement). */
.booster-scene {
  position: relative;
  max-width: 100%;
  overflow-x: clip;
  margin-top: 1.2rem;
}
.booster-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.booster-actions .cta.large {
  flex: 1 1 12rem;
  margin-top: 0.4rem;
}

/* ---------- Table : le paquet puis la pile de cartes au même endroit ---------- */
.booster-table {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  margin: 0.4rem auto 1.4rem;
  scroll-margin: 5rem 0;
}
.booster-table > * { grid-area: 1 / 1; }

/* ---------- Paquet ---------- */
.booster-paquet {
  position: relative;
  isolation: isolate;
  width: min(11rem, 68vw);
  height: 15rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.booster-haut,
.booster-bas {
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(160deg, #f6b43a, #e07028 58%, #a34a12);
}
.booster-bas {
  bottom: 0;
  height: 50%;
  border-radius: 0 0 16px 16px;
}
.booster-haut {
  top: 0;
  z-index: 1;
  height: 54%;
  border-radius: 16px 16px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 78% 96%, 52% 86%, 24% 98%, 0 90%);
  transition: transform 0.5s ease;
}
.booster-paquet img {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  margin: 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  pointer-events: none;
}
.booster-aura {
  position: absolute;
  inset: -32%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 140, 0.9), rgba(240, 160, 26, 0.5) 45%, rgba(240, 160, 26, 0) 72%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 1.1s ease, transform 1.1s ease;
  pointer-events: none;
}
.booster-reflet {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.booster-reflet::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-14deg);
}
/* 1. Anticipation : l’aura monte, le paquet pulse puis vibre */
.booster-paquet.charge { animation: booster-pulse 0.55s ease-in-out infinite alternate; }
.booster-paquet.charge .booster-aura { opacity: 1; transform: scale(1.12); }
.booster-paquet.charge .booster-reflet { opacity: 1; }
.booster-paquet.charge .booster-reflet::before { animation: booster-reflet 1.1s ease-in-out infinite; }
.booster-paquet.charge.fort { animation: booster-vibre 0.1s linear infinite; }
.booster-paquet.charge.fort .booster-aura { transform: scale(1.3); transition-duration: 0.4s; }
@keyframes booster-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}
@keyframes booster-vibre {
  0%, 100% { transform: scale(1.05) rotate(-1.6deg); }
  50% { transform: scale(1.05) rotate(1.6deg); }
}
@keyframes booster-reflet {
  from { transform: translateX(-130%) skewX(-14deg); }
  to { transform: translateX(330%) skewX(-14deg); }
}
/* 2. Déchirure */
.booster-paquet.dechire .booster-haut {
  transform: translateY(-130%) rotate(-16deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s ease, opacity 0.4s ease 0.3s;
}
.booster-paquet.dechire .booster-aura {
  opacity: 0;
  transform: scale(1.7);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.booster-paquet.vide {
  opacity: 0;
  transform: translateY(18px) scale(0.92);
}

/* ---------- Étincelles (40 max, créées par le JS) ---------- */
.booster-etincelles {
  position: relative;
  z-index: 40;
  width: 0;
  height: 0;
  pointer-events: none;
}
.booster-etincelle {
  position: absolute;
  left: calc(var(--taille) / -2);
  top: calc(var(--taille) / -2);
  width: var(--taille);
  height: var(--taille);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  opacity: 0;
  animation: booster-etincelle var(--t) cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
.booster-etincelle.losange { border-radius: 2px; }
@keyframes booster-etincelle {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.25); }
}

/* ---------- Pile de cartes (scène de révélation) ---------- */
.booster-pile {
  position: relative;
  width: min(13rem, 70vw);
  aspect-ratio: 5 / 7;
  perspective: 1100px;
}
.booster-suivante {
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.booster-suivante:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.booster-halo {
  position: absolute;
  inset: -22%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo, #fff) 56%, color-mix(in srgb, var(--halo, #fff) 40%, transparent) 74%, transparent 100%);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.booster-pile[data-effet="rare"] { --halo: var(--rare); }
.booster-pile[data-effet="epique"] { --halo: var(--epique); }
.booster-pile[data-effet="legendaire"] { --halo: var(--legendaire); }
.booster-pile.halo-on .booster-halo { opacity: 0.9; transform: scale(1); }
.booster-pile.halo-on[data-effet="legendaire"] .booster-halo { animation: booster-halo 1.6s ease-in-out infinite alternate; }
@keyframes booster-halo {
  from { opacity: 0.75; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}
.booster-rayons {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 240%;
  aspect-ratio: 1;
  margin: -120% 0 0 -120%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 140, 0.55) 0deg 7deg, rgba(255, 226, 140, 0) 7deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.6s ease, transform 0.8s ease;
  pointer-events: none;
}
.booster-pile.rayons-on .booster-rayons {
  opacity: 1;
  transform: scale(1);
  animation: booster-rayons 14s linear infinite;
}
@keyframes booster-rayons {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1) rotate(360deg); }
}

/* ---------- Cartes ---------- */
.grille.booster-cartes {
  width: 100%;
  max-width: 100%;
}
.booster-carte.carte { padding: 0; }
.booster-carte {
  position: relative;
  min-width: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.booster-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.booster-recto {
  position: relative;
  height: 100%;
  padding: 0.9rem;
  border-radius: 13px;
  transform: rotateY(180deg);
}
.booster-carte h2 { overflow-wrap: anywhere; }
.booster-dos {
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background:
    url("patte.svg") center 42% / 2.6rem no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 6px, rgba(255, 255, 255, 0) 6px 14px),
    linear-gradient(160deg, #f0a01a, #c45a14 72%);
  border: 2px solid #f0c36a;
}
.booster-dos::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 15px;
  box-shadow: 0 0 18px 5px var(--lueur, #f0c36a);
  opacity: 0;
  pointer-events: none;
}
.booster-carte.retournee { transform: rotateY(180deg); }

/* Carte dans la pile */
.booster-pile .booster-carte {
  position: absolute;
  inset: 0;
  translate: 0 calc(var(--k, 0) * 4px);
  rotate: calc(var(--k, 0) * 1.2deg);
}
.booster-pile .booster-carte.sort {
  animation: booster-sort 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.15) backwards;
  animation-delay: calc(var(--k, 0) * 70ms);
}
@keyframes booster-sort {
  from { opacity: 0; scale: 0.55; translate: 0 45%; }
}
.booster-carte.active:not(.retournee) .booster-dos::after { animation: booster-attente 1.4s ease-in-out infinite alternate; }
@keyframes booster-attente {
  from { opacity: 0.15; }
  to { opacity: 0.7; }
}
/* Suspense : le dos s’illumine à la couleur de la rareté avant de se retourner */
.booster-carte.suspense.epique { --lueur: var(--epique); }
.booster-carte.suspense.legendaire { --lueur: var(--legendaire); animation: booster-tremble-carte 0.12s linear infinite; }
.booster-carte.suspense .booster-dos::after { animation: booster-suspense 0.32s ease-in-out infinite alternate; }
@keyframes booster-suspense {
  from { opacity: 0.45; }
  to { opacity: 1; }
}
@keyframes booster-tremble-carte {
  0%, 100% { translate: -1.5px 0; }
  50% { translate: 1.5px 0; }
}
/* 4. Effets de rareté à la révélation */
.booster-pile .booster-carte.revelee.rare,
.booster-pile .booster-carte.revelee.epique,
.booster-pile .booster-carte.revelee.legendaire { animation: booster-pop 0.5s ease-out; }
@keyframes booster-pop {
  0% { scale: 1; }
  45% { scale: 1.07; }
  100% { scale: 1; }
}
.booster-holo {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.booster-holo::before,
.booster-holo::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
}
.booster-holo::before {
  left: 0;
  width: 55%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-12deg);
}
.booster-carte.revelee.epique .booster-holo,
.booster-carte.revelee.legendaire .booster-holo { opacity: 1; }
.booster-carte.revelee.epique .booster-holo::before,
.booster-carte.revelee.legendaire .booster-holo::before { animation: booster-balayage 4s ease-in-out 0.3s infinite; }
@keyframes booster-balayage {
  0% { transform: translateX(-130%) skewX(-12deg); }
  30%, 100% { transform: translateX(300%) skewX(-12deg); }
}
.booster-carte.legendaire .booster-holo::after {
  left: -100%;
  width: 300%;
  background: linear-gradient(115deg,
    rgba(255, 90, 170, 0) 18%,
    rgba(255, 90, 170, 0.22) 30%,
    rgba(255, 230, 90, 0.26) 42%,
    rgba(90, 255, 210, 0.2) 54%,
    rgba(120, 140, 255, 0.22) 66%,
    rgba(120, 140, 255, 0) 80%);
}
.booster-carte.revelee.legendaire .booster-holo::after { animation: booster-foil 3s ease-in-out infinite alternate; }
@keyframes booster-foil {
  from { transform: translateX(-22%); }
  to { transform: translateX(22%); }
}

/* Carte posée dans l’album du booster (sous la pile) */
.booster-carte.posee {
  transition: none;
  transform: none;
  animation: booster-arrivee 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.booster-carte.posee .booster-recto { transform: none; }
.booster-carte.posee .booster-dos { display: none; }
@keyframes booster-arrivee {
  from { opacity: 0; translate: 0 -28px; scale: 0.85; }
}
.booster-carte.posee.rare { box-shadow: 0 0 14px color-mix(in srgb, var(--rare) 55%, transparent); }
.booster-carte.posee.epique { box-shadow: 0 0 18px color-mix(in srgb, var(--epique) 60%, transparent); }
.booster-carte.posee.legendaire { box-shadow: 0 0 22px color-mix(in srgb, var(--legendaire) 65%, transparent); }

/* ---------- Flash plein écran (légendaire) et secousse ---------- */
.booster-flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 250, 225, 0.95), rgba(255, 214, 90, 0.5) 45%, rgba(255, 214, 90, 0) 75%);
  opacity: 0;
  animation: booster-flash 0.55s ease-out forwards;
}
@keyframes booster-flash {
  0% { opacity: 0; }
  18% { opacity: 0.85; }
  100% { opacity: 0; }
}
.booster-table.tremble { animation: booster-tremble 0.4s linear; }
@keyframes booster-tremble {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(3px, 1px); }
}

/* ---------- Contrôles, annonce et zone de fin ---------- */
.booster-revelation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin: 0 0 0.6rem;
  text-align: center;
  scroll-margin-bottom: 5rem;
}
.booster-indice { flex: 1 1 100%; margin: 0; }
.booster-revelation .cta { margin-top: 0; min-height: 44px; }
.booster-annonce {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.booster-suite {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.booster-suite .cta { min-height: 44px; }
.carte-manquante img {
  filter: brightness(0);
  opacity: 0.35;
}
.carte-manquante h2 { overflow-wrap: anywhere; }

@media (min-width: 641px) {
  .grille.booster-cartes {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: end;
    gap: 0.5rem;
    padding: 0.6rem 1.6rem 0;
  }
  .grille.booster-cartes .booster-carte {
    flex: 0 1 8.6rem;
  }
  .booster-carte.posee {
    rotate: var(--eventail, 0deg);
    transform-origin: 50% 120%;
  }
}
@media (max-width: 640px) {
  .grille.booster-cartes {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  }
}
@media (max-width: 720px) {
  .booster-recto { padding: 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .booster-scene *,
  .booster-scene *::before,
  .booster-scene *::after,
  .booster-table { animation: none !important; }
  .booster-paquet,
  .booster-paquet *,
  .booster-carte,
  .booster-recto,
  .booster-halo { transform: none !important; translate: none !important; rotate: none !important; scale: none !important; }
  .booster-carte { transition: none !important; }
  .booster-rayons,
  .booster-holo,
  .booster-reflet,
  .booster-etincelles,
  .booster-flash { display: none !important; }
  .booster-carte.retournee .booster-dos { display: none; }
  .booster-carte.retournee .booster-recto,
  .booster-carte.posee { animation: booster-fondu 0.3s ease both !important; }
}
@keyframes booster-fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}

.booster-suite[hidden],
.booster-scene [hidden] { display: none !important; }