first encounter

src/lib/components/Pages/Encounters.svelte

@@ -9,6 +9,7 @@
   import { uiStore } from '$lib/stores/ui';
   import Battle from './Battle.svelte';
   import PullToRefresh from '../UI/PullToRefresh.svelte';
+  import NewlyCaughtPicletDetail from '../Piclets/NewlyCaughtPicletDetail.svelte';
   
   let encounters: Encounter[] = [];
   let isLoading = true;
@@ -22,6 +23,10 @@
   let battleIsWild = true;
   let battleRosterPiclets: PicletInstance[] = [];
   
+  // Newly caught Piclet state
+  let showNewlyCaught = false;
+  let newlyCaughtPiclet: PicletInstance | null = null;
+  
   onMount(async () => {
     await loadEncounters();
   });
@@ -98,28 +103,28 @@
   }
   
   async function handleEncounterTap(encounter: Encounter) {
-    if (encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId) {
-      if (encounter.title === 'Your First Piclet!') {
-        // First catch - auto catch without battle
-        try {
-          isLoading = true;
-          const caughtPiclet = await EncounterService.catchWildPiclet(encounter);
-          await incrementCounter('picletsCapured');
-          await addProgressPoints(100);
-          
-          // Show success message
-          alert(`You caught ${caughtPiclet.nickname}!`);
-          
-          // Force refresh encounters
-          await forceEncounterRefresh();
-        } catch (error) {
-          console.error('Error catching piclet:', error);
-        }
-        isLoading = false;
-      } else {
-        // Regular wild encounter - start battle
-        await startBattle(encounter);
+    if (encounter.type === EncounterType.FIRST_PICLET) {
+      // Your First Piclet - auto catch and show special detail page
+      try {
+        isLoading = true;
+        const caughtPiclet = await EncounterService.catchFirstPiclet(encounter);
+        await incrementCounter('picletsCapured');
+        await addProgressPoints(100);
+        
+        // Show the special newly caught detail page
+        newlyCaughtPiclet = caughtPiclet;
+        showNewlyCaught = true;
+        
+        // Force refresh encounters to remove the first piclet encounter
+        await forceEncounterRefresh();
+      } catch (error) {
+        console.error('Error catching first piclet:', error);
+        alert(`Error catching your first Piclet: ${error.message}`);
       }
+      isLoading = false;
+    } else if (encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId) {
+      // Regular wild encounter - start battle
+      await startBattle(encounter);
     } else if (encounter.type === EncounterType.SHOP) {
       await handleShopEncounter();
     } else if (encounter.type === EncounterType.HEALTH_CENTER) {
@@ -349,28 +354,19 @@
           disabled={isRefreshing}
         >
           <div class="encounter-icon">
-            {#if encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId}
-              {#if encounter.title === 'Your First Piclet!'}
-                <div class="piclet-silhouette">
-                  {#if monsterImages.has(encounter.picletTypeId)}
-                    <img 
-                      src={monsterImages.get(encounter.picletTypeId)}
-                      alt="Mystery Piclet"
-                      class="silhouette-img"
-                    />
-                  {:else}
-                    <div class="silhouette-fallback">?</div>
-                  {/if}
-                </div>
+            {#if encounter.type === EncounterType.FIRST_PICLET}
+              <div class="first-piclet-icon">
+                <div class="golden-glow-effect">✨</div>
+                <div class="mystery-silhouette">?</div>
+              </div>
+            {:else if encounter.type === EncounterType.WILD_PICLET && encounter.picletTypeId}
+              {#if monsterImages.has(encounter.picletTypeId)}
+                <img 
+                  src={monsterImages.get(encounter.picletTypeId)}
+                  alt="Wild Piclet"
+                />
               {:else}
-                {#if monsterImages.has(encounter.picletTypeId)}
-                  <img 
-                    src={monsterImages.get(encounter.picletTypeId)}
-                    alt="Wild Piclet"
-                  />
-                {:else}
-                  <div class="fallback-icon">{getEncounterIcon(encounter)}</div>
-                {/if}
+                <div class="fallback-icon">{getEncounterIcon(encounter)}</div>
               {/if}
             {:else}
               <span class="type-icon">{getEncounterIcon(encounter)}</span>
@@ -391,6 +387,17 @@
 </div>
 {/if}
 
+<!-- Newly Caught Piclet Dialog -->
+{#if showNewlyCaught && newlyCaughtPiclet}
+  <NewlyCaughtPicletDetail 
+    instance={newlyCaughtPiclet}
+    onClose={() => {
+      showNewlyCaught = false;
+      newlyCaughtPiclet = null;
+    }}
+  />
+{/if}
+
 <style>
   .encounters-page {
     height: 100%;
@@ -567,4 +574,40 @@
     font-weight: 500;
     margin: 0;
   }
+
+  /* First Piclet encounter styles */
+  .first-piclet-icon {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #FFD700, #FFA500);
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  .golden-glow-effect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 1.5rem;
+    animation: sparkleRotate 2s ease-in-out infinite;
+  }
+
+  .mystery-silhouette {
+    font-size: 2rem;
+    font-weight: bold;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    z-index: 2;
+  }
+
+  @keyframes sparkleRotate {
+    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.8; }
+    25% { transform: rotate(-10deg) scale(1.1); opacity: 1; }
+    50% { transform: rotate(0deg) scale(1.2); opacity: 0.9; }
+    75% { transform: rotate(10deg) scale(1.1); opacity: 1; }
+  }
 </style>

src/lib/components/Pages/Pictuary.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { getAllMonsters } from '$lib/db/monsters';
-  import { getAllPicletInstances, getRosterPiclets, moveToRoster, swapRosterPositions, moveToStorage } from '$lib/db/piclets';
+  import { getCaughtPiclets, getRosterPiclets, moveToRoster, swapRosterPositions, moveToStorage } from '$lib/db/piclets';
   import type { Monster, PicletInstance } from '$lib/db/schema';
   import PicletCard from '../Piclets/PicletCard.svelte';
   import EmptySlotCard from '../Piclets/EmptySlotCard.svelte';
@@ -68,7 +68,7 @@
     try {
       // Run type migration first time to fix any invalid types
       
-      const allInstances = await getAllPicletInstances();
+      const allInstances = await getCaughtPiclets();
       
       // Filter based on rosterPosition instead of isInRoster
       rosterPiclets = allInstances.filter(p => 

src/lib/components/PicletGenerator/PicletGenerator.svelte

@@ -9,6 +9,7 @@
   import { extractPicletMetadata } from '$lib/services/picletMetadata';
   import { savePicletInstance, monsterToPicletInstance } from '$lib/db/piclets';
   import { PicletType, TYPE_DATA } from '$lib/types/picletTypes';
+  import { EncounterService } from '$lib/db/encounterService';
   
   interface Props extends PicletGeneratorProps {}
   
@@ -103,7 +104,7 @@ Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit
       // Step 5: Generate monster image
       await generateMonsterImage();
       
-      // Step 6: Auto-save the piclet
+      // Step 6: Auto-save the piclet as uncaught
       await autoSavePiclet();
       
       state.currentStep = 'complete';
@@ -893,7 +894,14 @@ Write your response within \`\`\`json\`\`\``;
       // Convert to PicletInstance format and save
       const picletInstance = await monsterToPicletInstance(picletData);
       const picletId = await savePicletInstance(picletInstance);
-      console.log('Piclet auto-saved with ID:', picletId);
+      console.log('Piclet auto-saved as uncaught with ID:', picletId);
+      
+      // Check if this should create a "Your First Piclet" encounter
+      const shouldCreateFirstEncounter = await EncounterService.shouldCreateFirstPicletEncounter();
+      if (shouldCreateFirstEncounter === picletId) {
+        console.log('Creating first Piclet encounter for ID:', picletId);
+        await EncounterService.createFirstPicletEncounter(picletId);
+      }
     } catch (err) {
       console.error('Failed to auto-save piclet:', err);
       console.error('Piclet data that failed to save:', {

src/lib/components/Piclets/NewlyCaughtPicletDetail.svelte

@@ -0,0 +1,645 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { PicletInstance } from '$lib/db/schema';
+  import { TYPE_DATA } from '$lib/types/picletTypes';
+  import AbilityDisplay from './AbilityDisplay.svelte';
+  import MoveDisplay from './MoveDisplay.svelte';
+  import { picletInstanceToBattleDefinition } from '$lib/utils/battleConversion';
+  import { recalculatePicletStats, getXpProgress, getXpTowardsNextLevel } from '$lib/services/levelingService';
+  import { isSpecialAbilityUnlocked } from '$lib/services/unlockLevels';
+  
+  interface Props {
+    instance: PicletInstance;
+    onClose: () => void;
+  }
+  
+  let { instance, onClose }: Props = $props();
+  let selectedTab = $state<'about' | 'abilities'>('about');
+  let showCelebration = $state(true);
+  
+  // Ensure stats are up-to-date with current level and nature
+  const updatedInstance = $derived(recalculatePicletStats(instance));
+  
+  // Convert to battle definition to get enhanced ability data
+  const battleDefinition = $derived(picletInstanceToBattleDefinition(updatedInstance));
+  
+  // XP and level calculations
+  const xpProgress = $derived(getXpProgress(updatedInstance.level, updatedInstance.xp));
+  const xpToNext = $derived(getXpTowardsNextLevel(updatedInstance.level, updatedInstance.xp));
+  const isMaxLevel = $derived(updatedInstance.level >= 100);
+  
+  // Calculate BST and handle type data
+  const typeData = $derived(TYPE_DATA[updatedInstance.primaryType]);
+  const tier = $derived(() => {
+    const bst = updatedInstance.bst;
+    if (bst >= 600) return { name: 'Legendary', color: '#FFD700', bg: 'linear-gradient(135deg, #FFD700, #FFA500)' };
+    if (bst >= 530) return { name: 'Elite', color: '#9932CC', bg: 'linear-gradient(135deg, #9932CC, #8A2BE2)' };
+    if (bst >= 480) return { name: 'Advanced', color: '#1E90FF', bg: 'linear-gradient(135deg, #1E90FF, #0066CC)' };
+    if (bst >= 420) return { name: 'Standard', color: '#32CD32', bg: 'linear-gradient(135deg, #32CD32, #228B22)' };
+    return { name: 'Basic', color: '#808080', bg: 'linear-gradient(135deg, #808080, #696969)' };
+  });
+  
+  let celebrationTimeout: NodeJS.Timeout;
+  
+  onMount(() => {
+    // Auto-hide celebration after 3 seconds
+    celebrationTimeout = setTimeout(() => {
+      showCelebration = false;
+    }, 3000);
+    
+    return () => {
+      if (celebrationTimeout) clearTimeout(celebrationTimeout);
+    };
+  });
+  
+  function dismissCelebration() {
+    showCelebration = false;
+    if (celebrationTimeout) clearTimeout(celebrationTimeout);
+  }
+</script>
+
+<div class="detail-overlay" on:click={onClose}>
+  <div class="detail-container newly-caught" on:click|stopPropagation>
+    
+    <!-- Celebration overlay -->
+    {#if showCelebration}
+      <div class="celebration-overlay" on:click={dismissCelebration}>
+        <div class="celebration-content">
+          <div class="celebration-sparkles">✨</div>
+          <h1 class="celebration-title">Welcome to your team!</h1>
+          <div class="celebration-piclet-name">{updatedInstance.nickname}</div>
+          <p class="celebration-subtitle">Your first Piclet has been caught!</p>
+          <div class="celebration-sparkles">🎉</div>
+          <div class="tap-to-continue">Tap to continue</div>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Header with special "newly caught" styling -->
+    <div class="detail-header" style="background: {tier().bg}">
+      <button class="close-button" on:click={onClose}>×</button>
+      <div class="newly-caught-badge">
+        <span class="badge-text">✨ NEWLY CAUGHT ✨</span>
+      </div>
+      <div class="header-content">
+        <div class="piclet-image-container">
+          <img 
+            src={updatedInstance.imageUrl} 
+            alt={updatedInstance.nickname} 
+            class="piclet-image"
+          />
+          <div class="golden-glow"></div>
+        </div>
+        <div class="piclet-info">
+          <h1 class="piclet-name">{updatedInstance.nickname}</h1>
+          <div class="piclet-meta">
+            <div class="type-badge" style="background: {typeData.color}">
+              {typeData.icon} {updatedInstance.primaryType}
+            </div>
+            <div class="tier-badge" style="color: {tier().color}">
+              {tier().name}
+            </div>
+            <div class="level-badge">Lv. {updatedInstance.level}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation tabs -->
+    <div class="tab-navigation">
+      <button 
+        class="tab-button" 
+        class:active={selectedTab === 'about'}
+        on:click={() => selectedTab = 'about'}
+      >
+        About
+      </button>
+      <button 
+        class="tab-button" 
+        class:active={selectedTab === 'abilities'}
+        on:click={() => selectedTab = 'abilities'}
+      >
+        Abilities
+      </button>
+    </div>
+
+    <!-- Tab content -->
+    <div class="detail-content">
+      {#if selectedTab === 'about'}
+        <div class="about-tab">
+          <div class="description-section">
+            <h3>Description</h3>
+            <p class="description-text">{updatedInstance.description}</p>
+          </div>
+
+          <div class="stats-section">
+            <h3>Combat Stats</h3>
+            <div class="stats-grid">
+              <div class="stat-item">
+                <span class="stat-label">HP</span>
+                <span class="stat-value">{updatedInstance.maxHp}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">Attack</span>
+                <span class="stat-value">{updatedInstance.attack}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">Defense</span>
+                <span class="stat-value">{updatedInstance.defense}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">Speed</span>
+                <span class="stat-value">{updatedInstance.speed}</span>
+              </div>
+            </div>
+            <div class="bst-display">
+              <span class="bst-label">Base Stat Total:</span>
+              <span class="bst-value" style="color: {tier().color}">{updatedInstance.bst}</span>
+            </div>
+          </div>
+
+          <div class="xp-section">
+            <h3>Experience</h3>
+            <div class="level-xp-section">
+              <div class="xp-bar-container">
+                <div class="xp-bar">
+                  <div class="xp-fill" style="width: {xpProgress}%"></div>
+                </div>
+                <div class="xp-text">
+                  {#if isMaxLevel}
+                    <span>MAX LEVEL</span>
+                  {:else}
+                    <span>{xpToNext} XP to level {updatedInstance.level + 1}</span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      {:else if selectedTab === 'abilities'}
+        <div class="abilities-tab">
+          <div class="special-ability-section">
+            <h3>Special Ability</h3>
+            {#if isSpecialAbilityUnlocked(updatedInstance)}
+              <AbilityDisplay ability={battleDefinition.specialAbility} />
+            {:else}
+              <div class="locked-ability">
+                <span class="lock-icon">🔒</span>
+                <span class="locked-text">Unlocks at level {updatedInstance.specialAbilityUnlockLevel}</span>
+              </div>
+            {/if}
+          </div>
+
+          <div class="moves-section">
+            <h3>Moves</h3>
+            <div class="moves-grid">
+              {#each updatedInstance.moves as move}
+                <MoveDisplay {move} picletLevel={updatedInstance.level} />
+              {/each}
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .detail-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(4px);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    animation: fadeIn 0.3s ease-out;
+  }
+
+  .detail-container.newly-caught {
+    background: white;
+    border-radius: 24px;
+    max-width: 500px;
+    width: 100%;
+    max-height: 90vh;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    animation: slideInUp 0.4s ease-out;
+    position: relative;
+  }
+
+  /* Celebration overlay */
+  .celebration-overlay {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle, rgba(255, 215, 0, 0.95) 0%, rgba(255, 140, 0, 0.9) 100%);
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    animation: celebrationPulse 2s ease-in-out infinite;
+  }
+
+  .celebration-content {
+    text-align: center;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .celebration-sparkles {
+    font-size: 3rem;
+    animation: sparkle 1.5s ease-in-out infinite;
+    margin: 0.5rem 0;
+  }
+
+  .celebration-title {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin: 1rem 0 0.5rem;
+    animation: titleGlow 2s ease-in-out infinite;
+  }
+
+  .celebration-piclet-name {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0.5rem 0;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+
+  .celebration-subtitle {
+    font-size: 1.2rem;
+    margin: 1rem 0;
+    opacity: 0.9;
+  }
+
+  .tap-to-continue {
+    font-size: 1rem;
+    margin-top: 2rem;
+    opacity: 0.8;
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  /* Header styling */
+  .detail-header {
+    position: relative;
+    padding: 2rem 1.5rem 1.5rem;
+    color: white;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  }
+
+  .newly-caught-badge {
+    position: absolute;
+    top: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 20px;
+    padding: 0.5rem 1rem;
+    animation: badgeGlow 2s ease-in-out infinite;
+  }
+
+  .badge-text {
+    font-weight: 700;
+    font-size: 0.9rem;
+    letter-spacing: 1px;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    z-index: 10;
+  }
+
+  .close-button:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+  }
+
+  .header-content {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-top: 2rem;
+  }
+
+  .piclet-image-container {
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .piclet-image {
+    width: 100px;
+    height: 100px;
+    border-radius: 16px;
+    object-fit: cover;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    position: relative;
+    z-index: 2;
+  }
+
+  .golden-glow {
+    position: absolute;
+    inset: -10px;
+    background: radial-gradient(circle, rgba(255, 215, 0, 0.6), transparent 70%);
+    border-radius: 50%;
+    animation: goldenGlow 2s ease-in-out infinite;
+    z-index: 1;
+  }
+
+  .piclet-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .piclet-name {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  .piclet-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .type-badge, .tier-badge, .level-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .type-badge {
+    color: white;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  }
+
+  .tier-badge {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+  }
+
+  .level-badge {
+    background: rgba(255, 255, 255, 0.3);
+    color: white;
+  }
+
+  /* Tab navigation */
+  .tab-navigation {
+    display: flex;
+    border-bottom: 1px solid #e0e0e0;
+    background: #f8f9fa;
+  }
+
+  .tab-button {
+    flex: 1;
+    padding: 1rem;
+    border: none;
+    background: none;
+    font-weight: 600;
+    color: #666;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+
+  .tab-button.active {
+    color: #007bff;
+  }
+
+  .tab-button.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: #007bff;
+  }
+
+  /* Content styling */
+  .detail-content {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 1.5rem;
+  }
+
+  .about-tab, .abilities-tab {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .description-section h3,
+  .stats-section h3,
+  .xp-section h3,
+  .special-ability-section h3,
+  .moves-section h3 {
+    margin: 0 0 1rem;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .description-text {
+    color: #666;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .stat-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+  }
+
+  .stat-label {
+    font-weight: 600;
+    color: #666;
+  }
+
+  .stat-value {
+    font-weight: 700;
+    color: #333;
+    font-size: 1.1rem;
+  }
+
+  .bst-display {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+    border-radius: 12px;
+    border: 2px solid #dee2e6;
+  }
+
+  .bst-label {
+    font-weight: 600;
+    color: #666;
+  }
+
+  .bst-value {
+    font-weight: 700;
+    font-size: 1.3rem;
+  }
+
+  .level-xp-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .xp-bar-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .xp-bar {
+    height: 8px;
+    background: #e9ecef;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .xp-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #28a745, #20c997);
+    transition: width 0.3s ease;
+  }
+
+  .xp-text {
+    text-align: center;
+    font-size: 0.9rem;
+    color: #666;
+  }
+
+  .locked-ability {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: #f8f9fa;
+    border: 2px dashed #dee2e6;
+    border-radius: 12px;
+    color: #666;
+    font-style: italic;
+  }
+
+  .lock-icon {
+    font-size: 1.2rem;
+  }
+
+  .moves-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  /* Animations */
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes slideInUp {
+    from { 
+      opacity: 0;
+      transform: translateY(100px) scale(0.9);
+    }
+    to { 
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes celebrationPulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.02); }
+  }
+
+  @keyframes sparkle {
+    0%, 100% { transform: rotate(0deg) scale(1); }
+    25% { transform: rotate(-5deg) scale(1.1); }
+    75% { transform: rotate(5deg) scale(1.1); }
+  }
+
+  @keyframes titleGlow {
+    0%, 100% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
+    50% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.8); }
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 0.8; }
+    50% { opacity: 1; }
+  }
+
+  @keyframes badgeGlow {
+    0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
+    50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4); }
+  }
+
+  @keyframes goldenGlow {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 0.9; }
+  }
+
+  @media (max-width: 768px) {
+    .detail-container {
+      margin: 0.5rem;
+      max-height: 95vh;
+    }
+
+    .celebration-title {
+      font-size: 2rem;
+    }
+
+    .celebration-piclet-name {
+      font-size: 1.5rem;
+    }
+
+    .header-content {
+      flex-direction: column;
+      text-align: center;
+      gap: 1rem;
+    }
+
+    .stats-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

src/lib/db/encounterService.ts

@@ -2,6 +2,7 @@ import { db } from './index';
 import type { Encounter, PicletInstance } from './schema';
 import { EncounterType } from './schema';
 import { getOrCreateGameState, markEncountersRefreshed } from './gameState';
+import { getCaughtPiclets, getUncaughtPiclets } from './piclets';
 
 // Configuration
 const ENCOUNTER_REFRESH_HOURS = 2;
@@ -36,6 +37,42 @@ export class EncounterService {
     await db.encounters.clear();
   }
 
+  // Create a "Your First Piclet" encounter from an uncaught Piclet
+  static async createFirstPicletEncounter(picletId: number): Promise<Encounter> {
+    const piclet = await db.picletInstances.get(picletId);
+    if (!piclet) {
+      throw new Error(`Piclet with ID ${picletId} not found`);
+    }
+
+    const encounter: Omit<Encounter, 'id'> = {
+      type: EncounterType.FIRST_PICLET,
+      title: '✨ Your First Piclet! ✨',
+      description: `${piclet.nickname} wants to join your team! This special encounter will automatically catch them for you.`,
+      picletInstanceId: picletId,
+      createdAt: new Date()
+    };
+
+    const id = await db.encounters.add(encounter);
+    return { ...encounter, id };
+  }
+
+  // Check if the player should get a "Your First Piclet" encounter
+  static async shouldCreateFirstPicletEncounter(): Promise<number | null> {
+    const caughtPiclets = await getCaughtPiclets();
+    if (caughtPiclets.length > 0) {
+      return null; // Player already has caught Piclets
+    }
+
+    const uncaughtPiclets = await getUncaughtPiclets();
+    if (uncaughtPiclets.length === 0) {
+      return null; // No uncaught Piclets available
+    }
+
+    // Return the ID of the most recently created uncaught Piclet
+    const mostRecent = uncaughtPiclets.sort((a, b) => (b.id || 0) - (a.id || 0))[0];
+    return mostRecent.id || null;
+  }
+
   // Generate new encounters
   static async generateEncounters(): Promise<Encounter[]> {
     const encounters: Omit<Encounter, 'id'>[] = [];
@@ -168,6 +205,40 @@ export class EncounterService {
     return Math.round(totalLevel / rosterPiclets.length);
   }
 
+  // Catch your first Piclet (marks an existing uncaught Piclet as caught)
+  static async catchFirstPiclet(encounter: Encounter): Promise<PicletInstance> {
+    if (!encounter.picletInstanceId) {
+      throw new Error('No piclet instance ID specified for first Piclet encounter');
+    }
+
+    const piclet = await db.picletInstances.get(encounter.picletInstanceId);
+    if (!piclet) {
+      throw new Error(`Piclet with ID ${encounter.picletInstanceId} not found`);
+    }
+
+    if (piclet.caught) {
+      throw new Error('This Piclet has already been caught');
+    }
+
+    // Mark the Piclet as caught and put it in roster position 0 (first Piclet)
+    const updatedPiclet: PicletInstance = {
+      ...piclet,
+      caught: true,
+      caughtAt: new Date(),
+      isInRoster: true,
+      rosterPosition: 0
+    };
+
+    await db.picletInstances.update(encounter.picletInstanceId, {
+      caught: true,
+      caughtAt: new Date(),
+      isInRoster: true,
+      rosterPosition: 0
+    });
+
+    return updatedPiclet;
+  }
+
   // Catch a wild piclet (creates a new instance based on existing piclet type)
   static async catchWildPiclet(encounter: Encounter): Promise<PicletInstance> {
     if (!encounter.picletTypeId) throw new Error('No piclet type specified');

src/lib/db/piclets.ts

@@ -109,7 +109,8 @@ export async function monsterToPicletInstance(monster: Monster, level: number =
     rosterPosition: undefined,
     
     // Metadata
-    caughtAt: new Date(),
+    caught: false, // Scanned Piclets start as uncaught
+    caughtAt: undefined, // Will be set when caught
     bst,
     tier: stats.tier, // Use tier from stats
     role: 'balanced', // Could be enhanced based on stat distribution
@@ -130,6 +131,26 @@ export async function savePicletInstance(piclet: Omit<PicletInstance, 'id'>): Pr
   return await db.picletInstances.add(piclet);
 }
 
+// Mark a Piclet as caught
+export async function catchPiclet(picletId: number): Promise<void> {
+  await db.picletInstances.update(picletId, {
+    caught: true,
+    caughtAt: new Date()
+  });
+}
+
+// Get only caught Piclets (for Pictuary and battle roster)
+export async function getCaughtPiclets(): Promise<PicletInstance[]> {
+  const allPiclets = await db.picletInstances.toArray();
+  return allPiclets.filter(p => p.caught === true);
+}
+
+// Get uncaught Piclets (for encounters)
+export async function getUncaughtPiclets(): Promise<PicletInstance[]> {
+  const allPiclets = await db.picletInstances.toArray();
+  return allPiclets.filter(p => p.caught === false);
+}
+
 // Get all PicletInstances
 export async function getAllPicletInstances(): Promise<PicletInstance[]> {
   return await db.picletInstances.toArray();
@@ -140,6 +161,7 @@ export async function getRosterPiclets(): Promise<PicletInstance[]> {
   const allPiclets = await db.picletInstances.toArray();
   return allPiclets
     .filter(p => 
+      p.caught === true && // Only caught Piclets can be in roster
       p.rosterPosition !== undefined && 
       p.rosterPosition !== null && 
       p.rosterPosition >= 0 && 
@@ -200,10 +222,11 @@ export async function moveToStorage(id: number): Promise<void> {
 export async function getStoragePiclets(): Promise<PicletInstance[]> {
   const allPiclets = await db.picletInstances.toArray();
   return allPiclets.filter(p => 
-    p.rosterPosition === undefined || 
-    p.rosterPosition === null ||
-    p.rosterPosition < 0 ||
-    p.rosterPosition > 5
+    p.caught === true && // Only caught Piclets can be in storage
+    (p.rosterPosition === undefined || 
+     p.rosterPosition === null ||
+     p.rosterPosition < 0 ||
+     p.rosterPosition > 5)
   );
 }
 

src/lib/db/schema.ts

@@ -6,7 +6,8 @@ export enum EncounterType {
   WILD_PICLET = 'wildPiclet',
   TRAINER_BATTLE = 'trainerBattle',
   SHOP = 'shop',
-  HEALTH_CENTER = 'healthCenter'
+  HEALTH_CENTER = 'healthCenter',
+  FIRST_PICLET = 'firstPiclet'
 }
 
 // Battle Move embedded object
@@ -61,7 +62,8 @@ export interface PicletInstance {
   rosterPosition?: number; // 0-5 when in roster
   
   // Metadata
-  caughtAt: Date;
+  caught: boolean; // Whether this Piclet has been caught by the player
+  caughtAt?: Date; // When this Piclet was caught (undefined if not caught)
   bst: number; // Base Stat Total
   tier: string;
   role: string;
@@ -87,6 +89,7 @@ export interface Encounter {
   title: string;
   description: string;
   picletTypeId?: string; // For wild piclet encounters
+  picletInstanceId?: number; // For first piclet encounters - specific Piclet to catch
   enemyLevel?: number;
   
   // Timing