/* Starowner POC : styles des cartes, paliers et révélation. Le reste est en Tailwind. */

:root { color-scheme: dark; -webkit-tap-highlight-color: transparent; }
html, body { max-width: 100%; overflow-x: hidden; }
details > summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }  /* l'attribut hidden l'emporte sur les classes d'affichage Tailwind (block, flex…) */

/* ------------------------------------------------------------------ paliers */
.palier-commune     { --tier: #a1a1aa; --tier-rgb: 161, 161, 170; }
.palier-peu_commune { --tier: #34d399; --tier-rgb: 52, 211, 153; }
.palier-rare        { --tier: #38bdf8; --tier-rgb: 56, 189, 248; }
.palier-epique      { --tier: #a855f7; --tier-rgb: 168, 85, 247; }
.palier-legendaire  { --tier: #fbbf24; --tier-rgb: 251, 191, 36; }
.text-tier { color: var(--tier, #a1a1aa); }

.etoiles { letter-spacing: .02em; white-space: nowrap; }
.etoiles .on  { color: var(--tier, #fbbf24); text-shadow: 0 0 6px rgba(var(--tier-rgb, 251, 191, 36), .6); }
.etoiles .off { color: rgba(255, 255, 255, .18); }

/* ------------------------------------------------------------------ carte */
.carte {
  container-type: inline-size;
  border: 2px solid var(--tier);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 10px 30px -12px rgba(var(--tier-rgb), .55);
  font-size: 12px;
}
.carte-sans-image {
  background:
    radial-gradient(circle at 50% 25%, rgba(var(--tier-rgb), .35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px),
    #18181b;
  font-size: 12px;
}
/* Tailles relatives à la largeur de la carte : lisible de 110 px (grille dense) à 340 px. */
.carte .titre          { font-size: 12px; font-size: clamp(10px, 7.6cqw, 26px); }
.carte .sous-titre     { font-size: 10px; font-size: clamp(9px, 5.4cqw, 15px); }
.carte .meta           { font-size: 10px; font-size: clamp(9px, 5.6cqw, 16px); }
.carte .etoiles        { font-size: 11px; font-size: clamp(9px, 6.4cqw, 20px); }
.carte .libelle-palier { font-size: 9px;  font-size: clamp(8px, 4.4cqw, 13px); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.carte .badge, .carte .badge-n { font-size: 9px; font-size: clamp(8px, 4.2cqw, 12px); }
.carte-mini .titre { font-size: clamp(9px, 9cqw, 14px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte-mini .libelle-palier { display: none; }
.carte-mini .badge { display: none; }
.carte-md .titre, .carte-md .sous-titre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.badge {
  border-radius: 999px; padding: .15em .6em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: rgba(0, 0, 0, .6); color: #e4e4e7; backdrop-filter: blur(4px);
}
.badge-actu { background: #e11d48; color: white; }
.badge-nouvelle { background: #10b981; color: #022c22; }
.badge-cadeau { background: #f472b6; color: #500724; }
/* Carte cadeau de parrainage, sixième carte de la révélation : dos et cadre dorés */
.flip-cadeau .dos { border-color: #fbbf24; box-shadow: 0 0 40px 6px rgba(251, 191, 36, .45); }
.flip-cadeau .carte { outline: 3px solid #fbbf24; outline-offset: -3px; box-shadow: 0 0 34px 6px rgba(251, 191, 36, .5); }
.point-cadeau { outline: 2px solid #fbbf24; outline-offset: 1px; }
.badge-n { border-radius: 999px; padding: .15em .55em; font-weight: 900; background: var(--tier); color: #09090b; }

.grise { filter: grayscale(1) brightness(.55); }
.grise:hover { filter: grayscale(.4) brightness(.8); }

/* Reflet holographique des épiques et légendaires */
.holo {
  background: linear-gradient(115deg, transparent 30%, rgba(var(--tier-rgb), .28) 45%, rgba(255,255,255,.35) 50%, rgba(var(--tier-rgb), .28) 55%, transparent 70%);
  background-size: 250% 250%;
  mix-blend-mode: color-dodge;
  animation: holo 4.5s ease-in-out infinite;
}
@keyframes holo { 0%, 100% { background-position: 100% 100%; } 50% { background-position: 0% 0%; } }

/* ------------------------------------------------------------------ dos de carte */
.dos {
  border: 2px solid rgba(251, 191, 36, .55);
  background:
    radial-gradient(circle at 50% 45%, rgba(251, 191, 36, .25), transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.035) 0 8deg, transparent 8deg 16deg),
    linear-gradient(160deg, #1c1917, #0c0a09);
}
.dos-etoile { font-size: 72px; line-height: 1; color: #fcd34d; text-shadow: 0 0 24px rgba(251, 191, 36, .8); }

/* ------------------------------------------------------------------ chips de filtre */
.chip {
  display: inline-flex; align-items: center; gap: .3em; border-radius: 999px; padding: .35rem .75rem;
  font-size: 12px; border: 1px solid rgba(255,255,255,.1); background: #18181b; color: #d4d4d8;
}
.chip-on { border-color: var(--tier, #fbbf24); background: rgba(var(--tier-rgb, 251, 191, 36), .15); color: white; }

/* ------------------------------------------------------------------ paquet (page booster) */
.paquet {
  position: relative; width: min(62vw, 230px); aspect-ratio: 2 / 3; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid rgba(251, 191, 36, .7);
  background:
    radial-gradient(circle at 50% 40%, rgba(251, 191, 36, .35), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #78350f, #1c1917 60%, #0c0a09);
  box-shadow: 0 25px 60px -20px rgba(251, 191, 36, .6);
  animation: flotte 3.2s ease-in-out infinite;
  transition: transform .2s;
}
.paquet:active { transform: scale(.97); }
.paquet-bande { position: absolute; left: 0; right: 0; top: 12%; height: 6px; background: repeating-linear-gradient(90deg, #fcd34d 0 8px, transparent 8px 14px); opacity: .7; }
.paquet-etoile { font-size: 80px; line-height: 1; color: #fde68a; text-shadow: 0 0 30px rgba(251, 191, 36, .9); }
.paquet-nom { margin-top: 12px; font-weight: 900; letter-spacing: .35em; font-size: 13px; color: #fef3c7; }
.paquet-sous { margin-top: 4px; font-size: 11px; color: rgba(254, 243, 199, .6); }
.paquet-vide { filter: grayscale(1) brightness(.5); animation: none; cursor: not-allowed; }
.paquet.dechire { animation: dechire .7s ease-in forwards; }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes dechire {
  0% { transform: scale(1); }
  20% { transform: scale(1.04) rotate(-3deg); }
  40% { transform: scale(1.04) rotate(3deg); }
  60% { transform: scale(1.08) rotate(-2deg); filter: brightness(1.4); }
  100% { transform: scale(1.6); opacity: 0; filter: brightness(3); }
}

/* ------------------------------------------------------------------ flip 3D */
.flip { perspective: 1400px; }
.flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);  /* retournement net : moins de 500 ms */
}
.flip.retournee .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-recto { transform: rotateY(180deg); }

/* Face « résumé » de la révélation : une carte déjà révélée se retourne une seconde fois (classe .resume) */
.retourne-resume { position: absolute; inset: 0; perspective: 1400px; }
.retourne-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.flip.resume .retourne-inner { transform: rotateY(180deg); }
.retourne-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.retourne-verso { transform: rotateY(180deg); }

.flip-detail { aspect-ratio: 2 / 3; width: 100%; cursor: pointer; outline: none; }
.verso { overflow-y: auto; }

/* ------------------------------------------------------------------ révélation en pile */
/* Les cartes pas encore révélées forment une pile face cachée à droite de la carte courante, dont on voit
   les bords. --k : rang dans la pile (0 = la prochaine). La carte courante glisse au premier plan à gauche ;
   une carte passée s'envole vers la rangée « révélées » en bas. */
.table-pile { --w: min(64vw, 250px); position: relative; width: calc(var(--w) + 84px); height: calc(var(--w) * 1.5); outline: none; z-index: 26; }
.table-pile .emplacement { position: absolute; left: 0; top: 0; width: var(--w); height: 100%; border: 2px dashed rgba(255, 255, 255, .12); border-radius: 18px; }
.table-pile .flip {
  position: absolute; left: 0; top: 0; width: var(--w); height: 100%; cursor: pointer;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .35s;
}
.table-pile .flip.enpile { transform: translateX(calc((var(--k) + 1) * 12px)) scale(calc(1 - var(--k) * .015)); z-index: calc(10 - var(--k)); }
.table-pile .flip.courante { transform: none; z-index: 20; cursor: pointer; }
.table-pile .flip.partie { transform: translateY(78%) scale(.2); opacity: 0; pointer-events: none; z-index: 5; }

.mini-revelee { width: 52px; aspect-ratio: 2 / 3; flex: none; }
.mini-revelee:not([hidden]) { animation: mini-entree .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes mini-entree { from { transform: translateY(-30px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Suspense de la dernière carte (JS : app.js, module révélation). La couleur du palier n'apparaît
   qu'au retournement : avant, tremblement croissant, lueur blanche qui grossit, particules, écran assombri. */
.lueur-centre {
  position: absolute; left: calc(var(--w) / 2); top: 50%; width: calc(var(--w) * 1.1); aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; scale: .05; opacity: 0; pointer-events: none; z-index: 22; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4) 38%, transparent 70%);
}
.lueur-centre.actif { scale: 2.6; opacity: 1; transition: scale var(--duree, 1.8s) cubic-bezier(.5, 0, .9, .6), opacity var(--duree, 1.8s) ease-in; }
.assombri {
  position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, .9) 78%);
}
.assombri.actif { opacity: 1; }
.flip.suspense .dos { box-shadow: 0 0 36px 6px rgba(255, 255, 255, .4); }
.particule {
  position: absolute; left: calc(var(--w) * var(--x, .5)); top: 88%; width: var(--t, 4px); height: var(--t, 4px); border-radius: 50%;
  background: var(--c, rgba(255, 255, 255, .9)); box-shadow: 0 0 8px 1px var(--c, rgba(255, 255, 255, .9));
  pointer-events: none; z-index: 23; opacity: 0; animation: particule-monte var(--d, 1.2s) ease-out forwards;
}
@keyframes particule-monte {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, -220px)) scale(1.1); opacity: 0; }
}
.particule.burst { top: 50%; animation-name: particule-burst; }
@keyframes particule-burst {
  0% { transform: translate(0, 0) scale(.5); opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, -120px)) scale(1.2); opacity: 0; }
}
.flash { position: fixed; inset: 0; z-index: 27; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, var(--flash, rgba(255, 255, 255, .9)), transparent 75%); }
.flash.actif { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Éclat au retournement : l'effet s'intensifie avec le palier */
.flip.eclat-peu_commune .carte { animation: eclat-vert .7s ease-out; }
.flip.eclat-legendaire .carte { animation: eclat-or 1.6s ease-out; }
.flip.eclat-epique .carte     { animation: eclat-violet 1.4s ease-out; }
.flip.eclat-rare .carte       { animation: eclat-bleu 1.1s ease-out; }
@keyframes eclat-vert   { 0% { box-shadow: 0 0 30px 8px rgba(52, 211, 153, .5); } 100% { box-shadow: 0 10px 30px -12px rgba(52, 211, 153, .55); } }
@keyframes eclat-or     { 0% { box-shadow: 0 0 120px 50px rgba(251, 191, 36, .95); } 100% { box-shadow: 0 0 30px 4px rgba(251, 191, 36, .45); } }
@keyframes eclat-violet { 0% { box-shadow: 0 0 100px 40px rgba(168, 85, 247, .9); }  100% { box-shadow: 0 0 26px 4px rgba(168, 85, 247, .4); } }
@keyframes eclat-bleu   { 0% { box-shadow: 0 0 60px 20px rgba(56, 189, 248, .7); }   100% { box-shadow: 0 10px 30px -12px rgba(56, 189, 248, .55); } }
.flip.retournee.eclat-legendaire .carte { box-shadow: 0 0 30px 4px rgba(251, 191, 36, .45); }
.flip.retournee.eclat-epique .carte     { box-shadow: 0 0 26px 4px rgba(168, 85, 247, .4); }

/* « Montre-la ! » : apparaît 400 ms après le retournement, avec un léger rebond */
.montre { opacity: 0; }
.montre.visible { animation: montre-rebond .55s cubic-bezier(.3, 1.7, .5, 1) .4s both; }
@keyframes montre-rebond { from { transform: translateY(18px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* Ouverture groupée : cartes qui se retournent d'elles-mêmes */
.groupe-carte { aspect-ratio: 2 / 3; }
.groupe-carte .dos-etoile { font-size: 40px; }
.groupe-carte .dos > span:last-child { font-size: 8px; letter-spacing: .18em; margin-top: 6px; }
.groupe-carte.suspense .flip-inner { animation: tremble-court .12s linear infinite; }
@keyframes tremble-court { 0%, 100% { translate: 0 0; } 25% { translate: -2px 1px; } 75% { translate: 2px -1px; } }

/* ------------------------------------------------------------------ gain de booster en plein écran */
.superposition[hidden] { display: none; }
.superposition-paquet {
  display: flex; align-items: center; justify-content: center; width: 120px; aspect-ratio: 2 / 3; border-radius: 14px;
  border: 2px solid rgba(251, 191, 36, .8);
  background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, .4), transparent 60%), linear-gradient(160deg, #78350f, #1c1917 65%, #0c0a09);
  box-shadow: 0 0 60px 10px rgba(251, 191, 36, .45);
  animation: paquet-tombe .75s cubic-bezier(.2, .9, .3, 1.25) both, paquet-grossit 1.6s ease-in-out .75s infinite alternate;
}
.superposition-paquet .paquet-etoile { font-size: 56px; }
.superposition [data-superposition-titre], .superposition [data-superposition-raison] { animation: apparait .5s ease-out .35s both; }
@keyframes paquet-tombe { from { transform: translateY(-70vh) rotate(-14deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes paquet-grossit { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes apparait { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
.compteur-pulse { animation: compteur-pulse .7s ease-out; }
@keyframes compteur-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.35); filter: brightness(1.4); } 100% { transform: scale(1); } }

/* ------------------------------------------------------------------ compteur de boosters (en-tête) */
/* Pastille accent, chiffre lisible à 375 px ; à zéro, pastille neutre avec le temps restant. */
.compteur-boosters { min-height: 32px; font-size: 15px; line-height: 1; letter-spacing: .01em; }
.compteur-boosters .compteur-valeur { font-size: 18px; font-variant-numeric: tabular-nums; }
.compteur-boosters .compteur-attente { font-size: 13px; font-weight: 700; opacity: .85; }

/* Pastille « boosters à ouvrir » sur l'entrée Booster du menu : en ligne après le libellé en haut, sur l'icône en bas */
.nav-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #fbbf24; color: #09090b; font-size: 11px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 8px rgba(251, 191, 36, .55);
}
.nav-pastille[hidden] { display: none; }
.nav-pastille-icone { position: absolute; top: 4px; left: calc(50% + 6px); }

/* ------------------------------------------------------------------ paquets (un par booster en réserve) */
.paquets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; justify-items: center; }
@media (min-width: 640px) { .paquets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.paquet-case { display: flex; width: 100%; justify-content: center; transition: opacity .3s, filter .3s; }
.paquet.paquet-petit {
  width: 100%; max-width: 140px; border-radius: 14px; rotate: var(--angle, 0deg);
  filter: hue-rotate(var(--teinte, 0deg)); animation-delay: var(--delai, 0s);
  box-shadow: 0 14px 30px -14px rgba(251, 191, 36, .7);
}
.paquet-petit .paquet-etoile { font-size: 42px; }
.paquet-petit .paquet-nom { margin-top: 8px; font-size: 8px; letter-spacing: .25em; }
.paquet-petit .paquet-sous { font-size: 9px; }
.paquet-numero { position: absolute; right: 8px; bottom: 6px; font-size: 10px; font-weight: 900; color: rgba(254, 243, 199, .55); }
.paquet-plus {
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 140px; aspect-ratio: 2 / 3;
  border: 2px dashed rgba(251, 191, 36, .45); border-radius: 14px; font-size: 28px; font-weight: 900; color: #fcd34d;
}
.paquet.choisi { animation: none; translate: 0 -18px; scale: 1.08; transition: translate .25s ease-out, scale .25s ease-out; z-index: 5; }
.paquet.choisi.dechire { animation: dechire .6s ease-in forwards; }
.paquet-ecarte { opacity: .35; filter: grayscale(.6); pointer-events: none; }
.paquet-emplacement {
  display: flex; align-items: center; justify-content: center; width: 140px; aspect-ratio: 2 / 3; border-radius: 14px;
  border: 2px dashed rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .12); font-size: 42px;
}

/* ------------------------------------------------------------------ aura de suspense (app.js, table SUSPENSE) */
/* Autour de la carte face cachée : couleur (--aura-rgb), taille (--aura-taille) et force (--aura-force) suivent le
   palier atteint ; .pulse à chaque palier ; .faux : la couleur commence à virer vers le palier supérieur (--aura-cible). */
.flip > .aura {
  position: absolute; inset: -7%; z-index: 0; border-radius: 26px; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(var(--aura-rgb, 156, 163, 175), calc(.55 * var(--aura-force, 1))) 30%, transparent 72%);
  box-shadow: 0 0 calc(46px * var(--aura-taille, 1)) calc(10px * var(--aura-taille, 1)) rgba(var(--aura-rgb, 156, 163, 175), calc(.7 * var(--aura-force, 1)));
  scale: var(--aura-taille, 1);
  transition: opacity .2s, scale .25s ease-out, background .25s, box-shadow .25s;
}
.flip > .aura::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .2s;
  box-shadow: 0 0 60px 16px rgba(var(--aura-cible, 255, 255, 255), .9);
}
.flip > .aura.faux::after { opacity: var(--faux, .4); }
.flip > .flip-inner { z-index: 1; }
.flip > .aura.actif { opacity: 1; }
.flip > .aura.pulse { animation: aura-pulse .35s ease-out; }
@keyframes aura-pulse { 0% { scale: var(--aura-taille, 1); } 40% { scale: calc(var(--aura-taille, 1) * 1.1); filter: brightness(1.5); } 100% { scale: var(--aura-taille, 1); } }
.groupe-carte { position: relative; }
/* L'aura est un indice, pas un verdict (étapes de la timeline, app.js) :
   .tenue    dépassement installé sur le palier du dessus, éclat renforcé ;
   .fissure  secousse brève, l'aura se rétracte et la teinte redescend en 250 ms vers le vrai palier ;
   .respire  hésitation sur un palier intermédiaire ;
   .battement clignotement net entre deux couleurs (sans transition), puis figé. */
.flip > .aura.tenue { filter: brightness(1.25) saturate(1.2); }
.flip > .aura.fissure {
  animation: aura-fissure .25s linear;
  transition: opacity .2s, scale .25s ease-in, background .25s, box-shadow .25s ease-in, filter .25s;
  filter: brightness(.75) saturate(.7);
}
@keyframes aura-fissure {
  0% { translate: 0 0; } 15% { translate: -7px 2px; } 30% { translate: 6px -3px; } 45% { translate: -4px 2px; }
  60% { translate: 3px -1px; } 80% { translate: -1px 0; } 100% { translate: 0 0; }
}
.flip > .aura.respire { animation: aura-respire .6s ease-in-out infinite alternate; }
@keyframes aura-respire { from { scale: var(--aura-taille, 1); opacity: 1; } to { scale: calc(var(--aura-taille, 1) * .94); opacity: .7; } }
.flip > .aura.battement { transition: opacity .2s; }

/* Surprise : la carte bondit d'un cran au retournement, second éclair et « +1 » bref */
.flip.bond .flip-inner { animation: carte-bond .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes carte-bond { 0% { scale: 1; } 35% { scale: 1.14; } 100% { scale: 1; } }
.bond-flash {
  position: absolute; inset: -40%; z-index: 24; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, var(--c, rgba(255, 255, 255, .95)) 0%, transparent 62%);
  opacity: 0; animation: bond-flash .7s ease-out;
}
@keyframes bond-flash { 0% { opacity: 1; scale: .6; } 100% { opacity: 0; scale: 1.3; } }
.bond-plus {
  position: absolute; left: 50%; top: 4%; z-index: 26; translate: -50% 0; pointer-events: none;
  font-size: 40px; font-weight: 900; line-height: 1; color: #fff;
  text-shadow: 0 0 10px var(--c, #fff), 0 0 26px var(--c, #fff);
  opacity: 0; animation: bond-plus 1s ease-out;
}
@keyframes bond-plus { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: scale(1.15); } 70% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-26px); } }

/* Ondes de choc au retournement (rare et mieux) */
.onde {
  position: absolute; left: 50%; top: 50%; width: 50%; aspect-ratio: 1; border-radius: 50%; z-index: 24; pointer-events: none;
  border: 3px solid var(--c, rgba(255, 255, 255, .8)); translate: -50% -50%; opacity: 0;
  animation: onde 1s ease-out forwards;
}
@keyframes onde { 0% { scale: .3; opacity: 1; } 100% { scale: 3.2; opacity: 0; } }
.flash.long.actif { animation-duration: 1.5s; }

/* Pile vide : le même emplacement à droite devient le bouton « suivant » */
.suivant-zone {
  position: absolute; top: 0; left: calc(var(--w) + 10px); width: 74px; height: 100%; z-index: 21;
  display: flex; flex-direction: column; gap: 6px;
}
.suivant-bouton {
  display: flex; flex: 1; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 16px; background: #fbbf24; color: #09090b; font-size: 12px; font-weight: 900; line-height: 1.15; text-align: center;
  padding: 8px 4px; box-shadow: 0 0 30px -4px rgba(251, 191, 36, .7); animation: suivant-entree .4s cubic-bezier(.3, 1.5, .5, 1) both;
}
.suivant-bouton small { font-size: 10px; font-weight: 700; opacity: .7; }
.suivant-evolutions { position: relative; gap: 4px; font-size: 11px; line-height: 1.15; hyphens: auto; overflow-wrap: anywhere; }
.evolutions-pastille { position: absolute; top: -6px; right: -6px; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #f43f5e;
  color: #fff; font-size: 12px; font-weight: 900; line-height: 1.5; text-align: center; box-shadow: 0 0 0 2px #09090b; }
.suivant-fin { background: rgba(255, 255, 255, .12); color: #f4f4f5; box-shadow: none; }
.suivant-attente { font-size: 10px; line-height: 1.2; text-align: center; color: #a1a1aa; }
@keyframes suivant-entree { from { translate: -20px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .superposition-paquet, .superposition [data-superposition-titre], .superposition [data-superposition-raison], .compteur-pulse { animation: none !important; }
  .paquet, .holo, .particule, .onde, .groupe-carte.suspense .flip-inner, .flip > .aura.pulse, .suivant-bouton { animation: none !important; }
  .flip > .aura.fissure, .flip > .aura.respire, .flip.bond .flip-inner { animation: none !important; }
  .bond-flash { animation: none !important; opacity: .5; }
  .bond-plus { animation: none !important; opacity: 1; }
  .flip-inner, .retourne-inner, .table-pile .flip, .lueur-centre.actif { transition-duration: .2s !important; }
}

/* ------------------------------------------------------------------ vitrine composable */
/* En fond de toute la page : la mosaïque floutée de l'album (densité réelle), sous un voile sombre. */
.vitrine-fond { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #050505; }
.mosaique {
  position: absolute; inset: -24px;
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); gap: 6px;
  filter: blur(10px) brightness(.62) saturate(1.25);
  transform: scale(1.04);
}
.mosaique-tuile {
  position: relative; overflow: hidden; border-radius: 8px;
  background: radial-gradient(circle at 50% 30%, rgba(var(--tier-rgb), .55), rgba(var(--tier-rgb), .12));
  box-shadow: 0 0 0 1px rgba(var(--tier-rgb), .35);
}
.mosaique-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scene-voile {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 18%, rgba(5, 5, 5, .35), rgba(5, 5, 5, .62) 70%),
              linear-gradient(to bottom, rgba(9, 9, 11, .15), rgba(9, 9, 11, .78) 55%, rgba(9, 9, 11, .9));
}
.cadre-sobre  { --lumiere: 228, 228, 231; --cadre: rgba(228, 228, 231, .35); }
.cadre-bleu   { --lumiere: 56, 189, 248;  --cadre: #38bdf8; }
.cadre-violet { --lumiere: 168, 85, 247;  --cadre: #a855f7; }
.cadre-or     { --lumiere: 251, 191, 36;  --cadre: #fbbf24; }

/* En tête : les signaux de statut, révélés par une lumière à l'arrivée (1,2 s). */
.vitrine-tete {
  position: relative; isolation: isolate; max-width: 1280px; margin: 0 auto; padding: 32px 16px 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.scene-lumiere {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 35%, rgba(var(--lumiere), .26), rgba(var(--lumiere), .06) 55%, transparent 75%);
  animation: lumiere 1.2s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes lumiere { from { opacity: 0; transform: scale(.35); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.scene-pseudo {
  font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #fafafa;
  font-size: clamp(34px, 10vw, 76px); max-width: 100%; overflow-wrap: anywhere;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .8), 0 0 40px rgba(var(--lumiere), .25);
  animation: monte .7s .15s ease-out both;
}
/* Bandeau au choix (bandeau.py) : jusqu'à six cases au même format. 3 par ligne sous 640 px (375 px : deux lignes),
   toutes sur une ligne au-delà ; moins de cases restent centrées. */
.bandeau-rang {
  margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 14px;
  width: 100%; max-width: 760px; animation: monte .7s .3s ease-out both;
}
.bandeau-rang li { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 0 0 33.333%; padding: 0 4px; text-align: center; }
.bandeau-chiffre { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: clamp(20px, 6vw, 32px); line-height: 1.1; white-space: nowrap; }
@media (min-width: 640px) {
  .bandeau-rang li { flex: 1 1 0; }
  .bandeau-chiffre { font-size: clamp(20px, 3.2vw, 28px); }
}
.bandeau-icone { font-size: .7em; }
.bandeau-unite { font-size: .5em; font-weight: 700; color: #a1a1aa; }
.bandeau-libelle { margin-top: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #a1a1aa; line-height: 1.2; max-width: 7.5rem; }
.bandeau-rang-nom { display: block; margin-top: 1px; font-size: 11px; letter-spacing: .06em; }
.bandeau-amis { margin-top: 2px; font-size: 10px; color: #6ee7b7; line-height: 1.2; white-space: nowrap; }
@keyframes monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.medailles { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; animation: monte .7s .6s ease-out both; }
.medaille {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fef3c7;
  background: linear-gradient(135deg, rgba(251, 191, 36, .22), rgba(120, 53, 15, .35));
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .45);
}
.medaille-icone { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #fde68a, #b45309); color: #451a03; font-size: 12px; }

/* Chaque section : un plateau sombre, une lumière qui s'allume quand la section entre à l'écran. */
.vitrine-section {
  position: relative; isolation: isolate; margin-top: 28px; padding: 28px 12px 32px; border-radius: 28px;
  background: radial-gradient(ellipse at 50% 0%, rgba(24, 24, 27, .82), rgba(5, 5, 5, .88) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.section-lumiere {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .9;
  background: radial-gradient(ellipse 55% 60% at 50% 40%, rgba(var(--lumiere), .2), transparent 70%);
}
.cascade-pret.vitrine-section:not(.vu) .section-lumiere { opacity: 0; }
.vitrine-section.vu .section-lumiere { animation: lumiere 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.section-titre { margin-bottom: 18px; text-align: center; font-weight: 900; font-size: clamp(20px, 5vw, 30px); letter-spacing: -.02em; color: #fafafa; }
.section-sous-titre { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #a1a1aa; }
.section-grand-carte { width: min(76vw, 360px); }
.cadre-vitrine { padding: 7px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.4)); box-shadow: 0 0 0 1px var(--cadre), 0 30px 80px -20px rgba(var(--lumiere), .55); }
.cadre-or .cadre-vitrine { background: linear-gradient(145deg, #fde68a, #b45309 45%, #fcd34d 70%, #92400e); box-shadow: 0 0 0 1px #fde68a, 0 0 60px -6px rgba(251, 191, 36, .7), 0 30px 80px -20px rgba(251, 191, 36, .6); }
.cadre-violet .cadre-vitrine { background: linear-gradient(145deg, #e9d5ff, #6b21a8 50%, #c084fc); box-shadow: 0 0 0 1px #d8b4fe, 0 0 50px -8px rgba(168, 85, 247, .7); }
.cadre-bleu .cadre-vitrine { background: linear-gradient(145deg, #bae6fd, #0369a1 50%, #7dd3fc); box-shadow: 0 0 0 1px #7dd3fc, 0 0 44px -10px rgba(56, 189, 248, .6); }

/* Cascade : les cartes d'une section entrent une à une quand la section arrive (app.js ajoute .cascade-pret puis .vu). */
.cascade-pret:not(.vu) .cascade-item { opacity: 0; transform: translateY(32px) scale(.95); }
.cascade-item { transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 120ms); }

/* Vignettes d'une collection : mur (grille serrée) ou rangée (défilement horizontal interne). */
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.vignettes-rangee { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.vignettes-rangee .vignette { flex: 0 0 72px; scroll-snap-align: start; }
.vignette { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; display: grid; place-items: center; background: #18181b; box-shadow: 0 0 0 1px var(--tier, #3f3f46); }
.vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vignette-ombre { background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 4px, transparent 4px 8px), #0c0c0e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

@media (prefers-reduced-motion: reduce) {
  .scene-lumiere, .scene-pseudo, .bandeau-rang, .scene-chiffres, .medailles, .vitrine-section.vu .section-lumiere { animation: none; }
  .cascade-item { transition: none; }
}

/* Indicateurs naissance / décès au recto : discrets. Texte petit et gris ; celui qui est allumé (la carte vue, ou
   l'autre carte possédée) reçoit seulement un soulignement fin de la couleur du palier. Ni fond, ni pastille, ni gras. */
.carte .jalon { font-size: 9px; font-size: clamp(8px, 4.4cqw, 12px); font-weight: 400; color: #a1a1aa; white-space: nowrap; }
.carte .jalon-on { text-decoration: underline; text-decoration-color: var(--tier, #fbbf24); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ rang de collection : écusson (rangs.py)
   Un bouclier en CSS à la couleur du rang (--rang, --rang-lueur) : corps dégradé, cœur sombre, joyau en losange.
   Maître, Grand Maître et Challenger rayonnent ; Challenger scintille. Aucune image externe. */
.ecusson { position: relative; display: inline-block; flex: none; width: var(--e, 18px); aspect-ratio: 5 / 6; vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.ecusson-sm { --e: 18px; }
.ecusson-md { --e: 26px; }
.ecusson-lg { --e: 64px; }
.ecusson-xl { --e: 120px; }
.ecusson-corps, .ecusson-corps::after { position: absolute; clip-path: polygon(50% 0, 100% 14%, 100% 56%, 50% 100%, 0 56%, 0 14%); }
.ecusson-corps { inset: 0; background: linear-gradient(160deg, var(--rang-lueur, #e4e4e7) 0%, var(--rang, #71717a) 42%, color-mix(in srgb, var(--rang, #71717a) 45%, #000) 100%); }
.ecusson-corps::after { content: ""; inset: 13%; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rang, #71717a) 35%, #18181b), #09090b 75%); }
.ecusson-joyau { position: absolute; left: 50%; top: 45%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--rang-lueur, #e4e4e7), var(--rang, #71717a)); box-shadow: 0 0 6px var(--rang, #71717a); }
.rang-maitre, .rang-grand_maitre { filter: drop-shadow(0 0 5px var(--rang)); }
.rang-challenger { filter: drop-shadow(0 0 7px var(--rang)) drop-shadow(0 0 2px var(--rang-lueur)); }
.rang-challenger .ecusson-joyau { animation: ecusson-eclat 2.4s ease-in-out infinite; }
@keyframes ecusson-eclat { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
.rang-collection .rang-nom { color: var(--rang); }
.section-titre .ecusson { margin-right: 4px; vertical-align: -3px; }
.bandeau-chiffre .ecusson { --e: .95em; }
.superposition-paquet[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .rang-challenger .ecusson-joyau, .evolution.courante, .evolution.courante .ecusson { animation: none; }
}

/* ------------------------------------------------------------------ évolutions de rang (page /evolutions)
   Sans JavaScript : une liste d'overlays empilés. Avec : .actif en fait une superposition plein écran qui ne montre
   que l'overlay courant et ne se ferme jamais d'elle-même (tap pour passer au suivant). */
.evolutions { display: grid; gap: 16px; }
.evolutions.actif { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 16px; background: rgba(0, 0, 0, .86); backdrop-filter: blur(4px); cursor: pointer; }
.evolutions.actif .evolution:not(.courante) { display: none; }
/* Largeur fixe sur tous les écrans (sélecteur à deux classes pour primer sur les utilitaires Tailwind) */
.evolutions .evolution { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: min(360px, 100%);
  margin: 0 auto; padding: 16px; text-align: center; border-radius: 20px; background: rgba(24, 24, 27, .92);
  border: 1px solid rgba(255, 255, 255, .1); }
/* Illustration cadrée comme une carte (2/3, image calée en haut : les visages sont en haut des portraits), moins
   large que l'overlay pour rester visible en entier sur un téléphone (retour d'Adrien du 2026-10-08 : un cadre 4/3
   ne montrait que la casquette de Pete Rose). */
.evolutions .evolution-cadre { width: min(62%, 220px); aspect-ratio: 2 / 3; height: auto; max-height: 42vh; }
.evolution.courante { animation: apparait .45s ease-out both; }
.evolution-cadre { display: grid; width: 100%; max-width: 100%; height: clamp(110px, 26vh, 190px); overflow: hidden; border-radius: 14px;
  border: 3px solid var(--rang, #71717a); background: #09090b; box-shadow: 0 0 28px -4px var(--rang, #71717a); place-items: center; }
.evolution-cadre img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.evolution-cadre-image img { object-fit: contain; padding: 8px; }
.evolution-cadre-mosaique { grid-template-columns: repeat(var(--colonnes, 3), 1fr); grid-auto-rows: 1fr; gap: 2px; background: var(--rang, #71717a); }
.evolution-cadre-aucune { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rang, #71717a) 35%, #09090b), #09090b 70%); }
.evolution .ecusson { animation: paquet-tombe .75s cubic-bezier(.2, .9, .3, 1.25) both; }
.evolution-passage .ancien { opacity: .75; }
.evolution-suite { display: block; width: 100%; padding: 12px 8px; border-radius: 12px; background: #fbbf24; color: #09090b; font-weight: 800; }