:root {
  --gold: #d8bc67;
  --gold-light: #fff1b8;
  --text: #f7f2df;
  --muted: #b8c7b4;

  /* Carte interne : base stable pour renderer.js */
  --card-base-w: 390px;
}

/* =========================================================
   BASE GÉNÉRALE
   ========================================================= */

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(circle at 12% 4%, rgba(72, 151, 79, .28), transparent 32%),
    radial-gradient(circle at 86% 28%, rgba(210, 184, 93, .12), transparent 28%),
    linear-gradient(145deg, #020604, #092014 46%, #020403);
}

body.modal-open { overflow: hidden; }

img {
  display: block;
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
}

/* =========================================================
   ANCIENNE PAGE COLLECTION / OUTILS
   Ces styles restent utiles si une page n'utilise pas ui.css.
   La grille active Collection est maintenant gérée dans ui.css.
   ========================================================= */

.app-shell {
  width: min(1360px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 56px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
  padding: 26px;
  border: 1px solid rgba(128, 222, 155, .28);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(15, 43, 28, .95), rgba(4, 13, 9, .86));
  box-shadow: 0 28px 86px rgba(0, 0, 0, .32);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: .92;
  color: var(--gold);
  text-shadow: 0 3px 0 #091008, 0 0 20px rgba(216, 188, 103, .24);
}

.intro {
  max-width: 720px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.card-count {
  min-width: 126px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(216, 188, 103, .36);
  border-radius: 18px;
  background: rgba(0, 0, 0, .3);
}

.card-count strong {
  display: block;
  color: var(--gold-light);
  font-size: 2.35rem;
  line-height: 1;
}

.card-count span { color: var(--muted); }

.toolbar {
  display: grid;
  grid-template-columns: 1fr 180px 180px 180px;
  gap: 14px;
  margin-bottom: 28px;
  padding: 16px;
  border: 1px solid rgba(128, 222, 155, .18);
  border-radius: 24px;
  background: rgba(1, 8, 5, .6);
  backdrop-filter: blur(12px);
}

.toolbar label {
  display: grid;
  gap: 7px;
}

.toolbar span {
  color: var(--gold-light);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.toolbar input,
.toolbar select {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  color: var(--text);
  border: 1px solid rgba(216, 188, 103, .28);
  border-radius: 13px;
  outline: none;
  background: rgba(0, 0, 0, .42);
}

.empty-state {
  grid-column: 1 / -1;
  padding: 46px;
  border: 1px solid rgba(216, 188, 103, .24);
  border-radius: 24px;
  text-align: center;
  background: rgba(0, 0, 0, .35);
}

.empty-state h2 {
  margin: 0 0 8px;
  color: var(--gold-light);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

/* =========================================================
   WRAPPER MINIATURE
   Important : la grille Collection qui positionne ces wrappers
   est dans ui.css. Ici on garde seulement la base sûre.
   ========================================================= */

.card-tile {
  position: relative;
  overflow: visible;
}

.card-scale {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}

/* =========================================================
   CARTE NADERE — BASE
   ========================================================= */

.nad-card {
  --card-w: 180px;
  position: relative;
  width: min(100%, var(--card-w));
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  cursor: pointer;
  overflow: hidden;
  border-radius: 22px;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5));
  transition: transform .18s ease, filter .18s ease;
}

.nad-card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .56));
}

.nad-card--large {
  --card-w: min(78vh * .75, 640px);
  cursor: default;
}

.nad-card--large:hover { transform: none; }

.frame-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 4;
}

/* =========================================================
   RARETÉ — pastille style MTG (au niveau de la ligne de type)
   Commune = bronze sobre · Peu commune = argent · Rare = or
   ========================================================= */
.rarity-gem {
  position: absolute;
  top: -1%;
  left: 61.0%;
  width: 9%;
  aspect-ratio: 1;
  z-index: 7;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}
