btr disp

src/lib/components/Battle/BattleControls.svelte

@@ -59,10 +59,10 @@
     padding: 1rem;
     background: #f8f9fa;
     border-bottom: 1px solid #e0e0e0;
-    text-align: center;
+    text-align: left;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
   }
   
   .message-bar.special {

src/lib/components/Battle/BattleEffects.svelte

@@ -21,6 +21,7 @@
   let isFainting = false;
   let faintProgress = 0;
   let faintAnimationId: number;
+  let hasFainted = false;
   
   // Particle system configuration
   const PARTICLES_PER_EFFECT = 6; // Number of emoji particles per effect
@@ -69,7 +70,7 @@
   }
   
   // Watch for faint changes to trigger faint animation
-  $: if (faint && !isFainting) {
+  $: if (faint && !isFainting && !hasFainted) {
     startFaintAnimation();
   }
   
@@ -118,6 +119,7 @@
         // Animation completed
         isFainting = false;
         faintProgress = 1; // Keep final state
+        hasFainted = true; // Mark as permanently fainted
       }
     }
     
@@ -143,8 +145,8 @@
     class="effects-container" 
     class:is-fainting={faint}
     style="
-      opacity: {(flash && isFlickering) ? (flickerVisible ? 1 : 0) : (faint && faintProgress >= 1 ? 0 : 1)};
-      {faint ? `
+      opacity: {(flash && isFlickering) ? (flickerVisible ? 1 : 0) : (hasFainted || (faint && faintProgress >= 1) ? 0 : 1)};
+      {faint || hasFainted ? `
         transform: 
           scale(1, ${Math.max(0, 1 - faintProgress)})
           matrix(1, 0, ${-faintProgress * 0.5}, 1, 0, 0);
@@ -185,6 +187,7 @@
     position: relative;
     display: inline-block;
     transition: opacity 0.05s ease;
+    z-index: 2; /* Ensure effects appear above platform (z-index: 0) */
   }
   
   .effect-particle {

src/lib/components/Battle/BattleField.svelte

@@ -20,6 +20,8 @@
   export let enemyFlash: boolean = false;
   export let playerFaint: boolean = false;
   export let enemyFaint: boolean = false;
+  export let playerLunge: boolean = false;
+  export let enemyLunge: boolean = false;
   
   // Animation states
   let playerVisible = false;
@@ -74,7 +76,7 @@
         />
         
         {#if enemyVisible}
-          <div class="enemy-piclet-wrapper" class:animate-in={showIntro}>
+          <div class="enemy-piclet-wrapper" class:animate-in={showIntro} class:lunge={enemyLunge}>
             <!-- Enemy Battle Effects wrap the image for flicker animation -->
             <BattleEffects effects={enemyEffects} flash={enemyFlash} faint={enemyFaint}>
               <img 
@@ -118,7 +120,7 @@
     <div class="player-row">
       <div class="player-stack" class:intro-animations={showIntro}>
         {#if playerVisible}
-          <div class="player-piclet-wrapper" class:animate-in={showIntro}>
+          <div class="player-piclet-wrapper" class:animate-in={showIntro} class:lunge={playerLunge}>
             <!-- Player Battle Effects wrap the image for flicker animation -->
             <BattleEffects effects={playerEffects} flash={playerFlash} faint={playerFaint}>
               <img 
@@ -335,20 +337,30 @@
   /* Animations */
   .enemy-piclet-wrapper {
     animation-fill-mode: both;
+    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   .enemy-piclet-wrapper.animate-in {
     animation: enemySlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
   
+  .enemy-piclet-wrapper.lunge {
+    animation: enemyLunge 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+  
   .player-piclet-wrapper {
     animation-fill-mode: both;
+    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   .player-piclet-wrapper.animate-in {
     animation: playerSlideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
   
+  .player-piclet-wrapper.lunge {
+    animation: playerLunge 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+  
   @keyframes enemySlideIn {
     0% {
       transform: translateX(150px) translateY(-50px) scale(1.5);
@@ -377,6 +389,30 @@
     }
   }
   
+  @keyframes enemyLunge {
+    0% {
+      transform: translateX(0) translateY(0) scale(1);
+    }
+    40% {
+      transform: translateX(-60px) translateY(10px) scale(1.1);
+    }
+    100% {
+      transform: translateX(0) translateY(0) scale(1);
+    }
+  }
+  
+  @keyframes playerLunge {
+    0% {
+      transform: translateX(0) translateY(0) scale(1);
+    }
+    40% {
+      transform: translateX(60px) translateY(-10px) scale(1.1);
+    }
+    100% {
+      transform: translateX(0) translateY(0) scale(1);
+    }
+  }
+  
   /* Info box animations */
   .enemy-stack.intro-animations :global(.piclet-info-wrapper) {
     animation: fadeSlideDown 0.5s ease-out 0.3s both;

src/lib/components/Battle/PicletInfo.svelte

@@ -18,17 +18,6 @@
   $: typeLogoPath = `/classes/${piclet.primaryType}.png`;
   
   $: hpColor = hpPercentage > 0.5 ? '#34c759' : hpPercentage > 0.25 ? '#ffcc00' : '#ff3b30';
-  $: displayHp = Math.ceil(piclet.currentHp);
-  
-  // Track HP changes for animations
-  let previousHp = displayHp;
-  let hpFlash = false;
-  
-  $: if (displayHp !== previousHp) {
-    hpFlash = true;
-    setTimeout(() => hpFlash = false, 300);
-    previousHp = displayHp;
-  }
 </script>
 
 <div class="piclet-info-wrapper {isPlayer ? 'player-info-wrapper' : 'enemy-info-wrapper'}">
@@ -43,7 +32,7 @@
     </div>
     
     <!-- HP Section -->
-    <div class="stat-section">
+    <div class="stat-row">
       <div class="stat-label">HP</div>
       <div class="hp-bar">
         <div 
@@ -51,16 +40,11 @@
           style="width: {hpPercentage * 100}%; background-color: {hpColor}"
         ></div>
       </div>
-      {#if isPlayer}
-        <div class="hp-text">
-          <span class="hp-values" class:hp-flash={hpFlash}>{displayHp}/{piclet.maxHp}</span>
-        </div>
-      {/if}
     </div>
     
     <!-- XP Section (Player only) -->
     {#if isPlayer}
-      <div class="stat-section">
+      <div class="stat-row">
         <div class="stat-label">XP</div>
         <div class="xp-bar">
           <div 
@@ -145,14 +129,17 @@
     color: #333;
   }
   
-  /* Stat Sections */
-  .stat-section {
-    margin-bottom: 6px;
+  /* Stat Rows */
+  .stat-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
     position: relative;
     z-index: 2;
   }
   
-  .stat-section:last-child {
+  .stat-row:last-child {
     margin-bottom: 0;
   }
   
@@ -160,9 +147,10 @@
     font-size: 10px;
     font-weight: 600;
     color: #666;
-    margin-bottom: 2px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    width: 18px;
+    flex-shrink: 0;
   }
   
   /* HP Bar */
@@ -172,7 +160,7 @@
     background: #e0e0e0;
     border-radius: 4px;
     overflow: hidden;
-    margin-bottom: 2px;
+    flex: 1;
   }
   
   .hp-fill {
@@ -180,29 +168,6 @@
     transition: width 0.5s ease, background-color 0.3s ease;
   }
   
-  /* HP Text */
-  .hp-text {
-    font-size: 11px;
-    color: #666;
-  }
-  
-  .hp-values {
-    font-weight: 600;
-    transition: all 0.2s ease;
-  }
-  
-  .hp-values.hp-flash {
-    color: #ff4444;
-    text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
-    animation: hpFlash 0.3s ease-in-out;
-  }
-  
-  @keyframes hpFlash {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
-  }
-  
   /* XP Bar */
   .xp-bar {
     width: 120px;
@@ -210,6 +175,7 @@
     background: #e0e0e0;
     border-radius: 3px;
     overflow: hidden;
+    flex: 1;
   }
   
   .xp-fill {
@@ -248,11 +214,7 @@
       font-size: 12px;
     }
     
-    .hp-bar {
-      width: 100px;
-    }
-    
-    .xp-bar {
+    .hp-bar, .xp-bar {
       width: 100px;
     }
   }

src/lib/components/Pages/Battle.svelte

@@ -42,6 +42,8 @@
   let enemyFlash = false;
   let playerFaint = false;
   let enemyFaint = false;
+  let playerLunge = false;
+  let enemyLunge = false;
   
   // Battle results state
   let battleResultsVisible = false;
@@ -222,6 +224,15 @@
     const playerInternalName = battleState?.playerPiclet?.definition?.name || '';
     const enemyInternalName = battleState?.opponentPiclet?.definition?.name || '';
     
+    // Attack lunge effects - trigger when a Piclet uses a move
+    if (message.includes(' used ')) {
+      if (message.includes(playerInternalName)) {
+        triggerLungeAnimation('player');
+      } else if (message.includes(enemyInternalName)) {
+        triggerLungeAnimation('enemy');
+      }
+    }
+    
     // Damage effects
     if (message.includes('took') && message.includes('damage')) {
       if (message.includes(playerInternalName)) {
@@ -322,6 +333,16 @@
     }
   }
   
+  function triggerLungeAnimation(target: 'player' | 'enemy') {
+    if (target === 'player') {
+      playerLunge = true;
+      setTimeout(() => playerLunge = false, 600); // Reset after animation
+    } else {
+      enemyLunge = true;
+      setTimeout(() => enemyLunge = false, 600); // Reset after animation
+    }
+  }
+  
   function triggerEffect(target: 'player' | 'enemy' | 'both', type: string, emoji: string, duration: number) {
     const effect = { type, emoji, duration };
     
@@ -544,6 +565,8 @@
       {enemyFlash}
       {playerFaint}
       {enemyFaint}
+      {playerLunge}
+      {enemyLunge}
     />
     
     <BattleControls