From c9dbd6c8424d0af68dc28047fbc4b1d893148114 Mon Sep 17 00:00:00 2001
From: cay <cay@joksch.ch>
Date: Sun, 12 Apr 2026 10:27:28 +0100
Subject: [PATCH] srthsert

---
 public/css/1v1.css        | 62 +++++++++++++++++++++++++++++++++++++--
 views/1v1-battlefield.ejs |  5 ++++
 2 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/public/css/1v1.css b/public/css/1v1.css
index 3bb2a54..a7ee880 100644
--- a/public/css/1v1.css
+++ b/public/css/1v1.css
@@ -257,9 +257,9 @@ body {
 }
 
 .card-slot {
-  width: calc(var(--s) * 90);
-  height: calc(var(--s) * 140);
-  border-radius: calc(var(--s) * 10);
+  width: calc(var(--s) * 105);
+  height: calc(var(--s) * 160);
+  border-radius: calc(var(--s) * 9);
   border: 2px dashed rgba(255, 215, 80, 0.35);
   background: rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(3px);
@@ -829,3 +829,59 @@ body {
   letter-spacing: 1px;
   transition: color 0.3s;
 }
+
+/* ═══════════════════════════════════════════════════════════
+   PLACEMENT ZONES – Linker Spieler (Slots 1–3) & Rechter Spieler (Slots 9–11)
+═══════════════════════════════════════════════════════════ */
+
+/* Linke Zone (Slots 1–3): Gold/Amber für Spieler 1 */
+.board.my-side-left .card-row .card-slot:nth-child(-n+3),
+.board.my-side-right .card-row .card-slot:nth-last-child(-n+3) {
+  border-color: rgba(200, 150, 42, 0.75);
+  background: rgba(180, 120, 20, 0.18);
+  box-shadow:
+    0 0 0 1px rgba(200, 150, 42, 0.2),
+    0 calc(var(--s) * 4) calc(var(--s) * 14) rgba(0, 0, 0, 0.3),
+    inset 0 0 calc(var(--s) * 20) rgba(200, 150, 42, 0.08);
+}
+
+/* Hover auf eigener Zone: stärker leuchten */
+.board.my-side-left .card-row .card-slot:nth-child(-n+3):hover,
+.board.my-side-right .card-row .card-slot:nth-last-child(-n+3):hover {
+  border-color: rgba(240, 190, 60, 1);
+  background: rgba(200, 140, 30, 0.28);
+  box-shadow:
+    0 0 0 2px rgba(240, 190, 60, 0.35),
+    0 0 calc(var(--s) * 18) rgba(200, 150, 42, 0.4);
+  transform: translateY(calc(var(--s) * -2));
+}
+
+/* Zonen-Label oben im Slot (kleine Markierung) */
+.board.my-side-left .card-row .card-slot:nth-child(-n+3)::after,
+.board.my-side-right .card-row .card-slot:nth-last-child(-n+3)::after {
+  content: "⚔";
+  position: absolute;
+  top: calc(var(--s) * 5);
+  font-size: calc(var(--s) * 10);
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+/* Gegner-Zone: dezentes Blau/Lila – nicht bespielbar */
+.board.my-side-left .card-row .card-slot:nth-last-child(-n+3),
+.board.my-side-right .card-row .card-slot:nth-child(-n+3) {
+  border-color: rgba(80, 130, 200, 0.45);
+  background: rgba(40, 80, 160, 0.10);
+  cursor: not-allowed;
+  opacity: 0.75;
+}
+
+.board.my-side-left .card-row .card-slot:nth-last-child(-n+3)::after,
+.board.my-side-right .card-row .card-slot:nth-child(-n+3)::after {
+  content: "🛡";
+  position: absolute;
+  top: calc(var(--s) * 5);
+  font-size: calc(var(--s) * 10);
+  opacity: 0.25;
+  pointer-events: none;
+}
diff --git a/views/1v1-battlefield.ejs b/views/1v1-battlefield.ejs
index 061b636..780393c 100644
--- a/views/1v1-battlefield.ejs
+++ b/views/1v1-battlefield.ejs
@@ -720,6 +720,11 @@
       const mySlot = urlParams.get("slot") || "<%= mySlot  || 'player1' %>";
       const amIPlayer1 = mySlot === "player1";
 
+      // Board-Klasse setzen damit CSS die richtigen Zonen einfärbt
+      document.querySelector(".board")?.classList.add(
+        amIPlayer1 ? "my-side-left" : "my-side-right"
+      );
+
       // Gegner-Name direkt aus URL setzen (kommt aus match_found, immer korrekt)
       const opponentNameFromUrl = urlParams.get("opponent");
       if (opponentNameFromUrl) {