/* ════════════════════════════════════════════════════════════════════════════
   ElementaQuest — Card Component (F1)
   
   Format portrait 5:7 (équivalent ratio carte poker, comme MTG/Hearthstone).
   Artwork plein cadre + textes en overlay.
   
   3 tailles : .eq-card-sm (mini, 110px wide), .eq-card-md (deck builder, 165px),
               .eq-card-lg (preview/reveal, 280px).
   
   Variables d'élément : --eq-elem-color (couleur du type, set inline ou par classe).
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-card {
  --eq-card-w: 165px;
  --eq-elem-color: #c9a84a;
  --eq-rar-color: #8b8b9a;
  --eq-rar-glow: rgba(139,139,154,.18);
  position: relative;
  width: var(--eq-card-w);
  aspect-ratio: 5 / 7;
  /* Container query : permet aux enfants d'utiliser des cqi qui s'adaptent à la
     largeur RÉELLE rendue de la carte (et pas à --eq-card-w fixe). Indispensable
     pour les pages qui override la width (ex: Booster .flip-back-eq).
     Toutes les font-sizes des enfants sont en cqi (= % de la largeur carte). */
  container-type: inline-size;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0c14;
  border: 2px solid var(--eq-rar-color);
  box-shadow: 0 0 14px var(--eq-rar-glow), inset 0 0 0 1px rgba(0,0,0,.3);
  font-family: 'Cinzel', serif !important;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  user-select: none;
}
.eq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px var(--eq-rar-glow), inset 0 0 0 1px rgba(0,0,0,.3);
}

/* Tailles */
.eq-card.eq-card-sm { --eq-card-w: 110px; }
.eq-card.eq-card-md { --eq-card-w: 165px; }
.eq-card.eq-card-lg { --eq-card-w: 280px; }

/* Tailles plus généreuses sur desktop */
@media (min-width: 900px) {
  .eq-card.eq-card-sm { --eq-card-w: 165px; }
  .eq-card.eq-card-md { --eq-card-w: 220px; }
  .eq-card.eq-card-lg { --eq-card-w: 340px; }
}

/* Sur les petites tailles (sm + md), le badge élément est légèrement réduit
   pour rester proportionné et bien rond. LG (modal preview) garde 18%. */
.eq-card.eq-card-sm .eq-card-elem,
.eq-card.eq-card-md .eq-card-elem {
  width: 16%;
}

/* Mode "stat" : disabled / non-cliquable (preview) */
.eq-card.eq-card-static { cursor: default; }
.eq-card.eq-card-static:hover { transform: none; }

/* Désactivée (zéro copie restante) */
.eq-card.eq-card-disabled { opacity: .35; }
.eq-card.eq-card-disabled:hover { transform: none; }

