/* Ouverture de pack : pioche, plateau et nom de la rareté (packs.js), et la
   mise en scène spectaculaire (js/ouverture-spectaculaire.js) */

.ouverture-scene { position: relative; isolation: isolate; }

/* ---------- la carte en cours posée sur la pile des cartes à piocher ---------- */
.ouverture-table { display: grid; }
.ouverture-table > * { grid-area: 1 / 1; }
.ouverture-pile { position: relative; pointer-events: none; }
.ouverture-pile span {
  position: absolute; inset: 0; border-radius: 0.35rem;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 12px),
    #16171a;
  border: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.45);
  transition: transform 320ms ease;
}
.ouverture-pile span:nth-child(1) { transform: translateY(7px) rotate(-2deg); }
.ouverture-pile span:nth-child(2) { transform: translateY(13px) rotate(2.5deg); }
.ouverture-pile span:nth-child(3) { transform: translateY(19px) rotate(-3.5deg); }
.ouverture-pile span:nth-child(n + 4) { transform: translateY(25px) rotate(4deg); }

/* la carte : envol quand on passe à la suivante, qui sort de la pile
   (propriétés translate/rotate/scale, à part du retournement en transform) */
#carte-overlay {
  z-index: 1;
  transition: transform 560ms var(--ease-sortie), translate 320ms cubic-bezier(.3, .7, .3, 1),
    rotate 320ms cubic-bezier(.3, .7, .3, 1), scale 320ms ease, opacity 320ms ease;
}
#carte-overlay:not(.retournee):hover { translate: 0 -6px; }
/* pas de fondu d'opacité : il aplatit la 3D et le dos transparaîtrait en
   miroir, la carte sort donc franchement de l'écran */
#carte-overlay.carte-envol { translate: -85vw -8%; rotate: -18deg; scale: 0.85; }
#carte-overlay.carte-envol-arriere { translate: 85vw -8%; rotate: 18deg; scale: 0.85; }
#carte-overlay.carte-pioche { transition: none; translate: 0 20px; scale: 0.96; }
#carte-overlay.carte-retour { transition: none; translate: -85vw -8%; rotate: -18deg; scale: 0.85; }

/* écran peu haut (téléphone) : carte plus petite pour que tout tienne */
@media (max-height: 860px) { .carte-overlay { width: min(68vw, 240px); } }