.rarity-gem--commune {
  background-image: url("../assets/rarity/rarete-commune.png");
}
.rarity-gem--peu-commune {
  background-image: url("../assets/rarity/rarete-peu-commune.png");
}
.rarity-gem--rare {
  background-image: url("../assets/rarity/rarete-rare.png");
  animation: rarityGemPulse 2.4s ease-in-out infinite;
}
.rarity-gem--unique {
  background-image: url("../assets/rarity/rarete-unique.png");
  animation: rarityGemPulseUnique 2.4s ease-in-out infinite;
}
@keyframes rarityGemPulse {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 3px rgba(255, 200, 80, .4)); }
  50%      { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 8px rgba(255, 200, 80, .9)); }
}
@keyframes rarityGemPulseUnique {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 3px rgba(255, 70, 70, .45)); }
  50%      { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)) drop-shadow(0 0 9px rgba(255, 70, 70, .95)); }
}


/* =========================================================
   NOM
   ========================================================= */

.name-layer {
  position: absolute;
  z-index: 5;
  left: calc(30.1% + 25px);
  top: calc(2.45% + 3px);
  width: 58.5%;
  height: 6.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2%;
  text-align: center;
}

.name-layer h2 {
  margin: 0;
  width: 100%;
  color: #fff6d7;
font-size: clamp(.90rem, calc(var(--card-w, 180px) * 0.056), 1.74rem);
  font-weight: 800;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding-bottom: 2px;
  text-shadow:
    0 2px 0 #050704,
    2px 0 0 #050704,
    -2px 0 0 #050704,
    0 -2px 0 #050704,
    0 0 12px rgba(255, 241, 184, .24);
}

/* =========================================================
   ICÔNES IDENTITÉ  —  guilde · race · classe
   =========================================================

   ORGANISATION (lecture de haut en bas) :
     A. Socle commun          — taille et rendu des trois médaillons
     B. Ancrages de référence — les 3 positions par défaut
     C. PERSONNAGES           — cadres de guilde : RACE + CLASSE seulement
                                (la guilde EST le cadre : pas de médaillon)
     D. CARTES SKILL          — action / magie / équipement-objet :
                                GUILDE + RACE + CLASSE

   Chaque section a sa sous-partie « réglage » (C.2 pour les personnages,
   D.2 pour les skills) : tous les ajustements se font LÀ, en variables.

   RÈGLE DE RÉGLAGE, valable partout :
     x positif = vers la DROITE  ·  y positif = vers le BAS
     Chaque cadre a ses variables ; les valeurs par défaut reproduisent
     EXACTEMENT le rendu actuel. Toucher une variable ne déplace QUE ce cadre.

   ATTENTION CASCADE : le sélecteur [src$="…"] signifie « se termine par ».
   Donc pyra-frame.png correspond AUSSI à nexus-pyra-frame.png. Les cadres
   bi-guilde doivent donc rester APRÈS les cadres simples (section C.2).
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   A. SOCLE COMMUN
   ───────────────────────────────────────────────────────── */

.identity-slot {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
}

.identity-slot img {
  width: 138%;
  height: 138%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4));
}

/* ─────────────────────────────────────────────────────────
   B. ANCRAGES DE RÉFÉRENCE
   Les trois positions de base. Tout le reste n'est qu'un décalage
   de quelques pixels par rapport à ces ancrages.
   ───────────────────────────────────────────────────────── */

.identity-slot--guild {              /* haut-gauche  */
  top: calc(3.0% - 8px);
  left: calc(4.05% - 6px);
  width: 17.3%;
  aspect-ratio: 1;
}

.identity-slot--class {              /* sous la guilde */
  top: calc(16.5% - 6px);
  left: calc(4.05% - 6px);
  width: 14.3%;
  aspect-ratio: 1;
}

/* La race n'a pas d'ancrage universel : sa position dépend du cadre
   (personnage ou skill). Voir C.1 et D.1. */

/* ─────────────────────────────────────────────────────────
   C. PERSONNAGES  —  RACE + CLASSE
   Pas de médaillon de guilde : sur un personnage, le cadre lui-même
   (pyra-frame, umbra-frame…) porte l'identité de guilde.
   ───────────────────────────────────────────────────────── */

/* C.1 — Position de repli, commune à tous les cadres de personnage.
   Sert de filet si un nouveau cadre n'a pas encore son réglage en C.2. */
.nad-card--character .identity-slot--race {
  top:  calc(3.0% - 6px + var(--perso-race-y, 0px));
  left: calc(18.2% + 7.0px + var(--perso-race-x, 0px));
  width: 14.3%;
  aspect-ratio: 1;
}