/* ── Bordures par RARETÉ ───────────────────────────────────────────────────── */
.eq-card[data-rar="commun"]    { --eq-rar-color: #8b8b9a;  --eq-rar-glow: rgba(139,139,154,.15); }
.eq-card[data-rar="rare"]      { --eq-rar-color: #4ab3e8;  --eq-rar-glow: rgba(74,179,232,.28); }
.eq-card[data-rar="leg"]       { --eq-rar-color: #c9a84a;  --eq-rar-glow: rgba(201,168,74,.4); }
.eq-card[data-rar="leg"]       { box-shadow: 0 0 18px var(--eq-rar-glow), inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 30px rgba(201,168,74,.1); }

/* ── Couleur d'élément par type ────────────────────────────────────────────── */
.eq-card[data-type="eau"]  { --eq-elem-color: #4ab3e8; }
.eq-card[data-type="feu"]  { --eq-elem-color: #f46b35; }
.eq-card[data-type="roc"]  { --eq-elem-color: #c49a6c; }
.eq-card[data-type="univ"] { --eq-elem-color: #a675e8; }

/* ── ARTWORK plein cadre ───────────────────────────────────────────────────── */
.eq-card-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #1a1d33;  /* fallback si SVG pas chargé */
}

/* Dégradé sombre en haut + bas pour lisibilité texte (subtil) */
.eq-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.1) 14%,
      rgba(0,0,0,0)   42%,
      rgba(0,0,0,.25) 65%,
      rgba(0,0,0,.92) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── TOUTES LES ZONES DE TEXTE (au-dessus du dégradé) ──────────────────────── */
.eq-card-content {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column;
  padding: 6% 7% 8% 7%;
  pointer-events: none;
}

/* Rareté en haut-gauche */
.eq-card-rar {
  align-self: flex-start;
  background: rgba(13,15,26,.92);
  border: 1px solid var(--eq-rar-color);
  border-radius: 4px;
  color: var(--eq-rar-color);
  font-size: 5.52cqi;   /* was 6% (.eq-card-rar) → ×0.92 + cqi */          /* was 7% — légèrement réduit pour cohérence avec les box d'overlay */
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2.5% 6%;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  font-family: 'Cinzel', serif !important;     /* idem nom : titre décoratif, pas dyslexique */
}
.eq-card-rar.eq-leg {
  background: linear-gradient(135deg, rgba(201,168,74,.4), rgba(212,175,55,.5));
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
}

/* Spacer auto-grow */
.eq-card-spacer { flex: 1; }

/* Bandeau bas (nom + élément en bas-droite) */
.eq-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4%;
}

.eq-card-name {
  /* !important pour résister à l'override du mode dyslexie (eq_dyslexia.js).
     Le nom de carte est un titre décoratif → ne doit PAS être en OpenDyslexic. */
  font-family: 'Cinzel', serif !important;
  font-weight: 700;
  font-size: 8.74cqi;   /* was 9.5% (.eq-card-name) → ×0.92 + cqi */
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,1),
    0 0 12px rgba(0,0,0,.85),
    0 1px 2px rgba(0,0,0,1);
  letter-spacing: .04em;
  flex: 1;
  word-break: break-word;
  text-transform: uppercase;
}

/* Quand le nom de carte est en 1 seul mot (ex: "FLAMES", "VAGUE"), on le
   centre dans le bandeau bas pour un rendu équilibré (sinon left-align fait
   étrange à côté du gros badge élément rond). Class ajoutée dynamiquement
   par card-component.js render(). */
.eq-card-name-single {
  text-align: center;
}

/* Icône type en bas-droite (cercle avec emoji centré) */
.eq-card-elem {
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(13,15,26,.92);
  border: 2px solid var(--eq-elem-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--eq-elem-color) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 10.12cqi;   /* was 11% (.eq-card-elem) → ×0.92 + cqi */
}

/* Valeur principale (chiffre en haut-droite) */
.eq-card-val {
  position: absolute;
  top: 6%; right: 7%;
  background: rgba(13,15,26,.92);
  border: 2px solid var(--eq-elem-color);
  border-radius: 50%;
  width: 14%;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif !important;
  font-weight: 700;
  font-size: 7.36cqi;   /* was 8% (.eq-card-val) → ×0.92 + cqi */
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,1);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.eq-card-val.eq-val-atk  { color: #ffaa88; border-color: #f46b35; }
.eq-card-val.eq-val-def  { color: #aedeff; border-color: #4ab3e8; }
.eq-card-val.eq-val-heal { color: #aaf5ad; border-color: #7be37b; }

/* Description (visible en taille LG seulement) */
.eq-card-desc {
  display: none;  /* masqué par défaut */
  background: rgba(8,10,18,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 5% 6%;
  margin-top: 4%;
  font-family: Georgia, serif;
  font-size: 4.78cqi;   /* was 5.2% (.eq-card-desc) → ×0.92 + cqi */
  line-height: 1.55;
  color: #f5f1e5;
  font-style: normal;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.eq-card.eq-card-lg .eq-card-desc { display: block; }

/* ── Crédit artiste — visible uniquement en preview lg ─────────────────────
   Affiché si c.artwork_credit.name est posé (voir card-component.js render).
   Petit, italique, doré discret, juste au-dessus du nom de carte.            */
.eq-card-credit {
  font-size: 3.5cqi;   /* was 3.8% (.eq-card-credit) → ×0.92 + cqi */
  color: rgba(229, 225, 213, .55);
  text-align: right;
  font-style: italic;
  letter-spacing: .04em;
  margin-top: 2%;
  margin-bottom: 1%;
  font-family: 'Cinzel', serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  pointer-events: auto;  /* override .eq-card-content { pointer-events:none } */
}
.eq-card-credit a {
  color: rgba(212, 168, 58, .85);
  text-decoration: none;
  pointer-events: auto;
}
.eq-card-credit a:hover {
  color: #d4a83a;
  text-decoration: underline;
}

/* ── INFOBULLE AU SURVOL (PC uniquement, gérée par JS) ──────────────────────
   Voir card-component.js : EQCard ajoute des listeners hover sur les cartes
   et affiche un élément #eq-tooltip en position fixed au-dessus de la carte.
   Sur mobile (pas de hover détecté), pas d'activation.
   Sur LG (preview), data-tooltip n'est pas généré donc rien ne se passe. */
#eq-tooltip {
  position: fixed;
  z-index: 9999;
  display: none;
  min-width: 220px;
  max-width: 320px;
  width: max-content;
  padding: 10px 14px;
  background: rgba(8, 10, 18, .98);
  border: 1px solid rgba(201, 168, 74, .55);
  border-radius: 8px;
  color: #f5f1e5;
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0,0,0,1);
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
  animation: eqTooltipIn .15s ease-out;
}
#eq-tooltip.show { display: block; }
#eq-tooltip .eq-tt-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  color: #c9a84a;
  letter-spacing: .04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
#eq-tooltip .eq-tt-meta {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: #8b8b9a;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#eq-tooltip .eq-tt-desc {
  color: #f5f1e5;
  font-style: italic;
}
#eq-tooltip .eq-tt-rar {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid currentColor;
}
#eq-tooltip .eq-tt-rar.rar-commun { color: #888; }
#eq-tooltip .eq-tt-rar.rar-rare   { color: #5fbbe6; }
#eq-tooltip .eq-tt-rar.rar-leg    { color: #c9a84a; background: rgba(201,168,74,.15); }

@keyframes eqTooltipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* En LG la carte fait ~360-450px, on veut du texte qui reste confortable */
.eq-card.eq-card-lg .eq-card-rar {
  font-size: 3cqi;   /* was 4% (.eq-card-lg .eq-card-rar) → ×0.75 + cqi */           /* was 4.5% — réduit pour cohérence */
  padding: 1.8% 4.2%;
  letter-spacing: .1em;
}
.eq-card.eq-card-lg .eq-card-name {
  font-size: 5.25cqi;   /* was 7% (.eq-card-lg .eq-card-name) → ×0.75 + cqi */
  letter-spacing: .06em;
  text-shadow:
    0 2px 5px rgba(0,0,0,1),
    0 0 14px rgba(0,0,0,.9),
    0 1px 2px rgba(0,0,0,1);
}
.eq-card.eq-card-lg .eq-card-val {
  font-size: 4.13cqi;   /* was 5.5% (.eq-card-lg .eq-card-val) → ×0.75 + cqi */
}
.eq-card.eq-card-lg .eq-card-desc {
  font-size: 3.75cqi;   /* was 5% (.eq-card-lg .eq-card-desc) → ×0.75 + cqi */
  line-height: 1.55;
  padding: 4% 5%;
  font-weight: 500;
  background: rgba(8, 10, 18, .96);
  color: #fff;
  border: 1px solid rgba(201,168,74,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,1);
}

/* ── DOS de carte (réutilisable) ─────────────────────────────────────────── */
.eq-card.eq-card-back .eq-card-art {
  background: linear-gradient(135deg, #141728 0%, #0a0c14 100%);
}
.eq-card.eq-card-back .eq-card-content {
  align-items: center;
  justify-content: center;
}
.eq-card.eq-card-back::before { background: none; }
.eq-card-back-logo {
  font-family: 'Cinzel Decorative', serif;
  font-size: 14.72cqi;   /* was 16% (.eq-card-back-suit) → ×0.92 + cqi */
  background: linear-gradient(135deg, #e5e1d5 20%, #c9a84a 55%, #e5e1d5 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  line-height: 1.1;
}

/* ── PREVIEW MODAL (overlay grand format) ────────────────────────────────── */
.eq-card-preview-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 10, 18, .65);
  backdrop-filter: blur(14px) saturate(.7);
  -webkit-backdrop-filter: blur(14px) saturate(.7);
  z-index: 2000;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  cursor: pointer;
}
.eq-card-preview-overlay.show { display: flex; animation: eqPreviewIn .25s ease-out; }
@keyframes eqPreviewIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; }
}
.eq-card-preview-overlay .eq-card { cursor: default; }
.eq-card-preview-close {
  position: fixed;
  top: 18px; right: 18px;
  background: rgba(13, 15, 26, .92);
  border: 1px solid rgba(201, 168, 74, .45);
  color: #c9a84a;
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-family: 'Cinzel', serif;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2001;
  transition: all .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.eq-card-preview-close:hover {
  background: rgba(201, 168, 74, .15);
  border-color: var(--gold, #c9a84a);
  transform: rotate(90deg);
}
/* Indication visuelle "cliquer pour fermer" */
.eq-card-preview-overlay::after {
  content: 'Cliquer en dehors pour fermer';
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .12em;
  color: rgba(201, 168, 74, .55);
  pointer-events: none;
  text-transform: uppercase;
}

/* ── Boutons d'action sous la preview (ex: + AJOUTER dans DeckBuilder) ────── */
.eq-card-preview-actions {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));   /* plus bas qu'avant car nav cachée pendant preview */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2002;
  display: none;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
  width: calc(100% - 32px);
  max-width: 380px;
}

/* Petite flèche visuelle ↓ entre la carte et le bouton (signal "regarde en bas") */
.eq-card-preview-actions::before {
  content: '↓';
  font-size: 1.4rem;
  color: rgba(201, 168, 74, .85);
  animation: eqArrowBounce 1.4s ease-in-out infinite;
  margin-bottom: -2px;
  text-shadow: 0 2px 8px rgba(201,168,74,.6);
}
@keyframes eqArrowBounce {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Quand un actionButton est présent, on remonte la carte pour que le bouton ne soit pas masqué */
.eq-card-preview-overlay:has(.eq-card-preview-actions:not([style*="none"])) {
  align-items: flex-start;
  padding-top: max(20px, env(safe-area-inset-top));
}
.eq-card-preview-overlay:has(.eq-card-preview-actions:not([style*="none"])) .eq-card {
  /* Limite la hauteur pour laisser de la place au bouton (plus de place qu'avant) */
  max-height: calc(100vh - 220px);
}

.eq-preview-action {
  background: linear-gradient(135deg, #c9a84a, #d4af37);
  color: #0d0f1a;
  border: none;
  padding: 18px 32px;
  border-radius: 14px;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(201, 168, 74, .55),
              0 2px 8px rgba(0,0,0,.5),
              0 0 0 2px rgba(255,255,255,.1) inset;
  transition: all .15s ease;
  min-width: 260px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Animation pulse pour attirer l'attention */
  animation: eqPreviewActionPulse 2.5s ease-in-out infinite;
}
@keyframes eqPreviewActionPulse {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(201, 168, 74, .55),
                0 2px 8px rgba(0,0,0,.5),
                0 0 0 2px rgba(255,255,255,.1) inset;
  }
  50% {
    box-shadow: 0 8px 32px rgba(201, 168, 74, .85),
                0 2px 12px rgba(0,0,0,.6),
                0 0 0 2px rgba(255,255,255,.2) inset,
                0 0 0 8px rgba(201, 168, 74, .15);
  }
}
.eq-preview-action:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 32px rgba(201, 168, 74, .85),
              0 4px 12px rgba(0,0,0,.5);
  animation: none;
}
.eq-preview-action:active:not(:disabled) {
  transform: translateY(0) scale(.98);
}
.eq-preview-action.disabled,
.eq-preview-action:disabled {
  background: rgba(120, 120, 140, .3);
  color: rgba(255,255,255,.5);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  animation: none;
}
.eq-preview-hint {
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  color: rgba(255, 200, 120, .8);
  letter-spacing: .04em;
  background: rgba(13, 15, 26, .85);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(201, 168, 74, .25);
  text-align: center;
}

/* Quand un bouton d'action est présent, masque le hint "cliquer en dehors" */
.eq-card-preview-overlay:has(.eq-card-preview-actions:not([style*="none"]))::after {
  display: none;
}

/* ── Animation reveal booster ────────────────────────────────────────────── */
@keyframes eqCardRevealIn {
  0%   { transform: scale(.4) rotateY(-90deg); opacity: 0; }
  60%  { transform: scale(1.05) rotateY(0); opacity: 1; }
  100% { transform: scale(1) rotateY(0); opacity: 1; }
}
.eq-card.eq-card-reveal {
  animation: eqCardRevealIn .55s cubic-bezier(.2,1.2,.4,1) backwards;
}
.eq-card.eq-card-reveal:nth-child(2) { animation-delay: .15s; }
.eq-card.eq-card-reveal:nth-child(3) { animation-delay: .30s; }

/* ── Effet "leg" particulier : aura dorée ───────────────────────────────── */
.eq-card[data-rar="leg"]::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #c9a84a, transparent 30%, transparent 70%, #d4af37);
  opacity: .6;
  z-index: -1;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROTECTION ANTI-DYSLEXIE POUR LES TITRES DÉCORATIFS
   ────────────────────────────────────────────────────────────────────────────
   eq_dyslexia.js applique OpenDyslexic globalement via une règle de type
   `html.dyslexia *, body.dyslexia *` avec !important (spécificité 0,1,1).
   Les éléments décoratifs de carte (nom, rareté, valeur) sont des titres
   stylisés qui DOIVENT rester en Cinzel (cf. i18n : "Les titres décoratifs
   ne sont pas modifiés"). On utilise un sélecteur de spécificité supérieure
   (0,2,0) + !important pour gagner systématiquement.

   Description (.eq-card-desc) et crédit (.eq-card-credit) conservent
   l'héritage : si dyslexie active, ils basculent en OpenDyslexic pour
   améliorer la lisibilité du texte d'effet (utile pour gameplay).
   ════════════════════════════════════════════════════════════════════════════ */
.eq-card,
.eq-card .eq-card-name,
.eq-card .eq-card-rar,
.eq-card .eq-card-val,
.eq-card .eq-card-rar.eq-leg {
  font-family: 'Cinzel', serif !important;
}