GRASS

src/App.svelte

@@ -34,10 +34,12 @@
   
   // UI state
   let isDetailPageOpen = $state(false);
+  let isInBattle = $state(false);
   
   $effect(() => {
     const unsubscribe = uiStore.subscribe(state => {
       isDetailPageOpen = state.isDetailPageOpen;
+      isInBattle = state.isInBattle;
     });
     return unsubscribe;
   });
@@ -122,7 +124,7 @@
 </script>
 
 <div class="app">
-  {#if !isDetailPageOpen}
+  {#if !isDetailPageOpen && !isInBattle}
     <ProgressBar />
     <AppHeader {hfAuth} currentTab={tabNames[activeTab]} />
   {/if}
@@ -141,7 +143,7 @@
     {/if}
   </main>
   
-  {#if !isDetailPageOpen}
+  {#if !isDetailPageOpen && !isInBattle}
     <TabBar {activeTab} onTabChange={handleTabChange} />
   {/if}
 </div>

src/lib/components/Battle/BattleField.svelte

@@ -183,7 +183,7 @@
     position: absolute;
     bottom: -20px;
     left: -20px;
-    z-index: -1;
+    z-index: 0;
   }
   
   /* Player Row */
@@ -217,7 +217,7 @@
     position: absolute;
     bottom: -40px;
     left: -20px;
-    z-index: -1;
+    z-index: 0;
   }
   
   /* Platform fallbacks */
@@ -245,6 +245,8 @@
   .piclet-image {
     image-rendering: auto;
     filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.1));
+    position: relative;
+    z-index: 1;
   }
   
   .spacer {

src/lib/components/Pages/Encounters.svelte

@@ -6,6 +6,7 @@
   import { EncounterService } from '$lib/db/encounterService';
   import { getOrCreateGameState, incrementCounter, addProgressPoints } from '$lib/db/gameState';
   import { db } from '$lib/db';
+  import { uiStore } from '$lib/stores/ui';
   import Battle from './Battle.svelte';
   
   let encounters: Encounter[] = [];
@@ -178,6 +179,7 @@
       battleEnemyPiclet = enemyPiclet;
       battleIsWild = true;
       showBattle = true;
+      uiStore.enterBattle();
     } catch (error) {
       console.error('Error starting battle:', error);
     }
@@ -298,6 +300,7 @@
   
   function handleBattleEnd(result: any) {
     showBattle = false;
+    uiStore.exitBattle();
     
     if (result === true) {
       // Victory

src/lib/stores/ui.ts

@@ -2,17 +2,21 @@ import { writable } from 'svelte/store';
 
 interface UIState {
   isDetailPageOpen: boolean;
+  isInBattle: boolean;
 }
 
 function createUIStore() {
   const { subscribe, set, update } = writable<UIState>({
-    isDetailPageOpen: false
+    isDetailPageOpen: false,
+    isInBattle: false
   });
 
   return {
     subscribe,
     openDetailPage: () => update(state => ({ ...state, isDetailPageOpen: true })),
-    closeDetailPage: () => update(state => ({ ...state, isDetailPageOpen: false }))
+    closeDetailPage: () => update(state => ({ ...state, isDetailPageOpen: false })),
+    enterBattle: () => update(state => ({ ...state, isInBattle: true })),
+    exitBattle: () => update(state => ({ ...state, isInBattle: false }))
   };
 }