{# Générateur de carte de personnage — partial partagé NS + CSF.
   Consomme les globales JS du simulateur : currentChar, currentLevel, equipped,
   activePassives, activeCharStatuses, ELEMENTS, SKILLS, STAT_KEYS, STAT_META,
   getCharFinalStats(). Modal + html2canvas côté client. #}
<style>
  .card-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 9998; padding: 20px; overflow: auto;
  }
  .card-modal {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    max-width: 100%;
  }
  .card-modal-body { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; flex-wrap: wrap; justify-content: center; }
  .card-modal-actions { display: flex; gap: 10px; }
  .csw-picker {
    width: 280px; max-height: 660px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
    color: var(--text); font-size: .85rem;
  }
  .csw-picker-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .csw-picker-count { font-size: .78rem; color: var(--muted); margin-left: auto; }
  .csw-picker-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .csw-picker-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: 5px; cursor: pointer; user-select: none;
    transition: background .12s;
  }
  .csw-picker-item:hover { background: var(--bg); }
  .csw-picker-item.disabled { opacity: .45; cursor: not-allowed; }
  .csw-picker-item.disabled:hover { background: transparent; }
  .csw-picker-item input[type="checkbox"] { margin: 0; cursor: pointer; flex-shrink: 0; }
  .csw-picker-item.disabled input[type="checkbox"] { cursor: not-allowed; }
  .csw-picker-icon { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); image-rendering: pixelated; flex-shrink: 0; }
  .csw-picker-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .csw-picker-level { font-size: .72rem; color: var(--muted); flex-shrink: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; }
  .csw-picker-section {
    display: flex; flex-direction: column; gap: 6px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  .csw-picker-section-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .csw-picker-select {
    background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
    color: #fff; padding: 6px 8px; font-size: .85rem; outline: none;
  }
  .csw-picker-select:focus { border-color: var(--accent2); }
  .card-modal-btn {
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 18px; color: var(--text); font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
  }
  .card-modal-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .card-modal-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .card-modal-btn.primary:hover { filter: brightness(1.1); }
  .card-modal-btn { display: inline-flex; align-items: center; gap: 8px; }
  .card-modal-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

  /* Carte 320×660 — reproduit la maquette (Manrope + JetBrains Mono, thème dark).
     Hauteur portée à 660 pour caser 8 sorts sélectionnés sans clip. */
  #csw-card {
    width: 320px; height: 660px; border-radius: 19px; padding: 2px;
    background: #d4af6a;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); box-sizing: border-box;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  #csw-card * { box-sizing: border-box; }
  .csw-card-inner {
    width: 100%; height: 100%; border-radius: 17px; background: #111318;
    overflow: hidden; position: relative; display: flex; flex-direction: column;
  }
  .csw-header { position: relative; height: 130px; flex-shrink: 0; background: #1a1d24; overflow: hidden; }
  .csw-portrait-bg {
    position: absolute; inset: 0;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    pointer-events: none;
  }
  .csw-portrait {
    position: relative; width: 100%; height: 100%; display: block;
    background-repeat: no-repeat; background-position: center top;
    background-size: contain;
  }
  .csw-portrait-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #3a3f4a; font-size: 40px; }
  .csw-header-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,16,0) 35%, rgba(11,12,16,0.95) 100%); pointer-events: none; }
  .csw-elements { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
  .csw-elem-badge {
    width: 26px; height: 26px; border-radius: 7px;
    background: rgba(17,19,24,0.7); display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff; font-weight: 700;
  }
  .csw-elem-badge img { width: 20px; height: 20px; image-rendering: pixelated; }
  .csw-header-text { position: absolute; left: 16px; bottom: 10px; right: 16px; }
  .csw-name {
    font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .csw-sub {
    font-size: 11px; font-weight: 600; color: #c7cad1;
    letter-spacing: 0.6px; text-transform: uppercase; margin-top: 2px;
  }
  .csw-stats-grid {
    padding: 10px 14px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; flex-shrink: 0;
  }
  .csw-stat {
    display: flex; flex-direction: column; gap: 1px; align-items: center;
    background: #15171d; border: 1px solid #24272f; border-radius: 8px; padding: 5px 4px;
  }
  .csw-stat-value { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: #f2f3f5; }
  .csw-stat-label { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; color: #5b6270; text-transform: uppercase; }
  .csw-section-title {
    font-size: 9.5px; font-weight: 700; letter-spacing: 1px; color: #5b6270; text-transform: uppercase;
  }
  .csw-skills-wrap { padding: 10px 14px 0; display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 0; }
  .csw-skills { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
  .csw-skill {
    display: flex; align-items: center; gap: 6px;
    background: #15171d; border: 1px solid #24272f; border-radius: 7px; padding: 4px 7px;
  }
  .csw-skill-icon { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #2a2e38; background: #1c1f26; flex-shrink: 0; image-rendering: pixelated; }
  .csw-skill-name { font-size: 11px; font-weight: 600; color: #e4e6ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
  .csw-skill-elem { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; image-rendering: pixelated; }
  .csw-passives-wrap { padding: 6px 14px 0; display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
  .csw-passives { display: flex; flex-direction: column; gap: 4px; }
  .csw-passive {
    display: flex; align-items: center; gap: 6px;
    background: #15171d; border: 1px solid #24272f; border-radius: 7px; padding: 4px 7px;
  }
  .csw-passive-icon { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #2a2e38; background: #1c1f26; flex-shrink: 0; image-rendering: pixelated; }
  .csw-passive-name { font-size: 10.5px; font-weight: 600; color: #c7cad1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .csw-equip-wrap {
    padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 5px;
    border-top: 1px solid #1e2129; flex-shrink: 0;
  }
  .csw-equip-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .csw-equip-icon { width: 24px; height: 24px; border-radius: 5px; border: 1px solid #24272f; background: #15171d; image-rendering: pixelated; flex-shrink: 0; }
  .csw-equip-empty { font-size: 11px; color: #5b6270; }
</style>

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
  // Charge la police une seule fois via <link> pour que html2canvas la trouve.
  (function loadCardFonts() {
    if (document.getElementById('cswCardFonts')) return;
    const preconnect1 = document.createElement('link');
    preconnect1.rel = 'preconnect'; preconnect1.href = 'https://fonts.googleapis.com';
    document.head.appendChild(preconnect1);
    const preconnect2 = document.createElement('link');
    preconnect2.rel = 'preconnect'; preconnect2.href = 'https://fonts.gstatic.com'; preconnect2.crossOrigin = '';
    document.head.appendChild(preconnect2);
    const link = document.createElement('link');
    link.id = 'cswCardFonts'; link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&family=Manrope:wght@400;600;700;800&display=swap';
    document.head.appendChild(link);
  })();

  // Constante partagée picker + carte : max 8 sorts affichés.
  const CSW_MAX_SPELLS = 8;
  const CSW_PASSIVE_SKILL_TYPE = 3;

  // Presets de fond de portrait — auto-découverts dans `public/images/card_backgrounds/`
  // via l'extension Twig `card_backgrounds()`. Ajouter un fichier au dossier
  // pour proposer une nouvelle option. « Aucun » est toujours en tête.
  const CSW_PORTRAIT_BACKGROUNDS = [
    { key: 'none', label: 'Aucun', url: null },
    {% for bg in card_backgrounds() %}
    { key: {{ bg.key|json_encode|raw }}, label: {{ bg.label|json_encode|raw }}, url: {{ bg.url|json_encode|raw }} },
    {% endfor %}
  ];

  // Pool des sorts sélectionnables par l'utilisateur — tout ce que le perso
  // peut apprendre (learnSpells + learnByAtoutsSpells), hors passifs et natifs.
  // Trié par niveau croissant, dédoublonné.
  function cswGetLearnablePool(currentChar, SKILLS) {
    const entries = new Map(); // skillId → level minimal d'apprentissage
    (currentChar.learnSpells || []).forEach(e => {
      const lv = e.level || 0;
      if (!entries.has(e.skillId) || entries.get(e.skillId) > lv) entries.set(e.skillId, lv);
    });
    (currentChar.learnByAtoutsSpells || []).forEach(id => {
      if (!entries.has(id)) entries.set(id, null); // pas de niveau — via Atouts
    });
    const nativeSet = new Set(currentChar.nativePassives || []);
    return [...entries.entries()]
      .map(([id, level]) => ({ skill: SKILLS.find(s => s.id === id), level }))
      .filter(x => x.skill && x.skill.skillType !== CSW_PASSIVE_SKILL_TYPE && !nativeSet.has(x.skill.id))
      .sort((a, b) => (a.level ?? 999) - (b.level ?? 999) || a.skill.name.localeCompare(b.skill.name));
  }

  // Sélection par défaut : premiers sorts appris jusqu'au niveau courant, cap 8.
  function cswDefaultSelectedSpellIds(currentChar, currentLevel, SKILLS) {
    return cswGetLearnablePool(currentChar, SKILLS)
      .filter(x => x.level != null && x.level <= currentLevel)
      .slice(0, CSW_MAX_SPELLS)
      .map(x => x.skill.id);
  }

  // Construit la carte DOM à partir d'un contexte fourni par le simulateur.
  // `ctx` doit exposer : currentChar, currentLevel, equipped, activePassives,
  // SLOTS, STAT_KEYS, STAT_META, ELEMENTS, SKILLS, ASSET_BASE, stats (final).
  // `selectedSpellIds` optionnel : Set/Array d'IDs sélectionnés par l'utilisateur.
  // Sinon → sélection par défaut (sorts appris jusqu'au niveau courant, cap 8).
  // `portraitBgUrl` optionnel : URL absolue d'une image de fond derrière le portrait.
  // Retourne le nœud racine `#csw-card` pour capture html2canvas.
  window.buildCswCardDom = function (ctx, buildName, selectedSpellIds, portraitBgUrl) {
    const currentChar = ctx.currentChar;
    if (!currentChar) return null;
    const {
      currentLevel, equipped, activePassives, SLOTS,
      STAT_KEYS, STAT_META, ELEMENTS, SKILLS, ASSET_BASE, stats,
    } = ctx;

    // Éléments du perso : couleur + iconUrl.
    const charElems = (currentChar.elementalTypes || [])
      .map(elId => ELEMENTS.find(e => e.id === elId))
      .filter(Boolean)
      .slice(0, 2);
    const colorA = charElems[0]?.color || '#d4af6a';
    const colorB = charElems[1]?.color || colorA;

    // Sorts : sélection utilisateur, ordre stable via le pool trié.
    const selectedSet = new Set(selectedSpellIds || cswDefaultSelectedSpellIds(currentChar, currentLevel, SKILLS));
    const nativeSet = new Set(currentChar.nativePassives || []);
    const activeSet = new Set(activePassives || []);
    const pool = cswGetLearnablePool(currentChar, SKILLS);
    const spellList = pool
      .filter(x => selectedSet.has(x.skill.id))
      .slice(0, CSW_MAX_SPELLS)
      .map(x => x.skill);
    // Passifs cochés uniquement (natifs exclus) — logique inchangée.
    const passiveList = [...activeSet]
      .filter(id => !nativeSet.has(id))
      .map(id => SKILLS.find(s => s.id === id))
      .filter(Boolean)
      .slice(0, 3);

    // Équipement : ordre stable via SLOTS.
    const equipList = SLOTS
      .map(slot => equipped[slot.key])
      .filter(Boolean)
      .slice(0, 9);

    const card = document.createElement('div');
    card.id = 'csw-card';
    card.style.background = charElems.length > 1
      ? 'linear-gradient(150deg, ' + colorA + ', ' + colorB + ')'
      : colorA;

    const inner = document.createElement('div');
    inner.className = 'csw-card-inner';
    card.appendChild(inner);

    // Header (portrait + éléments + nom)
    const header = document.createElement('div');
    header.className = 'csw-header';
    // Fond derrière le portrait — sélectionné par l'utilisateur via le picker.
    if (portraitBgUrl) {
      const bg = document.createElement('div');
      bg.className = 'csw-portrait-bg';
      bg.style.backgroundImage = 'url("' + portraitBgUrl + '")';
      header.appendChild(bg);
    }
    if (currentChar.appearance) {
      // <div> avec background-image — html2canvas respecte background-size:contain
      // là où il ignore object-fit sur <img>.
      const portrait = document.createElement('div');
      portrait.className = 'csw-portrait';
      portrait.style.backgroundImage = 'url("' + ASSET_BASE + currentChar.appearance + '")';
      header.appendChild(portrait);
    } else {
      const ph = document.createElement('div');
      ph.className = 'csw-portrait-ph'; ph.textContent = '☠';
      header.appendChild(ph);
    }
    const fade = document.createElement('div');
    fade.className = 'csw-header-fade';
    header.appendChild(fade);

    if (charElems.length) {
      const elWrap = document.createElement('div');
      elWrap.className = 'csw-elements';
      charElems.forEach(e => {
        const badge = document.createElement('div');
        badge.className = 'csw-elem-badge';
        badge.style.border = '1.5px solid ' + (e.color || '#d4af6a');
        badge.title = e.name;
        if (e.iconUrl) {
          const img = document.createElement('img');
          img.src = e.iconUrl; img.alt = ''; img.crossOrigin = 'anonymous';
          badge.appendChild(img);
        } else {
          badge.textContent = (e.name || '').slice(0, 3);
        }
        elWrap.appendChild(badge);
      });
      header.appendChild(elWrap);
    }

    const headerText = document.createElement('div');
    headerText.className = 'csw-header-text';
    const nameEl = document.createElement('div');
    nameEl.className = 'csw-name'; nameEl.textContent = currentChar.name;
    const subEl = document.createElement('div');
    subEl.className = 'csw-sub'; subEl.textContent = 'Niveau ' + currentLevel;
    headerText.appendChild(nameEl); headerText.appendChild(subEl);
    header.appendChild(headerText);
    inner.appendChild(header);

    // Stats
    const statsGrid = document.createElement('div');
    statsGrid.className = 'csw-stats-grid';
    STAT_KEYS.forEach(k => {
      const cell = document.createElement('div');
      cell.className = 'csw-stat';
      const v = document.createElement('span');
      v.className = 'csw-stat-value'; v.textContent = String(stats[k] ?? 0);
      const l = document.createElement('span');
      l.className = 'csw-stat-label'; l.textContent = STAT_META[k]?.label || k;
      cell.appendChild(v); cell.appendChild(l);
      statsGrid.appendChild(cell);
    });
    inner.appendChild(statsGrid);

    // Passifs cochés (« Passifs secondaires » du simulateur) — sans les natifs.
    if (passiveList.length) {
      const pWrap = document.createElement('div');
      pWrap.className = 'csw-passives-wrap';
      const pTitle = document.createElement('div');
      pTitle.className = 'csw-section-title'; pTitle.textContent = 'Passifs';
      pWrap.appendChild(pTitle);
      const pList = document.createElement('div');
      pList.className = 'csw-passives';
      passiveList.forEach(sk => {
        const row = document.createElement('div');
        row.className = 'csw-passive';
        const img = document.createElement('img');
        img.className = 'csw-passive-icon';
        img.src = ASSET_BASE + 'images/passive.png';
        img.alt = '';
        row.appendChild(img);
        const n = document.createElement('span');
        n.className = 'csw-passive-name'; n.textContent = sk.name;
        row.appendChild(n);
        pList.appendChild(row);
      });
      pWrap.appendChild(pList);
      inner.appendChild(pWrap);
    }

    // Sorts (compétences apprises hors passifs)
    const skWrap = document.createElement('div');
    skWrap.className = 'csw-skills-wrap';
    const skTitle = document.createElement('div');
    skTitle.className = 'csw-section-title'; skTitle.textContent = 'Sorts';
    skWrap.appendChild(skTitle);
    const skList = document.createElement('div');
    skList.className = 'csw-skills';
    spellList.forEach(sk => {
      const row = document.createElement('div');
      row.className = 'csw-skill';
      if (sk.iconUrl) {
        const img = document.createElement('img');
        img.className = 'csw-skill-icon'; img.src = sk.iconUrl; img.alt = ''; img.crossOrigin = 'anonymous';
        row.appendChild(img);
      } else {
        const ph = document.createElement('div');
        ph.className = 'csw-skill-icon';
        row.appendChild(ph);
      }
      const n = document.createElement('span');
      n.className = 'csw-skill-name'; n.textContent = sk.name;
      row.appendChild(n);
      // Badge d'élément du sort — petite icône colorée à droite.
      const elem = sk.elementId ? ELEMENTS.find(e => e.id === sk.elementId) : null;
      if (elem && elem.iconUrl) {
        const eimg = document.createElement('img');
        eimg.className = 'csw-skill-elem';
        eimg.src = elem.iconUrl; eimg.alt = ''; eimg.title = elem.name || '';
        eimg.crossOrigin = 'anonymous';
        row.appendChild(eimg);
      }
      skList.appendChild(row);
    });
    skWrap.appendChild(skList);
    inner.appendChild(skWrap);

    // Équipement
    const eqWrap = document.createElement('div');
    eqWrap.className = 'csw-equip-wrap';
    const eqTitle = document.createElement('div');
    eqTitle.className = 'csw-section-title'; eqTitle.textContent = 'Équipement';
    eqWrap.appendChild(eqTitle);
    const eqRow = document.createElement('div');
    eqRow.className = 'csw-equip-row';
    if (equipList.length === 0) {
      const empty = document.createElement('span');
      empty.className = 'csw-equip-empty'; empty.textContent = 'Aucun équipement';
      eqRow.appendChild(empty);
    } else {
      equipList.forEach(item => {
        if (item.iconUrl) {
          const img = document.createElement('img');
          img.className = 'csw-equip-icon'; img.src = item.iconUrl; img.alt = ''; img.crossOrigin = 'anonymous';
          eqRow.appendChild(img);
        } else {
          const ph = document.createElement('div');
          ph.className = 'csw-equip-icon';
          eqRow.appendChild(ph);
        }
      });
    }
    eqWrap.appendChild(eqRow);
    inner.appendChild(eqWrap);

    return card;
  };

  // Ouvre le modal contenant la carte + picker de sorts + bouton téléchargement.
  // `ctx` : cf. buildCswCardDom.
  window.openBuildCardModal = function (ctx, buildName) {
    if (!ctx || !ctx.currentChar) {
      if (typeof showToast === 'function') showToast('Sélectionne d\'abord un personnage.', 'error');
      return;
    }
    const { currentChar, currentLevel, SKILLS } = ctx;
    // État local du picker — mute la Set, re-render à chaque change.
    const selectedSpellIds = new Set(cswDefaultSelectedSpellIds(currentChar, currentLevel, SKILLS));
    const pool = cswGetLearnablePool(currentChar, SKILLS);
    let selectedBgKey = 'none'; // Fond de portrait sélectionné.
    function resolveBgUrl(key) {
      // Les URLs viennent déjà résolues par asset() côté Twig (extension
      // CardBackgroundsExtension) — pas de préfixe ASSET_BASE à ajouter.
      const preset = CSW_PORTRAIT_BACKGROUNDS.find(b => b.key === key);
      return preset ? preset.url : null;
    }

    const overlay = document.createElement('div');
    overlay.className = 'card-modal-overlay';
    const modal = document.createElement('div');
    modal.className = 'card-modal';

    const body = document.createElement('div');
    body.className = 'card-modal-body';
    modal.appendChild(body);

    // ── Carte : conteneur qui se re-remplit à chaque change du picker.
    const cardHolder = document.createElement('div');
    body.appendChild(cardHolder);

    function renderCard() {
      cardHolder.innerHTML = '';
      const card = window.buildCswCardDom(ctx, buildName, selectedSpellIds, resolveBgUrl(selectedBgKey));
      if (card) cardHolder.appendChild(card);
    }
    renderCard();

    // ── Picker : sélecteur de fond + liste des sorts apprenables + compteur X/8.
    const picker = document.createElement('div');
    picker.className = 'csw-picker';

    // Section « Fond du portrait » — presets définis dans CSW_PORTRAIT_BACKGROUNDS.
    const bgSection = document.createElement('div');
    bgSection.className = 'csw-picker-section';
    const bgLabel = document.createElement('label');
    bgLabel.className = 'csw-picker-section-label'; bgLabel.textContent = 'Fond du portrait';
    const bgSelect = document.createElement('select');
    bgSelect.className = 'csw-picker-select';
    CSW_PORTRAIT_BACKGROUNDS.forEach(b => {
      const opt = document.createElement('option');
      opt.value = b.key; opt.textContent = b.label;
      bgSelect.appendChild(opt);
    });
    bgSelect.value = selectedBgKey;
    bgSelect.addEventListener('change', () => {
      selectedBgKey = bgSelect.value;
      renderCard();
    });
    bgSection.appendChild(bgLabel); bgSection.appendChild(bgSelect);
    picker.appendChild(bgSection);

    const head = document.createElement('div');
    head.className = 'csw-picker-head';
    const hTitle = document.createElement('div');
    hTitle.className = 'csw-picker-title'; hTitle.textContent = 'Sorts affichés';
    const hCount = document.createElement('div');
    hCount.className = 'csw-picker-count';
    head.appendChild(hTitle); head.appendChild(hCount);
    picker.appendChild(head);

    function refreshPickerState() {
      hCount.textContent = selectedSpellIds.size + ' / ' + CSW_MAX_SPELLS;
      const full = selectedSpellIds.size >= CSW_MAX_SPELLS;
      picker.querySelectorAll('.csw-picker-item').forEach(row => {
        const cb = row.querySelector('input[type="checkbox"]');
        const disabled = full && !cb.checked;
        row.classList.toggle('disabled', disabled);
        cb.disabled = disabled;
      });
    }

    if (pool.length === 0) {
      const empty = document.createElement('div');
      empty.style.cssText = 'color:var(--muted);font-size:.8rem;padding:8px 4px;';
      empty.textContent = 'Ce personnage n\'apprend aucun sort.';
      picker.appendChild(empty);
    } else {
      pool.forEach(({ skill, level }) => {
        const row = document.createElement('label');
        row.className = 'csw-picker-item';
        const cb = document.createElement('input');
        cb.type = 'checkbox';
        cb.checked = selectedSpellIds.has(skill.id);
        cb.addEventListener('change', () => {
          if (cb.checked) {
            if (selectedSpellIds.size >= CSW_MAX_SPELLS) { cb.checked = false; return; }
            selectedSpellIds.add(skill.id);
          } else {
            selectedSpellIds.delete(skill.id);
          }
          refreshPickerState();
          renderCard();
        });
        row.appendChild(cb);
        if (skill.iconUrl) {
          const img = document.createElement('img');
          img.className = 'csw-picker-icon'; img.src = skill.iconUrl; img.alt = '';
          row.appendChild(img);
        } else {
          const ph = document.createElement('div');
          ph.className = 'csw-picker-icon';
          row.appendChild(ph);
        }
        const n = document.createElement('span');
        n.className = 'csw-picker-name'; n.textContent = skill.name;
        row.appendChild(n);
        const lv = document.createElement('span');
        lv.className = 'csw-picker-level';
        lv.textContent = level == null ? 'Atouts' : ('niv. ' + level);
        row.appendChild(lv);
        picker.appendChild(row);
      });
    }
    refreshPickerState();
    body.appendChild(picker);

    const actions = document.createElement('div');
    actions.className = 'card-modal-actions';
    const dlBtn = document.createElement('button');
    dlBtn.type = 'button'; dlBtn.className = 'card-modal-btn primary';
    const dlIcon = document.createElement('img');
    dlIcon.className = 'card-modal-btn-icon';
    dlIcon.src = ctx.ASSET_BASE + 'images/DownloadLogo.svg';
    dlIcon.alt = '';
    const dlLabel = document.createElement('span');
    dlLabel.textContent = 'Télécharger PNG';
    dlBtn.appendChild(dlIcon); dlBtn.appendChild(dlLabel);
    const closeBtn = document.createElement('button');
    closeBtn.type = 'button'; closeBtn.className = 'card-modal-btn';
    closeBtn.textContent = 'Fermer';
    actions.appendChild(dlBtn); actions.appendChild(closeBtn);
    modal.appendChild(actions);

    overlay.appendChild(modal);
    overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
    closeBtn.addEventListener('click', () => overlay.remove());

    dlBtn.addEventListener('click', async () => {
      const originalText = dlBtn.textContent;
      dlBtn.textContent = '⏳ Génération…'; dlBtn.disabled = true;
      try {
        const currentCard = cardHolder.querySelector('#csw-card');
        if (!currentCard) throw new Error('Carte non rendue');
        const canvas = await html2canvas(currentCard, {
          backgroundColor: null, scale: 2, useCORS: true, logging: false,
        });
        const link = document.createElement('a');
        const safe = (buildName || ctx.currentChar.name || 'build').replace(/[^\w\-]+/g, '_').slice(0, 40);
        link.download = 'csi-world-' + safe + '.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
        dlBtn.textContent = '✅ Téléchargée !';
        setTimeout(() => { dlBtn.textContent = originalText; dlBtn.disabled = false; }, 1500);
      } catch (e) {
        console.error(e);
        dlBtn.textContent = '❌ Erreur — réessayez';
        setTimeout(() => { dlBtn.textContent = originalText; dlBtn.disabled = false; }, 2000);
      }
    });

    document.body.appendChild(overlay);
  };
</script>