From 4ba993edb8f5fb2be58c9d69154b553ea89a0cdf Mon Sep 17 00:00:00 2001
From: cay <cay@joksch.ch>
Date: Mon, 13 Apr 2026 10:08:24 +0100
Subject: [PATCH] drghde

---
 public/css/1v1.css        |  8 ++++++--
 views/1v1-battlefield.ejs | 21 +++++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/public/css/1v1.css b/public/css/1v1.css
index 49c54a4..e8a8258 100644
--- a/public/css/1v1.css
+++ b/public/css/1v1.css
@@ -412,7 +412,10 @@ body {
   height: calc(var(--s) * 160);
   border-radius: calc(var(--s) * 9);
   border: 2px dashed rgba(255, 215, 80, 0.35);
-  background: rgba(10, 8, 5, 0.92); /* dunkles Backing – deckt transparente PNG-Bereiche ab */
+  background-color: rgba(10, 8, 5, 0.92);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -431,6 +434,7 @@ body {
   opacity: 0.2;
 }
 
+
 /* Right side: action icons */
 .action-hud {
   display: flex;
@@ -707,7 +711,7 @@ body {
   border-color: rgba(255, 215, 80, 0.6);
 }
 
-/* Hand-Slot: Karte ist drin */
+/* Hand-Slot: Karte drin – border auf solid, background-image via JS gesetzt */
 .hand-slot.hand-slot--filled {
   border-style: solid;
   border-color: rgba(255, 215, 80, 0.5);
diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index 4f30d47..bdff279 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -428,6 +428,7 @@
         if (!slot) return;
 
         if (!state) {
+          slot.style.backgroundImage = '';
           slot.innerHTML = '<span class="hs-icon">🃏</span>';
           slot.classList.remove("hand-slot-ready", "hand-slot--filled");
           slot.draggable = false;
@@ -461,15 +462,19 @@
             ? `<div class="hand-slot-ready-badge">SPIELEN</div>`
             : "";
 
-        // Bild als normales Block-Element – kein position:absolute, kein z-index
+        // ── Karte als CSS background-image auf dem Slot ──────────────────────
+        // Kein <img>-Element → keine Flex-Höhen-Probleme, kein z-index-Konflikt.
+        // background-color (#0a0805) deckt transparente PNG-Bereiche solid ab.
+        if (card.image) {
+          slot.style.backgroundImage = `url('/images/cards/${card.image}')`;
+        } else {
+          slot.style.backgroundImage = 'none';
+        }
+
         slot.innerHTML = card.image
-          ? `<img src="/images/cards/${card.image}"
-                  onerror="this.src='/images/items/rueckseite.png'"
-                  title="${card.name}"
-                  draggable="false"
-                  style="width:100%;height:100%;display:block;object-fit:cover;">
-             ${statsHtml}${readyBadge}`
-          : `<div style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:Cinzel,serif;">
+          ? `${statsHtml}${readyBadge}`
+          : `<div style="width:100%;height:100%;display:flex;flex-direction:column;
+               align-items:center;justify-content:center;gap:4px;font-family:Cinzel,serif;">
                <span style="font-size:18px;">⚔️</span>
                <span style="font-size:9px;color:#f0d9a6;text-align:center;">${card.name}</span>
              </div>${statsHtml}${readyBadge}`;