/* === CARTES DE COLLECTION (voir collection/js/carte.js) ===
   Format d'une carte à jouer (63 × 88). Tailles en cqi : la carte s'adapte à la largeur que lui
   donne la page (grille de l'album, ouverture d'un booster, plateau du Voyage…).
   Design « liseré et bande en biais » : bordure à la couleur de la rareté (--r clair, --r2 foncé),
   photo pleine, coût dans un hexagone doré, nom et Puissance en capitales (Oswald) dans une bande en
   biais. Brillante : bordure en métal poli, halo, éclat de lumière et étoiles, sans arc-en-ciel
   (animations en transform et opacity, allégées pour les petits appareils).
   (.carte est le conteneur : ses propres tailles ne sont pas en cqi, qui se mesurerait alors
   par rapport à la fenêtre ; celles de ses enfants, si.) */

.carte {
  --r: #8a8a85; --r2: #5c5c58;
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  container-type: inline-size;
  transition: transform 0.35s ease;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
/* Inclinaison 3D seulement sous le pointeur : une transformation 3D sur chaque carte en ferait autant
   de calques à composer (des centaines dans l'album) ; au relâché, elle revient à plat en douceur */
.carte.carte-active { transform: perspective(70rem) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.08s linear; }
.carte-peu_commune { --r: #3f8f5a; --r2: #285e3a; }
.carte-rare        { --r: #3f78c0; --r2: #274f86; }
.carte-epique      { --r: #8a5cb8; --r2: #553281; }
.carte-legendaire  { --r: #c9a03e; --r2: #8c6418; }

/* Bordure de la couleur de la rareté */
.carte-cadre, .carte-reflet { border-radius: 5cqi; }
.carte-cadre {
  position: absolute;
  inset: 0;
  padding: 3cqi;
  overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--r) 55%, #fff) 0%, var(--r) 30%, var(--r2) 100%);
  box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, 0.5), inset 0 0 0 0.45cqi rgba(255, 255, 255, 0.3);
}
/* Photo pleine */
.carte-photo { position: relative; width: 100%; height: 100%; border-radius: 3cqi; overflow: hidden; background: #1a140c; box-shadow: inset 0 0 0 0.5cqi rgba(0, 0, 0, 0.3); }
.carte-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; pointer-events: none; }

/* Coût : hexagone de la couleur de la rareté, cerclé d'or */
.carte-cout {
  position: absolute; z-index: 4; left: 4cqi; top: 4cqi; width: 15.5cqi; aspect-ratio: 1 / 1.1; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #fff0b8, #d9a441 45%, #8c5d16);
  filter: drop-shadow(0 0.6cqi 1cqi rgba(0, 0, 0, 0.5));
}
.carte-cout::before { content: ''; position: absolute; inset: 1.1cqi; clip-path: inherit; background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--r) 70%, #fff), var(--r2)); }
.carte-cout b { position: relative; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 8cqi; color: #fff; text-shadow: 0 0.4cqi 0.8cqi rgba(0, 0, 0, 0.5); }

/* Bande en biais de la couleur de la rareté, avec deux filets crème */
.carte-bande {
  position: absolute; z-index: 2; left: -10cqi; right: -10cqi; bottom: 9cqi; height: 23cqi;
  background: linear-gradient(90deg, var(--r2), var(--r) 60%); transform: rotate(-7deg);
  box-shadow: 0 -1.2cqi 0 #fbf8f1, 0 1.4cqi 0 rgba(251, 248, 241, 0.55);
}
.carte-bas { position: absolute; z-index: 3; left: 8cqi; right: 7cqi; bottom: 13.5cqi; color: #fff; transform: rotate(-7deg); font-family: 'Oswald', 'Nunito', sans-serif; text-transform: uppercase; }
.carte-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqi; }
/* (.carte devant : le nom est un h3, qui ne doit pas prendre le style des titres de popup) */
.carte .carte-nom {
  min-width: 0; margin: 0; padding: 0;
  font-family: 'Oswald', 'Nunito', sans-serif; font-weight: 700; font-size: 8.6cqi; line-height: 1; letter-spacing: 0.02em;
  color: #fff; text-shadow: 0 0.5cqi 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carte-puissance { flex-shrink: 0; text-align: right; line-height: 0.9; }
.carte-puissance b { display: block; font-weight: 700; font-size: 10.5cqi; transition: color 0.3s; }
.carte-puissance small { font-weight: 500; font-size: 2.8cqi; letter-spacing: 0.14em; opacity: 0.85; }
.carte-sous { margin-top: 0.8cqi; font-weight: 500; font-size: 3.6cqi; letter-spacing: 0.08em; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Variante avec les forces : jauges sur un panneau sombre en haut de la photo */
.carte-forces {
  position: absolute; z-index: 3; left: 6cqi; right: 6cqi; top: 22cqi;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9cqi 2cqi;
  padding: 2cqi 2.6cqi; border-radius: 2cqi; background: rgba(8, 14, 30, 0.72);
  font-family: 'Nunito', sans-serif; font-size: 3.6cqi; color: #fff;
}
.carte-force-nom { font-weight: 800; opacity: 0.85; }
.carte-force-val { min-width: 6.5cqi; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.carte-force-jauge { height: 2.2cqi; border-radius: 99px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.carte-force-jauge > span { display: block; height: 100%; border-radius: inherit; background: var(--f2); }
.carte-force-fruit     { --f2: #f97316; }
.carte-force-haki      { --f2: #a855f7; }
.carte-force-corps     { --f2: #ef4444; }
.carte-force-battle_IQ { --f2: #3b82f6; }
.carte-force-vitesse   { --f2: #22c55e; }

/* Reflet discret sous le pointeur (toutes les cartes) */
.carte-reflet {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.22), transparent 45%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.35s ease;
}
.carte-active .carte-reflet { opacity: 1; }

/* ---- Version brillante (sans arc-en-ciel) : bordure en métal poli et halo de la couleur de la rareté,
   vernis brillant sur la photo, éclat de lumière qui balaie la carte, étoiles qui scintillent tour à tour
   (calques animés en transform et opacity seulement : peu coûteux) */
.carte-holo { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: 5cqi; pointer-events: none; }
.carte-holo::before, .carte-holo::after { content: ''; position: absolute; }
.carte-holo::before {
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 32%, transparent 72%, rgba(255, 255, 255, 0.22));
  mix-blend-mode: soft-light;
}
.carte-holo::after {
  inset: -40%; will-change: transform;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.1) 38%, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0.1) 48%,
    transparent 51%, transparent 54%, rgba(255, 255, 255, 0.32) 56%, transparent 58%);
  mix-blend-mode: screen; transform: translateX(-55%);
  animation: carteEclat 3.2s ease-in-out infinite;
}
@keyframes carteEclat { 0% { transform: translateX(-55%); } 55%, 100% { transform: translateX(55%); } }
.carte-holo i {
  position: absolute; width: 13cqi; aspect-ratio: 1; background: #fff; opacity: 0;
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  animation: carteEtoile 2.7s ease-in-out infinite;
}
.carte-holo i:nth-child(1) { top: 8cqi; right: 9cqi; }
.carte-holo i:nth-child(2) { top: 46cqi; left: 6cqi; width: 10cqi; animation-delay: 0.9s; }
.carte-holo i:nth-child(3) { bottom: 40cqi; right: 10cqi; width: 11cqi; animation-delay: 1.8s; }
@keyframes carteEtoile {
  0%, 30%, 75%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  52% { opacity: 1; transform: scale(1) rotate(45deg); }
}
/* Bordure en métal poli (reflets francs et fines stries) et halo autour de la carte */
.carte-brillante .carte-cadre {
  background:
    linear-gradient(125deg, transparent 18%, rgba(255, 255, 255, 0.6) 30%, transparent 40%, transparent 62%, rgba(255, 255, 255, 0.45) 72%, transparent 82%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 0.3cqi, transparent 0.3cqi 1.3cqi),
    linear-gradient(150deg, color-mix(in srgb, var(--r) 40%, #fff) 0%, var(--r) 35%, var(--r2) 100%);
  box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, 0.5), 0 0 4cqi 0.6cqi color-mix(in srgb, var(--r) 55%, #fff), inset 0 0 0 0.45cqi rgba(255, 255, 255, 0.55);
}

/* Légendaire : un reflet doré passe lentement de temps en temps sur la bordure */
.carte-legendaire:not(.carte-brillante) .carte-cadre::after {
  content: ''; position: absolute; inset: -50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 45%, rgba(255, 244, 214, 0.45) 50%, transparent 55%);
  transform: translateX(-60%); animation: carteReflet 7s ease-in-out infinite; mix-blend-mode: soft-light;
}
@keyframes carteReflet { 0%, 70% { transform: translateX(-60%); } 95%, 100% { transform: translateX(60%); } }

/* Carte pas encore obtenue : photo éteinte et floue, bordure grise */
.carte-manquante .carte-cadre { filter: saturate(0.25) brightness(0.65); }
.carte-manquante .carte-photo img { filter: grayscale(1) brightness(0.55) blur(1.5px); transform: scale(1.04); }

/* Appareils peu puissants ou mouvement réduit : pas d'animation permanente */
@media (prefers-reduced-motion: reduce) {
  .carte, .carte.carte-active { transform: none; transition: none; }
  .carte-holo::after, .carte-legendaire .carte-cadre::after { animation: none; }
  .carte-holo i { display: none; }
}
.anim-legeres .carte-legendaire .carte-cadre::after { animation: none; display: none; }
.anim-legeres .carte-holo::after { animation-duration: 5s; }
.anim-legeres .carte-holo i { display: none; }

/* Dos de carte (dessin SVG : carteDosHtml dans carte.js) et reflet qui passe de temps en temps */
.carte-dos {
  position: absolute;
  inset: 0;
  border-radius: 4.6%/3.3%;
  overflow: hidden;
  box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5);
}
.carte-dos svg { display: block; width: 100%; height: 100%; }
.carte-dos-reflet {
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 244, 207, 0.35) 48%, rgba(255, 255, 255, 0.1) 52%, transparent 60%);
  transform: translateX(-70%);
  animation: carteDosReflet 5s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes carteDosReflet {
  0%, 60% { transform: translateX(-70%); }
  90%, 100% { transform: translateX(70%); }
}
@media (prefers-reduced-motion: reduce) { .carte-dos-reflet { animation: none; opacity: 0; } }