From 086a7b796a5bc669835d1bceef2561d8db131513 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=80=A7=E9=A9=8A?= <igs170911@gmail.com>
Date: Wed, 26 Nov 2025 23:31:46 +0800
Subject: [PATCH] good version

---
 app/components/pixel/AchievementsOverlay.vue  | 108 +++--
 app/components/pixel/ActionArea.vue           |   9 +-
 app/components/pixel/InventoryOverlay.vue     | 401 ++++++++++--------
 .../pixel/InventoryOverlay.vue.backup         |   1 +
 app/components/pixel/NamingOverlay.vue        |  28 +-
 app/components/pixel/PixelAvatar.vue          | 354 ++++++++++++++--
 app/components/pixel/PixelItemIcon.vue        | 101 +++++
 app/components/pixel/PlayerPanel.vue          | 133 +++++-
 app/pages/index.vue                           | 277 +++++++++++-
 app/utils/formatters.js                       |  49 +++
 core/pet-system.js                            |  33 ++
 data/pet-species.js                           | 188 ++++++++
 12 files changed, 1383 insertions(+), 299 deletions(-)
 create mode 100644 app/components/pixel/InventoryOverlay.vue.backup
 create mode 100644 app/components/pixel/PixelItemIcon.vue
 create mode 100644 app/utils/formatters.js

diff --git a/app/components/pixel/AchievementsOverlay.vue b/app/components/pixel/AchievementsOverlay.vue
index e5f163c..c0caef1 100644
--- a/app/components/pixel/AchievementsOverlay.vue
+++ b/app/components/pixel/AchievementsOverlay.vue
@@ -1,25 +1,22 @@
 <template>
   <div class="flex flex-col gap-4 h-full">
     
-    <!-- Header Stats -->
-    <div class="flex justify-between items-center bg-[#231533] p-3 border-2 border-[#4a3b5e]">
+    <!-- Stats Bar -->
+    <div class="flex justify-between items-center bg-[#231533] p-2 border-2 border-[#4a3b5e] text-xs font-mono">
        <div class="flex gap-4">
-           <span class="text-[#99e550] tracking-widest uppercase">Unlocked: {{ unlocked }}/{{ total }}</span>
+           <span class="text-[#e0d8f0]">總成就: <span class="text-[#f6b26b]">{{ total }}</span></span>
+           <span class="text-[#e0d8f0]">已解鎖: <span class="text-[#99e550]">{{ unlocked }}</span></span>
        </div>
-       <div class="w-1/3 flex items-center gap-2">
-          <span class="text-[#99e550] tracking-widest uppercase text-sm whitespace-nowrap">Progress: {{ percentage }}%</span>
-          <RetroProgressBar :progress="percentage" color="#99e550" />
+       <div class="flex items-center gap-2">
+          <span class="text-[#e0d8f0]">達成率: <span class="text-[#2ce8f4]">{{ percentage }}%</span></span>
+          <div class="w-20">
+            <RetroProgressBar :progress="percentage" color="#2ce8f4" height="6px" />
+          </div>
        </div>
     </div>
 
-    <div class="bg-[#0f0816] p-2 border-l-4 border-[#99e550] mb-2">
-        <h3 class="text-[#9fd75b] text-lg font-bold flex items-center gap-2">
-           <span class="text-xl">▼</span> ACHIEVEMENT LIST ({{ unlocked }}/{{ total }})
-        </h3>
-    </div>
-
     <!-- Grid Layout for Achievements -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 overflow-y-auto pb-4">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 overflow-y-auto pb-4 custom-scrollbar">
       <div 
          v-for="achievement in achievements"
          :key="achievement.id" 
@@ -28,33 +25,37 @@
       >
          <!-- Header: Icon + Title -->
          <div class="flex items-start gap-3">
-            <div class="p-2 rounded-sm border-2" :class="achievement.unlocked ? 'border-[#99e550] bg-[#4b692f]/20' : 'border-[#4a3b5e] bg-[#2b193f]'">
-                <component :is="ICON_MAP[achievement.icon] || Trophy" :size="24" :color="achievement.unlocked ? achievement.color || '#ffe762' : '#8f80a0'" />
+            <div class="p-2 rounded-sm border-2 flex items-center justify-center w-10 h-10" :class="achievement.unlocked ? 'border-[#99e550] bg-[#4b692f]/20' : 'border-[#4a3b5e] bg-[#2b193f]'">
+                <component :is="getIcon(achievement.icon)" :size="20" :color="achievement.unlocked ? '#99e550' : '#8f80a0'" />
             </div>
             <div class="flex flex-col">
                 <h4 class="font-bold tracking-wide leading-none mb-1" :class="achievement.unlocked ? 'text-[#2ce8f4]' : 'text-[#8f80a0]'">
-                  {{ achievement.title }}
+                  {{ achievement.name }}
                 </h4>
-                <span v-if="achievement.unlocked" class="text-[10px] text-[#99e550] uppercase tracking-widest">Completed</span>
+                <span v-if="achievement.unlocked" class="text-[10px] text-[#99e550] uppercase tracking-widest">已完成</span>
                 <span v-else class="text-[10px] text-[#8f80a0] uppercase tracking-widest flex items-center gap-1">
-                    <Lock :size="10" /> Locked
+                    <Lock :size="10" /> 未解鎖
                 </span>
             </div>
          </div>
          
          <!-- Description -->
-         <p class="text-xs text-[#e0d8f0] flex-grow leading-tight">
+         <p class="text-xs text-[#e0d8f0] flex-grow leading-tight mt-1">
             {{ achievement.description }}
          </p>
          
          <!-- Reward Section (if exists) -->
-         <div v-if="achievement.reward" class="text-[10px] text-[#99e550]">
-             <span class="text-[#99e550] opacity-70">Reward: </span> 
-             {{ achievement.reward }}
+         <div v-if="achievement.reward && achievement.reward.buffs" class="text-[10px] text-[#99e550] mt-2 border-t border-[#4a3b5e] pt-1">
+             <span class="text-[#99e550] opacity-70">獎勵: </span> 
+             <div class="flex flex-wrap gap-1 mt-0.5">
+               <span v-for="(value, key) in achievement.reward.buffs" :key="key" class="bg-[#2b193f] px-1 rounded border border-[#4a3b5e]">
+                 {{ formatBuffKey(key) }}+{{ formatValue(value) }}
+               </span>
+             </div>
          </div>
 
          <!-- Progress Bar (if incomplete) -->
-         <div v-if="!achievement.unlocked && achievement.maxValue" class="mt-auto">
+         <div v-if="!achievement.unlocked && achievement.maxValue" class="mt-auto pt-2">
             <div class="flex justify-between text-[9px] text-[#8f80a0] mb-0.5">
                <span>{{ achievement.currentValue }} / {{ achievement.maxValue }}</span>
                <span>{{ achievement.progress }}%</span>
@@ -75,9 +76,13 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { CheckCircle2, Lock, Trophy, Baby, CalendarDays, Egg, Sprout, Cake, Star, Diamond, Milk, Utensils, Gamepad2, Sparkles, BookOpen, Search, Leaf, Dumbbell, Brush, Pill } from 'lucide-vue-next';
-import PixelFrame from './PixelFrame.vue';
+import { 
+  CheckCircle2, Lock, Trophy, Baby, CalendarDays, Egg, Sprout, Cake, Star, Diamond, 
+  Milk, Utensils, Gamepad2, Sparkles, BookOpen, Search, Leaf, Dumbbell, Brush, Pill,
+  HandHeart, Heart, Moon
+} from 'lucide-vue-next';
 import RetroProgressBar from './RetroProgressBar.vue';
+import { formatBuffKey } from '../../utils/formatters.js';
 
 type Achievement = any;
 
