diff --git a/app/app.vue b/app/app.vue
index 995e624..f309eee 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,64 +1,39 @@
 <template>
-  <div class="app-root">
+  <div>
     <NuxtPage />
   </div>
 </template>
 
 <style>
+/* Global Styles for Pixel Art */
 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 
-:root {
-  --pixel-border: 3px;
-  --pixel-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
-  
-  /* 復古暗色調 RPG 配色 */
-  --color-bg: #6b6250;
-  --color-panel: #3a3430;
-  --color-panel-light: #4a4440;
-  --color-border: #2a2420;
-  --color-accent: #e89547;
-  --color-accent-dark: #d17a2e;
-  --color-text: #f4e4c1;
-  --color-text-dark: #8b7355;
-  
-  /* 進度條與狀態 */
-  --color-hp: #c44032;
-  --color-hunger: #e89547;
-  --color-happy: #74b9ff;
-  --color-energy: #55efc4;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 body {
-  font-family: 'Press Start 2P', cursive;
-  background: var(--color-bg);
-  color: var(--color-text);
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  background-color: #1b1026;
+  color: #e0d8f0;
+  font-family: 'Press Start 2P', monospace;
 }
 
-/* 響應式字體調整 */
-@media (max-width: 480px) {
-  body {
-    font-size: 10px;
-    line-height: 1.5;
-  }
+/* Scrollbar Styling */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #0f0816;
+  border-left: 1px solid #2b193f;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #4a3b5e;
+  border: 1px solid #2b193f;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #8f80a0;
 }
 
-@media (min-width: 481px) and (max-width: 768px) {
-  body {
-    font-size: 11px;
-  }
-}
-
-.app-root {
-  min-height: 100vh;
-  min-height: -webkit-fill-available; /* iOS Safari 支援 */
+/* Pixelated Image Rendering */
+.image-pixelated {
+  image-rendering: pixelated;
 }
 </style>
diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css
new file mode 100644
index 0000000..7c897b5
--- /dev/null
+++ b/app/assets/css/tailwind.css
@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+@theme {
+    /* Pixel Dungeon Color Palette */
+    --color-pixel-white: #e0d8f0;
+    --color-pixel-black: #1b1026;
+    --color-pixel-bg: #0f0816;
+    --color-pixel-primary: #f6b26b;
+    --color-pixel-secondary: #2ce8f4;
+    --color-pixel-accent: #d95763;
+    --color-pixel-green: #99e550;
+    --color-pixel-yellow: #ffe762;
+    --color-pixel-purple: #8f80a0;
+    --color-pixel-dark-purple: #4a3b5e;
+    --color-pixel-panel: #2b193f;
+    --color-pixel-panel-dark: #1b1026;
+    --color-pixel-panel-border: #4a3b5e;
+}
\ No newline at end of file
diff --git a/app/components/pixel/AchievementsOverlay.vue b/app/components/pixel/AchievementsOverlay.vue
new file mode 100644
index 0000000..d03f292
--- /dev/null
+++ b/app/components/pixel/AchievementsOverlay.vue
@@ -0,0 +1,112 @@
+<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]">
+       <div class="flex gap-4">
+           <span class="text-[#99e550] tracking-widest uppercase">Unlocked: {{ unlocked }}/{{ total }}</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>
+    </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 
+         v-for="achievement in achievements"
+         :key="achievement.id" 
+         class="relative border-2 p-3 flex flex-col gap-2 min-h-[140px] transition-all group hover:bg-[#231533]"
+         :style="{ borderColor: achievement.unlocked ? '#99e550' : '#4a3b5e', backgroundColor: achievement.unlocked ? '#150c1f' : '#0f0816' }"
+      >
+         <!-- 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>
+            <div class="flex flex-col">
+                <h4 class="font-bold tracking-wide leading-none mb-1" :class="achievement.unlocked ? 'text-[#2ce8f4]' : 'text-[#8f80a0]'">
+                  {{ achievement.title }}
+                </h4>
+                <span v-if="achievement.unlocked" class="text-[10px] text-[#99e550] uppercase tracking-widest">Completed</span>
+                <span v-else class="text-[10px] text-[#8f80a0] uppercase tracking-widest flex items-center gap-1">
+                    <Lock :size="10" /> Locked
+                </span>
+            </div>
+         </div>
+         
+         <!-- Description -->
+         <p class="text-xs text-[#e0d8f0] flex-grow leading-tight">
+            {{ 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>
+
+         <!-- Progress Bar (if incomplete) -->
+         <div v-if="!achievement.unlocked && achievement.maxValue" class="mt-auto">
+            <div class="flex justify-between text-[9px] text-[#8f80a0] mb-0.5">
+               <span>{{ achievement.currentValue }} / {{ achievement.maxValue }}</span>
+               <span>{{ achievement.progress }}%</span>
+            </div>
+            <div class="h-1 bg-[#2b193f] w-full">
+                <div class="h-full bg-[#4a3b5e]" :style="{ width: `${achievement.progress}%` }" />
+            </div>
+         </div>
+         
+         <!-- Decorative corner if unlocked -->
+         <div v-if="achievement.unlocked" class="absolute top-0 right-0 w-4 h-4 overflow-hidden">
+            <div class="absolute top-0 right-0 w-2 h-2 bg-[#99e550]" />
+         </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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 RetroProgressBar from './RetroProgressBar.vue'; // Need to create this one too!
+import type { Achievement } from '~/types/pixel';
+
+interface Props {
+  achievements: Achievement[];
+}
+
+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,
+};
+
+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));
+</script>
diff --git a/app/components/pixel/ActionArea.vue b/app/components/pixel/ActionArea.vue
new file mode 100644
index 0000000..96a31da
--- /dev/null
+++ b/app/components/pixel/ActionArea.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="h-full flex flex-col p-4 gap-4 bg-[#1b1026] overflow-y-auto custom-scrollbar">
+    
+    <!-- Table Background styling -->
+    <div class="absolute inset-0 bg-[#231533] opacity-50 pointer-events-none" />
+
+    <!-- Main Grid Layout -->
+    <div class="flex-grow grid grid-cols-12 gap-2 z-10">
+      
+      <!-- Left: Hand (Col 3) -->
+      <div class="col-span-3 flex flex-col gap-2">
+          <PixelFrame title="HAND" class="h-full bg-[#1b1026]" variant="inset">
+              <div class="flex flex-col gap-2 h-full overflow-y-auto pr-1 custom-scrollbar">
+                 <div v-for="(card, i) in handCards" :key="i" class="bg-[#2b193f] border-2 border-[#4a3b5e] p-1.5 flex flex-col hover:-translate-y-1 transition-transform cursor-pointer group shadow-lg">
+                      <div class="flex justify-between items-start mb-1">
+                         <div class="w-5 h-5 bg-[#1b1026] flex items-center justify-center rounded-sm">
+                           <span class="text-[#f6b26b] text-[10px] font-bold">{{ card.cost }}</span>
+                         </div>
+                         <component :is="card.icon" :size="14" :color="card.color" />
+                      </div>
+                      <span class="text-xs text-[#e0d8f0] uppercase tracking-wide group-hover:text-[#f6b26b]">{{ card.name }}</span>
+                 </div>
+                 <!-- Empty Slot -->
+                 <div class="border-2 border-dashed border-[#4a3b5e] rounded h-16 opacity-30 flex items-center justify-center text-xs">EMPTY</div>
+              </div>
+          </PixelFrame>
+      </div>
+
+      <!-- Center: Action Grid (Col 6) -->
+      <div class="col-span-6 flex flex-col relative">
+         <PixelFrame class="h-full bg-[#2b193f]">
+            <div class="grid grid-cols-4 grid-rows-3 gap-2 h-full p-1">
+                <template v-for="(action, index) in gridItems" :key="index">
+                    <button 
+                        v-if="action"
+                        @click="handleActionClick(action.id)"
+                        class="relative bg-[#1b1026] border-2 border-[#4a3b5e] hover:border-[#f6b26b] hover:bg-[#231533] active:bg-[#f6b26b] active:border-[#f6b26b] group flex flex-col items-center justify-center p-1 transition-colors"
+                    >
+                        <div class="mb-1 p-1 rounded-sm bg-[#231533] group-active:bg-[#1b1026]">
+                            <component :is="action.icon" :size="20" :color="action.color" class="group-active:text-[#f6b26b]" />
+                        </div>
+                        <span class="text-[9px] md:text-[10px] text-[#8f80a0] uppercase tracking-wider group-hover:text-white group-active:text-[#1b1026] font-bold text-center leading-tight">
+                            {{ action.label }}
+                        </span>
+                        
+                        <!-- Corner deco -->
+                        <div class="absolute top-0 right-0 w-1 h-1 bg-[#4a3b5e] group-hover:bg-[#f6b26b]" />
+                        <div class="absolute bottom-0 left-0 w-1 h-1 bg-[#4a3b5e] group-hover:bg-[#f6b26b]" />
+                    </button>
+                    <div v-else class="bg-[#150c1f] border-2 border-[#2b193f] flex items-center justify-center opacity-50 cursor-not-allowed">
+                        <div class="w-2 h-2 bg-[#2b193f] rounded-full"></div>
+                    </div>
+                </template>
+            </div>
+         </PixelFrame>
+      </div>
+
+      <!-- Right: Stats & EQ (Col 3) -->
+      <div class="col-span-3 flex flex-col gap-2">
+          <!-- Stats Table -->
+          <PixelFrame title="STATS" class="bg-[#1b1026] h-2/3" variant="inset">
+              <div class="grid grid-cols-2 gap-x-2 content-start h-full p-1 overflow-y-auto custom-scrollbar">
+                 <div v-for="(stat, i) in statsList" :key="i" class="flex justify-between items-center border-b border-[#2b193f] pb-0.5 mb-0.5">
+                     <span class="text-[#8f80a0] text-[9px]">{{ stat.l }}</span>
+                     <span class="font-mono text-[10px]" :style="{ color: stat.c || '#e0d8f0' }">{{ stat.v }}</span>
+                 </div>
+              </div>
+          </PixelFrame>
+          
+          <!-- Equipment Grid -->
+          <PixelFrame title="EQ" class="bg-[#1b1026] h-1/3" variant="inset">
+               <div 
+                  class="grid grid-cols-4 gap-1 h-full content-center cursor-pointer relative group"
+                  @click="$emit('openInventory')"
+                  title="Open Backpack"
+               >
+                  <div v-for="(Icon, idx) in [Crown, Shirt, Hand, Footprints]" :key="idx" class="aspect-square bg-[#2b193f] border border-[#4a3b5e] flex items-center justify-center group-hover:border-[#f6b26b] transition-colors">
+                       <component :is="Icon" :size="12" class="text-[#5a4b6e] group-hover:text-[#e0d8f0]" />
+                  </div>
+                  <!-- Hover Hint -->
+                  <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center text-[10px] text-[#f6b26b] font-bold pointer-events-none">
+                      OPEN
+                  </div>
+               </div>
+          </PixelFrame>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import PixelFrame from './PixelFrame.vue';
+import { 
+  Sword, Shield, FlaskConical, Crown, Hand, Footprints, Shirt, 
+  Utensils, Gamepad2, Dumbbell, Puzzle, Brush, Pill, Sun, Sparkles, ShoppingBag, Swords
+} from 'lucide-vue-next';
+import type { EntityStats } from '~/types/pixel';
+
+interface Props {
+  playerStats?: EntityStats;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['openInventory', 'openGodSystem', 'openShop', 'openAdventure']);
+
+const ACTIONS = [
+  { id: 'feed', icon: Utensils, color: '#9fd75b', label: 'FEED 餵食' },
+  { id: 'play', icon: Gamepad2, color: '#f6b26b', label: 'PLAY 玩耍' },
+  { id: 'train', icon: Dumbbell, color: '#d75b5b', label: 'TRAIN 訓練' },
+  { id: 'puzzle', icon: Puzzle, color: '#2ce8f4', label: 'PUZZLE 益智' },
+  { id: 'clean', icon: Brush, color: '#8f80a0', label: 'CLEAN 清理' },
+  { id: 'heal', icon: Pill, color: '#9fd75b', label: 'HEAL 治療' },
+  { id: 'fight', icon: Swords, color: '#d95763', label: 'FIGHT 戰鬥' },
+  { id: 'wake', icon: Sun, color: '#ffe762', label: 'WAKE 起床' },
+  { id: 'pray', icon: Sparkles, color: '#e0d8f0', label: 'PRAY 祈福' },
+  { id: 'shop', icon: ShoppingBag, color: '#ffa500', label: 'SHOP 商店' },
+];
+
+const gridItems = computed(() => {
+  return Array.from({ length: 12 }).map((_, i) => ACTIONS[i] || null);
+});
+
+const handCards = [
+  { name: 'Slash', cost: 2, icon: Sword, color: '#d75b5b' },
+  { name: 'Block', cost: 1, icon: Shield, color: '#f6b26b' },
+  { name: 'Heal', cost: 3, icon: FlaskConical, color: '#9fd75b' }
+];
+
+const statsList = computed(() => {
+  const s = props.playerStats || { str:0, int:0, dex:0, luck:0, atk:0, def:0, spd:0 };
+  return [
+    {l:'STR', v:s.str}, {l:'ATK', v:s.atk, c: '#d75b5b'},
+    {l:'INT', v:s.int}, {l:'DEF', v:s.def, c: '#f6b26b'},
+    {l:'DEX', v:s.dex}, {l:'SPD', v:s.spd},
+    {l:'LCK', v:s.luck}, 
+  ];
+});
+
+const handleActionClick = (id: string) => {
+  if (id === 'pray') emit('openGodSystem');
+  else if (id === 'shop') emit('openShop');
+  else if (id === 'fight') emit('openAdventure');
+};
+</script>
diff --git a/app/components/pixel/AdventureOverlay.vue b/app/components/pixel/AdventureOverlay.vue
new file mode 100644
index 0000000..397ea42
--- /dev/null
+++ b/app/components/pixel/AdventureOverlay.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="flex flex-col h-full bg-black text-[#99e550] relative">
+    <!-- Header -->
+    <div class="flex items-center gap-2 text-xl font-bold p-2 border-b-2 border-[#99e550]">
+        <Map class="text-[#e0d8f0]" />
+        <span class="tracking-widest">選擇冒險區域 (SELECT ZONE)</span>
+        <button @click="$emit('close')" class="ml-auto text-white hover:text-red-500"><X /></button>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-grow overflow-y-auto p-4 custom-scrollbar flex flex-col gap-4">
+        <div 
+            v-for="loc in locations"
+            :key="loc.id" 
+            class="border-2 p-4 relative transition-all"
+            :class="isLocked(loc) ? 'border-gray-600 opacity-70' : 'border-[#99e550] hover:bg-[#0f2a0f]'"
+        >
+             <!-- Title -->
+             <div class="text-xl font-bold tracking-widest mb-2 text-[#99e550]">
+                 {{ loc.name }}
+             </div>
+
+             <!-- Description -->
+             <p class="text-xs text-white mb-4 text-center">
+                 {{ loc.description }}
+             </p>
+
+             <!-- Costs & Reqs -->
+             <div class="flex flex-wrap gap-4 mb-4 text-sm font-mono">
+                 <div class="flex items-center gap-2">
+                     <span class="text-[#99e550]">消耗:</span>
+                     <div class="flex items-center gap-1" :class="canAffordHunger(loc) ? 'text-[#9fd75b]' : 'text-red-500'">
+                         <Drumstick :size="14" /> {{ loc.costHunger }}
+                     </div>
+                     <div class="flex items-center gap-1" :class="canAffordGold(loc) ? 'text-[#f6b26b]' : 'text-red-500'">
+                         <Coins :size="14" /> {{ loc.costGold }}
+                     </div>
+                 </div>
+
+                 <div v-if="loc.reqStats" class="flex items-center gap-2">
+                     <span class="text-[#99e550]">要求:</span>
+                     <span v-if="loc.reqStats.str" :class="meetsStr(loc) ? 'text-[#9fd75b]' : 'text-red-500'">STR {{ loc.reqStats.str }}</span>
+                     <span v-if="loc.reqStats.int" :class="meetsInt(loc) ? 'text-[#9fd75b]' : 'text-red-500'">INT {{ loc.reqStats.int }}</span>
+                 </div>
+             </div>
+
+             <!-- Action Button -->
+             <button
+                @click="!isLocked(loc) && canAfford(loc) && $emit('selectLocation', loc)"
+                :disabled="!canAfford(loc) || isLocked(loc)"
+                class="w-full py-2 text-lg tracking-[0.2em] border"
+                :class="(!canAfford(loc) || isLocked(loc)) 
+                    ? 'border-gray-600 text-gray-500 cursor-not-allowed' 
+                    : 'border-[#d95763] text-[#d95763] hover:bg-[#d95763] hover:text-black'"
+             >
+                 {{ isLocked(loc) ? "能力不足" : !canAfford(loc) ? "資源不足" : "出發 !" }}
+             </button>
+             
+             <!-- Side Decoration Bar -->
+             <div class="absolute top-2 bottom-2 right-2 w-2" :class="isLocked(loc) ? 'bg-gray-600' : 'bg-[#99e550]'"></div>
+        </div>
+    </div>
+
+    <!-- Footer / Close Button -->
+    <div class="p-4 border-t border-[#99e550]">
+        <button 
+            @click="$emit('close')"
+            class="border border-[#99e550] text-[#99e550] px-4 py-2 hover:bg-[#99e550] hover:text-black"
+        >
+            關閉
+        </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Map, Drumstick, Coins, X } from 'lucide-vue-next';
+import type { AdventureLocation, EntityStats } from '~/types/pixel';
+
+interface Props {
+  locations: AdventureLocation[];
+  playerStats: EntityStats;
+}
+
+const props = defineProps<Props>();
+defineEmits(['selectLocation', 'close']);
+
+const canAffordHunger = (loc: AdventureLocation) => (props.playerStats.hunger || 0) >= loc.costHunger;
+const canAffordGold = (loc: AdventureLocation) => (props.playerStats.gold || 0) >= loc.costGold;
+const meetsStr = (loc: AdventureLocation) => !loc.reqStats?.str || (props.playerStats.str || 0) >= loc.reqStats.str;
+const meetsInt = (loc: AdventureLocation) => !loc.reqStats?.int || (props.playerStats.int || 0) >= loc.reqStats.int;
+
+const isLocked = (loc: AdventureLocation) => !meetsStr(loc) || !meetsInt(loc);
+const canAfford = (loc: AdventureLocation) => canAffordHunger(loc) && canAffordGold(loc);
+</script>
diff --git a/app/components/pixel/BattleArea.vue b/app/components/pixel/BattleArea.vue
new file mode 100644
index 0000000..dbf967c
--- /dev/null
+++ b/app/components/pixel/BattleArea.vue
@@ -0,0 +1,99 @@
+<template>
+  <div v-if="isFighting" class="h-full w-full bg-black p-4 font-mono overflow-hidden flex flex-col border-b-4 border-[#99e550]">
+    <div class="text-[#99e550] text-sm mb-2 border-b border-gray-700 pb-1 flex justify-between animate-pulse">
+      <span>► BATTLE_LOG_V1.0</span>
+      <span>RECORDING...</span>
+    </div>
+    
+    <div class="flex-grow overflow-y-auto custom-scrollbar flex flex-col gap-1 pr-2">
+      <div v-for="(log, index) in battleLogs" :key="index" class="text-sm md:text-base leading-tight">
+        <span class="text-gray-500 mr-2">[{{ index + 1 }}]</span>
+        <span v-if="log.includes('Victory') || log.includes('Success')" class="text-[#2ce8f4] font-bold">{{ log }}</span>
+        <span v-else-if="log.includes('damage') || log.includes('Hurt')" class="text-[#d95763]">{{ log }}</span>
+        <span v-else-if="log.includes('used')" class="text-[#f6b26b]">{{ log }}</span>
+        <span v-else class="text-[#99e550]">{{ log }}</span>
+      </div>
+      <div ref="logEndRef" />
+    </div>
+  </div>
+
+  <!-- Room Mode (Default) -->
+  <div v-else class="h-full w-full relative overflow-hidden bg-[#0f0816]">
+    <!-- Background Layer with Darker Filter -->
+    <div 
+      class="absolute inset-0 bg-cover bg-center opacity-50"
+      :style="{ 
+        backgroundImage: `url('https://picsum.photos/seed/dungeon/800/400')`,
+        filter: 'contrast(1.2) brightness(0.5) sepia(0.5) hue-rotate(260deg) saturate(1.5)'
+      }" 
+    />
+    
+    <!-- Pixelated Dither Overlay -->
+    <div 
+      class="absolute inset-0 opacity-10 pointer-events-none"
+      :style="{
+          backgroundImage: `repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 0, transparent 50%)`,
+          backgroundSize: '4px 4px'
+      }"
+    />
+
+    <!-- Room Decor - Ground Rug/Circle -->
+    <div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 w-48 h-12 bg-[#2b193f] opacity-60 rounded-[50%] border-2 border-[#4a3b5e] shadow-[0_0_20px_rgba(0,0,0,0.5)]"></div>
+
+    <!-- Battle Log Mode (If Fighting) -->
+    <div v-if="isFighting" class="absolute inset-0 bg-black/80 backdrop-blur-sm p-6">
+      <PixelFrame class="h-full flex flex-col">
+        <div class="text-[#2ce8f4] text-sm mb-4 uppercase tracking-widest font-bold">
+          ⚔️ BATTLE LOG
+        </div>
+        
+        <div class="flex-1 overflow-y-auto custom-scrollbar space-y-2 text-xs">
+          <div 
+            v-for="(log, idx) in battleLogs" 
+            :key="idx"
+            class="text-[#e0d8f0] animate-fade-in"
+          >
+            › {{ log }}
+          </div>
+        </div>
+      </PixelFrame>
+    </div>
+
+    <!-- Main Pet Avatar (Center, Idle) -->
+    <div class="absolute bottom-16 left-1/2 transform -translate-x-1/2 z-10 scale-[3]">
+      <PixelAvatar 
+         skinColor="#ffdbac" 
+         hairColor="#e0d8f0" 
+         outfitColor="#9fd75b" 
+         :deityId="currentDeityId" 
+         weapon="staff"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue';
+import PixelAvatar from './PixelAvatar.vue';
+import type { DeityId } from '~/types/pixel';
+
+interface Props {
+  currentDeityId?: string;
+  isFighting?: boolean;
+  battleLogs?: string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isFighting: false,
+  battleLogs: () => []
+});
+
+const logEndRef = ref<HTMLDivElement | null>(null);
+
+watch(() => props.battleLogs, async () => {
+  await nextTick();
+  if (logEndRef.value) {
+    logEndRef.value.scrollIntoView({ behavior: 'smooth' });
+  }
+}, { deep: true });
+</script>
diff --git a/app/components/pixel/GodSystemOverlay.vue b/app/components/pixel/GodSystemOverlay.vue
new file mode 100644
index 0000000..c2458a9
--- /dev/null
+++ b/app/components/pixel/GodSystemOverlay.vue
@@ -0,0 +1,322 @@
+<template>
+  <div class="flex flex-col h-full gap-4">
+    <!-- Header: Deity System Title -->
+    <div class="text-xl font-bold tracking-widest text-[#2ce8f4] border-b-2 border-[#4a3b5e] pb-2">
+        [GOD SYSTEM] 神明系統
+    </div>
+
+    <!-- Top Action Buttons Grid -->
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
+        <PixelButton 
+            v-for="action in TAB_ACTIONS"
+            :key="action.id"
+            @click="activeTab = action.id"
+            :variant="activeTab === action.id ? 'primary' : 'secondary'"
+            class="text-xs md:text-sm flex items-center justify-center gap-2"
+        >
+            <component :is="action.icon" :size="16" />
+            {{ action.label }}
+        </PixelButton>
+        <PixelButton :variant="activeTab === 'LIST' ? 'primary' : 'secondary'" @click="activeTab = 'LIST'" class="text-xs md:text-sm">
+           [LIST] 神明列表
+        </PixelButton>
+    </div>
+
+    <!-- Main Content Area -->
+    <div class="flex-grow bg-[#150c1f] border border-[#4a3b5e] p-4 relative overflow-hidden">
+        
+        <!-- Background Decor -->
+        <div class="absolute inset-0 opacity-20 pointer-events-none flex items-center justify-center">
+            <div class="w-64 h-64 border-[20px] border-[#2b193f] rounded-full"></div>
+        </div>
+
+        <!-- --- VIEW: PRAY --- -->
+        <div v-if="activeTab === 'PRAY'" class="flex flex-col items-center justify-center h-full gap-6">
+            <div class="transform scale-150 mb-4">
+                <PixelAvatar :deityId="currentDeity" />
+            </div>
+            <h2 class="text-2xl text-[#f6b26b] font-bold">{{ activeDeity.title }} {{ activeDeity.name }}</h2>
+            
+            <div class="w-full max-w-md">
+                <div class="flex justify-between text-xs text-[#8f80a0] mb-1">
+                    <span>FAVOR (好感度)</span>
+                    <span>{{ activeDeity.favor }}/{{ activeDeity.maxFavor }}</span>
+                </div>
+                <div class="h-4 bg-[#2b193f] border border-[#4a3b5e] rounded-full overflow-hidden relative">
+                    <div 
+                        class="h-full bg-[#d95763] transition-all duration-500" 
+                        :style="{ width: `${(activeDeity.favor / activeDeity.maxFavor) * 100}%` }"
+                    ></div>
+                </div>
+            </div>
+
+            <PixelButton class="w-48 py-4 text-lg animate-pulse" @click="$emit('addFavor', 10)">
+                🙏 PRAY (祈福)
+            </PixelButton>
+            <p class="text-xs text-[#8f80a0]">Increases favor with {{ activeDeity.name }}</p>
+        </div>
+
+        <!-- --- VIEW: JIAOBEI (Free Toss) --- -->
+        <div v-else-if="activeTab === 'JIAOBEI'" class="flex flex-col items-center justify-center h-full gap-8">
+             <h3 class="text-[#f6b26b] text-lg uppercase tracking-widest">Moon Block Divination</h3>
+             <JiaobeiBlocks :result="lastResult" :isTossing="isTossing" />
+             
+             <div class="mt-8">
+                <PixelButton @click="handleToss(false)" :disabled="isTossing" class="w-40">
+                    {{ isTossing ? 'TOSSING...' : 'TOSS BLOCKS' }}
+                </PixelButton>
+             </div>
+        </div>
+
+        <!-- --- VIEW: LOT (Draw & Verify) --- -->
+        <div v-else-if="activeTab === 'LOT'" class="flex flex-col items-center justify-center h-full gap-4 text-center w-full">
+            
+            <!-- Phase: Idle -->
+            <template v-if="lotPhase === LotPhase.Idle">
+                <Scroll :size="64" class="text-[#ffe762] mb-4" />
+                <h3 class="text-xl text-[#e0d8f0] mb-2">Draw a Fortune Lot</h3>
+                <p class="text-sm text-[#8f80a0] max-w-xs mb-6">
+                    Shake the container to draw a stick, then verify it with 3 consecutive Saint Cups.
+                </p>
+                <PixelButton @click="handleDrawLot" class="w-48">
+                    DRAW LOT
+                </PixelButton>
+            </template>
+
+            <!-- Phase: Drawing (Animation) -->
+            <div v-else-if="lotPhase === LotPhase.Drawing" class="animate-bounce">
+                <div class="w-16 h-24 bg-[#4a2e18] border-2 border-[#f6b26b] mx-auto mb-4 relative rounded-sm">
+                    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-[#f6b26b] font-bold">
+                        ...
+                    </div>
+                </div>
+                <span class="text-[#f6b26b] tracking-widest">SHAKING...</span>
+            </div>
+
+            <!-- Phase: Verify -->
+            <template v-else-if="lotPhase === LotPhase.PendingVerify || lotPhase === LotPhase.Verifying">
+                <div class="text-2xl font-bold text-[#e0d8f0] border-2 border-[#f6b26b] px-4 py-2 mb-4 bg-[#2b193f]">
+                    LOT #{{ drawnLotNumber }}
+                </div>
+                
+                <p class="text-sm text-[#8f80a0] mb-4">
+                    Verify with 3 Consecutive Saint Cups
+                </p>
+
+                <div class="flex gap-2 mb-6 justify-center">
+                    <div 
+                        v-for="i in 3"
+                        :key="i" 
+                        class="w-4 h-4 rounded-full border border-[#4a3b5e]"
+                        :class="i <= saintCupCount ? 'bg-[#d95763] shadow-[0_0_10px_#d95763]' : 'bg-[#1b1026]'"
+                    />
+                </div>
+
+                <JiaobeiBlocks :result="lastResult" :isTossing="isTossing" />
+                
+                <div class="mt-8">
+                    <PixelButton @click="handleToss(true)" :disabled="isTossing" class="w-40">
+                        VERIFY ({{ saintCupCount }}/3)
+                    </PixelButton>
+                </div>
+            </template>
+
+             <!-- Phase: Failed -->
+             <template v-else-if="lotPhase === LotPhase.Failed">
+                <div class="text-[#d95763] text-4xl mb-4">✖</div>
+                <h3 class="text-lg text-[#d95763] mb-2">Not a Saint Cup</h3>
+                <p class="text-sm text-[#8f80a0] mb-6">
+                    The deity indicates this is not the right lot.<br/>Please draw again.
+                </p>
+                <PixelButton @click="resetLot" variant="danger">
+                    TRY AGAIN
+                </PixelButton>
+             </template>
+
+             <!-- Phase: Success - Detailed Result -->
+             <div v-else-if="lotPhase === LotPhase.Success" class="w-full h-full overflow-y-auto custom-scrollbar p-2">
+                <PixelFrame class="bg-[#1b1026] border-4 border-[#f6b26b] relative shadow-[0_0_20px_rgba(246,178,107,0.3)]">
+                     <!-- Header -->
+                     <div class="text-center border-b-2 border-[#4a3b5e] pb-3 mb-3 bg-[#231533] p-2">
+                         <div class="text-[#99e550] text-sm md:text-lg font-bold mb-1 flex items-center justify-center gap-2 animate-pulse">
+                            <Sparkles :size="16" /> 
+                            <span>三聖筊！{{ activeDeity.name }}允准解籤</span>
+                            <Sparkles :size="16" />
+                         </div>
+                         <div class="text-[#f6b26b] text-xl md:text-3xl font-bold tracking-widest mt-2 font-serif">
+                             【{{ LOT_RESULT_DATA.number }}】 {{ LOT_RESULT_DATA.level }}
+                         </div>
+                     </div>
+
+                     <!-- Poem (Block) -->
+                     <div class="bg-[#2b193f] p-4 text-center mb-4 border-l-4 border-[#f6b26b] mx-2 shadow-inner">
+                         <div v-for="(line, i) in LOT_RESULT_DATA.poem" :key="i" class="text-lg md:text-xl text-[#e0d8f0] tracking-[0.2em] leading-loose font-serif drop-shadow-md">
+                             {{ line }}
+                         </div>
+                     </div>
+
+                     <!-- Details Grid -->
+                     <div class="flex flex-col gap-4 text-left px-2">
+                         <!-- Meaning -->
+                         <div class="bg-[#0f0816] p-2 border border-[#4a3b5e]">
+                             <span class="text-[#f6b26b] font-bold text-sm block mb-1 border-b border-[#4a3b5e] pb-1 w-full">
+                                【解曰】 Meaning
+                             </span>
+                             <p class="text-[#e0d8f0] text-sm leading-relaxed mt-1">{{ LOT_RESULT_DATA.meaning }}</p>
+                         </div>
+                         
+                         <!-- Interpretation -->
+                         <div class="bg-[#0f0816] p-2 border border-[#4a3b5e]">
+                             <span class="text-[#99e550] font-bold text-sm block mb-1 border-b border-[#4a3b5e] pb-1 w-full">
+                                【解籤】 Interpretation
+                             </span>
+                             <p class="text-[#e0d8f0] text-sm leading-relaxed mt-1">{{ LOT_RESULT_DATA.interpretation }}</p>
+                         </div>
+
+                         <!-- Story -->
+                         <div class="bg-[#0f0816] p-2 border border-[#4a3b5e]">
+                             <span class="text-[#2ce8f4] font-bold text-sm block mb-1 border-b border-[#4a3b5e] pb-1 w-full">
+                                【典故】 Story: {{ LOT_RESULT_DATA.storyTitle }}
+                             </span>
+                             <div class="text-[#8f80a0] text-xs leading-relaxed mt-1">
+                                 {{ LOT_RESULT_DATA.story }}
+                             </div>
+                         </div>
+                     </div>
+
+                     <div class="mt-6 flex justify-center mb-2">
+                         <PixelButton @click="resetLot" class="w-full md:w-auto px-8 py-3">
+                            收入背包 (KEEP LOT)
+                         </PixelButton>
+                     </div>
+                </PixelFrame>
+             </div>
+        </div>
+        
+        <!-- --- VIEW: LIST/SWITCH --- -->
+        <div v-else-if="activeTab === 'LIST' || activeTab === 'VERIFY'" class="flex flex-col gap-4">
+            <div class="text-xs text-[#8f80a0] uppercase mb-2">▼ [SWITCH] 切換神明</div>
+            
+            <div class="grid grid-cols-2 gap-4">
+                <button
+                    v-for="deity in Object.values(deities)"
+                    :key="deity.id"
+                    @click="$emit('switchDeity', deity.id)"
+                    class="border-2 p-3 flex items-center gap-3 transition-all relative"
+                    :class="currentDeity === deity.id ? 'border-[#99e550] bg-[#2b193f]' : 'border-[#4a3b5e] bg-[#0f0816] hover:bg-[#150c1f]'"
+                >
+                    <div class="w-10 h-10 relative">
+                        <PixelAvatar :deityId="deity.id" />
+                    </div>
+                    <div class="flex flex-col items-start">
+                        <span class="font-bold" :class="currentDeity === deity.id ? 'text-[#99e550]' : 'text-[#e0d8f0]'">
+                            {{ deity.name }}
+                        </span>
+                        <span class="text-[10px] text-[#8f80a0]">{{ deity.title }}</span>
+                    </div>
+                    
+                    <div v-if="currentDeity === deity.id" class="absolute top-2 right-2 w-2 h-2 bg-[#99e550] rounded-full shadow-[0_0_5px_#99e550]"></div>
+                </button>
+            </div>
+        </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Heart, Sparkles, Scroll, Repeat, CheckCircle2 } from 'lucide-vue-next';
+import PixelButton from './PixelButton.vue';
+import PixelAvatar from './PixelAvatar.vue';
+import PixelFrame from './PixelFrame.vue';
+import JiaobeiBlocks from './JiaobeiBlocks.vue';
+import { DeityId, JiaobeiResult, LotPhase } from '~/types/pixel';
+import type { Deity } from '~/types/pixel';
+
+interface Props {
+  currentDeity: DeityId;
+  deities: Record<DeityId, Deity>;
+}
+
+const props = defineProps<Props>();
+defineEmits(['switchDeity', 'addFavor']);
+
+const activeTab = ref('PRAY');
+const isTossing = ref(false);
+const lastResult = ref<JiaobeiResult | null>(null);
+const lotPhase = ref<LotPhase>(LotPhase.Idle);
+const drawnLotNumber = ref<number | null>(null);
+const saintCupCount = ref(0);
+
+const TAB_ACTIONS = [
+  { id: 'PRAY', label: 'PRAY (祈福)', icon: Sparkles },
+  { id: 'LOT', label: 'LOT (求籤)', icon: Scroll },
+  { id: 'VERIFY', label: 'VERIFY (驗證)', icon: CheckCircle2 },
+  { id: 'JIAOBEI', label: 'JIAOBEI (擲筊)', icon: Repeat },
+];
+
+const LOT_RESULT_DATA = {
+  number: "第八十六籤",
+  level: "上籤",
+  poem: [
+    "春來花發映陽臺",
+    "萬里舟行進寶來",
+    "躍過禹門三級浪",
+    "恰如平地一聲雷"
+  ],
+  meaning: "此卦上朝見帝之象。凡事太吉大利也。",
+  interpretation: "朝帝受職。如貧得寶。謀望從心。卦中第一。此籤從心所欲。諸事皆吉。",
+  storyTitle: "商絡中三元",
+  story: "三元記。明朝。商絡。浙江人。父早亡。商絡三元及第。喻步步高升也。(三元即三級試。鄉試解元。省試會元。殿試狀元)"
+};
+
+const activeDeity = computed(() => props.deities[props.currentDeity]);
+
+const calculateToss = (): JiaobeiResult => {
+  const rand = Math.random();
+  if (rand < 0.5) return JiaobeiResult.Saint;
+  if (rand < 0.75) return JiaobeiResult.Smile;
+  return JiaobeiResult.Cry;
+};
+
+const handleToss = (isLotVerify = false) => {
+  if (isTossing.value) return;
+  isTossing.value = true;
+  lastResult.value = null;
+
+  setTimeout(() => {
+    const result = calculateToss();
+    isTossing.value = false;
+    lastResult.value = result;
+
+    if (isLotVerify) {
+      if (result === JiaobeiResult.Saint) {
+        saintCupCount.value++;
+        if (saintCupCount.value >= 3) {
+          lotPhase.value = LotPhase.Success;
+        }
+      } else {
+        lotPhase.value = LotPhase.Failed;
+      }
+    }
+  }, 1500);
+};
+
+const handleDrawLot = () => {
+  lotPhase.value = LotPhase.Drawing;
+  setTimeout(() => {
+    drawnLotNumber.value = Math.floor(Math.random() * 60) + 1;
+    lotPhase.value = LotPhase.PendingVerify;
+    saintCupCount.value = 0;
+    lastResult.value = null;
+  }, 2000);
+};
+
+const resetLot = () => {
+  lotPhase.value = LotPhase.Idle;
+  drawnLotNumber.value = null;
+  saintCupCount.value = 0;
+  lastResult.value = null;
+};
+</script>
diff --git a/app/components/pixel/InfoPanel.vue b/app/components/pixel/InfoPanel.vue
new file mode 100644
index 0000000..1e7cd23
--- /dev/null
+++ b/app/components/pixel/InfoPanel.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="h-full flex flex-col p-4 gap-4 bg-[#1b1026] overflow-y-auto custom-scrollbar">
+    
+    <!-- Deity Portrait & Header -->
+    <PixelFrame class="flex-shrink-0" title="WORSHIP" highlight>
+      <div class="flex flex-col items-center p-1">
+          <div class="w-24 h-24 bg-[#1b1026] border-4 border-[#d75b5b] mb-2 p-1 relative flex items-center justify-center overflow-hidden">
+              <!-- Background for portrait -->
+              <div class="absolute inset-0 bg-[#3d2459] opacity-50" />
+
+              <!-- Deity Avatar -->
+              <div class="scale-125 transform translate-y-2">
+                 <PixelAvatar :deityId="deity.id" />
+              </div>
+          </div>
+          <h2 class="text-lg text-[#f6b26b] tracking-widest uppercase font-bold text-center leading-tight">
+              {{ deity.name }}
+          </h2>
+          <div class="text-xs text-[#8f80a0] mt-1 text-center font-bold">
+            {{ deity.title }}
+          </div>
+      </div>
+    </PixelFrame>
+
+    <!-- Favor Bar -->
+    <div class="px-1 mt-1">
+        <RetroResourceBar 
+            :current="deity.favor" 
+            :max="deity.maxFavor" 
+            type="energy" 
+            label="Favor (好感度)" 
+            :icon="Heart" 
+        />
+    </div>
+
+    <!-- Deity Details / Description -->
+    <PixelFrame variant="inset" class="mt-2 flex-grow overflow-y-auto custom-scrollbar">
+       <div class="flex flex-col gap-2 h-full p-1">
+           <div class="flex items-center gap-2 text-[#9fd75b] border-b border-[#4a3b5e] pb-1 sticky top-0 bg-[#150c1f] z-10">
+               <Sparkles :size="14" />
+               <span class="text-xs font-bold uppercase">Blessing</span>
+           </div>
+           
+           <p class="text-xs text-[#e0d8f0] italic leading-relaxed">
+               "{{ deity.description }}"
+           </p>
+
+           <div class="mt-auto p-2 bg-[#231533] border border-[#4a3b5e]">
+               <span class="text-[10px] text-[#8f80a0] uppercase block mb-1">Current Effect:</span>
+               <span class="text-xs text-[#2ce8f4]">
+                   {{ currentEffect }}
+               </span>
+           </div>
+       </div>
+    </PixelFrame>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Heart, Sparkles } from 'lucide-vue-next';
+import PixelFrame from './PixelFrame.vue';
+import RetroResourceBar from './RetroResourceBar.vue';
+import PixelAvatar from './PixelAvatar.vue';
+import type { Deity } from '~/types/pixel';
+
+interface Props {
+  deity: Deity;
+}
+
+const props = defineProps<Props>();
+
+const currentEffect = computed(() => {
+  if (props.deity.favor >= 80) return "Divine Protection (DEF +20%)";
+  if (props.deity.favor >= 50) return "Minor Blessing (LCK +5)";
+  return "None (Pray more!)";
+});
+</script>
diff --git a/app/components/pixel/InventoryOverlay.vue b/app/components/pixel/InventoryOverlay.vue
new file mode 100644
index 0000000..1a5bfb3
--- /dev/null
+++ b/app/components/pixel/InventoryOverlay.vue
@@ -0,0 +1,209 @@
+<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 -->
+    <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>
+
+           <!-- 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>
+
+           <!-- 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>
+       </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>
+                    </div>
+                    <span class="text-[10px] text-center leading-tight line-clamp-2" :style="{ color: RARITY_COLORS[item.rarity] }">
+                       {{ item.name }}
+                    </span>
+                 </button>
+              </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 } from 'lucide-vue-next';
+import PixelFrame from './PixelFrame.vue';
+import PixelButton from './PixelButton.vue';
+import { ItemType, EquipSlot, Rarity } from '~/types/pixel';
+import type { Item } from '~/types/pixel';
+
+interface Props {
+  items: Item[];
+}
+
+const props = defineProps<Props>();
+defineEmits(['equip', 'unequip', 'use', 'delete']);
+
+const selectedItemId = ref<string | null>(null);
+
+const selectedItem = computed(() => props.items.find(i => i.id === selectedItemId.value));
+
+const RARITY_COLORS: Record<Rarity, 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<EquipSlot, any> = {
+  [EquipSlot.Weapon]: Sword,
+  [EquipSlot.Armor]: Shield,
+  [EquipSlot.Hat]: Crown,
+  [EquipSlot.Accessory]: Gem,
+  [EquipSlot.Charm]: Sparkles,
+  [EquipSlot.Special]: Star,
+};
+
+const getEquippedItem = (slot: EquipSlot, isAppearance: boolean) => {
+  return props.items.find(i => i.isEquipped && i.slot === slot && !!i.isAppearance === isAppearance);
+};
+</script>
diff --git a/app/components/pixel/JiaobeiBlocks.vue b/app/components/pixel/JiaobeiBlocks.vue
new file mode 100644
index 0000000..e0df6eb
--- /dev/null
+++ b/app/components/pixel/JiaobeiBlocks.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="flex gap-8 transition-transform duration-500" :class="{ 'animate-spin': isTossing }">
+    <template v-if="result === 'Saint'">
+      <div class="w-12 h-20 bg-[#d95763] rounded-full border-2 border-[#a03030] relative overflow-hidden -rotate-12">
+        <div class="absolute inset-0 bg-[#f0c0a8] rounded-full scale-x-90 translate-y-1"></div>
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#a03030] opacity-30 text-xs">☾</div>
+      </div>
+      <div class="w-12 h-20 bg-[#d95763] rounded-full border-2 border-[#a03030] relative overflow-hidden rotate-12">
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#a03030] opacity-30 text-xs">☾</div>
+      </div>
+    </template>
+
+    <template v-else-if="result === 'Smile'">
+      <div class="w-12 h-20 bg-[#d95763] rounded-full border-2 border-[#a03030] relative overflow-hidden -rotate-12">
+        <div class="absolute inset-0 bg-[#f0c0a8] rounded-full scale-x-90 translate-y-1"></div>
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#a03030] opacity-30 text-xs">☾</div>
+      </div>
+      <div class="w-12 h-20 bg-[#d95763] rounded-full border-2 border-[#a03030] relative overflow-hidden rotate-12">
+        <div class="absolute inset-0 bg-[#f0c0a8] rounded-full scale-x-90 translate-y-1"></div>
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#a03030] opacity-30 text-xs">☾</div>
+      </div>
+    </template>
+
+    <template v-else-if="result === 'Cry'">
+      <div class="w-12 h-20 bg-[#d95763] rounded-full border-2 border-[#a03030] relative overflow-hidden -rotate-12">
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#a03030] opacity-30 text-xs">☾</div>
+      </div>
+      <div class="w-12 h-20 bg-[#d95763] rounded-full border-2 border-[#a03030] relative overflow-hidden rotate-12">
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#a03030] opacity-30 text-xs">☾</div>
+      </div>
+    </template>
+
+    <template v-else>
+      <!-- Initial or Tossing state (Round side up) -->
+      <div class="w-12 h-20 bg-[#d95763] rounded-full border-2 border-[#a03030] relative overflow-hidden">
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#a03030] opacity-30 text-xs">☾</div>
+      </div>
+      <div class="w-12 h-20 bg-[#d95763] rounded-full border-2 border-[#a03030] relative overflow-hidden">
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#a03030] opacity-30 text-xs">☾</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { JiaobeiResult } from '~/types/pixel';
+
+interface Props {
+  result: JiaobeiResult | null;
+  isTossing: boolean;
+}
+
+defineProps<Props>();
+</script>
diff --git a/app/components/pixel/PixelAvatar.vue b/app/components/pixel/PixelAvatar.vue
new file mode 100644
index 0000000..b2c802c
--- /dev/null
+++ b/app/components/pixel/PixelAvatar.vue
@@ -0,0 +1,80 @@
+<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 -->
+
+      <!-- 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" />
+
+      <!-- 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 -->
+
+      <!-- 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 -->
+
+      <!-- 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" />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  skinColor?: string;
+  hairColor?: string;
+  outfitColor?: string;
+  weapon?: 'none' | 'sword' | 'staff';
+  deityId?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  skinColor: '#ffdbac',
+  hairColor: '#5e412f',
+  outfitColor: '#78909c',
+  weapon: 'none'
+});
+
+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 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 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;
+});
+</script>
+
+<style scoped>
+.image-pixelated {
+  image-rendering: pixelated;
+}
+</style>
diff --git a/app/components/pixel/PixelButton.vue b/app/components/pixel/PixelButton.vue
new file mode 100644
index 0000000..93c83de
--- /dev/null
+++ b/app/components/pixel/PixelButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <button 
+    :class="[baseStyles, variantStyles, className]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  variant?: 'primary' | 'secondary' | 'danger';
+  className?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  className: ''
+});
+
+const baseStyles = "relative px-4 py-2 text-xs font-bold uppercase tracking-wider border-2 transition-transform active:translate-y-1";
+
+const variantStyles = computed(() => {
+  if (props.variant === 'primary') {
+    return "bg-[#2b193f] border-[#f6b26b] text-[#f6b26b] hover:bg-[#3d2459] hover:text-white";
+  } else if (props.variant === 'secondary') {
+    return "bg-[#1b1026] border-[#4a3b5e] text-[#8f80a0] hover:bg-[#2b193f] hover:text-[#e0d8f0]";
+  } else if (props.variant === 'danger') {
+    return "bg-[#2b193f] border-[#d95763] text-[#d95763] hover:bg-[#3d2459] hover:text-white";
+  }
+  return "";
+});
+</script>
diff --git a/app/components/pixel/PixelFrame.vue b/app/components/pixel/PixelFrame.vue
new file mode 100644
index 0000000..14b5471
--- /dev/null
+++ b/app/components/pixel/PixelFrame.vue
@@ -0,0 +1,40 @@
+<template>
+  <div 
+    class="relative flex flex-col border-2"
+    :class="className"
+    :style="{ borderColor: borderColor, backgroundColor: bgColor }"
+  >
+    <div v-if="title" class="absolute -top-3 left-2 bg-[#1b1026] px-1 z-10">
+      <span class="text-[10px] font-bold tracking-widest uppercase text-[#8f80a0]">{{ title }}</span>
+    </div>
+    <div class="flex-grow">
+      <slot />
+    </div>
+    
+    <!-- Corner Pixels for decoration -->
+    <div class="absolute -top-1 -left-1 w-1 h-1 bg-[#1b1026]" />
+    <div class="absolute -top-1 -right-1 w-1 h-1 bg-[#1b1026]" />
+    <div class="absolute -bottom-1 -left-1 w-1 h-1 bg-[#1b1026]" />
+    <div class="absolute -bottom-1 -right-1 w-1 h-1 bg-[#1b1026]" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  title?: string;
+  className?: string;
+  variant?: 'default' | 'inset';
+  highlight?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  className: '',
+  variant: 'default',
+  highlight: false
+});
+
+const borderColor = computed(() => props.highlight ? '#f6b26b' : '#4a3b5e');
+const bgColor = computed(() => props.variant === 'inset' ? '#0f0816' : '#1b1026');
+</script>
diff --git a/app/components/pixel/PixelModal.vue b/app/components/pixel/PixelModal.vue
new file mode 100644
index 0000000..32305fe
--- /dev/null
+++ b/app/components/pixel/PixelModal.vue
@@ -0,0 +1,46 @@
+<template>
+  <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
+    <div class="w-full max-w-2xl max-h-[80vh] flex flex-col bg-[#1b1026] border-4 border-[#4a3b5e] shadow-[0_0_20px_rgba(0,0,0,0.5)] relative animate-in fade-in zoom-in duration-200">
+      <!-- Header -->
+      <div class="flex items-center justify-between p-2 border-b-2 border-[#4a3b5e] bg-[#231533]">
+        <h2 class="text-[#f6b26b] font-bold tracking-[0.2em] ml-2 text-sm md:text-base">{{ title }}</h2>
+        <button @click="$emit('close')" class="p-1 hover:bg-[#d95763] hover:text-white text-[#8f80a0] transition-colors">
+          <X :size="18" />
+        </button>
+      </div>
+      
+      <!-- Content -->
+      <div class="flex-grow overflow-y-auto p-4 custom-scrollbar text-[#e0d8f0]">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { X } from 'lucide-vue-next';
+
+interface Props {
+  isOpen: boolean;
+  title: string;
+}
+
+defineProps<Props>();
+defineEmits(['close']);
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #0f0816;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #4a3b5e;
+  border-radius: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #f6b26b;
+}
+</style>
diff --git a/app/components/pixel/PlayerPanel.vue b/app/components/pixel/PlayerPanel.vue
new file mode 100644
index 0000000..73524fc
--- /dev/null
+++ b/app/components/pixel/PlayerPanel.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="h-full flex flex-col p-4 gap-4 bg-[#1b1026] overflow-y-auto custom-scrollbar">
+    <!-- Pet Avatar -->Portrait & Basic Info -->
+    <PixelFrame class="flex-shrink-0" title="PET INFO">
+      <!-- Helper Buttons Overlay -->
+      <div class="absolute top-1 right-1 z-30">
+        <button 
+          @click="$emit('openAchievements')"
+          class="p-1 bg-[#2b193f] border border-[#f6b26b] hover:bg-[#3d2459] active:translate-y-0.5 group"
+          title="Achievements"
+        >
+          <Trophy :size="14" class="text-[#f6b26b] group-hover:text-white" />
+        </button>
+      </div>
+
+      <div class="flex flex-col items-center p-1 relative">
+        <div class="w-20 h-20 bg-[#1b1026] border-4 border-[#4a3b5e] mb-2 relative overflow-hidden group shadow-inner flex items-center justify-center">
+          <!-- Background for portrait -->
+          <div class="absolute inset-0 bg-[#2b193f] opacity-50" />
+          
+          <!-- The Animated Pixel Avatar -->
+          <div class="scale-110 transform translate-y-1">
+             <PixelAvatar 
+               skinColor="#ffdbac" 
+               hairColor="#e0d8f0" 
+               outfitColor="#9fd75b" 
+             />
+          </div>
+
+          <!-- Scanline on portrait -->
+          <div class="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0)_50%,rgba(0,0,0,0.2)_50%)] bg-[length:100%_4px] pointer-events-none z-20" />
+        </div>
+        <h2 class="text-xl text-[#f6b26b] tracking-[0.2em] font-bold border-b-2 border-[#f6b26b] mb-1 leading-none pb-1">{{ stats.name }}</h2>
+        <span class="text-xs text-[#8f80a0] uppercase tracking-wide">{{ stats.class }}</span>
+      </div>
+    </PixelFrame>
+
+    <!-- Vitals - Updated to Health, Hunger, Happiness -->
+    <div class="flex flex-col gap-1 px-1">
+      <RetroResourceBar :current="stats.hp" :max="stats.maxHp" type="hp" label="Health" :icon="Heart" />
+      <RetroResourceBar v-if="stats.hunger !== undefined" :current="stats.hunger" :max="stats.maxHunger || 100" type="energy" label="Hunger" :icon="Drumstick" />
+      <RetroResourceBar v-if="stats.happiness !== undefined" :current="stats.happiness" :max="stats.maxHappiness || 100" type="mana" label="Happy" :icon="Smile" />
+    </div>
+
+    <!-- Pet Details Grid -->
+    <PixelFrame class="flex-shrink-0 mt-1" variant="inset">
+      <div class="grid grid-cols-2 gap-x-2 gap-y-2 text-[10px] uppercase text-[#8f80a0]">
+          <div class="flex flex-col border-r border-[#4a3b5e] pr-1">
+             <span class="text-[#4a3b5e]">Age</span>
+             <span class="text-[#e0d8f0] font-mono tracking-wide">{{ stats.age }}</span>
+          </div>
+          <div class="flex flex-col pl-1">
+             <span class="text-[#4a3b5e]">Gen</span>
+             <span class="text-[#e0d8f0] font-mono tracking-wide">{{ stats.generation }}</span>
+          </div>
+          <div class="flex items-center gap-1 border-t border-[#4a3b5e] pt-1 col-span-2">
+             <Ruler :size="10" />
+             <span class="text-[#e0d8f0]">{{ stats.height }}</span>
+             <span class="text-[#4a3b5e] mx-1">|</span>
+             <Scale :size="10" />
+             <span class="text-[#e0d8f0]">{{ stats.weight }}</span>
+          </div>
+      </div>
+    </PixelFrame>
+
+    <!-- Fate & God Favor -->
+    <div class="flex flex-col gap-2 mt-2 px-1">
+      <!-- Fate -->
+      <div v-if="stats.fate" class="flex items-center gap-2 bg-[#2b193f] p-1 border border-[#4a3b5e] rounded">
+         <Leaf :size="12" color="#99e550" />
+         <div class="flex flex-col leading-none">
+            <span class="text-[8px] text-[#8f80a0] uppercase">Fate</span>
+            <span class="text-[10px] text-[#e0d8f0] tracking-wide">{{ stats.fate }}</span>
+         </div>
+      </div>
+      
+      <!-- God Favor -->
+      <div v-if="stats.godFavor" class="flex flex-col gap-1">
+         <div class="flex justify-between text-[10px] text-[#8f80a0] uppercase">
+            <span>Favor: {{ stats.godFavor.name }}</span>
+            <span>{{ stats.godFavor.current }}/{{ stats.godFavor.max }}</span>
+         </div>
+         <div class="h-2 bg-[#150c1f] border border-[#4a3b5e] rounded-full overflow-hidden">
+            <div :style="{ width: `${(stats.godFavor.current / stats.godFavor.max) * 100}%` }" class="h-full bg-[#f6b26b]" />
+         </div>
+      </div>
+    </div>
+
+    <!-- Gold -->
+    <div class="mt-auto px-1 pb-1">
+        <RetroCounter :icon="Coins" :value="stats.gold || 0" color="#ffe762" />
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Ruler, Scale, Heart, Smile, Drumstick, Coins, Leaf, Trophy } from 'lucide-vue-next';
+import PixelFrame from './PixelFrame.vue';
+import RetroResourceBar from './RetroResourceBar.vue';
+import RetroCounter from './RetroCounter.vue';
+import PixelAvatar from './PixelAvatar.vue';
+import type { EntityStats } from '~/types/pixel';
+
+interface Props {
+  stats: EntityStats;
+}
+
+defineProps<Props>();
+defineEmits(['openAchievements']);
+</script>
diff --git a/app/components/pixel/RetroCounter.vue b/app/components/pixel/RetroCounter.vue
new file mode 100644
index 0000000..1e018b1
--- /dev/null
+++ b/app/components/pixel/RetroCounter.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="flex items-center gap-2 bg-[#0f0816] border border-[#4a3b5e] px-2 py-1 rounded-sm">
+    <component :is="icon" :size="14" :style="{ color: color }" />
+    <div class="flex flex-col leading-none">
+      <span v-if="label" class="text-[8px] text-[#8f80a0] uppercase">{{ label }}</span>
+      <span class="font-mono text-sm font-bold text-[#e0d8f0]">{{ value }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+interface Props {
+  icon: Component;
+  value: number | string;
+  label?: string;
+  color?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  color: '#e0d8f0'
+});
+</script>
diff --git a/app/components/pixel/RetroProgressBar.vue b/app/components/pixel/RetroProgressBar.vue
new file mode 100644
index 0000000..f67460c
--- /dev/null
+++ b/app/components/pixel/RetroProgressBar.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="h-2 w-full bg-[#0f0816] border border-[#4a3b5e]">
+    <div 
+      class="h-full transition-all duration-500" 
+      :style="{ width: `${Math.min(100, Math.max(0, progress))}%`, backgroundColor: color }" 
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  progress: number;
+  color?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  color: '#9fd75b'
+});
+</script>
diff --git a/app/components/pixel/RetroResourceBar.vue b/app/components/pixel/RetroResourceBar.vue
new file mode 100644
index 0000000..a05cd6b
--- /dev/null
+++ b/app/components/pixel/RetroResourceBar.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-0.5 w-full">
+    <div v-if="label" class="flex justify-between items-end px-0.5">
+      <div class="flex items-center gap-1 text-[#8f80a0]">
+        <component :is="icon" v-if="icon" :size="10" />
+        <span class="text-[10px] uppercase font-bold leading-none">{{ label }}</span>
+      </div>
+      <span class="text-[10px] font-mono text-[#e0d8f0] leading-none">{{ current }}/{{ max }}</span>
+    </div>
+    <div class="h-3 bg-[#0f0816] border border-[#4a3b5e] p-[1px] relative">
+      <div 
+        class="h-full transition-all duration-300 relative"
+        :style="{ width: `${percentage}%`, backgroundColor: barColor }"
+      >
+        <!-- Shine effect -->
+        <div class="absolute top-0 left-0 w-full h-[1px] bg-white opacity-30" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+
+interface Props {
+  current: number;
+  max: number;
+  type: 'hp' | 'energy' | 'mana';
+  label?: string;
+  icon?: Component;
+}
+
+const props = defineProps<Props>();
+
+const percentage = computed(() => Math.min(100, Math.max(0, (props.current / props.max) * 100)));
+
+const barColor = computed(() => {
+  if (props.type === 'energy') return '#f6b26b'; // Orange
+  if (props.type === 'mana') return '#2ce8f4'; // Cyan
+  return '#d95763'; // HP Red (default)
+});
+</script>
diff --git a/app/components/pixel/ShopOverlay.vue b/app/components/pixel/ShopOverlay.vue
new file mode 100644
index 0000000..3c8d9c1
--- /dev/null
+++ b/app/components/pixel/ShopOverlay.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="flex flex-col h-full gap-2 relative">
+    
+    <!-- Top Bar: Gold & Title -->
+    <div class="flex items-center justify-between bg-[#1b1026] p-2 border border-[#f6b26b]">
+       <div class="flex items-center gap-2 text-[#9fd75b] font-bold tracking-widest">
+          <ShoppingBag :size="20" />
+          <span>商店 (SHOP)</span>
+       </div>
+       <div class="flex items-center gap-2 bg-[#2b193f] px-3 py-1 rounded border border-[#4a3b5e]">
+          <span class="text-[#99e550] text-sm uppercase">您的金幣:</span>
+          <span class="text-[#f6b26b] font-mono text-lg font-bold">{{ playerGold }}</span>
+          <Coins :size="16" class="text-[#f6b26b]" />
+          <div class="border-l border-[#4a3b5e] pl-2 ml-1">
+             <RefreshCw :size="14" class="text-[#8f80a0] cursor-pointer hover:text-white hover:rotate-180 transition-transform" />
+          </div>
+       </div>
+    </div>
+
+    <!-- Main Action Tabs -->
+    <div class="flex gap-4 justify-center my-2">
+       <PixelButton 
+          :variant="mode === 'BUY' ? 'primary' : 'secondary'" 
+          @click="mode = 'BUY'"
+          class="w-32"
+          :class="{ 'bg-[#3d9e8f] border-[#2c7a6f]': mode === 'BUY' }"
+          :style="mode === 'BUY' ? { backgroundColor: '#3d9e8f', borderColor: '#2c7a6f' } : {}"
+       >
+          購買 (BUY)
+       </PixelButton>
+       <PixelButton 
+          :variant="mode === 'SELL' ? 'primary' : 'secondary'" 
+          @click="mode = 'SELL'"
+          class="w-32"
+          :style="mode === 'SELL' ? { backgroundColor: '#d95763', borderColor: '#ac3232', color: 'white' } : {}"
+       >
+          賣出 (SELL)
+       </PixelButton>
+    </div>
+
+    <!-- Category Filters -->
+    <div class="flex gap-1 overflow-x-auto pb-2 custom-scrollbar">
+       <button
+          v-for="cat in CATEGORY_FILTERS"
+          :key="cat.id"
+          @click="filter = cat.id"
+          class="flex items-center gap-1 px-3 py-1 text-xs border whitespace-nowrap transition-colors"
+          :class="filter === cat.id ? 'bg-[#9fd75b] text-[#1b1026] border-[#f6b26b]' : 'bg-[#150c1f] text-[#8f80a0] border-[#4a3b5e] hover:bg-[#2b193f]'"
+       >
+          <component :is="cat.icon" :size="12" />
+          {{ cat.label }}
+       </button>
+    </div>
+
+    <!-- Items List -->
+    <div class="flex-grow bg-[#0f0816] border border-[#2b193f] p-2 overflow-y-auto custom-scrollbar">
+       <div v-if="displayedItems.length === 0" class="h-full flex items-center justify-center text-[#4a3b5e] flex-col gap-2">
+          <Search :size="32" />
+          <span>NO ITEMS FOUND</span>
+       </div>
+       <div v-else class="flex flex-col gap-2">
+          <div 
+             v-for="item in displayedItems"
+             :key="item.id" 
+             class="flex items-center justify-between p-2 bg-[#1b1026] border border-[#2b193f] hover:border-[#4a3b5e] transition-colors group"
+          >
+             <!-- Item Icon & Info -->
+             <div class="flex items-center gap-3">
+                 <div class="w-10 h-10 bg-[#231533] border border-[#4a3b5e] flex items-center justify-center relative">
+                    <!-- Simple Icon Logic -->
+                    <Cookie v-if="item.category === ItemCategory.Food" color="#f6b26b" />
+                    <Pill v-else-if="item.category === ItemCategory.Medicine" color="#d95763" />
+                    <Sword v-else-if="item.category === ItemCategory.Equipment" color="#2ce8f4" />
+                    <Gamepad2 v-else-if="item.category === ItemCategory.Toy" color="#99e550" />
+                    <Gem v-else-if="item.category === ItemCategory.Accessory" color="#d584fb" />
+                    
+                    <span v-if="item.quantity && item.quantity > 1" class="absolute bottom-0 right-0 bg-black text-white text-[9px] px-1">{{ item.quantity }}</span>
+                 </div>
+                 <div class="flex flex-col">
+                    <span class="font-bold text-sm tracking-wide" :class="item.rarity === Rarity.Legendary ? 'text-[#ffa500]' : 'text-[#9fd75b]'">
+                        {{ item.name }}
+                    </span>
+                    <div class="flex items-center gap-2">
+                        <span class="text-[10px] text-[#f6b26b] font-mono">
+                           $ {{ mode === 'SELL' ? Math.floor(item.price / 2) : item.price }}
+                        </span>
+                        <span v-if="item.quantity" class="text-[10px] text-[#8f80a0]">x {{ item.quantity }}</span>
+                    </div>
+                 </div>
+             </div>
+
+             <!-- Action Button -->
+             <button
+                @click="mode === 'BUY' ? $emit('buy', item) : $emit('sell', item)"
+                class="px-4 py-1 border-2 text-xs font-bold tracking-widest active:translate-y-0.5"
+                :class="mode === 'BUY' 
+                      ? 'bg-[#1b1026] border-[#9fd75b] text-[#9fd75b] hover:bg-[#9fd75b] hover:text-[#1b1026]' 
+                      : 'bg-[#1b1026] border-[#d95763] text-[#d95763] hover:bg-[#d95763] hover:text-[#1b1026]'"
+             >
+                {{ mode === 'BUY' ? '購買' : '賣出' }}
+             </button>
+          </div>
+       </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { ShoppingBag, Coins, Filter, Cookie, Pill, Sword, Gamepad2, Gem, Search, RefreshCw } from 'lucide-vue-next';
+import PixelButton from './PixelButton.vue';
+import { ItemCategory, Rarity } from '~/types/pixel';
+import type { Item } from '~/types/pixel';
+
+interface Props {
+  playerGold: number;
+  inventory: Item[];
+  shopItems: Item[];
+}
+
+const props = defineProps<Props>();
+defineEmits(['buy', 'sell']);
+
+const mode = ref<'BUY' | 'SELL'>('BUY');
+const filter = ref<string>('ALL');
+
+const CATEGORY_FILTERS = [
+  { id: 'ALL', label: '全部 (ALL)', icon: Search },
+  { id: ItemCategory.Food, label: '食物', icon: Cookie },
+  { id: ItemCategory.Medicine, label: '藥品', icon: Pill },
+  { id: ItemCategory.Equipment, label: '裝備', icon: Sword },
+  { id: ItemCategory.Toy, label: '玩具', icon: Gamepad2 },
+  { id: ItemCategory.Accessory, label: '飾品', icon: Gem },
+];
+
+const displayedItems = computed(() => {
+  const source = mode.value === 'BUY' ? props.shopItems : props.inventory;
+  return source.filter(item => {
+    if (mode.value === 'SELL' && item.isEquipped) return false; // Cannot sell equipped items
+    if (filter.value === 'ALL') return true;
+    return item.category === filter.value;
+  });
+});
+</script>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e586ca3..62d821f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,458 +1,435 @@
 <template>