/* C.2 — Réglage par cadre de guilde.
   Chaque cadre ne redéfinit QUE ses variables : la position vient de C.1
   et de C.3, jamais recopiée. Ajuster un cadre = changer un nombre ici.
   Valeurs par défaut = rendu actuel à l'identique. */

/* Nexus */
.nad-card--character:has(.frame-layer[src$="nexus-frame.png"]) {
  --perso-race-x:  2.8px;   --perso-race-y:  1.0px;
  --perso-class-x: 1.5px;     --perso-class-y: 2.5px;
}
/* Umbra */
.nad-card--character:has(.frame-layer[src$="umbra-frame.png"]) {
  --perso-race-x:  0.5px;   --perso-race-y:  1.7px;
    --perso-class-y: 1.5px;
}
/* Nym */
.nad-card--character:has(.frame-layer[src$="nym-frame.png"]) {
  --perso-race-x:  0.8px;   --perso-race-y: -0.0px;
  --perso-class-y: -1px;
}
/* Pyra */
.nad-card--character:has(.frame-layer[src$="pyra-frame.png"]) {
  --perso-race-x:  2.3px;   --perso-race-y:  0.7px;
    --perso-class-y: 1.5px;
}
/* Virdis (les deux orthographes de fichier existent) */
.nad-card--character:has(.frame-layer[src$="virdis-frame.png"]),
.nad-card--character:has(.frame-layer[src$="viridis-frame.png"]) {
  --perso-race-x:  2.3px;   --perso-race-y:  1px;
    --perso-class-x: 1px;  --perso-class-y: 1px;
}

/* Bi-guilde — IMPÉRATIVEMENT après Pyra et Virdis :
   [src$="pyra-frame.png"] correspond aussi à « nexus-pyra-frame.png ».
   Étant lus en dernier, ces blocs l'emportent. */
.nad-card--character:has(.frame-layer[src$="nexus-pyra-frame.png"]) {
  --perso-race-x:  1.5px;   --perso-race-y: -2px;
  --perso-class-y: -3px;
}
.nad-card--character:has(.frame-layer[src$="nexus-virdis-frame.png"]) {
  --perso-race-x:  0.5px;   --perso-race-y:  0px;
}

/* C.3 — Classe des personnages : une seule règle pour tous les cadres. */
.nad-card--character .identity-slot--class {
  top:  calc(16.5% - 6px + var(--perso-class-y, 0px));
  left: calc(4.05% - 6px + var(--perso-class-x, 0px));
}

/* ─────────────────────────────────────────────────────────
   D. CARTES SKILL  —  GUILDE + RACE + CLASSE
   Cadres : action · magie · équipement-objet.
   Ces cartes portent les TROIS médaillons (le cadre ne dit pas la guilde).
   ───────────────────────────────────────────────────────── */

/* D.1 — Positions communes à tous les cadres skill. */
.nad-card--skill .identity-slot--guild {
  top:  calc(3.0% - 8px + var(--skill-guild-y, 0px));
  left: calc(4.05% - 6px + var(--skill-guild-x, 0px));
}
.nad-card--skill .identity-slot--race {
  top:  calc(3.0% - 6px + var(--skill-race-y, 0px));
  left: calc(18.2% + 8.8px + var(--skill-race-x, 0px));
  width: 14.3%;
  aspect-ratio: 1;
}
.nad-card--skill .identity-slot--class {
  top:  calc(16.5% - 8px + var(--skill-class-y, 0px));
  left: calc(4.05% - 8px + var(--skill-class-x, 0px));
}

/* D.2 — Réglage par cadre skill (mêmes variables, valeurs différentes).
   0px partout = la carte suit exactement les positions communes de D.1. */

/* Cadre ACTION — aligné sur les positions communes. */
.nad-card--skill.nad-card--frame-action {
  --skill-guild-x: 1px;   --skill-guild-y: 1px;
  --skill-race-x:  0px;   --skill-race-y:  0px;
  --skill-class-x: 1px;   --skill-class-y: 2.5px;
}

/* Cadre MAGIE */
.nad-card--skill.nad-card--frame-magie {
  --skill-guild-x: 0px;   --skill-guild-y: 0px;
  --skill-race-x:  0px;   --skill-race-y:  0px;
  --skill-class-x: 1.6px;   --skill-class-y: 2.1px;
}

