Upload 102 files

.gitattributes

@@ -131,3 +131,10 @@ Assets/triangle/嫌疑犯/7候選人.png filter=lfs diff=lfs merge=lfs -text
 Assets/triangle/嫌疑犯/8列車長.png filter=lfs diff=lfs merge=lfs -text
 Assets/triangle/嫌疑犯/9_DJ.png filter=lfs diff=lfs merge=lfs -text
 Assets/triangle/嫌疑犯/嫌疑犯.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/16造型師特徵.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/Case/case1.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/Case/case2.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/Case/case3.png filter=lfs diff=lfs merge=lfs -text
+example/functionex1.png filter=lfs diff=lfs merge=lfs -text
+example/functionex2.png filter=lfs diff=lfs merge=lfs -text
+example/functionex3.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,141 +1,142 @@
----
-title: MathCity
-emoji: 🌖
-colorFrom: gray
-colorTo: pink
-sdk: static
-pinned: false
----
-
-# Math City: Cyber Chronicles (數學特區：未來都市)
-## ⚠️ AI 行為準則 (System Instructions)
-1. **語言要求：** 所有的對話、思考過程、Implementation Plan (實作計畫) 以及程式碼註解，請**嚴格使用「繁體中文 (Traditional Chinese)」，唯獨專有名詞可以用英文呈現**。
-2. **例外：** 只有程式碼本身的變數名稱、函數名稱保留英文。
-## 1. 專案願景 (Project Vision)
-本專案為八年級下學期數學課程的遊戲化教學平台。透過「未來都市」的沉浸式包裝，讓學生以「特務/維護者」的身分，在解決城市危機的過程中學習數學概念。
-
-**核心體驗**：
-*   **平台**：iPad 橫向全螢幕體驗 (Mobile Web App)。
-*   **風格**：Cyberpunk / Neon Noir (賽博龐克/霓虹暗黑)。
-*   **技術**：HTML5 Canvas + Tailwind CSS + Vanilla JS (無須建置工具)。
-
-## 2. 檔案結構 (File Structure)
-```
-/
-├── index.html          # [入口] 城市全息地圖 (Math City Map)
-├── sequence.html       # [數列] 數列峽谷 (The Glitch Canyon)
-├── function.html       # [函數] 能源核心 (The Energy Core)
-├── congruence.html     # [全等] 全等重案組 (Congruence District) - {待開發}
-├── parallel.html       # [平行] 平行建構區 (Parallel Skyline) - {待開發}
-└── assets/             # (建議) 存放圖片與音效資源
-```
-
-## 3. 視覺設計系統 (Design System)
-
-### 色彩計畫 (Neon Palette)
-這座城市由四個區域組成，每個區域有其代表的主色調：
-*   **🟦 能源核心 (Cyan)**: `#06b6d4` (Cyan-500) - 代表科技、冷靜、函數邏輯。
-*   **🟨 數列峽谷 (Amber)**: `#f59e0b` (Amber-500) - 代表古老遺跡、警示、規律。
-*   **🟪 全等重案組 (Magenta)**: `#d946ef` (Fuchsia-500) - 代表神秘、霓虹街頭、偵探氛圍。
-*   **🟩 平行建構區 (Green)**: `#22c55e` (Green-500) - 代表建設、雷射光束、結構。
-*   **🌑 背景基調**: `#050510` (Very Dark Blue) - 極致黑，襯托霓虹光。
-
-### UI 規範
-*   **字體**: 'Orbitron' (數字/英文標題), 'Noto Sans TC' (中文內文)。
-*   **介面**: 玻璃擬態 (Glassmorphism)，半透明深色背景 + 亮色邊框。
-*   **互動**: 針對觸控優化的大按鈕，避免依賴 Hover 效果。
-
-## 4. 遊戲模組詳解 (Game Modules)
-
-### A. 數列峽谷 (The Glitch Canyon) - `sequence.html` [已完成/需微調]
-*   **數學單元**：等差數列與級數。
-*   **劇情**：城市邊緣的古老程式碼層出現 Glitch，階梯消失。
-*   **玩法**：動作跳躍遊戲。
-    *   **Phase 1 (觀念檢測)**：進入關卡前，先通過數列填空測驗，確認對首項與公差的理解。
-    *   **Phase 2 (數列跑酷)**：動作遊戲階段。
-        *   **視覺風格**：全區統一碎石 (Gravel) 紋理，數位荒野主題。
-        *   **規則**：僅有數列的「前兩項」會有琥珀色外框提示，後續特定平台外觀一致，玩家需自行計算並跳上正確數字平台。
-        *   **裝飾**：仙人掌與骨骸等裝飾物僅生成於無數字的安全平台上，不干擾作答。
-    *   **Phase 3 (召喚儀式)**：終點的互動教學。利用「倒轉複製」概念，將階梯補成長方形，引導學生推導出等差級數求和公式 $S_n = \frac{(a_1+a_n) \times n}{2}$。
-    *   **Phase 4 (核心回顧)**：(Gold Standard) 遊戲結束後顯示重點摘要，包含「等差數列定義」、「公差公式」、「級數和公式」，對應學習單內容。
-
-### B. 能源核心 (The Energy Core) - `function.html` [已完成]
-*   **數學單元**：線型函數 ($y = ax + b$)。
-*   **劇情**：中央發電廠核心不穩，需要輸入正確的晶石量以維持能量平衡。
-*   **玩法**：數據分析與邏輯推導。
-    *   **Phase 1 (蒐集數據)**：輸入 $x$ (晶石)，觀察 $y$ (電力)，利用描點法找出函數關係。
-    *   **Phase 2 (規律分析)**：觀察圖表上的點，辨識出「直線」規律，並利用規律預測未來。
-    *   **Phase 3 (過載危機)**：系統給出目標電力 $y=203$，玩家需根據 $y=2x+3$ 反求投入量 $x$。
-    *   **Phase 4 (進階推導)**：(Advanced Deduction) 核心重置，公式改變 ($y=ax+b$)。
-        *   **Step 1 (找截距 b)**：投入 $x=0$，觀察 $y$ 值，解出 $b$。
-        *   **Step 2 (找斜率 a)**：投入 $x=1$，觀察變化量，解出 $a$。
-        *   **Step 3 (驗算)**：利用新公式 $y=3x+5$ 驗算 $x=10$ 的結果，並用圖表上的點 ($10,35$) 進行再確認。
-    *   **Phase 5 (核心解鎖)**：輸入正確的 $a$ 與 $b$ 值，完成任務。
-    *   **Phase 6 (脈衝同步)**：節奏遊戲，在音樂節拍下進行點擊，穩定核心能量，強化回饋感。
-
-### C. 全等重案組 (Congruence District) - `congruence.html` [規劃中]
-*   **數學單元**���全等三角形判別 (SAS, ASA, SSS, RHS)。
-*   **劇情**：追捕偽裝大師「三角魔人」。
-*   **玩法**：偵探解謎。
-    *   **Phase 1 (蒐證)**：在案發現場使用放大鏡蒐集「邊長」與「角度」線索。
-    *   **Phase 2 (指認)**：在警局指認牆上，利用蒐集的條件篩選嫌疑犯。
-    *   **Phase 3 (審判/回顧)**：整理案情，總結全等性質（SAS, ASA...），並解釋為何 SSA (搖擺分身) 無法全等。
-
-### D. 平行建構區 (Parallel Skyline) - `parallel.html` [規劃中]
-*   **數學單元**：平行線截角性質、特殊四邊形。
-*   **劇情**：建設通往雲端的摩天大樓。
-*   **玩法**：建築工程。
-    *   **平行光束**：調整雷射發射器角度，利用「內錯角相等」或「同側內角互補」原理接通橋樑。
-    *   **四邊形物流**：輸送帶上出現各種四邊形建材，需根據對角線性質 (是否等長/垂直/平分) 快速分類。
-    *   **Phase 3 (完工驗收)**：展示建築藍圖，總結平行線截角性質與特殊四邊形的判別家族樹。
-
-## 5. 開發路徑 (Roadmap)
-- [x] **Phase 1: 基礎建設**
-    - [x] 建立 `index.html` 城市地圖。
-    - [x] 生成 iPad 專用背景圖。
-    - [x] 統一導航系統 (Back to Map 按鈕)。
-- [x] **Phase 2: 現有程式優化**
-    - [x] `function.html`: 音量核心遊戲完整化、Phase 4 進階邏輯完備、節奏遊戲計分平衡。
-    - [x] `sequence.html`: 統一視覺風格，調整難度曲線。
-- [ ] **Phase 3: 新關卡開發**
-    - [ ] 開發 `congruence.html` (全等重案組) 原型。
-    - [ ] 開發 `parallel.html` (平行建構區) 原型。
-
----
-
-## 6. 修正經驗與開發筆記 (Dev Log)
-此區塊記錄開發過程中的重要迭代與修正經驗，供日後參考。
-
-### [Sequence Canyon] 視覺與機制修正 (Visual & Mechanics Polish)
-*   **視覺一致性的陷阱**: 修正了平台顏色提示過於明顯的問題，統一為碎石紋理，強制學生進行計算而非辨色。
-*   **提示機制**: 僅由數列前兩項提供視覺提示，後續完全依賴計算。
-*   **裝飾物配置**: 將裝飾物移至非遊戲路徑的安全平台，避免干擾判斷。
-
-### [Function Core] 進階教學設計 (Advanced Pedagogy Design)
-*   **鷹架理論 (Scaffolding) 的應用**:
-    *   **變數分離**: 在推導 $y=ax+b$ 時，不要同時讓學生解兩個未知數。我們設計為：
-        1.  先令 $x=0$，讓 $a$ 項消失，專注解 $b$ (截距)。
-        2.  知道 $b$ 後，再令 $x=1$，專注解 $a$ (斜率)。
-    *   這樣能讓學生理解每個係數的幾何意義，而非單純背誦解聯立方程式。
-*   **視覺與代數的連結 (Visual-Algebra Connection)**:
-    *   **圖表驗證**: 在 Phase 4 Step 3，驗算出 $y=35$ 後，不僅僅是數字正確，程式還引導視線看向圖表上的 $(10, 35)$ 點。這強化了「代數解」與「幾何圖形上的點」是同一回事的概念。
-*   **正向回饋系統 (Positive Feedback Loop)**:
-    *   **避免挫折感**: 將傳統的 `alert()` 錯誤彈窗，改為「介面上的脈衝紅框」與「引導式錯誤訊息」。
-    *   **具體化錯誤**: 錯誤訊息不是只說「錯」，而是說「如果 x=2, y=11, 因 11 = 2a+5, 所以 a=?」。這將**錯誤轉化為另一個數學題目**，而非單純的懲罰。
-    *   **節奏遊戲獎勵**: 在完成艱澀的運算後，Phase 6 的節奏遊戲提供純粹的感官刺激與高分回饋 (5000分)，平衡大腦疲勞。
-*   **情境化總結 (Contextual Summary)**:
-    *   任務完成頁面不僅列出分數，更點出核心數學素養：「預測」與「建模」。讓學生知道他們剛剛做的計算，本質上就是科學家預測未來的過程。
-
-### [Function Core] 介面優化與除錯經驗
-*   **按鈕鎖定邏輯**: 驗證成功後鎖定按鈕 (`disabled`) 非常重要，可防止重複觸發事件或重複計分。需確保 CSS Selector 選中正確的按鈕。
-*   **樣式與動畫**:
-    *   **跳動 vs 呼吸**: `animate-bounce` 用於錯誤訊息有時過於滑稽且難以閱讀，改為 `animate-pulse` (呼吸燈/閃耀) 配合紅色邊框，既有警示效果又保持質感。
-    *   **Canvas 文字清晰度**: 在 High-DPI 螢幕 (Retina) 上，Canvas 必須正確縮放 (Scale by DevicePixelRatio)，否則文字會模糊。
-
----
-
-## 7. 專案製作群 (Credits)
-*   **遊戲設計**: 新竹縣精華國中 藍星宇老師
-*   **社群**: [萬物皆數](https://www.facebook.com/groups/1554372228718393)
-
-*Created by Antigravity for 11402 Semester Project*
+# Math City: Cyber Chronicles (數學特區：未來都市)
+## ⚠️ AI 行為準則 (System Instructions)
+1. **語言要求：** 所有的對話、思考過程、Implementation Plan (實作計畫) 以及程式碼註解，請**嚴格使用「繁體中文 (Traditional Chinese)」**。
+2. **例外：** 只有程式碼本身的變數名稱、函數名稱、專有名詞保留英文。
+## 1. 專案願景 (Project Vision)
+本專案為八年級下學期數學課程的遊戲化教學平台。透過「未來都市」的沉浸式包裝，讓學生以「特務/維護者」的身分，在解決城市危機的過程中學習數學概念。
+
+**核心體驗**：
+*   **平台**：iPad 橫向全螢幕體驗 (Mobile Web App)。
+*   **風格**：Cyberpunk / Neon Noir (賽博龐克/霓虹暗黑)。
+*   **技術**：HTML5 Canvas + Tailwind CSS + Vanilla JS (無須建置工具)。
+
+## 2. 檔案結構 (File Structure)
+```
+/
+├── index.html          # [入口] 城市全息地圖 (Math City Map)
+├── sequence.html       # [數列] 數列峽谷 (The Glitch Canyon)
+├── function.html       # [函數] 能源核心 (The Energy Core)
+├── congruence.html     # [全等] 全等重案組 (Congruence District) - {待開發}
+├── parallel.html       # [平行] 平行建構區 (Parallel Skyline) - {待開發}
+└── assets/             # (建議) 存放圖片與音效資源
+```
+
+## 3. 視覺設計系統 (Design System)
+
+### 分區色彩計畫 (Zone Color Coding)
+為了區分不同的數學主題區域，每個子頁面都擁有**獨立的背景色調**與**霓虹主色**，強化玩家的空間感：
+| 區域 (Zone) | 數學主題 (Theme) | 霓虹主色 (Neon) | 背景基調 (Background) | 狀態 |
+| :--- | :--- | :--- | :--- | :--- |
+| **首頁 (Hub)** | 城市全息圖 | 🔵 `#06b6d4` (Cyan) | ⚫ `#050510` (Void) | `index.html` |
+| **摩天大樓** | 平行/幾何 | 🟢 `#22c55e` (Green) | 🌑 `#020804` (Deep Jungle) | `skyscraper.html` |
+| **數列峽谷** | 數列/規律 | 🟠 `#f59e0b` (Amber) | 🟤 `#1a1005` (Dark Amber) | `sequence.html` |
+| **能源核心** | 函數/邏輯 | 🔵 `#06b6d4` (Cyan) | 🔵 `#051015` (Deep Azure) | `function.html` |
+| **全等重案組** | 全等判別 | 🟣 `#d946ef` (Fuchsia) | 🟣 `#100515` (Dark Void) | `congruence.html` |
+
+### 色彩計畫 (Neon Palette)
+這座城市由四個區域組成，每個區域有其代表的主色調：
+*   **🟦 能源核心 (Cyan)**: `#06b6d4` (Cyan-500) - 代表科技、冷靜、函數邏輯。
+*   **🟨 數列峽谷 (Amber)**: `#f59e0b` (Amber-500) - 代表古老遺跡、警示、規律。
+*   **🟪 全等重案組 (Magenta)**: `#d946ef` (Fuchsia-500) - 代表神秘、霓虹街頭、偵探氛圍。
+*   **🟩 平行建構區 (Green)**: `#22c55e` (Green-500) - 代表建設、雷射光束、結構。
+*   **🌑 背景基調**: `#050510` (Very Dark Blue) - 極致黑，襯托霓虹光。
+
+### UI 規範
+*   **字體**: 'Orbitron' (數字/英文標題), 'Noto Sans TC' (中文內文)。
+*   **介面**: 玻璃擬態 (Glassmorphism)，半透明深色背景 + 亮色邊框。
+*   **互動**: 針對觸控優化的大按鈕，避免依賴 Hover 效果。
+
+## 4. 遊戲模組詳解 (Game Modules)
+
+### A. 數列峽谷 (The Glitch Canyon) - `sequence.html` [已完成/需微調]
+*   **數學單元**：等差數列與級數。
+*   **劇情**：城市邊緣的古老程式碼層出現 Glitch，階梯消失。
+*   **玩法**：動作跳躍遊戲。
+    *   **Phase 1 (觀念檢測)**：進入關卡前，先通過數列填空測驗，確認對首項與公差的理解。
+    *   **Phase 2 (數列跑酷)**：動作遊戲階段。
+        *   **視覺風格**：全區統一碎石 (Gravel) 紋理，數位荒野主題。
+        *   **規則**：僅有數列的「前兩項」會有琥珀色外框提示，後續特定平台外觀一致，玩家需自行計算並跳上正確數字平台。
+        *   **裝飾**：仙人掌與骨骸等裝飾物僅生成於無數字的安全平台上，不干擾作答。
+    *   **Phase 3 (召喚儀式)**：終點的互動教學。利用「倒轉複製」概念，將階梯補成長方形，引導學生推導出等差級數求和公式 $S_n = \frac{(a_1+a_n) \times n}{2}$。
+    *   **Phase 4 (核心回顧)**：(Gold Standard) 遊戲結束後顯示重點摘要，包含「等差數列定義」、「公差公式」、「級數和公式」，對應學習單內容。
+
+### B. 能源核心 (The Energy Core) - `function.html` [已完成]
+*   **數學單元**：線型函數 ($y = ax + b$)。
+*   **劇情**：中央發電廠核心不穩，需要輸入正確的晶石量以維持能量平衡。
+*   **玩法**：數據分析與邏輯推導。
+    *   **Phase 1 (蒐集數據)**：輸入 $x$ (晶石)，觀察 $y$ (電力)，利用描點法找出函數關係。
+    *   **Phase 2 (規律分析)**：觀察圖表上的點，辨識出「直線」規律，並利用規律預測未來。
+    *   **Phase 3 (過載危機)**：系統給出目標電力 $y=203$，玩家需根據 $y=2x+3$ 反求投入量 $x$。
+    *   **Phase 4 (進階推導)**：(Advanced Deduction) 核心重置，公式改變 ($y=ax+b$)。
+        *   **Step 1 (找截距 b)**：投入 $x=0$，觀察 $y$ 值，解出 $b$。
+        *   **Step 2 (找斜率 a)**：投入 $x=1$，觀察變化量，解出 $a$。
+        *   **Step 3 (驗算)**：利用新公式 $y=3x+5$ 驗算 $x=10$ 的結果，並用圖表上的點 ($10,35$) 進行再確認。
+    *   **Phase 5 (核心解鎖)**：輸入正確的 $a$ 與 $b$ 值，完成任務。
+    *   **Phase 6 (脈衝同步)**：節奏遊戲，在音樂節拍下進行點擊，穩定核心能量，強化回饋感。
+
+### C. 全等重案組 (Congruence District) - `congruence.html` [規劃中]
+*   **數學單元**：全等三角形判別 (SAS, ASA, SSS, RHS)。
+*   **劇情**：追捕偽裝大師「三角魔人」。
+*   **玩法**：偵探解謎。
+    *   **Phase 1 (蒐證)**：在案發現場使用放大鏡蒐集「邊長」與「角度」線索。
+    *   **Phase 2 (指認)**：在警局指認牆上，利用蒐集的條件篩選嫌疑犯。
+    *   **Phase 3 (審判/回顧)**：整理案情，總結全等性質（SAS, ASA...），並解釋為何 SSA (搖擺分身) 無法全等。
+
+### D. 平行建構區 (Parallel Skyline) - `parallel.html` [規劃中]
+*   **數學單元**：平行線截角性質、特殊四邊形。
+*   **劇情**：建設通往雲端的摩天大樓。
+*   **玩法**：建築工程。
+    *   **平行光束**：調整雷射發射器角度，利用「內錯角相等」或「同側內角互補」原理接通橋樑。
+    *   **四邊形物流**：輸送帶上出現各種四邊形建材，需根據對角線性質 (是否等長/垂直/平分) 快速分類。
+    *   **Phase 3 (完工驗收)**：展示建築藍圖，總結平行線截角性質與特殊四邊形的判別家族樹。
+
+## 5. 開發路徑 (Roadmap)
+- [x] **Phase 1: 基礎建設**
+    - [x] 建立 `index.html` 城市地圖。
+    - [x] 生成 iPad 專用背景圖。
+    - [x] 統一導航系統 (Back to Map 按鈕)。
+- [x] **Phase 2: 現有程式優化**
+    - [x] `function.html`: 音量核心遊戲完整化、Phase 4 進階邏輯完備、節奏遊戲計分平衡。
+    - [x] `sequence.html`: 統一視覺風格，調整難度曲線。
+- [ ] **Phase 3: 新關卡開發**
+    - [ ] 開發 `congruence.html` (全等重案組) 原型。
+    - [ ] 開發 `parallel.html` (平行建構區) 原型。
+
+---
+
+## 6. 修正經驗與開發筆記 (Dev Log)
+此區塊記錄開發過程中的重要迭代與修正經驗，供日後參考。
+
+### [Sequence Canyon] 視覺與機制修正 (Visual & Mechanics Polish)
+*   **視覺一致性的陷阱**: 修正了平台顏色提示過於明顯的問題，統一為碎石紋理，強制學生進行計算而非辨色。
+*   **提示機制**: 僅由數列前兩項提供視覺提示，後續完全依賴計算。
+*   **裝飾物配置**: 將裝飾物移至非遊戲路徑的安全平台，避免干擾判斷。
+
+### [Function Core] 進階教學設計 (Advanced Pedagogy Design)
+*   **鷹架理論 (Scaffolding) 的應用**:
+    *   **變數分離**: 在推導 $y=ax+b$ 時，不要同時讓學生解兩個未知數。我們設計為：
+        1.  先令 $x=0$，讓 $a$ 項消失，專注解 $b$ (截距)。
+        2.  知道 $b$ 後，再令 $x=1$，專注解 $a$ (斜率)。
+    *   這樣能讓學生理解每個係數的幾何意義，而非單純背誦解聯立方程式。
+*   **視覺與代數的連結 (Visual-Algebra Connection)**:
+    *   **圖表驗證**: 在 Phase 4 Step 3，驗算出 $y=35$ 後，不僅僅是數字正確，程式還引導視線看向圖表上的 $(10, 35)$ 點。這強化了「代數解」與「幾何圖形上的點」是同一回事的概念。
+*   **正向回饋系統 (Positive Feedback Loop)**:
+    *   **避免挫折感**: 將傳統的 `alert()` 錯誤彈窗，改為「介面上的脈衝紅框」與「引導式錯誤訊息」。
+    *   **具體化錯誤**: 錯誤訊息不是只說「錯」，而是說「如果 x=2, y=11, 因 11 = 2a+5, 所以 a=?」。這將**錯誤轉化為另一個數學題目**，而非單純的懲罰。
+    *   **節奏遊戲獎勵**: 在完成艱澀的運算後，Phase 6 的節奏遊戲提供純粹的感官刺激與高分回饋 (5000分)，平衡大腦疲勞。
+*   **情境化總結 (Contextual Summary)**:
+    *   任務完成頁面不僅列出分數，更點出核心數學素養：「預測」與「建模」。讓學生知道他們剛剛做的計算，本質上就是科學家預測未來的過程。
+
+### [Function Core] 介面優化與除錯經驗
+*   **按鈕鎖定邏輯**: 驗證成功後鎖定按鈕 (`disabled`) 非常重要，可防止重複觸發事件或重複計分。需確保 CSS Selector 選中正確的按鈕。
+*   **樣式與動畫**:
+    *   **跳動 vs 呼吸**: `animate-bounce` 用於錯誤訊息有時過於滑稽且難以閱讀，改為 `animate-pulse` (呼吸燈/閃耀) 配合紅色邊框，既有警示效果又保持質感。
+    *   **Canvas 文字清晰度**: 在 High-DPI 螢幕 (Retina) 上，Canvas 必須正確縮放 (Scale by DevicePixelRatio)，否則文字會模糊。
+
+---
+
+## 7. 專案製作群 (Credits)
+*   **遊戲設計**: 新竹縣精華國中 藍星宇老師
+*   **社群**: [萬物皆數](https://www.facebook.com/groups/1554372228718393)
+
+*Created by Antigravity for 11402 Semester Project*

congruence_detective.html

@@ -0,0 +1,1413 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title>全等重案組 - Congruence Unit</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&family=Orbitron:wght@400;700&display=swap"
+        rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-color: #050510;
+            overflow: hidden;
+            color: white;
+            touch-action: none;
+            user-select: none;
+        }
+
+        .font-tech {
+            font-family: 'Orbitron', sans-serif;
+        }
+
+        /* Glassmorphism Panel */
+        .glass-panel {
+            background: rgba(15, 23, 42, 0.85);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(147, 51, 234, 0.3);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+        }
+
+        /* Cyberpunk Dialogue Box */
+        .dialogue-box {
+            position: absolute;
+            bottom: 20px;
+            left: 5%;
+            width: 90%;
+            height: 220px;
+            /* Increased height */
+            background: rgba(0, 0, 0, 0.9);
+            border: 2px solid #d946ef;
+            /* Magenta */
+            border-left-width: 8px;
+            box-shadow: 0 0 20px rgba(217, 70, 239, 0.3);
+            padding: 24px;
+            /* Increased padding */
+            z-index: 50;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            pointer-events: auto;
+            clip-path: polygon(0 0,
+                    100% 0,
+                    100% 85%,
+                    95% 100%,
+                    0% 100%);
+        }
+
+        .dialogue-name {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.5rem;
+            /* Increased size */
+            color: #d946ef;
+            font-weight: bold;
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            text-shadow: 0 0 10px rgba(217, 70, 239, 0.5);
+        }
+
+        .dialogue-text {
+            font-size: 1.3rem;
+            /* Increased size */
+            line-height: 1.6;
+            color: #e2e8f0;
+            font-weight: 500;
+        }
+
+        /* ... cursor blink styles ... */
+        .cursor-blink::after {
+            content: '▋';
+            display: inline-block;
+            animation: blink 1s infinite;
+            color: #d946ef;
+            margin-left: 5px;
+        }
+
+        @keyframes blink {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0;
+            }
+        }
+
+        /* Hitbox Styles */
+        .hitbox {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px dashed rgba(255, 255, 255, 0.5);
+            cursor: pointer;
+            z-index: 100;
+            transition: all 0.2s;
+            animation: pulse-ring 2s infinite;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-weight: 900;
+            font-size: 1.8rem;
+            text-shadow: 0 0 5px black;
+        }
+
+        .hitbox.found-angle {
+            background: rgba(239, 68, 68, 0.4);
+            /* Red */
+            border: 2px solid #ef4444;
+            animation: none;
+            pointer-events: none;
+        }
+
+        .hitbox.found-side {
+            background: rgba(59, 130, 246, 0.4);
+            /* Blue */
+            border: 2px solid #3b82f6;
+            animation: none;
+            pointer-events: none;
+        }
+
+        .hitbox:hover {
+            transform: scale(1.1);
+            border-color: #fff;
+        }
+
+        @keyframes pulse-ring {
+            0% {
+                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
+            }
+
+            70% {
+                box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
+            }
+
+            100% {
+                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+            }
+        }
+
+        .evidence-counter {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            border: 1px solid #d946ef;
+            padding: 10px 20px;
+            border-radius: 8px;
+            z-index: 100;
+            font-family: 'Orbitron';
+            color: #d946ef;
+        }
+
+
+
+        .character-sprite {
+            position: absolute;
+            bottom: 80px;
+            /* Moved up significantly - hidden behind dialogue box */
+            left: -20px;
+            /* Adjusted position */
+            height: clamp(600px, 100vh, 1200px);
+            /* Even larger and higher */
+            z-index: 40;
+            /* Behind dialogue box */
+            filter: drop-shadow(0 0 20px rgba(217, 70, 239, 0.4));
+            transition: all 0.3s ease-out;
+            pointer-events: none;
+        }
+
+        .character-sprite.hidden {
+            opacity: 0;
+            transform: translateX(-50px);
+            pointer-events: none;
+        }
+
+        /* Scanlines */
+        .scanlines {
+            background: linear-gradient(to bottom,
+                    rgba(255, 255, 255, 0),
+                    rgba(255, 255, 255, 0) 50%,
+                    rgba(0, 0, 0, 0.1) 50%,
+                    rgba(0, 0, 0, 0.1));
+            background-size: 100% 4px;
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 200;
+            mix-blend-mode: overlay;
+        }
+
+        /* Quiz Layer - Fixed Fullscreen Overlay */
+        #quiz-layer {
+            position: fixed;
+            inset: 0;
+            z-index: 150;
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
+            /* Gradient mask to keep top clear */
+            backdrop-filter: blur(1px);
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            padding-bottom: 40px;
+            /* Lift slightly higher than dialogue */
+            pointer-events: auto;
+        }
+
+        #quiz-layer.hidden {
+            display: none !important;
+            pointer-events: none;
+        }
+
+        #quiz-layer .quiz-box {
+            position: relative;
+            width: 90%;
+            max-width: 1200px;
+            height: 250px;
+            background: rgba(5, 5, 10, 0.95);
+            border: 2px solid #d946ef;
+            border-left-width: 8px;
+            box-shadow: 0 0 30px rgba(217, 70, 239, 0.4);
+            pointer-events: auto;
+            clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0% 100%);
+            padding: 30px;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-900 text-white selection:bg-fuchsia-500 selection:text-white">
+
+    <div class="scanlines"></div>
+
+    <!-- Background - Static for now, can be dynamic -->
+    <div class="fixed inset-0 z-0 bg-cover bg-center opacity-40"
+        style="background-image: url('Assets/index/indexbg.png'); filter: blur(4px) hue-rotate(45deg);"></div>
+
+    <!-- Game Container -->
+    <div id="game-stage" class="relative w-full h-full min-h-screen overflow-hidden flex flex-col">
+
+        <!-- Header -->
+        <div class="absolute top-0 left-0 w-full p-4 z-50 flex justify-between items-start pointer-events-none">
+            <div class="glass-panel px-6 py-2 rounded-br-2xl border-l-4 border-l-fuchsia-500 pointer-events-auto">
+                <h1 class="text-xl font-bold text-fuchsia-400 tracking-wider">全等重案組<br><span
+                        class="font-tech text-sm">CONGRUENCE UNIT</span></h1>
+                <div class="text-xs text-slate-400 font-mono mt-1">CASE FILE #001: THE STYLIST</div>
+            </div>
+
+            <button onclick="window.history.back()"
+                class="glass-panel px-4 py-2 rounded-lg hover:bg-white/10 transition-colors pointer-events-auto text-sm text-slate-300">
+                EXIT UNIT
+            </button>
+        </div>
+
+        <!-- Evidence/Status Display (Hidden by default) -->
+        <div id="evidence-panel" class="hidden">
+            <div class="evidence-counter">
+                <div class="text-xs text-secondary mb-1">EVIDENCE COLLECTED</div>
+                <div class="text-2xl font-bold" id="evidence-count">0 / 6</div>
+            </div>
+        </div>
+
+        <!-- Main Interaction Area -->
+        <div id="scene-layer" class="relative flex-1 z-10 flex items-center justify-center">
+            <!-- Target Container for Investigation -->
+            <div id="target-container" class="flex-1 flex justify-center items-center relative p-4 hidden">
+                <div id="suspect-wrapper" class="relative inline-block">
+                    <img id="suspect-image" src="Assets/triangle/嫌疑犯/16造型師.png" alt="Suspect"
+                        class="max-h-[60vh] object-contain shadow-lg shadow-fuchsia-500/20 rounded-xl border border-slate-700">
+                </div>
+            </div> <!-- Hitboxes will be appended here -->
+        </div>
+
+        <!-- Dialogue Layer -->
+        <div id="dialogue-layer" class="hidden" onclick="window.game.next()">
+            <img id="speaker-sprite" src="" class="character-sprite hidden" alt="Character">
+            <div class="dialogue-box cursor-pointer hover:bg-black/95 transition-colors">
+                <div id="speaker-name" class="dialogue-name">SENIOR DETECTIVE</div>
+                <div id="dialogue-text" class="dialogue-text cursor-blink"></div>
+                <div class="absolute bottom-4 right-4 text-xs text-fuchsia-500 animate-bounce">▼ CLICK TO CONTINUE
+                </div>
+            </div>
+        </div>
+
+        <!-- Quiz Layer (Modified) -->
+        <div id="quiz-layer" class="hidden">
+            <div class="quiz-box">
+                <h2 class="text-lg font-bold text-fuchsia-400 font-tech mb-1">SYSTEM AUTHENTICATION</h2>
+                <div id="quiz-content" class="w-full"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Game Script
+        let playerName = localStorage.getItem('player_nickname') || '菜鳥探員';
+
+        // Initial Script Placeholder - populated dynamically
+        let SCRIPT = [];
+
+        class GameEngine {
+            constructor() {
+                this.step = 0;
+                this.isTyping = false;
+                this.elDialogue = document.getElementById('dialogue-layer');
+                this.elText = document.getElementById('dialogue-text');
+                this.elName = document.getElementById('speaker-name');
+                this.elScene = document.getElementById('scene-layer');
+                this.elTarget = document.getElementById('target-container');
+
+                this.foundFeatures = new Set();
+                this.angleCount = 0;
+                this.sideCount = 0;
+                this.requiredFeatures = 6;
+
+                this.init();
+            }
+
+            init() {
+                this.addStyles();
+                this.setupInitialScript();
+                this.showDialogue(true);
+                this.processStep();
+            }
+
+            setupInitialScript() {
+                // Formatting helper
+                const fmtName = (n) => `<span class="text-amber-400 font-bold mx-1 text-xl">${n}</span>`;
+
+                SCRIPT = [
+                    {
+                        type: 'dialogue',
+                        speaker: '資深警探',
+                        text: '歡迎來到 Math City 的重案組，我是負責帶領你的前輩，請問你怎麼稱呼？',
+                    },
+                    {
+                        type: 'input_name',
+                        speaker: 'SYSTEM',
+                        text: '請輸入你的暱稱...'
+                    },
+                    {
+                        type: 'dialogue',
+                        speaker: '資深警探',
+                        text: (name) => `${fmtName(name)}！真是個不錯的名字呢，時間緊迫，我就有話直說了。`
+                    },
+                    {
+                        type: 'dialogue',
+                        speaker: '資深警探',
+                        text: '雖然城裡看似和平，但最近發生了一連串的案件，我們需要你的協助！'
+                    },
+                    {
+                        type: 'dialogue',
+                        speaker: '資深警探',
+                        text: (name) => `對於這些犯罪，我們已經掌握了一部分的證據，但是緝凶人手不足，${fmtName(name)}看起來很聰明，我們需要你的幫忙。`
+                    },
+                    {
+                        type: 'dialogue',
+                        speaker: '資深警探',
+                        text: '在三角形中，就像你臉上的<span class="text-yellow-400 font-bold">鼻子</span>、<span class="text-yellow-400 font-bold">嘴巴</span>、<span class="text-yellow-400 font-bold">眼睛</span>一樣，也有獨特的<span class="text-yellow-400 font-bold">特徵</span>，你知道是哪些嗎？'
+                    },
+                    {
+                        type: 'choice',
+                        question: '你知道三角形的特徵嗎？',
+                        options: [
+                            { text: '我知道！', next: 'next_step' },
+                            { text: '不知道...', next: 'next_step' }
+                        ]
+                    },
+                    {
+                        type: 'action',
+                        action: 'show_suspect_investigation',
+                        speaker: '資深警探',
+                        text: '現在我們來練習一下。看看這張照片，這是一位嫌疑犯，請你找出他的<span class="text-yellow-400 font-bold">特徵點</span>。<br>三角形的<span class="text-yellow-400 font-bold">特徵���</span>就是他所有的<span class="text-yellow-400 font-bold">邊</span>和<span class="text-yellow-400 font-bold">角</span>。<br><span id="stats-display" class="text-yellow-400 font-mono mt-2 block text-lg"></span>'
+                    }
+                ];
+            }
+
+            next() {
+                if (this.isTyping) {
+                    this.finishTyping();
+                    return;
+                }
+
+                if (SCRIPT[this.step] && (SCRIPT[this.step].type === 'action' || SCRIPT[this.step].type === 'input_name' || SCRIPT[this.step].type === 'choice') && !this.actionCompleted) {
+                    return;
+                }
+
+                this.step++;
+                if (this.step < SCRIPT.length) {
+                    this.processStep();
+                } else {
+                    console.log('Script Finished');
+                }
+            }
+
+            processStep() {
+                const data = SCRIPT[this.step];
+                let text = typeof data.text === 'function' ? data.text(playerName) : data.text;
+
+                if (data.type === 'dialogue') {
+                    this.showDialogue(true);
+                    this.setSpeaker(data.speaker);
+                    this.typeText(text);
+                    this.actionCompleted = true; // Auto-complete purely dialogue steps? No, wait for click. 
+                    this.actionCompleted = true; // Actually previous logic relied on next() call, which checks actionCompleted only for actions. 
+                    // My logic in next() was: if type is action/input/choice and !actionCompleted, return.
+                    // For dialogue, we don't block.
+                } else if (data.type === 'action') {
+                    this.showDialogue(true);
+                    this.setSpeaker(data.speaker);
+                    this.typeText(text);
+                    this.handleAction(data.action);
+                } else if (data.type === 'input_name') {
+                    this.showDialogue(true);
+                    this.setSpeaker(data.speaker);
+                    this.typeText(text);
+                    this.showNameInput();
+                } else if (data.type === 'choice') {
+                    this.showDialogue(true); // Keep dialogue visible asking question? Or hide?
+                    // Usually hide for choice or overlay. Let's overlay.
+                    this.showChoices(data.options);
+                } else if (data.type === 'quiz') {
+                    this.showDialogue(false);
+                    this.showQuiz(data);
+                }
+            }
+
+            setSpeaker(name) {
+                this.elName.innerText = name;
+
+                const sprite = document.getElementById('speaker-sprite');
+                if (name === '資深警探') {
+                    sprite.src = 'Assets/triangle/detective.svg'; // Use our new SVG
+                    sprite.classList.remove('hidden');
+                    // Add some animation or style if needed
+                    sprite.style.filter = "drop-shadow(0 0 10px #d946ef)";
+                } else if (name === 'SYSTEM') {
+                    sprite.classList.add('hidden');
+                } else {
+                    // Default behavior for other speakers
+                    sprite.classList.add('hidden');
+                }
+            }
+
+            typeText(text) {
+                this.isTyping = true;
+                this.elText.innerHTML = '';
+                this.fullText = text;
+                let i = 0;
+
+                clearInterval(this.typeInterval);
+                this.typeInterval = setInterval(() => {
+                    this.elText.innerHTML = this.fullText.substring(0, i + 1);
+                    i++;
+                    if (i === this.fullText.length) {
+                        this.finishTyping();
+                    }
+                }, 30);
+            }
+
+            finishTyping() {
+                clearInterval(this.typeInterval);
+                this.elText.innerHTML = this.fullText;
+                this.isTyping = false;
+
+                // If it's the investigation step, ensure stats are updated
+                if (SCRIPT[this.step] && SCRIPT[this.step].action === 'show_suspect_investigation') {
+                    this.updateStatsDisplay();
+                }
+            }
+
+            showDialogue(show) {
+                if (show) this.elDialogue.classList.remove('hidden');
+                else this.elDialogue.classList.add('hidden');
+            }
+
+            // Input Name Logic
+            showNameInput() {
+                this.actionCompleted = false;
+                const inputHtml = `
+                    <div id="name-input-overlay" class="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm">
+                        <div class="glass-panel p-8 rounded-xl flex flex-col gap-4 w-full max-w-md">
+                            <h2 class="text-xl font-bold text-fuchsia-400 text-center">輸入代號 INPUT ID</h2>
+                            <input type="text" id="player-name-input" class="bg-slate-900 border border-fuchsia-500 rounded p-3 text-white text-center text-xl focus:outline-none" placeholder="你的暱稱" maxlength="10">
+                            <button id="name-submit-btn" class="bg-fuchsia-600 hover:bg-fuchsia-500 text-white font-bold py-3 rounded transition-colors">確認 CONFIRM</button>
+                        </div>
+                    </div>
+                `;
+                document.body.insertAdjacentHTML('beforeend', inputHtml);
+
+                const btn = document.getElementById('name-submit-btn');
+                const input = document.getElementById('player-name-input');
+                input.focus();
+
+                const submit = () => {
+                    const val = input.value.trim();
+                    if (val) {
+                        playerName = val;
+                        localStorage.setItem('player_nickname', playerName);
+                        document.getElementById('name-input-overlay').remove();
+                        this.actionCompleted = true;
+                        this.next();
+                    }
+                };
+
+                btn.onclick = submit;
+                input.onkeypress = (e) => { if (e.key === 'Enter') submit(); };
+            }
+
+            // Choice Logic
+            showChoices(options) {
+                this.actionCompleted = false;
+                const choiceContainer = document.createElement('div');
+                choiceContainer.id = 'choice-overlay';
+                choiceContainer.className = 'fixed inset-0 z-[200] flex items-center justify-center bg-black/60 backdrop-blur-sm';
+
+                let html = '<div class="flex flex-col gap-4 min-w-[300px]">';
+                options.forEach((opt, idx) => {
+                    html += `<button class="choice-btn glass-panel px-6 py-4 rounded-lg text-xl font-bold text-white hover:bg-fuchsia-600 transition-colors border-l-4 border-fuchsia-400 hover:scale-105 transform duration-200" data-idx="${idx}">${opt.text}</button>`;
+                });
+                html += '</div>';
+
+                choiceContainer.innerHTML = html;
+                document.body.appendChild(choiceContainer);
+
+                const btns = choiceContainer.querySelectorAll('.choice-btn');
+                btns.forEach(btn => {
+                    btn.onclick = () => {
+                        document.getElementById('choice-overlay').remove();
+                        this.actionCompleted = true;
+                        this.next();
+                    };
+                });
+            }
+
+            // ====== CASE DATA ======
+            caseData = {
+                case1: {
+                    id: 1,
+                    title: '霓虹暗巷重傷害案',
+                    titleEn: 'NEON ALLEY ASSAULT',
+                    caseImage: 'Assets/triangle/Case/case1.png',
+                    description: '凌晨兩點，幾何酒吧後巷發生了一起惡意鬥毆。犯人使用自己三角形的頭部作為兇器，給了被害人致命一擊，甚至把巷口的鈦合金垃圾桶撞出了一個深深的凹痕。金屬凹痕與路口監視器留下了關鍵的蛛絲馬跡。警方已經鎖定了三位嫌疑犯，請你證明哪一位是犯人，並且說明證明方法！',
+                    evidenceImage: 'Assets/triangle/蛛絲馬跡/12.png',
+                    suspects: [
+                        { id: 'suspect_1', src: 'Assets/triangle/嫌疑犯/12教宗.png', name: '教宗' },
+                        { id: 'suspect_2', src: 'Assets/triangle/嫌疑犯/2農夫.png', name: '農夫' },
+                        { id: 'suspect_3', src: 'Assets/triangle/嫌疑犯/13軍人.png', name: '軍人' }
+                    ],
+                    correctSuspect: 'suspect_1',
+                    correctMethod: 'SSS',
+                    nextCase: 'case2'
+                },
+                case2: {
+                    id: 2,
+                    title: '頂級俱樂部入侵案',
+                    titleEn: 'ELITE CLUB INTRUSION',
+                    caseImage: 'Assets/triangle/Case/case2.png',
+                    description: '只容許上流社會進入的「等腰俱樂部」昨晚遭人強行破壞闖入。犯人沒有用炸藥，而是利用自己天生如利刃般鋒利的「頭頂」，加熱後直接在防彈門上熔出了一個缺口。安檢門的破壞痕跡與監視攝影機拍到了蛛絲馬跡的內容。警方已經鎖定了三位嫌疑犯，請你證明哪一位是犯人，並且說明證明方法！',
+                    evidenceImage: 'Assets/triangle/蛛絲馬跡/3.png',
+                    suspects: [
+                        { id: 'suspect_1', src: 'Assets/triangle/嫌疑犯/5冰淇淋師傅.png', name: '冰淇淋師傅' },
+                        { id: 'suspect_2', src: 'Assets/triangle/嫌疑犯/8列車長.png', name: '列車長' },
+                        { id: 'suspect_3', src: 'Assets/triangle/嫌疑犯/11醫生.png', name: '醫生' }
+                    ],
+                    correctSuspect: 'suspect_2',
+                    correctMethod: 'SAS',
+                    nextCase: 'case3'
+                },
+                case3: {
+                    id: 3,
+                    title: '市政廳塗鴉案',
+                    titleEn: 'CITY HALL GRAFFITI',
+                    caseImage: 'Assets/triangle/Case/case3.png',
+                    description: '街頭塗鴉客「幻影角」昨夜觸發了市政廳的隱藏防盜陷阱——「瞬間定型漆」。在他正貼著牆面作畫時，防盜漆瞬間噴發，雖然他及時逃脫，但牆面上留下了一個完美的「三角形空白剪影」。牆上的空白輪廓與警用無人機拍到了蛛絲馬跡的內容。警方已經鎖定了三位嫌疑犯，請你證明哪一位是犯人，並且說明證明方法！',
+                    evidenceImage: 'Assets/triangle/蛛絲馬跡/17.png',
+                    suspects: [
+                        { id: 'suspect_1', src: 'Assets/triangle/嫌疑犯/9_DJ.png', name: 'DJ' },
+                        { id: 'suspect_2', src: 'Assets/triangle/嫌疑犯/13軍人.png', name: '軍人' },
+                        { id: 'suspect_3', src: 'Assets/triangle/嫌疑犯/11醫生.png', name: '醫生' }
+                    ],
+                    correctSuspect: 'suspect_3',
+                    correctMethod: 'SAS',
+                    nextCase: null
+                }
+            };
+
+            handleAction(actionName) {
+                this.actionCompleted = false;
+                if (actionName === 'show_suspect_investigation') {
+                    this.startInvestigation();
+                } else if (actionName === 'show_sss_sas_images') {
+                    this.showSSSSASImages();
+                } else if (actionName.startsWith('show_practice_')) {
+                    this.showPracticeImages(actionName);
+                } else if (actionName.startsWith('start_case_')) {
+                    const caseNum = actionName.replace('start_case_', '');
+                    this.startCase('case' + caseNum);
+                } else if (actionName === 'end_game') {
+                    // Ends...
+                }
+            }
+
+            // ====== CASE INVESTIGATION SYSTEM ======
+            startCase(caseKey) {
+                const caseInfo = this.caseData[caseKey];
+                if (!caseInfo) { console.error('Case not found:', caseKey); return; }
+
+                this.currentCase = caseInfo;
+                this.caseStartTime = null;
+                this.caseHadError = false;
+                if (!this.caseGrades) this.caseGrades = {};
+
+                // Phase 1: Show case title card
+                this.showCaseTitleCard(caseInfo);
+            }
+
+            showCaseTitleCard(caseInfo) {
+                // Hide any leftover images from previous phases
+                this.elTarget.classList.add('hidden');
+                const wrapper = document.getElementById('suspect-wrapper');
+                if (wrapper) wrapper.innerHTML = '';
+
+                // Full screen overlay with case title
+                const overlay = document.createElement('div');
+                overlay.id = 'case-title-overlay';
+                overlay.className = 'fixed inset-0 z-[200] flex flex-col items-center justify-center bg-black/90 backdrop-blur-sm cursor-pointer';
+                overlay.innerHTML = `
+                    <div class="font-tech text-fuchsia-500 text-lg tracking-[0.5em] mb-4 animate-pulse">CASE FILE #00${caseInfo.id}</div>
+                    <div class="text-5xl font-black text-white mb-4 tracking-wider" style="text-shadow: 0 0 30px rgba(217,70,239,0.6);">${caseInfo.title}</div>
+                    <div class="font-tech text-2xl text-slate-400 tracking-[0.3em]">${caseInfo.titleEn}</div>
+                    <div class="absolute bottom-12 text-fuchsia-400 text-sm animate-bounce font-tech">▼ CLICK TO START</div>
+                `;
+
+                overlay.onclick = () => {
+                    overlay.remove();
+                    this.showCaseDescription(caseInfo);
+                };
+
+                document.body.appendChild(overlay);
+            }
+
+            showCaseDescription(caseInfo) {
+                // Show case image + description in an overlay
+                const overlay = document.createElement('div');
+                overlay.id = 'case-desc-overlay';
+                overlay.className = 'fixed inset-0 z-[200] flex items-center justify-center bg-black/85 backdrop-blur-sm cursor-pointer';
+                overlay.innerHTML = `
+                    <div class="flex flex-col md:flex-row gap-8 max-w-5xl w-full px-8 items-center">
+                        <img src="${caseInfo.caseImage}" class="h-[50vh] object-contain rounded-xl border-2 border-fuchsia-500/40 shadow-lg shadow-fuchsia-500/20" alt="Case Image">
+                        <div class="flex flex-col gap-4 flex-1">
+                            <div class="font-tech text-fuchsia-400 text-sm tracking-[0.3em]">CASE FILE #00${caseInfo.id}</div>
+                            <h2 class="text-3xl font-black text-white">${caseInfo.title}</h2>
+                            <p class="text-slate-300 text-lg leading-relaxed">${caseInfo.description}</p>
+                            <div class="text-fuchsia-400 text-sm animate-bounce font-tech mt-4">▼ CLICK TO INVESTIGATE</div>
+                        </div>
+                    </div>
+                `;
+
+                overlay.onclick = () => {
+                    overlay.remove();
+                    this.showCaseSuspectsPhase(caseInfo);
+                };
+
+                document.body.appendChild(overlay);
+            }
+
+            showCaseSuspectsPhase(caseInfo) {
+                // Start timer NOW
+                this.caseStartTime = Date.now();
+
+                // Show evidence + suspects in the main scene area
+                this.showDialogue(false); // hide dialogue
+                this.elTarget.classList.remove('hidden');
+                document.getElementById('evidence-panel').classList.add('hidden');
+                const sprite = document.getElementById('speaker-sprite');
+                if (sprite) sprite.classList.add('hidden');
+
+                const wrapper = document.getElementById('suspect-wrapper');
+                wrapper.innerHTML = '';
+                wrapper.className = 'relative w-full flex flex-col items-center gap-6 py-4';
+
+                // Top row: Evidence image
+                const evidenceSection = document.createElement('div');
+                evidenceSection.className = 'flex flex-col items-center gap-2';
+                evidenceSection.innerHTML = `
+                    <div class="font-tech text-fuchsia-400 text-sm tracking-widest">EVIDENCE / 蛛絲馬跡</div>
+                    <img src="${caseInfo.evidenceImage}" class="h-[35vh] object-contain rounded-xl border-2 border-fuchsia-500/40 shadow-lg shadow-fuchsia-500/20" alt="Evidence">
+                `;
+
+                // Bottom row: Suspects (clickable)
+                const suspectSection = document.createElement('div');
+                suspectSection.className = 'flex flex-col items-center gap-2';
+                suspectSection.innerHTML = `<div class="font-tech text-cyan-400 text-sm tracking-widest">SUSPECTS / 嫌疑犯 <span class="text-xs text-slate-500">(點擊選擇犯人)</span></div>`;
+
+                const suspectRow = document.createElement('div');
+                suspectRow.className = 'flex gap-6 justify-center items-end';
+
+                caseInfo.suspects.forEach(s => {
+                    const card = document.createElement('div');
+                    card.className = 'flex flex-col items-center gap-1 cursor-pointer group transition-all duration-300';
+                    card.innerHTML = `
+                        <img src="${s.src}" class="h-[32vh] object-contain rounded-xl border-2 border-slate-600 group-hover:border-fuchsia-500 shadow-lg group-hover:shadow-fuchsia-500/30 transition-all duration-300 group-hover:scale-105" alt="${s.name}">
+                        <span class="text-slate-400 group-hover:text-fuchsia-400 text-sm font-bold transition-colors">${s.name}</span>
+                    `;
+                    card.onclick = () => this.onSuspectClick(s, caseInfo);
+                    suspectRow.appendChild(card);
+                });
+
+                suspectSection.appendChild(suspectRow);
+
+                wrapper.appendChild(evidenceSection);
+                wrapper.appendChild(suspectSection);
+            }
+
+            onSuspectClick(suspect, caseInfo) {
+                // Confirm dialog
+                const overlay = document.createElement('div');
+                overlay.id = 'confirm-overlay';
+                overlay.className = 'fixed inset-0 z-[200] flex items-center justify-center bg-black/70 backdrop-blur-sm';
+                overlay.innerHTML = `
+                    <div class="glass-panel p-8 rounded-xl flex flex-col gap-6 max-w-md w-full items-center">
+                        <img src="${suspect.src}" class="h-[20vh] object-contain rounded-lg border border-fuchsia-500/40" alt="${suspect.name}">
+                        <h3 class="text-2xl font-bold text-white">確認 <span class="text-fuchsia-400">${suspect.name}</span> 是犯人嗎？</h3>
+                        <div class="flex gap-4 w-full">
+                            <button id="confirm-yes" class="flex-1 bg-fuchsia-600 hover:bg-fuchsia-500 text-white font-bold py-3 rounded-lg text-lg transition-all border border-fuchsia-400/50 hover:scale-105 transform duration-200">確認逮捕</button>
+                            <button id="confirm-no" class="flex-1 bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-lg text-lg transition-all border border-slate-500/50 hover:scale-105 transform duration-200">再想想</button>
+                        </div>
+                    </div>
+                `;
+
+                document.body.appendChild(overlay);
+
+                document.getElementById('confirm-no').onclick = () => overlay.remove();
+                document.getElementById('confirm-yes').onclick = () => {
+                    overlay.remove();
+                    this.onSuspectConfirmed(suspect, caseInfo);
+                };
+            }
+
+            onSuspectConfirmed(suspect, caseInfo) {
+                const isCorrectSuspect = (suspect.id === caseInfo.correctSuspect);
+
+                if (!isCorrectSuspect) {
+                    this.caseHadError = true;
+                    // Show wrong feedback but let them try again
+                    const wrongOverlay = document.createElement('div');
+                    wrongOverlay.id = 'wrong-suspect-overlay';
+                    wrongOverlay.className = 'fixed inset-0 z-[200] flex items-center justify-center bg-black/70 backdrop-blur-sm cursor-pointer';
+                    wrongOverlay.innerHTML = `
+                        <div class="glass-panel p-8 rounded-xl flex flex-col gap-4 max-w-md w-full items-center border-2 border-red-500/50">
+                            <div class="text-red-500 font-tech text-3xl font-bold">✗ WRONG SUSPECT</div>
+                            <p class="text-slate-300 text-lg text-center">這不是犯人！請再仔細比對蛛絲馬跡和嫌疑犯的特徵。</p>
+                            <div class="text-red-400 text-sm font-tech animate-bounce">▼ CLICK TO RETRY</div>
+                        </div>
+                    `;
+                    wrongOverlay.onclick = () => wrongOverlay.remove();
+                    document.body.appendChild(wrongOverlay);
+                    return;
+                }
+
+                // Correct suspect! Now ask for proof method
+                this.askProofMethod(suspect, caseInfo);
+            }
+
+            askProofMethod(suspect, caseInfo) {
+                const suspectImg = suspect ? suspect.src : caseInfo.suspects.find(s => s.id === caseInfo.correctSuspect).src;
+                const suspectName = suspect ? suspect.name : caseInfo.suspects.find(s => s.id === caseInfo.correctSuspect).name;
+
+                const overlay = document.createElement('div');
+                overlay.id = 'proof-overlay';
+                overlay.className = 'fixed inset-0 z-[200] flex items-center justify-center bg-black/70 backdrop-blur-sm';
+                overlay.innerHTML = `
+                    <div class="glass-panel p-8 rounded-xl flex flex-col gap-6 max-w-4xl w-full items-center">
+                        <div class="font-tech text-green-400 text-2xl font-bold">✓ SUSPECT IDENTIFIED</div>
+                        
+                        <div class="flex gap-8 justify-center items-start w-full">
+                            <div class="flex flex-col items-center gap-2">
+                                <div class="font-tech text-fuchsia-400 text-xs tracking-widest">EVIDENCE / 蛛絲馬跡</div>
+                                <img src="${caseInfo.evidenceImage}" class="h-[30vh] object-contain rounded-xl border-2 border-fuchsia-500/40 shadow-lg shadow-fuchsia-500/20" alt="Evidence">
+                            </div>
+                            <div class="flex flex-col items-center gap-2">
+                                <div class="font-tech text-cyan-400 text-xs tracking-widest">SUSPECT / ${suspectName}</div>
+                                <img src="${suspectImg}" class="h-[30vh] object-contain rounded-xl border-2 border-cyan-500/40 shadow-lg shadow-cyan-500/20" alt="Suspect">
+                            </div>
+                        </div>
+
+                        <p class="text-slate-300 text-lg text-center">你要用哪種方法來 <span class="text-fuchsia-400 font-bold">證明</span> 這位嫌疑犯就是犯人？</p>
+                        <div class="flex gap-4 w-full max-w-md">
+                            <button class="proof-btn flex-1 bg-gradient-to-br from-pink-600 to-fuchsia-700 hover:from-pink-500 hover:to-fuchsia-600 text-white font-bold py-4 rounded-lg text-2xl font-tech transition-all border border-fuchsia-400/50 hover:scale-105 transform duration-200 shadow-lg shadow-fuchsia-500/20" data-method="SSS">SSS</button>
+                            <button class="proof-btn flex-1 bg-gradient-to-br from-amber-600 to-yellow-700 hover:from-amber-500 hover:to-yellow-600 text-white font-bold py-4 rounded-lg text-2xl font-tech transition-all border border-yellow-400/50 hover:scale-105 transform duration-200 shadow-lg shadow-yellow-500/20" data-method="SAS">SAS</button>
+                        </div>
+                    </div>
+                `;
+
+                document.body.appendChild(overlay);
+
+                overlay.querySelectorAll('.proof-btn').forEach(btn => {
+                    btn.onclick = () => {
+                        const method = btn.dataset.method;
+                        overlay.remove();
+                        this.onProofMethodSelected(method, caseInfo);
+                    };
+                });
+            }
+
+            onProofMethodSelected(method, caseInfo) {
+                const isCorrect = (method === caseInfo.correctMethod);
+
+                if (!isCorrect) {
+                    this.caseHadError = true;
+                    // Wrong method, let them pick again
+                    const wrongOverlay = document.createElement('div');
+                    wrongOverlay.id = 'wrong-method-overlay';
+                    wrongOverlay.className = 'fixed inset-0 z-[200] flex items-center justify-center bg-black/70 backdrop-blur-sm cursor-pointer';
+                    wrongOverlay.innerHTML = `
+                        <div class="glass-panel p-8 rounded-xl flex flex-col gap-4 max-w-md w-full items-center border-2 border-red-500/50">
+                            <div class="text-red-500 font-tech text-3xl font-bold">✗ WRONG METHOD</div>
+                            <p class="text-slate-300 text-lg text-center">這個證明方法不正確！請重新觀察證據中的邊和角。</p>
+                            <div class="text-red-400 text-sm font-tech animate-bounce">▼ CLICK TO RETRY</div>
+                        </div>
+                    `;
+                    wrongOverlay.onclick = () => {
+                        wrongOverlay.remove();
+                        this.askProofMethod(null, caseInfo);
+                    };
+                    document.body.appendChild(wrongOverlay);
+                    return;
+                }
+
+                // All correct! Calculate score
+                const elapsed = Math.floor((Date.now() - this.caseStartTime) / 1000);
+                const grade = this.calculateGrade(elapsed, this.caseHadError);
+                this.showCaseResult(caseInfo, elapsed, grade);
+            }
+
+            calculateGrade(seconds, hadError) {
+                if (hadError) {
+                    // Max B if had any error
+                    if (seconds <= 30) return 'B';
+                    return 'C';
+                }
+                // All correct, grading by speed
+                if (seconds <= 10) return 'S';
+                if (seconds <= 20) return 'A++';
+                if (seconds <= 30) return 'A+';
+                if (seconds <= 60) return 'A';
+                return 'B';
+            }
+
+            showCaseResult(caseInfo, seconds, grade) {
+                const gradeColors = {
+                    'S': 'from-amber-400 to-yellow-600',
+                    'A++': 'from-fuchsia-400 to-pink-600',
+                    'A+': 'from-purple-400 to-violet-600',
+                    'A': 'from-cyan-400 to-blue-600',
+                    'B': 'from-green-400 to-emerald-600',
+                    'C': 'from-slate-400 to-gray-600'
+                };
+
+                const gradeMessages = {
+                    'S': '神探降臨！完美破案！',
+                    'A++': '超凡的推理能力！',
+                    'A+': '出色的辦案速度！',
+                    'A': '幹得漂亮！',
+                    'B': '案件已解決。',
+                    'C': '勉強過關...'
+                };
+
+                const overlay = document.createElement('div');
+                overlay.id = 'result-overlay';
+                overlay.className = 'fixed inset-0 z-[200] flex items-center justify-center bg-black/85 backdrop-blur-md cursor-pointer';
+                overlay.innerHTML = `
+                    <div class="flex flex-col items-center gap-6">
+                        <div class="font-tech text-fuchsia-500 text-lg tracking-[0.5em]">CASE #00${caseInfo.id} CLOSED</div>
+                        <div class="text-3xl font-bold text-white">${caseInfo.title}</div>
+                        <div class="text-8xl font-black bg-gradient-to-br ${gradeColors[grade]} bg-clip-text text-transparent" style="text-shadow: 0 0 40px rgba(217,70,239,0.4); -webkit-text-stroke: 1px rgba(255,255,255,0.1);">
+                            ${grade}
+                        </div>
+                        <div class="text-xl text-slate-300">${gradeMessages[grade]}</div>
+                        <div class="font-tech text-slate-500 text-sm">耗時 ${seconds} 秒</div>
+                        <div class="text-fuchsia-400 text-sm animate-bounce font-tech mt-4">▼ CLICK TO CONTINUE</div>
+                    </div>
+                `;
+
+                overlay.onclick = () => {
+                    overlay.remove();
+                    this.caseGrades[caseInfo.id] = grade;
+                    this.onCaseComplete(caseInfo);
+                };
+
+                document.body.appendChild(overlay);
+            }
+
+            onCaseComplete(caseInfo) {
+                if (caseInfo.nextCase) {
+                    // Chain to next case
+                    this.startCase(caseInfo.nextCase);
+                } else {
+                    // All cases done — show summary
+                    this.showFinalSummary();
+                }
+            }
+
+            showFinalSummary() {
+                const gradeOrder = ['S', 'A++', 'A+', 'A', 'B', 'C'];
+                const gradeScores = { 'S': 100, 'A++': 90, 'A+': 80, 'A': 70, 'B': 50, 'C': 30 };
+                const gradeColors = {
+                    'S': 'text-amber-400', 'A++': 'text-fuchsia-400', 'A+': 'text-purple-400',
+                    'A': 'text-cyan-400', 'B': 'text-green-400', 'C': 'text-slate-400'
+                };
+
+                // Calculate overall grade from average score
+                const grades = this.caseGrades;
+                const totalScore = Object.values(grades).reduce((sum, g) => sum + (gradeScores[g] || 0), 0);
+                const avgScore = totalScore / Object.keys(grades).length;
+                let overallGrade = 'C';
+                if (avgScore >= 95) overallGrade = 'S';
+                else if (avgScore >= 85) overallGrade = 'A++';
+                else if (avgScore >= 75) overallGrade = 'A+';
+                else if (avgScore >= 65) overallGrade = 'A';
+                else if (avgScore >= 45) overallGrade = 'B';
+
+                // Save to localStorage (only if better than existing)
+                const storageKey = 'math_city_score_congruence';
+                const currentBest = localStorage.getItem(storageKey) || '';
+                const currentBestIdx = gradeOrder.indexOf(currentBest);
+                const newIdx = gradeOrder.indexOf(overallGrade);
+                if (currentBestIdx === -1 || newIdx < currentBestIdx) {
+                    localStorage.setItem(storageKey, overallGrade);
+                }
+
+                const caseTitles = { 1: '霓虹暗巷重傷害案', 2: '頂級俱樂部入侵案', 3: '市政廳塗鴉案' };
+
+                // Build case grade cards
+                let caseCardsHtml = '';
+                for (let i = 1; i <= 3; i++) {
+                    const g = grades[i] || 'C';
+                    caseCardsHtml += `
+                        <div class="flex items-center gap-4 bg-slate-800/60 rounded-xl px-6 py-3 border border-slate-700">
+                            <span class="font-tech text-fuchsia-500 text-sm">CASE ${i}</span>
+                            <span class="text-white text-sm flex-1">${caseTitles[i]}</span>
+                            <span class="text-2xl font-black ${gradeColors[g]}">${g}</span>
+                        </div>
+                    `;
+                }
+
+                const overallGradeColors = {
+                    'S': 'from-amber-400 to-yellow-600', 'A++': 'from-fuchsia-400 to-pink-600',
+                    'A+': 'from-purple-400 to-violet-600', 'A': 'from-cyan-400 to-blue-600',
+                    'B': 'from-green-400 to-emerald-600', 'C': 'from-slate-400 to-gray-600'
+                };
+
+                const hl = (t) => `<span class="text-yellow-400 font-bold">${t}</span>`;
+
+                const overlay = document.createElement('div');
+                overlay.id = 'final-summary-overlay';
+                overlay.className = 'fixed inset-0 z-[200] flex items-center justify-center bg-black/90 backdrop-blur-md overflow-y-auto py-8';
+                overlay.innerHTML = `
+                    <div class="flex flex-col items-center gap-6 max-w-3xl w-full px-6">
+                        <div class="font-tech text-fuchsia-500 text-lg tracking-[0.5em]">MISSION COMPLETE</div>
+                        <div class="text-4xl font-black text-white">辦案總結</div>
+
+                        <!-- Overall Grade -->
+                        <div class="text-8xl font-black bg-gradient-to-br ${overallGradeColors[overallGrade]} bg-clip-text text-transparent" style="-webkit-text-stroke: 1px rgba(255,255,255,0.1);">
+                            ${overallGrade}
+                        </div>
+
+                        <!-- Case Breakdown -->
+                        <div class="flex flex-col gap-3 w-full max-w-lg">
+                            ${caseCardsHtml}
+                        </div>
+
+                        <!-- Summary Text -->
+                        <div class="glass-panel rounded-xl p-6 max-w-lg w-full text-slate-300 leading-relaxed text-base space-y-4 border border-fuchsia-500/20">
+                            <p>恭喜你成功協助警方破案了，未來或許你真的有機會成為一個好警探呢！</p>
+                            <p>三角形全等是你學習數學以來，第一次碰到要${hl('「證明」')}的內容！證明的邏輯對於判斷事情的${hl('正確與否')}非常重要，或許也能提升你的${hl('吵架能力')}(?</p>
+                            <p>一個三角形中，有${hl('3個邊')}，${hl('3個角')}，但每次都要看${hl('6個')}條件才能證明全等，實在太麻煩了，於是數學家想盡辦法將6個${hl('簡化')}成${hl('3��')}條件即可判斷，除了剛剛學會的${hl('SSS')}和${hl('SAS')}外，${hl('還有其他幾種')}喔！剩下的細節等上課的時候我們再慢慢說吧~</p>
+                        </div>
+
+                        <!-- Back Button -->
+                        <a href="index.html" class="bg-fuchsia-600 hover:bg-fuchsia-500 text-white font-bold py-4 px-12 rounded-xl text-xl font-tech tracking-widest border border-fuchsia-400/50 transition-all hover:scale-105 transform duration-200 shadow-lg shadow-fuchsia-500/30">
+                            回到 Math City
+                        </a>
+                    </div>
+                `;
+
+                document.body.appendChild(overlay);
+            }
+
+            showSSSSASImages() {
+                this.elTarget.classList.remove('hidden');
+                document.getElementById('evidence-panel').classList.add('hidden'); // Hide evidence panel
+                const wrapper = document.getElementById('suspect-wrapper');
+                // clear wrapper
+                wrapper.innerHTML = '';
+
+                // Add images side by side
+                const container = document.createElement('div');
+                container.className = 'flex gap-8 justify-center items-center';
+
+                const img1 = document.createElement('img');
+                img1.src = 'Assets/triangle/犯罪證明/紅.png';
+                img1.className = 'h-[40vh] object-contain shadow-lg shadow-fuchsia-500/20 rounded-xl border border-slate-700';
+
+                const img2 = document.createElement('img');
+                img2.src = 'Assets/triangle/犯罪證明/SAS黃.png';
+                img2.className = 'h-[40vh] object-contain shadow-lg shadow-yellow-500/20 rounded-xl border border-slate-700';
+
+                container.appendChild(img1);
+                container.appendChild(img2);
+                wrapper.appendChild(container);
+
+                this.actionCompleted = true; // No interaction needed, just show
+                this.next(); // Since it's an action that completes immediately visually
+            }
+
+            showPracticeImages(actionName) {
+                this.elTarget.classList.remove('hidden');
+                document.getElementById('evidence-panel').classList.add('hidden');
+                const wrapper = document.getElementById('suspect-wrapper');
+                wrapper.innerHTML = '';
+
+                const container = document.createElement('div');
+                container.className = 'flex gap-8 justify-center items-center';
+
+                let src1, src2;
+                if (actionName === 'show_practice_1') {
+                    src1 = 'Assets/triangle/蛛絲馬跡/4.png';
+                    src2 = 'Assets/triangle/嫌疑犯/2農夫.png';
+                } else if (actionName === 'show_practice_2') {
+                    src1 = 'Assets/triangle/蛛絲馬跡/1.png';
+                    src2 = 'Assets/triangle/嫌疑犯/5冰淇淋師傅.png';
+                }
+
+                const img1 = document.createElement('img');
+                img1.src = src1;
+                img1.className = 'h-[70vh] object-contain shadow-lg shadow-fuchsia-500/20 rounded-xl border border-slate-700'; // Increased size
+
+                const img2 = document.createElement('img');
+                img2.src = src2;
+                img2.className = 'h-[70vh] object-contain shadow-lg shadow-cyan-500/20 rounded-xl border border-slate-700'; // Increased size
+
+                container.appendChild(img1);
+                container.appendChild(img2);
+                wrapper.appendChild(container);
+
+                this.actionCompleted = true;
+                this.next();
+            }
+
+            startInvestigation() {
+                this.elTarget.classList.remove('hidden');
+                document.getElementById('evidence-panel').classList.remove('hidden');
+
+                // Switch to the Feature Logic Image
+                const img = document.getElementById('suspect-image');
+                img.src = 'Assets/triangle/嫌疑犯/16造型師.png'; // Use new image with marks
+
+                this.foundFeatures.clear();
+                this.angleCount = 0;
+                this.sideCount = 0;
+                this.updateStatsDisplay();
+                this.updateEvidenceCount();
+
+                // Adjusted positions to match "Red/Blue Circles"
+                const hitboxes = [
+                    // Angles (Red)
+                    // Top Vertex (Right-ish) - Averaged
+                    { id: 'angle_top', x: 70, y: 26, type: 'Angle', class: 'found-angle' },
+                    // Bottom Left Vertex - Averaged
+                    { id: 'angle_left', x: 20, y: 53, type: 'Angle', class: 'found-angle' },
+                    // Bottom Right Vertex - Averaged
+                    { id: 'angle_right', x: 70, y: 53, type: 'Angle', class: 'found-angle' },
+
+                    // Sides (Blue)
+                    // Hypotenuse (Midpoint of Top and Left) - Averaged
+                    { id: 'side_hypotenuse', x: 45, y: 38, type: 'Side', class: 'found-side' },
+                    // Right Side (Midpoint of Top and Right) - Averaged
+                    { id: 'side_right', x: 70, y: 40, type: 'Side', class: 'found-side' },
+                    // Bottom Side (Midpoint of Left and Right) - Averaged
+                    { id: 'side_bottom', x: 45, y: 53, type: 'Side', class: 'found-side' }
+                ];
+
+                // Target the wrapper logic
+                const wrapper = document.getElementById('suspect-wrapper');
+
+                const existing = wrapper.querySelectorAll('.hitbox');
+                existing.forEach(e => e.remove());
+
+                hitboxes.forEach(hb => {
+                    const el = document.createElement('div');
+                    el.className = 'hitbox';
+                    el.style.left = hb.x + '%';
+                    el.style.top = hb.y + '%';
+                    el.style.transform = 'translate(-50%, -50%)';
+                    el.dataset.id = hb.id;
+                    el.onclick = (e) => this.onFeatureClick(e, el, hb);
+                    wrapper.appendChild(el);
+                });
+            }
+
+            onFeatureClick(e, el, hb) {
+                e.stopPropagation();
+                if (this.foundFeatures.has(el.dataset.id)) return;
+
+                el.classList.add(hb.class); // Use specific color class
+                this.foundFeatures.add(el.dataset.id);
+
+                if (hb.type === 'Angle') this.angleCount++;
+                if (hb.type === 'Side') this.sideCount++;
+
+                this.updateStatsDisplay();
+                this.updateEvidenceCount(); // Keeps the top-right counter too
+
+                // this.showFloatingText(e.clientX, e.clientY, hb.type + ' Found!');
+                if (hb.type === 'Angle') el.innerText = 'A';
+                if (hb.type === 'Side') el.innerText = 'S';
+
+                if (this.foundFeatures.size >= this.requiredFeatures) {
+                    this.completeInvestigation();
+                }
+            }
+
+            updateStatsDisplay() {
+                const display = document.getElementById('stats-display');
+                if (display) {
+                    display.innerText = `[已找到邊數：${this.sideCount}，已找到角數：${this.angleCount}]`;
+                }
+            }
+
+            updateEvidenceCount() {
+                const count = document.getElementById('evidence-count');
+                count.innerText = `${this.foundFeatures.size} / ${this.requiredFeatures}`;
+            }
+
+            showFloatingText(x, y, text) {
+                const el = document.createElement('div');
+                el.className = 'fixed pointer-events-none text-white font-bold text-shadow animate-float-up z-50 text-xl';
+                el.style.left = x + 'px';
+                el.style.top = y + 'px';
+                el.innerText = text;
+                document.body.appendChild(el);
+                setTimeout(() => el.remove(), 1000);
+            }
+
+            completeInvestigation() {
+                this.actionCompleted = true;
+                setTimeout(() => {
+                    this.step++;
+
+                    // Add next dialogue/logic
+                    const fmtName = (n) => `<span class="text-amber-400 font-bold mx-1 text-xl">${n}</span>`;
+                    const nextPart = [
+                        {
+                            type: 'dialogue',
+                            speaker: '資深警探',
+                            type: 'dialogue',
+                            speaker: '資深警探',
+                            text: '很好，看來我們真的找對人了，三角形的所有<span class="text-yellow-400 font-bold">特徵</span>就是他的<span class="text-yellow-400 font-bold">三個邊</span>和<span class="text-yellow-400 font-bold">三個角</span>，如果六項特徵全部都符合的話，那兩個三角形一定能<span class="text-yellow-400 font-bold">完全重疊</span>在一起，表示這是<span class="text-yellow-400 font-bold">同一個三角形</span>。'
+                        },
+                        {
+                            type: 'dialogue',
+                            speaker: '資深警探',
+                            text: '但是我們在犯罪現場的證據，並沒有辦法這麼完整，現在我要教你<span class="text-yellow-400 font-bold">2種更好用的</span>辨認方式！'
+                        },
+                        {
+                            type: 'dialogue',
+                            speaker: '資深警探',
+                            text: '首先要教你一些我們的專用術語 <span class="text-yellow-400">S=Side=三角形的邊</span>，<span class="text-yellow-400">A=Angle=三角形的角</span>'
+                        },
+                        {
+                            type: 'quiz',
+                            question: '現在請你告訴我，將「SSS」換成中文是什麼？',
+                            answer: ['邊邊邊', '三邊由', '三邊', '三個邊'],
+                            correctMsg: '沒錯！S就是邊，SSS就是邊邊邊！',
+                            wrongMsg: '不對喔... (提示：S是邊，SSS就是？)'
+                        },
+                        {
+                            type: 'quiz',
+                            question: '那麼，「SAS」換成中文是什麼？',
+                            answer: ['邊角邊'],
+                            correctMsg: '太好了，你學得很快嘛！',
+                            wrongMsg: '再想想... (提示：S是邊，A是角，SAS就是？)'
+                        },
+                        {
+                            type: 'dialogue',
+                            speaker: '資深警探',
+                            text: '接下來我要教你的高級刑偵技術，也就是證明犯人的方法<span class="text-yellow-400 font-bold">SSS</span>和<span class="text-yellow-400 font-bold">SAS</span>'
+                        },
+                        {
+                            type: 'action',
+                            action: 'show_sss_sas_images',
+                            speaker: '資深警探',
+                            text: '<span class="text-yellow-400 font-bold">SSS</span>：線索中的三個邊長和嫌疑犯的三個邊長完全相等<br><span class="text-yellow-400 font-bold">SAS</span>：線索中的兩個邊和夾起來的角，與嫌疑犯的兩個邊和夾起來的角相等<br><br>只要有找到其中一種，就能幫我們證明他就是犯人！這樣你學會了嗎？'
+                        },
+                        {
+                            type: 'quiz',
+                            question: '請問你剛剛學到的證明方法其中一個是？(英文)',
+                            answer: ['SSS', 'SAS'],
+                            correctMsg: '沒錯！這是其中一個！',
+                            wrongMsg: '請輸入SSS或SAS'
+                        },
+                        {
+                            type: 'quiz',
+                            question: '另一個是？',
+                            answer: ['SSS', 'SAS'], // Logic: User should enter the other one, but simplified game engine checks inclusion.
+                            // To properly 'exclude' the previous answer without complex logic injection, we'll just accept both for now
+                            // but the user phrasing implies they should know the other.
+                            // Given constraints, I'll accept both to avoid getting stuck if they repeat.
+                            correctMsg: '太棒了！你都記住了！',
+                            wrongMsg: '請輸入另一個證明方法 (SSS或SAS)'
+                        },
+                        {
+                            type: 'quiz',
+                            question: '那SSS的中文是?',
+                            answer: ['邊邊邊'],
+                            correctMsg: '完全正確！',
+                            wrongMsg: '提示：S是邊...'
+                        },
+                        {
+                            type: 'quiz',
+                            question: '還有SAS的中文是?',
+                            answer: ['邊角邊'],
+                            correctMsg: '太強了！你已經具備資深警探的潛力了！',
+                            wrongMsg: '提示：A是角...'
+                        },
+                        {
+                            type: 'dialogue',
+                            speaker: '資深警探',
+                            text: '接下來要測驗你剛剛學到的證明方法囉！'
+                        },
+                        {
+                            type: 'action',
+                            action: 'show_practice_1',
+                            speaker: '資深警探',
+                            text: '請看這兩張圖...'
+                        },
+                        {
+                            type: 'quiz',
+                            question: '請問要用哪個證明方法說明兩者是同一人呢？(SSS或SAS)',
+                            answer: ['SSS'],
+                            correctMsg: '答對了！三邊對應相等！',
+                            wrongMsg: '再仔細看看，是三個邊相等還是兩邊一角？'
+                        },
+                        {
+                            type: 'action',
+                            action: 'show_practice_2',
+                            speaker: '資深警探',
+                            text: '再來試試這一題...'
+                        },
+                        {
+                            type: 'quiz',
+                            question: '請問這題要用哪個證明方法說明兩者是同一人呢？(SSS或SAS)',
+                            answer: ['SAS'],
+                            correctMsg: '太厲害了！兩邊一夾角對應相等！',
+                            wrongMsg: '再仔細看看，有幾個邊？有幾個角？'
+                        },
+                        {
+                            type: 'dialogue',
+                            speaker: '資深警探',
+                            text: (name) => `太好了，既然${fmtName(name)}成功通過測驗了，接下來有幾個案件要請你幫忙了！`
+                        },
+                        {
+                            type: 'dialogue',
+                            speaker: '資深警探',
+                            text: '我們會為你的辦案狀況打分數，請以<span class="text-yellow-400 font-bold">正確性</span>為<span class="text-yellow-400 font-bold">優先</span>，速度為次，抓錯犯人可是很傷腦筋的呢~'
+                        },
+                        {
+                            type: 'action',
+                            action: 'start_case_1',
+                            speaker: 'SYSTEM',
+                            text: '案件載入中...'
+                        }
+                    ];
+
+                    // Replace remaining script or append? 
+                    // Since SCRIPT is simpler now, we can just splice.
+                    // NOTE: Previous logic used `startInvestigation` at step X. 
+                    // We need to inject these steps AFTER the current step.
+                    // Remove old placeholder steps if any.
+
+                    SCRIPT.splice(this.step, SCRIPT.length - this.step, ...nextPart);
+                    // Reset step index to process the first inserted item
+                    this.processStep();
+
+                }, 1000);
+            }
+
+            appendNextPhase() {
+                // Deprecated in favor of direct injection in completeInvestigation
+            }
+
+            showQuiz(data) {
+                const quizLayer = document.getElementById('quiz-layer');
+                const quizContent = document.getElementById('quiz-content');
+
+                quizLayer.classList.remove('hidden');
+
+                // Integrated layout matching dialogue style exactly
+
+                // Integrated layout matching dialogue style exactly
+                quizContent.innerHTML = `
+                        <div class="dialogue-name">資深警探 <span class="text-xs text-slate-500 ml-2 tracking-normal">// AUTHENTICATION REQUIRED</span></div>
+                        <div class="dialogue-text mb-4">${data.question}</div>
+                        
+                        <div class="flex gap-4 w-full mt-auto items-end">
+                            <div class="text-fuchsia-500 font-tech text-xl animate-pulse">></div>
+                            <input type="text" id="quiz-input" class="flex-1 bg-transparent border-b-2 border-fuchsia-500/50 text-white text-xl p-2 focus:outline-none focus:border-fuchsia-400 font-mono tracking-wider placeholder-slate-600" placeholder="輸入答案..." autocomplete="off">
+                            <button id="quiz-submit" class="bg-fuchsia-600 hover:bg-fuchsia-500 text-white font-bold px-8 py-2 rounded clip-path-slant text-lg font-tech tracking-widest border border-fuchsia-400/50 transition-all shadow-lg shadow-fuchsia-500/20">CONFIRM</button>
+                        </div>
+                        <div id="quiz-feedback" class="absolute top-6 right-8 font-tech text-xl font-bold"></div>
+                    `;
+
+                const input = document.getElementById('quiz-input');
+                const btn = document.getElementById('quiz-submit');
+                const feedback = document.getElementById('quiz-feedback');
+
+                input.focus();
+
+                const checkAnswer = () => {
+                    const val = input.value.trim();
+                    if (data.answer.includes(val)) {
+                        // Correct
+                        feedback.className = 'text-green-400 font-bold';
+                        feedback.innerText = 'ACCESS GRANTED';
+                        input.classList.add('text-green-400');
+                        input.disabled = true;
+
+                        setTimeout(() => {
+                            quizLayer.classList.add('hidden');
+
+                            // Add temporary dialogue for success reaction
+                            this.showDialogue(true);
+                            this.setSpeaker('資深警探');
+                            this.typeText(data.correctMsg);
+                        }, 1000);
+                    } else {
+                        // Wrong
+                        input.value = '';
+                        input.classList.add('animate-shake');
+
+                        // Clear shake separately
+                        setTimeout(() => {
+                            input.classList.remove('animate-shake');
+                        }, 500);
+
+                        // Show persistent wrong message
+                        feedback.className = 'text-red-400 text-lg font-bold'; // Increased size for visibility
+                        feedback.innerText = data.wrongMsg;
+                    }
+                };
+
+                btn.onclick = checkAnswer;
+                input.onkeypress = (e) => { if (e.key === 'Enter') checkAnswer(); };
+            }
+
+            // Add shake animation style dynamically
+            addStyles() {
+                const style = document.createElement('style');
+                style.innerHTML = `
+                    @keyframes float-up {
+                        0% { transform: translateY(0); opacity: 1; }
+                        100% { transform: translateY(-50px); opacity: 0; }
+                    }
+                    .animate-float-up {
+                        animation: float-up 1s ease-out forwards;
+                    }
+                    @keyframes shake {
+                        0%, 100% { transform: translateX(0); }
+                        25% { transform: translateX(-5px); }
+                        75% { transform: translateX(5px); }
+                    }
+                    .animate-shake {
+                        animation: shake 0.3s ease-in-out;
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+        }
+
+        // Init Game
+        window.onload = () => {
+            window.game = new GameEngine();
+        };
+
+    </script>
+</body>
+
+</html>

example/algebra.html

@@ -0,0 +1,578 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島 - 代數之丘</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            touch-action: none; /* 防止在觸控拖曳時滾動頁面 */
+            background-image: url('https://i.meee.com.tw/AF01kln.png');
+            background-size: cover;
+            background-position: center;
+        }
+        /* 自訂積木顏色 */
+        .block-a-squared { background-color: #fca5a5; } /* red-300 */
+        .block-b-squared { background-color: #818cf8; } /* indigo-400 */
+        .block-ab { background-color: #fcd34d; } /* amber-300 */
+        .block-distractor { background-color: #9ca3af; } /* gray-400 */
+
+        /* 拼圖區格線 */
+        #grid-container {
+            display: grid;
+            background-image:
+                linear-gradient(to right, #d1d5db 1px, transparent 1px),
+                linear-gradient(to bottom, #d1d5db 1px, transparent 1px);
+            background-size: var(--unit-size) var(--unit-size);
+            border: 2px solid #6b7280;
+        }
+        /* 拖曳中的複製物件 */
+        .dragging-clone {
+            position: absolute;
+            pointer-events: none; /* 讓滑鼠事件穿透複製物件 */
+            z-index: 1000;
+            opacity: 0.8;
+            border: 2px dashed #4f46e5;
+        }
+        /* 已放置在選項區的積木 */
+        .palette-block.placed {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        /* 已放置在拼圖區的積木 */
+        .placed-block {
+            position: absolute;
+            cursor: pointer;
+            border: 2px solid #1f2937;
+            transition: all 0.2s ease-in-out;
+        }
+        .placed-block:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(0,0,0,0.5);
+        }
+        /* 過關時的特別框線 */
+        .highlight-win {
+            background-color: #fef9c3; /* yellow-100 */
+            border: 2px solid #f59e0b; /* amber-500 */
+            border-radius: 8px;
+            padding: 2px 6px;
+            display: inline-block;
+        }
+        /* 隱藏滾動條，但在觸控設備上仍可滾動 */
+        #block-palette::-webkit-scrollbar {
+            display: none;
+        }
+        #block-palette {
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+    </style>
+</head>
+<body class="w-screen h-screen overflow-hidden flex items-center justify-center relative">
+
+    <!-- 任務說明畫面 -->
+    <div id="start-screen" class="absolute inset-0 w-screen h-screen flex items-center justify-center p-4 transition-opacity duration-500 bg-gray-900/50">
+        <div class="container mx-auto p-6 md:p-8 bg-white/90 backdrop-blur-sm rounded-xl shadow-2xl max-w-2xl text-center">
+            <h1 class="text-3xl md:text-4xl font-bold text-indigo-600 mb-6">任務說明：代數之丘</h1>
+            <p class="text-lg text-gray-700 mb-4">歡迎來到代數之丘！在這裡，我們不用死背公式，而是用雙手「拼」出數學！</p>
+            <p class="text-lg text-gray-700 mb-8">你的任務是拖曳下方的彩色積木，將左邊的灰色正方形完全填滿，親身體驗 <span class="font-mono font-bold text-indigo-700">(a+b)² = a² + 2ab + b²</span> 這個公式是如何誕生的！</p>
+            <button id="start-button" class="w-full md:w-1/2 bg-indigo-600 text-white font-bold py-3 md:py-4 px-6 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg text-lg md:text-xl">
+                開始挑戰
+            </button>
+        </div>
+    </div>
+
+    <!-- 遊戲主畫面 -->
+    <div id="game-container" class="flex flex-row w-full h-full max-w-screen-xl mx-auto p-4 lg:p-8 gap-8 items-start transition-opacity duration-500 opacity-0 hidden">
+
+        <!-- 左欄：包含拼圖區和過關訊息 -->
+        <div class="w-1/3 flex flex-col items-center justify-start gap-6">
+            <div id="grid-container" class="relative bg-gray-200/80 backdrop-blur-sm shadow-xl rounded-lg">
+                <!-- 拼圖區的積木會由 JS 動態加入這裡 -->
+            </div>
+            <!-- 過關訊息與按鈕 (已移至此處) -->
+            <div id="win-message-container" class="w-full text-center p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg hidden">
+                <p class="text-2xl font-bold text-green-600">恭喜過關！</p>
+                <p id="win-formula-explanation" class="text-lg text-gray-700 mt-2"></p>
+                <button id="next-level-button" class="mt-4 w-full bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-700 transition-colors shadow-md">
+                    挑戰下一關
+                </button>
+            </div>
+        </div>
+
+        <!-- 右欄：控制項 -->
+        <div id="controls-container" class="w-2/3 flex-shrink-0 flex flex-col bg-white/90 backdrop-blur-sm rounded-xl shadow-lg p-6 h-full">
+            <h1 class="text-3xl font-bold text-gray-800 text-center">代數之丘</h1>
+            <hr class="my-4">
+            
+            <!-- 算式區 -->
+            <div class="bg-blue-50/80 p-4 rounded-lg mb-4 space-y-2">
+                <!-- 題目行 -->
+                <div class="grid grid-cols-4 items-baseline">
+                    <p class="text-lg text-gray-600 font-semibold col-span-1">題目：</p>
+                    <p id="equation-title" class="col-span-3 text-2xl font-bold text-indigo-700 text-center"></p>
+                </div>
+                <!-- 面積結果行 -->
+                <div class="grid grid-cols-4 items-baseline">
+                    <p class="text-lg text-gray-600 font-semibold col-span-1">面積結果：</p>
+                    <div id="equation-result" class="col-span-3 text-2xl font-mono text-gray-800 text-center"></div>
+                </div>
+            </div>
+
+            <!-- 說明文字 -->
+            <div id="instructions" class="text-center text-gray-500 mb-4 text-sm">
+                <p>請從下方拖曳積木，拼滿左邊的正方形。</p>
+                <p class="mt-1">💡 <span class="font-semibold">提示：</span>點擊已放置的積木可以將它移除。</p>
+            </div>
+
+            <!-- 積木選項區 (包含捲動按鈕) -->
+            <div class="relative mt-auto">
+                <div id="block-palette" class="flex flex-row flex-nowrap overflow-x-auto items-center gap-4 p-4 bg-gray-100/80 rounded-md">
+                    <!-- 積木選項會由 JS 動態加入這裡 -->
+                </div>
+                <!-- 左捲動按鈕 -->
+                <button id="scroll-left-button" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-1 shadow-md hidden transition-opacity">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                    </svg>
+                </button>
+                <!-- 右捲動按鈕 -->
+                <button id="scroll-right-button" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-1 shadow-md hidden transition-opacity">
+                     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- 秘密揭曉畫面 (從 secret.html 整合進來) -->
+    <div id="secret-view" class="absolute inset-0 w-screen h-screen flex items-center justify-center p-4 opacity-0 hidden transition-opacity duration-500 bg-gray-900/50">
+        <div class="container mx-auto p-6 md:p-8 bg-white rounded-xl shadow-2xl max-w-4xl text-center overflow-y-auto max-h-[90vh]">
+            <h1 class="text-3xl md:text-4xl font-bold text-indigo-600 mb-8">代數之丘最大的秘密</h1>
+            
+            <div class="grid md:grid-cols-3 gap-6 md:gap-8 mb-8">
+                <!-- Image 1 -->
+                <div class="flex flex-col items-center p-2 border rounded-lg">
+                    <img src="https://i.meee.com.tw/Sx68qrS.png" alt="拼圖 (6+4)²" class="rounded-md shadow-md mb-4 w-full" onerror="this.onerror=null;this.src='https://placehold.co/400x400/fca5a5/ffffff?text=(6%2B4)%C2%B2';">
+                    <p class="text-lg md:text-xl font-mono font-bold">(6+4)² = 6² + <span class="highlight-win">2×6×4</span> + 4²</p>
+                </div>
+                <!-- Image 2 -->
+                <div class="flex flex-col items-center p-2 border rounded-lg">
+                    <img src="https://i.meee.com.tw/7gGAB80.png" alt="拼圖 (4+9)²" class="rounded-md shadow-md mb-4 w-full" onerror="this.onerror=null;this.src='https://placehold.co/400x400/818cf8/ffffff?text=(4%2B9)%C2%B2';">
+                    <p class="text-lg md:text-xl font-mono font-bold">(4+9)² = 4² + <span class="highlight-win">2×4×9</span> + 9²</p>
+                </div>
+                <!-- Image 3 -->
+                <div class="flex flex-col items-center p-2 border rounded-lg">
+                    <img src="https://i.meee.com.tw/0hdfRvP.png" alt="拼圖 (7+5)²" class="rounded-md shadow-md mb-4 w-full" onerror="this.onerror=null;this.src='https://placehold.co/400x400/fcd34d/ffffff?text=(7%2B5)%C2%B2';">
+                    <p class="text-lg md:text-xl font-mono font-bold">(7+5)² = 7² + <span class="highlight-win">2×7×5</span> + 5²</p>
+                </div>
+            </div>
+            
+            <div class="text-left text-base md:text-lg text-gray-700 space-y-4 border-t-2 pt-8">
+                <p>選舉最大的祕密就是：票多的贏，票少的輸...<span class="italic text-gray-500">咳咳不是這個啦</span></p>
+                <p class="text-xl md:text-2xl font-bold text-red-600">代數之丘的最大秘密就是：(a+b)²展開後一定會有ab這項，而且還是<span class="underline decoration-wavy decoration-amber-500">2ab</span>，學會這個，這單元就已經學會一半了！</p>
+                <p class="font-semibold text-indigo-700">(請在學習單上做紀錄！)</p>
+            </div>
+            
+            <div class="mt-12">
+                <a href="index.html" class="inline-block w-full md:w-1/2 bg-indigo-600 text-white font-bold py-3 md:py-4 px-6 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg text-lg md:text-xl">
+                    回到探險島地圖
+                </a>
+            </div>
+        </div>
+    </div>
+
+
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- 常數與設定 ---
+        const UNIT_SIZE = 30; // 每個單位格的像素大小 (px)
+        const levels = [
+            { a: 6, b: 4, distractors: [] },
+            { a: 4, b: 9, distractors: [{w: 5, h: 8}, {w: 7, h: 6}] },
+            { a: 7, b: 5, distractors: [{w: 8, h: 6}, {w: 6, h: 8}] }
+        ];
+        let currentLevel = 0;
+
+        // --- DOM 元素 ---
+        const startScreen = document.getElementById('start-screen');
+        const startButton = document.getElementById('start-button');
+        const gameContainer = document.getElementById('game-container');
+        const secretView = document.getElementById('secret-view');
+        const gridContainer = document.getElementById('grid-container');
+        const blockPalette = document.getElementById('block-palette');
+        const equationTitle = document.getElementById('equation-title');
+        const equationResult = document.getElementById('equation-result');
+        const winMessageContainer = document.getElementById('win-message-container');
+        const winFormulaExplanation = document.getElementById('win-formula-explanation');
+        const nextLevelButton = document.getElementById('next-level-button');
+        const scrollLeftButton = document.getElementById('scroll-left-button');
+        const scrollRightButton = document.getElementById('scroll-right-button');
+
+        // --- 遊戲狀態 ---
+        let gridState = []; // 2D 陣列，記錄拼圖區每個格子的佔用情況
+        let placedBlocks = new Map(); // 記錄已放置的積木 (key: placedId, value: { el, originalId, type })
+        let draggingElement = null; // 目前正在拖曳的原始積木
+        let clone = null; // 拖曳時的複製物件
+        let offset = { x: 0, y: 0 }; // 拖曳時的滑鼠偏移量
+
+        // --- 核心函式 ---
+
+        function initLevel(levelIndex) {
+            currentLevel = levelIndex;
+            const level = levels[levelIndex];
+            const totalSize = level.a + level.b;
+
+            gridContainer.innerHTML = '';
+            blockPalette.innerHTML = '';
+            winMessageContainer.classList.add('hidden');
+            placedBlocks.clear();
+            
+            gridContainer.style.width = `${totalSize * UNIT_SIZE}px`;
+            gridContainer.style.height = `${totalSize * UNIT_SIZE}px`;
+            gridContainer.style.setProperty('--unit-size', `${UNIT_SIZE}px`);
+
+            gridState = Array(totalSize).fill(null).map(() => Array(totalSize).fill(null));
+
+            createBlocks(level);
+            updateEquation();
+            
+            if (currentLevel === levels.length - 1) {
+                nextLevelButton.textContent = '查看代數的秘密';
+            } else {
+                nextLevelButton.textContent = '挑戰下一關';
+            }
+            
+            // 延遲執行以確保 DOM 尺寸已更新
+            setTimeout(updateScrollButtonsVisibility, 100);
+        }
+
+        function createBlocks(level) {
+            const { a, b, distractors } = level;
+            const blocksData = [
+                { id: 'a_squared', w: a, h: a, type: 'correct', class: 'block-a-squared', label: `${a}×${a}` },
+                { id: 'b_squared', w: b, h: b, type: 'correct', class: 'block-b-squared', label: `${b}×${b}` },
+                { id: 'ab1', w: a, h: b, type: 'correct', class: 'block-ab', label: `${a}×${b}` },
+                { id: 'ab2', w: b, h: a, type: 'correct', class: 'block-ab', label: `${b}×${a}` },
+                ...distractors.map((d, i) => ({
+                    id: `distractor_${i}`, w: d.w, h: d.h, type: 'distractor', class: 'block-distractor', label: `${d.w}×${d.h}`
+                }))
+            ];
+            
+            blocksData.sort(() => Math.random() - 0.5);
+
+            blocksData.forEach(data => {
+                const blockEl = document.createElement('div');
+                blockEl.id = `palette-${data.id}`;
+                blockEl.className = `palette-block flex-shrink-0 ${data.class} rounded-md shadow-sm cursor-grab flex items-center justify-center text-white font-bold text-base`;
+                blockEl.style.width = `${data.w * UNIT_SIZE}px`;
+                blockEl.style.height = `${data.h * UNIT_SIZE}px`;
+                blockEl.textContent = data.label;
+                
+                blockEl.dataset.id = data.id;
+                blockEl.dataset.w = data.w;
+                blockEl.dataset.h = data.h;
+                blockEl.dataset.type = data.type;
+                blockEl.dataset.class = data.class;
+
+                blockPalette.appendChild(blockEl);
+            });
+        }
+
+        function updateEquation() {
+            const level = levels[currentLevel];
+            equationTitle.textContent = `(${level.a} + ${level.b})²`;
+
+            const placedCorrectBlocks = Array.from(placedBlocks.values()).filter(b => b.type === 'correct');
+            
+            let parts = [];
+            if (placedCorrectBlocks.some(b => b.originalId === 'a_squared')) parts.push(`${level.a}²`);
+            if (placedCorrectBlocks.some(b => b.originalId === 'b_squared')) parts.push(`${level.b}²`);
+            
+            const abCount = placedCorrectBlocks.filter(b => b.originalId.startsWith('ab')).length;
+            if (abCount === 1) parts.push(`(${level.a}×${level.b})`);
+            if (abCount === 2) parts.push(`2(${level.a}×${level.b})`);
+
+            if (parts.length > 0) {
+                equationResult.innerHTML = parts.join(' + ');
+            } else {
+                equationResult.innerHTML = '...';
+            }
+        }
+
+        // --- 拖曳事件處理 ---
+
+        function onDragStart(e) {
+            const target = e.target.closest('.palette-block');
+            if (!target || target.classList.contains('placed')) return;
+
+            e.preventDefault();
+            draggingElement = target;
+
+            const rect = target.getBoundingClientRect();
+            const pointer = getPointer(e);
+            offset.x = pointer.x - rect.left;
+            offset.y = pointer.y - rect.top;
+
+            clone = target.cloneNode(true);
+            clone.classList.remove('palette-block');
+            clone.classList.add('dragging-clone');
+            clone.style.width = `${target.dataset.w * UNIT_SIZE}px`;
+            clone.style.height = `${target.dataset.h * UNIT_SIZE}px`;
+            document.body.appendChild(clone);
+            
+            moveClone(pointer.x, pointer.y);
+
+            document.addEventListener('mousemove', onDragMove);
+            document.addEventListener('touchmove', onDragMove, { passive: false });
+            document.addEventListener('mouseup', onDragEnd);
+            document.addEventListener('touchend', onDragEnd);
+        }
+
+        function onDragMove(e) {
+            if (!clone) return;
+            e.preventDefault();
+            const pointer = getPointer(e);
+            moveClone(pointer.x, pointer.y);
+        }
+
+        function onDragEnd(e) {
+            if (!draggingElement || !clone) return;
+            
+            const gridRect = gridContainer.getBoundingClientRect();
+            const pointer = getPointer(e);
+            
+            const blockTopLeftX = pointer.x - gridRect.left - offset.x;
+            const blockTopLeftY = pointer.y - gridRect.top - offset.y;
+
+            const gridX = Math.round(blockTopLeftX / UNIT_SIZE);
+            const gridY = Math.round(blockTopLeftY / UNIT_SIZE);
+
+            const w = parseInt(draggingElement.dataset.w);
+            const h = parseInt(draggingElement.dataset.h);
+            const type = draggingElement.dataset.type;
+
+            if (canPlace(gridX, gridY, w, h, type)) {
+                placeBlock(gridX, gridY, w, h);
+            }
+
+            document.body.removeChild(clone);
+            clone = null;
+            draggingElement = null;
+            document.removeEventListener('mousemove', onDragMove);
+            document.removeEventListener('touchmove', onDragMove);
+            document.removeEventListener('mouseup', onDragEnd);
+            document.removeEventListener('touchend', onDragEnd);
+        }
+        
+        function canPlace(gridX, gridY, w, h, type) {
+            const totalSize = levels[currentLevel].a + levels[currentLevel].b;
+            
+            if (currentLevel === 1 && type === 'distractor') {
+                return false;
+            }
+
+            if (gridX < 0 || gridY < 0 || gridX + w > totalSize || gridY + h > totalSize) {
+                return false;
+            }
+
+            for (let i = gridY; i < gridY + h; i++) {
+                for (let j = gridX; j < gridX + w; j++) {
+                    if (i >= totalSize || j >= totalSize || gridState[i][j] !== null) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+
+        function placeBlock(gridX, gridY, w, h) {
+            const placedId = `placed-${Date.now()}`;
+
+            for (let i = gridY; i < gridY + h; i++) {
+                for (let j = gridX; j < gridX + w; j++) {
+                    gridState[i][j] = placedId;
+                }
+            }
+
+            const placedEl = document.createElement('div');
+            placedEl.id = placedId;
+            placedEl.className = `placed-block ${draggingElement.dataset.class} flex items-center justify-center text-white font-bold`;
+            placedEl.style.left = `${gridX * UNIT_SIZE}px`;
+            placedEl.style.top = `${gridY * UNIT_SIZE}px`;
+            placedEl.style.width = `${w * UNIT_SIZE}px`;
+            placedEl.style.height = `${h * UNIT_SIZE}px`;
+            placedEl.textContent = `${w}×${h}`;
+            gridContainer.appendChild(placedEl);
+
+            placedBlocks.set(placedId, {
+                el: placedEl,
+                originalId: draggingElement.dataset.id,
+                type: draggingElement.dataset.type,
+                gridX, gridY, w, h
+            });
+
+            draggingElement.classList.add('placed');
+            placedEl.addEventListener('click', () => removeBlock(placedId));
+            
+            updateEquation();
+            checkWinCondition();
+        }
+
+        function removeBlock(placedId) {
+            const block = placedBlocks.get(placedId);
+            if (!block) return;
+
+            gridContainer.removeChild(block.el);
+
+            for (let i = block.gridY; i < block.gridY + block.h; i++) {
+                for (let j = block.gridX; j < block.gridX + block.w; j++) {
+                    if (gridState[i][j] === placedId) {
+                        gridState[i][j] = null;
+                    }
+                }
+            }
+            
+            placedBlocks.delete(placedId);
+
+            const originalBlock = document.getElementById(`palette-${block.originalId}`);
+            if (originalBlock) {
+                originalBlock.classList.remove('placed');
+            }
+            
+            updateEquation();
+        }
+
+        function checkWinCondition() {
+            const level = levels[currentLevel];
+            const totalSize = level.a + level.b;
+            
+            const placedCorrectCount = Array.from(placedBlocks.values()).filter(b => b.type === 'correct').length;
+            
+            if (placedCorrectCount !== 4) return;
+
+            let isFull = true;
+            for (let i = 0; i < totalSize; i++) {
+                for (let j = 0; j < totalSize; j++) {
+                    if (gridState[i][j] === null) {
+                        isFull = false;
+                        break;
+                    }
+                }
+                if (!isFull) break;
+            }
+
+            if (isFull) {
+                showWinState();
+            }
+        }
+
+        function showWinState() {
+            const level = levels[currentLevel];
+            const finalFormula = `(${level.a}+${level.b})² = ${level.a}² + <span class="highlight-win">2×${level.a}×${level.b}</span> + ${level.b}²`;
+            winFormulaExplanation.innerHTML = finalFormula;
+            winMessageContainer.classList.remove('hidden');
+
+            blockPalette.style.pointerEvents = 'none';
+            gridContainer.style.pointerEvents = 'none';
+        }
+        
+        // --- 捲動與輔助函式 ---
+
+        function updateScrollButtonsVisibility() {
+            const palette = blockPalette;
+            const scrollLeft = palette.scrollLeft;
+            const scrollWidth = palette.scrollWidth;
+            const clientWidth = palette.clientWidth;
+
+            if (scrollWidth <= clientWidth) {
+                scrollLeftButton.classList.add('hidden');
+                scrollRightButton.classList.add('hidden');
+                return;
+            }
+
+            if (scrollLeft > 0) {
+                scrollLeftButton.classList.remove('hidden');
+            } else {
+                scrollLeftButton.classList.add('hidden');
+            }
+
+            if (scrollLeft < scrollWidth - clientWidth - 1) {
+                scrollRightButton.classList.remove('hidden');
+            } else {
+                scrollRightButton.classList.add('hidden');
+            }
+        }
+
+        function getPointer(e) {
+            // For touchend event, we need to use changedTouches because touches is empty.
+            if (e.changedTouches && e.changedTouches.length > 0) {
+                return { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };
+            }
+            // For touchstart and touchmove events.
+            if (e.touches && e.touches.length > 0) {
+                return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            }
+            // Fallback for mouse events.
+            return { x: e.clientX, y: e.clientY };
+        }
+
+
+        function moveClone(x, y) {
+            if (!clone) return;
+            clone.style.left = `${x - offset.x}px`;
+            clone.style.top = `${y - offset.y}px`;
+        }
+
+        // --- 事件監聽 ---
+        startButton.addEventListener('click', () => {
+            startScreen.style.opacity = '0';
+            gameContainer.classList.remove('hidden');
+            setTimeout(() => {
+                startScreen.classList.add('hidden');
+                gameContainer.style.opacity = '1';
+                initLevel(currentLevel);
+            }, 500);
+        });
+
+        blockPalette.addEventListener('mousedown', onDragStart);
+        blockPalette.addEventListener('touchstart', onDragStart, { passive: false });
+        blockPalette.addEventListener('scroll', updateScrollButtonsVisibility);
+        window.addEventListener('resize', updateScrollButtonsVisibility);
+
+        scrollLeftButton.addEventListener('click', () => {
+            blockPalette.scrollBy({ left: -200, behavior: 'smooth' });
+        });
+
+        scrollRightButton.addEventListener('click', () => {
+            blockPalette.scrollBy({ left: 200, behavior: 'smooth' });
+        });
+
+        nextLevelButton.addEventListener('click', () => {
+            if (currentLevel < levels.length - 1) {
+                initLevel(currentLevel + 1);
+                blockPalette.style.pointerEvents = 'auto';
+                gridContainer.style.pointerEvents = 'auto';
+            } else {
+                // 顯示秘密畫面
+                gameContainer.style.opacity = '0';
+                secretView.classList.remove('hidden');
+                setTimeout(() => {
+                    gameContainer.classList.add('hidden');
+                    secretView.style.opacity = '1';
+                }, 500);
+            }
+        });
+
+    });
+    </script>
+
+</body>
+</html>

example/gemstone.html

@@ -0,0 +1,694 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島 - 寶石洞窟</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-image: url('https://i.meee.com.tw/pI0c5ue.png');
+            background-size: cover;
+            background-position: center;
+        }
+        canvas {
+            background-color: #2d241d;
+            display: block;
+            border-radius: 0.5rem;
+            box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
+        }
+        .action-button {
+            transition: all 0.2s ease-in-out;
+            box-shadow: 0 5px #995f00;
+        }
+        .action-button:active {
+            transform: translateY(3px);
+            box-shadow: 0 2px #995f00;
+        }
+        .move-button {
+            transition: all 0.2s ease-in-out;
+            box-shadow: 0 5px #1e3a8a;
+        }
+        .move-button:active {
+            transform: translateY(3px);
+            box-shadow: 0 2px #1e3a8a;
+        }
+        .gem-button {
+            transition: transform 0.1s ease-in-out;
+        }
+        .gem-button:active {
+            transform: scale(0.9);
+        }
+        .secret-bg {
+             background-image: url('https://i.meee.com.tw/EKZpYKI.png');
+             background-size: cover;
+             background-position: center;
+        }
+    </style>
+</head>
+<body class="flex items-center justify-center h-screen overflow-hidden">
+
+    <div id="container" class="w-full max-w-md mx-auto text-white p-4 flex flex-col h-full">
+
+        <!-- 引導畫面 -->
+        <div id="start-screen" class="flex flex-col items-center justify-center text-center p-8 bg-black bg-opacity-60 rounded-lg my-auto">
+            <h1 class="text-4xl font-bold text-amber-300 mb-4">寶石洞窟</h1>
+            <p class="text-lg text-gray-200 mb-8">這是一個已經廢棄的寶石洞窟，接下來你必須駕駛一台礦車，成功閃避障礙物來獲得璀璨寶石！</p>
+            <button id="start-button" class="action-button bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-4 px-8 rounded-lg text-2xl">
+                開始採礦
+            </button>
+        </div>
+
+        <!-- 遊戲畫面 -->
+        <div id="game-screen" class="hidden flex-col h-full">
+            <div id="canvas-wrapper" class="relative">
+                <canvas id="gameCanvas"></canvas>
+                <!-- 操作說明畫面 -->
+                <div id="instructions-screen" class="hidden absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center text-center p-4 rounded-lg">
+                    <h2 class="text-3xl font-bold text-amber-300 mb-6">操作說明</h2>
+                    <div class="space-y-4 text-lg">
+                        <p>點擊畫面<span class="text-blue-400 font-bold">左半邊</span>或按<span class="text-blue-400 font-bold">左方向鍵</span> ← 向左移動</p>
+                        <p>點擊畫面<span class="text-blue-400 font-bold">右半邊</span>或按<span class="text-blue-400 font-bold">右方向鍵</span> → 向右移動</p>
+                        <p class="mt-4">也可以使用下方的按鈕操作！</p>
+                    </div>
+                    <button id="play-game-button" class="action-button bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                        了解！
+                    </button>
+                </div>
+                <!-- 遊戲結束畫面 -->
+                <div id="game-over-screen" class="hidden absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center text-center p-4 rounded-lg">
+                    <h2 class="text-4xl font-bold text-red-500 mb-4">挑戰失敗！</h2>
+                    <p class="text-xl mb-6">礦車撞毀了！</p>
+                    <button id="restart-button" class="action-button bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-3 px-6 rounded-lg text-xl">
+                        重新挑戰
+                    </button>
+                </div>
+                 <!-- 遊戲獲勝畫面 -->
+                <div id="win-screen" class="hidden absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center text-center p-4 rounded-lg">
+                    <h2 class="text-4xl font-bold text-green-400 mb-4">成功！</h2>
+                    <p class="text-xl mb-2">你成功抵達了寶石區域！</p>
+                    <p id="win-perfect-dodges" class="text-2xl text-amber-300 font-bold mb-6"></p>
+                    <button id="continue-button" class="action-button bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg text-xl">
+                        繼續前進
+                    </button>
+                </div>
+            </div>
+            <!-- 移動按鈕 -->
+            <div id="controls" class="flex justify-between mt-4">
+                <button id="move-left-button" class="move-button bg-blue-600 hover:bg-blue-700 text-white font-bold p-4 rounded-lg w-24 h-16">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+                </button>
+                <button id="move-right-button" class="move-button bg-blue-600 hover:bg-blue-700 text-white font-bold p-4 rounded-lg w-24 h-16">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+                </button>
+            </div>
+        </div>
+        
+        <!-- 寶石解謎畫面 -->
+        <div id="puzzle-screen" class="hidden flex-col h-full p-6 bg-black bg-opacity-60 rounded-lg">
+            <div class="flex-grow overflow-y-auto">
+                <h1 class="text-3xl font-bold text-amber-300 text-center mb-4">寶石組合挑戰</h1>
+                <p class="text-center mb-4">觀察大寶石，點擊下方的小寶石，組合出正確的配方！</p>
+                
+                <div class="flex justify-center mb-4">
+                    <img id="large-gem-image" src="" class="h-40 object-contain" alt="[大寶石的Image]">
+                </div>
+
+                <div id="answer-slots" class="bg-gray-900/50 min-h-[80px] rounded-lg p-2 flex flex-wrap items-center justify-center gap-2 mb-4 border-2 border-amber-400"></div>
+
+                <div id="small-gem-options" class="flex justify-center items-center gap-4 mb-6 flex-wrap"></div>
+                
+                <div id="puzzle-feedback" class="text-center text-xl font-bold min-h-[32px] mb-4"></div>
+            </div>
+
+            <div class="flex gap-4 mt-auto pt-4">
+                <button id="reset-puzzle-button" class="w-1/2 bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 rounded-lg">重置</button>
+                <button id="check-puzzle-button" class="w-1/2 bg-green-500 hover:bg-green-600 text-white font-bold py-3 rounded-lg">鑑定寶石</button>
+            </div>
+        </div>
+
+        <!-- 過場畫面 -->
+        <div id="intermission-screen" class="hidden flex-col text-center p-8 bg-black bg-opacity-60 rounded-lg my-auto">
+            <h1 class="text-3xl font-bold text-amber-300 mb-4">準備挑戰下一區！</h1>
+            <p class="text-lg text-gray-200 mb-8">前方的礦道更加危險，速度會更快！</p>
+            <button id="start-next-stage-button" class="action-button bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-4 px-8 rounded-lg text-2xl">
+                繼續採礦
+            </button>
+        </div>
+
+        <!-- 最終通關畫面 -->
+        <div id="final-win-screen" class="hidden flex-col text-center p-8 bg-black bg-opacity-60 rounded-lg my-auto">
+             <h1 class="text-4xl font-bold text-green-400 mb-4">恭喜你完成所有寶石挑戰！</h1>
+             <button id="unlock-secret-button" class="action-button bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-lg text-2xl">
+                解鎖寶石洞窟的秘密
+            </button>
+        </div>
+    </div>
+
+    <!-- 秘密揭曉畫面 (獨立於 container 之外) -->
+    <div id="secret-screen" class="hidden absolute inset-0 w-screen h-screen secret-bg p-8 text-white flex-col items-center justify-center">
+        <div class="w-full max-w-2xl bg-black bg-opacity-70 p-8 rounded-xl">
+            <div id="secret-question">
+                <h2 class="text-3xl font-bold text-amber-300 mb-6">你認為這個洞窟的秘密是...</h2>
+                <div class="space-y-4 text-lg">
+                    <button data-choice="A" class="secret-choice w-full text-left p-4 bg-white/10 hover:bg-white/20 rounded-lg transition-colors">A. 如何完美駕駛礦車，一次通關</button>
+                    <button data-choice="B" class="secret-choice w-full text-left p-4 bg-white/10 hover:bg-white/20 rounded-lg transition-colors">B. 如何增加完美閃避的次數</button>
+                    <button data-choice="C" class="secret-choice w-full text-left p-4 bg-white/10 hover:bg-white/20 rounded-lg transition-colors">C. 寶石分析術</button>
+                </div>
+                <p id="secret-feedback" class="mt-6 min-h-[28px] text-xl"></p>
+            </div>
+            <div id="secret-reveal" class="hidden text-left space-y-4">
+                <p class="text-lg">從最小的寶石到浩瀚的星辰，萬事萬物都由更基本的元素構成。你學會的『寶石分析術』，在數學的世界裡，它被稱為『因式分解』。</p>
+                <p class="text-2xl font-bold text-amber-300">這個洞窟的秘密就是：學會分析與拆解，就是看透事物本質的第一步。</p>
+                <p class="text-lg">無論是分析一顆寶石的成分、一道數學題的結構，還是未來你遇到的任何複雜問題，這種化繁為簡的智慧，才是你從這裡帶走、永不消失的真正寶藏。</p>
+            </div>
+             <div class="mt-12 text-center">
+                <a href="index.html" id="back-to-map-button" class="action-button inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-xl">
+                    回到探險島地圖
+                </a>
+            </div>
+        </div>
+    </div>
+
+
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- 畫面元素 ---
+        const container = document.getElementById('container');
+        const startScreen = document.getElementById('start-screen');
+        const gameScreen = document.getElementById('game-screen');
+        const puzzleScreen = document.getElementById('puzzle-screen');
+        const intermissionScreen = document.getElementById('intermission-screen');
+        const finalWinScreen = document.getElementById('final-win-screen');
+        const secretScreen = document.getElementById('secret-screen');
+        const startButton = document.getElementById('start-button');
+        const instructionsScreen = document.getElementById('instructions-screen');
+        const playGameButton = document.getElementById('play-game-button');
+        const gameOverScreen = document.getElementById('game-over-screen');
+        const winScreen = document.getElementById('win-screen');
+        const winPerfectDodges = document.getElementById('win-perfect-dodges');
+        const restartButton = document.getElementById('restart-button');
+        const continueButton = document.getElementById('continue-button');
+        const startNextStageButton = document.getElementById('start-next-stage-button');
+        const unlockSecretButton = document.getElementById('unlock-secret-button');
+        const canvas = document.getElementById('gameCanvas');
+        const canvasWrapper = document.getElementById('canvas-wrapper');
+        const moveLeftButton = document.getElementById('move-left-button');
+        const moveRightButton = document.getElementById('move-right-button');
+        const ctx = canvas.getContext('2d');
+        
+        // --- 寶石解謎元素 ---
+        const largeGemImage = document.getElementById('large-gem-image');
+        const answerSlots = document.getElementById('answer-slots');
+        const smallGemOptions = document.getElementById('small-gem-options');
+        const puzzleFeedback = document.getElementById('puzzle-feedback');
+        const resetPuzzleButton = document.getElementById('reset-puzzle-button');
+        const checkPuzzleButton = document.getElementById('check-puzzle-button');
+        
+        // --- 秘密揭曉元素 ---
+        const secretQuestion = document.getElementById('secret-question');
+        const secretReveal = document.getElementById('secret-reveal');
+        const secretFeedback = document.getElementById('secret-feedback');
+        const secretChoiceButtons = document.querySelectorAll('.secret-choice');
+
+        // --- 遊戲設定 ---
+        const LANE_COUNT = 3;
+        let laneWidth;
+        let gameInterval, timer, obstacleInterval;
+        let timeLeft;
+        let perfectDodges = 0;
+        const perfectDodgeTexts = [];
+        let keySequence = [];
+        const cheatCode = "kkkkk";
+        let currentStage = 0;
+        let currentStageSettings;
+
+        const gameStages = [
+            { speed: 2.5, time: 20, spawnRate: 1800 }, 
+            { speed: 3.5, time: 15, spawnRate: 1200 },
+            { speed: 4.0, time: 12, spawnRate: 1000 }
+        ];
+        
+        // --- 寶石解謎設定 ---
+        const allSmallGems = [
+            { id: 1, src: 'https://i.meee.com.tw/FeaxgIn.png' },
+            { id: 2, src: 'https://i.meee.com.tw/VgnnNxo.png' },
+            { id: 3, src: 'https://i.meee.com.tw/5vu7Qk1.png' },
+            { id: 4, src: 'https://i.meee.com.tw/eoel84q.png' },
+            { id: 5, src: 'https://i.meee.com.tw/b2uL22E.png' },
+            { id: 6, src: 'https://i.meee.com.tw/HeduyDE.png' },
+            { id: 7, src: 'https://i.meee.com.tw/2gorePd.png' },
+            { id: 8, src: 'https://i.meee.com.tw/HNNEM09.png' },
+            { id: 9, src: 'https://i.meee.com.tw/cpw8ccy.png' },
+            { id: 10, src: 'https://i.meee.com.tw/Rk8hY7H.png' }
+        ];
+
+        const puzzleLevels = [
+            {
+                largeGemSrc: 'https://i.meee.com.tw/PU1busV.png',
+                options: [1, 2, 3],
+                answer: { 1: 1, 2: 3, 3: 1 },
+                maxGems: 5
+            },
+            {
+                largeGemSrc: 'https://i.meee.com.tw/JCK7B2S.png',
+                options: [2, 3, 4, 5, 6, 7],
+                answer: { 3: 2, 7: 2, 2: 1, 4: 1, 5: 1, 6: 1 },
+                maxGems: 8
+            },
+            {
+                largeGemSrc: 'https://i.meee.com.tw/wFJquPy.png',
+                options: [2, 3, 4, 5, 6, 8, 9, 10],
+                answer: { 8: 3, 10: 3, 5: 6, 9: 1 },
+                maxGems: 13
+            }
+        ];
+        let playerSelection = {};
+
+        // --- 玩家設定 ---
+        const player = {
+            x: 0, y: 0, width: 100, height: 100, lane: 1, image: new Image()
+        };
+        const normalCartSrc = 'https://i.meee.com.tw/w6krwUz.png';
+        const crashedCartSrc = 'https://i.meee.com.tw/4wSy5uX.png';
+        player.image.src = normalCartSrc;
+        player.image.onerror = () => { console.error("礦車圖片載入失敗！"); };
+
+        // --- 障礙物設定 ---
+        const obstacles = [];
+        const trackTies = []; 
+        const obstacleImage = new Image();
+        obstacleImage.src = 'https://i.meee.com.tw/L0tV6le.png';
+        obstacleImage.onerror = () => { console.error("障礙物圖片載入失敗！"); };
+        let lastTieY = 0;
+        const TIE_SPACING = 50; 
+
+        // --- 畫面管理 ---
+        function showScreen(screenId) {
+            ['start-screen', 'game-screen', 'puzzle-screen', 'intermission-screen', 'final-win-screen'].forEach(id => {
+                const screen = document.getElementById(id);
+                if (id === screenId) {
+                    screen.style.display = 'flex';
+                    screen.classList.remove('hidden');
+                    if(id === 'start-screen' || id === 'intermission-screen' || id === 'final-win-screen') {
+                        screen.classList.add('my-auto');
+                    } else {
+                        screen.classList.remove('my-auto');
+                    }
+                } else {
+                    screen.style.display = 'none';
+                    screen.classList.add('hidden');
+                }
+            });
+        }
+
+        // --- 礦車遊戲函式 ---
+        function resizeCanvas() {
+            const container = document.getElementById('container');
+            const controls = document.getElementById('controls');
+            canvas.width = container.clientWidth;
+            canvas.height = window.innerHeight * 0.9 - controls.offsetHeight - 20;
+            canvasWrapper.style.width = `${canvas.width}px`;
+            canvasWrapper.style.height = `${canvas.height}px`;
+            laneWidth = canvas.width / LANE_COUNT;
+            player.y = canvas.height - player.height - 10;
+        }
+
+        function getLaneCenterX(lane) {
+            return (lane * laneWidth) + (laneWidth / 2);
+        }
+        
+        function spawnTrackTies() {
+            while (lastTieY < canvas.height + TIE_SPACING) {
+                trackTies.push({ y: lastTieY });
+                lastTieY += TIE_SPACING;
+            }
+        }
+
+        function drawTrack() {
+            ctx.fillStyle = '#57402c'; 
+            trackTies.forEach(tie => {
+                for (let i = 0; i < LANE_COUNT; i++) {
+                    const laneX = getLaneCenterX(i);
+                    const rail1X = laneX - laneWidth * 0.25;
+                    const rail2X = laneX + laneWidth * 0.25;
+                    ctx.fillRect(rail1X, tie.y, rail2X - rail1X, 10);
+                }
+            });
+            const railColor = '#858585', highlightColor = '#b0b0b0', railWidth = 8;
+            for (let i = 0; i < LANE_COUNT; i++) {
+                const laneX = getLaneCenterX(i);
+                const rail1X = laneX - laneWidth * 0.25;
+                const rail2X = laneX + laneWidth * 0.25;
+                ctx.fillStyle = railColor;
+                ctx.fillRect(rail1X - railWidth / 2, 0, railWidth, canvas.height);
+                ctx.fillRect(rail2X - railWidth / 2, 0, railWidth, canvas.height);
+                ctx.fillStyle = highlightColor;
+                ctx.fillRect(rail1X - railWidth / 2, 0, railWidth / 2, canvas.height);
+                ctx.fillRect(rail2X - railWidth / 2, 0, railWidth / 2, canvas.height);
+            }
+        }
+
+        function drawPlayer() {
+            player.x = getLaneCenterX(player.lane) - player.width / 2;
+            if (player.image.complete && player.image.naturalHeight !== 0) {
+                 ctx.drawImage(player.image, player.x, player.y, player.width, player.height);
+            } else {
+                ctx.fillStyle = 'blue';
+                ctx.fillRect(player.x, player.y, player.width, player.height);
+            }
+        }
+
+        function drawObstacles() {
+            obstacles.forEach(obstacle => {
+                if (obstacleImage.complete && obstacleImage.naturalHeight !== 0) {
+                    ctx.drawImage(obstacleImage, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
+                } else {
+                    ctx.fillStyle = '#a16207'; 
+                    ctx.beginPath();
+                    ctx.roundRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height, [10]);
+                    ctx.fill();
+                }
+            });
+        }
+        
+        function drawUI() {
+            ctx.fillStyle = 'white';
+            ctx.font = 'bold 20px "Noto Sans TC"';
+            ctx.textAlign = 'center';
+            ctx.fillText(`倒數計時: ${timeLeft.toFixed(1)} 秒`, canvas.width / 2, 30);
+            ctx.textAlign = 'right';
+            ctx.fillText(`完美閃避: ${perfectDodges}`, canvas.width - 20, 30);
+            perfectDodgeTexts.forEach(text => {
+                ctx.save();
+                ctx.globalAlpha = text.alpha;
+                ctx.fillStyle = '#fde047';
+                ctx.font = 'bold 24px "Noto Sans TC"';
+                ctx.textAlign = 'center';
+                ctx.fillText(text.text, text.x, text.y);
+                ctx.restore();
+            });
+        }
+
+        function update() {
+            for (let i = trackTies.length - 1; i >= 0; i--) {
+                trackTies[i].y += currentStageSettings.speed;
+                if (trackTies[i].y > canvas.height) {
+                    trackTies.splice(i, 1);
+                    trackTies.unshift({ y: (trackTies[0]?.y || 0) - TIE_SPACING });
+                }
+            }
+            for (let i = obstacles.length - 1; i >= 0; i--) {
+                obstacles[i].y += currentStageSettings.speed;
+                if (obstacles[i].y > canvas.height) obstacles.splice(i, 1);
+            }
+            for (let i = perfectDodgeTexts.length - 1; i >= 0; i--) {
+                perfectDodgeTexts[i].y -= 1; 
+                perfectDodgeTexts[i].alpha -= 0.02; 
+                if (perfectDodgeTexts[i].alpha <= 0) perfectDodgeTexts.splice(i, 1);
+            }
+            obstacles.forEach(obstacle => {
+                if (player.lane === obstacle.lane && player.y < obstacle.y + obstacle.height && player.y + player.height > obstacle.y) {
+                    gameOver();
+                }
+            });
+        }
+
+        function draw() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawTrack();
+            drawObstacles();
+            drawPlayer();
+            drawUI();
+        }
+
+        function spawnObstacle() {
+            const lane = Math.floor(Math.random() * LANE_COUNT);
+            const size = laneWidth * 0.5;
+            const x = getLaneCenterX(lane) - size / 2;
+            obstacles.push({ x, y: -size, width: size, height: size, lane, dodged: false });
+        }
+
+        function gameLoop() {
+            update();
+            draw();
+            gameInterval = requestAnimationFrame(gameLoop);
+        }
+
+        function stopGame() {
+            if (gameInterval) cancelAnimationFrame(gameInterval);
+            if (timer) clearInterval(timer);
+            if (obstacleInterval) clearInterval(obstacleInterval);
+            gameInterval = timer = obstacleInterval = null;
+        }
+
+        function startGame(stageIndex) {
+            currentStage = stageIndex;
+            currentStageSettings = gameStages[stageIndex];
+            player.image.src = normalCartSrc; // Reset to normal cart image
+            stopGame(); 
+            instructionsScreen.classList.add('hidden');
+            gameOverScreen.classList.add('hidden');
+            winScreen.classList.add('hidden');
+            resizeCanvas();
+            obstacles.length = 0;
+            trackTies.length = 0;
+            perfectDodgeTexts.length = 0;
+            perfectDodges = 0;
+            lastTieY = 0;
+            spawnTrackTies(); 
+            player.lane = 1;
+            timeLeft = currentStageSettings.time;
+            timer = setInterval(() => {
+                timeLeft -= 0.1;
+                if (timeLeft <= 0) {
+                    timeLeft = 0;
+                    winGame();
+                }
+            }, 100);
+            obstacleInterval = setInterval(spawnObstacle, currentStageSettings.spawnRate);
+            gameLoop();
+        }
+
+        function gameOver() {
+            stopGame();
+            player.image.src = crashedCartSrc; // Change to crashed cart image
+            draw(); // Redraw canvas one last time with the new image
+            gameOverScreen.classList.remove('hidden');
+        }
+        
+        function winGame() {
+            stopGame();
+            winPerfectDodges.textContent = `完美閃避: ${perfectDodges} 次`;
+            winScreen.classList.remove('hidden');
+        }
+
+        function handleMove(direction) {
+            if (!gameInterval) return;
+            const oldLane = player.lane;
+            let newLane = player.lane;
+            if (direction === 'left') newLane = Math.max(0, player.lane - 1);
+            else if (direction === 'right') newLane = Math.min(LANE_COUNT - 1, player.lane + 1);
+            if (oldLane !== newLane) {
+                player.lane = newLane;
+                checkPerfectDodge(oldLane);
+            }
+        }
+        
+        function checkPerfectDodge(fromLane) {
+            const perfectDodgeZoneTop = player.y - player.height / 2;
+            const perfectDodgeZoneBottom = player.y + player.height;
+            obstacles.forEach(obstacle => {
+                if (obstacle.lane === fromLane && !obstacle.dodged) {
+                    if (obstacle.y + obstacle.height > perfectDodgeZoneTop && obstacle.y < perfectDodgeZoneBottom) {
+                        perfectDodges++;
+                        obstacle.dodged = true;
+                        perfectDodgeTexts.push({ text: '完美！', x: getLaneCenterX(fromLane), y: player.y, alpha: 1 });
+                    }
+                }
+            });
+        }
+        
+        // --- 寶石解謎函式 ---
+        function showPuzzleScreen() {
+            showScreen('puzzle-screen');
+            loadPuzzleLevel(currentStage);
+        }
+
+        function loadPuzzleLevel(levelIndex) {
+            const level = puzzleLevels[levelIndex];
+            largeGemImage.src = level.largeGemSrc;
+            smallGemOptions.innerHTML = '';
+            level.options.forEach(gemId => {
+                const gemData = allSmallGems.find(g => g.id === gemId);
+                if (gemData) {
+                    const gemBtn = document.createElement('button');
+                    gemBtn.className = 'gem-button';
+                    gemBtn.innerHTML = `<img src="${gemData.src}" alt="小寶石 ${gemData.id}" class="h-16 w-16 object-contain">`;
+                    gemBtn.onclick = () => addGemToSelection(gemData);
+                    smallGemOptions.appendChild(gemBtn);
+                }
+            });
+            resetPuzzle();
+        }
+
+        function addGemToSelection(gem) {
+            const currentTotal = Object.values(playerSelection).reduce((sum, count) => sum + count, 0);
+            const level = puzzleLevels[currentStage];
+            
+            if (currentTotal >= level.maxGems) {
+                puzzleFeedback.textContent = '數量太多了喔！';
+                puzzleFeedback.className = 'text-center text-xl font-bold min-h-[32px] mb-4 text-yellow-400';
+                setTimeout(() => {
+                    if(puzzleFeedback.textContent === '數量太多了喔！') {
+                       puzzleFeedback.textContent = '';
+                    }
+                }, 2000);
+                return;
+            }
+
+            playerSelection[gem.id] = (playerSelection[gem.id] || 0) + 1;
+            renderSelection();
+        }
+
+        function removeGemFromSelection(gemId) {
+            if (playerSelection[gemId]) {
+                playerSelection[gemId]--;
+                if (playerSelection[gemId] === 0) {
+                    delete playerSelection[gemId];
+                }
+            }
+            renderSelection();
+        }
+
+        function renderSelection() {
+            answerSlots.innerHTML = '';
+            puzzleLevels[currentStage].options.forEach(gemId => {
+                 const gemData = allSmallGems.find(g => g.id === gemId);
+                if (playerSelection[gemId]) {
+                    const count = playerSelection[gemId];
+                    for (let i = 0; i < count; i++) {
+                        const img = document.createElement('img');
+                        img.src = gemData.src;
+                        img.alt = `[已選擇的小寶石 ${gemData.id}]`;
+                        img.className = 'h-12 w-12 object-contain cursor-pointer';
+                        img.onclick = () => removeGemFromSelection(gemId);
+                        answerSlots.appendChild(img);
+                    }
+                }
+            });
+        }
+        
+        function resetPuzzle() {
+            playerSelection = {};
+            answerSlots.innerHTML = '';
+            puzzleFeedback.textContent = '';
+        }
+
+        function checkPuzzleAnswer() {
+            const level = puzzleLevels[currentStage];
+            if (!level) return;
+            const answer = level.answer;
+            let correct = true;
+
+            if (Object.keys(playerSelection).length !== Object.keys(answer).length) {
+                correct = false;
+            } else {
+                for (const gemId in answer) {
+                    if (playerSelection[gemId] !== answer[gemId]) {
+                        correct = false;
+                        break;
+                    }
+                }
+            }
+
+            if (correct) {
+                puzzleFeedback.textContent = '組合正確！你獲得了大寶石！';
+                puzzleFeedback.className = 'text-center text-xl font-bold min-h-[32px] mb-4 text-green-400';
+                setTimeout(() => {
+                    const nextStage = currentStage + 1;
+                    if (nextStage < puzzleLevels.length) {
+                         showScreen('intermission-screen');
+                    } else {
+                        showScreen('final-win-screen');
+                    }
+                }, 1500);
+            } else {
+                puzzleFeedback.textContent = '組合不對喔，再試一次！';
+                puzzleFeedback.className = 'text-center text-xl font-bold min-h-[32px] mb-4 text-red-500';
+            }
+        }
+
+        // --- 事件監聽 ---
+        startButton.addEventListener('click', () => {
+            showScreen('game-screen');
+            resizeCanvas();
+            instructionsScreen.classList.remove('hidden');
+        });
+
+        playGameButton.addEventListener('click', () => startGame(0));
+        restartButton.addEventListener('click', () => startGame(currentStage));
+        continueButton.addEventListener('click', showPuzzleScreen);
+        startNextStageButton.addEventListener('click', () => {
+            showScreen('game-screen');
+            startGame(currentStage + 1);
+        });
+        resetPuzzleButton.addEventListener('click', resetPuzzle);
+        checkPuzzleButton.addEventListener('click', checkPuzzleAnswer);
+        unlockSecretButton.addEventListener('click', () => {
+            container.style.display = 'none';
+            secretScreen.style.display = 'flex';
+        });
+
+        secretChoiceButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const choice = button.dataset.choice;
+                secretFeedback.classList.remove('text-yellow-400', 'text-green-400');
+                if (choice === 'C') {
+                    secretFeedback.textContent = '';
+                    secretQuestion.style.display = 'none';
+                    secretReveal.style.display = 'block';
+                } else if (choice === 'A') {
+                    secretFeedback.textContent = '駕駛技術固然重要，但那只是過程喔！';
+                    secretFeedback.classList.add('text-yellow-400');
+                } else {
+                    secretFeedback.textContent = '閃避只是手段，不是目的呀！';
+                    secretFeedback.classList.add('text-yellow-400');
+                }
+            });
+        });
+
+        window.addEventListener('resize', resizeCanvas);
+        
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') handleMove('left');
+            else if (e.key === 'ArrowRight') handleMove('right');
+
+            if (gameInterval) {
+                keySequence.push(e.key);
+                keySequence = keySequence.slice(-cheatCode.length);
+                if (keySequence.join('') === cheatCode) {
+                    winGame();
+                }
+            }
+        });
+
+        canvas.addEventListener('click', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const clickX = e.clientX - rect.left;
+            if (clickX < canvas.width / 2) handleMove('left');
+            else handleMove('right');
+        });
+        moveLeftButton.addEventListener('click', () => handleMove('left'));
+        moveRightButton.addEventListener('click', () => handleMove('right'));
+
+        // --- 初始啟動 ---
+        showScreen('start-screen');
+    });
+    </script>
+</body>
+</html>

example/harbor.html

@@ -0,0 +1,697 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島 - 海風港灣</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <!-- MathJax for rendering formulas -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            overflow: hidden;
+            background-image: url('https://i.meee.com.tw/TDC4EZE.png');
+            background-size: cover;
+            background-position: center;
+        }
+        #game-container-bg {
+             background-image: url('https://i.meee.com.tw/vT2QeZF.png');
+            background-size: cover;
+            background-position: center;
+        }
+        .seaweed {
+            position: absolute;
+            bottom: -10px;
+            pointer-events: none;
+            filter: brightness(0.9);
+        }
+        .fish {
+            position: absolute;
+            cursor: pointer;
+            transition: transform 0.2s ease, opacity 0.15s ease;
+        }
+        .fish:hover {
+            transform: scale(1.1);
+        }
+        .catch-feedback {
+            position: absolute;
+            font-size: 2rem;
+            font-weight: bold;
+            pointer-events: none;
+            animation: fadeUp 1s forwards;
+            text-shadow: 1px 1px 2px black;
+        }
+        @keyframes fadeUp {
+            from { opacity: 1; transform: translateY(0); }
+            to { opacity: 0; transform: translateY(-50px); }
+        }
+        .loader {
+            border: 8px solid #f3f3f3;
+            border-radius: 50%;
+            border-top: 8px solid #3498db;
+            width: 60px;
+            height: 60px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .market-choice.selected {
+            border-color: #facc15; /* yellow-400 */
+            box-shadow: 0 0 15px #facc15;
+        }
+        .secret-bg {
+             background-image: url('https://i.meee.com.tw/EKZpYKI.png');
+             background-size: cover;
+             background-position: center;
+        }
+    </style>
+</head>
+<body class="flex items-center justify-center h-screen">
+
+    <div id="container" class="w-full max-w-4xl mx-auto text-white p-4 flex flex-col h-[90vh] max-h-[800px] relative">
+
+        <!-- 引導畫面 -->
+        <div id="start-screen" class="flex flex-col items-center justify-center text-center p-8 bg-black bg-opacity-70 rounded-lg my-auto">
+            <h1 class="text-5xl font-bold text-cyan-300 mb-4" style="text-shadow: 2px 2px 4px #000;">海風港灣</h1>
+            <p class="text-xl text-gray-200 mb-8 max-w-2xl">歡迎來到海風港灣！這次的任務是捕捉指定的魚種，並到市場賣出。有了捕捉的技術，真正要賺大錢還得靠數學呢！請你在捕捉完漁獲後，根據市場需求，將漁獲賣到最適合的市場！</p>
+            <button id="start-button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-8 rounded-lg text-2xl">
+                開始抓魚
+            </button>
+        </div>
+        
+        <!-- 載入畫面 -->
+        <div id="loading-screen" class="hidden flex-col items-center justify-center text-center p-8 bg-black bg-opacity-70 rounded-lg my-auto">
+            <div class="loader mb-6"></div>
+            <p id="loading-text" class="text-2xl text-gray-200">正在準備海底世界...</p>
+        </div>
+
+        <!-- 遊戲畫面 -->
+        <div id="game-screen" class="hidden flex-col h-full w-full">
+            <div class="flex justify-between items-center p-2 bg-black/50 rounded-t-lg">
+                <div>
+                    <p class="text-lg">目標: <span id="goal-text" class="font-bold text-yellow-400"></span></p>
+                    <p class="text-lg">已捕捉: <span id="score" class="font-bold text-xl">0</span> / <span id="goal-count"></span></p>
+                </div>
+                 <p class="text-sm text-cyan-200">請適度捕撈，維持海洋永續</p>
+                <div>
+                    <p class="text-lg">時間</p>
+                    <p id="timer" class="font-bold text-3xl">20</p>
+                </div>
+            </div>
+            <div id="game-container-bg" class="relative flex-grow rounded-b-lg overflow-hidden border-4 border-black/50">
+                <div id="game-container" class="absolute inset-0">
+                    <img src="https://i.meee.com.tw/XE9mkQQ.gif" class="seaweed" style="left: 0%; height: 45%; transform: scaleX(-1);" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/cTBZUgx.gif" class="seaweed" style="left: 20%; height: 35%;" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/KyN2GaF.gif" class="seaweed" style="left: 45%; height: 30%;" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/XE9mkQQ.gif" class="seaweed" style="right: 25%; height: 48%;" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/cTBZUgx.gif" class="seaweed" style="right: 10%; height: 55%; transform: scaleX(-1);" alt="[海草的Image]">
+                    <img src="https://i.meee.com.tw/KyN2GaF.gif" class="seaweed" style="right: -2%; height: 38%;" alt="[海草的Image]">
+                </div>
+            </div>
+        </div>
+        
+        <!-- 疊加畫面 (操作說明, 成功/失敗) -->
+        <div id="overlay-container" class="hidden absolute inset-0 flex-col items-center justify-center z-10">
+             <div id="instructions-screen" class="hidden bg-black bg-opacity-80 w-full h-full flex-col items-center justify-center text-center p-4">
+                <div id="instructions-content" class="bg-slate-800 p-8 rounded-lg">
+                    <!-- JS will fill this -->
+                </div>
+            </div>
+            <div id="game-over-screen" class="hidden bg-black bg-opacity-70 w-full h-full flex-col items-center justify-center text-center p-4">
+                <h2 class="text-4xl font-bold text-red-500 mb-4">挑戰失敗！</h2>
+                <button id="restart-button" class="bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-3 px-6 rounded-lg text-xl">
+                    重新挑戰
+                </button>
+            </div>
+            <div id="win-screen" class="hidden bg-black bg-opacity-70 w-full h-full flex-col items-center justify-center text-center p-4">
+                <h2 class="text-4xl font-bold text-green-400 mb-4">成功！</h2>
+                <p class="text-xl mb-6">你抓到足夠的漁獲了！</p>
+                <button id="continue-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg text-xl">
+                    繼續前進
+                </button>
+            </div>
+        </div>
+
+        <!-- 市場選擇畫面 -->
+        <div id="market-screen" class="hidden flex-col h-full w-full p-6 bg-black bg-opacity-70 rounded-lg">
+            <div id="market-instructions" class="text-center my-auto">
+                 <h2 class="text-3xl font-bold text-amber-300 mb-6">任務說明：選擇市場</h2>
+                 <p class="text-lg">每個地點對<span class="market-fish-name text-yellow-300 font-bold"></span>的需求都不同，需求<span class="text-yellow-300 font-bold">比例</span>越高的市場，就能賣到越好的價格！</p>
+                 <p class="text-lg mt-2">仔細觀察下方的統計圖，找出最賺錢的市場吧！</p>
+                 <button id="show-market-choices-button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                    了解，前往選擇
+                </button>
+            </div>
+            <div id="market-choices" class="hidden flex-col">
+                <h2 class="text-3xl font-bold text-amber-300 text-center mb-4">你要把<span class="market-fish-name"></span>賣到哪裡？</h2>
+                <div id="market-images-container" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <!-- Market images will be inserted here by JS -->
+                </div>
+                <p id="market-feedback" class="text-center text-xl font-bold min-h-[32px] mt-4"></p>
+                <button id="next-level-button" class="hidden bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg text-xl w-full max-w-xs mx-auto mt-4">
+                    <!-- Button text will be set by JS -->
+                </button>
+            </div>
+        </div>
+        
+        <!-- 攻略畫面 -->
+        <div id="strategy-screen" class="hidden flex-col h-full w-full p-6 bg-black bg-opacity-80 rounded-lg text-left overflow-y-auto">
+            <h1 class="text-3xl font-bold text-amber-300 text-center mb-4">經營之神的攻略</h1>
+            <p class="text-lg mb-4">在真實世界中，不同地點的調查所收到的資料不一定會一樣多，總人數不一樣的時候，我們很難用肉眼就判斷出比例的高低，因此需要「相對次數」這樣的統計數據。</p>
+            <div class="text-center bg-gray-900 p-3 rounded-lg text-xl mb-4">
+                $$\text{相對次數} = \frac{\text{需求(人)}}{\text{總人數}} \times 100\%$$
+            </div>
+            <img src="https://i.meee.com.tw/i67LLqV.png" class="rounded-lg mx-auto my-4 w-full max-w-md" alt="[包含相對次數的統計圖表]">
+            <p class="text-lg mb-6 text-center">有了相對次數，會不會更好判斷呢？用下一關的挑戰來試試吧！</p>
+            <button id="start-final-stage-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl w-full max-w-xs mx-auto mt-4">
+                挑戰最終關卡
+            </button>
+        </div>
+
+        <!-- 最終秘密畫面 -->
+        <div id="final-secret-screen" class="hidden flex-col h-full w-full p-6 bg-black bg-opacity-80 rounded-lg text-left overflow-y-auto">
+            <h1 class="text-3xl font-bold text-amber-300 text-center mb-6">海風港灣的秘密</h1>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <img src="https://i.meee.com.tw/rmcY2Vc.png" class="rounded-lg border-4 border-amber-400" alt="[代數之丘的統計圖表]">
+                <img src="https://i.meee.com.tw/qV8QrUI.png" class="rounded-lg" alt="[哲學之塔的統計圖表]">
+                <img src="https://i.meee.com.tw/i67LLqV.png" class="rounded-lg" alt="[寶石洞窟的統計圖表]">
+            </div>
+            
+            <p class="text-lg mb-4">恭喜你，完成了所有挑戰！你學會了捕魚，也學會了如何分析數據來做出最好的商業決策。</p>
+            <p class="text-2xl font-bold text-cyan-300 mb-4">這個港灣的秘密就是：<br>「數字」本身有時候會騙人，「比例」才能揭露真相。</p>
+            <p class="text-lg mb-4">單看數字，哲學之塔似乎是更好的市場。但當你把「總人數」也考慮進來，計算出「相對次數」（也就是需求比例），你才會發現代數之丘的需求比例，是超過哲學之塔的。</p>
+            <p class="text-lg">這個智慧，不只適用於賣魚。未來在你看新聞、分析報告，甚至做人生重大決定時，記得問自己：「這個數字背後的『分母』是什麼？」看透比例，你就能做出更聰明的選擇。</p>
+            <a href="index.html" id="back-to-map-button" class="inline-block text-center bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-xl w-full max-w-xs mx-auto mt-8">
+                回到探險島地圖
+            </a>
+        </div>
+    </div>
+    
+    <!-- Image Zoom Modal -->
+    <div id="zoom-modal" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 cursor-pointer">
+        <img id="zoomed-image" src="" alt="放大的統計圖表" class="max-w-full max-h-full rounded-lg shadow-2xl">
+    </div>
+
+
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- 畫面元素 ---
+        const startScreen = document.getElementById('start-screen');
+        const loadingScreen = document.getElementById('loading-screen');
+        const loadingText = document.getElementById('loading-text');
+        const gameScreen = document.getElementById('game-screen');
+        const startButton = document.getElementById('start-button');
+        const gameContainer = document.getElementById('game-container');
+        const scoreDisplay = document.getElementById('score');
+        const timerDisplay = document.getElementById('timer');
+        const instructionsScreen = document.getElementById('instructions-screen');
+        const instructionsContent = document.getElementById('instructions-content');
+        const goalText = document.getElementById('goal-text');
+        const goalCount = document.getElementById('goal-count');
+        const overlayContainer = document.getElementById('overlay-container');
+        const gameOverScreen = document.getElementById('game-over-screen');
+        const winScreen = document.getElementById('win-screen');
+        const restartButton = document.getElementById('restart-button');
+        const continueButton = document.getElementById('continue-button');
+        const marketScreen = document.getElementById('market-screen');
+        const marketInstructions = document.getElementById('market-instructions');
+        const marketChoices = document.getElementById('market-choices');
+        const showMarketChoicesButton = document.getElementById('show-market-choices-button');
+        const marketImagesContainer = document.getElementById('market-images-container');
+        const marketFeedback = document.getElementById('market-feedback');
+        const nextLevelButton = document.getElementById('next-level-button');
+        const startFinalStageButton = document.getElementById('start-final-stage-button');
+        const finalSecretScreen = document.getElementById('final-secret-screen');
+        const zoomModal = document.getElementById('zoom-modal');
+        const zoomedImage = document.getElementById('zoomed-image');
+
+        // --- 遊戲設定 ---
+        const MAX_FISH_ON_SCREEN = 8;
+        let score = 0, timeLeft = 0;
+        let gameInterval, timerInterval, fishSpawnInterval;
+        let currentLevel = 0;
+        let currentLevelSettings;
+
+        const levels = [
+            { goal: 10, time: 20, targetFish: '小丑魚', speedMultiplier: 1.0, spawnRate: 1200, fishSet: ['小丑魚', '螃蟹'] },
+            { goal: 10, time: 20, targetFish: '水母', speedMultiplier: 1.5, spawnRate: 1000, fishSet: ['水母', '章魚'] },
+            { goal: 10, time: 20, targetFish: '水母', speedMultiplier: 1.8, spawnRate: 800, fishSet: ['水母', '鯊魚'] }
+        ];
+
+        const fishTypes = [
+            { name: '小丑魚', src: 'https://i.meee.com.tw/7tfldTT.gif', width: 160, height: 120 },
+            { name: '鯊魚', src: 'https://i.meee.com.tw/KCQk7C6.gif', width: 270, height: 270 },
+            { name: '章魚', src: 'https://i.meee.com.tw/lBWJmMy.gif', width: 160, height: 130 },
+            { name: '海馬', src: 'https://i.meee.com.tw/sMehyty.gif', width: 150, height: 150 },
+            { name: '螃蟹', src: 'https://i.meee.com.tw/zx9Vg0B.gif', width: 150, height: 110 },
+            { name: '水母', src: 'https://i.meee.com.tw/81gncdG.gif', width: 160, height: 160 },
+        ];
+        
+        const marketLevels = [
+            {
+                images: { A: 'https://i.meee.com.tw/jQ3A90u.png', B: 'https://i.meee.com.tw/HEx1GWE.png', C: 'https://i.meee.com.tw/199bHzA.png' },
+                correctAnswer: 'B',
+                feedback: { correct: "答對了！哲學之塔的需求比例最高，要賺大錢還是得靠數學，不能蠻幹阿！", wrong: "每個地點的調查人數都一樣多，需求數量越多，即表示需求比例越高！" }
+            },
+            {
+                // A: 代數之丘(左), B: 哲學之塔(中), C: 寶石洞窟(右)
+                images: { A: 'https://i.meee.com.tw/lTXgvxv.png', B: 'https://i.meee.com.tw/FKPNhKh.png', C: 'https://i.meee.com.tw/zdv5MtZ.png' },
+                correctAnswer: 'A', // 正確答案是代數之丘
+                feedback: {
+                    firstClick: {
+                        C: "你確定嗎？其他兩個地方的需求人數比較多喔！若是確定請再點選一次",
+                        B: "你確定嗎？雖然哲學之塔的需求人數最多，但他的總人數也最多喔！你確定他是比例最高的嗎？",
+                        A: "你確定嗎？哲學之塔的需求人數比較多喔！"
+                    },
+                    correct: "你做出了正確的決定！但到底是運氣好，還是數學好呢，如果是運氣好的話，可沒有辦法長久經營阿~",
+                    wrong: "商品買賣，不是越多人買越賺錢，不是喔！因為你長期的決策錯誤，導致買賣虧損，最後造成店家倒閉..."
+                }
+            },
+            {
+                // A: 代數之丘, B: 哲學之塔, C: 寶石洞窟
+                images: { A: 'https://i.meee.com.tw/rmcY2Vc.png', B: 'https://i.meee.com.tw/qV8QrUI.png', C: 'https://i.meee.com.tw/i67LLqV.png' },
+                correctAnswer: 'A', // 正確答案是代數之丘
+                feedback: { correct: "有了相對次數這項統計數據，是不是就更容易做選擇了呢~", wrong: "再仔細看看，哪個市場的需求比例最高呢？" }
+            }
+        ];
+        let firstChoice = null;
+        const fishesOnScreen = [];
+
+        // --- 畫面管理 ---
+        function showScreen(screenId) {
+            ['start-screen', 'game-screen', 'market-screen', 'loading-screen', 'strategy-screen', 'final-secret-screen'].forEach(id => {
+                document.getElementById(id).style.display = (id === screenId) ? 'flex' : 'none';
+            });
+        }
+        
+        function showOverlay(overlayId) {
+            overlayContainer.style.display = 'flex';
+            ['instructions-screen', 'game-over-screen', 'win-screen'].forEach(id => {
+                document.getElementById(id).style.display = (id === overlayId) ? 'flex' : 'none';
+            });
+        }
+
+        function hideOverlay() {
+            overlayContainer.style.display = 'none';
+        }
+        
+        // --- 預載入函式 ---
+        function preloadImages(urls, onProgress) {
+            return new Promise((resolve) => {
+                let loadedCount = 0;
+                const totalImages = urls.length;
+                if (totalImages === 0) resolve();
+                urls.forEach(url => {
+                    const img = new Image();
+                    img.src = url;
+                    const onFinish = () => {
+                        loadedCount++;
+                        onProgress(loadedCount, totalImages);
+                        if (loadedCount === totalImages) resolve();
+                    };
+                    img.onload = onFinish;
+                    img.onerror = () => { console.error(`圖片載入失敗: ${url}`); onFinish(); };
+                });
+            });
+        }
+
+        function startGame(levelIndex) {
+            currentLevel = levelIndex;
+            currentLevelSettings = levels[currentLevel];
+            score = 0;
+            timeLeft = currentLevelSettings.time;
+            updateUI();
+            
+            fishesOnScreen.forEach(fish => fish.element.remove());
+            fishesOnScreen.length = 0;
+
+            fishSpawnInterval = setInterval(spawnFish, currentLevelSettings.spawnRate); 
+            
+            timerInterval = setInterval(() => {
+                timeLeft--;
+                updateUI();
+                if (timeLeft <= 0) endGame(false);
+            }, 1000);
+
+            gameInterval = setInterval(updateGame, 1000 / 60);
+        }
+
+        function spawnFish() {
+            if (fishesOnScreen.length >= MAX_FISH_ON_SCREEN) return;
+
+            let fishData;
+            const fishSet = currentLevelSettings.fishSet.map(name => fishTypes.find(f => f.name === name));
+            const targetFish = fishSet.find(f => f.name === currentLevelSettings.targetFish);
+            const otherFish = fishSet.filter(f => f.name !== currentLevelSettings.targetFish);
+            
+            const activeDistractor = otherFish.length > 0 ? otherFish[0] : targetFish;
+
+            if (Math.random() < 0.75) { 
+                fishData = targetFish; 
+            } else {
+                fishData = activeDistractor;
+            }
+
+            const fishElement = document.createElement('img');
+            fishElement.src = fishData.src;
+            fishElement.className = 'fish';
+            
+            const direction = Math.random() < 0.5 ? 'left' : 'right';
+            const speed = (Math.random() * 2 + 1.5) * currentLevelSettings.speedMultiplier;
+            const startY = Math.random() * (gameContainer.clientHeight - fishData.height);
+
+            fishElement.style.width = `${fishData.width}px`;
+            fishElement.style.height = `${fishData.height}px`;
+            fishElement.style.top = `${startY}px`;
+
+            if (direction === 'left') {
+                fishElement.style.left = `${gameContainer.clientWidth}px`;
+                fishElement.style.transform = 'scaleX(-1)';
+            } else {
+                fishElement.style.left = `-${fishData.width}px`;
+            }
+
+            const fishObject = { element: fishElement, data: fishData, speed, direction, vy: (Math.random() - 0.5) * 2, lastVyChange: Date.now() };
+            
+            if (currentLevel === 2 && fishData.name === '水母') {
+                fishObject.health = 2;
+            } else {
+                fishObject.health = 1;
+            }
+
+            fishElement.onclick = () => catchFish(fishObject);
+            fishesOnScreen.push(fishObject);
+            gameContainer.appendChild(fishObject.element);
+        }
+
+        function updateGame() {
+            for (let i = fishesOnScreen.length - 1; i >= 0; i--) {
+                const fish = fishesOnScreen[i];
+                let currentX = parseFloat(fish.element.style.left);
+                let currentY = parseFloat(fish.element.style.top);
+
+                if (fish.direction === 'left') {
+                    currentX -= fish.speed;
+                    if (currentX < -fish.data.width) {
+                        fish.element.remove();
+                        fishesOnScreen.splice(i, 1);
+                        continue;
+                    }
+                } else {
+                    currentX += fish.speed;
+                    if (currentX > gameContainer.clientWidth) {
+                        fish.element.remove();
+                        fishesOnScreen.splice(i, 1);
+                        continue;
+                    }
+                }
+                fish.element.style.left = `${currentX}px`;
+
+                if (currentLevel > 0) {
+                    if (Date.now() - fish.lastVyChange > 1000) {
+                        fish.vy = (Math.random() - 0.5) * 6;
+                        fish.lastVyChange = Date.now();
+                    }
+                    currentY += fish.vy;
+                    if (currentY < 0 || currentY > gameContainer.clientHeight - fish.data.height) {
+                        fish.vy *= -1;
+                    }
+                    fish.element.style.top = `${currentY}px`;
+                }
+            }
+        }
+
+        function catchFish(fishObject) {
+            fishObject.health--;
+
+            if (fishObject.health > 0) {
+                showCatchFeedback('!', fishObject.element, false);
+                fishObject.element.style.opacity = '0.5';
+                setTimeout(() => {
+                    if (fishObject.element) {
+                         fishObject.element.style.opacity = '1';
+                    }
+                }, 150);
+                return;
+            }
+
+            if (fishObject.data.name === currentLevelSettings.targetFish) {
+                score++;
+                showCatchFeedback('+1', fishObject.element, true);
+            } else {
+                score = Math.max(0, score - 1);
+                showCatchFeedback('-1', fishObject.element, false);
+            }
+            
+            fishObject.element.remove();
+            const index = fishesOnScreen.indexOf(fishObject);
+            if (index > -1) fishesOnScreen.splice(index, 1);
+            updateUI();
+            if (score >= currentLevelSettings.goal) endGame(true);
+        }
+        
+        function showCatchFeedback(text, fishElement, isCorrect) {
+            const feedback = document.createElement('div');
+            feedback.className = 'catch-feedback';
+            feedback.textContent = text;
+            feedback.style.color = isCorrect ? '#4ade80' : '#f87171';
+            const rect = fishElement.getBoundingClientRect();
+            const containerRect = gameContainer.getBoundingClientRect();
+            feedback.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
+            feedback.style.top = `${rect.top - containerRect.top + rect.height / 2}px`;
+            gameContainer.appendChild(feedback);
+            setTimeout(() => feedback.remove(), 1000);
+        }
+
+        function updateUI() {
+            scoreDisplay.textContent = score;
+            timerDisplay.textContent = timeLeft;
+        }
+
+        function endGame(isWin) {
+            clearInterval(gameInterval);
+            clearInterval(timerInterval);
+            clearInterval(fishSpawnInterval);
+            gameInterval = timerInterval = fishSpawnInterval = null;
+            
+            if (isWin) {
+                showOverlay('win-screen');
+            } else {
+                showOverlay('game-over-screen');
+            }
+        }
+
+        function setupMarketScreen() {
+            const marketLevel = marketLevels[currentLevel];
+            document.querySelectorAll('.market-fish-name').forEach(el => el.textContent = levels[currentLevel].targetFish);
+            marketImagesContainer.innerHTML = '';
+            
+            const marketOrder = ['A', 'B', 'C'];
+            marketOrder.forEach(key => {
+                const src = marketLevel.images[key];
+
+                const choiceContainer = document.createElement('div');
+                choiceContainer.className = 'market-choice relative p-2 rounded-lg border-4 border-transparent cursor-pointer transition-all duration-200';
+                choiceContainer.dataset.market = key;
+
+                const img = document.createElement('img');
+                img.src = src;
+                img.alt = `[統計圖表]`;
+                img.className = 'w-full h-auto rounded-lg shadow-lg'; 
+                
+                const zoomIcon = document.createElement('button');
+                zoomIcon.className = 'absolute top-2 right-2 bg-black/50 p-2 rounded-full text-white hover:bg-black/80 transition-colors z-10';
+                zoomIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8zm8-3a1 1 0 011 1v2h2a1 1 0 110 2h-2v2a1 1 0 11-2 0v-2H5a1 1 0 110-2h2V6a1 1 0 011-1z" clip-rule="evenodd" /></svg>`;
+                zoomIcon.onclick = (e) => {
+                    e.stopPropagation(); 
+                    showEnlargedImage(src);
+                };
+
+                choiceContainer.appendChild(img);
+                choiceContainer.appendChild(zoomIcon);
+
+                choiceContainer.addEventListener('click', handleMarketChoice);
+                marketImagesContainer.appendChild(choiceContainer);
+            });
+
+            marketFeedback.textContent = '';
+            nextLevelButton.classList.add('hidden');
+            firstChoice = null;
+        }
+
+        function handleMarketChoice(e) {
+            const choiceContainer = e.target.closest('.market-choice');
+            if (!choiceContainer) return;
+            const choice = choiceContainer.dataset.market;
+            const marketLevel = marketLevels[currentLevel];
+
+            document.querySelectorAll('.market-choice').forEach(div => div.classList.remove('selected'));
+            
+            if (currentLevel === 0) {
+                if (choice === marketLevel.correctAnswer) {
+                    choiceContainer.classList.add('selected');
+                    marketFeedback.textContent = marketLevel.feedback.correct;
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
+                    nextLevelButton.textContent = "前往第二關";
+                    nextLevelButton.classList.remove('hidden');
+                } else {
+                    marketFeedback.textContent = marketLevel.feedback.wrong;
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-yellow-400';
+                }
+            } else if (currentLevel === 1) {
+                if (firstChoice === choice) {
+                    if (choice === marketLevel.correctAnswer) {
+                        choiceContainer.classList.add('selected');
+                        marketFeedback.textContent = marketLevel.feedback.correct;
+                        marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
+                        nextLevelButton.textContent = "經營之神的攻略";
+                        nextLevelButton.classList.remove('hidden');
+                    } else {
+                        marketFeedback.textContent = marketLevel.feedback.wrong;
+                        marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-red-500';
+                    }
+                    firstChoice = null;
+                } else {
+                    firstChoice = choice;
+                    choiceContainer.classList.add('selected');
+                    marketFeedback.textContent = marketLevel.feedback.firstClick[choice];
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-cyan-300';
+                }
+            } else if (currentLevel === 2) {
+                 if (choice === marketLevel.correctAnswer) {
+                    choiceContainer.classList.add('selected');
+                    marketFeedback.textContent = marketLevel.feedback.correct;
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
+                    nextLevelButton.textContent = "查看海風港灣的秘密";
+                    nextLevelButton.classList.remove('hidden');
+                } else {
+                    marketFeedback.textContent = marketLevel.feedback.wrong;
+                    marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-red-500';
+                }
+            }
+        }
+        
+        function showEnlargedImage(src) {
+            zoomedImage.src = src;
+            zoomModal.classList.remove('hidden');
+        }
+
+        function hideEnlargedImage() {
+            zoomModal.classList.add('hidden');
+            zoomedImage.src = '';
+        }
+
+
+        // --- 事件監聽 ---
+        startButton.addEventListener('click', async () => {
+             showScreen('loading-screen');
+             const imageUrls = [
+                ...fishTypes.map(fish => fish.src),
+                ...Object.values(marketLevels[0].images),
+                ...Object.values(marketLevels[1].images),
+                ...Object.values(marketLevels[2].images),
+                'https://i.meee.com.tw/i67LLqV.png'
+             ];
+             await preloadImages(imageUrls, (loaded, total) => {
+                loadingText.textContent = `正在準備海底世界... (${loaded}/${total})`;
+             });
+             
+             showScreen('game-screen');
+             instructionsContent.innerHTML = `
+                <h2 class="text-3xl font-bold text-amber-300 mb-6">第一關任務</h2>
+                <div class="space-y-4 text-lg">
+                    <p>在 <span class="text-yellow-400 font-bold">${levels[0].time}</span> 秒內，捕捉 <span class="text-yellow-400 font-bold">${levels[0].goal}</span> 隻${levels[0].targetFish}！</p>
+                    <p>點擊<span class="text-green-400 font-bold">正確的魚</span>來加分。</p>
+                    <p>注意！抓到<span class="text-red-400 font-bold">錯誤的魚</span>會扣分喔！</p>
+                </div>
+                <button id="play-game-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                    了解！
+                </button>`;
+            document.getElementById('play-game-button').onclick = () => { hideOverlay(); startGame(0); };
+            showOverlay('instructions-screen');
+            goalText.textContent = `抓 ${levels[0].goal} 隻${levels[0].targetFish}`;
+            goalCount.textContent = levels[0].goal;
+        });
+        
+        restartButton.addEventListener('click', () => {
+            hideOverlay();
+            startGame(currentLevel);
+        });
+        
+        continueButton.addEventListener('click', () => {
+            hideOverlay();
+            showScreen('market-screen');
+            // FIX: Update the fish name immediately when showing the market screen instructions.
+            document.querySelectorAll('.market-fish-name').forEach(el => el.textContent = levels[currentLevel].targetFish);
+            marketInstructions.style.display = 'block';
+            marketChoices.style.display = 'none';
+        });
+
+        showMarketChoicesButton.addEventListener('click', () => {
+            marketInstructions.style.display = 'none';
+            marketChoices.style.display = 'flex';
+            setupMarketScreen();
+        });
+        
+        nextLevelButton.addEventListener('click', () => {
+            if (currentLevel === 0) {
+                const nextLevel = currentLevel + 1;
+                const levelSettings = levels[nextLevel];
+                showScreen('game-screen');
+                instructionsContent.innerHTML = `
+                    <h2 class="text-3xl font-bold text-amber-300 mb-6">第 ${nextLevel + 1} 關任務</h2>
+                    <div class="space-y-4 text-lg">
+                        <p>在 <span class="text-yellow-400 font-bold">${levelSettings.time}</span> 秒內，捕捉 <span class="text-yellow-400 font-bold">${levelSettings.goal}</span> 隻${levelSettings.targetFish}！</p>
+                        <p>海洋生物的移動方式不一樣了，小心！</p>
+                    </div>
+                    <button id="play-next-level-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                        挑戰！
+                    </button>`;
+                document.getElementById('play-next-level-button').onclick = () => { hideOverlay(); startGame(nextLevel); };
+                showOverlay('instructions-screen');
+                goalText.textContent = `抓 ${levelSettings.goal} 隻${levelSettings.targetFish}`;
+                goalCount.textContent = levelSettings.goal;
+            } else if (currentLevel === 1) {
+                showScreen('strategy-screen');
+            } else if (currentLevel === 2) {
+                showScreen('final-secret-screen');
+            }
+        });
+
+        startFinalStageButton.addEventListener('click', () => {
+            const nextLevel = currentLevel + 1;
+            const levelSettings = levels[nextLevel];
+            showScreen('game-screen');
+            instructionsContent.innerHTML = `
+                <h2 class="text-3xl font-bold text-amber-300 mb-6">最終挑戰！</h2>
+                <div class="space-y-4 text-lg">
+                    <p>在 <span class="text-yellow-400 font-bold">${levelSettings.time}</span> 秒內，捕捉 <span class="text-yellow-400 font-bold">${levelSettings.goal}</span> 隻${levelSettings.targetFish}！</p>
+                    <p class="text-cyan-300">注意！這次的${levelSettings.targetFish}比較頑強，需要點擊兩下才能捕捉！</p>
+                </div>
+                <button id="play-final-level-button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-xl mt-8">
+                    挑戰！
+                </button>`;
+            document.getElementById('play-final-level-button').onclick = () => { hideOverlay(); startGame(nextLevel); };
+            showOverlay('instructions-screen');
+            goalText.textContent = `抓 ${levelSettings.goal} 隻${levelSettings.targetFish}`;
+            goalCount.textContent = levelSettings.goal;
+        });
+
+        zoomModal.addEventListener('click', () => {
+            hideEnlargedImage();
+        });
+
+        // --- 初始啟動 ---
+        showScreen('start-screen');
+    });
+    </script>
+</body>
+</html>

