From 1b4da3d59fc5d663d3a180764cdda6a906c38b73 Mon Sep 17 00:00:00 2001
From: Didictateur <adrien.decosse@gmail.com>
Date: Tue, 2 Dec 2025 21:35:37 +0100
Subject: [PATCH] prettier pour html

---
 public/game.html    | 3417 +++++++++++++++++++++++++++----------------
 public/index.html   |  425 ++++--
 public/waiting.html | 1252 ++++++++++------
 3 files changed, 3230 insertions(+), 1864 deletions(-)
diff --git a/public/game.html b/public/game.html
index db4cdd2..391613b 100644
--- a/public/game.html
+++ b/public/game.html
@@ -1,1340 +1,2261 @@
 <!doctype html>
 <html>
-<head>
-  <meta charset="utf-8" />
-  <title>ChessNut - Partie</title>
-  <link rel="stylesheet" href="/styles/style.css">
-  <style>
-    /* veil overlay for brouillard effect */
-    .square { position: relative; }
-    .square .veil {
-      position: absolute;
-      left: 0; top: 0; right: 0; bottom: 0;
-      background: rgba(255,255,255,0.95);
-      pointer-events: auto; /* block interactions so veiled squares are not clickable */
-      z-index: 50;
-      cursor: default;
-    }
-    /* activity feed for user-facing logs (card plays) */
-    #activityFeed { max-height: 140px; overflow:auto; padding:8px; background:#fff; border:1px solid #eee; border-radius:6px; font-size:14px; color:#222 }
-    #log { display:none; }
-  </style>
-</head>
-<body>
-  <!-- Game over modal (hidden by default). Shown when server emits game:over -->
-  <div id="gameOverModal" style="position:fixed;left:0;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:9999">
-    <div style="background:#fff;padding:24px;border-radius:10px;min-width:260px;max-width:90%;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,0.25)">
-      <h2 id="gameOverTitle" style="margin-top:0;margin-bottom:8px">Partie terminée</h2>
-      <div id="gameOverMessage" style="margin-bottom:12px">Chargement...</div>
-      <div style="display:flex;gap:8px;justify-content:center">
-        <button id="gameOverClose" style="background:#efefef;border:0;padding:8px 12px;border-radius:6px;cursor:pointer">Rester</button>
-        <button id="gameOverReload" style="background:linear-gradient(90deg,#ff7a59,#ffb199);border:0;color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer">Quitter</button>
+  <head>
+    <meta charset="utf-8" />
+    <title>ChessNut - Partie</title>
+    <link rel="stylesheet" href="/styles/style.css" />
+    <style>
+      /* veil overlay for brouillard effect */
+      .square {
+        position: relative;
+      }
+      .square .veil {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(255, 255, 255, 0.95);
+        pointer-events: auto; /* block interactions so veiled squares are not clickable */
+        z-index: 50;
+        cursor: default;
+      }
+      /* activity feed for user-facing logs (card plays) */
+      #activityFeed {
+        max-height: 140px;
+        overflow: auto;
+        padding: 8px;
+        background: #fff;
+        border: 1px solid #eee;
+        border-radius: 6px;
+        font-size: 14px;
+        color: #222;
+      }
+      #log {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Game over modal (hidden by default). Shown when server emits game:over -->
+    <div
+      id="gameOverModal"
+      style="
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 9999;
+      "
+    >
+      <div
+        style="
+          background: #fff;
+          padding: 24px;
+          border-radius: 10px;
+          min-width: 260px;
+          max-width: 90%;
+          text-align: center;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+        "
+      >
+        <h2 id="gameOverTitle" style="margin-top: 0; margin-bottom: 8px">
+          Partie terminée
+        </h2>
+        <div id="gameOverMessage" style="margin-bottom: 12px">
+          Chargement...
+        </div>
+        <div style="display: flex; gap: 8px; justify-content: center">
+          <button
+            id="gameOverClose"
+            style="
+              background: #efefef;
+              border: 0;
+              padding: 8px 12px;
+              border-radius: 6px;
+              cursor: pointer;
+            "
+          >
+            Rester
+          </button>
+          <button
+            id="gameOverReload"
+            style="
+              background: linear-gradient(90deg, #ff7a59, #ffb199);
+              border: 0;
+              color: #fff;
+              padding: 8px 12px;
+              border-radius: 6px;
+              cursor: pointer;
+            "
+          >
+            Quitter
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-  <h2>ChessNut — Partie</h2>
-  <div id="turnBanner" style="margin-bottom:8px"></div>
-  <div>Room: <strong id="roomId">-</strong> &nbsp;•&nbsp; Vous jouez: <strong id="myColor">-</strong>
-  <div class="layout-row">
+    <h2>ChessNut — Partie</h2>
+    <div id="turnBanner" style="margin-bottom: 8px"></div>
     <div>
-      <div id="board"></div>
-    </div>
-    <aside style="min-width:320px;margin-left:18px">
-
-      <section class="card" style="margin-top:12px">
-        <div><strong>Outils / Logs</strong></div>
-        <div style="margin-top:8px">
+      Room: <strong id="roomId">-</strong> &nbsp;•&nbsp; Vous jouez:
+      <strong id="myColor">-</strong>
+      <div class="layout-row">
+        <div>
+          <div id="board"></div>
         </div>
-        <div style="margin-top:8px;display:flex;gap:8px;align-items:center">
-          <pre id="log" style="margin-top:0px;height:140px;overflow:auto;flex:1">logs...</pre>
-        </div>
-        <div style="margin-top:8px">
-          <div><strong>Activité</strong></div>
-          <div id="activityFeed" style="margin-top:8px">Aucune activité pour l'instant.</div>
-        </div>
-      </section>
-      <div style="margin-top:10px;display:flex;align-items:center;gap:12px">
-        <div id="hands" style="display:flex;flex-direction:column;gap:8px;flex:1;margin-left:6px"></div>
+        <aside style="min-width: 320px; margin-left: 18px">
+          <section class="card" style="margin-top: 12px">
+            <div><strong>Outils / Logs</strong></div>
+            <div style="margin-top: 8px"></div>
+            <div
+              style="
+                margin-top: 8px;
+                display: flex;
+                gap: 8px;
+                align-items: center;
+              "
+            >
+              <pre
+                id="log"
+                style="margin-top: 0px; height: 140px; overflow: auto; flex: 1"
+              >
+logs...</pre
+              >
+            </div>
+            <div style="margin-top: 8px">
+              <div><strong>Activité</strong></div>
+              <div id="activityFeed" style="margin-top: 8px">
+                Aucune activité pour l'instant.
+              </div>
+            </div>
+          </section>
+          <div
+            style="
+              margin-top: 10px;
+              display: flex;
+              align-items: center;
+              gap: 12px;
+            "
+          >
+            <div
+              id="hands"
+              style="
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                flex: 1;
+                margin-left: 6px;
+              "
+            ></div>
+          </div>
+        </aside>
       </div>
-    </aside>
-  </div>
 
-  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
-  <script>
-    function qs(name){ const url = new URL(window.location.href); return url.searchParams.get(name); }
-    const roomId = qs('roomId');
-    const playerId = qs('playerId') || undefined;
-    const roomIdEl = document.getElementById('roomId');
-    const playerIdEl = document.getElementById('playerId');
-    if(roomIdEl) roomIdEl.textContent = roomId || '-';
-    if(playerIdEl) playerIdEl.textContent = playerId || '-';
+      <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+      <script>
+        function qs(name) {
+          const url = new URL(window.location.href);
+          return url.searchParams.get(name);
+        }
+        const roomId = qs("roomId");
+        const playerId = qs("playerId") || undefined;
+        const roomIdEl = document.getElementById("roomId");
+        const playerIdEl = document.getElementById("playerId");
+        if (roomIdEl) roomIdEl.textContent = roomId || "-";
+        if (playerIdEl) playerIdEl.textContent = playerId || "-";
 
-  const logEl = document.getElementById('log');
-  const playersEl = document.getElementById('players');
-  const boardEl = document.getElementById('board');
-  const myColorEl = document.getElementById('myColor');
-  let socket = null;
-  let myColor = null;
-  let playerColors = {};
-  let selectedSquare = null;
-  let selectedSquareEl = null;
-  let myPlayerId = playerId || null;
-  const remoteSelections = {};
-  let isSpectating = false;
-  const remoteMoves = {};
-  let currentBoardState = null;
-  let myMines = [];
-  let currentVeiledSquares = [];
-  let pendingCard = null;
+        const logEl = document.getElementById("log");
+        const playersEl = document.getElementById("players");
+        const boardEl = document.getElementById("board");
+        const myColorEl = document.getElementById("myColor");
+        let socket = null;
+        let myColor = null;
+        let playerColors = {};
+        let selectedSquare = null;
+        let selectedSquareEl = null;
+        let myPlayerId = playerId || null;
+        const remoteSelections = {};
+        let isSpectating = false;
+        const remoteMoves = {};
+        let currentBoardState = null;
+        let myMines = [];
+        let currentVeiledSquares = [];
+        let pendingCard = null;
 
-    function log(...args){
-      if(logEl){
-        try{
-          logEl.textContent += '\n' + args.map(a=>typeof a==='object'?JSON.stringify(a):a).join(' ');
-          logEl.scrollTop = logEl.scrollHeight;
-        }catch(e){ console.log(...args); }
-      } else {
-        console.log(...args);
-      }
-    }
-
-    function appendActivity(message){
-      try{
-        const feed = document.getElementById('activityFeed');
-        if(!feed) return;
-        const line = document.createElement('div');
-        line.textContent = message;
-        if(feed.textContent && feed.textContent.indexOf("Aucune activité") !== -1){ feed.textContent = ''; }
-        feed.insertBefore(line, feed.firstChild);
-        while(feed.children.length > 30) feed.removeChild(feed.lastChild);
-      }catch(_){ }
-    }
-
-    function showToast(message, opts){
-      try{
-        opts = opts || {};
-        const id = 'cn-toast';
-        const wrap = document.createElement('div');
-        wrap.className = 'cn-toast';
-        wrap.textContent = message || '';
-        wrap.style.position = 'fixed';
-        wrap.style.left = '50%';
-        wrap.style.transform = 'translateX(-50%)';
-        wrap.style.top = opts.top || '18px';
-        wrap.style.background = opts.background || 'rgba(0,0,0,0.8)';
-        wrap.style.color = opts.color || '#fff';
-        wrap.style.padding = '8px 12px';
-        wrap.style.borderRadius = '6px';
-        wrap.style.zIndex = 99999;
-        wrap.style.fontSize = '14px';
-        wrap.style.boxShadow = '0 6px 18px rgba(0,0,0,0.25)';
-        document.body.appendChild(wrap);
-        setTimeout(()=>{ try{ wrap.style.transition = 'opacity 300ms ease'; wrap.style.opacity = '0'; setTimeout(()=>{ try{ wrap.remove(); }catch(_){ } }, 320); }catch(_){ } }, opts.duration || 3500);
-      }catch(_){ }
-    }
-
-    function emitCardPlay(payload, cb){
-      try{
-        if(!socket) return cb && cb({ error: 'no_socket' });
-        let acked = false;
-        const timer = setTimeout(()=>{
-          if(!acked){
-            try{ socket.emit('room:refresh', { roomId }, ()=>{}); }catch(_){ }
+        function log(...args) {
+          if (logEl) {
+            try {
+              logEl.textContent +=
+                "\n" +
+                args
+                  .map((a) => (typeof a === "object" ? JSON.stringify(a) : a))
+                  .join(" ");
+              logEl.scrollTop = logEl.scrollHeight;
+            } catch (e) {
+              console.log(...args);
+            }
+          } else {
+            console.log(...args);
           }
-        }, 1500);
-        socket.emit('card:play', payload, (resp)=>{
-          acked = true; try{ clearTimeout(timer); }catch(_){ }
-          try{ socket.emit('room:refresh', { roomId }, ()=>{}); }catch(_){ }
-          if(cb) cb(resp);
-        });
-      }catch(e){ if(cb) cb({ error: 'emit_failed' }); }
-    }
+        }
 
-    function playShuffleAnimation(){
-      if(!boardEl) return;
-      try{
-        boardEl.classList.add('shuffle-play');
-        setTimeout(()=>{ try{ boardEl.classList.remove('shuffle-play'); }catch(_){ } }, 700);
-      }catch(_){ }
-    }
+        function appendActivity(message) {
+          try {
+            const feed = document.getElementById("activityFeed");
+            if (!feed) return;
+            const line = document.createElement("div");
+            line.textContent = message;
+            if (
+              feed.textContent &&
+              feed.textContent.indexOf("Aucune activité") !== -1
+            ) {
+              feed.textContent = "";
+            }
+            feed.insertBefore(line, feed.firstChild);
+            while (feed.children.length > 30) feed.removeChild(feed.lastChild);
+          } catch (_) {}
+        }
 
-    function cardRequiresTarget(cardId){
-      if(!cardId) return null;
-      let id = String(cardId).toLowerCase();
-      try{
-        id = id.normalize('NFD').replace(/\p{Diacritic}/gu, '');
-      }catch(e){
-        id = id.replace(/[^\x00-\x7F]/g, '');
-      }
-      if(id.indexOf('mine') !== -1) return 'empty';
-      if(id.indexOf('revol') !== -1) return null;
-      if(id.indexOf('sniper') !== -1) return 'owned';
-      if(id.indexOf('doppel') !== -1) return 'owned';
-      if(id.indexOf('toucher') !== -1) return 'enemy';
-      if(id.indexOf('parrure') !== -1) return 'enemy_queen';
-      if(id.indexOf('tout') !== -1) return 'piece';
-      if(id.indexOf('kamikaz') !== -1) return 'owned';
-      if(id.indexOf('invisible') !== -1) return 'owned';
-      if(id.indexOf('rebond') !== -1) return 'owned';
-      if(id.indexOf('adoub') !== -1) return 'owned';
-      if(id.indexOf('folie') !== -1) return 'owned';
-      if(id.indexOf('fortification') !== -1) return 'owned';
-  if(id.indexOf('promotion') !== -1) return 'owned_pawn';
-      if(id.indexOf('vol_carte') !== -1) return 'player';
-      if(id.indexOf('vole_piece') !== -1) return 'enemy';
-      if(id.indexOf('coincoin') !== -1) return 'owned';
-      if(id.indexOf('teleportation') !== -1) return 'owned';
-      if(id.indexOf('inversion') !== -1) return 'own_then_enemy';
-      return null;
-    }
+        function showToast(message, opts) {
+          try {
+            opts = opts || {};
+            const id = "cn-toast";
+            const wrap = document.createElement("div");
+            wrap.className = "cn-toast";
+            wrap.textContent = message || "";
+            wrap.style.position = "fixed";
+            wrap.style.left = "50%";
+            wrap.style.transform = "translateX(-50%)";
+            wrap.style.top = opts.top || "18px";
+            wrap.style.background = opts.background || "rgba(0,0,0,0.8)";
+            wrap.style.color = opts.color || "#fff";
+            wrap.style.padding = "8px 12px";
+            wrap.style.borderRadius = "6px";
+            wrap.style.zIndex = 99999;
+            wrap.style.fontSize = "14px";
+            wrap.style.boxShadow = "0 6px 18px rgba(0,0,0,0.25)";
+            document.body.appendChild(wrap);
+            setTimeout(() => {
+              try {
+                wrap.style.transition = "opacity 300ms ease";
+                wrap.style.opacity = "0";
+                setTimeout(() => {
+                  try {
+                    wrap.remove();
+                  } catch (_) {}
+                }, 320);
+              } catch (_) {}
+            }, opts.duration || 3500);
+          } catch (_) {}
+        }
 
-  if(!roomId){ showToast('roomId manquant dans l\'URL', { background: 'rgba(200,60,60,0.95)' }); }
+        function emitCardPlay(payload, cb) {
+          try {
+            if (!socket) return cb && cb({ error: "no_socket" });
+            let acked = false;
+            const timer = setTimeout(() => {
+              if (!acked) {
+                try {
+                  socket.emit("room:refresh", { roomId }, () => {});
+                } catch (_) {}
+              }
+            }, 1500);
+            socket.emit("card:play", payload, (resp) => {
+              acked = true;
+              try {
+                clearTimeout(timer);
+              } catch (_) {}
+              try {
+                socket.emit("room:refresh", { roomId }, () => {});
+              } catch (_) {}
+              if (cb) cb(resp);
+            });
+          } catch (e) {
+            if (cb) cb({ error: "emit_failed" });
+          }
+        }
 
-    function connectAndJoin(){
-      socket = io();
-      socket.on('connect', ()=>{ log('socket connecté', socket.id); });
+        function playShuffleAnimation() {
+          if (!boardEl) return;
+          try {
+            boardEl.classList.add("shuffle-play");
+            setTimeout(() => {
+              try {
+                boardEl.classList.remove("shuffle-play");
+              } catch (_) {}
+            }, 700);
+          } catch (_) {}
+        }
 
-      socket.on('room:update', (data)=>{
-      log('room:update', data);
-        if(playersEl){
-          playersEl.innerHTML = '';
-          (data.players||[]).forEach(p=>{
-            try{ playerColors[p.id] = p.color; }catch(_){ }
-            try{ if(p.id === myPlayerId){ myColor = p.color; if(myColorEl) myColorEl.textContent = myColor; } }catch(_){ }
-            const li = document.createElement('li');
-            li.textContent = (p.color || 'Joueur') + (p.id === myPlayerId ? ' (vous)' : '');
-            playersEl.appendChild(li);
+        function cardRequiresTarget(cardId) {
+          if (!cardId) return null;
+          let id = String(cardId).toLowerCase();
+          try {
+            id = id.normalize("NFD").replace(/\p{Diacritic}/gu, "");
+          } catch (e) {
+            id = id.replace(/[^\x00-\x7F]/g, "");
+          }
+          if (id.indexOf("mine") !== -1) return "empty";
+          if (id.indexOf("revol") !== -1) return null;
+          if (id.indexOf("sniper") !== -1) return "owned";
+          if (id.indexOf("doppel") !== -1) return "owned";
+          if (id.indexOf("toucher") !== -1) return "enemy";
+          if (id.indexOf("parrure") !== -1) return "enemy_queen";
+          if (id.indexOf("tout") !== -1) return "piece";
+          if (id.indexOf("kamikaz") !== -1) return "owned";
+          if (id.indexOf("invisible") !== -1) return "owned";
+          if (id.indexOf("rebond") !== -1) return "owned";
+          if (id.indexOf("adoub") !== -1) return "owned";
+          if (id.indexOf("folie") !== -1) return "owned";
+          if (id.indexOf("fortification") !== -1) return "owned";
+          if (id.indexOf("promotion") !== -1) return "owned_pawn";
+          if (id.indexOf("vol_carte") !== -1) return "player";
+          if (id.indexOf("vole_piece") !== -1) return "enemy";
+          if (id.indexOf("coincoin") !== -1) return "owned";
+          if (id.indexOf("teleportation") !== -1) return "owned";
+          if (id.indexOf("inversion") !== -1) return "own_then_enemy";
+          return null;
+        }
+
+        if (!roomId) {
+          showToast("roomId manquant dans l'URL", {
+            background: "rgba(200,60,60,0.95)",
           });
         }
-        if(data.size){
-            buildGrid(data.size);
-            const side = Math.min(800, Math.max(320, data.size * 80));
-            boardEl.style.width = side + 'px';
-            boardEl.style.height = side + 'px';
-        }
-    try{ currentVeiledSquares = Array.isArray(data.veiledSquares) ? data.veiledSquares : (data.boardState && data.boardState.veiledSquares) || []; }catch(_){ currentVeiledSquares = []; }
-    if(data.boardState) {
-      renderBoardFromState(data.boardState);
-      updateTurnBanner(data.boardState);
-    }
-    try{ if(data && data.status && data.status !== 'finished'){ removeSpectatorQuitButton(); } }catch(_){ }
-    try{ myMines = data.minesOwn || []; }catch(e){ myMines = []; }
-    try{ renderMines(); }catch(e){ }
-    if(data.hands){
-      const own = (data.hands && data.hands[myPlayerId]) ? data.hands[myPlayerId] : [];
-      const counts = {};
-      Object.entries(data.hands || {}).forEach(([pid, arr])=>{ counts[pid] = (arr && arr.length) || 0; });
-      renderHands(own, counts);
-    } else if(data.handsOwn || data.handCounts){
-      renderHands(data.handsOwn || [], data.handCounts || {});
-    }
-    try{
-      const drawBtn = document.getElementById('drawBtn');
-      if(drawBtn){
-        const auto = !!data.autoDraw;
-        const board = data.boardState || null;
-        const myShort = myColor && myColor[0];
-        if(!auto && board && myShort && board.turn === myShort){
-          const myHandLen = (data.handsOwn && data.handsOwn.length) || 0;
-          drawBtn.style.display = 'inline-block';
-          drawBtn.disabled = myHandLen >= 5;
-        } else {
-          drawBtn.style.display = 'none';
-        }
-      }
-    }catch(_){ }
-      });
-  socket.on('game:over', (data)=>{
-    try{
-      log('game:over', data);
-      if(data.boardState){ renderBoardFromState(data.boardState); updateTurnBanner(data.boardState); }
-      try{ showGameOver(data); }catch(_){ }
-    }catch(e){ console.warn('game:over handler error', e); }
-  });
-  socket.on('game:started', (data)=>{ log('game:started', data); if(data.boardState){ renderBoardFromState(data.boardState); updateTurnBanner(data.boardState); } });
-      socket.on('card:drawn', (data) => {
-        try{
-          log('recv card:drawn', data);
-          showCardDrawnNotification(data);
-        }catch(e){ console.warn('card:drawn handler error', e); }
-      });
-          socket.on('player:drew', (data) => {
-            try{
-              const pid = data && data.playerId;
-              if(!pid) return;
-              const actor = (pid === myPlayerId) ? 'Vous' : (playerColors[pid] ? playerColors[pid] : 'Adversaire');
-              appendActivity(`${actor} : a pioché une carte`);
-            }catch(_){ }
+
+        function connectAndJoin() {
+          socket = io();
+          socket.on("connect", () => {
+            log("socket connecté", socket.id);
           });
-      socket.on('card:played', (data) => {
-        try{
-          log('recv card:played', data);
-          const played = data && data.played ? data.played : data;
-          const cardObj = played && (played.card || played.cardObj || null);
-          const owner = played && played.playerId;
-          if(owner === myPlayerId){
-            const row = document.querySelector('.cards-row');
-            if(row){
-              const elems = Array.from(row.querySelectorAll('.pokemon-card'));
-              elems.forEach(el => {
-                const uuid = el.dataset.cardUuid || '';
-                const cid = el.dataset.cardId || '';
-                if((cardObj && cardObj.id && uuid && uuid === cardObj.id) || (cardObj && cardObj.cardId && cid && cid === cardObj.cardId)){
-                  el.remove();
-                }
+
+          socket.on("room:update", (data) => {
+            log("room:update", data);
+            if (playersEl) {
+              playersEl.innerHTML = "";
+              (data.players || []).forEach((p) => {
+                try {
+                  playerColors[p.id] = p.color;
+                } catch (_) {}
+                try {
+                  if (p.id === myPlayerId) {
+                    myColor = p.color;
+                    if (myColorEl) myColorEl.textContent = myColor;
+                  }
+                } catch (_) {}
+                const li = document.createElement("li");
+                li.textContent =
+                  (p.color || "Joueur") +
+                  (p.id === myPlayerId ? " (vous)" : "");
+                playersEl.appendChild(li);
               });
             }
-          }
-          try{
-            const title = (cardObj && (cardObj.title || cardObj.cardId)) || (played && played.card && (played.card.title || played.card.cardId)) || 'Carte';
-            const actor = (owner === myPlayerId) ? 'Vous' : (playerColors[owner] ? playerColors[owner] : 'Adversaire');
-              const isHidden = (cardObj && cardObj.hidden) || (played && played.card && played.card.hidden);
-              if(isHidden && owner !== myPlayerId){
-                appendActivity(`${actor} : a joué une carte`);
-              } else {
-                appendActivity(`${actor} : a joué la carte "${title}"`);
-              }
-          }catch(_){ }
-        }catch(e){ console.warn('card:played handler error', e); }
-      });
-      socket.on('card:effect:applied', (data) => {
-        try{
-          const effect = data && data.effect ? data.effect : data;
-          if(!effect) return;
-          if(effect.type === 'melange' || effect.type === 'melange'){
-            try{ playShuffleAnimation(); }catch(_){ }
-          }
-          if(effect.playerId && effect.playerId === myPlayerId){
-            showEffectNotification(effect);
-          } else if(effect.type && (effect.type === 'promotion' || effect.type === 'steal' || effect.type === 'mine')){
-            // public notable effects
-            showEffectNotification(effect);
-          }
-        }catch(e){ console.warn('card:effect:applied handler error', e); }
-      });
-      // when the server sends the stolen card to the stealer (private)
-      socket.on('card:stolen', (data) => {
-        try{
-          log('recv card:stolen', data);
-          // show notification and a small highlight in hands
-          const handsEl = document.getElementById('hands');
-          if(handsEl){
-            const note = document.createElement('div'); note.className = 'card-draw-note';
-            note.textContent = data && data.card ? `Vous avez volé : ${data.card.title || data.card.cardId || 'une carte'}` : 'Vous avez volé une carte';
-            handsEl.prepend(note); setTimeout(()=> note.remove(), 6000);
-          }
-        }catch(e){ console.warn('card:stolen handler error', e); }
-      });
-      socket.on('card:lost', (data) => {
-        try{ log('recv card:lost', data); showEffectNotification({ type: 'card_lost' }); }catch(e){ }
-      });
-      // private event: your played card was blocked (e.g., by a totem)
-      socket.on('card:play_blocked:private', (data) => {
-        try{
-          log('recv card:play_blocked:private', data);
-          const msg = (data && data.message) || 'Votre carte a été annulée par un effet.';
-          // show a toast and also log in the side log
-          showToast(msg, { background: 'rgba(200,60,60,0.95)' });
-          if(logEl) { log('notification:', msg); }
-        }catch(e){ console.warn('card:play_blocked:private handler error', e); }
-      });
-      // generic notification channel for targeted messages
-      socket.on('notification', (data) => {
-        try{
-          log('recv notification', data);
-          const msg = data && data.message ? data.message : (data && data.text) || 'Notification';
-          showToast(msg, { background: 'rgba(40,40,40,0.95)' });
-        }catch(e){ console.warn('notification handler error', e); }
-      });
-      // selection events (include moves) broadcasted by server
-      socket.on('game:select', (data) => {
-        try{
-          const pid = data && data.playerId;
-          const square = data && data.square;
-          const moves = data && data.moves;
-            log('recv game:select', { pid, square, moves: Array.isArray(moves) ? moves.length : moves });
-          // cleared selection
-          if(!square){
-            if(pid === myPlayerId){
-              // our selection cleared (maybe by reconnection) - clear locally without re-emitting
-              clearSelection(false);
-            } else {
-                if(pid){
-                  clearRemoteSelection(pid);
-                }
+            if (data.size) {
+              buildGrid(data.size);
+              const side = Math.min(800, Math.max(320, data.size * 80));
+              boardEl.style.width = side + "px";
+              boardEl.style.height = side + "px";
             }
+            try {
+              currentVeiledSquares = Array.isArray(data.veiledSquares)
+                ? data.veiledSquares
+                : (data.boardState && data.boardState.veiledSquares) || [];
+            } catch (_) {
+              currentVeiledSquares = [];
+            }
+            if (data.boardState) {
+              renderBoardFromState(data.boardState);
+              updateTurnBanner(data.boardState);
+            }
+            try {
+              if (data && data.status && data.status !== "finished") {
+                removeSpectatorQuitButton();
+              }
+            } catch (_) {}
+            try {
+              myMines = data.minesOwn || [];
+            } catch (e) {
+              myMines = [];
+            }
+            try {
+              renderMines();
+            } catch (e) {}
+            if (data.hands) {
+              const own =
+                data.hands && data.hands[myPlayerId]
+                  ? data.hands[myPlayerId]
+                  : [];
+              const counts = {};
+              Object.entries(data.hands || {}).forEach(([pid, arr]) => {
+                counts[pid] = (arr && arr.length) || 0;
+              });
+              renderHands(own, counts);
+            } else if (data.handsOwn || data.handCounts) {
+              renderHands(data.handsOwn || [], data.handCounts || {});
+            }
+            try {
+              const drawBtn = document.getElementById("drawBtn");
+              if (drawBtn) {
+                const auto = !!data.autoDraw;
+                const board = data.boardState || null;
+                const myShort = myColor && myColor[0];
+                if (!auto && board && myShort && board.turn === myShort) {
+                  const myHandLen =
+                    (data.handsOwn && data.handsOwn.length) || 0;
+                  drawBtn.style.display = "inline-block";
+                  drawBtn.disabled = myHandLen >= 5;
+                } else {
+                  drawBtn.style.display = "none";
+                }
+              }
+            } catch (_) {}
+          });
+          socket.on("game:over", (data) => {
+            try {
+              log("game:over", data);
+              if (data.boardState) {
+                renderBoardFromState(data.boardState);
+                updateTurnBanner(data.boardState);
+              }
+              try {
+                showGameOver(data);
+              } catch (_) {}
+            } catch (e) {
+              console.warn("game:over handler error", e);
+            }
+          });
+          socket.on("game:started", (data) => {
+            log("game:started", data);
+            if (data.boardState) {
+              renderBoardFromState(data.boardState);
+              updateTurnBanner(data.boardState);
+            }
+          });
+          socket.on("card:drawn", (data) => {
+            try {
+              log("recv card:drawn", data);
+              showCardDrawnNotification(data);
+            } catch (e) {
+              console.warn("card:drawn handler error", e);
+            }
+          });
+          socket.on("player:drew", (data) => {
+            try {
+              const pid = data && data.playerId;
+              if (!pid) return;
+              const actor =
+                pid === myPlayerId
+                  ? "Vous"
+                  : playerColors[pid]
+                    ? playerColors[pid]
+                    : "Adversaire";
+              appendActivity(`${actor} : a pioché une carte`);
+            } catch (_) {}
+          });
+          socket.on("card:played", (data) => {
+            try {
+              log("recv card:played", data);
+              const played = data && data.played ? data.played : data;
+              const cardObj = played && (played.card || played.cardObj || null);
+              const owner = played && played.playerId;
+              if (owner === myPlayerId) {
+                const row = document.querySelector(".cards-row");
+                if (row) {
+                  const elems = Array.from(
+                    row.querySelectorAll(".pokemon-card"),
+                  );
+                  elems.forEach((el) => {
+                    const uuid = el.dataset.cardUuid || "";
+                    const cid = el.dataset.cardId || "";
+                    if (
+                      (cardObj && cardObj.id && uuid && uuid === cardObj.id) ||
+                      (cardObj &&
+                        cardObj.cardId &&
+                        cid &&
+                        cid === cardObj.cardId)
+                    ) {
+                      el.remove();
+                    }
+                  });
+                }
+              }
+              try {
+                const title =
+                  (cardObj && (cardObj.title || cardObj.cardId)) ||
+                  (played &&
+                    played.card &&
+                    (played.card.title || played.card.cardId)) ||
+                  "Carte";
+                const actor =
+                  owner === myPlayerId
+                    ? "Vous"
+                    : playerColors[owner]
+                      ? playerColors[owner]
+                      : "Adversaire";
+                const isHidden =
+                  (cardObj && cardObj.hidden) ||
+                  (played && played.card && played.card.hidden);
+                if (isHidden && owner !== myPlayerId) {
+                  appendActivity(`${actor} : a joué une carte`);
+                } else {
+                  appendActivity(`${actor} : a joué la carte "${title}"`);
+                }
+              } catch (_) {}
+            } catch (e) {
+              console.warn("card:played handler error", e);
+            }
+          });
+          socket.on("card:effect:applied", (data) => {
+            try {
+              const effect = data && data.effect ? data.effect : data;
+              if (!effect) return;
+              if (effect.type === "melange" || effect.type === "melange") {
+                try {
+                  playShuffleAnimation();
+                } catch (_) {}
+              }
+              if (effect.playerId && effect.playerId === myPlayerId) {
+                showEffectNotification(effect);
+              } else if (
+                effect.type &&
+                (effect.type === "promotion" ||
+                  effect.type === "steal" ||
+                  effect.type === "mine")
+              ) {
+                // public notable effects
+                showEffectNotification(effect);
+              }
+            } catch (e) {
+              console.warn("card:effect:applied handler error", e);
+            }
+          });
+          // when the server sends the stolen card to the stealer (private)
+          socket.on("card:stolen", (data) => {
+            try {
+              log("recv card:stolen", data);
+              // show notification and a small highlight in hands
+              const handsEl = document.getElementById("hands");
+              if (handsEl) {
+                const note = document.createElement("div");
+                note.className = "card-draw-note";
+                note.textContent =
+                  data && data.card
+                    ? `Vous avez volé : ${data.card.title || data.card.cardId || "une carte"}`
+                    : "Vous avez volé une carte";
+                handsEl.prepend(note);
+                setTimeout(() => note.remove(), 6000);
+              }
+            } catch (e) {
+              console.warn("card:stolen handler error", e);
+            }
+          });
+          socket.on("card:lost", (data) => {
+            try {
+              log("recv card:lost", data);
+              showEffectNotification({ type: "card_lost" });
+            } catch (e) {}
+          });
+          // private event: your played card was blocked (e.g., by a totem)
+          socket.on("card:play_blocked:private", (data) => {
+            try {
+              log("recv card:play_blocked:private", data);
+              const msg =
+                (data && data.message) ||
+                "Votre carte a été annulée par un effet.";
+              // show a toast and also log in the side log
+              showToast(msg, { background: "rgba(200,60,60,0.95)" });
+              if (logEl) {
+                log("notification:", msg);
+              }
+            } catch (e) {
+              console.warn("card:play_blocked:private handler error", e);
+            }
+          });
+          // generic notification channel for targeted messages
+          socket.on("notification", (data) => {
+            try {
+              log("recv notification", data);
+              const msg =
+                data && data.message
+                  ? data.message
+                  : (data && data.text) || "Notification";
+              showToast(msg, { background: "rgba(40,40,40,0.95)" });
+            } catch (e) {
+              console.warn("notification handler error", e);
+            }
+          });
+          // selection events (include moves) broadcasted by server
+          socket.on("game:select", (data) => {
+            try {
+              const pid = data && data.playerId;
+              const square = data && data.square;
+              const moves = data && data.moves;
+              log("recv game:select", {
+                pid,
+                square,
+                moves: Array.isArray(moves) ? moves.length : moves,
+              });
+              // cleared selection
+              if (!square) {
+                if (pid === myPlayerId) {
+                  // our selection cleared (maybe by reconnection) - clear locally without re-emitting
+                  clearSelection(false);
+                } else {
+                  if (pid) {
+                    clearRemoteSelection(pid);
+                  }
+                }
+                return;
+              }
+
+              if (pid === myPlayerId) {
+                // re-apply local selection (don't emit) and show markers
+                setSelection(square, false);
+                if (Array.isArray(moves) && moves.length) showLegalMoves(moves);
+                else clearLegalMarkers();
+              } else {
+                // remote player's selection
+                if (pid) setRemoteSelection(pid, square);
+                if (Array.isArray(moves) && moves.length) {
+                  remoteMoves[pid] = moves;
+                  showRemoteLegalMoves(pid, moves);
+                } else {
+                  remoteMoves[pid] = [];
+                  if (pid) clearRemoteMoveMarkers(pid);
+                }
+              }
+            } catch (e) {
+              console.warn("game:select handler error", e);
+            }
+          });
+
+          socket.on("move:moved", (data) => {
+            try {
+              log("recv move:moved", data && { from: data.from, to: data.to });
+              // clear any local selection (move completed) before re-render
+              clearSelection(false);
+              if (data && data.boardState)
+                renderBoardFromState(data.boardState);
+              if (data && data.boardState) updateTurnBanner(data.boardState);
+            } catch (e) {
+              console.warn("move:moved handler error", e);
+            }
+          });
+
+          // mine detonation: show explosion animation at the square and remove local mine visual immediately
+          socket.on("mine:detonated", (evt) => {
+            try {
+              log("recv mine:detonated", evt);
+              // evt.square is algebraic name like 'e4'
+              if (evt && evt.square) showExplosionAt(evt.square);
+              // remove any mine image/dot at that square (owner will get updated minesOwn via room:update)
+              try {
+                const sqEl =
+                  boardEl &&
+                  boardEl.querySelector &&
+                  boardEl.querySelector(`.square[data-square="${evt.square}"]`);
+                if (sqEl) {
+                  const img = sqEl.querySelector(".mine-img");
+                  if (img) img.remove();
+                  const dot = sqEl.querySelector(".mine-dot");
+                  if (dot) dot.remove();
+                }
+              } catch (_) {}
+            } catch (e) {
+              console.warn("mine:detonated handler error", e);
+            }
+          });
+
+          // private detonation info for the mine owner (optional handling)
+          socket.on("mine:detonated:private", (evt) => {
+            try {
+              log(
+                "recv mine:detonated:private",
+                evt,
+              ); /* could show owner-specific UI later */
+            } catch (e) {}
+          });
+
+          socket.emit("room:join", { roomId, playerId }, (resp) => {
+            if (resp && resp.error) {
+              log("join error", resp);
+              showToast(resp.message || resp.error, {
+                background: "rgba(200,60,60,0.95)",
+              });
+              return;
+            }
+            log("Rejoint room", resp);
+            // remember assigned id/color from server
+            if (resp.playerId) {
+              myPlayerId = resp.playerId;
+              if (playerIdEl) playerIdEl.textContent = resp.playerId;
+            }
+            if (resp.color) {
+              myColor = resp.color;
+              if (myColorEl) myColorEl.textContent = myColor;
+              // orient board for black
+              if (boardEl) {
+                if (myColor === "black") boardEl.classList.add("flipped");
+                else boardEl.classList.remove("flipped");
+              }
+            }
+          });
+        }
+
+        connectAndJoin();
+
+        function updateTurnBanner(boardState) {
+          const banner = document.getElementById("turnBanner");
+          if (!banner) return;
+          if (!boardState || !boardState.turn || !myColor) {
+            banner.classList.remove("show");
             return;
           }
-
-          if(pid === myPlayerId){
-            // re-apply local selection (don't emit) and show markers
-            setSelection(square, false);
-            if(Array.isArray(moves) && moves.length) showLegalMoves(moves);
-            else clearLegalMarkers();
+          // myColor is 'white' or 'black', boardState.turn is 'w' or 'b'
+          const myShort = (myColor && myColor[0]) || "";
+          if (myShort === boardState.turn) {
+            banner.textContent = "C'est à vous de jouer";
+            banner.classList.add("show");
           } else {
-            // remote player's selection
-              if(pid) setRemoteSelection(pid, square);
-            if(Array.isArray(moves) && moves.length){
-              remoteMoves[pid] = moves;
-              showRemoteLegalMoves(pid, moves);
-            } else {
-              remoteMoves[pid] = [];
-              if(pid) clearRemoteMoveMarkers(pid);
-            }
-          }
-        }catch(e){ console.warn('game:select handler error', e); }
-      });
-
-      socket.on('move:moved', (data) => {
-        try{
-          log('recv move:moved', data && { from: data.from, to: data.to });
-          // clear any local selection (move completed) before re-render
-          clearSelection(false);
-          if(data && data.boardState) renderBoardFromState(data.boardState);
-          if(data && data.boardState) updateTurnBanner(data.boardState);
-        }catch(e){ console.warn('move:moved handler error', e); }
-      });
-
-      // mine detonation: show explosion animation at the square and remove local mine visual immediately
-      socket.on('mine:detonated', (evt) => {
-        try{
-          log('recv mine:detonated', evt);
-          // evt.square is algebraic name like 'e4'
-          if(evt && evt.square) showExplosionAt(evt.square);
-          // remove any mine image/dot at that square (owner will get updated minesOwn via room:update)
-          try{
-            const sqEl = boardEl && boardEl.querySelector && boardEl.querySelector(`.square[data-square="${evt.square}"]`);
-            if(sqEl){ const img = sqEl.querySelector('.mine-img'); if(img) img.remove(); const dot = sqEl.querySelector('.mine-dot'); if(dot) dot.remove(); }
-          }catch(_){ }
-        }catch(e){ console.warn('mine:detonated handler error', e); }
-      });
-
-      // private detonation info for the mine owner (optional handling)
-      socket.on('mine:detonated:private', (evt) => {
-        try{ log('recv mine:detonated:private', evt); /* could show owner-specific UI later */ }catch(e){}
-      });
-
-    socket.emit('room:join', { roomId, playerId }, (resp)=>{
-  if(resp && resp.error){ log('join error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); return; }
-        log('Rejoint room', resp);
-        // remember assigned id/color from server
-        if(resp.playerId){
-          myPlayerId = resp.playerId;
-          if(playerIdEl) playerIdEl.textContent = resp.playerId;
-        }
-        if(resp.color){
-          myColor = resp.color;
-          if(myColorEl) myColorEl.textContent = myColor;
-          // orient board for black
-          if(boardEl){
-            if(myColor === 'black') boardEl.classList.add('flipped');
-            else boardEl.classList.remove('flipped');
+            banner.textContent = "En attente du coup de l'adversaire";
+            banner.classList.add("show");
           }
         }
-      });
-    }
-
-    connectAndJoin();
-
-      function updateTurnBanner(boardState){
-        const banner = document.getElementById('turnBanner');
-        if(!banner) return;
-        if(!boardState || !boardState.turn || !myColor){
-          banner.classList.remove('show');
-          return;
-        }
-        // myColor is 'white' or 'black', boardState.turn is 'w' or 'b'
-        const myShort = (myColor && myColor[0]) || '';
-        if(myShort === boardState.turn){
-          banner.textContent = "C'est à vous de jouer";
-          banner.classList.add('show');
-        } else {
-          banner.textContent = "En attente du coup de l'adversaire";
-          banner.classList.add('show');
-        }
-      }
 
         // Show the end-of-game modal with a helpful message and actions
-        function showGameOver(data){
-          try{
-            const modal = document.getElementById('gameOverModal');
-            const title = document.getElementById('gameOverTitle');
-            const msg = document.getElementById('gameOverMessage');
-            const close = document.getElementById('gameOverClose');
-            const reload = document.getElementById('gameOverReload');
-            if(!modal || !title || !msg) return;
+        function showGameOver(data) {
+          try {
+            const modal = document.getElementById("gameOverModal");
+            const title = document.getElementById("gameOverTitle");
+            const msg = document.getElementById("gameOverMessage");
+            const close = document.getElementById("gameOverClose");
+            const reload = document.getElementById("gameOverReload");
+            if (!modal || !title || !msg) return;
             // determine outcome
-            if(data && data.draw){
-              title.textContent = 'Égalité';
-              msg.textContent = 'La partie est terminée: aucun roi n\'est en jeu.';
-            } else if(data && data.winnerId){
-              const youAreWinner = (myPlayerId && data.winnerId && myPlayerId === data.winnerId);
-              if(youAreWinner){ title.textContent = 'Victoire 🎉'; msg.textContent = 'Félicitations — vous avez gagné !'; }
-              else { title.textContent = 'Défaite'; msg.textContent = 'Vous avez perdu — l\'adversaire a conservé son roi.'; }
-            } else if(data && data.winnerColor){
+            if (data && data.draw) {
+              title.textContent = "Égalité";
+              msg.textContent =
+                "La partie est terminée: aucun roi n'est en jeu.";
+            } else if (data && data.winnerId) {
+              const youAreWinner =
+                myPlayerId && data.winnerId && myPlayerId === data.winnerId;
+              if (youAreWinner) {
+                title.textContent = "Victoire 🎉";
+                msg.textContent = "Félicitations — vous avez gagné !";
+              } else {
+                title.textContent = "Défaite";
+                msg.textContent =
+                  "Vous avez perdu — l'adversaire a conservé son roi.";
+              }
+            } else if (data && data.winnerColor) {
               // fallback: present color-based message
               const youWin = myColor && myColor[0] === data.winnerColor;
-              if(youWin){ title.textContent = 'Victoire 🎉'; msg.textContent = 'Félicitations — vous avez gagné !'; }
-              else { title.textContent = 'Défaite'; msg.textContent = 'Vous avez perdu — l\'adversaire a gagné.'; }
+              if (youWin) {
+                title.textContent = "Victoire 🎉";
+                msg.textContent = "Félicitations — vous avez gagné !";
+              } else {
+                title.textContent = "Défaite";
+                msg.textContent = "Vous avez perdu — l'adversaire a gagné.";
+              }
             } else {
-              title.textContent = 'Partie terminée';
-              msg.textContent = 'La partie est terminée.';
+              title.textContent = "Partie terminée";
+              msg.textContent = "La partie est terminée.";
             }
-            modal.style.display = 'flex';
+            modal.style.display = "flex";
             // disable interactions with board by adding an overlay class (optionally style via CSS)
-            if(boardEl) boardEl.classList.add('disabled-during-gameover');
+            if (boardEl) boardEl.classList.add("disabled-during-gameover");
             // wire actions: stay (close modal) or quit (leave room and go back to index)
-            close.onclick = ()=>{ 
-              modal.style.display = 'none'; 
-              try{ if(boardEl) boardEl.classList.remove('disabled-during-gameover'); }catch(_){ }
+            close.onclick = () => {
+              modal.style.display = "none";
+              try {
+                if (boardEl)
+                  boardEl.classList.remove("disabled-during-gameover");
+              } catch (_) {}
               // mark that this user stayed to spectate and show a persistent Quit button
-              try{ isSpectating = true; createSpectatorQuitButton(); }catch(_){ }
+              try {
+                isSpectating = true;
+                createSpectatorQuitButton();
+              } catch (_) {}
             };
-            reload.onclick = ()=>{
-              try{
+            reload.onclick = () => {
+              try {
                 // try to inform server that we voluntarily leave the room, then navigate away
-                if(socket && socket.connected){
-                  socket.emit('room:leave', { roomId }, (resp)=>{
-                    try{ window.location.href = '/'; }catch(_){ window.location.reload(); }
+                if (socket && socket.connected) {
+                  socket.emit("room:leave", { roomId }, (resp) => {
+                    try {
+                      window.location.href = "/";
+                    } catch (_) {
+                      window.location.reload();
+                    }
                   });
                 } else {
-                  window.location.href = '/';
+                  window.location.href = "/";
                 }
-              }catch(e){ try{ window.location.href = '/'; }catch(_){ window.location.reload(); } }
+              } catch (e) {
+                try {
+                  window.location.href = "/";
+                } catch (_) {
+                  window.location.reload();
+                }
+              }
             };
-          }catch(e){ console.warn('showGameOver error', e); }
+          } catch (e) {
+            console.warn("showGameOver error", e);
+          }
         }
 
         // create a persistent 'Quitter' button for spectators (appears when user chose to stay)
-        function createSpectatorQuitButton(){
-          try{
+        function createSpectatorQuitButton() {
+          try {
             removeSpectatorQuitButton(); // ensure only one
-            const btn = document.createElement('button');
-            btn.id = 'spectatorQuitBtn';
-            btn.textContent = 'Quitter la partie';
-            btn.style.position = 'fixed';
-            btn.style.right = '18px';
-            btn.style.bottom = '18px';
+            const btn = document.createElement("button");
+            btn.id = "spectatorQuitBtn";
+            btn.textContent = "Quitter la partie";
+            btn.style.position = "fixed";
+            btn.style.right = "18px";
+            btn.style.bottom = "18px";
             btn.style.zIndex = 9999;
-            btn.style.padding = '10px 12px';
-            btn.style.borderRadius = '8px';
-            btn.style.border = '0';
-            btn.style.background = 'linear-gradient(90deg,#ff7a59,#ffb199)';
-            btn.style.color = '#fff';
-            btn.style.cursor = 'pointer';
-            btn.onclick = ()=>{
-              try{
-                if(socket && socket.connected){
-                  socket.emit('room:leave', { roomId }, (resp)=>{ try{ window.location.href = '/'; }catch(_){ window.location.reload(); } });
-                } else { window.location.href = '/'; }
-              }catch(e){ try{ window.location.href = '/'; }catch(_){ window.location.reload(); } }
+            btn.style.padding = "10px 12px";
+            btn.style.borderRadius = "8px";
+            btn.style.border = "0";
+            btn.style.background = "linear-gradient(90deg,#ff7a59,#ffb199)";
+            btn.style.color = "#fff";
+            btn.style.cursor = "pointer";
+            btn.onclick = () => {
+              try {
+                if (socket && socket.connected) {
+                  socket.emit("room:leave", { roomId }, (resp) => {
+                    try {
+                      window.location.href = "/";
+                    } catch (_) {
+                      window.location.reload();
+                    }
+                  });
+                } else {
+                  window.location.href = "/";
+                }
+              } catch (e) {
+                try {
+                  window.location.href = "/";
+                } catch (_) {
+                  window.location.reload();
+                }
+              }
             };
             document.body.appendChild(btn);
-          }catch(e){ console.warn('createSpectatorQuitButton error', e); }
-        }
-
-        function removeSpectatorQuitButton(){
-          try{ const existing = document.getElementById('spectatorQuitBtn'); if(existing) existing.remove(); isSpectating = false; }catch(_){ }
-        }
-
-    // movement UI removed: legalMoves and move markers are disabled
-
-    // selection helpers (client-side)
-    function clearSelection(emit = true){
-      if(selectedSquareEl){
-        selectedSquareEl.classList.remove('selected');
-        selectedSquareEl.classList.remove('hide-selection');
-      }
-      selectedSquare = null;
-      selectedSquareEl = null;
-      const fromEl = document.getElementById('from');
-      if(fromEl) fromEl.value = '';
-      // notify others that we cleared selection
-      if(emit && socket && myPlayerId){
-        socket.emit('game:select', { roomId, square: null }, ()=>{});
-      }
-      // clear any shown legal-move markers
-      if(boardEl) clearLegalMarkers();
-    }
-
-    function setSelection(squareName, emit = true){
-      if(!squareName) return clearSelection(emit);
-      if(selectedSquareEl) selectedSquareEl.classList.remove('selected');
-      // clear any existing markers immediately (so selecting a piece with no moves removes old markers)
-      clearLegalMarkers();
-      const sqEl = boardEl.querySelector(`.square[data-square="${squareName}"]`);
-      if(!sqEl){ selectedSquare = null; selectedSquareEl = null; return; }
-      selectedSquare = squareName;
-      selectedSquareEl = sqEl;
-  sqEl.classList.add('selected');
-  // hide the square selection outline while keeping the piece
-  sqEl.classList.add('hide-selection');
-      const fromEl = document.getElementById('from');
-      if(fromEl) fromEl.value = squareName;
-      // notify others of our selection
-      if(emit && socket && myPlayerId){
-        socket.emit('game:select', { roomId, square: squareName }, ()=>{});
-      }
-      // legal moves will be provided by server via the 'game:select' event
-    }
-
-    // show markers for legal moves when clicking any square (any piece color)
-    function clearLegalMarkers(){
-      if(!boardEl) return;
-      const prev = boardEl.querySelectorAll('.move-marker');
-      prev.forEach(p=>p.remove());
-    }
-
-    function showLegalMoves(moves){
-      clearLegalMarkers();
-      (moves||[]).forEach(m => {
-        const to = m.to || (m.move && m.move.to);
-        if(!to) return;
-        const target = boardEl.querySelector(`.square[data-square="${to}"]`);
-        if(!target) return;
-        // do not show legal-move markers on squares that are veiled/hidden
-        try{
-          if(Array.isArray(currentVeiledSquares) && currentVeiledSquares.indexOf(to) !== -1) return;
-          if(target.classList && target.classList.contains('veiled')) return;
-        }catch(_){ }
-        const marker = document.createElement('div');
-        marker.className = 'move-marker';
-        // store metadata if needed later
-        marker.dataset.from = m.from || '';
-        marker.dataset.to = to;
-        target.appendChild(marker);
-      });
-    }
-
-    // remote move markers: attach remoteBy and allow clearing per player
-    function showRemoteLegalMoves(playerId, moves){
-      clearRemoteMoveMarkers(playerId);
-      (moves||[]).forEach(m => {
-        const to = m.to || (m.move && m.move.to);
-        if(!to) return;
-        const target = boardEl.querySelector(`.square[data-square="${to}"]`);
-        if(!target) return;
-        // do not show remote move markers on veiled/hidden squares
-        try{
-          if(Array.isArray(currentVeiledSquares) && currentVeiledSquares.indexOf(to) !== -1) return;
-          if(target.classList && target.classList.contains('veiled')) return;
-        }catch(_){ }
-        const marker = document.createElement('div');
-        marker.className = 'move-marker';
-        marker.dataset.from = m.from || '';
-        marker.dataset.to = to;
-        marker.dataset.remoteBy = playerId;
-        target.appendChild(marker);
-      });
-    }
-
-    function clearRemoteMoveMarkers(playerId){
-      if(!boardEl) return;
-      const prev = boardEl.querySelectorAll(`.move-marker[data-remote-by="${playerId}"]`);
-      prev.forEach(p=>p.remove());
-    }
-
-    // remote selection helpers: mark a square as selected by another player
-    function setRemoteSelection(playerId, squareName){
-      // clear previous for that player
-      clearRemoteSelection(playerId);
-      const sqEl = boardEl.querySelector(`.square[data-square="${squareName}"]`);
-      if(!sqEl) return;
-      remoteSelections[playerId] = squareName;
-      sqEl.classList.add('selected-remote');
-      // hide the square selection outline for remote selection as well
-      sqEl.classList.add('hide-selection');
-      sqEl.dataset.selectedBy = playerId;
-    }
-
-    function clearRemoteSelection(playerId){
-      const prev = remoteSelections[playerId];
-      if(!prev) return;
-      const prevEl = boardEl.querySelector(`.square[data-square="${prev}"]`);
-      if(prevEl){
-        prevEl.classList.remove('selected-remote');
-        delete prevEl.dataset.selectedBy;
-        prevEl.classList.remove('hide-selection');
-      }
-      delete remoteSelections[playerId];
-      // also clear remote move markers
-      clearRemoteMoveMarkers(playerId);
-      delete remoteMoves[playerId];
-    }
-
-    if(boardEl){
-      boardEl.addEventListener('click', (ev)=>{
-          const sqEl = ev.target.closest && ev.target.closest('.square');
-          if(!sqEl) return;
-          const square = sqEl.getAttribute('data-square');
-          if(!square) return;
-
-          // Do not allow interacting with veiled/hidden squares.
-          // `currentVeiledSquares` is populated from server `room:update` and
-          // we also add a `.veiled` class during rendering as a fallback.
-          try{
-            if(Array.isArray(currentVeiledSquares) && currentVeiledSquares.indexOf(square) !== -1){
-              log('clicked veiled square, ignoring');
-              return;
-            }
-            if(sqEl.classList && sqEl.classList.contains('veiled')){ log('clicked veiled square (DOM class), ignoring'); return; }
-          }catch(_){ }
-
-        // If we're in a pending card-targeting mode, handle target selection and do NOT attempt moves
-        if(pendingCard){
-          const req = pendingCard.requireType; // 'empty' | 'owned' | 'owned_pawn' | 'enemy' | 'own_then_enemy' | 'enemy_queen'
-          const myShort = (myColor && myColor[0]) || '';
-          // handle two-step selection for cards like 'inversion'
-          if(req === 'own_then_enemy'){
-            // first select one of your own pieces
-            if(!pendingCard.firstTarget){
-              const piece = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
-              if(!piece || piece.color !== myShort){ log('select one of your pieces (first)'); return; }
-              if(piece.type && piece.type.toLowerCase() === 'k'){ log('cannot select king'); return; }
-              // store first selection and highlight enemy pieces
-              pendingCard.firstTarget = square;
-              highlightTargets('enemy');
-              // mark visually the chosen source (temporary)
-              try{ const el = boardEl.querySelector(`.square[data-square="${square}"]`); if(el) el.classList.add('target-chosen'); }catch(_){ }
-              log('First piece selected for inversion:', square);
-              return;
-            }
-            // second selection: enemy piece to swap with
-            const occ = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
-            if(!occ || occ.color === myShort){ log('select an enemy piece (second)'); return; }
-            // emit swap payload: sourceSquare + targetSquare
-            emitCardPlay({ roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { sourceSquare: pendingCard.firstTarget, targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-              else { log('inversion played', resp); }
-            });
-            // cleanup visuals
-            try{ const el = boardEl.querySelector(`.square[data-square="${pendingCard.firstTarget}"]`); if(el) el.classList.remove('target-chosen'); }catch(_){ }
-            pendingCard = null; clearTargetHighlights(); return;
+          } catch (e) {
+            console.warn("createSpectatorQuitButton error", e);
           }
-          if(req === 'empty'){
-            const occupied = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
-            if(occupied){ log('square not empty for mine placement'); return; }
-            // send mine placement
-            emitCardPlay({ roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-              else { log('card played with target', resp); }
-            });
-            pendingCard = null; clearTargetHighlights(); return;
-          } else if(req === 'owned'){
-            const piece = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
-            if(!piece || piece.color !== myShort){ log('select one of your pieces'); return; }
-            if(piece.type && piece.type.toLowerCase() === 'k'){ log('cannot select king'); return; }
-      emitCardPlay({ roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-        if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-        else { log('card played with target', resp); }
-      });
-            pendingCard = null; clearTargetHighlights(); return;
-          } else if(req === 'owned_pawn'){
-            // must be one of your pawns — show promotion choice modal before sending
-            const piece = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
-            if(!piece || piece.color !== myShort || !piece.type || piece.type.toLowerCase() !== 'p'){
-              log('select one of your pawns for promotion'); return;
-            }
-            // show promotion UI; when the player picks a piece type, emit the card:play with payload.promotion
-            showPromotionModal(square, (promotionChoice)=>{
-              if(!promotionChoice) {
-                // canceled
-                pendingCard = null; clearTargetHighlights(); return;
-              }
-              emitCardPlay({ roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square, promotion: promotionChoice } }, (resp)=>{
-                if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-                else { log('card played with promotion', resp); }
-              });
-              pendingCard = null; clearTargetHighlights();
-            });
+        }
+
+        function removeSpectatorQuitButton() {
+          try {
+            const existing = document.getElementById("spectatorQuitBtn");
+            if (existing) existing.remove();
+            isSpectating = false;
+          } catch (_) {}
+        }
+
+        // movement UI removed: legalMoves and move markers are disabled
+
+        // selection helpers (client-side)
+        function clearSelection(emit = true) {
+          if (selectedSquareEl) {
+            selectedSquareEl.classList.remove("selected");
+            selectedSquareEl.classList.remove("hide-selection");
+          }
+          selectedSquare = null;
+          selectedSquareEl = null;
+          const fromEl = document.getElementById("from");
+          if (fromEl) fromEl.value = "";
+          // notify others that we cleared selection
+          if (emit && socket && myPlayerId) {
+            socket.emit("game:select", { roomId, square: null }, () => {});
+          }
+          // clear any shown legal-move markers
+          if (boardEl) clearLegalMarkers();
+        }
+
+        function setSelection(squareName, emit = true) {
+          if (!squareName) return clearSelection(emit);
+          if (selectedSquareEl) selectedSquareEl.classList.remove("selected");
+          // clear any existing markers immediately (so selecting a piece with no moves removes old markers)
+          clearLegalMarkers();
+          const sqEl = boardEl.querySelector(
+            `.square[data-square="${squareName}"]`,
+          );
+          if (!sqEl) {
+            selectedSquare = null;
+            selectedSquareEl = null;
             return;
-          } else if(req === 'enemy'){
-            const occ = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
-            if(!occ || occ.color === myShort){ log('select an enemy piece'); return; }
-            if(occ.type && occ.type.toLowerCase() === 'k'){ log('cannot select king'); return; }
-            emitCardPlay({ roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-              else { log('card played with target', resp);
-                // after server applied the card effect, request legal moves for the selected piece so the client
-                // will receive the updated legal moves (including teleport to empty squares)
-                try{ setSelection(square); }catch(_){ }
-              }
-            });
-            // keep pendingCard until server response processed (client will call setSelection on success)
-            pendingCard = null; clearTargetHighlights(); return;
           }
-          else if(req === 'enemy_queen'){
-            const occ = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
-            if(!occ || occ.color === myShort || !occ.type || occ.type.toLowerCase() !== 'q'){ log('select an enemy queen'); return; }
-            emitCardPlay({ roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-              else { log('card played with target', resp);
-                try{ setSelection(square); }catch(_){ }
-              }
-            });
-            pendingCard = null; clearTargetHighlights(); return;
-          }
-          else if(req === 'piece'){
-            const occ = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p => p.square === square);
-            if(!occ){ log('select a piece'); return; }
-            if(occ.type && occ.type.toLowerCase() === 'k'){ log('cannot select king'); return; }
-            emitCardPlay({ roomId, playerId: myPlayerId, cardId: pendingCard.cardId, payload: { targetSquare: square } }, (resp)=>{
-              if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-              else { log('card played with target', resp); }
-            });
-            pendingCard = null; clearTargetHighlights(); return;
+          selectedSquare = squareName;
+          selectedSquareEl = sqEl;
+          sqEl.classList.add("selected");
+          // hide the square selection outline while keeping the piece
+          sqEl.classList.add("hide-selection");
+          const fromEl = document.getElementById("from");
+          if (fromEl) fromEl.value = squareName;
+          // notify others of our selection
+          if (emit && socket && myPlayerId) {
+            socket.emit(
+              "game:select",
+              { roomId, square: squareName },
+              () => {},
+            );
           }
+          // legal moves will be provided by server via the 'game:select' event
         }
 
-        // If this square contains a move-marker (either clicked marker or square area), attempt the move.
-        // Prefer the actual clicked marker if present, otherwise look for a marker element inside the square.
-        const clickedMarker = ev.target.closest && ev.target.closest('.move-marker');
-        const marker = clickedMarker || sqEl.querySelector('.move-marker');
-        if(marker){
-          // ignore remote player's markers
-          const remoteBy = marker.dataset && marker.dataset.remoteBy;
-          if(remoteBy && remoteBy !== myPlayerId){ log('marker belongs to remote player, ignoring'); return; }
-          const to = marker.dataset && marker.dataset.to;
-          const from = marker.dataset && marker.dataset.from ? marker.dataset.from : selectedSquare;
-          if(!to || !from){ log('invalid marker metadata', { from, to }); return; }
-          // only allow if it's our turn
-          const myShort = (myColor && myColor[0]) || '';
-          if(!currentBoardState || currentBoardState.turn !== myShort){ log('not your turn'); return; }
-          socket.emit('game:move', { roomId, from, to }, (resp)=>{
-            if(resp && resp.error){ log('move error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-            else { log('move sent', resp); }
-          });
-          return;
+        // show markers for legal moves when clicking any square (any piece color)
+        function clearLegalMarkers() {
+          if (!boardEl) return;
+          const prev = boardEl.querySelectorAll(".move-marker");
+          prev.forEach((p) => p.remove());
         }
 
-        // clicked a piece -> select it (no legal moves requested)
-        const pieceImg = ev.target.closest && ev.target.closest('img.piece');
-        if(pieceImg){
-          setSelection(square);
-          return;
-        }
-
-        // default: clicked empty square -> select it (toggle)
-        if(selectedSquare === square){
-          clearSelection();
-        } else {
-          setSelection(square);
-        }
-      });
-    }
-
-    // move button removed
-
-    // Board rendering using provided SVG assets and `boardState` JSON.
-    const pieceSetPath = '/assets/chess-pieces/chess_maestro_bw';
-  // board visual defaults are handled by CSS (background, size, border, position)
-
-    function renderBoardFromState(boardState){
-      if(!boardState) return;
-      // cache boardState for client-side checks (turn etc.)
-      currentBoardState = boardState;
-      // clear existing pieces but keep squares if present
-      const squares = boardEl.querySelectorAll('.square');
-      squares.forEach(s=> s.innerHTML = '');
-
-      // place pieces according to boardState.pieces (expects algebraic square names)
-      (boardState.pieces || []).forEach(p => {
-        const squareName = p.square;
-        if(!squareName) return;
-        const sqEl = boardEl.querySelector(`.square[data-square="${squareName}"]`);
-        if(!sqEl) return;
-        const letter = p.type ? p.type.toUpperCase() : '?';
-        const filename = (p.color === 'w' ? 'w' + letter : 'b' + letter) + '.svg';
-        const img = document.createElement('img');
-        img.src = `${pieceSetPath}/${filename}`;
-        img.className = 'piece';
-        sqEl.appendChild(img);
-      });
-
-      // re-apply selection if the previously selected square still exists
-      if(selectedSquare){
-        // re-apply local selection without re-emitting
-        setSelection(selectedSquare, false);
-      }
-      // re-apply remote selections
-      Object.entries(remoteSelections).forEach(([pid, sq]) => {
-        const el = boardEl.querySelector(`.square[data-square="${sq}"]`);
-        if(el){ el.classList.add('selected-remote'); el.classList.add('hide-selection'); }
-      });
-      // re-apply remote move markers
-      Object.entries(remoteMoves).forEach(([pid, moves]) => {
-        if(Array.isArray(moves) && moves.length) showRemoteLegalMoves(pid, moves);
-      });
-      // render any mines owned by this player
-      try{ renderMines(); }catch(e){ }
-      // render veils for brouillard effect (if any)
-      try{
-        // remove existing veils
-        const allSq = boardEl.querySelectorAll('.square');
-        allSq.forEach(sqEl => {
-          const v = sqEl.querySelector('.veil'); if(v) v.remove();
-          // also remove prior veiled marker class
-          try{ sqEl.classList.remove('veiled'); }catch(_){ }
-        });
-        if(Array.isArray(currentVeiledSquares) && currentVeiledSquares.length){
-          currentVeiledSquares.forEach(sq => {
-            const el = boardEl.querySelector(`.square[data-square="${sq}"]`);
-            if(!el) return;
-            const veil = document.createElement('div'); veil.className = 'veil';
-            el.appendChild(veil);
-            // add a class to hide piece images as a fallback in case z-index/stacking causes overlay issues
-            try{ 
-              el.classList.add('veiled'); 
-              // remove any move markers that may have been added previously on this square
-              const prevMarkers = el.querySelectorAll('.move-marker');
-              prevMarkers.forEach(m => m.remove());
-            }catch(_){ }
+        function showLegalMoves(moves) {
+          clearLegalMarkers();
+          (moves || []).forEach((m) => {
+            const to = m.to || (m.move && m.move.to);
+            if (!to) return;
+            const target = boardEl.querySelector(
+              `.square[data-square="${to}"]`,
+            );
+            if (!target) return;
+            // do not show legal-move markers on squares that are veiled/hidden
+            try {
+              if (
+                Array.isArray(currentVeiledSquares) &&
+                currentVeiledSquares.indexOf(to) !== -1
+              )
+                return;
+              if (target.classList && target.classList.contains("veiled"))
+                return;
+            } catch (_) {}
+            const marker = document.createElement("div");
+            marker.className = "move-marker";
+            // store metadata if needed later
+            marker.dataset.from = m.from || "";
+            marker.dataset.to = to;
+            target.appendChild(marker);
           });
         }
-      }catch(_){ }
-    }
 
-    // draw mine icons on squares for mines owned by this client
-    function renderMines(){
-      if(!boardEl) return;
-      // remove old mine markers
-      // remove old mine markers (either image or dot)
-      const prev = boardEl.querySelectorAll('.mine-dot, .mine-img');
-      prev.forEach(p=>p.remove());
-      (myMines || []).forEach(sq => {
-        const el = boardEl.querySelector(`.square[data-square="${sq}"]`);
-        if(!el) return;
-        // create an image element so the mine has a transparent background and crisp edges
-        const img = document.createElement('img');
-        img.className = 'mine-img';
-        // use a project asset (SVG) that has a transparent background
-          img.src = '/assets/img/bomb.jpg';
-          img.alt = 'mine';
-          img.onerror = function(){
-            try{ if(this.src && this.src.indexOf('bomb.jpg') === -1) this.src = '/assets/img/bomb.jpg'; }
-            catch(e){}
-          };
-        img.draggable = false;
-        // ensure container is positioned so absolute centering works
-        if(!el.style.position) el.style.position = 'relative';
-        el.appendChild(img);
-      });
-    }
-
-    // show an explosion animation centered on a square (client-side visual)
-    function showExplosionAt(square){
-      if(!boardEl || !square) return;
-      const sqEl = boardEl.querySelector(`.square[data-square="${square}"]`);
-      if(!sqEl) return;
-      // ensure container is positioned so absolute centering works
-      if(!sqEl.style.position) sqEl.style.position = 'relative';
-
-      // Try to play an authored explosion video if available; fallback to CSS explosion if not.
-      const videoPath = '/assets/media/FireElement01.mov';
-      const vid = document.createElement('video');
-      vid.className = 'explosion-video';
-      vid.src = videoPath;
-      vid.autoplay = true; vid.muted = true; vid.playsInline = true; vid.loop = false; vid.preload = 'auto';
-      vid.style.pointerEvents = 'none';
-
-      let usedVideo = false;
-      // Attach event listeners to handle success or failure
-      const cleanup = ()=>{ try{ if(vid && vid.parentNode) vid.parentNode.removeChild(vid); }catch(_){ } };
-      vid.addEventListener('canplay', ()=>{
-        // video is available and can play — use it
-        try{ sqEl.appendChild(vid); usedVideo = true; vid.play().catch(()=>{}); }
-        catch(_){ usedVideo = false; }
-      }, { once: true });
-      // if video errors (file missing or codec issue), fallback to CSS explosion
-      vid.addEventListener('error', ()=>{
-        try{ cleanup(); }catch(_){ }
-        // fallback animation
-        const ex = document.createElement('div'); ex.className = 'explosion'; sqEl.appendChild(ex);
-        requestAnimationFrame(()=> ex.classList.add('play'));
-        setTimeout(()=>{ try{ ex.remove(); }catch(_){ if(ex && ex.parentNode) ex.parentNode.removeChild(ex); } }, 700);
-      }, { once: true });
-      // If video ends, remove it
-      vid.addEventListener('ended', ()=>{ try{ cleanup(); }catch(_){ } }, { once: true });
-      // start loading — if canplay won't fire within a short time, fallback to CSS
-      vid.load();
-      // fallback timeout: if video hasn't started in 180ms, show CSS explosion instead
-      setTimeout(()=>{
-        if(!usedVideo){
-          try{ vid.pause(); if(vid && vid.parentNode) vid.parentNode.removeChild(vid); }catch(_){ }
-          const ex = document.createElement('div'); ex.className = 'explosion'; sqEl.appendChild(ex);
-          requestAnimationFrame(()=> ex.classList.add('play'));
-          setTimeout(()=>{ try{ ex.remove(); }catch(_){ if(ex && ex.parentNode) ex.parentNode.removeChild(ex); } }, 700);
+        // remote move markers: attach remoteBy and allow clearing per player
+        function showRemoteLegalMoves(playerId, moves) {
+          clearRemoteMoveMarkers(playerId);
+          (moves || []).forEach((m) => {
+            const to = m.to || (m.move && m.move.to);
+            if (!to) return;
+            const target = boardEl.querySelector(
+              `.square[data-square="${to}"]`,
+            );
+            if (!target) return;
+            // do not show remote move markers on veiled/hidden squares
+            try {
+              if (
+                Array.isArray(currentVeiledSquares) &&
+                currentVeiledSquares.indexOf(to) !== -1
+              )
+                return;
+              if (target.classList && target.classList.contains("veiled"))
+                return;
+            } catch (_) {}
+            const marker = document.createElement("div");
+            marker.className = "move-marker";
+            marker.dataset.from = m.from || "";
+            marker.dataset.to = to;
+            marker.dataset.remoteBy = playerId;
+            target.appendChild(marker);
+          });
         }
-      }, 180);
-    }
 
-    // target highlighting helpers
-    function clearTargetHighlights(){
-      if(!boardEl) return;
-      const prev = boardEl.querySelectorAll('.square.targetable');
-      prev.forEach(p=>p.classList.remove('targetable'));
-      const note = document.getElementById('pendingNote'); if(note) note.remove();
-    }
-    function highlightTargets(type){
-      if(!boardEl || !currentBoardState) return;
-      clearTargetHighlights();
-      const myShort = (myColor && myColor[0]) || '';
-      Array.from(boardEl.querySelectorAll('.square')).forEach(sqEl => {
-        const sq = sqEl.getAttribute('data-square');
-        if(!sq) return;
-        if(type === 'empty'){
-          const occ = (currentBoardState.pieces||[]).find(p=>p.square===sq);
-          if(!occ) sqEl.classList.add('targetable');
-        } else if(type === 'owned'){
-          const occ = (currentBoardState.pieces||[]).find(p=>p.square===sq);
-          if(occ && occ.color === myShort && occ.type && occ.type.toLowerCase() !== 'k') sqEl.classList.add('targetable');
-        } else if(type === 'owned_pawn'){
-          const occ = (currentBoardState.pieces||[]).find(p=>p.square===sq);
-          if(occ && occ.color === myShort && occ.type && occ.type.toLowerCase() === 'p') sqEl.classList.add('targetable');
-        } else if(type === 'own_then_enemy'){
-          // initial phase: highlight only own pieces (client will switch to enemy after first selection)
-          const occ = (currentBoardState.pieces||[]).find(p=>p.square===sq);
-          if(occ && occ.color === myShort && occ.type && occ.type.toLowerCase() !== 'k') sqEl.classList.add('targetable');
-        } else if(type === 'piece'){
-          const occ = (currentBoardState.pieces||[]).find(p=>p.square===sq);
-          if(occ && occ.type && occ.type.toLowerCase() !== 'k') sqEl.classList.add('targetable');
-        } else if(type === 'enemy_queen'){
-          const occ = (currentBoardState.pieces||[]).find(p=>p.square===sq);
-          if(occ && occ.color && occ.color !== myShort && occ.type && occ.type.toLowerCase() === 'q') sqEl.classList.add('targetable');
-        } else if(type === 'enemy'){
-          const occ = (currentBoardState.pieces||[]).find(p=>p.square===sq);
-          if(occ && occ.color && occ.color !== myShort && occ.type && occ.type.toLowerCase() !== 'k') sqEl.classList.add('targetable');
+        function clearRemoteMoveMarkers(playerId) {
+          if (!boardEl) return;
+          const prev = boardEl.querySelectorAll(
+            `.move-marker[data-remote-by="${playerId}"]`,
+          );
+          prev.forEach((p) => p.remove());
         }
-      });
-      // add a small note near hands
-      try{
-        const handsEl = document.getElementById('hands');
-        if(handsEl){
-          const note = document.createElement('div');
-          note.id = 'pendingNote';
-          note.style.marginTop = '8px';
-          note.style.display = 'flex';
-          note.style.alignItems = 'center';
-          note.style.gap = '8px';
-          const txt = document.createElement('span');
-          txt.textContent = 'Sélectionnez la case cible pour la carte...';
-          txt.style.fontWeight = '700';
-          note.appendChild(txt);
-          const cancelBtn = document.createElement('button');
-          cancelBtn.type = 'button';
-          cancelBtn.id = 'pendingCancelBtn';
-          cancelBtn.textContent = 'Annuler';
-          // use a dedicated class to ensure good contrast against the hands background
-          cancelBtn.className = 'btn-cancel';
-          cancelBtn.addEventListener('click', (ev)=>{ ev.stopPropagation(); cancelPendingCard(); });
-          note.appendChild(cancelBtn);
-          handsEl.prepend(note);
+
+        // remote selection helpers: mark a square as selected by another player
+        function setRemoteSelection(playerId, squareName) {
+          // clear previous for that player
+          clearRemoteSelection(playerId);
+          const sqEl = boardEl.querySelector(
+            `.square[data-square="${squareName}"]`,
+          );
+          if (!sqEl) return;
+          remoteSelections[playerId] = squareName;
+          sqEl.classList.add("selected-remote");
+          // hide the square selection outline for remote selection as well
+          sqEl.classList.add("hide-selection");
+          sqEl.dataset.selectedBy = playerId;
         }
-      }catch(e){}
-    }
 
-    // cancel a pending card selection (client-only)
-    function cancelPendingCard(){
-      if(!pendingCard) return;
-      pendingCard = null;
-      clearTargetHighlights();
-      log('Pending card selection annulée');
-      // remove pendingNote if present
-      const note = document.getElementById('pendingNote'); if(note) note.remove();
-    }
-
-    // build grid with independent square elements and data-square attributes
-    function buildGrid(size){
-      if(!size || size < 1) size = 8;
-      boardEl.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
-      boardEl.style.gridTemplateRows = `repeat(${size}, 1fr)`;
-      // if grid already has correct number of squares, keep them
-      const existing = boardEl.querySelectorAll('.square');
-      if(existing.length === size * size) return;
-      boardEl.innerHTML = '';
-      // create rows from rank size..1 (so that a1 is bottom-left if CSS doesn't flip)
-      for(let rank = size; rank >= 1; rank--){
-        for(let file = 0; file < size; file++){
-          const fileLetter = String.fromCharCode('a'.charCodeAt(0) + file);
-          const squareName = `${fileLetter}${rank}`;
-          const sq = document.createElement('div');
-          // color squares in checker pattern
-          const dark = ((file + rank) % 2) === 0;
-          sq.className = 'square ' + (dark ? 'dark' : 'light');
-          sq.setAttribute('data-square', squareName);
-          boardEl.appendChild(sq);
-        }
-      }
-    }
-
-    // render player's own hand and public counts for others
-    // New: render as horizontal 'pokemon-style' cards side-by-side
-    function renderHands(handsOwn, handCounts){
-      const handsEl = document.getElementById('hands');
-      if(!handsEl) return;
-      handsEl.innerHTML = '';
-
-      const wrap = document.createElement('div');
-      wrap.className = 'player-hand pokemon-hand';
-
-      const header = document.createElement('div');
-      header.className = 'pokemon-hand-header';
-      const title = document.createElement('div');
-      title.textContent = 'Vos cartes';
-      title.className = 'pokemon-hand-title';
-      header.appendChild(title);
-      wrap.appendChild(header);
-
-      const row = document.createElement('div');
-      row.className = 'cards-row';
-
-      (handsOwn || []).slice(0,10).forEach(c => {
-        const cardEl = document.createElement('div');
-        cardEl.className = 'pokemon-card';
-        cardEl.dataset.cardId = c.cardId || c.id || '';
-        cardEl.dataset.cardUuid = c.id || '';
-
-        const top = document.createElement('div'); top.className = 'pokemon-card-top';
-        const art = document.createElement('div'); art.className = 'pokemon-card-art';
-        art.textContent = '';
-        try{
-          const cid = (c.cardId || c.id || '').toString().toLowerCase();
-          const title = (c.title || '').toString().toLowerCase();
-          let imgSrc = null;
-          if(cid === 'adoubement') imgSrc = '/assets/img/cards/adoubement.png';
-          if(cid === 'folie') imgSrc = '/assets/img/cards/folie.png';
-          if(cid === 'fortification') imgSrc = '/assets/img/cards/fortification.png';
-          if(cid === 'rebond') imgSrc = '/assets/img/cards/rebond.png';
-          if(cid === 'anneau') imgSrc = '/assets/img/cards/anneau.png';
-          if(cid === 'brouillard') imgSrc = '/assets/img/cards/brouillard.png';
-          if(cid === 'coincoin') imgSrc = '/assets/img/cards/coincoin.png';
-          if(cid === 'inversion') imgSrc = '/assets/img/cards/inversion.png';
-          if(cid === 'invisible') imgSrc = '/assets/img/cards/invisible.png';
-          if(cid === 'kamikaze') imgSrc = '/assets/img/cards/kamikaz.png';
-          if(cid === 'melange') imgSrc = '/assets/img/cards/mélange.png';
-          if(cid === 'mine') imgSrc = '/assets/img/cards/mine.png';
-          if(cid === 'promotion') imgSrc = '/assets/img/cards/promotion.png';
-          if(cid === 'resurection') imgSrc = '/assets/img/cards/resurection.png';
-          if(cid === 'sniper') imgSrc = '/assets/img/cards/sniper.png';
-          if(cid === 'totem') imgSrc = '/assets/img/cards/totem.png';
-          if(cid === 'toucher') imgSrc = '/assets/img/cards/toucher.png';
-          if(cid === 'vole_piece') imgSrc = '/assets/img/cards/vole_piece.png';
-          if(cid === 'double') imgSrc = '/assets/img/cards/double.png';
-          if(cid === 'empathie') imgSrc = '/assets/img/cards/empathie.png';
-          if(cid === 'parrure') imgSrc = '/assets/img/cards/parrure.png';
-          if(cid === 'revolution') imgSrc = '/assets/img/cards/révolution.png';
-          if(cid === 'doppelganger') imgSrc = '/assets/img/cards/doppelganger.png';
-          if(cid === 'pareil') imgSrc = '/assets/img/cards/pareil.png';
-          if(cid === 'sans_effet') imgSrc = '/assets/img/cards/sans_effet.png';
-          if(cid === 'teleportation') imgSrc = '/assets/img/cards/teleportation.png';
-          if(cid === 'tout') imgSrc = '/assets/img/cards/tout.png';
-          if(cid === 'vole_carte') imgSrc = '/assets/img/cards/vole_carte.png';
-
-          if(imgSrc){
-            const img = document.createElement('img');
-            img.src = imgSrc;
-            img.alt = c.title || cid || 'card';
-            img.className = 'card-art-img';
-            img.style.width = '100%'; img.style.height = '100%'; img.style.objectFit = 'cover';
-            art.appendChild(img);
+        function clearRemoteSelection(playerId) {
+          const prev = remoteSelections[playerId];
+          if (!prev) return;
+          const prevEl = boardEl.querySelector(
+            `.square[data-square="${prev}"]`,
+          );
+          if (prevEl) {
+            prevEl.classList.remove("selected-remote");
+            delete prevEl.dataset.selectedBy;
+            prevEl.classList.remove("hide-selection");
           }
-        }catch(e){ /* ignore artwork errors */ }
-        top.appendChild(art);
+          delete remoteSelections[playerId];
+          // also clear remote move markers
+          clearRemoteMoveMarkers(playerId);
+          delete remoteMoves[playerId];
+        }
 
-        const mid = document.createElement('div'); mid.className = 'pokemon-card-mid';
-        const h = document.createElement('div'); h.className = 'pokemon-card-title'; h.textContent = c.title || c.cardId || 'Carte';
-        const p = document.createElement('div'); p.className = 'pokemon-card-desc'; p.textContent = c.description || '';
-        mid.appendChild(h); mid.appendChild(p);
+        if (boardEl) {
+          boardEl.addEventListener("click", (ev) => {
+            const sqEl = ev.target.closest && ev.target.closest(".square");
+            if (!sqEl) return;
+            const square = sqEl.getAttribute("data-square");
+            if (!square) return;
 
-        const footer = document.createElement('div'); footer.className = 'pokemon-card-footer';
-        const playBtn = document.createElement('button'); playBtn.className = 'card-play-btn'; playBtn.textContent = 'Jouer';
-        footer.appendChild(playBtn);
-
-        cardEl.appendChild(top);
-        cardEl.appendChild(mid);
-        cardEl.appendChild(footer);
-
-        // clicking the whole card or the play button emits card:play
-        function emitPlay(){
-          if(!socket) return;
-          const cid = cardEl.dataset.cardId;
-          // try cardId first, then fall back to the human title (helps with accented ids like "Téléportation")
-          const requireType = cardRequiresTarget(cid) || cardRequiresTarget(c.title || '');
-          if(requireType){
-            if(requireType === 'player'){
-              // If there's only one opponent, auto-select them (no modal needed). Otherwise show modal.
-              const opponents = Object.keys(handCounts || {}).filter(pid => pid !== myPlayerId);
-              if(opponents.length === 1){
-                const targetPlayerId = opponents[0];
-                emitCardPlay({ roomId, playerId: myPlayerId, cardId: cid, payload: { targetPlayerId } }, (resp)=>{
-                      if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-                      else { log('card played (steal card)', resp); }
-                    });
+            // Do not allow interacting with veiled/hidden squares.
+            // `currentVeiledSquares` is populated from server `room:update` and
+            // we also add a `.veiled` class during rendering as a fallback.
+            try {
+              if (
+                Array.isArray(currentVeiledSquares) &&
+                currentVeiledSquares.indexOf(square) !== -1
+              ) {
+                log("clicked veiled square, ignoring");
                 return;
               }
-              // show modal to pick which player to steal from
-                showStealModal(handCounts, (targetPlayerId)=>{
-                if(!targetPlayerId) return; // canceled
-                emitCardPlay({ roomId, playerId: myPlayerId, cardId: cid, payload: { targetPlayerId } }, (resp)=>{
-                  if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-                  else { log('card played (steal card)', resp); }
+              if (sqEl.classList && sqEl.classList.contains("veiled")) {
+                log("clicked veiled square (DOM class), ignoring");
+                return;
+              }
+            } catch (_) {}
+
+            // If we're in a pending card-targeting mode, handle target selection and do NOT attempt moves
+            if (pendingCard) {
+              const req = pendingCard.requireType; // 'empty' | 'owned' | 'owned_pawn' | 'enemy' | 'own_then_enemy' | 'enemy_queen'
+              const myShort = (myColor && myColor[0]) || "";
+              // handle two-step selection for cards like 'inversion'
+              if (req === "own_then_enemy") {
+                // first select one of your own pieces
+                if (!pendingCard.firstTarget) {
+                  const piece =
+                    currentBoardState &&
+                    Array.isArray(currentBoardState.pieces) &&
+                    currentBoardState.pieces.find((p) => p.square === square);
+                  if (!piece || piece.color !== myShort) {
+                    log("select one of your pieces (first)");
+                    return;
+                  }
+                  if (piece.type && piece.type.toLowerCase() === "k") {
+                    log("cannot select king");
+                    return;
+                  }
+                  // store first selection and highlight enemy pieces
+                  pendingCard.firstTarget = square;
+                  highlightTargets("enemy");
+                  // mark visually the chosen source (temporary)
+                  try {
+                    const el = boardEl.querySelector(
+                      `.square[data-square="${square}"]`,
+                    );
+                    if (el) el.classList.add("target-chosen");
+                  } catch (_) {}
+                  log("First piece selected for inversion:", square);
+                  return;
+                }
+                // second selection: enemy piece to swap with
+                const occ =
+                  currentBoardState &&
+                  Array.isArray(currentBoardState.pieces) &&
+                  currentBoardState.pieces.find((p) => p.square === square);
+                if (!occ || occ.color === myShort) {
+                  log("select an enemy piece (second)");
+                  return;
+                }
+                // emit swap payload: sourceSquare + targetSquare
+                emitCardPlay(
+                  {
+                    roomId,
+                    playerId: myPlayerId,
+                    cardId: pendingCard.cardId,
+                    payload: {
+                      sourceSquare: pendingCard.firstTarget,
+                      targetSquare: square,
+                    },
+                  },
+                  (resp) => {
+                    if (resp && resp.error) {
+                      log("card:play error", resp);
+                      showToast(resp.message || resp.error, {
+                        background: "rgba(200,60,60,0.95)",
+                      });
+                    } else {
+                      log("inversion played", resp);
+                    }
+                  },
+                );
+                // cleanup visuals
+                try {
+                  const el = boardEl.querySelector(
+                    `.square[data-square="${pendingCard.firstTarget}"]`,
+                  );
+                  if (el) el.classList.remove("target-chosen");
+                } catch (_) {}
+                pendingCard = null;
+                clearTargetHighlights();
+                return;
+              }
+              if (req === "empty") {
+                const occupied =
+                  currentBoardState &&
+                  Array.isArray(currentBoardState.pieces) &&
+                  currentBoardState.pieces.find((p) => p.square === square);
+                if (occupied) {
+                  log("square not empty for mine placement");
+                  return;
+                }
+                // send mine placement
+                emitCardPlay(
+                  {
+                    roomId,
+                    playerId: myPlayerId,
+                    cardId: pendingCard.cardId,
+                    payload: { targetSquare: square },
+                  },
+                  (resp) => {
+                    if (resp && resp.error) {
+                      log("card:play error", resp);
+                      showToast(resp.message || resp.error, {
+                        background: "rgba(200,60,60,0.95)",
+                      });
+                    } else {
+                      log("card played with target", resp);
+                    }
+                  },
+                );
+                pendingCard = null;
+                clearTargetHighlights();
+                return;
+              } else if (req === "owned") {
+                const piece =
+                  currentBoardState &&
+                  Array.isArray(currentBoardState.pieces) &&
+                  currentBoardState.pieces.find((p) => p.square === square);
+                if (!piece || piece.color !== myShort) {
+                  log("select one of your pieces");
+                  return;
+                }
+                if (piece.type && piece.type.toLowerCase() === "k") {
+                  log("cannot select king");
+                  return;
+                }
+                emitCardPlay(
+                  {
+                    roomId,
+                    playerId: myPlayerId,
+                    cardId: pendingCard.cardId,
+                    payload: { targetSquare: square },
+                  },
+                  (resp) => {
+                    if (resp && resp.error) {
+                      log("card:play error", resp);
+                      showToast(resp.message || resp.error, {
+                        background: "rgba(200,60,60,0.95)",
+                      });
+                    } else {
+                      log("card played with target", resp);
+                    }
+                  },
+                );
+                pendingCard = null;
+                clearTargetHighlights();
+                return;
+              } else if (req === "owned_pawn") {
+                // must be one of your pawns — show promotion choice modal before sending
+                const piece =
+                  currentBoardState &&
+                  Array.isArray(currentBoardState.pieces) &&
+                  currentBoardState.pieces.find((p) => p.square === square);
+                if (
+                  !piece ||
+                  piece.color !== myShort ||
+                  !piece.type ||
+                  piece.type.toLowerCase() !== "p"
+                ) {
+                  log("select one of your pawns for promotion");
+                  return;
+                }
+                // show promotion UI; when the player picks a piece type, emit the card:play with payload.promotion
+                showPromotionModal(square, (promotionChoice) => {
+                  if (!promotionChoice) {
+                    // canceled
+                    pendingCard = null;
+                    clearTargetHighlights();
+                    return;
+                  }
+                  emitCardPlay(
+                    {
+                      roomId,
+                      playerId: myPlayerId,
+                      cardId: pendingCard.cardId,
+                      payload: {
+                        targetSquare: square,
+                        promotion: promotionChoice,
+                      },
+                    },
+                    (resp) => {
+                      if (resp && resp.error) {
+                        log("card:play error", resp);
+                        showToast(resp.message || resp.error, {
+                          background: "rgba(200,60,60,0.95)",
+                        });
+                      } else {
+                        log("card played with promotion", resp);
+                      }
+                    },
+                  );
+                  pendingCard = null;
+                  clearTargetHighlights();
                 });
+                return;
+              } else if (req === "enemy") {
+                const occ =
+                  currentBoardState &&
+                  Array.isArray(currentBoardState.pieces) &&
+                  currentBoardState.pieces.find((p) => p.square === square);
+                if (!occ || occ.color === myShort) {
+                  log("select an enemy piece");
+                  return;
+                }
+                if (occ.type && occ.type.toLowerCase() === "k") {
+                  log("cannot select king");
+                  return;
+                }
+                emitCardPlay(
+                  {
+                    roomId,
+                    playerId: myPlayerId,
+                    cardId: pendingCard.cardId,
+                    payload: { targetSquare: square },
+                  },
+                  (resp) => {
+                    if (resp && resp.error) {
+                      log("card:play error", resp);
+                      showToast(resp.message || resp.error, {
+                        background: "rgba(200,60,60,0.95)",
+                      });
+                    } else {
+                      log("card played with target", resp);
+                      // after server applied the card effect, request legal moves for the selected piece so the client
+                      // will receive the updated legal moves (including teleport to empty squares)
+                      try {
+                        setSelection(square);
+                      } catch (_) {}
+                    }
+                  },
+                );
+                // keep pendingCard until server response processed (client will call setSelection on success)
+                pendingCard = null;
+                clearTargetHighlights();
+                return;
+              } else if (req === "enemy_queen") {
+                const occ =
+                  currentBoardState &&
+                  Array.isArray(currentBoardState.pieces) &&
+                  currentBoardState.pieces.find((p) => p.square === square);
+                if (
+                  !occ ||
+                  occ.color === myShort ||
+                  !occ.type ||
+                  occ.type.toLowerCase() !== "q"
+                ) {
+                  log("select an enemy queen");
+                  return;
+                }
+                emitCardPlay(
+                  {
+                    roomId,
+                    playerId: myPlayerId,
+                    cardId: pendingCard.cardId,
+                    payload: { targetSquare: square },
+                  },
+                  (resp) => {
+                    if (resp && resp.error) {
+                      log("card:play error", resp);
+                      showToast(resp.message || resp.error, {
+                        background: "rgba(200,60,60,0.95)",
+                      });
+                    } else {
+                      log("card played with target", resp);
+                      try {
+                        setSelection(square);
+                      } catch (_) {}
+                    }
+                  },
+                );
+                pendingCard = null;
+                clearTargetHighlights();
+                return;
+              } else if (req === "piece") {
+                const occ =
+                  currentBoardState &&
+                  Array.isArray(currentBoardState.pieces) &&
+                  currentBoardState.pieces.find((p) => p.square === square);
+                if (!occ) {
+                  log("select a piece");
+                  return;
+                }
+                if (occ.type && occ.type.toLowerCase() === "k") {
+                  log("cannot select king");
+                  return;
+                }
+                emitCardPlay(
+                  {
+                    roomId,
+                    playerId: myPlayerId,
+                    cardId: pendingCard.cardId,
+                    payload: { targetSquare: square },
+                  },
+                  (resp) => {
+                    if (resp && resp.error) {
+                      log("card:play error", resp);
+                      showToast(resp.message || resp.error, {
+                        background: "rgba(200,60,60,0.95)",
+                      });
+                    } else {
+                      log("card played with target", resp);
+                    }
+                  },
+                );
+                pendingCard = null;
+                clearTargetHighlights();
+                return;
+              }
+            }
+
+            // If this square contains a move-marker (either clicked marker or square area), attempt the move.
+            // Prefer the actual clicked marker if present, otherwise look for a marker element inside the square.
+            const clickedMarker =
+              ev.target.closest && ev.target.closest(".move-marker");
+            const marker = clickedMarker || sqEl.querySelector(".move-marker");
+            if (marker) {
+              // ignore remote player's markers
+              const remoteBy = marker.dataset && marker.dataset.remoteBy;
+              if (remoteBy && remoteBy !== myPlayerId) {
+                log("marker belongs to remote player, ignoring");
+                return;
+              }
+              const to = marker.dataset && marker.dataset.to;
+              const from =
+                marker.dataset && marker.dataset.from
+                  ? marker.dataset.from
+                  : selectedSquare;
+              if (!to || !from) {
+                log("invalid marker metadata", { from, to });
+                return;
+              }
+              // only allow if it's our turn
+              const myShort = (myColor && myColor[0]) || "";
+              if (!currentBoardState || currentBoardState.turn !== myShort) {
+                log("not your turn");
+                return;
+              }
+              socket.emit("game:move", { roomId, from, to }, (resp) => {
+                if (resp && resp.error) {
+                  log("move error", resp);
+                  showToast(resp.message || resp.error, {
+                    background: "rgba(200,60,60,0.95)",
+                  });
+                } else {
+                  log("move sent", resp);
+                }
               });
               return;
             }
-            // enter pending target mode: next square click will send the card with payload.targetSquare
-            pendingCard = { cardId: cid, cardUuid: cardEl.dataset.cardUuid || '', requireType };
-            highlightTargets(requireType);
-            log('Pending card selection for', cid, '-> select target');
-            return;
-          }
-          // immediate-play card (no target required)
-          const payload = {};
-            emitCardPlay({ roomId, playerId: myPlayerId, cardId: cid, payload }, (resp)=>{
-            if(resp && resp.error){ log('card:play error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-            else { log('card played', resp); }
+
+            // clicked a piece -> select it (no legal moves requested)
+            const pieceImg =
+              ev.target.closest && ev.target.closest("img.piece");
+            if (pieceImg) {
+              setSelection(square);
+              return;
+            }
+
+            // default: clicked empty square -> select it (toggle)
+            if (selectedSquare === square) {
+              clearSelection();
+            } else {
+              setSelection(square);
+            }
           });
         }
-        cardEl.addEventListener('click', (ev)=>{ if(ev.target === playBtn) return; emitPlay(); });
-        playBtn.addEventListener('click', (ev)=>{ ev.stopPropagation(); emitPlay(); });
 
-        row.appendChild(cardEl);
-      });
+        // move button removed
 
-      // draw button inside the 'Vos cartes' header (visible only when autoDraw is off and it's your turn)
-      try{
-        const drawBtn = document.createElement('button');
-        drawBtn.id = 'drawBtn';
-        drawBtn.type = 'button';
-        drawBtn.className = 'btn-draw';
-        drawBtn.style.display = 'none';
-        drawBtn.textContent = 'Piocher';
-        // attach handler that emits player:draw and temporarily disables the button
-        drawBtn.addEventListener('click', (ev)=>{
-          ev.stopPropagation();
-          if(!socket) return;
-          drawBtn.disabled = true;
-          socket.emit('player:draw', { roomId }, (resp)=>{
-            if(resp && resp.error){ log('player:draw error', resp); showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); drawBtn.disabled = false; return; }
-            log('player:draw ok', resp);
-            // server will send room:update which will hide/disable the button as needed
+        // Board rendering using provided SVG assets and `boardState` JSON.
+        const pieceSetPath = "/assets/chess-pieces/chess_maestro_bw";
+        // board visual defaults are handled by CSS (background, size, border, position)
+
+        function renderBoardFromState(boardState) {
+          if (!boardState) return;
+          // cache boardState for client-side checks (turn etc.)
+          currentBoardState = boardState;
+          // clear existing pieces but keep squares if present
+          const squares = boardEl.querySelectorAll(".square");
+          squares.forEach((s) => (s.innerHTML = ""));
+
+          // place pieces according to boardState.pieces (expects algebraic square names)
+          (boardState.pieces || []).forEach((p) => {
+            const squareName = p.square;
+            if (!squareName) return;
+            const sqEl = boardEl.querySelector(
+              `.square[data-square="${squareName}"]`,
+            );
+            if (!sqEl) return;
+            const letter = p.type ? p.type.toUpperCase() : "?";
+            const filename =
+              (p.color === "w" ? "w" + letter : "b" + letter) + ".svg";
+            const img = document.createElement("img");
+            img.src = `${pieceSetPath}/${filename}`;
+            img.className = "piece";
+            sqEl.appendChild(img);
           });
-        });
-        header.appendChild(drawBtn);
-      }catch(_){ }
 
-      wrap.appendChild(row);
-      handsEl.appendChild(wrap);
-    }
+          // re-apply selection if the previously selected square still exists
+          if (selectedSquare) {
+            // re-apply local selection without re-emitting
+            setSelection(selectedSquare, false);
+          }
+          // re-apply remote selections
+          Object.entries(remoteSelections).forEach(([pid, sq]) => {
+            const el = boardEl.querySelector(`.square[data-square="${sq}"]`);
+            if (el) {
+              el.classList.add("selected-remote");
+              el.classList.add("hide-selection");
+            }
+          });
+          // re-apply remote move markers
+          Object.entries(remoteMoves).forEach(([pid, moves]) => {
+            if (Array.isArray(moves) && moves.length)
+              showRemoteLegalMoves(pid, moves);
+          });
+          // render any mines owned by this player
+          try {
+            renderMines();
+          } catch (e) {}
+          // render veils for brouillard effect (if any)
+          try {
+            // remove existing veils
+            const allSq = boardEl.querySelectorAll(".square");
+            allSq.forEach((sqEl) => {
+              const v = sqEl.querySelector(".veil");
+              if (v) v.remove();
+              // also remove prior veiled marker class
+              try {
+                sqEl.classList.remove("veiled");
+              } catch (_) {}
+            });
+            if (
+              Array.isArray(currentVeiledSquares) &&
+              currentVeiledSquares.length
+            ) {
+              currentVeiledSquares.forEach((sq) => {
+                const el = boardEl.querySelector(
+                  `.square[data-square="${sq}"]`,
+                );
+                if (!el) return;
+                const veil = document.createElement("div");
+                veil.className = "veil";
+                el.appendChild(veil);
+                // add a class to hide piece images as a fallback in case z-index/stacking causes overlay issues
+                try {
+                  el.classList.add("veiled");
+                  // remove any move markers that may have been added previously on this square
+                  const prevMarkers = el.querySelectorAll(".move-marker");
+                  prevMarkers.forEach((m) => m.remove());
+                } catch (_) {}
+              });
+            }
+          } catch (_) {}
+        }
 
-    function showCardDrawnNotification(evt){
-      try{
-        const handsEl = document.getElementById('hands');
-        if(!handsEl) return;
-        const note = document.createElement('div');
-        note.className = 'card-draw-note';
-        note.textContent = evt && evt.card ? `Pioché: ${evt.card.title || evt.card.cardId}` : 'Carte piochée';
-        note.style.padding = '6px 8px';
-        note.style.border = '1px solid #ccc';
-        note.style.background = '#fff8e1';
-        note.style.marginTop = '8px';
-        handsEl.prepend(note);
-        setTimeout(()=> note.remove(), 5000);
-      }catch(e){ console.warn('showCardDrawnNotification error', e); }
-    }
+        // draw mine icons on squares for mines owned by this client
+        function renderMines() {
+          if (!boardEl) return;
+          // remove old mine markers
+          // remove old mine markers (either image or dot)
+          const prev = boardEl.querySelectorAll(".mine-dot, .mine-img");
+          prev.forEach((p) => p.remove());
+          (myMines || []).forEach((sq) => {
+            const el = boardEl.querySelector(`.square[data-square="${sq}"]`);
+            if (!el) return;
+            // create an image element so the mine has a transparent background and crisp edges
+            const img = document.createElement("img");
+            img.className = "mine-img";
+            // use a project asset (SVG) that has a transparent background
+            img.src = "/assets/img/bomb.jpg";
+            img.alt = "mine";
+            img.onerror = function () {
+              try {
+                if (this.src && this.src.indexOf("bomb.jpg") === -1)
+                  this.src = "/assets/img/bomb.jpg";
+              } catch (e) {}
+            };
+            img.draggable = false;
+            // ensure container is positioned so absolute centering works
+            if (!el.style.position) el.style.position = "relative";
+            el.appendChild(img);
+          });
+        }
 
-    function showEffectNotification(effect){
-      try{
-        const handsEl = document.getElementById('hands');
-        if(!handsEl) return;
-        const note = document.createElement('div');
-        note.className = 'card-draw-note';
-        if(effect.type === 'promotion_failed') note.textContent = 'Promotion échouée — la carte est consommée';
-        else if(effect.type === 'promotion') note.textContent = 'Promotion réussie !';
-        else if(effect.type === 'mine_failed') note.textContent = 'Placement de mine échoué — carte consommée';
-        else if(effect.type === 'steal_failed') note.textContent = 'Vol échoué — carte consommée';
-        else if(effect.type === 'card_lost') note.textContent = 'Une de vos cartes a été volée';
-        else note.textContent = `Effet: ${effect.type}`;
-        note.style.padding = '6px 8px'; note.style.border = '1px solid #ccc'; note.style.background = '#fff8e1'; note.style.marginTop = '8px';
-        handsEl.prepend(note);
-        setTimeout(()=> note.remove(), 6000);
-      }catch(e){ console.warn('showEffectNotification error', e); }
-    }
+        // show an explosion animation centered on a square (client-side visual)
+        function showExplosionAt(square) {
+          if (!boardEl || !square) return;
+          const sqEl = boardEl.querySelector(
+            `.square[data-square="${square}"]`,
+          );
+          if (!sqEl) return;
+          // ensure container is positioned so absolute centering works
+          if (!sqEl.style.position) sqEl.style.position = "relative";
 
-    // show a simple promotion choice modal. callback receives one of 'q','r','b','n' or null if cancelled
-    function showPromotionModal(square, callback){
-      try{
-        if(document.getElementById('promotionModal')) return;
-        const modal = document.createElement('div');
-        modal.id = 'promotionModal';
-        modal.style.position = 'fixed';
-        modal.style.left = '0'; modal.style.top = '0'; modal.style.right = '0'; modal.style.bottom = '0';
-        modal.style.display = 'flex'; modal.style.alignItems = 'center'; modal.style.justifyContent = 'center';
-        modal.style.background = 'rgba(0,0,0,0.45)'; modal.style.zIndex = '9999';
+          // Try to play an authored explosion video if available; fallback to CSS explosion if not.
+          const videoPath = "/assets/media/FireElement01.mov";
+          const vid = document.createElement("video");
+          vid.className = "explosion-video";
+          vid.src = videoPath;
+          vid.autoplay = true;
+          vid.muted = true;
+          vid.playsInline = true;
+          vid.loop = false;
+          vid.preload = "auto";
+          vid.style.pointerEvents = "none";
 
-        const box = document.createElement('div');
-        box.style.background = '#fff'; box.style.padding = '16px'; box.style.borderRadius = '8px'; box.style.minWidth = '320px'; box.style.textAlign = 'center';
-        const title = document.createElement('div'); title.textContent = 'Choisir la promotion'; title.style.fontWeight = '700'; title.style.marginBottom = '8px';
-        box.appendChild(title);
+          let usedVideo = false;
+          // Attach event listeners to handle success or failure
+          const cleanup = () => {
+            try {
+              if (vid && vid.parentNode) vid.parentNode.removeChild(vid);
+            } catch (_) {}
+          };
+          vid.addEventListener(
+            "canplay",
+            () => {
+              // video is available and can play — use it
+              try {
+                sqEl.appendChild(vid);
+                usedVideo = true;
+                vid.play().catch(() => {});
+              } catch (_) {
+                usedVideo = false;
+              }
+            },
+            { once: true },
+          );
+          // if video errors (file missing or codec issue), fallback to CSS explosion
+          vid.addEventListener(
+            "error",
+            () => {
+              try {
+                cleanup();
+              } catch (_) {}
+              // fallback animation
+              const ex = document.createElement("div");
+              ex.className = "explosion";
+              sqEl.appendChild(ex);
+              requestAnimationFrame(() => ex.classList.add("play"));
+              setTimeout(() => {
+                try {
+                  ex.remove();
+                } catch (_) {
+                  if (ex && ex.parentNode) ex.parentNode.removeChild(ex);
+                }
+              }, 700);
+            },
+            { once: true },
+          );
+          // If video ends, remove it
+          vid.addEventListener(
+            "ended",
+            () => {
+              try {
+                cleanup();
+              } catch (_) {}
+            },
+            { once: true },
+          );
+          // start loading — if canplay won't fire within a short time, fallback to CSS
+          vid.load();
+          // fallback timeout: if video hasn't started in 180ms, show CSS explosion instead
+          setTimeout(() => {
+            if (!usedVideo) {
+              try {
+                vid.pause();
+                if (vid && vid.parentNode) vid.parentNode.removeChild(vid);
+              } catch (_) {}
+              const ex = document.createElement("div");
+              ex.className = "explosion";
+              sqEl.appendChild(ex);
+              requestAnimationFrame(() => ex.classList.add("play"));
+              setTimeout(() => {
+                try {
+                  ex.remove();
+                } catch (_) {
+                  if (ex && ex.parentNode) ex.parentNode.removeChild(ex);
+                }
+              }, 700);
+            }
+          }, 180);
+        }
 
-        const desc = document.createElement('div'); desc.textContent = `Promouvoir le pion en:`; desc.style.marginBottom = '12px'; box.appendChild(desc);
+        // target highlighting helpers
+        function clearTargetHighlights() {
+          if (!boardEl) return;
+          const prev = boardEl.querySelectorAll(".square.targetable");
+          prev.forEach((p) => p.classList.remove("targetable"));
+          const note = document.getElementById("pendingNote");
+          if (note) note.remove();
+        }
+        function highlightTargets(type) {
+          if (!boardEl || !currentBoardState) return;
+          clearTargetHighlights();
+          const myShort = (myColor && myColor[0]) || "";
+          Array.from(boardEl.querySelectorAll(".square")).forEach((sqEl) => {
+            const sq = sqEl.getAttribute("data-square");
+            if (!sq) return;
+            if (type === "empty") {
+              const occ = (currentBoardState.pieces || []).find(
+                (p) => p.square === sq,
+              );
+              if (!occ) sqEl.classList.add("targetable");
+            } else if (type === "owned") {
+              const occ = (currentBoardState.pieces || []).find(
+                (p) => p.square === sq,
+              );
+              if (
+                occ &&
+                occ.color === myShort &&
+                occ.type &&
+                occ.type.toLowerCase() !== "k"
+              )
+                sqEl.classList.add("targetable");
+            } else if (type === "owned_pawn") {
+              const occ = (currentBoardState.pieces || []).find(
+                (p) => p.square === sq,
+              );
+              if (
+                occ &&
+                occ.color === myShort &&
+                occ.type &&
+                occ.type.toLowerCase() === "p"
+              )
+                sqEl.classList.add("targetable");
+            } else if (type === "own_then_enemy") {
+              // initial phase: highlight only own pieces (client will switch to enemy after first selection)
+              const occ = (currentBoardState.pieces || []).find(
+                (p) => p.square === sq,
+              );
+              if (
+                occ &&
+                occ.color === myShort &&
+                occ.type &&
+                occ.type.toLowerCase() !== "k"
+              )
+                sqEl.classList.add("targetable");
+            } else if (type === "piece") {
+              const occ = (currentBoardState.pieces || []).find(
+                (p) => p.square === sq,
+              );
+              if (occ && occ.type && occ.type.toLowerCase() !== "k")
+                sqEl.classList.add("targetable");
+            } else if (type === "enemy_queen") {
+              const occ = (currentBoardState.pieces || []).find(
+                (p) => p.square === sq,
+              );
+              if (
+                occ &&
+                occ.color &&
+                occ.color !== myShort &&
+                occ.type &&
+                occ.type.toLowerCase() === "q"
+              )
+                sqEl.classList.add("targetable");
+            } else if (type === "enemy") {
+              const occ = (currentBoardState.pieces || []).find(
+                (p) => p.square === sq,
+              );
+              if (
+                occ &&
+                occ.color &&
+                occ.color !== myShort &&
+                occ.type &&
+                occ.type.toLowerCase() !== "k"
+              )
+                sqEl.classList.add("targetable");
+            }
+          });
+          // add a small note near hands
+          try {
+            const handsEl = document.getElementById("hands");
+            if (handsEl) {
+              const note = document.createElement("div");
+              note.id = "pendingNote";
+              note.style.marginTop = "8px";
+              note.style.display = "flex";
+              note.style.alignItems = "center";
+              note.style.gap = "8px";
+              const txt = document.createElement("span");
+              txt.textContent = "Sélectionnez la case cible pour la carte...";
+              txt.style.fontWeight = "700";
+              note.appendChild(txt);
+              const cancelBtn = document.createElement("button");
+              cancelBtn.type = "button";
+              cancelBtn.id = "pendingCancelBtn";
+              cancelBtn.textContent = "Annuler";
+              // use a dedicated class to ensure good contrast against the hands background
+              cancelBtn.className = "btn-cancel";
+              cancelBtn.addEventListener("click", (ev) => {
+                ev.stopPropagation();
+                cancelPendingCard();
+              });
+              note.appendChild(cancelBtn);
+              handsEl.prepend(note);
+            }
+          } catch (e) {}
+        }
 
-        const btnRow = document.createElement('div'); btnRow.style.display = 'flex'; btnRow.style.gap = '12px'; btnRow.style.justifyContent = 'center'; btnRow.style.marginBottom = '8px';
+        // cancel a pending card selection (client-only)
+        function cancelPendingCard() {
+          if (!pendingCard) return;
+          pendingCard = null;
+          clearTargetHighlights();
+          log("Pending card selection annulée");
+          // remove pendingNote if present
+          const note = document.getElementById("pendingNote");
+          if (note) note.remove();
+        }
 
-        // determine the piece color at the square (should be a pawn)
-        const piece = currentBoardState && Array.isArray(currentBoardState.pieces) && currentBoardState.pieces.find(p=>p.square===square);
-        const colorPrefix = (piece && piece.color) ? (piece.color === 'w' ? 'w' : 'b') : ((myColor && myColor[0]) || 'w');
-        const promoTypes = [ ['q','Dame'], ['r','Tour'], ['b','Fou'], ['n','Cavalier'] ];
-        promoTypes.forEach(([code,label]) => {
-          const btn = document.createElement('button'); btn.type = 'button';
-          btn.style.padding = '6px'; btn.style.border = '1px solid #ccc'; btn.style.background = '#fff'; btn.style.cursor = 'pointer'; btn.style.display = 'flex'; btn.style.flexDirection = 'column'; btn.style.alignItems = 'center'; btn.style.gap = '6px';
-          // image
-          const letter = code.toUpperCase();
-          const img = document.createElement('img');
-          img.src = `${pieceSetPath}/${colorPrefix}${letter}.svg`;
-          img.alt = label; img.style.width = '48px'; img.style.height = '48px'; img.style.display = 'block';
-          // if image fails, show text label
-          img.addEventListener('error', ()=>{ img.style.display = 'none'; });
-          const lbl = document.createElement('div'); lbl.textContent = label; lbl.style.fontSize = '12px';
-          btn.appendChild(img); btn.appendChild(lbl);
-          btn.addEventListener('click', (ev)=>{ ev.stopPropagation(); try{ modal.remove(); }catch(_){ } callback(code); });
-          btnRow.appendChild(btn);
-        });
-        box.appendChild(btnRow);
+        // build grid with independent square elements and data-square attributes
+        function buildGrid(size) {
+          if (!size || size < 1) size = 8;
+          boardEl.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
+          boardEl.style.gridTemplateRows = `repeat(${size}, 1fr)`;
+          // if grid already has correct number of squares, keep them
+          const existing = boardEl.querySelectorAll(".square");
+          if (existing.length === size * size) return;
+          boardEl.innerHTML = "";
+          // create rows from rank size..1 (so that a1 is bottom-left if CSS doesn't flip)
+          for (let rank = size; rank >= 1; rank--) {
+            for (let file = 0; file < size; file++) {
+              const fileLetter = String.fromCharCode("a".charCodeAt(0) + file);
+              const squareName = `${fileLetter}${rank}`;
+              const sq = document.createElement("div");
+              // color squares in checker pattern
+              const dark = (file + rank) % 2 === 0;
+              sq.className = "square " + (dark ? "dark" : "light");
+              sq.setAttribute("data-square", squareName);
+              boardEl.appendChild(sq);
+            }
+          }
+        }
 
-        const cancel = document.createElement('button'); cancel.type = 'button'; cancel.textContent = 'Annuler'; cancel.style.marginTop = '6px'; cancel.style.padding = '8px 12px';
-        cancel.addEventListener('click', (ev)=>{ ev.stopPropagation(); try{ modal.remove(); }catch(_){ } callback(null); });
-        box.appendChild(cancel);
+        // render player's own hand and public counts for others
+        // New: render as horizontal 'pokemon-style' cards side-by-side
+        function renderHands(handsOwn, handCounts) {
+          const handsEl = document.getElementById("hands");
+          if (!handsEl) return;
+          handsEl.innerHTML = "";
 
-        modal.appendChild(box);
-        document.body.appendChild(modal);
-      }catch(e){ console.warn('showPromotionModal error', e); callback(null); }
-    }
+          const wrap = document.createElement("div");
+          wrap.className = "player-hand pokemon-hand";
 
-    // show a modal to pick a player to steal from. handCounts is an object mapping playerId -> count
-    function showStealModal(handCounts, callback){
-      try{
-        if(document.getElementById('stealModal')) return;
-        const modal = document.createElement('div'); modal.id = 'stealModal';
-        modal.style.position = 'fixed'; modal.style.left='0'; modal.style.top='0'; modal.style.right='0'; modal.style.bottom='0';
-        modal.style.display='flex'; modal.style.alignItems='center'; modal.style.justifyContent='center'; modal.style.background='rgba(0,0,0,0.45)'; modal.style.zIndex='9999';
-        const box = document.createElement('div'); box.style.background='#fff'; box.style.padding='12px'; box.style.borderRadius='8px'; box.style.minWidth='320px';
-        const title = document.createElement('div'); title.textContent = 'Choisir le joueur à voler'; title.style.fontWeight='700'; title.style.marginBottom='8px'; box.appendChild(title);
-        const list = document.createElement('div'); list.style.display='flex'; list.style.flexDirection='column'; list.style.gap='8px'; list.style.marginBottom='8px';
-        Object.entries(handCounts || {}).forEach(([pid, count])=>{
-          if(pid === myPlayerId) return; // skip self
-          const row = document.createElement('div'); row.style.display='flex'; row.style.justifyContent='space-between'; row.style.alignItems='center';
-          const label = document.createElement('div'); label.textContent = `${pid} — ${count} carte(s)`; label.style.fontWeight='600';
-          const btn = document.createElement('button'); btn.type='button'; btn.textContent = 'Voler'; btn.style.padding='6px 10px';
-          btn.addEventListener('click', (ev)=>{ ev.stopPropagation(); try{ modal.remove(); }catch(_){ } callback(pid); });
-          row.appendChild(label); row.appendChild(btn); list.appendChild(row);
-        });
-        box.appendChild(list);
-        const cancel = document.createElement('button'); cancel.type='button'; cancel.textContent='Annuler'; cancel.style.padding='8px 10px'; cancel.addEventListener('click',(ev)=>{ ev.stopPropagation(); try{ modal.remove(); }catch(_){ } callback(null); });
-        box.appendChild(cancel);
-        modal.appendChild(box); document.body.appendChild(modal);
-      }catch(e){ console.warn('showStealModal error', e); callback(null); }
-    }
-  </script>
-</body>
+          const header = document.createElement("div");
+          header.className = "pokemon-hand-header";
+          const title = document.createElement("div");
+          title.textContent = "Vos cartes";
+          title.className = "pokemon-hand-title";
+          header.appendChild(title);
+          wrap.appendChild(header);
+
+          const row = document.createElement("div");
+          row.className = "cards-row";
+
+          (handsOwn || []).slice(0, 10).forEach((c) => {
+            const cardEl = document.createElement("div");
+            cardEl.className = "pokemon-card";
+            cardEl.dataset.cardId = c.cardId || c.id || "";
+            cardEl.dataset.cardUuid = c.id || "";
+
+            const top = document.createElement("div");
+            top.className = "pokemon-card-top";
+            const art = document.createElement("div");
+            art.className = "pokemon-card-art";
+            art.textContent = "";
+            try {
+              const cid = (c.cardId || c.id || "").toString().toLowerCase();
+              const title = (c.title || "").toString().toLowerCase();
+              let imgSrc = null;
+              if (cid === "adoubement")
+                imgSrc = "/assets/img/cards/adoubement.png";
+              if (cid === "folie") imgSrc = "/assets/img/cards/folie.png";
+              if (cid === "fortification")
+                imgSrc = "/assets/img/cards/fortification.png";
+              if (cid === "rebond") imgSrc = "/assets/img/cards/rebond.png";
+              if (cid === "anneau") imgSrc = "/assets/img/cards/anneau.png";
+              if (cid === "brouillard")
+                imgSrc = "/assets/img/cards/brouillard.png";
+              if (cid === "coincoin") imgSrc = "/assets/img/cards/coincoin.png";
+              if (cid === "inversion")
+                imgSrc = "/assets/img/cards/inversion.png";
+              if (cid === "invisible")
+                imgSrc = "/assets/img/cards/invisible.png";
+              if (cid === "kamikaze") imgSrc = "/assets/img/cards/kamikaz.png";
+              if (cid === "melange") imgSrc = "/assets/img/cards/mélange.png";
+              if (cid === "mine") imgSrc = "/assets/img/cards/mine.png";
+              if (cid === "promotion")
+                imgSrc = "/assets/img/cards/promotion.png";
+              if (cid === "resurection")
+                imgSrc = "/assets/img/cards/resurection.png";
+              if (cid === "sniper") imgSrc = "/assets/img/cards/sniper.png";
+              if (cid === "totem") imgSrc = "/assets/img/cards/totem.png";
+              if (cid === "toucher") imgSrc = "/assets/img/cards/toucher.png";
+              if (cid === "vole_piece")
+                imgSrc = "/assets/img/cards/vole_piece.png";
+              if (cid === "double") imgSrc = "/assets/img/cards/double.png";
+              if (cid === "empathie") imgSrc = "/assets/img/cards/empathie.png";
+              if (cid === "parrure") imgSrc = "/assets/img/cards/parrure.png";
+              if (cid === "revolution")
+                imgSrc = "/assets/img/cards/révolution.png";
+              if (cid === "doppelganger")
+                imgSrc = "/assets/img/cards/doppelganger.png";
+              if (cid === "pareil") imgSrc = "/assets/img/cards/pareil.png";
+              if (cid === "sans_effet")
+                imgSrc = "/assets/img/cards/sans_effet.png";
+              if (cid === "teleportation")
+                imgSrc = "/assets/img/cards/teleportation.png";
+              if (cid === "tout") imgSrc = "/assets/img/cards/tout.png";
+              if (cid === "vole_carte")
+                imgSrc = "/assets/img/cards/vole_carte.png";
+
+              if (imgSrc) {
+                const img = document.createElement("img");
+                img.src = imgSrc;
+                img.alt = c.title || cid || "card";
+                img.className = "card-art-img";
+                img.style.width = "100%";
+                img.style.height = "100%";
+                img.style.objectFit = "cover";
+                art.appendChild(img);
+              }
+            } catch (e) {
+              /* ignore artwork errors */
+            }
+            top.appendChild(art);
+
+            const mid = document.createElement("div");
+            mid.className = "pokemon-card-mid";
+            const h = document.createElement("div");
+            h.className = "pokemon-card-title";
+            h.textContent = c.title || c.cardId || "Carte";
+            const p = document.createElement("div");
+            p.className = "pokemon-card-desc";
+            p.textContent = c.description || "";
+            mid.appendChild(h);
+            mid.appendChild(p);
+
+            const footer = document.createElement("div");
+            footer.className = "pokemon-card-footer";
+            const playBtn = document.createElement("button");
+            playBtn.className = "card-play-btn";
+            playBtn.textContent = "Jouer";
+            footer.appendChild(playBtn);
+
+            cardEl.appendChild(top);
+            cardEl.appendChild(mid);
+            cardEl.appendChild(footer);
+
+            // clicking the whole card or the play button emits card:play
+            function emitPlay() {
+              if (!socket) return;
+              const cid = cardEl.dataset.cardId;
+              // try cardId first, then fall back to the human title (helps with accented ids like "Téléportation")
+              const requireType =
+                cardRequiresTarget(cid) || cardRequiresTarget(c.title || "");
+              if (requireType) {
+                if (requireType === "player") {
+                  // If there's only one opponent, auto-select them (no modal needed). Otherwise show modal.
+                  const opponents = Object.keys(handCounts || {}).filter(
+                    (pid) => pid !== myPlayerId,
+                  );
+                  if (opponents.length === 1) {
+                    const targetPlayerId = opponents[0];
+                    emitCardPlay(
+                      {
+                        roomId,
+                        playerId: myPlayerId,
+                        cardId: cid,
+                        payload: { targetPlayerId },
+                      },
+                      (resp) => {
+                        if (resp && resp.error) {
+                          log("card:play error", resp);
+                          showToast(resp.message || resp.error, {
+                            background: "rgba(200,60,60,0.95)",
+                          });
+                        } else {
+                          log("card played (steal card)", resp);
+                        }
+                      },
+                    );
+                    return;
+                  }
+                  // show modal to pick which player to steal from
+                  showStealModal(handCounts, (targetPlayerId) => {
+                    if (!targetPlayerId) return; // canceled
+                    emitCardPlay(
+                      {
+                        roomId,
+                        playerId: myPlayerId,
+                        cardId: cid,
+                        payload: { targetPlayerId },
+                      },
+                      (resp) => {
+                        if (resp && resp.error) {
+                          log("card:play error", resp);
+                          showToast(resp.message || resp.error, {
+                            background: "rgba(200,60,60,0.95)",
+                          });
+                        } else {
+                          log("card played (steal card)", resp);
+                        }
+                      },
+                    );
+                  });
+                  return;
+                }
+                // enter pending target mode: next square click will send the card with payload.targetSquare
+                pendingCard = {
+                  cardId: cid,
+                  cardUuid: cardEl.dataset.cardUuid || "",
+                  requireType,
+                };
+                highlightTargets(requireType);
+                log("Pending card selection for", cid, "-> select target");
+                return;
+              }
+              // immediate-play card (no target required)
+              const payload = {};
+              emitCardPlay(
+                { roomId, playerId: myPlayerId, cardId: cid, payload },
+                (resp) => {
+                  if (resp && resp.error) {
+                    log("card:play error", resp);
+                    showToast(resp.message || resp.error, {
+                      background: "rgba(200,60,60,0.95)",
+                    });
+                  } else {
+                    log("card played", resp);
+                  }
+                },
+              );
+            }
+            cardEl.addEventListener("click", (ev) => {
+              if (ev.target === playBtn) return;
+              emitPlay();
+            });
+            playBtn.addEventListener("click", (ev) => {
+              ev.stopPropagation();
+              emitPlay();
+            });
+
+            row.appendChild(cardEl);
+          });
+
+          // draw button inside the 'Vos cartes' header (visible only when autoDraw is off and it's your turn)
+          try {
+            const drawBtn = document.createElement("button");
+            drawBtn.id = "drawBtn";
+            drawBtn.type = "button";
+            drawBtn.className = "btn-draw";
+            drawBtn.style.display = "none";
+            drawBtn.textContent = "Piocher";
+            // attach handler that emits player:draw and temporarily disables the button
+            drawBtn.addEventListener("click", (ev) => {
+              ev.stopPropagation();
+              if (!socket) return;
+              drawBtn.disabled = true;
+              socket.emit("player:draw", { roomId }, (resp) => {
+                if (resp && resp.error) {
+                  log("player:draw error", resp);
+                  showToast(resp.message || resp.error, {
+                    background: "rgba(200,60,60,0.95)",
+                  });
+                  drawBtn.disabled = false;
+                  return;
+                }
+                log("player:draw ok", resp);
+                // server will send room:update which will hide/disable the button as needed
+              });
+            });
+            header.appendChild(drawBtn);
+          } catch (_) {}
+
+          wrap.appendChild(row);
+          handsEl.appendChild(wrap);
+        }
+
+        function showCardDrawnNotification(evt) {
+          try {
+            const handsEl = document.getElementById("hands");
+            if (!handsEl) return;
+            const note = document.createElement("div");
+            note.className = "card-draw-note";
+            note.textContent =
+              evt && evt.card
+                ? `Pioché: ${evt.card.title || evt.card.cardId}`
+                : "Carte piochée";
+            note.style.padding = "6px 8px";
+            note.style.border = "1px solid #ccc";
+            note.style.background = "#fff8e1";
+            note.style.marginTop = "8px";
+            handsEl.prepend(note);
+            setTimeout(() => note.remove(), 5000);
+          } catch (e) {
+            console.warn("showCardDrawnNotification error", e);
+          }
+        }
+
+        function showEffectNotification(effect) {
+          try {
+            const handsEl = document.getElementById("hands");
+            if (!handsEl) return;
+            const note = document.createElement("div");
+            note.className = "card-draw-note";
+            if (effect.type === "promotion_failed")
+              note.textContent = "Promotion échouée — la carte est consommée";
+            else if (effect.type === "promotion")
+              note.textContent = "Promotion réussie !";
+            else if (effect.type === "mine_failed")
+              note.textContent = "Placement de mine échoué — carte consommée";
+            else if (effect.type === "steal_failed")
+              note.textContent = "Vol échoué — carte consommée";
+            else if (effect.type === "card_lost")
+              note.textContent = "Une de vos cartes a été volée";
+            else note.textContent = `Effet: ${effect.type}`;
+            note.style.padding = "6px 8px";
+            note.style.border = "1px solid #ccc";
+            note.style.background = "#fff8e1";
+            note.style.marginTop = "8px";
+            handsEl.prepend(note);
+            setTimeout(() => note.remove(), 6000);
+          } catch (e) {
+            console.warn("showEffectNotification error", e);
+          }
+        }
+
+        // show a simple promotion choice modal. callback receives one of 'q','r','b','n' or null if cancelled
+        function showPromotionModal(square, callback) {
+          try {
+            if (document.getElementById("promotionModal")) return;
+            const modal = document.createElement("div");
+            modal.id = "promotionModal";
+            modal.style.position = "fixed";
+            modal.style.left = "0";
+            modal.style.top = "0";
+            modal.style.right = "0";
+            modal.style.bottom = "0";
+            modal.style.display = "flex";
+            modal.style.alignItems = "center";
+            modal.style.justifyContent = "center";
+            modal.style.background = "rgba(0,0,0,0.45)";
+            modal.style.zIndex = "9999";
+
+            const box = document.createElement("div");
+            box.style.background = "#fff";
+            box.style.padding = "16px";
+            box.style.borderRadius = "8px";
+            box.style.minWidth = "320px";
+            box.style.textAlign = "center";
+            const title = document.createElement("div");
+            title.textContent = "Choisir la promotion";
+            title.style.fontWeight = "700";
+            title.style.marginBottom = "8px";
+            box.appendChild(title);
+
+            const desc = document.createElement("div");
+            desc.textContent = `Promouvoir le pion en:`;
+            desc.style.marginBottom = "12px";
+            box.appendChild(desc);
+
+            const btnRow = document.createElement("div");
+            btnRow.style.display = "flex";
+            btnRow.style.gap = "12px";
+            btnRow.style.justifyContent = "center";
+            btnRow.style.marginBottom = "8px";
+
+            // determine the piece color at the square (should be a pawn)
+            const piece =
+              currentBoardState &&
+              Array.isArray(currentBoardState.pieces) &&
+              currentBoardState.pieces.find((p) => p.square === square);
+            const colorPrefix =
+              piece && piece.color
+                ? piece.color === "w"
+                  ? "w"
+                  : "b"
+                : (myColor && myColor[0]) || "w";
+            const promoTypes = [
+              ["q", "Dame"],
+              ["r", "Tour"],
+              ["b", "Fou"],
+              ["n", "Cavalier"],
+            ];
+            promoTypes.forEach(([code, label]) => {
+              const btn = document.createElement("button");
+              btn.type = "button";
+              btn.style.padding = "6px";
+              btn.style.border = "1px solid #ccc";
+              btn.style.background = "#fff";
+              btn.style.cursor = "pointer";
+              btn.style.display = "flex";
+              btn.style.flexDirection = "column";
+              btn.style.alignItems = "center";
+              btn.style.gap = "6px";
+              // image
+              const letter = code.toUpperCase();
+              const img = document.createElement("img");
+              img.src = `${pieceSetPath}/${colorPrefix}${letter}.svg`;
+              img.alt = label;
+              img.style.width = "48px";
+              img.style.height = "48px";
+              img.style.display = "block";
+              // if image fails, show text label
+              img.addEventListener("error", () => {
+                img.style.display = "none";
+              });
+              const lbl = document.createElement("div");
+              lbl.textContent = label;
+              lbl.style.fontSize = "12px";
+              btn.appendChild(img);
+              btn.appendChild(lbl);
+              btn.addEventListener("click", (ev) => {
+                ev.stopPropagation();
+                try {
+                  modal.remove();
+                } catch (_) {}
+                callback(code);
+              });
+              btnRow.appendChild(btn);
+            });
+            box.appendChild(btnRow);
+
+            const cancel = document.createElement("button");
+            cancel.type = "button";
+            cancel.textContent = "Annuler";
+            cancel.style.marginTop = "6px";
+            cancel.style.padding = "8px 12px";
+            cancel.addEventListener("click", (ev) => {
+              ev.stopPropagation();
+              try {
+                modal.remove();
+              } catch (_) {}
+              callback(null);
+            });
+            box.appendChild(cancel);
+
+            modal.appendChild(box);
+            document.body.appendChild(modal);
+          } catch (e) {
+            console.warn("showPromotionModal error", e);
+            callback(null);
+          }
+        }
+
+        // show a modal to pick a player to steal from. handCounts is an object mapping playerId -> count
+        function showStealModal(handCounts, callback) {
+          try {
+            if (document.getElementById("stealModal")) return;
+            const modal = document.createElement("div");
+            modal.id = "stealModal";
+            modal.style.position = "fixed";
+            modal.style.left = "0";
+            modal.style.top = "0";
+            modal.style.right = "0";
+            modal.style.bottom = "0";
+            modal.style.display = "flex";
+            modal.style.alignItems = "center";
+            modal.style.justifyContent = "center";
+            modal.style.background = "rgba(0,0,0,0.45)";
+            modal.style.zIndex = "9999";
+            const box = document.createElement("div");
+            box.style.background = "#fff";
+            box.style.padding = "12px";
+            box.style.borderRadius = "8px";
+            box.style.minWidth = "320px";
+            const title = document.createElement("div");
+            title.textContent = "Choisir le joueur à voler";
+            title.style.fontWeight = "700";
+            title.style.marginBottom = "8px";
+            box.appendChild(title);
+            const list = document.createElement("div");
+            list.style.display = "flex";
+            list.style.flexDirection = "column";
+            list.style.gap = "8px";
+            list.style.marginBottom = "8px";
+            Object.entries(handCounts || {}).forEach(([pid, count]) => {
+              if (pid === myPlayerId) return; // skip self
+              const row = document.createElement("div");
+              row.style.display = "flex";
+              row.style.justifyContent = "space-between";
+              row.style.alignItems = "center";
+              const label = document.createElement("div");
+              label.textContent = `${pid} — ${count} carte(s)`;
+              label.style.fontWeight = "600";
+              const btn = document.createElement("button");
+              btn.type = "button";
+              btn.textContent = "Voler";
+              btn.style.padding = "6px 10px";
+              btn.addEventListener("click", (ev) => {
+                ev.stopPropagation();
+                try {
+                  modal.remove();
+                } catch (_) {}
+                callback(pid);
+              });
+              row.appendChild(label);
+              row.appendChild(btn);
+              list.appendChild(row);
+            });
+            box.appendChild(list);
+            const cancel = document.createElement("button");
+            cancel.type = "button";
+            cancel.textContent = "Annuler";
+            cancel.style.padding = "8px 10px";
+            cancel.addEventListener("click", (ev) => {
+              ev.stopPropagation();
+              try {
+                modal.remove();
+              } catch (_) {}
+              callback(null);
+            });
+            box.appendChild(cancel);
+            modal.appendChild(box);
+            document.body.appendChild(modal);
+          } catch (e) {
+            console.warn("showStealModal error", e);
+            callback(null);
+          }
+        }
+      </script>
+    </div>
+  </body>
 </html>
diff --git a/public/index.html b/public/index.html
index 05ec048..d7b1487 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,174 +1,289 @@
 <!doctype html>
 <html>
-<head>
-  <meta charset="utf-8" />
-  <title>ChessNut</title>
-  <link rel="stylesheet" href="/styles/style.css">
-</head>
-<body>
-  <div class="page">
-    <header class="hero card">
-      <div>
-        <div class="title">ChessNut</div>
-        <div style="margin-top:8px">
-          <a href="https://github.com/Didictateur/ChessNut" target="_blank" rel="noopener noreferrer" class="btn-ghost" style="text-decoration:none;padding:6px 10px;font-size:0.95em;">Voir sur GitHub</a>
+  <head>
+    <meta charset="utf-8" />
+    <title>ChessNut</title>
+    <link rel="stylesheet" href="/styles/style.css" />
+  </head>
+  <body>
+    <div class="page">
+      <header class="hero card">
+        <div>
+          <div class="title">ChessNut</div>
+          <div style="margin-top: 8px">
+            <a
+              href="https://github.com/Didictateur/ChessNut"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn-ghost"
+              style="
+                text-decoration: none;
+                padding: 6px 10px;
+                font-size: 0.95em;
+              "
+              >Voir sur GitHub</a
+            >
+          </div>
         </div>
-      </div>
-    </header>
+      </header>
 
-    <section class="card lobby">
-      <div>
-        <button id="create" class="btn-cta">Créer une partie</button>
-      </div>
+      <section class="card lobby">
+        <div>
+          <button id="create" class="btn-cta">Créer une partie</button>
+        </div>
 
-      <div class="controls">
-        <input id="roomId" class="input" placeholder="ex: ab12cd34" />
-        <button id="join" class="btn-ghost">Rejoindre</button>
-      </div>
-    </section>
-    
-    <section class="card rules" id="cardRules" style="margin-top:16px">
-      <h3>Règles du jeu</h3>
-      <p>Les cartes ajoutent des effets spéciaux au-dessus des règles d'échecs classiques. Voici l'essentiel pour jouer :</p>
-      <ul>
-        <li><strong>Jouer une carte :</strong> cliquez sur une carte dans votre main puis suivez l'invite (sélection d'une pièce, d'une case). Certaines cartes n'exigent pas de cible.</li>
-        <li><strong>Carte mouvement :</strong> certaines cartes comptent déjà comme un mouvement à part entière. Il faut donc en tenir compte lors de votre tour.</li>
-        <li><strong>Durée des effets :</strong> certaines cartes sont temporaires (durée mesurée en tours), d'autres restent actives. Un tour correspond aux actions d'un seul joueur. Un cycle vaut donc pour deux tours.</li>
-        <li><strong>Fin de partie :</strong> si un roi est capturé, la partie s'arrête sur une victoire, une défaite ou peut-être même une égalité. Les joueurs peuvent choisir de rester en spectateur ou de quitter la partie.</li>
-      </ul>
-      <p style="margin-top:8px;font-size:0.95em;color:#444">Remarque : ces règles couvrent uniquement les mécaniques des cartes — pour le jeu d'échecs standard, les mouvements habituels s'appliquent (pions, tours, cavaliers, fous, dames, rois).</p>
-      <h3>Modes de jeux</h3>
-      <p>Il existe plusieurs modes de jeux pour s'adapter à différents styles de jeu :</p>
-      <ul>
-        <li><strong>Pioche automatique :</strong> Si activé, les cartes sont piochées automatiquement à chaque tour. Sinon, les joueurs doivent décider s'ils piochent ou s'ils jouent. Attention ! Il n'est pas possible de piocher deux fois de suite !</li>
-        <li><strong>Sans remise :</strong> Les cartes jouées ne sont pas remises dans la pioche, ce qui les rend uniques.</li>
-        <li><strong>Pioche personnalisée :</strong> Choisissez les cartes disponibles dans la pioche.</li>
-      </ul>
-    </section>
+        <div class="controls">
+          <input id="roomId" class="input" placeholder="ex: ab12cd34" />
+          <button id="join" class="btn-ghost">Rejoindre</button>
+        </div>
+      </section>
 
-    <section class="card" id="availableCards" style="margin-top:16px">
-      <h3>Cartes disponibles</h3>
-      <div id="cardsGrid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px">
-        <!-- Affichage des cartes disponibles -->
-      </div>
-    </section>
-  </div>
+      <section class="card rules" id="cardRules" style="margin-top: 16px">
+        <h3>Règles du jeu</h3>
+        <p>
+          Les cartes ajoutent des effets spéciaux au-dessus des règles d'échecs
+          classiques. Voici l'essentiel pour jouer :
+        </p>
+        <ul>
+          <li>
+            <strong>Jouer une carte :</strong> cliquez sur une carte dans votre
+            main puis suivez l'invite (sélection d'une pièce, d'une case).
+            Certaines cartes n'exigent pas de cible.
+          </li>
+          <li>
+            <strong>Carte mouvement :</strong> certaines cartes comptent déjà
+            comme un mouvement à part entière. Il faut donc en tenir compte lors
+            de votre tour.
+          </li>
+          <li>
+            <strong>Durée des effets :</strong> certaines cartes sont
+            temporaires (durée mesurée en tours), d'autres restent actives. Un
+            tour correspond aux actions d'un seul joueur. Un cycle vaut donc
+            pour deux tours.
+          </li>
+          <li>
+            <strong>Fin de partie :</strong> si un roi est capturé, la partie
+            s'arrête sur une victoire, une défaite ou peut-être même une
+            égalité. Les joueurs peuvent choisir de rester en spectateur ou de
+            quitter la partie.
+          </li>
+        </ul>
+        <p style="margin-top: 8px; font-size: 0.95em; color: #444">
+          Remarque : ces règles couvrent uniquement les mécaniques des cartes —
+          pour le jeu d'échecs standard, les mouvements habituels s'appliquent
+          (pions, tours, cavaliers, fous, dames, rois).
+        </p>
+        <h3>Modes de jeux</h3>
+        <p>
+          Il existe plusieurs modes de jeux pour s'adapter à différents styles
+          de jeu :
+        </p>
+        <ul>
+          <li>
+            <strong>Pioche automatique :</strong> Si activé, les cartes sont
+            piochées automatiquement à chaque tour. Sinon, les joueurs doivent
+            décider s'ils piochent ou s'ils jouent. Attention ! Il n'est pas
+            possible de piocher deux fois de suite !
+          </li>
+          <li>
+            <strong>Sans remise :</strong> Les cartes jouées ne sont pas remises
+            dans la pioche, ce qui les rend uniques.
+          </li>
+          <li>
+            <strong>Pioche personnalisée :</strong> Choisissez les cartes
+            disponibles dans la pioche.
+          </li>
+        </ul>
+      </section>
 
-  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
-  <script src="/toast.js"></script>
-  <script>
-    function log(...args){ console.log(...args); }
+      <section class="card" id="availableCards" style="margin-top: 16px">
+        <h3>Cartes disponibles</h3>
+        <div
+          id="cardsGrid"
+          style="
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 12px;
+            margin-top: 12px;
+          "
+        >
+          <!-- Affichage des cartes disponibles -->
+        </div>
+      </section>
+    </div>
 
-    document.getElementById('create').addEventListener('click', async ()=>{
-      const r = await fetch('/rooms', { method:'POST' });
-      const j = await r.json();
-      document.getElementById('roomId').value = j.roomId;
-      log('Room créée', j.roomId);
-      // redirect creator to waiting page
-      window.location.href = `/waiting.html?roomId=${encodeURIComponent(j.roomId)}`;
-    });
-
-    document.getElementById('join').addEventListener('click', async ()=>{
-      const roomId = document.getElementById('roomId').value.trim();
-  if(!roomId){ showToast('Entrez roomId', { background: 'rgba(200,60,60,0.95)' }); return; }
-      // verify room exists before redirecting
-      try{
-        const resp = await fetch(`/rooms/${encodeURIComponent(roomId)}`);
-        if(!resp.ok){
-          const j = await resp.json().catch(()=>({ error: 'room not found' }));
-          showToast(j.error || 'room not found', { background: 'rgba(200,60,60,0.95)' });
-          return;
-        }
-      }catch(e){
-        showToast('Erreur de connexion au serveur', { background: 'rgba(200,60,60,0.95)' });
-        return;
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    <script src="/toast.js"></script>
+    <script>
+      function log(...args) {
+        console.log(...args);
       }
 
-      const playerIdEl = document.getElementById('playerId');
-      const playerId = (playerIdEl && playerIdEl.value) ? playerIdEl.value.trim() : '';
-      // redirect to waiting page; playerId optional
-      const qs = `?roomId=${encodeURIComponent(roomId)}${playerId?`&playerId=${encodeURIComponent(playerId)}`:''}`;
-      window.location.href = '/waiting.html' + qs;
-    });
+      document.getElementById("create").addEventListener("click", async () => {
+        const r = await fetch("/rooms", { method: "POST" });
+        const j = await r.json();
+        document.getElementById("roomId").value = j.roomId;
+        log("Room créée", j.roomId);
+        // redirect creator to waiting page
+        window.location.href = `/waiting.html?roomId=${encodeURIComponent(j.roomId)}`;
+      });
 
-    // Fetch available cards from server and render as a grid using the same card UI as in-game
-    async function loadCardsGrid(){
-      try{
-        const resp = await fetch('/cards');
-        if(!resp.ok) return;
-        const j = await resp.json();
-        if(!j || !Array.isArray(j.cards)) return;
-        const grid = document.getElementById('cardsGrid');
-        if(!grid) return;
-        grid.innerHTML = '';
-        j.cards.forEach(c => {
-          try{
-            const cardEl = document.createElement('div');
-            cardEl.className = 'pokemon-card';
-            cardEl.dataset.cardId = c.cardId || c.id || '';
-            cardEl.dataset.cardUuid = c.id || '';
+      document.getElementById("join").addEventListener("click", async () => {
+        const roomId = document.getElementById("roomId").value.trim();
+        if (!roomId) {
+          showToast("Entrez roomId", { background: "rgba(200,60,60,0.95)" });
+          return;
+        }
+        // verify room exists before redirecting
+        try {
+          const resp = await fetch(`/rooms/${encodeURIComponent(roomId)}`);
+          if (!resp.ok) {
+            const j = await resp
+              .json()
+              .catch(() => ({ error: "room not found" }));
+            showToast(j.error || "room not found", {
+              background: "rgba(200,60,60,0.95)",
+            });
+            return;
+          }
+        } catch (e) {
+          showToast("Erreur de connexion au serveur", {
+            background: "rgba(200,60,60,0.95)",
+          });
+          return;
+        }
 
-            const top = document.createElement('div'); top.className = 'pokemon-card-top';
-            const art = document.createElement('div'); art.className = 'pokemon-card-art';
-            art.textContent = '';
-            // artwork mapping (reuse same simple heuristics as in game view)
-            try{
-              const cid = (c.cardId || c.id || '').toString().toLowerCase();
-              const title = (c.title || '').toString().toLowerCase();
-              let imgSrc = null;
-              if(cid === 'adoubement') imgSrc = '/assets/img/cards/adoubement.png';
-              if(cid === 'folie') imgSrc = '/assets/img/cards/folie.png';
-              if(cid === 'fortification') imgSrc = '/assets/img/cards/fortification.png';
-              if(cid === 'rebond') imgSrc = '/assets/img/cards/rebond.png';
-              if(cid === 'anneau') imgSrc = '/assets/img/cards/anneau.png';
-              if(cid === 'brouillard') imgSrc = '/assets/img/cards/brouillard.png';
-              if(cid === 'coincoin') imgSrc = '/assets/img/cards/coincoin.png';
-              if(cid === 'inversion') imgSrc = '/assets/img/cards/inversion.png';
-              if(cid === 'invisible') imgSrc = '/assets/img/cards/invisible.png';
-              if(cid === 'kamikaze') imgSrc = '/assets/img/cards/kamikaz.png';
-              if(cid === 'melange') imgSrc = '/assets/img/cards/mélange.png';
-              if(cid === 'mine') imgSrc = '/assets/img/cards/mine.png';
-              if(cid === 'promotion') imgSrc = '/assets/img/cards/promotion.png';
-              if(cid === 'resurection') imgSrc = '/assets/img/cards/resurection.png';
-              if(cid === 'sniper') imgSrc = '/assets/img/cards/sniper.png';
-              if(cid === 'totem') imgSrc = '/assets/img/cards/totem.png';
-              if(cid === 'toucher') imgSrc = '/assets/img/cards/toucher.png';
-              if(cid === 'vole_piece') imgSrc = '/assets/img/cards/vole_piece.png';
-              if(cid === 'double') imgSrc = '/assets/img/cards/double.png';
-              if(cid === 'empathie') imgSrc = '/assets/img/cards/empathie.png';
-              if(cid === 'parrure') imgSrc = '/assets/img/cards/parrure.png';
-              if(cid === 'revolution') imgSrc = '/assets/img/cards/révolution.png';
-              if(cid === 'doppelganger') imgSrc = '/assets/img/cards/doppelganger.png';
-              if(cid === 'pareil') imgSrc = '/assets/img/cards/pareil.png';
-              if(cid === 'sans_effet') imgSrc = '/assets/img/cards/sans_effet.png';
-              if(cid === 'teleportation') imgSrc = '/assets/img/cards/teleportation.png';
-              if(cid === 'tout') imgSrc = '/assets/img/cards/tout.png';
-              if(cid === 'vole_carte') imgSrc = '/assets/img/cards/vole_carte.png';
+        const playerIdEl = document.getElementById("playerId");
+        const playerId =
+          playerIdEl && playerIdEl.value ? playerIdEl.value.trim() : "";
+        // redirect to waiting page; playerId optional
+        const qs = `?roomId=${encodeURIComponent(roomId)}${playerId ? `&playerId=${encodeURIComponent(playerId)}` : ""}`;
+        window.location.href = "/waiting.html" + qs;
+      });
 
-              if(imgSrc){ const img = document.createElement('img'); img.src = imgSrc; img.alt = c.title || cid || 'card'; img.className = 'card-art-img'; img.style.width = '100%'; img.style.height = '100%'; img.style.objectFit = 'cover'; art.appendChild(img); }
-            }catch(_){ }
-            top.appendChild(art);
+      // Fetch available cards from server and render as a grid using the same card UI as in-game
+      async function loadCardsGrid() {
+        try {
+          const resp = await fetch("/cards");
+          if (!resp.ok) return;
+          const j = await resp.json();
+          if (!j || !Array.isArray(j.cards)) return;
+          const grid = document.getElementById("cardsGrid");
+          if (!grid) return;
+          grid.innerHTML = "";
+          j.cards.forEach((c) => {
+            try {
+              const cardEl = document.createElement("div");
+              cardEl.className = "pokemon-card";
+              cardEl.dataset.cardId = c.cardId || c.id || "";
+              cardEl.dataset.cardUuid = c.id || "";
 
-            const mid = document.createElement('div'); mid.className = 'pokemon-card-mid';
-            const h = document.createElement('div'); h.className = 'pokemon-card-title'; h.textContent = c.title || c.cardId || 'Carte';
-            const p = document.createElement('div'); p.className = 'pokemon-card-desc'; p.textContent = c.description || '';
-            mid.appendChild(h); mid.appendChild(p);
+              const top = document.createElement("div");
+              top.className = "pokemon-card-top";
+              const art = document.createElement("div");
+              art.className = "pokemon-card-art";
+              art.textContent = "";
+              // artwork mapping (reuse same simple heuristics as in game view)
+              try {
+                const cid = (c.cardId || c.id || "").toString().toLowerCase();
+                const title = (c.title || "").toString().toLowerCase();
+                let imgSrc = null;
+                if (cid === "adoubement")
+                  imgSrc = "/assets/img/cards/adoubement.png";
+                if (cid === "folie") imgSrc = "/assets/img/cards/folie.png";
+                if (cid === "fortification")
+                  imgSrc = "/assets/img/cards/fortification.png";
+                if (cid === "rebond") imgSrc = "/assets/img/cards/rebond.png";
+                if (cid === "anneau") imgSrc = "/assets/img/cards/anneau.png";
+                if (cid === "brouillard")
+                  imgSrc = "/assets/img/cards/brouillard.png";
+                if (cid === "coincoin")
+                  imgSrc = "/assets/img/cards/coincoin.png";
+                if (cid === "inversion")
+                  imgSrc = "/assets/img/cards/inversion.png";
+                if (cid === "invisible")
+                  imgSrc = "/assets/img/cards/invisible.png";
+                if (cid === "kamikaze")
+                  imgSrc = "/assets/img/cards/kamikaz.png";
+                if (cid === "melange") imgSrc = "/assets/img/cards/mélange.png";
+                if (cid === "mine") imgSrc = "/assets/img/cards/mine.png";
+                if (cid === "promotion")
+                  imgSrc = "/assets/img/cards/promotion.png";
+                if (cid === "resurection")
+                  imgSrc = "/assets/img/cards/resurection.png";
+                if (cid === "sniper") imgSrc = "/assets/img/cards/sniper.png";
+                if (cid === "totem") imgSrc = "/assets/img/cards/totem.png";
+                if (cid === "toucher") imgSrc = "/assets/img/cards/toucher.png";
+                if (cid === "vole_piece")
+                  imgSrc = "/assets/img/cards/vole_piece.png";
+                if (cid === "double") imgSrc = "/assets/img/cards/double.png";
+                if (cid === "empathie")
+                  imgSrc = "/assets/img/cards/empathie.png";
+                if (cid === "parrure") imgSrc = "/assets/img/cards/parrure.png";
+                if (cid === "revolution")
+                  imgSrc = "/assets/img/cards/révolution.png";
+                if (cid === "doppelganger")
+                  imgSrc = "/assets/img/cards/doppelganger.png";
+                if (cid === "pareil") imgSrc = "/assets/img/cards/pareil.png";
+                if (cid === "sans_effet")
+                  imgSrc = "/assets/img/cards/sans_effet.png";
+                if (cid === "teleportation")
+                  imgSrc = "/assets/img/cards/teleportation.png";
+                if (cid === "tout") imgSrc = "/assets/img/cards/tout.png";
+                if (cid === "vole_carte")
+                  imgSrc = "/assets/img/cards/vole_carte.png";
 
-            const footer = document.createElement('div'); footer.className = 'pokemon-card-footer';
+                if (imgSrc) {
+                  const img = document.createElement("img");
+                  img.src = imgSrc;
+                  img.alt = c.title || cid || "card";
+                  img.className = "card-art-img";
+                  img.style.width = "100%";
+                  img.style.height = "100%";
+                  img.style.objectFit = "cover";
+                  art.appendChild(img);
+                }
+              } catch (_) {}
+              top.appendChild(art);
 
-            cardEl.appendChild(top);
-            cardEl.appendChild(mid);
-            cardEl.appendChild(footer);
+              const mid = document.createElement("div");
+              mid.className = "pokemon-card-mid";
+              const h = document.createElement("div");
+              h.className = "pokemon-card-title";
+              h.textContent = c.title || c.cardId || "Carte";
+              const p = document.createElement("div");
+              p.className = "pokemon-card-desc";
+              p.textContent = c.description || "";
+              mid.appendChild(h);
+              mid.appendChild(p);
 
-            grid.appendChild(cardEl);
-          }catch(e){ console.warn('render card error', e); }
-        });
-      }catch(e){ console.warn('loadCardsGrid error', e); }
-    }
+              const footer = document.createElement("div");
+              footer.className = "pokemon-card-footer";
 
-    function escapeHtml(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
-    // populate on load
-    try{ loadCardsGrid(); }catch(_){ }
-  </script>
-</body>
+              cardEl.appendChild(top);
+              cardEl.appendChild(mid);
+              cardEl.appendChild(footer);
+
+              grid.appendChild(cardEl);
+            } catch (e) {
+              console.warn("render card error", e);
+            }
+          });
+        } catch (e) {
+          console.warn("loadCardsGrid error", e);
+        }
+      }
+
+      function escapeHtml(s) {
+        return String(s || "")
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;");
+      }
+      // populate on load
+      try {
+        loadCardsGrid();
+      } catch (_) {}
+    </script>
+  </body>
 </html>
diff --git a/public/waiting.html b/public/waiting.html
index 6ebcbd3..6623daf 100644
--- a/public/waiting.html
+++ b/public/waiting.html
@@ -1,505 +1,835 @@
 <!doctype html>
 <html>
-<head>
-  <meta charset="utf-8" />
-  <title>ChessNut - Salle d'attente</title>
-  <link rel="stylesheet" href="/styles/style.css">
-  <style>
-    /* small waiting-room styles for selectable cards */
-    .pokemon-card { position: relative; cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
-    .pokemon-card.selected { border-color: #28a745; box-shadow: 0 6px 14px rgba(40,167,69,0.08); transform: translateY(-3px); }
-    .pokemon-card .select-mark { position: absolute; right:8px; top:8px; background:#28a745; color:#fff; border-radius:50%; width:20px;height:20px; display:flex;align-items:center;justify-content:center;font-size:12px; }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <header class="hero card">
-      <div>
-        <div class="title">ChessNut — Salle d'attente</div>
-      </div>
-    </header>
+  <head>
+    <meta charset="utf-8" />
+    <title>ChessNut - Salle d'attente</title>
+    <link rel="stylesheet" href="/styles/style.css" />
+    <style>
+      /* small waiting-room styles for selectable cards */
+      .pokemon-card {
+        position: relative;
+        cursor: pointer;
+        transition:
+          transform 0.08s ease,
+          box-shadow 0.08s ease;
+      }
+      .pokemon-card.selected {
+        border-color: #28a745;
+        box-shadow: 0 6px 14px rgba(40, 167, 69, 0.08);
+        transform: translateY(-3px);
+      }
+      .pokemon-card .select-mark {
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        background: #28a745;
+        color: #fff;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page">
+      <header class="hero card">
+        <div>
+          <div class="title">ChessNut — Salle d'attente</div>
+        </div>
+      </header>
 
-    <section class="card">
-      <div>Partie: <strong id="roomId">-</strong></div>
-      <div>Joueurs: <strong id="playerCount">0/2</strong></div>
-      <div id="youAreHost" style="display:none;color:green;font-weight:bold;">(Vous êtes l'hôte)</div>
+      <section class="card">
+        <div>Partie: <strong id="roomId">-</strong></div>
+        <div>Joueurs: <strong id="playerCount">0/2</strong></div>
+        <div
+          id="youAreHost"
+          style="display: none; color: green; font-weight: bold"
+        >
+          (Vous êtes l'hôte)
+        </div>
 
-      <div style="margin-top:8px">
-        <label id="autoDrawLabel" style="display:none;align-items:center;gap:8px;">
-          <input type="checkbox" id="autoDrawToggle" />
-          Pioche automatique
-        </label>
-      </div>
+        <div style="margin-top: 8px">
+          <label
+            id="autoDrawLabel"
+            style="display: none; align-items: center; gap: 8px"
+          >
+            <input type="checkbox" id="autoDrawToggle" />
+            Pioche automatique
+          </label>
+        </div>
 
-      <div style="margin-top:8px">
-        <label id="no-remise" style="display:none;align-items:center;gap:8px;">
-          <input type="checkbox" id="no-remiseToggle" />
-          Sans remise
-        </label>
-      </div>
+        <div style="margin-top: 8px">
+          <label
+            id="no-remise"
+            style="display: none; align-items: center; gap: 8px"
+          >
+            <input type="checkbox" id="no-remiseToggle" />
+            Sans remise
+          </label>
+        </div>
 
-      <div style="margin-top:8px">
-        <label id="customDrawLabel" style="display:none;align-items:center;gap:8px;">
-          <input type="checkbox" id="customDrawToggle" />
-          Pioche personnalisée
-        </label>
-      </div>
+        <div style="margin-top: 8px">
+          <label
+            id="customDrawLabel"
+            style="display: none; align-items: center; gap: 8px"
+          >
+            <input type="checkbox" id="customDrawToggle" />
+            Pioche personnalisée
+          </label>
+        </div>
 
-      <!-- Minimal card list: shown only if Pioche personnalisée is checked -->
-      <div id="customCardsSection" style="display:none;margin-top:8px;border:1px solid #eee;padding:8px;border-radius:6px;background:#fff;">
-        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
-          <div style="font-weight:600">Cartes disponibles</div>
-          <div style="display:flex;gap:8px">
-            <button id="customSelectAll" class="btn-ghost">Tout sélectionner</button>
-            <button id="customDeselectAll" class="btn-ghost">Tout déselectionner</button>
+        <!-- Minimal card list: shown only if Pioche personnalisée is checked -->
+        <div
+          id="customCardsSection"
+          style="
+            display: none;
+            margin-top: 8px;
+            border: 1px solid #eee;
+            padding: 8px;
+            border-radius: 6px;
+            background: #fff;
+          "
+        >
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              margin-bottom: 6px;
+            "
+          >
+            <div style="font-weight: 600">Cartes disponibles</div>
+            <div style="display: flex; gap: 8px">
+              <button id="customSelectAll" class="btn-ghost">
+                Tout sélectionner
+              </button>
+              <button id="customDeselectAll" class="btn-ghost">
+                Tout déselectionner
+              </button>
+            </div>
+          </div>
+          <div
+            id="customCardsContainer"
+            style="color: #333; padding-right: 6px"
+          >
+            (Cochez "Pioche personnalisée" pour charger la liste)
           </div>
         </div>
-        <div id="customCardsContainer" style="color:#333;padding-right:6px">(Cochez "Pioche personnalisée" pour charger la liste)</div>
+
+        <div style="margin-top: 8px">
+          <button id="startBtn" style="display: none" class="btn-cta">
+            Commencer la partie
+          </button>
+          <button id="copyInviteBtn" style="margin-left: 8px" class="btn-ghost">
+            Copier le lien d'invitation
+          </button>
+        </div>
+      </section>
+
+      <div style="margin-top: 10px">
+        <a href="/">Retour à la page principale</a>
       </div>
+    </div>
 
-      <div style="margin-top:8px">
-        <button id="startBtn" style="display:none" class="btn-cta">Commencer la partie</button>
-        <button id="copyInviteBtn" style="margin-left:8px" class="btn-ghost">Copier le lien d'invitation</button>
-      </div>
-    </section>
+    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    <script src="/toast.js"></script>
+    <script>
+      function qs(name) {
+        const url = new URL(window.location.href);
+        return url.searchParams.get(name);
+      }
+      const roomId = qs("roomId");
+      const playerId = qs("playerId") || undefined;
+      document.getElementById("roomId").textContent = roomId || "-";
 
-    <div style="margin-top:10px"><a href="/">Retour à la page principale</a></div>
-  </div>
+      const statusEl = document.getElementById("status");
+      const playerCountEl = document.getElementById("playerCount");
+      let socket = null;
+      let myPlayerId = null;
+      let myColor = null;
+      let roomHostId = null;
+      const hostLabelEl = document.getElementById("hostLabel");
+      const youAreHostEl = document.getElementById("youAreHost");
+      const autoDrawLabelEl = document.getElementById("autoDrawLabel");
+      const autoDrawToggleEl = document.getElementById("autoDrawToggle");
+      const noRemiseLabelEl = document.getElementById("no-remise");
+      const noRemiseToggleEl = document.getElementById("no-remiseToggle");
+      const customDrawLabelEl = document.getElementById("customDrawLabel");
+      const customDrawToggleEl = document.getElementById("customDrawToggle");
 
-  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
-  <script src="/toast.js"></script>
-  <script>
-    function qs(name){ const url = new URL(window.location.href); return url.searchParams.get(name); }
-    const roomId = qs('roomId');
-    const playerId = qs('playerId') || undefined;
-    document.getElementById('roomId').textContent = roomId || '-';
+      // Selection state for custom draw (persisted per room)
+      let selectedCards = new Set();
+      function storageKey() {
+        return `customDrawSelection:${roomId}`;
+      }
+      function saveSelection() {
+        try {
+          localStorage.setItem(
+            storageKey(),
+            JSON.stringify(Array.from(selectedCards)),
+          );
+        } catch (_) {}
+      }
+      function loadSelection() {
+        try {
+          const v = localStorage.getItem(storageKey());
+          if (v) {
+            const arr = JSON.parse(v);
+            selectedCards = new Set(arr || []);
+          }
+        } catch (_) {}
+      }
 
-  const statusEl = document.getElementById('status');
-  const playerCountEl = document.getElementById('playerCount');
-  let socket = null;
-  let myPlayerId = null;
-  let myColor = null;
-  let roomHostId = null;
-  const hostLabelEl = document.getElementById('hostLabel');
-  const youAreHostEl = document.getElementById('youAreHost');
-  const autoDrawLabelEl = document.getElementById('autoDrawLabel');
-  const autoDrawToggleEl = document.getElementById('autoDrawToggle');
-  const noRemiseLabelEl = document.getElementById('no-remise');
-  const noRemiseToggleEl = document.getElementById('no-remiseToggle');
-  const customDrawLabelEl = document.getElementById('customDrawLabel');
-  const customDrawToggleEl = document.getElementById('customDrawToggle');
+      function log(...args) {
+        console.log(...args);
+      }
 
-  // Selection state for custom draw (persisted per room)
-  let selectedCards = new Set();
-  function storageKey(){ return `customDrawSelection:${roomId}`; }
-  function saveSelection(){ try{ localStorage.setItem(storageKey(), JSON.stringify(Array.from(selectedCards))); }catch(_){} }
-  function loadSelection(){ try{ const v = localStorage.getItem(storageKey()); if(v){ const arr = JSON.parse(v); selectedCards = new Set(arr || []); } }catch(_){} }
+      if (!roomId) {
+        showToast("roomId manquant dans l'URL", {
+          background: "rgba(200,60,60,0.95)",
+        });
+      }
 
-    function log(...args){ console.log(...args); }
+      function connectAndJoin() {
+        socket = io();
+        socket.on("connect", () => {
+          log("socket connecté", socket.id);
+        });
 
-  if(!roomId){ showToast('roomId manquant dans l\'URL', { background: 'rgba(200,60,60,0.95)' }); }
-
-    function connectAndJoin(){
-      socket = io();
-      socket.on('connect', ()=>{ log('socket connecté', socket.id); });
-
-  socket.on('room:update', (data)=>{
-    console.log('room:update', data);
-    if(statusEl) statusEl.textContent = data.status || '-';
-        const count = (data.players||[]).length;
-        playerCountEl.textContent = `${count}/2`;
-        // remember hostId from server updates; if missing, fall back to first player
-        if(data.hostId !== undefined && data.hostId !== null) {
-          roomHostId = data.hostId;
-        } else if ((data.players || []).length > 0) {
-          // fallback: first player is host
-          roomHostId = data.players[0].id;
-        } else {
-          roomHostId = null;
-        }
-
-        // update host label UI
-        if(hostLabelEl){
-          hostLabelEl.textContent = roomHostId || '-';
-          if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-            youAreHostEl.style.display = 'inline';
+        socket.on("room:update", (data) => {
+          console.log("room:update", data);
+          if (statusEl) statusEl.textContent = data.status || "-";
+          const count = (data.players || []).length;
+          playerCountEl.textContent = `${count}/2`;
+          // remember hostId from server updates; if missing, fall back to first player
+          if (data.hostId !== undefined && data.hostId !== null) {
+            roomHostId = data.hostId;
+          } else if ((data.players || []).length > 0) {
+            // fallback: first player is host
+            roomHostId = data.players[0].id;
           } else {
-            youAreHostEl.style.display = 'none';
+            roomHostId = null;
           }
-        }
 
-        // enable start button only when there are 2 players and current user is host
-        const startBtn = document.getElementById('startBtn');
-        if(startBtn){
-          // host determined by explicit hostId sent by server (or fallback)
-          if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-            startBtn.style.display = 'inline-block';
-            startBtn.disabled = count !== 2;
-          } else {
-            // hide for non-hosts
-            startBtn.style.display = 'none';
-          }
-        }
-        // update auto-draw UI if server provides it
-        try{
-          if(typeof data.autoDraw !== 'undefined' && autoDrawLabelEl && autoDrawToggleEl){
-            // show the control only to the host
-            if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-              autoDrawLabelEl.style.display = 'inline-flex';
-              autoDrawToggleEl.checked = !!data.autoDraw;
-              autoDrawToggleEl.disabled = false;
+          // update host label UI
+          if (hostLabelEl) {
+            hostLabelEl.textContent = roomHostId || "-";
+            if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+              youAreHostEl.style.display = "inline";
             } else {
-              // hide control for non-hosts
-              autoDrawLabelEl.style.display = 'none';
+              youAreHostEl.style.display = "none";
             }
           }
-        }catch(_){ }
-        // update no-remise UI if server provides it
-        try{
-          if(typeof data.noRemise !== 'undefined' && noRemiseLabelEl && noRemiseToggleEl){
-            // show the control only to the host
-            if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-              noRemiseLabelEl.style.display = 'inline-flex';
-              noRemiseToggleEl.checked = !!data.noRemise;
-              noRemiseToggleEl.disabled = false;
+
+          // enable start button only when there are 2 players and current user is host
+          const startBtn = document.getElementById("startBtn");
+          if (startBtn) {
+            // host determined by explicit hostId sent by server (or fallback)
+            if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+              startBtn.style.display = "inline-block";
+              startBtn.disabled = count !== 2;
             } else {
-              // hide control for non-hosts
-              noRemiseLabelEl.style.display = 'none';
+              // hide for non-hosts
+              startBtn.style.display = "none";
             }
           }
-        }catch(_){ }
-        // show custom draw checkbox to host (UI-only for now)
-        try{
-          if(customDrawLabelEl && customDrawToggleEl){
-            if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-              customDrawLabelEl.style.display = 'inline-flex';
-              // do not override the user's local choice; leave checked as-is
-              customDrawToggleEl.disabled = false;
-            } else {
-              customDrawLabelEl.style.display = 'none';
-            }
-          }
-        }catch(_){ }
-      });
-
-      // register game started handler early so we don't miss the broadcast
-      socket.on('game:started', (data)=>{
-        log('game:started', data);
-        if(myPlayerId){
-          window.location.href = `/game.html?roomId=${encodeURIComponent(roomId)}&playerId=${encodeURIComponent(myPlayerId)}`;
-        } else {
-          window.location.href = `/game.html?roomId=${encodeURIComponent(roomId)}`;
-        }
-      });
-
-      socket.emit('room:join', { roomId, playerId }, (resp)=>{
-        if(resp && resp.error){
-          console.warn('join error', resp);
-          // do not alert or force-redirect; show error in status and keep page for debugging/retry
-          try{ document.getElementById('status').textContent = resp.error || 'Impossible de rejoindre la room'; }catch(e){}
-          return;
-        }
-        myPlayerId = resp.playerId;
-        myColor = resp.color;
-        // server may or may not include hostId in the response; fall back to color
-        if(resp.hostId !== undefined && resp.hostId !== null){
-          roomHostId = resp.hostId;
-        } else if(resp.color === 'white'){
-          roomHostId = resp.playerId; // assume creator (first join) is white
-        }
-        log('Rejoint room', resp);
-        // update host UI immediately
-        if(hostLabelEl){ hostLabelEl.textContent = roomHostId || '-'; }
-        if(youAreHostEl){ youAreHostEl.style.display = (myPlayerId && roomHostId && myPlayerId === roomHostId) ? 'inline' : 'none'; }
-        if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-          const btn = document.getElementById('startBtn');
-          btn.style.display = 'inline-block';
-          btn.disabled = true;
-        }
-        // after join, fetch room state to avoid missing a recent 'playing' state
-        fetch(`/rooms/${encodeURIComponent(roomId)}`).then(r => r.json()).then(roomInfo => {
-          try{
-            if(roomInfo && typeof roomInfo.autoDraw !== 'undefined'){
-              if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-                // host: show control and set state
-                if(autoDrawLabelEl && autoDrawToggleEl){ autoDrawLabelEl.style.display = 'inline-flex'; autoDrawToggleEl.checked = !!roomInfo.autoDraw; autoDrawToggleEl.disabled = false; }
+          // update auto-draw UI if server provides it
+          try {
+            if (
+              typeof data.autoDraw !== "undefined" &&
+              autoDrawLabelEl &&
+              autoDrawToggleEl
+            ) {
+              // show the control only to the host
+              if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+                autoDrawLabelEl.style.display = "inline-flex";
+                autoDrawToggleEl.checked = !!data.autoDraw;
+                autoDrawToggleEl.disabled = false;
               } else {
-                // non-host: hide control
-                if(autoDrawLabelEl) autoDrawLabelEl.style.display = 'none';
+                // hide control for non-hosts
+                autoDrawLabelEl.style.display = "none";
               }
             }
-            // set no-remise independently so host sees it even if autoDraw is undefined
-            try{
-              if(roomInfo && typeof roomInfo.noRemise !== 'undefined'){
-                if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-                  if(noRemiseLabelEl && noRemiseToggleEl){ noRemiseLabelEl.style.display = 'inline-flex'; noRemiseToggleEl.checked = !!roomInfo.noRemise; noRemiseToggleEl.disabled = false; }
-                } else {
-                  if(noRemiseLabelEl) noRemiseLabelEl.style.display = 'none';
-                }
+          } catch (_) {}
+          // update no-remise UI if server provides it
+          try {
+            if (
+              typeof data.noRemise !== "undefined" &&
+              noRemiseLabelEl &&
+              noRemiseToggleEl
+            ) {
+              // show the control only to the host
+              if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+                noRemiseLabelEl.style.display = "inline-flex";
+                noRemiseToggleEl.checked = !!data.noRemise;
+                noRemiseToggleEl.disabled = false;
+              } else {
+                // hide control for non-hosts
+                noRemiseLabelEl.style.display = "none";
               }
-            }catch(_){ }
-            // show custom draw checkbox to host on initial fetch as well
-            try{
-              if(customDrawLabelEl && customDrawToggleEl){
-                if(myPlayerId && roomHostId && myPlayerId === roomHostId){
-                  customDrawLabelEl.style.display = 'inline-flex';
-                  // preserve local UI state for this control; do not force-assign checked
-                  customDrawToggleEl.disabled = false;
-                } else {
-                  customDrawLabelEl.style.display = 'none';
-                }
-              }
-            }catch(_){ }
-          }catch(_){ }
-          if(roomInfo && roomInfo.status === 'playing'){
-            // server already marked room as playing; redirect immediately
-            if(myPlayerId){
-              window.location.href = `/game.html?roomId=${encodeURIComponent(roomId)}&playerId=${encodeURIComponent(myPlayerId)}`;
-            } else {
-              window.location.href = `/game.html?roomId=${encodeURIComponent(roomId)}`;
             }
-          }
-        }).catch(e => { /* ignore */ });
-      });
-    }
-
-    connectAndJoin();
-
-    // Start button handler (host) — ensure custom deck is applied before starting
-    document.getElementById('startBtn').addEventListener('click', ()=>{
-      if(!socket) return;
-      // If custom draw is enabled and host selected cards, send the deck first
-      try{
-        if(customDrawToggleEl && customDrawToggleEl.checked && selectedCards.size && myPlayerId && roomHostId && myPlayerId === roomHostId){
-          socket.emit('room:deck:set', { roomId, selected: Array.from(selectedCards) }, (deckResp)=>{
-            if(deckResp && deckResp.error){ showToast(deckResp.message || deckResp.error, { background: 'rgba(200,60,60,0.95)' }); return; }
-            // now start the game
-            socket.emit('game:start', { roomId }, (resp)=>{
-              if(resp && resp.error){ log('start error', resp); showToast(resp.error || resp.message || 'Erreur', { background: 'rgba(200,60,60,0.95)' }); return; }
-              log('game:start acknowledged');
-            });
-          });
-          return;
-        }
-      }catch(_){ }
-      // fallback: start immediately
-      socket.emit('game:start', { roomId }, (resp)=>{
-        if(resp && resp.error){ log('start error', resp); showToast(resp.error || resp.message || 'Erreur', { background: 'rgba(200,60,60,0.95)' }); return; }
-        log('game:start acknowledged');
-      });
-    });
-
-    // Auto-draw toggle (host only)
-    if(autoDrawToggleEl){
-      autoDrawToggleEl.addEventListener('change', (ev)=>{
-        if(!socket) return;
-        const enabled = !!autoDrawToggleEl.checked;
-        socket.emit('room:auto_draw:set', { roomId, enabled }, (resp)=>{
-          if(resp && resp.error){ log('auto-draw error', resp); showToast(resp.error || resp.message || 'Erreur', { background: 'rgba(200,60,60,0.95)' }); return; }
-          log('auto-draw updated', resp);
+          } catch (_) {}
+          // show custom draw checkbox to host (UI-only for now)
+          try {
+            if (customDrawLabelEl && customDrawToggleEl) {
+              if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+                customDrawLabelEl.style.display = "inline-flex";
+                // do not override the user's local choice; leave checked as-is
+                customDrawToggleEl.disabled = false;
+              } else {
+                customDrawLabelEl.style.display = "none";
+              }
+            }
+          } catch (_) {}
         });
-      });
-    }
 
-    // No-remise toggle (host only) - independent from auto-draw
-    if(noRemiseToggleEl){
-      noRemiseToggleEl.addEventListener('change', (ev)=>{
-        if(!socket) return;
-        const enabled = !!noRemiseToggleEl.checked;
-        socket.emit('room:no_remise:set', { roomId, enabled }, (resp)=>{
-          if(resp && resp.error){ log('no-remise error', resp); showToast(resp.error || resp.message || 'Erreur', { background: 'rgba(200,60,60,0.95)' }); return; }
-          log('no-remise updated', resp);
-        });
-      });
-    }
-
-    // Custom draw toggle (minimal behavior)
-    // When checked, show a new section and fetch /cards to display a simple list.
-    if(customDrawToggleEl){
-      const customCardsSection = document.getElementById('customCardsSection');
-      const customCardsContainer = document.getElementById('customCardsContainer');
-      const customSelectAllBtn = document.getElementById('customSelectAll');
-      const customDeselectAllBtn = document.getElementById('customDeselectAll');
-      customDrawToggleEl.addEventListener('change', async (ev)=>{
-        const checked = !!customDrawToggleEl.checked;
-        log('custom-draw toggled (minimal)', { checked });
-        if(customCardsSection) customCardsSection.style.display = checked ? 'block' : 'none';
-        // When toggling the checkbox, inform server: if unchecked, clear custom deck on server so default deck is used.
-        try{
-          if(socket && socket.connected && myPlayerId && roomHostId && myPlayerId === roomHostId){
-            if(!checked){
-              // inform server to revert to default deck
-              socket.emit('room:deck:set', { roomId, selected: [] }, (resp)=>{
-                if(resp && resp.error) showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' });
-                else showToast('Pioche personnalisée désactivée — pioche par défaut restaurée', { background: 'rgba(40,160,40,0.95)' });
-              });
-            } else {
-              // if checked and we already have a selection, push it to server
-              if(selectedCards.size){
-                socket.emit('room:deck:set', { roomId, selected: Array.from(selectedCards) }, (resp)=>{
-                  if(resp && resp.error) showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' });
-                  else showToast('Pioche personnalisée activée', { background: 'rgba(40,160,40,0.95)' });
-                });
-              }
-            }
+        // register game started handler early so we don't miss the broadcast
+        socket.on("game:started", (data) => {
+          log("game:started", data);
+          if (myPlayerId) {
+            window.location.href = `/game.html?roomId=${encodeURIComponent(roomId)}&playerId=${encodeURIComponent(myPlayerId)}`;
+          } else {
+            window.location.href = `/game.html?roomId=${encodeURIComponent(roomId)}`;
           }
-        }catch(_){ }
-        if(checked){
-          // fetch card list and render simple names
-          if(customCardsContainer){
-            customCardsContainer.textContent = 'Chargement...';
-            try{
-              const r = await fetch('/cards');
-              const data = await r.json();
-              const cards = Array.isArray(data) ? data : (data && Array.isArray(data.cards) ? data.cards : []);
-              if(cards.length === 0){ customCardsContainer.textContent = 'Aucune carte trouvée.'; return; }
-              // restore previous selection for this room
-              try{ loadSelection(); }catch(_){}
-              const grid = document.createElement('div');
-              grid.style.display = 'grid';
-              grid.style.gridTemplateColumns = 'repeat(auto-fill,minmax(220px,1fr))';
-              grid.style.gap = '10px';
+        });
 
-              cards.forEach(c => {
-                // create the same visual structure as in game.renderHands -> .pokemon-card
-                const cardEl = document.createElement('div');
-                cardEl.className = 'pokemon-card';
-                const cardId = (c.id || c.cardId || c.name || c.title || JSON.stringify(c)).toString();
-                cardEl.dataset.cardId = cardId;
-
-                const top = document.createElement('div'); top.className = 'pokemon-card-top';
-                const art = document.createElement('div'); art.className = 'pokemon-card-art'; art.textContent = '';
-                try{
-                  const cid = (c.cardId || c.id || '').toString().toLowerCase();
-                  const titleRaw = (c.title || '').toString().toLowerCase();
-                  let imgSrc = null;
-                  if(cid === 'adoubement') imgSrc = '/assets/img/cards/adoubement.png';
-                  if(cid === 'folie') imgSrc = '/assets/img/cards/folie.png';
-                  if(cid === 'fortification') imgSrc = '/assets/img/cards/fortification.png';
-                  if(cid === 'rebond') imgSrc = '/assets/img/cards/rebond.png';
-                  if(cid === 'anneau') imgSrc = '/assets/img/cards/anneau.png';
-                  if(cid === 'brouillard') imgSrc = '/assets/img/cards/brouillard.png';
-                  if(cid === 'coincoin') imgSrc = '/assets/img/cards/coincoin.png';
-                  if(cid === 'inversion') imgSrc = '/assets/img/cards/inversion.png';
-                  if(cid === 'invisible') imgSrc = '/assets/img/cards/invisible.png';
-                  if(cid === 'kamikaze') imgSrc = '/assets/img/cards/kamikaz.png';
-                  if(cid === 'melange') imgSrc = '/assets/img/cards/mélange.png';
-                  if(cid === 'mine') imgSrc = '/assets/img/cards/mine.png';
-                  if(cid === 'promotion') imgSrc = '/assets/img/cards/promotion.png';
-                  if(cid === 'resurection') imgSrc = '/assets/img/cards/resurection.png';
-                  if(cid === 'sniper') imgSrc = '/assets/img/cards/sniper.png';
-                  if(cid === 'totem') imgSrc = '/assets/img/cards/totem.png';
-                  if(cid === 'toucher') imgSrc = '/assets/img/cards/toucher.png';
-                  if(cid === 'vole_piece') imgSrc = '/assets/img/cards/vole_piece.png';
-                  if(cid === 'double') imgSrc = '/assets/img/cards/double.png';
-                  if(cid === 'empathie') imgSrc = '/assets/img/cards/empathie.png';
-                  if(cid === 'parrure') imgSrc = '/assets/img/cards/parrure.png';
-                  if(cid === 'revolution') imgSrc = '/assets/img/cards/révolution.png';
-                  if(cid === 'doppelganger') imgSrc = '/assets/img/cards/doppelganger.png';
-                  if(cid === 'pareil') imgSrc = '/assets/img/cards/pareil.png';
-                  if(cid === 'sans_effet') imgSrc = '/assets/img/cards/sans_effet.png';
-                  if(cid === 'teleportation') imgSrc = '/assets/img/cards/teleportation.png';
-                  if(cid === 'tout') imgSrc = '/assets/img/cards/tout.png';
-                  if(cid === 'vole_carte') imgSrc = '/assets/img/cards/vole_carte.png';
-
-                  if(imgSrc){ const img = document.createElement('img'); img.src = imgSrc; img.alt = c.title || cid || 'card'; img.className = 'card-art-img'; img.style.width='100%'; img.style.height='100%'; img.style.objectFit='cover'; art.appendChild(img); }
-                }catch(e){}
-                top.appendChild(art);
-
-                const mid = document.createElement('div'); mid.className = 'pokemon-card-mid';
-                const h = document.createElement('div'); h.className = 'pokemon-card-title'; h.textContent = c.name || c.title || c.cardId || c.id || 'Carte';
-                const p = document.createElement('div'); p.className = 'pokemon-card-desc'; p.textContent = c.short || c.description || '';
-                mid.appendChild(h); mid.appendChild(p);
-
-                const footer = document.createElement('div'); footer.className = 'pokemon-card-footer';
-
-                // add a small select mark (hidden unless selected)
-                const selectMark = document.createElement('div'); selectMark.className = 'select-mark'; selectMark.textContent = '✓'; selectMark.style.display = 'none';
-                cardEl.appendChild(selectMark);
-
-                cardEl.appendChild(top); cardEl.appendChild(mid); cardEl.appendChild(footer);
-
-                // apply selection state if previously selected
-                if(selectedCards.has(cardId)){
-                  cardEl.classList.add('selected');
-                  selectMark.style.display = 'flex';
-                }
-
-                // click toggles selection (no other action in waiting room)
-                cardEl.addEventListener('click', (ev)=>{
-                  ev.stopPropagation();
-                  if(selectedCards.has(cardId)){
-                    selectedCards.delete(cardId);
-                    cardEl.classList.remove('selected');
-                    selectMark.style.display = 'none';
-                  } else {
-                    selectedCards.add(cardId);
-                    cardEl.classList.add('selected');
-                    selectMark.style.display = 'flex';
-                  }
-                  saveSelection();
-                  // if we're the host and connected AND custom-draw is enabled, update the server's custom deck selection
-                  try{
-                    if(socket && socket.connected && myPlayerId && roomHostId && myPlayerId === roomHostId && customDrawToggleEl && customDrawToggleEl.checked){
-                      socket.emit('room:deck:set', { roomId, selected: Array.from(selectedCards) }, (resp)=>{
-                        if(resp && resp.error){ showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' }); }
-                        else { showToast('Pioche personnalisée mise à jour', { background: 'rgba(40,160,40,0.95)' }); }
-                      });
+        socket.emit("room:join", { roomId, playerId }, (resp) => {
+          if (resp && resp.error) {
+            console.warn("join error", resp);
+            // do not alert or force-redirect; show error in status and keep page for debugging/retry
+            try {
+              document.getElementById("status").textContent =
+                resp.error || "Impossible de rejoindre la room";
+            } catch (e) {}
+            return;
+          }
+          myPlayerId = resp.playerId;
+          myColor = resp.color;
+          // server may or may not include hostId in the response; fall back to color
+          if (resp.hostId !== undefined && resp.hostId !== null) {
+            roomHostId = resp.hostId;
+          } else if (resp.color === "white") {
+            roomHostId = resp.playerId; // assume creator (first join) is white
+          }
+          log("Rejoint room", resp);
+          // update host UI immediately
+          if (hostLabelEl) {
+            hostLabelEl.textContent = roomHostId || "-";
+          }
+          if (youAreHostEl) {
+            youAreHostEl.style.display =
+              myPlayerId && roomHostId && myPlayerId === roomHostId
+                ? "inline"
+                : "none";
+          }
+          if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+            const btn = document.getElementById("startBtn");
+            btn.style.display = "inline-block";
+            btn.disabled = true;
+          }
+          // after join, fetch room state to avoid missing a recent 'playing' state
+          fetch(`/rooms/${encodeURIComponent(roomId)}`)
+            .then((r) => r.json())
+            .then((roomInfo) => {
+              try {
+                if (roomInfo && typeof roomInfo.autoDraw !== "undefined") {
+                  if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+                    // host: show control and set state
+                    if (autoDrawLabelEl && autoDrawToggleEl) {
+                      autoDrawLabelEl.style.display = "inline-flex";
+                      autoDrawToggleEl.checked = !!roomInfo.autoDraw;
+                      autoDrawToggleEl.disabled = false;
                     }
-                  }catch(_){ }
-                });
-
-                grid.appendChild(cardEl);
-              });
-              customCardsContainer.innerHTML = '';
-              customCardsContainer.appendChild(grid);
-            }catch(e){ customCardsContainer.textContent = 'Erreur lors du chargement des cartes.'; }
-          }
-        }
-      });
-      // wire up select all / deselect all
-      function setAllVisible(yes){
-        // find card elements in the container grid
-        const els = customCardsContainer ? customCardsContainer.querySelectorAll('.pokemon-card') : [];
-        els.forEach(el => {
-          const id = el.dataset.cardId;
-          const mark = el.querySelector('.select-mark');
-          if(yes){ selectedCards.add(id); el.classList.add('selected'); if(mark) mark.style.display = 'flex'; }
-          else { selectedCards.delete(id); el.classList.remove('selected'); if(mark) mark.style.display = 'none'; }
-        });
-        saveSelection();
-        // send selection to server if host AND custom-draw enabled
-        try{
-          if(socket && socket.connected && myPlayerId && roomHostId && myPlayerId === roomHostId && customDrawToggleEl && customDrawToggleEl.checked){
-            socket.emit('room:deck:set', { roomId, selected: Array.from(selectedCards) }, (resp)=>{
-              if(resp && resp.error) showToast(resp.message || resp.error, { background: 'rgba(200,60,60,0.95)' });
-              else showToast('Pioche personnalisée mise à jour', { background: 'rgba(40,160,40,0.95)' });
+                  } else {
+                    // non-host: hide control
+                    if (autoDrawLabelEl) autoDrawLabelEl.style.display = "none";
+                  }
+                }
+                // set no-remise independently so host sees it even if autoDraw is undefined
+                try {
+                  if (roomInfo && typeof roomInfo.noRemise !== "undefined") {
+                    if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+                      if (noRemiseLabelEl && noRemiseToggleEl) {
+                        noRemiseLabelEl.style.display = "inline-flex";
+                        noRemiseToggleEl.checked = !!roomInfo.noRemise;
+                        noRemiseToggleEl.disabled = false;
+                      }
+                    } else {
+                      if (noRemiseLabelEl)
+                        noRemiseLabelEl.style.display = "none";
+                    }
+                  }
+                } catch (_) {}
+                // show custom draw checkbox to host on initial fetch as well
+                try {
+                  if (customDrawLabelEl && customDrawToggleEl) {
+                    if (myPlayerId && roomHostId && myPlayerId === roomHostId) {
+                      customDrawLabelEl.style.display = "inline-flex";
+                      // preserve local UI state for this control; do not force-assign checked
+                      customDrawToggleEl.disabled = false;
+                    } else {
+                      customDrawLabelEl.style.display = "none";
+                    }
+                  }
+                } catch (_) {}
+              } catch (_) {}
+              if (roomInfo && roomInfo.status === "playing") {
+                // server already marked room as playing; redirect immediately
+                if (myPlayerId) {
+                  window.location.href = `/game.html?roomId=${encodeURIComponent(roomId)}&playerId=${encodeURIComponent(myPlayerId)}`;
+                } else {
+                  window.location.href = `/game.html?roomId=${encodeURIComponent(roomId)}`;
+                }
+              }
+            })
+            .catch((e) => {
+              /* ignore */
             });
+        });
+      }
+
+      connectAndJoin();
+
+      // Start button handler (host) — ensure custom deck is applied before starting
+      document.getElementById("startBtn").addEventListener("click", () => {
+        if (!socket) return;
+        // If custom draw is enabled and host selected cards, send the deck first
+        try {
+          if (
+            customDrawToggleEl &&
+            customDrawToggleEl.checked &&
+            selectedCards.size &&
+            myPlayerId &&
+            roomHostId &&
+            myPlayerId === roomHostId
+          ) {
+            socket.emit(
+              "room:deck:set",
+              { roomId, selected: Array.from(selectedCards) },
+              (deckResp) => {
+                if (deckResp && deckResp.error) {
+                  showToast(deckResp.message || deckResp.error, {
+                    background: "rgba(200,60,60,0.95)",
+                  });
+                  return;
+                }
+                // now start the game
+                socket.emit("game:start", { roomId }, (resp) => {
+                  if (resp && resp.error) {
+                    log("start error", resp);
+                    showToast(resp.error || resp.message || "Erreur", {
+                      background: "rgba(200,60,60,0.95)",
+                    });
+                    return;
+                  }
+                  log("game:start acknowledged");
+                });
+              },
+            );
+            return;
           }
-        }catch(_){ }
+        } catch (_) {}
+        // fallback: start immediately
+        socket.emit("game:start", { roomId }, (resp) => {
+          if (resp && resp.error) {
+            log("start error", resp);
+            showToast(resp.error || resp.message || "Erreur", {
+              background: "rgba(200,60,60,0.95)",
+            });
+            return;
+          }
+          log("game:start acknowledged");
+        });
+      });
+
+      // Auto-draw toggle (host only)
+      if (autoDrawToggleEl) {
+        autoDrawToggleEl.addEventListener("change", (ev) => {
+          if (!socket) return;
+          const enabled = !!autoDrawToggleEl.checked;
+          socket.emit("room:auto_draw:set", { roomId, enabled }, (resp) => {
+            if (resp && resp.error) {
+              log("auto-draw error", resp);
+              showToast(resp.error || resp.message || "Erreur", {
+                background: "rgba(200,60,60,0.95)",
+              });
+              return;
+            }
+            log("auto-draw updated", resp);
+          });
+        });
       }
-      if(customSelectAllBtn) customSelectAllBtn.addEventListener('click', (e)=>{ e.preventDefault(); setAllVisible(true); });
-      if(customDeselectAllBtn) customDeselectAllBtn.addEventListener('click', (e)=>{ e.preventDefault(); setAllVisible(false); });
-      // ensure initial state: hide unless checkbox is already checked
-      if(customDrawToggleEl.checked && customCardsSection){ customCardsSection.style.display = 'block'; customDrawToggleEl.dispatchEvent(new Event('change')); }
-    }
 
-    // Copy invite link (hidden link, no display)
-    document.getElementById('copyInviteBtn').addEventListener('click', async ()=>{
-      const link = `${window.location.origin}/waiting.html?roomId=${encodeURIComponent(roomId)}`;
-      try{
-        await navigator.clipboard.writeText(link);
-  showToast('Lien d\'invitation copié dans le presse-papier', { background: 'rgba(40,160,40,0.95)' });
-      }catch(e){
-        // fallback
-        window.prompt('Copie le lien ci-dessous', link);
+      // No-remise toggle (host only) - independent from auto-draw
+      if (noRemiseToggleEl) {
+        noRemiseToggleEl.addEventListener("change", (ev) => {
+          if (!socket) return;
+          const enabled = !!noRemiseToggleEl.checked;
+          socket.emit("room:no_remise:set", { roomId, enabled }, (resp) => {
+            if (resp && resp.error) {
+              log("no-remise error", resp);
+              showToast(resp.error || resp.message || "Erreur", {
+                background: "rgba(200,60,60,0.95)",
+              });
+              return;
+            }
+            log("no-remise updated", resp);
+          });
+        });
       }
-    });
 
-    // fallback: if socket already existed and server emits game:started earlier, ensure handler exists
-    // (handled after join)
+      // Custom draw toggle (minimal behavior)
+      // When checked, show a new section and fetch /cards to display a simple list.
+      if (customDrawToggleEl) {
+        const customCardsSection =
+          document.getElementById("customCardsSection");
+        const customCardsContainer = document.getElementById(
+          "customCardsContainer",
+        );
+        const customSelectAllBtn = document.getElementById("customSelectAll");
+        const customDeselectAllBtn =
+          document.getElementById("customDeselectAll");
+        customDrawToggleEl.addEventListener("change", async (ev) => {
+          const checked = !!customDrawToggleEl.checked;
+          log("custom-draw toggled (minimal)", { checked });
+          if (customCardsSection)
+            customCardsSection.style.display = checked ? "block" : "none";
+          // When toggling the checkbox, inform server: if unchecked, clear custom deck on server so default deck is used.
+          try {
+            if (
+              socket &&
+              socket.connected &&
+              myPlayerId &&
+              roomHostId &&
+              myPlayerId === roomHostId
+            ) {
+              if (!checked) {
+                // inform server to revert to default deck
+                socket.emit(
+                  "room:deck:set",
+                  { roomId, selected: [] },
+                  (resp) => {
+                    if (resp && resp.error)
+                      showToast(resp.message || resp.error, {
+                        background: "rgba(200,60,60,0.95)",
+                      });
+                    else
+                      showToast(
+                        "Pioche personnalisée désactivée — pioche par défaut restaurée",
+                        { background: "rgba(40,160,40,0.95)" },
+                      );
+                  },
+                );
+              } else {
+                // if checked and we already have a selection, push it to server
+                if (selectedCards.size) {
+                  socket.emit(
+                    "room:deck:set",
+                    { roomId, selected: Array.from(selectedCards) },
+                    (resp) => {
+                      if (resp && resp.error)
+                        showToast(resp.message || resp.error, {
+                          background: "rgba(200,60,60,0.95)",
+                        });
+                      else
+                        showToast("Pioche personnalisée activée", {
+                          background: "rgba(40,160,40,0.95)",
+                        });
+                    },
+                  );
+                }
+              }
+            }
+          } catch (_) {}
+          if (checked) {
+            // fetch card list and render simple names
+            if (customCardsContainer) {
+              customCardsContainer.textContent = "Chargement...";
+              try {
+                const r = await fetch("/cards");
+                const data = await r.json();
+                const cards = Array.isArray(data)
+                  ? data
+                  : data && Array.isArray(data.cards)
+                    ? data.cards
+                    : [];
+                if (cards.length === 0) {
+                  customCardsContainer.textContent = "Aucune carte trouvée.";
+                  return;
+                }
+                // restore previous selection for this room
+                try {
+                  loadSelection();
+                } catch (_) {}
+                const grid = document.createElement("div");
+                grid.style.display = "grid";
+                grid.style.gridTemplateColumns =
+                  "repeat(auto-fill,minmax(220px,1fr))";
+                grid.style.gap = "10px";
 
-    
-  </script>
-</body>
+                cards.forEach((c) => {
+                  // create the same visual structure as in game.renderHands -> .pokemon-card
+                  const cardEl = document.createElement("div");
+                  cardEl.className = "pokemon-card";
+                  const cardId = (
+                    c.id ||
+                    c.cardId ||
+                    c.name ||
+                    c.title ||
+                    JSON.stringify(c)
+                  ).toString();
+                  cardEl.dataset.cardId = cardId;
+
+                  const top = document.createElement("div");
+                  top.className = "pokemon-card-top";
+                  const art = document.createElement("div");
+                  art.className = "pokemon-card-art";
+                  art.textContent = "";
+                  try {
+                    const cid = (c.cardId || c.id || "")
+                      .toString()
+                      .toLowerCase();
+                    const titleRaw = (c.title || "").toString().toLowerCase();
+                    let imgSrc = null;
+                    if (cid === "adoubement")
+                      imgSrc = "/assets/img/cards/adoubement.png";
+                    if (cid === "folie") imgSrc = "/assets/img/cards/folie.png";
+                    if (cid === "fortification")
+                      imgSrc = "/assets/img/cards/fortification.png";
+                    if (cid === "rebond")
+                      imgSrc = "/assets/img/cards/rebond.png";
+                    if (cid === "anneau")
+                      imgSrc = "/assets/img/cards/anneau.png";
+                    if (cid === "brouillard")
+                      imgSrc = "/assets/img/cards/brouillard.png";
+                    if (cid === "coincoin")
+                      imgSrc = "/assets/img/cards/coincoin.png";
+                    if (cid === "inversion")
+                      imgSrc = "/assets/img/cards/inversion.png";
+                    if (cid === "invisible")
+                      imgSrc = "/assets/img/cards/invisible.png";
+                    if (cid === "kamikaze")
+                      imgSrc = "/assets/img/cards/kamikaz.png";
+                    if (cid === "melange")
+                      imgSrc = "/assets/img/cards/mélange.png";
+                    if (cid === "mine") imgSrc = "/assets/img/cards/mine.png";
+                    if (cid === "promotion")
+                      imgSrc = "/assets/img/cards/promotion.png";
+                    if (cid === "resurection")
+                      imgSrc = "/assets/img/cards/resurection.png";
+                    if (cid === "sniper")
+                      imgSrc = "/assets/img/cards/sniper.png";
+                    if (cid === "totem") imgSrc = "/assets/img/cards/totem.png";
+                    if (cid === "toucher")
+                      imgSrc = "/assets/img/cards/toucher.png";
+                    if (cid === "vole_piece")
+                      imgSrc = "/assets/img/cards/vole_piece.png";
+                    if (cid === "double")
+                      imgSrc = "/assets/img/cards/double.png";
+                    if (cid === "empathie")
+                      imgSrc = "/assets/img/cards/empathie.png";
+                    if (cid === "parrure")
+                      imgSrc = "/assets/img/cards/parrure.png";
+                    if (cid === "revolution")
+                      imgSrc = "/assets/img/cards/révolution.png";
+                    if (cid === "doppelganger")
+                      imgSrc = "/assets/img/cards/doppelganger.png";
+                    if (cid === "pareil")
+                      imgSrc = "/assets/img/cards/pareil.png";
+                    if (cid === "sans_effet")
+                      imgSrc = "/assets/img/cards/sans_effet.png";
+                    if (cid === "teleportation")
+                      imgSrc = "/assets/img/cards/teleportation.png";
+                    if (cid === "tout") imgSrc = "/assets/img/cards/tout.png";
+                    if (cid === "vole_carte")
+                      imgSrc = "/assets/img/cards/vole_carte.png";
+
+                    if (imgSrc) {
+                      const img = document.createElement("img");
+                      img.src = imgSrc;
+                      img.alt = c.title || cid || "card";
+                      img.className = "card-art-img";
+                      img.style.width = "100%";
+                      img.style.height = "100%";
+                      img.style.objectFit = "cover";
+                      art.appendChild(img);
+                    }
+                  } catch (e) {}
+                  top.appendChild(art);
+
+                  const mid = document.createElement("div");
+                  mid.className = "pokemon-card-mid";
+                  const h = document.createElement("div");
+                  h.className = "pokemon-card-title";
+                  h.textContent =
+                    c.name || c.title || c.cardId || c.id || "Carte";
+                  const p = document.createElement("div");
+                  p.className = "pokemon-card-desc";
+                  p.textContent = c.short || c.description || "";
+                  mid.appendChild(h);
+                  mid.appendChild(p);
+
+                  const footer = document.createElement("div");
+                  footer.className = "pokemon-card-footer";
+
+                  // add a small select mark (hidden unless selected)
+                  const selectMark = document.createElement("div");
+                  selectMark.className = "select-mark";
+                  selectMark.textContent = "✓";
+                  selectMark.style.display = "none";
+                  cardEl.appendChild(selectMark);
+
+                  cardEl.appendChild(top);
+                  cardEl.appendChild(mid);
+                  cardEl.appendChild(footer);
+
+                  // apply selection state if previously selected
+                  if (selectedCards.has(cardId)) {
+                    cardEl.classList.add("selected");
+                    selectMark.style.display = "flex";
+                  }
+
+                  // click toggles selection (no other action in waiting room)
+                  cardEl.addEventListener("click", (ev) => {
+                    ev.stopPropagation();
+                    if (selectedCards.has(cardId)) {
+                      selectedCards.delete(cardId);
+                      cardEl.classList.remove("selected");
+                      selectMark.style.display = "none";
+                    } else {
+                      selectedCards.add(cardId);
+                      cardEl.classList.add("selected");
+                      selectMark.style.display = "flex";
+                    }
+                    saveSelection();
+                    // if we're the host and connected AND custom-draw is enabled, update the server's custom deck selection
+                    try {
+                      if (
+                        socket &&
+                        socket.connected &&
+                        myPlayerId &&
+                        roomHostId &&
+                        myPlayerId === roomHostId &&
+                        customDrawToggleEl &&
+                        customDrawToggleEl.checked
+                      ) {
+                        socket.emit(
+                          "room:deck:set",
+                          { roomId, selected: Array.from(selectedCards) },
+                          (resp) => {
+                            if (resp && resp.error) {
+                              showToast(resp.message || resp.error, {
+                                background: "rgba(200,60,60,0.95)",
+                              });
+                            } else {
+                              showToast("Pioche personnalisée mise à jour", {
+                                background: "rgba(40,160,40,0.95)",
+                              });
+                            }
+                          },
+                        );
+                      }
+                    } catch (_) {}
+                  });
+
+                  grid.appendChild(cardEl);
+                });
+                customCardsContainer.innerHTML = "";
+                customCardsContainer.appendChild(grid);
+              } catch (e) {
+                customCardsContainer.textContent =
+                  "Erreur lors du chargement des cartes.";
+              }
+            }
+          }
+        });
+        // wire up select all / deselect all
+        function setAllVisible(yes) {
+          // find card elements in the container grid
+          const els = customCardsContainer
+            ? customCardsContainer.querySelectorAll(".pokemon-card")
+            : [];
+          els.forEach((el) => {
+            const id = el.dataset.cardId;
+            const mark = el.querySelector(".select-mark");
+            if (yes) {
+              selectedCards.add(id);
+              el.classList.add("selected");
+              if (mark) mark.style.display = "flex";
+            } else {
+              selectedCards.delete(id);
+              el.classList.remove("selected");
+              if (mark) mark.style.display = "none";
+            }
+          });
+          saveSelection();
+          // send selection to server if host AND custom-draw enabled
+          try {
+            if (
+              socket &&
+              socket.connected &&
+              myPlayerId &&
+              roomHostId &&
+              myPlayerId === roomHostId &&
+              customDrawToggleEl &&
+              customDrawToggleEl.checked
+            ) {
+              socket.emit(
+                "room:deck:set",
+                { roomId, selected: Array.from(selectedCards) },
+                (resp) => {
+                  if (resp && resp.error)
+                    showToast(resp.message || resp.error, {
+                      background: "rgba(200,60,60,0.95)",
+                    });
+                  else
+                    showToast("Pioche personnalisée mise à jour", {
+                      background: "rgba(40,160,40,0.95)",
+                    });
+                },
+              );
+            }
+          } catch (_) {}
+        }
+        if (customSelectAllBtn)
+          customSelectAllBtn.addEventListener("click", (e) => {
+            e.preventDefault();
+            setAllVisible(true);
+          });
+        if (customDeselectAllBtn)
+          customDeselectAllBtn.addEventListener("click", (e) => {
+            e.preventDefault();
+            setAllVisible(false);
+          });
+        // ensure initial state: hide unless checkbox is already checked
+        if (customDrawToggleEl.checked && customCardsSection) {
+          customCardsSection.style.display = "block";
+          customDrawToggleEl.dispatchEvent(new Event("change"));
+        }
+      }
+
+      // Copy invite link (hidden link, no display)
+      document
+        .getElementById("copyInviteBtn")
+        .addEventListener("click", async () => {
+          const link = `${window.location.origin}/waiting.html?roomId=${encodeURIComponent(roomId)}`;
+          try {
+            await navigator.clipboard.writeText(link);
+            showToast("Lien d'invitation copié dans le presse-papier", {
+              background: "rgba(40,160,40,0.95)",
+            });
+          } catch (e) {
+            // fallback
+            window.prompt("Copie le lien ci-dessous", link);
+          }
+        });
+
+      // fallback: if socket already existed and server emits game:started earlier, ensure handler exists
+      // (handled after join)
+    </script>
+  </body>
 </html>