-  <div class="cute-game-container">
-    <!-- 左上角 HUD -->
-    <PetHUD
-      :pet-name="petState.name || 'Pet'"
-      :health="petState.health || 0"
-      :max-health="getMaxHealth()"
-      :hunger="petState.hunger || 0"
-      :happiness="petState.happiness || 0"
-      :pet-emotion="petEmotion"
-    />
-
-    <!-- 主場景 -->
-    <div class="main-scene">
-      <ScrollableScene
-        :pet-emotion="petEmotion"
-        @interact="handleSceneInteract"
-      />
-    </div>
-
-    <!-- 底部快捷欄 -->
-    <div class="bottom-toolbar">
-      <button class="tool-btn" @click="handleFeed" title="餵食">
-        🍖
-      </button>
-      <button class="tool-btn" @click="handlePlay" title="玩耍">
-        🎾
-      </button>
-      <button class="tool-btn" @click="handleClean" title="清理">
-        🧹
-      </button>
-      <button class="tool-btn" @click="handleHeal" title="治療">
-        💊
-      </button>
-      <button class="tool-btn" @click="handleSleep" title="睡覺">
-        {{ petState.isSleeping ? '⏰' : '💤' }}
-      </button>
-      <button class="tool-btn inventory-btn" @click="showInventory = true" title="背包">
-        🎒
-      </button>
-      <button class="tool-btn" @click="showStats = !showStats" title="狀態">
-        📊
-      </button>
-    </div>
-
-    <!-- 背包界面 -->
-    <InventoryModal
-      :is-open="showInventory"
-      :coins="petState.coins || 0"
-      :attack="petState.attack || 10"
-      :defense="petState.defense || 5"
-      @close="showInventory = false"
-      @use-item="handleUseItem"
-      @drop-item="handleDropItem"
-    />
-
-    <!-- 狀態面板（可選顯示） -->
-    <div v-if="showStats" class="stats-overlay" @click="showStats = false">
-      <div class="stats-panel" @click.stop>
-        <h3>📊 寵物狀態</h3>
-        <div class="stat-list">
-          <div class="stat-item">
-            <span>名稱:</span>
-            <span>{{ petState.name || '寵物' }}</span>
-          </div>
-          <div class="stat-item">
-            <span>階段:</span>
-            <span>{{ petState.stage || '蛋' }}</span>
-          </div>
-          <div class="stat-item">
-            <span>年齡:</span>
-            <span>{{ formatAge(petState.ageSeconds) }}</span>
-          </div>
-          <div class="stat-item">
-            <span>力量:</span>
-            <span>{{ petState.str || 0 }}</span>
-          </div>
-          <div class="stat-item">
-            <span>智力:</span>
-            <span>{{ petState.int || 0 }}</span>
-          </div>
-          <div class="stat-item">
-            <span>敏捷:</span>
-            <span>{{ petState.dex || 0 }}</span>
-          </div>
-          <div class="stat-item">
-            <span>運勢:</span>
-            <span>{{ petState.luck || 0 }}</span>
-          </div>
+  <div class="w-full min-h-screen bg-[#1b1026] flex items-center justify-center p-2 md:p-4 lg:p-8 font-sans">
+    <!-- Main Container -->
+    <div class="w-full max-w-7xl bg-[#0f0816] border-4 md:border-6 border-[#2b193f] relative shadow-2xl flex flex-col md:flex-row overflow-hidden rounded-lg"
+         :class="{'aspect-video': isDesktop, 'min-h-screen': !isDesktop}">
+      
+      <!-- Left Column: Player Panel -->
+      <div class="w-full md:w-1/3 lg:w-1/4 h-auto md:h-full border-b-4 md:border-b-0 md:border-r-4 border-[#2b193f] bg-[#1b1026] z-20">
+        <PlayerPanel 
+           v-if="initialized"
+           :stats="playerStats" 
+           @openAchievements="showAchievements = true" 
+        />
+        <div v-else class="flex items-center justify-center h-32 md:h-full text-[#8f80a0] text-xs">
+          Initializing...
         </div>
-        <button class="close-stats-btn" @click="showStats = false">關閉</button>
       </div>
+
+      <!-- Middle Column: Room + Actions -->
+      <div class="w-full md:w-1/3 lg:w-1/2 h-auto md:h-full flex flex-col relative z-10">
+        
+        <!-- Top: Battle/Room Area -->
+        <div class="h-64 md:h-[55%] border-b-4 border-[#2b193f] relative bg-[#0f0816]">
+          <BattleArea 
+              v-if="initialized"
+              :currentDeityId="currentDeity" 
+              :isFighting="isFighting"
+              :battleLogs="battleLogs"
+          />
+        </div>
+
+        <!-- Bottom: Action Area -->
+        <div class="h-auto md:h-[45%] bg-[#1b1026]">
+          <ActionArea 
+              v-if="initialized"
+              :playerStats="playerStats" 
+              @openInventory="showInventory = true"
+              @openGodSystem="showGodSystem = true"
+              @openShop="showShop = true"
+              @openAdventure="showAdventureSelect = true"
+          />
+        </div>
+      </div>
+
+      <!-- Right Column: Deity Panel (Info Panel) -->
+      <div class="w-full md:w-1/3 lg:w-1/4 h-auto md:h-full border-t-4 md:border-t-0 md:border-l-4 border-[#2b193f] bg-[#1b1026] z-20">
+        <InfoPanel v-if="deities[currentDeity]" :deity="deities[currentDeity]" />
+        <div v-else class="flex items-center justify-center h-32 md:h-full text-[#8f80a0] text-xs">
+          Loading...
+        </div>
+      </div>
+
     </div>
 