example/index.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-color: #333;
+            overflow: hidden;
+            /* 隱藏滾動條 */
+        }
+
+        #map-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background-image: url('https://i.meee.com.tw/emt8qds.png');
+            background-size: cover;
+            /* 填滿整個容器 */
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        .main-title {
+            position: relative;
+            /* 確保標題在最上層 */
+            z-index: 20;
+            animation: fadeOutTitle 5s forwards;
+            animation-delay: 2s;
+            /* 2秒後開始淡出 */
+        }
+
+        @keyframes fadeOutTitle {
+            0% {
+                opacity: 1;
+            }
+
+            100% {
+                opacity: 0;
+                pointer-events: none;
+            }
+        }
+
+        .location-link {
+            position: absolute;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+            cursor: pointer;
+            z-index: 10;
+        }
+
+        .location-link::before {
+            content: '';
+            position: absolute;
+            width: 80px;
+            /* 縮小光圈的尺寸 */
+            height: 80px;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            transform: scale(0);
+            /* 預設隱藏 */
+            opacity: 0;
+        }
+
+        .location-link:hover::before {
+            transform: scale(1);
+            /* 滑鼠移入時顯示 */
+            opacity: 1;
+            background-color: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 20px 7px rgba(255, 235, 59, 0.6);
+        }
+
+        .location-link .label {
+            opacity: 0;
+            color: white;
+            font-size: 1.5rem;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+            transition: opacity 0.3s ease;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 0.5rem 1rem;
+            border-radius: 999px;
+            position: relative;
+            /* 確保文字在光圈之上 */
+            z-index: 5;
+        }
+
+        .location-link:hover .label {
+            opacity: 1;
+        }
+
+        /* 最終調整後的地點位置 */
+        #algebra-hill {
+            top: 28%;
+            left: 88%;
+            width: 25%;
+            height: 35%;
+        }
+
+        #philosophy-tower {
+            top: 35%;
+            left: 37%;
+            width: 22%;
+            height: 40%;
+        }
+
+        #gemstone-cave {
+            top: 58%;
+            left: 88%;
+            width: 20%;
+            height: 25%;
+        }
+
+        #harbor-bay {
+            top: 75%;
+            left: 25%;
+            width: 35%;
+            height: 35%;
+        }
+
+        /* 風的痕跡 SVG 樣式 */
+        #footprints-svg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            /* 讓 SVG 不會擋到滑鼠點擊 */
+            z-index: 5;
+        }
+
+        .footprint-path {
+            stroke: rgba(255, 255, 255, 0.4);
+            stroke-width: 2.5px;
+            fill: none;
+            stroke-linecap: round;
+            stroke-dasharray: 150 400;
+            /* 150px長的痕跡, 400px的間隔 */
+            stroke-dashoffset: 550;
+            animation: flow 15s linear infinite;
+        }
+
+        /* 讓每個路徑的動畫錯開，看起來更自然 */
+        .footprint-path:nth-child(2) {
+            animation-delay: -3s;
+        }
+
+        .footprint-path:nth-child(3) {
+            animation-delay: -7s;
+        }
+
+        .footprint-path:nth-child(4) {
+            animation-delay: -10s;
+        }
+
+        @keyframes flow {
+            from {
+                stroke-dashoffset: 550;
+                /* 從路徑外開始 */
+            }
+
+            to {
+                stroke-dashoffset: -550;
+                /* 移動到路徑的另一端外 */
+            }
+        }
+
+        /* 載入畫面樣式 */
+        #loading-screen {
+            position: absolute;
+            inset: 0;
+            z-index: 99;
+            background-color: #1a202c;
+            transition: opacity 0.5s ease-out;
+        }
+
+        .loader {
+            border: 8px solid #f3f3f3;
+            border-top: 8px solid #3498db;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-gray-900 flex items-center justify-center min-h-screen p-4">
+
+    <!-- 載入畫面 -->
+    <div id="loading-screen" class="w-full h-full flex flex-col items-center justify-center">
+        <div class="loader"></div>
+        <p class="text-white text-xl mt-4">地圖載入中...</p>
+    </div>
+
+    <!-- 主內容 (預設隱藏) -->
+    <div id="main-content" class="opacity-0 transition-opacity duration-500">
+        <div id="map-container">
+            <!-- 動態痕跡 SVG -->
+            <svg id="footprints-svg" viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid meet">
+                <!-- 重新設計的、更不規則的曲線路徑 -->
+                <path class="footprint-path" d="M600 900 C 500 880, 350 800, 300 675" />
+                <path class="footprint-path" d="M600 900 C 600 700, 380 550, 444 315" />
+                <path class="footprint-path" d="M600 900 C 750 850, 950 700, 1056 522" />
+                <path class="footprint-path" d="M600 900 C 700 750, 980 500, 1056 252" />
+            </svg>
+
+            <!-- 地點連結 -->
+            <a id="algebra-hill" href="algebra.html" class="location-link">
+                <span class="label">代數之丘</span>
+            </a>
+            <a id="philosophy-tower" href="philosophy.html" class="location-link">
+                <span class="label">哲學之塔</span>
+            </a>
+            <a id="gemstone-cave" href="gemstone.html" class="location-link">
+                <span class="label">寶石洞窟</span>
+            </a>
+            <a id="harbor-bay" href="harbor.html" class="location-link">
+                <span class="label">海風港灣</span>
+            </a>
+        </div>
+
+        <h1 class="main-title text-4xl md:text-5xl font-bold text-white text-center"
+            style="text-shadow: 3px 3px 5px rgba(0,0,0,0.5);">歡迎來到數學探險島</h1>
+
+        <!-- 設計者資訊 -->
+        <div class="absolute bottom-4 right-4 text-right text-white text-sm opacity-80 z-10"
+            style="text-shadow: 1px 1px 3px rgba(0,0,0,0.7);">
+            <p>遊戲設計者：新竹縣精華國中藍星宇</p>
+            <p>FB教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank"
+                    class="underline hover:text-yellow-300 transition-colors">萬物皆數</a></p>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // ... existing image load code ...
+        });
+
+        // Load Function Game Score for Gemstone Cave (寶石洞窟)
+        // Assuming Gemstone Cave is the Energy Core / Function game
+        const scoreFunc = localStorage.getItem('math_city_score_function');
+        if (scoreFunc) {
+            const gemstoneLabel = document.querySelector('#gemstone-cave .label');
+            if (gemstoneLabel) {
+                // Add score display
+                const scoreDiv = document.createElement('div');
+                scoreDiv.className = 'text-xs text-amber-300 text-center mt-1 font-mono tracking-widest';
+                scoreDiv.innerText = `BEST: ${scoreFunc}`;
+                gemstoneLabel.appendChild(scoreDiv);
+
+                // Adjust layout to handle multiline
+                gemstoneLabel.style.flexDirection = 'column';
+                gemstoneLabel.style.display = 'flex';
+                gemstoneLabel.style.alignItems = 'center';
+            }
+        }
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const loadingScreen = document.getElementById('loading-screen');
+            const mainContent = document.getElementById('main-content');
+            const imageUrl = 'https://i.meee.com.tw/emt8qds.png';
+
+            const image = new Image();
+            image.src = imageUrl;
+
+            image.onload = () => {
+                // 圖片載入完成後，淡出載入畫面
+                loadingScreen.style.opacity = '0';
+
+                // 淡入主內容
+                mainContent.style.opacity = '1';
+
+                // 在淡出動畫結束後，徹底隱藏載入畫面
+                setTimeout(() => {
+                    loadingScreen.style.display = 'none';
+                }, 500); // 需與 transition duration 匹配
+            };
+
+            image.onerror = () => {
+                // 如果圖片載入失敗，也顯示主內容，避免卡住
+                console.error('背景圖片載入失敗！');
+                loadingScreen.style.opacity = '0';
+                mainContent.style.opacity = '1';
+                setTimeout(() => {
+                    loadingScreen.style.display = 'none';
+                }, 500);
+            }
+        });
+    </script>
+</body>
+
+</html>

