{% extends 'base.html.twig' %}

{% block title %}CSI World — Simulateur de combat Narval Souls{% endblock %}

{% block stylesheets %}
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --pv: #e05252; --eg: #5299e0; --atq: #e08a52; --def: #52e062;
    --arc: #9952e0; --sag: #52d4e0; --vit: #e0d452; --fin: #e052a8;
    --danger: #f85149; --success: #3fb950;
  }

  .page { display: flex; flex-direction: column; flex: 1; }
  main { flex: 1; padding: 24px; max-width: 1400px; margin: 0 auto; width: 100%; }

  /* ── Bannière NS en tête ── */
  .ns-sim-header { display: flex; justify-content: center; margin-bottom: 20px; }
  .ns-sim-banner {
    height: 80px; width: auto; max-width: 100%; object-fit: contain;
    border: 2px solid var(--text); border-radius: 6px; padding: 1px;
  }

  /* ── Two-column split ── */
  .calc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }

  /* ── Select bars ── */
  .select-bar {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 20px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 14px;
  }
  .select-bar label { color: var(--muted); font-size: .88rem; white-space: nowrap; }
  .select-bar select {
    flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 12px; color: var(--text); font-size: .95rem; outline: none;
    transition: border-color .15s;
  }
  .select-bar select:focus { border-color: var(--accent2); }
  .level-input {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 10px; color: var(--text); font-size: .95rem; outline: none;
    width: 70px; text-align: center; transition: border-color .15s;
  }
  .level-input:focus { border-color: var(--accent2); }
  .share-btn {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 14px; color: var(--text); font-size: .88rem; font-weight: 600;
    cursor: pointer; transition: all .15s; user-select: none; white-space: nowrap;
  }
  .share-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .share-btn:active { transform: translateY(1px); }

  .build-menu { position: relative; display: inline-block; }
  .build-menu-dropdown {
    display: none;
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    min-width: 220px; z-index: 100;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    padding: 4px;
  }
  .build-menu.open .build-menu-dropdown { display: block; }
  .build-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: transparent; border: none; border-radius: 4px;
    padding: 8px 12px; color: var(--text); font-size: .88rem; font-weight: 500;
    cursor: pointer; transition: background .12s; white-space: nowrap;
  }
  .build-menu-item:hover { background: var(--bg); color: var(--accent); }
  .build-menu-icon { width: 20px; height: 20px; flex-shrink: 0; }
  .share-toast {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: var(--surface); border: 1px solid var(--accent); border-radius: 8px;
    padding: 12px 20px; color: var(--text); font-size: .9rem; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 9999;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .share-toast.show { opacity: 1; }
  .share-toast.error { border-color: var(--danger); }
  .build-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9998; padding: 20px;
  }
  .build-modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 20px 22px; max-width: 480px; width: 100%;
    max-height: 80vh; overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
  }
  .build-modal-title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; color: var(--accent); }
  .build-list { display: flex; flex-direction: column; gap: 8px; }
  .build-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg);
  }
  .build-info { min-width: 0; flex: 1; }
  .build-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
  .build-date { font-size: .75rem; color: var(--muted); margin-top: 2px; }
  .build-actions { display: flex; gap: 6px; flex-shrink: 0; }

  /* ── Inner grid (portrait + right panel) ── */
  .calc-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    align-items: start;
  }

  /* ── Portrait panel ── */
  .portrait-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
  }
  .portrait-wrap {
    width: 100%; aspect-ratio: 3/4; background: var(--bg);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .portrait-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .portrait-ph { font-size: 3rem; color: var(--border); }
  .portrait-info { padding: 10px 12px; border-top: 1px solid var(--border); }
  .portrait-name { font-size: .95rem; font-weight: 700; color: #ffffff; }
  .portrait-title { font-size: .75rem; color: var(--muted); font-style: italic; margin-top: 3px; }
  .portrait-game { margin-top: 8px; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .72rem; }
  .portrait-badge { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
  .badge-boss { font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px;
    background: rgba(248,81,73,.15); color: var(--danger); border: 1px solid rgba(248,81,73,.3); }
  .game-logo { height: 16px; width: auto; object-fit: contain; opacity: .8; }

  /* ── Tags de type élémental dans la carte portrait ── */
  .portrait-elements { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
  .portrait-elem-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
    color: #ffffff;
    text-shadow: -1px -1px 0 rgba(0,0,0,.5), 1px -1px 0 rgba(0,0,0,.5),
                 -1px 1px 0 rgba(0,0,0,.5), 1px 1px 0 rgba(0,0,0,.5);
    border: 1px solid rgba(0,0,0,.2);
  }
  .portrait-elem-tag.no-color { background: var(--surface); color: var(--text); text-shadow: none; border-color: var(--border); }
  .portrait-elem-tag img { width: 14px; height: 14px; image-rendering: pixelated; flex-shrink: 0; }

  /* ── Right panel ── */
  .right-panel { display: flex; flex-direction: column; gap: 14px; }

  /* ── Equipment panel ── */
  .equip-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 18px;
  }
  .panel-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 10px;
    margin-bottom: 14px;
  }
  .equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .equip-slot { display: flex; flex-direction: column; gap: 4px; }
  .equip-slot label { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .equip-slot select {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 8px; color: var(--text); font-size: .82rem; outline: none;
    transition: border-color .15s; width: 100%;
  }
  .equip-slot select:focus { border-color: var(--accent2); }
  .equip-slot select:disabled { opacity: .4; cursor: not-allowed; }

  /* ── Stats panel ── */
  .stats-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 18px;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .stat-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .stat-card-label {
    font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  }
  .stat-card.pv  .stat-card-label { color: var(--pv); }
  .stat-card.eg  .stat-card-label { color: var(--eg); }
  .stat-card.atq .stat-card-label { color: var(--atq); }
  .stat-card.def .stat-card-label { color: var(--def); }
  .stat-card.arc .stat-card-label { color: var(--arc); }
  .stat-card.sag .stat-card-label { color: var(--sag); }
  .stat-card.vit .stat-card-label { color: var(--vit); }
  .stat-card.fin .stat-card-label { color: var(--fin); }
  .stat-total { font-size: 1.2rem; font-weight: 700; color: var(--text); }
  .stat-breakdown { font-size: .68rem; color: var(--muted); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; }
  .stat-base { color: var(--muted); }
  .stat-bonus { font-weight: 600; }
  .stat-bonus.pos { color: var(--success); }
  .stat-bonus.neg { color: var(--danger); }

  .no-selection-msg {
    text-align: center; color: var(--muted); padding: 60px 0; font-size: .95rem;
    grid-column: 1 / -1;
  }

  /* ── Current bars panel ── */
  .bars-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px;
  }
  .bar-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
  .bar-row:last-child { margin-bottom: 0; }
  .bar-header { display: flex; align-items: center; gap: 6px; }
  .bar-label { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-width: 38px; }
  .bar-input {
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    padding: 2px 5px; color: var(--text); font-size: .82rem; outline: none;
    width: 64px; text-align: center; transition: border-color .15s;
  }
  .bar-input:focus { border-color: var(--accent2); }
  .bar-max { font-size: .75rem; color: var(--muted); flex: 1; }
  .bar-track { height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
  .bar-fill { height: 100%; border-radius: 3px; transition: width .15s; }
  .bar-fill.pv    { background: var(--pv); }
  .bar-fill.eg    { background: var(--eg); }
  .bar-fill.power { background: var(--atq); }

  /* ── Left column (portrait + skill selector) ── */
  .left-col { display: flex; flex-direction: column; gap: 10px; }
  .skill-select-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px;
  }
  .skill-select-panel .panel-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); margin-bottom: 6px;
  }
  .skill-select-panel select {
    width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 8px; color: var(--text); font-size: .82rem; outline: none;
    transition: border-color .15s;
  }
  .skill-select-panel select:focus { border-color: var(--accent2); }

  /* ── Attribute panel ── */
  .attr-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 12px;
  }
  .attr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .attr-counter {
    font-size: .7rem; font-weight: 700; color: var(--accent2);
    background: rgba(88,166,255,.1); border: 1px solid rgba(88,166,255,.25);
    padding: 2px 8px; border-radius: 4px;
  }
  .attr-counter.full { color: var(--success); background: rgba(63,185,80,.08); border-color: rgba(63,185,80,.3); }
  .attr-rows { display: flex; flex-direction: column; gap: 5px; }
  .attr-row { display: grid; grid-template-columns: 30px 56px 1fr; align-items: center; gap: 6px; }
  .attr-stat-label { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .attr-input {
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
    padding: 3px 6px; color: var(--text); font-size: .82rem; outline: none;
    width: 100%; text-align: center; transition: border-color .15s;
  }
  .attr-input:focus { border-color: var(--accent2); }
  .attr-input:disabled { opacity: .35; cursor: not-allowed; }
  .attr-hint { font-size: .69rem; color: var(--muted); font-family: monospace; }

  /* ── Status picker ── */
  .status-picker-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 18px;
  }
  .status-picker-row { display: flex; gap: 6px; }
  .status-picker-row select {
    flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 8px; color: var(--text); font-size: .82rem; outline: none;
  }
  .btn-add-status {
    padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); cursor: pointer; font-size: .82rem;
    transition: border-color .15s;
  }
  .btn-add-status:hover { border-color: var(--accent2); }
  .active-statuses { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
  .active-status-tag {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .82rem; padding: 4px 8px; border-radius: 4px;
    background: rgba(153,82,224,.1); color: var(--arc); border: 1px solid rgba(153,82,224,.25);
  }
  .btn-remove-status {
    background: none; border: none; cursor: pointer; color: var(--muted);
    font-size: .9rem; padding: 0; line-height: 1;
  }
  .btn-remove-status:hover { color: var(--danger); }

  /* ── Multiplier tooltip chips ── */
  .mult-chip {
    position: relative; cursor: help; display: inline-flex; align-items: center;
  }
  .mult-tooltip {
    display: none; position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    background: #1a1f27; border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 10px; white-space: nowrap; z-index: 100;
    font-size: .72rem; font-weight: 400; color: var(--text);
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
    pointer-events: none;
  }
  .mult-chip:hover .mult-tooltip { display: block; }
  .mult-tooltip-line { display: flex; justify-content: space-between; gap: 12px; }
  .mult-tooltip-line + .mult-tooltip-line { margin-top: 3px; }

  /* ── Variation picker ── */
  .variation-picker-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 18px;
  }
  .variation-control-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .variation-control-row select {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 8px; color: var(--text); font-size: .82rem; outline: none; flex: 1; min-width: 80px;
  }
  .variation-control-row input[type="number"] {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 8px; color: var(--text); font-size: .82rem; outline: none;
    width: 56px; text-align: center;
  }
  .active-variations { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
  .variation-tag {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .82rem; padding: 4px 8px; border-radius: 4px; font-weight: 600;
  }
  .variation-tag.buff   { background: rgba(63,185,80,.1);  color: var(--success); border: 1px solid rgba(63,185,80,.25); }
  .variation-tag.debuff { background: rgba(248,81,73,.1);  color: var(--danger);  border: 1px solid rgba(248,81,73,.25); }

  /* ── Attack section ── */
  .attack-section {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: 20px 24px;
  }
  .attack-weapon-info {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; min-height: 1.4em;
  }
  .attack-weapon-name { font-weight: 700; font-size: .9rem; }
  .attack-formula { color: var(--muted); font-family: monospace; font-size: .82rem; }
  .attack-no-weapon { color: var(--muted); font-size: .88rem; }
  .btn-attack {
    display: block; margin: 0 auto;
    padding: 10px 32px; border-radius: 8px; border: none; cursor: pointer;
    background: var(--atq); color: #1a1a2e; font-weight: 700; font-size: 1rem;
    letter-spacing: .03em; transition: opacity .15s;
  }
  .btn-attack:disabled { opacity: .3; cursor: not-allowed; }
  .attack-result {
    margin-top: 18px; text-align: center;
    padding: 16px 20px; border-radius: 8px;
    background: var(--bg); border: 1px solid var(--border);
  }
  .attack-skill-info {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; min-height: 1.4em;
  }
  .attack-skill-name { font-weight: 700; font-size: .9rem; }
  .attack-no-skill { color: var(--muted); font-size: .88rem; }
  .attack-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .btn-skill-attack {
    display: block;
    padding: 10px 32px; border-radius: 8px; border: none; cursor: pointer;
    background: var(--arc); color: #1a1a2e; font-weight: 700; font-size: 1rem;
    letter-spacing: .03em; transition: opacity .15s;
  }
  .btn-skill-attack:disabled { opacity: .3; cursor: not-allowed; }
  .attack-flavor { font-size: .88rem; color: var(--muted); font-style: italic; margin-bottom: 8px; }
  .crit-row { text-align: center; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; }
  .crit-label { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; cursor: pointer; user-select: none; }
  .crit-label input { accent-color: var(--danger); width: 14px; height: 14px; cursor: pointer; }
  .crit-label.disabled { opacity: .4; cursor: not-allowed; }
  .crit-label.disabled input { cursor: not-allowed; }
  .crit-note { font-size: .75rem; color: var(--muted); font-style: italic; }
  .crit-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
    background: rgba(248,81,73,.15); color: var(--danger); border: 1px solid rgba(248,81,73,.4); letter-spacing: .04em; }
  .resist-notes { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 10px; }
  .resist-badge {
    font-size: .72rem; padding: 2px 8px; border-radius: 4px;
    background: rgba(224,138,82,.1); color: var(--atq); border: 1px solid rgba(224,138,82,.3);
  }
  .resist-badge.weak { background: rgba(248,81,73,.1); color: var(--danger); border-color: rgba(248,81,73,.3); }
  .resist-badge.neutral { background: var(--bg); color: var(--muted); border-color: var(--border); }
  .attack-dmg-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
  .attack-dmg-value { font-size: 2.4rem; font-weight: 700; color: var(--danger); line-height: 1; }
  .attack-outcome { margin-top: 10px; font-size: .92rem; }
  .attack-outcome.kill { color: var(--danger); font-weight: 700; }
  .attack-outcome.survive { color: var(--muted); }
  .attack-statuses { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
  .attack-status-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .attack-status-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
  .attack-status-badges { display: flex; flex-wrap: wrap; gap: 4px; }
  .status-badge { font-size: .75rem; padding: 2px 8px; border-radius: 4px; background: rgba(153,82,224,.12); color: var(--arc); border: 1px solid rgba(153,82,224,.3); }

  @media (max-width: 900px) {
    .calc-split { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .calc-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .equip-grid { grid-template-columns: 1fr; }
  }
</style>
{% endblock %}

{% block body %}
<div class="page">
  <main>

    <div class="ns-sim-header">
      <img src="{{ asset('images/Narval_Banner.png') }}" alt="Narval Souls" class="ns-sim-banner">
    </div>

    <div class="calc-split">

      {# ── Character side ── #}
      <div>
        <div class="select-bar">
          <label for="charSelect">Personnage</label>
          <select id="charSelect">
            <option value="">— Choisir —</option>
          </select>
          <label for="levelInput">Niv.</label>
          <input type="number" id="levelInput" class="level-input" min="1" max="99" value="1" autocomplete="off">
          <div class="build-menu">
            <button type="button" id="buildMenuBtn" class="share-btn" title="Actions sur le build courant">⋯ Build</button>
            <div class="build-menu-dropdown" id="buildMenuDropdown">
              <button type="button" id="shareBuildBtn" class="build-menu-item"><img src="{{ asset('images/ShareButton.svg') }}" alt="" class="build-menu-icon">Partager (URL)</button>
              <button type="button" id="cardBuildBtn" class="build-menu-item"><img src="{{ asset('images/CardLogo.svg') }}" alt="" class="build-menu-icon">Générer une carte</button>
              {% if app.user %}
                <button type="button" id="saveBuildBtn" class="build-menu-item"><img src="{{ asset('images/SaveButton.svg') }}" alt="" class="build-menu-icon">Enregistrer le build</button>
                <button type="button" id="loadBuildBtn" class="build-menu-item"><img src="{{ asset('images/LoadButton.svg') }}" alt="" class="build-menu-icon">Charger un build</button>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="calc-grid" id="calcGrid">
          <p class="no-selection-msg">Sélectionnez un personnage.</p>
        </div>
      </div>

      {# ── Enemy side ── #}
      <div>
        <div class="select-bar">
          <label for="enemySelect">Ennemi</label>
          <select id="enemySelect">
            <option value="">— Choisir —</option>
          </select>
        </div>
        <div class="calc-grid" id="enemyGrid">
          <p class="no-selection-msg">Sélectionnez un ennemi.</p>
        </div>
      </div>

    </div>

    {# ── Attack sections ── #}
    <div class="calc-split" style="margin-top:28px">

      {# Personnage attaque Ennemi #}
      <div class="attack-section">
        <div class="panel-title">Personnage attaque Ennemi</div>
        <div class="attack-weapon-info" id="charWeaponInfo">
          <span class="attack-no-weapon">Équipez une arme pour simuler une attaque.</span>
        </div>
        <div class="attack-skill-info" id="charSkillInfo">
          <span class="attack-no-skill">Sélectionnez une compétence.</span>
        </div>
        <div class="crit-row" id="critRow" style="display:none">
          <label class="crit-label" id="critLabel">
            <input type="checkbox" id="critCheck"> Coup critique
          </label>
          <span class="crit-note" id="critNote"></span>
        </div>
        <div class="attack-buttons">
          <button class="btn-attack" id="btnCharWeapon" disabled> Attaque arme</button>
          <button class="btn-skill-attack" id="btnCharSkill" disabled>✦ Attaque compétence</button>
        </div>
        <div class="attack-result" id="charAttackResult" style="display:none"></div>
      </div>

      {# Ennemi attaque Personnage #}
      <div class="attack-section">
        <div class="panel-title">Ennemi attaque Personnage</div>
        <div class="attack-weapon-info" id="enemyWeaponInfo">
          <span class="attack-no-weapon">Sélectionnez un ennemi et un personnage.</span>
        </div>
        <div class="attack-skill-info" id="enemySkillInfo">
          <span class="attack-no-skill">Sélectionnez une compétence ennemie.</span>
        </div>
        <div class="attack-buttons">
          <button class="btn-attack" id="btnEnemyWeapon" disabled> Attaque arme</button>
          <button class="btn-skill-attack" id="btnEnemySkill" disabled>✦ Attaque compétence</button>
        </div>
        <div class="attack-result" id="enemyAttackResult" style="display:none"></div>
      </div>

    </div>

  </main>
</div>

{% include 'simulator/_card_generator.html.twig' %}

<script>
(function () {
  const ASSET_BASE  = '{{ asset('') }}';
  const CHARACTERS  = {{ charactersJson|raw }};
  const WEAPONS     = {{ weaponsJson|raw }};
  const ARMORS      = {{ armorsJson|raw }};
  const ENEMIES     = {{ enemiesJson|raw }};
  const SKILLS      = {{ skillsJson|raw }};
  const STATUSES    = {{ statusesJson|raw }};
  const ELEMENTS    = {{ elementsJson|raw }};
  // Map { elementDbId → statusDbId } — chaque type élémental d'un perso lui confère
  // passivement le statut homonyme (originalId ∈ [201, 213]). Calculée côté serveur.
  const PASSIVE_STATUS_BY_ELEMENT = {{ elementToPassiveStatusJson|raw }};
  const STATUS_MAP  = Object.fromEntries(STATUSES.map(s => [s.id, s.name]));
  const ELEMENT_MAP = Object.fromEntries(ELEMENTS.map(e => [e.id, e.name]));

  const DEFAULT_WEAPON_FORMULA = 'a.atk * 4.8 - b.def * 2';

  // ── NS : filtrage par logicalSlot (calcul PHP côté contrôleur).
  //    Le slot 4 en base est partitionné en {relique, parchemin, âme} selon armorType.name.
  //    Deux slots relique / parchemin indépendants (doublons autorisés).
  const SLOTS = [
    { key: 'weapon',      label: 'Arme',        type: 'weapon' },
    { key: 'main_gauche', label: 'Main gauche', type: 'armor', logicalSlot: 'main_gauche' },
    { key: 'tete',        label: 'Tête',        type: 'armor', logicalSlot: 'tete' },
    { key: 'corps',       label: 'Corps',       type: 'armor', logicalSlot: 'corps' },
    { key: 'relique1',    label: 'Relique 1',   type: 'armor', logicalSlot: 'relique' },
    { key: 'relique2',    label: 'Relique 2',   type: 'armor', logicalSlot: 'relique' },
    { key: 'parchemin1',  label: 'Parchemin 1', type: 'armor', logicalSlot: 'parchemin' },
    { key: 'parchemin2',  label: 'Parchemin 2', type: 'armor', logicalSlot: 'parchemin' },
    { key: 'ame',         label: 'Âme',         type: 'armor', logicalSlot: 'ame' },
  ];

  const STAT_KEYS = ['pvMax', 'egMax', 'attaque', 'defense', 'arcane', 'sagesse', 'vitesse', 'finesse'];
  const STAT_META = {
    pvMax:   { label: 'PV',   css: 'pv'  },
    egMax:   { label: 'Mana', css: 'eg'  },
    attaque: { label: 'ATQ',  css: 'atq' },
    defense: { label: 'DEF',  css: 'def' },
    arcane:  { label: 'ARC',  css: 'arc' },
    sagesse: { label: 'SAG',  css: 'sag' },
    vitesse: { label: 'VIT',  css: 'vit' },
    finesse: { label: 'FIN',  css: 'fin' },
  };

  // Ressource TP nommée par jeu — NS = PUR (cf. translations/game.fr.yaml).
  const TP_LABEL = 'PUR';

  // Courbe NS : facteur total (niv 1 → 99) appliqué géométriquement.
  //   PV Max ×20, Mana (egMax) ×4, autres stats ×15. Cf. scaledStat pour la forme.
  const STAT_MULTIPLIERS = {
    pvMax: 20, egMax: 4,
    attaque: 15, defense: 15, arcane: 15, sagesse: 15, vitesse: 15, finesse: 15,
  };
  const LEVEL_MAX = 42;

  // Compteurs par personnage. Schéma :
  //   `id`         — clé unique (interne, sert d'index dans counterValues)
  //   `label`      — libellé affiché
  //   `color`      — couleur du header (facultatif, défaut muted)
  //   `unit`       — mot après le champ (« cumuls », etc.)
  //   `max`        — plafond du compteur (int, optionnel)
  //   `variableId` — X dans les formules `v[X]` (RPG Maker $game_variables[X])
  //                  quand présent, le compteur alimente le substituant v[X].
  //                  Si absent, `formulaKey` doit être renseigné (accès a.<formulaKey>).
  //   `formulaKey` — accès `a.<key>` dans les formules (héritage CSF, ex. Frénésie).
  //   `statBonus`  — map { statKey: bonusPerCumul } — chaque cumul multiplie la
  //                  stat correspondante par (1 + bonusPerCumul × cumuls).
  //                  Ex. Thermodynamique = 0.10 → +10 %/cumul sur Attaque+Arcane.
  const CHAR_COUNTERS = {
    43: [{ id: 'benoixsme_presage',      label: 'Présage toxique',      color: 'var(--arc)', unit: 'cumuls', max: 10, variableId: 143 }],
    51: [{ id: 'jack_thermo',            label: 'Thermodynamique',      color: 'var(--atq)', unit: 'cumuls', max: 10, variableId: 144, statBonus: { attaque: 0.10, arcane: 0.10 } }],
    44: [
      { id: 'michel_canon_lumiere',      label: 'Canon de Lumière',     color: 'var(--sag)', unit: 'cumuls', max: 5,  variableId: 145 },
      { id: 'michel_canon_purete',       label: 'Canon de Pureté',      color: 'var(--eg)',  unit: 'cumuls', max: 5,  variableId: 146 },
    ],
    49: [{ id: 'grandmaitre_influence',  label: 'Influence',            color: 'var(--fin)', unit: 'cumuls', max: 20, variableId: 141 }],
    53: [{ id: 'dd_atouts',               label: 'Atouts',               color: 'var(--vit)', unit: 'cumuls', max: 8,  variableId: 282 }],
    52: [
      { id: 'matt_gemme_pyrique',        label: 'Gemmes pyriques',      color: 'var(--pv)',  unit: 'cumuls', max: 20, variableId: 226 },
      { id: 'matt_gemme_hydrique',       label: 'Gemmes hydriques',     color: 'var(--eg)',  unit: 'cumuls', max: 20, variableId: 227 },
      { id: 'matt_gemme_tempete',        label: 'Gemmes de tempête',    color: 'var(--vit)', unit: 'cumuls', max: 20, variableId: 228 },
      { id: 'matt_gemme_chtonienne',     label: 'Gemmes chtoniennes',   color: 'var(--def)', unit: 'cumuls', max: 20, variableId: 229 },
    ],
  };
  const EQUIP_COUNTERS = {
    // Example: 42: [{ id: 'fureur', formulaKey: 'fu', label: 'Fureur', color: 'var(--atq)', unit: 'cumuls' }],
  };

  function scaledStat(base, key, level) {
    return Math.round(base * Math.pow(STAT_MULTIPLIERS[key], (level - 1) / (LEVEL_MAX - 1)));
  }

  // ── Character state ────────────────────────────────────────────────
  let currentChar       = null;
  let currentLevel      = 1;
  const equipped        = {};
  let currentSkill      = null;
  let activeCharStatuses = [];
  let attributePoints   = Object.fromEntries(STAT_KEYS.map(k => [k, 0]));
  let currentPv       = 0;
  let currentEg       = 0;
  let currentPower = 0;
  let counterValues = {};
  // Passifs actifs (skillType=3). Set d'IDs — un passif absent = désactivé.
  let activePassives = new Set();
  // « Hors-limites actif » : quand true, chaque compteur du perso courant voit
  // son plafond augmenté de 50 % (ceil). Reset à chaque changement de perso.
  let horsLimitesActive = false;

  // ── Enemy state ────────────────────────────────────────────────────
  let currentEnemy          = null;
  let currentEnemySkill     = null;
  let activeEnemyStatuses   = [];

  let activeCharStatVariations  = [];
  let activeEnemyStatVariations = [];

  // ── Populate selectors ─────────────────────────────────────────────
  const charSelect = document.getElementById('charSelect');
  CHARACTERS.forEach(c => {
    const opt = document.createElement('option');
    opt.value = c.id;
    opt.textContent = c.name + (c.title ? ' — ' + c.title : '');
    charSelect.appendChild(opt);
  });

  const enemySelect = document.getElementById('enemySelect');
  ENEMIES.forEach(e => {
    const opt = document.createElement('option');
    opt.value = e.id;
    opt.textContent = e.name + (e.isSuperboss ? ' ★★' : e.isBoss ? ' ★' : '');
    enemySelect.appendChild(opt);
  });

  // ── Event listeners ────────────────────────────────────────────────
  charSelect.addEventListener('change', () => {
    currentChar              = CHARACTERS.find(c => c.id == charSelect.value) || null;
    currentSkill             = null;
    activeCharStatuses.length = 0;
    activeCharStatVariations = [];
    attributePoints          = Object.fromEntries(STAT_KEYS.map(k => [k, 0]));
    SLOTS.forEach(s => equipped[s.key] = null);
    currentPv = currentEg = -1; // sentinel: reset to max in buildCurrentBarsPanel
    currentPower  = 0;
    counterValues     = {};
    horsLimitesActive = false;
    activePassives    = new Set(getCharPassiveSkillIds());
    knownPassiveIds   = new Set(activePassives);
    renderChar();
    refreshAutoInjectedStatuses();
    updateAttackPanel();
  });

  const levelInput = document.getElementById('levelInput');
  levelInput.addEventListener('input', () => {
    currentLevel = Math.min(LEVEL_MAX, Math.max(1, parseInt(levelInput.value) || 1));
    levelInput.value = currentLevel;
    // NS : pas de points d'attribut → pas d'appel à updateAttributePanel()
    updateStatsPanel();
    updateSkillSelector();
    updatePassivesPanel();
    refreshAutoInjectedStatuses();
  });

  enemySelect.addEventListener('change', () => {
    currentEnemy               = ENEMIES.find(e => e.id == enemySelect.value) || null;
    currentEnemySkill          = null;
    activeEnemyStatuses        = [];
    activeEnemyStatVariations  = [];
    renderEnemy();
    updateAttackPanel();
  });

  // ── Character render ───────────────────────────────────────────────
  function renderChar() {
    const grid = document.getElementById('calcGrid');
    grid.innerHTML = '';
    if (!currentChar) {
      grid.innerHTML = '<p class="no-selection-msg">Sélectionnez un personnage.</p>';
      return;
    }
    const leftCol = el('div', 'left-col');
    leftCol.appendChild(buildPortrait(currentChar, null));
    leftCol.appendChild(buildCurrentBarsPanel());
    const counters = getApplicableCounters();
    if (counters.length > 0) leftCol.appendChild(buildHorsLimitesPanel());
    counters.forEach(c => leftCol.appendChild(buildCounterPanel(c)));
    // NS : bloc "Points d'attributs" volontairement omis.
    const passivesPanel = buildNativePassivesPanel();
    if (passivesPanel) {
      passivesPanel.id = 'passivesPanel';
      leftCol.appendChild(passivesPanel);
    }
    leftCol.appendChild(buildSkillSelector());
    grid.appendChild(leftCol);
    const right = el('div', 'right-panel');
    right.appendChild(buildEquipPanel());
    right.appendChild(buildStatsPanel());
    right.appendChild(buildStatusPicker(activeCharStatuses, 'charStatusList', () => { updateStatsPanel(); updateAttackPanel(); }));
    right.appendChild(buildVariationPicker(activeCharStatVariations, 'charVariationList', () => { updateStatsPanel(); updateAttackPanel(); }));
    grid.appendChild(right);
  }

  // ── Enemy render ───────────────────────────────────────────────────
  function renderEnemy() {
    const grid = document.getElementById('enemyGrid');
    grid.innerHTML = '';
    if (!currentEnemy) {
      grid.innerHTML = '<p class="no-selection-msg">Sélectionnez un ennemi.</p>';
      return;
    }
    const leftCol = el('div', 'left-col');
    leftCol.appendChild(buildPortrait(currentEnemy, buildEnemyBadges()));
    leftCol.appendChild(buildEnemySkillSelector());
    grid.appendChild(leftCol);
    const right = el('div', 'right-panel');
    right.appendChild(buildEnemyStatsPanel());
    right.appendChild(buildStatusPicker(activeEnemyStatuses, 'enemyStatusList', () => { updateEnemyStatsPanel(); updateAttackPanel(); }));
    right.appendChild(buildVariationPicker(activeEnemyStatVariations, 'enemyVariationList', () => { updateEnemyStatsPanel(); updateAttackPanel(); }));
    grid.appendChild(right);
  }

  function buildEnemyBadges() {
    if (!currentEnemy.isBoss && !currentEnemy.isSuperboss) return null;
    const wrap = el('div', 'portrait-badge');
    if (currentEnemy.isSuperboss) wrap.appendChild(el('span', 'badge-boss', 'Super-boss'));
    else if (currentEnemy.isBoss) wrap.appendChild(el('span', 'badge-boss', 'Boss'));
    return wrap;
  }

  // ── Portrait (shared) ──────────────────────────────────────────────
  function buildPortrait(entity, extraEl) {
    const panel = el('div', 'portrait-panel');
    const wrap  = el('div', 'portrait-wrap');
    if (entity.appearance) {
      const img = document.createElement('img');
      img.src = ASSET_BASE + entity.appearance;
      img.alt = entity.name;
      wrap.appendChild(img);
    } else {
      wrap.appendChild(el('span', 'portrait-ph', '✦'));
    }
    panel.appendChild(wrap);

    const info = el('div', 'portrait-info');
    info.appendChild(el('div', 'portrait-name', entity.name));
    if (entity.title) info.appendChild(el('div', 'portrait-title', entity.title));
    if (extraEl) info.appendChild(extraEl);

    // Tags de type élémental — persos NS uniquement. Chaque tag rappelle qu'un
    // statut passif du même nom s'applique (cf. PASSIVE_STATUS_BY_ELEMENT).
    if (Array.isArray(entity.elementalTypes) && entity.elementalTypes.length > 0) {
      const tagsRow = el('div', 'portrait-elements');
      entity.elementalTypes.forEach(elId => {
        const elem = ELEMENTS.find(e => e.id === elId);
        if (!elem) return;
        const tag = el('span', 'portrait-elem-tag' + (elem.color ? '' : ' no-color'));
        if (elem.color) tag.style.background = elem.color;
        if (elem.iconUrl) {
          const img = document.createElement('img');
          img.src = elem.iconUrl;
          img.alt = '';
          tag.appendChild(img);
        }
        tag.appendChild(document.createTextNode(elem.name));
        tagsRow.appendChild(tag);
      });
      info.appendChild(tagsRow);
    }

    const game = el('div', 'portrait-game');
    const logo = document.createElement('img');
    logo.src = '{{ path('game_logo', {gameId: 0}) }}'.replace('/0', '/' + entity.gameId);
    logo.className = 'game-logo';
    logo.alt = '';
    game.appendChild(logo);
    game.appendChild(document.createTextNode(gameLabel(entity.gameId)));
    info.appendChild(game);
    panel.appendChild(info);
    return panel;
  }

  // ── Equipment panel ────────────────────────────────────────────────
  function buildEquipPanel() {
    const panel = el('div', 'equip-panel');
    panel.appendChild(el('div', 'panel-title', 'Équipement'));
    const grid = el('div', 'equip-grid');

    SLOTS.forEach(slotDef => {
      const slotEl = el('div', 'equip-slot');
      slotEl.appendChild(el('label', null, slotDef.label));

      const select = document.createElement('select');
      const options = getCompatibleItems(slotDef);
      if (options.length === 0) {
        select.disabled = true;
        select.appendChild(new Option('— Aucun disponible —', ''));
      } else {
        select.appendChild(new Option('— Aucun —', ''));
        options.forEach(item => select.appendChild(new Option(item.name, item.id)));
        if (equipped[slotDef.key]) select.value = equipped[slotDef.key].id;
      }

      select.dataset.slotKey = slotDef.key;

      select.addEventListener('change', () => {
        const chosen = options.find(i => i.id == select.value) || null;
        equipped[slotDef.key] = chosen;
        applyEquipmentRules();
        updateStatsPanel();
        updateSkillSelector();
        updateCounterPanels();
        updatePassivesPanel();
        refreshAutoInjectedStatuses();
        updateAttackPanel();
      });

      slotEl.appendChild(select);
      grid.appendChild(slotEl);
    });

    panel.appendChild(grid);
    return panel;
  }

  // ── Equipment rules ────────────────────────────────────────────────
  // NS : main_gauche = bouclier, tete = casque (slot keys spécifiques NS,
  // différents des `slot1`/`slot2` du calculator CSF).
  function applyEquipmentRules() {
    const weapon      = equipped.weapon;
    const blocksShield = weapon && weapon.isTwoHanded;
    const blocksHelmet = weapon && weapon.weaponTypeName === 'Ornement casque';

    const shieldSelect = document.querySelector('[data-slot-key="main_gauche"]');
    const helmetSelect = document.querySelector('[data-slot-key="tete"]');

    if (shieldSelect) {
      if (blocksShield) {
        shieldSelect.disabled = true;
        if (equipped.main_gauche) { equipped.main_gauche = null; shieldSelect.value = ''; }
      } else {
        shieldSelect.disabled = shieldSelect.options.length <= 1 && shieldSelect.options[0]?.value === '';
      }
    }

    if (helmetSelect) {
      if (blocksHelmet) {
        helmetSelect.disabled = true;
        if (equipped.tete) { equipped.tete = null; helmetSelect.value = ''; }
      } else {
        helmetSelect.disabled = helmetSelect.options.length <= 1 && helmetSelect.options[0]?.value === '';
      }
    }
  }

  // ── Character stats panel ──────────────────────────────────────────
  function buildStatsPanel() {
    const panel = el('div', 'stats-panel', null, 'statsPanel');
    panel.appendChild(el('div', 'panel-title', 'Statistiques totales'));
    const grid = el('div', 'stats-grid', null, 'statsGrid');
    panel.appendChild(grid);
    renderCharStatCards(grid);
    return panel;
  }

  function updateStatsPanel() {
    const grid = document.getElementById('statsGrid');
    if (grid) renderCharStatCards(grid);
    updateCurrentBars();
  }

  function renderCharStatCards(grid) {
    grid.innerHTML = '';
    const bonus        = computeBonus();
    const mults        = computeMultipliers();
    const counterMults = computeCounterStatMultipliers();
    // Tous les statuts appliqués vivent désormais dans activeCharStatuses
    // (isPassive: true pour les auto-injectés — élémentaux, skill passifs, équipement).
    const allCharStatuses = activeCharStatuses;
    STAT_KEYS.forEach(key => {
      const meta        = STAT_META[key];
      const base        = scaledStat(currentChar.stats[key], key, currentLevel);
      const bon         = bonus[key];
      const equipMult   = mults[key];
      const counterMult = counterMults[key];

      let statusMult = 1;
      allCharStatuses.forEach(st => {
        const m = st.multipliers[key];
        if (m != null) statusMult *= m;
      });

      let varMult = 1;
      activeCharStatVariations.forEach(v => {
        if (v.stat === key) varMult *= variationMultiplier(v);
      });

      // Custom bonuses (lowResource…) — nécessite pvMax/egMax déjà mis à jour ;
      // getCharFinalStats() les recalcule via la même seconde passe.
      const finalStats = getCharFinalStats();
      const customMult = computeCustomBonusMult(key, finalStats.pvMax, finalStats.egMax);

      const total = Math.round(Math.round(Math.round(Math.round(Math.round((base + bon) * equipMult) * counterMult) * statusMult) * varMult) * customMult);

      const card = el('div', 'stat-card ' + meta.css);
      card.appendChild(el('span', 'stat-card-label', meta.label));
      card.appendChild(el('span', 'stat-total', total));

      const breakdown   = el('span', 'stat-breakdown');
      const hasBon      = bon !== 0;
      const hasEquip    = equipMult !== 1;
      const hasCounter  = counterMult !== 1;
      const hasStatus   = statusMult !== 1;
      const hasVar      = varMult !== 1;
      const hasCustom   = customMult !== 1;
      const hasAnyMult  = hasEquip || hasCounter || hasStatus || hasVar || hasCustom;
      if (hasAnyMult && hasBon) breakdown.appendChild(document.createTextNode('('));
      breakdown.appendChild(el('span', 'stat-base', base));
      if (hasBon) {
        const bonLines = [];
        Object.values(equipped).forEach(item => {
          if (!item) return;
          const v = item.stats[key] || 0;
          if (v !== 0) bonLines.push([item.name, (v > 0 ? '+' : '') + v, v > 0]);
        });
        const av = currentChar?.attributeValues;
        if (av) {
          const attrBon = (attributePoints[key] || 0) * (av[key] || 0);
          if (attrBon !== 0) bonLines.push(['Points d\'attribut', (attrBon > 0 ? '+' : '') + attrBon, attrBon > 0]);
        }
        breakdown.appendChild(document.createTextNode(' + '));
        breakdown.appendChild(buildMultChip((bon > 0 ? '+' : '') + bon, bon > 0, bonLines));
      }
      if (hasAnyMult && hasBon) breakdown.appendChild(document.createTextNode(')'));
      if (hasEquip) {
        const equipLines = Object.values(equipped)
          .filter(item => item && item.multipliers[key] != null && item.multipliers[key] !== 1)
          .map(item => [item.name, '×' + item.multipliers[key].toFixed(2), item.multipliers[key] >= 1]);
        breakdown.appendChild(document.createTextNode(' × '));
        breakdown.appendChild(buildMultChip(equipMult.toFixed(2), true, equipLines));
      }
      if (hasCounter) {
        // Détaille chaque compteur qui contribue à cette stat (Thermodynamique, etc.).
        const counterLines = getApplicableCounters()
          .filter(c => c.statBonus && (c.statBonus[key] ?? 0) !== 0 && (counterValues[c.id] ?? 0) > 0)
          .map(c => {
            const cumuls = counterValues[c.id] ?? 0;
            const m = 1 + c.statBonus[key] * cumuls;
            return [c.label + ' (' + cumuls + ' cumul' + (cumuls > 1 ? 's' : '') + ')', '×' + m.toFixed(2), m >= 1];
          });
        breakdown.appendChild(document.createTextNode(' × '));
        breakdown.appendChild(buildMultChip(counterMult.toFixed(2), counterMult > 1, counterLines));
      }
      if (hasStatus) {
        const statusLines = allCharStatuses
          .filter(st => st.multipliers[key] != null && st.multipliers[key] !== 1)
          .map(st => [st.name, '×' + st.multipliers[key].toFixed(2), st.multipliers[key] >= 1]);
        breakdown.appendChild(document.createTextNode(' × '));
        breakdown.appendChild(buildMultChip(statusMult.toFixed(2), statusMult > 1, statusLines));
      }
      if (hasVar) {
        const varLines = activeCharStatVariations
          .filter(v => v.stat === key)
          .map(v => [variationLabel(v), '×' + variationMultiplier(v).toFixed(2), variationMultiplier(v) >= 1]);
        breakdown.appendChild(document.createTextNode(' × '));
        breakdown.appendChild(buildMultChip(varMult.toFixed(2), varMult > 1, varLines));
      }
      if (hasCustom) {
        // Détail par bonus custom (lowResource…) contribuant à cette stat.
        const customLines = [];
        collectCharBonusCarriers().forEach(st => {
          getCarrierCustomBonuses(st).forEach(b => {
            if (YANFLY_STAT_MAP[b.stat] !== key) return;
            let current, max, label;
            if      (b.resource === 'hp') { current = currentPv;    max = finalStats.pvMax; label = 'PV'; }
            else if (b.resource === 'mp') { current = currentEg;    max = finalStats.egMax; label = 'Mana'; }
            else if (b.resource === 'tp') { current = currentPower; max = 150;              label = TP_LABEL; }
            else return;
            if (max <= 0) return;
            if (b.type === 'lowResource') {
              const missing    = Math.max(0, max - current) / max;
              const m          = 1 + b.percent * missing;
              const missingPct = Math.round(missing * 100);
              customLines.push([
                st.name + ' (+' + b.percent + '% par 1% ' + label + ' manquant · ' + missingPct + '% manquants)',
                '×' + m.toFixed(3),
                m >= 1,
              ]);
            } else if (b.type === 'lowResourceThreshold') {
              const pct    = current / max * 100;
              const active = pct < b.threshold;
              const m      = active ? b.multiplier : 1;
              customLines.push([
                st.name + ' (seuil ' + label + ' < ' + b.threshold + '% → ×' + b.multiplier
                  + ' — actuel ' + pct.toFixed(1) + '% : ' + (active ? 'actif' : 'inactif') + ')',
                '×' + m.toFixed(3),
                m >= 1,
              ]);
            }
          });
        });
        breakdown.appendChild(document.createTextNode(' × '));
        breakdown.appendChild(buildMultChip(customMult.toFixed(3), customMult > 1, customLines));
      }
      card.appendChild(breakdown);
      grid.appendChild(card);
    });
  }

  // ── Enemy stats panel ──────────────────────────────────────────────
  function buildEnemyStatsPanel() {
    const panel = el('div', 'stats-panel');
    panel.appendChild(el('div', 'panel-title', 'Statistiques'));
    const grid = el('div', 'stats-grid', null, 'enemyStatsGrid');
    panel.appendChild(grid);
    renderEnemyStatCards(grid);
    return panel;
  }

  function renderEnemyStatCards(grid) {
    grid.innerHTML = '';
    STAT_KEYS.forEach(key => {
      const meta = STAT_META[key];
      const base = currentEnemy.stats[key] ?? 0;
      let statusMult = 1;
      activeEnemyStatuses.forEach(st => {
        const m = st.multipliers[key];
        if (m != null) statusMult *= m;
      });
      let varMult = 1;
      activeEnemyStatVariations.forEach(v => {
        if (v.stat === key) varMult *= variationMultiplier(v);
      });
      const total = Math.round(Math.round(base * statusMult) * varMult);
      const card  = el('div', 'stat-card ' + meta.css);
      card.appendChild(el('span', 'stat-card-label', meta.label));
      card.appendChild(el('span', 'stat-total', total));
      const hasStatus = statusMult !== 1;
      const hasVar    = varMult !== 1;
      if (hasStatus || hasVar) {
        const breakdown = el('span', 'stat-breakdown');
        breakdown.appendChild(el('span', 'stat-base', base));
        if (hasStatus) {
          const statusLines = activeEnemyStatuses
            .filter(st => st.multipliers[key] != null && st.multipliers[key] !== 1)
            .map(st => [st.name, '×' + st.multipliers[key].toFixed(2), st.multipliers[key] >= 1]);
          breakdown.appendChild(document.createTextNode(' × '));
          breakdown.appendChild(buildMultChip(statusMult.toFixed(2), statusMult > 1, statusLines));
        }
        if (hasVar) {
          const varLines = activeEnemyStatVariations
            .filter(v => v.stat === key)
            .map(v => [variationLabel(v), '×' + variationMultiplier(v).toFixed(2), variationMultiplier(v) >= 1]);
          breakdown.appendChild(document.createTextNode(' × '));
          breakdown.appendChild(buildMultChip(varMult.toFixed(2), varMult > 1, varLines));
        }
        card.appendChild(breakdown);
      }
      grid.appendChild(card);
    });
  }

  function updateEnemyStatsPanel() {
    const grid = document.getElementById('enemyStatsGrid');
    if (grid) renderEnemyStatCards(grid);
  }

  // ── Current PV / Mana / PUR bars ──────────────────────────────────
  function buildCurrentBarsPanel() {
    const stats = getCharFinalStats();
    if (currentPv < 0) currentPv = stats.pvMax;
    if (currentEg < 0) currentEg = stats.egMax;
    currentPv    = Math.min(currentPv,    stats.pvMax);
    currentEg    = Math.min(currentEg,    stats.egMax);
    currentPower = Math.min(150, Math.max(0, currentPower));

    const panel = el('div', 'bars-panel');
    panel.id = 'barsPanel';
    panel.appendChild(el('div', 'panel-title', 'État actuel'));
    panel.appendChild(buildBarRow('pv',    'PV',    currentPv,    stats.pvMax, 'var(--pv)'));
    panel.appendChild(buildBarRow('eg',    'Mana',  currentEg,    stats.egMax, 'var(--eg)'));
    panel.appendChild(buildBarRow('power', TP_LABEL, currentPower, 150,        'var(--atq)'));
    return panel;
  }

  function buildBarRow(key, label, current, max, color) {
    const row    = el('div', 'bar-row');
    const header = el('div', 'bar-header');

    const lbl = el('span', 'bar-label', label);
    lbl.style.color = color;
    header.appendChild(lbl);

    const input = document.createElement('input');
    input.type = 'number'; input.min = '0'; input.max = String(max);
    input.value = current; input.className = 'bar-input';
    input.id = 'barInput_' + key;
    input.addEventListener('input', () => {
      const newMax = key === 'power' ? 150 : (key === 'pv' ? getCharFinalStats().pvMax : getCharFinalStats().egMax);
      let val = Math.min(newMax, Math.max(0, parseInt(input.value) || 0));
      if (key === 'pv')    currentPv    = val;
      if (key === 'eg')    currentEg    = val;
      if (key === 'power') currentPower = val;
      const fill = document.getElementById('barFill_' + key);
      if (fill) fill.style.width = (newMax > 0 ? Math.round(val / newMax * 100) : 0) + '%';
      // Les bonus custom (lowResource) dépendent de currentPv/Eg/Power → refresh.
      updateStatsPanel();
      updateAttackPanel();
    });
    input.addEventListener('blur', () => {
      const newMax = key === 'power' ? 150 : (key === 'pv' ? getCharFinalStats().pvMax : getCharFinalStats().egMax);
      const val = key === 'pv' ? currentPv : key === 'eg' ? currentEg : currentPower;
      input.value = Math.min(newMax, Math.max(0, val));
    });
    header.appendChild(input);
    header.appendChild(el('span', 'bar-max', '/ ' + max.toLocaleString('fr-FR')));
    row.appendChild(header);

    const track = el('div', 'bar-track');
    const fill  = el('div', 'bar-fill ' + key);
    fill.id = 'barFill_' + key;
    fill.style.width = (max > 0 ? Math.round(current / max * 100) : 0) + '%';
    track.appendChild(fill);
    row.appendChild(track);
    return row;
  }

  function updateCurrentBars() {
    if (!document.getElementById('barsPanel')) return;
    const stats = getCharFinalStats();
    currentPv    = Math.min(currentPv,    stats.pvMax);
    currentEg    = Math.min(currentEg,    stats.egMax);
    currentPower = Math.min(150, Math.max(0, currentPower));
    updateBarDOM('pv',    currentPv,    stats.pvMax);
    updateBarDOM('eg',    currentEg,    stats.egMax);
    updateBarDOM('power', currentPower, 150);
  }

  function updateBarDOM(key, val, max) {
    const input = document.getElementById('barInput_' + key);
    const fill  = document.getElementById('barFill_' + key);
    const maxEl = input?.parentNode?.querySelector('.bar-max');
    if (input) { input.value = val; input.max = String(max); }
    if (fill)  fill.style.width = (max > 0 ? Math.round(val / max * 100) : 0) + '%';
    if (maxEl) maxEl.textContent = '/ ' + max.toLocaleString('fr-FR');
  }

  // ── Helpers ────────────────────────────────────────────────────────
  function getCompatibleItems(slotDef) {
    if (slotDef.type === 'weapon') {
      const allowed = currentChar.usableWeapons;
      if (allowed === null) return WEAPONS;
      return WEAPONS.filter(w => allowed.includes(w.weaponTypeId));
    }
    const allowed = currentChar.usableArmors;
    // NS : filtre par logicalSlot (main_gauche/tete/corps/relique/parchemin/ame)
    // au lieu du slot numérique — un même item peut apparaître dans slot1 et slot2
    // (par ex. deux Reliques).
    const bySlot  = ARMORS.filter(a => a.logicalSlot === slotDef.logicalSlot);
    if (allowed === null) return bySlot;
    return bySlot.filter(a => allowed.includes(a.armorTypeId));
  }

  function computeBonus() {
    const bonus = Object.fromEntries(STAT_KEYS.map(k => [k, 0]));
    Object.values(equipped).forEach(item => {
      if (!item) return;
      STAT_KEYS.forEach(k => { bonus[k] += item.stats[k] || 0; });
    });
    const av = currentChar?.attributeValues;
    if (av) {
      STAT_KEYS.forEach(k => { bonus[k] += (attributePoints[k] || 0) * (av[k] || 0); });
    }
    return bonus;
  }

  function computeMultipliers() {
    const mults = Object.fromEntries(STAT_KEYS.map(k => [k, 1]));
    Object.values(equipped).forEach(item => {
      if (!item) return;
      STAT_KEYS.forEach(k => {
        const m = item.multipliers[k];
        if (m != null) mults[k] *= m;
      });
    });
    return mults;
  }

  function gameLabel(id) {
    return ['CSI Forever', 'CSII Forever', 'CSI Rogue', 'Narval Souls'][id] ?? '?';
  }

  function variationMultiplier(v) {
    return v.type === 'buff' ? 1 + v.level * 0.25 : Math.max(0, 1 - v.level * 0.25);
  }

  function variationLabel(v) {
    const lbl = STAT_META[v.stat]?.label ?? v.stat;
    const pct = v.level * 25;
    return lbl + ' ' + (v.type === 'buff' ? '+' : '−') + pct + '%';
  }

  function buildMultChip(displayText, isPos, lines) {
    const chip = el('span', 'mult-chip stat-bonus ' + (isPos ? 'pos' : 'neg'), displayText);
    const tip  = el('div', 'mult-tooltip');
    lines.forEach(([label, value, lineIsPos]) => {
      const row = el('div', 'mult-tooltip-line');
      row.appendChild(el('span', null, label));
      row.appendChild(el('span', 'stat-bonus ' + (lineIsPos ? 'pos' : 'neg'), value));
      tip.appendChild(row);
    });
    chip.appendChild(tip);
    return chip;
  }

  function el(tag, className, text, id) {
    const e = document.createElement(tag);
    if (className) e.className = className;
    if (text != null) e.textContent = text;
    if (id) e.id = id;
    return e;
  }

  // ── Formula preprocessor ──────────────────────────────────────────
  // 1. `[ab].state?(X)` → true/false selon présence du statut d'`original_id`=X.
  // 2. `v[X]` → valeur du compteur RPG Maker $game_variables[X] : simulée ici
  //    par les cumuls du perso actif (NS_CHAR_COUNTERS[currentChar.id]). `v[X]`
  //    est global côté Ruby, donc résolu depuis les compteurs du perso quel que
  //    soit le côté attaquant (formule chars ou ennemis).
  function preprocessFormula(formula, aStatuses, bStatuses) {
    let out = formula.replace(/(a|b)\.state\?\((\d+)\)/g, function (_, entity, idStr) {
      const id       = parseInt(idStr);
      const statuses = entity === 'a' ? aStatuses : bStatuses;
      return statuses.some(function (s) { return s.originalId === id; }) ? 'true' : 'false';
    });
    const vars = getCurrentVariables();
    out = out.replace(/\bv\[(\d+)\]/g, function (_, idStr) {
      const id = parseInt(idStr);
      return String(vars[id] ?? 0);
    });
    return out;
  }

  // Reconstruit le map {variableId: currentValue} à partir des compteurs du perso
  // actif qui déclarent un `variableId` (les compteurs façon CSF `formulaKey` sont
  // ignorés — ils sont exposés via `charCurrent()` sur l'objet `a`).
  function getCurrentVariables() {
    const vars = {};
    getApplicableCounters().forEach(c => {
      if (c.variableId != null) vars[c.variableId] = counterValues[c.id] ?? 0;
    });
    return vars;
  }

  // ── Damage range helper ────────────────────────────────────────────
  function buildDamageLabel(perHit, hits, variancePct) {
    const v   = variancePct != null ? variancePct : 20;
    const fmt = n => n.toLocaleString('fr-FR');
    if (v === 0) {
      const total = perHit * hits;
      return hits > 1 ? hits + ' × ' + fmt(perHit) + ' = ' + fmt(total) : fmt(total);
    }
    const minH = Math.round(perHit * (1 - v / 100));
    const maxH = Math.round(perHit * (1 + v / 100));
    if (hits > 1) {
      return hits + ' × (' + fmt(minH) + ' ~ ' + fmt(maxH) + ') = ' + fmt(minH * hits) + ' ~ ' + fmt(maxH * hits);
    }
    return fmt(minH) + ' ~ ' + fmt(maxH);
  }

  // Retourne l'id DB de l'élément dont l'originalId est passé, ou null si inconnu.
  function elementDbIdFromOriginalId(originalId) {
    const el = ELEMENTS.find(e => e.originalId === originalId);
    return el ? el.id : null;
  }

  // Lit une famille de tags parsés sur un porteur (statut).
  // Ex : getParsedTags(st, 'elementStrengthen') → list<{elementOriginalId, percent}>
  function getParsedTags(carrier, family) {
    return carrier?.extraData?.parsedTags?.[family] || [];
  }

  // ── Resistance application ─────────────────────────────────────────
  // damageCategory: 0=none, 1=physical, 2=magical
  // attackerStatuses : liste des statuts actifs sur l'attaquant → element strengthen
  // targetStatuses   : liste des statuts actifs sur la cible     → element reflect / absorb
  function applyResistances(damage, elementId, target, damageCategory, attackerStatuses = [], targetStatuses = []) {
    let result = damage;
    const notes = [];

    // ── Attacker : element strengthen (Yanfly) ─────────────────────
    if (elementId != null) {
      let strengthenMult = 1;
      const contributors = [];
      attackerStatuses.forEach(st => {
        getParsedTags(st, 'elementStrengthen').forEach(entry => {
          if (elementDbIdFromOriginalId(entry.elementOriginalId) === elementId) {
            strengthenMult *= 1 + entry.percent / 100;
            contributors.push(st.name);
          }
        });
      });
      if (strengthenMult !== 1) {
        result = Math.round(result * strengthenMult);
        const name = ELEMENT_MAP[elementId] ?? '?';
        notes.push({
          text: name + ' Strengthen ×' + strengthenMult.toFixed(2)
              + (contributors.length ? ' (' + contributors.join(', ') + ')' : ''),
          type: 'weak',
        });
      }
    }

    // Elemental resistance
    if (elementId != null && target.elementalResistance) {
      const entry = target.elementalResistance.find(r => r.element_id === elementId);
      if (entry && entry.multiplier != null && entry.multiplier !== 1) {
        result = Math.round(result * entry.multiplier);
        const name = ELEMENT_MAP[elementId] ?? '?';
        const pct  = Math.round((entry.multiplier - 1) * 100);
        notes.push({ text: name + ' ×' + entry.multiplier.toFixed(2), type: pct < 0 ? 'resist' : 'weak' });
      }
    }

    // Physical / magical taken
    if (damageCategory === 1 && target.physicalTaken != null) {
      result = Math.round(result * target.physicalTaken);
      const pct = Math.round((target.physicalTaken - 1) * 100);
      notes.push({ text: 'Physique ×' + target.physicalTaken.toFixed(2), type: pct < 0 ? 'resist' : 'weak' });
    } else if (damageCategory === 2 && target.magicalTaken != null) {
      result = Math.round(result * target.magicalTaken);
      const pct = Math.round((target.magicalTaken - 1) * 100);
      notes.push({ text: 'Magie ×' + target.magicalTaken.toFixed(2), type: pct < 0 ? 'resist' : 'weak' });
    }

    // ── Target : element absorb (Yanfly) — écrase le reste, dégâts → soin
    if (elementId != null) {
      const absorber = targetStatuses.find(st =>
        getParsedTags(st, 'elementAbsorb').some(oid => elementDbIdFromOriginalId(oid) === elementId)
      );
      if (absorber) {
        result = -Math.abs(result);
        const name = ELEMENT_MAP[elementId] ?? '?';
        notes.push({ text: name + ' absorbé → soin (' + absorber.name + ')', type: 'resist' });
        return { damage: result, notes };
      }
    }

    // ── Target : element reflect (Yanfly) ─────────────────────────
    if (elementId != null) {
      let reflectPct = 0;
      const reflectors = [];
      targetStatuses.forEach(st => {
        getParsedTags(st, 'elementReflect').forEach(entry => {
          if (elementDbIdFromOriginalId(entry.elementOriginalId) === elementId) {
            reflectPct += entry.percent;
            reflectors.push(st.name);
          }
        });
      });
      if (reflectPct > 0) {
        const kept = Math.max(0, 1 - reflectPct / 100);
        const reflected = Math.round(result * Math.min(1, reflectPct / 100));
        result = Math.round(result * kept);
        const name = ELEMENT_MAP[elementId] ?? '?';
        notes.push({
          text: name + ' réfléchi ' + reflectPct + '% (' + reflected + ' → attaquant, ' + reflectors.join(', ') + ')',
          type: 'resist',
        });
      }
    }

    // Aggrège une valeur numérique depuis parsedTags de tous les statuts.
    function sumFrom(statuses, key) {
      let total = 0;
      statuses.forEach(st => { total += (st?.extraData?.parsedTags?.[key] || 0); });
      return total;
    }
    function namesFrom(statuses, key) {
      return statuses.filter(st => st?.extraData?.parsedTags?.[key]).map(st => st.name);
    }

    let egDamage       = 0; // dégâts redirigés vers l'EG (split_damage)
    let attackerDamage = 0; // dégâts renvoyés à l'attaquant (reflect_damage)
    let attackerHeal   = 0; // lifesteal (convert hp physical/magical)

    // ── Target : absorb_damage (mitigation flat) ─────────────────
    const absorbPct = Math.min(100, sumFrom(targetStatuses, 'absorbDamage'));
    if (absorbPct > 0 && result > 0) {
      const mitigated = Math.round(result * (1 - absorbPct / 100));
      notes.push({ text: 'Absorbe ' + absorbPct + '% (' + namesFrom(targetStatuses, 'absorbDamage').join(', ') + ')', type: 'resist' });
      result = mitigated;
    }

    // ── Target : ignore_damage (probabiliste, on affiche la moyenne) ──
    const ignorePct = Math.min(100, sumFrom(targetStatuses, 'ignoreDamage'));
    if (ignorePct > 0 && result > 0) {
      const avg = Math.round(result * (1 - ignorePct / 100));
      notes.push({ text: ignorePct + '% chance annulation → moyenne ×' + (1 - ignorePct / 100).toFixed(2), type: 'resist' });
      result = avg;
    }

    // ── Target : split_damage (X% redirigés vers EG) ─────────────
    const splitPct = Math.min(100, sumFrom(targetStatuses, 'splitDamage'));
    if (splitPct > 0 && result > 0) {
      egDamage = Math.round(result * splitPct / 100);
      result = result - egDamage;
      notes.push({ text: splitPct + '% → EG (' + egDamage + ' EG, ' + namesFrom(targetStatuses, 'splitDamage').join(', ') + ')', type: 'resist' });
    }

    // ── Target : reflect_damage (thorns : cible 0, attaquant N × dmg) ──
    const reflectMult = sumFrom(targetStatuses, 'reflectDamage');
    if (reflectMult > 0 && result > 0) {
      attackerDamage = Math.round(result * reflectMult);
      const reflNames = namesFrom(targetStatuses, 'reflectDamage').join(', ');
      notes.push({ text: 'Contre ×' + reflectMult.toFixed(2) + ' → attaquant subit ' + attackerDamage + ' (' + reflNames + ')', type: 'resist' });
      result = 0;
      egDamage = 0;
    }

    // ── Attacker : convert hp (lifesteal selon damageCategory) ────
    if (result > 0) {
      const convKey = damageCategory === 1 ? 'convertHpPhysical'
                    : damageCategory === 2 ? 'convertHpMagical' : null;
      if (convKey) {
        const pct = sumFrom(attackerStatuses, convKey);
        if (pct !== 0) {
          attackerHeal = Math.round(result * pct / 100);
          const convNames = namesFrom(attackerStatuses, convKey).join(', ');
          const label = damageCategory === 1 ? 'Vol de vie phys.' : 'Vol de vie mag.';
          notes.push({ text: label + ' ' + (pct > 0 ? '+' : '') + pct + '% → ' + attackerHeal + ' PV (' + convNames + ')', type: pct > 0 ? 'weak' : 'resist' });
        }
      }
    }

    return { damage: result, notes, egDamage, attackerDamage, attackerHeal };
  }

  function renderResistNotes(resultEl, notes) {
    if (!notes.length) return;
    const row = el('div', 'resist-notes');
    notes.forEach(n => row.appendChild(el('span', 'resist-badge ' + (n.type === 'weak' ? 'weak' : 'resist'), n.text)));
    resultEl.appendChild(row);
  }

  // ── Attack simulation ──────────────────────────────────────────────
  function updateAttackPanel() {
    // ── Char attacks enemy ──
    const charWeaponInfoEl = document.getElementById('charWeaponInfo');
    if (charWeaponInfoEl) {
      document.getElementById('charAttackResult').style.display = 'none';
      const weapon = equipped.weapon;
      if (!weapon) {
        charWeaponInfoEl.innerHTML = '<span class="attack-no-weapon">Équipez une arme pour simuler une attaque.</span>';
      } else {
        charWeaponInfoEl.innerHTML = '';
        charWeaponInfoEl.appendChild(el('span', 'attack-weapon-name', weapon.name));
        charWeaponInfoEl.appendChild(el('span', 'attack-formula', '[ ' + (weapon.formula || DEFAULT_WEAPON_FORMULA) + ' ]'));
      }
      document.getElementById('btnCharWeapon').disabled = !(currentChar && currentEnemy && weapon);

      const critRow   = document.getElementById('critRow');
      const critCheck = document.getElementById('critCheck');
      const critLabel = document.getElementById('critLabel');
      const critNote  = document.getElementById('critNote');
      if (weapon) {
        critRow.style.display = '';
        const isEspadon = weapon.weaponTypeName === 'Espadon';
        const isDague   = weapon.weaponTypeName === 'Dague';
        critCheck.disabled = isEspadon;
        critLabel.className = 'crit-label' + (isEspadon ? ' disabled' : '');
        if (isEspadon) { critCheck.checked = false; critNote.textContent = 'Impossible avec un Espadon (−100% chances)'; }
        else if (isDague) { critNote.textContent = 'Dague : dégâts ×6'; }
        else { critNote.textContent = 'Dégâts ×3'; }
      } else {
        critRow.style.display = 'none';
        critCheck.checked = false;
      }

      const charSkillInfoEl = document.getElementById('charSkillInfo');
      if (!currentSkill) {
        charSkillInfoEl.innerHTML = '<span class="attack-no-skill">Sélectionnez une compétence.</span>';
      } else {
        charSkillInfoEl.innerHTML = '';
        charSkillInfoEl.appendChild(el('span', 'attack-skill-name', currentSkill.name));
        const f = currentSkill.formula;
        charSkillInfoEl.appendChild(el('span', 'attack-formula', f ? '[ ' + f + ' ]' : '[ aucune formule ]'));
      }
      document.getElementById('btnCharSkill').disabled = !(currentChar && currentEnemy && currentSkill);
    }

    // ── Enemy attacks char ──
    const enemyWeaponInfoEl = document.getElementById('enemyWeaponInfo');
    if (enemyWeaponInfoEl) {
      document.getElementById('enemyAttackResult').style.display = 'none';
      if (currentChar && currentEnemy) {
        enemyWeaponInfoEl.innerHTML = '';
        enemyWeaponInfoEl.appendChild(el('span', 'attack-weapon-name', 'Attaque physique'));
        enemyWeaponInfoEl.appendChild(el('span', 'attack-formula', '[ ' + DEFAULT_WEAPON_FORMULA + ' ]'));
      } else {
        enemyWeaponInfoEl.innerHTML = '<span class="attack-no-weapon">Sélectionnez un ennemi et un personnage.</span>';
      }
      document.getElementById('btnEnemyWeapon').disabled = !(currentChar && currentEnemy);

      const enemySkillInfoEl = document.getElementById('enemySkillInfo');
      if (!currentEnemySkill) {
        enemySkillInfoEl.innerHTML = '<span class="attack-no-skill">Sélectionnez une compétence ennemie.</span>';
      } else {
        enemySkillInfoEl.innerHTML = '';
        enemySkillInfoEl.appendChild(el('span', 'attack-skill-name', currentEnemySkill.name));
        const f = currentEnemySkill.formula;
        enemySkillInfoEl.appendChild(el('span', 'attack-formula', f ? '[ ' + f + ' ]' : '[ aucune formule ]'));
      }
      document.getElementById('btnEnemySkill').disabled = !(currentChar && currentEnemy && currentEnemySkill);
    }
  }

  function toStatObject(s, cur) {
    const counters = {};
    if (cur) {
      const skip = new Set(['pv', 'eg', 'power']);
      Object.entries(cur).forEach(([k, v]) => { if (!skip.has(k)) counters[k] = v; });
    }
    return {
      hp:  cur ? cur.pv    : s.pvMax,
      mhp: s.pvMax,
      mp:  cur ? cur.eg    : s.egMax,
      mmp: s.egMax,
      tp:  cur ? cur.power : 0,
      atk: s.attaque, def: s.defense,
      mat: s.arcane,  mdf: s.sagesse,
      agi: s.vitesse, luk: s.finesse,
      ...counters,
    };
  }

  function getApplicableCounters() {
    const list = [];
    (CHAR_COUNTERS[currentChar?.id] || []).forEach(c => list.push(c));
    Object.entries(EQUIP_COUNTERS).forEach(([itemId, counters]) => {
      const isEquipped = Object.values(equipped).some(item => item && item.id == itemId);
      if (isEquipped) counters.forEach(c => list.push(c));
    });
    return list;
  }

  // Statuts induits par les passifs : natifs (toujours actifs, invisibles dans
  // Injection auto-réactive des statuts « passifs » dans activeCharStatuses.
  // Trois sources unifiées, dans l'ordre :
  //   1. Passifs élémentaux (type du perso → PASSIVE_STATUS_BY_ELEMENT)
  //   2. Passifs skills natifs + cochés (skill.extraData.passiveStateId)
  //   3. Passifs d'équipement (weapon/armor.passiveStateOriginalIds — tag <passive state>)
  // Mutation en place pour préserver la référence de tableau (le picker garde son
  // targetArr dans sa closure).
  function refreshAutoInjectedStatuses() {
    if (!currentChar) return;
    for (let i = activeCharStatuses.length - 1; i >= 0; i--) {
      if (activeCharStatuses[i].isPassive) activeCharStatuses.splice(i, 1);
    }
    const originalIds = new Set();

    // Élémentaux — PASSIVE_STATUS_BY_ELEMENT est indexé par elementDbId → statusDbId,
    // on remonte à originalId pour homogénéiser la clé de dédup.
    (currentChar.elementalTypes || []).forEach(elId => {
      const statusId = PASSIVE_STATUS_BY_ELEMENT[elId];
      const st = STATUSES.find(s => s.id === statusId);
      if (st && st.originalId != null) originalIds.add(st.originalId);
    });

    // Passifs skills — natifs (toujours actifs) + activés via case cochée.
    const skillIds = new Set([...(currentChar.nativePassives || []), ...activePassives]);
    skillIds.forEach(skillId => {
      const oid = SKILLS.find(s => s.id === skillId)?.extraData?.passiveStateId;
      if (oid) originalIds.add(oid);
    });

    // Équipement — passiveStateOriginalIds sur weapon + toutes les armures équipées.
    Object.values(equipped).forEach(item => {
      (item?.passiveStateOriginalIds || []).forEach(oid => originalIds.add(oid));
    });

    originalIds.forEach(oid => {
      const st = STATUSES.find(s => s.originalId === oid);
      if (st) activeCharStatuses.push({ ...st, isPassive: true });
    });

    refreshStatusPicker('charStatusList');
  }

  function charCurrent() {
    const extra = {};
    // Compteurs façon CSF : exposés via `a.<formulaKey>` (ex. Frénésie → a.fr).
    // Les compteurs NS façon `v[X]` ne passent pas par cet objet — cf. preprocessFormula.
    getApplicableCounters().forEach(c => {
      if (c.formulaKey) extra[c.formulaKey] = counterValues[c.id] ?? 0;
    });
    return { pv: currentPv, eg: currentEg, power: currentPower, ...extra };
  }

  // Mapping code stat Yanfly VXAce → clé stat NS. `vit` (custom NS) et `agi`
  // pointent tous deux sur `vitesse` (même stat côté gameplay).
  const YANFLY_STAT_MAP = {
    atk: 'attaque',
    def: 'defense',
    mat: 'arcane',
    mdf: 'sagesse',
    agi: 'vitesse',
    vit: 'vitesse',
    luk: 'finesse',
    mhp: 'pvMax',
    mmp: 'egMax',
  };

  // Statuts contribuant au calcul des bonus « custom » du perso — tous vivent
  // désormais dans activeCharStatuses (auto-injectés + manuels).
  function collectCharBonusStatuses() {
    return activeCharStatuses;
  }

  // Extrait les customBonuses portés par une entité (statut, skill, perso).
  // Statuts : passés par ParseStatusTagsCommand → parsedTags.customBonuses.
  // Skills / persos : renseignés à la main dans extraData.customBonuses.
  function getCarrierCustomBonuses(carrier) {
    return carrier?.extraData?.parsedTags?.customBonuses
        || carrier?.extraData?.customBonuses
        || [];
  }

  // Passifs actifs (natifs + cochés) exposant des customBonuses directement
  // sur le skill (sans passer par un statut).
  function collectCharBonusPassiveSkills() {
    const ids = new Set([...(currentChar?.nativePassives || []), ...activePassives]);
    return [...ids]
      .map(id => SKILLS.find(s => s.id === id))
      .filter(sk => sk && getCarrierCustomBonuses(sk).length > 0);
  }

  // Porteurs unifiés de bonus custom : statuts + passifs skills + le perso
  // lui-même (tags de classe stockés dans `character.extraData`).
  function collectCharBonusCarriers() {
    const out = collectCharBonusStatuses().concat(collectCharBonusPassiveSkills());
    if (getCarrierCustomBonuses(currentChar).length > 0) {
      out.push({ name: currentChar.name, extraData: currentChar.extraData });
    }
    return out;
  }

  // Multiplicateur induit par les tags `<custom {stat}: low {resource} +x%>`
  // sur `statKey`. Formule Yanfly : +percent% par 1% de ressource manquante,
  // soit mult = 1 + percent × missing_fraction. Ex. X=1, 40/400 PV → +90 %.
  function computeCustomBonusMult(statKey, maxPv, maxEg) {
    let mult = 1;
    collectCharBonusCarriers().forEach(st => {
      const bonuses = getCarrierCustomBonuses(st);
      if (!bonuses.length) return;
      bonuses.forEach(b => {
        if (YANFLY_STAT_MAP[b.stat] !== statKey) return;
        let current, max;
        if      (b.resource === 'hp') { current = currentPv;    max = maxPv; }
        else if (b.resource === 'mp') { current = currentEg;    max = maxEg; }
        else if (b.resource === 'tp') { current = currentPower; max = 150;   }
        else return;
        if (max <= 0) return;
        if (b.type === 'lowResource') {
          const missing = Math.max(0, max - current) / max;
          mult *= 1 + b.percent * missing;
        } else if (b.type === 'lowResourceThreshold') {
          const pct = current / max * 100;
          if (pct < b.threshold) mult *= b.multiplier;
        }
      });
    });
    return mult;
  }

  // Multiplicateurs induits par les compteurs à `statBonus`.
  // Ex. Jack, Thermodynamique = 0.10, 5 cumuls → attaque × 1.5, arcane × 1.5.
  // Compteurs sans `statBonus` (Présage, Atouts, etc.) laissent le facteur à 1.
  function computeCounterStatMultipliers() {
    const out = Object.fromEntries(STAT_KEYS.map(k => [k, 1]));
    getApplicableCounters().forEach(c => {
      if (!c.statBonus) return;
      const cumuls = counterValues[c.id] ?? 0;
      if (cumuls <= 0) return;
      Object.entries(c.statBonus).forEach(([stat, perCumul]) => {
        if (stat in out) out[stat] *= 1 + perCumul * cumuls;
      });
    });
    return out;
  }

  function getCharFinalStats() {
    const bonus            = computeBonus();
    const mults            = computeMultipliers();
    const counterMults     = computeCounterStatMultipliers();
    const s = {};
    STAT_KEYS.forEach(key => {
      const base = scaledStat(currentChar.stats[key], key, currentLevel);
      let val = Math.round((base + bonus[key]) * mults[key]);
      if (counterMults[key] !== 1) val = Math.round(val * counterMults[key]);
      activeCharStatuses.forEach(st => {
        const m = st.multipliers[key];
        if (m != null) val = Math.round(val * m);
      });
      activeCharStatVariations.forEach(v => {
        if (v.stat === key) val = Math.round(val * variationMultiplier(v));
      });
      s[key] = val;
    });
    // Deuxième passe — bonus custom (lowResource…) fonction des maxes calculés.
    STAT_KEYS.forEach(key => {
      const m = computeCustomBonusMult(key, s.pvMax, s.egMax);
      if (m !== 1) s[key] = Math.round(s[key] * m);
    });
    return s;
  }

  function getEnemyFinalStats() {
    const s = {};
    STAT_KEYS.forEach(key => {
      let val = currentEnemy.stats[key] ?? 0;
      activeEnemyStatuses.forEach(st => {
        const m = st.multipliers[key];
        if (m != null) val = Math.round(val * m);
      });
      activeEnemyStatVariations.forEach(v => {
        if (v.stat === key) val = Math.round(val * variationMultiplier(v));
      });
      s[key] = val;
    });
    return s;
  }

  function simulateAttack() {
    const weapon = equipped.weapon;
    if (!weapon || !currentChar || !currentEnemy) return;

    const a = toStatObject(getCharFinalStats(), charCurrent());
    const b = toStatObject(getEnemyFinalStats());
    const formula = weapon.formula || DEFAULT_WEAPON_FORMULA;

    const hits = weapon.bonusHit || 1;
    const processedFormula = preprocessFormula(formula, activeCharStatuses, activeEnemyStatuses);

    let perHit;
    try {
      perHit = Math.max(0, Math.round(
        new Function('a', 'b', '"use strict"; return (' + processedFormula + ');')(a, b)
      ));
    } catch (e) {
      perHit = null;
    }

    const resultEl = document.getElementById('charAttackResult');
    resultEl.innerHTML = '';
    resultEl.style.display = 'block';

    if (perHit === null) {
      resultEl.appendChild(el('div', 'attack-outcome', 'Erreur dans la formule.'));
      return;
    }

    const { damage: rawPerHit, notes: resNotes } = applyResistances(perHit, weapon.elementId ?? null, currentEnemy, 1, collectCharBonusStatuses(), activeEnemyStatuses);
    const critCheck = document.getElementById('critCheck');
    const isCrit    = critCheck && critCheck.checked && !critCheck.disabled;
    const critMult  = isCrit ? (weapon.weaponTypeName === 'Dague' ? 6 : 3) : 1;
    const adjPerHit = isCrit ? Math.round(rawPerHit * critMult) : rawPerHit;
    const total = adjPerHit * hits;
    const label = buildDamageLabel(adjPerHit, hits, null);

    resultEl.appendChild(el('div', 'attack-flavor',
      currentChar.name + ' attaque ' + currentEnemy.name + ' avec ' + weapon.name));
    if (isCrit) resultEl.appendChild(el('div', 'crit-badge', '⚡ COUP CRITIQUE ×' + critMult));
    renderResistNotes(resultEl, resNotes);
    resultEl.appendChild(el('div', 'attack-dmg-label', 'Dégâts infligés'));
    resultEl.appendChild(el('div', 'attack-dmg-value', label));

    const enemyHp  = getEnemyFinalStats().pvMax;
    const remaining = enemyHp - total;
    const outcome = el('div', 'attack-outcome ' + (remaining <= 0 ? 'kill' : 'survive'));
    outcome.textContent = remaining <= 0
      ? 'L\'ennemi est vaincu !'
      : 'L\'ennemi survit avec ~' + Math.max(0, remaining).toLocaleString('fr-FR') + ' PV restants.';
    resultEl.appendChild(outcome);
    renderAttackStatuses(resultEl, weapon.statusInflicted || [], []);
  }

  document.getElementById('btnCharWeapon').addEventListener('click', simulateAttack);

  // ── Status picker ─────────────────────────────────────────────────
  // Registre des pickers actifs, permet un refresh externe (renderList + dropdown)
  // quand la liste de statuts est mutée hors du picker (auto-injection, unlock…).
  const STATUS_PICKERS = {};

  function buildStatusPicker(targetArr, listId, onUpdate) {
    const panel = el('div', 'status-picker-panel');
    panel.appendChild(el('div', 'panel-title', 'Statuts actifs'));

    const row    = el('div', 'status-picker-row');
    const select = document.createElement('select');
    select.id    = listId + '-select';
    const btn    = el('button', 'btn-add-status', '+ Ajouter');
    btn.type = 'button';
    row.appendChild(select);
    row.appendChild(btn);
    panel.appendChild(row);

    const list = el('div', 'active-statuses');
    list.id = listId;
    panel.appendChild(list);

    // Reconstruit le dropdown en excluant les statuts déjà présents en tant que
    // passifs auto-injectés (isPassive) ou manuellement ajoutés.
    function refreshDropdown() {
      const lockedIds  = new Set(targetArr.filter(s => s.isPassive).map(s => s.id));
      const currentIds = new Set(targetArr.map(s => s.id));
      const prev = select.value;
      select.innerHTML = '';
      select.appendChild(new Option('— Ajouter un statut —', ''));
      STATUSES.forEach(s => {
        if (s.hideInResults) return;
        if (lockedIds.has(s.id) || currentIds.has(s.id)) return;
        select.appendChild(new Option(s.name, s.id));
      });
      if (prev && !lockedIds.has(parseInt(prev))) select.value = prev;
    }

    function renderList() {
      list.innerHTML = '';
      // Les passifs auto-injectés ne s'affichent pas ici (visibles dans la carte
      // portrait / panneau passifs). Ils restent dans targetArr pour les calculs.
      targetArr.forEach((st, idx) => {
        if (st.isPassive) return;
        const tag = el('div', 'active-status-tag');
        tag.appendChild(document.createTextNode(st.name));
        const rmBtn = el('button', 'btn-remove-status', '×');
        rmBtn.type  = 'button';
        rmBtn.addEventListener('click', () => {
          targetArr.splice(idx, 1);
          renderList();
          refreshDropdown();
          if (onUpdate) onUpdate();
        });
        tag.appendChild(rmBtn);
        list.appendChild(tag);
      });
    }

    btn.addEventListener('click', () => {
      const status = STATUSES.find(s => s.id == select.value);
      if (!status || targetArr.find(s => s.id === status.id)) return;
      targetArr.push(status);
      select.value = '';
      renderList();
      refreshDropdown();
      if (onUpdate) onUpdate();
    });

    STATUS_PICKERS[listId] = { targetArr, renderList, refreshDropdown };
    refreshDropdown();
    renderList();
    return panel;
  }

  // Reflète les mutations externes de la liste de statuts (auto-injection) dans le
  // picker : re-render de la liste visible + du dropdown.
  function refreshStatusPicker(listId) {
    const p = STATUS_PICKERS[listId];
    if (!p) return;
    p.renderList();
    p.refreshDropdown();
  }

  // ── Variation picker ──────────────────────────────────────────────
  function buildVariationPicker(targetArr, listId, onUpdate) {
    const panel = el('div', 'variation-picker-panel');
    panel.appendChild(el('div', 'panel-title', 'Variations de stats'));

    const row = el('div', 'variation-control-row');

    const typeSelect = document.createElement('select');
    typeSelect.appendChild(new Option('Augmentation', 'buff'));
    typeSelect.appendChild(new Option('Altération', 'debuff'));

    const statSelect = document.createElement('select');
    STAT_KEYS.forEach(k => statSelect.appendChild(new Option(STAT_META[k].label, k)));

    const lvlInput = document.createElement('input');
    lvlInput.type = 'number'; lvlInput.min = '1'; lvlInput.max = '8'; lvlInput.value = '1';

    const btn = el('button', 'btn-add-status', '+ Ajouter');
    btn.type = 'button';

    row.appendChild(typeSelect);
    row.appendChild(statSelect);
    row.appendChild(lvlInput);
    row.appendChild(el('span', null, 'niv.'));
    row.appendChild(btn);
    panel.appendChild(row);

    const list = el('div', 'active-variations');
    list.id = listId;
    panel.appendChild(list);

    function renderList() {
      list.innerHTML = '';
      targetArr.forEach((v, idx) => {
        const tag = el('div', 'variation-tag ' + v.type);
        tag.appendChild(document.createTextNode(variationLabel(v)));
        const rmBtn = el('button', 'btn-remove-status', '×');
        rmBtn.type = 'button';
        rmBtn.addEventListener('click', () => {
          targetArr.splice(idx, 1);
          renderList();
          if (onUpdate) onUpdate();
        });
        tag.appendChild(rmBtn);
        list.appendChild(tag);
      });
    }

    btn.addEventListener('click', () => {
      const stat  = statSelect.value;
      const type  = typeSelect.value;
      const level = Math.max(1, parseInt(lvlInput.value) || 1);
      const existing = targetArr.findIndex(v => v.stat === stat && v.type === type);
      if (existing !== -1) targetArr.splice(existing, 1);
      targetArr.push({ stat, type, level });
      lvlInput.value = '1';
      renderList();
      if (onUpdate) onUpdate();
    });

    renderList();
    return panel;
  }

  // ── Counter panels (generic) ───────────────────────────────────────
  // Plafond effectif : +50 % (ceil) quand « Hors-limites actif » est coché.
  function effectiveCounterMax(config) {
    if (!Number.isFinite(config.max)) return Infinity;
    return horsLimitesActive ? Math.ceil(config.max * 1.5) : config.max;
  }

  function buildCounterPanel(config) {
    if (!(config.id in counterValues)) counterValues[config.id] = 0;
    const cap = effectiveCounterMax(config);
    counterValues[config.id] = Math.min(cap, Math.max(0, counterValues[config.id]));

    const panel = el('div', 'skill-select-panel counter-panel');
    const header = el('div', 'panel-label', config.label + (Number.isFinite(cap) ? ' (max ' + cap + ')' : ''));
    header.style.color = config.color;
    panel.appendChild(header);
    const row = document.createElement('div');
    row.style.cssText = 'display:flex;align-items:center;gap:8px;';
    const input = document.createElement('input');
    input.type = 'number'; input.min = '0';
    if (Number.isFinite(cap)) input.max = String(cap);
    input.value = counterValues[config.id];
    input.className = 'bar-input'; input.style.width = '64px';
    input.id = 'counterInput_' + config.id;
    input.addEventListener('input', () => {
      const raw = Math.max(0, parseInt(input.value) || 0);
      counterValues[config.id] = Math.min(cap, raw);
      // Rafraîchit les stats si le compteur donne un bonus (Thermodynamique, etc.)
      // et l'attaque dans tous les cas (le compteur peut alimenter v[X]).
      if (config.statBonus) updateStatsPanel();
      updateAttackPanel();
    });
    input.addEventListener('blur', () => { input.value = counterValues[config.id]; });
    const lbl = el('span', null, config.unit);
    lbl.style.cssText = 'font-size:.75rem;color:var(--muted);';
    row.appendChild(input);
    row.appendChild(lbl);
    panel.appendChild(row);
    return panel;
  }

  // Toggle « Hors-limites actif » — affiché uniquement si le perso a au moins
  // un compteur. Re-render les panneaux des compteurs pour prendre en compte
  // les nouveaux plafonds (les valeurs au-delà seront clampées via buildCounterPanel).
  function buildHorsLimitesPanel() {
    const panel = el('div', 'skill-select-panel counter-panel hors-limites-panel');
    const wrap = document.createElement('label');
    wrap.style.cssText = 'display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;';
    const box = document.createElement('input');
    box.type    = 'checkbox';
    box.checked = horsLimitesActive;
    box.id      = 'horsLimitesToggle';
    box.style.cssText = 'width:16px;height:16px;accent-color:var(--accent);';
    box.addEventListener('change', () => {
      horsLimitesActive = box.checked;
      updateCounterPanels();
    });
    const lbl = el('span', 'panel-label', 'Hors-limites actif');
    lbl.style.margin = '0';
    const hint = el('span', null, '(+50 % de plafond)');
    hint.style.cssText = 'font-size:.72rem;color:var(--muted);';
    wrap.appendChild(box);
    wrap.appendChild(lbl);
    wrap.appendChild(hint);
    panel.appendChild(wrap);
    return panel;
  }

  function updateCounterPanels() {
    const leftCol = document.querySelector('#calcGrid .left-col');
    if (!leftCol) return;
    // On retire uniquement les compteurs — pas le toggle « Hors-limites »
    // (sinon la case décochée passerait re-cochée à chaque refresh).
    leftCol.querySelectorAll('.counter-panel:not(.hors-limites-panel)').forEach(p => p.remove());
    // NS : pas d'attr-panel — on insère avant le sélecteur de compétence à la place.
    // `:not(.counter-panel)` évite de matcher le panel Hors-limites qui porte aussi
    // la classe `.skill-select-panel` (sinon les compteurs se retrouveraient au-dessus).
    const anchor = leftCol.querySelector('.skill-select-panel:not(.counter-panel)');
    getApplicableCounters().forEach(c => leftCol.insertBefore(buildCounterPanel(c), anchor));
  }

  // Skills passifs NS = skillType 3 : exclus du sélecteur de compétence,
  // regroupés dans le panneau dédié.
  const PASSIVE_SKILL_TYPE = 3;

  // Toutes sources de skills accessibles au perso : passifs natifs +
  // learnSpells (filtrés par niveau) + learnByAtoutsSpells + équipement.
  function collectAllCharSkillIds() {
    if (!currentChar) return [];
    const ids = new Set();
    (currentChar.nativePassives || []).forEach(id => ids.add(id));
    (currentChar.learnSpells || []).forEach(entry => {
      if (entry.level <= currentLevel) ids.add(entry.skillId);
    });
    (currentChar.learnByAtoutsSpells || []).forEach(id => ids.add(id));
    Object.values(equipped).forEach(item => {
      if (item && item.grantsSkills) item.grantsSkills.forEach(id => ids.add(id));
    });
    return [...ids];
  }

  // ── Skill selector ─────────────────────────────────────────────────
  function buildAvailableSkills() {
    return collectAllCharSkillIds()
      .map(id => SKILLS.find(s => s.id === id))
      .filter(sk => sk && sk.skillType !== PASSIVE_SKILL_TYPE);
  }

  // IDs des passifs togglables du perso — natifs exclus (toujours actifs,
  // auto-injectés via refreshAutoInjectedStatuses, non affichés dans le panneau).
  function getCharPassiveSkillIds() {
    const nativeSet = new Set(currentChar?.nativePassives || []);
    return collectAllCharSkillIds().filter(id => {
      if (nativeSet.has(id)) return false;
      const sk = SKILLS.find(s => s.id === id);
      return sk && sk.skillType === PASSIVE_SKILL_TYPE;
    });
  }

  // Panneau « Passifs » — agrège tous les skillType=Passif accessibles au perso
  // (natifs + appris par niveau + par Atouts + équipement). Chaque passif est
  // togglable via un clic. `null` si aucun.
  function buildNativePassivesPanel() {
    const ids = getCharPassiveSkillIds();
    const skills = ids.map(id => SKILLS.find(s => s.id === id)).filter(Boolean);
    if (skills.length === 0) return null;

    const panel = el('div', 'skill-select-panel passives-panel');
    panel.appendChild(el('div', 'panel-label', 'Passif' + (skills.length > 1 ? 's' : '') + ' secondaire' + (skills.length > 1 ? 's' : '')));
    const list = document.createElement('div');
    list.style.cssText = 'display:flex;flex-direction:column;gap:6px;';
    skills.forEach(sk => {
      const row = document.createElement('label');
      row.style.cssText = 'display:flex;align-items:center;gap:8px;font-size:.82rem;cursor:pointer;user-select:none;padding:2px 4px;border-radius:4px;color:var(--text);';
      if (sk.description) row.title = sk.description;
      const cb = document.createElement('input');
      cb.type = 'checkbox';
      cb.checked = activePassives.has(sk.id);
      cb.style.cssText = 'margin:0;cursor:pointer;';
      cb.addEventListener('change', () => {
        if (cb.checked) activePassives.add(sk.id);
        else activePassives.delete(sk.id);
        refreshAutoInjectedStatuses();
        updateStatsPanel();
        updateAttackPanel();
      });
      row.appendChild(cb);
      row.appendChild(el('span', null, sk.name));
      list.appendChild(row);
    });
    panel.appendChild(list);
    return panel;
  }

  function buildSkillSelector() {
    const panel = el('div', 'skill-select-panel');
    panel.appendChild(el('div', 'panel-label', 'Compétence'));
    const select = document.createElement('select');
    select.id = 'skillSelect';
    fillSkillOptions(select);
    select.addEventListener('change', () => {
      currentSkill = SKILLS.find(s => s.id == select.value) || null;
      updateAttackPanel();
    });
    panel.appendChild(select);
    return panel;
  }

  function fillSkillOptions(select) {
    const prevId = currentSkill?.id;
    select.innerHTML = '';
    select.appendChild(new Option('— Choisir —', ''));
    buildAvailableSkills().forEach(sk => select.appendChild(new Option(sk.name, sk.id)));
    if (prevId) select.value = prevId;
    currentSkill = SKILLS.find(s => s.id == select.value) || null;
  }

  // Réconcilie activePassives avec les passifs actuellement accessibles :
  // nouveaux passifs = actifs par défaut, passifs retirés = supprimés.
  // Puis re-rend le panneau in-place (ou l'insère/le retire).
  let knownPassiveIds = new Set();
  function updatePassivesPanel() {
    const availableIds = new Set(getCharPassiveSkillIds());
    availableIds.forEach(id => { if (!knownPassiveIds.has(id)) activePassives.add(id); });
    [...activePassives].forEach(id => { if (!availableIds.has(id)) activePassives.delete(id); });
    knownPassiveIds = availableIds;

    const current = document.getElementById('passivesPanel');
    const newPanel = buildNativePassivesPanel();
    if (newPanel) newPanel.id = 'passivesPanel';
    if (current && newPanel) current.replaceWith(newPanel);
    else if (current && !newPanel) current.remove();
    else if (!current && newPanel) {
      const anchor = document.querySelector('.left-col .skill-select-panel:not(.counter-panel):not(.passives-panel)');
      if (anchor) anchor.parentNode.insertBefore(newPanel, anchor);
    }
  }

  function updateSkillSelector() {
    const select = document.getElementById('skillSelect');
    if (select) fillSkillOptions(select);
    updateAttackPanel();
  }

  // ── Attribute point panel ──────────────────────────────────────────
  function availableAttrPoints() {
    return Math.max(0, currentLevel - 1) * 3;
  }

  function buildAttributePanel() {
    const avail = availableAttrPoints();
    const used  = STAT_KEYS.reduce((sum, k) => sum + (attributePoints[k] || 0), 0);
    const rem   = avail - used;

    const panel = el('div', 'attr-panel');

    const header = el('div', 'attr-header');
    header.appendChild(el('span', 'panel-label', 'Points d\'attributs'));
    const counter = el('span', 'attr-counter' + (rem === 0 && avail > 0 ? ' full' : ''),
      avail === 0 ? 'Niveau 1 — aucun point' : rem + ' restant' + (rem !== 1 ? 's' : '') + ' / ' + avail);
    counter.id = 'attrCounter';
    header.appendChild(counter);
    panel.appendChild(header);

    const rows = el('div', 'attr-rows');
    STAT_KEYS.forEach(key => {
      const meta     = STAT_META[key];
      const valPerPt = currentChar?.attributeValues?.[key] ?? 0;
      const pts      = attributePoints[key] || 0;

      const row = el('div', 'attr-row');

      const labelEl = el('span', 'attr-stat-label', meta.label);
      labelEl.style.color = 'var(--' + meta.css + ')';
      row.appendChild(labelEl);

      const input = document.createElement('input');
      input.type      = 'number';
      input.min       = '0';
      input.id        = 'attrInput_' + key;
      input.className = 'attr-input';
      input.value     = pts;
      input.disabled  = avail === 0 || valPerPt === 0;

      input.addEventListener('change', () => {
        const totalAvail = availableAttrPoints();
        let val = Math.max(0, parseInt(input.value) || 0);
        const otherUsed = STAT_KEYS.filter(k => k !== key)
          .reduce((sum, k) => sum + (attributePoints[k] || 0), 0);
        val = Math.min(val, Math.max(0, totalAvail - otherUsed));
        input.value = val;
        attributePoints[key] = val;
        const hint = document.getElementById('attrHint_' + key);
        if (hint) hint.textContent = formatHint(valPerPt, val);
        updateAttrCounter();
        updateStatsPanel();
      });
      row.appendChild(input);

      const hint = el('span', 'attr-hint');
      hint.id = 'attrHint_' + key;
      hint.textContent = valPerPt > 0 ? formatHint(valPerPt, pts) : '—';
      row.appendChild(hint);

      rows.appendChild(row);
    });
    panel.appendChild(rows);
    return panel;
  }

  function formatHint(valPerPt, pts) {
    return '× ' + valPerPt + ' = +' + (pts * valPerPt).toLocaleString('fr-FR');
  }

  function updateAttrCounter() {
    const counter = document.getElementById('attrCounter');
    if (!counter) return;
    const avail = availableAttrPoints();
    const used  = STAT_KEYS.reduce((sum, k) => sum + (attributePoints[k] || 0), 0);
    const rem   = avail - used;
    counter.textContent = avail === 0 ? 'Niveau 1 — aucun point'
      : rem + ' restant' + (rem !== 1 ? 's' : '') + ' / ' + avail;
    counter.className = 'attr-counter' + (rem === 0 && avail > 0 ? ' full' : '');
  }

  function updateAttributePanel() {
    const avail = availableAttrPoints();
    // Clamp invested points if level decreased
    let remaining = avail;
    STAT_KEYS.forEach(k => {
      attributePoints[k] = Math.min(attributePoints[k] || 0, remaining);
      remaining = Math.max(0, remaining - attributePoints[k]);
    });
    // Update inputs and hints in place
    STAT_KEYS.forEach(k => {
      const input    = document.getElementById('attrInput_' + k);
      const hint     = document.getElementById('attrHint_' + k);
      const valPerPt = currentChar?.attributeValues?.[k] ?? 0;
      if (input) {
        input.value    = attributePoints[k];
        input.disabled = avail === 0 || valPerPt === 0;
      }
      if (hint && valPerPt > 0) hint.textContent = formatHint(valPerPt, attributePoints[k]);
    });
    updateAttrCounter();
  }

  function buildEnemySkillSelector() {
    const panel = el('div', 'skill-select-panel');
    panel.appendChild(el('div', 'panel-label', 'Compétence'));
    const select = document.createElement('select');
    select.id = 'enemySkillSelect';
    fillEnemySkillOptions(select);
    select.addEventListener('change', () => {
      currentEnemySkill = SKILLS.find(s => s.id == select.value) || null;
      updateAttackPanel();
    });
    panel.appendChild(select);
    return panel;
  }

  function fillEnemySkillOptions(select) {
    select.innerHTML = '';
    select.appendChild(new Option('— Choisir —', ''));
    (currentEnemy.learnSpells || []).forEach(skillId => {
      const sk = SKILLS.find(s => s.id === skillId);
      if (sk) select.appendChild(new Option(sk.name, sk.id));
    });
    currentEnemySkill = SKILLS.find(s => s.id == select.value) || null;
  }

  // ── Skill attack simulation ────────────────────────────────────────
  function simulateSkillAttack() {
    if (!currentSkill || !currentChar || !currentEnemy) return;

    const formula = currentSkill.formula;
    const resultEl = document.getElementById('charAttackResult');
    resultEl.innerHTML = '';
    resultEl.style.display = 'block';

    if (!formula) {
      resultEl.appendChild(el('div', 'attack-outcome', 'Cette compétence n\'a pas de formule de dégâts.'));
      return;
    }

    const a = toStatObject(getCharFinalStats(), charCurrent());
    const b = toStatObject(getEnemyFinalStats());
    const hits = currentSkill.hits || 1;
    const processedFormula = preprocessFormula(formula, activeCharStatuses, activeEnemyStatuses);

    let perHit;
    try {
      perHit = Math.max(0, Math.round(
        new Function('a', 'b', '"use strict"; return (' + processedFormula + ');')(a, b)
      ));
    } catch (e) {
      perHit = null;
    }

    if (perHit === null) {
      resultEl.appendChild(el('div', 'attack-outcome', 'Erreur dans la formule.'));
      return;
    }

    const { damage: adjPerHit, notes: resNotes } = applyResistances(perHit, currentSkill.elementId ?? null, currentEnemy, currentSkill.damageCategory ?? 0, collectCharBonusStatuses(), activeEnemyStatuses);
    const total = adjPerHit * hits;
    const label = buildDamageLabel(adjPerHit, hits, currentSkill.variance);

    resultEl.appendChild(el('div', 'attack-flavor',
      currentChar.name + ' utilise ' + currentSkill.name + ' sur ' + currentEnemy.name));
    renderResistNotes(resultEl, resNotes);
    resultEl.appendChild(el('div', 'attack-dmg-label', 'Dégâts infligés'));
    resultEl.appendChild(el('div', 'attack-dmg-value', label));

    const enemyHp2   = getEnemyFinalStats().pvMax;
    const remaining  = enemyHp2 - total;
    const outcome = el('div', 'attack-outcome ' + (remaining <= 0 ? 'kill' : 'survive'));
    outcome.textContent = remaining <= 0
      ? 'L\'ennemi est vaincu !'
      : 'L\'ennemi survit avec ~' + Math.max(0, remaining).toLocaleString('fr-FR') + ' PV restants.';
    resultEl.appendChild(outcome);
    const si = currentSkill.statusInflicted || [];
    const targetsEnemy = [1, 2, 8, 9, 10].includes(currentSkill.targetType);
    renderAttackStatuses(resultEl, targetsEnemy ? si : [], targetsEnemy ? [] : si);
  }

  document.getElementById('btnCharSkill').addEventListener('click', simulateSkillAttack);

  // ── Enemy simulate functions ───────────────────────────────────────
  function simulateEnemyWeaponAttack() {
    if (!currentChar || !currentEnemy) return;
    const a = toStatObject(getEnemyFinalStats());
    const b = toStatObject(getCharFinalStats(), charCurrent());
    const hits = 1;
    const processedFormula = preprocessFormula(DEFAULT_WEAPON_FORMULA, activeEnemyStatuses, activeCharStatuses);
    let perHit;
    try {
      perHit = Math.max(0, Math.round(
        new Function('a', 'b', '"use strict"; return (' + processedFormula + ');')(a, b)
      ));
    } catch (e) { perHit = null; }

    const resultEl = document.getElementById('enemyAttackResult');
    resultEl.innerHTML = '';
    resultEl.style.display = 'block';
    if (perHit === null) { resultEl.appendChild(el('div', 'attack-outcome', 'Erreur dans la formule.')); return; }

    const { damage: adjPerHit, notes: resNotes } = applyResistances(perHit, null, currentChar, 1, activeEnemyStatuses, collectCharBonusStatuses());
    const total = adjPerHit * hits;
    const label = buildDamageLabel(adjPerHit, hits, null);
    resultEl.appendChild(el('div', 'attack-flavor', currentEnemy.name + ' attaque ' + currentChar.name));
    renderResistNotes(resultEl, resNotes);
    resultEl.appendChild(el('div', 'attack-dmg-label', 'Dégâts infligés'));
    resultEl.appendChild(el('div', 'attack-dmg-value', label));

    const charHp    = getCharFinalStats().pvMax;
    const remaining = charHp - total;
    const outcome   = el('div', 'attack-outcome ' + (remaining <= 0 ? 'kill' : 'survive'));
    outcome.textContent = remaining <= 0
      ? currentChar.name + ' est vaincu !'
      : currentChar.name + ' survit avec ~' + Math.max(0, remaining).toLocaleString('fr-FR') + ' PV restants.';
    resultEl.appendChild(outcome);
  }

  function simulateEnemySkillAttack() {
    if (!currentEnemySkill || !currentChar || !currentEnemy) return;
    const formula = currentEnemySkill.formula;
    const resultEl = document.getElementById('enemyAttackResult');
    resultEl.innerHTML = '';
    resultEl.style.display = 'block';
    if (!formula) { resultEl.appendChild(el('div', 'attack-outcome', 'Cette compétence n\'a pas de formule de dégâts.')); return; }

    const a    = toStatObject(getEnemyFinalStats());
    const b    = toStatObject(getCharFinalStats(), charCurrent());
    const hits = currentEnemySkill.hits || 1;
    const processedFormula = preprocessFormula(formula, activeEnemyStatuses, activeCharStatuses);
    let perHit;
    try {
      perHit = Math.max(0, Math.round(
        new Function('a', 'b', '"use strict"; return (' + processedFormula + ');')(a, b)
      ));
    } catch (e) { perHit = null; }

    if (perHit === null) { resultEl.appendChild(el('div', 'attack-outcome', 'Erreur dans la formule.')); return; }

    const { damage: adjPerHit, notes: resNotes } = applyResistances(perHit, currentEnemySkill.elementId ?? null, currentChar, currentEnemySkill.damageCategory ?? 0, activeEnemyStatuses, collectCharBonusStatuses());
    const total = adjPerHit * hits;
    const label = buildDamageLabel(adjPerHit, hits, currentEnemySkill.variance);

    resultEl.appendChild(el('div', 'attack-flavor',
      currentEnemy.name + ' utilise ' + currentEnemySkill.name + ' sur ' + currentChar.name));
    renderResistNotes(resultEl, resNotes);
    resultEl.appendChild(el('div', 'attack-dmg-label', 'Dégâts infligés'));
    resultEl.appendChild(el('div', 'attack-dmg-value', label));

    const charHp    = getCharFinalStats().pvMax;
    const remaining = charHp - total;
    const outcome   = el('div', 'attack-outcome ' + (remaining <= 0 ? 'kill' : 'survive'));
    outcome.textContent = remaining <= 0
      ? currentChar.name + ' est vaincu !'
      : currentChar.name + ' survit avec ~' + Math.max(0, remaining).toLocaleString('fr-FR') + ' PV restants.';
    resultEl.appendChild(outcome);
    const si = currentEnemySkill.statusInflicted || [];
    const targetsEnemy = [1, 2, 8, 9, 10].includes(currentEnemySkill.targetType);
    renderAttackStatuses(resultEl, targetsEnemy ? si : [], targetsEnemy ? [] : si, 'Inflige au personnage', 'Inflige à l\'ennemi');
  }

  document.getElementById('btnEnemyWeapon').addEventListener('click', simulateEnemyWeaponAttack);
  document.getElementById('btnEnemySkill').addEventListener('click', simulateEnemySkillAttack);

  // ── Status display helper ──────────────────────────────────────────
  function renderAttackStatuses(resultEl, onEnemy, onSelf, enemyLabel, selfLabel) {
    if (!onEnemy.length && !onSelf.length) return;
    const section = el('div', 'attack-statuses');
    [[onEnemy, enemyLabel || 'Inflige à l\'ennemi'], [onSelf, selfLabel || 'Inflige à l\'attaquant']].forEach(([list, label]) => {
      if (!list.length) return;
      const row    = el('div', 'attack-status-row');
      const badges = el('span', 'attack-status-badges');
      list.forEach(s => {
        const name = STATUS_MAP[s.status_id] ?? '?';
        const text = s.probability < 100 ? name + ' (' + s.probability + '%)' : name;
        badges.appendChild(el('span', 'status-badge', text));
      });
      row.appendChild(el('span', 'attack-status-label', label + ' :'));
      row.appendChild(badges);
      section.appendChild(row);
    });
    resultEl.appendChild(section);
  }

  // ── Build sharing ──────────────────────────────────────────────────
  // Encode l'état courant (perso, niveau, équipement, statuts, passifs,
  // compteurs, ressources courantes, ennemi + statuts, skill) dans une URL
  // query param `?b=...` (JSON base64 URL-safe). Restauré au chargement.

  const BUILD_VERSION = 1;

  function encodeBuild(state) {
    const json = JSON.stringify(state);
    return btoa(unescape(encodeURIComponent(json)))
      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
  }

  function decodeBuild(str) {
    try {
      const b64 = str.replace(/-/g, '+').replace(/_/g, '/');
      return JSON.parse(decodeURIComponent(escape(atob(b64))));
    } catch (e) {
      return null;
    }
  }

  // Snapshot du state courant. Omet les valeurs par défaut pour compacter.
  function getCurrentBuild() {
    if (!currentChar) return null;
    const s = { v: BUILD_VERSION, ch: currentChar.id };
    if (currentLevel !== 1) s.lv = currentLevel;

    const eq = {};
    Object.entries(equipped).forEach(([slot, item]) => { if (item) eq[slot] = item.id; });
    if (Object.keys(eq).length) s.eq = eq;

    if (activePassives.size) s.ap = [...activePassives];

    // Statuts manuels uniquement (les auto-injectés se recalculent).
    const manualCs = activeCharStatuses.filter(st => !st.isPassive).map(st => st.id);
    if (manualCs.length) s.cs = manualCs;

    if (activeCharStatVariations.length) {
      s.vp = activeCharStatVariations.map(v => [v.stat, v.type, v.level]);
    }

    const cv = {};
    Object.entries(counterValues).forEach(([k, val]) => { if (val > 0) cv[k] = val; });
    if (Object.keys(cv).length) s.cv = cv;

    if (horsLimitesActive) s.hl = 1;
    if (currentPv >= 0)    s.pv = currentPv;
    if (currentEg >= 0)    s.eg = currentEg;
    if (currentPower > 0)  s.pw = currentPower;

    if (currentEnemy) {
      s.en = currentEnemy.id;
      const es = activeEnemyStatuses.filter(st => !st.isPassive).map(st => st.id);
      if (es.length) s.es = es;
      if (activeEnemyStatVariations.length) {
        s.ev = activeEnemyStatVariations.map(v => [v.stat, v.type, v.level]);
      }
    }
    if (currentSkill) s.sk = currentSkill.id;
    return s;
  }

  // Applique un state décodé sur l'UI. Dispatch les events natifs des selects
  // pour laisser les handlers existants faire leur job (renderChar, etc.).
  function applyBuild(state) {
    if (!state || state.v !== BUILD_VERSION) return false;

    // 1) Perso — déclenche la construction complète de renderChar
    if (state.ch != null) {
      charSelect.value = String(state.ch);
      charSelect.dispatchEvent(new Event('change'));
    }
    if (!currentChar) return false;

    // 2) Niveau
    if (state.lv != null) {
      levelInput.value = String(state.lv);
      levelInput.dispatchEvent(new Event('input'));
    }

    // 3) Équipement — dispatch chaque select pour appliquer applyEquipmentRules
    //    + refreshAutoInjectedStatuses au fur et à mesure.
    if (state.eq) {
      Object.entries(state.eq).forEach(([slot, itemId]) => {
        const sel = document.querySelector('[data-slot-key="' + slot + '"]');
        if (sel) { sel.value = String(itemId); sel.dispatchEvent(new Event('change')); }
      });
    }

    // 4) Passifs cochés — remplace la Set entière puis refresh.
    if (state.ap) {
      activePassives = new Set(state.ap);
      knownPassiveIds = new Set(activePassives);
      updatePassivesPanel();
      refreshAutoInjectedStatuses();
    }

    // 5) Statuts manuels — pousse dans activeCharStatuses.
    if (state.cs) {
      state.cs.forEach(sid => {
        const st = STATUSES.find(s => s.id === sid);
        if (st && !activeCharStatuses.find(s => s.id === sid)) activeCharStatuses.push(st);
      });
      refreshStatusPicker('charStatusList');
    }

    // 6) Variations de stats perso
    if (state.vp) {
      state.vp.forEach(([stat, type, level]) => {
        activeCharStatVariations.push({ stat, type, level });
      });
    }

    // 7) Compteurs
    if (state.cv) { Object.assign(counterValues, state.cv); updateCounterPanels(); }
    if (state.hl) { horsLimitesActive = true; updateCounterPanels(); }

    // 8) Ressources courantes (après stats recalculées)
    if (state.pv != null) currentPv = state.pv;
    if (state.eg != null) currentEg = state.eg;
    if (state.pw != null) currentPower = state.pw;

    // 9) Ennemi
    if (state.en != null) {
      enemySelect.value = String(state.en);
      enemySelect.dispatchEvent(new Event('change'));
      if (state.es) {
        state.es.forEach(sid => {
          const st = STATUSES.find(s => s.id === sid);
          if (st && !activeEnemyStatuses.find(s => s.id === sid)) activeEnemyStatuses.push(st);
        });
        refreshStatusPicker('enemyStatusList');
      }
      if (state.ev) {
        state.ev.forEach(([stat, type, level]) => activeEnemyStatVariations.push({ stat, type, level }));
      }
    }

    // 10) Skill sélectionné
    if (state.sk != null) {
      const skSel = document.getElementById('skillSelect');
      if (skSel) { skSel.value = String(state.sk); skSel.dispatchEvent(new Event('change')); }
    }

    updateStatsPanel();
    updateAttackPanel();
    return true;
  }

  // Toast unique en bas d'écran.
  let toastEl = null;
  function showToast(msg, kind) {
    if (!toastEl) {
      toastEl = el('div', 'share-toast');
      document.body.appendChild(toastEl);
    }
    toastEl.textContent = msg;
    toastEl.className = 'share-toast show' + (kind === 'error' ? ' error' : '');
    clearTimeout(showToast._t);
    showToast._t = setTimeout(() => { toastEl.className = 'share-toast'; }, 2500);
  }

  // Dropdown Build : ouvrir/fermer, fermeture au clic à l'extérieur.
  const buildMenu    = document.querySelector('.build-menu');
  const buildMenuBtn = document.getElementById('buildMenuBtn');
  if (buildMenuBtn && buildMenu) {
    buildMenuBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      buildMenu.classList.toggle('open');
    });
    document.addEventListener('click', (e) => {
      if (!buildMenu.contains(e.target)) buildMenu.classList.remove('open');
    });
    // Après le clic d'un item, referme automatiquement.
    document.querySelectorAll('.build-menu-item').forEach(item => {
      item.addEventListener('click', () => buildMenu.classList.remove('open'));
    });
  }

  const shareBtn = document.getElementById('shareBuildBtn');
  if (shareBtn) {
    shareBtn.addEventListener('click', () => {
      const state = getCurrentBuild();
      if (!state) { showToast('Sélectionne d\'abord un personnage.', 'error'); return; }
      const encoded = encodeBuild(state);
      const url = location.origin + location.pathname + '?b=' + encoded;
      const doCopy = () => showToast('URL copiée ! (' + url.length + ' caractères)');
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(doCopy, () => showToast(url, 'error'));
      } else {
        // Fallback sans API clipboard
        const t = document.createElement('textarea');
        t.value = url; document.body.appendChild(t); t.select();
        try { document.execCommand('copy'); doCopy(); } catch (e) { showToast('Copie manuelle : ' + url, 'error'); }
        document.body.removeChild(t);
      }
    });
  }

  // ── Carte de personnage ─────────────────────────────────────────────
  // Rend la carte 320×600 à partir de l'état courant (getCharFinalStats intègre
  // équipement + niveau + statuts + custom bonuses). Modal + html2canvas.
  function buildCardContext() {
    return {
      currentChar, currentLevel, equipped, activePassives,
      SLOTS, STAT_KEYS, STAT_META, ELEMENTS, SKILLS, ASSET_BASE,
      stats: getCharFinalStats(),
    };
  }
  const cardBtn = document.getElementById('cardBuildBtn');
  if (cardBtn) {
    cardBtn.addEventListener('click', () => {
      if (!currentChar) { showToast('Sélectionne d\'abord un personnage.', 'error'); return; }
      const name = (currentChar.name || 'Build') + ' — Niv. ' + currentLevel;
      window.openBuildCardModal(buildCardContext(), name);
    });
  }

  // ── Builds persistants (comptes utilisateur uniquement) ────────────
  const BUILD_GAME_SLUG = 'narval-souls';

  const BUILDS_API_BASE = '{{ path('build_list') }}';

  // Parse défensif : lit d'abord en text puis tente JSON, sinon rapporte le HTML brut.
  async function readJsonSafe(res) {
    const txt = await res.text();
    try { return JSON.parse(txt); }
    catch (e) { return { error: 'Réponse serveur inattendue (' + res.status + ')', _raw: txt.slice(0, 200) }; }
  }

  async function saveBuildToServer(name, state, overwrite) {
    const res = await fetch(BUILDS_API_BASE, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      credentials: 'same-origin',
      body: JSON.stringify({ game: BUILD_GAME_SLUG, name, state, overwrite: !!overwrite }),
    });
    return { status: res.status, body: await readJsonSafe(res) };
  }

  async function listBuildsFromServer() {
    const res = await fetch(BUILDS_API_BASE + '?game=' + BUILD_GAME_SLUG, {
      headers: { Accept: 'application/json' },
      credentials: 'same-origin',
    });
    if (!res.ok) return [];
    const data = await readJsonSafe(res);
    return data.builds || [];
  }

  async function deleteBuildFromServer(id) {
    const res = await fetch(BUILDS_API_BASE + '/' + id, {
      method: 'DELETE',
      credentials: 'same-origin',
    });
    return res.ok;
  }

  const saveBtn = document.getElementById('saveBuildBtn');
  if (saveBtn) {
    saveBtn.addEventListener('click', async () => {
      const state = getCurrentBuild();
      if (!state) { showToast('Sélectionne d\'abord un personnage.', 'error'); return; }
      const suggested = (currentChar?.name ?? 'Build') + ' — Niv. ' + currentLevel;
      const name = prompt('Nom du build :', suggested);
      if (!name || !name.trim()) return;
      let r = await saveBuildToServer(name.trim(), state, false);
      if (r.status === 409 && r.body?.code === 'name_exists') {
        if (!confirm('Un build « ' + name.trim() + ' » existe déjà. Écraser ?')) return;
        r = await saveBuildToServer(name.trim(), state, true);
      }
      if (r.status === 200 || r.status === 201) showToast('Build « ' + r.body.name + ' » sauvegardé');
      else showToast(r.body?.error || 'Erreur inconnue', 'error');
    });
  }

  const loadBtn = document.getElementById('loadBuildBtn');
  if (loadBtn) {
    loadBtn.addEventListener('click', async () => {
      const builds = await listBuildsFromServer();
      if (!builds.length) { showToast('Aucun build sauvegardé.'); return; }

      // Modal simple : overlay + liste + close.
      const overlay = el('div', 'build-modal-overlay');
      const modal   = el('div', 'build-modal');
      modal.appendChild(el('div', 'build-modal-title', 'Mes builds NS'));
      const list = el('div', 'build-list');
      builds.forEach(b => {
        const row  = el('div', 'build-row');
        const info = el('div', 'build-info');
        info.appendChild(el('div', 'build-name', b.name));
        info.appendChild(el('div', 'build-date', new Date(b.updatedAt).toLocaleString('fr-FR')));
        const acts = el('div', 'build-actions');
        const loadA = el('button', 'share-btn', 'Charger');
        const delA  = el('button', 'share-btn', '🗑');
        delA.title = 'Supprimer';
        loadA.addEventListener('click', () => {
          overlay.remove();
          if (applyBuild(b.state)) showToast('Build « ' + b.name + ' » chargé');
          else showToast('Build incompatible', 'error');
        });
        delA.addEventListener('click', async () => {
          if (!confirm('Supprimer « ' + b.name + ' » ?')) return;
          if (await deleteBuildFromServer(b.id)) { row.remove(); showToast('Supprimé'); }
          else showToast('Erreur suppression', 'error');
        });
        acts.appendChild(loadA); acts.appendChild(delA);
        row.appendChild(info); row.appendChild(acts);
        list.appendChild(row);
      });
      modal.appendChild(list);
      const close = el('button', 'share-btn', 'Fermer');
      close.style.marginTop = '12px';
      close.addEventListener('click', () => overlay.remove());
      modal.appendChild(close);
      overlay.appendChild(modal);
      overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
      document.body.appendChild(overlay);
    });
  }

  // Auto-apply au chargement si `?b=` présent. `?card=1` ouvre en plus le modal
  // carte après application (utilisé par le lien 🖼 Carte de « Mes builds »).
  const urlParams   = new URLSearchParams(location.search);
  const buildParam  = urlParams.get('b');
  const autoOpenCard = urlParams.get('card') === '1';
  if (buildParam) {
    const state = decodeBuild(buildParam);
    if (state) {
      // Léger délai pour laisser le premier tick de rendu finir.
      setTimeout(() => {
        if (applyBuild(state)) {
          showToast('Build chargé depuis l\'URL');
          if (autoOpenCard) {
            const name = urlParams.get('name') || (currentChar?.name ?? 'Build') + ' — Niv. ' + currentLevel;
            setTimeout(() => window.openBuildCardModal(buildCardContext(), name), 100);
          }
        } else {
          showToast('URL de build invalide ou incompatible', 'error');
        }
      }, 50);
    } else {
      showToast('URL de build corrompue', 'error');
    }
  }
})();
</script>
{% endblock %}