From 604c47074513efdbeca7ad12467542d73f67e86a Mon Sep 17 00:00:00 2001
From: cay <cay@joksch.ch>
Date: Sun, 12 Apr 2026 14:04:11 +0100
Subject: [PATCH] ztksdrz

---
 public/css/1v1.css        |  7 ++++++-
 views/1v1-battlefield.ejs | 27 +++++++++++++++++++++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/public/css/1v1.css b/public/css/1v1.css
index 3ab07ee..deb9fb4 100644
--- a/public/css/1v1.css
+++ b/public/css/1v1.css
@@ -418,7 +418,12 @@ body {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s ease;
+  /* 'all' würde backdrop-filter/background mitanimieren und Flicker erzeugen */
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
   position: relative;
   overflow: visible;
   box-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4);
diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index 307f9a4..376d4a3 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -428,6 +428,12 @@
         if (!slot) return;
 
         if (!state) {
+          // Inline-Styles aus dem Karten-Render wieder entfernen
+          slot.style.background = "";
+          slot.style.backdropFilter = "";
+          slot.style.webkitBackdropFilter = "";
+          slot.style.overflow = "";
+          slot.style.padding = "";
           slot.innerHTML = '<span class="hs-icon">🃏</span>';
           slot.classList.remove("hand-slot-ready", "hand-slot--filled");
           slot.draggable = false;
@@ -461,12 +467,21 @@
             ? `<div class="hand-slot-ready-badge">SPIELEN</div>`
             : "";
 
+        // Slot direkt stylen – umgeht Compositing-Probleme von backdrop-filter
+        slot.style.background = "transparent";
+        slot.style.backdropFilter = "none";
+        slot.style.webkitBackdropFilter = "none";
+        slot.style.overflow = "hidden";
+        slot.style.padding = "0";
+
         slot.innerHTML = card.image
-          ? `<img src="/images/cards/${card.image}"
-               onerror="this.src='/images/items/rueckseite.png'"
-               title="${card.name}"
-               draggable="false"
-               style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;">
+          ? `<div style="position:absolute;inset:0;z-index:0;">
+               <img src="/images/cards/${card.image}"
+                    onerror="this.src='/images/items/rueckseite.png'"
+                    title="${card.name}"
+                    draggable="false"
+                    style="width:100%;height:100%;object-fit:cover;display:block;">
+             </div>
              ${statsHtml}${readyBadge}`
           : `<div style="display:flex;flex-direction:column;align-items:center;
                justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;">
@@ -475,7 +490,7 @@
              </div>${statsHtml}${readyBadge}`;
 
         slot.classList.toggle("hand-slot-ready", isReady);
-        slot.classList.add("hand-slot--filled"); // Hintergrund + ::before entfernen
+        slot.classList.add("hand-slot--filled");
 
         // Drag & Drop: nur wenn Karte bereit UND mein Zug
         if (isReady && isMyTurn) {