/*
 * Carte DevCardBattle, reproduite depuis le composant Figma `card` (374×574).
 * Toutes les cotes viennent du fichier Figma ; la carte est dessinée à taille réelle puis
 * mise à l'échelle par `.card-frame` (variable --s).
 *
 * Pour ajouter un type de carte : une variante dans dcb-core + une ligne [data-type] ici.
 */

.card[data-type="resource"] { --type: #38bdf8; }
.card[data-type="incident"] { --type: #f83838; }
.card[data-type="hr"]       { --type: #0800f6; }
.card[data-type="app"]      { --type: #f88838; }
.card[data-type="event"]    { --type: #a538f8; }

/* Mise à l'échelle sans flou de mise en page : le cadre prend la taille réduite,
   la carte garde ses cotes Figma et est scalée depuis le coin haut gauche. */
.card-frame {
  --s: 1;
  width: calc(374px * var(--s));
  height: calc(574px * var(--s));
  flex: none;
}
.card-frame > .card {
  transform: scale(var(--s));
  transform-origin: 0 0;
}

.card {
  /* skin/Light */
  --skin-from: #f8fafc;
  --skin-to: #e2e8f0;
  --block-bg: #fefcff;
  --block-border: #e2e8f0;
  --title: #0f172a;
  --text: #334155;
  --flavor: #334155;
  --art-border: #e2e8f0;

  position: relative;
  width: 374px;
  height: 574px;
  border-radius: 20px;
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.21; /* « normal » d'Inter, comme dans Figma */
  text-align: left;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 30px rgb(2 6 23 / 0.35), 0 2px 6px rgb(2 6 23 / 0.25);
}
.card *, .card *::before, .card *::after { box-sizing: border-box; }

.card[data-skin="dark"] {
  /* skin/Dark */
  --skin-from: #1e293b;
  --skin-to: #020617;
  --block-bg: #0f172a;
  --block-border: #334155;
  --title: #e5e7eb;
  --text: #cbd5f5;
  --flavor: #cbd5f5;
  --art-border: #334155;
}

.card-skin {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(to bottom, var(--skin-from), var(--skin-to));
}

.card-block {
  position: absolute;
  left: 19px;
  width: 336px;
  border: 1px solid var(--block-border);
  border-radius: 12px;
  background: var(--block-bg);
  overflow: hidden;
}

/* cardNameBlock */
.card-name {
  top: 19px;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 88px 0 12px; /* laisse la place au badge du type */
  font-weight: 700;
  font-size: 20px;
  color: var(--title);
  white-space: nowrap;
}
.card-name[data-size="m"] { font-size: 17px; }
.card-name[data-size="s"] { font-size: 14px; }
.card-name span { overflow: hidden; text-overflow: ellipsis; }

/* cardArtBlock */
.card-art {
  top: 89px;
  height: 180px;
  /* contour teinté par la couleur du type, avec ou sans illustration */
  border: 2px solid color-mix(in srgb, var(--type) 25%, var(--art-border));
  background: #fff;
  display: grid;
  place-items: center;
}
.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Carte sans illustration : fond teinté par le type, motif de points, grande icône du type */
.card-art.is-empty {
  background:
    radial-gradient(color-mix(in srgb, var(--type) 35%, transparent) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(160deg, color-mix(in srgb, var(--type) 24%, #fff), color-mix(in srgb, var(--type) 8%, #fff));
}
.card[data-skin="dark"] .card-art.is-empty {
  background:
    radial-gradient(color-mix(in srgb, var(--type) 35%, transparent) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(160deg, color-mix(in srgb, var(--type) 30%, #0f172a), #0b1120);
}
.card-art-icon {
  width: 76px;
  height: 76px;
  color: var(--type);
  opacity: 0.9;
}
/* Ressource humaine (#0800f6) est trop sombre sur fond sombre */
.card[data-skin="dark"][data-type="hr"] .card-art-icon { color: #6d68ff; }

/* cardDescriptionBlock / cardEffectBlock */
.card-description { top: 279px; height: 60px; }
.card-effect      { top: 349px; height: 110px; }

.card-block-title {
  position: absolute;
  top: 4px;
  left: 9px;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--title);
}
.card-block-text {
  position: absolute;
  top: 21px;
  left: 9px;
  right: 8px;
  bottom: 4px;
  margin: 0;
  font-size: 13px;
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: anywhere;
  overflow: hidden;
}

/* Deux cases du bas : Deploy Cost et Daily Cost (336 px = 163 + 10 + 163) */
.card-stat {
  position: absolute;
  top: 469px;
  width: 163px;
  height: 65px;
  border: 1px solid;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}
.card-stat-deploy { left: 19px;  background: #ecfeff; border-color: #67e8f9; color: #0369a1; }
.card-stat-daily  { left: 192px; background: #fefce8; border-color: #fde047; color: #854d0e; }

.card-stat-value {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  font-weight: 800;
  font-size: 28px;
  line-height: 38px;
  font-variant-numeric: tabular-nums;
}
.card-stat-value small { font-size: 15px; font-weight: 700; margin-left: 1px; }

.card-stat-label {
  position: absolute;
  top: 49px;
  left: 0;
  right: 0;
  font-size: 12px;
  white-space: nowrap;
}

/* Taille compacte (champ `size`) : les cases deviennent des chips de 40 px avec icône, et les
   25 px gagnés vont au bloc Effect (110 → 135 px). */
.card[data-size="compact"] .card-effect { height: 135px; }
.card[data-size="compact"] .card-stat {
  top: 494px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  text-align: left;
}
.card[data-size="compact"] .card-stat-value { position: static; font-size: 22px; line-height: 1; }
.card[data-size="compact"] .card-stat-label { position: static; margin-left: auto; font-size: 11px; font-weight: 600; }
.card-stat-icon { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.card-stat-icon svg { width: 18px; height: 18px; }

/* Badge de type sur l'illustration (champ `badge` = image) : pastille de la couleur du type avec
   son icône, en haut à gauche de l'illustration ; le nom prend alors toute la largeur. */
.card[data-badge="image"] .card-name { padding-right: 12px; }
.card-badge {
  position: absolute;
  top: 101px;
  left: 31px;
  z-index: 3;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--type);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgb(2 6 23 / .3);
  pointer-events: none;
}
.card-badge svg { width: 14px; height: 14px; flex: none; }
.card[data-type="resource"] .card-badge { color: #082f49; }

/* Nom sur l'illustration (champ `title` = image) : plus de bloc nom, l'illustration monte de
   70 px et le nom est écrit en bas, sur un dégradé sombre ; le badge du type remonte avec elle. */
.card[data-title="image"] .card-art { top: 19px; height: 250px; }
.card-art-shade {
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(transparent, rgb(2 6 23 / .82));
  pointer-events: none;
}
.card[data-title="image"] .card-block.card-name {
  top: 197px;
  height: 70px;
  z-index: 2;
  align-items: flex-end;
  padding: 0 14px 12px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 24px;
  text-shadow: 0 1px 8px rgb(2 6 23 / .6);
}
.card[data-title="image"] .card-block.card-name[data-size="m"] { font-size: 20px; }
.card[data-title="image"] .card-block.card-name[data-size="s"] { font-size: 17px; }
.card[data-title="image"] .card-badge { top: 31px; }

/* Description (champ `desc_style`). `untitled` : sans titre, le texte commence en haut du bloc.
   `comment` : plus de bloc Description, le bloc Effect monte de 70 px et la description en est
   la première ligne, en commentaire. */
.card[data-desc="untitled"] .card-description .card-block-text { top: 7px; }
.card[data-desc="comment"] .card-effect { top: 279px; height: 180px; }
.card[data-desc="comment"][data-size="compact"] .card-effect { height: 205px; }
.card-comment {
  display: block;
  margin-bottom: 3px;
  padding-left: .95em; /* largeur de « # » : la suite s'aligne sur le texte */
  text-indent: -.95em;
  font-style: italic;
  color: color-mix(in srgb, var(--text) 60%, transparent);
}

/* Cartes citées dans l'effet (champ `refs` = linked) : le nom prend la couleur de son type */
.card-ref {
  --rtype: #94a3b8;
  color: color-mix(in srgb, var(--rtype) 75%, var(--text));
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.card-ref[data-type="resource"] { --rtype: #0ea5e9; }
.card-ref[data-type="incident"] { --rtype: #f83838; }
.card-ref[data-type="hr"]       { --rtype: #4f46e5; }
.card-ref[data-type="app"]      { --rtype: #f88838; }
.card-ref[data-type="event"]    { --rtype: #a538f8; }
.card[data-skin="dark"] .card-ref[data-type="hr"] { --rtype: #6d68ff; }
a.card-ref:hover { text-decoration-style: solid; }

/* Relief (champ `relief` = soft), toutes skins : chaque bloc et chaque case de coût a une ombre
   douce qui le détache du fond, plus marquée sur les fonds sombres. Les couleurs de la skin ne
   changent pas, sauf pour Light seule : fond un peu plus soutenu et bordures plus légères. */
.card[data-relief="soft"] {
  --relief-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 8px 18px -8px rgb(15 23 42 / .18);
}
.card[data-relief="soft"][data-skin="dark"],
.sk .card[data-relief="soft"] {
  --relief-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 2px 4px rgb(0 0 0 / .35), 0 10px 22px -8px rgb(0 0 0 / .6);
}
.card[data-relief="soft"] .card-block,
.card[data-relief="soft"] .card-stat { box-shadow: var(--relief-shadow); }
.card[data-relief="soft"][data-title="image"] .card-block.card-name { box-shadow: none; }
/* Light seule (hors skins de la documentation) : le fond passe par les couleurs de la skin, que
   le background teinté mélange ensuite avec la couleur du type */
.card[data-relief="soft"][data-skin="light"]:not(.sk .card) { --skin-from: #eef2f7; --skin-to: #d9e1ec; }
/* bordures plus légères sur les blocs neutres seulement : l'illustration garde son contour teinté
   par le type et les cases de coût leur couleur */
.card[data-relief="soft"][data-skin="light"]:not(.sk .card) .card-block:not(.card-art) { border-color: #eef2f7; }

/* Bloc Effect façon éditeur de code (champ `effect_style` = code), mêmes cotes que le bloc
   Effect : en-tête avec le nom de fichier (`effect_file`), une ligne YAML par effet. Repris de
   la page Carte DCB v2. Le fond reste sombre quelle que soit la skin. */
.card-code {
  --code-bg: #0b1120;
  --code-head: #111a2e;
  --code-line: #1e293b;
  border-radius: 6px;
  background: var(--code-bg);
  border-color: var(--code-line);
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.card[data-skin="dark"] .card-code { --code-bg: #060a14; --code-head: #0d1424; border-color: #334155; }
.code-head {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  background: var(--code-head);
  border-bottom: 1px solid var(--code-line);
  font-size: 14px;
  color: #94a3b8;
}
.code-file { font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-body {
  list-style: none;
  margin: 0;
  padding: 5px 8px 0 9px;
  font-size: 11px;
  line-height: 15px;
  color: #e2e8f0;
}
.code-body li { display: grid; grid-template-columns: 13px 1fr; }
.code-body li > .y-dash:only-child { grid-column: 1 / -1; }
.code-body li.y-c { display: block; padding-left: 2ch; text-indent: -2ch; margin-bottom: 3px; }
.code-body li.y-c .y-comment { color: #7c8aa3; }
.y-val { min-width: 0; overflow-wrap: anywhere; }
.y-dash { color: #64748b; }
.y-key { color: #7dd3fc; }
.y-num { color: #fdba74; }
.y-comment { color: #64748b; font-style: italic; }
.y-ref { --rtype: #94a3b8; color: color-mix(in srgb, var(--rtype) 65%, #fff); text-decoration: underline dotted; text-underline-offset: 2px; }
.y-ref[data-type="resource"] { --rtype: #38bdf8; }
.y-ref[data-type="incident"] { --rtype: #f83838; }
.y-ref[data-type="hr"]       { --rtype: #6d68ff; }
.y-ref[data-type="app"]      { --rtype: #f88838; }
.y-ref[data-type="event"]    { --rtype: #a538f8; }
.card[data-relief="soft"][data-skin="light"]:not(.sk .card) .card-block.card-code { border-color: var(--code-line); }

/* Texte d'ambiance */
.card-flavor {
  position: absolute;
  top: 546px;
  left: 9px;
  right: 9px;
  height: 18px;
  margin: 0;
  font-size: 13px;
  font-style: italic;
  text-align: center;
  color: var(--flavor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-flavor.is-placeholder { opacity: 0.4; }

/* cardTypeStroke/* : bordure colorée + badge */
.card-stroke {
  position: absolute;
  inset: 7px;
  border: 4px solid var(--type);
  border-radius: 16px;
  pointer-events: none;
}
/*
 * Styles de contour (champ `shape`). `solid` est le trait plein ci-dessus ; les autres
 * réécrivent `.card-stroke` (et parfois le fond) via [data-shape].
 */
/* Néon : trait fin avec halo de la couleur du type */
.card[data-shape="neon"] .card-stroke {
  border-width: 2px;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--type) 60%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--type) 35%, transparent);
}

/* Dégradé et reflet qui tourne : trait dessiné par un fond découpé au masque */
.card[data-shape="gradient"] .card-stroke,
.card[data-shape="sweep"] .card-stroke {
  border: 0;
  padding: 3px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.card[data-shape="gradient"] .card-stroke {
  background: linear-gradient(135deg,
    var(--type) 0%,
    color-mix(in srgb, var(--type) 35%, #fff) 45%,
    var(--type) 75%,
    color-mix(in srgb, var(--type) 70%, #000) 100%);
}
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes dcb-sweep { to { --sweep: 360deg; } }
.card[data-shape="sweep"] .card-stroke {
  padding: 2.5px;
  background:
    conic-gradient(from var(--sweep),
      transparent 0deg, var(--type) 40deg, color-mix(in srgb, var(--type) 30%, #fff) 60deg,
      var(--type) 80deg, transparent 130deg, transparent 360deg),
    color-mix(in srgb, var(--type) 35%, transparent);
  animation: dcb-sweep 6s linear infinite;
  /* dans la galerie, le reflet ne tourne qu'au survol */
  animation-play-state: paused;
}
.card-frame:hover > .card[data-shape="sweep"] .card-stroke,
.detail-card > .card[data-shape="sweep"] .card-stroke,
#preview .card[data-shape="sweep"] .card-stroke { animation-play-state: running; }

/* Double filet */
.card[data-shape="double"] .card-stroke { border-width: 2px; }
.card[data-shape="double"] .card-stroke::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--type) 45%, transparent);
  border-radius: 11px;
}

/* Coins de viseur : seuls les coins du trait restent, reliés par un filet fin */
.card[data-shape="corners"] .card-stroke {
  -webkit-mask:
    linear-gradient(#000 0 0) top left / 56px 56px no-repeat,
    linear-gradient(#000 0 0) top right / 56px 56px no-repeat,
    linear-gradient(#000 0 0) bottom left / 56px 56px no-repeat,
    linear-gradient(#000 0 0) bottom right / 56px 56px no-repeat;
  mask:
    linear-gradient(#000 0 0) top left / 56px 56px no-repeat,
    linear-gradient(#000 0 0) top right / 56px 56px no-repeat,
    linear-gradient(#000 0 0) bottom left / 56px 56px no-repeat,
    linear-gradient(#000 0 0) bottom right / 56px 56px no-repeat;
}
.card[data-shape="corners"] .card-skin {
  outline: 1px solid color-mix(in srgb, var(--type) 40%, transparent);
  outline-offset: -9px;
}

/* Coins coupés : carte et trait biseautés (carte 374 × 574, trait 360 × 560) */
.card[data-shape="chamfer"] {
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px),
                     calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}
.card-frame:has(> .card[data-shape="chamfer"]) { filter: drop-shadow(0 8px 18px rgb(2 6 23 / 0.45)); }
.card[data-shape="chamfer"] .card-skin { border-radius: 0; }
.card[data-shape="chamfer"] .card-stroke {
  border: 0;
  border-radius: 0;
  background: var(--type);
  clip-path: polygon(evenodd,
    16px 0, 344px 0, 360px 16px, 360px 544px, 344px 560px, 16px 560px, 0 544px, 0 16px, 16px 0,
    17.5px 3px, 3px 17.5px, 3px 542.5px, 17.5px 557px, 342.5px 557px, 357px 542.5px, 357px 17.5px, 342.5px 3px, 17.5px 3px);
}

/* Barre d'accent : filet fin et barre épaisse en haut */
.card[data-shape="topbar"] .card-stroke {
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--type) 70%, transparent);
}
.card[data-shape="topbar"] .card-stroke::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 60px;
  right: 60px;
  height: 5px;
  border-radius: 0 0 5px 5px;
  background: var(--type);
  box-shadow: 0 0 10px color-mix(in srgb, var(--type) 55%, transparent);
}

/* Background teinté (champ `background`) : le fond prend la couleur du type ; le contour reste
   celui choisi. Mélangé aux couleurs de la skin (claire, sombre, relief). */
.card[data-bg="tinted"] .card-skin {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--type) 22%, var(--skin-from)),
    color-mix(in srgb, var(--type) 8%, var(--skin-to)));
}
/* Filet : trait fin de 1 px de la couleur du type */
.card[data-shape="thin"] .card-stroke {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--type) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .card[data-shape="sweep"] .card-stroke { animation: none; }
}

.card-type {
  position: absolute;
  top: 19px;
  left: 270px;
  width: 76px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  text-align: center;
  color: var(--type);
  pointer-events: none;
}
.card-type span { display: block; }

@keyframes dcb-sheen {
  0%, 55% { transform: translateX(-60%); }
  100%    { transform: translateX(60%); }
}

/*
 * Finitions holographiques (champ `foil`), indépendantes de la rareté.
 *
 * Trois couches au-dessus de la carte :
 *   ::before            voile irisé pastel sur toute la carte
 *   ::after             motif (étoiles, paillettes, éclats) découpé dans un dégradé arc-en-ciel
 *   .card-foil-glare    reflet lumineux qui suit la souris
 *
 * --mx / --my : position du reflet (0% à 100%). Animées au repos, pilotées par app.js au survol.
 * Textures : static/foil/*.svg, générées par tools/gen_foil.py.
 */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 20%; }

.card {
  --holo: linear-gradient(
    120deg,
    #ff7eb6 0%, #ffd27e 14%, #fff59e 24%, #7effa8 38%, #6ee7ff 52%,
    #8b9bff 66%, #d77eff 80%, #ff7eb6 100%
  );
  --holo-pastel: linear-gradient(
    125deg,
    #fbcfe8 0%, #e9d5ff 20%, #bae6fd 40%, #a7f3d0 55%, #fef3c7 70%, #e9d5ff 85%, #fbcfe8 100%
  );
  /* Peau claire : le voile assombrit légèrement le blanc ; peau sombre : il l'éclaire. */
  --foil-blend: multiply;
  --foil-veil: 0.42;
}
.card[data-skin="dark"] {
  --foil-blend: screen;
  --foil-veil: 0.14;
}

.card:not([data-foil="basic"]) {
  animation: dcb-holo-idle 9s ease-in-out infinite alternate;
}
.card.is-tracking { animation: none; }

@keyframes dcb-holo-idle {
  0%   { --mx: 15%; --my: 10%; }
  50%  { --mx: 85%; --my: 55%; }
  100% { --mx: 40%; --my: 95%; }
}

.card-foil {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
}

.card-foil::before,
.card-foil::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
}

.card-foil::before {
  background-image: var(--holo-pastel);
  mix-blend-mode: var(--foil-blend);
  opacity: var(--foil-veil);
}

.card-foil::after {
  background-image: var(--holo);
  /* le motif se décale un peu à contresens du voile : effet de profondeur */
  background-position: calc(100% - var(--mx)) calc(100% - var(--my));
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: 0.75;
  filter: saturate(1.3) brightness(1.05);
}

.card[data-foil="stars"] .card-foil::after {
  -webkit-mask-image: url("/static/foil/stars.svg");
  mask-image: url("/static/foil/stars.svg");
  -webkit-mask-size: 150px 150px;
  mask-size: 150px 150px;
}
.card[data-foil="glitter"] .card-foil::after {
  -webkit-mask-image: url("/static/foil/glitter.svg");
  mask-image: url("/static/foil/glitter.svg");
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
  opacity: 0.95;
}
.card[data-foil="shards"] .card-foil::after {
  -webkit-mask-image: url("/static/foil/shards.svg");
  mask-image: url("/static/foil/shards.svg");
  -webkit-mask-size: 220px 220px;
  mask-size: 220px 220px;
  opacity: 0.6;
}
/* Irisé : pas de motif, un voile plus marqué avec des bandes de lumière diagonales */
.card[data-foil="rainbow"] {
  --foil-veil: 0.75;
}
.card[data-foil="rainbow"][data-skin="dark"] {
  --foil-veil: 0.3;
}
.card[data-foil="rainbow"] .card-foil::after {
  background-image: var(--holo);
  mix-blend-mode: var(--foil-blend);
  opacity: 0.3;
  filter: none;
}

/* Gold : dégradé « diamant » du Figma (foilLayer/Gold) à 25%, liseré doré et reflet qui balaie
   la carte. Pas de voile irisé ni de motif. */
.card[data-foil="gold"] .card-foil {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 374 574' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><g transform='matrix(-37.4 57.4 -37.4 -24.369 374 0)' opacity='0.25'><rect height='133.38' width='73.178' fill='url(%23grad)' id='quad' shape-rendering='crispEdges'/><use href='%23quad' transform='scale(1 -1)'/><use href='%23quad' transform='scale(-1 1)'/><use href='%23quad' transform='scale(-1 -1)'/></g><defs><linearGradient id='grad' gradientUnits='userSpaceOnUse' x2='5' y2='5'><stop stop-color='rgba(255,204,0,1)' offset='0'/><stop stop-color='rgba(255,188,10,1)' offset='0.25'/><stop stop-color='rgba(255,173,20,1)' offset='0.5'/><stop stop-color='rgba(255,141,40,1)' offset='1'/></linearGradient></defs></svg>");
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 2px rgb(255 204 0 / 0.55);
}
.card[data-foil="gold"] .card-foil::before { content: none; }
.card[data-foil="gold"] .card-foil::after {
  inset: -40% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 236 170 / 0.35) 50%, transparent 58%);
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
  opacity: 1;
  transform: translateX(-60%);
  animation: dcb-sheen 5s ease-in-out infinite;
}

.card-foil-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx) var(--my),
    rgb(255 255 255 / 0.65) 0%,
    rgb(255 255 255 / 0.18) 22%,
    transparent 48%
  );
  mix-blend-mode: soft-light;
}
.card[data-skin="dark"] .card-foil-glare { mix-blend-mode: screen; opacity: 0.45; }

/* Inclinaison 3D au survol (variables posées par app.js sur .card-frame) */
.card-frame {
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}
.card-frame.is-tracking { transition: transform 60ms linear; }

@media (prefers-reduced-motion: reduce) {
  .card:not([data-foil="basic"]) { animation: none; }
  .card-frame { transform: none; transition: none; }
}