From 6628b99037d65677c14c138b16be533e05b6b988 Mon Sep 17 00:00:00 2001
From: Stephanie Gredell <s.raide@gmail.com>
Date: Sun, 7 Sep 2025 18:36:37 -0700
Subject: [PATCH] fix card hover in battle

---
 style.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index 47cf1c8..e0929c2 100644
--- a/style.css
+++ b/style.css
@@ -1733,8 +1733,57 @@ h3 {
 }
 
 
-.battle-card.playable:hover {
-    transform: translateY(0px) scale(1.05) rotate(0deg) !important;
+.battle-card:nth-child(1).playable:hover {
+    transform: translateY(-80px) scale(1.15) rotate(-8deg) !important;
+    z-index: 900;
+    margin-left: -60px;
+    margin-right: 40px;
+}
+
+.battle-card:nth-child(2).playable:hover {
+    transform: translateY(-80px) scale(1.15) rotate(-4deg) !important;
+    z-index: 900;
+    margin-left: -60px;
+    margin-right: 40px;
+}
+
+.battle-card:nth-child(3).playable:hover {
+    transform: translateY(-80px) scale(1.15) rotate(-2deg) !important;
+    z-index: 900;
+    margin-left: -60px;
+    margin-right: 40px;
+}
+
+.battle-card:nth-child(4).playable:hover {
+    transform: translateY(-80px) scale(1.15) rotate(0deg) !important;
+    z-index: 900;
+    margin-left: -60px;
+    margin-right: 40px;
+}
+
+.battle-card:nth-child(5).playable:hover {
+    transform: translateY(-80px) scale(1.15) rotate(2deg) !important;
+    z-index: 900;
+    margin-left: -60px;
+    margin-right: 40px;
+}
+
+.battle-card:nth-child(6).playable:hover {
+    transform: translateY(-80px) scale(1.15) rotate(4deg) !important;
+    z-index: 900;
+    margin-left: -60px;
+    margin-right: 40px;
+}
+
+.battle-card:nth-child(7).playable:hover {
+    transform: translateY(-80px) scale(1.15) rotate(8deg) !important;
+    z-index: 900;
+    margin-left: -60px;
+    margin-right: 40px;
+}
+
+.battle-card:nth-child(n+8).playable:hover {
+    transform: translateY(-80px) scale(1.15) rotate(12deg) !important;
     z-index: 900;
     margin-left: -60px;
     margin-right: 40px;