/* Hoshi TCG — le composant carte : cadres par tier, auras, étoiles, dos (sleeves). */

.card-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* 3 cartes par ligne sur téléphone (retour Noé 2026-07-28) : mesuré, 351px dispo sur 375px de
   large (marge de page 2×12px) — 100px × 3 + 8px × 2 = 316px, tient avec de la marge. */
@media (max-width: 480px) { .card-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--s2); } }
/* Sur les cartes à 100px de large (mobile), les marges/paddings fixes autour de l'image (8px,
   7-9px, divider) prennent une part bien plus grande de la hauteur totale que sur desktop — image
   à 64% de hauteur ne laisse plus assez de place au nom, qui se fait couper par overflow:hidden
   (retour Noé 2026-07-29, mesuré : ~9-10px de manque à 100px de large). Image légèrement réduite. */
@media (max-width: 480px) { .tcg img { height: 56%; } }

/* ── Carte unifiée « Anime TCG Card Design » (Claude Design, 2026-07-28) ──
   Une seule définition, utilisée PARTOUT où une carte s'affiche : collection, encyclopédie,
   marché, vitrine, roue/révélation/récap de pack. Cadre = dégradé métallique par tier (padding
   2px qui laisse voir le fond), lueur ambiante colorée qui grandit au survol. */
.tcg {
  position: relative; aspect-ratio: var(--card-ratio);
  border-radius: 14px; padding: 2px;
  background: var(--frame-e);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tier-e) 30%, transparent);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
a.tcg:hover, a .tcg:hover { transform: translateY(-4px) scale(1.02); filter: brightness(1.06); }
.tcg.t-d { background: var(--frame-d); box-shadow: 0 0 12px color-mix(in srgb, var(--tier-d) 35%, transparent); }
.tcg.t-c { background: var(--frame-c); box-shadow: 0 0 14px color-mix(in srgb, var(--tier-c) 38%, transparent); }
.tcg.t-b { background: var(--frame-b); box-shadow: 0 0 16px color-mix(in srgb, var(--tier-b) 40%, transparent); }
.tcg.t-a { background: var(--frame-a); box-shadow: 0 0 20px color-mix(in srgb, var(--tier-a) 45%, transparent); }
/* Lueur mythique : valeurs exactes du design de référence (relevées par Noé le 2026-07-28) — halo
   hexagonal multicolore, plus fidèle que l'approximation à 2 ombres précédente. */
.tcg.t-s {
  background: var(--frame-s);
  box-shadow: rgba(255, 61, 110, 0.55) 0px -7.5px 17.5px, rgba(255, 179, 64, 0.5) 7px -4px 17.5px,
    rgba(255, 228, 94, 0.5) 7px 4px 17.5px, rgba(94, 230, 168, 0.5) 0px 8px 17.5px,
    rgba(77, 168, 255, 0.5) -7px 4px 17.5px, rgba(179, 86, 255, 0.5) -7px -4px 17.5px;
}
a.tcg.t-d:hover, a .tcg.t-d:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--tier-d) 55%, transparent); }
a.tcg.t-c:hover, a .tcg.t-c:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--tier-c) 55%, transparent); }
a.tcg.t-b:hover, a .tcg.t-b:hover { box-shadow: 0 0 30px color-mix(in srgb, var(--tier-b) 58%, transparent); }
a.tcg.t-a:hover, a .tcg.t-a:hover { box-shadow: 0 0 36px color-mix(in srgb, var(--tier-a) 62%, transparent); }
/* Intensité plafonnée à 0.5 (glowIntensity du design de référence, retour Noé 2026-07-28) : pas
   d'amplification au survol pour le mythique contrairement aux autres tiers — même halo qu'au repos. */
a.tcg.t-s:hover, a .tcg.t-s:hover {
  box-shadow: rgba(255, 61, 110, 0.55) 0px -7.5px 17.5px, rgba(255, 179, 64, 0.5) 7px -4px 17.5px,
    rgba(255, 228, 94, 0.5) 7px 4px 17.5px, rgba(94, 230, 168, 0.5) 0px 8px 17.5px,
    rgba(77, 168, 255, 0.5) -7px 4px 17.5px, rgba(179, 86, 255, 0.5) -7px -4px 17.5px;
}