/* Cadre ÉQUIPEMENT / OBJET — le même fichier de cadre sert aux deux types.
   C'est le cadre qui demande le plus de recalage (médaillons légèrement décalés). */
.nad-card--skill.nad-card--frame-objet {
  --skill-guild-x: -1.0px;   --skill-guild-y:  0.5px;
  --skill-race-x:  -1.5px;   --skill-race-y:   0px;
  --skill-class-x:  2.0px;   --skill-class-y:  2.0px;
  /* Taille des trois pastilles (1 = inchangé, 1.05 = +5 %). */
  --objet-icon-scale: 1;
}
.nad-card--skill.nad-card--frame-objet .identity-slot img {
  transform: scale(var(--objet-icon-scale, 1));
}

/* =========================================================
   ILLUSTRATION PERSONNAGE
   ========================================================= */

.art-clip {
  position: absolute;
  z-index: 3;
  left: 5.4%;
  top: 8.7%;
  width: 89.3%;
  height: 74.3%;
  overflow: hidden;
  border-radius: 12% 12% 3.5% 3.5% / 7% 7% 2.5% 2.5%;
}

.nad-card--character .art-clip {
  height: 90%;
}

.character-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}

.character-art {
  position: absolute;
  left: calc(49% + 5px);
  bottom: 0;
  width: calc(79% + 15px);
  max-height: 96%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55));
  z-index: 1;
}

.nad-card--character .character-art {
  width: calc(96% + 5px);
  max-height: 100%;
  bottom: -2%;
}

/* GROS DRAGONS (bigArt) sur la CARTE (collection, deck-builder, board…) — règle UNIVERSELLE.
   Une image de dragon rend le sujet minuscule dans le cadre (décor/marge autour) : on l'AGRANDIT
   via scale pour qu'il ait une belle taille. Le scale est réglable par carte via
   --big-art-card-scale (défaut 1.9). Ne s'applique PAS en combat (.cz-card-wrap y est plus
   spécifique et garde le scale combat). Pour un nouveau gros dragon : bigArt:true suffit. */
.nad-card[data-big-art="true"] .character-art {
  max-height: none !important;
  width: 100% !important;
  height: auto !important;
  transform: translateX(-50%) scale(var(--big-art-card-scale, 1.9)) !important;
  transform-origin: center bottom !important;
}

/* =========================================================
   ILLUSTRATION SKILL
   Les cartes Action / Magie / Équipement ont l'image sous le cadre.
   ========================================================= */

.nad-card--skill .frame-layer {
  z-index: 2;
}

.nad-card--skill .identity-slot,
.nad-card--skill .name-layer,
.nad-card--skill .text-window {
  z-index: 6;
}

.nad-card--skill .art-clip {
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
}

.nad-card--skill .skill-art {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 99%;
  height: 99%;
  max-height: none;
  object-fit: cover;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: none;
}

.nad-card--skill .stats-column {
  display: none;
}

/* =========================================================
   FENÊTRE TEXTE
   ========================================================= */

.text-window {
  position: absolute;
  z-index: 6;
  left: max(6px, calc(18.2% - 53px));
  bottom: max(4px, calc(4.2% - 4px));
  width: 72.5%;
  min-height: 21.8%;
  padding: 3.1% 3.4%;
  border: 1px solid rgba(255, 184, 82, .46);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(116, 70, 19, .22), rgba(0, 0, 0, .62)),
    linear-gradient(180deg, rgba(255, 218, 155, .07), rgba(255, 154, 45, .035));
  backdrop-filter: blur(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 170, .22),
    inset 0 0 18px rgba(255, 161, 45, .08),
    0 9px 20px rgba(0, 0, 0, .32);
}

.text-window p {
  margin: 0;
  color: #fff;
  font-size: clamp(.61rem, 1.68vw, .77rem);
  font-weight: 700;
  line-height: 1.13;
  text-shadow:
    1.1px 0 0 #000,
    -1.1px 0 0 #000,
    0 1.1px 0 #000,
    0 -1.1px 0 #000,
    0 2px 6px rgba(0, 0, 0, .85);
}

.text-window p + p { margin-top: 8px; }