/* ---------- nom de la rareté sous la carte révélée ---------- */
.ouverture-rarete {
  margin: 0.4rem 0 0; min-height: 1.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.3em; text-transform: uppercase; text-indent: 0.3em;
  color: var(--couleur); text-shadow: 0 0 18px color-mix(in oklab, var(--couleur) 60%, transparent);
  opacity: 0;
}
.ouverture-rarete.visible { opacity: 1; }
.ouverture-rarete.animee { animation: ouv-rarete 600ms cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes ouv-rarete {
  from { opacity: 0; letter-spacing: 0.8em; filter: blur(4px); transform: scale(0.85); }
}

/* ---------- plateau : une case par carte du pack ---------- */
.ouverture-plateau { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.45rem; justify-content: center; }
.emplacement-plateau {
  width: 2.9rem; aspect-ratio: 5 / 7; border-radius: 0.3rem; padding: 0.2rem;
  display: flex; align-items: flex-end; justify-content: center;
  border: 1px dashed rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.03);
  color: #e7e6e3; font-size: 0.5rem; font-weight: 700; line-height: 1.1; overflow: hidden;
  transition: translate 200ms ease, box-shadow 200ms ease;
}
.emplacement-plateau span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.emplacement-plateau.revelee {
  cursor: pointer; border: 1.5px solid var(--couleur);
  background: linear-gradient(170deg, color-mix(in oklab, var(--couleur) 40%, #16171a), #16171a 75%);
}
.emplacement-plateau.pop { animation: ouv-case 380ms cubic-bezier(.3, 1.5, .5, 1) both; }
.emplacement-plateau.actif { translate: 0 -5px; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85); }
.emplacement-plateau.revelee:hover { translate: 0 -3px; }
.emplacement-plateau.actif.revelee:hover { translate: 0 -5px; }
@keyframes ouv-case { from { scale: 0.6; opacity: 0; } }
.ouverture-scene.ouv-cachee { visibility: hidden; }
.ouverture-scene.ouv-apparait { animation: ouv-apparition 320ms ease both; }
@keyframes ouv-apparition { from { opacity: 0; transform: scale(0.92); } }

/* ---------- contrôles : son, tout révéler ---------- */
.ouv-controles { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 3; }
.ouv-son { font-size: 1.2rem; color: var(--color-text); }
.ouv-tout-reveler { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- intro : le pack tremble et se déchire ---------- */
.ouv-intro {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; align-content: center; gap: 1.5rem; cursor: pointer;
  transition: opacity 300ms ease;
}
.ouv-intro.ouv-intro-fin { opacity: 0; }
.ouv-passer { font-size: var(--text-xs); color: var(--color-text-faint); margin: 0; transition: opacity 200ms; }
.ouv-intro:has(.ouv-sortie) .ouv-passer { opacity: 0; }
/* Le paquet : deux copies du pack de la page, découpées sur sa ligne de
   déchirure (12cqi du haut, soit 8,6 % de sa hauteur) : la languette et le corps. */
.ouv-pack {
  --dechirure: 8.6%;
  position: relative; width: min(58vw, 232px); aspect-ratio: 5 / 7;
  filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.6));
  animation: ouv-arrivee 420ms cubic-bezier(.2, .9, .3, 1.25) both;
}
@keyframes ouv-arrivee { from { opacity: 0; scale: 0.6; translate: 0 50px; rotate: -6deg; } }
.ouv-pack .pack {
  width: 100%; animation: none !important; transform: none !important; transition: none;
  cursor: inherit; pointer-events: none;
}
.ouv-pack-corps, .ouv-pack-haut { position: absolute; inset: 0; }
.ouv-pack-corps { z-index: 2; clip-path: inset(var(--dechirure) 0 0 0); }
.ouv-pack-haut { z-index: 3; clip-path: inset(0 0 calc(100% - var(--dechirure)) 0); transform-origin: 100% var(--dechirure); }
/* les cartes, cachées dans le paquet jusqu'à l'ouverture */
.ouv-pack-cartes { position: absolute; z-index: 1; left: 8%; right: 8%; top: 9%; aspect-ratio: 5 / 7; }
.ouv-pack-cartes > span {
  position: absolute; inset: 0; border-radius: 0.35rem;
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 12px), #16171a;
  border: 1px solid rgb(232 132 58 / 0.45); box-shadow: 0 -6px 18px rgb(0 0 0 / 0.5);
}
.ouv-pack-cartes .carte-dos { border-color: rgb(232 132 58 / 0.45); }
.ouv-pack-cartes > span:nth-child(1) { rotate: -4deg; }
.ouv-pack-cartes > span:nth-child(2) { rotate: 3deg; }
/* ligne de déchirure : une lueur la parcourt pendant que le pack tremble */
.ouv-pack-ligne {
  position: absolute; z-index: 4; left: 4%; right: 4%; top: var(--dechirure); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff 45%, var(--couleur) 55%, transparent) no-repeat;
  background-size: 35% 100%; background-position: -40% 0; opacity: 0;
}
.ouv-pack.ouv-tremble .ouv-pack-ligne { opacity: 1; animation: ouv-ligne 620ms ease-in forwards; box-shadow: 0 0 12px var(--couleur); }
@keyframes ouv-ligne { to { background-position: 140% 0; } }
.ouv-pack.ouv-dechire .ouv-pack-ligne { opacity: 0; transition: opacity 150ms; }
/* lumière qui s'échappe par l'ouverture */
.ouv-lumiere {
  position: absolute; z-index: 0; left: 50%; top: var(--dechirure); width: 160%; height: 170%;
  translate: -50% -100%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 160deg at 50% 100%, transparent, color-mix(in oklab, var(--couleur) 55%, white) 20deg, transparent 40deg);
  mask-image: linear-gradient(to top, black, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, black, transparent 85%);
}
.ouv-pack.ouv-dechire .ouv-lumiere { animation: ouv-lumiere 700ms ease-out forwards; }
@keyframes ouv-lumiere {
  0% { opacity: 0; scale: 0.4 0.2; }
  35% { opacity: 1; }
  100% { opacity: 0; scale: 1.1 1; }
}
.ouv-pack.ouv-tremble { animation: ouv-tremble 90ms linear infinite, ouv-lueur 1.2s ease-in forwards; }
@keyframes ouv-tremble {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(calc(-1px - var(--force) * 0.6px), 1px) rotate(-0.6deg); }
  75% { transform: translate(calc(1px + var(--force) * 0.6px), -1px) rotate(0.6deg); }
}
@keyframes ouv-lueur {
  to { filter: drop-shadow(0 0 calc(18px + var(--force) * 10px) var(--couleur)) drop-shadow(0 20px 40px rgb(0 0 0 / 0.6)); }
}
/* la languette se décolle de gauche à droite (pivot à droite), puis s'envole */
.ouv-pack.ouv-dechire { animation: none; filter: drop-shadow(0 0 40px var(--couleur)) drop-shadow(0 24px 40px rgb(0 0 0 / 0.6)); }
.ouv-pack.ouv-dechire .ouv-pack-haut { animation: ouv-pelage 560ms cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes ouv-pelage {
  40% { transform: rotate(10deg) translateY(-4%); }
  to { transform: translate(75%, -70%) rotate(40deg); opacity: 0; }
}
/* les cartes sortent du paquet, qui retombe */
.ouv-pack.ouv-sortie .ouv-pack-cartes { animation: ouv-cartes-sortent 620ms cubic-bezier(.2, .8, .3, 1) forwards; }
.ouv-pack.ouv-sortie .ouv-pack-cartes > span:nth-child(1) { transition: rotate 500ms ease; rotate: -9deg; }
.ouv-pack.ouv-sortie .ouv-pack-cartes > span:nth-child(2) { transition: rotate 500ms ease; rotate: 8deg; }
@keyframes ouv-cartes-sortent { to { translate: 0 -58%; scale: 1.1; } }
.ouv-pack.ouv-sortie .ouv-pack-corps { animation: ouv-retombe 520ms cubic-bezier(.5, 0, .75, 0) 140ms forwards; }
@keyframes ouv-retombe { to { translate: 0 75%; rotate: 5deg; opacity: 0; } }

/* ---------- avant le retournement : halo + vibration ---------- */
.carte-overlay.ouv-anticipe {
  animation: ouv-vibre 70ms linear infinite;
  filter: drop-shadow(0 0 calc(var(--force) * 9px) var(--couleur));
  transition: filter 250ms ease;
}
@keyframes ouv-vibre {
  0%, 100% { translate: 0 0; }
  33% { translate: calc(var(--force) * -0.8px) calc(var(--force) * 0.5px); }
  66% { translate: calc(var(--force) * 0.8px) calc(var(--force) * -0.5px); }
}

/* ---------- au retournement : onde, étincelles, flash ---------- */
.ouv-onde {
  position: absolute; z-index: -1; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; pointer-events: none;
  border: 3px solid var(--couleur); box-shadow: 0 0 30px var(--couleur), inset 0 0 20px var(--couleur);
  animation: ouv-onde 850ms cubic-bezier(.1, .6, .3, 1) forwards;
}
@keyframes ouv-onde { to { transform: scale(14); opacity: 0; } }
.ouv-etincelle {
  position: absolute; z-index: 1; width: var(--taille); height: var(--taille); margin: calc(var(--taille) / -2) 0 0 calc(var(--taille) / -2);
  border-radius: 2px; background: var(--couleur); box-shadow: 0 0 8px var(--couleur); pointer-events: none;
  animation: ouv-etincelle 1100ms cubic-bezier(.15, .7, .35, 1) forwards;
}
@keyframes ouv-etincelle {
  from { transform: rotate(var(--angle)) translateX(0) rotate(0); opacity: 1; }
  to { transform: rotate(var(--angle)) translateX(var(--distance)) rotate(540deg); opacity: 0; }
}
.ouv-flash {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--couleur) 70%, white) 0%, transparent 70%);
  animation: ouv-flash 750ms ease-out forwards;
}
@keyframes ouv-flash { from { opacity: 0.85; } to { opacity: 0; } }