/* Corps intérieur sombre (dévoile le cadre dégradé sur les 2px de padding tout autour). */
.tcg-body {
  position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden;
  background: linear-gradient(165deg, #0f1727, #070a12);
  display: flex; flex-direction: column;
}
/* Image encadrée avec une marge visible (comme la carte de pack, .ag-art) plutôt que pleine
   largeur du container — retour Noé 2026-07-28 : « un seul design », la version encadrée est la
   bonne, la pleine largeur (fiche complète, collection, cartes) ne l'était pas. Cadrage remonté
   (object-position) pour que le visage ne soit pas coupé en bas. Réservé au cadré (pas plein-cadre
   légendaire/mythique, qui reste en bord-à-bord juste en dessous). */
.tcg img {
  width: calc(100% - 16px); height: 64%; object-fit: cover; object-position: center 18%; flex-shrink: 0;
  margin: 8px 8px 0; border-radius: 8px; border: 1px solid rgba(188, 215, 255, 0.18);
}
.tcg .meta { padding: 7px 8px 9px; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.tcgf .nm {font-size: 1.8rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

/* Entre le nom et la ligne anime/prix (retour Noé 2026-07-28 : trop haut, entre l'image et le nom
   avant) — plus de marge horizontale, le padding de .meta la fournit déjà. */
.tcg-divider { margin: 2px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.tcg-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
/* Valeur : même taille que le nom de l'anime, couleur = celle du tier (retour Noé 2026-07-28). */
.tcg-foot .price { font-size: 0.64rem; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tcg.t-e .tcg-foot .price { color: var(--tier-e); }
.tcg.t-d .tcg-foot .price { color: var(--tier-d); }
.tcg.t-c .tcg-foot .price { color: var(--tier-c); }
.tcg.t-b .tcg-foot .price { color: var(--tier-b); }
.tcg.t-a .tcg-foot .price { color: var(--tier-a); }
.tcg.t-s .tcg-foot .price {
  color: rgb(255, 242, 246);
  text-shadow: rgb(255, 255, 255) 0px 0px 6px, rgb(255, 61, 110) 1.5px -1px 5px, rgb(255, 179, 64) -1.5px -1px 5px,
    rgb(77, 168, 255) 1.5px 1px 5px, rgb(179, 86, 255) -1.5px 1px 5px, rgba(0, 0, 0, 0.5) 0px 0px 14px;
}

/* Full-art (légendaire A / mythic S) : image plein cadre, texte sur flou de contour */
.tcg.fullart .tcg-body { display: block; }
.tcg.fullart img { width: 100%; height: 100%; margin: 0; border-radius: 0; border: none; }
.tcg.fullart .meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 10px 10px;
  background: linear-gradient(transparent, rgba(6, 9, 16, 0.85) 45%, rgba(6, 9, 16, 0.92));
}
.tcg .nm { font-size: 0.8rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tcg .anime { font-size: 0.64rem; font-weight: 300; color: var(--ink-dim); letter-spacing: 0.04em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Lumière qui SUIT la souris (position via --mx/--my, mise à jour en JS). Toutes les cartes. */
.tcg { --mx: 50%; --my: 50%; }
.tcg-body::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity 220ms ease; mix-blend-mode: soft-light;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.42), transparent 55%);
}
.tcg:hover .tcg-body::before { opacity: 1; }
/* Rares (S/A) : foil holographique arc-en-ciel centré sur le curseur. */
.tcg.t-a .tcg-body::before {
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(200px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.4), transparent 52%),
    conic-gradient(from 0deg at var(--mx) var(--my), rgba(255, 95, 143, 0.35), rgba(185, 139, 255, 0.35),
      rgba(86, 200, 240, 0.35), rgba(111, 224, 160, 0.35), rgba(255, 216, 107, 0.35), rgba(255, 95, 143, 0.35));
}
.tcg.t-s .tcg-body::before {
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(200px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.5), transparent 48%),
    conic-gradient(from 0deg at var(--mx) var(--my), rgba(255, 95, 143, 0.5), rgba(185, 139, 255, 0.5),
      rgba(86, 200, 240, 0.5), rgba(111, 224, 160, 0.5), rgba(255, 216, 107, 0.5), rgba(255, 95, 143, 0.5));
}

/* Pastille de rareté — texte du libellé complet (pas juste la lettre, design 2026-07-28),
   coin haut-droit, sans fond : couleur + ombre portée pour rester lisible sur n'importe quelle image. */
.tier-chip {
  position: absolute; top: 8px; right: 12px; z-index: 2;
  font-family: var(--font-display); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
}
/* Mythique : texte quasi blanc + halo multicolore par text-shadow (valeurs exactes du design
   de référence, relevées par Noé le 2026-07-28). */
.tier-chip.t-s {
  color: rgb(255, 242, 246);
  text-shadow: rgb(255, 255, 255) 0px 0px 6px, rgb(255, 61, 110) 1.5px -1px 5px, rgb(255, 179, 64) -1.5px -1px 5px,
    rgb(77, 168, 255) 1.5px 1px 5px, rgb(179, 86, 255) -1.5px 1px 5px, rgba(0, 0, 0, 0.5) 0px 0px 14px;
}
.tier-chip.t-a { color: var(--tier-a); }
.tier-chip.t-b { color: var(--tier-b); }
.tier-chip.t-c { color: var(--tier-c); }
.tier-chip.t-d { color: var(--tier-d); }
.tier-chip.t-e { color: var(--tier-e); }
/* Valeur : repliée dans le pied de carte (.tcg-foot), plus de pastille séparée coin haut-droit
   (le libellé de rareté occupe cet emplacement désormais). Conservé comme alias pour les
   contextes qui l'utilisent encore hors carte (overlay, fiche carte). */
.value-chip {
  display: flex; align-items: center; gap: 3px;
  font-size: 0.64rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent);
}