example/philosophy.html

@@ -0,0 +1,431 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>數學探險島 - 哲學之塔</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-image: url('https://i.meee.com.tw/wCWCOGx.png');
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+        }
+        .tower-bg {
+            background-image: url('https://www.transparenttextures.com/patterns/stone-wall.png');
+            background-color: #e2e8f0;
+        }
+        /* 自訂拉桿樣式 */
+        input[type=range] {
+            -webkit-appearance: none;
+            width: 100%;
+            background: transparent;
+        }
+        input[type=range]:focus {
+            outline: none;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 12px;
+            cursor: pointer;
+            background: #93c5fd;
+            border-radius: 5px;
+            border: 1px solid #60a5fa;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            border: 2px solid #3b82f6;
+            height: 30px;
+            width: 30px;
+            border-radius: 50%;
+            background: #eff6ff;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -10px;
+        }
+        /* 成功時的閃爍動畫 */
+        @keyframes flash {
+            0%, 100% { box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.7); }
+            50% { box-shadow: 0 0 5px 0px rgba(34, 197, 94, 0.2); }
+        }
+        .success-flash {
+            animation: flash 1.5s ease-in-out;
+        }
+        /* 測驗選項樣式 */
+        .quiz-option {
+            display: block;
+            padding: 0.75rem 1rem;
+            border: 2px solid #e5e7eb;
+            border-radius: 0.5rem;
+            margin-bottom: 0.5rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .quiz-option:hover {
+            background-color: #f3f4f6;
+        }
+        input[type="radio"]:checked + .quiz-option {
+            background-color: #dbeafe;
+            border-color: #60a5fa;
+        }
+        .question-container.incorrect {
+            border: 2px solid #ef4444;
+            border-radius: 0.75rem;
+            padding: 1rem;
+            background-color: #fee2e2;
+        }
+    </style>
+</head>
+<body class="flex items-center justify-center min-h-screen p-4">
+
+    <div id="main-container" class="container mx-auto max-w-5xl">
+        
+        <!-- 故事引導畫面 -->
+        <div id="story-view" class="bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8 text-center">
+            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-6">前情提要：西帕索斯的悲劇</h1>
+            <div class="border rounded-lg shadow-inner bg-gray-100 p-12 flex flex-col items-center justify-center" style="height: 50vh;">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-indigo-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v11.494m-9-5.747h18" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v11.494m-9-5.747h18" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 18h16" />
+                </svg>
+                <p class="text-xl text-gray-600">故事即將展開...</p>
+                <p class="mt-4 text-lg text-indigo-600 font-semibold">點擊下方按鈕，在新分頁閱讀故事前情提要！</p>
+            </div>
+            <p class="mt-8 text-gray-600 font-semibold">閱讀完故事後，請回來按下開始挑戰</p>
+            <a href="https://g.co/gemini/share/d181055c5aa2" target="_blank" id="story-link-button" class="mt-2 inline-block w-full md:w-auto bg-blue-500 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-600 transition-colors shadow-lg text-lg">
+                閱讀故事
+            </a>
+            <button id="start-quiz-button" class="mt-4 w-full md:w-auto bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg text-lg">
+                開始挑戰！
+            </button>
+        </div>
+
+        <!-- 閱讀測驗畫面 (新增) -->
+        <div id="quiz-view" class="hidden bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8">
+            <h1 class="text-3xl font-bold text-gray-800 text-center mb-6">閱讀測驗：西帕索斯的考驗</h1>
+            <div class="space-y-6 text-left">
+                <!-- 問題 1 -->
+                <div id="question-container-0" class="question-container">
+                    <p class="font-semibold mb-2">1. 根據故事內容，西帕索斯為什麼被畢達哥拉斯囚禁在哲學之塔？</p>
+                    <div class="space-y-2">
+                        <label><input type="radio" name="q0" value="A" class="hidden"> <span class="quiz-option">(A) 因為他試圖偷取畢達哥拉斯的數學理論。</span></label>
+                        <label><input type="radio" name="q0" value="B" class="hidden"> <span class="quiz-option">(B) 因為他在公開場合侮辱了畢達哥拉斯本人。</span></label>
+                        <label><input type="radio" name="q0" value="C" class="hidden"> <span class="quiz-option">(C) 因為他發現了一個無法用分數或小數表示的數字，這與畢達哥拉斯學派的信念相衝突。</span></label>
+                        <label><input type="radio" name="q0" value="D" class="hidden"> <span class="quiz-option">(D) 因為他沒能成功計算出一個正方形的面積。</span></label>
+                    </div>
+                </div>
+                <!-- 問題 2 -->
+                <div id="question-container-1" class="question-container">
+                    <p class="font-semibold mb-2">2. 故事中，那個動搖了畢達哥拉斯學派信念的「神秘數字」，最初是源自於什麼？</p>
+                    <div class="space-y-2">
+                        <label><input type="radio" name="q1" value="A" class="hidden"> <span class="quiz-option">(A) 一個面積為3的圓形半徑。</span></label>
+                        <label><input type="radio" name="q1" value="B" class="hidden"> <span class="quiz-option">(B) 一個面積為2的正方形邊長。</span></label>
+                        <label><input type="radio" name="q1" value="C" class="hidden"> <span class="quiz-option">(C) 一個從未有人見過的全新立體圖形。</span></label>
+                        <label><input type="radio" name="q1" value="D" class="hidden"> <span class="quiz-option">(D) 一個畢達哥拉斯自己提出的數學謎題。</span></label>
+                    </div>
+                </div>
+                <!-- 問題 3 -->
+                <div id="question-container-2" class="question-container">
+                    <p class="font-semibold mb-2">3. 在故事的結尾，你（讀者）被賦予的主要任務是什麼？</p>
+                    <div class="space-y-2">
+                        <label><input type="radio" name="q2" value="A" class="hidden"> <span class="quiz-option">(A) 找到一把萬能鑰匙，趁半夜把西帕索斯從監獄裡救出來。</span></label>
+                        <label><input type="radio" name="q2" value="B" class="hidden"> <span class="quiz-option">(B) 回到未來，尋找歷史文獻來證明西帕索斯是對的。</span></label>
+                        <label><input type="radio" name="q2" value="C" class="hidden"> <span class="quiz-option">(C) 成為畢達哥拉斯的學徒，從內部瓦解他的學派。</span></label>
+                        <label><input type="radio" name="q2" value="D" class="hidden"> <span class="quiz-option">(D) 找出幾個「神秘數字」的近似值，用具體的證據去說服畢達哥拉斯。</span></label>
+                    </div>
+                </div>
+            </div>
+            <div id="quiz-feedback" class="text-center font-semibold mt-6 min-h-[24px]"></div>
+            <div class="flex flex-col md:flex-row gap-4 mt-6">
+                <button id="reread-story-button" class="w-full md:w-1/2 bg-gray-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-gray-600 transition-colors">再看一次故事</button>
+                <button id="submit-quiz-button" class="w-full md:w-1/2 bg-green-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-green-600 transition-colors">提交答案</button>
+            </div>
+        </div>
+
+        <!-- 遊戲畫面 (預設隱藏) -->
+        <div id="game-view" class="hidden bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8 tower-bg">
+            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-2">哲學之塔</h1>
+            <p class="text-center text-gray-600 mb-6">幫助被囚禁的西帕索斯，找出正方形的神秘邊長！</p>
+            
+            <div class="grid md:grid-cols-2 gap-8 items-center">
+                <!-- 左側：正方形展示區 -->
+                <div class="flex flex-col items-center justify-center bg-white/70 p-6 rounded-lg shadow-inner">
+                    <div id="square-display" class="w-48 h-48 bg-blue-300 border-4 border-blue-500 flex items-center justify-center relative transition-transform duration-500">
+                        <p class="text-2xl font-bold text-white">面積 = <span id="target-area-text">2</span></p>
+                    </div>
+                    <p class="mt-4 text-2xl font-mono text-gray-700">邊長 = <span id="target-sqrt-text">√2</span></p>
+                </div>
+                
+                <!-- 右側：互動操作區 -->
+                <div class="flex flex-col space-y-6">
+                    <div class="bg-white/80 p-4 rounded-lg text-center">
+                        <p class="text-lg">你的猜測邊長 <span id="guess-sqrt-text" class="font-mono">√2</span> ≒ <span id="current-value" class="font-bold text-2xl text-indigo-600">1.50</span></p>
+                        <p class="text-lg">邊長的平方(正方形面積)：<span id="current-squared-value" class="font-bold text-2xl text-red-500">2.25</span></p>
+                    </div>
+                    
+                    <input type="range" id="value-slider" min="1" max="2" value="1.5" step="0.01" class="w-full">
+                    
+                    <button id="check-button" class="w-full bg-green-500 text-white font-bold py-3 px-4 rounded-lg hover:bg-green-600 transition-colors shadow-md text-xl">
+                        確定答案
+                    </button>
+                    
+                    <div id="feedback-box" class="text-center text-xl font-semibold min-h-[32px]"></div>
+                    <button id="next-level-button" class="w-full bg-indigo-500 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-600 transition-colors shadow-md text-xl hidden">
+                        挑戰下一關
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 生活應用畫面 (預設隱藏) -->
+        <div id="application-view" class="hidden bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-green-600 mb-4 text-center">恭喜你，成功解救了西帕索斯！</h1>
+            <p class="text-lg text-gray-700 mb-8 text-center">你們玩遊戲的時候，有沒有想過，為什麼角色撞到怪物就會扣血？為什麼子彈會正好打到你？這不是靠神奇的第六感，是靠數學──而且關鍵數學招式就是平方根！</p>
+            
+            <div class="bg-blue-50 p-6 rounded-lg text-left">
+                <h2 class="text-2xl font-bold text-indigo-600 mb-4 text-center">🎮 遊戲物理引擎裡的平方根魔法</h2>
+                <div class="space-y-6">
+                    <div>
+                        <h3 class="font-semibold text-xl mb-2">判斷「有沒有撞到」</h3>
+                        <p>遊戲世界是由座標組成的（就像地圖上的 X、Y 點）。當角色和怪物在不同位置，遊戲必須算兩者的距離，來判斷是不是近到可以碰撞。</p>
+                        <p class="mt-2 p-3 bg-gray-200 rounded-md text-center font-mono text-lg">距離 = √((x₁ - x₂)² + (y₁ - y₂)²)</p>
+                        <p class="mt-2">最後那個開根號，就是讓距離變回「真實長度」。沒有平方根，遊戲根本不知道你到底是不是碰到牆、怪物、寶箱。</p>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-xl mb-2">算出移動的真速度</h3>
+                        <p>在 3D 遊戲中，速度不只有一個方向。例如你同時向前（X 軸）+ 向右（Y 軸）移動，總速度不是單純相加，而是：</p>
+                        <p class="mt-2 p-3 bg-gray-200 rounded-md text-center font-mono text-lg">總速度 = √(水平速度² + 垂直速度²)</p>
+                        <p class="mt-2">這樣遊戲才能正確決定動畫快慢、物理反應強度。</p>
+                    </div>
+                     <div>
+                        <h3 class="font-semibold text-xl mb-2">模擬「真實的碰撞反應」</h3>
+                        <p>角色被怪物推一下，會往斜方向飛。遊戲會算推力向量的大小（也就是「合力長度」）來決定你飛多遠，這裡也要平方根。</p>
+                    </div>
+                </div>
+                <div class="mt-6 pt-6 border-t">
+                     <p class="text-xl text-center"><span class="font-bold">💡 簡單比喻：</span>「平方根在遊戲引擎裡，就像一把『距離測量尺』，沒有它，遊戲世界就不知道東西有多近、有多快，甚至不會知道你到底撞到沒。」</p>
+                </div>
+            </div>
+            
+             <div class="mt-12 text-center">
+                <a href="index.html" class="inline-block w-full md:w-1/2 bg-indigo-600 text-white font-bold py-3 md:py-4 px-6 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg text-lg md:text-xl">
+                    回到探險島地圖
+                </a>
+            </div>
+        </div>
+
+    </div>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- 關���設定 ---
+        const levels = [
+            { target: 2, min: 1, max: 2, tolerance: 0.05, type: 'manual' },
+            { target: 3, min: 1, max: 2, tolerance: 0.05, type: 'auto', speed: 0.007 },
+            { target: 5, min: 2, max: 3, tolerance: 0.05, type: 'auto', speed: 0.011 }
+        ];
+        let currentLevel = 0;
+
+        const quizQuestions = [
+            { answer: 'C' },
+            { answer: 'B' },
+            { answer: 'D' }
+        ];
+
+        // --- DOM 元素 ---
+        const storyView = document.getElementById('story-view');
+        const startQuizButton = document.getElementById('start-quiz-button');
+        const quizView = document.getElementById('quiz-view');
+        const submitQuizButton = document.getElementById('submit-quiz-button');
+        const rereadStoryButton = document.getElementById('reread-story-button');
+        const quizFeedback = document.getElementById('quiz-feedback');
+        const gameView = document.getElementById('game-view');
+        const applicationView = document.getElementById('application-view');
+        const squareDisplay = document.getElementById('square-display');
+        const targetAreaText = document.getElementById('target-area-text');
+        const targetSqrtText = document.getElementById('target-sqrt-text');
+        const guessSqrtText = document.getElementById('guess-sqrt-text');
+        const currentValue = document.getElementById('current-value');
+        const currentSquaredValue = document.getElementById('current-squared-value');
+        const valueSlider = document.getElementById('value-slider');
+        const checkButton = document.getElementById('check-button');
+        const feedbackBox = document.getElementById('feedback-box');
+        const nextLevelButton = document.getElementById('next-level-button');
+
+        // --- 遊戲狀態 ---
+        let sliderAnimationId = null;
+        let sliderDirection = 1;
+
+        // --- 核心函式 ---
+        function initLevel(levelIndex) {
+            const level = levels[levelIndex];
+            
+            if (sliderAnimationId) {
+                cancelAnimationFrame(sliderAnimationId);
+                sliderAnimationId = null;
+            }
+
+            targetAreaText.textContent = level.target;
+            targetSqrtText.innerHTML = `√${level.target}`;
+            guessSqrtText.innerHTML = `√${level.target}`;
+            
+            valueSlider.min = level.min;
+            valueSlider.max = level.max;
+            valueSlider.value = (level.min + level.max) / 2;
+            valueSlider.step = 0.01;
+            
+            updateSliderDisplay();
+            feedbackBox.textContent = '';
+            feedbackBox.className = 'text-center text-xl font-semibold min-h-[32px]';
+            checkButton.disabled = false;
+            nextLevelButton.classList.add('hidden');
+            squareDisplay.classList.remove('success-flash');
+
+            if (level.type === 'manual') {
+                valueSlider.style.pointerEvents = 'auto';
+                checkButton.textContent = '確定答案';
+            } else {
+                valueSlider.style.pointerEvents = 'none';
+                checkButton.textContent = '按下鎖定！';
+                sliderDirection = 1;
+                startSliderAnimation();
+            }
+
+            if (levelIndex === levels.length - 1) {
+                nextLevelButton.textContent = '查看生活應用';
+            } else {
+                nextLevelButton.textContent = '挑戰下一關';
+            }
+        }
+
+        function startSliderAnimation() {
+            const level = levels[currentLevel];
+            let val = parseFloat(valueSlider.value);
+            val += sliderDirection * level.speed;
+            if (val >= level.max || val <= level.min) {
+                sliderDirection *= -1;
+                val = Math.max(level.min, Math.min(level.max, val));
+            }
+            valueSlider.value = val;
+            updateSliderDisplay();
+            sliderAnimationId = requestAnimationFrame(startSliderAnimation);
+        }
+
+        function updateSliderDisplay() {
+            const val = parseFloat(valueSlider.value);
+            const squaredVal = val * val;
+            currentValue.textContent = val.toFixed(2);
+            currentSquaredValue.textContent = squaredVal.toFixed(2);
+        }
+
+        function checkAnswer() {
+            const level = levels[currentLevel];
+
+            if (level.type === 'auto' && sliderAnimationId) {
+                cancelAnimationFrame(sliderAnimationId);
+                sliderAnimationId = null;
+            }
+            
+            checkButton.disabled = true;
+
+            const val = parseFloat(valueSlider.value);
+            const squaredVal = val * val;
+            const difference = Math.abs(squaredVal - level.target);
+            feedbackBox.textContent = '';
+
+            if (difference <= level.tolerance) {
+                feedbackBox.textContent = '太棒了！你找到了！';
+                feedbackBox.className = 'text-center text-xl font-semibold text-green-600';
+                nextLevelButton.classList.remove('hidden');
+                squareDisplay.classList.add('success-flash');
+            } else {
+                const hint = squaredVal < level.target ? '太小了' : '太大了';
+                feedbackBox.textContent = `喔喔！${hint}，再試一次！`;
+                feedbackBox.className = 'text-center text-xl font-semibold text-red-600';
+                
+                if (level.type === 'auto') {
+                    setTimeout(() => {
+                        initLevel(currentLevel);
+                    }, 2000);
+                } else {
+                    checkButton.disabled = false;
+                }
+            }
+        }
+
+        function loadNext() {
+            currentLevel++;
+            if (currentLevel < levels.length) {
+                initLevel(currentLevel);
+            } else {
+                gameView.classList.add('hidden');
+                applicationView.classList.remove('hidden');
+            }
+        }
+
+        function checkQuiz() {
+            let allCorrect = true;
+            quizFeedback.textContent = '';
+            quizFeedback.classList.remove('text-red-500', 'text-green-600');
+            
+            quizQuestions.forEach((question, index) => {
+                const container = document.getElementById(`question-container-${index}`);
+                const selected = document.querySelector(`input[name="q${index}"]:checked`);
+                
+                container.classList.remove('incorrect');
+
+                if (!selected || selected.value !== question.answer) {
+                    allCorrect = false;
+                    container.classList.add('incorrect');
+                }
+            });
+
+            if (allCorrect) {
+                quizFeedback.textContent = '太棒了！你很用心在看故事喔！';
+                quizFeedback.classList.add('text-green-600');
+                submitQuizButton.disabled = true;
+                rereadStoryButton.disabled = true;
+                setTimeout(() => {
+                    quizView.classList.add('hidden');
+                    gameView.classList.remove('hidden');
+                }, 2000);
+            } else {
+                quizFeedback.textContent = '有題目答錯了，再檢查看看或重讀一次故事吧！';
+                quizFeedback.classList.add('text-red-500');
+            }
+        }
+
+        // --- 事件監聽 ---
+        startQuizButton.addEventListener('click', () => {
+            storyView.classList.add('hidden');
+            quizView.classList.remove('hidden');
+            submitQuizButton.disabled = false;
+            rereadStoryButton.disabled = false;
+            quizFeedback.textContent = '';
+            quizQuestions.forEach((_, index) => {
+                 document.getElementById(`question-container-${index}`).classList.remove('incorrect');
+            });
+        });
+
+        rereadStoryButton.addEventListener('click', () => {
+            quizView.classList.add('hidden');
+            storyView.classList.remove('hidden');
+        });
+
+        submitQuizButton.addEventListener('click', checkQuiz);
+        valueSlider.addEventListener('input', updateSliderDisplay);
+        checkButton.addEventListener('click', checkAnswer);
+        nextLevelButton.addEventListener('click', loadNext);
+
+        // --- 初始啟動 ---
+        initLevel(currentLevel);
+    });
+    </script>
+</body>
+</html>
+

