BATTLE

src/lib/components/Battle/BattleControls.svelte

@@ -2,6 +2,7 @@
   import type { PicletInstance } from '$lib/db/schema';
   import { db } from '$lib/db';
   import ActionButtons from './ActionButtons.svelte';
+  import TypewriterText from './TypewriterText.svelte';
   
   export let currentMessage: string;
   export let battlePhase: 'intro' | 'main' | 'moveSelect' | 'picletSelect' | 'ended';
@@ -33,7 +34,7 @@
 <div class="battle-controls">
   <!-- Message Bar -->
   <div class="message-bar {battleEnded ? 'special' : ''}">
-    <p>{currentMessage}</p>
+    <p><TypewriterText text={currentMessage} speed={25} /></p>
   </div>
   
   <!-- Action Area -->

src/lib/components/Battle/BattleField.svelte

@@ -255,21 +255,21 @@
   
   @media (max-width: 768px) {
     .enemy-image {
-      width: 80px;
-      height: 80px;
+      width: 100px;
+      height: 100px;
     }
     
     .player-image {
-      width: 100px;
-      height: 100px;
+      width: 120px;
+      height: 120px;
     }
     
     .enemy-piclet-wrapper {
-      right: 20px;
+      right: 40px;
     }
     
     .player-piclet-wrapper {
-      left: 20px;
+      left: 40px;
     }
   }
 </style>

src/lib/components/Battle/PicletInfo.svelte

@@ -33,7 +33,8 @@
     <!-- HP Text (Player only) -->
     {#if isPlayer}
       <div class="hp-text">
-        {displayHp}/{piclet.maxHp}
+        <span class="hp-label">HP</span>
+        <span class="hp-values">{displayHp}/{piclet.maxHp}</span>
       </div>
       
       <!-- XP Bar (Player only) -->
@@ -121,12 +122,22 @@
   
   /* HP Text */
   .hp-text {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     font-size: 11px;
     color: #666;
-    text-align: right;
     margin-bottom: 4px;
   }
   
+  .hp-label {
+    font-weight: 600;
+  }
+  
+  .hp-values {
+    text-align: right;
+  }
+  
   /* XP Bar */
   .xp-bar {
     width: 120px;

src/lib/components/Battle/TypewriterText.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  export let text: string = '';
+  export let speed: number = 30; // milliseconds per character
+  
+  let displayedText = '';
+  let currentIndex = 0;
+  let intervalId: number | null = null;
+  
+  function startTyping() {
+    // Reset when text changes
+    displayedText = '';
+    currentIndex = 0;
+    
+    // Clear any existing interval
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+    
+    // Start typing effect
+    intervalId = setInterval(() => {
+      if (currentIndex < text.length) {
+        displayedText += text[currentIndex];
+        currentIndex++;
+      } else {
+        if (intervalId) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+      }
+    }, speed);
+  }
+  
+  // Watch for text changes
+  $: if (text) {
+    startTyping();
+  }
+  
+  onMount(() => {
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  });
+</script>
+
+<span>{displayedText}</span>