/* ============================================================================
   booster-ouverture.css — mise en scène de l'ouverture d'un booster
   (voir js/booster-ouverture.js). Seuls transform et opacity sont animés ;
   aucun filtre en boucle (iPad).
   ========================================================================== */
.bo-scene {
  --bo-c: #ffc93c;
  --bo-rgb: 255, 201, 60;
  position: relative;
  width: 100%;
  height: clamp(420px, 68vh, 620px);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #1a1630 0%, #0a0a14 70%, #050509 100%);
  border-radius: 14px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: #f3f0ff;
}
.bo-fond {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 50%, rgba(var(--bo-rgb), 0.38) 0%, rgba(var(--bo-rgb), 0.08) 55%, transparent 75%);
  opacity: 0.35;
}
.bo-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

/* ── Le paquet ── */
.bo-centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}
.bo-paquet {
  position: relative;
  /* transform est réservé à l'animation (JS) */
  height: min(72%, 440px);
  aspect-ratio: 440 / 768;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  will-change: transform;
}
.bo-scene[data-etat="pret"] .bo-paquet {
  animation: boFlotte 3.2s ease-in-out infinite;
}
@keyframes boFlotte {
  0%, 100% { translate: 0 0; rotate: -1.2deg; }
  50%      { translate: 0 -10px; rotate: 1.2deg; }
}
.bo-paquet:focus-visible { outline: 3px solid rgba(var(--bo-rgb), 0.9); outline-offset: 6px; border-radius: 12px; }
.bo-moitie {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform, opacity;
}
.bo-moitie img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
}
.bo-g { z-index: 2; transform-origin: 30% 70%; }
.bo-d { z-index: 1; transform-origin: 70% 70%; }

/* halo coloré derrière le paquet (dégradé, pas de flou) */
.bo-halo {
  position: absolute;
  left: -45%;
  right: -45%;
  top: -22%;
  bottom: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--bo-rgb), 0.85) 0%, rgba(var(--bo-rgb), 0.35) 45%, rgba(var(--bo-rgb), 0) 100%);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.bo-scene[data-etat="pret"] .bo-halo { animation: boRespire 3.2s ease-in-out infinite; }
@keyframes boRespire { 50% { opacity: 0.32; } }

/* couture lumineuse le long de la déchirure (bord déchiré à ~46 % de la largeur) */
.bo-couture {
  position: absolute;
  left: 46%;
  top: 3%;
  width: 7px;
  margin-left: -3.5px;
  height: 94%;
  z-index: 3;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--bo-rgb), 0) 0%, rgba(var(--bo-rgb), 0.9) 30%, #fff 50%, rgba(var(--bo-rgb), 0.9) 70%, rgba(var(--bo-rgb), 0) 100%);
  box-shadow: 0 0 18px 4px rgba(var(--bo-rgb), 0.55);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* colonne de lumière qui jaillit de la déchirure */
.bo-colonne {
  position: absolute;
  left: 50%;
  top: -10%;
  bottom: -10%;
  width: 46%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(var(--bo-rgb), 0) 0%, rgba(var(--bo-rgb), 0.35) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(var(--bo-rgb), 0.35) 70%, rgba(var(--bo-rgb), 0) 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  will-change: transform, opacity;
}

/* onde de choc */
.bo-onde {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, transparent 72%, rgba(255, 255, 255, 0.9) 84%, rgba(var(--bo-rgb), 0.6) 90%, transparent 100%);
  transform: translate(-50%, -50%) scale(0.2);
  will-change: transform, opacity;
}

/* éclat plein écran */
.bo-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 55% at 50% 50%, #fff 0%, rgba(255, 255, 255, 0.9) 25%, rgba(var(--bo-rgb), 0.7) 55%, rgba(var(--bo-rgb), 0.25) 100%);
}

.bo-consigne {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 8;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #f3f0ff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  transition: opacity 0.3s ease;
  animation: boClignote 1.8s ease-in-out infinite;
}
@keyframes boClignote { 50% { opacity: 0.55; } }
.bo-scene[data-etat="pret"] .bo-consigne::before { content: attr(data-pret); }
.bo-scene[data-etat="eventail"] .bo-consigne::before { content: attr(data-eventail); }
.bo-consigne { bottom: 58px; }
.bo-scene[data-etat="pret"] .bo-consigne { bottom: 18px; }
.bo-scene[data-etat="ouverture"] .bo-consigne { opacity: 0; animation: none; }

