{% extends 'admin/layout.html.twig' %}
{% block page_title %}Match #{{ match.id }}{% endblock %}
{% block breadcrumb %}
  <span class="sep">/</span><a href="{{ path('admin_tcg_index') }}" class="breadcrumb-link">Guidoune Masters</a>
  <span class="sep">/</span><span class="breadcrumb-text">Match #{{ match.id }}</span>
{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600;700&display=swap" rel="stylesheet">
  <style>
    /* Le layout admin contraint main à 1100px — le terrain fait 1400px + marges. */
    main { max-width: 1560px; }

    /* ── Bandeau supérieur ── */
    .gm-topbar {
      display: flex; justify-content: space-between; align-items: center;
      background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
      padding: 12px 18px; margin-bottom: 16px;
    }
    .gm-topbar-info { display: flex; gap: 24px; align-items: center; font-size: .9rem; }
    .gm-topbar-info b { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
    .gm-topbar-actions { display: flex; gap: 8px; }

    .gm-flash {
      background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.4);
      color: var(--danger); padding: 10px 14px; border-radius: 6px;
      font-size: .85rem; margin-bottom: 16px;
    }

    /* ── Écran victoire ── */
    .gm-victory {
      background: linear-gradient(135deg, rgba(240,136,62,.15), rgba(88,166,255,.12));
      border: 2px solid var(--accent); border-radius: 12px;
      padding: 20px 32px; margin-bottom: 20px; text-align: center;
    }
    .gm-victory h2 { color: var(--accent); font-size: 1.4rem; margin-bottom: 6px; }

    /* ── Board principal (adapté de tcg_field.html) ── */
    /* Le main du layout admin fait max-width 1100px, on autorise le scroll horizontal
       et on force la largeur du board via min-width. */
    .gm-board-wrap {
      display: flex; justify-content: center; padding: 8px 0;
      overflow-x: auto;
    }
    .gm-board {
      width: 1420px; min-width: 1420px; flex-shrink: 0;
      display: flex; flex-direction: column; gap: 22px;
      border: 1px solid #24272f; border-radius: 24px; padding: 32px;
      background: #111318; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
      font-family: 'Segoe UI', system-ui, sans-serif;
    }
    .gm-board *, .gm-board *::before, .gm-board *::after { box-sizing: border-box; }

    /* ── Camp : grille 3 colonnes (énergie verticale | main | deck+cim) ── */
    .gm-camp {
      display: grid;
      grid-template-columns: 118px 1fr 118px;
      gap: 20px;
      align-items: start;
    }
    .gm-camp-main { display: flex; flex-direction: column; gap: 20px; }

    /* Rangée horizontale de 5 slots (grille centrée dans la colonne principale) */
    .gm-row {
      position: relative; width: 100%; min-height: 220px;
      display: flex; justify-content: center;
    }
    .gm-row-grid {
      display: grid; grid-template-columns: repeat(5, 140px); gap: 60px; align-items: stretch;
    }

    /* Colonne latérale (Deck / Cimetière) — désormais en flux, verticale */
    .gm-side-stack { display: flex; flex-direction: column; gap: 12px; }
    .gm-side-col {
      width: 100%; height: 210px;
      border: 1.5px solid #3a3f4a; border-radius: 8px;
      display: flex; flex-direction: column;
      background: #15171d; overflow: hidden;
      position: relative;
    }
    .gm-side-col--clickable { cursor: zoom-in; }
    .gm-side-col--clickable:hover { border-color: var(--accent2); }
    .gm-side-col-slot {
      flex: 1; min-height: 0; padding: 4px;
      display: flex; align-items: center; justify-content: center;
    }
    .gm-side-col-slot .gm-card-back,
    .gm-side-col-slot .gm-card-mini {
      width: 100%; height: 100%;
    }
    .gm-side-col-empty {
      color: #4a4f5a; font-size: 11px; font-style: italic;
    }
    .gm-side-col-meta {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 4px 6px; background: rgba(0,0,0,.35);
      border-top: 1px solid rgba(255,255,255,.05);
    }
    .gm-side-col-meta .gm-side-count {
      font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: #e4e6ea;
    }
    .gm-side-col-meta .gm-side-label {
      font-size: 8px; font-weight: 700; letter-spacing: 1px;
      color: #7a8194; text-transform: uppercase;
    }

    /* Séparateur central */
    .gm-mid-sep {
      height: 3px; background: linear-gradient(90deg, transparent, #24272f 20%, #24272f 80%, transparent);
      margin: 4px 0;
    }

    /* Slot vide */
    .gm-slot {
      height: 210px; border-radius: 14px;
      border: 2px solid var(--slot-color, #3a3f4a);
      background: var(--slot-bg, rgba(58,63,74,0.04));
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 6px;
      font-size: 13px; font-weight: 600; color: #8a9099; letter-spacing: 0.2px;
    }
    .gm-slot--hero  { height: 230px; border-width: 2.5px; align-self: center; margin-top: -12px; }
    .gm-slot--terrain { height: 230px; border-width: 2.5px; align-self: center; margin-top: 12px; }

    /* Couleurs par type de zone */
    .gm-slot--monster { --slot-color: #9b3fa8; --slot-bg: rgba(155,63,168,0.06); }
    .gm-slot--hero    { --slot-color: #e8b93a; --slot-bg: rgba(232,185,58,0.08); }
    .gm-slot--spell   { --slot-color: #2aa7d6; --slot-bg: rgba(42,167,214,0.06); }
    .gm-slot--terrain { --slot-color: #f2a7c3; --slot-bg: rgba(242,167,195,0.08); }
    .gm-slot--trap    { --slot-color: #cc2b3a; --slot-bg: rgba(204,43,58,0.06); }
    .gm-slot--shield  { --slot-color: #e8842a; --slot-bg: rgba(232,132,42,0.06); }

    /* Slot occupé — vignette carte 140×210 */
    .gm-card-mini {
      width: 100%; height: 100%; border-radius: 10px; padding: 7px 6px;
      background: #1a1d24; display: flex; flex-direction: column; gap: 4px;
      color: #e4e6ea; overflow: hidden; position: relative;
    }
    .gm-card-mini--engaged { transform: rotate(90deg) scale(.85); }
    .gm-card-mini-name {
      font-size: 12px; font-weight: 700; line-height: 1.15;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .gm-card-mini-portrait {
      flex: 1; border-radius: 6px; background-color: #0c0e12;
      background-repeat: no-repeat; background-position: center; background-size: cover;
      min-height: 80px;
    }
    .gm-card-mini-stats {
      display: flex; justify-content: space-between;
      font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
    }
    .gm-card-mini-stat--pv { color: var(--pv); }
    .gm-card-mini-stat--eg { color: var(--eg); }
    .gm-card-mini-elements { position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; }
    .gm-card-mini-elements img { width: 14px; height: 14px; image-rendering: pixelated; }
    .gm-card-mini-cost {
      position: absolute; top: 0; left: 0; width: 26px; height: 26px;
      border-radius: 10px 0 10px 0;
      display: flex; align-items: center; justify-content: center;
      background: #f0883e;
      font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800; color: #111318;
    }

    /* ── Résumé du budget par type élémental ── */
    .gm-energy-budget {
      display: flex; flex-direction: column; gap: 3px;
      padding: 6px 4px; margin: 2px 0 6px;
      border-bottom: 1px dashed rgba(168,207,58,0.3);
    }
    .gm-energy-budget-row {
      display: flex; align-items: center; gap: 5px; justify-content: center;
    }
    .gm-energy-budget-row img {
      width: 14px; height: 14px; image-rendering: pixelated; flex-shrink: 0;
    }
    .gm-energy-budget-val {
      font-family: 'JetBrains Mono', monospace; font-size: 13px;
      font-weight: 700; color: #a8cf3a;
    }
    .gm-energy-budget-val.is-empty { color: #4a5060; }

    /* ── Zone énergétique verticale (colonne latérale du camp) ── */
    .gm-energy-col {
      display: flex; flex-direction: column; gap: 8px;
      padding: 12px 10px 10px;
      border: 2px solid #a8cf3a; border-radius: 20px;
      background: rgba(168,207,58,0.06);
      min-height: 100%;
    }
    .gm-energy-label {
      font-family: 'JetBrains Mono', monospace; font-size: 11px;
      font-weight: 700; letter-spacing: 2.5px; color: #a8cf3a; text-transform: uppercase;
      text-align: center; padding-bottom: 6px;
      border-bottom: 1px solid rgba(168,207,58,0.3);
    }
    .gm-energy-cards { display: flex; flex-direction: column; gap: 8px; }
    .gm-energy-empty { color: #4a5060; font-size: 11px; font-style: italic; text-align: center; padding: 20px 4px; }
    .gm-energy-card {
      width: 94px; height: 128px; border-radius: 8px;
      background: #1a1d24; border: 1px solid #24272f;
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      padding: 6px 5px; gap: 3px; position: relative;
    }
    .gm-energy-card--engaged { transform: rotate(90deg) scale(.9); }
    .gm-energy-card-value {
      font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 800; color: #e4e6ea;
    }
    .gm-energy-card-name {
      font-size: 9px; color: #8a9099; text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    }
    .gm-energy-card-elements { display: flex; gap: 3px; }
    .gm-energy-card-elements img { width: 12px; height: 12px; image-rendering: pixelated; }

    /* Main du joueur — wrap plutôt que scroll pour que le popup Invoquer reste visible. */
    .gm-hand {
      display: flex; gap: 10px; flex-wrap: wrap;
      padding: 12px 32px; background: #0c0e12;
      border: 1px solid #24272f; border-radius: 14px; margin-top: 8px;
    }
    .gm-hand-empty { color: #4a5060; font-style: italic; padding: 20px; }
    .gm-hand-slot { flex-shrink: 0; width: 110px; }

    /* Rotation Joueur 2 (opposant) : miroir vertical du camp entier ; on remet
       chaque élément lisible à l'endroit via une seconde rotation. */
    .gm-player2 { transform: rotate(180deg); }
    .gm-player2 .gm-card-mini,
    .gm-player2 .gm-card-back,
    .gm-player2 .gm-energy-card,
    .gm-player2 .gm-slot,
    .gm-player2 .gm-side-col-meta,
    .gm-player2 .gm-energy-label { transform: rotate(180deg); }
    .gm-player2 .gm-card-mini--engaged { transform: rotate(-90deg) scale(.85); }
    .gm-player2 .gm-energy-card--engaged { transform: rotate(-90deg) scale(.9); }

    /* Log latéral */
    .gm-sidebar {
      display: flex; gap: 16px; margin-top: 16px;
    }
    .gm-log {
      flex: 1; background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 14px 18px;
      max-height: 300px; overflow-y: auto;
    }
    .gm-log-entry {
      font-family: 'JetBrains Mono', monospace; font-size: .78rem;
      color: var(--muted); border-bottom: 1px solid var(--border);
      padding: 4px 0;
    }
    .gm-log-entry:last-child { border-bottom: none; }
    .gm-log-entry b { color: var(--accent2); }

    /* Barre d'action fixe en bas */
    .gm-action-bar {
      display: flex; justify-content: center; gap: 12px; margin: 20px 0 10px;
    }

    /* ── Boutons d'action sur les cartes ── */
    .gm-hand-slot { position: relative; }
    .gm-hand-actions {
      display: flex; gap: 4px; margin-top: 4px; justify-content: center; flex-wrap: wrap;
    }
    .gm-hand-actions .btn { padding: 3px 8px; font-size: .7rem; }

    /* Petit form d'invocation ancré sous la carte */
    .gm-summon-details {
      position: relative;
    }
    .gm-summon-details summary {
      list-style: none; cursor: pointer;
      padding: 3px 8px; border-radius: 4px;
      background: #1f2d40; color: var(--accent2);
      border: 1px solid #2d4060; font-size: .7rem; font-weight: 600;
    }
    .gm-summon-details summary::-webkit-details-marker { display: none; }
    .gm-summon-details[open] summary { background: var(--accent2); color: #111318; }
    .gm-summon-form {
      position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
      z-index: 20; background: var(--surface); border: 1px solid var(--border);
      border-radius: 6px; padding: 10px; margin-top: 4px;
      display: flex; flex-direction: column; gap: 6px;
      width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    }
    .gm-summon-form select { font-size: .8rem; padding: 4px 6px; }
    .gm-summon-form .btn { padding: 5px 10px; font-size: .78rem; }

    /* ── Modal preview de carte ── */
    .gm-preview-modal {
      position: fixed; inset: 0; z-index: 1000;
      display: none; align-items: center; justify-content: center;
    }
    .gm-preview-modal.open { display: flex; }
    .gm-preview-backdrop {
      position: absolute; inset: 0; background: rgba(0,0,0,.75);
      backdrop-filter: blur(3px); cursor: pointer;
    }
    .gm-preview-shell {
      position: relative; z-index: 1;
      background: #0d1117; border: 1px solid var(--border);
      border-radius: 12px; padding: 20px 20px 16px;
      box-shadow: 0 30px 80px rgba(0,0,0,.8);
      max-width: 760px; max-height: 92vh;
      display: flex; gap: 16px;
    }
    .gm-preview-close {
      position: absolute; top: 6px; right: 10px;
      background: transparent; border: none;
      color: var(--muted); font-size: 24px; cursor: pointer;
      padding: 4px 10px; line-height: 1; border-radius: 4px; z-index: 2;
    }
    .gm-preview-close:hover { background: rgba(255,255,255,.06); color: var(--text); }
    .gm-preview-iframe {
      border: none; width: 420px; height: 700px;
      background: transparent; overflow: hidden;
      flex-shrink: 0;
    }
    .gm-preview-actions {
      display: none;
      flex-direction: column; gap: 12px;
      width: 280px; padding-top: 4px;
    }
    .gm-preview-actions.open { display: flex; }
    .gm-preview-actions h3 {
      font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
      color: var(--muted); margin-bottom: 4px; font-weight: 700;
    }
    .gm-preview-attacker-info {
      background: rgba(88,166,255,.08); border: 1px solid rgba(88,166,255,.3);
      border-radius: 6px; padding: 8px 10px;
      font-size: .82rem; color: var(--text);
    }
    .gm-preview-attacker-info b { color: var(--accent2); }
    .gm-attack-list, .gm-target-list {
      display: flex; flex-direction: column; gap: 6px;
    }
    .gm-attack-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border-radius: 6px;
      background: #15171d; border: 1px solid #24272f;
      color: var(--text); text-align: left; cursor: pointer;
      font-size: .82rem; font-family: inherit;
      transition: background .12s, border-color .12s;
    }
    .gm-attack-btn:hover:not(:disabled) { background: #1e2129; border-color: var(--accent2); }
    .gm-attack-btn:disabled { opacity: .45; cursor: not-allowed; }
    .gm-attack-btn.active { background: rgba(88,166,255,.15); border-color: var(--accent2); }
    .gm-attack-btn-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
    .gm-attack-btn-name { flex: 1; font-weight: 600; }
    .gm-attack-btn-cost { font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--eg); font-weight: 700; }
    .gm-attack-btn-dmg  { font-family: 'JetBrains Mono', monospace; font-size: .74rem; color: var(--pv); font-weight: 700; }
    .gm-target-btn {
      padding: 7px 10px; border-radius: 6px;
      background: #15171d; border: 1.5px solid var(--slot-color, #3a3f4a);
      color: var(--text); cursor: pointer; text-align: left;
      font-size: .82rem; font-family: inherit;
      transition: background .12s;
    }
    .gm-target-btn:hover { background: #1e2129; }
    .gm-target-btn[data-target-kind="shield"] { border-color: #e8842a; }
    .gm-target-btn[data-target-kind="hero"]   { border-color: #e8b93a; }
    .gm-target-btn[data-target-kind="monster"]{ border-color: #9b3fa8; }
    .gm-target-list-empty {
      color: var(--muted); font-style: italic; font-size: .78rem; padding: 8px 0;
    }
    .gm-action-back {
      background: none; border: none; color: var(--muted); cursor: pointer;
      font-size: .74rem; text-align: left; padding: 2px 0;
    }
    .gm-action-back:hover { color: var(--text); }

    /* Signalise qu'une carte est cliquable */
    .gm-card-mini { cursor: zoom-in; }
    .gm-card-mini:hover { outline: 2px solid var(--accent2); outline-offset: 2px; }
    .gm-energy-card { cursor: zoom-in; }
    .gm-energy-card:hover { outline: 2px solid var(--accent2); outline-offset: 2px; }

    /* ── Dos de carte (boucliers + bottes secrètes non-déclenchées) ──
       Reprend le style du template tools/card_back.html : bordure dégradé
       doré, fond radial sombre, motif diagonal fin, logo central. */
    .gm-card-back {
      width: 100%; height: 100%;
      border-radius: 10px; padding: 2px;
      background: linear-gradient(150deg, #d4af6a, #8f7136);
      cursor: default;
    }
    .gm-card-back-inner {
      width: 100%; height: 100%; border-radius: 8px;
      background: radial-gradient(circle at 50% 45%, #1a1d24 0%, #0d0e12 70%);
      position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .gm-card-back-inner::before {
      content: ''; position: absolute; inset: 0;
      opacity: 0.06; pointer-events: none;
      background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 1px, transparent 12px);
    }
    .gm-card-back-logo {
      width: 70%; height: auto; max-height: 58%;
      object-fit: contain; position: relative; z-index: 1;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
    }

    /* Bouton engager sur les cartes énergie */
    .gm-energy-engage {
      margin-top: 3px; padding: 2px 8px; font-size: .65rem;
      background: var(--accent); color: #111318; border: none;
      border-radius: 4px; font-weight: 700; cursor: pointer;
    }
    .gm-energy-engage:hover { opacity: .85; }
    .gm-energy-engaged-tag {
      margin-top: 3px; font-size: .65rem; color: #a8cf3a; font-weight: 700;
    }

    /* ── Modal cimetière — grille de cartes cliquables ── */
    .gm-graveyard-shell {
      position: relative; z-index: 1;
      background: #0d1117; border: 1px solid var(--border);
      border-radius: 12px; padding: 20px 20px 16px;
      box-shadow: 0 30px 80px rgba(0,0,0,.8);
      max-width: 780px; max-height: 88vh;
      display: flex; flex-direction: column; gap: 12px;
    }
    .gm-graveyard-header {
      font-size: .9rem; font-weight: 700; color: var(--text);
      border-bottom: 1px solid var(--border); padding-bottom: 8px;
    }
    .gm-graveyard-header b { color: var(--accent2); font-family: 'JetBrains Mono', monospace; }
    .gm-graveyard-grid {
      display: grid; grid-template-columns: repeat(5, 130px);
      gap: 10px; overflow-y: auto; padding: 4px;
      max-height: 60vh;
    }
    .gm-graveyard-item {
      width: 130px; height: 190px; cursor: zoom-in;
      background: #1a1d24; border-radius: 8px;
      display: flex; flex-direction: column; padding: 8px 6px;
      overflow: hidden; position: relative;
      transition: transform .12s, outline .12s;
      outline: 1px solid #24272f;
    }
    .gm-graveyard-item:hover {
      transform: scale(1.03);
      outline: 2px solid var(--accent2);
    }
    .gm-graveyard-item-name {
      font-size: 11px; font-weight: 700; color: #e4e6ea;
      line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .gm-graveyard-item-portrait {
      flex: 1; background-color: #0c0e12; border-radius: 6px;
      background-repeat: no-repeat; background-position: center; background-size: cover;
      margin-top: 6px; min-height: 80px;
    }
    .gm-graveyard-empty {
      color: var(--muted); font-style: italic; padding: 24px; text-align: center;
    }

    /* ── Widget lancer de dé ── */
    .gm-dice-overlay {
      position: fixed; inset: 0;
      background: rgba(10, 12, 16, .72); backdrop-filter: blur(2px);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 9999; opacity: 0; transition: opacity .18s ease;
    }
    .gm-dice-overlay.is-visible { opacity: 1; }
    .gm-dice-face {
      width: 240px; height: 240px; object-fit: contain;
      filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
      transform: scale(1); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    }
    .gm-dice-face.is-settled { transform: scale(1.12); }
    .gm-dice-label {
      color: #e4e6ea; font-size: 1.1rem; font-weight: 600;
      margin-top: 20px; letter-spacing: .05em; text-transform: uppercase;
      opacity: 0; transition: opacity .18s ease;
    }
    .gm-dice-label.is-visible { opacity: 1; }

    /* ── Modal prompt joueur (prompt_choice) ── */
    .gm-prompt-overlay {
      position: fixed; inset: 0;
      background: rgba(10, 12, 16, .82); backdrop-filter: blur(3px);
      display: flex; align-items: center; justify-content: center;
      z-index: 9998; opacity: 0; transition: opacity .18s ease;
    }
    .gm-prompt-overlay.is-visible { opacity: 1; }
    .gm-prompt-box {
      background: linear-gradient(135deg, #1a1d24, #14161c);
      border: 2px solid var(--accent2); border-radius: 12px;
      padding: 28px 36px; max-width: 520px;
      box-shadow: 0 30px 80px rgba(0,0,0,.6);
    }
    .gm-prompt-label {
      color: #e4e6ea; font-size: 1.15rem; font-weight: 600;
      margin-bottom: 20px; text-align: center;
    }
    .gm-prompt-options {
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    }
    .gm-prompt-option {
      background: rgba(88,166,255,.12); color: var(--accent2);
      border: 1.5px solid var(--accent2); border-radius: 8px;
      padding: 12px 22px; font-size: 1.1rem; font-weight: 700;
      cursor: pointer; min-width: 60px;
      transition: background .12s, transform .12s;
    }
    .gm-prompt-option:hover {
      background: rgba(88,166,255,.28); transform: translateY(-2px);
    }
    .gm-prompt-option--yes {
      background: rgba(63,185,80,.15); color: #3fb950; border-color: #3fb950;
    }
    .gm-prompt-option--yes:hover { background: rgba(63,185,80,.32); }
    .gm-prompt-option--no {
      background: rgba(248,81,73,.12); color: #f85149; border-color: #f85149;
    }
    .gm-prompt-option--no:hover { background: rgba(248,81,73,.28); }
  </style>
{% endblock %}

{% block content %}
  {# ── Fragment dynamique swap-able en AJAX ── #}
  <div id="gm-match-body">
    {% include 'admin/tcg/_match_body.html.twig' %}
  </div>

  {# ── Modal preview (iframe + panneau d'action à droite) ── #}
  <div id="gm-preview-modal" class="gm-preview-modal" role="dialog" aria-modal="true">
    <div class="gm-preview-backdrop" data-close-preview></div>
    <div class="gm-preview-shell">
      <button type="button" class="gm-preview-close" data-close-preview aria-label="Fermer">×</button>
      <iframe id="gm-preview-iframe" class="gm-preview-iframe" src="about:blank" title="Prévisualisation"></iframe>
      <div id="gm-preview-actions" class="gm-preview-actions">
        {# Contenu injecté dynamiquement par gm-actions.js #}
      </div>
    </div>
  </div>

  {# ── Modal cimetière : grille de toutes les cartes envoyées au cimetière ── #}
  <div id="gm-graveyard-modal" class="gm-preview-modal" role="dialog" aria-modal="true">
    <div class="gm-preview-backdrop" data-close-graveyard></div>
    <div class="gm-graveyard-shell">
      <button type="button" class="gm-preview-close" data-close-graveyard aria-label="Fermer">×</button>
      <div class="gm-graveyard-header">
        Cimetière du Joueur <b id="gm-graveyard-owner">#?</b> · <span id="gm-graveyard-count">0</span> carte(s)
      </div>
      <div id="gm-graveyard-grid" class="gm-graveyard-grid"></div>
    </div>
  </div>

  {# ── Contexte JS : cartes + skills + URL d'action ── #}
  <script>
    window.gmMatch = {
      matchId: {{ match.id }},
      activePlayer: {{ state.activePlayer }},
      finished: {{ (match.status == 'finished') ? 'true' : 'false' }},
      previewUrlTemplate: "{{ path('admin_trading_card_preview', {id: 0}) }}?embed=1",
      actionUrl: "{{ path('admin_tcg_action', {id: match.id}) }}",
      cards: {
        {% for id, card in cardMap %}
          {{ id }}: {
            id: {{ card.id }},
            name: {{ card.name|json_encode|raw }},
            illustration: {{ card.illustration ? (asset(card.illustration))|json_encode|raw : 'null' }},
            skills: [
              {% for s in card.skills %}
                {
                  index: {{ loop.index0 }},
                  name: {{ (s.name ?? '')|json_encode|raw }},
                  type: {{ (s.type ?? 'physical')|json_encode|raw }},
                  cost: {{ s.cost ?? 0 }},
                  damage: {{ s.damage ?? 0 }},
                  elementId: {{ s.elementId is defined and s.elementId ? s.elementId : 'null' }},
                  description: {{ (s.description ?? '')|json_encode|raw }}
                }{% if not loop.last %},{% endif %}
              {% endfor %}
            ]
          }{% if not loop.last %},{% endif %}
        {% endfor %}
      }
    };
  </script>

  <script>
    (function () {
      const M       = window.gmMatch;
      const modal   = document.getElementById('gm-preview-modal');
      const iframe  = document.getElementById('gm-preview-iframe');
      const panel   = document.getElementById('gm-preview-actions');

      const SKILL_TYPE_LABEL = { physical: 'Physique', magical: 'Magique', status: 'Statut' };
      const SKILL_TYPE_ICON  = {
        physical: "{{ asset('images/cards_artworks/physique.png') }}",
        magical:  "{{ asset('images/cards_artworks/magique.png') }}",
        status:   "{{ asset('images/cards_artworks/statut.png') }}"
      };

      // Contexte de l'attaquant courant (source des sorts cliqués dans l'iframe)
      let currentAttackerCtx = null;

      // ── Ouverture / fermeture ────────────────────────────────────────────
      function openPreview(cardId, srcEl) {
        if (!cardId) return;

        // Détermine si la carte cliquée peut attaquer (mode "attackable" dans l'iframe)
        const ctx = attackerContext(cardId, srcEl);
        currentAttackerCtx = ctx;

        // URL iframe : ajoute attackable=1&currentEg=X si applicable
        let url = M.previewUrlTemplate.replace('/0/preview', '/' + encodeURIComponent(cardId) + '/preview');
        if (ctx) {
          url += '&attackable=1&currentEg=' + ctx.currentEg;
        }
        iframe.src = url;

        buildActionPanel(cardId, srcEl, ctx);
        modal.classList.add('open');
      }
      function closePreview() {
        modal.classList.remove('open');
        iframe.src = 'about:blank';
        panel.classList.remove('open');
        panel.innerHTML = '';
        currentAttackerCtx = null;
      }

      // ── Analyse le clic pour savoir si la carte peut attaquer ─────────────
      function attackerContext(cardId, srcEl) {
        if (M.finished || !srcEl) return null;
        const camp = srcEl.closest('[data-camp-player]');
        if (!camp) return null;
        const campPid = parseInt(camp.dataset.campPlayer, 10);
        if (campPid !== M.activePlayer) return null;
        const role = srcEl.dataset.slotRole;
        if (role !== 'monster' && role !== 'hero') return null;
        if (srcEl.dataset.engaged === 'true') return null;
        const cardData = M.cards[cardId];
        if (!cardData) return null;
        return {
          cardId: cardId,
          cardData: cardData,
          slotIdx: parseInt(srcEl.dataset.slotIndex, 10),
          currentEg: srcEl.dataset.currentEg !== undefined ? parseInt(srcEl.dataset.currentEg, 10) : 0
        };
      }

      // ── Construit le panneau d'action (attaque normale + hint sorts) ─────
      function buildActionPanel(cardId, srcEl, ctx) {
        panel.innerHTML = '';
        panel.classList.remove('open');

        // Cas simple : carte sans contexte d'attaque → pas de panneau
        if (!ctx) {
          // Cas particulier : monstre à moi mais engagé → afficher le message
          if (srcEl) {
            const camp = srcEl.closest('[data-camp-player]');
            if (camp && parseInt(camp.dataset.campPlayer, 10) === M.activePlayer
                && (srcEl.dataset.slotRole === 'monster' || srcEl.dataset.slotRole === 'hero')
                && srcEl.dataset.engaged === 'true') {
              const cardData = M.cards[cardId];
              if (cardData) {
                const info = document.createElement('div');
                info.className = 'gm-preview-attacker-info';
                info.innerHTML = '<b>' + escapeHtml(cardData.name) + '</b><br>'
                  + '<span style="color:var(--danger)">engagé — impossible d\'attaquer ce tour</span>';
                panel.appendChild(info);
                panel.classList.add('open');
              }
            }
          }
          return;
        }

        // Header attacker
        const info = document.createElement('div');
        info.className = 'gm-preview-attacker-info';
        info.innerHTML =
          '<b>' + escapeHtml(ctx.cardData.name) + '</b><br>'
          + (ctx.slotIdx === 4 ? 'Héros' : 'Slot ' + ctx.slotIdx) + ' · EG ' + ctx.currentEg;
        panel.appendChild(info);

        // Section attaque
        const h = document.createElement('h3');
        h.textContent = 'Attaques disponibles';
        panel.appendChild(h);

        const list = document.createElement('div');
        list.className = 'gm-attack-list';
        panel.appendChild(list);

        list.appendChild(makeAttackButton({
          label: 'Attaque normale',
          onClick: () => showTargets('normal', ctx.slotIdx, null, false)
        }));

        // Hint pour les sorts (cliquables directement sur la carte)
        const hint = document.createElement('div');
        hint.style.cssText = 'font-size: .75rem; color: var(--muted); line-height: 1.4; padding: 4px 2px 0';
        hint.innerHTML = 'Ou clique un <b style="color:#56d364">sort</b> directement sur la carte pour l\'utiliser.';
        panel.appendChild(hint);

        panel.classList.add('open');
      }

      // ── Sélection de cible ────────────────────────────────────────────────
      function showTargets(kind, attackerSlot, skill, isStatus) {
        // Sort statut : pas de cible, submit direct
        if (isStatus) {
          submitAttack('skill_attack', {
            attackerSlot: attackerSlot,
            skillIndex: skill.index,
            defenderSlot: ''
          });
          return;
        }

        // Nettoie le panel et rebâtit
        panel.innerHTML = '';
        panel.classList.add('open');

        const back = document.createElement('button');
        back.className = 'gm-action-back';
        back.type = 'button';
        back.textContent = '← Choisir une autre attaque';
        back.addEventListener('click', () => {
          // Reconstruit le panel avec le contexte d'attaquant courant
          if (currentAttackerCtx) {
            const srcEl = document.querySelector(
              '[data-card-id="' + currentAttackerCtx.cardId + '"]'
              + '[data-slot-role="' + (currentAttackerCtx.slotIdx === 4 ? 'hero' : 'monster') + '"]'
              + '[data-slot-index="' + currentAttackerCtx.slotIdx + '"]'
            );
            buildActionPanel(currentAttackerCtx.cardId, srcEl, currentAttackerCtx);
          }
        });
        panel.appendChild(back);

        const h = document.createElement('h3');
        h.textContent = 'Choisis une cible';
        panel.appendChild(h);

        const list = document.createElement('div');
        list.className = 'gm-target-list';
        panel.appendChild(list);

        const oppPid  = opponentPid();
        const oppCamp = document.querySelector('[data-camp-player="' + oppPid + '"]');
        if (!oppCamp) {
          list.appendChild(emptyMsg('Camp adverse introuvable.'));
          return;
        }

        // Défenseurs : monstres + héros de l'adversaire (occupés)
        const defenders = Array.from(
          oppCamp.querySelectorAll('[data-slot-role="monster"][data-card-id], [data-slot-role="hero"][data-card-id]')
        ).filter(el => el.dataset.cardId); // filtrer slots vides

        const attackAction = kind === 'skill' ? 'skill_attack' : 'normal_attack';
        const attackPayload = (defenderSlot) => ({
          attackerSlot: attackerSlot,
          skillIndex: skill ? skill.index : undefined,
          defenderSlot: defenderSlot === null ? '' : String(defenderSlot)
        });

        if (defenders.length > 0) {
          defenders.forEach(el => {
            const defRole = el.dataset.slotRole;
            const defSlot = parseInt(el.dataset.slotIndex, 10);
            const defCardId = el.dataset.cardId;
            const defCard = M.cards[defCardId];
            const label = (defRole === 'hero' ? 'Héros' : 'Slot ' + defSlot)
              + ' · ' + (defCard ? defCard.name : '?');

            const btn = document.createElement('button');
            btn.className = 'gm-target-btn';
            btn.type = 'button';
            btn.dataset.targetKind = defRole;
            btn.textContent = label;
            btn.addEventListener('click', () => submitAttack(attackAction, attackPayload(defSlot)));
            list.appendChild(btn);
          });
        } else {
          // Pas de défenseur : cible = boucliers (defenderSlot vide côté engine)
          const shieldsRemaining = oppCamp.querySelectorAll('[data-slot-role="shield"]:not([data-broken])').length;
          if (shieldsRemaining === 0) {
            list.appendChild(emptyMsg('Plus de bouclier — attaque directe (victoire).'));
          }
          const btn = document.createElement('button');
          btn.className = 'gm-target-btn';
          btn.type = 'button';
          btn.dataset.targetKind = 'shield';
          btn.textContent = 'Boucliers adverses (' + shieldsRemaining + ' restant' + (shieldsRemaining > 1 ? 's' : '') + ')';
          btn.addEventListener('click', () => submitAttack(attackAction, attackPayload(null)));
          list.appendChild(btn);
        }
      }

      // ── Soumission de l'attaque via fetch ────────────────────────────────
      function submitAttack(action, params) {
        const fd = new FormData();
        fd.append('action', action);
        Object.entries(params).forEach(([k, v]) => {
          if (v !== undefined) fd.append(k, v);
        });
        postActionAjax(fd);
      }

      // ── Envoie une action au backend en AJAX et swappe le fragment #gm-match-body ──
      function postActionAjax(formData) {
        fetch(M.actionUrl, {
          method: 'POST',
          body: formData,
          headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function (r) {
          if (!r.ok) throw new Error('HTTP ' + r.status);
          return r.json();
        })
        .then(function (data) {
          const body = document.getElementById('gm-match-body');
          if (body && typeof data.html === 'string') {
            body.innerHTML = data.html;
          }
          if (typeof data.activePlayer !== 'undefined') M.activePlayer = data.activePlayer;
          if (typeof data.finished     !== 'undefined') M.finished     = data.finished;
          closePreview();

          // Draine les animations empilées par le moteur (dice roll, …) puis
          // ouvre le modal de prompt s'il y a un input joueur en attente.
          const anims = Array.isArray(data.pendingAnimations) ? data.pendingAnimations : [];
          runAnimationsThen(anims, function () {
            if (data.pendingPrompt) {
              showPromptModal(data.pendingPrompt);
            }
          });
        })
        .catch(function (err) {
          console.error('AJAX action failed', err);
          alert('Erreur réseau — la page va être rechargée.');
          location.reload();
        });
      }

      // ── Exécute une liste d'animations séquentiellement puis appelle done() ──
      function runAnimationsThen(anims, done) {
        if (!anims.length) { done(); return; }
        const [head, ...rest] = anims;
        function next() { runAnimationsThen(rest, done); }
        if (head.type === 'dice' && typeof window.gmRollDice === 'function') {
          window.gmRollDice({ value: head.value, onDone: next });
        } else if (head.type === 'reveal_card') {
          showRevealCard(head.cardId, head.ownerId, next);
        } else {
          next();
        }
      }

      // ── Modal transitoire : révèle une carte du deck/main adverse ──
      function showRevealCard(cardId, ownerId, done) {
        const cardData = M.cards && M.cards[cardId];
        const overlay = document.createElement('div');
        overlay.className = 'gm-dice-overlay';
        overlay.style.zIndex = '9997';

        const box = document.createElement('div');
        box.style.cssText = 'display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 32px; background:linear-gradient(135deg,#1a1d24,#14161c); border:2px solid #d4af6a; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6);';

        const title = document.createElement('div');
        title.textContent = 'Vigilance extrême — carte piochée par P' + ownerId;
        title.style.cssText = 'color:#d4af6a; font-size:.95rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;';
        box.appendChild(title);

        const cardEl = document.createElement('div');
        cardEl.style.cssText = 'width:220px; height:320px; border-radius:10px; background:#0c0e12 center/cover; border:1.5px solid #3a3f4a; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:12px; color:#fff;';
        if (cardData && cardData.illustration) {
          cardEl.style.backgroundImage = 'url(' + cardData.illustration + ')';
        }
        const nameLbl = document.createElement('div');
        nameLbl.textContent = cardData ? cardData.name : ('Carte #' + cardId);
        nameLbl.style.cssText = 'background:rgba(0,0,0,.72); padding:6px 10px; border-radius:4px; font-weight:700; font-size:.95rem;';
        cardEl.appendChild(nameLbl);
        box.appendChild(cardEl);

        overlay.appendChild(box);
        document.body.appendChild(overlay);
        requestAnimationFrame(() => overlay.classList.add('is-visible'));

        setTimeout(() => {
          overlay.classList.remove('is-visible');
          setTimeout(() => { overlay.remove(); done(); }, 200);
        }, 2400);
      }

      // ── Modal générique pour un prompt joueur (types: 'choice', 'confirm', 'target') ─
      function showPromptModal(prompt) {
        if (!prompt || !['choice', 'confirm', 'target'].includes(prompt.type)) {
          console.warn('[gmPrompt] type non supporté :', prompt);
          return;
        }
        const existing = document.getElementById('gm-prompt-overlay');
        if (existing) existing.remove();

        const overlay = document.createElement('div');
        overlay.id = 'gm-prompt-overlay';
        overlay.className = 'gm-prompt-overlay';

        const box = document.createElement('div');
        box.className = 'gm-prompt-box';

        const label = document.createElement('div');
        label.className = 'gm-prompt-label';
        label.textContent = prompt.label || 'Faites votre choix';
        box.appendChild(label);

        const optsRow = document.createElement('div');
        optsRow.className = 'gm-prompt-options';

        function submit(value) {
          overlay.remove();
          const fd = new FormData();
          fd.append('action', 'resume_effect');
          fd.append('value', String(value));
          postActionAjax(fd);
        }

        if (prompt.type === 'confirm') {
          const yesBtn = document.createElement('button');
          yesBtn.type = 'button';
          yesBtn.className = 'gm-prompt-option gm-prompt-option--yes';
          yesBtn.textContent = prompt.yesLabel || 'Oui';
          yesBtn.addEventListener('click', () => submit(1));
          optsRow.appendChild(yesBtn);

          const noBtn = document.createElement('button');
          noBtn.type = 'button';
          noBtn.className = 'gm-prompt-option gm-prompt-option--no';
          noBtn.textContent = prompt.noLabel || 'Non';
          noBtn.addEventListener('click', () => submit(0));
          optsRow.appendChild(noBtn);
        } else if (prompt.type === 'target') {
          const targets = Array.isArray(prompt.validTargets) ? prompt.validTargets : [];
          if (targets.length === 0) {
            const empty = document.createElement('div');
            empty.textContent = 'Aucune cible valide.';
            empty.style.color = 'var(--muted)';
            optsRow.appendChild(empty);
            const cancel = document.createElement('button');
            cancel.type = 'button';
            cancel.className = 'gm-prompt-option gm-prompt-option--no';
            cancel.textContent = 'OK';
            cancel.addEventListener('click', () => submit(-1));
            optsRow.appendChild(cancel);
          } else {
            targets.forEach(function (t) {
              const btn = document.createElement('button');
              btn.type = 'button';
              btn.className = 'gm-prompt-option';
              btn.textContent = (t.zone || '?') + ' #' + t.slot + (t.playerId ? ' (P' + t.playerId + ')' : '');
              btn.addEventListener('click', () => submit(t.slot));
              optsRow.appendChild(btn);
            });
            const cancel = document.createElement('button');
            cancel.type = 'button';
            cancel.className = 'gm-prompt-option gm-prompt-option--no';
            cancel.textContent = 'Annuler';
            cancel.addEventListener('click', () => submit(-1));
            optsRow.appendChild(cancel);
          }
        } else {
          (prompt.options || []).forEach(function (opt) {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'gm-prompt-option';
            btn.textContent = String(opt);
            btn.addEventListener('click', () => submit(opt));
            optsRow.appendChild(btn);
          });
        }
        box.appendChild(optsRow);

        overlay.appendChild(box);
        document.body.appendChild(overlay);
        requestAnimationFrame(function () { overlay.classList.add('is-visible'); });
      }

      // ── Helpers ──────────────────────────────────────────────────────────
      function makeAttackButton({ label, iconSrc, cost, damage, typeLabel, disabled, title, onClick }) {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'gm-attack-btn';
        if (disabled) btn.disabled = true;
        if (title) btn.title = title;

        if (iconSrc) {
          const img = document.createElement('img');
          img.className = 'gm-attack-btn-icon';
          img.src = iconSrc;
          img.alt = typeLabel || '';
          btn.appendChild(img);
        }
        const nameSpan = document.createElement('span');
        nameSpan.className = 'gm-attack-btn-name';
        nameSpan.textContent = label;
        btn.appendChild(nameSpan);
        if (cost !== undefined && cost !== null) {
          const c = document.createElement('span');
          c.className = 'gm-attack-btn-cost';
          c.textContent = cost + 'EG';
          btn.appendChild(c);
        }
        if (damage) {
          const d = document.createElement('span');
          d.className = 'gm-attack-btn-dmg';
          d.textContent = damage;
          btn.appendChild(d);
        }
        btn.addEventListener('click', onClick);
        return btn;
      }

      function emptyMsg(text) {
        const d = document.createElement('div');
        d.className = 'gm-target-list-empty';
        d.textContent = text;
        return d;
      }

      function opponentPid() {
        // Récupère l'ID de l'adversaire depuis les camps du DOM
        const camps = document.querySelectorAll('[data-camp-player]');
        for (const c of camps) {
          const pid = parseInt(c.dataset.campPlayer, 10);
          if (pid !== M.activePlayer) return pid;
        }
        return null;
      }

      function extractCardIdFromIframe() {
        const src = iframe.src || '';
        const m = src.match(/trading-card\/(\d+)\/preview/);
        return m ? m[1] : null;
      }

      function escapeHtml(s) {
        return String(s).replace(/[&<>"']/g, c => ({
          '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
        }[c]));
      }

      // ── Intercepteur AJAX pour tous les forms marqués data-gm-ajax ───────
      document.addEventListener('submit', function (e) {
        const form = e.target;
        if (!form.matches || !form.matches('form[data-gm-ajax]')) return;
        e.preventDefault();
        postActionAjax(new FormData(form));
      });

      // ── Event listeners globaux ──────────────────────────────────────────
      document.addEventListener('click', function (e) {
        // Ignore clics dans un contrôle interactif
        if (e.target.closest('button, a, form, select, input, summary, details')) return;
        const cardEl = e.target.closest('[data-card-id]');
        if (!cardEl) return;
        const cardId = cardEl.dataset.cardId;
        if (cardId) openPreview(cardId, cardEl);
      });

      document.addEventListener('click', function (e) {
        if (e.target.closest('[data-close-preview]')) closePreview();
      });

      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') { closePreview(); closeGraveyardModal(); }
      });

      // ── Modal cimetière : ouverture au clic sur la side-col ─────────────
      const graveyardModal = document.getElementById('gm-graveyard-modal');
      const graveyardGrid  = document.getElementById('gm-graveyard-grid');
      const graveyardOwnerEl = document.getElementById('gm-graveyard-owner');
      const graveyardCountEl = document.getElementById('gm-graveyard-count');

      function openGraveyardModal(cardIds, ownerPid) {
        graveyardOwnerEl.textContent = '#' + ownerPid;
        graveyardCountEl.textContent = cardIds.length;
        graveyardGrid.innerHTML = '';
        if (cardIds.length === 0) {
          const empty = document.createElement('div');
          empty.className = 'gm-graveyard-empty';
          empty.textContent = 'Cimetière vide.';
          graveyardGrid.appendChild(empty);
        } else {
          // Ordre : plus récent en premier (fin du tableau original)
          cardIds.slice().reverse().forEach(function (cardId) {
            const card = M.cards[cardId];
            const item = document.createElement('div');
            item.className = 'gm-graveyard-item';
            item.dataset.cardId = cardId;
            const nameEl = document.createElement('div');
            nameEl.className = 'gm-graveyard-item-name';
            nameEl.textContent = card ? card.name : ('Carte #' + cardId);
            item.appendChild(nameEl);
            const portrait = document.createElement('div');
            portrait.className = 'gm-graveyard-item-portrait';
            if (card && card.illustration) {
              portrait.style.backgroundImage = "url('" + card.illustration + "')";
            }
            item.appendChild(portrait);
            graveyardGrid.appendChild(item);
          });
        }
        graveyardModal.classList.add('open');
      }
      function closeGraveyardModal() {
        graveyardModal.classList.remove('open');
        graveyardGrid.innerHTML = '';
      }

      document.addEventListener('click', function (e) {
        const gv = e.target.closest('[data-graveyard-cardids]');
        if (!gv) return;
        e.stopPropagation();
        const idsStr = gv.dataset.graveyardCardids;
        const owner  = gv.dataset.graveyardOwner;
        const ids = idsStr ? idsStr.split(',').filter(Boolean) : [];
        openGraveyardModal(ids, owner);
      });

      document.addEventListener('click', function (e) {
        if (e.target.closest('[data-close-graveyard]')) closeGraveyardModal();
      });

      // Clic sur une carte de la grille cimetière → ferme le graveyard, ouvre la preview
      graveyardGrid.addEventListener('click', function (e) {
        const item = e.target.closest('.gm-graveyard-item[data-card-id]');
        if (!item) return;
        e.stopPropagation();
        const cardId = item.dataset.cardId;
        if (cardId) {
          closeGraveyardModal();
          openPreview(cardId, null);
        }
      });

      // ── postMessage depuis l'iframe : sort sélectionné directement sur la carte ──
      window.addEventListener('message', function (e) {
        if (!e.data || e.data.type !== 'gm-skill-selected') return;
        if (!currentAttackerCtx) return;
        if (String(e.data.cardId) !== String(currentAttackerCtx.cardId)) return;
        const skill = currentAttackerCtx.cardData.skills[e.data.skillIndex];
        if (!skill) return;
        showTargets('skill', currentAttackerCtx.slotIdx, skill, skill.type === 'status');
      });
    })();

    // ── Widget lancer de dé (window.gmRollDice) ──────────────────────────
    (function () {
      const DICE_URL   = "{{ path('admin_tcg_roll_dice', {id: match.id}) }}";
      const FACE_BASE  = "{{ asset('images/de-face-') }}";
      const CYCLE_MS   = 80;
      const MIN_ANIM_MS = 900;
      const HOLD_MS    = 1200;
      const FADE_MS    = 200;

      // Précharge les 6 faces pour éviter le flash à la première frame
      document.addEventListener('DOMContentLoaded', function () {
        for (let n = 1; n <= 6; n++) {
          const img = new Image();
          img.src = FACE_BASE + n + '.png';
        }
      });

      function faceUrl(n) { return FACE_BASE + n + '.png'; }
      function randomFace() { return 1 + Math.floor(Math.random() * 6); }

      // Deux modes d'appel :
      //   gmRollDice()                              → fetch serveur (bouton test)
      //   gmRollDice({value: N, onDone: fn})        → utilise N directement (déclenché par un effet)
      window.gmRollDice = function (opts) {
        if (window.gmDiceRolling) return;
        window.gmDiceRolling = true;
        opts = opts || {};
        const preset = (typeof opts.value === 'number') ? opts.value : null;
        const onDone = typeof opts.onDone === 'function' ? opts.onDone : function () {};

        const overlay = document.createElement('div');
        overlay.className = 'gm-dice-overlay';
        const img = document.createElement('img');
        img.className = 'gm-dice-face';
        img.src = faceUrl(randomFace());
        img.alt = 'Dé en cours de lancement';
        const label = document.createElement('div');
        label.className = 'gm-dice-label';
        overlay.appendChild(img);
        overlay.appendChild(label);
        document.body.appendChild(overlay);

        requestAnimationFrame(() => overlay.classList.add('is-visible'));

        const startedAt = performance.now();
        const cycle = setInterval(() => { img.src = faceUrl(randomFace()); }, CYCLE_MS);

        function settle(value) {
          const elapsed  = performance.now() - startedAt;
          const remaining = Math.max(0, MIN_ANIM_MS - elapsed);
          setTimeout(() => {
            clearInterval(cycle);
            img.src = faceUrl(value);
            img.classList.add('is-settled');
            label.textContent = 'Résultat : ' + value;
            label.classList.add('is-visible');
            setTimeout(() => {
              overlay.classList.remove('is-visible');
              setTimeout(() => {
                overlay.remove();
                window.gmDiceRolling = false;
                onDone();
              }, FADE_MS);
            }, HOLD_MS);
          }, remaining);
        }

        if (preset !== null) {
          settle(preset);
          return;
        }

        fetch(DICE_URL, {
          method: 'POST',
          headers: { 'X-Requested-With': 'XMLHttpRequest' },
        })
          .then(r => r.json())
          .then(data => settle((data && data.ok && data.value) ? data.value : randomFace()))
          .catch(err => {
            clearInterval(cycle);
            console.error('[gmRollDice] fetch failed', err);
            overlay.remove();
            window.gmDiceRolling = false;
            onDone();
          });
      };
    })();
  </script>
{% endblock %}