/* Variantes de cartes (Full Art, Holo, Full Art Holo), fond des skins et
   effet d'inclinaison. Chargé seulement quand les variantes sont activées
   dans /admin (backend/fonctionnalites/variantes.py). faceCarte() (commun.js)
   marque une variante par un tampon .eg-variante[data-variante] dans la face,
   c'est lui que ciblent les règles ci-dessous.
   Tailles pensées pour une carte de 178px ; dans les grilles mobiles, les
   cartes sont dimensionnées en cqi (1cqi = 1 % de leur largeur), voir en bas. */

@property --eg-x { syntax: '<number>'; inherits: true; initial-value: 0.3; }
@property --eg-y { syntax: '<number>'; inherits: true; initial-value: 0.25; }

/* ---------- skins : l'arme entière, sur une lueur de sa rareté ---------- */
.carte-visuel.eg-skin {
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, color-mix(in oklab, var(--teinte) 60%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 14% at 50% 86%, rgb(0 0 0 / 0.45), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--teinte) 18%, #1c1e22), #0f1012);
}
.eg-skin .eg-photo {
  inset: 3% 2% 11%;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 10px 10px rgb(0 0 0 / 0.55));
}
.eg-skin .eg-photo > img { object-fit: contain; object-position: center; }

/* ---------- tampon de variante ---------- */
.eg-variante {
  position: absolute;
  z-index: 6;
  right: 7px;
  top: 38px;
  font: 700 0.5rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  padding: 3px 5px;
  border-radius: 3px;
  color: #111214;
  background: #e7e6e3;
  pointer-events: none;
}
.eg-variante[data-variante='holo'] { background: linear-gradient(90deg, #9ff, #f9f); }
.eg-variante[data-variante='fa_holo'] { background: linear-gradient(90deg, #ff9, #9ff, #f9f); }

/* ---------- Full Art : l'illustration occupe toute la carte ---------- */
.carte.carte .carte-face:has(> .eg-variante[data-variante^='fa']) {
  border: 2px solid color-mix(in oklab, var(--teinte) 80%, transparent);
}
.carte-face:has(> .eg-variante[data-variante^='fa'])::before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: 4;
  pointer-events: none;
  border-radius: 9px;
  border: 1px solid rgb(255 255 255 / 0.22);
}
.carte-face:has(> .eg-variante[data-variante^='fa']) .carte-visuel {
  position: absolute;
  inset: 0;
  height: auto;
  border-bottom: 0;
}
.carte-face:has(> .eg-variante[data-variante^='fa']) .eg-photo { background-position: center 18%; }
.carte-face:has(> .eg-variante[data-variante^='fa']) .eg-photo > img { object-position: center 18%; }
.carte-face:has(> .eg-variante[data-variante^='fa']) .carte-infos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-top: 46px;
  background: linear-gradient(to top, rgb(12 12 14 / 0.96) 0 42%, rgb(12 12 14 / 0.7) 68%, transparent);
}
.carte-face:has(> .eg-variante[data-variante^='fa']) .carte-pseudo {
  font-size: 1.3rem;
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.7);
}
.carte-face:has(> .eg-variante[data-variante^='fa']) .carte-pseudo-long { font-size: 1.05rem; }
.carte-face:has(> .eg-variante[data-variante^='fa']) .carte-equipe {
  border-top-color: color-mix(in oklab, var(--teinte) 40%, transparent);
}
/* Full Art : pas de bandeau de rareté (il doublait l'abréviation en haut à
   droite), la rareté se lit à l'abréviation et au cadre */
.carte-face:has(> .eg-variante[data-variante^='fa']) .ruban,
.carte-face:has(> .eg-variante[data-variante^='fa']) .numero-carte { display: none; }
/* skin en Full Art : l'arme agrandie en diagonale sur toute la lueur */
.carte-face:has(> .eg-variante[data-variante^='fa']) .carte-visuel.eg-skin {
  background:
    radial-gradient(ellipse 80% 45% at 50% 40%, color-mix(in oklab, var(--teinte) 60%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 8% at 50% 62%, rgb(0 0 0 / 0.45), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--teinte) 18%, #1c1e22), #0f1012);
}
.carte-face:has(> .eg-variante[data-variante^='fa']) .eg-skin .eg-photo {
  inset: 10% -4% 36%;
  background-position: center 36%;
  transform: rotate(-24deg);
}
.carte-face:has(> .eg-variante[data-variante^='fa']) .eg-skin .eg-photo > img { object-position: center 36%; }

/* ---------- Holo : feuille holographique qui suit le pointeur (--eg-x, --eg-y de 0 à 1) ---------- */
.eg-holo-feuille,
.eg-holo-paillettes,
.eg-reflet {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.eg-holo-feuille {
  background:
    repeating-linear-gradient(115deg,
      hsl(0 85% 78%) 0px, hsl(50 85% 76%) 22px, hsl(140 80% 74%) 44px, hsl(195 85% 76%) 66px,
      hsl(265 85% 82%) 88px, hsl(325 85% 80%) 110px, hsl(360 85% 78%) 132px),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.18) 0 1px, transparent 1px 3px);
  background-size: 300% 300%, auto;
  background-repeat: no-repeat, repeat;
  background-position: calc(var(--eg-x) * 100%) calc(var(--eg-y) * 100%), 0 0;
  mix-blend-mode: color-dodge;
  opacity: 0.22;
  transition: opacity 400ms;
}
.eg-holo-paillettes {
  background-image: radial-gradient(circle, #fff 0 0.5px, transparent 1px), radial-gradient(circle, rgb(255 255 255 / 0.8) 0 0.4px, transparent 0.9px);
  background-size: 17px 21px, 23px 13px;
  background-position: 0 0, 8px 5px;
  mix-blend-mode: overlay;
  opacity: 0.8;
  -webkit-mask-image: radial-gradient(circle at calc(var(--eg-x) * 100%) calc(var(--eg-y) * 100%), #000 0, transparent 55%);
  mask-image: radial-gradient(circle at calc(var(--eg-x) * 100%) calc(var(--eg-y) * 100%), #000 0, transparent 55%);
}
/* Holo : feuille dans l'illustration seule, sous le ruban et les badges */
.carte-visuel .eg-holo-feuille,
.carte-visuel .eg-holo-paillettes { z-index: 1; }
.carte-visuel:has(> .eg-holo-feuille) :is(.pays, .ruban, .numero-carte) { z-index: 2; }
.carte.carte .carte-face:has(> .eg-variante[data-variante$='holo']) {
  border-color: transparent;
}
.carte.carte .carte-face:has(> .eg-variante[data-variante$='holo']) {
  box-shadow: 0 0 0 1.5px hsl(190 90% 70% / 0.8), 0 0 22px hsl(280 90% 70% / 0.45), 0 0 34px hsl(180 90% 60% / 0.25);
}
.carte-face:has(> .eg-variante[data-variante$='holo']) .carte-pseudo {
  background: linear-gradient(100deg, #fff 20%, hsl(190 100% 80%) 40%, hsl(300 100% 85%) 60%, #fff 80%);
  background-size: 250% 100%;
  background-position: calc(var(--eg-x) * 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
/* Full Art Holo : toute la carte, cadre arc-en-ciel compris */
.carte-face:has(> .eg-variante[data-variante='fa_holo']) > .eg-holo-feuille { opacity: 0.28; }
.carte.carte .carte-face:has(> .eg-variante[data-variante='fa_holo']) {
  border: 2px solid transparent;
  background:
    linear-gradient(#111214, #111214) padding-box,
    conic-gradient(from calc(var(--eg-x) * 360deg), hsl(0 100% 70%), hsl(60 100% 70%), hsl(150 100% 65%), hsl(210 100% 70%), hsl(280 100% 75%), hsl(330 100% 70%), hsl(0 100% 70%)) border-box;
}
.carte-face:has(> .eg-variante[data-variante='fa_holo']) .carte-infos {
  background: linear-gradient(to top, rgb(12 12 14 / 0.9) 0 40%, rgb(12 12 14 / 0.55) 68%, transparent);
}
/* au repos, le holo ondule doucement pour montrer qu'il bouge */
@keyframes eg-holo-repos {
  0%, 100% { --eg-x: 0.2; --eg-y: 0.2; }
  50% { --eg-x: 0.8; --eg-y: 0.7; }
}
.carte:not(.eg-incline) .carte-face:has(> .eg-variante[data-variante$='holo']) {
  animation: eg-holo-repos 7s ease-in-out infinite;
}
.carte.eg-incline .eg-holo-feuille { opacity: 0.36; }
.carte.eg-incline .carte-face:has(> .eg-variante[data-variante='fa_holo']) > .eg-holo-feuille { opacity: 0.42; }

/* ---------- inclinaison au survol ou au doigt (js/variantes.js) ---------- */
/* la face porte déjà rotateY(180deg) (retournement) : l'inclinaison s'ajoute après */
.carte.eg-incline {
  z-index: 4;
}
.carte.retournee.eg-incline .carte-face {
  transform: rotateY(180deg) rotateX(var(--eg-rx, 0deg)) rotateY(var(--eg-ry, 0deg)) scale(var(--eg-s, 1));
}
.carte.eg-incline.eg-actif {
  --eg-s: 1.08;
}
.carte.eg-incline.eg-doigt {
  --eg-s: 1.04;
}
.eg-reflet {
  z-index: 5;
  opacity: 0;
  transition: opacity 400ms;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle at calc(var(--eg-x) * 100%) calc(var(--eg-y) * 100%), rgb(255 255 255 / 0.75), transparent 50%);
}
.carte.eg-actif .eg-reflet { opacity: 1; }
/* là où le doigt incline la carte (fiche, ouverture de pack), il ne fait pas défiler la page */
.fiche-visuel .carte,
.carte-overlay {
  touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
  .carte.retournee.eg-incline .carte-face { transform: rotateY(180deg); }
  .carte:not(.eg-incline) .carte-face:has(> .eg-variante[data-variante$='holo']) { animation: none; }
}

/* ---------- grilles mobiles : mêmes proportions, en cqi ---------- */
@media (max-width: 640px) {
  :is(.grille, .vitrine, .mini-cartes-amis, .ouv-recap-cartes) .eg-variante {
    right: 4cqi; top: 21cqi; font-size: 4.5cqi; padding: 1.7cqi 2.8cqi; border-radius: 1.7cqi;
  }
  :is(.grille, .vitrine, .mini-cartes-amis, .ouv-recap-cartes) .carte-face:has(> .eg-variante[data-variante^='fa']) .carte-infos {
    padding-top: 26cqi;
  }
  :is(.grille, .vitrine, .mini-cartes-amis, .ouv-recap-cartes) .carte-face:has(> .eg-variante[data-variante^='fa']) .carte-pseudo {
    font-size: 11.7cqi;
  }
  :is(.grille, .vitrine, .mini-cartes-amis, .ouv-recap-cartes) .carte-face:has(> .eg-variante[data-variante^='fa']) .carte-pseudo-long {
    font-size: 9cqi;
  }
  :is(.grille, .vitrine, .mini-cartes-amis, .ouv-recap-cartes) .carte-face:has(> .eg-variante[data-variante^='fa'])::before {
    inset: 2.8cqi; border-radius: 5cqi;
  }
}