/* ── Les cartes (étape 2 : éventail face cachée) ── */
.bo-cartes {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.bo-carte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bo-cw, 160px);
  height: var(--bo-ch, 232px);
  margin-left: calc(var(--bo-cw, 160px) / -2);
  margin-top: calc(var(--bo-ch, 232px) / -2);
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  will-change: transform, opacity;
}
/* tant que l'éventail n'est pas posé, les cartes (invisibles, au centre) ne doivent
   pas intercepter le toucher destiné au paquet */
.bo-scene[data-etat="pret"] .bo-carte, .bo-scene[data-etat="ouverture"] .bo-carte { pointer-events: none; }
.bo-flotte {
  position: absolute;
  inset: 0;
  perspective: 1100px;
}
.bo-scene[data-etat="eventail"] .bo-flotte {
  animation: boCarteFlotte 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.85s);
}
@keyframes boCarteFlotte {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
.bo-tourne {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.bo-dos, .bo-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bo-face { transform: rotateY(180deg); }
.bo-img, .bo-img img {
  display: block;
  width: 100%;
  height: 100%;
}
.bo-img img { object-fit: cover; -webkit-user-drag: none; }
/* reflet qui passe de temps en temps sur les dos en attente */
.bo-dos::after {
  content: "";
  position: absolute;
  inset: -10% -60%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.38) 50%, transparent 60%);
  transform: translateX(-70%);
  opacity: 0;
}
.bo-scene[data-etat="eventail"] .bo-dos::after {
  animation: boReflet 4.2s ease-in-out infinite;
  animation-delay: calc(0.6s + var(--i, 0) * 0.35s);
}
@keyframes boReflet {
  0%        { transform: translateX(-70%); opacity: 0; }
  6%        { opacity: 1; }
  28%, 100% { transform: translateX(70%); opacity: 0; }
}
.bo-carte:focus-visible .bo-dos { box-shadow: 0 0 0 3px rgba(var(--bo-rgb), 0.95), 0 14px 30px rgba(0, 0, 0, 0.55); }

