{% extends 'base.html.twig' %}
{% block title %}{{ matchTitle }} — Combat — CSI World{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
  .pvp-wrap {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
    max-width: 900px; width: 100%; margin: 0 auto; padding: 20px 20px 40px;
    gap: 16px;
  }

  /* ── Header ── */
  .pvp-header {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 18px; flex-shrink: 0;
  }
  .pvp-header-title { font-size: 1rem; font-weight: 700; color: var(--text); flex: 1; }
  #pvp-turn-label   { font-size: .8rem; color: var(--muted); }

  /* ── Countdown ── */
  #pvp-countdown {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 700;
    background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.35);
    color: #f85149; border-radius: 20px; padding: 4px 12px;
  }
  #pvp-countdown.safe    { background: rgba(63,185,80,.1); border-color: rgba(63,185,80,.35); color: #3fb950; }
  #pvp-countdown.warning { background: rgba(240,136,62,.12); border-color: rgba(240,136,62,.4); color: var(--accent); }
  #pvp-countdown.danger  { background: rgba(248,81,73,.18); border-color: rgba(248,81,73,.5); color: #f85149; }
  #pvp-countdown[hidden] { display: none; }

  /* ── My turn indicator ── */
  #pvp-myturn-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    padding: 4px 12px; border-radius: 20px;
    background: rgba(63,185,80,.18); color: #3fb950; border: 1px solid rgba(63,185,80,.4);
  }
  #pvp-myturn-badge.waiting {
    background: rgba(139,148,158,.1); color: var(--muted); border-color: var(--border);
  }
  #pvp-myturn-badge[hidden] { display: none; }

  /* ── Battlefield ── */
  .pvp-battlefield {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; flex-shrink: 0;
  }

  .pvp-party-col {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
  }
  .pvp-party-col.mine  { border-color: rgba(63,185,80,.4); }
  .pvp-party-col.theirs { border-color: rgba(248,81,73,.35); }

  .pvp-party-header {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,.2); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  }
  .pvp-party-header.mine { color: #3fb950; }
  .pvp-party-header.theirs { color: #f85149; }

  .pvp-party-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

  .pvp-char-card {
    background: rgba(0,0,0,.25); border: 1px solid var(--border);
    border-radius: 7px; padding: 9px 12px; cursor: default;
    transition: border-color .12s, background .12s;
  }
  .pvp-char-card.ko     { opacity: .4; filter: grayscale(1); }
  .pvp-char-card.active { border-color: #3fb950; box-shadow: 0 0 0 1px #3fb950; }
  .pvp-char-card.selectable { cursor: pointer; border-color: var(--accent2); }
  .pvp-char-card.selectable:hover { background: rgba(88,166,255,.08); }
  .pvp-char-card.selected  { border-color: #f85149; background: rgba(248,81,73,.07); }

  .pvp-char-name  { font-size: .83rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .pvp-char-stats { font-size: .7rem; color: var(--muted); display: flex; gap: 8px; margin-bottom: 5px; }

  .pvp-bar-wrap { background: rgba(255,255,255,.1); border-radius: 2px; height: 4px; margin-bottom: 1px; }
  .pvp-bar      { height: 4px; border-radius: 2px; transition: width .25s; }
  .pvp-bar.pv   { background: #3fb950; }
  .pvp-bar.eg   { background: #58a6ff; }
  .pvp-bar-vals { font-size: .65rem; color: var(--muted); }

  .pvp-statuses { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
  .pvp-status-icon { width: 20px; height: 20px; border-radius: 2px; object-fit: contain; image-rendering: pixelated; }

  .pvp-char-inner { display: flex; gap: 9px; align-items: flex-start; }
  .pvp-char-portrait {
    width: 38px; height: 38px; object-fit: contain; border-radius: 4px; flex-shrink: 0;
    background: rgba(0,0,0,.3); image-rendering: pixelated;
  }
  .pvp-char-portrait-placeholder { width: 38px; flex-shrink: 0; }
  .pvp-char-body { flex: 1; min-width: 0; }

  /* ── Log ── */
  #pvp-log {
    flex: 1; overflow-y: auto; min-height: 80px; max-height: 160px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 14px;
    display: flex; flex-direction: column-reverse; gap: 2px;
    font-size: .8rem; color: var(--muted);
  }
  .pvp-log-line.me   { color: #3fb950; }
  .pvp-log-line.them { color: #f85149; }
  .pvp-log-line.sys  { color: var(--muted); font-style: italic; }

  /* ── Actions ── */
  #pvp-actions {
    display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
  }
  #pvp-actions[hidden] { display: none; }

  .pvp-action-btn {
    padding: 9px 16px; border-radius: 7px; border: 1px solid var(--border);
    background: transparent; color: var(--text); font-size: .83rem; font-weight: 600;
    cursor: pointer; transition: background .12s, border-color .12s;
  }
  .pvp-action-btn:hover:not(:disabled) { background: rgba(255,255,255,.06); border-color: var(--accent2); }
  .pvp-action-btn:disabled { opacity: .35; cursor: not-allowed; }
  .pvp-action-btn.defend { border-color: #58a6ff; color: #58a6ff; }
  .pvp-action-btn.defend:hover:not(:disabled) { background: rgba(88,166,255,.08); }
  .pvp-action-btn.danger { border-color: #f85149; color: #f85149; }
  .pvp-action-btn.danger:hover:not(:disabled) { background: rgba(248,81,73,.08); }

  /* ── Skill picker ── */
  #pvp-skill-picker { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; flex-shrink: 0; }
  #pvp-skill-picker[hidden] { display: none; }
  .pvp-skill-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.03);
    margin-bottom: 5px; cursor: pointer;
  }
  .pvp-skill-row:hover { background: rgba(255,255,255,.07); border-color: var(--accent2); }
  .pvp-skill-row.cant-afford { opacity: .4; cursor: not-allowed; pointer-events: none; }
  .pvp-skill-name  { flex: 1; font-size: .8rem; font-weight: 600; color: var(--text); }
  .pvp-skill-eg    { font-size: .72rem; color: #58a6ff; }

  /* ── Prize modal ── */
  #prize-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.65); backdrop-filter: blur(3px);
    animation: prize-fade-in .25s ease;
  }
  #prize-modal[hidden] { display: none; }
  @keyframes prize-fade-in { from { opacity: 0; } to { opacity: 1; } }
  .prize-modal-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 36px 40px; max-width: 420px; width: 90%;
    text-align: center; display: flex; flex-direction: column; gap: 14px;
    animation: prize-pop .3s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes prize-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .prize-modal-icon { line-height: 1; }
  .prize-modal-icon img { width: 80px; height: 80px; object-fit: contain; }
  .prize-modal-title { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
  .prize-modal-body  { font-size: .9rem; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }
  .prize-modal-close {
    margin-top: 6px; padding: 9px 28px; border-radius: 7px;
    background: var(--accent); color: #0d1117; border: none;
    font-size: .9rem; font-weight: 700; cursor: pointer; transition: opacity .12s;
  }
  .prize-modal-close:hover { opacity: .85; }

  /* ── Result ── */
  #pvp-result {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 36px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  #pvp-result[hidden] { display: none; }
  #pvp-result-title { font-size: 1.8rem; font-weight: 700; }
  #pvp-result-title.win  { color: #3fb950; }
  #pvp-result-title.lose { color: #f85149; }
  #pvp-result-sub { font-size: .9rem; color: var(--muted); }

  .btn-back {
    display: inline-block; margin-top: 8px;
    padding: 9px 24px; border-radius: 7px; border: 1px solid var(--border);
    background: transparent; color: var(--text); font-size: .88rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background .12s;
  }
  .btn-back:hover { background: rgba(255,255,255,.06); }

  @media (max-width: 600px) {
    .pvp-battlefield { grid-template-columns: 1fr; }
  }
</style>
{% endblock %}

{% block body %}
<div class="pvp-wrap">

  {# ── Header ── #}
  <div class="pvp-header">
    <span class="pvp-header-title">{{ matchTitle }} — {{ opponent ? 'vs ' ~ opponent.username : 'Combat' }}</span>
    <span id="pvp-turn-label">Tour 1</span>
    <span id="pvp-myturn-badge" class="waiting">En attente...</span>
    <span id="pvp-countdown" hidden>30</span>
  </div>

  {# ── Result (shown after match ends) ── #}
  <div id="pvp-result" hidden>
    <div id="pvp-result-title">-</div>
    <div id="pvp-result-sub"></div>
    <a class="btn-back" href="{{ path('death_match_index') }}">Retour au lobby</a>
  </div>

  {# ── Battlefield ── #}
  <div class="pvp-battlefield" id="pvp-battlefield">
    <div class="pvp-party-col mine">
      <div class="pvp-party-header mine">Mon équipe</div>
      <div class="pvp-party-cards" id="pvp-my-cards"></div>
    </div>
    <div class="pvp-party-col theirs">
      <div class="pvp-party-header theirs">{{ opponent ? opponent.username : 'Adversaire' }}</div>
      <div class="pvp-party-cards" id="pvp-opp-cards"></div>
    </div>
  </div>

  {# ── Log ── #}
  <div id="pvp-log"></div>

  {# ── Skill picker ── #}
  <div id="pvp-skill-picker" hidden>
    <div style="font-size:.78rem;color:var(--muted);margin-bottom:8px">Choisissez une compétence :</div>
    <div id="pvp-skill-list"></div>
    <button class="pvp-action-btn" onclick="hidePickers()">Annuler</button>
  </div>

  {# ── Prize modal ── #}
  <div id="prize-modal" hidden>
    <div class="prize-modal-box">
      <div class="prize-modal-icon"><img id="prize-modal-img" src="" alt=""></div>
      <div class="prize-modal-title" id="prize-modal-title"></div>
      <div class="prize-modal-body"  id="prize-modal-body"></div>
      <button class="prize-modal-close" onclick="document.getElementById('prize-modal').hidden=true">Fermer</button>
    </div>
  </div>

  {# ── Action buttons ── #}
  <div id="pvp-actions" hidden>
    <button class="pvp-action-btn" id="btn-pvp-attack">Attaquer</button>
    <button class="pvp-action-btn defend" id="btn-pvp-defend">Défendre</button>
    <button class="pvp-action-btn" id="btn-pvp-skill">Compétences</button>
    <button class="pvp-action-btn danger" id="btn-pvp-surrender">Se rendre</button>
  </div>

</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
  const MY_PLAYER_ID    = {{ myPlayerId }};
  const BATTLE_ID       = {{ battle.id }};
  const MATCH_BASE      = {{ matchUrlBase|json_encode|raw }};
  const STATUS_ICON_BASE = '{{ path('api_icon', {gameId: 4, id: 0}) }}'.replace(/0$/, '');

  let state       = null;
  let timeoutAt   = null;
  let pollTimer   = null;
  let cdownTimer  = null;
  let selectingTarget = false;
  let pendingSkill    = null;

  // ── Boot ─────────────────────────────────────────────────────────────────
  poll();

  // ── Polling ──────────────────────────────────────────────────────────────
  function schedulePoll() {
    clearTimeout(pollTimer);
    pollTimer = setTimeout(poll, 2000);
  }

  async function poll() {
    try {
      const r = await fetch(`${MATCH_BASE}/state`);
      if (!r.ok) return schedulePoll();
      const d = await r.json();
      applyState(d);
      if (d.battleStatus !== 'finished') schedulePoll();
    } catch { schedulePoll(); }
  }

  // ── State update ─────────────────────────────────────────────────────────
  function applyState(d) {
    state     = d.state || {};
    timeoutAt = d.timeoutAt ? new Date(d.timeoutAt) : null;

    renderParties();
    renderLog();
    updateActions();
    updateCountdown();

    if (d.battleStatus === 'finished' || state.phase === 'finished') {
      showResult();
    }
  }

  // ── Render parties ────────────────────────────────────────────────────────
  function renderParties() {
    const parties = state.parties || {};
    const myId    = String(MY_PLAYER_ID);
    const oppId   = Object.keys(parties).find(k => k !== myId);

    renderParty(document.getElementById('pvp-my-cards'),  parties[myId]  || {}, true);
    renderParty(document.getElementById('pvp-opp-cards'), parties[oppId] || {}, false);
  }

  function renderParty(container, party, isMine) {
    container.innerHTML = '';
    Object.entries(party).forEach(([ci, m]) => {
      const isActive = isMine
        && String(state.activePlayerId) === String(MY_PLAYER_ID)
        && String(state.activeCharIndex) === ci;

      const pvPct = m.maxPv > 0 ? Math.round(m.currentPv / m.maxPv * 100) : 0;
      const egPct = m.maxEg > 0 ? Math.round(m.currentEg / m.maxEg * 100) : 0;

      const card = document.createElement('div');
      card.className = 'pvp-char-card'
        + (m.isKo ? ' ko' : '')
        + (isActive ? ' active' : '');
      card.dataset.ci = ci;
      card.dataset.mine = isMine ? '1' : '0';

      const portrait = m.modelFilename
        ? `<img class="pvp-char-portrait" src="/uploads/models/${m.modelFilename}" alt="">`
        : `<div class="pvp-char-portrait-placeholder"></div>`;

      const statusIcons = (m.statuses || [])
        .filter(s => s.iconId)
        .map(s => `<img class="pvp-status-icon" src="${STATUS_ICON_BASE}${s.iconId}" title="${s.name || ''}" alt="">`)
        .join('');

      card.innerHTML = `
        <div class="pvp-char-inner">
          ${portrait}
          <div class="pvp-char-body">
            <div class="pvp-char-name">${m.name}${m.isKo ? ' <small style="color:#f85149">[K.O.]</small>' : ''}</div>
            <div class="pvp-char-stats">
              <span>${m.currentPv}/${m.maxPv} PV</span>
              <span>${m.currentEg}/${m.maxEg} EG</span>
            </div>
            <div class="pvp-bar-wrap"><div class="pvp-bar pv" style="width:${pvPct}%"></div></div>
            <div class="pvp-bar-wrap"><div class="pvp-bar eg" style="width:${egPct}%"></div></div>
            ${statusIcons ? `<div class="pvp-statuses">${statusIcons}</div>` : ''}
          </div>
        </div>
      `;

      container.appendChild(card);
    });
  }

  // ── Render log ────────────────────────────────────────────────────────────
  function renderLog() {
    const log = state.log || [];
    const el  = document.getElementById('pvp-log');
    el.innerHTML = [...log].reverse().map(entry => {
      const myPId = String(MY_PLAYER_ID);
      const isMe  = entry.actor === 'p' + myPId;
      const isSys = entry.actor === 'system';
      const cls   = isMe ? 'me' : isSys ? 'sys' : 'them';
      return `<div class="pvp-log-line ${cls}">[T${entry.turn}] ${entry.text}</div>`;
    }).join('');
  }

  // ── Actions ───────────────────────────────────────────────────────────────
  function updateActions() {
    const isMyTurn = String(state.activePlayerId) === String(MY_PLAYER_ID) && state.phase === 'ongoing';
    const actionsEl = document.getElementById('pvp-actions');
    const badge     = document.getElementById('pvp-myturn-badge');
    const turnLabel = document.getElementById('pvp-turn-label');

    turnLabel.textContent = 'Tour ' + (state.turn || 1);

    if (state.phase !== 'ongoing') {
      actionsEl.hidden = true;
      badge.hidden = true;
      return;
    }

    actionsEl.hidden = !isMyTurn;
    badge.hidden     = false;
    badge.textContent = isMyTurn ? 'Votre tour !' : 'En attente de l\'adversaire...';
    badge.className   = 'pvp-myturn-badge' + (isMyTurn ? '' : ' waiting') + (isMyTurn ? '' : '');
  }

  // ── Countdown ─────────────────────────────────────────────────────────────
  function updateCountdown() {
    clearInterval(cdownTimer);
    const cdEl = document.getElementById('pvp-countdown');
    const isMyTurn = String(state.activePlayerId) === String(MY_PLAYER_ID) && state.phase === 'ongoing';

    if (!isMyTurn || !timeoutAt) { cdEl.hidden = true; return; }

    cdEl.hidden = false;
    function tick() {
      const remaining = Math.max(0, Math.ceil((timeoutAt - Date.now()) / 1000));
      cdEl.textContent = remaining + 's';
      cdEl.className = remaining > 15 ? 'safe' : remaining > 8 ? 'warning' : 'danger';
    }
    tick();
    cdownTimer = setInterval(tick, 500);
  }

  // ── Result ────────────────────────────────────────────────────────────────
  function showResult() {
    clearTimeout(pollTimer);
    clearInterval(cdownTimer);

    document.getElementById('pvp-battlefield').style.opacity = '.5';
    document.getElementById('pvp-actions').hidden = true;

    const myId    = String(MY_PLAYER_ID);
    const winnerId = state.winnerId != null ? String(state.winnerId) : null;
    const won = winnerId === myId;

    const resultEl = document.getElementById('pvp-result');
    const titleEl  = document.getElementById('pvp-result-title');
    const subEl    = document.getElementById('pvp-result-sub');

    resultEl.hidden = false;
    titleEl.textContent = won ? 'Victoire !' : 'Défaite';
    titleEl.className   = 'pvp-result-title ' + (won ? 'win' : 'lose');
    subEl.textContent   = won
      ? {{ matchWinText|default('Vous vous qualifiez pour le prochain tour !')|json_encode|raw }}
      : {{ matchLoseText|default('Vous êtes éliminé du death match...')|json_encode|raw }};

    var prizeNotif = ((state.prizeNotif || {})[String(myId)]);
    if (prizeNotif) {
      setTimeout(function () {
        var placeImgs = {1: '{{ asset('images/1st_place.png') }}', 2: '{{ asset('images/2nd_place.png') }}', 3: '{{ asset('images/3rd_place.png') }}'};
        document.getElementById('prize-modal-img').src   = placeImgs[prizeNotif.place] || '';
        document.getElementById('prize-modal-title').textContent = prizeNotif.title;
        document.getElementById('prize-modal-body').textContent  = prizeNotif.body;
        document.getElementById('prize-modal').hidden = false;
      }, 900);
    }
  }

  // ── Send action ───────────────────────────────────────────────────────────
  async function sendAction(type, params = {}) {
    document.getElementById('pvp-actions').hidden = true;
    clearTimeout(pollTimer);
    try {
      const r = await fetch(`${MATCH_BASE}/action`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({type, params}),
      });
      const d = await r.json();
      if (!r.ok) { alert(d.error || 'Erreur'); poll(); return; }
      applyState(d);
      if (d.battleStatus !== 'finished') schedulePoll();
    } catch { poll(); }
  }

  // ── Button handlers ────────────────────────────────────────────────────────
  document.getElementById('btn-pvp-attack').addEventListener('click', () => {
    startTargetSelection('attack');
  });
  document.getElementById('btn-pvp-defend').addEventListener('click', () => {
    sendAction('defend');
  });
  document.getElementById('btn-pvp-skill').addEventListener('click', () => {
    showSkillPicker();
  });
  document.getElementById('btn-pvp-surrender').addEventListener('click', async () => {
    if (!confirm('Vous rendre ? Vous perdrez ce combat...')) return;
    document.getElementById('pvp-actions').hidden = true;
    try {
      const r = await fetch(`${MATCH_BASE}/surrender`, { method: 'POST' });
      const d = await r.json();
      applyState({...d, battleStatus: r.ok ? 'finished' : 'ongoing'});
    } catch { poll(); }
  });

  // ── Target selection ────────────────────────────────────────────────────────
  function startTargetSelection(actionType, skill = null) {
    selectingTarget = true;
    pendingSkill    = skill;

    const myId  = String(MY_PLAYER_ID);
    const oppId = Object.keys(state.parties || {}).find(k => k !== myId);

    // Mark opponent's alive cards as selectable
    document.querySelectorAll('.pvp-char-card').forEach(card => {
      const isMine = card.dataset.mine === '1';
      if (!isMine) {
        const ci = parseInt(card.dataset.ci);
        const m  = (state.parties[oppId] || {})[ci];
        if (m && !m.isKo) {
          card.classList.add('selectable');
        }
      }
    });
  }

  document.addEventListener('click', e => {
    if (!selectingTarget) return;
    const card = e.target.closest('.pvp-char-card');
    if (!card || card.dataset.mine === '1') return;

    selectingTarget = false;
    document.querySelectorAll('.pvp-char-card.selectable').forEach(c => c.classList.remove('selectable'));

    const ci = parseInt(card.dataset.ci);
    if (pendingSkill !== null) {
      sendAction('skill', {skillId: pendingSkill, targetCharIndex: ci});
      pendingSkill = null;
    } else {
      sendAction('attack', {targetCharIndex: ci});
    }
  });

  // ── Skill picker ─────────────────────────────────────────────────────────
  function showSkillPicker() {
    const actionsEl = document.getElementById('pvp-actions');
    const pickerEl  = document.getElementById('pvp-skill-picker');
    const listEl    = document.getElementById('pvp-skill-list');
    actionsEl.hidden = true;
    pickerEl.hidden  = false;

    const myId = String(MY_PLAYER_ID);
    const ci   = state.activeCharIndex;
    const char = (state.parties[myId] || {})[ci];
    const skills = char ? (char.skills || []) : [];

    listEl.innerHTML = skills.map(s => {
      const cant = char.currentEg < s.egCost;
      return `<div class="pvp-skill-row${cant ? ' cant-afford' : ''}" data-skill-id="${s.id}" data-target-type="${s.targetType}">
        <span class="pvp-skill-name">${s.name}</span>
        <span class="pvp-skill-eg">${s.egCost} EG</span>
      </div>`;
    }).join('') || '<p style="font-size:.8rem;color:var(--muted)">Aucune compétence disponible.</p>';

    listEl.querySelectorAll('.pvp-skill-row:not(.cant-afford)').forEach(row => {
      row.addEventListener('click', () => {
        const skillId   = parseInt(row.dataset.skillId);
        const targetType = parseInt(row.dataset.targetType);
        hidePickers();
        // Damage skills (0, 1) need target selection; others are self/party
        if (targetType === 0 || targetType === 1) {
          startTargetSelection('skill', skillId);
        } else {
          sendAction('skill', {skillId});
        }
      });
    });
  }

  function hidePickers() {
    document.getElementById('pvp-skill-picker').hidden = true;
    const isMyTurn = String(state.activePlayerId) === String(MY_PLAYER_ID) && state.phase === 'ongoing';
    document.getElementById('pvp-actions').hidden = !isMyTurn;
    selectingTarget = false;
    pendingSkill    = null;
    document.querySelectorAll('.pvp-char-card.selectable').forEach(c => c.classList.remove('selectable'));
  }

  window.hidePickers = hidePickers;
})();
</script>
{% endblock %}