/*
 * 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;
}

/* Trois cases du bas : Deploy Cost, Daily Cost, Rarity */
.card-stat {
  position: absolute;
  top: 469px;
  width: 105px;
  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: 135px; background: #fefce8; border-color: #fde047; color: #854d0e; }
.card-stat-rarity { left: 250px; background: #f0fdf4; border-color: #86efac; color: #166534; }

.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; }
/* La case Rarity affiche le nom de la finition */
.card-stat-rarity .card-stat-value { top: 10px; font-size: 15px; line-height: 30px; font-weight: 700; }
.card[data-foil="gold"] .card-stat-rarity .card-stat-value { color: #d97706; }

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

/* 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);
}

/* Fond teinté : le fond prend la couleur du type, le trait devient un filet */
.card[data-shape="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)));
}
.card[data-shape="tinted"] .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; }
}