/* bouton « Tout retourner » */
.bo-tout {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 8;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font: 800 15px system-ui, sans-serif;
  background: linear-gradient(135deg, #ffe27a, #ffb52e);
  color: #2a1a00;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.bo-scene[data-etat="eventail"]:not([data-tous="1"]) .bo-tout { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.bo-scene[data-tous="1"] .bo-consigne, .bo-scene[data-etat="revele"] .bo-consigne { opacity: 0; animation: none; }

/* ── Étape 3 : retournement, halo de rareté, éclat, reflet holographique ── */
.bo-carte { --rc: #d8e0ee; --rrgb: 216, 224, 238; }
.bo-aura {
  position: absolute;
  inset: -22% -30%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(var(--rrgb), 0.75) 0%, rgba(var(--rrgb), 0.3) 50%, rgba(var(--rrgb), 0) 100%);
  will-change: transform, opacity;
}
.bo-carte[data-r="commune"] .bo-aura { inset: -8% -12%; background: radial-gradient(closest-side, rgba(var(--rrgb), 0.35), rgba(var(--rrgb), 0) 100%); }
.bo-aura::after {          /* respiration du halo (épique, légendaire) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}
.bo-carte[data-libre="1"][data-r="epique"] .bo-aura::after,
.bo-carte[data-libre="1"][data-r="legendaire"] .bo-aura::after { animation: boAura 2.4s ease-in-out infinite; }
@keyframes boAura { 50% { opacity: 0.8; } }
.bo-eclat {
  position: absolute;
  inset: -12%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  border-radius: 20px;
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, 0.85) 35%, rgba(var(--rrgb), 0.55) 65%, rgba(var(--rrgb), 0) 100%);
  will-change: opacity;
}
/* liseré lumineux de la rareté une fois la carte retournée */
.bo-carte[data-vu="1"] .bo-face { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(var(--rrgb), 0.85), 0 0 22px rgba(var(--rrgb), 0.55); }
.bo-carte[data-vu="1"][data-r="commune"] .bo-face { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.25); }
.bo-carte[data-libre="1"] .bo-tourne { transition: transform 0.35s ease-out; }
.bo-carte[data-libre="1"].bo-pointe .bo-tourne { transition: transform 0.08s linear; }
.bo-face { isolation: isolate; }

/* reflet holographique : bandes irisées + reflet blanc, pilotés par --mx/--my */
.bo-holo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  --holo: 0.5;
}
.bo-carte[data-r="rare"] .bo-holo { --holo: 0.5; }
.bo-carte[data-r="epique"] .bo-holo { --holo: 0.6; }
.bo-carte[data-r="legendaire"] .bo-holo { --holo: 0.7; }
.bo-carte[data-vu="1"]:not([data-r="commune"]) .bo-holo { opacity: var(--holo); }
.bo-holo::before {
  content: "";
  position: absolute;
  inset: -40% -120%;
  background: repeating-linear-gradient(115deg,
    rgba(255, 60, 170, 0) 0%, rgba(255, 60, 170, 0.5) 3%, rgba(60, 220, 255, 0.5) 6%,
    rgba(120, 255, 140, 0.45) 9%, rgba(255, 230, 60, 0.5) 12%, rgba(255, 60, 170, 0) 15%,
    rgba(255, 60, 170, 0) 32%);
  mix-blend-mode: color-dodge;
  transform: translate(calc((var(--mx, 0.5) - 0.5) * -45%), calc((var(--my, 0.5) - 0.5) * -20%));
}
.bo-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(var(--mx, 0.3) * 100%) calc(var(--my, 0.25) * 100%), rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 28%, rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: overlay;
}
/* sans doigt : les bandes glissent lentement toutes seules */
.bo-carte[data-libre="1"]:not(.bo-pointe) .bo-holo::before { animation: boHolo 5s ease-in-out infinite alternate; }
@keyframes boHolo { from { translate: -12% 0; } to { translate: 12% 0; } }
body[class*="theme-"] .bo-scene .bo-tout { color: #2a1a00 !important; -webkit-text-fill-color: #2a1a00 !important; }

/* captures figées : aucune animation CSS résiduelle */
.bo-scene[data-fige="1"] *, .bo-scene[data-fige="1"] *::after, .bo-scene[data-fige="1"] *::before, .bo-scene[data-fige="1"] { animation: none !important; transition: none !important; }

/* ── Version sobre ── */
.bo-reduit .bo-paquet, .bo-reduit .bo-halo, .bo-reduit .bo-consigne,
.bo-reduit .bo-flotte, .bo-reduit .bo-dos::after,
.bo-reduit .bo-holo::before, .bo-reduit .bo-aura::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bo-scene .bo-paquet, .bo-scene .bo-halo, .bo-scene .bo-consigne,
  .bo-scene .bo-flotte, .bo-scene .bo-dos::after,
  .bo-scene .bo-holo::before, .bo-scene .bo-aura::after { animation: none !important; }
}

/* ── Téléphone ── */
@media (max-width: 600px) {
  .bo-scene { height: clamp(380px, 72vh, 640px); border-radius: 10px; }
  .bo-consigne { font-size: 14px; }
}

/* ── Garde-fou thèmes : la scène est toujours sombre, texte clair ── */
body[class*="theme-"] .bo-scene,
body[class*="theme-"] .bo-scene * {
  color: #f3f0ff !important;
  -webkit-text-fill-color: #f3f0ff !important;
}

