fix pp

src/lib/components/Piclets/MoveDisplay.svelte

@@ -4,7 +4,7 @@
   
   interface Props {
     move: DBBattleMove;
-    enhancedMove?: { move: BattleMove; currentPP: number };
+    enhancedMove?: { move: BattleMove; currentPp: number };
     expanded?: boolean;
     showPP?: boolean;
   }
@@ -12,8 +12,8 @@
   let { move, enhancedMove, expanded = false, showPP = true }: Props = $props();
   
   // Use enhanced move data if available, otherwise fall back to basic move
-  $: battleMove = enhancedMove?.move;
-  $: currentPP = enhancedMove?.currentPP ?? move.currentPp;
+  const battleMove = $derived(enhancedMove?.move);
+  const currentPp = $derived(enhancedMove?.currentPp ?? move.currentPp);
   
   function getTypeEmoji(type: string): string {
     switch (type) {
@@ -110,8 +110,8 @@
     return desc;
   }
   
-  $: isOutOfPP = currentPP <= 0;
-  $: typeColor = getTypeColor(move.type);
+  const isOutOfPP = $derived(currentPp <= 0);
+  const typeColor = $derived(getTypeColor(move.type));
 </script>
 
 <div class="move-display" class:disabled={isOutOfPP}>
@@ -137,7 +137,7 @@
       {#if showPP}
         <div class="pp-display" class:out-of-pp={isOutOfPP}>
           <span class="pp-label">PP</span>
-          <span class="pp-value">{currentPP}/{move.pp}</span>
+          <span class="pp-value">{currentPp}/{move.pp}</span>
         </div>
       {/if}
       

src/lib/components/Piclets/PicletCard.svelte

@@ -22,8 +22,8 @@
   const softTypeColor = $derived(`${typeColor}20`); // Add 20% opacity for soft background
   
   // Get battle definition for enhanced ability info
-  $: battleDefinition = picletInstanceToBattleDefinition(instance);
-  $: ability = battleDefinition.specialAbility;
+  const battleDefinition = $derived(picletInstanceToBattleDefinition(instance));
+  const ability = $derived(battleDefinition.specialAbility);
 </script>
 
 <button 

src/lib/components/Piclets/PicletDetail.svelte

@@ -23,7 +23,7 @@
   let isSharing = $state(false);
   
   // Convert to battle definition to get enhanced ability data
-  $: battleDefinition = picletInstanceToBattleDefinition(instance);
+  const battleDefinition = $derived(picletInstanceToBattleDefinition(instance));
   
   // Type-based styling
   const typeData = $derived(TYPE_DATA[instance.primaryType]);
@@ -490,75 +490,6 @@
     color: #000;
   }
   
-  /* Actions Tab */
-  .move-card {
-    width: 100%;
-    background: #f2f2f7;
-    border: 1px solid rgba(0, 123, 255, 0.3);
-    border-radius: 8px;
-    padding: 12px;
-    margin-bottom: 12px;
-    cursor: pointer;
-    text-align: left;
-    transition: all 0.2s;
-  }
-  
-  .move-card:active {
-    transform: scale(0.98);
-  }
-  
-  .move-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-  
-  .move-name {
-    font-size: 16px;
-    font-weight: bold;
-    color: #000;
-  }
-  
-  .move-badges {
-    display: flex;
-    gap: 6px;
-  }
-  
-  .power-badge {
-    background: rgba(255, 59, 48, 0.2);
-    color: #ff3b30;
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-  
-  .move-description {
-    margin: 0 0 12px;
-    font-size: 14px;
-    color: #666;
-    line-height: 1.3;
-  }
-  
-  .move-stats {
-    display: flex;
-    gap: 16px;
-    font-size: 13px;
-    color: #8e8e93;
-  }
-  
-  .move-details {
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid #e5e5ea;
-    font-size: 14px;
-    color: #666;
-  }
-  
-  .move-details p {
-    margin: 0;
-  }
   
   /* Bottom Actions */
   .bottom-actions {