make platforms static

src/lib/components/Battle/BattleField.svelte

@@ -118,6 +118,20 @@
           isPlayer={false}
         />
         
+        <!-- Static Enemy Platform (always visible) -->
+        <img 
+          class="platform enemy-platform" 
+          src="/assets/grass.PNG" 
+          alt="Platform"
+          on:error={(e) => {
+            const target = e.currentTarget as HTMLImageElement;
+            const nextSibling = target.nextElementSibling as HTMLElement;
+            target.style.display = 'none';
+            if (nextSibling) nextSibling.style.display = 'block';
+          }}
+        />
+        <div class="platform-fallback enemy-platform-fallback" style="display: none;"></div>
+        
         {#if enemyVisible}
           <div class="enemy-piclet-wrapper" class:animate-in={showIntro} class:lunge={enemyLunge}>
             <!-- Enemy Battle Effects wrap the image for flicker animation -->
@@ -133,19 +147,6 @@
               />
             </BattleEffects>
             
-            <img 
-              class="platform enemy-platform" 
-              src="/assets/grass.PNG" 
-              alt="Platform"
-              on:error={(e) => {
-                const target = e.currentTarget as HTMLImageElement;
-                const nextSibling = target.nextElementSibling as HTMLElement;
-                target.style.display = 'none';
-                if (nextSibling) nextSibling.style.display = 'block';
-              }}
-            />
-            <div class="platform-fallback enemy-platform-fallback" style="display: none;"></div>
-            
             <!-- Enemy Status Effects -->
             {#if battleState?.opponentPiclet?.statusEffects}
               <div class="enemy-status-effects">
@@ -162,6 +163,21 @@
     <!-- Player Row -->
     <div class="player-row">
       <div class="player-stack" class:intro-animations={showIntro}>
+        
+        <!-- Static Player Platform (always visible) -->
+        <img 
+          class="platform player-platform" 
+          src="/assets/grass.PNG" 
+          alt="Platform"
+          on:error={(e) => {
+            const target = e.currentTarget as HTMLImageElement;
+            const nextSibling = target.nextElementSibling as HTMLElement;
+            target.style.display = 'none';
+            if (nextSibling) nextSibling.style.display = 'block';
+          }}
+        />
+        <div class="platform-fallback player-platform-fallback" style="display: none;"></div>
+        
         {#if playerVisible}
           <div class="player-piclet-wrapper" class:animate-in={showIntro} class:lunge={playerLunge}>
             <!-- Player Battle Effects wrap the image for flicker animation -->
@@ -177,19 +193,6 @@
               />
             </BattleEffects>
             
-            <img 
-              class="platform player-platform" 
-              src="/assets/grass.PNG" 
-              alt="Platform"
-              on:error={(e) => {
-                const target = e.currentTarget as HTMLImageElement;
-                const nextSibling = target.nextElementSibling as HTMLElement;
-                target.style.display = 'none';
-                if (nextSibling) nextSibling.style.display = 'block';
-              }}
-            />
-            <div class="platform-fallback player-platform-fallback" style="display: none;"></div>
-            
             <!-- Player Status Effects -->
             {#if battleState?.playerPiclet?.statusEffects}
               <div class="player-status-effects">
@@ -309,7 +312,7 @@
     height: 160px;
     position: absolute;
     bottom: -60px;
-    left: -20px;
+    right: 20px; /* Align with enemy-piclet-wrapper position */
     z-index: 0;
     object-fit: cover;
   }
@@ -345,7 +348,7 @@
     height: 160px;
     position: absolute;
     bottom: -80px;
-    left: -20px;
+    left: 20px; /* Align with player-piclet-wrapper position */
     z-index: 0;
     object-fit: cover;
   }
@@ -360,15 +363,15 @@
   .enemy-platform-fallback {
     width: 160px;
     height: 160px;
-    bottom: -80px;
-    left: -20px;
+    bottom: -60px;
+    right: 20px;
   }
   
   .player-platform-fallback {
     width: 160px;
     height: 160px;
     bottom: -80px;
-    left: -20px;
+    left: 20px;
   }
   
   /* Piclet images */