/* =====================================================================
   Ouverture d'un booster (plein écran).
   ===================================================================== */
.opening {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse at 50% 45%, #1c2540 0%, #0a0e1a 55%, #05070d 100%);
  display: flex; flex-direction: column; animation: fade-in .3s ease;
}
/* halo rotatif derrière le paquet */
.opening::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: 140vmax; height: 140vmax; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(120,150,255,.07) 10%, transparent 12% 33%, rgba(120,150,255,.06) 35%, transparent 37% 58%, rgba(255,200,120,.05) 60%, transparent 62% 83%, rgba(120,150,255,.06) 85%, transparent 87%);
  animation: rays 40s linear infinite; pointer-events: none;
}
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.opening .particles { position: absolute; inset: 0; pointer-events: none; }
.opening .particles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); animation: float 9s linear infinite; }
@keyframes float { from { transform: translateY(20px); opacity: 0; } 15% { opacity: .8; } to { transform: translateY(-120px); opacity: 0; } }

.op-top { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; gap: 12px; }
.op-title { font-weight: 640; font-size: calc(14px * var(--fs)); color: rgba(255,255,255,.7); }
.op-title b { color: #fff; }
.op-top .btn, .op-actions .btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
.op-top .btn:hover, .op-actions .btn:hover { background: rgba(255,255,255,.16); }
.op-actions .btn.primary { background: #fff; color: #0b1020; border-color: #fff; }
.op-actions .btn.primary:hover { background: #e6ebf5; }

.op-stage { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; perspective: 1600px; min-height: 0; }
.op-hint { margin-top: 26px; color: rgba(255,255,255,.62); font-size: calc(13.5px * var(--fs)); text-align: center; min-height: 20px; letter-spacing: .01em; }
.op-actions { position: relative; z-index: 2; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 16px 28px; min-height: 76px; align-items: center; }
.op-actions .cost { color: rgba(255,255,255,.7); font-size: calc(12.5px * var(--fs)); }

/* ---------------------------------------------------------------- paquet (3D) */
/*
 * Sachet bombé (voir ui/pack.js) : deux faces courbes faites de bandes, soudées sur les côtés,
 * fermées en haut et en bas par une bande de scellage sertie. Les cartes sont rangées dedans.
 * Toutes les mesures en cqw (pourcentage de la largeur du paquet).
 */
.pack {
  color: #fff; /* le paquet garde ses couleurs quel que soit le thème */
  --pack-a: #2a3a63; --pack-b: #0e1424;
  position: relative; width: clamp(200px, 26vh, 270px); aspect-ratio: 5 / 7.4; cursor: pointer;
  container-type: inline-size; perspective: 1100px; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* texte du paquet non sélectionnable */
  animation: pack-float 3.2s ease-in-out infinite;
}
.pack.world { --pack-a: #33477a; --pack-b: #0e1424; }
.pack.continent { --pack-a: #4a70ff; --pack-b: #152478; }
.pack.country { --pack-a: #1fc58a; --pack-b: #08503b; }
.pack.region { --pack-a: #ff8a4a; --pack-b: #86270f; }
.pack-3d, .pk-body, .pk-curve, .pk-seal, .pk-cards { position: absolute; transform-style: preserve-3d; }
.pack-3d { inset: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); animation: pack-sway 7s ease-in-out infinite; }
.pack.tilting .pack-3d { animation: none; transition: transform .12s ease-out; }
.pk-body { left: 0; right: 0; top: 7%; bottom: 5%; }
.pk-curve { inset: 0; }
.pk-curve.back { transform: rotateY(180deg); }
/* ombre portée au sol (un filtre aplatirait la 3D) */
.pk-shadow { position: absolute; left: 8%; right: 8%; bottom: -10%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent);
  animation: shadow-float 3.2s ease-in-out infinite; }

/* une bande de la face bombée */
.pk-band { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1cqw); width: calc(100cqw / 14 + 1.2px); overflow: hidden; backface-visibility: hidden;
  transform: translateZ(calc(var(--z) * 1cqw)) rotateY(calc(var(--deg) * 1deg)) scaleX(var(--sx)); }
.pk-art { position: absolute; top: 0; bottom: 0; width: 100cqw;
  background: linear-gradient(165deg, color-mix(in srgb, var(--pack-a) 70%, #fff) 0%, var(--pack-a) 22%, var(--pack-b) 70%, color-mix(in srgb, var(--pack-b) 70%, #000) 100%); }
/* ombrage selon l'inclinaison de la bande + pincement vers les soudures haut et bas */
.pk-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), transparent 9%, transparent 90%, rgba(0,0,0,.5)),
    linear-gradient(rgba(255,255,255, calc(max(var(--light), 0) * .22)), rgba(255,255,255, calc(max(var(--light), 0) * .22))),
    linear-gradient(rgba(0,0,0, calc(max(var(--light) * -1, 0) * .6 + var(--light) * var(--light) * .35)), rgba(0,0,0, calc(max(var(--light) * -1, 0) * .6 + var(--light) * var(--light) * .35))); }
/* dessus et dessous du corps (fermés, visibles quand on regarde de biais) */
.pk-cap { position: absolute; left: 0; width: 100cqw; height: 18cqw; background: linear-gradient(90deg, var(--pack-b), color-mix(in srgb, var(--pack-a) 60%, #000), var(--pack-b));
  clip-path: polygon(0% 50%, 10% 32%, 20% 18%, 30% 8%, 40% 2%, 50% 0%, 60% 2%, 70% 8%, 80% 18%, 90% 32%, 100% 50%, 90% 68%, 80% 82%, 70% 92%, 60% 98%, 50% 100%, 40% 98%, 30% 92%, 20% 82%, 10% 68%); }
.pk-cap.top { top: -9cqw; transform: rotateX(90deg); }
.pk-cap.bottom { bottom: -9cqw; transform: rotateX(-90deg); }

/* bandes de scellage serties (plates, un peu plus larges que le corps) */
.pk-seal { left: -1.2cqw; right: -1.2cqw; }
.pk-seal.top { top: 0; height: 7.4%; transform-origin: 15% 100%; }
.pk-seal.bottom { bottom: 0; height: 5.4%; }
.pk-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pack-b) 80%, #000), color-mix(in srgb, var(--pack-a) 85%, #fff) 30%, var(--pack-a) 60%, color-mix(in srgb, var(--pack-b) 80%, #000)); }
.pk-seal .pk-front { transform: translateZ(.5cqw); }
.pk-seal .pk-back { transform: rotateY(180deg) translateZ(.5cqw); }
.pk-seal.top .pk-face { border-radius: 2cqw 2cqw 0 0; }
.pk-seal.bottom .pk-face { border-radius: 0 0 2cqw 2cqw; }
.pack .crimp { position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 .6cqw, rgba(0,0,0,.22) .6cqw 1.2cqw), linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.35)); }

/* film métallisé : plis verticaux, bande holographique, reflet qui suit l'inclinaison */
.pack .foil { position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light;
  background:
    radial-gradient(120% 60% at 20% 10%, rgba(255,255,255,.5), transparent 60%),
    repeating-linear-gradient(72deg, rgba(255,255,255,0) 0 9%, rgba(255,255,255,.25) 11%, rgba(255,255,255,0) 14% 23%),
    repeating-linear-gradient(-64deg, rgba(0,0,0,0) 0 12%, rgba(0,0,0,.2) 14%, rgba(0,0,0,0) 17% 27%); }
.pack .holo-band { position: absolute; left: -30%; right: -30%; top: 54%; height: 8%; transform: rotate(-14deg); opacity: .6; mix-blend-mode: screen;
  background: linear-gradient(90deg, #3df5b0, #3cc8ff, #8b6bff, #ff5fd2, #ffd36b, #3df5b0); background-size: 200% 100%; animation: holo-band 6s linear infinite; }
@keyframes holo-band { to { background-position: 200% 0; } }
.pack .sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.08) 44%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 56%, transparent 62%);
  background-size: 300% 100%; background-position: var(--shine, 50%) 0; animation: sheen 5s ease-in-out infinite; }
.pack.tilting .sheen { animation: none; transition: background-position .12s ease-out; }
@keyframes sheen { 0%, 100% { background-position: 85% 0; } 50% { background-position: 15% 0; } }
.pack .frame-line { position: absolute; inset: 5% 6% 6%; border-radius: 4cqw; border: 1px solid rgba(255,255,255,.25); }
/* contenu de la face avant */
.pack .mark { position: absolute; left: 50%; top: 30%; width: 46%; transform: translate(-50%, -50%); color: #fff; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.pack .name { position: absolute; left: 0; right: 0; bottom: 30%; z-index: 1; text-align: center; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  font-size: 8.4cqw; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.pack .plate { position: absolute; left: 13%; right: 13%; bottom: 17%; z-index: 1; padding: 1.8cqw 3cqw; border-radius: 999px; text-align: center;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.25); font-size: 5cqw; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack .brand-word { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 1; text-align: center; font-size: 3.6cqw; letter-spacing: .4em; opacity: .75; font-weight: 800; }
/* face arrière */
.pack .back-mark { position: absolute; left: 50%; top: 42%; width: 74%; transform: translate(-50%, -50%); opacity: .16; color: #fff; }
.pack .back-word { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-weight: 900; font-size: 11cqw; letter-spacing: .22em; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.pack .back-text { position: absolute; left: 10%; right: 10%; bottom: 14%; text-align: center; font-size: 4.2cqw; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* cartes rangées dans le paquet (visibles seulement quand elles en sortent) */
.pk-cards { left: 11%; right: 11%; top: 10%; bottom: 8%; }
.pk-cards .pk-card { position: absolute; inset: 0; border-radius: 6cqw; }
.pk-cards .pk-card:nth-child(1) { transform: translateZ(-1px) rotate(-2deg); }
.pk-cards .pk-card:nth-child(3) { transform: translateZ(1px) rotate(1.5deg); }
.pk-tear { position: absolute; left: -1cqw; top: 7%; height: 3px; width: 0; transform: translateZ(1cqw); border-radius: 3px;
  background: #fff; box-shadow: 0 0 10px 3px #fff, 0 0 26px 8px rgba(255,220,140,.8); opacity: 0; }
.pk-light { position: absolute; left: 6%; right: 6%; top: -70%; height: 80%; opacity: 0; pointer-events: none; transform: translateZ(0);
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,255,255,.95), rgba(255,230,160,.45) 40%, transparent 72%); filter: blur(6px); }

@keyframes pack-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shadow-float { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .7; } }
@keyframes pack-sway { 0%, 100% { transform: rotateX(5deg) rotateY(-28deg); } 50% { transform: rotateX(-4deg) rotateY(28deg); } }
:root[data-animations="off"] .pack, :root[data-animations="off"] .pack-3d, :root[data-animations="off"] .pk-shadow,
:root[data-animations="off"] .pack .holo-band, :root[data-animations="off"] .pack .sheen { animation: none; }

/* ouverture : le paquet se met de face et vibre, la bande se déchire (trait lumineux), elle s'envole,
   la lumière jaillit, les cartes sortent par le haut puis le sachet tombe */
.pack.charging, .pack.torn { animation: none; }
.pack.charging .pack-3d { animation: pack-charge .5s ease-in-out forwards; }
.pack.charging .pk-shadow { opacity: .5; }
.pack.charging .sheen { animation: sheen .5s ease-in-out infinite; }
.pack.torn .pack-3d { animation: none; transform: none; }
.pack.torn .pk-tear { animation: tear-line .32s ease-out forwards; }
.pack.torn .pk-seal.top { animation: strip-off .75s .26s cubic-bezier(.3,.6,.4,1) forwards; }
.pack.torn .pk-cap.top { background: radial-gradient(closest-side, #000, var(--pack-b)); }
.pack.torn .pk-light { animation: pack-light 1.2s .4s ease-out forwards; }
.pack.torn .pk-card { animation: card-rise .8s .5s cubic-bezier(.2,.8,.25,1) forwards; }
.pack.torn .pk-card:nth-child(2) { animation-delay: .58s; }
.pack.torn .pk-card:nth-child(3) { animation-delay: .66s; }
.pack.torn .pk-body, .pack.torn .pk-seal.bottom, .pack.torn .pk-shadow { animation: body-drop .6s 1.15s cubic-bezier(.5,0,.75,0) forwards; }
.pack.torn .pk-cards { animation: cards-away .45s 1.3s ease-in forwards; }
@keyframes pack-charge {
  0% { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  40% { transform: rotateX(0) rotateY(0) scale(1.04) rotate(-2.5deg); }
  70% { transform: scale(1.07) rotate(2.5deg); }
  100% { transform: scale(1.08); }
}
@keyframes tear-line { 0% { width: 0; opacity: 1; } 90% { width: 102%; opacity: 1; } 100% { width: 102%; opacity: 0; } }
@keyframes strip-off { to { transform: translate3d(70%, -220%, 60px) rotateZ(38deg) rotateX(70deg); opacity: 0; } }
@keyframes pack-light { 0% { opacity: 0; transform: scaleY(.3); transform-origin: bottom; } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1.4); transform-origin: bottom; } }
@keyframes card-rise { to { transform: translateY(-62%) rotate(0deg); } }
@keyframes body-drop { to { transform: translateY(85vh) rotate(6deg); opacity: 0; } }
@keyframes cards-away { to { transform: translateY(-40%) scale(1.25); opacity: 0; } }
.op-burst { position: absolute; left: 50%; top: 46%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 3;
  background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0) 70%); animation: burst .8s ease-out forwards; }
@keyframes burst { from { width: 10px; height: 10px; opacity: 1; } to { width: 160vmax; height: 160vmax; opacity: 0; } }

/* ---------------------------------------------------------------- mode côte à côte */
/*
 * Largeur d'une carte = la plus petite de trois limites, pour que les 5 cartes tiennent toujours
 * sur une ligne sans toucher la barre du haut ni les boutons :
 *  - largeur : (écran − marges − 4 espaces) / 5 ;
 *  - hauteur : (écran − barre − boutons − texte) / 1,44 (proportions d'une carte) ;
 *  - 280 px au maximum.
 */
.opening { --gap: clamp(10px, 1.4vw, 20px); --card-w: min(calc((100vw - 48px - 4 * var(--gap)) / 5), calc((100dvh - 250px) / 1.44), 280px); }
.op-spread { display: flex; gap: var(--gap); justify-content: center; align-items: center; flex-wrap: nowrap; width: 100%; }
.op-slot { position: relative; flex: none; width: var(--card-w); }
.op-slot .op-back { animation: deal .6s cubic-bezier(.2,.8,.2,1) backwards; transition: transform .2s; cursor: pointer; }
.op-slot:not(.revealed):hover .op-back { transform: translateY(-8px); }
.op-slot .op-front { display: none; }
.op-slot.flipping .op-back { animation: flip-out .2s ease-in forwards; }
.op-slot.revealed .op-back { display: none; }
.op-slot.revealed .op-front { display: block; animation: flip-in .38s cubic-bezier(.2,.8,.3,1.2); }
.op-slot .glow { position: absolute; inset: -16px; border-radius: 24px; filter: blur(22px); opacity: 0; transition: opacity .4s; pointer-events: none; }
.op-slot.hint .glow { opacity: .7; animation: glow-pulse 1.6s ease-in-out infinite; }
.op-slot.revealed .glow { opacity: .4; animation: none; }
@keyframes glow-pulse { 50% { opacity: .3; } }
@keyframes deal { from { opacity: 0; transform: translateY(80px) scale(.8) rotate(-4deg); } }
@keyframes flip-out { to { transform: rotateY(90deg) scale(1.04); } }
@keyframes flip-in { from { transform: rotateY(-90deg) scale(1.05); } }
/* téléphone : 3 cartes puis 2, toujours dans la hauteur de l'écran */
@media (max-width: 760px) {
  .opening { --gap: 8px; --card-w: min(calc((100vw - 32px - 2 * var(--gap)) / 3), calc((100dvh - 260px) / 2.95), 200px); }
  .op-spread, .op-summary { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- mode une par une (pile) */
.op-stack { position: relative; width: clamp(240px, min(82vw, 52vh), 380px); aspect-ratio: 5 / 7.2; touch-action: none; }
.op-stack .stack-card { position: absolute; inset: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; will-change: transform; animation: deal .6s cubic-bezier(.2,.8,.2,1) backwards; }
.op-stack .stack-card.dragging { transition: none; }
.op-stack .stack-card.gone { pointer-events: none; opacity: 0; }
.op-progress { display: flex; gap: 6px; justify-content: center; margin-top: 46px; }
.op-progress i { width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
.op-progress i.on { background: #fff; }

/* récapitulatif après la pile */
.op-summary { display: flex; gap: var(--gap); justify-content: center; flex-wrap: nowrap; animation: fade-in .4s ease; }
.op-summary .op-mini { flex: none; width: var(--card-w); animation: deal .5s cubic-bezier(.2,.8,.2,1) backwards; }

.op-flash { position: fixed; inset: 0; pointer-events: none; z-index: 101; animation: flash .9s ease-out forwards; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
:root[data-animations="off"] .opening::before, :root[data-animations="off"] .opening .particles, :root[data-animations="off"] .op-flash, :root[data-animations="off"] .op-burst, :root[data-animations="off"] .op-slot .glow { display: none; }

/* téléphone : récapitulatif sur deux lignes (règle placée après .op-summary pour la remplacer) */
@media (max-width: 760px) {
  .op-summary, .op-spread { flex-wrap: wrap; }
  .op-top { padding: 12px 14px; }
  .op-title { font-size: calc(12.5px * var(--fs)); }
}