.text-window strong { color: #ffba57; }

.type-line {
  color: #ffe4b5 !important;
  font-size: clamp(.71rem, 1.84vw, .85rem) !important;
  letter-spacing: .02em;
}

.enchainement-line {
  color: #fff !important;
  font-style: italic;
  margin-top: 8px;
}

/* Personnages : taille conservée. */
.nad-card--character .text-window {
  left: max(6px, calc(18.2% - 53px));
  bottom: max(4px, calc(4.2% - 4px));
  width: 72.5%;
  min-height: 21.8%;
  padding: 3.1% 3.4%;
}

/* Actions / Magies / Équipements : fenêtre plus large et adaptable. */
.nad-card--skill .text-window {
  z-index: 7;
  left: 5.4%;
  right: 5.6%;
  width: auto;
  bottom: 4.1%;
  min-height: 14%;
  height: auto;
  padding: 3.3% 3.8%;
  border-color: rgba(255, 184, 82, .56);
  background:
    linear-gradient(180deg, rgba(142, 86, 20, .30), rgba(0, 0, 0, .66)),
    linear-gradient(180deg, rgba(255, 222, 160, .10), rgba(255, 154, 45, .045));
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 177, .25),
    inset 0 0 22px rgba(255, 161, 45, .10),
    0 10px 22px rgba(0, 0, 0, .36);
}

.nad-card--skill .text-window p {
  font-size: clamp(.62rem, 1.72vw, .80rem);
  line-height: 1.15;
}

.nad-card--skill .type-line {
  font-size: clamp(.78rem, 1.94vw, .92rem) !important;
}

/* Restrictions visibles dans la collection et le deckbuilding. */
.restriction-line {
  color: #ffe2a6 !important;
  font-style: italic;
  opacity: .96;
}

.nad-card--skill .restriction-line {
  font-size: clamp(.30rem, calc(var(--card-w, 180px) * .043), .68rem) !important;
  line-height: 1.04 !important;
}

/* Références cliquables dans les textes. */
.card-ref {
  appearance: none;
  border: 0;
  padding: 0 .12em;
  color: #e7d28a;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  text-shadow:
    1.1px 0 0 #000,
    -1.1px 0 0 #000,
    0 1.1px 0 #000,
    0 -1.1px 0 #000,
    0 2px 6px rgba(0, 0, 0, .85);
}

.card-ref:hover { color: #fff1b8; }

/* =========================================================
   STATS PERSONNAGES
   ========================================================= */

.stats-column {
  position: absolute;
  z-index: 6;
  right: 2.4%;
  top: calc(24.8% + 85px);
  width: 16.2%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stat-chip {
  position: relative;
  min-height: 76px;
  height: 76px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.stat-chip + .stat-chip { margin-top: -4px; }

.stat-chip img {
  position: relative;
  left: 8px;
  width: 92px;
  height: 97px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .35));
}

.stat-chip span {
  position: absolute;
  top: calc(50% + 5px);
  left: calc(40% - 10px);
  width: 46px;
  text-align: center;
  transform: translateY(-50%);
  color: #fff;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.05em;
  text-shadow:
    2px 0 0 #000,
    -2px 0 0 #000,
    0 2px 0 #000,
    0 -2px 0 #000,
    0 4px 10px rgba(0, 0, 0, .85);
}

.stat-chip--attaque span {
  font-size: 1.58rem;
  top: calc(50% + 8px);
  left: calc(53% - 22px);
  width: 58px;
  text-align: center;
}

.stat-chip--vie span {
  top: calc(50% + 8px);
}

/* =========================================================
   MODAL COLLECTION / MARKET
   La structure visuelle de la modal est dans ui.css.
   Ici, on garde uniquement la taille interne de la carte.
   ========================================================= */

.modal .nad-card,
#modal-card-container .nad-card {
  --card-w: min(78vh * .75, 640px) !important;
  width: min(78vh * .75, 640px) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
  zoom: 1 !important;
  transform: none !important;
}

/* Modal : icônes de stats légèrement remontées pour éviter le cœur coupé. */
.modal .nad-card--character .stats-column,
#modal-card-container .nad-card--character .stats-column {
  top: calc(24.8% + 64px) !important;
}

/* =========================================================
   PREVIEW AU SURVOL
   Utilisé notamment par deckbuilding / hover.
   ========================================================= */

.card-preview {
  position: fixed;
  z-index: 80;
  width: calc(390px * .67) !important;
  height: calc((390px * 4 / 3) * .67) !important;
  overflow: visible !important;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .62));
}