-    <!-- 載入畫面 -->
-    <div v-if="!initialized" class="loading-overlay">
-      <div class="loading-content">
-        <div class="loading-spinner"></div>
-        <p>載入中...</p>
-      </div>
-    </div>
+    <!-- --- MODALS --- -->
+
+    <!-- Achievements Overlay -->
+    <PixelModal 
+       :isOpen="showAchievements" 
+       @close="showAchievements = false" 
+       title="ACHIEVEMENTS"
+    >
+       <AchievementsOverlay :achievements="ACHIEVEMENTS_DATA" />
+    </PixelModal>
+
+    <!-- Inventory Overlay -->
+    <PixelModal
+       :isOpen="showInventory"
+       @close="showInventory = false"
+       title="INVENTORY"
+    >
+       <InventoryOverlay 
+          :items="inventory" 
+          @equip="handleEquip"
+          @unequip="handleUnequip"
+          @use="handleUseItem"
+          @delete="handleDeleteItem"
+       />
+    </PixelModal>
+
+    <!-- God System Overlay -->
+    <PixelModal
+      :isOpen="showGodSystem"
+      @close="showGodSystem = false"
+      title="GOD SYSTEM"
+    >
+        <GodSystemOverlay 
+           :currentDeity="currentDeity"
+           :deities="deities"
+           @switchDeity="handleSwitchDeity"
+           @addFavor="handleAddFavor"
+        />
+    </PixelModal>
+
+    <!-- Shop Overlay -->
+    <PixelModal
+       :isOpen="showShop"
+       @close="showShop = false"
+       title="SHOP"
+    >
+       <ShopOverlay 
+           :playerGold="playerStats.gold || 0"
+           :inventory="inventory"
+           :shopItems="SHOP_ITEMS"
+           @buy="handleBuyItem"
+           @sell="handleSellItem"
+       />
+    </PixelModal>
+
+    <!-- Adventure Selection Overlay -->
+    <PixelModal
+        :isOpen="showAdventureSelect"
+        @close="showAdventureSelect = false"
+        title="ADVENTURE"
+    >
+        <AdventureOverlay 
+            :locations="ADVENTURE_LOCATIONS"
+            :playerStats="playerStats"
+            @selectLocation="handleStartAdventure"
+            @close="showAdventureSelect = false"
+        />
+    </PixelModal>
+
+     <!-- Battle Result Modal (Custom Styling Modal) -->
+     <div v-if="showBattleResult" class="fixed inset-0 z-[110] flex items-center justify-center bg-black/80">
+         <div class="w-[500px] border-4 border-[#2ce8f4] bg-black p-1 shadow-[0_0_50px_#2ce8f4]">
+             <div class="border-2 border-[#2ce8f4] p-8 flex flex-col items-center gap-4">
+                 <PartyPopper :size="48" class="text-[#99e550] animate-bounce" />
+                 <h2 class="text-2xl text-[#99e550] font-bold tracking-widest">冒險完成 !</h2>
+                 <div class="w-full border-t border-gray-700 my-2"></div>
+                 <p class="text-gray-400 text-sm">這次沒有獲得任何獎勵...</p>
+                 <button 
+                     @click="handleCloseBattleResult"
+                     class="mt-6 border border-[#99e550] text-[#99e550] px-8 py-2 hover:bg-[#99e550] hover:text-black uppercase tracking-widest"
+                 >
+                     確定
+                 </button>
+             </div>
+         </div>
+     </div>
+
   </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { PetSystem } from '../../core/pet-system.js'
-import { apiService } from '../../core/api-service.js'
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { PartyPopper } from 'lucide-vue-next';
+import PlayerPanel from '~/components/pixel/PlayerPanel.vue';
+import BattleArea from '~/components/pixel/BattleArea.vue';
+import ActionArea from '~/components/pixel/ActionArea.vue';
+import InfoPanel from '~/components/pixel/InfoPanel.vue';
+import PixelModal from '~/components/pixel/PixelModal.vue';
+import AchievementsOverlay from '~/components/pixel/AchievementsOverlay.vue';
+import InventoryOverlay from '~/components/pixel/InventoryOverlay.vue';
+import GodSystemOverlay from '~/components/pixel/GodSystemOverlay.vue';
+import ShopOverlay from '~/components/pixel/ShopOverlay.vue';
+import AdventureOverlay from '~/components/pixel/AdventureOverlay.vue';
 
-import PetHUD from '../../components/pixel/PetHUD.vue'
-import ScrollableScene from '../../components/pixel/ScrollableScene.vue'
-import InventoryModal from '../../components/pixel/InventoryModal.vue'
+import { PetSystem } from '../../core/pet-system.js';
+import { TempleSystem } from '../../core/temple-system.js';
+import { ApiService } from '../../core/api-service.js';
 
-const petSystem = ref(null)
-const petState = ref({})
-const initialized = ref(false)
-const showInventory = ref(false)
-const showStats = ref(false)
+import { 
+  ItemType, 
+  Rarity, 
+  EquipSlot, 
+  DeityId, 
+  ItemCategory 
+} from '~/types/pixel';
+import type { 
+  EntityStats, 
+  Achievement, 
+  Item, 
+  Deity, 
+  AdventureLocation 
+} from '~/types/pixel';
+
+// --- SYSTEMS INITIALIZATION ---
+
+const apiService = new ApiService({ useMock: true }); // Use mock for now
+const petSystem = ref<PetSystem | null>(null);
+const templeSystem = ref<TempleSystem | null>(null);
+const initialized = ref(false);
+
+// --- RESPONSIVE ---
+const isDesktop = ref(true);
+
+// Detect screen size
+if (typeof window !== 'undefined') {
+  const updateScreenSize = () => {
+    isDesktop.value = window.innerWidth >= 768;
+  };
+  updateScreenSize();
+  window.addEventListener('resize', updateScreenSize);
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateScreenSize);
+  });
+}
+
+// --- STATE ---
+
+// Reactive state mapped from PetSystem
+const systemState = ref<any>(null);
+const allDeities = ref<Deity[]>([]);
+
+const playerStats = computed<EntityStats>(() => {
+  if (!systemState.value) return {
+      name: "Loading...", class: "Egg", hp: 100, maxHp: 100, sp: 0, maxSp: 0, lvl: 1,
+      hunger: 100, maxHunger: 100, happiness: 100, maxHappiness: 100,
+      age: "0d 0h", generation: 1, height: "0 cm", weight: "0 g", gold: 0, fate: "Unknown",
+      godFavor: { name: "None", current: 0, max: 100 },
+      str: 0, int: 0, dex: 0, luck: 0, atk: 0, def: 0, spd: 0
+  };
+
+  const s = systemState.value;
+  const currentDeity = allDeities.value.find(d => d.id === s.currentDeityId);
+
+  return {
+    name: "Pet",
+    class: s.stage,
+    hp: Math.floor(s.health),
+    maxHp: 100,
+    sp: 0,
+    maxSp: 100,
+    lvl: 1,
+    
+    hunger: Math.floor(s.hunger),
+    maxHunger: 100,
+    happiness: Math.floor(s.happiness),
+    maxHappiness: 100,
+    
+    age: formatAge(s.ageSeconds),
+    generation: s.generation || 1,
+    height: `${s.height || 0} cm`,
+    weight: `${Math.floor(s.weight || 0)} g`,
+    gold: s.coins || 0,
+    fate: s.destiny?.name || "None",
+    
+    godFavor: {
+      name: currentDeity?.name || "None",
+      current: s.deityFavors?.[s.currentDeityId] || 0,
+      max: 100
+    },
+    
+    str: Math.floor(s.effectiveStr || s.str),
+    int: Math.floor(s.effectiveInt || s.int),
+    dex: Math.floor(s.effectiveDex || s.dex),
+    luck: Math.floor(s.effectiveLuck || s.luck),
+    atk: Math.floor(s.attack || 0),
+    def: Math.floor(s.defense || 0),
+    spd: Math.floor(s.speed || 0)
+  };
+});
+
+const inventory = computed<Item[]>(() => {
+    if (!systemState.value || !systemState.value.inventory) return [];
+    return systemState.value.inventory.map((i: any) => ({
+        ...i,
+        icon: i.icon || 'circle',
+        statsDescription: i.description
+    }));
+});
+
+const deities = computed<Record<DeityId, Deity>>(() => {
+    const map: Record<string, Deity> = {};
+    allDeities.value.forEach(d => {
+        const favor = systemState.value?.deityFavors?.[d.id] || 0;
+        map[d.id] = { ...d, favor, maxFavor: 100 };
+    });
+    return map;
+});
+
+const currentDeity = computed(() => systemState.value?.currentDeityId || DeityId.Mazu);
+
+// Modal States
+const showAchievements = ref(false);
+const showInventory = ref(false);
+const showGodSystem = ref(false);
+const showShop = ref(false);
+const showAdventureSelect = ref(false);
+const showBattleResult = ref(false);
+
+// Battle State
+const isFighting = ref(false);
+const battleLogs = ref<string[]>([]);
+
+// --- LIFECYCLE ---
 
 onMounted(async () => {
-  try {
-    petSystem.value = new PetSystem(apiService)
-    await petSystem.value.initialize()
+    petSystem.value = new PetSystem(apiService);
+    templeSystem.value = new TempleSystem(petSystem.value, apiService);
+
+    await petSystem.value.initialize();
+    await templeSystem.value.initialize();
+
+    systemState.value = petSystem.value.getState();
+    allDeities.value = templeSystem.value.getDeities();
+
+    petSystem.value.startTickLoop((newState) => {
+        systemState.value = newState;
+    });
     
-    const state = await petSystem.value.getState()
-    if (!state.name || state.name.trim() === '') {
-      await petSystem.value.updateState({ name: '我的寵物' })
+    initialized.value = true;
+});
+
+onUnmounted(() => {
+    if (petSystem.value) {
+        petSystem.value.stopTickLoop();
     }
-    
-    updatePetState()
-    initialized.value = true
+});
 
-    setInterval(() => {
-      updatePetState()
-    }, 1000)
-  } catch (error) {
-    console.error('[Index] Failed to initialize:', error)
-    initialized.value = true
-    petState.value = {
-      name: '錯誤',
-      stage: 'egg',
-      hunger: 0,
-      happiness: 0,
-      health: 0,
-      isSleeping: false,
-      isSick: false,
-      isDead: false
+// --- HELPERS ---
+
+const formatAge = (seconds: number) => {
+  if (!seconds) return '0h';
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  if (days > 0) return `${days}d ${hours}h`;
+  return `${hours}h`;
+};
+
+// --- HANDLERS ---
+
+const handleStartAdventure = (location: AdventureLocation) => {
+    showAdventureSelect.value = false;
+    if (petSystem.value) {
+        petSystem.value.updateState({
+            hunger: Math.max(0, systemState.value.hunger - location.costHunger),
+            coins: Math.max(0, systemState.value.coins - location.costGold)
+        });
     }
-  }
-})
 
-const updatePetState = () => {
-  if (petSystem.value) {
-    petState.value = { ...petSystem.value.getState() }
-  }
-}
+    isFighting.value = true;
+    battleLogs.value = [`Entered ${location.name}...`, `Encountered ${location.enemyName}!`];
 
-const getMaxHealth = () => {
-  if (!petSystem.value) return 100
-  const state = petSystem.value.getState()
-  return 100 + (state.achievementBuffs?.health || 0)
-}
+    let turn = 1;
+    const interval = setInterval(() => {
+        if (turn > 5) {
+            clearInterval(interval);
+            battleLogs.value.push("Victory!", "Obtained 10 EXP!");
+            setTimeout(() => {
+                 isFighting.value = false;
+                 showBattleResult.value = true;
+            }, 1500);
+            return;
+        }
 
-const petEmotion = computed(() => {
-  const state = petState.value
-  if (state.isSick) return 'sick'
-  if (state.health < 30) return 'sad'
-  if (state.happiness < 30) return 'sad'
-  if (state.hunger < 20) return 'sad'
-  return 'happy'
-})
+        const isPlayerTurn = turn % 2 !== 0;
+        if (isPlayerTurn) {
+            battleLogs.value.push(`You used Attack! Dealt ${Math.floor(Math.random() * 20) + 10} damage.`);
+        } else {
+            battleLogs.value.push(`${location.enemyName} attacked! You took ${Math.floor(Math.random() * 10)} damage.`);
+        }
+        turn++;
+    }, 1000);
+};
 
-const formatAge = (seconds) => {
-  if (!seconds) return '0h'
-  const hours = Math.floor(seconds / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60)
-  if (hours > 0) return `${hours}h ${minutes}m`
-  return `${minutes}m`
-}
+const handleCloseBattleResult = () => {
+    showBattleResult.value = false;
+    battleLogs.value = [];
+};
 
-const handleFeed = async () => {
-  if (petSystem.value) {
-    await petSystem.value.feed()
-    updatePetState()
-  }
-}
+const handleEquip = async (itemId: string, asAppearance: boolean) => {
+    console.log("Equip not fully implemented in core yet", itemId);
+};
 
-const handlePlay = async () => {
-  if (petSystem.value) {
-    await petSystem.value.play()
-    updatePetState()
-  }
-}
+const handleUnequip = async (slot: EquipSlot, asAppearance: boolean) => {
+    console.log("Unequip not fully implemented in core yet", slot);
+};
 
-const handleClean = async () => {
-  if (petSystem.value) {
-    await petSystem.value.cleanPoop()
-    updatePetState()
-  }
-}
+const handleUseItem = async (itemId: string) => {
+    console.log("Use item not fully implemented in core yet", itemId);
+};
 
-const handleHeal = async () => {
-  if (petSystem.value) {
-    await petSystem.value.heal()
-    updatePetState()
-  }
-}
+const handleDeleteItem = async (itemId: string) => {
+    console.log("Delete item not fully implemented in core yet", itemId);
+};
 
-const handleSleep = async () => {
-  if (petSystem.value) {
-    await petSystem.value.toggleSleep()
-    updatePetState()
-  }
-}
+const handleSwitchDeity = async (id: DeityId) => {
+    if (templeSystem.value) {
+        await templeSystem.value.switchDeity(id);
+        systemState.value = petSystem.value?.getState();
+    }
+};
 
-const handleSceneInteract = (objectType) => {
-  console.log('[Index] Interacted with:', objectType)
-  if (objectType === 'food') handleFeed()
-  else if (objectType === 'toy') handlePlay()
-  else if (objectType === 'bed') handleSleep()
-}
+const handleAddFavor = async (amount: number) => {
+    if (templeSystem.value) {
+        await templeSystem.value.pray();
+        systemState.value = petSystem.value?.getState();
+    }
+};
 
-const handleUseItem = (item) => {
-  console.log('[Index] Use item:', item)
-}
+const handleBuyItem = async (item: Item) => {
+    if (petSystem.value && systemState.value.coins >= item.price) {
+         const newCoins = systemState.value.coins - item.price;
+         const newInventory = [...(systemState.value.inventory || []), { ...item, id: `buy-${Date.now()}` }];
+         await petSystem.value.updateState({ coins: newCoins, inventory: newInventory });
+         systemState.value = petSystem.value.getState();
+    } else {
+        alert("Not enough gold!");
+    }
+};
 
-const handleDropItem = (item) => {
-  console.log('[Index] Drop item:', item)
-}
+const handleSellItem = async (item: Item) => {
+    if (petSystem.value) {
+        const sellPrice = Math.floor(item.price / 2);
+        const newCoins = systemState.value.coins + sellPrice;
+        const newInventory = systemState.value.inventory.filter((i: any) => i.id !== item.id);
+        await petSystem.value.updateState({ coins: newCoins, inventory: newInventory });
+        systemState.value = petSystem.value.getState();
+    }
+};
+
+// --- MOCK DATA FOR STATIC CONTENT ---
+const ADVENTURE_LOCATIONS: AdventureLocation[] = [
+    { id: '1', name: '自家後院', description: '安全的新手探險地，偶爾會有小蟲子。', costHunger: 5, costGold: 5, difficulty: 'Easy', enemyName: '野蟲' },
+    { id: '2', name: '附近的公園', description: '熱鬧的公園，但也潛藏著流浪動物的威脅。', costHunger: 15, costGold: 10, reqStats: { str: 20 }, difficulty: 'Medium', enemyName: '流浪貓' },
+    { id: '3', name: '神秘森林', description: '危險的未知區域，只有強者才能生存。', costHunger: 30, costGold: 20, reqStats: { str: 50, int: 30 }, difficulty: 'Hard', enemyName: '樹妖' }
+];
+
+const ACHIEVEMENTS_DATA: Achievement[] = [
+    { id: '1', title: 'First Step', description: 'Pet age reaches 1 hour', reward: 'STR Growth +5% INT Growth +5%', progress: 100, unlocked: true, icon: 'baby', color: '#ffe762' },
+    { id: '2', title: 'One Day Plan', description: 'Pet age reaches 1 day', reward: 'STR/INT/DEX Growth +10% LUCK +2', progress: 100, unlocked: true, icon: 'calendar', color: '#ffe762' },
+];
+
+const SHOP_ITEMS: Item[] = [
+  { id: 's1', name: 'Fortune Cookie', type: ItemType.Consumable, category: ItemCategory.Food, price: 10, rarity: Rarity.Common, description: 'A crisp cookie with a fortune inside.', statsDescription: 'Happiness +5', icon: 'cookie' },
+  { id: 's2', name: 'Tuna Can', type: ItemType.Consumable, category: ItemCategory.Food, price: 30, rarity: Rarity.Common, description: 'High quality tuna. Cats love it.', statsDescription: 'Hunger -50', icon: 'fish' },
+  { id: 's3', name: 'Premium Food', type: ItemType.Consumable, category: ItemCategory.Food, price: 50, rarity: Rarity.Excellent, description: 'Gourmet pet food.', statsDescription: 'Hunger -100 Happiness +10', icon: 'star' },
+  { id: 's4', name: 'Magic Wand', type: ItemType.Equipment, category: ItemCategory.Toy, price: 150, rarity: Rarity.Rare, description: 'A toy wand that sparkles.', statsDescription: 'Happiness Regen', slot: EquipSlot.Weapon, icon: 'wand' },
+  { id: 's5', name: 'Ball', type: ItemType.Equipment, category: ItemCategory.Toy, price: 20, rarity: Rarity.Common, description: 'A bouncy ball.', statsDescription: 'Play +10', slot: EquipSlot.Weapon, icon: 'ball' },
+  { id: 's6', name: 'Lucky Coin', type: ItemType.Equipment, category: ItemCategory.Accessory, price: 500, rarity: Rarity.Epic, description: 'Increases luck significantly.', statsDescription: 'LCK +10', slot: EquipSlot.Accessory, icon: 'coin' },
+  { id: 's7', name: 'Health Elixir', type: ItemType.Consumable, category: ItemCategory.Medicine, price: 100, rarity: Rarity.Rare, description: 'Fully restores health.', statsDescription: 'HP Full', icon: 'potion' },
+];
 </script>