/* ---------- carte révélée : rayons derrière, reflet holographique ---------- */
.ouv-rayons {
  position: absolute; z-index: -1; width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--couleur) 55%, transparent) 0 6deg, transparent 6deg 22deg);
  mask-image: radial-gradient(circle, black 18%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, black 18%, transparent 68%);
  transition: opacity 500ms ease;
  animation: ouv-rayons 14s linear infinite;
}
.ouv-rayons.visible { opacity: 1; }
@keyframes ouv-rayons { to { transform: rotate(360deg); } }
.carte.ouv-holo .carte-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 25%, rgb(255 90 200 / 0.2) 38%, rgb(90 220 255 / 0.2) 46%,
    rgb(255 240 120 / 0.2) 54%, transparent 66%);
  background-size: 250% 250%;
  animation: ouv-holo 3.2s ease-in-out infinite;
}
@keyframes ouv-holo {
  0%, 100% { background-position: 100% 100%; }
  50% { background-position: 0% 0%; }
}

/* ---------- badges ---------- */
/* centré en haut : le jeu est en haut à gauche, la rareté en haut à droite */
.ouv-badge {
  position: absolute; top: 0.45rem; left: 50%; translate: -50% 0; z-index: 2; white-space: nowrap;
  padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
  animation: ouv-badge 400ms cubic-bezier(.3, 1.6, .5, 1) both;
}
.ouv-court { display: none; }
/* Full Art : le bandeau de rareté est en haut à gauche, le badge passe dessous */
/* résumé : forme courte « +1 🔹 », la longue déborderait sur le jeu et la rareté */
.ouv-recap .ouv-court { display: inline; }
.ouv-recap .ouv-long { display: none; }
.ouv-badge-nouvelle { background: #2fbf71; color: #06240f; }
.ouv-badge-doublon { background: rgb(20 20 24 / 0.85); color: #d9dadc; border: 1px solid rgb(255 255 255 / 0.18); }
@keyframes ouv-badge { from { transform: scale(0); } }

/* ---------- récapitulatif : cartes distribuées face cachée, puis retournées ---------- */
.ouv-recap {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto;
  display: grid; align-content: safe center; justify-items: center; gap: 1.3rem;
  padding: 3.5rem 1rem 2rem;
  background: radial-gradient(ellipse 70% 50% at 50% 45%, color-mix(in oklab, var(--couleur) 18%, transparent), transparent 75%);
}
.ouv-recap h2 {
  margin: 0; font-family: var(--font-display); color: #e7e6e3;
  font-size: 1.1rem; letter-spacing: 0.3em; text-transform: uppercase; text-indent: 0.3em;
}
.ouv-recap-cartes {
  list-style: none; margin: 0; padding: 0.6rem 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 1000px;
}
.ouv-recap-cartes li {
  perspective: 1000px;
  animation: ouv-distribue 460ms cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i) * 90ms);
}
@keyframes ouv-distribue { from { opacity: 0; translate: 0 -60px; rotate: -8deg; scale: 0.8; } }
.ouv-recap-cartes .carte { width: 178px; } /* taille de référence des cartes : le texte y tient */
/* meilleure carte du pack : un peu plus grande, auréolée de sa couleur */
.ouv-recap-cartes li.ouv-meilleure { position: relative; z-index: 1; scale: 1.07; }
.ouv-recap-cartes li.ouv-meilleure .carte.retournee .carte-face {
  box-shadow: 0 0 0 2px var(--couleur), 0 0 36px color-mix(in oklab, var(--couleur) 55%, transparent), var(--shadow-md);
}
.ouv-recap-resume { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.ouv-recap-resume li {
  padding: 0.3rem 0.8rem; border-radius: 999px; font-size: var(--text-sm); color: #d9dadc;
  background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12);
}
.ouv-recap-resume .ouv-pastille-nouvelle { color: #7be0a8; border-color: rgb(47 191 113 / 0.45); }
.ouv-recap-resume .ouv-pastille-meilleure { border-color: color-mix(in oklab, var(--couleur) 60%, transparent); }
.ouv-recap-resume strong { color: var(--couleur); }
.ouv-recap-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
/* sur téléphone : 3 + 2 cartes, le contenu suit la largeur de la case (cqi, style.css) */
@media (max-width: 640px) {
  .ouv-recap-cartes {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem 0.5rem;
    width: 100%; max-width: 460px;
  }
  .ouv-recap-cartes li { grid-column: span 2; }
  .ouv-recap-cartes li:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; } /* 3 + 2 centrées */
  .ouv-recap-cartes .carte { width: 100%; }
  .ouv-recap-cartes li.ouv-meilleure { scale: 1.04; }
  .ouv-recap .ouv-badge { font-size: 0.55rem; padding: 0.08rem 0.35rem; white-space: nowrap; }
  .emplacement-plateau { width: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ouv-pack, .carte-overlay.ouv-anticipe, .ouv-rayons, .carte.ouv-holo .carte-face::after,
  .ouv-recap-cartes li, .ouv-badge, .ouverture-rarete.animee, .emplacement-plateau.pop { animation: none !important; }
  #carte-overlay { transition: none; }
}