.card-preview[aria-hidden="true"] {
  display: none;
}

.card-preview .nad-card {
  --card-w: 390px !important;
  width: 390px !important;
  min-width: 390px !important;
  max-width: none !important;
  margin: 0 !important;
  zoom: 1 !important;
  transform: scale(.67) !important;
  transform-origin: top left !important;
}

.card-preview .nad-card--skill .name-layer h2 {
  font-size: clamp(.90rem, calc(var(--card-w, 390px) * 0.056), 1.74rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  padding-bottom: 2px !important;
}

.card-preview .nad-card--skill .identity-slot--class {
  top: calc(16.5% - 8px) !important;
  left: calc(4.05% - 8px) !important;
  width: 14.3% !important;
}

.card-preview .nad-card--skill .identity-slot img {
  width: 138% !important;
  height: 138% !important;
}

/* =========================================================
   RESPONSIVE CARTE
   Les media queries de layout Collection sont dans ui.css.
   ========================================================= */

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 18px, 430px);
    padding-top: 18px;
  }

  .page-header {
    display: block;
    padding: 20px;
  }

  .card-count { margin-top: 14px; }

  .toolbar {
    grid-template-columns: 1fr;
  }

  .name-layer {
    left: calc(30% + 8px);
    top: calc(2.2% + 13px);
    width: 56%;
  }

 .name-layer h2 {
  margin: 0;
  width: 100%;
  color: #fff6d7;
  font-size: clamp(.62rem, calc(var(--card-w, 180px) * 0.039), 1.42rem);
  font-weight: 800;
  line-height: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center !important;
  text-shadow:
    0 2px 0 #050704,
    2px 0 0 #050704,
    -2px 0 0 #050704,
    0 -2px 0 #050704,
    0 0 12px rgba(255, 241, 184, .24);
}

  .identity-slot img {
    width: 110%;
    height: 110%;
  }

  /* ─── Mobile : ICÔNES IDENTITÉ ───────────────────────────
     Sur mobile, TOUS les cadres (personnages et skills) partagent la même
     position de race : les huit règles séparées d'origine posaient déjà des
     valeurs identiques. Une seule règle suffit donc.
     Si un cadre devait un jour différer, lui ajouter ici ses variables
     --perso-race-x/y ou --skill-race-x/y, comme sur desktop. */
  .nad-card--character .identity-slot--race,
  .nad-card--skill .identity-slot--race {
    top:  calc(3% + 1px + var(--mobile-race-y, 0px));
    left: calc(18.2% + 10px + var(--mobile-race-x, 0px));
  }

  .text-window {
    left: max(4px, calc(18% - 90px));
    width: 73%;
    bottom: max(4px, calc(4% - 14px));
    min-height: 21%;
  }

  .text-window p {
    font-size: .64rem;
  }

  .stats-column {
    right: 4.2%;
    top: calc(23.8% - 10px);
    width: 16.8%;
    gap: 0;
  }

  .stat-chip {
    min-height: 60px;
    height: 60px;
  }

  .stat-chip + .stat-chip { margin-top: -3px; }

  .stat-chip img {
    left: 6px;
    width: 74px;
    height: 78px;
  }

  .stat-chip span {
    font-size: 1.46rem;
    top: calc(50% - 1px);
    left: calc(58% - 2px);
  }

  .stat-chip--attaque span {
    font-size: 1.08rem;
    left: calc(50% - 2px);
  }

  .modal .nad-card,
  #modal-card-container .nad-card {
    --card-w: min(92vw, 430px) !important;
    width: min(92vw, 430px) !important;
  }

  .card-preview {
    display: none !important;
  }
}

