good version

src/App.vue

@@ -5,12 +5,15 @@ import DeviceScreen from './components/DeviceScreen.vue';
 import PetGame from './components/PetGame.vue';
 import Menu from './components/Menu.vue';
 import { usePetSystem } from './composables/usePetSystem';
+import { useEventSystem } from './composables/useEventSystem';
 
 const currentScreen = ref('game');
 const petGameRef = ref(null);
 const showStats = ref(false); // Stats visibility
+const debugAction = ref(null); // For passing debug commands to PetGame
 
 // Initialize Pet System
+const petSystem = usePetSystem();
 const { 
   stage, 
   state, 
@@ -21,8 +24,21 @@ const {
   clean, 
   isCleaning,
   hatchEgg, 
-  reset 
+  reset,
-} = usePetSystem();
+  achievements,
+  unlockAllAchievements,
+  resurrect,
+  reincarnate
+} = petSystem;
+
+// Initialize Event System
+const { currentEvent, checkEventTriggers, triggerRandomEvent } = useEventSystem(petSystem);
+
+// Start Event Loop
+setInterval(() => {
+  checkEventTriggers();
+}, 10000); // Check every 10 seconds
+
 
 // Handle Action Menu Events
 function handleAction(action) {
@@ -38,16 +54,29 @@ function handleAction(action) {
       clean();
       break;
     case 'play':
-      play();
+      if (play()) {
+        if (petGameRef.value) {
+          petGameRef.value.startPlaying();
+        }
+      }
       break;
     case 'sleep':
       sleep();
       break;
     case 'medicine':
-      // Heal the pet
+      // Heal the pet with animation
       if (state.value === 'sick') {
+        if (petGameRef.value) {
+          // Trigger medicine animation
+          petGameRef.value.startFeeding('medicine').then(() => {
             stats.value.health = 100;
             state.value = 'idle';
+          });
+        } else {
+          // Fallback if ref not ready
+          stats.value.health = 100;
+          state.value = 'idle';
+        }
       }
       break;
     case 'stats':
@@ -72,6 +101,12 @@ function handleAction(action) {
       console.log('求籤功能');
       // TODO: 實作求籤邏輯
       break;
+    case 'resurrect':
+      resurrect();
+      break;
+    case 'reincarnate':
+      reincarnate();
+      break;
     default:
       console.log('Action not implemented:', action);
   }
@@ -81,6 +116,10 @@ function handleAction(action) {
 function setPetState(newState) {
   state.value = newState;
 }
+
+function triggerDebugAction(action, payload = null) {
+  debugAction.value = { type: action, payload, timestamp: Date.now() };
+}
 </script>
 
 <template>
@@ -95,6 +134,9 @@ function setPetState(newState) {
         :stats="stats"
         :isCleaning="isCleaning"
         :showStats="showStats"
+        :debugAction="debugAction"
+        :achievements="achievements"
+        :currentEvent="currentEvent"
         @update:state="state = $event" 
         @action="handleAction"
       />
@@ -120,6 +162,22 @@ function setPetState(newState) {
         <button v-if="stage === 'egg'" @click="hatchEgg()">🥚 Hatch Egg</button>
         <button v-else @click="reset()">🔄 Reset to Egg</button>
       </div>
+      <div class="btn-group">
+        <button @click="triggerDebugAction('randomEvent')">🎲 Random Event</button>
+        <button @click="triggerDebugAction('addItem', 'sunglasses')">🕶️ Add Sunglasses</button>
+        <button @click="triggerDebugAction('addItem', 'cookie')">🍪 Add Cookie</button>
+      </div>
+      <div class="btn-group">
+        <button @click="triggerDebugAction('setMood', 'happy')">😊 Happy</button>
+        <button @click="triggerDebugAction('setMood', 'angry')">😠 Angry</button>
+        <button @click="triggerDebugAction('setMood', 'sad')">😢 Sad</button>
+      </div>
+      <div class="btn-group">
+        <button @click="unlockAllAchievements()">🏆 Unlock All Achievements</button>
+      </div>
+      <div class="btn-group">
+        <button @click="stats.dailyPrayerCount = 0">🙏 Reset Prayer Count</button>
+      </div>
     </div>
   </div>
 </template>

src/components/ActionMenu.vue

@@ -2,8 +2,8 @@
   <div class="action-menu">
     <button class="icon-btn icon-clean" @click="$emit('clean')" :disabled="disabled || poopCount === 0" title="清理"></button>
     <button class="icon-btn icon-medicine" @click="$emit('medicine')" :disabled="disabled || !isSick" title="治療"></button>
-    <button class="icon-btn icon-training" @click="$emit('training')" :disabled="disabled" title="祈禱"></button>
+    <button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="關燈"></button>
-    <button class="icon-btn icon-info" @click="$emit('info')" :disabled="disabled" title="資訊"></button>
+    <button class="icon-btn icon-backpack" @click="$emit('inventory')" :disabled="disabled" title="背包"></button>
   </div>
 </template>
 
@@ -27,7 +27,7 @@ const props = defineProps({
   }
 });
 
-defineEmits(['clean', 'medicine', 'training', 'info']);
+defineEmits(['clean', 'medicine', 'sleep', 'inventory']);
 </script>
 
 <style scoped>
@@ -90,45 +90,54 @@ defineEmits(['clean', 'medicine', 'training', 'info']);
     0px 4px 0 #ff4444, 0px 6px 0 #ff4444;
 }
 
-/* Training Icon (Praying Hands) */
+/* Sleep Icon (Light Bulb/燈泡) - Enhanced */
-.icon-training::before {
+.icon-sleep::before {
   content: '';
   position: absolute;
   width: 2px;
   height: 2px;
-  background: #d4a574; /* 手的膚色 */
+  background: transparent;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
   box-shadow:
-    /* 光芒 - 頂部 */
+    /* 燈泡主體 (圓形) */
-    0px -8px 0 #ffcc00,
+    -2px -6px 0 #ffd700, 0px -6px 0 #ffd700, 2px -6px 0 #ffd700,
-    -2px -6px 0 #ffcc00, 2px -6px 0 #ffcc00,
+    -4px -4px 0 #ffd700, -2px -4px 0 #ffd700, 0px -4px 0 #ffd700, 2px -4px 0 #ffd700, 4px -4px 0 #ffd700,
-    
+    -4px -2px 0 #ffd700, -2px -2px 0 #ffd700, 0px -2px 0 #ffd700, 2px -2px 0 #ffd700, 4px -2px 0 #ffd700,
-    /* 合掌的手 - 簡化版 */
+    -4px 0px 0 #ffd700, -2px 0px 0 #ffd700, 0px 0px 0 #ffd700, 2px 0px 0 #ffd700, 4px 0px 0 #ffd700,
-    -2px -4px 0 #d4a574, 0px -4px 0 #d4a574, 2px -4px 0 #d4a574,
+    -2px 2px 0 #ffd700, 0px 2px 0 #ffd700, 2px 2px 0 #ffd700,
-    -2px -2px 0 #d4a574, 0px -2px 0 #d4a574, 2px -2px 0 #d4a574,
+    /* 燈泡底部 (螺旋) */
-    -2px 0px 0 #d4a574, 0px 0px 0 #d4a574, 2px 0px 0 #d4a574,
+    -1px 4px 0 #8B4513, 0px 4px 0 #8B4513, 1px 4px 0 #8B4513,
-    0px 2px 0 #d4a574, 0px 4px 0 #d4a574,
+    /* 光線 (向下) */
-    
+    0px 6px 0 #ffd700, 0px 8px 0 #ffd700;
-    /* 光芒 - 左右 */
-    -6px -2px 0 #ffcc00, 6px -2px 0 #ffcc00,
-    -6px 0px 0 #ffcc00, 6px 0px 0 #ffcc00;
 }
 
-/* Info Icon (i) */
+/* Backpack Icon */
-.icon-info::before {
+.icon-backpack::before {
   content: '';
   position: absolute;
   width: 2px;
   height: 2px;
-  background: #4444ff;
+  background: #8d6e63;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   box-shadow:
-    0px -6px 0 #4444ff,
+    /* Top flap */
-    0px -2px 0 #4444ff, 0px 0px 0 #4444ff,
+    -2px -6px 0 #8d6e63, 0px -6px 0 #8d6e63, 2px -6px 0 #8d6e63,
-    0px 2px 0 #4444ff, 0px 4px 0 #4444ff, 0px 6px 0 #4444ff;
+    -4px -4px 0 #8d6e63, -2px -4px 0 #a1887f, 0px -4px 0 #a1887f, 2px -4px 0 #a1887f, 4px -4px 0 #8d6e63,
+    
+    /* Body */
+    -4px -2px 0 #8d6e63, -2px -2px 0 #5d4037, 0px -2px 0 #5d4037, 2px -2px 0 #5d4037, 4px -2px 0 #8d6e63,
+    -4px 0px 0 #8d6e63, -2px 0px 0 #5d4037, 0px 0px 0 #5d4037, 2px 0px 0 #5d4037, 4px 0px 0 #8d6e63,
+    -4px 2px 0 #8d6e63, -2px 2px 0 #5d4037, 0px 2px 0 #5d4037, 2px 2px 0 #5d4037, 4px 2px 0 #8d6e63,
+    -4px 4px 0 #8d6e63, -2px 4px 0 #5d4037, 0px 4px 0 #5d4037, 2px 4px 0 #5d4037, 4px 4px 0 #8d6e63,
+    
+    /* Bottom */
+    -2px 6px 0 #8d6e63, 0px 6px 0 #8d6e63, 2px 6px 0 #8d6e63;
 }
+
+
 </style>

src/components/BallGame.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="ball-game-layer" @touchstart="handleTouch" @mousedown="handleMouse">
+    <canvas ref="gameCanvas" class="game-canvas"></canvas>
+    
+    <div class="game-ui">
+      <div class="score">接球: {{ score }}/10</div>
+      
+      <div v-if="!gameStarted" class="start-hint">
+        <p>點擊左右移動接球！</p>
+        <p>點擊螢幕開始</p>
+      </div>
+      
+      <div v-if="gameOver" class="game-over-msg">
+        <p>{{ win ? '大成功！' : '再試一次' }}</p>
+        <button @click.stop="handleClose">完成</button>
+      </div>
+    </div>
+
+    <!-- 觸控區域提示 (僅在開始前顯示) -->
+    <div v-if="!gameStarted" class="touch-zones">
+      <div class="zone left">← 左</div>
+      <div class="zone right">右 →</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const emit = defineEmits(['close', 'complete', 'updatePetX']);
+
+const gameCanvas = ref(null);
+const gameStarted = ref(false);
+const gameOver = ref(false);
+const win = ref(false);
+const score = ref(0);
+const targetScore = 10;
+
+// 遊戲數據
+let balls = [];
+let animationId = null;
+let ctx = null;
+let canvasWidth = 300;
+let canvasHeight = 150;
+let lastTime = 0;
+let spawnTimer = 0;
+
+// 寵物數據 (需要與 PetGame 同步)
+let petX = 150;
+const PET_Y = 100; // 假設寵物在底部
+const PET_WIDTH = 32;
+const PET_SPEED = 15; // 移動速度
+
+function initGame() {
+  if (!gameCanvas.value) return;
+  const canvas = gameCanvas.value;
+  const rect = canvas.parentElement.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+  canvasWidth = rect.width;
+  canvasHeight = rect.height;
+  
+  // 初始寵物位置在中間
+  petX = canvasWidth / 2 - PET_WIDTH / 2;
+  emit('updatePetX', petX);
+  
+  ctx = canvas.getContext('2d');
+  loop(0);
+}
+
+function startGame() {
+  gameStarted.value = true;
+  gameOver.value = false;
+  score.value = 0;
+  balls = [];
+  lastTime = performance.now();
+}
+
+function handleTouch(e) {
+  if (gameOver.value) return;
+  if (!gameStarted.value) {
+    startGame();
+    return;
+  }
+  
+  const touchX = e.touches[0].clientX;
+  const rect = gameCanvas.value.getBoundingClientRect();
+  const relativeX = touchX - rect.left;
+  
+  movePet(relativeX < rect.width / 2 ? -1 : 1);
+}
+
+function handleMouse(e) {
+  if (gameOver.value) return;
+  if (!gameStarted.value) {
+    startGame();
+    return;
+  }
+  
+  const rect = gameCanvas.value.getBoundingClientRect();
+  const relativeX = e.clientX - rect.left;
+  
+  movePet(relativeX < rect.width / 2 ? -1 : 1);
+}
+
+function movePet(direction) {
+  petX += direction * PET_SPEED;
+  // 邊界檢查
+  petX = Math.max(0, Math.min(petX, canvasWidth - PET_WIDTH));
+  emit('updatePetX', petX);
+}
+
+function spawnBall() {
+  const size = 12;
+  balls.push({
+    x: Math.random() * (canvasWidth - size),
+    y: -20,
+    speed: 2 + Math.random() * 2, // 隨機速度
+    size: size,
+    color: Math.random() > 0.8 ? '#ffd700' : '#ff4444' // 金球或紅球
+  });
+}
+
+function loop(timestamp) {
+  if (!ctx) return;
+  
+  const deltaTime = timestamp - lastTime;
+  lastTime = timestamp;
+  
+  // 清空畫布
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  
+  if (gameStarted.value && !gameOver.value) {
+    update(deltaTime);
+  }
+  
+  draw();
+  
+  animationId = requestAnimationFrame(loop);
+}
+
+function update(deltaTime) {
+  // 生成球
+  spawnTimer += deltaTime;
+  if (spawnTimer > 1000) { // 每秒一顆
+    spawnBall();
+    spawnTimer = 0;
+  }
+  
+  // 更新球的位置
+  for (let i = balls.length - 1; i >= 0; i--) {
+    const ball = balls[i];
+    ball.y += ball.speed;
+    
+    // 碰撞檢測 (接球)
+    // 假設寵物判定框
+    if (ball.y + ball.size > PET_Y && 
+        ball.y < PET_Y + 32 &&
+        ball.x + ball.size > petX && 
+        ball.x < petX + PET_WIDTH) {
+      
+      // 接到了！
+      score.value++;
+      balls.splice(i, 1);
+      
+      // 檢查勝利
+      if (score.value >= targetScore) {
+        gameOver.value = true;
+        win.value = true;
+      }
+      continue;
+    }
+    
+    // 掉出底部
+    if (ball.y > canvasHeight) {
+      balls.splice(i, 1);
+      // 可以扣分或失敗，這裡暫時不處罰，輕鬆一點
+    }
+  }
+}
+
+function draw() {
+  // 繪製球
+  for (const ball of balls) {
+    drawPixelBall(ball);
+  }
+}
+
+function drawPixelBall(ball) {
+  const { x, y, size, color } = ball;
+  const pSize = 4; // 像素大小
+  
+  ctx.fillStyle = color;
+  // 簡單的 3x3 像素球
+  //  X
+  // XXX
+  //  X
+  ctx.fillRect(x + pSize, y, pSize, pSize);
+  ctx.fillRect(x, y + pSize, pSize * 3, pSize);
+  ctx.fillRect(x + pSize, y + pSize * 2, pSize, pSize);
+}
+
+function handleClose() {
+  emit('complete', win.value);
+  emit('close');
+}
+
+onMounted(() => {
+  initGame();
+});
+
+onUnmounted(() => {
+  if (animationId) cancelAnimationFrame(animationId);
+});
+</script>
+
+<style scoped>
+.ball-game-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+  pointer-events: auto;
+}
+
+.game-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.game-ui {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  width: 100%;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.score {
+  font-family: 'DotGothic16', sans-serif;
+  font-size: 16px;
+  color: #8b4513;
+  background: rgba(255, 255, 255, 0.7);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.start-hint {
+  margin-top: 40px;
+  font-family: 'DotGothic16', sans-serif;
+  color: #8b4513;
+  text-align: center;
+  animation: pulse 1s infinite;
+  background: rgba(255, 255, 255, 0.5);
+  padding: 5px;
+  border-radius: 4px;
+}
+
+.game-over-msg {
+  margin-top: 40px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 10px;
+  border: 2px solid #8b4513;
+  border-radius: 8px;
+  text-align: center;
+  pointer-events: auto;
+}
+
+.game-over-msg button {
+  margin-top: 5px;
+  padding: 4px 10px;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.touch-zones {
+  position: absolute;
+  bottom: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.zone {
+  font-family: 'DotGothic16', sans-serif;
+  color: #8b4513;
+  font-size: 12px;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+</style>

src/components/DeityTemple.vue

@@ -0,0 +1,637 @@
+<template>
+  <div class="deity-temple-overlay">
+    <div class="temple-container" @click.stop>
+      <!-- Header -->
+      <div class="temple-header">
+        <button class="close-btn" @click="$emit('close')">×</button>
+        <h2 class="temple-title">神廟</h2>
+      </div>
+
+      <!-- Scrollable Content -->
+      <div class="temple-content">
+        <!-- Deity Display -->
+        <div class="deity-display">
+          <div class="deity-icon" :class="currentDeity.icon"></div>
+          <div class="deity-name">{{ currentDeity.name }}</div>
+          <div class="deity-subtitle">{{ currentDeity.personality }}</div>
+        </div>
+
+        <!-- Dialogue Bubble -->
+        <div class="dialogue-bubble">
+          <p>{{ currentDialogue }}</p>
+        </div>
+
+        <!-- Favor Progress -->
+        <div class="favor-section">
+          <div class="favor-label">
+            好感度: {{ favorStars }} ({{ currentFavor }}/100)
+          </div>
+          <div class="favor-bar">
+            <div class="favor-fill" :style="{ width: currentFavor + '%' }"></div>
+          </div>
+        </div>
+
+        <!-- Active Buffs -->
+        <div class="buffs-section" v-if="activeBuffs.length > 0">
+          <div class="buff-title">當前加成：</div>
+          <div class="buff-list">
+            <div v-for="buff in activeBuffs" :key="buff.type" class="buff-item">
+              • {{ buff.description }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Prayer Options -->
+        <div class="prayer-section">
+          <!-- 祈福按鈕 -->
+          <button 
+            class="prayer-btn" 
+            :disabled="dailyPrayerCount >= 3"
+            @click="handlePrayer"
+          >
+            🙏 祈福 (今日 {{ dailyPrayerCount }}/3)
+          </button>
+          
+          <div class="prayer-divider">或</div>
+          
+          <div class="prayer-options">
+            <!-- 擲筊選項 -->
+            <button 
+              class="prayer-option" 
+              @click="handlePrayerSelect('jiaobei')"
+            >
+              <div class="option-icon icon-jiaobei"></div>
+              <span class="option-label">擲筊</span>
+            </button>
+
+            <!-- 求籤選項 -->
+            <button 
+              class="prayer-option" 
+              @click="handlePrayerSelect('fortune')"
+            >
+              <div class="option-icon icon-fortune"></div>
+              <span class="option-label">求籤</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bottom Actions -->
+      <div class="bottom-actions">
+        <button class="action-btn" @click="showDeitySelector = !showDeitySelector">
+          切換神明
+        </button>
+      </div>
+
+      <!-- Deity Selector (Overlay on top of content) -->
+      <div v-if="showDeitySelector" class="deity-selector-overlay" @click="showDeitySelector = false">
+        <div class="deity-selector-menu" @click.stop>
+          <div class="selector-header">選擇神明</div>
+          <div 
+            v-for="deity in DEITIES" 
+            :key="deity.id"
+            class="deity-option"
+            :class="{ active: deity.id === currentDeity.id }"
+            @click="selectDeity(deity.id)"
+          >
+            <div class="deity-icon-small" :class="deity.icon"></div>
+            <span>{{ deity.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+
+const props = defineProps({
+  deityFavors: {
+    type: Object,
+    required: true
+  },
+  currentDeityId: {
+    type: String,
+    default: 'mazu'
+  },
+  dailyPrayerCount: {
+    type: Number,
+    default: 0
+  }
+});
+
+const emit = defineEmits(['close', 'prayer', 'change-deity', 'prayer-select']);
+
+// Deity Data
+const DEITIES = [
+  {
+    id: 'mazu',
+    name: '媽祖',
+    personality: '溫柔守護',
+    buffs: {
+      gameSuccessRate: 0.1,
+      sicknessReduction: 0.15
+    },
+    buffDescriptions: [
+      '小遊戲成功率 +10%',
+      '生病機率 -15%'
+    ],
+    dialogues: [
+      "好孩子，媽祖保佑你平安喔",
+      "海上無風浪，心中有媽祖",
+      "要好好照顧寵物啊"
+    ],
+    icon: 'deity-mazu'
+  },
+  {
+    id: 'earthgod',
+    name: '土地公',
+    personality: '碎念管家',
+    buffs: {
+      itemDropRate: 0.2,
+      resourceGain: 0.15
+    },
+    buffDescriptions: [
+      '掉落物品機率 +20%',
+      '資源獲得 +15%'
+    ],
+    dialogues: [
+      "又來啦？今天有好好餵寵物嗎？",
+      "欸，地上那個便便怎麼不清一清",
+      "拜我就對了，土地公最靈驗"
+    ],
+    icon: 'deity-earthgod'
+  },
+  {
+    id: 'matchmaker',
+    name: '月老',
+    personality: '八卦熱情',
+    buffs: {
+      happinessRecovery: 0.25,
+      goodEventRate: 0.1
+    },
+    buffDescriptions: [
+      'Happiness 回復 +25%',
+      '好事件機率 +10%'
+    ],
+    dialogues: [
+      "哎呀～你的寵物今天心情不錯喔",
+      "要不要幫你牽條紅線？咦，寵物也需要嗎",
+      "姻緣天注定，開心最重要！"
+    ],
+    icon: 'deity-matchmaker'
+  },
+  {
+    id: 'wenchang',
+    name: '文昌帝君',
+    personality: '嚴肅學者',
+    buffs: {
+      intGrowth: 0.3,
+      guessingReward: 0.2
+    },
+    buffDescriptions: [
+      'INT 成長 +30%',
+      '猜拳獎勵 +20%'
+    ],
+    dialogues: [
+      "學海無涯，勤能補拙",
+      "多動腦，少偷懶",
+      "智慧是一切的根本"
+    ],
+    icon: 'deity-wenchang'
+  },
+  {
+    id: 'guanyin',
+    name: '觀音菩薩',
+    personality: '慈悲救苦',
+    buffs: {
+      healthRecovery: 0.2,
+      autoHeal: true
+    },
+    buffDescriptions: [
+      'Health 回復 +20%',
+      '自動治療 (1次/天)'
+    ],
+    dialogues: [
+      "阿彌陀佛，施主請安心",
+      "救苦救難，觀音保佑",
+      "..."
+    ],
+    icon: 'deity-guanyin'
+  }
+];
+
+const showDeitySelector = ref(false);
+const currentDialogue = ref('');
+const activeBuffs = ref([]);
+
+const currentDeity = computed(() => {
+  return DEITIES.find(d => d.id === props.currentDeityId) || DEITIES[0];
+});
+
+const currentFavor = computed(() => {
+  return props.deityFavors[props.currentDeityId] || 0;
+});
+
+const favorStars = computed(() => {
+  const level = Math.floor(currentFavor.value / 20);
+  return '★'.repeat(level) + '☆'.repeat(5 - level);
+});
+
+function selectDeity(deityId) {
+  emit('change-deity', deityId);
+  showDeitySelector.value = false;
+  updateDialogue();
+}
+
+function updateDialogue() {
+  const dialogues = currentDeity.value.dialogues;
+  currentDialogue.value = dialogues[Math.floor(Math.random() * dialogues.length)];
+}
+
+function handlePrayer() {
+  if (props.dailyPrayerCount >= 3) return;
+  
+  emit('prayer', currentDeity.value.id);
+  updateDialogue();
+  
+  // Update active buffs display
+  activeBuffs.value = currentDeity.value.buffDescriptions.map(desc => ({
+    type: currentDeity.value.id,
+    description: desc
+  }));
+}
+
+function handlePrayerSelect(mode) {
+  emit('prayer-select', mode);
+}
+
+onMounted(() => {
+  updateDialogue();
+  
+  // Load active buffs if favor > 0
+  if (currentFavor.value > 0) {
+    activeBuffs.value = currentDeity.value.buffDescriptions.map(desc => ({
+      type: currentDeity.value.id,
+      description: desc
+    }));
+  }
+});
+</script>
+
+<style scoped>
+.deity-temple-overlay {
+  position: absolute; /* Absolute to parent (DeviceScreen) */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
+  z-index: 50; /* Same as PetInfoScreen */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.temple-container {
+  background: linear-gradient(to bottom, #8B4513 0%, #A0522D 100%);
+  border: 3px solid #654321;
+  border-radius: 6px;
+  width: calc(100% - 8px);
+  max-width: 198px; /* Fit within 210px screen with padding */
+  height: calc(100% - 8px);
+  max-height: 152px; /* Fit within 160px screen with padding */
+  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* Contain children */
+  pointer-events: auto; /* Ensure container can receive clicks */
+}
+
+.temple-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.temple-container::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0.2);
+  border-radius: 3px;
+}
+
+.temple-container::-webkit-scrollbar-thumb {
+  background: #FFD700;
+  border-radius: 3px;
+}
+
+.temple-header {
+  background: #654321;
+  padding: 6px;
+  text-align: center;
+  border-bottom: 2px solid #4a3216;
+  flex-shrink: 0; /* Don't shrink header */
+  position: relative;
+}
+
+.temple-content {
+  flex: 1;
+  overflow-y: auto; /* Scrollable content area */
+  overflow-x: hidden;
+  padding-bottom: 8px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.close-btn {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  background: #8B0000;
+  border: 2px solid #fff;
+  color: #fff;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.temple-title {
+  font-family: 'DotGothic16', monospace;
+  color: #FFD700;
+  margin: 0;
+  font-size: 12px;
+}
+
+.deity-display { padding: 6px; text-align: center; }
+.deity-icon { width: 32px; height: 32px; margin: 0 auto 4px; background: #FFD700; border: 2px solid #FFA500; border-radius: 50%; }
+.deity-name { font-family: 'DotGothic16', monospace; font-size: 11px; color: #FFD700; font-weight: bold; margin-bottom: 2px; }
+.deity-subtitle { font-family: 'DotGothic16', monospace; font-size: 9px; color: #DEB887; }
+
+.dialogue-bubble {
+  margin: 0 6px 6px;
+  background: #FFF8DC;
+  border: 2px solid #654321;
+  border-radius: 4px;
+  padding: 6px;
+  position: relative;
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dialogue-bubble::before {
+  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
+  border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent #654321 transparent;
+}
+.dialogue-bubble p { font-family: 'DotGothic16', monospace; font-size: 9px; color: #333; margin: 0; text-align: center; line-height: 1.3; }
+
+.favor-section, .buffs-section { padding: 0 6px 6px; }
+.prayer-section { 
+  padding: 0 6px 6px; 
+  position: relative;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.prayer-btn {
+  width: 100%; 
+  padding: 6px; 
+  background: #FFD700; 
+  border: 2px solid #FFA500; 
+  border-radius: 4px;
+  font-family: 'DotGothic16', monospace; 
+  font-size: 10px; 
+  font-weight: bold; 
+  color: #8B4513; 
+  cursor: pointer;
+  position: relative;
+  z-index: 10;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.prayer-btn:hover:not(:disabled) {
+  background: #FFA500;
+  transform: translateY(-1px);
+}
+.prayer-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+.prayer-btn:disabled { 
+  opacity: 0.5; 
+  cursor: not-allowed; 
+  background: #ccc; 
+  border-color: #999; 
+  color: #666; 
+}
+
+.prayer-divider {
+  font-family: 'DotGothic16', monospace;
+  font-size: 8px;
+  color: #DEB887;
+  text-align: center;
+  margin: 2px 0;
+}
+.bottom-actions { 
+  padding: 4px 6px; 
+  flex-shrink: 0; 
+  border-top: 2px solid #4a3216;
+  background: rgba(101, 67, 33, 0.5);
+  position: relative;
+  z-index: 5;
+}
+.favor-label { font-family: 'DotGothic16', monospace; font-size: 9px; color: #FFD700; margin-bottom: 2px; }
+.favor-bar { height: 8px; background: rgba(0,0,0,0.3); border: 1px solid #654321; border-radius: 4px; overflow: hidden; }
+.favor-fill { height: 100%; background: linear-gradient(to right, #FFD700, #FFA500); transition: width 0.3s ease; }
+
+.buffs-section { background: rgba(255,255,255,0.1); border-radius: 3px; padding: 4px; }
+.buff-title { font-family: 'DotGothic16', monospace; font-size: 9px; color: #FFD700; margin-bottom: 2px; }
+.buff-list { font-family: 'DotGothic16', monospace; font-size: 8px; color: #FFF8DC; }
+
+.prayer-options {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 4px;
+}
+
+.prayer-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 2px solid #654321;
+  border-radius: 4px;
+  padding: 4px 6px;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  min-width: 50px;
+  position: relative;
+  z-index: 10;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.prayer-option:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  background: #FFD700;
+  border-color: #FFA500;
+}
+
+.prayer-option:active {
+  transform: translateY(0);
+}
+
+.option-icon {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  transform: scale(0.6);
+}
+
+.option-label {
+  font-family: 'DotGothic16', monospace;
+  font-size: 8px;
+  font-weight: bold;
+  color: #333;
+}
+
+.prayer-count-info {
+  font-family: 'DotGothic16', monospace;
+  font-size: 8px;
+  color: #FFD700;
+  text-align: center;
+  margin-top: 2px;
+}
+
+.action-btn {
+  width: 100%; padding: 6px; background: #654321; border: 2px solid #4a3216; border-radius: 3px;
+  font-family: 'DotGothic16', monospace; font-size: 9px; color: #FFD700; cursor: pointer;
+  position: relative;
+  z-index: 10;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.action-btn:active {
+  transform: translateY(1px);
+  background: #4a3216;
+}
+
+/* Deity Selector Overlay */
+.deity-selector-overlay {
+  position: absolute;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0,0,0,0.7);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.deity-selector-menu {
+  background: #4a3216;
+  border: 2px solid #FFD700;
+  border-radius: 4px;
+  padding: 6px;
+  width: 85%;
+  max-height: 75%;
+  overflow-y: auto;
+}
+
+.selector-header {
+  text-align: center; color: #FFD700; font-family: 'DotGothic16', monospace; margin-bottom: 6px; font-weight: bold; font-size: 10px;
+}
+
+.deity-option {
+  display: flex; align-items: center; gap: 6px; padding: 4px; margin: 3px 0;
+  background: #654321; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
+  position: relative;
+  z-index: 25;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.deity-option:hover {
+  border-color: #FFD700;
+  background: #7a5238;
+}
+.deity-option:active {
+  transform: scale(0.98);
+}
+.deity-option.active { background: #8B4513; border-color: #FFD700; }
+.deity-option span { font-family: 'DotGothic16', monospace; font-size: 9px; color: #FFD700; }
+.deity-icon-small { width: 16px; height: 16px; background: #FFD700; border: 1px solid #FFA500; border-radius: 50%; }
+
+/* Deity Icons - Pixel Art Placeholders */
+.deity-mazu,
+.deity-earthgod,
+.deity-matchmaker,
+.deity-wenchang,
+.deity-guanyin {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+
+.deity-mazu::after { content: '媽'; }
+.deity-earthgod::after { content: '土'; }
+.deity-matchmaker::after { content: '月'; }
+.deity-wenchang::after { content: '文'; }
+.deity-guanyin::after { content: '觀'; }
+
+/* Prayer Option Icons */
+.icon-jiaobei::before {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow:
+    /* 左邊筊杯 */
+    -7px -4px 0 #ff5252, -5px -4px 0 #ff5252, -3px -4px 0 #ff5252,
+    -9px -2px 0 #ff5252, -7px -2px 0 #ff8a80, -5px -2px 0 #ff5252, -3px -2px 0 #ff5252, -1px -2px 0 #ff5252,
+    -9px 0px 0 #ff5252, -7px 0px 0 #ff5252, -5px 0px 0 #ff5252, -3px 0px 0 #ff5252, -1px 0px 0 #ff5252,
+    -7px 2px 0 #ff5252, -5px 2px 0 #ff5252, -3px 2px 0 #ff5252,
+    -5px 4px 0 #d32f2f,
+    /* 右邊筊杯 */
+    3px -4px 0 #ff5252, 5px -4px 0 #ff5252, 7px -4px 0 #ff5252,
+    1px -2px 0 #ff5252, 3px -2px 0 #ff5252, 5px -2px 0 #ff5252, 7px -2px 0 #ff8a80, 9px -2px 0 #ff5252,
+    1px 0px 0 #ff5252, 3px 0px 0 #ff5252, 5px 0px 0 #ff5252, 7px 0px 0 #ff5252, 9px 0px 0 #ff5252,
+    3px 2px 0 #ff5252, 5px 2px 0 #ff5252, 7px 2px 0 #ff5252,
+    5px 4px 0 #d32f2f;
+}
+
+.icon-fortune::before {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: #8B4513;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow:
+    /* 籤筒本體 */
+    -4px -4px 0 #8B4513, -2px -4px 0 #8B4513, 0px -4px 0 #8B4513, 2px -4px 0 #8B4513, 4px -4px 0 #8B4513,
+    -4px -2px 0 #8B4513, -2px -2px 0 #8B4513, 0px -2px 0 #8B4513, 2px -2px 0 #8B4513, 4px -2px 0 #8B4513,
+    -4px 0px 0 #8B4513, -2px 0px 0 #8B4513, 0px 0px 0 #8B4513, 2px 0px 0 #8B4513, 4px 0px 0 #8B4513,
+    -4px 2px 0 #8B4513, -2px 2px 0 #8B4513, 0px 2px 0 #8B4513, 2px 2px 0 #8B4513, 4px 2px 0 #8B4513,
+    -4px 4px 0 #8B4513, -2px 4px 0 #8B4513, 0px 4px 0 #8B4513, 2px 4px 0 #8B4513, 4px 4px 0 #8B4513,
+    /* 突出的籤條 */
+    -2px -8px 0 #d4522e, 0px -8px 0 #d4522e,
+    -2px -6px 0 #d4522e, 0px -6px 0 #d4522e,
+    2px -6px 0 #d4522e;
+}
+</style>

src/components/GuessingGame.vue

@@ -0,0 +1,617 @@
+<template>
+  <div class="game-overlay" @click.self="handleClose">
+    <div class="game-container">
+      <h2 class="game-title">猜拳遊戲</h2>
+      
+      <div v-if="!gameStarted" class="game-intro">
+        <p>3回合制</p>
+      </div>
+
+      <div v-if="gameStarted" class="game-status">
+        <div class="score">
+          <span>你: {{ playerScore }}</span>
+          <span>第{{ currentRound }}/3局</span>
+          <span>電腦: {{ cpuScore }}</span>
+        </div>
+      </div>
+
+      <div v-if="result" class="result-display" ref="resultDisplayRef">
+        <div class="hands" :class="{ 'shake': waiting }">
+          <div class="hand player-hand" :class="{ 'slide-in-left': !waiting }">
+            <div class="hand-icon" :class="`icon-${playerChoice}`"></div>
+          </div>
+          <div class="vs">VS</div>
+          <div class="hand cpu-hand" :class="{ 'slide-in-right': !waiting }">
+            <div class="hand-icon" :class="`icon-${cpuChoice}`"></div>
+          </div>
+        </div>
+        <div class="result-text" :class="[result, { 'bounce-in': !waiting }]">{{ resultText }}</div>
+      </div>
+
+      <div v-if="!gameOver" class="choices">
+        <button 
+          v-for="choice in choices" 
+          :key="choice.id"
+          class="choice-btn"
+          @click="play(choice.id)"
+          :disabled="waiting"
+        >
+          <div class="choice-icon" :class="`icon-${choice.id}`"></div>
+          <span>{{ choice.name }}</span>
+        </button>
+      </div>
+
+      <div v-if="gameOver" class="game-over">
+        <div class="final-result" :class="finalResult">
+          <div class="result-icon" :class="`icon-${finalResult}`"></div>
+          <h3>{{ finalResultText }}</h3>
+        </div>
+        <button class="action-btn" @click="playAgain">再玩一次</button>
+      </div>
+
+      <button class="close-btn" @click="handleClose">
+        {{ gameOver ? '完成' : '取消' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const emit = defineEmits(['close', 'complete']);
+
+const choices = [
+  { id: 'rock', name: '石頭' },
+  { id: 'paper', name: '布' },
+  { id: 'scissors', name: '剪刀' }
+];
+
+const gameStarted = ref(false);
+const gameOver = ref(false);
+const currentRound = ref(1);
+const playerScore = ref(0);
+const cpuScore = ref(0);
+const playerChoice = ref('');
+const cpuChoice = ref('');
+const result = ref('');
+const waiting = ref(false);
+
+const resultText = computed(() => {
+  if (result.value === 'win') return '你贏了！';
+  if (result.value === 'lose') return '你輸了！';
+  return '平手！';
+});
+
+const finalResult = computed(() => {
+  if (playerScore.value > cpuScore.value) return 'win';
+  if (playerScore.value < cpuScore.value) return 'lose';
+  return 'draw';
+});
+
+const finalResultText = computed(() => {
+  if (finalResult.value === 'win') return '勝利！';
+  if (finalResult.value === 'lose') return '失敗...';
+  return '平手';
+});
+
+function play(choice) {
+  if (waiting.value || gameOver.value) return;
+  
+  gameStarted.value = true;
+  waiting.value = true;
+  playerChoice.value = choice;
+  
+  // CPU makes a random choice
+  const cpuIndex = Math.floor(Math.random() * 3);
+  cpuChoice.value = choices[cpuIndex].id;
+  
+  // Determine winner
+  setTimeout(() => {
+    const outcome = determineWinner(choice, cpuChoice.value);
+    result.value = outcome;
+    
+    if (outcome === 'win') {
+      playerScore.value++;
+    } else if (outcome === 'lose') {
+      cpuScore.value++;
+    }
+    
+    // Check if game is over
+    setTimeout(() => {
+      if (currentRound.value >= 3) {
+        gameOver.value = true;
+      } else {
+        currentRound.value++;
+        result.value = '';
+        waiting.value = false;
+      }
+    }, 1500);
+  }, 500);
+}
+
+function determineWinner(player, cpu) {
+  if (player === cpu) return 'draw';
+  if (
+    (player === 'rock' && cpu === 'scissors') ||
+    (player === 'paper' && cpu === 'rock') ||
+    (player === 'scissors' && cpu === 'paper')
+  ) {
+    return 'win';
+  }
+  return 'lose';
+}
+
+function playAgain() {
+  gameStarted.value = false;
+  gameOver.value = false;
+  currentRound.value = 1;
+  playerScore.value = 0;
+  cpuScore.value = 0;
+  result.value = '';
+  waiting.value = false;
+}
+
+function handleClose() {
+  if (gameOver.value && finalResult.value === 'win') {
+    emit('complete', true); // Won the game
+  } else {
+    emit('complete', false); // Didn't win
+  }
+  emit('close');
+}
+</script>
+
+<style scoped>
+.game-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 150;
+  font-family: 'DotGothic16', sans-serif;
+  overflow: auto;
+}
+
+.game-container {
+  background: #f5f5dc;
+  border: 4px solid #8b4513;
+  border-radius: 8px;
+  padding: 8px;
+  width: 90%;
+  max-width: 280px;
+  max-height: 90vh;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  animation: slide-up 0.3s ease-out;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.game-title {
+  text-align: center;
+  font-size: 13px;
+  margin: 0 0 6px 0;
+  color: #8b4513;
+  flex-shrink: 0;
+}
+
+.game-intro {
+  text-align: center;
+  margin-bottom: 6px;
+  color: #8b4513;
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.game-status {
+  text-align: center;
+  margin-bottom: 5px;
+  flex-shrink: 0;
+}
+
+.score {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10px;
+  font-weight: bold;
+  color: #8b4513;
+  padding: 0 5px;
+}
+
+.result-display {
+  margin: 6px 0;
+  flex-shrink: 0;
+}
+
+.hands {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 5px;
+}
+
+.hands.shake {
+  animation: shake-hands 0.5s ease-in-out;
+}
+
+@keyframes shake-hands {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px) rotate(-5deg); }
+  75% { transform: translateX(5px) rotate(5deg); }
+}
+
+.hand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.hand.slide-in-left {
+  animation: slide-in-left 0.5s ease-out;
+}
+
+.hand.slide-in-right {
+  animation: slide-in-right 0.5s ease-out;
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.hand span {
+  font-size: 10px;
+  color: #8b4513;
+}
+
+.hand-icon {
+  width: 24px;
+  height: 24px;
+  position: relative;
+}
+
+.vs {
+  font-size: 12px;
+  font-weight: bold;
+  color: #8b4513;
+}
+
+.result-text {
+  text-align: center;
+  font-size: 11px;
+  font-weight: bold;
+  padding: 5px;
+  border-radius: 4px;
+}
+
+.result-text.bounce-in {
+  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.result-text.win {
+  background: #90EE90;
+  color: #006400;
+}
+
+.result-text.lose {
+  background: #FFB6C1;
+  color: #8b0000;
+}
+
+.result-text.draw {
+  background: #FFE4B5;
+  color: #8b4513;
+}
+
+.choices {
+  display: flex;
+  gap: 5px;
+  margin-bottom: 6px;
+  flex-shrink: 0;
+}
+
+.choice-btn {
+  flex: 1;
+  background: #fff;
+  border: 3px solid #8b4513;
+  border-radius: 5px;
+  padding: 6px 3px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  font-family: 'DotGothic16', sans-serif;
+}
+
+.choice-btn:hover:not(:disabled) {
+  background: #fffacd;
+  transform: scale(1.05);
+  animation: pulse 0.6s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1.05); }
+  50% { transform: scale(1.1); }
+}
+
+.choice-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.choice-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.choice-btn span {
+  font-size: 9px;
+  color: #8b4513;
+}
+
+.choice-icon, .hand-icon {
+  width: 20px;
+  height: 20px;
+  position: relative;
+}
+
+/* Pixel Art Icons */
+.icon-rock::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    -2px -2px 0 #888, -1px -2px 0 #888, 0 -2px 0 #888, 1px -2px 0 #888,
+    -3px -1px 0 #888, -2px -1px 0 #aaa, -1px -1px 0 #aaa, 0 -1px 0 #aaa, 1px -1px 0 #aaa, 2px -1px 0 #888,
+    -3px 0 0 #888, -2px 0 0 #aaa, -1px 0 0 #666, 0 0 0 #666, 1px 0 0 #aaa, 2px 0 0 #888,
+    -2px 1px 0 #888, -1px 1px 0 #aaa, 0 1px 0 #aaa, 1px 1px 0 #888,
+    -1px 2px 0 #888, 0 2px 0 #888;
+}
+
+.icon-paper::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    -2px -3px 0 #ffcc99, -1px -3px 0 #ffcc99, 0 -3px 0 #ffcc99, 1px -3px 0 #ffcc99, 2px -3px 0 #ffcc99,
+    -3px -2px 0 #ffcc99, -2px -2px 0 #ffcc99, -1px -2px 0 #ffcc99, 0 -2px 0 #ffcc99, 1px -2px 0 #ffcc99, 2px -2px 0 #ffcc99, 3px -2px 0 #ffcc99,
+    -3px -1px 0 #ffcc99, -2px -1px 0 #ffcc99, -1px -1px 0 #ffcc99, 0 -1px 0 #ffcc99, 1px -1px 0 #ffcc99, 2px -1px 0 #ffcc99, 3px -1px 0 #ffcc99,
+    -3px 0 0 #ffcc99, -2px 0 0 #ffcc99, -1px 0 0 #ffaa77, 0 0 0 #ffaa77, 1px 0 0 #ffaa77, 2px 0 0 #ffcc99, 3px 0 0 #ffcc99,
+    -3px 1px 0 #ffcc99, -2px 1px 0 #ffcc99, -1px 1px 0 #ffcc99, 0 1px 0 #ffcc99, 1px 1px 0 #ffcc99, 2px 1px 0 #ffcc99, 3px 1px 0 #ffcc99;
+}
+
+.icon-scissors::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    -3px -2px 0 #888, -2px -2px 0 #888,
+    -3px -1px 0 #888, -2px -1px 0 #888, 
+    -2px 0 0 #888, -1px 0 0 #888, 0 0 0 #888, 1px 0 0 #888, 2px 0 0 #888,
+    -1px 1px 0 #888, 0 1px 0 #888, 1px 1px 0 #888,
+    2px -2px 0 #888, 3px -2px 0 #888,
+    2px -1px 0 #888, 3px -1px 0 #888;
+}
+
+.game-over {
+  text-align: center;
+  margin-bottom: 6px;
+  flex-shrink: 0;
+}
+
+.final-result {
+  font-size: 13px;
+  margin: 6px 0;
+  padding: 8px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.result-icon {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Trophy icon for win */
+.icon-win::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    /* Cup top */
+    -3px -4px 0 #ffd700, -2px -4px 0 #ffd700, -1px -4px 0 #ffd700, 0 -4px 0 #ffd700, 1px -4px 0 #ffd700, 2px -4px 0 #ffd700, 3px -4px 0 #ffd700,
+    /* Cup body */
+    -2px -3px 0 #ffd700, -1px -3px 0 #ffed4e, 0 -3px 0 #ffed4e, 1px -3px 0 #ffed4e, 2px -3px 0 #ffd700,
+    -2px -2px 0 #ffd700, -1px -2px 0 #ffed4e, 0 -2px 0 #ffed4e, 1px -2px 0 #ffed4e, 2px -2px 0 #ffd700,
+    -2px -1px 0 #ffd700, -1px -1px 0 #ffed4e, 0 -1px 0 #ffed4e, 1px -1px 0 #ffed4e, 2px -1px 0 #ffd700,
+    -2px 0 0 #ffd700, -1px 0 0 #ffd700, 0 0 0 #ffd700, 1px 0 0 #ffd700, 2px 0 0 #ffd700,
+    /* Base */
+    -1px 1px 0 #b8860b, 0 1px 0 #b8860b, 1px 1px 0 #b8860b,
+    -2px 2px 0 #b8860b, -1px 2px 0 #b8860b, 0 2px 0 #b8860b, 1px 2px 0 #b8860b, 2px 2px 0 #b8860b;
+}
+
+/* Broken heart icon for lose */
+.icon-lose::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    /* Left side of heart */
+    -3px -2px 0 #ff6b6b, -2px -2px 0 #ff6b6b,
+    -4px -1px 0 #ff6b6b, -3px -1px 0 #ff6b6b, -2px -1px 0 #ff6b6b, -1px -1px 0 #ff6b6b,
+    -4px 0 0 #ff6b6b, -3px 0 0 #ff6b6b, -2px 0 0 #ff6b6b, -1px 0 0 #ff6b6b,
+    /* Right side of heart */
+    1px -2px 0 #ff6b6b, 2px -2px 0 #ff6b6b,
+    0 -1px 0 #ff6b6b, 1px -1px 0 #ff6b6b, 2px -1px 0 #ff6b6b, 3px -1px 0 #ff6b6b,
+    0 0 0 #ff6b6b, 1px 0 0 #ff6b6b, 2px 0 0 #ff6b6b, 3px 0 0 #ff6b6b,
+    /* Bottom crack (broken) */
+    -3px 1px 0 #ff6b6b, -1px 1px 0 #ff6b6b, 1px 1px 0 #ff6b6b,
+    -2px 2px 0 #ff6b6b, 0 2px 0 #ff6b6b,
+    -1px 3px 0 #ff6b6b;
+}
+
+/* Handshake icon for draw */
+.icon-draw::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    /* Left hand */
+    -4px -1px 0 #ffcc99, -3px -1px 0 #ffcc99, -2px -1px 0 #ffcc99,
+    -4px 0 0 #ffcc99, -3px 0 0 #ffcc99, -2px 0 0 #ffcc99, -1px 0 0 #ffcc99,
+    -4px 1px 0 #ffcc99, -3px 1px 0 #ffcc99, -2px 1px 0 #ffcc99,
+    /* Right hand */
+    1px -1px 0 #ffcc99, 2px -1px 0 #ffcc99, 3px -1px 0 #ffcc99,
+    0 0 0 #ffcc99, 1px 0 0 #ffcc99, 2px 0 0 #ffcc99, 3px 0 0 #ffcc99,
+    1px 1px 0 #ffcc99, 2px 1px 0 #ffcc99, 3px 1px 0 #ffcc99;
+}
+
+.final-result h3 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.final-result.win {
+  background: #90EE90;
+  color: #006400;
+}
+
+.final-result.lose {
+  background: #FFB6C1;
+  color: #8b0000;
+}
+
+.final-result.draw {
+  background: #FFE4B5;
+  color: #8b4513;
+}
+
+.action-btn {
+  width: 100%;
+  padding: 5px;
+  background: #4CAF50;
+  border: 3px solid #2e7d32;
+  border-radius: 4px;
+  color: white;
+  font-size: 10px;
+  font-weight: bold;
+  cursor: pointer;
+  font-family: 'DotGothic16', sans-serif;
+  margin-bottom: 5px;
+}
+
+.action-btn:hover {
+  background: #45a049;
+}
+
+.action-btn:active {
+  transform: scale(0.95);
+}
+
+.close-btn {
+  width: 100%;
+  padding: 5px;
+  background: #cd853f;
+  border: 3px solid #8b4513;
+  border-radius: 4px;
+  color: white;
+  font-size: 10px;
+  font-weight: bold;
+  cursor: pointer;
+  font-family: 'DotGothic16', sans-serif;
+  flex-shrink: 0;
+}
+
+.close-btn:hover {
+  background: #d2691e;
+}
+
+.close-btn:active {
+  transform: scale(0.95);
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+</style>

src/components/InventoryScreen.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="inventory-screen" @click.self="$emit('close')">
+    <div class="inventory-container" @click="$emit('close')">
+      <div class="screen-title">背包</div>
+      
+      <div class="inventory-grid">
+        <div 
+          v-for="(item, index) in items" 
+          :key="index"
+          class="inventory-slot"
+          :class="{ 'selected': selectedIndex === index, 'empty': !item }"
+          :draggable="!!item"
+          @dragstart="handleDragStart(index, $event)"
+          @dragover.prevent
+          @drop="handleDrop(index)"
+          @click.stop="selectItem(index)"
+          @mouseenter="item ? handleMouseEnter(item, $event) : null"
+          @mouseleave="handleMouseLeave"
+          @dblclick="item ? useItem() : null"
+        >
+          <template v-if="item">
+            <div class="item-icon" :class="item.iconClass"></div>
+            <div class="item-count" v-if="item.count > 1">x{{ item.count }}</div>
+            <div class="equipped-badge" v-if="isEquipped(item)">E</div>
+          </template>
+        </div>
+      </div>
+
+
+    </div>
+
+    <!-- Floating Tooltip -->
+    <div 
+      v-if="hoveredItem" 
+      class="floating-tooltip"
+      :style="tooltipStyle"
+      @mouseenter="cancelHideTooltip"
+      @mouseleave="handleMouseLeave"
+    >
+      <div class="tooltip-name">{{ hoveredItem.name }}</div>
+      <div class="tooltip-desc">{{ hoveredItem.description }}</div>
+      <div class="tooltip-footer">
+        <div class="tooltip-hint">雙擊使用</div>
+        <button class="tooltip-delete-btn" @click.stop="handleDeleteItem(hoveredItem)">
+          <div class="trash-icon-small"></div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  inventory: {
+    type: Array,
+    default: () => []
+  },
+  equippedItems: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['close', 'use-item', 'update:inventory']);
+
+const selectedIndex = ref(-1);
+const draggedIndex = ref(null);
+const isDragging = ref(false);
+
+const items = computed(() => props.inventory);
+const selectedItem = computed(() => {
+  if (selectedIndex.value >= 0 && selectedIndex.value < items.value.length) {
+    return items.value[selectedIndex.value];
+  }
+  return null;
+});
+
+function selectItem(index) {
+  if (items.value[index]) {
+    selectedIndex.value = index;
+  } else {
+    selectedIndex.value = -1;
+  }
+}
+
+// Drag and Drop Logic
+function handleDragStart(index, event) {
+  if (!items.value[index]) return;
+  draggedIndex.value = index;
+  isDragging.value = true;
+  // Set drag image or effect if needed
+  event.dataTransfer.effectAllowed = 'move';
+}
+
+function handleDrop(targetIndex) {
+  isDragging.value = false;
+  if (draggedIndex.value === null) return;
+  
+  const newInventory = [...items.value];
+  const draggedItem = newInventory[draggedIndex.value];
+  const targetItem = newInventory[targetIndex];
+  
+  // Swap items
+  newInventory[draggedIndex.value] = targetItem;
+  newInventory[targetIndex] = draggedItem;
+  
+  emit('update:inventory', newInventory);
+  draggedIndex.value = null;
+}
+
+function handleDeleteItem(item) {
+  const index = items.value.indexOf(item);
+  if (index !== -1) {
+    const newInventory = [...items.value];
+    newInventory[index] = null;
+    emit('update:inventory', newInventory);
+    
+    // Clear hover if deleted
+    if (hoveredItem.value === item) {
+      hoveredItem.value = null;
+    }
+  }
+}
+
+function useItem() {
+  // Use selected item if available, otherwise use hovered item (for double click)
+  const itemToUse = selectedItem.value || hoveredItem.value;
+  if (itemToUse) {
+    emit('use-item', itemToUse);
+  }
+}
+
+function isEquipped(item) {
+  return props.equippedItems.includes(item.id);
+}
+
+// Tooltip Logic
+const hoveredItem = ref(null);
+const tooltipStyle = ref({ top: '0px', left: '0px' });
+let hideTooltipTimeout = null;
+
+function handleMouseEnter(item, event) {
+  cancelHideTooltip();
+  hoveredItem.value = item;
+  updateTooltipPosition(event);
+}
+
+function handleMouseLeave() {
+  // Delay hiding to allow moving to tooltip
+  hideTooltipTimeout = setTimeout(() => {
+    hoveredItem.value = null;
+  }, 200);
+}
+
+function cancelHideTooltip() {
+  if (hideTooltipTimeout) {
+    clearTimeout(hideTooltipTimeout);
+    hideTooltipTimeout = null;
+  }
+}
+
+function updateTooltipPosition(event) {
+  const rect = event.target.getBoundingClientRect();
+  const tooltipWidth = 150; // Estimated width
+  const tooltipHeight = 80; // Estimated height
+  
+  let top = rect.top - 10;
+  let left = rect.left + rect.width / 2;
+  let transform = 'translate(-50%, -100%)';
+
+  // Check top boundary
+  if (top < tooltipHeight) {
+    // Show below if not enough space above
+    top = rect.bottom + 10;
+    transform = 'translate(-50%, 0)';
+  }
+
+  // Check left/right boundary
+  const viewportWidth = window.innerWidth;
+  if (left - tooltipWidth / 2 < 0) {
+    left = tooltipWidth / 2 + 10;
+  } else if (left + tooltipWidth / 2 > viewportWidth) {
+    left = viewportWidth - tooltipWidth / 2 - 10;
+  }
+
+  tooltipStyle.value = {
+    top: top + 'px',
+    left: left + 'px',
+    transform: transform
+  };
+}
+</script>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
+
+.inventory-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'DotGothic16', monospace;
+}
+
+.inventory-container {
+  width: 100%;
+  height: 100%;
+  background: #f0d09c;
+  border: none;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+
+.screen-title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #3d2f1f;
+  border-bottom: 2px dashed #8b4513;
+  padding-bottom: 8px;
+}
+
+.inventory-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
+  background: #e0b070;
+  padding: 4px;
+  border-radius: 4px;
+  border: 2px solid #c49454;
+}
+
+.inventory-slot {
+  aspect-ratio: 1;
+  background: #f8e8c8;
+  border: 2px solid #c49454;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.1s;
+}
+
+.inventory-slot:hover {
+  background: #fff;
+  transform: translateY(-1px);
+}
+
+.inventory-slot.selected {
+  border-color: #d32f2f;
+  background: #fff;
+  box-shadow: 0 0 0 2px #d32f2f;
+}
+
+.inventory-slot.empty {
+  background: rgba(0,0,0,0.05);
+  border-color: rgba(0,0,0,0.1);
+  cursor: default;
+}
+
+.inventory-slot.empty:hover {
+  background: rgba(0,0,0,0.05);
+  transform: none;
+}
+
+.item-count {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  font-size: 10px;
+  color: #333;
+  background: rgba(255,255,255,0.8);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+.equipped-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  font-size: 10px;
+  color: #fff;
+  background: #4caf50;
+  padding: 0 3px;
+  border-radius: 2px;
+  font-weight: bold;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}
+
+
+
+/* Item Icons (CSS Shapes) */
+.icon-cookie::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  background: #d4a373;
+  border-radius: 50%;
+  display: block;
+  box-shadow: inset -2px -2px 0 #8b4513;
+}
+
+.icon-water::before {
+  content: '';
+  width: 12px;
+  height: 16px;
+  background: #4fc3f7;
+  border-radius: 40% 40% 40% 40% / 60% 60% 40% 40%;
+  display: block;
+  box-shadow: inset -2px -2px 0 #0288d1;
+}
+
+.icon-amulet::before {
+  content: '';
+  width: 14px;
+  height: 18px;
+  background: #ffeb3b;
+  border: 1px solid #fbc02d;
+  display: block;
+  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
+}
+
+.icon-sunglasses::before {
+  content: '';
+  width: 18px;
+  height: 8px;
+  background: #333;
+  border-radius: 2px;
+  display: block;
+  box-shadow: 
+    inset 1px 1px 0 #555,
+    4px 0 0 #000,
+    -4px 0 0 #000;
+}
+
+/* Floating Tooltip */
+.floating-tooltip {
+  position: fixed; /* Use fixed to position relative to viewport */
+  background: rgba(0, 0, 0, 0.9);
+  border: 1px solid #fff;
+  padding: 8px;
+  border-radius: 4px;
+  /* pointer-events: none;  <-- Removed to allow clicking button */
+  z-index: 200; /* Above everything */
+  min-width: 120px;
+  max-width: 200px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
+}
+
+.tooltip-name {
+  color: #ffcc00;
+  font-weight: bold;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.tooltip-desc {
+  color: #fff;
+  font-size: 10px;
+  line-height: 1.3;
+  margin-bottom: 4px;
+}
+
+.tooltip-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px dashed #555;
+}
+
+.tooltip-hint {
+  color: #aaa;
+  font-size: 9px;
+  font-style: italic;
+}
+
+.tooltip-delete-btn {
+  background: #d32f2f;
+  border: 1px solid #b71c1c;
+  border-radius: 2px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+}
+
+.tooltip-delete-btn:hover {
+  background: #f44336;
+}
+
+.trash-icon-small {
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") no-repeat center;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") no-repeat center;
+}
+</style>

src/components/JiaobeiAnimation.vue

@@ -35,7 +35,7 @@
         </template>
 
         <!-- 求籤模式 -->
-        <template v-else>
+        <template v-else-if="mode === 'fortune'">
           <!-- 失敗 (非聖筊) -->
           <button v-if="resultType !== 'saint'" class="pixel-btn close-btn" @click="handleRetryFortune">重新求籤</button>
           
@@ -45,6 +45,11 @@
             <button v-else class="pixel-btn retry-btn" @click="$emit('finish-fortune')">查看籤詩</button>
           </template>
         </template>
+
+        <!-- 招魂模式 -->
+        <template v-else-if="mode === 'resurrect'">
+          <button class="pixel-btn retry-btn" @click="$emit('resurrect-confirm')">確認</button>
+        </template>
       </div>
     </div>
   </div>

src/components/PetInfoScreen.vue

@@ -0,0 +1,773 @@
+<template>
+  <div class="pet-info-screen" @click="$emit('close')">
+    <div class="info-container">
+      <!-- Tabs -->
+      <div class="info-tabs" @click.stop>
+        <button 
+          class="tab-btn" 
+          :class="{ active: activeTab === 0 }"
+          @click="activeTab = 0"
+        >
+          狀態
+        </button>
+        <button 
+          class="tab-btn" 
+          :class="{ active: activeTab === 1 }"
+          @click="activeTab = 1"
+        >
+          成就
+        </button>
+      </div>
+
+      <!-- Close Button Removed -->
+
+      <!-- Stats View -->
+      <div v-if="activeTab === 0" class="stats-view">
+        <!-- Stats Bars at Top (Pixel Style) -->
+        <div class="stats-section">
+        <div class="stat-item">
+          <div class="stat-label-row">
+            <span class="stat-label">飢餓</span>
+            <span class="stat-value">{{ displayHunger }}%</span>
+          </div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'hunger-' + i"
+              class="pixel-block"
+              :class="{ 
+                'filled': i <= Math.floor(displayHunger / 10),
+                'color-orange': i <= Math.floor(displayHunger / 10)
+              }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="stat-item">
+          <div class="stat-label-row">
+            <span class="stat-label">快樂</span>
+            <span class="stat-value">{{ displayHappiness }}%</span>
+          </div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'happiness-' + i"
+              class="pixel-block"
+              :class="{ 
+                'filled': i <= Math.floor(displayHappiness / 10),
+                'color-yellow': i <= Math.floor(displayHappiness / 10)
+              }"
+            ></div>
+          </div>
+        </div>
+
+        <div class="stat-item">
+          <div class="stat-label-row">
+            <span class="stat-label">健康</span>
+            <span class="stat-value">{{ displayHealth }}%</span>
+          </div>
+          <div class="pixel-bar">
+            <div 
+              v-for="i in 10" 
+              :key="'health-' + i"
+              class="pixel-block pixel-heart"
+              :class="{ 
+                'filled': i <= Math.floor(displayHealth / 10),
+                'color-red': i <= Math.floor(displayHealth / 10)
+              }"
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="info-content">
+        <div class="info-title">═ 寵物資料 ═</div>
+        
+        <div class="info-item">
+          <span class="label">名字</span>
+          <span class="value">{{ petName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">階段</span>
+          <span class="value">{{ stageText }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">年齡</span>
+          <span class="value">{{ age }}歲</span>
+        </div>
+        <div class="info-item">
+          <span class="label">身高</span>
+          <span class="value">{{ height }}cm</span>
+        </div>
+        <div class="info-item">
+          <span class="label">體重</span>
+          <span class="value">{{ weight }}kg</span>
+        </div>
+        
+        <div class="info-divider"></div>
+
+        <!-- Destiny -->
+        <div class="info-item destiny-item" v-if="destiny">
+          <span class="label">命格</span>
+          <div class="destiny-content">
+             <span class="value destiny-name">{{ destiny.name }}</span>
+             <span class="destiny-desc">{{ destiny.description }}</span>
+          </div>
+        </div>
+        <div class="info-item" v-else>
+          <span class="label">命格</span>
+          <span class="value">???</span>
+        </div>
+
+        <div class="info-divider"></div>
+
+        <!-- V2 Stats -->
+        <div class="info-item">
+          <span class="label">力量 (STR)</span>
+          <span class="value">{{ str }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">智力 (INT)</span>
+          <span class="value">{{ int }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">敏捷 (DEX)</span>
+          <span class="value">{{ dex }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">世代</span>
+          <span class="value">第 {{ generation }} 代</span>
+        </div>
+        <div class="info-item">
+          <span class="label">神明好感</span>
+          <span class="value">{{ deityFavor }}</span>
+        </div>
+        
+        <div class="info-item">
+          <span class="label">HP</span>
+          <span class="value">{{ baseStats.hp }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">攻擊</span>
+          <span class="value">{{ baseStats.attack }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">防禦</span>
+          <span class="value">{{ baseStats.defense }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">速度</span>
+          <span class="value">{{ baseStats.speed }}</span>
+        </div>
+      </div>
+      </div>
+
+      <!-- Achievements View -->
+      <div v-if="activeTab === 1" class="achievements-view">
+        <div class="info-title">═ 成就列表 ═</div>
+        <div class="achievements-list">
+          <div 
+            v-for="ach in achievements" 
+            :key="ach.id" 
+            class="achievement-item"
+            :class="{ unlocked: ach.unlocked }"
+          >
+            <div class="ach-icon">
+              <div v-if="ach.unlocked" :class="'pixel-icon-' + ach.id"></div>
+              <div v-else class="pixel-icon-locked"></div>
+            </div>
+            <div class="ach-info">
+              <div class="ach-name">{{ ach.name }}</div>
+              <div class="ach-desc">{{ ach.desc }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  petName: String,
+  stage: String,
+  poopCount: Number,
+  baseStats: Object,
+  hunger: {
+    type: Number,
+    default: 100
+  },
+  happiness: {
+    type: Number,
+    default: 100
+  },
+  health: {
+    type: Number,
+    default: 100
+  },
+  // v2 Stats
+  str: { type: Number, default: 0 },
+  int: { type: Number, default: 0 },
+  dex: { type: Number, default: 0 },
+  generation: { type: Number, default: 1 },
+  deityFavor: { type: Number, default: 0 },
+  destiny: { type: Object, default: null },
+  achievements: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const activeTab = ref(0);
+
+defineEmits(['close']);
+
+// Display values (ceiling for bars)
+const displayHunger = computed(() => Math.ceil(props.hunger));
+const displayHappiness = computed(() => Math.ceil(props.happiness));
+const displayHealth = computed(() => Math.ceil(props.health));
+
+const stageText = computed(() => {
+  const stageMap = {
+    'egg': '蛋',
+    'baby': '幼年',
+    'child': '成長',
+    'adult': '成熟'
+  };
+  return stageMap[props.stage] || props.stage;
+});
+
+const age = computed(() => {
+  const ageMap = { 'egg': 0, 'baby': 1, 'child': 3, 'adult': 7 };
+  return ageMap[props.stage] || 0;
+});
+
+const height = computed(() => {
+  const heightMap = { 'egg': 5, 'baby': 15, 'child': 30, 'adult': 45 };
+  return heightMap[props.stage] || 30;
+});
+
+const weight = computed(() => {
+  const weightMap = { 'egg': 0.5, 'baby': 2, 'child': 5, 'adult': 8 };
+  return weightMap[props.stage] || 5;
+});
+</script>
+
+<style scoped>
+.pet-info-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #f0d09c;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  image-rendering: pixelated;
+  overflow-y: auto;
+}
+
+.info-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: min-content;
+  position: relative; /* For absolute positioning of close button */
+}
+
+.close-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 24px;
+  height: 24px;
+  background: #d32f2f;
+  border: 2px solid #8b4513;
+  color: white;
+  font-family: 'DotGothic16', monospace;
+  font-weight: bold;
+  font-size: 14px;
+  cursor: pointer;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 0 #8b4513;
+}
+
+.close-btn:active {
+  transform: translateY(2px);
+  box-shadow: none;
+}
+
+/* Tabs */
+.info-tabs {
+  display: flex;
+  background: #c49454;
+  padding: 8px 6px 0 6px; /* Increased top padding */
+  gap: 4px;
+}
+
+.tab-btn {
+  flex: 1;
+  border: 2px solid transparent; /* Reserve space */
+  border-bottom: none;
+  background: #a67c43;
+  color: #3d2f1f;
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  padding: 4px 0;
+  text-align: center;
+  border-radius: 4px 4px 0 0;
+  cursor: pointer;
+  position: relative;
+  top: 2px;
+  box-sizing: border-box;
+  height: 32px;
+  outline: none; /* Remove blue focus ring */
+}
+
+.tab-btn.active {
+  background: #f0d09c; /* Match body bg */
+  font-weight: bold;
+  top: 0;
+  border-color: #8b6f47;
+  border-bottom: 2px solid #f0d09c; /* Blend with content */
+  z-index: 2;
+  height: 34px; /* Slightly taller to cover bottom gap */
+  margin-bottom: -2px;
+}
+
+.stats-view, .achievements-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Stats Section - Pixel Style */
+.stats-section {
+  padding: 12px 14px;
+  background: #c49454;
+  border-bottom: 3px solid #8b6f47;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  color: #3d2f1f;
+}
+
+.stat-label {
+  font-weight: bold;
+}
+
+.stat-value {
+  font-weight: 600;
+}
+
+.pixel-bar {
+  display: flex;
+  gap: 3px;
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+
+.pixel-block {
+  width: 14px;
+  height: 14px;
+  background: rgba(139, 111, 71, 0.3);
+  border: 1px solid rgba(139, 111, 71, 0.5);
+  border-radius: 2px;
+  transition: all 0.2s ease;
+}
+
+.pixel-block.filled {
+  box-shadow: 
+    inset 1px 1px 0 rgba(255, 255, 255, 0.4),
+    0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+.pixel-block.color-orange.filled {
+  background: linear-gradient(135deg, #ff9966 0%, #ff6633 100%);
+  border-color: #cc4422;
+}
+
+.pixel-block.color-yellow.filled {
+  background: linear-gradient(135deg, #ffdd66 0%, #ffcc33 100%);
+  border-color: #ccaa22;
+}
+
+.pixel-block.color-red.filled {
+  background: linear-gradient(135deg, #ff6666 0%, #ff3333 100%);
+  border-color: #cc2222;
+}
+
+/* Pixel Heart Shape */
+.pixel-heart {
+  position: relative;
+  background: transparent !important;
+  border: none !important;
+  width: 16px;
+  height: 16px;
+}
+
+/* Empty heart outline */
+.pixel-heart::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  box-shadow:
+    /* Top bumps - outline only */
+    -3px -3px 0 0 #8b6f47,
+    -2px -3px 0 0 #8b6f47,
+    2px -3px 0 0 #8b6f47,
+    3px -3px 0 0 #8b6f47,
+    /* Upper sides */
+    -4px -2px 0 0 #8b6f47,
+    4px -2px 0 0 #8b6f47,
+    /* Middle sides */
+    -4px -1px 0 0 #8b6f47,
+    4px -1px 0 0 #8b6f47,
+    -4px 0px 0 0 #8b6f47,
+    4px 0px 0 0 #8b6f47,
+    /* Lower sides */
+    -3px 1px 0 0 #8b6f47,
+    3px 1px 0 0 #8b6f47,
+    -2px 2px 0 0 #8b6f47,
+    2px 2px 0 0 #8b6f47,
+    -1px 3px 0 0 #8b6f47,
+    1px 3px 0 0 #8b6f47,
+    /* Bottom point */
+    0px 4px 0 0 #8b6f47;
+}
+
+/* Filled heart */
+.pixel-heart.filled::before {
+  box-shadow:
+    /* Top bumps */
+    -3px -3px 0 0 #cc2222,
+    -2px -3px 0 0 #cc2222,
+    2px -3px 0 0 #cc2222,
+    3px -3px 0 0 #cc2222,
+    /* Second row */
+    -4px -2px 0 0 #ff3333,
+    -3px -2px 0 0 #ff6666,
+    -2px -2px 0 0 #ff6666,
+    -1px -2px 0 0 #ff6666,
+    0px -2px 0 0 #ff6666,
+    1px -2px 0 0 #ff6666,
+    2px -2px 0 0 #ff6666,
+    3px -2px 0 0 #ff6666,
+    4px -2px 0 0 #ff3333,
+    /* Third row */
+    -4px -1px 0 0 #ff3333,
+    -3px -1px 0 0 #ff6666,
+    -2px -1px 0 0 #ff8888,
+    -1px -1px 0 0 #ff8888,
+    0px -1px 0 0 #ff8888,
+    1px -1px 0 0 #ff8888,
+    2px -1px 0 0 #ff8888,
+    3px -1px 0 0 #ff6666,
+    4px -1px 0 0 #ff3333,
+    /* Middle row */
+    -4px 0px 0 0 #ff3333,
+    -3px 0px 0 0 #ff6666,
+    -2px 0px 0 0 #ff6666,
+    -1px 0px 0 0 #ff6666,
+    0px 0px 0 0 #ff6666,
+    1px 0px 0 0 #ff6666,
+    2px 0px 0 0 #ff6666,
+    3px 0px 0 0 #ff6666,
+    4px 0px 0 0 #ff3333,
+    /* Lower rows */
+    -3px 1px 0 0 #ff3333,
+    -2px 1px 0 0 #ff3333,
+    -1px 1px 0 0 #ff3333,
+    0px 1px 0 0 #ff3333,
+    1px 1px 0 0 #ff3333,
+    2px 1px 0 0 #ff3333,
+    3px 1px 0 0 #ff3333,
+    -2px 2px 0 0 #ff3333,
+    -1px 2px 0 0 #ff3333,
+    0px 2px 0 0 #ff3333,
+    1px 2px 0 0 #ff3333,
+    2px 2px 0 0 #ff3333,
+    -1px 3px 0 0 #cc2222,
+    0px 3px 0 0 #cc2222,
+    1px 3px 0 0 #cc2222,
+    /* Bottom point */
+    0px 4px 0 0 #cc2222;
+}
+
+.info-content {
+  padding: 12px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.info-title {
+  text-align: center;
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #3d2f1f;
+  margin-bottom: 6px;
+  padding-bottom: 6px;
+  border-bottom: 2px solid #c49454;
+}
+
+.info-divider {
+  height: 2px;
+  background: #c49454;
+  margin: 6px 0;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 10px;
+  background: #e0b070;
+  border: 2px solid #c49454;
+  box-shadow: 
+    inset 1px 1px 0 #f0d09c,
+    inset -1px -1px 0 #8b6f47;
+}
+
+.label {
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  font-weight: bold;
+  color: #3d2f1f;
+}
+
+.value {
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  color: #3d2f1f;
+  font-weight: 600;
+}
+.value {
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  color: #3d2f1f;
+  font-weight: 600;
+}
+
+.destiny-item {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.destiny-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-left: 4px;
+  gap: 2px;
+}
+
+.destiny-name {
+  color: #d32f2f; /* Red for emphasis */
+  font-size: 12px;
+}
+
+.destiny-desc {
+  font-family: 'DotGothic16', monospace;
+  font-size: 10px;
+  color: #665544;
+}
+
+/* Achievements */
+.achievements-view {
+  padding: 12px;
+}
+
+.achievements-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.achievement-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  background: #dcb880;
+  border: 2px solid #c49454;
+  border-radius: 4px;
+  opacity: 0.7;
+}
+
+.achievement-item.unlocked {
+  background: #fff8e0;
+  border-color: #ffd700;
+  opacity: 1;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.ach-icon {
+  font-size: 20px;
+  width: 30px;
+  text-align: center;
+}
+
+.ach-info {
+  flex: 1;
+}
+
+.ach-name {
+  font-family: 'DotGothic16', monospace;
+  font-weight: bold;
+  font-size: 12px;
+  color: #3d2f1f;
+}
+
+.ach-desc {
+  font-family: 'DotGothic16', monospace;
+  font-size: 10px;
+  color: #665544;
+}
+/* Pixel Icons for Achievements */
+.ach-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* Common Pixel Art Base */
+.pixel-art {
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  transform: scale(2); /* Scale up the 1px pixels */
+}
+
+/* Locked Icon (Padlock) */
+.pixel-icon-locked {
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  transform: scale(2);
+  color: #8b6f47;
+  box-shadow: 
+    /* Body */
+    -3px 0, -2px 0, -1px 0, 0px 0, 1px 0, 2px 0, 3px 0,
+    -3px 1px, -2px 1px, -1px 1px, 0px 1px, 1px 1px, 2px 1px, 3px 1px,
+    -3px 2px, -2px 2px, -1px 2px, 0px 2px, 1px 2px, 2px 2px, 3px 2px,
+    -3px 3px, -2px 3px, -1px 3px, 0px 3px, 1px 3px, 2px 3px, 3px 3px,
+    /* Shackle */
+    -2px -1px, 2px -1px,
+    -2px -2px, 2px -2px,
+    -1px -3px, 0px -3px, 1px -3px;
+}
+
+/* Newbie (Chick) - Yellow */
+.pixel-icon-newbie {
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  transform: scale(2);
+  box-shadow: 
+    /* Top feathers */
+    0px -5px #ffe135,
+    /* Head */
+    -2px -4px #ffe135, -1px -4px #ffe135, 0px -4px #ffe135, 1px -4px #ffe135, 2px -4px #ffe135,
+    -3px -3px #ffe135, -2px -3px #ffe135, -1px -3px #ffe135, 0px -3px #ffe135, 1px -3px #ffe135, 2px -3px #ffe135, 3px -3px #ffe135,
+    -3px -2px #ffe135, -2px -2px #000, -1px -2px #ffe135, 0px -2px #ffe135, 1px -2px #ffe135, 2px -2px #000, 3px -2px #ffe135, /* Eyes */
+    -3px -1px #ffe135, -2px -1px #ff69b4, -1px -1px #ffe135, 0px -1px #ff8c00, 1px -1px #ffe135, 2px -1px #ff69b4, 3px -1px #ffe135, /* Cheeks & Beak */
+    /* Body */
+    -3px 0px #ffe135, -2px 0px #ffe135, -1px 0px #ffe135, 0px 0px #ffe135, 1px 0px #ffe135, 2px 0px #ffe135, 3px 0px #ffe135,
+    -2px 1px #ffe135, -1px 1px #ffe135, 0px 1px #ffe135, 1px 1px #ffe135, 2px 1px #ffe135,
+    /* Feet */
+    -2px 2px #ff8c00, 2px 2px #ff8c00;
+}
+
+/* Veteran (Mario Style) */
+.pixel-icon-veteran {
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  transform: scale(2);
+  box-shadow: 
+    /* Hat */
+    -2px -6px #f00, -1px -6px #f00, 0px -6px #f00, 1px -6px #f00, 2px -6px #f00,
+    -3px -5px #f00, -2px -5px #f00, -1px -5px #f00, 0px -5px #f00, 1px -5px #f00, 2px -5px #f00, 3px -5px #f00,
+    /* Face */
+    -2px -4px #fc9, -1px -4px #fc9, 0px -4px #fc9, 1px -4px #fc9, 2px -4px #000, 3px -4px #fc9,
+    -3px -3px #fc9, -2px -3px #fc9, -1px -3px #fc9, 0px -3px #fc9, 1px -3px #000, 2px -3px #fc9, 3px -3px #fc9,
+    /* Mustache */
+    -1px -2px #000, 0px -2px #000, 1px -2px #000, 2px -2px #000,
+    /* Body */
+    -2px -1px #f00, -1px -1px #00f, 0px -1px #f00, 1px -1px #00f, 2px -1px #f00,
+    -2px 0px #f00, -1px 0px #00f, 0px 0px #00f, 1px 0px #00f, 2px 0px #f00,
+    -2px 1px #00f, -1px 1px #00f, 0px 1px #00f, 1px 1px #00f, 2px 1px #00f,
+    /* Shoes */
+    -2px 2px #8b4513, -1px 2px #8b4513, 1px 2px #8b4513, 2px 2px #8b4513;
+}
+
+/* Healthy (Donald Style) */
+.pixel-icon-healthy {
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  transform: scale(2);
+  box-shadow: 
+    /* Hat */
+    -2px -6px #1e90ff, -1px -6px #1e90ff, 0px -6px #1e90ff, 1px -6px #1e90ff,
+    -3px -5px #000, -2px -5px #1e90ff, -1px -5px #1e90ff, 0px -5px #1e90ff, 1px -5px #1e90ff, 2px -5px #000,
+    /* Face */
+    -2px -4px #fff, -1px -4px #fff, 0px -4px #fff, 1px -4px #fff,
+    -3px -3px #fff, -2px -3px #00f, -1px -3px #fff, 0px -3px #fff, 1px -3px #00f, 2px -3px #fff, /* Eyes */
+    /* Beak */
+    -2px -2px #ffa500, -1px -2px #ffa500, 0px -2px #ffa500, 1px -2px #ffa500,
+    -1px -1px #ffa500, 0px -1px #ffa500,
+    /* Body (Sailor) */
+    -2px 0px #1e90ff, -1px 0px #1e90ff, 0px 0px #d00, 1px 0px #1e90ff, 2px 0px #1e90ff, /* Bowtie */
+    -2px 1px #fff, -1px 1px #fff, 0px 1px #fff, 1px 1px #fff, 2px 1px #fff;
+}
+
+/* Happy (Heart) */
+.pixel-icon-happy {
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  transform: scale(2);
+  color: #ff1493;
+  box-shadow: 
+    -2px -2px, -1px -2px, 1px -2px, 2px -2px,
+    -3px -1px, -2px -1px, -1px -1px, 0px -1px, 1px -1px, 2px -1px, 3px -1px,
+    -3px 0px, -2px 0px, -1px 0px, 0px 0px, 1px 0px, 2px 0px, 3px 0px,
+    -2px 1px, -1px 1px, 0px 1px, 1px 1px, 2px 1px,
+    -1px 2px, 0px 2px, 1px 2px,
+    0px 3px;
+}
+
+</style>

src/components/PlayMenu.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="play-menu-overlay" @click.self="$emit('close')">
+    <div class="play-menu-container">
+      <h2 class="menu-title">選擇遊戲</h2>
+      
+      <div class="game-options">
+        <button 
+          class="game-option"
+          @click="selectGame('training')"
+        >
+          <div class="option-icon icon-training"></div>
+          <div class="option-name">訓練</div>
+          <div class="option-desc">攻擊訓練</div>
+        </button>
+
+        <button 
+          class="game-option"
+          @click="selectGame('guessing')"
+        >
+          <div class="option-icon icon-rps"></div>
+          <div class="option-name">猜拳</div>
+          <div class="option-desc">剪刀石頭布</div>
+        </button>
+
+        <button 
+          class="game-option"
+          @click="selectGame('ball')"
+        >
+          <div class="option-icon icon-ball"></div>
+          <div class="option-name">接球</div>
+          <div class="option-desc">反應小遊戲</div>
+        </button>
+      </div>
+
+      <button class="close-btn" @click="$emit('close')">取消</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['close', 'select']);
+
+function selectGame(gameType) {
+  emit('select', gameType);
+}
+</script>
+
+<style scoped>
+.play-menu-overlay {
+  position: absolute;
+  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: 100;
+  font-family: 'DotGothic16', sans-serif;
+  overflow: auto;
+}
+
+.play-menu-container {
+  background: #f5f5dc;
+  border: 4px solid #8b4513;
+  border-radius: 12px;
+  padding: 15px;
+  min-width: 200px;
+  max-width: 90%;
+  max-height: 85%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  overflow-y: auto;
+  margin: 10px;
+}
+
+.menu-title {
+  text-align: center;
+  font-size: 14px;
+  margin: 0 0 12px 0;
+  color: #8b4513;
+}
+
+.game-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.game-option {
+  background: #fff;
+  border: 3px solid #8b4513;
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+  font-family: 'DotGothic16', sans-serif;
+}
+
+.game-option:hover {
+  background: #fffacd;
+  transform: scale(1.05);
+}
+
+.game-option:active {
+  transform: scale(0.95);
+}
+
+.option-icon {
+  width: 24px;
+  height: 24px;
+  margin: 0 auto 5px;
+  position: relative;
+}
+
+/* Pixel Art Icons */
+.icon-training::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    /* Explosion/Impact shape */
+    0 0 0 #ff0000,
+    -2px -2px 0 #ff4400, 2px -2px 0 #ff4400,
+    -3px 0 0 #ff6600, -2px 0 0 #ff4400, 0 0 0 #ff0000, 2px 0 0 #ff4400, 3px 0 0 #ff6600,
+    -2px 2px 0 #ff4400, 2px 2px 0 #ff4400,
+    /* Outer glow */
+    -4px -1px 0 #ffaa00, 4px -1px 0 #ffaa00,
+    -4px 1px 0 #ffaa00, 4px 1px 0 #ffaa00,
+    -1px -4px 0 #ffaa00, 1px -4px 0 #ffaa00,
+    -1px 4px 0 #ffaa00, 1px 4px 0 #ffaa00;
+}
+
+.icon-rps::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    /* Fist shape */
+    -1px -3px 0 #ffcc99, 0 -3px 0 #ffcc99, 1px -3px 0 #ffcc99,
+    -2px -2px 0 #ffcc99, -1px -2px 0 #ffcc99, 0 -2px 0 #ffcc99, 1px -2px 0 #ffcc99, 2px -2px 0 #ffcc99,
+    -2px -1px 0 #ffcc99, -1px -1px 0 #ffcc99, 0 -1px 0 #ffcc99, 1px -1px 0 #ffcc99, 2px -1px 0 #ffcc99,
+    -2px 0 0 #ffcc99, -1px 0 0 #ffcc99, 0 0 0 #ffaa77, 1px 0 0 #ffcc99, 2px 0 0 #ffcc99,
+    -2px 1px 0 #ffcc99, -1px 1px 0 #ffcc99, 0 1px 0 #ffcc99, 1px 1px 0 #ffcc99, 2px 1px 0 #ffcc99,
+    -1px 2px 0 #ffcc99, 0 2px 0 #ffcc99, 1px 2px 0 #ffcc99;
+}
+
+.icon-ball::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  background: transparent;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(2);
+  box-shadow:
+    /* Ball shape */
+    -1px -3px 0 #000, 0 -3px 0 #000, 1px -3px 0 #000,
+    -2px -2px 0 #000, -1px -2px 0 #fff, 0 -2px 0 #fff, 1px -2px 0 #fff, 2px -2px 0 #000,
+    -3px -1px 0 #000, -2px -1px 0 #fff, -1px -1px 0 #fff, 0 -1px 0 #000, 1px -1px 0 #fff, 2px -1px 0 #fff, 3px -1px 0 #000,
+    -3px 0 0 #000, -2px 0 0 #fff, -1px 0 0 #000, 0 0 0 #000, 1px 0 0 #000, 2px 0 0 #fff, 3px 0 0 #000,
+    -3px 1px 0 #000, -2px 1px 0 #fff, -1px 1px 0 #fff, 0 1px 0 #000, 1px 1px 0 #fff, 2px 1px 0 #fff, 3px 1px 0 #000,
+    -2px 2px 0 #000, -1px 2px 0 #fff, 0 2px 0 #fff, 1px 2px 0 #fff, 2px 2px 0 #000,
+    -1px 3px 0 #000, 0 3px 0 #000, 1px 3px 0 #000;
+}
+
+.option-name {
+  font-size: 13px;
+  font-weight: bold;
+  color: #8b4513;
+  margin-bottom: 2px;
+}
+
+.option-desc {
+  font-size: 10px;
+  color: #a0522d;
+}
+
+.close-btn {
+  width: 100%;
+  padding: 8px;
+  background: #cd853f;
+  border: 3px solid #8b4513;
+  border-radius: 6px;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  cursor: pointer;
+  font-family: 'DotGothic16', sans-serif;
+}
+
+.close-btn:hover {
+  background: #d2691e;
+}
+
+.close-btn:active {
+  transform: scale(0.95);
+}
+</style>

src/components/StatsBar.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="stats-bar">
+    <div class="stats-content">
+      <div class="stat-rows">
         <div class="stat-row">
           <div class="stat-icon pixel-heart"></div>
           <div class="pixel-bar">
@@ -48,10 +50,17 @@
           <span class="stat-value" :class="{ 'warning': displayHealth < 30 }">{{ displayHealth }}</span>
         </div>
       </div>
+
+      <!-- Info Icon Button -->
+      <button class="info-icon-btn" @click="$emit('toggle-info')" title="寵物資訊">
+        <div class="pixel-i-icon"></div>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 
 const props = defineProps({
   hunger: {
@@ -65,9 +74,27 @@ const props = defineProps({
   health: {
     type: Number,
     default: 100
+  },
+  petName: {
+    type: String,
+    default: ''
+  },
+  stage: {
+    type: String,
+    default: 'adult'
+  },
+  poopCount: {
+    type: Number,
+    default: 0
+  },
+  baseStats: {
+    type: Object,
+    default: () => ({ hp: 0, attack: 0, defense: 0, speed: 0 })
   }
 });
 
+defineEmits(['toggle-info']);
+
 // 向上取整顯示，只有小數扣到0才會掉下一個整數
 const displayHunger = computed(() => Math.ceil(props.hunger));
 const displayHappiness = computed(() => Math.ceil(props.happiness));
@@ -78,10 +105,23 @@ const displayHealth = computed(() => Math.ceil(props.health));
 .stats-bar {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 4px 8px 3px 8px;
   background: rgba(155, 188, 15, 0.08);
   border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.stats-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px 3px 8px;
+}
+
+.stat-rows {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .stat-row {
@@ -242,4 +282,206 @@ const displayHealth = computed(() => Math.ceil(props.health));
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 }
+
+/* Info Icon Button - Game Boy Pixel Style */
+.info-icon-btn {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  background: #9bbc0f;
+  border: 2px solid #306230;
+  cursor: pointer;
+  transition: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  box-shadow: 
+    inset -2px -2px 0 #0f380f,
+    inset 2px 2px 0 #8bac0f;
+  image-rendering: pixelated;
+}
+
+/* Pixel Art "i" Icon */
+.pixel-i-icon {
+  width: 2px;
+  height: 2px;
+  background: #0f380f;
+  position: relative;
+  box-shadow:
+    /* Top dot */
+    0px -7px 0 #0f380f,
+    /* Vertical bar */
+    0px -3px 0 #0f380f, 0px -1px 0 #0f380f,
+    0px 0px 0 #0f380f, 0px 1px 0 #0f380f,
+    0px 3px 0 #0f380f, 0px 5px 0 #0f380f;
+}
+
+.info-icon-btn:hover {
+  background: #8bac0f;
+}
+
+.info-icon-btn:active {
+  box-shadow: 
+    inset 2px 2px 0 #0f380f;
+}
+
+/* Backdrop Overlay */
+.info-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(15, 56, 15, 0.7);
+  z-index: 999;
+  animation: fadeIn 0.2s steps(4);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Bottom Slide-out Info Panel - Game Boy Style */
+.info-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #9bbc0f;
+  border-top: 4px solid #0f380f;
+  z-index: 1000;
+  max-height: 50vh;
+  overflow-y: auto;
+  animation: slideUp 0.2s steps(5);
+  box-shadow: 
+    0 -2px 0 #306230,
+    0 -4px 8px rgba(0, 0, 0, 0.3);
+  image-rendering: pixelated;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.info-panel-header {
+  padding: 10px 16px;
+  background: #306230;
+  border-bottom: 2px solid #0f380f;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-title {
+  font-family: 'DotGothic16', monospace;
+  font-size: 13px;
+  font-weight: bold;
+  color: #9bbc0f;
+  text-shadow: 1px 1px 0 #0f380f;
+  letter-spacing: 1px;
+}
+
+.page-indicator {
+  font-family: 'DotGothic16', monospace;
+  font-size: 11px;
+  color: #8bac0f;
+  background: #0f380f;
+  padding: 2px 6px;
+  border: 1px solid #306230;
+}
+
+.info-panel-body {
+  padding: 12px 16px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 180px;
+}
+
+.stats-header {
+  text-align: center;
+  padding: 4px 0 8px;
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #306230;
+  letter-spacing: 1px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #8bac0f;
+  border: 2px solid #306230;
+  box-shadow: 
+    inset 1px 1px 0 #9bbc0f,
+    inset -1px -1px 0 #0f380f;
+}
+
+.info-label {
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #0f380f;
+}
+
+.info-value {
+  font-family: 'DotGothic16', monospace;
+  font-size: 12px;
+  color: #0f380f;
+  font-weight: 600;
+}
+
+.info-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  background: #306230;
+  border-top: 2px solid #0f380f;
+}
+
+.nav-btn {
+  width: 36px;
+  height: 28px;
+  background: #8bac0f;
+  border: 2px solid #0f380f;
+  color: #0f380f;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: none;
+  box-shadow: 
+    inset 1px 1px 0 #9bbc0f,
+    inset -1px -1px 0 #306230;
+}
+
+.nav-btn:hover {
+  background: #9bbc0f;
+}
+
+.nav-btn:active {
+  box-shadow: inset 2px 2px 0 #0f380f;
+}
+
+.nav-hint {
+  font-family: 'DotGothic16', monospace;
+  font-size: 9px;
+  color: #8bac0f;
+  letter-spacing: 0.5px;
+}
 </style>
+
+
+
+
+

src/components/TopMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="top-menu">
-    <button class="icon-btn icon-stats" @click="$emit('stats')" title="Stats"></button>
+    <button class="icon-btn icon-stats" @click="$emit('info')" title="Status"></button>
     <button class="icon-btn icon-feed" @click="$emit('feed')" :disabled="disabled" title="Feed"></button>
-    <button class="icon-btn icon-play" @click="$emit('play')" :disabled="disabled" title="Play"></button>
+    <button class="icon-btn icon-play" @click="$emit('playMenu')" :disabled="disabled" title="Play"></button>
-    <button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="Sleep"></button>
+    <button class="icon-btn icon-temple" @click="$emit('temple')" :disabled="disabled" title="Temple"></button>
   </div>
 </template>
 
@@ -15,7 +15,7 @@ const props = defineProps({
   }
 });
 
-defineEmits(['stats', 'feed', 'play', 'sleep']);
+defineEmits(['info', 'feed', 'playMenu', 'temple']);
 </script>
 
 <style scoped>
@@ -96,23 +96,26 @@ defineEmits(['stats', 'feed', 'play', 'sleep']);
     -2px 4px 0 #4444ff, 0px 4px 0 #4444ff, 2px 4px 0 #4444ff;
 }
 
-/* Sleep Icon (Moon) */
+/* Temple Icon (廟宇) */
-.icon-sleep::before {
+.icon-temple::before {
   content: '';
   position: absolute;
   width: 2px;
   height: 2px;
-  background: #ffcc00;
+  background: #D2691E;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   box-shadow:
-    0px -6px 0 #ffcc00, 2px -6px 0 #ffcc00,
+    /* 屋頂 */
-    -2px -4px 0 #ffcc00, 0px -4px 0 #ffcc00, 2px -4px 0 #ffcc00, 4px -4px 0 #ffcc00,
+    -4px -6px 0 #8B4513, -2px -6px 0 #8B4513, 0px -6px 0 #8B4513, 2px -6px 0 #8B4513, 4px -6px 0 #8B4513,
-    -2px -2px 0 #ffcc00, 0px -2px 0 #ffcc00, 4px -2px 0 #ffcc00,
+    /* 屋簷 */
-    -2px 0px 0 #ffcc00, 0px 0px 0 #ffcc00, 4px 0px 0 #ffcc00,
+    -6px -4px 0 #D2691E, -4px -4px 0 #D2691E, -2px -4px 0 #D2691E, 0px -4px 0 #D2691E, 2px -4px 0 #D2691E, 4px -4px 0 #D2691E, 6px -4px 0 #D2691E,
-    -2px 2px 0 #ffcc00, 0px 2px 0 #ffcc00, 4px 2px 0 #ffcc00,
+    /* 柱子與牆 */
-    -2px 4px 0 #ffcc00, 0px 4px 0 #ffcc00, 2px 4px 0 #ffcc00, 4px 4px 0 #ffcc00,
+    -4px -2px 0 #8B4513, 4px -2px 0 #8B4513,
-    0px 6px 0 #ffcc00, 2px 6px 0 #ffcc00;
+    -4px 0px 0 #8B4513, -2px 0px 0 #FFD700, 0px 0px 0 #FFD700, 2px 0px 0 #FFD700, 4px 0px 0 #8B4513,
+    -4px 2px 0 #8B4513, 4px 2px 0 #8B4513,
+    /* 底座 */
+    -4px 4px 0 #654321, -2px 4px 0 #654321, 0px 4px 0 #654321, 2px 4px 0 #654321, 4px 4px 0 #654321;
 }
 </style>

src/components/TrainingGame.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="training-layer" @click="handleTap">
+    <canvas ref="gameCanvas" class="game-canvas"></canvas>
+    
+    <!-- 移除所有 UI，變成純觀賞模式 -->
+    <div class="training-ui">
+      <!-- 隱藏 UI -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+
+const emit = defineEmits(['close', 'complete', 'attack']);
+
+const gameCanvas = ref(null);
+const gameStarted = ref(false);
+const gameOver = ref(false);
+const score = ref(0);
+const attackCount = ref(0);
+const totalAttacks = ref(3); // 改為 3 次
+
+// 遊戲數據
+let projectiles = [];
+// let targets = []; // 移除目標
+let explosions = [];
+let animationId = null;
+let ctx = null;
+let canvasWidth = 300;
+let canvasHeight = 150;
+
+// 寵物位置 (假設在右側)
+const PET_X = 260;
+const PET_Y = 100; // 嘴巴的高度
+
+function handleTap() {
+  // 自動模式，禁用點擊
+}
+
+function initGame() {
+  if (!gameCanvas.value) return;
+  const canvas = gameCanvas.value;
+  // 設置畫布大小為父容器大小
+  const rect = canvas.parentElement.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+  canvasWidth = rect.width;
+  canvasHeight = rect.height;
+  
+  ctx = canvas.getContext('2d');
+  loop(); // 開始渲染循環
+  startGame(); // 自動開始
+}
+
+function startGame() {
+  gameStarted.value = true;
+  gameOver.value = false;
+  score.value = 0;
+  attackCount.value = 0;
+  projectiles = [];
+  explosions = [];
+  
+  // 自動攻擊序列
+  scheduleAttack(1000);
+  scheduleAttack(2500);
+  scheduleAttack(4000);
+}
+
+function scheduleAttack(delay) {
+  setTimeout(() => {
+    if (!gameOver.value) {
+      attack();
+    }
+  }, delay);
+}
+
+// 移除 spawnTargetLoop 和 spawnTarget 函數
+
+function attack() {
+  emit('attack'); // 通知父組件播放寵物攻擊動畫
+  attackCount.value++;
+  
+  // 隨機決定攻擊模式：雙發 (填滿螢幕) 或 強力單發
+  const isDouble = Math.random() > 0.4; // 60% 機率雙發
+  
+  // 發射位置修正：寵物在右側 (約 X=240)，火球要從前方出現 (約 X=180)
+  const spawnX = 180;
+  const centerY = 80; // 畫面中心高度
+  
+  if (isDouble) {
+    // 雙發模式：上下兩顆，填滿垂直空間
+    // 上方火球
+    projectiles.push({
+      x: spawnX,
+      y: centerY - 50, 
+      speed: -4, // 速度減慢 (原本 -10)
+      width: 48,
+      height: 48,
+      color: '#000000'
+    });
+    // 下方火球
+    projectiles.push({
+      x: spawnX,
+      y: centerY + 10,
+      speed: -4, // 速度減慢
+      width: 48,
+      height: 48,
+      color: '#000000'
+    });
+  } else {
+    // 強力單發：一顆超大火球
+    projectiles.push({
+      x: spawnX,
+      y: centerY - 32, // 居中
+      speed: -5, // 速度減慢 (原本 -12)
+      width: 64,
+      height: 64,
+      color: '#000000'
+    });
+  }
+  
+  // 檢查是否完成訓練
+  if (attackCount.value >= totalAttacks.value) {
+    setTimeout(() => {
+      gameOver.value = true;
+      handleClose(); // 自動結束
+    }, 2000); // 等最後一發飛完
+  }
+}
+
+function loop() {
+  if (!ctx) return;
+  
+  // 清空畫布 (透明)
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  
+  if (gameStarted.value) {
+    update();
+    draw();
+  }
+  
+  animationId = requestAnimationFrame(loop);
+}
+
+function update() {
+  if (gameOver.value) return;
+
+  // 更新子彈
+  for (let i = projectiles.length - 1; i >= 0; i--) {
+    const p = projectiles[i];
+    p.x += p.speed;
+    
+    // 子彈飛出螢幕左側
+    if (p.x < -50) {
+      projectiles.splice(i, 1);
+      continue;
+    }
+    
+    // 移除碰撞檢測
+  }
+  
+  // 移除目標更新邏輯
+  
+  // 更新爆炸 (如果有保留的話)
+  updateExplosions();
+}
+
+function draw() {
+  // 移除繪製目標
+  
+  // 繪製火球
+  for (const p of projectiles) {
+    drawFireball(p);
+  }
+
+  // 繪製爆炸
+  ctx.fillStyle = '#ff0000';
+  for (const e of explosions) {
+    ctx.fillRect(e.x, e.y, 4, 4);
+  }
+}
+
+// 繪製像素塊 (模擬 V-Pet 的點陣)
+function drawPixelBlock(x, y, w, h, color) {
+  const pixelSize = 4;
+  ctx.fillStyle = color || '#000000';
+  ctx.fillRect(x, y, w, h);
+  // 簡單的邊框
+  ctx.strokeStyle = 'rgba(0,0,0,0.3)';
+  ctx.strokeRect(x, y, w, h);
+}
+
+// 繪製火球 (動態大小)
+function drawFireball(p) {
+  const { x, y, width, height } = p;
+  // 根據寬度計算像素大小，保持 4x4 的網格比例
+  const pixelSize = width / 4;
+  
+  // 經典 V-Pet 火球形狀 (4x4)
+  const pattern = [
+    [0,1,1,0],
+    [1,1,1,1],
+    [1,1,1,1],
+    [0,1,1,0]
+  ];
+  
+  ctx.fillStyle = p.color || '#000000';
+  pattern.forEach((row, r) => {
+    row.forEach((col, c) => {
+      if (col) {
+        ctx.fillRect(x + c*pixelSize, y + r*pixelSize, pixelSize, pixelSize);
+      }
+    });
+  });
+}
+
+function createExplosion(x, y) {
+  for(let i=0; i<8; i++) {
+    explosions.push({
+      x: x + 10,
+      y: y + 10,
+      vx: (Math.random() - 0.5) * 4,
+      vy: (Math.random() - 0.5) * 4,
+      life: 10
+    });
+  }
+}
+
+function updateExplosions() {
+  for(let i = explosions.length - 1; i >= 0; i--) {
+    const e = explosions[i];
+    e.x += e.vx;
+    e.y += e.vy;
+    e.life--;
+    if(e.life <= 0) explosions.splice(i, 1);
+  }
+}
+
+
+
+// drawPixelPet 移除，因為現在顯示真實寵物
+
+function handleClose() {
+  if (gameOver.value) {
+    emit('complete', true);
+  } else {
+    emit('complete', false);
+  }
+  emit('close');
+}
+
+onMounted(() => {
+  initGame();
+});
+
+onUnmounted(() => {
+  if (animationId) cancelAnimationFrame(animationId);
+});
+</script>
+
+<style scoped>
+.training-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50; /* 在寵物之上，但在 UI 之下 */
+  pointer-events: auto; /* 允許點擊 */
+}
+
+.game-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.training-ui {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  width: 100%;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.score {
+  font-family: 'DotGothic16', sans-serif;
+  font-size: 16px;
+  color: #8b4513;
+  background: rgba(255, 255, 255, 0.7);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.start-hint {
+  margin-top: 40px;
+  font-family: 'DotGothic16', sans-serif;
+  color: #8b4513;
+  animation: pulse 1s infinite;
+}
+
+.game-over-msg {
+  margin-top: 40px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 10px;
+  border: 2px solid #8b4513;
+  border-radius: 8px;
+  text-align: center;
+  pointer-events: auto;
+}
+
+.game-over-msg button {
+  margin-top: 5px;
+  padding: 4px 10px;
+  background: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+</style>

src/composables/useEventSystem.js

@@ -0,0 +1,144 @@
+import { ref } from 'vue';
+
+export function useEventSystem(petSystem) {
+    const { stats, state, triggerState } = petSystem;
+
+    const currentEvent = ref(null);
+    const eventHistory = ref([]);
+
+    // --- Event Database ---
+    // Categories: 'good', 'bad', 'weird'
+    const EVENT_DATABASE = [
+        // --- Good Events ---
+        {
+            id: 'found_charm',
+            type: 'good',
+            text: '撿到小符',
+            effect: (s) => { s.happiness = Math.min(100, s.happiness + 5); },
+            condition: () => true,
+            icon: 'pixel-charm'
+        },
+        {
+            id: 'self_clean',
+            type: 'good',
+            text: '自己掃地',
+            effect: (s) => { if (s.poopCount > 0) s.poopCount--; },
+            condition: (s) => s.poopCount > 0,
+            icon: 'pixel-broom'
+        },
+        {
+            id: 'dance',
+            type: 'good',
+            text: '開心地跳舞',
+            effect: (s) => { s.happiness = Math.min(100, s.happiness + 10); },
+            condition: (s) => s.happiness > 70,
+            icon: 'pixel-note'
+        },
+        {
+            id: 'gift_apple',
+            type: 'good',
+            text: '給你一顆果子',
+            effect: (s) => { /* Add to inventory logic later */ s.hunger = Math.min(100, s.hunger + 5); },
+            condition: () => Math.random() < 0.3,
+            icon: 'pixel-apple'
+        },
+
+        // --- Bad Events ---
+        {
+            id: 'night_noise',
+            type: 'bad',
+            text: '半夜亂叫',
+            effect: (s) => { s.happiness = Math.max(0, s.happiness - 5); },
+            condition: (s) => isNight(),
+            icon: 'pixel-angry'
+        },
+        {
+            id: 'overeat',
+            type: 'bad',
+            text: '偷吃太多',
+            effect: (s) => { s.hunger = Math.min(100, s.hunger + 20); s.health = Math.max(0, s.health - 5); },
+            condition: (s) => s.hunger > 80,
+            icon: 'pixel-meat'
+        },
+        {
+            id: 'stomach_ache',
+            type: 'bad',
+            text: '胃痛',
+            effect: (s) => { s.health = Math.max(0, s.health - 10); },
+            condition: (s) => s.health < 50,
+            icon: 'pixel-skull'
+        },
+
+        // --- Weird Events ---
+        {
+            id: 'stare',
+            type: 'weird',
+            text: '盯著螢幕外面看...',
+            effect: () => { },
+            condition: () => true,
+            icon: 'pixel-eye'
+        },
+        {
+            id: 'corner_squat',
+            type: 'weird',
+            text: '走到角落蹲著',
+            effect: (s) => { s.happiness = Math.max(0, s.happiness - 5); },
+            condition: () => true,
+            icon: 'pixel-cloud'
+        },
+        {
+            id: 'glitch',
+            type: 'weird',
+            text: '#@!$%^&*',
+            effect: (s) => { if (s.int > 5) s.int++; },
+            condition: () => Math.random() < 0.1,
+            icon: 'pixel-glitch'
+        }
+    ];
+
+    function isNight() {
+        const hour = new Date().getHours();
+        return hour >= 22 || hour < 6;
+    }
+
+    function checkEventTriggers() {
+        if (state.value === 'sleep' || state.value === 'dead') return;
+
+        // 10% chance to trigger an event per check
+        // Destiny Effect: Luck (福運) - Good events more likely?
+        // Destiny Effect: Spiritual (靈視) - Night events more likely
+
+        if (Math.random() < 0.1) {
+            triggerRandomEvent();
+        }
+    }
+
+    function triggerRandomEvent() {
+        // Filter valid events
+        const validEvents = EVENT_DATABASE.filter(e => e.condition(stats.value));
+        if (validEvents.length === 0) return;
+
+        const event = validEvents[Math.floor(Math.random() * validEvents.length)];
+
+        // Apply effect
+        event.effect(stats.value);
+
+        // Set current event for UI
+        currentEvent.value = event;
+        eventHistory.value.unshift({ ...event, time: new Date() });
+
+        // Auto-clear event after 3 seconds
+        setTimeout(() => {
+            currentEvent.value = null;
+        }, 4000);
+
+        console.log('Event Triggered:', event.text);
+    }
+
+    return {
+        currentEvent,
+        eventHistory,
+        checkEventTriggers,
+        triggerRandomEvent
+    };
+}

src/composables/usePetSystem.js

@@ -5,24 +5,79 @@ export function usePetSystem() {
     const stage = ref('egg'); // egg, baby, adult
     const state = ref('idle'); // idle, sleep, eating, sick, dead, refuse
 
+    // --- Destiny Data ---
+    const DESTINIES = [
+        { id: 'luck', name: '福運', description: '籤詩好籤率 +10%', rarity: 1 },
+        { id: 'diligence', name: '勤奮', description: '訓練遊戲獎勵 +20%', rarity: 1 },
+        { id: 'gluttony', name: '暴食', description: '飢餓下降速度 +30%', rarity: 1 },
+        { id: 'playful', name: '愛玩', description: 'Happiness 更快下降／更快上升', rarity: 1 },
+        { id: 'purification', name: '淨化', description: '生病機率 -20%', rarity: 1 },
+        { id: 'thirdeye', name: '天眼', description: '擲筊出聖筊機率微升', rarity: 2 },
+        { id: 'medium', name: '冥感', description: '死亡後招魂成功率提升', rarity: 2 }
+    ];
+
     // --- Stats ---
     const stats = ref({
         hunger: 100,    // 0-100 (0 = Starving)
         happiness: 100, // 0-100 (0 = Depressed)
         health: 100,    // 0-100 (0 = Sick risk)
         weight: 500,    // grams
-        age: 0,         // days
+        age: 1,         // days (start at day 1)
-        poopCount: 0    // Number of poops on screen
+        poopCount: 0,   // Number of poops on screen
+        // v2 Stats
+        str: 0,         // 力量 (Fireball Game)
+        int: 0,         // 智力 (Guessing Game)
+        dex: 0,         // 敏捷 (Catch Ball)
+        generation: 1,  // 輪迴世代
+        deityFavor: 0,  // 神明好感度
+        destiny: null,  // 天生命格 (Object)
+        // Deity System
+        currentDeity: 'mazu',
+        deityFavors: {
+            mazu: 0,
+            earthgod: 0,
+            matchmaker: 0,
+            wenchang: 0,
+            guanyin: 0
+        },
+        dailyPrayerCount: 0
     });
 
+    const achievements = ref([
+        { id: 'newbie', name: '新手飼主', desc: '養育超過 1 天', unlocked: false, icon: '🥚' },
+        { id: 'veteran', name: '資深飼主', desc: '養育超過 7 天', unlocked: false, icon: '🏆' },
+        { id: 'healthy', name: '健康寶寶', desc: '3歲且健康 > 90', unlocked: false, icon: '💪' },
+        { id: 'happy', name: '快樂天使', desc: '3歲且快樂 > 90', unlocked: false, icon: '💖' }
+    ]);
+
     // --- Internal Timers ---
     let gameLoopId = null;
+    let tickCount = 0;
     const TICK_RATE = 3000; // 3 seconds per tick
+    const TICKS_PER_DAY = 20; // For testing: 1 minute = 1 day (usually 28800 for 24h)
 
     const isCleaning = ref(false);
 
     // --- Actions ---
 
+    function assignDestiny() {
+        // Simple weighted random or just random for now
+        // Rarity 2 has lower chance
+        const roll = Math.random();
+        let pool = DESTINIES;
+
+        // 20% chance for rare destiny
+        if (roll < 0.2) {
+            pool = DESTINIES.filter(d => d.rarity === 2);
+        } else {
+            pool = DESTINIES.filter(d => d.rarity === 1);
+        }
+
+        const picked = pool[Math.floor(Math.random() * pool.length)];
+        stats.value.destiny = picked;
+        console.log('Assigned Destiny:', picked);
+    }
+
     function feed() {
         if (state.value === 'sleep' || state.value === 'dead' || stage.value === 'egg' || isCleaning.value) return false;
 
@@ -38,6 +93,7 @@ export function usePetSystem() {
         stats.value.weight += 50;
 
         // Chance to poop after eating (降低機率)
+        // Destiny Effect: Gluttony (暴食) might increase poop chance? Or just hunger decay.
         if (Math.random() < 0.15) { // 從 0.3 降到 0.15
             setTimeout(() => {
                 if (stats.value.poopCount < 4) {
@@ -89,18 +145,32 @@ export function usePetSystem() {
         if (state.value === 'dead' || stage.value === 'egg') return;
 
         // Decrease stats naturally
-        // 目標：飢餓值約 30-60 分鐘下降 10%，快樂值約 20-40 分鐘下降 10%
+        // Destiny Effect: Gluttony (暴食) - Hunger decreases faster (+30%)
-        // TICK_RATE = 3000ms (3秒), 600 ticks = 30分鐘
+        let hungerDecay = 0.05;
-        // 飢餓值每 tick -0.05 → 600 ticks = -30 (30分鐘下降30%)
+        if (stats.value.destiny?.id === 'gluttony') {
-        // 快樂值每 tick -0.08 → 600 ticks = -48 (30分鐘下降48%)
+            hungerDecay *= 1.3;
+        }
+
+        // Destiny Effect: Playful (愛玩) - Happiness decreases faster
+        let happinessDecay = 0.08;
+        if (stats.value.destiny?.id === 'playful') {
+            happinessDecay *= 1.2; // Faster decay
+        }
+
+        // Destiny Effect: DEX (敏捷) - Hunger decreases slower
+        // DEX 10 = -10% decay, DEX 50 = -50% decay
+        if (stats.value.dex > 0) {
+            const reduction = Math.min(0.5, stats.value.dex * 0.01); // Max 50% reduction
+            hungerDecay *= (1 - reduction);
+        }
 
         if (state.value !== 'sleep') {
-            stats.value.hunger = Math.max(0, stats.value.hunger - 0.05);
+            stats.value.hunger = Math.max(0, stats.value.hunger - hungerDecay);
-            stats.value.happiness = Math.max(0, stats.value.happiness - 0.08);
+            stats.value.happiness = Math.max(0, stats.value.happiness - happinessDecay);
         } else {
             // Slower decay when sleeping (約 1/3 速度)
-            stats.value.hunger = Math.max(0, stats.value.hunger - 0.015);
+            stats.value.hunger = Math.max(0, stats.value.hunger - (hungerDecay * 0.3));
-            stats.value.happiness = Math.max(0, stats.value.happiness - 0.025);
+            stats.value.happiness = Math.max(0, stats.value.happiness - (happinessDecay * 0.3));
         }
 
         // Random poop generation (更低的機率：約 0.5% per tick)
@@ -128,16 +198,39 @@ export function usePetSystem() {
         }
 
         // Sickness Check (更低的生病機率)
+        // Destiny Effect: Purification (淨化) - Sickness chance -20%
+        // Deity Buff: 媽祖 - Sickness chance -15%
+        let sickChance = 0.1;
+        if (stats.value.destiny?.id === 'purification') {
+            sickChance *= 0.8;
+        }
+        if (stats.value.currentDeity === 'mazu' && stats.value.deityFavors?.mazu > 0) {
+            sickChance *= 0.85;
+        }
+
         if (stats.value.health < 30 && state.value !== 'sick') {
-            if (Math.random() < 0.1) { // 從 0.3 降到 0.1
+            if (Math.random() < sickChance) {
                 state.value = 'sick';
             }
         }
 
         // Health Recovery (健康值可以緩慢恢復)
         // 如果沒有便便、飢餓值和快樂值都高，健康值會緩慢恢復
+        let healthRecovery = 0.05;
+
+        // Deity Buff: 觀音 - Health 回復 +20%
+        if (stats.value.currentDeity === 'guanyin' && stats.value.deityFavors?.guanyin > 0) {
+            healthRecovery *= 1.2;
+        }
+
+        // Deity Buff: 月老 - Happiness 回復 +25%
+        if (stats.value.currentDeity === 'matchmaker' && stats.value.deityFavors?.matchmaker > 0) {
+            // Apply to happiness decay reduction (slower decay = faster recovery)
+            happinessDecay *= 0.75;
+        }
+
         if (stats.value.poopCount === 0 && stats.value.hunger > 50 && stats.value.happiness > 50 && stats.value.health < 100 && state.value !== 'sick') {
-            stats.value.health = Math.min(100, stats.value.health + 0.05);
+            stats.value.health = Math.min(100, stats.value.health + healthRecovery);
         }
 
         // Death Check (移除死亡機制，依照之前的討論)
@@ -145,9 +238,53 @@ export function usePetSystem() {
         //     state.value = 'dead';
         // }
 
-        // Evolution / Growth (Simple Age increment)
+        // Evolution / Growth
-        // In a real game, 1 day might be 24h, here maybe every 100 ticks?
+        tickCount++;
-        // For now, let's just say age increases slowly.
+        if (tickCount >= TICKS_PER_DAY) {
+            stats.value.age++;
+            tickCount = 0;
+            checkEvolution();
+        }
+
+        checkAchievements();
+    }
+
+    function checkAchievements() {
+        if (!achievements.value[0].unlocked && stats.value.age >= 1) {
+            unlockAchievement(0);
+        }
+        if (!achievements.value[1].unlocked && stats.value.age >= 7) {
+            unlockAchievement(1);
+        }
+        if (!achievements.value[2].unlocked && stats.value.age >= 3 && stats.value.health >= 90) {
+            unlockAchievement(2);
+        }
+        if (!achievements.value[3].unlocked && stats.value.age >= 3 && stats.value.happiness >= 90) {
+            unlockAchievement(3);
+        }
+    }
+
+    function unlockAchievement(index) {
+        if (!achievements.value[index].unlocked) {
+            achievements.value[index].unlocked = true;
+            triggerState('happy', 2000); // Celebrate achievement
+        }
+    }
+
+    function unlockAllAchievements() {
+        achievements.value.forEach(a => a.unlocked = true);
+        triggerState('happy', 2000);
+    }
+
+    function checkEvolution() {
+        // Simple evolution logic
+        if (stage.value === 'baby' && stats.value.age >= 3) {
+            stage.value = 'child';
+            triggerState('happy', 2000); // Celebrate
+        } else if (stage.value === 'child' && stats.value.age >= 7) {
+            stage.value = 'adult';
+            triggerState('happy', 2000);
+        }
     }
 
     // --- Helpers ---
@@ -171,6 +308,10 @@ export function usePetSystem() {
             stats.value.happiness = 50;
             stats.value.health = 100;
             stats.value.poopCount = 0;
+
+            // v2: Assign Destiny
+            assignDestiny();
+
             isCleaning.value = false;
         }
     }
@@ -184,9 +325,55 @@ export function usePetSystem() {
             happiness: 100,
             health: 100,
             weight: 500,
-            age: 0,
+            age: 1,
-            poopCount: 0
+            poopCount: 0,
+            // v2 Reset
+            str: 0,
+            int: 0,
+            dex: 0,
+            generation: 1,
+            deityFavor: 0,
+            destiny: null
         };
+        tickCount = 0;
+    }
+
+    function resurrect() {
+        if (state.value !== 'dead') return;
+
+        state.value = 'idle';
+        stats.value.health = 50; // Revive with half health
+        stats.value.happiness = 50;
+        stats.value.hunger = 50;
+
+        // Penalty or Ghost Buff?
+        // For now just a console log, maybe visual effect later
+        console.log('Pet Resurrected!');
+    }
+
+    function reincarnate() {
+        // Inherit logic
+        const prevDestiny = stats.value.destiny;
+        const prevFavor = stats.value.deityFavor;
+        const nextGen = (stats.value.generation || 1) + 1;
+
+        // Reset everything
+        reset();
+
+        // Apply Inheritance
+        stats.value.generation = nextGen;
+
+        // 20% Favor inheritance
+        stats.value.deityFavor = Math.floor(prevFavor * 0.2);
+
+        // Destiny Inheritance (Optional: Maybe keep if it was a rare one?)
+        // For now, let's say if you had a Rare (2) destiny, you keep it.
+        // Otherwise, you get a new one on hatch.
+        if (prevDestiny && prevDestiny.rarity === 2) {
+            stats.value.destiny = prevDestiny;
+        }
+
+        console.log('Pet Reincarnated to Gen', nextGen);
     }
 
     // --- Lifecycle ---
@@ -208,6 +395,11 @@ export function usePetSystem() {
         clean,
         sleep,
         hatchEgg,
-        reset
+        reset,
+        achievements,
+        unlockAllAchievements,
+        assignDestiny, // Export for debug if needed
+        resurrect,
+        reincarnate
     };
 }

src/data/petPresets.js

@@ -74,93 +74,131 @@ export const SPRITE_PRESETS = {
         iconBackLeft: { x: 3, y: 2 },
         iconBackRight: { x: 12, y: 2 },
     },
-    tinyTigerCat: {
-        name: '小虎斑貓',
-        pixelSize: 3,
-        sprite: [
-            '0000000000000000',
-            '0011000000110000', // row 1 - Ears
-            '0122111111221000', // row 2
-            '0122222222221000', // row 3
-            '0122322223221000', // row 4 - Stripes
-            '0122222222221000', // row 5
-            '0120022220021000', // row 6 - Eyes
-            '0122223322221000', // row 7 - Nose/Mouth
-            '0122222222221000', // row 8
-            '0011222222110000', // row 9 - Body
-            '0001222222121000', // row 10 - Body + Tail
-            '0001222222121000', // row 11
-            '0001100110110000', // row 12 - Legs
-            '0000000000000000', // row 13
-            '0000000000000000', // row 14
-            '0000000000000000', // row 15
-        ],
-        spriteMouthOpen: [
-            '0000000000000000',
-            '0011000000110000',
-            '0122111111221000',
-            '0122222222221000',
-            '0122322223221000',
-            '0122222222221000',
-            '0120022220021000',
-            '0122223322221000',
-            '0122200002221000', // Mouth Open
-            '0011222222110000',
-            '0001222222121000',
-            '0001222222121000',
-            '0001100110110000',
-            '0000000000000000',
-            '0000000000000000',
-            '0000000000000000',
-        ],
-        palette: {
-            '0': '#000000', // Black eyes/outline
-            '1': '#2b1d12', // Dark brown outline
-            '2': '#ffb347', // Orange fur
-            '3': '#cd853f', // Darker stripes/nose
-        },
-        tailPixels: [
-            [11, 10], [12, 10],
-            [11, 11], [12, 11],
-        ],
-        earPixels: [
-            [2, 1], [3, 1],
-            [10, 1], [11, 1],
-        ],
-        legFrontPixels: [
-            [4, 12], [5, 12],
-        ],
-        legBackPixels: [
-            [8, 12], [9, 12],
-        ],
-        blushPixels: [
-            [3, 7], [10, 7]
-        ],
-        iconBackLeft: { x: 2, y: 2 },
-        iconBackRight: { x: 11, y: 2 }
-    },
     tinyTigerCatB: {
+        id: 'tinyTigerCatB',
+        meta: {
             name: '小虎斑貓',
-        pixelSize: 3,
+            displayNameEn: 'Tiny Tiger Cat',
-        sprite: [
+            species: 'cat',
-            '0000000000000000',
+            element: 'normal',
-            '0011000000110000', // row 1 - Ears
+            description: '一隻活潑、黏人的小虎斑貓，喜歡被餵食和玩耍。'
-            '0124444111442100', // row 2 粉紅耳朵內側
+        },
-            '0123222323221000', // row 3 三條虎紋
+
-            '0122322223221000', // row 4 - Stripes
+        // === 1. 生命週期設定 ===
-            '0122522222522100', // row 5 眼睛反光
+        lifecycle: {
-            '0125052225052100', // row 6 大圓眼＋黑瞳孔＋白反光
+            baseLifeMinutes: 7 * 24 * 60,
-            '0112223322221100', // row 7 鼻子＋左右鬍鬚
+            stages: [
-            '0122220222221000', // row 8 小微笑
+                {
-            '0011222222110000', // row 9 - Body
+                    id: 'egg',
-            '0001222222121000', // row 10 - Body + Tail
+                    name: '蛋',
-            '0001222222121000', // row 11
+                    minAgeMinutes: 0,
-            '0001100110110000', // row 12 - Legs
+                    maxAgeMinutes: 30,
-            '0000000000000000', // row 13
+                    spriteKey: 'egg',
-            '0000000000000000', // row 14
+                    canBattle: false,
-            '0000000000000000', // row 15
+                    canEquip: false
+                },
+                {
+                    id: 'baby',
+                    name: '幼年期',
+                    minAgeMinutes: 30,
+                    maxAgeMinutes: 6 * 60,
+                    spriteKey: 'child',
+                    canBattle: false,
+                    canEquip: false
+                },
+                {
+                    id: 'child',
+                    name: '成長期',
+                    minAgeMinutes: 6 * 60,
+                    maxAgeMinutes: 24 * 60,
+                    spriteKey: 'child',
+                    canBattle: true,
+                    canEquip: true
+                },
+                {
+                    id: 'adult',
+                    name: '成熟期',
+                    minAgeMinutes: 24 * 60,
+                    maxAgeMinutes: Infinity,
+                    spriteKey: 'adult',
+                    canBattle: true,
+                    canEquip: true
+                }
             ],
-        spriteMouthOpen: [
+            evolutionRules: [
+                {
+                    fromStage: 'baby',
+                    toStage: 'child',
+                    condition: {
+                        maxHungerEvents: 5,
+                        maxSicknessEvents: 2
+                    }
+                }
+            ]
+        },
+
+        // === 2. 需求衰減設定 ===
+        needs: {
+            hunger: {
+                max: 100,
+                startValue: 70,
+                decayPerMinute: 2,
+                warnThreshold: 40,
+                criticalThreshold: 10,
+                feedRecover: 40
+            },
+            happiness: {
+                max: 100,
+                startValue: 60,
+                decayPerMinute: 1,
+                playRecover: 25,
+                lowThreshold: 30
+            },
+            cleanliness: {
+                max: 100,
+                startValue: 80,
+                decayPerPoop: 30,
+                criticalThreshold: 30
+            },
+            energy: {
+                max: 100,
+                startValue: 80,
+                decayPerMinuteActive: 2,
+                recoverPerMinuteSleep: 5,
+                sleepSuggestThreshold: 30
+            },
+            poop: {
+                feedsPerPoop: 3,
+                maxPoopOnScreen: 3
+            },
+            sickness: {
+                baseChancePerMinute: 0.001,
+                extraChanceIfDirty: 0.01,
+                extraChanceIfStarving: 0.02
+            }
+        },
+
+        // === 3. 數值設定 ===
+        stats: {
+            base: {
+                hp: 30,
+                attack: 8,
+                defense: 5,
+                speed: 7
+            },
+            stageModifiers: {
+                baby: { hp: 0.6, attack: 0.5, defense: 0.5, speed: 0.8 },
+                child: { hp: 1.0, attack: 1.0, defense: 1.0, speed: 1.0 },
+                adult: { hp: 1.4, attack: 1.3, defense: 1.2, speed: 1.1 }
+            }
+        },
+
+        // === 4. 外觀 / Sprite 設定 ===
+        appearance: {
+            pixelSize: 3,
+            sprites: {
+                child: {
+                    idle: [
                         '0000000000000000',
                         '0011000000110000',
                         '0124444111442100',
@@ -169,7 +207,7 @@ export const SPRITE_PRESETS = {
                         '0122522222522100',
                         '0125052225052100',
                         '0112223322221100',
-            '0122204002221000', // Mouth Open 粉紅舌頭
+                        '0122220222221000',
                         '0011222222110000',
                         '0001222222121000',
                         '0001222222121000',
@@ -178,14 +216,80 @@ export const SPRITE_PRESETS = {
                         '0000000000000000',
                         '0000000000000000',
                     ],
-        palette: {
+                    mouthOpen: [
-            '0': '#000000', // Black eyes/outline
+                        '0000000000000000',
-            '1': '#2b1d12', // Dark brown outline
+                        '0011000000110000',
-            '2': '#ffb347', // Orange fur
+                        '0124444111442100',
-            '3': '#cd853f', // Darker stripes/nose
+                        '0123222323221000',
-            '4': '#ffb6c1', // Pink (ears, blush, tongue)
+                        '0122322223221000',
-            '5': '#ffffff' // White eye highlight
+                        '0122522222522100',
+                        '0125052225052100',
+                        '0112223322221100',
+                        '0122204002221000',
+                        '0011222222110000',
+                        '0001222222121000',
+                        '0001222222121000',
+                        '0001100110110000',
+                        '0000000000000000',
+                        '0000000000000000',
+                        '0000000000000000',
+                    ],
+                    eyesClosed: [
+                        '0000000000000000',
+                        '0011000000110000',
+                        '0124444111442100',
+                        '0123222323221000',
+                        '0122322223221000',
+                        '0122522222522100',
+                        '0122222222222100',
+                        '0112223322221100',
+                        '0122220222221000',
+                        '0011222222110000',
+                        '0001222222121000',
+                        '0001222222121000',
+                        '0001100110110000',
+                        '0000000000000000',
+                        '0000000000000000',
+                        '0000000000000000',
+                    ]
                 },
+                egg: {
+                    idle: [
+                        '0000000000000000',
+                        '0000000000000000',
+                        '0000000111000000',
+                        '0000001222100000',
+                        '0000012232210000',
+                        '0000122333221000',
+                        '0000122232221000',
+                        '0001222222222100',
+                        '0001233322332100',
+                        '0001223222232100',
+                        '0000122222221000',
+                        '0000122222221000',
+                        '0000011222110000',
+                        '0000000111000000',
+                        '0000000000000000',
+                        '0000000000000000',
+                    ]
+                }
+            },
+            palettes: {
+                default: {
+                    '0': '#000000',
+                    '1': '#2b1d12',
+                    '2': '#ffb347',
+                    '3': '#cd853f',
+                    '4': '#ffb6c1',
+                    '5': '#ffffff'
+                },
+                egg: {
+                    '1': '#5d4037',
+                    '2': '#fff8e1',
+                    '3': '#ffb74d',
+                }
+            },
+            bodyParts: {
                 tailPixels: [
                     [11, 10], [12, 10],
                     [11, 11], [12, 11],
@@ -204,53 +308,191 @@ export const SPRITE_PRESETS = {
                     [3, 7], [10, 7]
                 ],
                 eyePixels: [
-            [3, 6], [4, 6],  // Left eye
+                    [3, 6], [4, 6],
-            [8, 6], [9, 6]   // Right eye
+                    [8, 6], [9, 6]
-        ],
-        spriteEyesClosed: [
-            '0000000000000000',
-            '0011000000110000',
-            '0124444111442100',
-            '0123222323221000',
-            '0122322223221000',
-            '0122522222522100',
-            '0122222222222100', // row 6 - Eyes closed (all '2' = closed eyes)
-            '0112223322221100',
-            '0122220222221000',
-            '0011222222110000',
-            '0001222222121000',
-            '0001222222121000',
-            '0001100110110000',
-            '0000000000000000',
-            '0000000000000000',
-            '0000000000000000',
                 ],
                 iconBackLeft: { x: 2, y: 2 },
-        iconBackRight: { x: 13, y: 2 },
+                iconBackRight: { x: 13, y: 2 }
-
+            },
-        // Growth Stages
+            behaviorAnimation: {
-        eggSprite: [
+                blinkIntervalSec: 5,
-            '0000000000000000',
+                blinkDurationMs: 200,
-            '0000000000000000',
+                mouthOpenDurationMs: 300,
-            '0000000111000000', // Top (Narrow)
+                idleEmoteIntervalSec: 15
-            '0000001222100000',
-            '0000012232210000', // Small stripe
-            '0000122333221000',
-            '0000122232221000',
-            '0001222222222100', // Widest part
-            '0001233322332100', // Side stripes
-            '0001223222232100',
-            '0000122222221000',
-            '0000122222221000',
-            '0000011222110000', // Bottom
-            '0000000111000000',
-            '0000000000000000',
-            '0000000000000000',
-        ],
-        eggPalette: {
-            '1': '#5d4037', // Dark brown outline
-            '2': '#fff8e1', // Creamy white shell
-            '3': '#ffb74d', // Orange tiger stripes
             }
+        },
+
+        // === 5. 裝備設定 ===
+        equipment: {
+            slots: ['head', 'face', 'neck', 'back'],
+            items: [
+                {
+                    id: 'sunglasses_basic',
+                    name: '基本墨鏡',
+                    slot: 'face',
+                    overlays: {
+                        child: {
+                            pixels: [
+                                { x: 3, y: 6, color: '0' },
+                                { x: 4, y: 6, color: '0' },
+                                { x: 8, y: 6, color: '0' },
+                                { x: 9, y: 6, color: '0' },
+                            ]
+                        }
+                    },
+                    statModifiers: {
+                        coolness: +10
+                    }
+                }
+            ]
+        },
+
+        // === 6. 個性系統 ===
+        personality: {
+            traits: [
+                {
+                    id: 'clingy',
+                    name: '黏人',
+                    description: '喜歡被互動，不理牠會生氣',
+                    effects: {
+                        decayRateMultiplier: { happiness: 1.2 },
+                        idleActionChance: { 'seek_owner': 0.3 }
+                    }
+                },
+                {
+                    id: 'aggressive',
+                    name: '暴躁',
+                    description: '吃東西時容易咬碗',
+                    effects: {
+                        decayRateMultiplier: { hunger: 1.1 },
+                        interactionReaction: { 'poke': 'bite' }
+                    }
+                },
+                {
+                    id: 'lazy',
+                    name: '懶惰',
+                    description: '容易睡過頭',
+                    effects: {
+                        decayRateMultiplier: { energy: 0.8 },
+                        sleepDurationMultiplier: 1.2
+                    }
+                },
+                {
+                    id: 'curious',
+                    name: '好奇',
+                    description: 'Idle 時會到處張望',
+                    effects: {
+                        idleActionChance: { 'explore': 0.4 }
+                    }
+                },
+                {
+                    id: 'shy',
+                    name: '膽小',
+                    description: '怕生',
+                    effects: {
+                        stressThreshold: 0.8
+                    }
+                }
+            ],
+            defaultTrait: 'clingy'
+        },
+
+        // === 7. 情緒濾鏡（Mood System）===
+        mood: {
+            states: [
+                {
+                    id: 'happy',
+                    name: '開心',
+                    condition: 'needs.happiness > 80 && needs.hunger > 50',
+                    spriteModifier: 'bounce'
+                },
+                {
+                    id: 'sleepy',
+                    name: '愛睏',
+                    condition: 'needs.energy < 30',
+                    spriteModifier: 'yawn'
+                },
+                {
+                    id: 'naughty',
+                    name: '調皮',
+                    condition: 'needs.happiness > 90 && needs.energy > 90',
+                    spriteModifier: 'prank'
+                },
+                {
+                    id: 'angry',
+                    name: '生氣',
+                    condition: 'needs.happiness < 20',
+                    spriteModifier: 'turn_away'
+                },
+                {
+                    id: 'sad',
+                    name: '難過',
+                    condition: 'needs.happiness < 40 || needs.sickness > 0',
+                    spriteModifier: 'cry'
+                }
+            ],
+            updateIntervalMinutes: 60
+        },
+
+        // === 8. 隨機事件 ===
+        randomEvents: [
+            {
+                id: 'gift_flower',
+                name: '叼來一朵花',
+                chance: 0.05,
+                effects: { happiness: +20, message: '送你一朵花！' }
+            },
+            {
+                id: 'play_toy',
+                name: '自己找玩具玩',
+                chance: 0.1,
+                effects: { happiness: +10, animation: 'play' }
+            },
+            {
+                id: 'sneeze',
+                name: '打噴嚏',
+                chance: 0.05,
+                effects: { sickness: +10, animation: 'sneeze' }
+            },
+            {
+                id: 'find_treasure',
+                name: '挖到寶物',
+                chance: 0.01,
+                effects: { happiness: +50, message: '挖到金幣了！' }
+            },
+            {
+                id: 'nightmare',
+                name: '做惡夢',
+                chance: 0.05,
+                condition: { time: 'night' },
+                effects: { happiness: -20, energy: -10, message: '做惡夢了...' }
+            }
+        ]
+    }
+};
+
+// Backward Compatibility Layer
+// Create flat versions for components that expect the old structure
+export const SPRITE_PRESETS_FLAT = {
+    tigerChick: SPRITE_PRESETS.tigerChick,
+    tinyTigerCat: SPRITE_PRESETS.tinyTigerCat,
+    tinyTigerCatB: {
+        // Legacy flat structure for backward compatibility
+        name: SPRITE_PRESETS.tinyTigerCatB.meta.name,
+        pixelSize: SPRITE_PRESETS.tinyTigerCatB.appearance.pixelSize,
+        sprite: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.idle,
+        spriteMouthOpen: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.mouthOpen,
+        spriteEyesClosed: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.eyesClosed,
+        palette: SPRITE_PRESETS.tinyTigerCatB.appearance.palettes.default,
+        tailPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.tailPixels,
+        earPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.earPixels,
+        legFrontPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.legFrontPixels,
+        legBackPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.legBackPixels,
+        blushPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.blushPixels,
+        eyePixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.eyePixels,
+        iconBackLeft: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.iconBackLeft,
+        iconBackRight: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.iconBackRight,
+        eggSprite: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.egg.idle,
+        eggPalette: SPRITE_PRESETS.tinyTigerCatB.appearance.palettes.egg
     }
 };