diff --git a/public/js/buildings/arena.js b/public/js/buildings/arena.js
index d4da715..238442d 100644
--- a/public/js/buildings/arena.js
+++ b/public/js/buildings/arena.js
@@ -330,68 +330,70 @@ function initArenaModes() {
 
 /* ── Deck-Auswahl Popup ────────────────────────────────────*/
 async function showDeckSelector(onConfirm) {
+  // Deck-Screen direkt im arena-mode-screen anzeigen (kein Overlay, kein z-index Problem)
+  const modeScreen = document.getElementById("arena-mode-screen");
+  if (!modeScreen) return;
+
   // Decks laden
   let decks = [];
   try {
     const res = await fetch("/api/decks");
-    if (!res.ok) throw new Error();
+    if (!res.ok) throw new Error("HTTP " + res.status);
     decks = await res.json();
-  } catch {
+  } catch (err) {
+    console.error("[Arena] Deck-Ladefehler:", err);
     showArenaError("Decks konnten nicht geladen werden.");
     return;
   }
 
-  // Overlay erstellen
-  const overlay = document.createElement("div");
-  overlay.id = "deck-select-overlay";
-  overlay.style.cssText = [
-    "position:fixed","inset:0","z-index:99999",
-    "background:rgba(0,0,0,0.75)","display:flex",
-    "align-items:center","justify-content:center"
-  ].join(";");
+  // Originalinhalt merken und ersetzen
+  const originalHTML = modeScreen.innerHTML;
+
+  function restore() {
+    modeScreen.innerHTML = originalHTML;
+    // Event-Listener auf die wiederhergestellten Karten neu anhängen
+    modeScreen.querySelectorAll(".arena-mode-card").forEach(card => {
+      card.addEventListener("click", () => {
+        const mode = card.dataset.mode;
+        if      (mode === "1v1") showDeckSelector(() => handle1v1Click(card));
+        else if (mode === "2v2") showDeckSelector(() => openTeamLobby("2v2"));
+        else if (mode === "4v4") showDeckSelector(() => openTeamLobby("4v4"));
+      });
+    });
+    selectedDeckId = null;
+  }
 
   if (decks.length === 0) {
-    // Kein Deck vorhanden
-    overlay.innerHTML = `
-      <div class="deck-select-box">
-        <div class="deck-select-title">⚠️ Kein Deck vorhanden</div>
-        <p class="deck-select-hint">
-          Du musst zuerst ein Deck erstellen bevor du kämpfen kannst.<br>
-          Gehe zur <strong>Burg</strong> → Kartendeck um ein Deck zu erstellen.
-        </p>
-        <button class="deck-select-cancel" id="deck-close-btn">Schließen</button>
-      </div>`;
-    document.body.appendChild(overlay);
-    document.getElementById("deck-close-btn").addEventListener("click", () => overlay.remove());
+    modeScreen.innerHTML = `
+      <div class="arena-title" style="margin-bottom:8px;">⚠️ Kein Deck vorhanden</div>
+      <p class="arena-subtitle" style="text-align:center;line-height:1.7;max-width:280px;">
+        Du musst zuerst ein Deck erstellen<br>bevor du kämpfen kannst.<br>
+        Gehe zur <strong style="color:#f0c84a;">Burg → Kartendeck</strong>.
+      </p>
+      <button class="arena-btn-create" id="deck-back-btn" style="margin-top:12px;">← Zurück</button>`;
+    document.getElementById("deck-back-btn").addEventListener("click", restore);
     return;
   }
 
-  // Decks als Auswahl anzeigen
   const deckRows = decks.map(d => `
-    <div class="deck-select-row ${d.card_count === 0 ? "deck-empty" : ""}"
-         data-id="${d.id}" data-count="${d.card_count}">
+    <div class="deck-select-row ${d.card_count === 0 ? "deck-empty" : ""}" data-id="${d.id}">
       <span class="deck-select-name">🃏 ${d.name}</span>
       <span class="deck-select-count">${d.card_count} Karten</span>
       ${d.card_count === 0 ? "<span class='deck-select-warn'>Leer</span>" : ""}
     </div>`).join("");
 
-  overlay.innerHTML = `
-    <div class="deck-select-box">
-      <div class="deck-select-title">⚔️ Deck auswählen</div>
-      <p class="deck-select-hint">Mit welchem Deck möchtest du kämpfen?</p>
-      <div class="deck-select-list">${deckRows}</div>
-      <div class="deck-select-actions">
-        <button class="deck-select-cancel" id="deck-cancel-btn">Abbrechen</button>
-        <button class="deck-select-confirm deck-btn-disabled" id="deck-confirm-btn" disabled>Kämpfen ⚔️</button>
-      </div>
+  modeScreen.innerHTML = `
+    <div class="arena-title" style="margin-bottom:4px;">⚔️ Deck auswählen</div>
+    <p class="arena-subtitle">Mit welchem Deck möchtest du kämpfen?</p>
+    <div class="deck-select-list" style="width:100%;max-height:220px;overflow-y:auto;">${deckRows}</div>
+    <div class="deck-select-actions" style="width:100%;display:flex;gap:10px;justify-content:flex-end;margin-top:10px;">
+      <button class="deck-select-cancel" id="deck-cancel-btn">← Zurück</button>
+      <button class="deck-select-confirm deck-btn-disabled" id="deck-confirm-btn" disabled>Kämpfen ⚔️</button>
     </div>`;
 
-  document.body.appendChild(overlay);
-
-  // Deck anklicken
-  overlay.querySelectorAll(".deck-select-row:not(.deck-empty)").forEach(row => {
+  modeScreen.querySelectorAll(".deck-select-row:not(.deck-empty)").forEach(row => {
     row.addEventListener("click", () => {
-      overlay.querySelectorAll(".deck-select-row").forEach(r => r.classList.remove("deck-selected"));
+      modeScreen.querySelectorAll(".deck-select-row").forEach(r => r.classList.remove("deck-selected"));
       row.classList.add("deck-selected");
       selectedDeckId = Number(row.dataset.id);
       const btn = document.getElementById("deck-confirm-btn");
@@ -400,14 +402,11 @@ async function showDeckSelector(onConfirm) {
     });
   });
 
-  document.getElementById("deck-cancel-btn").addEventListener("click", () => {
-    overlay.remove();
-    selectedDeckId = null;
-  });
+  document.getElementById("deck-cancel-btn").addEventListener("click", restore);
 
   document.getElementById("deck-confirm-btn").addEventListener("click", () => {
     if (!selectedDeckId) return;
-    overlay.remove();
+    restore();
     onConfirm();
   });
 }