diff --git a/public/css/1v1.css b/public/css/1v1.css
index ddda4f4..0b16c9b 100644
--- a/public/css/1v1.css
+++ b/public/css/1v1.css
@@ -599,49 +599,58 @@ body {
   border-radius: calc(var(--s) * 7);
 }
 
-/* Gemeinsamer Badge-Stil: runder Kreis */
-.cs-badge {
+/* ⚔ Angriff – roter Pill, rechts mittig (wie kd-stat-atk) */
+.cs-atk {
   position: absolute;
-  width:  calc(var(--s) * 24);
-  height: calc(var(--s) * 24);
+  right: calc(var(--s) * 12);
+  top: 40%;
+  transform: translateY(-50%);
+  background: rgba(180, 40, 20, 0.88);
+  border: 1px solid #ff6040;
+  border-radius: calc(var(--s) * 45);
+  color: #fff;
+  font-family: "Cinzel", serif;
+  font-size: calc(var(--s) * 10);
+  font-weight: bold;
+  padding: calc(var(--s) * 2) calc(var(--s) * 5);
+  z-index: 5;
+}
+
+/* 🛡 Verteidigung – blauer Pill, links mittig (wie kd-stat-def) */
+.cs-def {
+  position: absolute;
+  left: calc(var(--s) * 12);
+  top: 40%;
+  transform: translateY(-50%);
+  background: rgba(20, 80, 180, 0.88);
+  border: 1px solid #4090ff;
+  border-radius: calc(var(--s) * 45);
+  color: #fff;
+  font-family: "Cinzel", serif;
+  font-size: calc(var(--s) * 10);
+  font-weight: bold;
+  padding: calc(var(--s) * 2) calc(var(--s) * 5);
+  z-index: 5;
+}
+
+/* ⏱ Cooldown – goldener Kreis, unten-rechts (wie kd-stat-cd) */
+.cs-cd {
+  position: absolute;
+  bottom: calc(var(--s) * 7);
+  right:  calc(var(--s) * 11);
+  width:  calc(var(--s) * 22);
+  height: calc(var(--s) * 22);
   border-radius: 50%;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px solid #f0d060;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "Cinzel", serif;
-  font-size: calc(var(--s) * 12);
-  font-weight: 700;
-  line-height: 1;
-  box-shadow:
-    0 calc(var(--s) * 2) calc(var(--s) * 6) rgba(0,0,0,0.85),
-    inset 0 1px 0 rgba(255,255,255,0.2);
-  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
-  color: #fff;
-}
-
-/* ⚔ Angriff – blau, oben-links (wie Slotmaschine) */
-.cs-atk {
-  top:  calc(var(--s) * 7);
-  left: calc(var(--s) * 7);
-  background: radial-gradient(circle at 38% 32%, #5ba8e8, #1a4f9a);
-  border: calc(var(--s) * 2) solid rgba(140, 200, 255, 0.85);
-}
-
-/* 🛡 Verteidigung – rot, oben-rechts (wie Slotmaschine) */
-.cs-def {
-  top:   calc(var(--s) * 7);
-  right: calc(var(--s) * 7);
-  background: radial-gradient(circle at 38% 32%, #e85b5b, #9a1a1a);
-  border: calc(var(--s) * 2) solid rgba(255, 140, 140, 0.85);
-}
-
-/* ⏱ Cooldown – gold, unten-rechts (wie Slotmaschine) */
-.cs-cd {
-  bottom: calc(var(--s) * 7);
-  right:  calc(var(--s) * 7);
-  background: radial-gradient(circle at 38% 32%, #d4a020, #7a5200);
-  border: calc(var(--s) * 2) solid rgba(255, 210, 80, 0.85);
-  font-size: calc(var(--s) * 11);
+  font-size: calc(var(--s) * 9);
+  font-weight: bold;
+  color: #f0d9a6;
+  z-index: 5;
 }
 
 /* Belegte Feldslots */
diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index 312e6cf..c20b7d6 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -283,9 +283,9 @@
 
             const statsHtml = showStats ? `
               <div class="card-stat-overlay">
-                ${hasAtk ? `<span class="cs-badge cs-atk">${atkVal}</span>` : ""}
-                ${hasDef ? `<span class="cs-badge cs-def">${defVal}</span>` : ""}
-                ${hasCd  ? `<span class="cs-badge cs-cd">${cdVal}</span>`   : ""}
+                ${hasAtk ? `<span class="cs-atk">${atkVal}</span>` : ""}
+                ${hasDef ? `<span class="cs-def">${defVal}</span>` : ""}
+                ${hasCd  ? `<span class="cs-cd">${cdVal}</span>`   : ""}
               </div>` : "";
 
             slot.innerHTML = card.image
@@ -318,9 +318,9 @@
         const hasCd  = cdVal  != null;
         const statsHtml = (hasAtk || hasDef || hasCd) ? `
           <div class="card-stat-overlay">
-            ${hasAtk ? `<span class="cs-badge cs-atk">${atkVal}</span>` : ""}
-            ${hasDef ? `<span class="cs-badge cs-def">${defVal}</span>` : ""}
-            ${hasCd  ? `<span class="cs-badge cs-cd">${cdVal}</span>`   : ""}
+            ${hasAtk ? `<span class="cs-atk">${atkVal}</span>` : ""}
+            ${hasDef ? `<span class="cs-def">${defVal}</span>` : ""}
+            ${hasCd  ? `<span class="cs-cd">${cdVal}</span>`   : ""}
           </div>` : "";
 
         slot.classList.add("slot-occupied");