/* ── Étape 4 : le grand moment légendaire ── */
.bo-voile {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(40, 24, 0, 0.55) 0%, rgba(4, 3, 10, 0.92) 100%);
}
.bo-rayons {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150vmin, 1100px);
  height: min(150vmin, 1100px);
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 214, 90, 0) 0deg, rgba(255, 214, 90, 0.55) 7deg, rgba(255, 214, 90, 0) 15deg,
    rgba(255, 214, 90, 0) 30deg, rgba(255, 240, 180, 0.45) 36deg, rgba(255, 214, 90, 0) 44deg,
    rgba(255, 214, 90, 0) 60deg, rgba(255, 214, 90, 0.55) 67deg, rgba(255, 214, 90, 0) 75deg,
    rgba(255, 214, 90, 0) 90deg, rgba(255, 240, 180, 0.45) 96deg, rgba(255, 214, 90, 0) 104deg,
    rgba(255, 214, 90, 0) 120deg, rgba(255, 214, 90, 0.55) 127deg, rgba(255, 214, 90, 0) 135deg,
    rgba(255, 214, 90, 0) 150deg, rgba(255, 240, 180, 0.45) 156deg, rgba(255, 214, 90, 0) 164deg,
    rgba(255, 214, 90, 0) 180deg, rgba(255, 214, 90, 0.55) 187deg, rgba(255, 214, 90, 0) 195deg,
    rgba(255, 214, 90, 0) 210deg, rgba(255, 240, 180, 0.45) 216deg, rgba(255, 214, 90, 0) 224deg,
    rgba(255, 214, 90, 0) 240deg, rgba(255, 214, 90, 0.55) 247deg, rgba(255, 214, 90, 0) 255deg,
    rgba(255, 214, 90, 0) 270deg, rgba(255, 240, 180, 0.45) 276deg, rgba(255, 214, 90, 0) 284deg,
    rgba(255, 214, 90, 0) 300deg, rgba(255, 214, 90, 0.55) 307deg, rgba(255, 214, 90, 0) 315deg,
    rgba(255, 214, 90, 0) 330deg, rgba(255, 240, 180, 0.45) 336deg, rgba(255, 214, 90, 0) 344deg,
    rgba(255, 214, 90, 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 8%, #000 22%, #000 40%, transparent 70%);
  mask: radial-gradient(circle, transparent 8%, #000 22%, #000 40%, transparent 70%);
  will-change: transform, opacity;
}
.bo-titre {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 31;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  font: 900 clamp(20px, 4.6vw, 34px) / 1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe08a;
  text-shadow: 0 0 14px rgba(255, 190, 40, 0.9), 0 2px 0 #7a4b00, 0 4px 12px rgba(0, 0, 0, 0.8);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
body[class*="theme-"] .bo-scene .bo-titre { color: #ffe08a !important; -webkit-text-fill-color: #ffe08a !important; }
.bo-scene.bo-leg .bo-tout, .bo-scene.bo-leg .bo-consigne { opacity: 0 !important; pointer-events: none !important; animation: none; }

/* ── Étape 5 : étiquettes Nouvelle / Doublon ── */
.bo-etiquette {
  position: absolute;
  left: 50%;
  bottom: -13px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 999px;
  overflow: hidden;
  font: 800 clamp(10px, calc(var(--bo-cw, 160px) * 0.072), 13px) / 1.1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  transform: translateX(-50%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  will-change: transform, opacity;
}
.bo-nouvelle {
  background: linear-gradient(135deg, #fff2a8, #ffc93c 55%, #ff9f1c);
  color: #2a1700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 201, 60, 0.75);
}
/* petit reflet qui passe sur « Nouvelle » */
.bo-nouvelle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%);
  transform: translateX(-120%);
  opacity: 0;
}
.bo-carte[data-libre="1"] .bo-nouvelle::after { animation: boReflet 3.2s ease-in-out 0.4s infinite; }
.bo-doublon {
  background: rgba(22, 24, 40, 0.92);
  color: #d9dcec;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.bo-doublon b { color: #8ff0a4; font-weight: 900; }
body[class*="theme-"] .bo-scene .bo-nouvelle { color: #2a1700 !important; -webkit-text-fill-color: #2a1700 !important; }
body[class*="theme-"] .bo-scene .bo-doublon { color: #d9dcec !important; -webkit-text-fill-color: #d9dcec !important; }
body[class*="theme-"] .bo-scene .bo-doublon b { color: #8ff0a4 !important; -webkit-text-fill-color: #8ff0a4 !important; }
.bo-reduit .bo-nouvelle::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .bo-scene .bo-nouvelle::after { animation: none !important; } }

/* ── booster.html : en-tête de la modale (fond sombre) lisible sous tous les thèmes ── */
body[class*="theme-"] #booster-modal .bm-header,
body[class*="theme-"] #booster-modal .bm-header * {
  color: #f3f0ff !important;
  -webkit-text-fill-color: #f3f0ff !important;
  text-shadow: none !important;
}
body[class*="theme-"] #booster-modal .bm-progress .n { color: #ffd166 !important; -webkit-text-fill-color: #ffd166 !important; }
body[class*="theme-"] #booster-modal #bm-continue { color: #111 !important; -webkit-text-fill-color: #111 !important; }
/* Moitiés du paquet en <picture> : le <picture> ne doit pas changer la mise en page */
.bo-moitie .bo-pic{display:contents}