/* Étoiles d'évolution */
.stars { position: absolute; bottom: 28%; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 2px; padding: 2px 0; }
.stars .st { width: 14px; height: 14px; color: var(--gold); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); }

/* Quantité (doublons) — centré en bas, z-index au-dessus de .meta (retour Noé 2026-07-29 : sur
   les cartes plein-cadre légendaires/mythiques .meta est aussi en z-index:2 et vient après dans
   le DOM, donc gagnait l'empilement et cachait le chip derrière la valeur). */
.qty-chip {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 0.66rem; font-weight: 700; color: var(--ink);
  background: rgba(11, 16, 32, 0.85); padding: 1px 7px; border-radius: var(--r-pill);
}

/* Possession (encyclopédie) : les cartes non possédées sont assombries */
.tcg.not-owned img { filter: grayscale(0.85) brightness(0.55); }
.tcg.not-owned .nm, .tcg.not-owned .anime { color: var(--ink-faint); }

/* ── Dos de carte (sleeves) ── */
.card-back {
  position: absolute; inset: 0; border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 198, 79, 0.16), transparent 42%),
    linear-gradient(160deg, #141B33, #0C1226);
  border: 1px solid var(--border-strong);
}
.card-back .emblem { width: 42%; opacity: 0.9; color: var(--gold); }
.card-back.sleeve-sakura {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 122, 156, 0.28) 3px, transparent 4px),
    radial-gradient(circle at 78% 32%, rgba(255, 122, 156, 0.2) 2px, transparent 3px),
    radial-gradient(circle at 38% 74%, rgba(255, 122, 156, 0.24) 3px, transparent 4px),
    radial-gradient(circle at 84% 82%, rgba(255, 122, 156, 0.18) 2px, transparent 3px),
    linear-gradient(160deg, #2A1626, #140A18);
}
.card-back.sleeve-sakura .emblem { color: var(--tier-s1); }
.card-back.sleeve-night {
  background:
    radial-gradient(1px 1px at 24% 22%, rgba(237, 239, 247, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 14%, rgba(237, 239, 247, 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 60%, rgba(176, 140, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, rgba(237, 239, 247, 0.5) 50%, transparent 51%),
    linear-gradient(160deg, #0F1733, #070B1A);
}
.card-back.sleeve-night .emblem { color: var(--tier-b); }
.card-back.sleeve-gold {
  background:
    repeating-linear-gradient(135deg, rgba(245, 198, 79, 0.08) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #2B2110, #17110A);
  border-color: rgba(245, 198, 79, 0.5);
}

/* Libellés de tier (légende, filtres) */
.tier-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; }
.tier-dot { width: 10px; height: 10px; border-radius: 50%; }
/* Blanc irisé du TEXTE mythique (pas le dégradé du cadre — précision Noé 2026-07-28), avec un
   léger halo multicolore pour rester identifiable comme mythique sur une petite pastille pleine. */
.tier-dot.t-s {
  background: rgb(255, 242, 246);
  box-shadow: 0 0 3px rgba(255, 61, 110, 0.6), 0 0 5px rgba(179, 86, 255, 0.45);
}
.tier-dot.t-a { background: var(--tier-a); }
.tier-dot.t-b { background: var(--tier-b); }
.tier-dot.t-c { background: var(--tier-c); }
.tier-dot.t-d { background: var(--tier-d); }
.tier-dot.t-e { background: var(--tier-e); }