function.html

@@ -17,9 +17,16 @@
     <script src="https://cdn.tailwindcss.com"></script>
 
     <style>
+        :root {
+            --glass-bg: rgba(8, 51, 68, 0.85);
+            /* Dark Cyan */
+            --glass-border: rgba(6, 182, 212, 0.3);
+            /* Cyan Border */
+        }
+
         body {
             font-family: 'Noto Sans TC', sans-serif;
-            background-color: #0f172a;
+            background-color: #051015;
             /* Slate 900 */
             color: white;
             overflow: hidden;
@@ -42,7 +49,7 @@
             width: 100vw;
             height: 100vh;
             height: 100dvh;
-            background: rgba(15, 23, 42, 0.6);
+            background: rgba(5, 16, 21, 0.6);
             /* Semi-transparent Slate 900 */
             z-index: -1;
         }
@@ -67,11 +74,12 @@
 
         /* Tech UI Styling */
         .glass-panel {
-            background: rgba(15, 23, 42, 0.95);
+            background: var(--glass-bg);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
-            border: 1px solid rgba(56, 189, 248, 0.3);
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(56, 189, 248, 0.05);
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
         }
 
         .font-tech {
@@ -1642,7 +1650,7 @@
             const time = Date.now() / 1000;
 
             // Clear with dark blue tint
-            ctx.fillStyle = '#050b14';
+            ctx.fillStyle = '#051015';
             ctx.fillRect(0, 0, width, height);
 
             // Rotating Grid
@@ -1959,7 +1967,7 @@
             const gy = isDesktop ? height * 0.2 : height * 0.1;
 
             // BG - Darker background for graph area to make it pop against the global image
-            ctx.fillStyle = 'rgba(15, 23, 42, 0.85)';
+            ctx.fillStyle = 'rgba(5, 16, 21, 0.85)';
             ctx.fillRect(gx, gy, gw, gh);
             ctx.strokeStyle = '#475569';
             ctx.strokeRect(gx, gy, gw, gh);

index.html

@@ -268,7 +268,8 @@
         </div>
 
         <!-- Pin 3: Congruence District (Bottom-Right) -->
-        <div id="pin-congruence" class="map-pin group opacity-75" onclick="alert('🔒 區域封鎖：請先完成前置任務')">
+        <div id="pin-congruence" class="map-pin group"
+            onclick="triggerBeamNavigation(this, 'congruence_detective.html')">
             <div class="pin-marker border-fuchsia-500 group-hover:scale-110"></div>
             <div class="pin-label border-fuchsia-500 text-fuchsia-400">
                 <div class="font-bold text-xl">全等重案組</div>
@@ -277,11 +278,11 @@
         </div>
 
         <!-- Pin 4: Skyscraper (Top-Right-ish) -->
-        <div id="pin-parallel" class="map-pin group opacity-75" onclick="alert('🚧 施工中：摩天大樓')">
+        <div id="pin-parallel" class="map-pin group" onclick="window.location.href='skyscraper.html'">
             <div class="pin-marker border-green-500 group-hover:scale-110"></div>
             <div class="pin-label border-green-500 text-green-400">
-                <div class="font-bold text-xl">摩天大樓</div>
-                <div class="text-xs text-white opacity-80">Parallel Skyline</div>
+                <div class="font-bold text-xl">鋼鐵輸送帶</div>
+                <div class="text-xs text-white opacity-80">Steel Conveyor</div>
             </div>
         </div>
 
@@ -379,6 +380,8 @@
 
             updatePin('#pin-function', 'math_city_score_function');
             updatePin('#pin-sequence', 'math_city_score_sequence');
+            updatePin('#pin-congruence', 'math_city_score_congruence');
+            updatePin('#pin-parallel', 'math_city_score_parallel');
         }
         loadScores();
 