/* Collection — quantités et outil de test */
.collection-dev-footer{display:flex;flex-direction:column;gap:8px;padding:10px 14px 14px;}
.collection-dev-btn{
  width:100%;border:1px solid rgba(216,188,103,.35);border-radius:10px;
  background:linear-gradient(180deg,rgba(216,188,103,.18),rgba(84,62,22,.22));
  color:var(--c-gold,#d8bc67);font-family:'Cinzel',serif;font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.22);transition:filter .15s,transform .15s,border-color .15s;
}
.collection-dev-btn:hover{filter:brightness(1.12);transform:translateY(-1px);border-color:rgba(216,188,103,.65);}
.collection-qty-badge{
  position:absolute;top:8px;right:8px;z-index:20;pointer-events:none;
  min-width:30px;text-align:center;padding:3px 8px;border-radius:999px;
  background:rgba(10,14,22,.82);border:1px solid rgba(216,188,103,.45);
  color:var(--c-gold,#d8bc67);font-family:'Cinzel',serif;font-size:.68rem;font-weight:900;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

/* ============================================================================
 * Cartes FOIL (holographiques) — Phase 1
 * Effet 100 % CSS, clippé par .nad-card { overflow:hidden }. Réutilisable
 * partout où une carte est rendue (collection, deck-builder, combat).
 * ==========================================================================*/
.nad-card--foil { position: relative; }

/* Couche arc-en-ciel diffuse en fondu coloré sur toute la carte. */
.nad-card--foil .foil-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 0, 128, 0.22) 0%,
    rgba(255, 196, 0, 0.20) 20%,
    rgba(0, 255, 170, 0.20) 40%,
    rgba(0, 170, 255, 0.22) 60%,
    rgba(170, 0, 255, 0.22) 80%,
    rgba(255, 0, 128, 0.22) 100%
  );
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  opacity: 0.3;
  animation: foilHue 6s ease-in-out infinite;
}

/* Bande lumineuse qui balaie la carte (reflet holo). */
.nad-card--foil .foil-sheen {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 52%,
    transparent 65%
  );
  background-size: 250% 250%;
  mix-blend-mode: soft-light;
  animation: foilSheen 6s ease-in-out infinite;
}

/* Léger liseré doré pour signaler la carte premium. */
.nad-card--foil::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 226, 150, 0.55),
              inset 0 0 16px rgba(255, 214, 120, 0.35);
}

@keyframes foilHue {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes foilSheen {
  0%   { background-position: 120% 0%; }
  55%  { background-position: -20% 0%; }
  100% { background-position: -20% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .nad-card--foil .foil-overlay,
  .nad-card--foil .foil-sheen { animation: none; }
}

/* Ruban « FOIL » sur la tuile de collection. */
.card-tile .foil-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: Cinzel, serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2a1c00;
  background: linear-gradient(120deg, #fff1b8, #e7c873 55%, #c89a3a);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Tuile « carte dorée » (consommable) dans la collection. */
.foil-token-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  padding: 18px;
  border-radius: 22px;
  text-align: center;
  color: #fff3cf;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 226, 150, 0.18), rgba(12, 24, 48, 0.9)),
    linear-gradient(160deg, rgba(40, 30, 8, 0.6), rgba(8, 16, 34, 0.85));
  border: 1px solid rgba(216, 188, 103, 0.5);
  box-shadow: inset 0 0 24px rgba(255, 214, 120, 0.18);
}
.foil-token-tile .foil-token-emblem {
  width: 78px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.foil-token-tile .foil-token-label {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: #ffe9a8;
}
.foil-token-tile .foil-token-count {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
}
.foil-token-tile .foil-token-hint {
  font-size: 0.68rem;
  color: rgba(255, 243, 207, 0.7);
  line-height: 1.35;
  max-width: 200px;
}

/* ── FOIL : reflets holographiques posés directement sur l'illustration ──
   On ne modifie pas le fichier image : on superpose un dégradé arc-en-ciel et
   une bande lumineuse, clippés à la fenêtre d'illustration (.art-clip), donc
   visibles aussi bien sur les personnages (.character-art) que les skills
   (.skill-art). Le tout reste SOUS le cadre de la carte. */
.nad-card--foil .art-clip { isolation: isolate; }

.nad-card--foil .art-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 0, 128, 0.45) 0%,
    rgba(255, 196, 0, 0.40) 18%,
    rgba(0, 255, 170, 0.42) 38%,
    rgba(0, 170, 255, 0.45) 58%,
    rgba(170, 0, 255, 0.45) 78%,
    rgba(255, 0, 128, 0.45) 100%
  );
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  opacity: 0.5;
  animation: foilHue 6s ease-in-out infinite;
}

.nad-card--foil .art-clip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 49%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.55) 51%,
    transparent 62%
  );
  background-size: 250% 250%;
  mix-blend-mode: soft-light;
  animation: foilSheen 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .nad-card--foil .art-clip::after,
  .nad-card--foil .art-clip::before { animation: none; }
}