@@ -88,27 +93,42 @@ interface Props {
 const props = defineProps<Props>();
 
 const ICON_MAP: Record<string, any> = {
-  baby: Baby,
-  calendar: CalendarDays,
-  egg: Egg,
-  sprout: Sprout,
-  cake: Cake,
-  star: Star,
-  diamond: Diamond,
-  milk: Milk,
-  utensils: Utensils,
-  gamepad: Gamepad2,
-  sparkles: Sparkles,
-  book: BookOpen,
-  search: Search,
-  leaf: Leaf,
-  dumbbell: Dumbbell,
-  brush: Brush,
-  pill: Pill,
-  trophy: Trophy,
+  '👶': Baby,
+  '📅': CalendarDays,
+  '🥚': Egg,
+  '🌱': Sprout,
+  '🎂': Cake,
+  '⭐': Star,
+  '💎': Diamond,
+  '🍼': Milk,
+  '🍽️': Utensils,
+  '🎮': Gamepad2,
+  '🧹': Brush,
+  '💊': Pill,
+  '🙏': HandHeart,
+  '🕯️': Sparkles,
+  '👼': Heart,
+  '🌟': Star,
+  '🎴': BookOpen,
+  '🔍': Search,
+  '🍀': Leaf,
+  '💪': Dumbbell,
+  '✨': Sparkles,
+  '🌙': Moon
+};
+
+const getIcon = (iconKey: string) => {
+  return ICON_MAP[iconKey] || Trophy;
+};
+
+const formatValue = (value: number) => {
+  if (value < 1 && value > 0) {
+    return Math.round(value * 100) + '%';
+  }
+  return value;
 };
 
 const total = computed(() => props.achievements.length);
 const unlocked = computed(() => props.achievements.filter(a => a.unlocked).length);
-const percentage = computed(() => Math.round((unlocked.value / total.value) * 100));
+const percentage = computed(() => total.value > 0 ? Math.round((unlocked.value / total.value) * 100) : 0);
 </script>
diff --git a/app/components/pixel/ActionArea.vue b/app/components/pixel/ActionArea.vue
index f9180ce..aebf305 100644
--- a/app/components/pixel/ActionArea.vue
+++ b/app/components/pixel/ActionArea.vue
@@ -49,7 +49,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits(['feed', 'play', 'train', 'puzzle', 'clean', 'heal', 'openInventory', 'openGodSystem', 'openShop', 'openAdventure', 'toggleSleep']);
+const emit = defineEmits(['feed', 'play', 'train', 'puzzle', 'clean', 'heal', 'openInventory', 'openGodSystem', 'openShop', 'openAdventure', 'toggleSleep', 'debugAddItems']);
 
 const BASE_ACTIONS = [
   { 
@@ -108,6 +108,12 @@ const BASE_ACTIONS = [
     label: '商店', 
     color: '#ffa500',
     pixelPath: 'M3 2H7V3H3V2ZM2 3H8V7H2V3ZM3 7H7V8H3V7ZM4 4H6V5H4V4Z' 
+  },
+  {
+    id: 'debug',
+    label: '測試',
+    color: '#ff00ff',
+    pixelPath: 'M2 2H8V3H2V2ZM2 7H8V8H2V7ZM2 3H3V7H2V3ZM7 3H8V7H7V3ZM4 4H6V6H4V4Z' // Box with dot
   }
 ];
 
@@ -147,5 +153,6 @@ const handleActionClick = (id: string) => {
   else if (id === 'sleep' || id === 'wake') emit('toggleSleep');
   else if (id === 'pray') emit('openGodSystem');
   else if (id === 'shop') emit('openShop');
+  else if (id === 'debug') emit('debugAddItems');
 };
 </script>
diff --git a/app/components/pixel/InventoryOverlay.vue b/app/components/pixel/InventoryOverlay.vue
index 7f69594..cf14c0e 100644
--- a/app/components/pixel/InventoryOverlay.vue
+++ b/app/components/pixel/InventoryOverlay.vue
@@ -1,179 +1,226 @@
 <template>
   <div class="flex flex-col h-full gap-2">
     
-    <!-- 1. Rarity Legend -->
-    <div class="flex flex-wrap gap-2 px-2 py-1 bg-[#150c1f] border border-[#4a3b5e] text-[10px]">
-       <span class="text-[#8f80a0] mr-2">Rarity:</span>
-       <div v-for="(color, rarity) in RARITY_COLORS" :key="rarity" class="flex items-center gap-1 border border-[#2b193f] px-1 bg-[#0f0816]">
-         <span :style="{ color: color }">{{ rarity }}</span>
-         <span class="text-[#4a3b5e]">(10%)</span>
-       </div>
-    </div>
-
-    <!-- 2. Equipment Slots Grid -->
+    <!-- 1. 已装备装备栏 -->
     <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
-       <div v-for="slot in Object.values(EquipSlot)" :key="slot" class="border border-[#4a3b5e] bg-[#0f0816] p-2 flex flex-col gap-2 relative">
-           <!-- Slot Header -->
-           <div class="flex items-center gap-2 mb-1 justify-center border-b border-[#2b193f] pb-1">
-              <component :is="SLOT_ICONS[slot]" :size="14" class="text-[#8f80a0]" />
-              <span class="text-[#2ce8f4] text-xs font-bold uppercase tracking-wider">{{ slot }}</span>
+       <div v-for="(slotConfig, key) in EQUIPMENT_SLOTS" :key="key" class="border border-[#4a3b5e] bg-[#0f0816] p-2 flex flex-col gap-2">
+           <!-- 装备槽标题 -->
+           <div class="flex items-center gap-2 justify-center border-b border-[#2b193f] pb-1">
+              <component :is="SLOT_ICONS[key]" :size="14" class="text-[#8f80a0]" />
+              <span class="text-[#2ce8f4] text-xs font-bold uppercase">{{ slotConfig.name }}</span>
            </div>
 
-           <!-- Actual Slot -->
-           <div 
-              class="bg-[#150c1f] border border-[#4a3b5e] p-2 min-h-[40px] flex flex-col items-center justify-center cursor-pointer hover:border-[#9fd75b] group"
-              @click="getEquippedItem(slot, false) && setSelectedItemId(getEquippedItem(slot, false)?.id)"
-           >
-               <span class="text-[9px] text-[#8f80a0] mb-0.5">ACTUAL</span>
-               <span v-if="getEquippedItem(slot, false)" class="text-xs text-center" :style="{ color: RARITY_COLORS[getEquippedItem(slot, false)!.rarity] }">{{ getEquippedItem(slot, false)!.name }}</span>
-               <span v-else class="text-[10px] text-[#4a3b5e]">Empty</span>
+           <!-- 实际装备槽 -->
+           <div class="bg-[#150c1f] border border-[#4a3b5e] p-2 min-h-[40px] flex flex-col items-center justify-center">
+               <span class="text-[9px] text-[#8f80a0] mb-1">装备</span>
+               <div v-if="getEquippedItem(key, false)" class="flex flex-col items-center gap-1">
+                   <div class="relative w-8 h-8">
+                      <PixelItemIcon :category="getEquippedItem(key, false)!.category" :color="ITEM_RARITY[getEquippedItem(key, false)!.rarity]?.color" />
+                   </div>
+                   <span class="text-xs text-center truncate w-full px-1 font-bold" :style="{ color: ITEM_RARITY[getEquippedItem(key, false)!.rarity]?.color }">{{ getEquippedItem(key, false)!.name }}</span>
+               </div>
+               <span v-else class="text-[10px] text-[#4a3b5e] z-10 opacity-50">空</span>
            </div>
 
-           <!-- Appearance Slot -->
-           <div 
-              class="bg-[#150c1f] border border-[#4a3b5e] p-2 min-h-[40px] flex flex-col items-center justify-center cursor-pointer hover:border-[#d584fb] group"
-               @click="getEquippedItem(slot, true) && setSelectedItemId(getEquippedItem(slot, true)?.id)"
-           >
-               <span class="text-[9px] text-[#8f80a0] mb-0.5">COSMETIC</span>
-               <span v-if="getEquippedItem(slot, true)" class="text-xs text-center" :style="{ color: RARITY_COLORS[getEquippedItem(slot, true)!.rarity] }">{{ getEquippedItem(slot, true)!.name }}</span>
-               <span v-else class="text-[10px] text-[#4a3b5e]">Empty</span>
+           <!-- 外观槽 -->
+           <div class="bg-[#150c1f] border border-[#4a3b5e] p-2 min-h-[40px] flex flex-col items-center justify-center">
+               <span class="text-[9px] text-[#8f80a0] mb-1">外觀</span>
+               <div v-if="getEquippedItem(key, true)" class="flex flex-col items-center gap-1">
+                   <div class="relative w-8 h-8">
+                      <PixelItemIcon :category="getEquippedItem(key, true)!.category" :color="ITEM_RARITY[getEquippedItem(key, true)!.rarity]?.color" />
+                   </div>
+                   <span class="text-xs text-center truncate w-full px-1 font-bold" :style="{ color: ITEM_RARITY[getEquippedItem(key, true)!.rarity]?.color }">{{ getEquippedItem(key, true)!.name }}</span>
+               </div>
+               <span v-else class="text-[10px] text-[#4a3b5e] z-10 opacity-50">空</span>
            </div>
        </div>
     </div>
 
-    <!-- 3. Backpack Section -->
-    <div class="flex-grow flex flex-col md:flex-row gap-2 overflow-hidden mt-2">
-       
-       <!-- Item Grid -->
-       <PixelFrame class="flex-grow flex flex-col bg-[#1b1026]" :title="`Backpack (${items.filter(i => !i.isEquipped).length})`">
-           <div class="flex-grow overflow-y-auto p-1 custom-scrollbar">
-              <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
-                 <button 
-                   v-for="item in items.filter(i => !i.isEquipped)"
-                   :key="item.id"
-                   @click="setSelectedItemId(item.id)"
-                   class="relative p-2 flex flex-col items-center justify-center gap-1 min-h-[80px] border-2 transition-all group bg-[#2b193f]"
-                   :class="selectedItemId === item.id ? 'border-white bg-[#3d2459]' : 'border-[#4a3b5e] hover:border-[#8f80a0]'"
-                 >
-                    <div class="relative">
-                       <!-- Generic Icons based on type -->
-                       <template v-if="item.type === ItemType.Equipment">
-                          <Sword v-if="item.slot === EquipSlot.Weapon" :color="RARITY_COLORS[item.rarity]" />
-                          <Shield v-else-if="item.slot === EquipSlot.Armor" :color="RARITY_COLORS[item.rarity]" />
-                          <Crown v-else-if="item.slot === EquipSlot.Hat" :color="RARITY_COLORS[item.rarity]" />
-                          <Gem v-else-if="item.slot === EquipSlot.Accessory" :color="RARITY_COLORS[item.rarity]" />
-                          <Sparkles v-else-if="item.slot === EquipSlot.Charm" :color="RARITY_COLORS[item.rarity]" />
-                          <Star v-else :color="RARITY_COLORS[item.rarity]" />
-                       </template>
-                       <template v-else>
-                          <Zap v-if="item.name.includes('Potion')" :color="RARITY_COLORS[item.rarity]" />
-                          <Heart v-else :color="RARITY_COLORS[item.rarity]" />
-                       </template>
-                       
-                       <span v-if="item.quantity && item.quantity > 1" class="absolute -bottom-2 -right-2 text-[10px] bg-black text-white px-1 border border-[#4a3b5e]">{{ item.quantity }}</span>
+    <!-- 2. 背包区域 - 全宽 + 固定高度 + 滚动 -->
+    <div class="flex-grow overflow-hidden mt-2">
+       <PixelFrame class="h-full flex flex-col bg-[#1b1026]" :title="`背包 (${items.filter(i => !i.isEquipped).length})`">
+           <div class="overflow-y-auto p-3 custom-scrollbar" style="max-height: calc(100vh - 400px);">
+              <div class="grid grid-cols-6 gap-2">
+                 <!-- 30个格子（6x5） -->
+                 <div v-for="index in 30" :key="index" class="relative aspect-square">
+                    
+                    <!-- 有物品：显示物品 + 悬浮卡片 -->
+                    <template v-if="getInventorySlotItem(index - 1)">
+                       <button class="w-full h-full p-2 flex flex-col items-center justify-center gap-1 border-2 transition-all group rounded-sm border-[#4a3b5e] hover:border-[#8f80a0] hover:bg-[#321e4a] bg-[#2b193f]">
+                          <div class="relative w-10 h-10">
+                             <PixelItemIcon 
+                               :category="getInventorySlotItem(index - 1).category" 
+                               :color="ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color" 
+                             />
+                             
+                             <!-- 稀有度发光 -->
+                             <div 
+                               v-if="['rare', 'epic', 'legendary'].includes(getInventorySlotItem(index - 1).rarity)" 
+                               class="absolute inset-0 rounded-full opacity-40 blur-md pointer-events-none"
+                               :style="{ backgroundColor: ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color }"
+                             ></div>
+
+                             <span 
+                               v-if="getInventorySlotItem(index - 1).quantity && getInventorySlotItem(index - 1).quantity > 1" 
+                               class="absolute -bottom-1 -right-1 text-[9px] bg-black text-white px-1 border border-[#4a3b5e] rounded-sm z-10 shadow-sm font-mono"
+                             >{{ getInventorySlotItem(index - 1).quantity }}</span>
+                          </div>
+                          
+                          <span 
+                            class="text-[10px] text-center leading-tight line-clamp-2 w-full font-medium relative z-10" 
+                            :style="{ 
+                                color: ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color,
+                                textShadow: ['rare', 'epic', 'legendary'].includes(getInventorySlotItem(index - 1).rarity) 
+                                  ? `0 0 3px ${ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color}80` 
+                                  : 'none'
+                            }"
+                          >{{ getInventorySlotItem(index - 1).name }}</span>
+                          
+                          <!-- 详细悬浮卡片 -->
+                          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-4 py-3 bg-[#0f0816] border-2 border-[#4a3b5e] rounded-sm shadow-xl opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity z-50 w-72 text-left max-h-[400px] overflow-y-auto custom-scrollbar">
+                             <!-- 物品头部 -->
+                             <div class="flex gap-3 mb-3 pb-3 border-b border-[#4a3b5e]">
+                                <div class="w-16 h-16 bg-[#1b1026] border-2 rounded flex items-center justify-center p-2 flex-shrink-0"
+                                     :style="{ borderColor: ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color }">
+                                   <PixelItemIcon 
+                                     :category="getInventorySlotItem(index - 1).category" 
+                                     :color="ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color" 
+                                   />
+                                </div>
+                                <div class="flex-1 min-w-0">
+                                   <div class="text-sm font-bold mb-1" 
+                                        :style="{ color: ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color }">
+                                      {{ getInventorySlotItem(index - 1).name }}
+                                   </div>
+                                   <div class="flex gap-2 text-[10px] flex-wrap">
+                                      <span class="px-2 py-0.5 bg-[#1b1026] border border-[#4a3b5e] rounded text-[#8f80a0]">
+                                         {{ getItemTypeName(getInventorySlotItem(index - 1).type) }}
+                                      </span>
+                                      <span class="px-2 py-0.5 border rounded font-bold" 
+                                            :style="{ 
+                                               borderColor: ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color, 
+                                               color: ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.color 
+                                            }">
+                                         {{ ITEM_RARITY[getInventorySlotItem(index - 1).rarity]?.name }}
+                                      </span>
+                                   </div>
+                                </div>
+                             </div>
+                             
+                             <!-- 描述 -->
+                             <p class="text-[11px] text-[#e0d8f0] italic mb-3 leading-relaxed">
+                                "{{ getInventorySlotItem(index - 1).description }}"
+                             </p>
+                             
+                             <!-- 效果 -->
+                             <div v-if="getInventorySlotItem(index - 1).effects" class="mb-3 space-y-1">
+                                <div class="text-[10px] text-[#99e550] font-bold mb-1">效果</div>
+                                <div v-if="getInventorySlotItem(index - 1).effects.flat" class="space-y-1">
+                                   <div v-for="(val, key) in getInventorySlotItem(index - 1).effects.flat" :key="key" 
+                                        class="text-[10px] text-[#9fd75b] flex justify-between border-b border-[#2b193f] border-dashed pb-1">
+                                      <span class="text-[#8f80a0]">{{ formatBuffKey(key) }}</span>
+                                      <span class="font-mono font-bold">+{{ val }}</span>
+                                   </div>
+                                </div>
+                                <div v-if="getInventorySlotItem(index - 1).effects.percent" class="space-y-1 mt-1">
+                                   <div v-for="(val, key) in getInventorySlotItem(index - 1).effects.percent" :key="key" 
+                                        class="text-[10px] text-[#2ce8f4] flex justify-between border-b border-[#2b193f] border-dashed pb-1">
+                                      <span class="text-[#8f80a0]">{{ formatBuffKey(key) }}</span>
+                                      <span class="font-mono font-bold">+{{ (val * 100).toFixed(0) }}%</span>
+                                   </div>
+                                </div>
+                             </div>
+                             
+                             <!-- 耐久度 -->
+                             <div v-if="getInventorySlotItem(index - 1).maxDurability && getInventorySlotItem(index - 1).maxDurability !== Infinity" class="mb-3">
+                                <div class="flex justify-between text-[10px] text-[#8f80a0] mb-1">
+                                   <span>耐久度</span>
+                                   <span class="font-mono">{{ getInventorySlotItem(index - 1).durability }} / {{ getInventorySlotItem(index - 1).maxDurability }}</span>
+                                </div>
+                                <div class="h-1.5 w-full bg-[#1b1026] border border-[#4a3b5e] rounded-full overflow-hidden">
+                                   <div class="h-full bg-[#f6b26b] transition-all" 
+                                        :style="{ width: `${(getInventorySlotItem(index - 1).durability / getInventorySlotItem(index - 1).maxDurability) * 100}%` }">
+                                   </div>
+                                </div>
+                             </div>
+                             
+                             <!-- 操作按钮 -->
+                             <div class="space-y-2 pt-2 border-t border-[#4a3b5e]">
+                                <!-- 装备按钮 -->
+                                <button 
+                                   v-if="getInventorySlotItem(index - 1).slot && getInventorySlotItem(index - 1).type !== ItemType.Appearance"
+                                   @click.stop="$emit('equip', getInventorySlotItem(index - 1).id, false)"
+                                   class="w-full px-3 py-2 bg-[#9fd75b] text-[#1b1026] rounded text-xs font-bold hover:bg-[#b5e87b] transition-colors"
+                                >
+                                   裝備
+                                </button>
+                                
+                                <!-- 外观按钮 -->
+                                <button 
+                                   v-if="getInventorySlotItem(index - 1).type === ItemType.Appearance"
+                                   @click.stop="$emit('equip', getInventorySlotItem(index - 1).id, true)"
+                                   class="w-full px-3 py-2 bg-[#d584fb] text-[#1b1026] rounded text-xs font-bold hover:bg-[#e5a4ff] transition-colors"
+                                >
+                                   裝備外觀
+                                </button>
+                                
+                                <!-- 使用按钮 -->
+                                <button 
+                                   v-if="getInventorySlotItem(index - 1).type === ItemType.Consumable"
+                                   @click.stop="$emit('use', getInventorySlotItem(index - 1).id)"
+                                   class="w-full px-3 py-2 bg-[#2ce8f4] text-[#1b1026] rounded text-xs font-bold hover:bg-[#5cf4ff] transition-colors"
+                                >
+                                   使用物品
+                                </button>
+                                
+                                <!-- 修理按钮 -->
+                                <button 
+                                   v-if="getInventorySlotItem(index - 1).maxDurability && getInventorySlotItem(index - 1).maxDurability !== Infinity && getInventorySlotItem(index - 1).durability < getInventorySlotItem(index - 1).maxDurability"
+                                   @click.stop="$emit('repair', getInventorySlotItem(index - 1).id)"
+                                   class="w-full px-3 py-2 bg-[#f6b26b] text-[#1b1026] rounded text-xs font-bold hover:bg-[#ffc68b] transition-colors flex items-center justify-center gap-2"
+                                >
+                                   <Hammer :size="12" />
+                                   修理 ({{ Math.ceil((getInventorySlotItem(index - 1).maxDurability - getInventorySlotItem(index - 1).durability) * 0.5) }} G)
+                                </button>
+                                
+                                <!-- 删除按钮 -->
+                                <button 
+                                   @click.stop="$emit('delete', getInventorySlotItem(index - 1).id)"
+                                   class="w-full px-3 py-2 bg-[#d95763] text-white rounded text-xs font-bold hover:bg-[#ff6b7a] transition-colors flex items-center justify-center gap-2"
+                                >
+                                   <Trash2 :size="12" />
+                                   丟棄
+                                </button>
+                             </div>
+                          </div>
+                       </button>
+                    </template>
+                    
+                    <!-- 空格子：占位符 -->
+                    <div 
+                      v-else
+                      class="w-full h-full border-2 border-[#2b193f] bg-[#150c1f] rounded-sm flex items-center justify-center opacity-30"
+                    >
+                       <div class="w-8 h-8 border border-[#2b193f] rounded opacity-20"></div>
                     </div>
-                    <span class="text-[10px] text-center leading-tight line-clamp-2" :style="{ color: RARITY_COLORS[item.rarity] }">
-                       {{ item.name }}
-                    </span>
-                 </button>
+                 </div>
               </div>
            </div>
        </PixelFrame>
-
-       <!-- Selected Item Detail -->
-       <div class="w-full md:w-1/3 min-h-[200px] flex-shrink-0">
-          <PixelFrame v-if="selectedItem" class="h-full bg-[#150c1f] flex flex-col" highlight>
-             
-             <!-- Item Header -->
-             <div class="flex gap-3 mb-2 border-b border-[#4a3b5e] pb-2">
-                <div class="w-12 h-12 bg-[#0f0816] border border-[#4a3b5e] flex items-center justify-center">
-                    <Shirt v-if="selectedItem.type === ItemType.Equipment" :size="24" :color="RARITY_COLORS[selectedItem.rarity]" />
-                    <Zap v-else :size="24" :color="RARITY_COLORS[selectedItem.rarity]" />
-                </div>
-                <div class="flex flex-col">
-                   <span class="font-bold text-sm tracking-wide" :style="{ color: RARITY_COLORS[selectedItem.rarity] }">{{ selectedItem.name }}</span>
-                   <div class="flex gap-2 text-[10px] text-[#8f80a0]">
-                      <span>{{ selectedItem.rarity }}</span>
-                      <span>•</span>
-                      <span>{{ selectedItem.type }}</span>
-                   </div>
-                </div>
-             </div>
-
-             <!-- Description -->
-             <div class="mb-2">
-                <p class="text-xs text-[#e0d8f0] italic mb-2">"{{ selectedItem.description }}"</p>
-                
-                <!-- Stats Block -->
-                <div v-if="selectedItem.statsDescription" class="bg-[#0f0816] border border-[#4a3b5e] p-2 mb-2">
-                   <span class="text-[10px] text-[#99e550] block mb-1">EFFECTS:</span>
-                   <span class="text-xs text-[#2ce8f4]">{{ selectedItem.statsDescription }}</span>
-                </div>
-
-                <div v-if="selectedItem.effects && selectedItem.effects.length > 0" class="flex flex-col gap-1">
-                   <span v-for="(eff, i) in selectedItem.effects" :key="i" class="text-[10px] text-[#9fd75b]">+ {{ eff }}</span>
-                </div>
-             </div>
-
-             <!-- Actions -->
-             <div class="mt-auto flex flex-col gap-2">
-                <div v-if="selectedItem.type === ItemType.Equipment" class="grid grid-cols-2 gap-2">
-                   <PixelButton 
-                     class="text-[10px] py-1"
-                     :disabled="selectedItem.isEquipped && !selectedItem.isAppearance"
-                     @click="$emit('equip', selectedItem.id, false)"
-                   >
-                      {{ selectedItem.isEquipped && !selectedItem.isAppearance ? 'EQUIPPED' : 'EQUIP' }}
-                   </PixelButton>
-                   <PixelButton 
-                     variant="secondary"
-                     class="text-[10px] py-1"
-                     :disabled="selectedItem.isEquipped && selectedItem.isAppearance"
-                     @click="$emit('equip', selectedItem.id, true)"
-                   >
-                      COSMETIC
-                   </PixelButton>
-                </div>
-
-                <PixelButton v-if="selectedItem.type === ItemType.Consumable" @click="$emit('use', selectedItem.id)">USE ITEM</PixelButton>
-                
-                <div class="flex justify-between mt-2 pt-2 border-t border-[#4a3b5e]">
-                    <button 
-                        v-if="selectedItem.isEquipped"
-                        @click="$emit('unequip', selectedItem.slot!, selectedItem.isAppearance!)"
-                        class="text-[#f6b26b] text-xs hover:underline"
-                    >
-                        Unequip
-                    </button>
-                    <button 
-                       @click="$emit('delete', selectedItem.id)"
-                       class="text-[#d95763] text-xs hover:text-red-400 flex items-center gap-1 ml-auto"
-                    >
-                       <Trash2 :size="10" /> Delete
-                    </button>
-                </div>
-             </div>
-
-          </PixelFrame>
-          <PixelFrame v-else class="h-full bg-[#150c1f] flex items-center justify-center text-[#4a3b5e]">
-             <div class="text-center">
-                <HelpCircle :size="32" class="mx-auto mb-2 opacity-50" />
-                <span class="text-xs">Select an item<br/>to view details</span>
-             </div>
-          </PixelFrame>
-       </div>
-
     </div>
+    
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { Sword, Shield, Crown, Gem, Sparkles, Star, Shirt, HelpCircle, Trash2, Zap, Heart, Package, X } from 'lucide-vue-next';
+import { Sword, Shield, Crown, Gem, Sparkles, Star, HelpCircle, Trash2, X, Hammer } from 'lucide-vue-next';
 import PixelFrame from './PixelFrame.vue';
 import PixelButton from './PixelButton.vue';
+import PixelItemIcon from './PixelItemIcon.vue';
+import { formatBuffKey } from '../../utils/formatters.js';
 
-import { ITEM_TYPE, ITEM_RARITY, EQUIPMENT_SLOTS } from '../../../../data/items.js';
+import { ITEM_TYPE, ITEM_RARITY, EQUIPMENT_SLOTS, ITEM_TYPES } from '../../../../data/items.js';
 
 // Use any types since we're using data directly
 type Item = any;
@@ -183,12 +230,16 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-defineEmits(['equip', 'unequip', 'use', 'delete']);
+defineEmits(['equip', 'unequip', 'use', 'delete', 'repair']);
 
 const selectedItemId = ref<string | null>(null);
 
 const selectedItem = computed(() => props.items.find(i => i.id === selectedItemId.value));
 
+const setSelectedItemId = (id: string | undefined) => {
+  if (id) selectedItemId.value = id;
+};
+
 // Map data constants to local helpers for template compatibility
 const ItemType = {
   Equipment: ITEM_TYPE.EQUIPMENT,
@@ -198,41 +249,25 @@ const ItemType = {
   Appearance: ITEM_TYPE.APPEARANCE
 };
 
-const Rarity = {
-  Common: 'common',
-  Excellent: 'uncommon',
-  Rare: 'rare',
-  Epic: 'epic',
-  Legendary: 'legendary'
-};
-
-const EquipSlot = {
-  Weapon: 'weapon',
-  Armor: 'armor',
-  Hat: 'hat',
-  Accessory: 'accessory',
-  Charm: 'talisman',
-  Special: 'special'
-};
-
-const RARITY_COLORS: Record<string, string> = {
-  [Rarity.Common]: '#9ca3af',   // Gray
-  [Rarity.Excellent]: '#9fd75b', // Green
-  [Rarity.Rare]: '#2ce8f4',      // Blue
-  [Rarity.Epic]: '#d584fb',      // Purple
-  [Rarity.Legendary]: '#ffa500', // Orange
-};
-
 const SLOT_ICONS: Record<string, any> = {
-  [EquipSlot.Weapon]: Sword,
-  [EquipSlot.Armor]: Shield,
-  [EquipSlot.Hat]: Crown,
-  [EquipSlot.Accessory]: Gem,
-  [EquipSlot.Charm]: Sparkles,
-  [EquipSlot.Special]: Star,
+  weapon: Sword,
+  armor: Shield,
+  hat: Crown,
+  accessory: Gem,
+  talisman: Sparkles,
+  special: Star,
 };
 
 const getEquippedItem = (slot: string, isAppearance: boolean) => {
   return props.items.find(i => i.isEquipped && i.slot === slot && !!i.isAppearance === isAppearance);
 };
+
+const getInventorySlotItem = (index: number) => {
+  const unequippedItems = props.items.filter(i => !i.isEquipped);
+  return unequippedItems[index] || null;
+};
+
+const getItemTypeName = (type: string) => {
+  return ITEM_TYPES[type]?.name || type;
+};
 </script>
diff --git a/app/components/pixel/InventoryOverlay.vue.backup b/app/components/pixel/InventoryOverlay.vue.backup
new file mode 100644
index 0000000..7328aab
--- /dev/null
+++ b/app/components/pixel/InventoryOverlay.vue.backup
@@ -0,0 +1 @@
+Full rewrite with clean structure, full-width grid (6 columns), fixed scrollable height, and detailed hover tooltips with all actions
diff --git a/app/components/pixel/NamingOverlay.vue b/app/components/pixel/NamingOverlay.vue
index 033242a..514266d 100644
--- a/app/components/pixel/NamingOverlay.vue
+++ b/app/components/pixel/NamingOverlay.vue
@@ -4,7 +4,30 @@
       
       <div class="text-center">
         <h2 class="text-[#99e550] text-xl font-bold mb-2 tracking-widest">歡迎來到電子雞世界</h2>
-        <p class="text-[#8f80a0] text-sm">請為您的新夥伴取個名字</p>
+        <p class="text-[#8f80a0] text-sm">請選擇您的夥伴並取個名字</p>
+      </div>
+
+      <!-- Species Selection -->
+      <div class="flex gap-4 w-full justify-center">
+        <button 
+          @click="species = 'cat'"
+          class="flex-1 p-4 border-2 flex flex-col items-center gap-2 transition-all relative group"
+          :class="species === 'cat' ? 'border-[#99e550] bg-[#2b193f]' : 'border-[#4a3b5e] bg-[#0f0816] hover:bg-[#1b1026]'"
+        >
+          <div class="text-2xl">🐱</div>
+          <span class="font-bold font-mono" :class="species === 'cat' ? 'text-[#99e550]' : 'text-[#8f80a0]'">貓咪 (Cat)</span>
+          <div v-if="species === 'cat'" class="absolute top-1 right-1 w-2 h-2 bg-[#99e550]"></div>
+        </button>
+
+        <button 
+          @click="species = 'dog'"
+          class="flex-1 p-4 border-2 flex flex-col items-center gap-2 transition-all relative group"
+          :class="species === 'dog' ? 'border-[#99e550] bg-[#2b193f]' : 'border-[#4a3b5e] bg-[#0f0816] hover:bg-[#1b1026]'"
+        >
+          <div class="text-2xl">🐶</div>
+          <span class="font-bold font-mono" :class="species === 'dog' ? 'text-[#99e550]' : 'text-[#8f80a0]'">狗狗 (Dog)</span>
+          <div v-if="species === 'dog'" class="absolute top-1 right-1 w-2 h-2 bg-[#99e550]"></div>
+        </button>
       </div>
 
       <div class="w-full">
@@ -43,12 +66,13 @@ import PixelButton from './PixelButton.vue';
 const emit = defineEmits(['submit']);
 
 const name = ref('');
+const species = ref<'cat' | 'dog'>('cat');
 
 const isValid = computed(() => name.value.trim().length > 0 && name.value.length <= 12);
 
 const submit = () => {
   if (isValid.value) {
-    emit('submit', name.value.trim());
+    emit('submit', { name: name.value.trim(), species: species.value });
   }
 };
 </script>
diff --git a/app/components/pixel/PixelAvatar.vue b/app/components/pixel/PixelAvatar.vue
index b2c802c..bc53892 100644
--- a/app/components/pixel/PixelAvatar.vue
+++ b/app/components/pixel/PixelAvatar.vue
@@ -1,31 +1,238 @@
 <template>
-  <div class="w-12 h-12 relative image-pixelated">
-    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" shapeRendering="crispEdges">
-      <!-- Body/Head -->
-      <rect x="6" y="2" width="4" height="4" :fill="finalSkin" /> <!-- Head -->
-      <rect x="5" y="6" width="6" height="5" :fill="finalOutfit" /> <!-- Body -->
-      <rect x="5" y="6" width="2" height="3" :fill="finalOutfit" filter="brightness(0.9)" /> <!-- Left Arm -->
-      <rect x="9" y="6" width="2" height="3" :fill="finalOutfit" filter="brightness(0.9)" /> <!-- Right Arm -->
-      <rect x="6" y="11" width="1" height="3" :fill="finalSkin" /> <!-- Leg L -->
-      <rect x="9" y="11" width="1" height="3" :fill="finalSkin" /> <!-- Leg R -->
+  <div class="w-full h-full relative image-pixelated flex items-center justify-center" :class="{ 'grayscale': isDead }">
+    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" shapeRendering="crispEdges" class="w-full h-full">
+      <!-- EGG STAGE -->
+      <g v-if="isEgg">
+        <!-- Egg Base -->
+        <path d="M12 4 H20 V6 H22 V10 H24 V22 H22 V26 H20 V28 H12 V26 H10 V22 H8 V10 H10 V6 H12 Z" :fill="eggBaseColor" />
+        <!-- Egg Shading -->
+        <path d="M12 26 H20 V28 H12 Z" fill="rgba(0,0,0,0.2)" />
+        <path d="M22 10 H24 V22 H22 Z" fill="rgba(0,0,0,0.1)" />
+        
+        <!-- Patterns -->
+        <!-- CAT Patterns -->
+        <g v-if="species === 'cat'">
+          <g v-if="eggPattern === 'spots'" fill="rgba(255,255,255,0.3)">
+            <rect x="14" y="8" width="2" height="2" />
+            <rect x="18" y="14" width="2" height="2" />
+            <rect x="12" y="18" width="2" height="2" />
+            <rect x="16" y="22" width="2" height="2" />
+          </g>
+          <g v-else-if="eggPattern === 'stripes'" fill="rgba(255,255,255,0.2)">
+            <rect x="10" y="10" width="12" height="2" />
+            <rect x="8" y="16" width="16" height="2" />
+            <rect x="10" y="22" width="12" height="2" />
+          </g>
+          <g v-else-if="eggPattern === 'zigzag'" fill="rgba(255,255,255,0.2)">
+             <path d="M10 14 H12 V12 H14 V14 H16 V12 H18 V14 H20 V12 H22 V14 H22 V16 H20 V18 H18 V16 H16 V18 H14 V16 H12 V18 H10 V16 Z" />
+          </g>
+        </g>
 
-      <!-- Hair -->
-      <rect x="5" y="1" width="6" height="2" :fill="finalHair" />
-      <rect x="4" y="2" width="1" height="3" :fill="finalHair" />
-      <rect x="11" y="2" width="1" height="3" :fill="finalHair" />
+        <!-- DOG Patterns -->
+        <g v-else>
+          <!-- Bone Pattern -->
+          <g v-if="eggPattern === 'bone'" fill="rgba(255,255,255,0.3)">
+             <rect x="14" y="14" width="4" height="2" />
+             <rect x="13" y="13" width="1" height="1" />
+             <rect x="13" y="16" width="1" height="1" />
+             <rect x="18" y="13" width="1" height="1" />
+             <rect x="18" y="16" width="1" height="1" />
+          </g>
+          <!-- Paw Pattern -->
+          <g v-else-if="eggPattern === 'paw'" fill="rgba(255,255,255,0.2)">
+             <rect x="15" y="18" width="2" height="2" /> <!-- Pad -->
+             <rect x="14" y="16" width="1" height="1" />
+             <rect x="16" y="15" width="1" height="1" />
+             <rect x="18" y="16" width="1" height="1" />
+          </g>
+          <!-- Patch Pattern -->
+          <g v-else-if="eggPattern === 'patch'" fill="rgba(255,255,255,0.2)">
+             <rect x="18" y="8" width="4" height="4" />
+             <rect x="10" y="20" width="6" height="4" />
+          </g>
+        </g>
+        
+        <!-- Cracks (if close to hatching) -->
+        <g v-if="isHatching" fill="#2b193f">
+           <rect x="14" y="6" width="1" height="4" />
+           <rect x="13" y="9" width="1" height="2" />
+           <rect x="15" y="8" width="1" height="3" />
+        </g>
+      </g>
 
-      <!-- Face -->
-      <rect x="7" y="4" width="1" height="1" fill="#000" opacity="0.6"/> <!-- Eye -->
-      <rect x="9" y="4" width="1" height="1" fill="#000" opacity="0.6"/> <!-- Eye -->
+      <!-- DEITY STAGE -->
+      <g v-else-if="deityId">
+         <!-- Mazu (妈祖) -->
+         <g v-if="deityId === 'mazu'">
+            <rect x="10" y="4" width="12" height="12" fill="#ffe0bd" /> <!-- Face -->
+            <rect x="8" y="4" width="2" height="12" fill="#1a1a1a" /> <!-- Hair L -->
+            <rect x="22" y="4" width="2" height="12" fill="#1a1a1a" /> <!-- Hair R -->
+            <rect x="8" y="2" width="16" height="4" fill="#d4af37" /> <!-- Crown Base -->
+            <rect x="14" y="0" width="4" height="2" fill="#d4af37" /> <!-- Crown Top -->
+            <rect x="12" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
+            <rect x="18" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
+            <path d="M8 16 H24 V28 H8 Z" fill="#ffa500" /> <!-- Robe -->
+            <rect x="14" y="16" width="4" height="12" fill="#d4af37" opacity="0.5" /> <!-- Robe Detail -->
+         </g>
 
-      <!-- Accessory/Deity Specifics -->
-      <rect v-if="deityId === 'Mazu'" x="5" y="0" width="6" height="1" fill="#d4af37" /> <!-- Crown -->
-      <rect v-if="deityId === 'EarthGod'" x="5" y="10" width="6" height="1" fill="#8e5c2e" /> <!-- Belt -->
-      <rect v-if="deityId === 'Matchmaker'" x="10" y="7" width="2" height="2" fill="#ff0000" /> <!-- Red Thread -->
+         <!-- Earth God (土地公) -->
+         <g v-else-if="deityId === 'earth_god'">
+            <rect x="10" y="6" width="12" height="10" fill="#f0c0a8" /> <!-- Face -->
+            <rect x="8" y="4" width="16" height="4" fill="#1a1a1a" /> <!-- Hat Base -->
+            <rect x="10" y="2" width="12" height="2" fill="#1a1a1a" /> <!-- Hat Top -->
+            <rect x="12" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
+            <rect x="18" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
+            <rect x="10" y="14" width="12" height="6" fill="#f0f0f0" /> <!-- Beard -->
+            <path d="M8 16 H24 V28 H8 Z" fill="#d75b5b" /> <!-- Robe -->
+            <rect x="14" y="20" width="4" height="2" fill="#8e5c2e" /> <!-- Belt -->
+         </g>
 
-      <!-- Weapon -->
-      <path v-if="weapon === 'sword'" d="M11 9 L13 7 L14 8 L12 10 Z" fill="#ccc" />
-      <rect v-if="weapon === 'staff'" x="11" y="5" width="1" height="8" fill="#8d6e63" />
+         <!-- Matchmaker (月老) -->
+         <g v-else-if="deityId === 'matchmaker'">
+            <rect x="10" y="6" width="12" height="10" fill="#ffe0bd" /> <!-- Face -->
+            <rect x="10" y="4" width="12" height="4" fill="#f0f0f0" /> <!-- Hair -->
+            <rect x="12" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
+            <rect x="18" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
+            <rect x="10" y="14" width="12" height="4" fill="#f0f0f0" /> <!-- Beard -->
+            <path d="M8 16 H24 V28 H8 Z" fill="#d95763" /> <!-- Robe -->
+            <rect x="20" y="18" width="4" height="4" fill="#ff0000" /> <!-- Red Thread Ball -->
+         </g>
+
+         <!-- Wenchang (文昌) -->
+         <g v-else>
+            <rect x="10" y="6" width="12" height="10" fill="#ffe0bd" /> <!-- Face -->
+            <rect x="8" y="2" width="16" height="6" fill="#1a1a1a" /> <!-- Hat -->
+            <rect x="12" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
+            <rect x="18" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
+            <rect x="12" y="14" width="8" height="2" fill="#1a1a1a" /> <!-- Mustache -->
+            <path d="M8 16 H24 V28 H8 Z" fill="#9fd75b" /> <!-- Robe -->
+            <rect x="20" y="18" width="2" height="8" fill="#8d6e63" /> <!-- Brush -->
+         </g>
+      </g>
+
+      <!-- PORTRAIT STAGE (Baby, Child, Adult) -->
+      <g v-else>
+        <!-- Background Glow (Optional) -->
+        <circle cx="16" cy="16" r="14" :fill="auraColor" opacity="0.2" />
+
+        <!-- CAT EARS -->
+        <g v-if="species === 'cat'" :fill="furColor">
+           <!-- Left Ear -->
+           <path d="M6 4 H10 V8 H6 Z" /> 
+           <path d="M7 5 H9 V7 H7 Z" fill="#ffb7b2" /> <!-- Inner Ear -->
+           
+           <!-- Right Ear -->
+           <path d="M22 4 H26 V8 H22 Z" />
+           <path d="M23 5 H25 V7 H23 Z" fill="#ffb7b2" /> <!-- Inner Ear -->
+        </g>
+
+        <!-- DOG EARS (Floppy) -->
+        <g v-else :fill="furColor">
+           <!-- Left Ear -->
+           <path d="M4 8 H8 V14 H6 V16 H4 Z" /> 
+           
+           <!-- Right Ear -->
+           <path d="M24 8 H28 V16 H26 V14 H24 Z" />
+        </g>
+
+        <!-- Head Base -->
+        <rect x="8" y="8" width="16" height="14" :fill="furColor" />
+        <rect x="6" y="10" width="2" height="10" :fill="furColor" /> <!-- Cheeks L -->
+        <rect x="24" y="10" width="2" height="10" :fill="furColor" /> <!-- Cheeks R -->
+        
+        <!-- CAT STRIPES -->
+        <g v-if="species === 'cat'">
+            <!-- Tiger Stripes (Forehead) -->
+            <g fill="#4a3b5e" opacity="0.6">
+               <rect x="15" y="8" width="2" height="3" />
+               <rect x="12" y="9" width="1" height="2" />
+               <rect x="19" y="9" width="1" height="2" />
+            </g>
+            <!-- Cheeks Stripes -->
+            <g fill="#4a3b5e" opacity="0.4">
+               <rect x="6" y="14" width="2" height="1" />
+               <rect x="6" y="16" width="2" height="1" />
+               <rect x="24" y="14" width="2" height="1" />
+               <rect x="24" y="16" width="2" height="1" />
+            </g>
+        </g>
+
+        <!-- DOG PATCH (Eye Patch) -->
+        <g v-else>
+            <rect x="18" y="12" width="5" height="5" fill="#4a3b5e" opacity="0.3" />
+        </g>
+
+        <!-- Face Features -->
+        <!-- Eyes -->
+        <!-- Eyes -->
+        <g :fill="eyeColor">
+           <g v-if="mood === 'dead'">
+             <!-- X Eyes -->
+             <path d="M10 13 L13 16 M13 13 L10 16" stroke="#1b1026" stroke-width="1" />
+             <path d="M19 13 L22 16 M22 13 L19 16" stroke="#1b1026" stroke-width="1" />
+           </g>
+           <g v-else>
+             <rect x="10" y="13" width="3" height="3" />
+             <rect x="19" y="13" width="3" height="3" />
+             <!-- Highlights -->
+             <rect x="12" y="13" width="1" height="1" fill="white" />
+             <rect x="21" y="13" width="1" height="1" fill="white" />
+           </g>
+        </g>
+        
+        <!-- Glasses (High INT) -->
+        <g v-if="stats.int > 20" stroke="#f6b26b" stroke-width="1" fill="none">
+           <rect x="9.5" y="12.5" width="4" height="4" />
+           <rect x="18.5" y="12.5" width="4" height="4" />
+           <line x1="13.5" y1="14.5" x2="18.5" y2="14.5" />
+        </g>
+
+        <!-- Nose & Mouth -->
+        <rect x="15" y="17" width="2" height="1" :fill="species === 'dog' ? '#1a1a1a' : '#ffb7b2'" /> <!-- Nose (Black for dog, Pink for cat) -->
+        
+        <!-- Mouth Expressions -->
+        <g fill="#2b193f">
+           <g v-if="mood === 'happy'">
+              <rect x="14" y="19" width="1" height="1" />
+              <rect x="15" y="20" width="2" height="1" />
+              <rect x="17" y="19" width="1" height="1" />
+           </g>
+           <g v-else-if="mood === 'sad'">
+              <rect x="14" y="20" width="1" height="1" />
+              <rect x="15" y="19" width="2" height="1" />
+              <rect x="17" y="20" width="1" height="1" />
+           </g>
+           <g v-else-if="mood === 'dead'">
+              <!-- Dead Mouth (Flat line) -->
+              <rect x="14" y="20" width="4" height="1" />
+           </g>
+           <g v-else>
+              <rect x="14" y="19" width="4" height="1" />
+           </g>
+        </g>
+
+        <!-- Body (Shoulders/Upper Chest) - Portrait Style -->
+        <path d="M8 22 H24 V32 H8 Z" :fill="outfitColor" />
+        <path d="M6 24 H8 V32 H6 Z" :fill="outfitColor" filter="brightness(0.9)" />
+        <path d="M24 24 H26 V32 H24 Z" :fill="outfitColor" filter="brightness(0.9)" />
+        
+        <!-- Collar/Accessory -->
+        <g v-if="stats.str > 20">
+           <!-- Red Scarf/Bandana -->
+           <path d="M10 22 H22 V24 H20 V25 H12 V24 H10 Z" fill="#d95763" />
+        </g>
+        <g v-else-if="stats.dex > 20">
+           <!-- Green Bowtie -->
+            <path d="M14 23 L12 22 V26 L14 25 Z" fill="#99e550" />
+            <path d="M18 23 L20 22 V26 L18 25 Z" fill="#99e550" />
+            <rect x="15" y="23" width="2" height="2" fill="#76c442" />
+        </g>
+        <g v-else>
+           <!-- Simple Collar -->
+           <rect x="11" y="22" width="10" height="2" fill="#e0d8f0" opacity="0.5" />
+        </g>
+
+      </g>
     </svg>
   </div>
 </template>
@@ -34,43 +241,96 @@
 import { computed } from 'vue';
 
 interface Props {
-  skinColor?: string;
-  hairColor?: string;
-  outfitColor?: string;
-  weapon?: 'none' | 'sword' | 'staff';
+  stage?: string;
+  species?: string;
+  stats?: {
+    str: number;
+    int: number;
+    dex: number;
+    happiness: number;
+    generation?: number;
+    age?: number;
+  };
+  skinColor?: string; // Fallback
+  outfitColor?: string; // Fallback
   deityId?: string;
+  isDead?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  stage: 'egg',
+  species: 'cat',
+  stats: () => ({ str: 0, int: 0, dex: 0, happiness: 50, generation: 1, age: 0 }),
   skinColor: '#ffdbac',
-  hairColor: '#5e412f',
   outfitColor: '#78909c',
-  weapon: 'none'
+  isDead: false
 });
 
-const finalSkin = computed(() => {
-  if (props.deityId === 'Mazu') return '#ffe0bd';
-  if (props.deityId === 'EarthGod') return '#f0c0a8';
-  if (props.deityId === 'Matchmaker') return '#ffe0bd';
-  if (props.deityId === 'Wenchang') return '#ffe0bd';
-  return props.skinColor;
+const isEgg = computed(() => {
+  if (props.deityId) return false;
+  return !props.stage || props.stage.toLowerCase() === 'egg';
 });
 
-const finalHair = computed(() => {
-  if (props.deityId === 'Mazu') return '#1a1a1a';
-  if (props.deityId === 'EarthGod') return '#f0f0f0';
-  if (props.deityId === 'Matchmaker') return '#f0f0f0';
-  if (props.deityId === 'Wenchang') return '#1a1a1a';
-  return props.hairColor;
+const isHatching = computed(() => {
+  return isEgg.value && (props.stats.age || 0) > 60; 
 });
 
-const finalOutfit = computed(() => {
-  if (props.deityId === 'Mazu') return '#ffa500';
-  if (props.deityId === 'EarthGod') return '#d75b5b';
-  if (props.deityId === 'Matchmaker') return '#d95763';
-  if (props.deityId === 'Wenchang') return '#9fd75b';
-  return props.outfitColor;
+// --- EGG LOGIC ---
+
+const eggBaseColor = computed(() => {
+  const { str, int, dex } = props.stats;
+  if (str > int && str > dex) return '#ffcccb'; // Reddish
+  if (int > str && int > dex) return '#cce5ff'; // Bluish
+  if (dex > str && dex > int) return '#ccffcc'; // Greenish
+  return '#f0f0f0'; // White/Grey
 });
+
+const eggPattern = computed(() => {
+  const gen = props.stats.generation || 1;
+  if (props.species === 'cat') {
+    const patterns = ['spots', 'stripes', 'zigzag'];
+    return patterns[gen % patterns.length];
+  } else {
+    const patterns = ['bone', 'paw', 'patch'];
+    return patterns[gen % patterns.length];
+  }
+});
+
+// --- PORTRAIT LOGIC ---
+
+const furColor = computed(() => {
+  const colors = ['#ffdbac', '#e0e0e0', '#d2b48c', '#ffdead'];
+  const gen = props.stats.generation || 1;
+  return colors[gen % colors.length];
+});
+
+const eyeColor = computed(() => {
+  const { str, int, dex } = props.stats;
+  if (int > 30) return '#2ce8f4'; // Cyan eyes for high INT
+  if (str > 30) return '#d95763'; // Red eyes for high STR
+  return '#1b1026'; // Black eyes default
+});
+
+const auraColor = computed(() => {
+   const { str, int, dex } = props.stats;
+   if (str > int && str > dex) return '#d95763';
+   if (int > str && int > dex) return '#2ce8f4';
+   if (dex > str && dex > int) return '#99e550';
+   return '#ffffff';
+});
+
+const mood = computed(() => {
+  if (props.isDead) return 'dead';
+  const h = props.stats.happiness;
+  if (h >= 70) return 'happy';
+  if (h <= 30) return 'sad';
+  return 'neutral';
+});
+
+const outfitColor = computed(() => {
+    return props.outfitColor;
+});
+
 </script>
 
 <style scoped>
diff --git a/app/components/pixel/PixelItemIcon.vue b/app/components/pixel/PixelItemIcon.vue
new file mode 100644
index 0000000..7b64403
--- /dev/null
+++ b/app/components/pixel/PixelItemIcon.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="w-full h-full flex items-center justify-center relative">
+    <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full image-pixelated">
+      
+      <!-- Weapon (Sword) -->
+      <g v-if="category === 'weapon'">
+        <path d="M2 8 L8 2 M3 8 L8 3" :stroke="color" stroke-width="1" />
+        <path d="M2 8 L3 9 L4 8 L3 7 Z" :fill="color" /> <!-- Hilt -->
+        <path d="M7 3 L8 2 L9 3" :fill="color" /> <!-- Tip -->
+        <rect x="3" y="6" width="1" height="1" :fill="secondaryColor" />
+        <rect x="6" y="3" width="1" height="1" :fill="secondaryColor" />
+      </g>
+
+      <!-- Armor -->
+      <g v-else-if="category === 'armor'">
+        <path d="M2 2 H8 V5 L5 8 L2 5 V2 Z" :fill="color" fill-opacity="0.2" />
+        <path d="M2 2 H8 V5 L5 8 L2 5 V2 Z" :stroke="color" stroke-width="1" fill="none" />
+        <path d="M4 3 H6 V5 H4 V3 Z" :fill="secondaryColor" />
+      </g>
+
+      <!-- Hat/Crown -->
+      <g v-else-if="category === 'hat' || category === 'crown'">
+        <path d="M2 4 H8 V7 H2 V4 Z" :fill="color" fill-opacity="0.2" />
+        <path d="M2 4 L2 3 L3 3 L3 2 L4 2 L4 3 L6 3 L6 2 L7 2 L7 3 L8 3 L8 4 V7 H2 Z" :stroke="color" stroke-width="1" fill="none" />
+        <rect x="4" y="5" width="2" height="1" :fill="secondaryColor" />
+      </g>
+
+      <!-- Accessory/Ring/Amulet -->
+      <g v-else-if="category === 'accessory' || category === 'talisman'">
+        <circle cx="5" cy="4" r="2" :stroke="color" stroke-width="1" fill="none" />
+        <path d="M5 6 V8" :stroke="color" stroke-width="1" />
+        <rect x="4" y="8" width="2" height="2" :fill="secondaryColor" />
+      </g>
+
+      <!-- Potion -->
+      <g v-else-if="category === 'potion'">
+        <path d="M4 2 H6 V3 H7 V4 H8 V8 H2 V4 H3 V3 H4 V2 Z" :fill="color" fill-opacity="0.2" />
+        <path d="M4 2 H6 V3 H7 V4 H8 V8 H2 V4 H3 V3 H4 V2 Z" :stroke="color" stroke-width="1" fill="none" />
+        <rect x="4" y="5" width="2" height="2" :fill="secondaryColor" />
+        <rect x="3" y="4" width="1" height="1" fill="white" fill-opacity="0.5" />
+      </g>
+
+      <!-- Food -->
+      <g v-else-if="category === 'food'">
+        <circle cx="5" cy="5" r="3" :fill="color" />
+        <rect x="4" y="4" width="1" height="1" :fill="secondaryColor" />
+        <rect x="6" y="5" width="1" height="1" :fill="secondaryColor" />
+        <rect x="5" y="6" width="1" height="1" :fill="secondaryColor" />
+      </g>
+
+      <!-- Book/Manual -->
+      <g v-else-if="category === 'book'">
+        <rect x="2" y="2" width="6" height="6" :fill="color" />
+        <rect x="3" y="3" width="4" height="4" fill="white" fill-opacity="0.3" />
+        <path d="M4 4 H7 M4 5 H7 M4 6 H6" stroke="#1b1026" stroke-width="0.5" />
+      </g>
+
+      <!-- Crystal/Gem/Special -->
+      <g v-else-if="category === 'crystal' || category === 'special'">
+        <path d="M5 1 L8 4 L5 9 L2 4 Z" :fill="color" />
+        <path d="M5 1 L8 4 L5 9 L2 4 Z" :stroke="secondaryColor" stroke-width="0.5" fill="none" />
+        <path d="M5 1 V9 M2 4 H8" :stroke="secondaryColor" stroke-width="0.5" stroke-opacity="0.5" />
+      </g>
+
+      <!-- Default (Box) -->
+      <g v-else>
+        <rect x="2" y="2" width="6" height="6" :stroke="color" stroke-width="1" fill="none" />
+        <path d="M2 2 L8 8 M8 2 L2 8" :stroke="color" stroke-width="0.5" />
+      </g>
+      
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  category?: string;
+  type?: string;
+  color?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  category: 'special',
+  type: 'special',
+  color: '#e0d8f0'
+});
+
+const secondaryColor = computed(() => {
+  // Simple logic to generate a contrasting or complementary color
+  // For now, just return white or a fixed highlight
+  return '#ffffff';
+});
+</script>
+
+<style scoped>
+.image-pixelated {
+  image-rendering: pixelated;
+}
+</style>
diff --git a/app/components/pixel/PlayerPanel.vue b/app/components/pixel/PlayerPanel.vue
index c2f1f37..0376686 100644
--- a/app/components/pixel/PlayerPanel.vue
+++ b/app/components/pixel/PlayerPanel.vue
@@ -11,6 +11,96 @@
         >
           <Trophy :size="14" class="text-[#f6b26b] group-hover:text-white" />
         </button>
+        
+        <!-- Evolution Help Button with Hover Tooltip -->
+        <div class="relative group/evo">
+          <button 
+            class="p-1 bg-[#2b193f] border border-[#2ce8f4] hover:bg-[#3d2459] active:translate-y-0.5"
+            title="進化條件"
+          >
+            <HelpCircle :size="14" class="text-[#2ce8f4] group-hover/evo:text-white" />
+          </button>
+          
+          <!-- Evolution Info Tooltip (Hover) -->
+          <div class="absolute right-0 top-full mt-1 w-48 px-3 py-2 bg-[#0f0816] border-2 border-[#2ce8f4] text-[10px] text-[#e0d8f0] font-mono opacity-0 invisible group-hover/evo:opacity-100 group-hover/evo:visible transition-all duration-200 z-50 shadow-[0_0_20px_rgba(44,232,244,0.3)]">
+            <div class="flex items-center justify-between mb-2 pb-1 border-b border-[#2ce8f4]">
+              <span class="text-[#2ce8f4] font-bold">進化條件</span>
+            </div>
+            
+            <!-- Egg → Baby -->
+            <div v-if="stats.class === 'egg'" class="space-y-1.5">
+              <p class="text-[#99e550] font-bold flex items-center gap-1">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M4 1H6V2H4V1ZM3 2H7V3H3V2ZM2 3H8V8H2V3ZM3 8H7V9H3V8Z" fill="#99e550"/><path d="M3 4H4V5H3V4ZM6 4H7V5H6V4ZM4 6H6V7H4V6Z" fill="#0f0816"/></svg>
+                → 幼年期
+              </p>
+              <p class="flex items-center gap-1 text-[#e0d8f0]">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M2 1H8V2H2V1ZM1 2H9V8H1V2ZM2 8H8V9H2V8Z" fill="#f6b26b"/><path d="M3 3H4V4H3V3ZM6 3H7V4H6V3ZM3 5H7V6H3V5Z" fill="#0f0816"/></svg>
+                年齡達到: 5分鐘
+              </p>
+              <p class="text-[#8f80a0] text-[9px]">蛋孵化後自動進化</p>
+            </div>
+            
+            <!-- Baby → Child -->
+            <div v-else-if="stats.class === 'baby'" class="space-y-1.5">
+              <p class="text-[#99e550] font-bold flex items-center gap-1">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M3 1H7V2H3V1ZM2 2H3V3H2V2ZM7 2H8V3H7V2ZM1 3H2V6H1V3ZM8 3H9V6H8V3ZM2 6H3V7H2V6ZM7 6H8V7H7V6ZM3 7H7V9H3V7Z" fill="#99e550"/><path d="M3 3H4V4H3V3ZM6 3H7V4H6V3ZM4 5H6V6H4V5Z" fill="#0f0816"/></svg>
+                → 成長期
+              </p>
+              <p class="flex items-center gap-1 text-[#e0d8f0]">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M2 1H8V2H2V1ZM1 2H9V8H1V2ZM2 8H8V9H2V8Z" fill="#f6b26b"/><path d="M3 3H4V4H3V3ZM6 3H7V4H6V3ZM3 5H7V6H3V5Z" fill="#0f0816"/></svg>
+                年齡達到: 6小時5分
+              </p>
+              <p class="flex items-center gap-1 text-[#f6b26b]">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M3 2H7V3H3V2ZM2 3H3V6H2V3ZM7 3H8V6H7V3ZM3 6H4V7H3V6ZM6 6H7V7H6V6ZM4 6H6V8H4V6Z" fill="#f6b26b"/></svg>
+                力量 ≥ 8
+              </p>
+              <p class="flex items-center gap-1 text-[#2ce8f4]">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M3 1H7V2H3V1ZM2 2H8V8H2V2ZM3 8H7V9H3V8Z" fill="#2ce8f4"/><path d="M3 3H7V4H3V3ZM4 4H6V5H4V4ZM5 5H6V6H5V5Z" fill="#0f0816"/></svg>
+                智力 ≥ 8
+              </p>
+            </div>
+            
+            <!-- Child → Adult -->
+            <div v-else-if="stats.class === 'child'" class="space-y-1.5">
+              <p class="text-[#99e550] font-bold flex items-center gap-1">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M3 1H7V2H3V1ZM2 2H8V3H2V2ZM1 3H2V7H1V3ZM8 3H9V7H8V3ZM2 7H3V8H2V7ZM7 7H8V8H7V7ZM3 8H7V9H3V8Z" fill="#99e550"/><path d="M3 3H4V4H3V3ZM6 3H7V4H6V3ZM3 5H7V6H3V5Z" fill="#0f0816"/></svg>
+                → 成熟期
+              </p>
+              <p class="flex items-center gap-1 text-[#e0d8f0]">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M2 1H8V2H2V1ZM1 2H9V8H1V2ZM2 8H8V9H2V8Z" fill="#f6b26b"/><path d="M3 3H4V4H3V3ZM6 3H7V4H6V3ZM3 5H7V6H3V5Z" fill="#0f0816"/></svg>
+                年齡達到: 3天6小時5分
+              </p>
+              <p class="flex items-center gap-1 text-[#f6b26b]">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M3 2H7V3H3V2ZM2 3H3V6H2V3ZM7 3H8V6H7V3ZM3 6H4V7H3V6ZM6 6H7V7H6V6ZM4 6H6V8H4V6Z" fill="#f6b26b"/></svg>
+                力量 ≥ 50
+              </p>
+              <p class="flex items-center gap-1 text-[#2ce8f4]">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M3 1H7V2H3V1ZM2 2H8V8H2V2ZM3 8H7V9H3V8Z" fill="#2ce8f4"/><path d="M3 3H7V4H3V3ZM4 4H6V5H4V4ZM5 5H6V6H5V5Z" fill="#0f0816"/></svg>
+                智力 ≥ 50
+              </p>
+              <p class="flex items-center gap-1 text-[#99e550]">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M4 1H6V2H4V1ZM3 2H7V3H3V2ZM2 3H8V6H2V3ZM3 6H7V8H3V6ZM4 8H6V9H4V8Z" fill="#99e550"/><path d="M4 3H5V4H4V3ZM5 4H6V5H5V4Z" fill="#0f0816"/></svg>
+                敏捷 ≥ 50
+              </p>
+            </div>
+            
+            <!-- Adult → Evolution Branches -->
+            <div v-else-if="stats.class === 'adult'" class="space-y-1.5">
+              <p class="text-[#d95763] font-bold flex items-center gap-1">
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" class="flex-shrink-0"><path d="M4 1H6V2H4V1ZM3 2H4V3H3V2ZM6 2H7V3H6V2ZM2 3H3V4H2V3ZM7 3H8V4H7V3ZM1 4H9V5H1V4ZM2 5H8V8H2V5ZM3 8H7V9H3V8Z" fill="#d95763"/><path d="M3 3H4V4H3V3ZM6 3H7V4H6V3ZM4 5H5V6H4V5Z" fill="#ffe762"/></svg>
+                已達最終階段
+              </p>
+              <p class="mt-1 text-[9px] text-[#8f80a0]">可能的進化分支:</p>
+              <p class="text-[9px] text-[#e0d8f0]">戰士猛虎 (STR優勢)</p>
+              <p class="text-[9px] text-[#e0d8f0]">敏捷靈貓 (DEX優勢)</p>
+              <p class="text-[9px] text-[#e0d8f0]">智者賢貓 (INT優勢)</p>
+            </div>
+            
+            <!-- Tooltip Arrow -->
+            <div class="absolute top-0 right-2 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-b-4 border-b-[#2ce8f4] -translate-y-full"></div>
+          </div>
+        </div>
+        
         <button 
           @click="$emit('deletePet')"
           class="p-1 bg-[#2b193f] border border-[#d95763] hover:bg-[#3d2459] active:translate-y-0.5 group"
@@ -26,11 +116,21 @@
           <div class="absolute inset-0 bg-[#2b193f] opacity-50 overflow-hidden" />
           
           <!-- The Animated Pixel Avatar -->
-          <div class="scale-110 transform translate-y-1 relative z-10">
+          <div class="w-full h-full relative z-10">
              <PixelAvatar 
+               :stage="stats.class || stats.stage"
+               :species="stats.species"
+               :stats="{
+                 str: stats.str,
+                 int: stats.int,
+                 dex: stats.dex,
+                 happiness: stats.happiness,
+                 generation: stats.generation,
+                 age: stats.ageSeconds
+               }"
                skinColor="#ffdbac" 
-               hairColor="#e0d8f0" 
                outfitColor="#9fd75b" 
+               :is-dead="stats.isDead"
              />
           </div>
 
@@ -63,11 +163,19 @@
                     <path d="M3 7H7V8H3V7Z" fill="#1b1026"/>
                   </g>
                   <!-- Sad -->
-                  <g v-else>
+                  <g v-else-if="mood.type === 'sad'">
                     <path d="M2 4H3V6H2V4ZM7 4H8V6H7V4Z" fill="#1b1026"/>
                     <path d="M3 7H4V8H3V7ZM6 7H7V8H6V7ZM4 6H6V7H4V6Z" fill="#1b1026"/>
                     <path d="M2 6H3V7H2V6ZM7 6H8V7H7V6Z" fill="#2ce8f4" fill-opacity="0.5"/>
                   </g>
+                  <!-- Dead -->
+                  <g v-else-if="mood.type === 'dead'">
+                    <path d="M2 3H3V4H4V5H3V4H2V3ZM4 3H5V4H4V3Z" fill="#1b1026"/>
+                    <path d="M7 3H8V4H9V5H8V4H7V3ZM9 3H10V4H9V3Z" fill="#1b1026"/>
+                    <path d="M2 5H3V6H2V5ZM4 5H5V6H4V5Z" fill="#1b1026"/>
+                    <path d="M7 5H8V6H7V5ZM9 5H10V6H9V5Z" fill="#1b1026"/>
+                    <path d="M3 7H8V8H3V7Z" fill="#1b1026"/>
+                  </g>
                 </svg>
                 <span class="text-[10px] font-bold font-mono leading-none">{{ mood.text }}</span>
               </div>
@@ -120,7 +228,7 @@
     <!-- Vitals - Updated to Health, Hunger, Happiness -->
     <div class="flex flex-col gap-2 px-1 mb-2">
       <!-- Health (Heart) -->
-      <RetroResourceBar :current="stats.hp" :max="stats.maxHp" type="hp" label="生命" :segments="10">
+      <RetroResourceBar :current="stats.hp" :max="stats.maxHp" type="hp" label="健康" :segments="10">
         <template #icon>
           <svg width="100%" height="100%" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M2 2H4V3H2V2ZM6 2H8V3H6V2ZM1 3H2V5H1V3ZM8 3H9V5H8V3ZM2 5H3V6H2V5ZM7 5H8V6H7V5ZM3 6H4V7H3V6ZM6 6H7V7H6V6ZM4 7H6V8H4V7Z" fill="#d95763"/>
@@ -183,6 +291,14 @@
 
         <!-- Core Stats -->
         <div class="grid grid-cols-2 gap-x-4 gap-y-2 pt-2 border-t border-[#4a3b5e]">
+          <div class="flex justify-between items-center px-1">
+            <span class="text-[10px] text-[#d95763] font-mono">生命</span>
+            <span class="text-[10px] text-[#e0d8f0] font-mono">{{ Math.floor(stats.maxHp || 100) }}</span>
+          </div>
+          <div class="flex justify-between items-center px-1">
+            <span class="text-[10px] text-[#d95763] font-mono">運氣</span>
+            <span class="text-[10px] text-[#e0d8f0] font-mono">{{ Math.floor(stats.luck || 0) }}</span>
+          </div>
           <div class="flex justify-between items-center px-1">
             <span class="text-[10px] text-[#f6b26b] font-mono">力量</span>
             <span class="text-[10px] text-[#e0d8f0] font-mono">{{ Math.floor(stats.str || 0) }}</span>
@@ -195,10 +311,6 @@
             <span class="text-[10px] text-[#99e550] font-mono">敏捷</span>
             <span class="text-[10px] text-[#e0d8f0] font-mono">{{ Math.floor(stats.dex || 0) }}</span>
           </div>
-          <div class="flex justify-between items-center px-1">
-            <span class="text-[10px] text-[#d95763] font-mono">運氣</span>
-            <span class="text-[10px] text-[#e0d8f0] font-mono">{{ Math.floor(stats.luck || 0) }}</span>
-          </div>
         </div>
 
         <!-- Combat Stats -->
@@ -336,8 +448,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { Trophy, Trash2, Sparkles, Star, Gem, Circle, Leaf } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
+import { Trophy, Trash2, Sparkles, Star, Gem, Circle, Leaf, HelpCircle } from 'lucide-vue-next';
 import PixelFrame from './PixelFrame.vue';
 import RetroResourceBar from './RetroResourceBar.vue';
 import RetroCounter from './RetroCounter.vue';
@@ -355,6 +467,7 @@ defineEmits(['openAchievements', 'deletePet', 'openInventory']);
 
 // Determine mood based on happiness
 const mood = computed(() => {
+  if (props.stats.isDead) return { icon: '💀', text: '死亡', type: 'dead' };
   const happiness = props.stats.happiness || 0;
   if (happiness >= 80) return { icon: '😄', text: '開心', type: 'happy' };
   if (happiness >= 50) return { icon: '🙂', text: '平靜', type: 'calm' };
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e5d804a..740e674 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -46,6 +46,7 @@
               @openShop="showShop = true"
               @openAdventure="showAdventureSelect = true"
               @toggleSleep="handleToggleSleep"
+              @debugAddItems="handleDebugAddItems"
           />
         </div>
       </div>
@@ -68,7 +69,7 @@
        @close="showAchievements = false" 
        title="成就"
     >
-       <AchievementsOverlay :achievements="ACHIEVEMENTS_DATA" />
+       <AchievementsOverlay :achievements="achievementsState" />
     </PixelModal>
 
     <!-- Inventory Overlay -->
@@ -83,6 +84,7 @@
           @unequip="handleUnequip"
           @use="handleUseItem"
           @delete="handleDeleteItem"
+          @repair="handleRepair"
        />
     </PixelModal>
 
@@ -172,6 +174,7 @@ import AdventureOverlay from '~/components/pixel/AdventureOverlay.vue';
 
 import { PetSystem } from '../../core/pet-system.js';
 import { TempleSystem } from '../../core/temple-system.js';
+import { AchievementSystem } from '../../core/achievement-system.js';
 import { ApiService } from '../../core/api-service.js';
 
 // Import from data and core instead of types
@@ -192,6 +195,7 @@ type AdventureLocation = typeof ADVENTURES[0];
 const apiService = new ApiService({ useMock: true }); // Use localStorage mock for now
 const petSystem = ref<PetSystem | null>(null);
 const templeSystem = ref<TempleSystem | null>(null);
+const achievementSystem = ref<AchievementSystem | null>(null);
 const initialized = ref(false);
 
 // --- RESPONSIVE ---
@@ -214,6 +218,7 @@ if (typeof window !== 'undefined') {
 // Reactive state mapped from PetSystem
 const systemState = ref<any>(null);
 const allDeities = ref<Deity[]>([]);
+const achievementsState = ref<any[]>([]);
 
 const playerStats = computed<EntityStats>(() => {
   if (!systemState.value) return {
@@ -233,6 +238,7 @@ const playerStats = computed<EntityStats>(() => {
 
   return {
     name: s.name || "Pet",
+    species: s.species || 'cat',
     class: s.stage,
     hp: Math.floor(s.health),
     maxHp: 100,
@@ -246,6 +252,7 @@ const playerStats = computed<EntityStats>(() => {
     maxHappiness: 100,
     
     age: formatAge(currentAge),
+    ageSeconds: Math.floor(currentAge),
     generation: s.generation || 1,
     height: `${s.height || 0} cm`,
     weight: `${Math.floor(s.weight || 0)} g`,
@@ -307,9 +314,17 @@ const isFighting = ref(false);
 const battleLogs = ref<string[]>([]);
 const showNamingOverlay = ref(false);
 
-const handleNameSubmit = async (name: string) => {
+const handleNameSubmit = async (payload: { name: string, species: string }) => {
   if (petSystem.value) {
-    await petSystem.value.updateState({ name });
+    const speciesId = payload.species === 'dog' ? 'tinyPuppy' : 'tinyTigerCat';
+    await petSystem.value.updateState({ 
+      name: payload.name,
+      speciesId: speciesId,
+      species: payload.species // Keep this for UI if needed, or rely on speciesId
+    });
+    // Force reload of species config in system if needed, or re-initialize
+    // Since updateState might not reload config, we might need a specific method or just handle it in updateState
+    
     systemState.value = petSystem.value.getState();
     showNamingOverlay.value = false;
   }
@@ -319,6 +334,9 @@ const handleDeletePet = async () => {
   if (confirm('確定要刪除寵物嗎？此操作無法撤銷！(Are you sure you want to delete your pet?)')) {
     if (petSystem.value) {
       await petSystem.value.deletePet();
+      if (achievementSystem.value) {
+        await achievementSystem.value.reset();
+      }
       location.reload(); // Reload to reset state and trigger new game flow
     }
   }
@@ -332,6 +350,10 @@ onMounted(async () => {
   // Initialize Systems
   petSystem.value = new PetSystem(apiService);
   templeSystem.value = new TempleSystem(apiService, petSystem.value);
+  achievementSystem.value = new AchievementSystem(petSystem.value, null, templeSystem.value, apiService);
+  
+  // Connect achievementSystem to petSystem (circular reference after creation)
+  petSystem.value.achievementSystem = achievementSystem.value;
 
   // Load Data
   console.log("Initializing PetSystem...");
@@ -339,19 +361,24 @@ onMounted(async () => {
   console.log("Initial State:", state);
   systemState.value = state;
   
+  // Initialize other systems
+  await templeSystem.value.initialize();
+  await achievementSystem.value.initialize();
+  
   // Check if naming is required
   if (!state.name) {
     showNamingOverlay.value = true;
   }
   
   // Load Deities
-  allDeities.value = await templeSystem.value.getDeities();
+  allDeities.value = templeSystem.value.getDeities();
 
   // Start Game Loop with callback to update UI
   petSystem.value.startTickLoop((newState: any) => {
     // Use nextTick to ensure safe state updates
     if (newState && petSystem.value) {
       systemState.value = { ...newState };
+      updateAchievementsState();
     }
   });
   
@@ -362,6 +389,7 @@ onMounted(async () => {
         const currentState = petSystem.value.getState();
         if (currentState) {
           systemState.value = { ...currentState };
+          updateAchievementsState();
         }
       } catch (error) {
         console.error('Error updating state:', error);
@@ -515,20 +543,177 @@ const handleToggleSleep = async () => {
     }
 };
 
-const handleEquip = async (itemId: string, asAppearance: boolean) => {
-    console.log("Equip not fully implemented in core yet", itemId);
+
+// ... (imports)
+
+
+// Helper to recalculate stats based on equipped items
+const recalculateStats = (inventory: any[]) => {
+    const newBuffs: { flat: Record<string, number>, percent: Record<string, number> } = { flat: {}, percent: {} };
+    
+    inventory.forEach(item => {
+        if (item.isEquipped && !item.isAppearance && item.effects) {
+            // Apply flat effects
+            if (item.effects.flat) {
+                Object.entries(item.effects.flat).forEach(([key, value]) => {
+                    newBuffs.flat[key] = (newBuffs.flat[key] || 0) + (value as number);
+                });
+            }
+            // Apply percent effects
+            if (item.effects.percent) {
+                Object.entries(item.effects.percent).forEach(([key, value]) => {
+                    newBuffs.percent[key] = (newBuffs.percent[key] || 0) + (value as number);
+                });
+            }
+        }
+    });
+    
+    return newBuffs;
 };
 
-const handleUnequip = async (slot: EquipSlot, asAppearance: boolean) => {
-    console.log("Unequip not fully implemented in core yet", slot);
+const handleEquip = async (itemId: string, asAppearance: boolean) => {
+    if (!petSystem.value) return;
+    
+    const currentState = petSystem.value.getState();
+    const inventory = [...currentState.inventory];
+    const itemIndex = inventory.findIndex((i: any) => i.id === itemId);
+    
+    if (itemIndex === -1) return;
+    
+    const item = inventory[itemIndex];
+    const slot = item.slot;
+    
+    if (!slot) return; // Should not happen for equipment
+    
+    // Unequip existing item in the same slot and mode
+    const existingItemIndex = inventory.findIndex((i: any) => 
+        i.isEquipped && i.slot === slot && !!i.isAppearance === asAppearance
+    );
+    
+    if (existingItemIndex !== -1) {
+        inventory[existingItemIndex].isEquipped = false;
+        inventory[existingItemIndex].isAppearance = false;
+    }
+    
+    // Equip new item and mark as having been equipped (for durability tracking)
+    inventory[itemIndex].isEquipped = true;
+    inventory[itemIndex].isAppearance = asAppearance;
+    inventory[itemIndex].hasBeenEquipped = true; // Mark that this item has been used
+    
+    // Recalculate stats
+    const newEquipmentBuffs = recalculateStats(inventory);
+    
+    await petSystem.value.updateState({ 
+        inventory, 
+        equipmentBuffs: newEquipmentBuffs 
+    });
+    systemState.value = petSystem.value.getState();
+};
+
+const handleUnequip = async (slot: string, asAppearance: boolean) => {
+    if (!petSystem.value) return;
+    
+    const currentState = petSystem.value.getState();
+    const inventory = [...currentState.inventory];
+    
+    const itemIndex = inventory.findIndex((i: any) => 
+        i.isEquipped && i.slot === slot && !!i.isAppearance === asAppearance
+    );
+    
+    if (itemIndex !== -1) {
+        inventory[itemIndex].isEquipped = false;
+        inventory[itemIndex].isAppearance = false;
+        
+        // Recalculate stats
+        const newEquipmentBuffs = recalculateStats(inventory);
+        
+        await petSystem.value.updateState({ 
+            inventory, 
+            equipmentBuffs: newEquipmentBuffs 
+        });
+        systemState.value = petSystem.value.getState();
+    }
 };
 
 const handleUseItem = async (itemId: string) => {
-    console.log("Use item not fully implemented in core yet", itemId);
+    if (!petSystem.value) return;
+    
+    const currentState = petSystem.value.getState();
+    let inventory = [...currentState.inventory];
+    const itemIndex = inventory.findIndex((i: any) => i.id === itemId);
+    
+    if (itemIndex === -1) return;
+    
+    const item = inventory[itemIndex];
+    
+    // Apply effects
+    if (item.effects) {
+        const updates: any = {};
+        
+        // Handle modifyStats (e.g. hunger, happiness, health)
+        if (item.effects.modifyStats) {
+            Object.entries(item.effects.modifyStats).forEach(([key, value]) => {
+                const currentVal = currentState[key] || 0;
+                // Simple clamp to 0-100 for basic stats, though petSystem might handle it
+                // For now, let's just add it and let petSystem clamp if needed, or clamp here
+                let newVal = currentVal + (value as number);
+                if (['hunger', 'happiness', 'health'].includes(key)) {
+                    newVal = Math.min(100, Math.max(0, newVal));
+                }
+                updates[key] = newVal;
+            });
+        }
+        
+        // Handle cureSickness
+        if (item.effects.cureSickness) {
+            updates.isSick = false;
+        }
+        
+        // Handle addBuff (simplified)
+        if (item.effects.addBuff) {
+            // This would require a more complex buff system in petSystem
+            console.log("Buffs not fully implemented yet", item.effects.addBuff);
+        }
+        
+        // Apply updates
+        if (Object.keys(updates).length > 0) {
+            await petSystem.value.updateState(updates);
+        }
+    }
+    
+    // Reduce quantity or remove
+    if (item.stackable && item.quantity > 1) {
+        inventory[itemIndex].quantity--;
+    } else {
+        inventory.splice(itemIndex, 1);
+    }
+    
+    await petSystem.value.updateState({ inventory });
+    systemState.value = petSystem.value.getState();
 };
 
 const handleDeleteItem = async (itemId: string) => {
-    console.log("Delete item not fully implemented in core yet", itemId);
+    if (!petSystem.value) return;
+    if (!confirm('確定要丟棄這個物品嗎？')) return;
+
+    const currentState = petSystem.value.getState();
+    const inventory = [...currentState.inventory];
+    const itemIndex = inventory.findIndex((i: any) => i.id === itemId);
+
+    if (itemIndex !== -1) {
+        const item = inventory[itemIndex];
+        
+        inventory.splice(itemIndex, 1);
+        
+        // Recalculate stats in case an equipped item was deleted
+        const newEquipmentBuffs = recalculateStats(inventory);
+
+        await petSystem.value.updateState({ 
+            inventory,
+            equipmentBuffs: newEquipmentBuffs
+        });
+        systemState.value = petSystem.value.getState();
+    }
 };
 
 const handleSwitchDeity = async (id: string) => {
@@ -546,8 +731,9 @@ const handleAddFavor = async (amount: number) => {
 };
 
 const handleBuyItem = async (item: Item) => {
-    if (petSystem.value && systemState.value.coins >= item.price) {
-         const newCoins = systemState.value.coins - item.price;
+    const price = (item as any).price || 100;
+    if (petSystem.value && systemState.value.coins >= price) {
+         const newCoins = systemState.value.coins - price;
          const newInventory = [...(systemState.value.inventory || []), { ...item, id: `buy-${Date.now()}` }];
          await petSystem.value.updateState({ coins: newCoins, inventory: newInventory });
          systemState.value = petSystem.value.getState();
@@ -556,6 +742,57 @@ const handleBuyItem = async (item: Item) => {
     }
 };
 
+const handleDebugAddItems = async () => {
+    if (!petSystem.value) return;
+    
+    // Add ALL items from ITEMS definition
+    const newItems = Object.values(ITEMS).map((itemDef: any) => {
+        const newItem = { ...itemDef };
+        newItem.id = `${newItem.id}_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`;
+        // For debug purposes, set items at full durability (not randomized)
+        // Durability will only decrease once the item has been equipped (hasBeenEquipped = true)
+        newItem.quantity = 1;
+        newItem.isEquipped = false;
+        // Don't set hasBeenEquipped - it should be undefined for new items
+        return newItem;
+    });
+
+    const currentInventory = systemState.value.inventory || [];
+    const updatedInventory = [...currentInventory, ...newItems];
+    
+    await petSystem.value.updateState({ inventory: updatedInventory });
+    systemState.value = petSystem.value.getState();
+};
+
+const handleRepair = async (itemId: string) => {
+    if (!petSystem.value) return;
+    
+    const currentState = petSystem.value.getState();
+    const inventory = [...currentState.inventory];
+    const itemIndex = inventory.findIndex((i: any) => i.id === itemId);
+    
+    if (itemIndex === -1) return;
+    
+    const item = inventory[itemIndex];
+    if (!item.maxDurability || item.maxDurability === Infinity) return;
+    
+    const missingDurability = item.maxDurability - item.durability;
+    if (missingDurability <= 0) return;
+    
+    const cost = Math.ceil(missingDurability * 0.5);
+    
+    if (currentState.coins >= cost) {
+        inventory[itemIndex].durability = item.maxDurability;
+        await petSystem.value.updateState({ 
+            coins: currentState.coins - cost,
+            inventory 
+        });
+        systemState.value = petSystem.value.getState();
+        console.log(`🔨 Repaired item ${item.name} for ${cost} gold`);
+    }
+};
+
+
 const handleSellItem = async (item: Item) => {
     if (petSystem.value) {
         const sellPrice = Math.floor((item as any).price / 2);
@@ -569,6 +806,22 @@ const handleSellItem = async (item: Item) => {
 // Use imported data instead of mock
 const ADVENTURE_LOCATIONS = ADVENTURES;
 const ACHIEVEMENTS_DATA = ACHIEVEMENTS;
+const updateAchievementsState = () => {
+  if (achievementSystem.value) {
+    const all = achievementSystem.value.achievements;
+    achievementsState.value = all.map(achievement => {
+       const progress = achievementSystem.value!.getAchievementProgress(achievement);
+       const isUnlocked = achievementSystem.value!.unlockedAchievements.includes(achievement.id);
+       return {
+         ...achievement,
+         unlocked: isUnlocked,
+         currentValue: progress.current,
+         maxValue: progress.target,
+         progress: Math.floor(progress.progress || 0)
+       };
+    });
+  }
+};
 
 // Convert ITEMS object to array for shop
 const SHOP_ITEMS = Object.values(ITEMS).filter((item: any) => item.type === 'consumable' || item.type === 'equipment').map((item: any) => ({
diff --git a/app/utils/formatters.js b/app/utils/formatters.js
new file mode 100644
index 0000000..2055fb3
--- /dev/null
+++ b/app/utils/formatters.js
@@ -0,0 +1,49 @@
+// 格式化工具函數
+
+// 翻譯屬性名稱
+export function formatBuffKey(key) {
+    const keyMap = {
+        luck: '運氣',
+        attack: '攻擊',
+        defense: '防禦',
+        speed: '速度',
+        str: '力量',
+        int: '智力',
+        dex: '敏捷',
+        strGain: '力量成長',
+        intGain: '智力成長',
+        dexGain: '敏捷成長',
+        health: '健康',
+        healthRegen: '健康恢復',
+        healthRecovery: '健康恢復',
+        happiness: '快樂',
+        happinessRecovery: '快樂恢復',
+        hungerDecay: '飢餓速度',
+        sicknessReduction: '生病機率↓',
+        badEventReduction: '壞事機率↓',
+        resourceGain: '資源獲得',
+        dropRate: '掉寶率',
+        gameSuccessRate: '遊戲成功率',
+        miniGameBonus: '小遊戲獎勵',
+        breedingSuccess: '繁殖成功率'
+    };
+    return keyMap[key] || key;
+}
+
+// 翻譯階段名稱
+export function translateStage(stage) {
+    if (!stage) return '';
+    const map = {
+        'egg': '蛋',
+        'baby': '幼年期',
+        'child': '成長期',
+        'adult': '成熟期',
+        'mythic': '神話期',
+        'EGG': '蛋',
+        'BABY': '幼年期',
+        'CHILD': '成長期',
+        'ADULT': '成熟期',
+        'MYTHIC': '神話期'
+    };
+    return map[stage] || stage;
+}
diff --git a/core/pet-system.js b/core/pet-system.js
index d6a095f..e9e10d9 100644
--- a/core/pet-system.js
+++ b/core/pet-system.js
@@ -340,6 +340,13 @@ export class PetSystem {
 
   // 更新狀態（同步到 API）
   async updateState(updates) {
+    // 如果更新了 speciesId，重新載入配置
+    if (updates.speciesId && updates.speciesId !== this.state.speciesId) {
+      this.speciesConfig = PET_SPECIES[updates.speciesId]
+      // 可能需要重新計算屬性或重置某些狀態?
+      // 暫時只更新配置
+    }
+
     this.state = { ...this.state, ...updates }
 
     try {
@@ -541,6 +548,32 @@ export class PetSystem {
     }
 
     // 減少裝備耐久度（每 tick 減少少量，戰鬥或特殊情況會減少更多）
+    // 只對已裝備過的物品減少耐久度（hasBeenEquipped = true）
+    if (this.state.inventory && Array.isArray(this.state.inventory)) {
+      const equippedItems = this.state.inventory.filter(item => item.isEquipped && !item.isAppearance);
+
+      for (const item of equippedItems) {
+        // 只對已經被裝備過的物品減少耐久度
+        if (item.hasBeenEquipped && item.maxDurability && item.maxDurability !== Infinity && item.durability > 0) {
+          // 每 10 個 tick 減少 1 點耐久度（約每 30 秒）
+          if (this.state._tickCount && this.state._tickCount % 10 === 0) {
+            item.durability = Math.max(0, item.durability - 1);
+
+            // 如果耐久度降為 0，自動卸下裝備
+            if (item.durability <= 0) {
+              item.isEquipped = false;
+              item.isAppearance = false;
+              console.log(`⚠️ ${item.name} 耐久度耗盡，已自動卸下`);
+
+              // 重新計算裝備加成
+              this.calculateCombatStats();
+            }
+          }
+        }
+      }
+    }
+
+    // Legacy inventory system support (如果使用舊的 inventorySystem)
     if (this.inventorySystem) {
       // 只有裝備中的道具才會減少耐久度
       const equipped = this.inventorySystem.getEquipped()
diff --git a/data/pet-species.js b/data/pet-species.js
index f698c4a..8d5918b 100644
--- a/data/pet-species.js
+++ b/data/pet-species.js
@@ -217,6 +217,194 @@ export const PET_SPECIES = {
       }
     ],
     personality: ['活潑', '黏人']
+  },
+  tinyPuppy: {
+    id: 'tinyPuppy',
+    name: '小幼犬',
+    description: '忠誠活潑的小狗狗',
+    baseStats: {
+      physiologyTickInterval: 1000,
+      eventCheckInterval: 10000,
+      hungerDecayPerTick: 0.025,      // 狗狗比較容易餓 (原 0.02)
+      happinessDecayPerTick: 0.02,    // 狗狗比較容易開心 (原 0.033)
+      poopChancePerTick: 0.06,        // 狗狗比較容易便便
+      poopHealthDamage: 0.5,
+      hungerHealthDamage: 1,
+      sicknessThreshold: 40,
+      dyingTimeSeconds: 7200,
+      sleepSchedule: {
+        nightSleep: {
+          startHour: 22,     // 晚上 22:00 開始 (比貓晚睡)
+          startMinute: 0,
+          endHour: 7,        // 早上 7:00 結束 (比貓早起)
+          endMinute: 0,
+          autoSleep: true,
+          randomWakeChance: 0.4
+        },
+        noonNap: {
+          startHour: 13,
+          startMinute: 0,
+          endHour: 14,
+          endMinute: 0,
+          autoSleep: true,
+          randomWakeChance: 0.2
+        }
+      },
+      maxPoopCount: 5,
+      sleepDecayMultiplier: 0.1,
+      defaultHeight: 12,             // 狗狗比較大隻
+      defaultWeight: 600,
+      playHungerCost: 2,             // 玩耍消耗更多體力
+      combatFormulas: {
+        attack: {
+          strMultiplier: 3.0,        // 攻擊力更高
+          dexMultiplier: 0.2
+        },
+        defense: {
+          strMultiplier: 1.5,
+          intMultiplier: 1.5
+        },
+        speed: {
+          dexMultiplier: 2.0,        // 速度稍慢
+          intMultiplier: 0.5
+        }
+      },
+      dropRate: 0.1,
+      luck: 15                       // 狗狗運氣比較好?
+    },
+    lifecycle: [
+      {
+        stage: 'egg',
+        durationSeconds: 300,
+        height: 6,
+        baseWeight: 120,
+        weightRange: { min: 100, max: 140 },
+        unlockedFeatures: [],
+        allowedActions: [],
+        enabledSystems: {
+          hunger: false,
+          happiness: false,
+          poop: false,
+          sickness: false,
+          sleep: false
+        }
+      },
+      {
+        stage: 'baby',
+        durationSeconds: 21900,
+        height: 12,
+        baseWeight: 250,
+        weightRange: { min: 220, max: 280 },
+        unlockedFeatures: [],
+        allowedActions: ['feed', 'play', 'clean', 'heal', 'sleep'],
+        enabledSystems: {
+          hunger: true,
+          happiness: true,
+          poop: true,
+          sickness: true,
+          sleep: true
+        }
+      },
+      {
+        stage: 'child',
+        durationSeconds: 281100,
+        height: 20,
+        baseWeight: 500,
+        weightRange: { min: 450, max: 550 },
+        unlockedFeatures: ['miniGames'],
+        allowedActions: ['feed', 'play', 'clean', 'heal', 'sleep'],
+        enabledSystems: {
+          hunger: true,
+          happiness: true,
+          poop: true,
+          sickness: true,
+          sleep: true
+        },
+        conditions: {
+          str: 10,
+          int: 6
+        }
+      },
+      {
+        stage: 'adult',
+        durationSeconds: Infinity,
+        height: 30,
+        baseWeight: 800,
+        weightRange: { min: 700, max: 900 },
+        unlockedFeatures: ['miniGames', 'breeding'],
+        allowedActions: ['feed', 'play', 'clean', 'heal', 'sleep'],
+        enabledSystems: {
+          hunger: true,
+          happiness: true,
+          poop: true,
+          sickness: true,
+          sleep: true
+        },
+        conditions: {
+          str: 60,
+          int: 40,
+          dex: 40
+        },
+        evolutions: [
+          {
+            id: 'guardian_dog',
+            name: '守護神犬',
+            icon: '🐕',
+            description: '忠誠的守護者',
+            conditions: {
+              str: { min: 60, dominant: true }
+            },
+            statModifiers: {
+              attack: 1.4,
+              defense: 1.4,
+              speed: 0.9
+            }
+          },
+          {
+            id: 'hunting_dog',
+            name: '獵犬',
+            icon: '🐩',
+            description: '敏銳的獵手',
+            conditions: {
+              dex: { min: 50, dominant: true }
+            },
+            statModifiers: {
+              attack: 1.2,
+              defense: 0.9,
+              speed: 1.3
+            }
+          },
+          {
+            id: 'guide_dog',
+            name: '導盲犬',
+            icon: '🦮',
+            description: '聰明的嚮導',
+            conditions: {
+              int: { min: 50, dominant: true }
+            },
+            statModifiers: {
+              attack: 0.8,
+              defense: 1.2,
+              speed: 1.0,
+              magic: 1.4
+            }
+          },
+          {
+            id: 'balanced_dog',
+            name: '成年犬',
+            icon: '🐕‍🦺',
+            description: '健康的成年犬',
+            conditions: {},
+            statModifiers: {
+              attack: 1.1,
+              defense: 1.1,
+              speed: 1.0
+            }
+          }
+        ]
+      }
+    ],
+    personality: ['忠誠', '憨厚']
   }
 }