@@ -387,6 +390,8 @@
             if (confirm('確定要重置所有分數與獎盃嗎？\nAre you sure you want to reset all scores?')) {
                 localStorage.removeItem('math_city_score_function');
                 localStorage.removeItem('math_city_score_sequence');
+                localStorage.removeItem('math_city_score_congruence');
+                localStorage.removeItem('math_city_score_parallel');
                 location.reload();
             }
         };

skills.md

@@ -0,0 +1,100 @@
+# Skills & Best Practices - Math City Project
+
+此文件記錄本專案開發過程中的技術規範、設計模式、教學設計哲學與除錯經驗，供後續開發參考。
+
+## 1. 技術架構與規範 (Tech Stack & Guidelines)
+
+### 核心技術
+*   **核心**: HTML5 Canvas + Vanilla JS (ES6+)。
+*   **樣式**: Tailwind CSS (CDN read-only 模式) + Custom CSS (for animations/glassmorphism)。
+*   **字體**: 'Orbitron' (數字符號/標題), 'Noto Sans TC' (中文內文)。
+*   **建置**: 無須 Build Tool (No Webpack/Vite)，保持單檔可執行 (`.html`)，方便老師分享與部署。
+
+### 程式碼規範
+*   **語言**: 註解與文件說明嚴格使用**繁體中文**，變數與函數名稱使用**英文**。
+*   **檔案結構**: 保持扁平，html 檔包含 CSS/JS 為主 (方便單檔攜帶)，通用素材放 `Assets/`。
+*   **狀態管理**: 使用整數常數定義狀態機 (`const STATE = { INIT: 0, PLAYING: 1 ... }`)，避免字串混淆。
+
+## 2. 視覺與互動設計 (UI/UX Patterns)
+
+### 視覺風格：Glassmorphism (玻璃擬態)
+*   背景使用 `backdrop-filter: blur(12px)` 搭配半透明深色背景 (`bg-slate-900/90`)。
+*   邊框使用亮色且低透明度 (`border-cyan-500/30`) 營造科技質感。
+*   善用 `box-shadow` 與 `drop-shadow` 營造霓虹發光效果。
+
+### Canvas 渲染優化
+*   **High-DPI 支援**: 
+    *   在 Retina 螢幕上，務必處理 `devicePixelRatio`。
+    *   Canvas 屬性寬高 = CSS 寬高 * dpr。
+    *   Context 縮放: `ctx.scale(dpr, dpr)`。
+    ```javascript
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = width + 'px';
+    canvas.style.height = height + 'px';
+    ctx.scale(dpr, dpr);
+    ```
+
+### 行動裝置適配 (Mobile Adaptation)
+*   **禁止捲動/縮放**:
+    *   CSS: `touch-action: none; user-select: none; -webkit-user-select: none;`
+    *   JS: 監聽 `touchstart` / `touchmove` 並執行 `e.preventDefault()` (需加 `{ passive: false }`)。
+*   **虛擬鍵盤 (Virtual Keypad)**:
+    *   iOS/Android 預設軟鍵盤會推擠版面，破壞全螢幕體驗。
+    *   **解決方案**: 自製 DOM 虛擬鍵盤，支援拖曳 (Draggable) 與自動定位。
+    *   **點擊穿透處理**: 鍵盤點擊事件需 `e.stopPropagation()`。
+
+## 3. 遊戲邏輯與物理 (Game Mechanics)
+
+### 物理引擎 (Physics)
+*   **Coyote Time (土狼時間)**:
+    *   在玩家離開平台的一小段時間內 (例如 0.13秒) 仍允許跳躍，增加操作手感容錯率。
+    *   實作: 設置 `coyoteTimer`，只要在地上就重置，離地後遞減，大於 0 時仍視為可跳躍。
+*   **時間步長 (Time Step)**:
+    *   目前使用簡易的 `requestAnimationFrame` 迴圈。若需更精準物理，考慮導入 Delta Time (`dt`)。
+
+### 遊戲反饋 (Juice & Feedback)
+*   **動畫選擇**: 
+    *   錯誤提示避免使用滑稽的 `bounce`，改用嚴肅且有質感的 `pulse` (呼吸燈) + 紅色邊框。
+*   **音效合成 (Web Audio API)**:
+    *   不依賴外部 mp3 檔案，使用 `OscillatorNode` 即時合成音效 (Sine, Square, Sawtooth)。
+    *   優點：無載入時間、檔案極小、可動態改變頻率 (Pitch Bend)。
+    *   **注意**: 必須使用者互動 (Click/Touch) 後才能 `resume()` AudioContext。
+
+## 4. 數學教學設計 (Pedagogy Design)
+
+### 鷹架理論 (Scaffolding)
+*   **不僅僅是給答案**: 錯誤訊息應轉化為引導問題。
+    *   *Bad*: "答錯了！"
+    *   *Good*: "如果 x=2, y=11, 但公式是 y=2x+b, 所以 b 是多少？"
+*   **變數分離**: 
+    *   在解 $y=ax+b$ 時，先令 $x=0$ 解 $b$，再令 $x=1$ 解 $a$，避免同時處理雙變數的認知負荷。
+
+### 視覺化連結 (Visual-Algebra Connection)
+*   **多重表徵連結**: 當計算出代數答案 (例如 y=35) 時，程式應同步強調圖表上的對應幾何點 (10, 35)，強化「數形合一」的概念。
+
+### 正向回饋 (Positive Feedback)
+*   避免挫折感，將艱澀的計算任務後的獎勵極大化 (例如：華麗的煙火、Phase 6 的節奏遊戲)，讓大腦獲得多巴胺釋放。
+
+## 5. Agent 開發工作流 (Agent Workflow)
+
+### 任務邊界 (Task Boundary)
+*   使用 `task_boundary` 明確區分 **PLANNING** (規劃)、**EXECUTION** (執行) 與 **VERIFICATION** (驗證) 階段。
+*   **Context Management**: 保持對話專注，一個 Task 解決一個具體問題。
+
+### Artifacts 使用
+*   **Implementation Plan**: 修改複雜邏輯前，先撰寫 `implementation_plan.md` 讓使用者確認設計思路。
+*   **Walkthrough**: 完成功能後，建立 `walkthrough.md` 展示成果與測試截圖。
+
+## 6. 已知問題與解決 (Troubleshooting Log)
+
+*   **問題**: 平台消失後的透明牆導致玩家卡住。
+    *   **解法**: 物理碰撞檢測時，需過濾掉 `active: false` 的平台物件。
+*   **問���**: Home 鍵在全螢幕模式下難以點擊。
+    *   **解法**: 確保 UI 層級 (`z-index`) 正確，並添加 `pointer-events-auto` 到按鈕本身，而容器保持 `pointer-events-none`。
+*   **問題**: 數列峽谷中，只有前兩項有提示，後續太難。
+    *   **解法**: 設計意圖就是強制計算。但為了公平，統一了所有平台的視覺 (碎石紋理)，避免玩家嘗試「辨色」而非「計算」。
+
+---
+*Created by Antigravity Team for Project 11402*