-
-<style scoped>
-.cute-game-container {
-  width: 100vw;
-  height: 100vh;
-  background: var(--color-bg);
-  position: relative;
-  overflow: hidden;
-  font-family: 'Press Start 2P', 'Noto Sans TC', cursive;
-  touch-action: manipulation; /* 改善觸控體驗 */
-}
-
-.main-scene {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: min(90vw, 900px);
-  padding: 0 10px;
-}
-
-/* 手機直向 */
-@media (max-width: 480px) {
-  .main-scene {
-    width: 95vw;
-    top: 45%;
-  }
-}
-
-/* 平板 */
-@media (min-width: 481px) and (max-width: 768px) {
-  .main-scene {
-    width: 85vw;
-  }
-}
-
-/* 底部工具欄 */
-.bottom-toolbar {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
-  background: var(--color-panel);
-  padding: 12px 16px;
-  border: 3px solid var(--color-accent);
-  border-radius: 16px;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1);
-  z-index: 100;
-  max-width: 90vw;
-}
-
-.tool-btn {
-  width: 52px;
-  height: 52px;
-  min-width: 44px; /* 觸控友好最小尺寸 */
-  min-height: 44px;
-  background: linear-gradient(180deg, var(--color-panel-light) 0%, var(--color-panel) 100%);
-  border: 2px solid var(--color-accent-dark);
-  border-radius: 8px;
-  font-size: 24px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 3px 0 var(--color-border), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-  position: relative;
-  -webkit-tap-highlight-color: transparent; /* 移除點擊高亮 */
-}
-
-/* 手機直向 */
-@media (max-width: 480px) {
-  .bottom-toolbar {
-    bottom: 10px;
-    padding: 10px 12px;
-    gap: 8px;
-    max-width: 95vw;
-  }
-  
-  .tool-btn {
-    width: 48px;
-    height: 48px;
-    font-size: 22px;
-  }
-}
-
-/* 手機橫向 */
-@media (max-width: 768px) and (orientation: landscape) {
-  .bottom-toolbar {
-    bottom: 8px;
-    padding: 8px 12px;
-    gap: 6px;
-  }
-  
-  .tool-btn {
-    width: 44px;
-    height: 44px;
-    font-size: 20px;
-  }
-}
-
-.tool-btn:hover {
-  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 5px 0 var(--color-border), inset 0 1px 0 rgba(255, 255, 255, 0.3);
-}
-
-.tool-btn:active {
-  transform: translateY(1px);
-  box-shadow: 0 1px 0 var(--color-border), inset 0 1px 0 rgba(0, 0, 0, 0.2);
-}
-
-.tool-btn.inventory-btn {
-  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
-  border-color: var(--color-accent-dark);
-}
-
-/* 狀態面板覆蓋 */
-.stats-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 999;
-}
-
-.stats-panel {
-  width: 90%;
-  max-width: 400px;
-  background: var(--color-panel);
-  border: 3px solid var(--color-accent);
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.1);
-}
-
-.stats-panel h3 {
-  margin: 0 0 16px 0;
-  color: var(--color-text);
-  text-align: center;
-  font-size: 14px;
-  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
-}
-
-.stat-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.stat-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: var(--color-panel-light);
-  border: 2px solid var(--color-border);
-  border-radius: 6px;
-  font-size: 10px;
-  color: var(--color-text);
-}
-
-.close-stats-btn {
-  width: 100%;
-  padding: 12px;
-  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
-  border: 2px solid var(--color-border);
-  border-radius: 8px;
-  color: var(--color-text);
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.2s;
-  box-shadow: 0 3px 0 var(--color-border), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-
-.close-stats-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 0 var(--color-border), inset 0 1px 0 rgba(255, 255, 255, 0.3);
-}
-
-/* 載入畫面 */
-.loading-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--color-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-
-.loading-content {
-  text-align: center;
-}
-
-.loading-spinner {
-  width: 60px;
-  height: 60px;
-  border: 6px solid var(--color-panel);
-  border-top: 6px solid var(--color-accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 20px;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.loading-content p {
-  color: var(--color-text);
-  font-size: 12px;
-  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
-}
-</style>
diff --git a/app/pages/old.vue b/app/pages/old.vue
deleted file mode 100644
index 6207423..0000000
--- a/app/pages/old.vue
+++ /dev/null
@@ -1,4810 +0,0 @@
-<template>
-  <div class="pet-system-container">
-    <!-- 名字輸入對話框 -->
-    <div v-if="showNameInput" class="name-input-modal">
-      <div class="modal-content">
-        <h2> 為你的寵物命名</h2>
-        <p>請為你的新寵物取一個名字</p>
-        <input 
-          v-model="inputPetName" 
-          @keyup.enter="confirmName"
-          type="text" 
-          placeholder="輸入寵物名字..."
-          maxlength="20"
-          class="name-input"
-        />
-        <div class="modal-buttons">
-          <button @click="confirmName" :disabled="!inputPetName || inputPetName.trim().length === 0">
-            確認
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="header">
-      <h1>{{ petState?.name || 'LOADING...' }}</h1>
-      <p class="subtitle">{{ systemStatus }}</p>
-    </div>
-
-    <!-- 寵物狀態顯示 -->
-    <div class="pet-status" v-if="petState">
-      <!-- 基礎屬性 -->
-      <div class="status-section">
-        <h3>
-          基礎屬性 
-          <span class="mini-pet-emoji" :class="currentEmotion.animation" :title="currentEmotion.name">
-            {{ currentEmotion.emoji }}
-          </span>
-        </h3>
-        <div class="status-grid">
-          <div class="stat-item">
-            <span class="stat-label">飢餓</span>
-            <div class="stat-bar">
-              <div class="stat-fill" :style="{ width: `${petState.hunger || 0}%` }"></div>
-            </div>
-            <span class="stat-value">{{ Math.round(petState.hunger || 0) }}</span>
-          </div>
-          <div class="stat-item">
-            <span class="stat-label">快樂</span>
-            <div class="stat-bar">
-              <div class="stat-fill" :style="{ width: `${petState.happiness || 0}%` }"></div>
-            </div>
-            <span class="stat-value">{{ Math.round(petState.happiness || 0) }}</span>
-          </div>
-          <div class="stat-item">
-            <span class="stat-label">健康</span>
-            <div class="stat-bar">
-              <div class="stat-fill" :style="{ width: `${(petState.health / getMaxHealth(petState)) * 100 || 0}%` }"></div>
-            </div>
-            <span class="stat-value">{{ Math.round(petState.health || 0) }}/{{ getMaxHealth(petState) }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 寵物資料 -->
-      <div class="status-section">
-        <h3>═ 寵物資料 ═</h3>
-        <div class="pet-info-grid">
-          <div class="info-item">
-            <span class="info-label">名字</span>
-            <span class="info-value">{{ petState.name || '未命名' }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">階段</span>
-            <span class="info-value">{{ getStageName(petState.stage) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">年齡</span>
-            <span class="info-value">{{ formatAge(petState.ageSeconds) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">身高</span>
-            <span class="info-value">{{ Math.round(petState.height || 0) }} cm</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">身高</span>
-            <span class="info-value">{{ Math.round(petState.height || 0) }} cm</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">體重</span>
-            <span class="info-value">{{ Math.round(petState.weight || 0) }} g</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">💰 金幣</span>
-            <span class="info-value highlight">{{ petState.coins || 0 }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">命格</span>
-            <div class="info-value-group">
-              <span class="info-value highlight">{{ petState.destiny ? petState.destiny.name : '無' }}</span>
-              <span v-if="petState.destiny" class="info-sub">{{ petState.destiny.description }}</span>
-            </div>
-          </div>
-          <div class="info-item" v-if="petState.evolutionName">
-            <span class="info-label">形態</span>
-            <div class="info-value-group">
-              <span class="info-value highlight">{{ petState.evolutionName }}</span>
-              <span class="info-sub" v-if="petState.evolutionId === 'warrior_tiger'">🐯 力量特化</span>
-              <span class="info-sub" v-if="petState.evolutionId === 'agile_cat'">🐈 敏捷特化</span>
-              <span class="info-sub" v-if="petState.evolutionId === 'sage_cat'">😺 智力特化</span>
-            </div>
-          </div>
-          <div class="info-item">
-            <span class="info-label">力量 (STR)</span>
-            <span class="info-value">{{ Math.round(petState.effectiveStr || petState.str || 0) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">智力 (INT)</span>
-            <span class="info-value">{{ Math.round(petState.effectiveInt || petState.int || 0) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">敏捷 (DEX)</span>
-            <span class="info-value">{{ Math.round(petState.effectiveDex || petState.dex || 0) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">運勢 (LUCK)</span>
-            <span class="info-value">{{ Math.round(petState.effectiveLuck || petState.luck || 0) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">世代</span>
-            <span class="info-value">第 {{ petState.generation || 1 }} 代</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">神明好感</span>
-            <span class="info-value">{{ getDeityFavorDisplay(petState) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">HP</span>
-            <span class="info-value">{{ Math.round(petState.hp || petState.health || 0) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">攻擊</span>
-            <span class="info-value">{{ Math.round(petState.attack || 0) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">防禦</span>
-            <span class="info-value">{{ Math.round(petState.defense || 0) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">速度</span>
-            <span class="info-value">{{ Math.round(petState.speed || 0) }}</span>
-          </div>
-        </div>
-      </div>
-
-
-
-      <div class="status-section">
-        <h3>═ 加成與隱藏數值 ═</h3>
-        <div class="bonus-grid">
-          <div 
-            class="bonus-item" 
-            v-for="(value, key) in getAllBonuses(petState)" 
-            :key="key"
-            :class="{ 'not-implemented': !isImplemented(key) }"
-          >
-            <span class="bonus-label">{{ getBonusName(key) }}</span>
-            <span class="bonus-value" :class="{ positive: value > 0, negative: value < 0 }">
-              {{ value > 0 ? '+' : '' }}{{ value }}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 狀態標籤 -->
-      <div class="status-badges">
-        <span v-if="petState.isSleeping" class="badge">[SLEEP] 睡覺中</span>
-        <span v-if="petState.isSick" class="badge sick">[SICK] 生病</span>
-        <span v-if="petState.poopCount > 0" class="badge">[POOP] 便便 x{{ petState.poopCount }}</span>
-      </div>
-
-      <!-- 成就系統 -->
-      <div class="status-section">
-        <h3>═ 成就系統 ═</h3>
-        <div class="achievement-summary">
-          <div class="achievement-stats">
-            <span>已解鎖: {{ unlockedAchievementsCount }}/{{ totalAchievementsCount }}</span>
-            <span>進度: {{ achievementProgress }}%</span>
-          </div>
-        </div>
-        <details class="achievement-list">
-          <summary>查看成就列表 ({{ unlockedAchievementsCount }}/{{ totalAchievementsCount }})</summary>
-          <div class="achievement-grid">
-            <div 
-              v-for="achievement in allAchievements" 
-              :key="achievement.id"
-              class="achievement-item"
-              :class="{ unlocked: isAchievementUnlocked(achievement.id), locked: !isAchievementUnlocked(achievement.id) }"
-            >
-              <div class="achievement-icon">{{ achievement.icon || '🏆' }}</div>
-              <div class="achievement-info">
-                <div class="achievement-name">{{ achievement.name }}</div>
-                <div class="achievement-desc">{{ achievement.description }}</div>
-                <div v-if="!isAchievementUnlocked(achievement.id)" class="achievement-progress">
-                  <div class="progress-bar">
-                    <div class="progress-fill" :style="{ width: getAchievementProgressPercent(achievement) + '%' }"></div>
-                  </div>
-                  <span class="progress-text">{{ getAchievementProgressText(achievement) }}</span>
-                </div>
-                <div v-if="isAchievementUnlocked(achievement.id) && achievement.reward" class="achievement-reward">
-                  <span class="reward-label">獎勵:</span>
-                  <span v-for="(value, key) in achievement.reward.buffs" :key="key" class="reward-item">
-                    {{ getBonusName(key) }}{{ formatBonusValue(value) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </details>
-      </div>
-
-      <!-- 背包系統 -->
-      <div class="status-section">
-        <h3>═ 背包系統 ═</h3>
-        
-        <!-- 裝備槽位 -->
-        <div class="equipment-slots">
-          <h4>裝備槽位</h4>
-          <div class="rarity-legend">
-            <div class="legend-title">稀有度說明：</div>
-            <div class="legend-items">
-              <span 
-                v-for="(rarityData, rarityKey) in itemRarity" 
-                :key="rarityKey"
-                class="legend-item"
-                :class="`rarity-${rarityKey}`"
-              >
-                {{ rarityData.name }} (掉落: {{ (rarityData.dropRate * 100).toFixed(0) }}%)
-              </span>
-            </div>
-            <div class="legend-note">邊框顏色代表稀有度，數字為基礎掉落機率</div>
-          </div>
-          <div class="slots-grid">
-            <div 
-              v-for="(slotName, slotKey) in equipmentSlots" 
-              :key="slotKey"
-              class="equipment-slot-container"
-            >
-              <div class="slot-header">{{ slotName.name }} {{ slotName.icon }}</div>
-              
-              <!-- 實際裝備槽位 -->
-              <div class="equipment-slot equipment-slot-main" :class="{ equipped: hasEquipped(slotKey, 'equipment') }">
-                <div class="slot-label">實際裝備</div>
-                <div 
-                  v-if="hasEquipped(slotKey, 'equipment')" 
-                  class="slot-item"
-                  @mouseenter="showEquipmentTooltip($event, slotKey, 'equipment')"
-                  @mouseleave="hideItemTooltip"
-                  @click="hideItemTooltip"
-                >
-                  <span class="item-icon">{{ getEquippedItemIcon(slotKey, 'equipment') }}</span>
-                  <span class="item-name">{{ getEquippedItemName(slotKey, 'equipment') }}</span>
-                  <button 
-                    @click.stop="handleUnequip(slotKey, 'equipment')" 
-                    class="unequip-btn"
-                    title="卸下實際裝備"
-                  >
-                    ✕
-                  </button>
-                </div>
-                <div v-else class="slot-empty">空</div>
-              </div>
-              
-              <!-- 外觀套件槽位 -->
-              <div class="equipment-slot equipment-slot-appearance" :class="{ equipped: hasEquipped(slotKey, 'appearance') }">
-                <div class="slot-label">外觀套件</div>
-                <div 
-                  v-if="hasEquipped(slotKey, 'appearance')" 
-                  class="slot-item"
-                  @mouseenter="showEquipmentTooltip($event, slotKey, 'appearance')"
-                  @mouseleave="hideItemTooltip"
-                  @click="hideItemTooltip"
-                >
-                  <span class="item-icon">{{ getEquippedItemIcon(slotKey, 'appearance') }}</span>
-                  <span class="item-name">{{ getEquippedItemName(slotKey, 'appearance') }}</span>
-                  <button 
-                    @click.stop="handleUnequip(slotKey, 'appearance')" 
-                    class="unequip-btn"
-                    title="卸下外觀套件"
-                  >
-                    ✕
-                  </button>
-                </div>
-                <div v-else class="slot-empty">空</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 背包道具列表 -->
-        <details class="inventory-list">
-          <summary>查看背包 ({{ inventoryItemCount }} 種道具)</summary>
-          <div class="inventory-grid">
-            <div 
-              v-for="(itemData, itemId) in inventoryItems" 
-              :key="itemId"
-              class="inventory-item"
-              :class="getRarityClass(itemData.item.rarity)"
-              @mouseenter="showItemTooltip($event, itemData.item, itemId, itemData.instance)"
-              @mouseleave="hideItemTooltip"
-              @click="hideItemTooltip"
-            >
-              <div class="item-header">
-                <span class="item-icon">{{ itemData.item.icon || '📦' }}</span>
-                <span class="item-name" :style="{ color: getRarityColor(itemData.item.rarity) }">
-                  {{ itemData.item.name }}
-                  <span v-if="itemData.isEquipped" class="equipped-badge">[已裝備]</span>
-                </span>
-                <span v-if="itemData.count > 1" class="item-count">x{{ itemData.count }}</span>
-              </div>
-              <div class="item-info">
-                <div class="item-rarity" :style="{ color: getRarityColor(itemData.item.rarity) }">
-                  {{ getRarityName(itemData.item.rarity) }}
-                  <span v-if="itemData.item.dropRate !== undefined" class="drop-rate">
-                    (掉落: {{ (itemData.item.dropRate * 100).toFixed(0) }}%)
-                  </span>
-                </div>
-                <div class="item-type">{{ itemTypeNames[itemData.item.type] || itemData.item.type }}</div>
-                <div class="item-description">{{ itemData.item.description }}</div>
-                
-                <!-- 道具效果說明 -->
-                <div v-if="itemData.item.effects" class="item-effects">
-                  <div class="effects-title">效果：</div>
-                  <div v-if="itemData.item.effects.flat" class="effects-flat">
-                    <span v-for="(value, key) in itemData.item.effects.flat" :key="key" class="effect-item">
-                      {{ getStatName(key) }}{{ formatStatValue(value) }}
-                    </span>
-                  </div>
-                  <div v-if="itemData.item.effects.percent" class="effects-percent">
-                    <span v-for="(value, key) in itemData.item.effects.percent" :key="key" class="effect-item">
-                      {{ getStatName(key) }}{{ formatPercentValue(value) }}
-                    </span>
-                  </div>
-                </div>
-                
-                <div v-if="itemData.instance && itemData.instance.durability !== undefined && itemData.instance.durability !== Infinity" class="item-durability">
-                  耐久度: {{ itemData.instance.durability }}/{{ itemData.item.maxDurability }}
-                </div>
-              </div>
-              <div class="item-actions">
-                <button 
-                  v-if="itemData.item.type === 'consumable'"
-                  @click="handleUseItem(itemId)"
-                  class="action-btn use-btn"
-                  :disabled="!inventorySystem || itemData.count < 1"
-                >
-                  使用
-                </button>
-                <button 
-                  v-if="canEquip(itemData.item) && itemData.item.type !== 'appearance'"
-                  @click="handleEquip(itemId, itemData.item.slot, 'equipment')"
-                  class="action-btn equip-btn"
-                  :disabled="!inventorySystem"
-                  title="裝備為實際裝備（有數值效果）"
-                >
-                  裝備（實際）
-                </button>
-                <button 
-                  v-if="canEquip(itemData.item) && itemData.item.type === 'appearance'"
-                  @click="handleEquip(itemId, itemData.item.slot, 'appearance')"
-                  class="action-btn equip-btn appearance-btn"
-                  :disabled="!inventorySystem"
-                  title="裝備為外觀套件（只改變外觀）"
-                >
-                  裝備（外觀）
-                </button>
-                <button 
-                  v-if="itemData.item.type === 'equipment' && itemData.item.durability !== Infinity"
-                  @click="handleRepair(itemId)"
-                  class="action-btn repair-btn"
-                  :disabled="!inventorySystem || getItemDurability(itemId) >= itemData.item.maxDurability"
-                >
-                  修復
-                </button>
-              </div>
-              
-              <!-- 刪除區域 -->
-              <div class="item-delete-section">
-                <div class="delete-controls">
-                  <label class="delete-label">刪除數量：</label>
-                  <input 
-                    type="number" 
-                    :min="1" 
-                    :max="itemData.count"
-                    v-model.number="deleteCounts[itemId]"
-                    class="delete-input"
-                    @input="updateDeleteCount(itemId, $event.target.value, itemData.count)"
-                  />
-                  <span class="delete-max">/ {{ itemData.count }}</span>
-                </div>
-                <button 
-                  @click="handleDeleteItem(itemId, deleteCounts[itemId] || 1)"
-                  class="action-btn delete-btn"
-                  :disabled="!inventorySystem || !deleteCounts[itemId] || deleteCounts[itemId] < 1 || itemData.isEquipped"
-                  :title="itemData.isEquipped ? '已裝備的道具無法刪除，請先卸下' : `刪除 ${deleteCounts[itemId] || 1} 個 ${itemData.item.name}`"
-                >
-                  刪除
-                </button>
-              </div>
-            </div>
-            <div v-if="inventoryItemCount === 0" class="inventory-empty">
-              背包是空的
-            </div>
-          </div>
-        </details>
-      </div>
-    </div>
-
-    <!-- 商店面板 -->
-    <div v-if="showShopPanel" class="modal-overlay" @click.self="closeShopPanel">
-      <div class="modal-content shop-panel">
-        <h3>💰 商店</h3>
-        <div class="shop-balance">
-          <span>您的金幣：</span>
-          <span class="balance-amount">{{ petState.coins || 0 }} 💰</span>
-          <button @click="refreshShop" class="refresh-btn" title="刷新商店">🔄</button>
-        </div>
-        
-        <!-- 買賣切換 -->
-        <div class="shop-mode-tabs">
-          <button 
-            @click="shopMode = 'buy'" 
-            :class="{ active: shopMode === 'buy' }"
-            class="mode-tab-btn"
-          >
-            購買
-          </button>
-          <button 
-            @click="shopMode = 'sell'" 
-            :class="{ active: shopMode === 'sell' }"
-            class="mode-tab-btn"
-          >
-            賣出
-          </button>
-        </div>
-
-        <!-- 購買模式 -->
-        <div v-if="shopMode === 'buy'">
-          <!-- 分類標籤 -->
-          <div class="shop-categories">
-            <button 
-              @click="selectedCategory = 'all'" 
-              :class="{ active: selectedCategory === 'all' }"
-              class="category-btn"
-            >
-              全部
-            </button>
-            <button 
-              v-for="(cat, key) in shopCategories" 
-              :key="key"
-              @click="selectedCategory = key" 
-              :class="{ active: selectedCategory === key }"
-              class="category-btn"
-            >
-              {{ cat.icon }} {{ cat.name }}
-            </button>
-          </div>
-
-          <!-- 商品列表 -->
-          <div class="shop-items-list">
-            <div 
-              v-for="shopItem in filteredShopItems" 
-              :key="shopItem.itemId" 
-              class="shop-item-card"
-            >
-              <div class="item-icon">{{ getItemIcon(shopItem.itemId) }}</div>
-              <div class="item-details">
-                <div class="item-name">{{ getItemName(shopItem.itemId) }}</div>
-                <div class="item-price">💰 {{ shopItem.price }}</div>
-              </div>
-              <button 
-                @click="buyItem(shopItem)" 
-                class="buy-btn"
-                :disabled="(petState.coins || 0) < shopItem.price"
-              >
-                購買
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- 賣出模式 -->
-        <div v-else>
-          <div class="sell-hint">選擇要賣出的道具</div>
-          <div class="shop-items-list">
-            <div 
-              v-for="(itemData, itemKey) in inventoryItems" 
-              :key="itemKey" 
-              class="shop-item-card"
-            >
-              <div class="item-icon">{{ itemData.item.icon }}</div>
-              <div class="item-details">
-                <div class="item-name">{{ itemData.item.name }}</div>
-                <div class="item-count">持有: {{ itemData.count || 1 }}</div>
-              </div>
-              <button 
-                @click="sellItem(itemData.item.id, itemData.instanceId)" 
-                class="sell-btn"
-              >
-                賣出
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <button class="close-btn" @click="closeShopPanel">關閉</button>
-      </div>
-    </div>
-
-    <!-- 冒險選擇面板 -->
-    <div v-if="showAdventurePanel" class="modal-overlay" @click.self="closeAdventurePanel">
-      <div class="modal-content adventure-panel">
-        <h3>⚔️ 選擇冒險區域</h3>
-        <div class="adventure-list">
-          <div v-for="adv in adventures" :key="adv.id" class="adventure-card">
-            <div class="adv-header">
-              <span class="adv-name">{{ adv.name }}</span>
-            </div>
-            <p class="adv-desc">{{ adv.description }}</p>
-            <div class="adv-cost">
-              <span>消耗:</span>
-              <span v-if="adv.cost.hunger">🍖 {{ adv.cost.hunger }}</span>
-              <span v-if="adv.cost.happiness">😊 {{ adv.cost.happiness }}</span>
-            </div>
-            <div class="adv-requirements" v-if="adv.statsRequirement">
-              <span>要求:</span>
-              <span v-for="(val, key) in adv.statsRequirement" :key="key">
-                {{ key.toUpperCase() }} {{ val }}
-              </span>
-            </div>
-            <button 
-              @click="handleStartAdventure(adv.id)" 
-              class="start-adv-btn"
-              :disabled="petState.hunger < adv.cost.hunger || petState.happiness < adv.cost.happiness"
-            >
-              出發！
-            </button>
-          </div>
-        </div>
-        <button class="close-btn" @click="closeAdventurePanel">關閉</button>
-      </div>
-    </div>
-
-    <!-- 冒險進行中面板 -->
-    <div v-if="currentAdventure" class="modal-overlay">
-      <div class="modal-content adventure-progress-panel">
-        <h3>⚔️ 冒險進行中...</h3>
-        <div class="progress-bar-container">
-          <div class="progress-bar" :style="{ width: getAdventureProgress() + '%' }"></div>
-        </div>
-        <div class="adventure-logs">
-          <div v-for="(log, index) in adventureLogs" :key="index" class="log-entry">
-            {{ log }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 冒險結算面板 -->
-    <div v-if="showAdventureResult" class="modal-overlay" @click.self="closeAdventureResult">
-      <div class="modal-content result-panel">
-        <h3>🎉 冒險完成！</h3>
-        <div class="rewards-list">
-          <div v-if="adventureResult.rewards.coins > 0" class="reward-item coins-reward">
-            <span class="reward-label">金幣</span>
-            <span class="reward-value">+{{ adventureResult.rewards.coins }} 💰</span>
-          </div>
-          <div v-if="adventureResult.rewards.items.length > 0" class="reward-items">
-            <h4>獲得道具：</h4>
-            <div v-for="(item, idx) in adventureResult.rewards.items" :key="idx" class="reward-item">
-              {{ item.name }} x{{ item.count }}
-            </div>
-          </div>
-          <div v-else-if="adventureResult.rewards.coins === 0" class="no-rewards">
-            <p>這次沒有獲得任何獎勵...</p>
-          </div>
-        </div>
-        <button class="confirm-btn" @click="closeAdventureResult">確定</button>
-      </div>
-    </div>
-
-    <!-- 道具 Tooltip -->
-    <div 
-      v-if="itemTooltip && tooltipContent" 
-      class="item-tooltip"
-      :style="{ left: tooltipPosition.x + 'px', top: tooltipPosition.y + 'px' }"
-    >
-      <div class="tooltip-header">
-        <span class="tooltip-icon">{{ tooltipContent.icon }}</span>
-        <span class="tooltip-name" :style="{ color: tooltipContent.rarityColor }">
-          {{ tooltipContent.name }}
-        </span>
-      </div>
-      <div class="tooltip-rarity" :style="{ color: tooltipContent.rarityColor }">
-        {{ tooltipContent.rarity }} (掉落: {{ tooltipContent.dropRate }}%)
-      </div>
-      <div class="tooltip-type">{{ tooltipContent.type }}</div>
-      <div class="tooltip-description">{{ tooltipContent.description }}</div>
-      
-      <div v-if="tooltipContent.effects.length > 0" class="tooltip-effects">
-        <div class="tooltip-effects-title">效果：</div>
-        <div v-for="(effect, idx) in tooltipContent.effects" :key="idx" class="tooltip-effect-item">
-          {{ effect.stat }}{{ effect.value }}
-        </div>
-      </div>
-      
-      <div v-if="tooltipContent.durability" class="tooltip-durability">
-        耐久度: {{ tooltipContent.durability.current }}/{{ tooltipContent.durability.max }}
-      </div>
-    </div>
-
-    <!-- 操作按鈕區 -->
-    <div class="action-panel">
-      <div class="action-group">
-        <h3> 寵物互動</h3>
-        <div class="button-grid">
-          <button @click="handleFeed" 
-                  :disabled="!canDoAction('feed')"
-                  :title="!canDoAction('feed') ? getDisabledReason('feed') : '增加飢餓值 (+體重)'">
-            [FEED] 餵食
-          </button>
-          
-          <!-- 玩耍選項 -->
-          <div class="play-group" style="grid-column: span 2; display: flex; gap: 5px;">
-             <button @click="handlePlay('normal')" 
-                    :disabled="!canDoAction('play')"
-                    :title="!canDoAction('play') ? getDisabledReason('play') : '一般玩耍 (體重 -1g)'"
-                    style="flex: 1;">
-              [PLAY] 玩耍
-            </button>
-            <button @click="handlePlay('training')" 
-                    :disabled="!canDoAction('play')"
-                    :title="!canDoAction('play') ? getDisabledReason('play') : '體能訓練 (體重 -3g)'"
-                    style="flex: 1;">
-              [TRAIN] 訓練
-            </button>
-            <button @click="handlePlay('puzzle')" 
-                    :disabled="!canDoAction('play')"
-                    :title="!canDoAction('play') ? getDisabledReason('play') : '益智遊戲 (體重不變)'"
-                    style="flex: 1;">
-              [PUZZLE] 益智
-            </button>
-          </div>
-
-          <button @click="handleClean" 
-                  :disabled="!canDoAction('clean')"
-                  :title="!canDoAction('clean') ? getDisabledReason('clean') : '清理便便'">
-            [CLEAN] 清理
-          </button>
-          <button @click="handleHeal" 
-                  :disabled="!canDoAction('heal')"
-                  :title="!canDoAction('heal') ? getDisabledReason('heal') : '恢復健康'">
-            [HEAL] 治療
-          </button>
-          <button @click="handleSleep" 
-                  :disabled="!canDoAction('sleep')"
-                  :title="!canDoAction('sleep') ? getDisabledReason('sleep') : '睡覺恢復健康'">
-            {{ petState?.isSleeping ? '[WAKE] 起床' : '[SLEEP] 睡覺' }}
-          </button>
-          <button @click="handleShowStatus" :disabled="!isReady">[STATUS] 查看狀態</button>
-          <button @click="openShopPanel" class="action-btn shop-btn" :disabled="!isReady">
-            💰 商店
-          </button>
-          <button @click="openAdventurePanel" class="action-btn adventure-btn" :disabled="!isReady || petState?.isDead || petState?.isSleeping">
-          ⚔️ 探險
-        </button>
-        <button @click="handlePlay" class="action-btn" :disabled="!isReady || petState?.isDead || petState?.isSleeping">
-          🎮 玩耍
-        </button>
-          <button @click="handleCheckEvolution" :disabled="!isReady" title="檢查進化條件">[CHECK] 進化檢查</button>
-          <button @click="handleDeletePet" :disabled="!isReady" class="danger-button">[DEL] 刪除寵物</button>
-        </div>
-      </div>
-
-      <div class="action-group">
-        <h3>[ROLL] 事件系統</h3>
-        <div class="button-grid">
-          <button @click="handleStart" :disabled="!isReady || isRunning">[START] 啟動循環</button>
-          <button @click="handleStop" :disabled="!isRunning">[STOP] 停止循環</button>
-          <button @click="handleListEvents" :disabled="!isReady">[LIST] 事件列表</button>
-          <button @click="handleEventHistory" :disabled="!isReady">[HISTORY] 事件歷史</button>
-          <button @click="handleTestAllEvents" :disabled="!isReady">[TEST] 測試所有事件</button>
-        </div>
-        <!-- 快速觸發事件 -->
-        <details class="event-list">
-          <summary>* 快速觸發事件</summary>
-          <div class="button-grid small">
-            <button @click="handleTriggerEvent('lucky_find')" :disabled="!isReady">幸運發現</button>
-            <button @click="handleTriggerEvent('find_treat')" :disabled="!isReady">發現點心</button>
-            <button @click="handleTriggerEvent('playful_moment')" :disabled="!isReady">玩耍時光</button>
-            <button @click="handleTriggerEvent('deity_blessing')" :disabled="!isReady">神明祝福</button>
-            <button @click="handleTriggerEvent('over_eat')" :disabled="!isReady">吃太多</button>
-            <button @click="handleTriggerEvent('catch_cold')" :disabled="!isReady">感冒</button>
-          </div>
-        </details>
-      </div>
-
-      <div class="action-group">
-        <h3>[PRAY] 神明系統</h3>
-        <div class="button-grid">
-          <button @click="handlePray" :disabled="!isReady">[PRAY] 祈福</button>
-          <!-- 若神明有多個籤詩類型，顯示下拉選單 -->
-          <div v-if="deityLotTypes.length > 1" class="lot-type-select" style="margin: 5px 0;">
-            <label for="lotTypeSelect" style="color: #00ffff; margin-right: 4px;">籤詩類型：</label>
-            <select id="lotTypeSelect" v-model="selectedLotType" style="background: #111; color: #00ff00; border: 1px solid #00ffff;">
-              <option v-for="type in deityLotTypes" :key="type" :value="type">{{ type }}</option>
-            </select>
-          </div>
-          <button @click="handleDrawLot" :disabled="!isReady">[LOT] 求籤</button>
-          <button @click="handleVerifyLot" :disabled="!isReady">[VERIFY] 驗證</button>
-          <button @click="handleThrowJiaobei" :disabled="!isReady">[JIAOBEI] 擲筊</button>
-          <button @click="handleListDeities" :disabled="!isReady">[LIST] 神明列表</button>
-        </div>
-        <!-- 切換神明 -->
-        <details class="deity-list">
-          <summary>[SWITCH] 切換神明</summary>
-          <div class="button-grid small">
-            <button @click="handleSwitchDeity('mazu')" :disabled="!isReady" 
-                    :class="{ active: petState?.currentDeityId === 'mazu' }">媽祖</button>
-            <button @click="handleSwitchDeity('earthgod')" :disabled="!isReady"
-                    :class="{ active: petState?.currentDeityId === 'earthgod' }">土地公</button>
-            <button @click="handleSwitchDeity('yuelao')" :disabled="!isReady"
-                    :class="{ active: petState?.currentDeityId === 'yuelao' }">月老</button>
-            <button @click="handleSwitchDeity('wenchang')" :disabled="!isReady"
-                    :class="{ active: petState?.currentDeityId === 'wenchang' }">文昌</button>
-            <button @click="handleSwitchDeity('guanyin')" :disabled="!isReady"
-                    :class="{ active: petState?.currentDeityId === 'guanyin' }">觀音</button>
-          </div>
-        </details>
-      </div>
-    </div>
-
-    <!-- Debug 面板 -->
-    <div class="debug-toggle" @click="showDebug = !showDebug">[DEBUG]</div>
-    
-    <div v-if="showDebug" class="debug-panel">
-      <h3>[TOOLS] Debug 工具</h3>
-      <div class="debug-group">
-        <h4>神明系統</h4>
-        <button @click="debugResetPrayer">重置祈福次數</button>
-        <button @click="debugAddFavor(10)">好感度 +10</button>
-        <button @click="debugAddFavor(50)">好感度 +50</button>
-      </div>
-      
-      <div class="debug-group">
-        <h4>事件系統</h4>
-        <button @click="debugTriggerEvent">隨機觸發事件</button>
-      </div>
-      
-      <div class="debug-group">
-        <h4>寵物狀態</h4>
-        <button @click="debugFillStats">填滿飢餓/快樂</button>
-        <button @click="debugMaxAttributes">屬性全滿 (100)</button>
-        <button @click="debugAddPoop">[POOP] 便便 x4</button>
-        <button @click="debugKill">一鍵瀕死</button>
-      </div>
-      
-      <div class="debug-group">
-        <h4>成就系統</h4>
-        <input 
-          v-model="debugAchievementId" 
-          type="text" 
-          placeholder="輸入成就 ID..."
-          class="debug-input"
-          @keyup.enter="debugUnlockAchievement"
-        />
-        <button @click="debugUnlockAchievement">解鎖成就 (ID)</button>
-        <button @click="debugListAchievements">查看成就列表</button>
-        <button @click="debugUnlockAllAchievements">解鎖全部成就</button>
-        <button @click="debugResetAchievements">重置成就</button>
-      </div>
-      
-      <div class="debug-group">
-        <h4>背包系統</h4>
-        <button @click="debugAddRandomItem" style="margin-bottom: 8px;">🎲 隨機產生道具</button>
-        <div style="margin-top: 8px; margin-bottom: 8px;">
-          <div style="font-size: 10px; color: #888; margin-bottom: 4px;">按類型:</div>
-          <div style="display: flex; flex-direction: column; gap: 4px;">
-            <button @click="debugAddItemByType('equipment')">⚔️ 產生裝備類</button>
-            <button @click="debugAddItemByType('appearance')">👕 產生外觀類</button>
-            <button @click="debugAddItemByType('consumable')">🍪 產生消耗品</button>
-            <button @click="debugAddItemByType('talisman')">🔮 產生護身符</button>
-            <button @click="debugAddItemByType('special')">⭐ 產生特殊道具</button>
-          </div>
-        </div>
-        <div style="margin-top: 8px;">
-          <div style="font-size: 10px; color: #888; margin-bottom: 4px;">按類別:</div>
-          <div style="display: flex; flex-direction: column; gap: 4px;">
-            <button @click="debugAddItemByCategory('weapon')">🗡️ 產生武器</button>
-            <button @click="debugAddItemByCategory('armor')">🛡️ 產生防具</button>
-            <button @click="debugAddItemByCategory('food')">🍪 產生食物</button>
-            <button @click="debugAddItemByCategory('potion')">🧪 產生藥水</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Debug 面板樣式 */
-.debug-toggle {
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  width: 40px;
-  height: 40px;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 9999;
-  font-size: 20px;
-}
-
-.debug-panel {
-  position: fixed;
-  bottom: 60px;
-  right: 10px;
-  background: rgba(0, 0, 0, 0.95);
-  color: white;
-  padding: 15px;
-  border-radius: 10px;
-  z-index: 9999;
-  width: 280px;
-  max-height: calc(100vh - 80px);
-  overflow-y: auto;
-  overflow-x: hidden;
-  border: 2px solid #ff00ff;
-  box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
-}
-
-/* Debug 面板滾動條樣式 */
-.debug-panel::-webkit-scrollbar {
-  width: 8px;
-}
-
-.debug-panel::-webkit-scrollbar-track {
-  background: rgba(255, 0, 255, 0.1);
-  border-radius: 4px;
-}
-
-.debug-panel::-webkit-scrollbar-thumb {
-  background: rgba(255, 0, 255, 0.5);
-  border-radius: 4px;
-}
-
-.debug-panel::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 0, 255, 0.8);
-}
-
-.debug-panel h3 {
-  margin: 0 0 10px 0;
-  font-size: 16px;
-  border-bottom: 1px solid #444;
-  padding-bottom: 5px;
-}
-
-.debug-group {
-  margin-bottom: 15px;
-}
-
-.debug-group h4 {
-  margin: 0 0 5px 0;
-  font-size: 12px;
-  color: #aaa;
-}
-
-.debug-panel button {
-  display: block;
-  width: 100%;
-  margin-bottom: 5px;
-  padding: 5px;
-  background: #333;
-  border: 1px solid #555;
-  color: white;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.debug-panel button:hover {
-  background: #555;
-}
-</style>
-
-<script setup>
-import { onMounted, onUnmounted, ref } from 'vue'
-import { PetSystem } from '../core/pet-system.js'
-import { EventSystem } from '../core/event-system.js'
-import { TempleSystem } from '../core/temple-system.js'
-import { AchievementSystem } from '../core/achievement-system.js'
-import { InventorySystem } from '../core/inventory-system.js'
-import { AdventureSystem } from '../core/adventure-system.js'
-import { ApiService } from '../core/api-service.js'
-
-// 創建 API 服務
-const apiService = new ApiService({
-  useMock: true,
-  baseUrl: 'http://localhost:3000/api',
-  mockDelay: 100
-})
-
-// 響應式狀態
-const petState = ref(null)
-const systemStatus = ref('正在初始化...')
-const isReady = ref(false)
-const isRunning = ref(false)
-const showNameInput = ref(false)
-const inputPetName = ref('')
-const deityLotTypes = ref([])
-const selectedLotType = ref('')
-
-// 系統實例
-let petSystem, eventSystem, templeSystem, achievementSystem, inventorySystem, adventureSystem
-
-// 更新狀態顯示
-function updatePetState() {
-  if (petSystem) {
-    petState.value = petSystem.getState()
-  }
-}
-
-// 檢查當前階段是否可以執行某個動作
-function canDoAction(action) {
-  if (!isReady.value || !petSystem) return false
-  return petSystem.isActionAllowed(action)
-}
-
-// 獲取按鈕禁用的原因
-function getDisabledReason(action) {
-  if (!isReady.value || !petSystem) return '系統尚未就緒'
-  if (!petSystem.isActionAllowed(action)) {
-    const stage = petState.value?.stage || 'unknown'
-    const stageNames = {
-      'egg': '蛋階段',
-      'baby': '幼體',
-      'child': '幼年',
-      'adult': '成年'
-    }
-    return `${stageNames[stage] || stage}不能執行此操作`
-  }
-  return ''
-}
-
-// 格式化年齡
-function formatAge(ageSeconds) {
-  if (!ageSeconds) return '0 秒'
-  const days = Math.floor(ageSeconds / 86400)
-  const hours = Math.floor((ageSeconds % 86400) / 3600)
-  const minutes = Math.floor((ageSeconds % 3600) / 60)
-  const seconds = Math.floor(ageSeconds % 60)
-  
-  if (days > 0) return `${days} 天 ${hours} 小時`
-  if (hours > 0) return `${hours} 小時 ${minutes} 分鐘`
-  if (minutes > 0) return `${minutes} 分鐘 ${seconds} 秒`
-  return `${seconds} 秒`
-}
-
-// 獲取階段名稱
-function getStageName(stage) {
-  const stageNames = {
-    'egg': '蛋',
-    'baby': '幼體',
-    'child': '幼年',
-    'adult': '成年'
-  }
-  return stageNames[stage] || stage
-}
-
-// 獲取神明好感顯示
-function getDeityFavorDisplay(state) {
-  if (!state || !state.currentDeityId) return '無'
-  const favor = state.deityFavors?.[state.currentDeityId] || 0
-  const deityNames = {
-    'mazu': '媽祖',
-    'earthgod': '土地公',
-    'yuelao': '月老',
-    'wenchang': '文昌',
-    'guanyin': '觀音'
-  }
-  return `${deityNames[state.currentDeityId] || state.currentDeityId}: ${favor}/100`
-}
-
-// 獲取所有加成
-// 獲取所有加成
-function getAllBonuses(state) {
-  if (!state) return {}
-  
-  const bonuses = {}
-  
-  // 1. 命格加成
-  if (state.destiny && state.destiny.buffs) {
-    for (const [key, value] of Object.entries(state.destiny.buffs)) {
-      bonuses[key] = (bonuses[key] || 0) + value
-    }
-  }
-  
-  // 獲取當前神明（如果在神明系統範圍內）
-  let currentDeity = null
-  if (templeSystem) {
-    currentDeity = templeSystem.getCurrentDeity()
-  }
-
-  // 2. 神明基礎加成
-  if (currentDeity && currentDeity.buffs) {
-    for (const [key, value] of Object.entries(currentDeity.buffs)) {
-      bonuses[key] = (bonuses[key] || 0) + value
-    }
-  }
-  
-  // 3. 臨時 Buff (需要從 eventSystem 獲取)
-  if (eventSystem) {
-    const activeBuffs = eventSystem.getBuffManager().getActiveBuffs()
-    for (const buff of activeBuffs) {
-      if (buff.effects) {
-        for (const [key, value] of Object.entries(buff.effects)) {
-          bonuses[key] = (bonuses[key] || 0) + value
-        }
-      }
-    }
-  }
-
-  // 4. 神明好感度等級加成
-  if (currentDeity && currentDeity.favorLevelBuffs) {
-    const favor = state.deityFavors?.[state.currentDeityId] || 0
-    const level = Math.floor(favor / currentDeity.favorLevelBuffs.interval)
-
-    if (level > 0 && currentDeity.favorLevelBuffs.buffsPerLevel) {
-      for (const [key, valuePerLevel] of Object.entries(currentDeity.favorLevelBuffs.buffsPerLevel)) {
-        bonuses[key] = (bonuses[key] || 0) + (valuePerLevel * level)
-      }
-    }
-  }
-  
-  // 5. 神明滿級特殊 Buff
-  if (currentDeity && currentDeity.maxFavorBuff) {
-    const favor = state.deityFavors?.[state.currentDeityId] || 0
-    if (favor >= 100 && currentDeity.maxFavorBuff.effects) {
-      for (const [key, value] of Object.entries(currentDeity.maxFavorBuff.effects)) {
-        // 排除非數值效果（如 sicknessImmune）
-        if (typeof value === 'number') {
-          bonuses[key] = (bonuses[key] || 0) + value
-        }
-      }
-    }
-  }
-  
-  // 6. 成就加成
-  if (state.achievementBuffs) {
-    for (const [key, value] of Object.entries(state.achievementBuffs)) {
-      bonuses[key] = (bonuses[key] || 0) + value
-    }
-  }
-  
-  return bonuses
-}
-
-// 检查加成是否已实现
-function isImplemented(key) {
-  const implemented = [
-    'str', 'int', 'dex', 'luck', 'health',
-    'strGain', 'intGain', 'dexGain',
-    'happinessRecovery', 'healthRecovery'
-  ]
-  return implemented.includes(key)
-}
-
-// 獲取加成名稱
-function getBonusName(key) {
-  const names = {
-    // 基礎屬性（影响战斗数值）
-    str: '力量',
-    int: '智力',
-    dex: '敏捷',
-    luck: '運勢',
-    health: '最大健康',
-    
-    // 成長效率
-    strGain: '力量成長',
-    intGain: '智力成長',
-    dexGain: '敏捷成長',
-    
-    // 状态恢复
-    happinessRecovery: '快樂恢復',
-    healthRecovery: '健康恢復',
-    
-    // 未实现的加成
-    gameSuccessRate: '小遊戲成功率',
-    sicknessReduction: '生病抗性',
-    resourceGain: '資源獲得',
-    breedingSuccess: '繁殖成功率',
-    dropRate: '掉落率',
-    miniGameBonus: '小遊戲獎勵',
-    badEventReduction: '壞事件減少'
-  }
-  return names[key] || key
-}
-
-// 获取最大健康值
-function getMaxHealth(state) {
-  if (!state) return 100
-  const bonuses = getAllBonuses(state)
-  return 100 + (bonuses.health || 0)
-}
-
-// 顯示狀態（簡潔版）
-function showStatus() {
-  if (!petSystem || !eventSystem || !templeSystem) {
-    console.log('系統尚未初始化')
-    return
-  }
-  
-  const state = petSystem.getState()
-  if (!state) {
-    console.log('狀態尚未載入')
-    return
-  }
-  
-  updatePetState()
-  
-  const buffs = eventSystem.getBuffManager().getActiveBuffs()
-  const currentDeity = templeSystem.getCurrentDeity()
-  const favorStars = templeSystem.getFavorStars(state.currentDeityId)
-  const buffNames = buffs.map(b => b.name)
-  
-  // 檢查神明滿級 Buff
-  if (currentDeity && state.deityFavors?.[state.currentDeityId] >= 100 && currentDeity.maxFavorBuff) {
-    const buff = currentDeity.maxFavorBuff
-    buffNames.push(`*${buff.name}(${buff.description})`)
-  }
-  
-  // 安全獲取數值，避免 undefined
-  const safeNum = (val) => (typeof val === 'number' && !isNaN(val) ? val.toFixed(0) : '0')
-  
-  console.log(` 狀態 | 飢餓:${safeNum(state.hunger)} 快樂:${safeNum(state.happiness)} 健康:${safeNum(state.health)} | 力量:${safeNum(state.str)} 智力:${safeNum(state.int)} 敏捷:${safeNum(state.dex)} 運勢:${safeNum(state.luck)} | ${currentDeity?.name || '未知'}${favorStars} | Buff:${buffNames.length > 0 ? buffNames.join(', ') : '無'}`)
-}
-
-// 啟動遊戲循環
-function start() {
-  if (isRunning.value) {
-    console.log('[WARN] 遊戲循環已在運行中')
-    return
-  }
-  
-  isRunning.value = true
-  // 移除 tick 回調中的自動輸出，只在有事件時才輸出
-  petSystem.startTickLoop(() => {
-    // 更新狀態顯示
-    updatePetState()
-  })
-  
-  eventSystem.startEventCheck()
-
-  // 初始化全局 Debug 工具
-  window.debug = {
-    // 重置祈福次數
-    resetPrayer: async () => {
-      await templeSystem.debugResetDailyPrayer()
-      console.log('[OK] 祈福次數已重置')
-      showStatus()
-    },
-    
-    // 設置好感度
-    setFavor: async (deityId, amount) => {
-      const state = petSystem.getState()
-      await petSystem.updateState({
-        deityFavors: {
-          ...state.deityFavors,
-          [deityId]: amount
-        }
-      })
-      console.log(`[OK] ${deityId} 好感度已設置為 ${amount}`)
-      showStatus()
-    },
-    
-    // 觸發事件
-    triggerEvent: async (eventId) => {
-      await eventSystem.debugTriggerEvent(eventId)
-      showStatus()
-    },
-    
-    // 設置屬性
-    setStat: async (stat, value) => {
-      await petSystem.debugSetStat(stat, value)
-      showStatus()
-    },
-
-    // 幫助
-    help: () => {
-      console.log(`
-[TOOLS] Debug 工具列表:
-- debug.resetPrayer()          重置每日祈福次數
-- debug.setFavor(id, amount)   設置神明好感度 (例如: 'mazu', 99)
-- debug.triggerEvent(id)       觸發事件 (不填 ID 則隨機)
-- debug.setStat(stat, value)   設置屬性 (例如: 'hunger', 100)
-      `)
-    }
-  }
-  
-  console.log('[DEBUG] Debug 工具已就緒，輸入 debug.help() 查看指令')
-  
-  console.log('[OK] 遊戲循環已啟動（靜默模式，只在事件觸發時輸出）')
-}
-
-// 停止遊戲循環
-function stop() {
-  if (!isRunning.value) {
-    console.log('[WARN] 遊戲循環未運行')
-    return
-  }
-  
-  petSystem.stopTickLoop()
-  eventSystem.stopEventCheck()
-  isRunning.value = false
-  
-  console.log('[STOP] 遊戲循環已停止')
-}
-
-// 餵食
-async function feed(amount = 20) {
-  const result = await petSystem.feed(amount)
-  if (result.success) {
-    console.log(`[OK] 餵食 飢餓+${amount} 體重+${(amount * 0.5).toFixed(1)}g | STR+${result.strGain?.toFixed(2)}`)
-    showStatus()
-  } else {
-    console.log(`[ERR] ${result.message}`)
-  }
-}
-
-// 玩耍
-async function play(amount = 15) {
-  const result = await petSystem.play(amount)
-  if (result.success) {
-    const baseAmount = amount
-    const actualGain = result.happinessGain
-    const bonusPercent = actualGain > baseAmount ? `+${((actualGain / baseAmount - 1) * 100).toFixed(0)}%` : ''
-    console.log(`[OK] 玩耍 快樂 ${actualGain.toFixed(1)} ${bonusPercent} | DEX+${result.dexGain.toFixed(2)} INT+${result.intGain.toFixed(2)}`)
-    showStatus()
-  } else {
-    console.log(`[ERR] ${result.message}`)
-  }
-}
-
-// 清理便便
-async function clean() {
-  const result = await petSystem.cleanPoop()
-  if (result.success) {
-    console.log('[OK] 清理便便 +10 快樂')
-    showStatus()
-  } else {
-    console.log(`[ERR] ${result.message}`)
-  }
-}
-
-// 治療
-async function heal(amount = 20) {
-  const result = await petSystem.heal(amount)
-  if (result.success) {
-    const actualHeal = result.healAmount?.toFixed(1) || amount
-    const bonusText = result.healAmount > amount ? ` (+${((result.healAmount / amount - 1) * 100).toFixed(0)}%)` : ''
-    console.log(`[OK] 治療 健康+${actualHeal}${bonusText}${result.cured ? ' (已治癒)' : ''}`)
-    showStatus()
-  } else {
-    console.log(`[ERR] ${result.message}`)
-  }
-}
-
-// 睡覺/起床
-async function sleep() {
-  const result = await petSystem.toggleSleep()
-  if (result.success) {
-    if (result.message) {
-      console.log(`[OK] ${result.message}`)
-    } else {
-      console.log(`[OK] ${result.isSleeping ? '已入睡' : '已醒來'}`)
-    }
-    showStatus()
-  } else {
-    console.log(`[ERR] ${result.message}`)
-  }
-}
-
-// 觸發事件
-async function triggerEvent(eventId) {
-  const result = await eventSystem.triggerEvent(eventId)
-  if (result) {
-    console.log(`[OK] 事件 ${eventId} 觸發`)
-    showStatus()
-  } else {
-    console.log(`[ERR] 事件 ${eventId} 條件不滿足`)
-  }
-}
-
-// 查看事件列表
-async function listEvents() {
-  const events = await apiService.getEvents()
-  console.log('\n[LIST] 可用事件列表 (共 ' + events.length + ' 個):')
-  console.log('='.repeat(60))
-  
-  // 按類型分組
-  const grouped = {
-    good: events.filter(e => e.type === 'good'),
-    bad: events.filter(e => e.type === 'bad'),
-    weird: events.filter(e => e.type === 'weird'),
-    rare: events.filter(e => e.type === 'rare')
-  }
-  
-  for (const [type, list] of Object.entries(grouped)) {
-    if (list.length === 0) continue
-    
-    const typeEmoji = {
-      good: '*',
-      bad: '💀',
-      weird: '👻',
-      rare: '🌟'
-    }
-    
-    console.log(`\n${typeEmoji[type]} ${type.toUpperCase()} 事件 (${list.length}個):`)
-    list.forEach(e => {
-      const effectsDesc = e.effects.map(eff => {
-        if (eff.type === 'modifyStats') {
-          const stats = Object.entries(eff.payload)
-            .map(([k, v]) => `${k}${v > 0 ? '+' : ''}${v}`)
-            .join(', ')
-          return stats
-        }
-        return eff.type
-      }).join(' | ')
-      
-      console.log(`  ${e.id}`)
-      console.log(`    效果: ${effectsDesc}`)
-      console.log(`    測試: triggerEvent('${e.id}')`)
-    })
-  }
-  
-  console.log('\n' + '='.repeat(60))
-  console.log('[TIP] 快速測試所有事件: testAllEvents()')
-  console.log('='.repeat(60) + '\n')
-}
-
-// 查看事件歷史
-function eventHistory() {
-  const history = eventSystem.getHistory()
-  console.log('\n[HISTORY] 事件歷史:')
-  console.log('='.repeat(50))
-  if (history.length === 0) {
-    console.log('  (無)')
-  } else {
-    history.forEach((h, i) => {
-      const time = new Date(h.timestamp).toLocaleTimeString()
-      console.log(`${i + 1}. [${time}] ${h.eventId} (${h.eventType})`)
-    })
-  }
-  console.log('='.repeat(50) + '\n')
-}
-
-// 祈福
-async function pray() {
-  const result = await templeSystem.pray()
-  if (result.success) {
-    let message = `[OK] 祈福 +${result.favorIncrease} 好感 → ${result.newFavor}/100 | ${result.dialogue}`
-    
-    // 等级提升提示
-    if (result.levelUp) {
-      message += `\n🌟 好感度等級提升！Lv.${result.oldLevel} → Lv.${result.newLevel}`
-      if (result.deity.favorLevelBuffs) {
-        const buffs = Object.entries(result.deity.favorLevelBuffs.buffsPerLevel)
-          .map(([key, value]) => `${key.toUpperCase()}+${value}`)
-          .join(', ')
-        message += ` (${buffs})`
-      }
-    }
-    
-    // 滿級特殊 Buff 提示
-    if (result.reachedMax && result.deity.maxFavorBuff) {
-      message += `\n** 滿級祝福！獲得特殊 Buff: ${result.deity.maxFavorBuff.name}`
-      message += `\n   ${result.deity.maxFavorBuff.description}`
-    }
-    
-    console.log(message)
-    showStatus()
-  } else {
-    console.log(`[ERR] ${result.message}`)
-  }
-}
-
-// 切換神明
-async function switchDeity(deityId) {
-  const result = await templeSystem.switchDeity(deityId)
-  if (result.success) {
-    console.log(`[OK] 已切換到 ${result.deity.name}`)
-  } else {
-    console.log(`[ERR] ${result.message}`)
-  }
-  showStatus()
-}
-
-// 擲筊
-async function handleThrowJiaobei() {
-  const result = await templeSystem.throwJiaobei()
-  
-  if (result.success) {
-    const resultSymbols = {
-      holy: '⚪⚫',      // 一正一反 - 聖筊
-      laughing: '⚪⚪',  // 兩個正面 - 笑筊
-      negative: '⚫⚫'   // 兩個反面 - 陰筊
-    }
-    
-    const resultNames = {
-      holy: '聖筊',
-      laughing: '笑筊',
-      negative: '陰筊'
-    }
-    
-    console.log('\n[JIAOBEI] 擲筊結果:')
-    console.log('='.repeat(50))
-    console.log(`神明: ${result.deity}`)
-    console.log(`結果: ${resultSymbols[result.result]} ${resultNames[result.result]}`)
-    console.log(`訊息: ${result.message}`)
-    console.log(`\n概率:`)
-    console.log(`  聖筊: ${(result.probabilities.holy * 100).toFixed(1)}%`)
-    console.log(`  笑筊: ${(result.probabilities.laughing * 100).toFixed(1)}%`)
-    console.log(`  陰筊: ${(result.probabilities.negative * 100).toFixed(1)}%`)
-    console.log('='.repeat(50) + '\n')
-  }
-  
-  showStatus()
-}
-
-// 全局变量存储当前抽中的签
-let currentLotData = null
-
-// 求籤
-async function handleDrawLot() {
-  const result = await templeSystem.drawLot('guanyin_100')
-  
-  if (!result.success) {
-    console.log(`[ERR] ${result.message}`)
-    return
-  }
-  
-  if (result.needVerification) {
-    currentLotData = result
-    
-    console.log('\n[LOT] 求籤結果:')
-    console.log('='.repeat(50))
-    console.log(`${result.lot.no} (${result.lot.grade})`)
-    console.log(`神明: ${result.deity}`)
-    console.log(`\n⚠️  需要三聖筊驗證才能解籤`)
-    console.log(`目前: ${result.verificationCount}/${result.requiredHoly} 聖筊`)
-    console.log('\n請使用 verify() 命令擲筊驗證')
-    console.log('='.repeat(50) + '\n')
-  }
-}
-
-// 驗證籤詩（擲筊確認）
-async function handleVerifyLot() {
-  if (!currentLotData) {
-    console.log('[ERR] 請先求籤 (使用 [LOT] 求籤 按鈕)')
-    return
-  }
-  
-  const verifyResult = await templeSystem.verifyLot(currentLotData)
-  
-  console.log('\n[VERIFY] 擲筊驗證:')
-  console.log('='.repeat(50))
-  console.log(`結果: ${verifyResult.jiaobeiResult.result === 'holy' ? '⚪⚫ 聖筊' : 
-                     verifyResult.jiaobeiResult.result === 'laughing' ? '⚪⚪ 笑筊' : '⚫⚫ 陰筊'}`)
-  console.log(`訊息: ${verifyResult.message}`)
-  
-  if (verifyResult.verified) {
-    // 三聖筊！可以解籤
-    const lot = currentLotData.lot
-    console.log('\n' + '🎉'.repeat(20))
-    console.log(`\n【${lot.no}】${lot.grade}`)
-    console.log('\n【籤詩】')
-    console.log(lot.poem1)
-    console.log('\n【解曰】')
-    console.log(lot.meaning)
-    console.log('\n【解籤】')
-    console.log(lot.explanation)
-    console.log('\n【問神】')
-    console.log(lot.oracle)
-    if (lot.story) {
-      console.log('\n【典故】')
-      console.log(lot.story)
-    }
-    console.log('\n' + '='.repeat(50) + '\n')
-    
-    // 清除當前籤
-    currentLotData = null
-  } else if (verifyResult.needMore) {
-    // 需要更多聖筊
-    currentLotData.verificationCount = verifyResult.verificationCount
-    console.log(`\n✓ 進度: ${verifyResult.verificationCount}/${verifyResult.requiredHoly} 聖筊`)
-    console.log('請繼續使用 verify() 擲筊驗證')
-    console.log('='.repeat(50) + '\n')
-  } else if (verifyResult.needRedraw) {
-    // 笑筊或陰筊，需要重抽
-    console.log('\n✗ 需要重新求籤')
-    console.log('='.repeat(50) + '\n')
-    currentLotData = null
-  }
-}
-
-// 查看神明列表
-function listDeities() {
-  const deities = templeSystem.getDeities()
-  console.log('\n[PRAY] 神明列表:')
-  console.log('='.repeat(50))
-  deities.forEach(d => {
-    const state = petSystem.getState()
-    const favor = state.deityFavors[d.id] || 0
-    const stars = templeSystem.getFavorStars(d.id)
-    console.log(`\n${d.id}: ${d.name}`)
-    console.log(`  個性: ${d.personality}`)
-    console.log(`  好感: ${stars} (${favor}/100)`)
-    console.log(`  加成: ${d.buffDescriptions.join(', ')}`)
-  })
-  console.log('='.repeat(50) + '\n')
-}
-
-// 抽籤（簡化版，兼容舊 API）
-async function drawFortune() {
-  // 使用 drawLot 作為實現
-  const result = await handleDrawLot()
-  return result
-}
-
-// 應用 Buff
-async function applyBuffs() {
-  await eventSystem.applyBuffs()
-  eventSystem.getBuffManager().tick()
-  console.log('[OK] Buff 已更新')
-  showStatus()
-}
-
-// 確認名字並初始化
-async function confirmName() {
-  if (!inputPetName.value || inputPetName.value.trim().length === 0) {
-    return
-  }
-  
-  showNameInput.value = false
-  const name = inputPetName.value.trim()
-  
-  await init(name)
-}
-
-// 初始化系統
-async function init(petName = null) {
-  // 先創建成就系統
-  achievementSystem = new AchievementSystem(null, null, null, apiService)
-  
-  // 先創建背包系統（因為其他系統可能需要它）
-  inventorySystem = new InventorySystem(null, null, apiService)
-  
-  // 創建其他系統，並傳入成就系統和背包系統
-  petSystem = new PetSystem(apiService, achievementSystem, inventorySystem)
-  eventSystem = new EventSystem(petSystem, apiService, achievementSystem, inventorySystem)
-  templeSystem = new TempleSystem(petSystem, apiService, achievementSystem)
-  adventureSystem = new AdventureSystem(petSystem, inventorySystem, apiService)
-  
-  // 更新成就系統的引用
-  achievementSystem.petSystem = petSystem
-  achievementSystem.eventSystem = eventSystem
-  achievementSystem.templeSystem = templeSystem
-  
-  // 更新背包系統的引用
-  inventorySystem.petSystem = petSystem
-  inventorySystem.eventSystem = eventSystem
-  
-  try {
-    await petSystem.initialize('tinyTigerCat')
-    // 如果有提供名字，更新寵物名字
-    if (petName) {
-      await petSystem.updateState({ name: petName })
-    }
-    await eventSystem.initialize()
-    await templeSystem.initialize()
-    await achievementSystem.initialize() // 這會重新應用已解鎖成就的加成
-    await inventorySystem.initialize() // 初始化背包系統，會重新應用裝備效果
-    
-    // 設置神明籤詩類型
-    if (templeSystem) {
-      const currentDeity = templeSystem.getCurrentDeity()
-      deityLotTypes.value = currentDeity?.lotTypes || ['guanyin_100']
-      selectedLotType.value = deityLotTypes.value[0]
-    }
-    
-    // 重新計算戰鬥數值（確保成就加成已應用）
-    petSystem.calculateCombatStats()
-    
-    // 初始化道具類型名稱和稀有度映射（提前載入）
-    try {
-      const { ITEM_TYPES, ITEM_RARITY } = await import('../data/items.js')
-      for (const [type, typeData] of Object.entries(ITEM_TYPES)) {
-        itemTypeNames.value[type] = typeData.name
-      }
-      for (const [rarity, rarityData] of Object.entries(ITEM_RARITY)) {
-        itemRarity.value[rarity] = rarityData
-      }
-    } catch (error) {
-      console.warn('[App] 載入道具類型失敗:', error)
-    }
-    
-    // 初始檢查成就
-    await achievementSystem.checkAndUnlockAchievements()
-    
-    // 更新成就列表
-    await updateAchievementList()
-    
-    // 更新背包列表
-    await updateInventoryList()
-    
-    updatePetState()
-    isReady.value = true
-    systemStatus.value = '[OK] 系統已就緒'
-    
-    console.log('[OK] 系統已初始化')
-    console.log('[SWITCH] 自動啟動遊戲循環...')
-    
-    // 自動啟動遊戲循環
-    start()
-    
-    // 定期更新成就列表（每 5 秒）
-    setInterval(async () => {
-      if (achievementSystem) {
-        await achievementSystem.checkAndUnlockAchievements()
-        await updateAchievementList()
-      }
-      // 更新背包列表
-      if (inventorySystem) {
-        await updateInventoryList()
-      }
-    }, 5000)
-    
-    showStatus()
-  } catch (error) {
-    // 如果沒有名字，顯示輸入對話框
-    if (error.message && error.message.includes('名字')) {
-      showNameInput.value = true
-      systemStatus.value = '請為寵物命名'
-    } else {
-      systemStatus.value = '[ERR] 初始化失敗: ' + error.message
-      console.error('[初始化錯誤] 完整錯誤:', error)
-      console.error('[初始化錯誤] 堆棧:', error.stack)
-      // 嘗試清除可能損壞的數據並重試
-      if (confirm('初始化失敗，是否清除所有數據並重新開始？')) {
-        localStorage.clear()
-        location.reload()
-      }
-    }
-  }
-  
-  return { petSystem, eventSystem, templeSystem }
-}
-
-// 按鈕處理函數
-async function handleFeed() {
-  await feed(20)
-  updatePetState()
-}
-
-async function handlePlay(gameType = 'normal') {
-  const result = await play({ amount: 15, gameType })
-  if (result && result.success) {
-    console.log(`${result.gameType} 體重變化: ${result.weightChange > 0 ? '+' : ''}${result.weightChange}g`)
-  }
-  updatePetState()
-}
-
-async function handleClean() {
-  await clean()
-  updatePetState()
-}
-
-async function handleHeal() {
-  await heal(20)
-  updatePetState()
-}
-
-async function handleSleep() {
-  await sleep()
-  updatePetState()
-}
-
-function handleShowStatus() {
-  showStatus()
-}
-
-function handleCheckEvolution() {
-  if (window.checkEvolution) {
-    window.checkEvolution()
-  }
-}
-
-function handleTestAllEvents() {
-  if (window.testAllEvents) {
-    window.testAllEvents()
-  }
-}
-
-function handleStart() {
-  start()
-}
-
-function handleStop() {
-  stop()
-}
-
-async function handleListEvents() {
-  await listEvents()
-}
-
-function handleEventHistory() {
-  eventHistory()
-}
-
-async function handleTriggerEvent(eventId) {
-  await triggerEvent(eventId)
-  updatePetState()
-}
-
-async function handlePray() {
-  await pray()
-  updatePetState()
-}
-
-
-function handleListDeities() {
-  listDeities()
-}
-
-async function handleSwitchDeity(deityId) {
-  await switchDeity(deityId)
-  updatePetState()
-}
-
-// 刪除寵物
-async function handleDeletePet() {
-  if (!confirm('確定要刪除當前寵物嗎？此操作無法復原！')) {
-    return
-  }
-  
-  try {
-    // 停止遊戲循環
-    if (isRunning.value) {
-      stop()
-    }
-    
-    // 刪除寵物
-    const result = await petSystem.deletePet()
-    
-    if (result.success) {
-      console.log('[OK] ' + result.message)
-      
-      // 重置所有狀態
-      petState.value = null
-      isReady.value = false
-      isRunning.value = false
-      systemStatus.value = '寵物已刪除，請重新建立'
-      
-      // 清除事件系統歷史
-      if (eventSystem) {
-        eventSystem.eventHistory = []
-        eventSystem.getBuffManager().buffs = []
-      }
-      
-      // 重置背包系統（清空道具和裝備）
-      if (inventorySystem) {
-        await inventorySystem.resetInventory()
-        await updateInventoryList()
-        console.log('[OK] 背包已重置')
-      }
-      
-      // 重置成就系統
-      if (achievementSystem) {
-        await achievementSystem.reset()
-        await updateAchievementList()
-        console.log('[OK] 成就已重置')
-      }
-      
-      // 顯示名字輸入對話框
-      inputPetName.value = ''
-      showNameInput.value = true
-    } else {
-      console.log('[ERR] 刪除失敗')
-    }
-  } catch (error) {
-    console.error('刪除寵物時發生錯誤:', error)
-    alert('刪除寵物時發生錯誤，請重試')
-  }
-}
-
-// 幫助
-function help() {
-  console.log('\n' + '='.repeat(50))
-  console.log('📖 可用命令列表')
-  console.log('='.repeat(50))
-  console.log('\n[PLAY] 遊戲控制:')
-  console.log('  start()           - 啟動遊戲循環')
-  console.log('  stop()            - 停止遊戲循環')
-  console.log('  showStatus()      - 顯示當前狀態')
-  console.log('\n 寵物互動:')
-  console.log('  feed(amount)      - 餵食（預設 +20）')
-  console.log('  play(amount)      - 玩耍（預設 +15）')
-  console.log('  clean()           - 清理便便')
-  console.log('  heal(amount)      - 治療（預設 +20）')
-  console.log('  sleep()           - 睡覺/起床')
-  console.log('\n[ROLL] 事件系統:')
-  console.log('  triggerEvent(id)  - 手動觸發事件')
-  console.log('  listEvents()      - 查看所有事件')
-  console.log('  eventHistory()    - 查看事件歷史')
-  console.log('  applyBuffs()      - 手動應用 Buff')
-  console.log('\n[PRAY] 神明系統:')
-  console.log('  pray()            - 祈福（每日 3 次）')
-  console.log('  drawFortune()     - 抽籤')
-  console.log('  switchDeity(id)   - 切換神明')
-  console.log('  listDeities()     - 查看神明列表')
-  console.log('\n[TIP] 提示:')
-  console.log('  - 所有數值操作都會同步到 API（mock 模式使用 localStorage）')
-  console.log('  - 事件每 10 秒自動檢查（10% 機率觸發）')
-  console.log('  - 遊戲循環每 3 秒執行一次 tick')
-  console.log('  - 輸入 help() 再次查看此列表')
-  console.log('='.repeat(50) + '\n')
-}
-
-// 測試加成系統
-function testBonuses() {
-  if (!petSystem || !petState.value) {
-    console.log('[ERR] 系統尚未初始化')
-    return
-  }
-  
-  console.log('\n' + '='.repeat(60))
-  console.log('[CHECK] 加成系統測試報告')
-  console.log('='.repeat(60))
-  
-  const state = petSystem.getState()
-  
-  // 1. 命格信息
-  console.log('\n[HISTORY] 命格信息:')
-  if (state.destiny) {
-    console.log(`   名稱: ${state.destiny.name}`)
-    console.log(`   描述: ${state.destiny.description}`)
-    console.log(`   加成:`, state.destiny.buffs)
-  } else {
-    console.log('   [ERR] 未分配命格')
-  }
-  
-  // 1.5 神明信息
-  console.log('\n[PRAY] 當前神明:')
-  if (templeSystem) {
-    const deity = templeSystem.getCurrentDeity()
-    if (deity) {
-      console.log(`   名稱: ${deity.name}`)
-      console.log(`   加成:`, deity.buffs)
-    }
-  }
-  
-  // 2. 所有加成（合計）
-  const bonuses = petSystem.getAllBonuses()
-  console.log('\n💫 總加成（命格+神明）:')
-  if (Object.keys(bonuses).length === 0) {
-    console.log('   無')
-  } else {
-    for (const [key, value] of Object.entries(bonuses)) {
-      const sign = value > 0 ? '+' : ''
-      const percent = (value * 100).toFixed(0)
-      console.log(`   ${key}: ${sign}${percent}%`)
-    }
-  }
-  
-  // 3. 當前屬性
-  console.log('\n[STATUS] 當前屬性:')
-  console.log(`   STR: ${state.str.toFixed(1)} | INT: ${state.int.toFixed(1)} | DEX: ${state.dex.toFixed(1)}`)
-  console.log(`   攻擊: ${state.attack?.toFixed(1)} | 防禦: ${state.defense?.toFixed(1)} | 速度: ${state.speed?.toFixed(1)}`)
-  
-  // 4. 計算示例
-  console.log('\n[TEST] 計算示例:')
-  const strGainBase = 0.5
-  const strGainWithBonus = strGainBase * (1 + (bonuses.strGain || 0))
-  console.log(`   餵食時 STR 增長: ${strGainBase} → ${strGainWithBonus.toFixed(2)} (${bonuses.strGain ? '+' + (bonuses.strGain * 100).toFixed(0) + '%' : '無加成'})`)
-  
-  const intGainBase = 0.2
-  const intGainWithBonus = intGainBase * (1 + (bonuses.intGain || 0))
-  console.log(`   玩耍時 INT 增長: ${intGainBase} → ${intGainWithBonus.toFixed(2)} (${bonuses.intGain ? '+' + (bonuses.intGain * 100).toFixed(0) + '%' : '無加成'})`)
-  
-  const happinessGainBase = 15
-  const happinessGainWithBonus = happinessGainBase * (1 + (bonuses.happinessRecovery || 0))
-  console.log(`   玩耍時快樂恢復: ${happinessGainBase} → ${happinessGainWithBonus.toFixed(1)} (${bonuses.happinessRecovery ? '+' + (bonuses.happinessRecovery * 100).toFixed(0) + '%' : '無加成'})`)
-  
-  console.log('\n' + '='.repeat(60))
-  console.log('[TIP] 提示: 執行 feed() 或 play() 來驗證實際效果')
-
-}
-
-// 掛載到 window
-// Debug UI 狀態
-const showDebug = ref(false)
-const debugAchievementId = ref('')
-
-// 成就相關響應式數據
-const allAchievements = ref([])
-const unlockedAchievementsCount = ref(0)
-const totalAchievementsCount = ref(0)
-const achievementProgress = ref(0)
-
-// 背包相關響應式數據
-const inventoryItems = ref({})
-const inventoryItemCount = ref(0)
-const equipmentSlots = ref({
-  weapon: { name: '武器', icon: '⚔️' },
-  armor: { name: '防具', icon: '🛡️' },
-  hat: { name: '帽子', icon: '🎩' },
-  accessory: { name: '飾品', icon: '💍' },
-  talisman: { name: '護身符', icon: '🔮' },
-  special: { name: '特殊', icon: '⭐' }
-})
-const itemTypeNames = ref({})
-const itemRarity = ref({})
-const deleteCounts = ref({}) // 每個道具的刪除數量
-
-// Debug 方法
-const debugResetPrayer = async () => {
-  await window.debug.resetPrayer()
-}
-
-const debugAddFavor = async (amount) => {
-  const state = petSystem.getState()
-  const currentFavor = state.deityFavors?.[state.currentDeityId] || 0
-  await window.debug.setFavor(state.currentDeityId, Math.min(100, currentFavor + amount))
-}
-
-const debugTriggerEvent = async () => {
-  await window.debug.triggerEvent()
-}
-
-const debugFillStats = async () => {
-  await window.debug.setStat('hunger', 100)
-  await window.debug.setStat('happiness', 100)
-}
-
-const debugMaxAttributes = async () => {
-  await window.debug.setStat('str', 100)
-  await window.debug.setStat('int', 100)
-  await window.debug.setStat('dex', 100)
-}
-
-const debugKill = async () => {
-  await window.debug.setStat('health', 0)
-}
-
-const debugAddPoop = async () => {
-  await window.debug.setStat('poopCount', 4)
-}
-
-// 成就相關函數
-function isAchievementUnlocked(achievementId) {
-  if (!achievementSystem) return false
-  return achievementSystem.unlockedAchievements.includes(achievementId)
-}
-
-function getAchievementProgressPercent(achievement) {
-  if (!achievementSystem) return 0
-  const progress = achievementSystem.getAchievementProgress(achievement)
-  return progress.progress || 0
-}
-
-function getAchievementProgressText(achievement) {
-  if (!achievementSystem) return '0%'
-  const progress = achievementSystem.getAchievementProgress(achievement)
-  if (progress.current !== undefined && progress.target !== undefined) {
-    return `${progress.current}/${progress.target} (${Math.round(progress.progress)}%)`
-  }
-  return `${Math.round(progress.progress)}%`
-}
-
-function formatBonusValue(value) {
-  if (typeof value === 'number' && value < 1 && value > 0) {
-    return ` +${(value * 100).toFixed(0)}%`
-  }
-  return value > 0 ? ` +${value}` : ` ${value}`
-}
-
-async function updateAchievementList() {
-  if (!achievementSystem) return
-  
-  const { ACHIEVEMENTS } = await import('../data/achievements.js')
-  allAchievements.value = ACHIEVEMENTS
-  totalAchievementsCount.value = ACHIEVEMENTS.length
-  unlockedAchievementsCount.value = achievementSystem.unlockedAchievements.length
-  achievementProgress.value = totalAchievementsCount.value > 0 
-    ? Math.round((unlockedAchievementsCount.value / totalAchievementsCount.value) * 100)
-    : 0
-}
-
-// 更新背包列表（過濾掉已裝備的道具）
-async function updateInventoryList() {
-  if (!inventorySystem) return
-  
-  const inventory = inventorySystem.getInventory()
-  const equipped = inventorySystem.getEquipped()
-  const items = {}
-  
-  const { ITEMS, ITEM_TYPES, ITEM_RARITY } = await import('../data/items.js')
-  
-  // 更新道具類型名稱映射（只在第一次或需要時更新）
-  if (Object.keys(itemTypeNames.value).length === 0) {
-    for (const [type, typeData] of Object.entries(ITEM_TYPES)) {
-      itemTypeNames.value[type] = typeData.name
-    }
-  }
-  
-  // 更新稀有度映射（只在第一次或需要時更新）
-  if (Object.keys(itemRarity.value).length === 0) {
-    for (const [rarity, rarityData] of Object.entries(ITEM_RARITY)) {
-      itemRarity.value[rarity] = rarityData
-    }
-  }
-  
-  // 收集所有已裝備的道具 ID（用於過濾）
-  const equippedItemIds = new Set()
-  for (const [slot, slotData] of Object.entries(equipped)) {
-    if (slotData && typeof slotData === 'object') {
-      if (slotData.equipment) {
-        const eqItemId = typeof slotData.equipment === 'string' ? slotData.equipment : slotData.equipment.itemId
-        if (eqItemId) {
-          // 計算已裝備的實例數量
-          const instanceId = typeof slotData.equipment === 'object' ? slotData.equipment.instanceId : null
-          if (instanceId) {
-            equippedItemIds.add(`${eqItemId}_${instanceId}`)
-          } else {
-            equippedItemIds.add(eqItemId)
-          }
-        }
-      }
-      if (slotData.appearance) {
-        const apItemId = typeof slotData.appearance === 'string' ? slotData.appearance : slotData.appearance.itemId
-        if (apItemId) {
-          const instanceId = typeof slotData.appearance === 'object' ? slotData.appearance.instanceId : null
-          if (instanceId) {
-            equippedItemIds.add(`${apItemId}_${instanceId}`)
-          } else {
-            equippedItemIds.add(apItemId)
-          }
-        }
-      }
-    }
-  }
-  
-  // 從 inventorySystem 獲取道具數據（已從 API 載入）
-  const itemsData = inventorySystem.items || {}
-  
-  for (const [itemId, data] of Object.entries(inventory)) {
-    // 優先使用 API 載入的道具數據
-    let item = itemsData[itemId] || ITEMS[itemId]
-    
-    if (item) {
-      // 如果道具沒有 dropRate，使用稀有度的默認掉落率
-      if (item.dropRate === undefined && item.rarity) {
-        const rarityData = ITEM_RARITY[item.rarity]
-        if (rarityData) {
-          item = { ...item, dropRate: rarityData.dropRate }
-        }
-      }
-      
-      // 只有消耗品可以堆疊，裝備類每件分開顯示
-      if (item.type === 'consumable') {
-        // 消耗品：顯示堆疊數量
-        items[itemId] = {
-          item,
-          count: data.count,
-          totalCount: data.count,
-          equippedCount: 0,
-          isStackable: true
-        }
-      } else {
-        // 裝備類：每件分開顯示（包括已裝備的）
-        if (data.items && data.items.length > 0) {
-          // 為每個實例創建一個條目（不過濾已裝備的）
-          for (const instance of data.items) {
-            const instanceKey = `${itemId}_${instance.id}`
-            // 使用實例ID作為key，這樣每件裝備都會單獨顯示
-            const instanceItemId = `${itemId}_${instance.id}`
-            const isEquipped = equippedItemIds.has(instanceKey)
-            items[instanceItemId] = {
-              item,
-              count: 1,
-              totalCount: 1,
-              equippedCount: isEquipped ? 1 : 0,
-              isStackable: false,
-              instanceId: instance.id,
-              instance: instance, // 保存實例數據用於顯示耐久度等
-              originalItemId: itemId, // 保存原始 itemId 用於操作
-              isEquipped: isEquipped // 標記是否已裝備
-            }
-          }
-        }
-      }
-    }
-  }
-  
-  inventoryItems.value = items
-  inventoryItemCount.value = Object.keys(items).length
-  
-  // 初始化刪除數量（如果還沒有設置）
-  for (const itemId of Object.keys(items)) {
-    if (deleteCounts.value[itemId] === undefined) {
-      deleteCounts.value[itemId] = 1
-    }
-  }
-  
-  // 清理已不存在的道具的刪除數量
-  for (const itemId of Object.keys(deleteCounts.value)) {
-    if (!items[itemId]) {
-      delete deleteCounts.value[itemId]
-    }
-  }
-}
-
-// 獲取道具類型名稱（備用函數）
-function getItemTypeName(type) {
-  return itemTypeNames.value[type] || type
-}
-
-// 獲取稀有度名稱
-function getRarityName(rarity) {
-  return itemRarity.value[rarity]?.name || rarity || '普通'
-}
-
-// 獲取稀有度顏色
-function getRarityColor(rarity) {
-  return itemRarity.value[rarity]?.color || '#9d9d9d'
-}
-
-// 獲取稀有度 CSS 類
-function getRarityClass(rarity) {
-  return `rarity-${rarity || 'common'}`
-}
-
-// 獲取道具掉落率（如果道具沒有指定，使用稀有度的默認值）
-function getItemDropRate(item) {
-  if (item.dropRate !== undefined) {
-    return (item.dropRate * 100).toFixed(0)
-  }
-  // 如果沒有指定掉落率，使用稀有度的默認值
-  if (item.rarity && itemRarity.value[item.rarity]) {
-    return (itemRarity.value[item.rarity].dropRate * 100).toFixed(0)
-  }
-  return '0'
-}
-
-// Tooltip 相關
-const itemTooltip = ref(false)
-const tooltipContent = ref(null)
-const tooltipPosition = ref({ x: 0, y: 0 })
-
-// 冒險系統狀態
-const showAdventurePanel = ref(false)
-const adventures = ref([])
-const currentAdventure = ref(null)
-const adventureLogs = ref([])
-const adventureResult = ref(null)
-const showAdventureResult = ref(false)
-
-// 商店系統狀態
-const showShopPanel = ref(false)
-const shopItems = ref([])
-const selectedCategory = ref('all')
-const shopMode = ref('buy') // 'buy' 或 'sell'
-
-// 系統狀態
-// const isReady = ref(false) // 已在上方聲明
-
-// 計算當前表情（根據寵物狀態）
-const currentEmotion = computed(() => {
-  if (!petState.value) return { emoji: '🥚', name: 'egg', animation: '' }
-  
-  const state = petState.value
-  
-  // 優先級從高到低
-  if (state.isDead || state.dyingSeconds > 0) {
-    return { emoji: '💀', name: 'dying', animation: 'shake' }
-  }
-  if (state.isSick) {
-    return { emoji: '🤢', name: 'sick', animation: 'wiggle' }
-  }
-  if (state.isSleeping) {
-    return { emoji: '😴', name: 'sleeping', animation: 'float' }
-  }
-  if (state.hunger < 30) {
-    return { emoji: '😋', name: 'hungry', animation: 'bounce' }
-  }
-  if (state.happiness < 30) {
-    return { emoji: '😢', name: 'sad', animation: '' }
-  }
-  if (state.happiness > 70 && state.health > 50) {
-    return { emoji: '😊', name: 'happy', animation: 'bounce' }
-  }
-  
-  // 默認普通狀態
-  return { emoji: '😐', name: 'normal', animation: '' }
-})
-
-function showItemTooltip(event, item, itemId, instance = null) {
-  if (!item) return
-  
-  const tooltip = {
-    name: item.name,
-    icon: item.icon || '📦',
-    type: itemTypeNames.value[item.type] || item.type,
-    rarity: getRarityName(item.rarity),
-    rarityColor: getRarityColor(item.rarity),
-    description: item.description,
-    effects: [],
-    durability: null,
-    dropRate: getItemDropRate(item)
-  }
-  
-  // 收集效果
-  if (item.effects) {
-    if (item.effects.flat) {
-      for (const [key, value] of Object.entries(item.effects.flat)) {
-        tooltip.effects.push({
-          type: 'flat',
-          stat: getStatName(key),
-          value: formatStatValue(value)
-        })
-      }
-    }
-    if (item.effects.percent) {
-      for (const [key, value] of Object.entries(item.effects.percent)) {
-        tooltip.effects.push({
-          type: 'percent',
-          stat: getStatName(key),
-          value: formatPercentValue(value)
-        })
-      }
-    }
-  }
-  
-  // 耐久度（如果有實例數據）
-  if (instance && instance.durability !== undefined && instance.durability !== Infinity) {
-    tooltip.durability = {
-      current: instance.durability,
-      max: instance.maxDurability || item.maxDurability
-    }
-  } else if (item.durability !== Infinity && item.maxDurability) {
-    tooltip.durability = {
-      current: item.durability,
-      max: item.maxDurability
-    }
-  }
-  
-  tooltipContent.value = tooltip
-  tooltipPosition.value = {
-    x: event.clientX + 15,
-    y: event.clientY + 15
-  }
-  itemTooltip.value = true
-}
-
-function hideItemTooltip() {
-  itemTooltip.value = false
-  tooltipContent.value = null
-}
-
-// 顯示裝備槽位的 tooltip
-function showEquipmentTooltip(event, slot, type) {
-  if (!inventorySystem) return
-  
-  const itemId = getEquippedItemId(slot, type)
-  if (!itemId) return
-  
-  const item = inventorySystem.items[itemId]
-  if (!item) return
-  
-  // 獲取裝備實例數據（用於顯示耐久度）
-  const equipped = inventorySystem.getEquipped()
-  const slotData = equipped[slot]
-  let instance = null
-  
-  if (slotData && slotData[type] && typeof slotData[type] === 'object') {
-    const instanceId = slotData[type].instanceId
-    if (instanceId) {
-      const inventory = inventorySystem.getInventory()
-      const itemData = inventory[itemId]
-      if (itemData && itemData.items) {
-        instance = itemData.items.find(i => i.id === instanceId)
-      }
-    }
-  }
-  
-  // 使用現有的 showItemTooltip 函數邏輯
-  showItemTooltip(event, item, itemId, instance)
-}
-
-// 獲取屬性名稱（用於顯示效果）
-function getStatName(key) {
-  const names = {
-    // 基礎屬性
-    str: '力量',
-    int: '智力',
-    dex: '敏捷',
-    luck: '運勢',
-    health: '最大健康',
-    attack: '攻擊',
-    defense: '防禦',
-    speed: '速度',
-    hp: 'HP',
-    // 狀態
-    hunger: '飢餓',
-    happiness: '快樂',
-    // 成長
-    strGain: '力量成長',
-    intGain: '智力成長',
-    dexGain: '敏捷成長',
-    // 恢復
-    happinessRecovery: '快樂恢復',
-    healthRecovery: '健康恢復',
-    // 其他
-    dropRate: '掉落率',
-    sicknessReduction: '生病抗性'
-  }
-  return names[key] || key
-}
-
-// 格式化數值（固定值）
-function formatStatValue(value) {
-  if (value > 0) {
-    return ` +${value}`
-  } else if (value < 0) {
-    return ` ${value}`
-  }
-  return ''
-}
-
-// 格式化百分比值
-function formatPercentValue(value) {
-  if (typeof value === 'number') {
-    const percent = (value * 100).toFixed(0)
-    if (value > 0) {
-      return ` +${percent}%`
-    } else if (value < 0) {
-      return ` ${percent}%`
-    }
-  }
-  return ''
-}
-
-// 獲取裝備的道具 ID（支持新雙槽位結構）
-function getEquippedItemId(slot, type = 'equipment') {
-  if (!inventorySystem) return null
-  const equipped = inventorySystem.getEquipped()
-  const slotData = equipped[slot]
-  if (!slotData) return null
-  
-  // 兼容舊格式
-  if (typeof slotData === 'string' || (typeof slotData === 'object' && slotData.itemId)) {
-    return typeof slotData === 'string' ? slotData : slotData.itemId
-  }
-  
-  // 新格式：雙槽位
-  const equippedData = slotData[type]
-  if (!equippedData) return null
-  return typeof equippedData === 'string' ? equippedData : equippedData.itemId
-}
-
-// 獲取裝備的道具圖標
-function getEquippedItemIcon(slot, type = 'equipment') {
-  if (!inventorySystem) return '📦'
-  const itemId = getEquippedItemId(slot, type)
-  if (!itemId) return '📦'
-  
-  // 直接從 inventorySystem.items 中查找（裝備後的道具可能不在 inventoryItems 中）
-  const item = inventorySystem.items[itemId]
-  return item?.icon || '📦'
-}
-
-// 獲取裝備的道具名稱
-function getEquippedItemName(slot, type = 'equipment') {
-  if (!inventorySystem) return ''
-  const itemId = getEquippedItemId(slot, type)
-  if (!itemId) return ''
-  
-  // 直接從 inventorySystem.items 中查找（裝備後的道具可能不在 inventoryItems 中）
-  const item = inventorySystem.items[itemId]
-  return item?.name || ''
-}
-
-// 檢查槽位是否有裝備（支持新結構）
-function hasEquipped(slot, type = null) {
-  if (!inventorySystem) return false
-  const equipped = inventorySystem.getEquipped()
-  const slotData = equipped[slot]
-  if (!slotData) return false
-  
-  // 兼容舊格式
-  if (typeof slotData === 'string' || (typeof slotData === 'object' && slotData.itemId)) {
-    return type === null || type === 'equipment'
-  }
-  
-  // 新格式：雙槽位
-  if (type === null) {
-    return !!(slotData.equipment || slotData.appearance)
-  }
-  return !!slotData[type]
-}
-
-// 檢查是否可以裝備
-function canEquip(item) {
-  return item.type === 'equipment' || 
-         item.type === 'appearance' || 
-         item.type === 'talisman' || 
-         item.type === 'special'
-}
-
-// 獲取道具耐久度
-function getItemDurability(itemId, instanceId = null) {
-  if (!inventorySystem) return 0
-  const inventory = inventorySystem.getInventory()
-  
-  // 如果是實例 ID（包含下劃線和實例 ID）
-  if (itemId.includes('_') && itemId.split('_').length > 2) {
-    const parts = itemId.split('_')
-    const originalItemId = parts[0]
-    const instanceId = parts.slice(1).join('_')
-    const itemData = inventory[originalItemId]
-    if (itemData && itemData.items) {
-      const instance = itemData.items.find(i => i.id === instanceId)
-      return instance ? (instance.durability || 0) : 0
-    }
-  } else {
-    // 舊格式或消耗品
-    const itemData = inventory[itemId]
-    if (!itemData) return 0
-    
-    // 如果有實例數據
-    if (itemData.items && itemData.items.length > 0) {
-      if (instanceId) {
-        const instance = itemData.items.find(i => i.id === instanceId)
-        return instance ? (instance.durability || 0) : 0
-      }
-      return itemData.items[0].durability || 0
-    }
-  }
-  
-  return 0
-}
-
-// 處理使用道具
-async function handleUseItem(itemId) {
-  if (!inventorySystem) return
-  
-  try {
-    const result = await inventorySystem.useItem(itemId, 1)
-    if (result.success) {
-      await updateInventoryList()
-      updatePetState()
-      console.log(`[UI] 使用了道具: ${itemId}`)
-    } else {
-      console.error(`[UI] 使用道具失敗: ${result.message}`)
-    }
-  } catch (error) {
-    console.error('[UI] 使用道具錯誤:', error)
-  }
-}
-
-// 處理裝備道具
-// equipType: 'equipment' | 'appearance' | 'auto'
-async function handleEquip(itemId, slot, equipType = 'auto') {
-  if (!inventorySystem) return
-  
-  try {
-    // 如果是實例 ID（裝備類分開顯示），需要提取原始 itemId 和 instanceId
-    let actualItemId = itemId
-    let instanceId = null
-    
-    const itemData = inventoryItems.value[itemId]
-    if (itemData) {
-      if (itemData.originalItemId) {
-        // 這是分開顯示的裝備實例
-        actualItemId = itemData.originalItemId
-        instanceId = itemData.instanceId
-      } else if (itemId.includes('_') && itemId.split('_').length > 2) {
-        // 實例 ID 格式：itemId_instanceId
-        const parts = itemId.split('_')
-        actualItemId = parts[0]
-        instanceId = parts.slice(1).join('_')
-      }
-    }
-    
-    const result = await inventorySystem.equipItem(actualItemId, slot, equipType, instanceId)
-    if (result.success) {
-      await updateInventoryList()
-      updatePetState()
-      const typeName = result.type === 'appearance' ? '外觀' : '實際'
-      console.log(`[UI] 裝備了道具: ${actualItemId} (${typeName})`)
-    } else {
-      console.error(`[UI] 裝備失敗: ${result.message}`)
-    }
-  } catch (error) {
-    console.error('[UI] 裝備錯誤:', error)
-  }
-}
-
-// 處理卸下裝備
-// type: 'equipment' | 'appearance' | null (卸下全部)
-async function handleUnequip(slot, type = null) {
-  if (!inventorySystem) return
-  
-  try {
-    const result = await inventorySystem.unequipItem(slot, type)
-    if (result.success) {
-      await updateInventoryList()
-      updatePetState()
-      const typeName = type === 'appearance' ? '外觀' : (type === 'equipment' ? '實際' : '全部')
-      console.log(`[UI] 卸下了裝備: ${slot} (${typeName})`)
-    } else {
-      console.error(`[UI] 卸下失敗: ${result.message}`)
-    }
-  } catch (error) {
-    console.error('[UI] 卸下錯誤:', error)
-  }
-}
-
-// 處理修復裝備
-async function handleRepair(itemId) {
-  if (!inventorySystem) return
-  
-  try {
-    const result = await inventorySystem.repairItem(itemId)
-    if (result.success) {
-      await updateInventoryList()
-      updatePetState()
-      console.log(`[UI] 修復了裝備: ${itemId}`)
-    } else {
-      console.error(`[UI] 修復失敗: ${result.message}`)
-    }
-  } catch (error) {
-    console.error('[UI] 修復錯誤:', error)
-  }
-}
-
-// 處理刪除道具
-async function handleDeleteItem(itemId, count = 1) {
-  if (!inventorySystem) return
-  
-  try {
-    // 如果是裝備實例ID（格式：itemId_instanceId），需要提取原始 itemId
-    let actualItemId = itemId
-    const itemData = inventoryItems.value[itemId]
-    if (itemData && itemData.originalItemId) {
-      actualItemId = itemData.originalItemId
-    }
-    
-    const result = await inventorySystem.removeItem(actualItemId, count)
-    if (result.success) {
-      await updateInventoryList()
-      updatePetState()
-      console.log(`[UI] 刪除了道具: ${actualItemId} x${count}`)
-    } else {
-      console.error(`[UI] 刪除道具失敗: ${result.message}`)
-    }
-  } catch (error) {
-    console.error('[UI] 刪除道具錯誤:', error)
-  }
-}
-
-// 更新刪除數量
-function updateDeleteCount(itemId, value, maxCount) {
-  const numValue = parseInt(value) || 1
-  deleteCounts.value[itemId] = Math.max(1, Math.min(numValue, maxCount))
-}
-
-
-// Debug 成就功能
-async function debugUnlockAchievement() {
-  if (!achievementSystem || !debugAchievementId.value) {
-    console.log('[ERR] 請輸入成就 ID')
-    return
-  }
-  
-  const achievement = allAchievements.value.find(a => a.id === debugAchievementId.value)
-  if (!achievement) {
-    console.log(`[ERR] 找不到成就: ${debugAchievementId.value}`)
-    return
-  }
-  
-  await achievementSystem.unlockAchievement(achievement)
-  await updateAchievementList()
-  updatePetState()
-  console.log(`[OK] 成就已解鎖: ${achievement.name}`)
-}
-
-async function debugListAchievements() {
-  if (!achievementSystem) {
-    console.log('[ERR] 成就系統未初始化')
-    return
-  }
-  
-  const unlocked = achievementSystem.getUnlockedAchievements()
-  const locked = achievementSystem.getLockedAchievements()
-  
-  console.log('\n' + '='.repeat(60))
-  console.log('🏆 成就列表')
-  console.log('='.repeat(60))
-  console.log(`\n✅ 已解鎖 (${unlocked.length}/${allAchievements.value.length}):`)
-  unlocked.forEach(a => {
-    console.log(`  ${a.icon} ${a.name} - ${a.description}`)
-  })
-  
-  console.log(`\n🔒 未解鎖 (${locked.length}):`)
-  locked.forEach(a => {
-    const progress = achievementSystem.getAchievementProgress(a)
-    if (progress.current !== undefined && progress.target !== undefined) {
-      console.log(`  ${a.icon} ${a.name} - ${a.description}`)
-      console.log(`    進度: ${progress.current}/${progress.target} (${Math.round(progress.progress)}%)`)
-    } else {
-      console.log(`  ${a.icon} ${a.name} - ${a.description}`)
-    }
-  })
-  console.log('='.repeat(60) + '\n')
-}
-
-async function debugUnlockAllAchievements() {
-  if (!achievementSystem) {
-    console.log('[ERR] 成就系統未初始化')
-    return
-  }
-  
-  const { ACHIEVEMENTS } = await import('../data/achievements.js')
-  let count = 0
-  
-  for (const achievement of ACHIEVEMENTS) {
-    if (!achievementSystem.unlockedAchievements.includes(achievement.id)) {
-      await achievementSystem.unlockAchievement(achievement)
-      count++
-    }
-  }
-  
-  await updateAchievementList()
-  updatePetState()
-  console.log(`[OK] 已解鎖 ${count} 個成就`)
-}
-
-async function debugResetAchievements() {
-  if (!achievementSystem) {
-    console.log('[ERR] 成就系統未初始化')
-    return
-  }
-  
-  if (!confirm('確定要重置所有成就嗎？此操作無法復原！')) {
-    return
-  }
-  
-  achievementSystem.unlockedAchievements = []
-  achievementSystem.achievementStats = {
-    actionCounts: {
-      feed: 0,
-      play: 0,
-      clean: 0,
-      heal: 0,
-      sleep: 0,
-      pray: 0,
-      drawFortune: 0
-    },
-    eventCount: 0,
-    eventTypeCounts: {
-      good: 0,
-      bad: 0,
-      weird: 0,
-      rare: 0
-    },
-    recoveredFromDying: false,
-    perfectStateReached: false
-  }
-  
-  // 清除成就加成
-  await petSystem.updateState({ achievementBuffs: {} })
-  petSystem.calculateCombatStats()
-  
-  // 同步到 API
-  try {
-    await achievementSystem.api.saveAchievements({
-      unlocked: [],
-      stats: achievementSystem.achievementStats
-    })
-  } catch (error) {
-    localStorage.setItem('achievements', JSON.stringify({
-      unlocked: [],
-      stats: achievementSystem.achievementStats
-    }))
-  }
-  
-  await updateAchievementList()
-  updatePetState()
-  console.log('[OK] 成就已重置')
-}
-
-// Debug 背包功能
-async function debugAddRandomItem() {
-  if (!inventorySystem) {
-    console.log('[ERR] 背包系統未初始化')
-    return
-  }
-  
-  const { ITEMS } = await import('../data/items.js')
-  const itemIds = Object.keys(ITEMS)
-  const randomItemId = itemIds[Math.floor(Math.random() * itemIds.length)]
-  
-  const result = await inventorySystem.addItem(randomItemId, 1)
-  if (result.success) {
-    await updateInventoryList()
-    updatePetState()
-    console.log(`[OK] 隨機產生道具: ${result.item.name}`)
-  } else {
-    console.error(`[ERR] 產生道具失敗: ${result.message}`)
-  }
-}
-
-async function debugAddItemByType(type) {
-  if (!inventorySystem) {
-    console.log('[ERR] 背包系統未初始化')
-    return
-  }
-  
-  const { ITEMS } = await import('../data/items.js')
-  const itemsOfType = Object.entries(ITEMS)
-    .filter(([id, item]) => item.type === type)
-    .map(([id]) => id)
-  
-  if (itemsOfType.length === 0) {
-    console.log(`[ERR] 沒有找到類型為 ${type} 的道具`)
-    return
-  }
-  
-  const randomItemId = itemsOfType[Math.floor(Math.random() * itemsOfType.length)]
-  const result = await inventorySystem.addItem(randomItemId, 1)
-  
-  if (result.success) {
-    await updateInventoryList()
-    updatePetState()
-    console.log(`[OK] 產生 ${type} 道具: ${result.item.name}`)
-  } else {
-    console.error(`[ERR] 產生道具失敗: ${result.message}`)
-  }
-}
-
-async function debugAddItemByCategory(category) {
-  if (!inventorySystem) {
-    console.log('[ERR] 背包系統未初始化')
-    return
-  }
-  
-  const { ITEMS } = await import('../data/items.js')
-  const itemsOfCategory = Object.entries(ITEMS)
-    .filter(([id, item]) => item.category === category)
-    .map(([id]) => id)
-  
-  if (itemsOfCategory.length === 0) {
-    console.log(`[ERR] 沒有找到類別為 ${category} 的道具`)
-    return
-  }
-  
-  const randomItemId = itemsOfCategory[Math.floor(Math.random() * itemsOfCategory.length)]
-  const result = await inventorySystem.addItem(randomItemId, 1)
-  
-  if (result.success) {
-    await updateInventoryList()
-    updatePetState()
-    console.log(`[OK] 產生 ${category} 道具: ${result.item.name}`)
-  } else {
-    console.error(`[ERR] 產生道具失敗: ${result.message}`)
-  }
-}
-
-// 處理鍵盤輸入（可選）
-const handleKeydown = (e) => {
-  // Ctrl + Shift + D 開關 Debug 面板
-  if (e.ctrlKey && e.shiftKey && e.key === 'D') {
-    showDebug.value = !showDebug.value
-  }
-}
-
-// 冒險系統相关方法
-async function openAdventurePanel() {
-  if (!adventureSystem) return
-  adventures.value = adventureSystem.getAdventures()
-  showAdventurePanel.value = true
-}
-
-function closeAdventurePanel() {
-  showAdventurePanel.value = false
-}
-
-async function handleStartAdventure(adventureId) {
-  if (!adventureSystem) return
-  
-  // 設置回調
-  adventureSystem.onLogUpdate = (logs) => {
-    adventureLogs.value = [...logs]
-    // 自動滾動到底部
-    nextTick(() => {
-      const logContainer = document.querySelector('.adventure-logs')
-      if (logContainer) {
-        logContainer.scrollTop = logContainer.scrollHeight
-      }
-    })
-  }
-  
-  adventureSystem.onAdventureComplete = (result) => {
-    adventureResult.value = result
-    showAdventureResult.value = true
-    currentAdventure.value = null
-    updateInventoryList() // 更新背包顯示獎勵
-    updatePetState() // 更新寵物狀態（經驗/屬性）
-  }
-  
-  const result = await adventureSystem.startAdventure(adventureId)
-  if (result.success) {
-    currentAdventure.value = result.adventure
-    adventureLogs.value = []
-    showAdventurePanel.value = false // 關閉選擇面板，顯示進行中面板
-  } else {
-    alert(result.message)
-  }
-}
-
-function closeAdventureResult() {
-  showAdventureResult.value = false
-  adventureResult.value = null
-}
-
-function getAdventureProgress() {
-  if (!currentAdventure.value) return 0
-  const total = currentAdventure.value.duration
-  const elapsed = Date.now() - currentAdventure.value.startTime
-  return Math.min(100, (elapsed / total) * 100)
-}
-
-// 監聽冒險進度
-setInterval(() => {
-  if (currentAdventure.value) {
-    // 強制更新視圖
-    currentAdventure.value = { ...currentAdventure.value }
-  }
-}, 1000)
-
-// 商店系統相關方法
-async function openShopPanel() {
-  const { generateShopItems, SHOP_CATEGORIES } = await import('../data/shop.js')
-  shopItems.value = generateShopItems() // 隨機生成商品
-  shopCategories.value = SHOP_CATEGORIES
-  showShopPanel.value = true
-}
-
-function closeShopPanel() {
-  showShopPanel.value = false
-}
-
-// 刷新商店商品
-async function refreshShop() {
-  const { generateShopItems } = await import('../data/shop.js')
-  shopItems.value = generateShopItems()
-  alert('商店已刷新！')
-}
-
-const shopCategories = ref({})
-
-const filteredShopItems = computed(() => {
-  if (selectedCategory.value === 'all') {
-    return shopItems.value
-  }
-  return shopItems.value.filter(item => item.category === selectedCategory.value)
-})
-
-async function buyItem(shopItem) {
-  const currentCoins = petState.value.coins || 0
-  
-  if (currentCoins < shopItem.price) {
-    alert('金幣不足！')
-    return
-  }
-  
-  if (shopItem.stock !== -1 && shopItem.stock <= 0) {
-    alert('商品已售罄！')
-    return
-  }
-  
-  // 扣除金幣
-  await petSystem.updateState({
-    coins: currentCoins - shopItem.price
-  })
-  
-  // 添加道具到背包
-  await inventorySystem.addItem(shopItem.itemId, 1)
-  
-  // 更新庫存（如果有限）
-  if (shopItem.stock !== -1) {
-    shopItem.stock -= 1
-  }
-  
-  // 更新狀態顯示
-  updatePetState()
-  updateInventoryList()
-  
-  alert(`成功購買 ${getItemName(shopItem.itemId)}！`)
-}
-
-// 賣出道具
-async function sellItem(itemId, instanceId = null) {
-  const { SHOP_POOL } = await import('../data/shop.js')
-  
-  // 提取原始 itemId (移除 _instanceId 後綴)
-  const originalItemId = itemId.includes('_') ? itemId.split('_')[0] : itemId
-  
-  // 查找該道具的賣出價格
-  const poolItem = SHOP_POOL.find(p => p.itemId === originalItemId)
-  if (!poolItem || !poolItem.sellPrice) {
-    alert('此道具無法出售')
-    return
-  }
-  
-  const sellPrice = poolItem.sellPrice
-  
-  // 確認
-  if (!confirm(`確定要以 ${sellPrice} 💰 賣出 ${getItemName(originalItemId)} 嗎？`)) {
-    return
-  }
-  
-  // 移除道具（使用原始 itemId）
-  await inventorySystem.removeItem(originalItemId, 1, instanceId)
-  
-  // 獲得金幣
-  const currentCoins = petState.value.coins || 0
-  await petSystem.updateState({
-    coins: currentCoins + sellPrice
-  })
-  
-  // 更新顯示
-  updatePetState()
-  updateInventoryList()
-  
-  alert(`成功賣出！獲得 ${sellPrice} 💰`)
-}
-
-function getItemIcon(itemId) {
-  const item = inventorySystem?.items[itemId]
-  return item?.icon || '❓'
-}
-
-function getItemName(itemId) {
-  const item = inventorySystem?.items[itemId]
-  return item?.name || itemId
-}
-
-onMounted(async () => {
-  window.addEventListener('keydown', handleKeydown)
-  // 檢查是否已有寵物
-  try {
-    const existingState = localStorage.getItem('petState')
-    if (existingState) {
-      // 已有寵物，直接初始化
-      systemStatus.value = '正在載入寵物...'
-      await init()
-    } else {
-      // 新寵物，顯示名字輸入
-      systemStatus.value = '歡迎！請為你的寵物命名'
-      showNameInput.value = true
-    }
-    
-    // 將所有函數掛載到 window
-    window.petSystem = petSystem
-    window.eventSystem = eventSystem
-    window.templeSystem = templeSystem
-    window.inventorySystem = inventorySystem
-    window.showStatus = showStatus
-    window.start = start
-    window.stop = stop
-    window.feed = feed
-    window.play = play
-    window.clean = clean
-    window.heal = heal
-    window.sleep = sleep
-    window.triggerEvent = triggerEvent
-    window.listEvents = listEvents
-    window.eventHistory = eventHistory
-    window.pray = pray
-    window.drawFortune = drawFortune
-    window.switchDeity = switchDeity
-    window.listDeities = listDeities
-    window.applyBuffs = applyBuffs
-    window.help = help
-    window.init = init
-    window.testBonuses = testBonuses
-    
-    // 事件測試函數
-    window.testEvent = async (eventId) => {
-      const events = await apiService.getEvents()
-      const event = events.find(e => e.id === eventId)
-      if (!event) {
-        console.log(`[ERR] 找不到事件: ${eventId}`)
-        return
-      }
-      console.log(`\n[TEST] 測試: ${event.id} (${event.type})`)
-      showStatus()
-      await triggerEvent(eventId)
-      await new Promise(r => setTimeout(r, 100))
-      showStatus()
-    }
-    
-    window.testAllEvents = async () => {
-      const events = await apiService.getEvents()
-      console.log(`\n[TEST] 測試 ${events.length} 個事件...\n`)
-      for (const e of events) {
-        console.log(`[START] ${e.id}`)
-        await triggerEvent(e.id)
-        await new Promise(r => setTimeout(r, 50))
-      }
-      console.log('\n[OK] 完成')
-      showStatus()
-    }
-    
-    // 檢查進化狀態
-    window.checkEvolution = () => {
-      const state = petSystem.getState()
-      const species = petSystem.speciesConfig
-      
-      console.log('\n' + '='.repeat(60))
-      console.log('[CHECK] 進化系統檢查')
-      console.log('='.repeat(60))
-      console.log(`\n當前階段: ${state.stage}`)
-      console.log(`年齡: ${state.ageSeconds.toFixed(1)} 秒`)
-      console.log(`屬性: STR ${state.str.toFixed(1)} | INT ${state.int.toFixed(1)} | DEX ${state.dex.toFixed(1)}`)
-      
-      // 找到當前階段
-      const currentIdx = species.lifecycle.findIndex(s => s.stage === state.stage)
-      if (currentIdx < 0) {
-        console.log('\n[ERR] 找不到當前階段配置')
-        return
-      }
-      
-      const currentStage = species.lifecycle[currentIdx]
-      
-      if (currentIdx < species.lifecycle.length - 1) {
-        const nextStage = species.lifecycle[currentIdx + 1]
-        console.log(`\n下一階段: ${nextStage.stage}`)
-        
-        // 檢查當前階段是否已達到結束時間
-        const timeRequirement = currentStage.durationSeconds
-        const timeMet = state.ageSeconds >= timeRequirement
-        
-        if (timeRequirement === Infinity) {
-          console.log(`年齡條件: 已達到最終階段，無需再進化`)
-        } else {
-          console.log(`年齡條件: ${state.ageSeconds.toFixed(1)}/${timeRequirement} 秒 ${timeMet ? '[OK]' : '[ERR]'}`)
-        }
-        
-        // 檢查屬性條件
-        if (nextStage.conditions && Object.keys(nextStage.conditions).length > 0) {
-          console.log('屬性條件:')
-          if (nextStage.conditions.str) {
-            const met = state.str >= nextStage.conditions.str
-            console.log(`  STR: ${state.str.toFixed(1)}/${nextStage.conditions.str} ${met ? '[OK]' : '[ERR]'}`)
-          }
-          if (nextStage.conditions.int) {
-            const met = state.int >= nextStage.conditions.int
-            console.log(`  INT: ${state.int.toFixed(1)}/${nextStage.conditions.int} ${met ? '[OK]' : '[ERR]'}`)
-          }
-          if (nextStage.conditions.dex) {
-            const met = state.dex >= nextStage.conditions.dex
-            console.log(`  DEX: ${state.dex.toFixed(1)}/${nextStage.conditions.dex} ${met ? '[OK]' : '[ERR]'}`)
-          }
-        } else {
-          console.log('屬性條件: 無')
-        }
-        
-        // 顯示進化建議
-        if (timeMet && nextStage.conditions) {
-          const allStatsMet = Object.entries(nextStage.conditions).every(([key, value]) => state[key] >= value)
-          if (allStatsMet) {
-            console.log('\n* 條件已滿足！應該會自動進化')
-          } else {
-            console.log('\n[TIP] 提示: 年齡已足夠，再提升屬性即可進化')
-          }
-        } else if (!timeMet) {
-          const remaining = timeRequirement - state.ageSeconds
-          console.log(`\n[WAIT] 還需等待 ${remaining.toFixed(1)} 秒`)
-        }
-      } else {
-        console.log('\n[DONE] 已達到最終階段')
-      }
-      
-      console.log('='.repeat(60) + '\n')
-    }
-  } catch (error) {
-    systemStatus.value = '[ERR] 初始化失敗: ' + error.message
-    console.error(error)
-  }
-})
-
-onUnmounted(() => {
-  if (isRunning.value) {
-    stop()
-  }
-})
-</script>
-
-<style scoped>
-/* 像素字体 - Zpix 支持繁体中文 */
-@import url('https://cdn.jsdelivr.net/npm/zpix-pixel-font@latest/dist/Zpix.css');
-
-* {
-  font-family: 'Zpix', 'Noto Sans TC', monospace;
-  image-rendering: pixelated;
-}
-
-.pet-system-container {
-  min-height: 100vh;
-  background: #0a0a0a;
-  color: #00ff00;
-  padding: 15px;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 20px;
-  border: 3px solid #00ff00;
-  padding: 15px;
-  background: #000;
-  box-shadow: 0 0 15px #00ff00;
-}
-
-.header h1 {
-  color: #00ffff;
-  font-size: 18px;
-  margin: 0 0 10px 0;
-  text-shadow: 2px 2px 0 #000, 0 0 10px #00ffff;
-}
-
-.subtitle {
-  color: #00aa00;
-  font-size: 10px;
-}
-
-/* 寵物狀態顯示 */
-.pet-status {
-  background: #000;
-  padding: 15px;
-  margin-bottom: 15px;
-  border: 3px solid #00ff00;
-  box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
-}
-
-.status-section {
-  margin-bottom: 20px;
-}
-
-.status-section h3 {
-  color: #00ffff;
-  margin-bottom: 10px;
-  font-size: 14px;
-  text-align: center;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #00ff00;
-  text-shadow: 0 0 5px #00ffff;
-}
-
-.status-grid {
-  display: grid;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.stat-label {
-  min-width: 50px;
-  color: #00aa00;
-  font-weight: bold;
-  font-size: 10px;
-}
-
-.stat-bar {
-  flex: 1;
-  height: 12px;
-  background: #000;
-  border: 2px solid #00ff00;
-  position: relative;
-  overflow: hidden;
-}
-
-.stat-fill {
-  height: 100%;
-  background: #00ff00;
-  transition: width 0.3s ease;
-  box-shadow: 0 0 10px #00ff00;
-}
-
-.stat-value {
-  min-width: 40px;
-  text-align: right;
-  color: #ffffff;
-  font-size: 10px;
-  font-weight: bold;
-}
-
-.pet-info-grid,
-.bonus-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 8px;
-  margin-bottom: 10px;
-}
-
-.info-item,
-.bonus-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 5px 8px;
-  background: #001100;
-  border: 1px solid #00ff00;
-  transition: all 0.2s;
-}
-
-.info-item:hover,
-.bonus-item:hover {
-  background: #002200;
-  box-shadow: 0 0 5px #00ff00;
-}
-
-.info-label,
-.bonus-label {
-  color: #00aa00;
-  font-size: 10px;
-}
-
-.info-value,
-.bonus-value {
-  color: #ffffff;
-  font-size: 10px;
-  font-weight: bold;
-}
-
-.bonus-value.positive {
-  color: #00ff00;
-}
-
-.bonus-value.negative {
-  color: #ff0000;
-}
-
-.bonus-item.not-implemented {
-  opacity: 0.6;
-  border-color: #ff0000;
-  background: #110000;
-  box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.1);
-}
-
-.bonus-item.not-implemented .bonus-label {
-  color: #ff0000;
-  text-decoration: line-through;
-}
-
-.bonus-item.not-implemented .bonus-value {
-  color: #ff0000 !important;
-}
-
-.status-badges {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-top: 10px;
-}
-
-.badge {
-  background: #000;
-  border: 2px solid #ffff00;
-  color: #ffff00;
-  padding: 4px 8px;
-  font-size: 10px;
-  animation: blink 1s infinite;
-}
-
-.badge.sick {
-  border-color: #ff0000;
-  color: #ff0000;
-}
-
-@keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0.5; }
-}
-
-/* 操作按鈕區 */
-.action-panel {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.action-group {
-  background: #252526;
-  padding: 20px;
-  border-radius: 8px;
-  border-left: 4px solid #4ec9b0;
-}
-
-.action-group h3 {
-  color: #4ec9b0;
-  margin-bottom: 15px;
-  font-size: 1.1em;
-}
-
-.button-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 8px;
-}
-
-button {
-  background: #000;
-  border: 2px solid #00ff00;
-  color: #00ff00;
-  padding: 10px;
-  cursor: pointer;
-  transition: all 0.1s;
-  font-size: 12px;
-}
-
-button:hover:not(:disabled) {
-  background: #00ff00;
-  color: #000;
-  box-shadow: 0 0 10px #00ff00;
-}
-
-button:active:not(:disabled) {
-  transform: translate(2px, 2px);
-}
-
-button:disabled {
-  border-color: #003300;
-  color: #003300;
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.danger-button {
-  background: #d32f2f !important;
-}
-
-.danger-button:hover:not(:disabled) {
-  background: #f44336 !important;
-}
-
-.console-output {
-  background: #000;
-  border: 3px solid #00ff00;
-  padding: 10px;
-  min-height: 200px;
-  max-height: 400px;
-  overflow-y: auto;
-  font-size: 10px;
-  box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
-}
-
-.log-entry {
-  margin: 3px 0;
-  padding: 3px;
-  border-left: 2px solid #00ff00;
-  padding-left: 8px;
-  color: #00ff00;
-}
-
-/* Debug 面板樣式 */
-.debug-toggle {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  background: #000;
-  border: 2px solid #ff00ff;
-  color: #ff00ff;
-  padding: 5px 10px;
-  cursor: pointer;
-  font-size: 10px;
-  z-index: 100;
-  box-shadow: 0 0 10px #ff00ff;
-}
-
-.debug-toggle:hover {
-  background: #ff00ff;
-  color: #000;
-}
-
-.debug-panel {
-  position: fixed;
-  top: 50px;
-  right: 10px;
-  background: #000;
-  border: 3px solid #ff00ff;
-  padding: 15px;
-  max-width: 250px;
-  z-index: 99;
-  box-shadow: 0 0 20px #ff00ff;
-}
-
-.debug-panel h3 {
-  color: #ff00ff;
-  margin-bottom: 10px;
-  font-size: 12px;
-  text-shadow: 0 0 5px #ff00ff;
-}
-
-.debug-group {
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #330033;
-}
-
-.debug-group:last-child {
-  border-bottom: none;
-}
-
-.debug-group h4 {
-  color: #ff00ff;
-  margin-bottom: 5px;
-  font-size: 10px;
-}
-
-.debug-panel button {
-  width: 100%;
-  margin-bottom: 5px;
-  border-color: #ff00ff;
-  color: #ff00ff;
-  font-size: 9px;
-}
-
-.debug-panel button:hover:not(:disabled) {
-  background: #ff00ff;
-}
-
-.name-input-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.95);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background: #000;
-  border: 3px solid #00ffff;
-  padding: 20px;
-  min-width: 300px;
-  box-shadow: 0 0 30px #00ffff;
-}
-
-.modal-content h2 {
-  color: #00ffff;
-  font-size: 14px;
-  margin-bottom: 10px;
-  text-shadow: 0 0 10px #00ffff;
-  text-align: center;
-}
-
-.modal-content p {
-  color: #00aa00;
-  font-size: 10px;
-  margin-bottom: 15px;
-  text-align: center;
-}
-
-.name-input {
-  width: 100%;
-  background: #000;
-  border: 2px solid #00ff00;
-  color: #00ff00;
-  padding: 10px;
-  font-size: 12px;
-  margin-bottom: 15px;
-  box-sizing: border-box;
-}
-
-.name-input:focus {
-  outline: none;
-  border-color: #00ffff;
-  box-shadow: 0 0 10px #00ffff;
-}
-
-.modal-buttons {
-  display: flex;
-  justify-content: center;
-}
-
-.modal-buttons button {
-  min-width: 100px;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: #000;
-  border: 1px solid #00ff00;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #00ff00;
-  border: 2px solid #000;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #00ffff;
-  box-shadow: 0 0 5px #00ffff;
-}
-
-/* 其他修正 */
-.info-value-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.info-value.highlight {
-  color: #00ffff;
-  text-shadow: 0 0 5px #00ffff;
-}
-
-.info-sub {
-  color: #00aa00;
-  font-size: 8px;
-  margin-top: 2px;
-}
-
-button.active {
-  background: #00ff00;
-  color: #000;
-  box-shadow: 0 0 10px #00ff00;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: #000;
-  border: 1px solid #00ff00;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #00ff00;
-  border: 2px solid #000;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #00ffff;
-  box-shadow: 0 0 5px #00ffff;
-}
-
-/* 其他修正 */
-.info-value-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.info-value.highlight {
-  color: #00ffff;
-  text-shadow: 0 0 5px #00ffff;
-}
-
-.info-sub {
-  color: #00aa00;
-  font-size: 8px;
-  margin-top: 2px;
-}
-
-.modal-content {
-  padding: 30px;
-  border-radius: 12px;
-  border: 2px solid #4ec9b0;
-  min-width: 400px;
-  max-width: 90%;
-}
-
-.modal-content h2 {
-  color: #4ec9b0;
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.modal-content p {
-  color: #d4d4d4;
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-.name-input {
-  width: 100%;
-  padding: 12px;
-  background: #1e1e1e;
-  border: 2px solid #3c3c3c;
-  border-radius: 6px;
-  color: #d4d4d4;
-  font-size: 1.1em;
-  margin-bottom: 20px;
-  text-align: center;
-}
-
-.name-input:focus {
-  outline: none;
-  border-color: #4ec9b0;
-}
-
-.modal-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-}
-
-.modal-buttons button {
-  background: #007acc;
-  color: #fff;
-  border: none;
-  padding: 12px 24px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1em;
-  font-weight: 500;
-}
-
-.modal-buttons button:hover:not(:disabled) {
-  background: #0098ff;
-}
-
-.modal-buttons button:disabled {
-  background: #3c3c3c;
-  color: #858585;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-/* 冒險系統樣式 */
-.adventure-btn {
-  border-color: #e74c3c;
-  color: #e74c3c;
-}
-
-.adventure-btn:hover:not(:disabled) {
-  background: rgba(231, 76, 60, 0.1);
-  box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);
-}
-
-/* 商店系統樣式 */
-.shop-btn {
-  border-color: #f39c12;
-  color: #f39c12;
-}
-
-.shop-btn:hover:not(:disabled) {
-  background: rgba(243, 156, 18, 0.1);
-  box-shadow: 0 0 15px rgba(243, 156, 18, 0.3);
-}
-
-.shop-panel {
-  max-width: 700px;
-  width: 90%;
-  max-height: 80vh;
-  overflow-y: auto;
-}
-
-.shop-balance {
-  text-align: center;
-  font-size: 1.2em;
-  margin: 15px 0;
-  padding: 10px;
-  background: rgba(243, 156, 18, 0.1);
-  border: 1px solid #f39c12;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 15px;
-}
-
-.balance-amount {
-  color: #f39c12;
-  font-weight: bold;
-  margin-left: 10px;
-}
-
-.refresh-btn {
-  padding: 5px 10px;
-  background: transparent;
-  border: 1px solid #0f0;
-  color: #0f0;
-  cursor: pointer;
-  font-size: 1.2em;
-  font-family: 'VT323', monospace;
-}
-
-.refresh-btn:hover {
-  background: #0f0;
-  color: #000;
-}
-
-.shop-mode-tabs {
-  display: flex;
-  gap: 10px;
-  margin: 15px 0;
-  justify-content: center;
-}
-
-.mode-tab-btn {
-  padding: 10px 30px;
-  background: transparent;
-  border: 1px solid #555;
-  color: #0f0;
-  cursor: pointer;
-  font-family: 'VT323', monospace;
-  font-size: 1.1em;
-}
-
-.mode-tab-btn:hover {
-  background: rgba(0, 255, 0, 0.1);
-}
-
-.mode-tab-btn.active {
-  border-color: #f39c12;
-  color: #f39c12;
-  background: rgba(243, 156, 18, 0.2);
-}
-
-.sell-hint {
-  text-align: center;
-  color: #888;
-  margin: 10px 0;
-  font-size: 0.9em;
-}
-
-.sell-btn {
-  padding: 8px 20px;
-  background: transparent;
-  border: 1px solid #f39c12;
-  color: #f39c12;
-  cursor: pointer;
-  font-family: 'VT323', monospace;
-  font-size: 1.1em;
-}
-
-.sell-btn:hover {
-  background: #f39c12;
-  color: #000;
-}
-
-.coins-reward {
-  color: #f39c12;
-  font-weight: bold;
-  font-size: 1.2em;
-}
-
-.shop-categories {
-  display: flex;
-  gap: 10px;
-  margin: 15px 0;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-/* 寵物表情顯示 */
-.mini-pet-emoji {
-  font-size: 1.5em;
-  display: inline-block;
-  margin-left: 10px;
-  vertical-align: middle;
-  cursor: help;
-}
-
-/* 動畫效果 */
-@keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-}
-
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-5px); }
-  75% { transform: translateX(5px); }
-}
-
-@keyframes wiggle {
-  0%, 100% { transform: rotate(0deg); }
-  25% { transform: rotate(-10deg); }
-  75% { transform: rotate(10deg); }
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0); opacity: 0.8; }
-  50% { transform: translateY(-5px); opacity: 1; }
-}
-
-.bounce { animation: bounce 1s infinite; }
-.shake { animation: shake 0.5s infinite; }
-.wiggle { animation: wiggle 1s infinite; }
-.float { animation: float 2s infinite ease-in-out; }
-
-.category-btn {
-  padding: 8px 15px;
-  background: transparent;
-  border: 1px solid #555;
-  color: #0f0;
-  cursor: pointer;
-  font-family: 'VT323', monospace;
-  font-size: 1em;
-}
-
-.category-btn:hover {
-  background: rgba(0, 255, 0, 0.1);
-}
-
-.category-btn.active {
-  border-color: #f39c12;
-  color: #f39c12;
-  background: rgba(243, 156, 18, 0.1);
-}
-
-.shop-items-list {
-  display: grid;
-  gap: 15px;
-  margin: 20px 0;
-  max-height: 50vh;
-  overflow-y: auto;
-}
-
-.shop-item-card {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 15px;
-  border: 1px solid #333;
-  background: rgba(0, 20, 0, 0.6);
-}
-
-.shop-item-card .item-icon {
-  font-size: 2em;
-  min-width: 50px;
-  text-align: center;
-}
-
-.shop-item-card .item-details {
-  flex: 1;
-}
-
-.shop-item-card .item-name {
-  font-size: 1.1em;
-  font-weight: bold;
-  margin-bottom: 5px;
-}
-
-.shop-item-card .item-price {
-  color: #f39c12;
-  font-size: 1em;
-}
-
-.shop-item-card .item-stock {
-  color: #888;
-  font-size: 0.9em;
-}
-
-.shop-item-card .buy-btn {
-  padding: 8px 20px;
-  background: transparent;
-  border: 1px solid #0f0;
-  color: #0f0;
-  cursor: pointer;
-  font-family: 'VT323', monospace;
-  font-size: 1.1em;
-}
-
-.shop-item-card .buy-btn:hover:not(:disabled) {
-  background: #0f0;
-  color: #000;
-}
-
-.shop-item-card .buy-btn:disabled {
-  border-color: #555;
-  color: #555;
-  cursor: not-allowed;
-}
-
-.adventure-panel {
-  max-width: 600px;
-  width: 90%;
-}
-
-.adventure-list {
-  display: grid;
-  gap: 15px;
-  margin: 20px 0;
-  max-height: 60vh;
-  overflow-y: auto;
-}
-
-.adventure-card {
-  border: 1px solid #0f0;
-  padding: 15px;
-  background: rgba(0, 20, 0, 0.8);
-}
-
-.adv-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  font-weight: bold;
-  font-size: 1.1em;
-}
-
-.adv-desc {
-  color: #aaa;
-  margin-bottom: 10px;
-  font-size: 0.9em;
-}
-
-.adv-cost, .adv-requirements {
-  display: flex;
-  gap: 15px;
-  font-size: 0.9em;
-  margin-bottom: 5px;
-}
-
-.start-adv-btn {
-  width: 100%;
-  margin-top: 10px;
-  padding: 8px;
-  background: transparent;
-  border: 1px solid #e74c3c;
-  color: #e74c3c;
-  cursor: pointer;
-  font-family: 'VT323', monospace;
-  font-size: 1.1em;
-}
-
-.start-adv-btn:hover:not(:disabled) {
-  background: #e74c3c;
-  color: #000;
-}
-
-.start-adv-btn:disabled {
-  border-color: #555;
-  color: #555;
-  cursor: not-allowed;
-}
-
-.adventure-progress-panel {
-  max-width: 500px;
-  width: 90%;
-}
-
-.progress-bar-container {
-  width: 100%;
-  height: 10px;
-  background: #333;
-  margin: 20px 0;
-  border: 1px solid #555;
-}
-
-.progress-bar {
-  height: 100%;
-  background: #0f0;
-  transition: width 1s linear;
-}
-
-.adventure-logs {
-  height: 200px;
-  overflow-y: auto;
-  border: 1px solid #333;
-  padding: 10px;
-  background: #000;
-  font-family: 'VT323', monospace;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.log-entry {
-  color: #0f0;
-  font-size: 0.9em;
-  line-height: 1.4;
-}
-
-.result-panel {
-  text-align: center;
-}
-
-.rewards-list {
-  margin: 20px 0;
-  text-align: left;
-  border: 1px solid #333;
-  padding: 15px;
-}
-
-.reward-item {
-  margin: 5px 0;
-  color: #ffd700;
-}
-
-.confirm-btn {
-  padding: 8px 30px;
-  background: transparent;
-  border: 1px solid #0f0;
-  color: #0f0;
-  cursor: pointer;
-  font-family: 'VT323', monospace;
-  font-size: 1.2em;
-}
-
-.confirm-btn:hover {
-  background: #0f0;
-  color: #000;
-}
-
-@media (max-width: 768px) {
-  .action-panel {
-    grid-template-columns: 1fr;
-  }
-  
-  .modal-content {
-    min-width: 90%;
-    padding: 20px;
-  }
-}
-
-/* 折疊面板樣式 */
-details.event-list, details.deity-list {
-  margin-top: 10px;
-  border: 1px solid #3c3c3c;
-  border-radius: 4px;
-  padding: 10px;
-}
-
-details summary {
-  cursor: pointer;
-  user-select: none;
-  color: #4ec9b0;
-  font-weight: bold;
-  padding: 5px;
-  list-style-position: inside;
-}
-
-details summary:hover {
-  background: rgba(78, 201, 176, 0.1);
-  border-radius: 4px;
-}
-
-details[open] summary {
-  margin-bottom: 10px;
-  border-bottom: 1px solid #3c3c3c;
-}
-
-/* 小按鈕網格 */
-.button-grid.small {
-  gap: 8px;
-}
-
-.button-grid.small button {
-  padding: 8px 12px;
-  font-size: 0.85em;
-}
-
-/* 激活狀態的按鈕 */
-button.active {
-  background: #4ec9b0 !important;
-  color: #1e1e1e !important;
-  font-weight: bold;
-  border: 2px solid #6ee2c4;
-}
-
-button.active:hover {
-  background: #6ee2c4 !important;
-}
-
-/* 成就系統樣式 */
-.achievement-summary {
-  margin-bottom: 10px;
-}
-
-.achievement-stats {
-  display: flex;
-  justify-content: space-around;
-  padding: 10px;
-  background: #001100;
-  border: 1px solid #00ff00;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.achievement-stats span {
-  color: #00ff00;
-  font-weight: bold;
-}
-
-.achievement-list {
-  margin-top: 10px;
-  border: 1px solid #3c3c3c;
-  border-radius: 4px;
-  padding: 10px;
-}
-
-.achievement-list summary {
-  cursor: pointer;
-  user-select: none;
-  color: #4ec9b0;
-  font-weight: bold;
-  padding: 5px;
-  list-style-position: inside;
-}
-
-.achievement-list summary:hover {
-  background: rgba(78, 201, 176, 0.1);
-  border-radius: 4px;
-}
-
-.achievement-list[open] summary {
-  margin-bottom: 10px;
-  border-bottom: 1px solid #3c3c3c;
-  padding-bottom: 10px;
-}
-
-.achievement-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 10px;
-  max-height: 400px;
-  overflow-y: auto;
-  padding: 10px 0;
-}
-
-.achievement-item {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-  background: #001100;
-  border: 2px solid #003300;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.achievement-item.unlocked {
-  border-color: #00ff00;
-  background: #002200;
-  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
-}
-
-.achievement-item.locked {
-  opacity: 0.6;
-  border-color: #333;
-}
-
-.achievement-icon {
-  font-size: 24px;
-  min-width: 30px;
-  text-align: center;
-}
-
-.achievement-info {
-  flex: 1;
-}
-
-.achievement-name {
-  color: #00ffff;
-  font-weight: bold;
-  font-size: 14px;
-  margin-bottom: 4px;
-}
-
-.achievement-item.locked .achievement-name {
-  color: #888;
-}
-
-.achievement-desc {
-  color: #aaa;
-  font-size: 11px;
-  margin-bottom: 6px;
-}
-
-.achievement-progress {
-  margin-top: 6px;
-}
-
-.progress-bar {
-  width: 100%;
-  height: 6px;
-  background: #000;
-  border: 1px solid #333;
-  border-radius: 3px;
-  overflow: hidden;
-  margin-bottom: 4px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: #00ff00;
-  transition: width 0.3s;
-}
-
-.progress-text {
-  color: #888;
-  font-size: 10px;
-}
-
-.achievement-reward {
-  margin-top: 6px;
-  padding-top: 6px;
-  border-top: 1px solid #333;
-  font-size: 10px;
-}
-
-.reward-label {
-  color: #00aa00;
-  margin-right: 4px;
-}
-
-.reward-item {
-  color: #00ff00;
-  margin-right: 8px;
-}
-
-/* 背包系統樣式 */
-.equipment-slots {
-  margin-bottom: 15px;
-}
-
-.equipment-slots h4 {
-  color: #4ec9b0;
-  margin-bottom: 10px;
-  font-size: 14px;
-}
-
-/* 稀有度圖例 */
-.rarity-legend {
-  background: #001100;
-  border: 2px solid #3c3c3c;
-  border-radius: 4px;
-  padding: 10px;
-  margin-bottom: 15px;
-}
-
-.legend-title {
-  color: #4ec9b0;
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.legend-items {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.legend-item {
-  padding: 4px 8px;
-  border-radius: 3px;
-  font-size: 10px;
-  border: 2px solid;
-}
-
-.legend-item.rarity-common {
-  border-color: #9d9d9d;
-  color: #9d9d9d;
-}
-
-.legend-item.rarity-uncommon {
-  border-color: #1eff00;
-  color: #1eff00;
-  box-shadow: 0 0 5px rgba(30, 255, 0, 0.3);
-}
-
-.legend-item.rarity-rare {
-  border-color: #0070dd;
-  color: #0070dd;
-  box-shadow: 0 0 8px rgba(0, 112, 221, 0.4);
-}
-
-.legend-item.rarity-epic {
-  border-color: #a335ee;
-  color: #a335ee;
-  box-shadow: 0 0 10px rgba(163, 53, 238, 0.5);
-}
-
-.legend-item.rarity-legendary {
-  border-color: #ff8000;
-  color: #ff8000;
-  box-shadow: 0 0 15px rgba(255, 128, 0, 0.6);
-}
-
-.legend-note {
-  color: #888;
-  font-size: 9px;
-  font-style: italic;
-}
-
-.slots-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.equipment-slot-container {
-  border: 2px solid #3c3c3c;
-  border-radius: 4px;
-  padding: 8px;
-  background: #000511;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.slot-header {
-  font-size: 11px;
-  color: #4ec9b0;
-  font-weight: bold;
-  text-align: center;
-  padding-bottom: 4px;
-  border-bottom: 1px solid #3c3c3c;
-}
-
-.equipment-slot {
-  border: 2px solid #3c3c3c;
-  border-radius: 4px;
-  padding: 6px;
-  background: #001100;
-  min-height: 50px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.equipment-slot-main.equipped {
-  border-color: #00ff00;
-  background: #002200;
-  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
-}
-
-.equipment-slot-appearance.equipped {
-  border-color: #00ffff;
-  background: #002222;
-  box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
-}
-
-.slot-label {
-  font-size: 10px;
-  color: #888;
-  margin-bottom: 4px;
-}
-
-.slot-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  position: relative;
-  width: 100%;
-}
-
-.slot-item .item-icon {
-  font-size: 20px;
-}
-
-.slot-item .item-name {
-  font-size: 10px;
-  color: #00ff00;
-  text-align: center;
-}
-
-.unequip-btn, .delete-btn {
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background: #ff0000;
-  border: 1px solid #ff0000;
-  border-radius: 3px;
-  color: white;
-  font-size: 10px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.unequip-btn:hover, .delete-btn:hover {
-  background: #cc0000;
-  transform: scale(1.1);
-}
-
-.delete-btn {
-  background: #aa0000;
-  border-color: #aa0000;
-}
-
-.delete-btn:hover {
-  background: #880000;
-}
-
-.slot-empty {
-  color: #666;
-  font-size: 11px;
-}
-
-.inventory-list {
-  margin-top: 10px;
-  border: 1px solid #3c3c3c;
-  border-radius: 4px;
-  padding: 10px;
-}
-
-.inventory-list summary {
-  cursor: pointer;
-  user-select: none;
-  color: #4ec9b0;
-  font-weight: bold;
-  padding: 5px;
-  list-style-position: inside;
-}
-
-.inventory-list summary:hover {
-  background: rgba(78, 201, 176, 0.1);
-  border-radius: 4px;
-}
-
-.inventory-list[open] summary {
-  margin-bottom: 10px;
-  border-bottom: 1px solid #3c3c3c;
-  padding-bottom: 10px;
-}
-
-.inventory-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 10px;
-  max-height: 400px;
-  overflow-y: auto;
-  padding: 10px 0;
-}
-
-.inventory-item {
-  border: 2px solid #3c3c3c;
-  border-radius: 4px;
-  padding: 10px;
-  background: #001100;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  transition: all 0.2s;
-}
-
-/* 稀有度邊框顏色 */
-.inventory-item.rarity-common {
-  border-color: #9d9d9d;
-}
-
-.inventory-item.rarity-uncommon {
-  border-color: #1eff00;
-  box-shadow: 0 0 5px rgba(30, 255, 0, 0.3);
-}
-
-.inventory-item.rarity-rare {
-  border-color: #0070dd;
-  box-shadow: 0 0 8px rgba(0, 112, 221, 0.4);
-}
-
-.inventory-item.rarity-epic {
-  border-color: #a335ee;
-  box-shadow: 0 0 10px rgba(163, 53, 238, 0.5);
-}
-
-.inventory-item.rarity-legendary {
-  border-color: #ff8000;
-  box-shadow: 0 0 15px rgba(255, 128, 0, 0.6);
-  background: linear-gradient(135deg, #001100 0%, #331100 100%);
-}
-
-.inventory-item .item-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.inventory-item .item-icon {
-  font-size: 20px;
-}
-
-.inventory-item .item-name {
-  flex: 1;
-  color: #00ffff;
-  font-weight: bold;
-  font-size: 13px;
-}
-
-.inventory-item .item-count {
-  color: #888;
-  font-size: 11px;
-}
-
-.inventory-item .item-info {
-  font-size: 11px;
-  color: #aaa;
-}
-
-.inventory-item .item-type {
-  color: #4ec9b0;
-  margin-bottom: 4px;
-}
-
-.inventory-item .item-rarity {
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-
-.inventory-item .drop-rate {
-  color: #888;
-  font-size: 10px;
-  font-weight: normal;
-  margin-left: 4px;
-}
-
-.inventory-item .item-description {
-  margin-bottom: 4px;
-}
-
-.inventory-item .item-durability {
-  color: #ffaa00;
-}
-
-.inventory-item .item-actions {
-  display: flex;
-  gap: 5px;
-  flex-wrap: wrap;
-}
-
-.action-btn {
-  padding: 4px 8px;
-  font-size: 10px;
-  background: #333;
-  border: 1px solid #555;
-  color: #fff;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.action-btn:hover:not(:disabled) {
-  background: #555;
-  border-color: #777;
-}
-
-.action-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.use-btn:hover:not(:disabled) {
-  background: #00aa00;
-  border-color: #00ff00;
-}
-
-.equip-btn:hover:not(:disabled) {
-  background: #0066aa;
-  border-color: #0099ff;
-}
-
-.appearance-btn {
-  background: #333366 !important;
-  border-color: #6666aa !important;
-}
-
-.appearance-btn:hover:not(:disabled) {
-  background: #444477 !important;
-  border-color: #7777bb !important;
-}
-
-.repair-btn:hover:not(:disabled) {
-  background: #aa6600;
-  border-color: #ff9900;
-}
-
-/* 刪除區域樣式 */
-.item-delete-section {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid #333;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.delete-controls {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.delete-label {
-  color: #888;
-  font-size: 10px;
-  white-space: nowrap;
-}
-
-.delete-input {
-  width: 50px;
-  padding: 4px;
-  background: #1e1e1e;
-  border: 1px solid #3c3c3c;
-  border-radius: 3px;
-  color: #fff;
-  font-size: 11px;
-  text-align: center;
-}
-
-.delete-input:focus {
-  outline: none;
-  border-color: #ff0000;
-  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
-}
-
-.delete-max {
-  color: #666;
-  font-size: 10px;
-}
-
-.action-btn.delete-btn {
-  background: #aa0000 !important;
-  border-color: #aa0000 !important;
-  color: white !important;
-  width: 100%;
-}
-
-.action-btn.delete-btn:hover:not(:disabled) {
-  background: #cc0000 !important;
-  border-color: #cc0000 !important;
-}
-
-.inventory-empty {
-  grid-column: 1 / -1;
-  text-align: center;
-  color: #666;
-  padding: 20px;
-}
-
-.debug-input {
-  width: 100%;
-  padding: 5px;
-  margin-bottom: 5px;
-  background: #1e1e1e;
-  border: 1px solid #ff00ff;
-  color: #ff00ff;
-  font-size: 10px;
-  border-radius: 3px;
-}
-
-.debug-input:focus {
-  outline: none;
-  border-color: #ff00ff;
-  box-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
-}
-
-/* 道具效果說明 */
-.item-effects {
-  margin-top: 6px;
-  padding-top: 6px;
-  border-top: 1px solid #333;
-  font-size: 10px;
-}
-
-.effects-title {
-  color: #4ec9b0;
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-
-.effects-flat, .effects-percent {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 4px;
-}
-
-.effect-item {
-  padding: 2px 6px;
-  background: #001122;
-  border: 1px solid #3c3c3c;
-  border-radius: 3px;
-  color: #00ff00;
-  white-space: nowrap;
-}
-
-/* 道具 Tooltip 樣式 */
-.item-tooltip {
-  position: fixed;
-  background: #000;
-  border: 2px solid #00ff00;
-  border-radius: 4px;
-  padding: 10px;
-  min-width: 200px;
-  max-width: 300px;
-  z-index: 10000;
-  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
-  pointer-events: none;
-  font-size: 11px;
-}
-
-.tooltip-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 6px;
-}
-
-.tooltip-icon {
-  font-size: 20px;
-}
-
-.tooltip-name {
-  font-weight: bold;
-  font-size: 13px;
-  color: #00ffff;
-}
-
-.tooltip-rarity {
-  font-size: 10px;
-  margin-bottom: 4px;
-  font-weight: bold;
-}
-
-.tooltip-type {
-  color: #4ec9b0;
-  font-size: 10px;
-  margin-bottom: 6px;
-}
-
-.tooltip-description {
-  color: #aaa;
-  font-size: 10px;
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-
-.tooltip-effects {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid #333;
-}
-
-.tooltip-effects-title {
-  color: #4ec9b0;
-  font-weight: bold;
-  font-size: 10px;
-  margin-bottom: 4px;
-}
-
-.tooltip-effect-item {
-  color: #00ff00;
-  font-size: 10px;
-  padding: 2px 0;
-}
-
-.tooltip-durability {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid #333;
-  color: #ffaa00;
-  font-size: 10px;
-  font-weight: bold;
-}
-</style>
diff --git a/app/types/pixel.ts b/app/types/pixel.ts
new file mode 100644
index 0000000..510e3ba
--- /dev/null
+++ b/app/types/pixel.ts
@@ -0,0 +1,180 @@
+export enum StatType {
+    HP = 'HP',
+    SP = 'SP',
+    ATK = 'ATK',
+    DEF = 'DEF',
+    SPD = 'SPD',
+    LUCK = 'LCK'
+}
+
+export interface EntityStats {
+    hp: number;
+    maxHp: number;
+    sp: number;      // Re-purposed for 'Hunger' or general resource if needed
+    maxSp: number;
+    lvl: number;
+    name: string;
+    class: string;
+
+    // New Pet Fields
+    hunger?: number;
+    maxHunger?: number;
+    happiness?: number;
+    maxHappiness?: number;
+
+    age?: string;
+    generation?: number;
+    height?: string;
+    weight?: string;
+    gold?: number;
+
+    fate?: string;     // e.g. "Resource Recycling Grandma"
+    godFavor?: {
+        name: string;
+        current: number;
+        max: number;
+    };
+
+    // Detailed Stats
+    str?: number;
+    int?: number;
+    dex?: number;
+    luck?: number;
+    atk?: number;
+    def?: number;
+    spd?: number;
+}
+
+export interface ActionItem {
+    id: string;
+    name: string;
+    iconName: string; // Mapping to Lucide icon
+    cooldown: number;
+    cost: number;
+}
+
+export interface EquipmentSlot {
+    slot: string;
+    item: string;
+}
+
+export interface Achievement {
+    id: string;
+    title: string;
+    description: string;
+    reward?: string;
+    progress: number; // 0 to 100 percentage
+    currentValue?: number;
+    maxValue?: number;
+    unlocked: boolean;
+    icon: string; // Helper to map to Lucide icon in component
+    color?: string;
+}
+
+// --- Inventory System Types ---
+
+export enum Rarity {
+    Common = 'Common',
+    Excellent = 'Excellent',
+    Rare = 'Rare',
+    Epic = 'Epic',
+    Legendary = 'Legendary'
+}
+
+export enum ItemType {
+    Equipment = 'Equipment',
+    Consumable = 'Consumable'
+}
+
+export enum ItemCategory {
+    Food = 'Food',
+    Medicine = 'Medicine',
+    Equipment = 'Equipment',
+    Toy = 'Toy',
+    Accessory = 'Accessory',
+    Misc = 'Misc'
+}
+
+export enum EquipSlot {
+    Weapon = 'Weapon',
+    Armor = 'Armor',
+    Hat = 'Hat',
+    Accessory = 'Accessory',
+    Charm = 'Charm',
+    Special = 'Special'
+}
+
+export interface Item {
+    id: string;
+    name: string;
+    type: ItemType;
+    category?: ItemCategory; // New field for Shop filters
+    price: number;           // New field for Shop
+    slot?: EquipSlot; // Only for Equipment
+    rarity: Rarity;
+    description: string;
+    statsDescription?: string; // e.g. "DEF +8 MaxHP +10"
+    effects?: string[];
+    icon: string;
+    quantity?: number; // For consumables
+
+    // State helpers
+    isEquipped?: boolean;
+    isAppearance?: boolean; // If true, it's in the appearance slot
+}
+
+// --- God System Types ---
+
+export enum DeityId {
+    Mazu = 'Mazu',         // 媽祖
+    EarthGod = 'EarthGod', // 土地公
+    Matchmaker = 'Matchmaker', // 月老
+    Wenchang = 'Wenchang'  // 文昌
+}
+
+export enum JiaobeiResult {
+    Saint = 'Saint',   // 聖杯 (One up, one down) - YES
+    Smile = 'Smile',   // 笑杯 (Two flat faces up) - LAUGH/MAYBE
+    Cry = 'Cry',       // 陰杯 (Two round faces up) - NO
+    None = 'None'
+}
+
+export enum LotPhase {
+    Idle = 'Idle',
+    Drawing = 'Drawing',    // Shaking the cylinder
+    PendingVerify = 'PendingVerify', // Lot drawn, needs 3 saint cups
+    Verifying = 'Verifying', // Tossing blocks
+    Success = 'Success',    // Got 3 saint cups
+    Failed = 'Failed'       // Failed mid-way
+}
+
+export interface Deity {
+    id: DeityId;
+    name: string;
+    title: string;
+    description: string;
+    favor: number;
+    maxFavor: number;
+    colors: {
+        skin: string;
+        hair: string;
+        outfit: string;
+        accessory: string;
+    };
+}
+
+// --- Adventure System Types ---
+
+export interface AdventureLocation {
+    id: string;
+    name: string;
+    description: string;
+    costHunger: number;
+    costGold: number;
+    reqStats?: {
+        str?: number;
+        int?: number;
+    };
+    difficulty: 'Easy' | 'Medium' | 'Hard';
+    enemyName: string;
+}
diff --git a/components/pixel/ActionMenu.vue b/components/pixel/ActionMenu.vue
deleted file mode 100644
index 75f5a26..0000000
--- a/components/pixel/ActionMenu.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <PixelCard class="action-menu">
-    <h3 class="panel-title">Actions</h3>
-    <div class="action-grid">
-      <PixelButton 
-        size="small"
-        variant="success"
-        @click="$emit('feed')"
-        :disabled="!canFeed"
-      >
-        🍖 Feed
-      </PixelButton>
-      
-      <PixelButton 
-        size="small"
-        variant="primary"
-        @click="$emit('play')"
-        :disabled="!canPlay"
-      >
-        🎮 Play
-      </PixelButton>
-      
-      <PixelButton 
-        size="small"
-        variant="warning"
-        @click="$emit('clean')"
-        :disabled="!canClean"
-      >
-        🧹 Clean
-      </PixelButton>
-      
-      <PixelButton 
-        size="small"
-        variant="success"
-        @click="$emit('heal')"
-        :disabled="!canHeal"
-      >
-        💊 Heal
-      </PixelButton>
-      
-      <PixelButton 
-        size="small"
-        variant="primary"
-        @click="$emit('sleep')"
-        :disabled="!canSleep"
-      >
-        {{ isSleeping ? '⏰ Wake' : '💤 Sleep' }}
-      </PixelButton>
-      
-      <PixelButton 
-        size="small"
-        variant="warning"
-        @click="$emit('shop')"
-      >
-        💰 Shop
-      </PixelButton>
-    </div>
-  </PixelCard>
-</template>
-
-<script setup>
-import PixelCard from './PixelCard.vue'
-import PixelButton from './PixelButton.vue'
-
-const props = defineProps({
-  canFeed: {
-    type: Boolean,
-    default: true
-  },
-  canPlay: {
-    type: Boolean,
-    default: true
-  },
-  canClean: {
-    type: Boolean,
-    default: true
-  },
-  canHeal: {
-    type: Boolean,
-    default: true
-  },
-  canSleep: {
-    type: Boolean,
-    default: true
-  },
-  isSleeping: {
-    type: Boolean,
-    default: false
-  }
-})
-
-defineEmits(['feed', 'play', 'clean', 'heal', 'sleep', 'shop'])
-</script>
-
-<style scoped>
-.action-menu {
-  width: 100%;
-}
-
-.panel-title {
-  font-size: 14px;
-  margin-bottom: 16px;
-  text-align: center;
-  text-transform: uppercase;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #000;
-}
-
-.action-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 12px;
-}
-</style>
diff --git a/components/pixel/InfoPanel.vue b/components/pixel/InfoPanel.vue
deleted file mode 100644
index 80b16f1..0000000
--- a/components/pixel/InfoPanel.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <PixelCard class="info-panel">
-    <div class="tabs">
-      <button 
-        v-for="tab in tabs" 
-        :key="tab.id"
-        :class="['tab-btn', { active: activeTab === tab.id }]"
-        @click="activeTab = tab.id"
-      >
-        {{ tab.icon }} {{ tab.label }}
-      </button>
-    </div>
-    
-    <div class="tab-content">
-      <div v-if="activeTab === 'stats'" class="stats-grid">
-        <div class="stat-item">
-          <span class="stat-label">STR</span>
-          <span class="stat-value">{{ petStats.str || 0 }}</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-label">INT</span>
-          <span class="stat-value">{{ petStats.int || 0 }}</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-label">DEX</span>
-          <span class="stat-value">{{ petStats.dex || 0 }}</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-label">LUCK</span>
-          <span class="stat-value">{{ petStats.luck || 0 }}</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-label">AGE</span>
-          <span class="stat-value">{{ formatAge(petStats.ageSeconds) }}</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-label">STAGE</span>
-          <span class="stat-value">{{ petStats.stage || 'egg' }}</span>
-        </div>
-      </div>
-      
-      <div v-if="activeTab === 'inventory'" class="inventory-content">
-        <p class="placeholder-text">Inventory system (coming soon)</p>
-      </div>
-      
-      <div v-if="activeTab === 'achievements'" class="achievement-content">
-        <p class="placeholder-text">Achievements (coming soon)</p>
-      </div>
-      
-      <div v-if="activeTab === 'temple'" class="temple-content">
-        <p class="placeholder-text">Temple system (coming soon)</p>
-      </div>
-    </div>
-  </PixelCard>
-</template>
-
-<script setup>
-import PixelCard from './PixelCard.vue'
-
-const props = defineProps({
-  petStats: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const activeTab = ref('stats')
-
-const tabs = [
-  { id: 'stats', label: 'Stats', icon: '📊' },
-  { id: 'inventory', label: 'Items', icon: '🎒' },
-  { id: 'achievements', label: 'Medals', icon: '🏆' },
-  { id: 'temple', label: 'Temple', icon: '🙏' }
-]
-
-const formatAge = (seconds) => {
-  if (!seconds) return '0h'
-  const hours = Math.floor(seconds / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60)
-  if (hours > 0) {
-    return `${hours}h ${minutes}m`
-  }
-  return `${minutes}m`
-}
-</script>
-
-<style scoped>
-.info-panel {
-  width: 100%;
-}
-
-.tabs {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-  border-bottom: 3px solid #000;
-  padding-bottom: 8px;
-}
-
-.tab-btn {
-  font-family: 'Press Start 2P', cursive;
-  background: white;
-  border: 2px solid #000;
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 10px;
-  transition: all 0.1s ease;
-}
-
-.tab-btn:hover {
-  background: #f0f0f0;
-}
-
-.tab-btn.active {
-  background: #3498db;
-  color: white;
-  transform: translateY(2px);
-}
-
-.tab-content {
-  min-height: 200px;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 12px;
-}
-
-.stat-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px;
-  background: #f8f8f8;
-  border: 2px solid #000;
-  font-size: 10px;
-}
-
-.stat-label {
-  font-weight: bold;
-}
-
-.stat-value {
-  color: #3498db;
-}
-
-.placeholder-text {
-  text-align: center;
-  color: #888;
-  font-size: 10px;
-  padding: 40px 20px;
-}
-</style>
diff --git a/components/pixel/InventoryModal.vue b/components/pixel/InventoryModal.vue
deleted file mode 100644
index 658b7bc..0000000
--- a/components/pixel/InventoryModal.vue
+++ /dev/null
@@ -1,468 +0,0 @@
-<template>
-  <div v-if="isOpen" class="inventory-modal" @click.self="close">
-    <div class="inventory-container">
-      <!-- 標題欄 -->
-      <div class="inventory-header">
-        <h3>🎒 Inventory</h3>
-        <button class="close-btn" @click="close">✕</button>
-      </div>
-
-      <!-- 主要內容 -->
-      <div class="inventory-content">
-        <!-- 左側：角色裝備 -->
-        <div class="equipment-panel">
-          <div class="character-display">
-            <div class="pet-preview"></div>
-          </div>
-          <div class="equipment-slots">
-            <div class="equip-slot head" title="Head">
-              <span class="slot-icon">🎩</span>
-            </div>
-            <div class="equip-slot body" title="Body">
-              <span class="slot-icon">👕</span>
-            </div>
-            <div class="equip-slot accessory" title="Accessory">
-              <span class="slot-icon">💍</span>
-            </div>
-          </div>
-          
-          <!-- 快速資訊 -->
-          <div class="quick-stats">
-            <div class="stat-row">
-              <span>💰</span>
-              <span>{{ coins }}</span>
-            </div>
-            <div class="stat-row">
-              <span>⚔️</span>
-              <span>{{ attack }}</span>
-            </div>
-            <div class="stat-row">
-              <span>🛡️</span>
-              <span>{{ defense }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 右側：物品格子 -->
-        <div class="items-panel">
-          <!-- 分類標籤 -->
-          <div class="category-tabs">
-            <button 
-              v-for="category in categories" 
-              :key="category.id"
-              :class="['tab', { active: activeCategory === category.id }]"
-              @click="activeCategory = category.id"
-            >
-              {{ category.icon }} {{ category.name }}
-            </button>
-          </div>
-
-          <!-- 物品網格 -->
-          <div class="item-grid">
-            <div 
-              v-for="i in 24" 
-              :key="i"
-              class="item-slot"
-              :class="{ filled: items[i - 1] }"
-              @click="selectItem(i - 1)"
-            >
-              <span v-if="items[i - 1]" class="item-icon">
-                {{ items[i - 1].icon }}
-              </span>
-              <span v-if="items[i - 1] && items[i - 1].count > 1" class="item-count">
-                {{ items[i - 1].count }}
-              </span>
-            </div>
-          </div>
-
-          <!-- 底部操作欄 -->
-          <div class="action-bar">
-            <button class="action-btn" @click="useItem">Use</button>
-            <button class="action-btn" @click="dropItem">Drop</button>
-            <button class="action-btn sort" @click="sortItems">Sort</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  isOpen: {
-    type: Boolean,
-    default: false
-  },
-  coins: {
-    type: Number,
-    default: 0
-  },
-  attack: {
-    type: Number,
-    default: 10
-  },
-  defense: {
-    type: Number,
-    default: 5
-  }
-})
-
-const emit = defineEmits(['close', 'use-item', 'drop-item'])
-
-const activeCategory = ref('all')
-const selectedSlot = ref(null)
-
-const categories = [
-  { id: 'all', name: 'All', icon: '📦' },
-  { id: 'equipment', name: 'Gear', icon: '⚔️' },
-  { id: 'consumable', name: 'Food', icon: '🍖' },
-  { id: 'material', name: 'Items', icon: '💎' }
-]
-
-// 示例物品數據
-const items = ref([
-  { icon: '🍖', count: 5 },
-  { icon: '💊', count: 3 },
-  { icon: '🗡️', count: 1 },
-  { icon: '🛡️', count: 1 },
-  null, null, null, null,
-  { icon: '💎', count: 10 },
-  null, null, null,
-  null, null, null, null,
-  null, null, null, null,
-  null, null, null, null
-])
-
-const close = () => {
-  emit('close')
-}
-
-const selectItem = (index) => {
-  selectedSlot.value = index
-}
-
-const useItem = () => {
-  if (selectedSlot.value !== null && items.value[selectedSlot.value]) {
-    emit('use-item', items.value[selectedSlot.value])
-  }
-}
-
-const dropItem = () => {
-  if (selectedSlot.value !== null && items.value[selectedSlot.value]) {
-    emit('drop-item', items.value[selectedSlot.value])
-    items.value[selectedSlot.value] = null
-  }
-}
-
-const sortItems = () => {
-  // 簡單排序邏輯
-  const nonNullItems = items.value.filter(item => item !== null)
-  items.value = [...nonNullItems, ...Array(24 - nonNullItems.length).fill(null)]
-}
-</script>
-
-<style scoped>
-.inventory-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.inventory-container {
-  width: 90%;
-  max-width: 800px;
-  max-height: 90vh;
-  background: var(--color-panel);
-  border: 3px solid var(--color-accent);
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
-  overflow-y: auto;
-}
-
-/* 手機直向 */
-@media (max-width: 480px) {
-  .inventory-container {
-    width: 95%;
-    max-width: none;
-    max-height: 95vh;
-    border-radius: 12px;
-  }
-}
-
-/* 平板 */
-@media (min-width: 481px) and (max-width: 768px) {
-  .inventory-container {
-    width: 92%;
-  }
-}
-
-.inventory-header {
-  background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
-  padding: 16px 20px;
-  border-radius: 12px 12px 0 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 3px solid #5a4a3a;
-}
-
-.inventory-header h3 {
-  margin: 0;
-  color: white;
-  font-size: 18px;
-  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
-}
-
-.close-btn {
-  width: 32px;
-  height: 32px;
-  background: rgba(255, 255, 255, 0.2);
-  border: 2px solid white;
-  border-radius: 8px;
-  color: white;
-  font-size: 18px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.close-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: scale(1.1);
-}
-
-.inventory-content {
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: 16px;
-  padding: 16px;
-  min-height: 500px;
-}
-
-/* 手機直向：垂直堆疊 */
-@media (max-width: 480px) {
-  .inventory-content {
-    grid-template-columns: 1fr;
-    gap: 12px;
-    padding: 12px;
-    min-height: auto;
-  }
-  
-  .equipment-panel {
-    max-height: 200px;
-  }
-}
-
-/* 手機橫向 */
-@media (max-width: 768px) and (orientation: landscape) {
-  .inventory-content {
-    min-height: 300px;
-  }
-}
-
-/* 左側裝備欄 */
-.equipment-panel {
-  background: rgba(255, 255, 255, 0.6);
-  border: 3px solid #5a4a3a;
-  border-radius: 12px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.character-display {
-  width: 100%;
-  height: 150px;
-  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
-  border: 3px solid #5a4a3a;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pet-preview {
-  width: 80px;
-  height: 80px;
-  background: #ff6b9d;
-  border: 3px solid #5a4a3a;
-  border-radius: 50%;
-}
-
-.equipment-slots {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.equip-slot {
-  height: 48px;
-  background: rgba(255, 255, 255, 0.8);
-  border: 3px solid #5a4a3a;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.equip-slot:hover {
-  background: #ffeaa7;
-  transform: scale(1.05);
-}
-
-.quick-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-top: 8px;
-  border-top: 2px solid #5a4a3a;
-}
-
-.stat-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 4px 8px;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-/* 右側物品欄 */
-.items-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.category-tabs {
-  display: flex;
-  gap: 8px;
-}
-
-.tab {
-  padding: 8px 16px;
-  background: rgba(255, 255, 255, 0.6);
-  border: 3px solid #5a4a3a;
-  border-radius: 8px;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.tab:hover {
-  background: rgba(255, 255, 255, 0.8);
-}
-
-.tab.active {
-  background: linear-gradient(135deg, #74b9ff 0%, #a29bfe 100%);
-  color: white;
-  transform: translateY(-2px);
-}
-
-.item-grid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 8px;
-  background: var(--color-panel-light);
-  border: 2px solid var(--color-border);
-  border-radius: 12px;
-  padding: 12px;
-  flex: 1;
-}
-
-/* 手機直向：4列 */
-@media (max-width: 480px) {
-  .item-grid {
-    grid-template-columns: repeat(4, 1fr);
-    gap: 6px;
-    padding: 8px;
-  }
-}
-
-/* 平板：5列 */
-@media (min-width: 481px) and (max-width: 768px) {
-  .item-grid {
-    grid-template-columns: repeat(5, 1fr);
-  }
-}
-
-.item-slot {
-  aspect-ratio: 1;
-  background: rgba(255, 255, 255, 0.8);
-  border: 3px solid #5a4a3a;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 28px;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s;
-}
-
-.item-slot:hover {
-  background: #ffeaa7;
-  transform: scale(1.05);
-}
-
-.item-slot.filled {
-  background: rgba(255, 255, 255, 1);
-}
-
-.item-count {
-  position: absolute;
-  bottom: 2px;
-  right: 4px;
-  font-size: 10px;
-  font-weight: bold;
-  background: rgba(0, 0, 0, 0.6);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 4px;
-}
-
-.action-bar {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-}
-
-.action-btn {
-  padding: 12px 24px;
-  background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);
-  border: 3px solid #5a4a3a;
-  border-radius: 8px;
-  color: white;
-  font-weight: bold;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
-}
-
-.action-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.action-btn:active {
-  transform: translateY(0);
-}
-
-.action-btn.sort {
-  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
-}
-</style>
diff --git a/components/pixel/PetHUD.vue b/components/pixel/PetHUD.vue
deleted file mode 100644
index 7e3f174..0000000
--- a/components/pixel/PetHUD.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<template>
-  <div class="rpg-hud">
-    <div class="hud-container">
-      <!-- 左側圓形頭像框 -->
-      <div class="avatar-circle">
-        <div class="circle-border-outer"></div>
-        <div class="circle-border-inner"></div>
-        <div class="pet-avatar" :class="petEmotion">
-          <div class="eye left"></div>
-          <div class="eye right"></div>
-          <div class="mouth"></div>
-        </div>
-      </div>
-
-      <!-- 右側血條面板 -->
-      <div class="bars-panel">
-        <!-- HP 條 -->
-        <div class="stat-row">
-          <div class="bar-container">
-            <div class="bar-bg"></div>
-            <div class="bar-fill hp" :style="{ width: `${healthPercent}%` }"></div>
-          </div>
-          <span class="stat-value">{{ Math.round(health) }}/{{ maxHealth }}</span>
-        </div>
-
-        <!-- 飢餓條 -->
-        <div class="stat-row">
-          <div class="bar-container">
-            <div class="bar-bg"></div>
-            <div class="bar-fill hunger" :style="{ width: `${hunger}%` }"></div>
-          </div>
-          <span class="stat-value">{{ Math.round(hunger) }}</span>
-        </div>
-
-        <!-- 快樂條 -->
-        <div class="stat-row">
-          <div class="bar-container">
-            <div class="bar-bg"></div>
-            <div class="bar-fill happiness" :style="{ width: `${happiness}%` }"></div>
-          </div>
-          <span class="stat-value">{{ Math.round(happiness) }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  petName: { type: String, default: 'Pet' },
-  health: { type: Number, default: 100 },
-  maxHealth: { type: Number, default: 100 },
-  hunger: { type: Number, default: 100 },
-  happiness: { type: Number, default: 100 },
-  petEmotion: { type: String, default: 'happy' }
-})
-
-const healthPercent = computed(() => {
-  return Math.min(100, Math.max(0, (props.health / props.maxHealth) * 100))
-})
-</script>
-
-<style scoped>
-.rpg-hud {
-  position: fixed;
-  top: 16px;
-  left: 16px;
-  z-index: 100;
-}
-
-.hud-container {
-  display: flex;
-  align-items: center;
-  gap: 0;
-}
-
-/* 圓形頭像框 */
-.avatar-circle {
-  width: 64px;
-  height: 64px;
-  position: relative;
-  flex-shrink: 0;
-}
-
-.circle-border-outer {
-  position: absolute;
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  background: var(--color-accent);
-  border: 4px solid var(--color-border);
-  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.2);
-}
-
-.circle-border-inner {
-  position: absolute;
-  top: 6px;
-  left: 6px;
-  width: 46px;
-  height: 46px;
-  border-radius: 50%;
-  background: var(--color-panel);
-  border: 3px solid var(--color-border);
-}
-
-.pet-avatar {
-  position: absolute;
-  top: 9px;
-  left: 9px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
-}
-
-.eye {
-  position: absolute;
-  width: 5px;
-  height: 5px;
-  background: #2a2420;
-  border-radius: 50%;
-  top: 45%;
-  transform: translateY(-50%);
-}
-
-.eye.left { left: 28%; }
-.eye.right { right: 28%; }
-
-.mouth {
-  position: absolute;
-  width: 9px;
-  height: 4px;
-  border: 2px solid #2a2420;
-  border-top: none;
-  border-radius: 0 0 5px 5px;
-  bottom: 30%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.pet-avatar.sad .mouth {
-  border-radius: 5px 5px 0 0;
-  border-top: 2px solid #2a2420;
-  border-bottom: none;
-}
-
-/* 血條面板 */
-.bars-panel {
-  background: var(--color-panel);
-  border: 3px solid var(--color-border);
-  border-left: none;
-  border-radius: 0 8px 8px 0;
-  padding: 6px 8px 6px 12px;
-  margin-left: -6px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1);
-}
-
-.stat-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.bar-container {
-  width: 110px;
-  height: 14px;
-  position: relative;
-}
-
-.bar-bg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: var(--color-panel-light);
-  border: 2px solid var(--color-border);
-  border-radius: 2px;
-  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
-}
-
-.bar-fill {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  height: calc(100% - 4px);
-  border-radius: 1px;
-  transition: width 0.4s ease;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
-}
-
-.bar-fill.hp {
-  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
-}
-
-.bar-fill.hunger {
-  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
-}
-
-.bar-fill.happiness {
-  background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
-}
-
-.stat-value {
-  font-size: 9px;
-  color: var(--color-text);
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
-  min-width: 42px;
-  text-align: right;
-  font-weight: bold;
-  letter-spacing: 0.3px;
-}
-
-/* 手機直向 */
-@media (max-width: 480px) {
-  .rpg-hud {
-    transform: scale(0.8);
-    transform-origin: top left;
-  }
-}
-
-/* 平板 */
-@media (min-width: 481px) and (max-width: 768px) {
-  .rpg-hud {
-    transform: scale(0.9);
-    transform-origin: top left;
-  }
-}
-</style>
diff --git a/components/pixel/PetScreen.vue b/components/pixel/PetScreen.vue
deleted file mode 100644
index 5ad20f9..0000000
--- a/components/pixel/PetScreen.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
- <PixelCard size="large" class="pet-screen">
-    <div class="screen-header">
-      <h2 class="pet-name">{{ petName }}</h2>
-    </div>
-    <div class="pet-viewport">
-      <div class="background-animation">
-        <!-- CSS animated background -->
-        <div class="cloud cloud-1"></div>
-        <div class="cloud cloud-2"></div>
-        <div class="cloud cloud-3"></div>
-      </div>
-      <div class="pet-sprite" :class="petEmotion">
-        <!-- CSS-based pet pixel art -->
-        <div class="pet-body"></div>
-        <div class="pet-eye-left"></div>
-        <div class="pet-eye-right"></div>
-        <div class="pet-mouth"></div>
-      </div>
-      <div v-if="poopCount > 0" class="poop-container">
-        <div v-for="i in Math.min(poopCount, 4)" :key="i" class="poop-pile">
-          <div class="poop-base"></div>
-          <div class="poop-stink"></div>
-        </div>
-      </div>
-    </div>
-  </PixelCard>
-</template>
-
-<script setup>
-import PixelCard from './PixelCard.vue'
-
-const props = defineProps({
-  petName: {
-    type: String,
-    default: 'Pet'
-  },
-  petStage: {
-    type: String,
-    default: 'egg'
-  },
-  petEmotion: {
-    type: String,
-    default: 'happy'
-  },
-  poopCount: {
-    type: Number,
-    default: 0
-  }
-})
-</script>
-
-<style scoped>
-.pet-screen {
-  width: 100%;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.screen-header {
-  text-align: center;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 3px solid #000;
-}
-
-.pet-name {
-  font-size: 16px;
-  text-transform: uppercase;
-}
-
-.pet-viewport {
-  position: relative;
-  width: 100%;
-  height: 300px;
-  background: linear-gradient(180deg, #87CEEB 0%, #E0F6FF 100%);
-  overflow: hidden;
-  border: 3px solid #000;
-}
-
-/* Background clouds animation */
-.background-animation {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.cloud {
-  position: absolute;
-  background: white;
-  border: 2px solid #ddd;
-  border-radius: 50%;
-  opacity: 0.7;
-  animation: float 20s infinite linear;
-}
-
-.cloud-1 {
-  width: 60px;
-  height: 30px;
-  top: 20%;
-  left: -60px;
-}
-
-.cloud-2 {
-  width: 80px;
-  height: 40px;
-  top: 40%;
-  left: -80px;
-  animation-delay: -7s;
-  animation-duration: 25s;
-}
-
-.cloud-3 {
-  width: 50px;
-  height: 25px;
-  top: 60%;
-  left: -50px;
-  animation-delay: -14s;
-  animation-duration: 30s;
-}
-
-@keyframes float {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(calc(600px + 100%));
-  }
-}
-
-/* Pet sprite */
-.pet-sprite {
-  position: absolute;
-  bottom: 80px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80px;
-  height: 80px;
-  image-rendering: pixelated;
-}
-
-.pet-body {
-  width: 60px;
-  height: 60px;
-  background: #FFD700;
-  border: 3px solid #000;
-  position: absolute;
-  bottom: 0;
-  left: 10px;
-  border-radius: 8px;
-}
-
-.pet-eye-left,
-.pet-eye-right {
-  width: 8px;
-  height: 8px;
-  background: #000;
-  border-radius: 50%;
-  position: absolute;
-  top: 20px;
-}
-
-.pet-eye-left {
-  left: 25px;
-}
-
-.pet-eye-right {
-  right: 25px;
-}
-
-.pet-mouth {
-  width: 20px;
-  height: 10px;
-  border: 2px solid #000;
-  border-top: none;
-  border-radius: 0 0 10px 10px;
-  position: absolute;
-  bottom: 15px;
-  left: 30px;
-}
-
-/* Emotions */
-.pet-sprite.happy .pet-mouth {
-  border-radius: 0 0 20px 20px;
-  height: 12px;
-}
-
-.pet-sprite.sad .pet-mouth {
-  border-radius: 20px 20px 0 0;
-  border-top: 2px solid #000;
-  border-bottom: none;
-  bottom: 20px;
-}
-
-.pet-sprite.sick {
-  filter: hue-rotate(90deg);
-}
-
-/* Poop */
-.poop-container {
-  position: absolute;
-  bottom: 60px;
-  left: 20px;
-  display: flex;
-  gap: 10px;
-}
-
-.poop-pile {
-  position: relative;
-  width: 30px;
-  height: 30px;
-}
-
-.poop-base {
-  width: 24px;
-  height: 24px;
-  background: #8B4513;
-  border: 2px solid #000;
-  border-radius: 50% 50% 40% 40%;
-  position: absolute;
-  bottom: 0;
-}
-
-.poop-stink {
-  width: 4px;
-  height: 12px;
-  background: #888;
-  opacity: 0.5;
-  position: absolute;
-  top: -12px;
-  left: 10px;
-  animation: stinkWave 1.5s infinite;
-}
-
-@keyframes stinkWave {
-  0%, 100% { 
-    transform: translateY(0);
-    opacity: 0.5;
-  }
-  50% { 
-    transform: translateY(-8px);
-    opacity: 0.2;
-  }
-}
-</style>
diff --git a/components/pixel/PixelButton.vue b/components/pixel/PixelButton.vue
deleted file mode 100644
index 152eefe..0000000
--- a/components/pixel/PixelButton.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <button 
-    class="pixel-button"
-    :class="[variantClass, sizeClass, { disabled }]"
-    :disabled="disabled"
-    @click="handleClick"
-  >
-    <slot />
-  </button>
-</template>
-
-<script setup>
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'primary', // 'primary', 'success', 'danger', 'warning'
-    validator: (value) => ['primary', 'success', 'danger', 'warning'].includes(value)
-  },
-  size: {
-    type: String,
-    default: 'normal', // 'small', 'normal', 'large'
-    validator: (value) => ['small', 'normal', 'large'].includes(value)
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const emit = defineEmits(['click'])
-
-const variantClass = computed(() => `variant-${props.variant}`)
-const sizeClass = computed(() => `size-${props.size}`)
-
-const handleClick = (event) => {
-  if (!props.disabled) {
-    emit('click', event)
-  }
-}
-</script>
-
-<style scoped>
-.pixel-button {
-  font-family: 'Press Start 2P', cursive;
-  border: 3px solid #000;
-  padding: 12px 24px;
-  cursor: pointer;
-  position: relative;
-  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
-  transition: all 0.1s ease;
-  image-rendering: pixelated;
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.pixel-button:hover:not(.disabled) {
-  transform: translate(-1px, -1px);
-  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.4);
-}
-
-.pixel-button:active:not(.disabled) {
-  transform: translate(2px, 2px);
-  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
-}
-
-.pixel-button.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Variants */
-.pixel-button.variant-primary {
-  background: var(--color-primary);
-  color: white;
-}
-
-.pixel-button.variant-success {
-  background: var(--color-success);
-  color: white;
-}
-
-.pixel-button.variant-danger {
-  background: var(--color-danger);
-  color: white;
-}
-
-.pixel-button.variant-warning {
-  background: var(--color-warning);
-  color: white;
-}
-
-/* Sizes */
-.pixel-button.size-small {
-  padding: 8px 16px;
-  font-size: 10px;
-}
-
-.pixel-button.size-normal {
-  padding: 12px 24px;
-  font-size: 12px;
-}
-
-.pixel-button.size-large {
-  padding: 16px 32px;
-  font-size: 14px;
-}
-</style>
diff --git a/components/pixel/PixelCard.vue b/components/pixel/PixelCard.vue
deleted file mode 100644
index 072fafa..0000000
--- a/components/pixel/PixelCard.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="pixel-card" :class="[sizeClass, { clickable }]">
-    <slot />
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  size: {
-    type: String,
-    default: 'normal', // 'small', 'normal', 'large'
-    validator: (value) => ['small', 'normal', 'large'].includes(value)
-  },
-  clickable: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const sizeClass = computed(() => `size-${props.size}`)
-</script>
-
-<style scoped>
-.pixel-card {
-  background: white;
-  border: var(--pixel-border) solid #000;
-  box-shadow: var(--pixel-shadow);
-  padding: 16px;
-  position: relative;
-  image-rendering: pixelated;
-}
-
-.pixel-card.clickable {
-  cursor: pointer;
-  transition: transform 0.1s ease;
-}
-
-.pixel-card.clickable:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
-}
-
-.pixel-card.clickable:active {
-  transform: translate(2px, 2px);
-  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
-}
-
-.pixel-card.size-small {
-  padding: 8px;
-  font-size: 10px;
-}
-
-.pixel-card.size-normal {
-  padding: 16px;
-  font-size: 12px;
-}
-
-.pixel-card.size-large {
-  padding: 24px;
-  font-size: 14px;
-}
-</style>
diff --git a/components/pixel/PixelProgressBar.vue b/components/pixel/PixelProgressBar.vue
deleted file mode 100644
index 3b7f8ad..0000000
--- a/components/pixel/PixelProgressBar.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <div class="pixel-progress-bar">
-    <div class="progress-label" v-if="label">{{ label }}</div>
-    <div class="progress-container">
-      <div 
-        class="progress-fill"
-        :class="[colorClass, { striped }]"
-        :style="{ width: `${clampedValue}%` }"
-      >
-        <div v-if="striped" class="stripes"></div>
-      </div>
-    </div>
-    <div class="progress-value" v-if="showValue">
-      {{ current !== null ? `${Math.round(current)}/${max}` : `${Math.round(clampedValue)}%` }}
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  value: {
-    type: Number,
-    required: true
-  },
-  max: {
-    type: Number,
-    default: 100
-  },
-  current: {
-    type: Number,
-    default: null
-  },
-  label: {
-    type: String,
-    default: ''
-  },
-  color: {
-    type: String,
-    default: 'primary', // 'primary', 'success', 'danger', 'warning'
-    validator: (value) => ['primary', 'success', 'danger', 'warning'].includes(value)
-  },
-  striped: {
-    type: Boolean,
-    default: false
-  },
-  showValue: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const clampedValue = computed(() => {
-  if (props.current !== null) {
-    return Math.min(100, Math.max(0, (props.current / props.max) * 100))
-  }
-  return Math.min(100, Math.max(0, props.value))
-})
-
-const colorClass = computed(() => `color-${props.color}`)
-</script>
-
-<style scoped>
-.pixel-progress-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 10px;
-}
-
-.progress-label {
-  min-width: 80px;
-  font-weight: bold;
-}
-
-.progress-container {
-  flex: 1;
-  height: 24px;
-  background: #ddd;
-  border: 3px solid #000;
-  position: relative;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  transition: width 0.3s ease;
-  position: relative;
-}
-
-.progress-fill.color-primary {
-  background: var(--color-primary);
-}
-
-.progress-fill.color-success {
-  background: var(--color-success);
-}
-
-.progress-fill.color-danger {
-  background: var(--color-danger);
-}
-
-.progress-fill.color-warning {
-  background: var(--color-warning);
-}
-
-.progress-fill.striped {
-  background-image: repeating-linear-gradient(
-    45deg,
-    transparent,
-    transparent 10px,
-    rgba(0, 0, 0, 0.1) 10px,
-    rgba(0, 0, 0, 0.1) 20px
-  );
-}
-
-.progress-value {
-  min-width: 70px;
-  text-align: right;
-  font-weight: bold;
-}
-</style>
diff --git a/components/pixel/ScrollableScene.vue b/components/pixel/ScrollableScene.vue
deleted file mode 100644
index 036d219..0000000
--- a/components/pixel/ScrollableScene.vue
+++ /dev/null
@@ -1,337 +0,0 @@
-<template>
-  <div class="scrollable-scene">
-    <!-- 背景層 -->
-    <div class="scene-background" :style="{ transform: `translateX(${-scrollPosition}px)` }">
-      <!-- 遠景 -->
-      <div class="bg-layer far-bg">
-        <div class="cloud" style="left: 100px; top: 50px;"></div>
-        <div class="cloud" style="left: 400px; top: 80px;"></div>
-        <div class="cloud" style="left: 700px; top: 40px;"></div>
-        <div class="mountain" style="left: 200px;"></div>
-        <div class="mountain" style="left: 600px;"></div>
-      </div>
-      
-      <!-- 中景 -->
-      <div class="bg-layer mid-bg">
-        <div class="tree" style="left: 150px;"></div>
-        <div class="tree" style="left: 550px;"></div>
-        <div class="tree" style="left: 900px;"></div>
-      </div>
-    </div>
-
-    <!-- 前景 - 地面 -->
-    <div class="scene-ground">
-      <div class="grass-pattern"></div>
-    </div>
-
-    <!-- 寵物 -->
-    <div 
-      class="pet-character" 
-      :class="[petEmotion, { walking: isWalking }]"
-      :style="{ left: petPosition + 'px' }"
-    >
-      <div class="pet-body"></div>
-    </div>
-
-    <!-- 互動物件 -->
-    <div class="scene-objects">
-      <div class="object food-bowl" style="left: 300px;" @click="$emit('interact', 'food')">
-        🍖
-      </div>
-      <div class="object toy" style="left: 500px;" @click="$emit('interact', 'toy')">
-        🎾
-      </div>
-      <div class="object bed" style="left: 700px;" @click="$emit('interact', 'bed')">
-        🛏️
-      </div>
-    </div>
-
-    <!-- 捲軸控制 (開發用) -->
-    <div class="scroll-controls">
-      <button @click="scrollLeft" class="scroll-btn">◀</button>
-      <button @click="scrollRight" class="scroll-btn">▶</button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  petEmotion: {
-    type: String,
-    default: 'happy'
-  }
-})
-
-const emit = defineEmits(['interact'])
-
-const scrollPosition = ref(0)
-const petPosition = ref(200)
-const isWalking = ref(false)
-
-const scrollLeft = () => {
-  if (scrollPosition.value > 0) {
-    scrollPosition.value = Math.max(0, scrollPosition.value - 100)
-  }
-}
-
-const scrollRight = () => {
-  if (scrollPosition.value < 600) {
-    scrollPosition.value = Math.min(600, scrollPosition.value + 100)
-  }
-}
-
-// 自動移動寵物 (示例)
-setInterval(() => {
-  const randomMove = Math.random() > 0.5
-  if (randomMove) {
-    isWalking.value = true
-    petPosition.value += (Math.random() - 0.5) * 50
-    petPosition.value = Math.max(50, Math.min(750, petPosition.value))
-    
-    setTimeout(() => {
-      isWalking.value = false
-    }, 1000)
-  }
-}, 3000)
-</script>
-
-<style scoped>
-.scrollable-scene {
-  width: 100%;
-  height: 400px;
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(180deg, #87CEEB 0%, #E0F6FF 60%, #98D8C8 100%);
-  border: 4px solid #5a4a3a;
-  border-radius: 16px;
-}
-
-/* 手機直向 */
-@media (max-width: 480px) {
-  .scrollable-scene {
-    height: 280px;
-    border: 3px solid #5a4a3a;
-    border-radius: 12px;
-  }
-}
-
-/* 手機橫向 */
-@media (max-width: 768px) and (orientation: landscape) {
-  .scrollable-scene {
-    height: 220px;
-  }
-}
-
-/* 平板 */
-@media (min-width: 481px) and (max-width: 768px) {
-  .scrollable-scene {
-    height: 320px;
-  }
-}
-
-.scene-background {
-  position: absolute;
-  width: 1200px;
-  height: 100%;
-  transition: transform 0.3s ease;
-}
-
-.bg-layer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-/* 雲朵 */
-.cloud {
-  position: absolute;
-  width: 80px;
-  height: 40px;
-  background: white;
-  border-radius: 50px;
-  opacity: 0.8;
-  animation: float 20s infinite linear;
-}
-
-.cloud::before,
-.cloud::after {
-  content: '';
-  position: absolute;
-  background: white;
-  border-radius: 50%;
-}
-
-.cloud::before {
-  width: 50px;
-  height: 50px;
-  top: -25px;
-  left: 10px;
-}
-
-.cloud::after {
-  width: 60px;
-  height: 45px;
-  top: -20px;
-  right: 10px;
-}
-
-@keyframes float {
-  from { transform: translateX(0); }
-  to { transform: translateX(100px); }
-}
-
-/* 山 */
-.mountain {
-  position: absolute;
-  bottom: 50px;
-  width: 0;
-  height: 0;
-  border-left: 100px solid transparent;
-  border-right: 100px solid transparent;
-  border-bottom: 150px solid #95a5a6;
-}
-
-/* 樹 */
-.tree {
-  position: absolute;
-  bottom: 80px;
-  width: 20px;
-  height: 60px;
-  background: #8B4513;
-  border-radius: 4px;
-}
-
-.tree::before {
-  content: '';
-  position: absolute;
-  top: -30px;
-  left: -20px;
-  width: 60px;
-  height: 60px;
-  background: #55efc4;
-  border-radius: 50%;
-}
-
-/* 地面 */
-.scene-ground {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 80px;
-  background: linear-gradient(180deg, #6ab04c 0%, #4cd137 100%);
-  border-top: 3px solid #5a4a3a;
-}
-
-.grass-pattern {
-  width: 100%;
-  height: 100%;
-  background-image: repeating-linear-gradient(
-    90deg,
-    transparent,
-    transparent 10px,
-    rgba(0, 0, 0, 0.05) 10px,
-    rgba(0, 0, 0, 0.05) 20px
-  );
-}
-
-/* 寵物 */
-.pet-character {
-  position: absolute;
-  bottom: 80px;
-  width: 80px;
-  height: 80px;
-  transition: left 0.5s ease;
-  z-index: 10;
-}
-
-.pet-body {
-  width: 60px;
-  height: 60px;
-  background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
-  border: 3px solid #5a4a3a;
-  border-radius: 50%;
-  position: relative;
-  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
-}
-
-.pet-body::before,
-.pet-body::after {
-  content: '';
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: #2d3436;
-  border-radius: 50%;
-  top: 20px;
-}
-
-.pet-body::before {
-  left: 15px;
-}
-
-.pet-body::after {
-  right: 15px;
-}
-
-.pet-character.walking .pet-body {
-  animation: bounce 0.5s infinite;
-}
-
-@keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-}
-
-/* 互動物件 */
-.scene-objects {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.object {
-  position: absolute;
-  bottom: 80px;
-  font-size: 32px;
-  cursor: pointer;
-  pointer-events: all;
-  transition: transform 0.2s;
-}
-
-.object:hover {
-  transform: scale(1.2);
-}
-
-/* 捲軸控制 */
-.scroll-controls {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  display: flex;
-  gap: 8px;
-  z-index: 20;
-}
-
-.scroll-btn {
-  width: 40px;
-  height: 40px;
-  background: rgba(255, 255, 255, 0.9);
-  border: 3px solid #5a4a3a;
-  border-radius: 8px;
-  font-size: 20px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.scroll-btn:hover {
-  background: #ffeaa7;
-  transform: scale(1.1);
-}
-
-.scroll-btn:active {
-  transform: scale(0.95);
-}
-</style>
diff --git a/components/pixel/StatusPanel.vue b/components/pixel/StatusPanel.vue
deleted file mode 100644
index e241921..0000000
--- a/components/pixel/StatusPanel.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <PixelCard class="status-panel">
-    <h3 class="panel-title">Status</h3>
-    <div class="status-bars">
-      <PixelProgressBar
-        label="Hunger"
-        :value="hunger"
-        :max="100"
-        :current="hunger"
-        color="warning"
-      />
-      <PixelProgressBar
-        label="Happiness"
-        :value="happiness"
-        :max="100"
-        :current="happiness"
-        color="primary"
-      />
-      <PixelProgressBar
-        label="Health"
-        :value="health"
-        :max="maxHealth"
-        :current="health"
-        color="success"
-      />
-    </div>
-    <div class="status-badges">
-      <span v-if="isSleeping" class="badge badge-info">💤 Sleeping</span>
-      <span v-if="isSick" class="badge badge-danger">🤒 Sick</span>
-      <span v-if="poopCount > 0" class="badge badge-warning">💩 x{{ poopCount }}</span>
-    </div>
-  </PixelCard>
-</template>
-
-<script setup>
-import PixelCard from './PixelCard.vue'
-import PixelProgressBar from './PixelProgressBar.vue'
-
-const props = defineProps({
-  hunger: {
-    type: Number,
-    default: 50
-  },
-  happiness: {
-    type: Number,
-    default: 50
-  },
-  health: {
-    type: Number,
-    default: 50
-  },
-  maxHealth: {
-    type: Number,
-    default: 100
-  },
-  isSleeping: {
-    type: Boolean,
-    default: false
-  },
-  isSick: {
-    type: Boolean,
-    default: false
-  },
-  poopCount: {
-    type: Number,
-    default: 0
-  }
-})
-</script>
-
-<style scoped>
-.status-panel {
-  width: 100%;
-}
-
-.panel-title {
-  font-size: 14px;
-  margin-bottom: 16px;
-  text-align: center;
-  text-transform: uppercase;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #000;
-}
-
-.status-bars {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.status-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-}
-
-.badge {
-  padding: 4px 8px;
-  border: 2px solid #000;
-  font-size: 10px;
-  display: inline-block;
-}
-
-.badge-info {
-  background: #3498db;
-  color: white;
-}
-
-.badge-danger {
-  background: #e74c3c;
-  color: white;
-}
-
-.badge-warning {
-  background: #f39c12;
-  color: white;
-}
-</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index be40237..4c95a60 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,10 +27,12 @@ export default defineNuxtConfig({
     head: {
       viewport: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover',
       meta: [
-        { name: 'apple-mobile-web-app-capable', content: 'yes' },
+        { name: 'mobile-web-app-capable', content: 'yes' },
         { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
         { name: 'theme-color', content: '#6b6250' }
       ]
     }
-  }
+  },
+
+  css: ['~/assets/css/tailwind.css']
 })
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index c561f6d..1876bdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@unhead/vue": "^2.0.19",
         "better-sqlite3": "^12.4.6",
         "eslint": "^9.39.1",
+        "lucide-vue-next": "^0.554.0",
         "nuxt": "^4.2.1",
         "typescript": "^5.9.3",
         "vue": "^3.5.24",
@@ -11623,6 +11624,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.554.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.554.0.tgz",
+      "integrity": "sha512-nDchDVm/J3mv+7aYtDh7aLkeBVtzDNyaelKEOlhAE0MKMtDfB9fFatx2siqZUBYhLHjMK5DZnaAC/ODT9vQ63Q==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-regexp": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/magic-regexp/-/magic-regexp-0.10.0.tgz",
diff --git a/package.json b/package.json
index 02aefcb..0fb0e50 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@unhead/vue": "^2.0.19",
     "better-sqlite3": "^12.4.6",
     "eslint": "^9.39.1",
+    "lucide-vue-next": "^0.554.0",
     "nuxt": "^4.2.1",
     "typescript": "^5.9.3",
     "vue": "^3.5.24",
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..a248afd
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,38 @@
+import type { Config } from 'tailwindcss'
+
+export default <Config>{
+    content: [
+        './components/**/*.{js,vue,ts}',
+        './layouts/**/*.vue',
+        './pages/**/*.vue',
+        './plugins/**/*.{js,ts}',
+        './app.vue',
+        './error.vue',
+        './app/components/**/*.{js,vue,ts}',
+        './app/layouts/**/*.vue',
+        './app/pages/**/*.vue',
+        './app/app.vue'
+    ],
+    theme: {
+        extend: {
+            colors: {
+                // Pixel Dungeon Palette
+                pixel: {
+                    white: '#e0d8f0',
+                    black: '#1b1026', // Dark Purple-Black
+                    bg: '#0f0816',    // Darker BG
+                    primary: '#f6b26b', // Orange/Gold
+                    secondary: '#2ce8f4', // Cyan
+                    accent: '#d95763', // Red
+                    green: '#99e550',
+                    yellow: '#ffe762',
+                    purple: '#8f80a0',
+                    darkPurple: '#4a3b5e',
+                    panel: '#2b193f',
+                    panelDark: '#1b1026',
+                    panelBorder: '#4a3b5e'
+                }
+            }
+        }
+    }
+}