From 391c2448d8a5315f0e4d60689750488825a28ca2 Mon Sep 17 00:00:00 2001
From: cay <cay@joksch.ch>
Date: Fri, 10 Apr 2026 06:51:11 +0100
Subject: [PATCH] fkfg

---
 public/css/1v1.css        | 64 ++++++++++++++++++++++-----------------
 views/1v1-battlefield.ejs | 28 +++++++++--------
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/public/css/1v1.css b/public/css/1v1.css
index d5358c0..c541097 100644
--- a/public/css/1v1.css
+++ b/public/css/1v1.css
@@ -420,7 +420,7 @@ body {
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   box-shadow: 0 calc(var(--s) * 4) calc(var(--s) * 12) rgba(0, 0, 0, 0.4);
 }
 .hand-slot::before {
@@ -590,50 +590,58 @@ body {
   box-shadow: 0 0 calc(var(--s) * 16) rgba(255, 255, 255, 0.2);
 }
 
-/* ── Karten-Stats Overlay (Hand & Feld) ── */
+/* ── Karten-Stats Overlay – Slotmaschinen-Style (Eck-Badges) ── */
 .card-stat-overlay {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  gap: calc(var(--s) * 3);
-  padding: calc(var(--s) * 3) calc(var(--s) * 2);
-  background: linear-gradient(transparent, rgba(0,0,0,0.82));
-  border-radius: 0 0 calc(var(--s) * 7) calc(var(--s) * 7);
+  inset: 0;
   pointer-events: none;
   z-index: 5;
 }
 
+/* Basis-Badge: runder Kreis */
 .cs-badge {
+  position: absolute;
+  width:  calc(var(--s) * 22);
+  height: calc(var(--s) * 22);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: "Cinzel", serif;
-  font-size: calc(var(--s) * 9);
+  font-size: calc(var(--s) * 11);
   font-weight: 700;
-  padding: calc(var(--s) * 1.5) calc(var(--s) * 4);
-  border-radius: calc(var(--s) * 3);
-  letter-spacing: 0;
   line-height: 1;
-  white-space: nowrap;
+  box-shadow: 0 calc(var(--s) * 2) calc(var(--s) * 6) rgba(0,0,0,0.8);
 }
 
+/* ⚔ Angriff – blauer Kreis oben-links */
 .cs-atk {
-  background: rgba(180, 30, 30, 0.82);
-  border: 1px solid rgba(255, 80, 80, 0.55);
-  color: #ffb0b0;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
+  top:  calc(var(--s) * 6);
+  left: calc(var(--s) * 6);
+  background: radial-gradient(circle at 40% 35%, #4a90d9, #1a4a8a);
+  border: calc(var(--s) * 2) solid rgba(120, 180, 255, 0.8);
+  color: #fff;
 }
+
+/* 🛡 Verteidigung – roter Kreis oben-rechts */
 .cs-def {
-  background: rgba(30, 80, 160, 0.82);
-  border: 1px solid rgba(80, 140, 255, 0.55);
-  color: #a8c8ff;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
+  top:   calc(var(--s) * 6);
+  right: calc(var(--s) * 6);
+  background: radial-gradient(circle at 40% 35%, #d94a4a, #8a1a1a);
+  border: calc(var(--s) * 2) solid rgba(255, 120, 120, 0.8);
+  color: #fff;
 }
+
+/* ⏱ Cooldown – gold Badge unten-rechts */
 .cs-cd {
-  background: rgba(120, 60, 0, 0.82);
-  border: 1px solid rgba(200, 140, 40, 0.55);
-  color: #ffd080;
-  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
+  bottom: calc(var(--s) * 6);
+  right:  calc(var(--s) * 6);
+  background: radial-gradient(circle at 40% 35%, #c8960c, #6b4b00);
+  border: calc(var(--s) * 2) solid rgba(255, 210, 60, 0.8);
+  color: #fff;
+  width:  calc(var(--s) * 20);
+  height: calc(var(--s) * 20);
+  font-size: calc(var(--s) * 10);
 }
 
 /* Belegte Feldslots: Rand golden statt gestrichelt */
diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index b782413..b7e9a60 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -75,10 +75,14 @@
       color: #f0d060;
       text-shadow: 0 1px 3px rgba(0,0,0,0.8);
     }
-    .hand-slot-card {
-      border: 1px solid rgba(200,150,42,0.4) !important;
-    }
-    .hand-slot-card:hover {
+.hand-slot-card {
+  border: 1px solid rgba(200,150,42,0.4) !important;
+}
+.hand-slot-card > img {
+  border-radius: calc(var(--s) * 7);
+  overflow: hidden;
+}
+.hand-slot-card:hover {
       border-color: rgba(200,150,42,0.9) !important;
       transform: translateY(-4px);
       transition: transform 0.15s;
@@ -274,16 +278,16 @@
 
             const statsHtml = showStats ? `
               <div class="card-stat-overlay">
-                ${hasAtk ? `<span class="cs-badge cs-atk">⚔ ${card.attack}</span>`  : ""}
-                ${hasDef ? `<span class="cs-badge cs-def">🛡 ${card.defense}</span>` : ""}
-                ${hasCd  ? `<span class="cs-badge cs-cd">⏱ ${card.cd}</span>`       : ""}
+                ${hasAtk ? `<span class="cs-badge cs-atk">${card.attack}</span>`  : ""}
+                ${hasDef ? `<span class="cs-badge cs-def">${card.defense}</span>` : ""}
+                ${hasCd  ? `<span class="cs-badge cs-cd">${card.cd}</span>`       : ""}
               </div>` : "";
 
             slot.innerHTML = card.image
               ? `<img src="/images/cards/${card.image}"
                    onerror="this.src='/images/items/rueckseite.png'"
                    title="${card.name}"
-                   style="width:100%;height:100%;object-fit:cover;border-radius:7px;">
+                   style="width:100%;height:100%;object-fit:contain;border-radius:7px;display:block;">
                  ${statsHtml}`
               : `<div style="display:flex;flex-direction:column;align-items:center;
                    justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;">
@@ -305,9 +309,9 @@
         const hasCd  = card.cd      != null;
         const statsHtml = (hasAtk || hasDef || hasCd) ? `
           <div class="card-stat-overlay">
-            ${hasAtk ? `<span class="cs-badge cs-atk">⚔ ${card.attack}</span>`  : ""}
-            ${hasDef ? `<span class="cs-badge cs-def">🛡 ${card.defense}</span>` : ""}
-            ${hasCd  ? `<span class="cs-badge cs-cd">⏱ ${card.cd}</span>`       : ""}
+            ${hasAtk ? `<span class="cs-badge cs-atk">${card.attack}</span>`  : ""}
+            ${hasDef ? `<span class="cs-badge cs-def">${card.defense}</span>` : ""}
+            ${hasCd  ? `<span class="cs-badge cs-cd">${card.cd}</span>`       : ""}
           </div>` : "";
 
         slot.classList.add("slot-occupied");
@@ -315,7 +319,7 @@
           ? `<img src="/images/cards/${card.image}"
                onerror="this.src='/images/items/rueckseite.png'"
                title="${card.name}"
-               style="width:100%;height:100%;object-fit:cover;border-radius:7px;">
+               style="width:100%;height:100%;object-fit:contain;border-radius:7px;display:block;">
              ${statsHtml}`
           : `<div style="display:flex;flex-direction:column;align-items:center;
                justify-content:center;height:100%;gap:4px;font-family:Cinzel,serif;padding:4px;">