skyscraper.html

@@ -0,0 +1,1005 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>鋼鐵輸送帶 - Steel Conveyor</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Noto+Sans+TC:wght@400;700;900&family=JetBrains+Mono:wght@400;700&display=swap"
+        rel="stylesheet">
+    <style>
+        :root {
+            --main: #22c55e;
+            --accent: #f97316;
+            --cyan: #06b6d4;
+            --amber: #fbbf24;
+            --fail: #ef4444;
+            --bg: #071a0e;
+            --glass: rgba(7, 26, 14, .88);
+            --glass-b: rgba(34, 197, 94, .2)
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box
+        }
+
+        .hidden {
+            display: none !important
+        }
+
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background: var(--bg);
+            color: #fff;
+            overflow: hidden;
+            touch-action: none;
+            user-select: none;
+            -webkit-user-select: none;
+            width: 100vw;
+            height: 100dvh
+        }
+
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+            cursor: crosshair
+        }
+
+        .glass {
+            background: var(--glass);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid var(--glass-b);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, .5)
+        }
+
+        .ft {
+            font-family: 'Orbitron', sans-serif
+        }
+
+        .fm {
+            font-family: 'JetBrains Mono', monospace
+        }
+
+        .glow {
+            text-shadow: 0 0 8px rgba(34, 197, 94, .6)
+        }
+
+        .lbl {
+            font-size: 11px;
+            color: var(--cyan);
+            text-transform: uppercase;
+            letter-spacing: 1.5px;
+            font-family: 'JetBrains Mono', monospace
+        }
+
+        #hud {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            padding: 12px 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            pointer-events: none;
+            z-index: 20
+        }
+
+        #hud>* {
+            pointer-events: auto
+        }
+
+        .hud-box {
+            padding: 10px 14px;
+            border-radius: 12px;
+            min-width: 100px
+        }
+
+        #bottom-panel {
+            position: absolute;
+            bottom: 16px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 92%;
+            max-width: 520px;
+            z-index: 30
+        }
+
+        .abtn {
+            width: 100%;
+            padding: 14px 24px;
+            border: none;
+            border-radius: 14px;
+            font-family: 'Orbitron';
+            font-size: 16px;
+            font-weight: 700;
+            letter-spacing: 2px;
+            cursor: pointer;
+            transition: all .2s;
+            color: #fff
+        }
+
+        .abtn:active {
+            transform: scale(.96)
+        }
+
+        .abtn:disabled {
+            opacity: .4;
+            cursor: not-allowed
+        }
+
+        .btn-go {
+            background: linear-gradient(135deg, #22c55e, #16a34a);
+            box-shadow: 0 4px 20px rgba(34, 197, 94, .35)
+        }
+
+        .btn-go:hover:not(:disabled) {
+            box-shadow: 0 6px 30px rgba(34, 197, 94, .5);
+            transform: translateY(-1px)
+        }
+
+        .btn-p,
+        .btn-np {
+            flex: 1;
+            padding: 14px 16px;
+            border: none;
+            border-radius: 14px;
+            font-family: 'Orbitron';
+            font-size: 14px;
+            font-weight: 700;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: all .2s;
+            color: #fff
+        }
+
+        .btn-p:active,
+        .btn-np:active {
+            transform: scale(.96)
+        }
+
+        .btn-p {
+            background: linear-gradient(135deg, #22c55e, #16a34a);
+            box-shadow: 0 4px 16px rgba(34, 197, 94, .3)
+        }
+
+        .btn-np {
+            background: linear-gradient(135deg, #ef4444, #dc2626);
+            box-shadow: 0 4px 16px rgba(239, 68, 68, .3)
+        }
+
+        .toast {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: 16px 32px;
+            border-radius: 16px;
+            font-size: 18px;
+            font-weight: 700;
+            pointer-events: none;
+            z-index: 100;
+            animation: ti .3s ease, to .4s 1.2s ease forwards
+        }
+
+        @keyframes ti {
+            from {
+                opacity: 0;
+                transform: translate(-50%, -50%) scale(.7)
+            }
+
+            to {
+                opacity: 1;
+                transform: translate(-50%, -50%) scale(1)
+            }
+        }
+
+        @keyframes to {
+            to {
+                opacity: 0;
+                transform: translate(-50%, -60%) scale(.9)
+            }
+        }
+
+        .tok {
+            background: rgba(34, 197, 94, .2);
+            border: 2px solid #22c55e;
+            color: #86efac;
+            text-shadow: 0 0 12px rgba(34, 197, 94, .5)
+        }
+
+        .tng {
+            background: rgba(239, 68, 68, .2);
+            border: 2px solid #ef4444;
+            color: #fca5a5;
+            text-shadow: 0 0 12px rgba(239, 68, 68, .5)
+        }
+
+        .ov {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 50;
+            padding: 24px;
+            text-align: center
+        }
+
+        #start-screen {
+            background: radial-gradient(ellipse at center, rgba(7, 26, 14, .94), #071a0e)
+        }
+
+        #brief-screen {
+            background: radial-gradient(ellipse at center, rgba(7, 26, 14, .94), #071a0e)
+        }
+
+        #gameover-screen {
+            background: rgba(0, 0, 0, .92)
+        }
+
+        #summary-screen {
+            background: rgba(0, 0, 0, .92);
+            overflow-y: auto
+        }
+
+        #hint-panel {
+            position: absolute;
+            top: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            max-width: 440px;
+            width: 90%;
+            z-index: 25;
+            pointer-events: none;
+            transition: opacity .4s
+        }
+
+        /* Tutorial/Phase modal — centered with flex on parent */
+        #tut-modal {
+            position: fixed;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 80;
+            background: rgba(0, 0, 0, .65)
+        }
+
+        #tut-modal .tut-box {
+            background: linear-gradient(160deg, #0c1e2e, #0a1628);
+            border: 1.5px solid rgba(99, 179, 237, .35);
+            border-radius: 20px;
+            padding: 32px 28px;
+            max-width: 420px;
+            width: 90%;
+            text-align: center;
+            box-shadow: 0 0 50px rgba(99, 179, 237, .12), 0 20px 40px rgba(0, 0, 0, .5);
+            animation: modalIn .35s ease
+        }
+
+        @keyframes modalIn {
+            from {
+                opacity: 0;
+                transform: scale(.85) translateY(20px)
+            }
+
+            to {
+                opacity: 1;
+                transform: scale(1) translateY(0)
+            }
+        }
+
+        /* Timer bar */
+        #timer-bar {
+            position: absolute;
+            top: 64px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 70%;
+            max-width: 500px;
+            height: 8px;
+            background: rgba(255, 255, 255, .08);
+            border-radius: 4px;
+            z-index: 22;
+            overflow: hidden
+        }
+
+        #timer-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #22c55e, #4ade80);
+            border-radius: 4px;
+            transition: width .15s linear
+        }
+
+        @media(max-width:640px) {
+            .hud-box {
+                padding: 8px 10px;
+                min-width: 80px
+            }
+
+            .hud-box .ft {
+                font-size: 18px !important
+            }
+
+            .abtn {
+                font-size: 14px;
+                padding: 12px 16px
+            }
+
+            #hint-panel {
+                top: 64px
+            }
+
+            #summary-screen div[style*="grid-template-columns"] {
+                grid-template-columns: 1fr !important;
+            }
+
+            #summary-screen div[style*="grid-column:span 2"] {
+                grid-column: span 1 !important;
+            }
+        }
+
+        .back-btn {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            z-index: 60;
+            background: rgba(255, 255, 255, .08);
+            border: 1px solid rgba(255, 255, 255, .15);
+            color: #94a3b8;
+            padding: 8px 14px;
+            border-radius: 8px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all .2s
+        }
+
+        .back-btn:hover {
+            background: rgba(255, 255, 255, .14);
+            color: #fff
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="gameCanvas"></canvas>
+    <div id="hud" class="hidden">
+        <div class="glass hud-box">
+            <div class="lbl" id="hud-lbl">鋼材運送</div>
+            <div><span id="score-d" class="ft glow" style="font-size:22px;color:var(--main)">0</span><span
+                    id="score-unit" style="font-size:12px;color:#64748b"> 噸</span></div>
+        </div>
+        <div class="glass hud-box" style="text-align:center">
+            <div class="lbl" id="phase-lbl">教學</div><span id="level-d" class="ft glow"
+                style="font-size:18px;color:var(--cyan)">1/2</span>
+        </div>
+        <div class="glass hud-box" id="combo-box">
+            <div class="lbl">連續</div><span id="combo-d" class="ft glow"
+                style="font-size:22px;color:var(--amber)">0</span>
+        </div>
+    </div>
+    <div id="timer-bar" class="hidden">
+        <div id="timer-fill" style="width:100%"></div>
+    </div>
+    <div id="hint-panel" class="hidden">
+        <div class="glass" style="padding:12px 18px;border-radius:14px;border-left:3px solid var(--cyan)">
+            <div
+                style="font-size:12px;color:var(--cyan);font-weight:700;font-family:'Orbitron';letter-spacing:1px;margin-bottom:4px">
+                MISSION HINT</div>
+            <p id="hint-text" style="font-size:15px;color:#e2e8f0;line-height:1.5"></p>
+        </div>
+    </div>
+    <div id="bottom-panel" class="hidden">
+        <div id="draw-ctl">
+            <div class="glass" style="padding:16px;border-radius:16px;margin-bottom:8px">
+                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">
+                    <span class="lbl">指定垂直距離</span>
+                    <span id="tgt-d" class="fm" style="font-size:20px;font-weight:700;color:var(--accent)">d = 60</span>
+                </div>
+                <div style="font-size:13px;color:#94a3b8">調整邊 B 的角度，讓右邊的垂直距離也等於 d</div>
+            </div>
+            <button id="btn-confirm" class="abtn btn-go" onclick="game.checkAnswer()">⚡ 確認輸送帶 CONFIRM</button>
+        </div>
+        <div id="judge-ctl" class="hidden">
+            <div class="glass" style="padding:16px;border-radius:16px;margin-bottom:8px">
+                <div style="font-size:14px;color:#e2e8f0;line-height:1.6;text-align:center">觀察各測量點的<span
+                        style="color:var(--cyan);font-weight:700">垂直距離</span>，<br>判斷這條輸送帶的兩邊是否<span
+                        style="color:var(--main);font-weight:700">平行</span>？</div>
+            </div>
+            <div style="display:flex;gap:10px">
+                <button class="btn-p" onclick="game.judgeAnswer(true)">✓ 平行</button>
+                <button class="btn-np" onclick="game.judgeAnswer(false)">✗ 不平行</button>
+            </div>
+        </div>
+    </div>
+    <div id="start-screen" class="ov">
+        <div style="margin-bottom:32px">
+            <div style="font-size:96px;margin-bottom:12px">🏗️</div>
+            <h1 style="font-size:clamp(32px,7vw,52px);font-weight:900;color:#fff;line-height:1.2;margin-bottom:6px">
+                鋼鐵輸送帶</h1>
+            <p class="ft" style="font-size:clamp(14px,3vw,20px);color:var(--cyan);letter-spacing:4px;margin-top:4px">
+                STEEL CONVEYOR</p>
+        </div>
+        <button class="abtn btn-go" onclick="game.showBrief()"
+            style="max-width:280px;font-size:18px;padding:16px">查看任務簡報 →</button>
+    </div>
+    <div id="brief-screen" class="ov hidden">
+        <div class="glass"
+            style="padding:32px;border-radius:18px;max-width:520px;width:100%;text-align:left;margin-bottom:28px;border-color:rgba(6,182,212,.2)">
+            <h3
+                style="color:var(--cyan);font-weight:700;font-size:18px;letter-spacing:2px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;margin-bottom:18px;font-family:'Orbitron'">
+                ● 任務簡報 MISSION BRIEF</h3>
+            <p style="color:#cbd5e1;font-size:20px;line-height:1.9;margin-bottom:20px">工程師，兩棟摩天大樓之間需要搭建<span
+                    style="color:var(--accent);font-weight:700">輸送帶</span>來運送 H 型鋼材。輸送帶的兩條邊必須<span
+                    style="color:#fff;font-weight:700">確定平行</span>，鋼材才能安全通過。</p>
+            <ul style="color:#cbd5e1;font-size:18px;line-height:2.2;list-style:none;padding:0">
+                <li style="display:flex;align-items:flex-start;gap:10px"><span
+                        style="color:var(--main)">➤</span><span>利用「<span
+                            style="color:#fff;font-weight:700">平行線間垂直距離處處相等</span>」的原理來搭建輸送帶</span></li>
+                <li style="display:flex;align-items:flex-start;gap:10px;margin-top:8px"><span
+                        style="color:var(--accent)">➤</span><span>有時需要<span
+                            style="color:var(--main)">繪製</span>第二條邊，有時需要<span
+                            style="color:var(--amber)">判斷</span>是否平行，必須確定平行才能讓鋼材通過！</span></li>
+            </ul>
+        </div>
+        <button class="abtn btn-go" onclick="game.start()" style="max-width:280px;font-size:18px;padding:16px">開始搭建
+            START</button>
+    </div>
+    <!-- Tutorial / Phase complete modal -->
+    <div id="tut-modal" class="hidden">
+        <div class="tut-box">
+            <div id="tut-icon" style="font-size:40px;margin-bottom:10px">✅</div>
+            <h3 id="tut-title" style="font-size:22px;font-weight:900;color:#93c5fd;margin-bottom:10px">教學完成！</h3>
+            <p id="tut-msg"
+                style="font-size:17px;color:#cbd5e1;line-height:1.7;margin-bottom:24px;white-space:pre-line">垂直距離處處相等 =
+                平行</p>
+            <button id="tut-btn" class="abtn"
+                style="background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 20px rgba(59,130,246,.3);max-width:260px;margin:0 auto"
+                onclick="game.tutNext()">確認，繼續 →</button>
+        </div>
+    </div>
+    <!-- Summary screen after challenge -->
+    <div id="summary-screen" class="ov hidden"
+        style="justify-content:flex-start;padding-top:32px;padding-bottom:40px;align-items:stretch">
+        <!-- Header -->
+        <div style="text-align:center;margin-bottom:20px;padding:0 24px">
+            <div style="font-size:48px;margin-bottom:6px">🏆</div>
+            <h2
+                style="font-size:clamp(22px,5vw,32px);font-weight:900;margin-bottom:2px;background:linear-gradient(135deg,#fbbf24,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
+                任務總結 REPORT</h2>
+            <p style="color:#94a3b8;font-size:12px;letter-spacing:3px;font-family:'Orbitron'">MISSION SUMMARY</p>
+        </div>
+
+        <!-- 60s Challenge + Best Record — side by side, compact -->
+        <div
+            style="display:flex;gap:16px;justify-content:center;align-items:stretch;margin-bottom:20px;padding:0 24px;flex-wrap:wrap;max-width:900px;width:100%;margin-left:auto;margin-right:auto">
+            <div class="glass"
+                style="padding:16px 24px;border-radius:14px;flex:1;min-width:180px;max-width:300px;text-align:center">
+                <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px">
+                    <span style="font-size:20px">⏱️</span>
+                    <span style="color:#94a3b8;font-size:14px;font-weight:700">60 秒挑戰</span>
+                </div>
+                <div class="ft" style="font-size:36px;font-weight:900;color:var(--amber)">
+                    <span id="sum-challenge">—</span>
+                </div>
+                <div style="font-size:11px;color:#64748b;margin-top:2px">60 秒內通過的關卡數</div>
+            </div>
+            <div class="glass"
+                style="padding:16px 24px;border-radius:14px;flex:1;min-width:180px;max-width:300px;text-align:center">
+                <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px">
+                    <span style="font-size:20px">🏅</span>
+                    <span class="lbl" style="font-size:14px">最高紀錄</span>
+                </div>
+                <div class="ft" style="font-size:36px;font-weight:900;color:var(--amber)">
+                    <span id="sum-best">0</span><span style="font-size:14px;color:#64748b;margin-left:4px">關</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 你學到了什麼 — WIDE container -->
+        <div class="glass"
+            style="padding:28px 32px;border-radius:18px;margin-bottom:20px;max-width:900px;width:94%;text-align:left;border-color:rgba(34,197,94,.2);margin-left:auto;margin-right:auto">
+            <h3
+                style="color:var(--main);font-weight:700;font-size:20px;letter-spacing:1.5px;margin-bottom:16px;font-family:'Orbitron';display:flex;align-items:center;gap:8px">
+                <span style="font-size:24px">📐</span> 你學到了什麼？
+            </h3>
+
+            <!-- 核心定理 — 在應用上方 -->
+            <div
+                style="background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:12px;padding:18px 20px;margin-bottom:20px">
+                <p style="color:#4ade80;font-weight:700;font-size:18px;margin-bottom:8px">⭐ 核心定理</p>
+                <p style="color:#e2e8f0;font-size:17px;line-height:1.8">若兩直線的<span
+                        style="color:var(--amber);font-weight:700">垂直距離</span>處處相等，則兩直線<span
+                        style="color:var(--main);font-weight:700">互相平行</span>。<br>反之，平行線之間的垂直距離<span
+                        style="color:var(--cyan);font-weight:700">永遠不變</span>。</p>
+            </div>
+
+            <!-- 生活應用 — 2 欄 Grid -->
+            <h4
+                style="color:var(--cyan);font-size:16px;font-weight:700;margin-bottom:14px;letter-spacing:1px;font-family:'Orbitron'">
+                🌍 平行在生活中的應用</h4>
+            <div
+                style="display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;color:#cbd5e1;font-size:16px;line-height:1.9;margin-bottom:10px">
+                <div style="background:rgba(255,255,255,.03);border-radius:10px;padding:14px 16px">
+                    <span style="font-size:22px">🚂</span> <span style="color:#fff;font-weight:700">鐵軌</span><br>
+                    火車的兩條鐵軌必須保持平行且等距，否則火車會脫軌。工程師用的正是「垂直距離處處相等」的原理來鋪設鐵道！
+                </div>
+                <div style="background:rgba(255,255,255,.03);border-radius:10px;padding:14px 16px">
+                    <span style="font-size:22px">🏗️</span> <span style="color:#fff;font-weight:700">建築結構</span><br>
+                    大樓的樓板、天花板與地板、扶手欄杆，都要保持平行才能穩固安全。
+                </div>
+                <div style="background:rgba(255,255,255,.03);border-radius:10px;padding:14px 16px">
+                    <span style="font-size:22px">🎵</span> <span style="color:#fff;font-weight:700">五線譜</span><br>
+                    音樂的五線譜就是五條等距的平行線，音符放在不同的平行線上代表不同的音高。
+                </div>
+                <div style="background:rgba(255,255,255,.03);border-radius:10px;padding:14px 16px">
+                    <span style="font-size:22px">️</span> <span style="color:#fff;font-weight:700">電扶梯與跑道</span><br>
+                    自動扶梯的兩側扶手、操場跑道的直線段等，都是平行線應用的例子。
+                </div>
+            </div>
+
+            <!-- 結語 — 放在最下方 -->
+            <div
+                style="margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);color:#e2e8f0;font-weight:700;font-size:17px;line-height:1.8">
+                平行的概念看似簡單，卻是幾何學的<span style="color:var(--amber);font-weight:700">基石</span>之一。除了今天學到的「垂直距離處處相等 ⇔
+                平行」，之後還會學到更多有趣的平行性質，例如<span style="color:var(--cyan);font-weight:700">同位角</span>、<span
+                    style="color:var(--cyan);font-weight:700">內錯角</span>和<span
+                    style="color:var(--cyan);font-weight:700">同側內角</span>等，細節等上課的時候再慢慢說吧～ 😄</div>
+        </div>
+
+        <!-- Buttons -->
+        <div style="display:flex;gap:12px;justify-content:center;margin-top:8px;margin-bottom:24px;padding:0 24px">
+            <button class="abtn btn-go" onclick="game.restart()" style="max-width:200px">再次挑戰</button>
+            <button class="back-btn" onclick="window.location.href='index.html'" style="position:static">返回地圖</button>
+        </div>
+    </div>
+    <button class="back-btn hidden" id="back-btn" onclick="window.location.href='index.html'">← 返回</button>
+
+    <script>
+        const TUT_LEVELS = [
+            { type: 'tutorial-draw', angle: 0, dist: 70, msg: '教學：左邊的垂直距離已固定為 d，請拖曳橘色端點調整邊 B 的角度，讓右邊也等於 d' },
+            { type: 'tutorial-judge', angle: 0, dist: 70, parallel: true, msg: '教學：觀察各處的垂直距離是否都相等，相等就代表平行' }
+        ];
+        const PRAC_LEVELS = [
+            { type: 'draw', angle: 5, dist: 65 }, { type: 'draw', angle: -8, dist: 60 },
+            { type: 'judge', angle: 6, dist: 55 }, { type: 'draw', angle: 12, dist: 55 },
+            { type: 'judge', angle: -10, dist: 50 }, { type: 'draw', angle: 15, dist: 50 },
+            { type: 'judge', angle: 18, dist: 45 }, { type: 'draw', angle: -20, dist: 45 }
+        ];
+        // 60s challenge pool
+        const CHAL_POOL = [
+            { type: 'draw', angle: 5, dist: 65 }, { type: 'draw', angle: -8, dist: 60 }, { type: 'draw', angle: 12, dist: 55 },
+            { type: 'draw', angle: 15, dist: 50 }, { type: 'draw', angle: -20, dist: 45 }, { type: 'draw', angle: 22, dist: 40 },
+            { type: 'judge', angle: 6, dist: 55 }, { type: 'judge', angle: -10, dist: 50 }, { type: 'judge', angle: 18, dist: 45 },
+            { type: 'judge', angle: 14, dist: 40 }, { type: 'judge', angle: -15, dist: 60 }, { type: 'draw', angle: -12, dist: 48 }
+        ];
+
+        class ConveyorGame {
+            constructor() {
+                this.cv = document.getElementById('gameCanvas'); this.ctx = this.cv.getContext('2d');
+                this.dom = {
+                    hud: document.getElementById('hud'), score: document.getElementById('score-d'),
+                    level: document.getElementById('level-d'), combo: document.getElementById('combo-d'),
+                    bp: document.getElementById('bottom-panel'), dc: document.getElementById('draw-ctl'),
+                    jc: document.getElementById('judge-ctl'), hp: document.getElementById('hint-panel'),
+                    ht: document.getElementById('hint-text'), td: document.getElementById('tgt-d'),
+                    ss: document.getElementById('start-screen'), bs: document.getElementById('brief-screen'),
+                    tm: document.getElementById('tut-modal'), tt: document.getElementById('tut-title'),
+                    tmsg: document.getElementById('tut-msg'), ticon: document.getElementById('tut-icon'),
+                    tbtn: document.getElementById('tut-btn'),
+                    sum: document.getElementById('summary-screen'), sumCh: document.getElementById('sum-challenge'),
+                    sumBest: document.getElementById('sum-best'),
+                    bb: document.getElementById('back-btn'), phaseLbl: document.getElementById('phase-lbl'),
+                    hudLbl: document.getElementById('hud-lbl'), scoreUnit: document.getElementById('score-unit'),
+                    comboBox: document.getElementById('combo-box'),
+                    timerBar: document.getElementById('timer-bar'), timerFill: document.getElementById('timer-fill')
+                };
+                this.s = {
+                    playing: false, phase: 'tutorial', lvIdx: 0, score: 0, combo: 0, maxCombo: 0,
+                    chalScore: 0, bestScore: 0,
+                    line1: null, pivot: null, dragEnd: null, angleOff: 0, type: 'draw',
+                    targetDist: 60, isParallel: true, markerTs: [], dragging: false,
+                    showHbeam: false, hbeamAnim: 0, frame: 0, stars: [], bL: {}, bR: {},
+                    fixMode: false, lineB: null, line2: null, nx: 0, ny: 0,
+                    timerStart: 0, timerDur: 60000, timerActive: false
+                };
+                this._genStars(); this._resize();
+                window.addEventListener('resize', () => this._resize());
+                this.cv.addEventListener('pointerdown', e => this._pd(e));
+                this.cv.addEventListener('pointermove', e => this._pm(e));
+                this.cv.addEventListener('pointerup', () => { this.s.dragging = false });
+                this.cv.addEventListener('pointercancel', () => { this.s.dragging = false });
+                this.s.bestScore = parseInt(localStorage.getItem('math_city_score_parallel')) || 0;
+                this._loop = this._loop.bind(this); requestAnimationFrame(this._loop);
+            }
+            _resize() {
+                const d = window.devicePixelRatio || 1; this.W = window.innerWidth; this.H = window.innerHeight;
+                this.cv.width = this.W * d; this.cv.height = this.H * d; this.ctx.setTransform(d, 0, 0, d, 0, 0);
+                const m = Math.max(40, this.W * .06), bw = Math.max(70, Math.min(140, this.W * .14));
+                this.s.bL = { x: m, y: this.H * .15, w: bw, h: this.H * .78 };
+                this.s.bR = { x: this.W - m - bw, y: this.H * .1, w: bw, h: this.H * .83 };
+            }
+            _genStars() { this.s.stars = []; for (let i = 0; i < 80; i++)this.s.stars.push({ x: Math.random(), y: Math.random() * .55, r: .5 + Math.random() * 1.5, tw: Math.random() * Math.PI * 2 }) }
+            showBrief() { this.dom.ss.classList.add('hidden'); this.dom.bs.classList.remove('hidden') }
+            start() {
+                this.s.playing = true; this.s.phase = 'tutorial'; this.s.lvIdx = 0;
+                this.s.score = 0; this.s.combo = 0; this.s.maxCombo = 0; this.s.chalScore = 0;
+                this.s.timerActive = false;
+                this.dom.ss.classList.add('hidden'); this.dom.bs.classList.add('hidden');
+                this.dom.sum.classList.add('hidden'); this.dom.tm.classList.add('hidden');
+                this.dom.hud.classList.remove('hidden'); this.dom.bb.classList.remove('hidden');
+                this.dom.timerBar.classList.add('hidden');
+                this._genLevel();
+            }
+            restart() { this.start() }
+
+            _perpFoot(px, py, ax, ay, bx, by) {
+                const dx = bx - ax, dy = by - ay, t = ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy);
+                return { x: ax + t * dx, y: ay + t * dy, t };
+            }
+            _perpDist(px, py, lp1, lp2) {
+                const f = this._perpFoot(px, py, lp1.x, lp1.y, lp2.x, lp2.y);
+                return Math.sqrt((px - f.x) ** 2 + (py - f.y) ** 2);
+            }
+
+            _getLevels() {
+                if (this.s.phase === 'tutorial') return TUT_LEVELS;
+                if (this.s.phase === 'practice') return PRAC_LEVELS;
+                return null; // challenge mode uses random
+            }
+
+            _genLevel() {
+                this.s.fixMode = false; this._resize();
+                let lv;
+                if (this.s.phase === 'challenge') {
+                    lv = { ...CHAL_POOL[Math.floor(Math.random() * CHAL_POOL.length)] };
+                    // Randomize angle direction
+                    lv.angle = lv.angle * (Math.random() > .5 ? 1 : -1);
+                    if (lv.type === 'judge') lv.parallel = Math.random() < .5;
+                } else {
+                    const levels = this._getLevels();
+                    lv = levels[this.s.lvIdx];
+                    if (!lv) {
+                        if (this.s.phase === 'tutorial') {
+                            this._showPhaseModal('🎓', '教學完成！', '你已學會如何判斷平行線。\n接下來進入練習關卡！', '開始練習 →', 'practice');
+                            return;
+                        }
+                        if (this.s.phase === 'practice') {
+                            this._showPhaseModal('🔧', '練習完成！', '你已經很熟練了！\n接下來是 60 秒限時挑戰，\n看你能通過幾關！', '開始挑戰 ⏱️', 'challenge');
+                            return;
+                        }
+                        return;
+                    }
+                }
+                this.s.type = lv.type;
+                const bL = this.s.bL, bR = this.s.bR, lx = bL.x + bL.w, rx = bR.x;
+                const yT = Math.max(bL.y, bR.y) + 60, yB = Math.min(bL.y + bL.h, bR.y + bR.h) - 60;
+                const yM = (yT + yB) / 2, aRad = lv.angle * Math.PI / 180;
+                const hL = (rx - lx) / 2, cy = yM + (Math.random() * 40 - 20);
+                const l1p1 = { x: lx, y: cy - Math.sin(aRad) * hL }, l1p2 = { x: rx, y: cy + Math.sin(aRad) * hL };
+                this.s.line1 = { p1: l1p1, p2: l1p2 };
+                const d = lv.dist; this.s.targetDist = d;
+                const ldx = l1p2.x - l1p1.x, ldy = l1p2.y - l1p1.y, len = Math.sqrt(ldx * ldx + ldy * ldy);
+                let nx = -ldy / len, ny = ldx / len; if (ny < 0) { nx = -nx; ny = -ny }
+                this.s.nx = nx; this.s.ny = ny;
+                const nMk = (this.s.phase === 'tutorial' || this.s.lvIdx < 2) ? 2 : 3;
+                const mkTs = []; for (let i = 0; i < nMk; i++)mkTs.push((i + 1) / (nMk + 1));
+                this.s.markerTs = mkTs;
+                const isDraw = lv.type.includes('draw');
+                if (isDraw) {
+                    const tLeft = mkTs[0];
+                    const pA = { x: l1p1.x + ldx * tLeft, y: l1p1.y + ldy * tLeft };
+                    this.s.pivot = { x: pA.x + nx * d, y: pA.y + ny * d };
+                    this.s.angleOff = (Math.random() > .5 ? 1 : -1) * (0.04 + Math.random() * 0.08);
+                    this._updateDragEnd();
+                    this.dom.dc.classList.remove('hidden'); this.dom.jc.classList.add('hidden');
+                    this.dom.td.textContent = `d = ${d}`;
+                } else {
+                    this.s.isParallel = lv.parallel != null ? lv.parallel : Math.random() < .5;
+                    const cP1 = { x: l1p1.x + nx * d, y: l1p1.y + ny * d }, cP2 = { x: l1p2.x + nx * d, y: l1p2.y + ny * d };
+                    if (this.s.isParallel) { this.s.line2 = { p1: { ...cP1 }, p2: { ...cP2 } } }
+                    else {
+                        const sk = (8 + Math.random() * 18) * (Math.random() < .5 ? 1 : -1);
+                        this.s.line2 = { p1: { x: cP1.x + nx * sk * .4, y: cP1.y + ny * sk * .4 }, p2: { x: cP2.x - nx * sk * .4, y: cP2.y - ny * sk * .4 } }
+                    }
+                    this.dom.dc.classList.add('hidden'); this.dom.jc.classList.remove('hidden');
+                }
+                const hint = lv.msg || (isDraw ? '拖曳橘色端點調整邊 B 的角度，讓各處垂直距離都等於 d' : '觀察各測量點的垂直距離是否相等，判斷輸送帶是否平行');
+                this.dom.ht.textContent = hint;
+                this.s.showHbeam = false; this.s.hbeamAnim = 0;
+                this.dom.bp.classList.remove('hidden'); this.dom.hp.classList.remove('hidden'); this._upHUD();
+            }
+
+            _updateDragEnd() {
+                const l1 = this.s.line1, ldx = l1.p2.x - l1.p1.x, ldy = l1.p2.y - l1.p1.y;
+                const baseAngle = Math.atan2(ldy, ldx), angle = baseAngle + this.s.angleOff;
+                const lx = this.s.bL.x + this.s.bL.w, rx = this.s.bR.x, pivot = this.s.pivot;
+                const cos = Math.cos(angle), sin = Math.sin(angle);
+                const tL = cos !== 0 ? (lx - pivot.x) / cos : 0, tR = cos !== 0 ? (rx - pivot.x) / cos : 0;
+                this.s.lineB = { p1: { x: pivot.x + tL * cos, y: pivot.y + tL * sin }, p2: { x: pivot.x + tR * cos, y: pivot.y + tR * sin } };
+                this.s.dragEnd = this.s.lineB.p2;
+            }
+
+            _enterFixMode() {
+                this.s.fixMode = true; this.s.type = 'draw';
+                const l1 = this.s.line1, l2 = this.s.line2, d = this.s.targetDist;
+                const ldx = l1.p2.x - l1.p1.x, ldy = l1.p2.y - l1.p1.y;
+                const tLeft = this.s.markerTs[0];
+                const pA = { x: l1.p1.x + ldx * tLeft, y: l1.p1.y + ldy * tLeft };
+                this.s.pivot = { x: pA.x + this.s.nx * d, y: pA.y + this.s.ny * d };
+                const baseAngle = Math.atan2(ldy, ldx);
+                this.s.angleOff = Math.atan2(l2.p2.y - l2.p1.y, l2.p2.x - l2.p1.x) - baseAngle;
+                this._updateDragEnd();
+                this.dom.jc.classList.add('hidden'); this.dom.dc.classList.remove('hidden');
+                this.dom.td.textContent = `d = ${d}`;
+                this.dom.ht.textContent = '不平行！請調整邊 B，讓垂直距離都等於 d 才能通過';
+            }
+
+            _getL2() { return (this.s.type.includes('draw') || this.s.fixMode) ? this.s.lineB : this.s.line2 }
+
+            _showPhaseModal(icon, title, msg, btnText, nextPhase) {
+                this.dom.ticon.textContent = icon; this.dom.tt.textContent = title; this.dom.tmsg.textContent = msg;
+                this.dom.tbtn.textContent = btnText; this.dom.tbtn.onclick = () => {
+                    this.dom.tm.classList.add('hidden');
+                    this.s.phase = nextPhase; this.s.lvIdx = 0;
+                    if (nextPhase === 'challenge') { this._startChallenge() }
+                    else this._genLevel();
+                };
+                this.dom.tm.classList.remove('hidden');
+            }
+
+            _startChallenge() {
+                this.s.chalScore = 0; this.s.combo = 0; this.s.timerStart = Date.now(); this.s.timerActive = true;
+                this.dom.timerBar.classList.remove('hidden'); this._genLevel();
+            }
+
+            _checkTimer() {
+                if (!this.s.timerActive) return false;
+                const elapsed = Date.now() - this.s.timerStart;
+                const pct = Math.max(0, 1 - elapsed / this.s.timerDur);
+                this.dom.timerFill.style.width = `${pct * 100}%`;
+                if (pct <= .3) this.dom.timerFill.style.background = 'linear-gradient(90deg,#ef4444,#f97316)';
+                else if (pct <= .6) this.dom.timerFill.style.background = 'linear-gradient(90deg,#fbbf24,#22c55e)';
+                if (elapsed >= this.s.timerDur) { this.s.timerActive = false; this._endChallenge(); return true }
+                return false;
+            }
+
+            _endChallenge() {
+                this.s.playing = false; this.s.timerActive = false;
+                this.dom.hud.classList.add('hidden'); this.dom.bp.classList.add('hidden');
+                this.dom.hp.classList.add('hidden'); this.dom.bb.classList.add('hidden');
+                this.dom.timerBar.classList.add('hidden');
+                // Save best
+                if (this.s.chalScore > this.s.bestScore) {
+                    this.s.bestScore = this.s.chalScore;
+                    localStorage.setItem('math_city_score_parallel', String(this.s.bestScore));
+                }
+                this.dom.sumCh.textContent = `${this.s.chalScore} 關`;
+                this.dom.sumBest.textContent = this.s.bestScore;
+                this.dom.sum.classList.remove('hidden');
+            }
+
+            checkAnswer() {
+                if (!this.s.playing) return;
+                if (this.s.timerActive && this._checkTimer()) return;
+                const l2 = this._getL2(); if (!l2) return;
+                const d = this.s.targetDist, l1 = this.s.line1;
+                let totalErr = 0;
+                this.s.markerTs.forEach(t => {
+                    const px = l1.p1.x + (l1.p2.x - l1.p1.x) * t, py = l1.p1.y + (l1.p2.y - l1.p1.y) * t;
+                    totalErr += Math.abs(this._perpDist(px, py, l2.p1, l2.p2) - d);
+                });
+                const avg = totalErr / this.s.markerTs.length;
+                if (this.s.phase === 'tutorial') {
+                    if (avg < 5) {
+                        this._showPhaseModal('✅', '教學完成！', '垂直距離處處相等 = 平行！\n確認距離一致就代表兩條線平行', '確認，繼續 →', null);
+                        this.dom.tbtn.onclick = () => { this.dom.tm.classList.add('hidden'); this.s.lvIdx++; this._genLevel() }
+                    }
+                    else this._showToast('還不夠精確，再調整一下！', false);
+                    return;
+                }
+                if (this.s.fixMode) {
+                    if (avg < 4) { this._onCorrect(80) }
+                    else if (avg < 10) { this._onCorrect(Math.max(20, 60 - Math.floor(avg * 4))) }
+                    else this._showToast('還不夠精確，再調整！', false);
+                    return;
+                }
+                if (avg < 4) this._onCorrect(100); else if (avg < 10) this._onCorrect(Math.max(30, 80 - Math.floor(avg * 5)));
+                else this._showToast('垂直距離不一致，再調整！', false);
+            }
+
+            judgeAnswer(says) {
+                if (!this.s.playing) return;
+                if (this.s.timerActive && this._checkTimer()) return;
+                if (this.s.phase === 'tutorial') {
+                    if (says === this.s.isParallel) {
+                        this._showPhaseModal('✅', '教學完成！', '觀察垂直距離是否處處相等，\n相等就代表平行！', '確認，繼續 →', null);
+                        this.dom.tbtn.onclick = () => { this.dom.tm.classList.add('hidden'); this.s.lvIdx++; this._genLevel() }
+                    } else this._showToast(this.s.isParallel ? '看看各點垂直距離是否相同？' : '注意各點距離不同喔！', false);
+                    return;
+                }
+                if (says === this.s.isParallel) {
+                    if (this.s.isParallel) { this._onCorrect(100) }
+                    else { this._showToast('正確！不平行。現在請調整讓它平行！', true); setTimeout(() => this._enterFixMode(), 1200) }
+                } else {
+                    this.s.combo = 0;
+                    this._showToast(this.s.isParallel ? '其實是平行的！垂直距離處處相等。' : '其實不平行！各點垂直距離不同。', false);
+                    this._upHUD();
+                }
+            }
+
+            tutNext() { }
+
+            _onCorrect(pts) {
+                this.s.combo++; if (this.s.combo > this.s.maxCombo) this.s.maxCombo = this.s.combo;
+                if (this.s.phase === 'challenge') {
+                    this.s.chalScore++;
+                    this._showToast(`+1 關！共 ${this.s.chalScore} 關`, true);
+                } else {
+                    const tot = pts + Math.min(this.s.combo * 10, 50); this.s.score += tot;
+                    this._showToast(`+${tot} 噸 鋼材通過！`, true);
+                }
+                this.s.showHbeam = true; this.s.hbeamAnim = 0;
+                setTimeout(() => {
+                    if (this.s.timerActive && this._checkTimer()) return;
+                    this.s.fixMode = false; this.s.lvIdx++;
+                    if (this.s.phase === 'challenge') { this._genLevel(); return }
+                    const levels = this._getLevels();
+                    if (!levels || this.s.lvIdx >= levels.length) { this._genLevel(); return } // will trigger phase transition
+                    this._genLevel();
+                }, 2200);
+            }
+
+            _showToast(t, ok) { const e = document.createElement('div'); e.className = `toast ${ok ? 'tok' : 'tng'}`; e.textContent = t; document.body.appendChild(e); setTimeout(() => { try { e.remove() } catch (x) { } }, 1800) }
+            _upHUD() {
+                if (this.s.phase === 'challenge') {
+                    this.dom.hudLbl.textContent = '通過關卡'; this.dom.score.textContent = this.s.chalScore; this.dom.scoreUnit.textContent = ' 關';
+                    this.dom.phaseLbl.textContent = '挑戰'; this.dom.level.textContent = '⏱️ 60s';
+                } else if (this.s.phase === 'practice') {
+                    this.dom.hudLbl.textContent = '鋼材運送'; this.dom.score.textContent = this.s.score; this.dom.scoreUnit.textContent = ' 噸';
+                    this.dom.phaseLbl.textContent = '練習'; this.dom.level.textContent = `${this.s.lvIdx + 1}/${PRAC_LEVELS.length}`;
+                } else {
+                    this.dom.hudLbl.textContent = '鋼材運送'; this.dom.score.textContent = this.s.score; this.dom.scoreUnit.textContent = ' 噸';
+                    this.dom.phaseLbl.textContent = '教學'; this.dom.level.textContent = `${this.s.lvIdx + 1}/${TUT_LEVELS.length}`;
+                }
+                this.dom.combo.textContent = this.s.combo;
+            }
+
+            _gp(e) { const r = this.cv.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top } }
+            _pd(e) {
+                if (!(this.s.type.includes('draw') || this.s.fixMode) || !this.s.playing || !this.s.dragEnd) return;
+                const pos = this._gp(e), dx = pos.x - this.s.dragEnd.x, dy = pos.y - this.s.dragEnd.y;
+                if (dx * dx + dy * dy < 40 * 40) { this.s.dragging = true; this.cv.setPointerCapture(e.pointerId) }
+            }
+            _pm(e) {
+                if (!this.s.dragging) return;
+                const pos = this._gp(e), pivot = this.s.pivot;
+                const newAngle = Math.atan2(pos.y - pivot.y, pos.x - pivot.x);
+                const l1 = this.s.line1;
+                this.s.angleOff = Math.max(-0.5, Math.min(0.5, newAngle - Math.atan2(l1.p2.y - l1.p1.y, l1.p2.x - l1.p1.x)));
+                this._updateDragEnd();
+            }
+
+            _loop() {
+                this.s.frame++;
+                if (this.s.timerActive) this._checkTimer();
+                this._draw(); requestAnimationFrame(this._loop);
+            }
+            _draw() {
+                const ctx = this.ctx, W = this.W, H = this.H, f = this.s.frame;
+                const sg = ctx.createLinearGradient(0, 0, 0, H);
+                sg.addColorStop(0, '#030d06'); sg.addColorStop(.5, '#071a0e'); sg.addColorStop(1, '#0a2614');
+                ctx.fillStyle = sg; ctx.fillRect(0, 0, W, H);
+                this.s.stars.forEach(s => { const tw = .4 + .6 * Math.abs(Math.sin(f * .02 + s.tw)); ctx.beginPath(); ctx.arc(s.x * W, s.y * H, s.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(255,255,255,${tw * .7})`; ctx.fill() });
+                ctx.fillStyle = '#051208'; const bt = H * .88;
+                [[.05, .3], [.1, .45], [.18, .25], [.25, .5], [.3, .35], [.38, .55], [.45, .28], [.52, .42], [.58, .32], [.65, .48], [.72, .38], [.78, .52], [.85, .3], [.92, .44]]
+                    .forEach(([xr, hr]) => { ctx.fillRect(xr * W, bt - hr * H * .2, W * .055, hr * H * .2) });
+                ctx.fillStyle = '#030d06'; ctx.fillRect(0, bt, W, H - bt);
+                if (this.s.playing) { this._drawBld(ctx, this.s.bL, 'left', f); this._drawBld(ctx, this.s.bR, 'right', f); this._drawScene(ctx, f) }
+            }
+            _drawBld(ctx, b, side, f) {
+                const gr = ctx.createLinearGradient(b.x, b.y, b.x + b.w, b.y + b.h);
+                gr.addColorStop(0, '#0f2818'); gr.addColorStop(1, '#081a0e');
+                ctx.fillStyle = gr; ctx.beginPath(); const t = 3;
+                ctx.moveTo(b.x + t, b.y); ctx.lineTo(b.x + b.w - t, b.y); ctx.lineTo(b.x + b.w, b.y + b.h); ctx.lineTo(b.x, b.y + b.h); ctx.closePath(); ctx.fill();
+                ctx.strokeStyle = 'rgba(34,197,94,.12)'; ctx.lineWidth = 1; ctx.stroke();
+                ctx.fillStyle = 'rgba(6,182,212,.3)'; ctx.fillRect(b.x + t, b.y, b.w - t * 2, 3);
+                const wC = Math.floor(b.w / 20), wR = Math.floor(b.h / 24), ws = 8;
+                const gx = (b.w - wC * ws) / (wC + 1), gy = (b.h - wR * ws) / (wR + 1);
+                for (let r = 0; r < wR; r++)for (let c = 0; c < wC; c++) {
+                    const wx = b.x + gx * (c + 1) + ws * c, wy = b.y + gy * (r + 1) + ws * r;
+                    const lit = Math.sin(f * .005 + r * 3.7 + c * 7.1) > -.3;
+                    ctx.fillStyle = lit ? `rgba(251,191,36,${(Math.sin(f * .01 + r + c * 2) * .3 + .7) * .35})` : 'rgba(30,41,59,.7)';
+                    ctx.fillRect(wx, wy, ws, ws);
+                }
+                if (side === 'right') {
+                    const ax = b.x + b.w / 2; ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
+                    ctx.beginPath(); ctx.moveTo(ax, b.y); ctx.lineTo(ax, b.y - 25); ctx.stroke();
+                    if (Math.sin(f * .06) > 0) { ctx.beginPath(); ctx.arc(ax, b.y - 25, 3, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.shadowBlur = 8; ctx.shadowColor = '#ef4444'; ctx.fill(); ctx.shadowBlur = 0 }
+                }
+            }
+            _drawScene(ctx, f) {
+                const l1 = this.s.line1; if (!l1) return;
+                const d = this.s.targetDist, isDraw = this.s.type.includes('draw') || this.s.fixMode, l2 = this._getL2();
+                ctx.beginPath(); ctx.moveTo(l1.p1.x, l1.p1.y); ctx.lineTo(l1.p2.x, l1.p2.y);
+                ctx.strokeStyle = '#22c55e'; ctx.lineWidth = 4; ctx.shadowBlur = 6; ctx.shadowColor = '#22c55e'; ctx.stroke(); ctx.shadowBlur = 0;
+                ctx.font = 'bold 13px "Noto Sans TC"'; ctx.fillStyle = '#4ade80'; ctx.fillText('邊 A', l1.p1.x - 40, l1.p1.y - 8);
+                if (l2) {
+                    ctx.beginPath(); ctx.moveTo(l2.p1.x, l2.p1.y); ctx.lineTo(l2.p2.x, l2.p2.y);
+                    ctx.strokeStyle = '#f97316'; ctx.lineWidth = 4; ctx.shadowBlur = 6; ctx.shadowColor = '#f97316'; ctx.stroke(); ctx.shadowBlur = 0;
+                    ctx.fillStyle = '#fb923c'; ctx.fillText('邊 B', l2.p1.x - 40, l2.p1.y + 20)
+                }
+                if (isDraw && this.s.dragEnd) {
+                    const p = this.s.dragEnd, pr = 16 + Math.sin(f * .08) * 3;
+                    ctx.beginPath(); ctx.arc(p.x, p.y, pr, 0, Math.PI * 2); ctx.fillStyle = 'rgba(249,115,22,.12)'; ctx.fill();
+                    ctx.beginPath(); ctx.arc(p.x, p.y, 10, 0, Math.PI * 2); ctx.fillStyle = '#f97316'; ctx.shadowBlur = 10; ctx.shadowColor = '#f97316'; ctx.fill(); ctx.shadowBlur = 0;
+                    ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.fillStyle = '#fff'; ctx.fill();
+                    if (this.s.pivot) {
+                        const pv = this.s.pivot;
+                        ctx.beginPath(); ctx.arc(pv.x, pv.y, 6, 0, Math.PI * 2); ctx.fillStyle = '#06b6d4'; ctx.shadowBlur = 6; ctx.shadowColor = '#06b6d4'; ctx.fill(); ctx.shadowBlur = 0;
+                        ctx.beginPath(); ctx.arc(pv.x, pv.y, 3, 0, Math.PI * 2); ctx.fillStyle = '#fff'; ctx.fill()
+                    }
+                }
+                if (l2) {
+                    this.s.markerTs.forEach((t, idx) => {
+                        const pAx = l1.p1.x + (l1.p2.x - l1.p1.x) * t, pAy = l1.p1.y + (l1.p2.y - l1.p1.y) * t;
+                        let fx, fy, pd;
+                        if (isDraw && idx === 0 && this.s.pivot) { fx = this.s.pivot.x; fy = this.s.pivot.y; pd = Math.sqrt((pAx - fx) ** 2 + (pAy - fy) ** 2) }
+                        else { const foot = this._perpFoot(pAx, pAy, l2.p1.x, l2.p1.y, l2.p2.x, l2.p2.y); fx = foot.x; fy = foot.y; pd = Math.sqrt((pAx - fx) ** 2 + (pAy - fy) ** 2) }
+                        ctx.beginPath(); ctx.setLineDash([5, 4]); ctx.moveTo(pAx, pAy); ctx.lineTo(fx, fy);
+                        ctx.strokeStyle = 'rgba(255,255,255,.55)'; ctx.lineWidth = 1.5; ctx.stroke(); ctx.setLineDash([]);
+                        const mAngle = Math.atan2(fy - pAy, fx - pAx);
+                        const tkW = 7, txD = Math.cos(mAngle + Math.PI / 2) * tkW, tyD = Math.sin(mAngle + Math.PI / 2) * tkW;
+                        ctx.beginPath(); ctx.moveTo(pAx - txD, pAy - tyD); ctx.lineTo(pAx + txD, pAy + tyD);
+                        ctx.moveTo(fx - txD, fy - tyD); ctx.lineTo(fx + txD, fy + tyD);
+                        ctx.strokeStyle = 'rgba(255,255,255,.6)'; ctx.lineWidth = 2; ctx.stroke();
+                        // Right angle at A
+                        const ras = 10;
+                        let rax = pAx + Math.cos(mAngle) * ras, ray = pAy + Math.sin(mAngle) * ras;
+                        ctx.beginPath(); ctx.moveTo(rax - txD * .5, ray - tyD * .5); ctx.lineTo(rax, ray); ctx.lineTo(pAx - txD * .5, pAy - tyD * .5);
+                        ctx.strokeStyle = 'rgba(255,255,255,.4)'; ctx.lineWidth = 1; ctx.stroke();
+                        // Right angle at B
+                        rax = fx - Math.cos(mAngle) * ras; ray = fy - Math.sin(mAngle) * ras;
+                        ctx.beginPath(); ctx.moveTo(rax - txD * .5, ray - tyD * .5); ctx.lineTo(rax, ray); ctx.lineTo(fx - txD * .5, fy - tyD * .5);
+                        ctx.strokeStyle = 'rgba(255,255,255,.4)'; ctx.lineWidth = 1; ctx.stroke();
+                        const label = Math.round(pd); ctx.font = 'bold 14px "JetBrains Mono"'; ctx.textAlign = 'center';
+                        let col = '#e2e8f0';
+                        if (isDraw) { if (idx === 0) col = '#06b6d4'; else { const err = Math.abs(pd - d); col = err < 3 ? '#4ade80' : err < 10 ? '#fbbf24' : '#f87171' } }
+                        ctx.fillStyle = col; ctx.fillText(`${label}`, (pAx + fx) / 2 + 20, (pAy + fy) / 2 + 5); ctx.textAlign = 'left';
+                        ctx.beginPath(); ctx.arc(pAx, pAy, 4, 0, Math.PI * 2); ctx.fillStyle = '#4ade80'; ctx.fill();
+                        ctx.beginPath(); ctx.arc(fx, fy, 4, 0, Math.PI * 2); ctx.fillStyle = '#fb923c'; ctx.fill();
+                    });
+                }
+                if (l2 && !this.s.showHbeam) {
+                    const ph = (f * .015) % 1;
+                    [l1, l2].forEach((ln, i) => {
+                        const c = i === 0 ? 'rgba(34,197,94,.25)' : 'rgba(249,115,22,.25)';
+                        for (let j = 0; j < 12; j++) { const tt = ((j / 12) + ph) % 1; ctx.beginPath(); ctx.arc(ln.p1.x + (ln.p2.x - ln.p1.x) * tt, ln.p1.y + (ln.p2.y - ln.p1.y) * tt, 2, 0, Math.PI * 2); ctx.fillStyle = c; ctx.fill() }
+                    })
+                }
+                if (this.s.showHbeam && l1 && l2) {
+                    this.s.hbeamAnim += 0.012;
+                    if (this.s.hbeamAnim <= 1.5) {
+                        const tt = Math.min(1, this.s.hbeamAnim);
+                        const hx = l1.p1.x + (l1.p2.x - l1.p1.x) * tt, hy1 = l1.p1.y + (l1.p2.y - l1.p1.y) * tt, hy2 = l2.p1.y + (l2.p2.y - l2.p1.y) * tt;
+                        const hc = (hy1 + hy2) / 2, bH = Math.abs(hy2 - hy1) * .5, bW = 18;
+                        ctx.save(); ctx.translate(hx, hc);
+                        ctx.fillStyle = '#94a3b8'; ctx.fillRect(-bW / 2, -bH / 2, 4, bH); ctx.fillRect(bW / 2 - 4, -bH / 2, 4, bH); ctx.fillRect(-bW / 2, -2, bW, 4);
+                        ctx.shadowBlur = 8; ctx.shadowColor = '#22c55e'; ctx.strokeStyle = '#22c55e'; ctx.lineWidth = 1; ctx.strokeRect(-bW / 2 - 1, -bH / 2 - 1, bW + 2, bH + 2); ctx.shadowBlur = 0;
+                        ctx.restore()
+                    }
+                }
+            }
+        }
+        let game; try { game = new ConveyorGame(); window.game = game } catch (e) { console.error('Init fail:', e) }
+    </script>
+</body>
+
+</html>