Upload 3 files

README.md

@@ -1,140 +1,132 @@
----
-title: MathCity
-emoji: 🌖
-colorFrom: gray
-colorTo: pink
-sdk: static
-pinned: false
----
-
-
-# Math City: Cyber Chronicles (數學特區：未來都市)
-
-## 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$ 的結果。
-    *   **Phase 5 (核心解鎖)**：輸入正確的 $a$ 與 $b$ 值，完成任務。
-
-### 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 按鈕)。
-- [ ] **Phase 2: 現有程式優化**
-    - [ ] `function.html`: 增加音效回饋、優化引導流程、修正手機版面。
-    - [ ] `sequence.html`: 統一視覺風格，調整難度曲線。
-- [ ] **Phase 3: 新關卡開發**
-    - [ ] 開發 `congruence.html` (全等重案組) 原型。
-    - [ ] 開發 `parallel.html` (平行建構區) 原型。
-
----
-
-## 6. 修正經驗與開發筆記 (Dev Log)
-此區塊記錄開發過程中的重要迭代與修正經驗，供日後參考。
-
-### [Sequence Canyon] 視覺與機制修正 (Visual & Mechanics Polish)
-*   **視覺一致性的陷阱 (Visual Consistency)**：
-    *   在設計「尋找規律」類型的遊戲時，**所有平台的視覺材質必須嚴格統一**（例如全部使用碎石 Gravel）。
-    *   若正確與錯誤的平台有顏色差異，玩家會傾向使用「顏色判斷」而非「數學計算」，導致教學目標失效。
-*   **提示機制 (Scaffolding)**：
-    *   **限制提示範圍**：為了兼顧新手引導與挑戰性，提示（如光暈、外框）應僅限於首幾項（前兩項），後續必須完全移除提示。
-    *   **嚴格判定**：程式邏輯需確保 `p.hint` 是唯一決定外觀差異的參數，避免其他狀態（如 `target` 類型預設值）意外洩漏答案。
-*   **裝飾物與碰撞 (Decorations & Collision)**：
-    *   **空白平台 Bug**：直接在遊戲主路徑生成「無功能裝飾平台」容易讓玩家混淆（跳上去沒反應）。
-    *   **解決方案**：採用「區塊化 (Chunking)」策略，將起點與終點的長型安全區切割成多個小區塊，將裝飾物僅生成於這些絕對安全的區域，確保遊戲核心路徑的純粹性。
-*   **音效與視覺同步 (Audio-Visual Sync)**：
-    *   過關音效（如 Victory Fanfare）應在視覺高潮（如煙火發射）的**第一瞬間**觸發。
-    *   避免在動畫結束 callback 才播放音效，會造成「乾乾的」等待感。
-
-### [Function Core] 介面優化與教學引導 (UI/UX & Pedagogy Refinement)
-*   **介面佈局 (Layout & Alignment)**：
-    *   **分割視窗 (Split-Screen)**：在 Desktop 模式下，應將操作區（左）與圖表區（右）明確分開，避免彈出式視窗遮擋數據。
-    *   **視覺對齊 (Pixel-Perfect Alignment)**：上下排列的元件（如「核心法則Banner」與「指令對話框」）寬度必須一致（例如都設為 `w-[480px]`），視覺安定感會大幅提升。
-*   **教學引導與錯誤回饋 (Pedagogy & Feedback)**：
-    *   **不只是報錯**：當學生回答錯誤時，不能只顯示 Error，必須提供**具體且有數學邏輯的引導**。（例如：錯誤提示不只寫 "Wrong"，而是顯示 "$203 = 2x + 3 \rightarrow 200 = 2x$"，引導下一步思考）。
-    *   **即時回饋 (Instant Gratification)**：當學生發現數學規律（如「是一條直線」）時，圖表應**立刻**畫出對應的直線，讓數學發現與視覺獎勵同步。
-*   **視覺層級 (Visual Hierarchy)**：
-    *   **關鍵變數特大化**：數學應用題中的關鍵變數 ($x, y$) 字體應設定為極大 (e.g., `text-6xl`) 並嚴格遵守色碼（$x$=琥珀, $y$=青），降低閱讀一段長文字的認知負荷。
-    *   **去除干擾**：輸入框周圍不應有重複的標籤文字（如重複的「投入晶石」），會造成視覺混亂。
-*   **開發注意事項 (Dev Ops)**：
-    *   **檔案覆寫確認**：進行大幅度重構時，若 `replace_file_content` 失敗頻率高，應果斷使用 `write_to_file` 進行全檔覆寫 (`Overwrite=true`)，確保版本一致性。
-
----
----
-## 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)
+
+### 色彩計畫 (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*

function.html

@@ -30,6 +30,8 @@
             background-image: url('Assets/index/functionbg.png');
             background-size: cover;
             background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
         }
 
         /* Dark overlay for the whole page */
@@ -54,51 +56,13 @@
             z-index: 0;
         }
 
-        /* Dialogue Box */
-        #dialogue-box {
-            position: fixed;
-            bottom: 2rem;
-            left: 2rem;
-            width: 450px;
-            max-width: 90%;
-            z-index: 40;
-            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-
-        @media (max-width: 768px) {
-            #dialogue-box {
-                left: 50%;
-                transform: translateX(-50%);
-                bottom: 1rem;
-                width: 95%;
-            }
-        }
+        /* Removed legacy .dialogue-default and #formula-banner positioning */
+        /* Layout is now handled by #dialogue-container utility classes in HTML */
 
         #dialogue-box.translate-y-full {
             transform: translateY(150%);
         }
 
-        /* Banner */
-        #formula-banner {
-            position: fixed;
-            top: 2rem;
-            right: 2rem;
-            width: 380px;
-            z-index: 35;
-            transition: opacity 0.5s;
-        }
-
-        @media (max-width: 768px) {
-            #formula-banner {
-                top: 0.5rem;
-                right: 0.5rem;
-                width: 200px;
-                /* Smaller on mobile */
-                transform: scale(0.8);
-                transform-origin: top right;
-            }
-        }
-
         /* Tech UI Styling */
         .glass-panel {
             background: rgba(15, 23, 42, 0.95);
@@ -149,32 +113,38 @@
     <canvas id="gameCanvas"></canvas>
 
     <!-- Main UI Container -->
-    <div id="ui-container"
-        class="relative z-10 w-full h-screen flex flex-col justify-end md:justify-center md:items-start pb-8 px-4 md:px-20 pointer-events-none">
-
-        <!-- Formula Banner (Moved to left, stacked above dialogue) -->
-        <div id="formula-banner" class="hidden mb-6 pointer-events-auto w-full md:w-[480px]">
-            <div
-                class="glass-panel px-8 py-5 rounded-2xl border-2 border-cyan-500/30 flex items-center justify-between shadow-[0_0_20px_rgba(34,211,238,0.2)] w-full">
-                <span class="text-base text-slate-400 font-bold tracking-widest">核心運作法則</span>
-                <div class="flex items-center gap-2 text-3xl font-bold font-tech">
-                    <span class="text-cyan-400">y</span>
-                    <span class="text-slate-500">=</span>
-                    <span class="text-slate-200">2</span>
-                    <span class="text-amber-400">x</span>
-                    <span class="text-slate-500">+</span>
-                    <span class="text-slate-200">3</span>
+    <div id="ui-container" class="fixed inset-0 z-10 pointer-events-none">
+        <!-- 
+            Dialogue Container: 
+            - Anchored Vertically Centered Left (Desktop/Tablet)
+            - Flex Column to stack Banner on top of Box
+        -->
+        <div id="dialogue-container"
+            class="fixed top-1/2 left-4 right-4 md:left-12 md:right-auto md:w-auto -translate-y-1/2 flex flex-col gap-4 items-center md:items-start pointer-events-none z-40">
+
+            <!-- Formula Banner -->
+            <div id="formula-banner" class="hidden pointer-events-auto w-full transition-opacity duration-500">
+                <div
+                    class="glass-panel px-6 py-4 md:px-8 md:py-5 rounded-3xl border-2 border-cyan-500/30 flex items-center justify-center gap-6 shadow-[0_0_20px_rgba(34,211,238,0.2)]">
+                    <span
+                        class="text-base md:text-xl text-slate-400 font-bold tracking-widest whitespace-nowrap">核心運作法則</span>
+                    <div class="flex items-center gap-1 md:gap-2 text-3xl md:text-4xl font-bold font-tech">
+                        <span class="text-cyan-400">y</span>
+                        <span class="text-slate-500">=</span>
+                        <span class="text-slate-200">2</span>
+                        <span class="text-amber-400">x</span>
+                        <span class="text-slate-500">+</span>
+                        <span class="text-slate-200">3</span>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Interactive Dialogue Box -->
-        <!-- Mobile: Bottom Sheet / Desktop: Left Panel -->
-        <div id="dialogue-box"
-            class="pointer-events-auto w-full md:w-[480px] glass-panel rounded-2xl p-8 transform transition-all duration-500 translate-y-20 opacity-0 md:translate-y-0 min-h-[200px] flex flex-col justify-center shadow-[0_0_50px_rgba(0,0,0,0.5)] bg-slate-900/90 frame-border">
-            <!-- Dynamic Content Injected Here -->
+            <!-- Interactive Dialogue Box -->
+            <div id="dialogue-box"
+                class="pointer-events-auto w-full glass-panel rounded-3xl p-6 md:p-8 transform transition-all duration-500 translate-y-20 opacity-0 min-h-[200px] flex flex-col justify-center shadow-[0_0_50px_rgba(0,0,0,0.5)] bg-slate-900/90 frame-border">
+                <!-- Dynamic Content Injected Here -->
+            </div>
         </div>
-
     </div>
 
     <!-- Start Overlay -->
@@ -186,11 +156,11 @@
                 能源核心
             </h1>
             <h2
-                class="text-2xl md:text-3xl font-bold font-tech text-cyan-400 mb-8 tracking-[0.5em] uppercase opacity-80">
+                class="text-3xl md:text-4xl font-bold font-tech text-cyan-400 mb-8 tracking-[0.5em] uppercase opacity-80">
                 Energy Core
             </h2>
             <button onclick="startGame()"
-                class="group relative px-10 py-4 bg-cyan-600/80 hover:bg-cyan-500 text-white font-bold rounded-xl transition-all shadow-[0_0_20px_rgba(6,182,212,0.4)] text-2xl tracking-widest border border-cyan-400/50 backdrop-blur-sm overflow-hidden">
+                class="group relative px-10 py-4 bg-cyan-600/80 hover:bg-cyan-500 text-white font-bold rounded-xl transition-all shadow-[0_0_20px_rgba(6,182,212,0.4)] text-3xl tracking-widest border border-cyan-400/50 backdrop-blur-sm overflow-hidden">
                 <span class="relative z-10">進入核心</span>
                 <div
                     class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-shimmer">
@@ -219,6 +189,7 @@
             STORY_BRIEF: 1,
             PHASE1_INTRO: 2,
             PHASE2_Q: 3,     // General Question State
+            PHASE2_COORDINATE: 3.5, // New Step: Coordinate Confirmation
             PHASE2_PATTERN: 4,
             PHASE2_PREDICTION_INTRO: 4.5,
             PHASE3_CRISIS: 5,
@@ -263,6 +234,14 @@
         let qStep = 0;
         let currentState = STATE.INIT;
 
+        // Guide Arrow State
+        let guideArrowState = {
+            active: false,
+            startTime: 0,
+            targetX: 0,
+            targetY: 0
+        };
+
         // --- Audio ---
         const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
         function playSound(type) {
@@ -431,6 +410,96 @@
             ctx.scale(dpr, dpr);
         }
 
+        function drawGuideArrows() {
+            const now = Date.now();
+            const elapsed = (now - guideArrowState.startTime) / 1000;
+            const duration = 2.0; // Show for 2 seconds
+
+            if (elapsed > duration) {
+                guideArrowState.active = false;
+                return;
+            }
+
+            const tx = guideArrowState.targetX;
+            const ty = guideArrowState.targetY;
+
+            const isDesktop = width > 768;
+
+            // Convert graph coords to canvas coords
+            // Logic sync with drawGraph
+            const padding = 60;
+            const gw = isDesktop ? width * 0.53 : Math.min(600, width - 40);
+            const gh = isDesktop ? height * 0.6 : Math.min(400, height * 0.5);
+
+            // On Desktop, position graph on the right side (Start at 44% width)
+            // On Mobile, center it
+            const gx = isDesktop ? (width * 0.44) : (width - gw) / 2;
+            const gy = isDesktop ? height * 0.2 : height * 0.1;
+
+            const ox = gx + padding;
+            const oy = gy + gh - padding;
+            const drawW = gw - padding * 2;
+            const drawH = gh - padding * 2;
+
+            const unitX = drawW / graphScale.xMax;
+            const unitY = drawH / graphScale.yMax;
+
+            const canvasX = ox + tx * unitX;
+            const canvasY = oy - ty * unitY;
+
+            const progress = Math.min(elapsed * 2, 1); // Animate in quickly
+
+            ctx.save();
+            ctx.lineWidth = 4;
+            ctx.lineCap = 'round';
+
+            // Draw X-axis Arrow (Amber, Up)
+            ctx.strokeStyle = '#F59E0B'; // Amber-500
+            ctx.fillStyle = '#F59E0B';
+            ctx.beginPath();
+            ctx.moveTo(canvasX, oy); // Start from X-axis
+            ctx.lineTo(canvasX, oy - (oy - canvasY) * progress);
+            ctx.stroke();
+
+            // Draw Arrowhead if fully extended
+            if (progress > 0.8) {
+                ctx.beginPath();
+                ctx.moveTo(canvasX, canvasY + 10);
+                ctx.lineTo(canvasX - 5, canvasY + 20);
+                ctx.lineTo(canvasX + 5, canvasY + 20);
+                ctx.fill();
+            }
+
+            // Draw Y-axis Arrow (Cyan, Right)
+            ctx.strokeStyle = '#22D3EE'; // Cyan-400
+            ctx.fillStyle = '#22D3EE';
+            ctx.beginPath();
+            ctx.moveTo(ox, canvasY); // Start from Y-axis
+            ctx.lineTo(ox + (canvasX - ox) * progress, canvasY);
+            ctx.stroke();
+
+            // Draw Arrowhead
+            if (progress > 0.8) {
+                ctx.beginPath();
+                ctx.moveTo(canvasX - 10, canvasY);
+                ctx.lineTo(canvasX - 20, canvasY - 5);
+                ctx.lineTo(canvasX - 20, canvasY + 5);
+                ctx.fill();
+            }
+
+            // Highlight Point
+            if (progress > 0.9) {
+                ctx.beginPath();
+                ctx.arc(canvasX, canvasY, 8, 0, Math.PI * 2);
+                ctx.fillStyle = '#FFFFFF';
+                ctx.fill();
+                ctx.strokeStyle = '#F59E0B';
+                ctx.stroke();
+            }
+
+            ctx.restore();
+        }
+
         // --- State Management ---
         function enterPhase(phase) {
             currentState = phase;
@@ -439,21 +508,54 @@
 
         function updateUI(errorMsg = null) {
             const box = document.getElementById('dialogue-box');
-            box.classList.remove('translate-y-full', 'opacity-0');
+            const container = document.getElementById('dialogue-container');
             const formulaBanner = document.getElementById('formula-banner');
 
+            // Default Container State:
+            // Desktop: Fixed Left Side (Start 2%, Width 46%). Vertically Centered.
+            // Reduced gap: Left ends at 40%, Right starts at 48%.
+            container.className = "fixed z-40 left-4 right-4 top-1/2 -translate-y-1/2 md:translate-y-0 md:top-0 md:bottom-0 md:left-[5%] md:right-auto md:w-[35%] flex flex-col gap-6 justify-center items-center pointer-events-none";
+
+            // Default Box State
+            box.className = "pointer-events-auto w-full glass-panel rounded-3xl p-6 md:p-8 transform transition-all duration-500 min-h-[200px] flex flex-col justify-center shadow-[0_0_50px_rgba(0,0,0,0.5)] bg-slate-900/90 frame-border";
+
+            // Specific overrides
+            if (currentState === STATE.PHASE7_SUMMARY) {
+                // Summary: Center Screen
+                container.className = "fixed inset-0 flex items-center justify-center pointer-events-auto z-50";
+                box.className = "w-[95%] md:w-[800px] glass-panel rounded-3xl p-8 transition-all duration-500 min-h-[400px] flex flex-col justify-start shadow-[0_0_80px_rgba(0,0,0,0.8)] bg-slate-900/95 frame-border relative";
+            } else if (currentState === STATE.PHASE6_GAME) {
+                box.classList.add('hidden');
+                container.classList.add('hidden');
+            } else if (currentState === STATE.STORY_BRIEF) {
+                // Story Brief: Remove fixed width, use full container width
+                // box.classList.add('md:w-[600px]'); // REMOVED
+                box.classList.remove('hidden');
+                container.classList.remove('hidden');
+            } else {
+                // Normal Phase: Allow full width (controlled by container)
+                // box.classList.add('md:w-[480px]'); // REMOVED
+                formulaBanner.className = "hidden pointer-events-auto w-full transition-opacity duration-500";
+
+                box.classList.remove('hidden');
+                container.classList.remove('hidden');
+            }
+
+            box.classList.remove('translate-y-full', 'opacity-0');
+
             let html = '';
 
             switch (currentState) {
                 case STATE.STORY_BRIEF:
                     formulaBanner.classList.add('hidden');
+
                     html = `
-                        <h2 class="text-2xl font-bold text-amber-400 mb-4">MATH CITY 電力危機</h2>
-                        <p class="text-slate-200 text-lg leading-relaxed mb-6">
+                        <h2 class="text-4xl font-bold text-amber-400 mb-6">MATH CITY 電力危機</h2>
+                        <p class="text-slate-200 text-3xl leading-relaxed mb-8">
                             能源核心是整個城市的電力來源，但現在供電系統出了一些問題，需要你來協助修復。<br><br>
                             但在正式維修前，我們需要先檢測你的運算能力。
                         </p>
-                        <button onclick="enterPhase(STATE.PHASE1_INTRO)" class="w-full py-4 bg-cyan-600 hover:bg-cyan-500 text-white rounded-xl font-bold text-xl shadow-lg">
+                        <button onclick="enterPhase(STATE.PHASE1_INTRO)" class="w-full py-5 bg-cyan-600 hover:bg-cyan-500 text-white rounded-xl font-bold text-3xl shadow-lg">
                             開始檢測能力
                         </button>
                     `;
@@ -462,16 +564,16 @@
                 case STATE.PHASE1_INTRO:
                     formulaBanner.classList.remove('hidden');
                     html = `
-                        <h2 class="text-xl font-bold text-cyan-400 mb-2">核心運作法則確認</h2>
-                        <div class="text-center bg-slate-800/80 p-6 rounded-xl border border-cyan-500/30 mb-6">
-                             <div class="font-tech text-5xl mb-4">
+                        <h2 class="text-3xl font-bold text-cyan-400 mb-4">核心運作法則確認</h2>
+                        <div class="text-center bg-slate-800/80 p-6 rounded-xl border border-cyan-500/30 mb-8">
+                             <div class="font-tech text-6xl mb-6">
                                 <span class="text-cyan-400">y</span> = 2<span class="text-amber-400">x</span> + 3
                             </div>
-                            <p class="text-slate-300 text-3xl leading-relaxed font-bold">
-                                每投入 <span class="text-amber-400 font-bold text-6xl mx-2 border-b-2 border-amber-400/50">x</span> 顆晶石，<br>就會產生 <span class="text-cyan-400 font-bold text-6xl mx-2 border-b-2 border-cyan-400/50">y</span> 點電力。
+                            <p class="text-slate-300 text-4xl leading-relaxed font-bold">
+                                每投入 <span class="text-amber-400 font-bold text-7xl mx-2 border-b-2 border-amber-400/50">x</span> 顆晶石，<br>就會產生 <span class="text-cyan-400 font-bold text-7xl mx-2 border-b-2 border-cyan-400/50">y</span> 點電力。
                             </p>
                         </div>
-                        <button onclick="startQPhase()" class="w-full py-4 bg-slate-700 hover:bg-slate-600 text-white rounded-xl font-bold text-lg border border-slate-500">
+                        <button onclick="startQPhase()" class="w-full py-5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl font-bold text-xl border border-slate-500">
                             我準備好了 (NEXT)
                         </button>
                     `;
@@ -481,30 +583,110 @@
                     formulaBanner.classList.remove('hidden');
                     const xVal = checkPoints[qStep];
                     html = `
-                        <h3 class="text-lg font-bold text-white mb-2">能力檢測 (${qStep + 1}/${checkPoints.length})</h3>
-                        <p class="text-slate-300 mb-6 text-lg">
-                            若投入 <span class="text-amber-400 font-bold text-2xl drop-shadow">${xVal}</span> 顆晶石 <span class="text-slate-400">(<span class="text-amber-400 font-bold">x=${xVal}</span>)</span>...
-                        </p>
+                        <h3 class="text-3xl font-bold text-white mb-2 text-center">能力檢測 (${qStep + 1}/${checkPoints.length})</h3>
                         
-                        <div class="flex items-center justify-center gap-4 mb-2">
-                            <span class="font-tech text-3xl text-cyan-400">y = </span>
-                            <div class="relative w-32">
-                                <input id="ans-input" type="number" class="tech-input w-full p-2 text-3xl rounded-lg" placeholder="?" autofocus>
-                                <div class="absolute inset-0 border-2 border-slate-500/50 rounded-lg pointer-events-none"></div>
+                        <div class="grid grid-cols-2 gap-6 mb-2 mt-4">
+                            <!-- Left: Question -->
+                            <div class="flex flex-col gap-4">
+                                <div class="text-cyan-400 font-bold text-xl border-b border-cyan-500/30 pb-2">1. 算出電力 (y)</div>
+                                <p class="text-slate-300 text-lg">
+                                    若投入 <span class="text-amber-400 font-bold text-2xl">${xVal}</span> <span class="text-slate-400 text-base">(<span class="text-amber-400">x=${xVal}</span>)</span> 顆晶石...
+                                </p>
+                                <div class="flex items-center justify-center gap-2 flex-grow">
+                                    <span class="font-tech text-3xl text-cyan-400">y = </span>
+                                    <div class="relative w-32">
+                                        <input id="ans-input" type="number" class="tech-input w-full p-2 text-3xl rounded-lg" placeholder="?" autofocus>
+                                        <div class="absolute inset-0 border-2 border-slate-500/50 rounded-lg pointer-events-none"></div>
+                                    </div>
+                                </div>
+                                <button onclick="checkQAnswer()" class="w-full h-16 bg-cyan-600 hover:bg-cyan-500 text-white rounded-xl font-bold text-xl shadow-lg flex items-center justify-center">
+                                    確認電力
+                                </button>
+                            </div>
+
+                            <!-- Right: Placeholder (Visible but Inactive) -->
+                            <div class="flex flex-col gap-4 opacity-50 grayscale">
+                                <div class="text-slate-400 font-bold text-xl border-b border-slate-500/30 pb-2">2. 坐標描點</div>
+                                <div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700/30 flex flex-col items-center justify-center flex-grow">
+                                    <div class="text-sm text-slate-500 mb-1">對應座標</div>
+                                    <div class="font-tech text-3xl font-bold text-slate-500">
+                                        (<span class="text-amber-400">${xVal}</span>, <span class="text-cyan-400">y</span>)
+                                    </div>
+                                </div>
+                                <button class="w-full h-16 bg-slate-700 text-slate-500 rounded-xl font-bold text-xl border border-slate-600 cursor-not-allowed flex items-center justify-center">
+                                    描繪點 (PLOT)
+                                </button>
                             </div>
                         </div>
                         
-                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mt-2 animate-bounce">${errorMsg}</div>` : ''}
+                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mt-2 border-2 border-red-400 border-dashed animate-pulse bg-slate-900/50 p-2 rounded">${errorMsg}</div>` : ''}
+                    `;
+                    break;
 
-                        <button onclick="checkQAnswer()" class="mt-6 w-full py-3 bg-cyan-600 hover:bg-cyan-500 text-white rounded font-bold text-lg">
-                            確認電力
-                        </button>
+                case STATE.PHASE2_COORDINATE:
+                    formulaBanner.classList.remove('hidden');
+                    const xValC = checkPoints[qStep];
+                    const yValC = 2 * xValC + 3;
+                    html = `
+                        <h3 class="text-3xl font-bold text-white mb-2 text-center">能力檢測 (${qStep + 1}/${checkPoints.length})</h3>
+                        
+                        <div class="grid grid-cols-2 gap-6 mb-2 mt-4">
+                            <!-- Left: Math Result (Confirmed) -->
+                            <div class="flex flex-col gap-4 opacity-60 grayscale-[0.5] pointer-events-none">
+                                <div class="text-cyan-400 font-bold text-xl border-b border-cyan-500/30 pb-2">1. 算出電力 (y)</div>
+                                <p class="text-slate-300 text-lg">
+                                    若投入 <span class="text-amber-400 font-bold text-2xl">${xValC}</span> <span class="text-slate-400 text-base">(<span class="text-amber-400">x=${xValC}</span>)</span> 顆晶石...
+                                </p>
+                                <div class="flex items-center justify-center gap-2 flex-grow">
+                                    <span class="font-tech text-3xl text-cyan-400">y = </span>
+                                    <div class="relative w-32">
+                                        <input type="text" class="tech-input w-full p-2 text-3xl rounded-lg bg-slate-800 text-cyan-400 border-cyan-500" value="${yValC}" disabled>
+                                    </div>
+                                </div>
+                                <button class="w-full h-16 bg-slate-700 text-slate-400 rounded-xl font-bold text-xl border border-slate-600 flex items-center justify-center">
+                                    已確認
+                                </button>
+                            </div>
+                            
+                            <!-- Right: Coordinate (Two States) -->
+                            <div class="flex flex-col gap-4">
+                                <div class="text-amber-400 font-bold text-xl border-b border-amber-500/30 pb-2">2. 坐標描點</div>
+                                
+                                <!-- Step 1: Pre-substitution -->
+                                <div id="coord-step-1" class="flex flex-col gap-4 h-full">
+                                    <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500/50 flex flex-col items-center justify-center flex-grow">
+                                        <div class="text-sm text-cyan-300 font-bold mb-2 tracking-widest">對應座標</div>
+                                        <div class="font-tech text-4xl font-bold z-10 mb-2">
+                                            (<span class="text-amber-400">${xValC}</span>, <span class="text-cyan-400">y</span>)
+                                        </div>
+                                    </div>
+                                    <button onclick="substituteY()" class="w-full h-16 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl font-bold text-xl shadow-lg transition-colors flex items-center justify-center">
+                                        將 y 代入
+                                    </button>
+                                </div>
+
+                                <!-- Step 2: Post-substitution (Hidden initially) -->
+                                <div id="coord-step-2" class="hidden flex flex-col gap-4 h-full">
+                                    <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500 shadow-[0_0_20px_rgba(34,211,238,0.2)] flex flex-col items-center justify-center relative overflow-hidden transform transition-all flex-grow animate-pulse-once">
+                                        <div class="text-sm text-cyan-300 font-bold mb-2 tracking-widest">對應座標</div>
+                                        <div class="font-tech text-4xl font-bold z-10 mb-2">
+                                            (<span class="text-amber-400">${xValC}</span>, <span class="text-cyan-400">${yValC}</span>)
+                                        </div>
+                                        <div class="absolute inset-0 bg-cyan-500/10 animate-pulse"></div>
+                                    </div>
+                                    <button onclick="plotCoordinate()" class="w-full h-16 bg-amber-500 hover:bg-amber-400 text-white rounded-xl font-bold text-xl shadow-lg animate-pulse whitespace-nowrap flex items-center justify-center">
+                                        描繪點 (PLOT)
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
                     `;
                     break;
 
                 case STATE.PHASE2_PATTERN:
+                    formulaBanner.classList.remove('hidden'); // Ensure banner is visible
                     html = `
-                        <h3 class="text-lg font-bold text-white mb-4">規律分析</h3>
+                        <h3 class="text-3xl font-bold text-white mb-4">規律分析</h3>
                         <p class="text-slate-300 mb-6">觀察圖表上的這些點，它們呈現什麼樣的排列規律？</p>
                         <div class="grid grid-cols-3 gap-4">
                             <button onclick="checkPattern('A')" class="p-4 bg-slate-800 hover:bg-slate-700 rounded-xl border border-slate-600 font-bold text-slate-300 transition-all hover:border-cyan-400 hover:text-white">
@@ -521,12 +703,13 @@
                     break;
 
                 case STATE.PHASE2_PREDICTION_INTRO:
+                    formulaBanner.classList.remove('hidden'); // Keep banner visible
                     html = `
                         <h3 class="text-xl font-bold text-green-400 mb-4">分析完成</h3>
                         <div class="bg-slate-800/80 p-6 rounded-xl border border-green-500/30 mb-6">
                             <p class="text-slate-200 text-lg leading-relaxed font-bold">
                                 沒錯，所有點都連成一條直線...<br>
-                                <span class="text-cyan-400 block mt-2 text-2xl">也就是我們能預測未來！</span>
+                                <span class="text-cyan-400 block mt-2 text-3xl">也就是我們能預測未來！</span>
                             </p>
                         </div>
                         <button onclick="enterPhase(STATE.PHASE3_CRISIS)" class="w-full py-4 bg-red-600 hover:bg-red-500 text-white rounded-xl font-bold text-xl shadow-lg animate-pulse">
@@ -536,22 +719,23 @@
                     break;
 
                 case STATE.PHASE3_CRISIS:
+                    formulaBanner.classList.remove('hidden');
                     html = `
                         <div class="border-l-4 border-red-500 pl-6">
-                            <h3 class="text-2xl font-bold text-red-500 mb-2 blink-red">狀況：工業用電暴增！</h3>
-                            <p class="text-slate-200 mb-6 text-lg">
-                                因為工業區需求激增，系統現在需要供給 <span class="text-cyan-400 font-bold text-3xl">203</span> 點電力 <span class="text-slate-400 text-base">(<span class="text-cyan-400 font-bold">y=203</span>)</span>。
+                            <h3 class="text-3xl font-bold text-red-500 mb-2 blink-red">狀況：工業用電暴增！</h3>
+                            <p class="text-slate-200 mb-6 text-xl">
+                                因為工業區需求激增，系統現在需要供給 <span class="text-cyan-400 font-bold text-4xl">203</span> 點電力 <span class="text-slate-400 text-base">(<span class="text-cyan-400 font-bold">y=203</span>)</span>。
                                 <br>根據 y=2x+3，請問要投入多少晶石 <span class="text-amber-400 font-bold">(x)</span> 才足夠？
                             </p>
                             <div class="flex items-center gap-2 mt-4 bg-slate-800/50 p-4 rounded-xl flex-wrap">
-                                <span class="font-tech text-amber-400 text-3xl whitespace-nowrap">x = </span>
-                                <input id="ans-input" type="number" class="tech-input flex-1 min-w-[100px] p-2 rounded text-3xl text-amber-400" placeholder="?" autofocus>
+                                <span class="font-tech text-amber-400 text-4xl whitespace-nowrap">x = </span>
+                                <input id="ans-input" type="number" class="tech-input flex-1 min-w-[100px] p-2 rounded text-4xl text-amber-400" placeholder="?" autofocus>
                                 <button onclick="checkFinalAnswer()" class="px-6 py-3 bg-red-600 hover:bg-red-500 text-white rounded font-bold shadow-[0_0_15px_rgba(239,68,68,0.5)] whitespace-nowrap flex-shrink-0">
                                     投入晶石
                                 </button>
                             </div>
                             
-                            ${errorMsg ? `<div class="text-amber-300 text-center font-bold mt-2 text-xl animate-bounce">${errorMsg}</div>` : ''}
+                            ${errorMsg ? `<div class="text-amber-300 text-center font-bold mt-2 text-xl border-2 border-amber-300 border-dashed animate-pulse bg-slate-900/50 p-2 rounded">${errorMsg}</div>` : ''}
 
                         </div>
                     `;
@@ -560,18 +744,18 @@
                 case STATE.SUCCESS:
                     html = `
                         <div class="text-center">
-                            <h2 class="text-3xl font-bold text-green-400 mb-2 font-tech">SYSTEM STABILIZED</h2>
-                            <p class="text-slate-300 mb-6 text-lg">預測成功！核心運作恢復正常。</p>
+                            <h2 class="text-4xl font-bold text-green-400 mb-2 font-tech">SYSTEM STABILIZED</h2>
+                            <p class="text-slate-300 mb-6 text-xl">預測成功！核心運作恢復正常。</p>
                             
                             <!-- Teaching Content -->
                             <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500/30 mb-6 text-left">
-                                <h3 class="text-xl font-bold text-white mb-2 text-center">任務總結：什麼是「函數」？</h3>
-                                <p class="text-slate-200 text-base leading-relaxed mb-3">
-                                    剛剛我們使用的「能量轉換法則」，在數學上就叫做<span class="text-amber-400 font-bold text-lg mx-1">「函數」(Function)</span>。
+                                <h3 class="text-3xl font-bold text-white mb-2 text-center">任務小結：什麼是「函數」？</h3>
+                                <p class="text-slate-200 text-2xl leading-relaxed mb-3">
+                                    剛剛我們使用的「能量轉換法則」，在數學上就叫做<span class="text-amber-400 font-bold text-3xl mx-1">「函數」(Function)</span>。
                                 </p>
-                                <p class="text-slate-300 text-sm leading-relaxed">
+                                <p class="text-slate-300 text-2xl leading-relaxed">
                                     函數就像一座<span class="text-cyan-400 font-bold">工廠</span>：<br>
-                                    它會把原料 <span class="font-bold text-amber-400">x (晶石)</span>，藉由固定的規則，轉換成產品 <span class="font-bold text-cyan-400">y (電力)</span>。
+                                    它會把原料 <span class="font-bold text-amber-400">x (晶石)</span>，藉由固定的規則，<br>轉換成產品 <span class="font-bold text-cyan-400">y (電力)</span>。
                                 </p>
                             </div>
 
@@ -594,13 +778,13 @@
                     formulaBanner.classList.remove('hidden'); // Ensure banner is visible
                     html = `
                         <div class="border-l-4 border-amber-500 pl-6">
-                            <h3 class="text-2xl font-bold text-amber-500 mb-2 blink-red">警告：公式異變！</h3>
-                            <p class="text-slate-200 mb-6 text-lg">
+                            <h3 class="text-3xl font-bold text-amber-500 mb-2 blink-red">警告：公式異變！</h3>
+                            <p class="text-slate-200 mb-6 text-xl">
                                 檢測到晶石純度下降，能量轉換公式已改變！<br>
                                 系統無法自動運作，你必須重新推導公式。
                             </p>
                             <div class="bg-slate-800/50 p-4 rounded-xl mb-4 border border-slate-600">
-                                <span class="font-tech text-3xl block text-center tracking-widest">
+                                <span class="font-tech text-4xl block text-center tracking-widest">
                                     y = <span class="text-amber-400 animate-pulse">?</span>x + <span class="text-cyan-400 animate-pulse">?</span>
                                 </span>
                             </div>
@@ -614,34 +798,39 @@
                 case STATE.PHASE4_TEST_B:
                     formulaBanner.classList.remove('hidden'); // Ensure banner is visible
                     html = `
-                         <h3 class="text-xl font-bold text-white mb-2">步驟 1：數據校準</h3>
+                         <h3 class="text-3xl font-bold text-white mb-2">步驟 1：數據校準 B</h3>
                          <p class="text-slate-300 mb-4">
                             你需要測試不同的晶石投入量，來推導出新的公式。
-                            <br><span class="text-sm text-slate-400">提示：什麼時候 <span class="text-red-400">a</span> 會消失不見？ (試試投入 0 顆)</span>
+                            <br><span class="text-base text-slate-400">提示：什麼時候 <span class="text-red-400">a</span> 會消失不見？ (試試投入 0 顆)</span>
                          </p>
                          <div class="flex items-center gap-2 mt-4 bg-slate-800/50 p-4 rounded-xl justify-center flex-wrap">
-                            <span class="font-tech text-amber-400 text-2xl whitespace-nowrap">投入 x = </span>
-                            <input id="test-input" type="number" class="tech-input w-24 p-2 rounded text-2xl text-amber-400 text-center" placeholder="0" value="0">
+                            <span class="font-tech text-amber-400 text-3xl whitespace-nowrap">投入 x = </span>
+                            <input id="test-input" type="number" class="tech-input w-24 p-2 rounded text-3xl text-amber-400 text-center" placeholder="0" value="0">
                             <button onclick="runPhase4Test()" class="px-6 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded font-bold shadow-lg whitespace-nowrap">
                                 啟動運作
                             </button>
-                        </div>
-                    `;
+                        ${errorMsg ? `<div class="text-amber-400 text-center font-bold mt-2 text-xl border-2 border-amber-400 border-dashed animate-pulse p-2 rounded">${errorMsg}</div>` : ''}
+
+                    </div>
+                `;
                     break;
 
                 case STATE.PHASE4_FIND_B:
+                    formulaBanner.classList.remove('hidden');
                     html = `
-                        <h3 class="text-xl font-bold text-white mb-2">步驟 1：尋找初始值 (b)</h3>
-                        <p class="text-slate-300 mb-4">
+                        <h3 class="text-3xl font-bold text-white mb-2">步驟 1：尋找初始值 (b)</h3>
+                        <p class="text-slate-300 mb-4 text-2xl">
                             當投入 <span class="text-amber-400 font-bold">0</span> 顆時，
                             電力顯示為 <span class="text-cyan-400 font-bold">5</span>。
+                            <br><span class="font-tech text-3xl block mt-2"><span class="text-cyan-400">5</span> = a × <span class="text-amber-400">0</span> + b</span>
+                            <span class="font-tech text-3xl block"><span class="text-cyan-400">5</span> = b</span>
                         </p>
-                         <div class="flex items-center justify-center gap-2 text-2xl font-tech mb-6 bg-slate-800 p-4 rounded-lg">
+                         <div class="flex items-center justify-center gap-2 text-3xl font-tech mb-6 bg-slate-800 p-4 rounded-lg">
                             <span>b = </span>
                             <input id="ans-input" type="number" class="w-24 bg-slate-700 text-cyan-400 text-center rounded border border-slate-500 focus:border-cyan-400 outline-none p-1" placeholder="?" autofocus>
                         </div>
                         
-                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mb-4 animate-bounce bg-slate-900/50 p-2 rounded">${errorMsg}</div>` : ''}
+                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mb-4 border-2 border-red-400 border-dashed animate-pulse bg-slate-900/50 p-2 rounded">${errorMsg}</div>` : ''}
 
                         <button onclick="checkPhase4B()" class="w-full py-3 bg-cyan-600 hover:bg-cyan-500 text-white rounded-xl font-bold">
                             確認校準 Check
@@ -650,42 +839,43 @@
                     break;
 
                 case STATE.PHASE4_TEST_A:
+                    formulaBanner.classList.remove('hidden');
                     html = `
-                         <h3 class="text-xl font-bold text-white mb-2">步驟 2：數據校準 (a)</h3>
+                         <h3 class="text-3xl font-bold text-white mb-2">步驟 2：數據校準 A</h3>
                          <p class="text-slate-300 mb-4">
                             現在已知 b=5。接下來需要找出變化率 a。
-                            <br><span class="text-sm text-slate-400">提示：試試看投入 1 顆晶石？</span>
+                            <br><span class="text-base text-slate-400">提示：試試看投入 1 顆晶石？</span>
                          </p>
                          <div class="flex items-center gap-2 mt-4 bg-slate-800/50 p-4 rounded-xl justify-center flex-wrap">
-                            <span class="font-tech text-amber-400 text-2xl whitespace-nowrap">投入 x = </span>
-                            <input id="test-input-a" type="number" class="tech-input w-24 p-2 rounded text-2xl text-amber-400 text-center" placeholder="1" value="1">
+                            <span class="font-tech text-amber-400 text-3xl whitespace-nowrap">投入 x = </span>
+                            <input id="test-input-a" type="number" class="tech-input w-24 p-2 rounded text-3xl text-amber-400 text-center" placeholder="1" value="1">
                             <button onclick="runPhase4TestA()" class="px-6 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded font-bold shadow-lg whitespace-nowrap">
                                 啟動運作
                             </button>
                         </div>
+                        ${errorMsg ? `<div class="text-amber-400 text-center font-bold mt-2 text-xl border-2 border-amber-400 border-dashed animate-pulse p-2 rounded">${errorMsg}</div>` : ''}
                     `;
                     break;
 
                 case STATE.PHASE4_FIND_A:
                     formulaBanner.classList.remove('hidden');
                     html = `
-                        <h3 class="text-xl font-bold text-white mb-2">步驟 2：解出 a (Solve for a)</h3>
+                        <h3 class="text-3xl font-bold text-white mb-2">步驟 2：解出 a (Solve for a)</h3>
                         <p class="text-slate-300 mb-4">
-                            測試投入 <span class="text-amber-400 font-bold">1</span> 顆晶石，
-                            電力變為 <span class="text-cyan-400 font-bold">8</span>。
+                            測試投入 <span class="text-amber-400 font-bold">${lastTestAX}</span> 顆晶石，
+                            電力變為 <span class="text-cyan-400 font-bold">${lastTestAY}</span>。
                         </p>
                         <div class="bg-slate-800/50 p-4 rounded-xl mb-4 text-center border border-slate-700">
-                            <p class="text-sm text-slate-400">當 x 增加 1，y 增加了 3 (5 → 8)</p>
-                            <span class="text-2xl font-tech block mt-2 text-white"><span class="text-cyan-400">8</span> = a <span class="text-amber-400">× 1</span> + 5</span>
+                            <span class="text-3xl font-tech block mt-2 text-white"><span class="text-cyan-400">${lastTestAY}</span> = a <span class="text-amber-400">× ${lastTestAX}</span> + 5</span>
                         </div>
                         <p class="text-slate-300 mb-4 text-center">請問 <span class="text-amber-400 font-bold">a</span> 是多少？</p>
-                        <div class="flex flex-wrap gap-2 mb-2 items-center justify-center text-2xl font-tech text-amber-400">
+                        <div class="flex flex-wrap gap-2 mb-2 items-center justify-center text-3xl font-tech text-amber-400">
                              <span>a =</span>
-                             <input id="ans-input" type="number" class="tech-input w-24 p-2 rounded text-2xl text-center text-amber-400" placeholder="?" autofocus>
+                             <input id="ans-input" type="number" class="tech-input w-24 p-2 rounded text-3xl text-center text-amber-400" placeholder="?" autofocus>
                              <button onclick="checkPhase4A()" class="w-full md:w-auto px-8 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded-xl font-bold shadow-lg transition-transform hover:scale-105 whitespace-nowrap text-lg font-sans">確認</button>
                         </div>
 
-                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mb-2 animate-bounce bg-slate-900/50 p-2 rounded">${errorMsg}</div>` : ''}
+                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mb-2 border-2 border-red-400 border-dashed animate-pulse bg-slate-900/50 p-2 rounded">${errorMsg}</div>` : ''}
                     `;
                     break;
 
@@ -700,18 +890,18 @@
                 case STATE.PHASE4_VERIFY:
                     formulaBanner.classList.remove('hidden');
                     html = `
-                        <h3 class="text-xl font-bold text-white mb-2">步驟 3：最終驗算</h3>
+                        <h3 class="text-3xl font-bold text-white mb-2">步驟 3：最終驗算</h3>
                         <p class="text-slate-300 mb-4">
                             假設公式為 <span class="font-bold text-white">y = 3x + 5</span>。
                             <br>若投入 <span class="text-amber-400 font-bold">10</span> 顆晶石，電力應為多少？
                         </p>
-                        <div class="flex flex-wrap gap-2 mt-6 items-center justify-center text-2xl font-tech text-white">
+                        <div class="flex flex-wrap gap-2 mt-6 items-center justify-center text-3xl font-tech text-white">
                              <span>y =</span>
-                             <input id="ans-input" type="number" class="tech-input w-24 p-2 rounded text-2xl text-center text-white" placeholder="?" autofocus>
+                             <input id="ans-input" type="number" class="tech-input w-24 p-2 rounded text-3xl text-center text-white" placeholder="?" autofocus>
                              <button onclick="checkPhase4Verify()" class="w-full md:w-auto px-8 py-2 bg-green-600 hover:bg-green-500 text-white rounded-xl font-bold shadow-lg transition-transform hover:scale-105 whitespace-nowrap text-lg font-sans">驗證</button>
                         </div>
                         
-                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mt-4 animate-bounce bg-slate-900/50 p-2 rounded border border-red-500/30">${errorMsg}</div>` : ''}
+                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mt-4 border-2 border-red-400 border-dashed animate-pulse bg-slate-900/50 p-2 rounded">${errorMsg}</div>` : ''}
                     `;
                     break;
 
@@ -719,8 +909,8 @@
                     formulaBanner.classList.remove('hidden'); // Ensure banner is visible
                     html = `
                        <div class="text-center w-full">
-                            <h3 class="text-2xl font-bold text-amber-400 mb-6 drop-shadow-lg">輸入核心密碼 (Core Override)</h3>
-                            <div class="flex items-center justify-center gap-2 text-3xl md:text-4xl font-tech font-bold mb-8 bg-slate-900/80 p-6 rounded-2xl border-2 border-slate-700 w-full max-w-lg mx-auto">
+                            <h3 class="text-3xl font-bold text-amber-400 mb-6 drop-shadow-lg">輸入核心密碼 (Core Override)</h3>
+                            <div class="flex items-center justify-center gap-2 text-4xl md:text-4xl font-tech font-bold mb-8 bg-slate-900/80 p-6 rounded-3xl border-2 border-slate-700 w-full max-w-lg mx-auto">
                                 <span class="text-cyan-400">y</span>
                                 <span class="text-slate-500">=</span>
                                 <input id="final-a" type="number" class="w-20 bg-slate-800 text-amber-400 text-center rounded border border-slate-600 focus:border-amber-400 outline-none p-2" placeholder="?">
@@ -731,6 +921,7 @@
                             <button onclick="unlockCore()" class="w-full py-4 bg-gradient-to-r from-amber-600 to-red-600 text-white rounded-xl font-bold text-xl shadow-lg hover:shadow-amber-500/50 transition-all border border-amber-500/30">
                                 解鎖大門 (UNLOCK)
                             </button>
+                            ${errorMsg ? `<div class="text-red-400 text-center font-bold mt-4 border-2 border-red-400 border-dashed animate-pulse bg-slate-900/50 p-2 rounded text-xl">${errorMsg}</div>` : ''}
                        </div>
                     `;
                     break;
@@ -738,14 +929,14 @@
                 case STATE.PHASE6_INTRO:
                     formulaBanner.classList.add('hidden');
                     html = `
-                        <h2 class="text-2xl font-bold text-cyan-400 mb-4">核心同步程序 (Core Synchronization)</h2>
-                        <p class="text-slate-200 text-lg leading-relaxed mb-6">
+                        <h2 class="text-3xl font-bold text-cyan-400 mb-4">核心同步程序 (Core Synchronization)</h2>
+                        <p class="text-slate-200 text-xl leading-relaxed mb-6">
                             核心已解鎖，但能量極不穩定！<br>
                             我們需要透過<span class="text-amber-400 font-bold">手動脈衝</span>來穩定核心頻率。
                         </p>
                         <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500/30 mb-6 text-center">
                             <p class="text-slate-300 font-bold mb-2">操作說明</p>
-                            <p class="text-sm text-slate-400">
+                            <p class="text-base text-slate-400">
                                 當光圈縮小至<span class="text-cyan-400">中心圓環</span>時，<br>
                                 點擊滑鼠、螢幕或按下空白鍵。
                             </p>
@@ -764,66 +955,67 @@
                     break;
 
                 case STATE.PHASE7_SUMMARY:
-                    box.classList.remove('opacity-0', 'translate-y-20', 'translate-y-full');
-                    // Make sure it's centered and large
-                    box.className = "pointer-events-auto w-full md:w-[800px] glass-panel rounded-2xl p-8 transform transition-all duration-500 min-h-[400px] flex flex-col justify-start shadow-[0_0_50px_rgba(0,0,0,0.5)] bg-slate-900/95 frame-border absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+                    // Break out of the container layout for Full Screen Center
+                    // We modify the box styling directly to be fixed center
+                    box.className = "fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[95%] md:w-[70%] glass-panel rounded-3xl p-8 transition-all duration-500 min-h-[400px] max-h-[90vh] overflow-y-auto flex flex-col justify-start shadow-[0_0_80px_rgba(0,0,0,0.8)] bg-slate-900/95 frame-border z-50 pointer-events-auto";
 
                     const currentScore = rhythmState.score;
                     const highScore = localStorage.getItem('math_city_score_function') || 0;
 
                     html = `
                         <div class="text-center w-full h-full flex flex-col items-center">
-                            <h2 class="text-3xl md:text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-green-400 mb-2 drop-shadow-[0_0_10px_rgba(34,211,238,0.5)] tracking-widest">
+                            <h2 class="text-5xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-green-400 mb-6 drop-shadow-[0_0_15px_rgba(34,211,238,0.6)] tracking-widest">
                                 任務完成 SYSTEM RESTORED
                             </h2>
-                            <div class="text-amber-400 font-tech text-xl mb-4 tracking-[0.5em]">MISSION ACCOMPLISHED</div>
+                            <div class="text-amber-400 font-tech text-4xl mb-10 tracking-[0.5em]">MISSION ACCOMPLISHED</div>
 
                             <!-- Score Board -->
-                            <div class="flex gap-8 mb-6 bg-slate-800/80 px-8 py-4 rounded-xl border border-slate-600">
+                            <div class="flex gap-16 mb-10 bg-slate-800/80 px-16 py-8 rounded-3xl border-2 border-slate-600 transform scale-110">
                                 <div class="text-center">
-                                    <div class="text-xs text-slate-400 uppercase tracking-widest">本次得分</div>
+                                    <div class="text-xl text-slate-400 uppercase tracking-widest mb-2">本次得分</div>
                                     <div class="text-4xl font-black text-cyan-400 font-tech shimmer">${currentScore}</div>
                                 </div>
-                                <div class="w-px bg-slate-600"></div>
+                                <div class="w-px bg-slate-500"></div>
                                 <div class="text-center">
-                                    <div class="text-xs text-slate-400 uppercase tracking-widest">歷史最高</div>
+                                    <div class="text-xl text-slate-400 uppercase tracking-widest mb-2">歷史最高</div>
                                     <div class="text-4xl font-black text-amber-400 font-tech">${highScore}</div>
                                 </div>
                             </div>
 
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full text-left mb-8">
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 w-full text-left mb-12 max-w-6xl">
                                 <!-- Insight 1 -->
-                                <div class="bg-slate-800/50 p-6 rounded-xl border border-cyan-500/20 hover:border-cyan-500/50 transition-colors">
-                                    <h3 class="flex items-center gap-2 text-xl font-bold text-cyan-400 mb-3">
-                                        <span class="text-2xl">🔮</span> 預測未來 (Prediction)
+                                <div class="bg-slate-800/50 p-10 rounded-3xl border border-cyan-500/20 hover:border-cyan-500/50 transition-colors">
+                                    <h3 class="flex items-center gap-4 text-4xl font-bold text-cyan-400 mb-6">
+                                        <span class="text-5xl">🔮</span> 預測未來 (Prediction)
                                     </h3>
-                                    <p class="text-slate-300 leading-relaxed mb-3">
-                                        「當我們知道規則 <span class="bg-slate-900 px-1 rounded text-cyan-300 font-tech">y=ax+b</span> 時，就能精準預測未來的結果。」
+                                    <p class="text-slate-300 text-3xl leading-relaxed mb-4">
+                                        「當我們知道規則 <span class="bg-slate-900 px-3 rounded text-cyan-300 font-tech">y=ax+b</span> 時，就能精準預測未來的結果。」
                                     </p>
-                                    <div class="text-sm text-slate-500 border-t border-slate-700 pt-2">
+                                    <div class="text-xl text-slate-500 border-t border-slate-700 pt-4">
                                         回顧：就像你在階段三，算出需要投入多少晶石才能救急。
                                     </div>
                                 </div>
 
                                 <!-- Insight 2 -->
-                                <div class="bg-slate-800/50 p-6 rounded-xl border border-amber-500/20 hover:border-amber-500/50 transition-colors">
-                                    <h3 class="flex items-center gap-2 text-xl font-bold text-amber-400 mb-3">
-                                        <span class="text-2xl">📐</span> 數學建模 (Modeling)
+                                <div class="bg-slate-800/50 p-10 rounded-3xl border border-amber-500/20 hover:border-amber-500/50 transition-colors">
+                                    <h3 class="flex items-center gap-4 text-4xl font-bold text-amber-400 mb-6">
+                                        <span class="text-5xl">📐</span> 數學建模 (Modeling)
                                     </h3>
-                                    <p class="text-slate-300 leading-relaxed mb-3">
+                                    <p class="text-slate-300 text-3xl leading-relaxed mb-4">
                                         「當規則改變或未知時，我們也能透過觀察數據的變化，反推回公式本身。」
                                     </p>
-                                    <div class="text-sm text-slate-500 border-t border-slate-700 pt-2">
+                                    <div class="text-xl text-slate-500 border-t border-slate-700 pt-4">
                                         回顧：就像你在階段四，透過測試 x=0 和 x=1，重新找回消失的 a 與 b。
                                     </div>
                                 </div>
                             </div>
 
-                            <p class="text-slate-400 italic mb-8">
+                            <p class="text-slate-400 italic mb-12 text-3xl max-w-4xl whitespace-nowrap">
                                 「這就是科學家與工程師的超能力：觀察數據 <span class="text-white">→</span> 找出規則 <span class="text-white">→</span> 預測未來。」
                             </p>
 
-                            <a href="index.html" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-12 rounded-full text-xl shadow-[0_0_20px_rgba(79,70,229,0.5)] transition-all transform hover:scale-105 hover:rotate-1">
+                            <a href="index.html" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-6 px-20 rounded-full text-4xl shadow-[0_0_40px_rgba(79,70,229,0.6)] transition-all transform hover:scale-105 hover:rotate-1">
                                 回到 Math City
                             </a>
                         </div>
@@ -832,7 +1024,7 @@
 
                 case STATE.PHASE4_VERIFY_TEST:
                     html = `
-                        <h3 class="text-xl font-bold text-amber-400 mb-2 font-tech tracking-widest border-b border-amber-500/30 pb-2">
+                        <h3 class="text-3xl font-bold text-amber-400 mb-2 font-tech tracking-widest border-b border-amber-500/30 pb-2">
                            <span class="mr-2">⚡</span> 最終驗證 FINAL VERIFICATION
                         </h3>
                         <p class="text-slate-300 leading-relaxed mb-6">
@@ -841,9 +1033,9 @@
                         </p>
                         
                         <div class="flex items-center gap-4 mb-2">
-                            <span class="text-2xl font-tech text-amber-500">x =</span>
+                            <span class="text-3xl font-tech text-amber-500">x =</span>
                             <div class="relative flex-1">
-                                <input type="number" id="test-input-verify" class="tech-input w-full p-4 rounded-xl text-2xl font-bold" placeholder="輸入 10" autofocus onkeydown="if(event.key==='Enter') runPhase4VerifyManual()">
+                                <input type="number" id="test-input-verify" class="tech-input w-full p-4 rounded-xl text-3xl font-bold" placeholder="輸入 10" autofocus onkeydown="if(event.key==='Enter') runPhase4VerifyManual()">
                                 <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm">晶石</div>
                             </div>
                         </div>
@@ -884,16 +1076,9 @@
 
             if (val === correctY) {
                 playSound('success');
-                addPoint(targetX, correctY);
-
-                qStep++;
-                if (qStep < checkPoints.length) {
-                    // Next question
-                    updateUI();
-                } else {
-                    // All questions done
-                    setTimeout(() => enterPhase(STATE.PHASE2_PATTERN), 500);
-                }
+                // Old: addPoint(targetX, correctY);
+                // New: Go to Coordinate Confirmation Step
+                enterPhase(STATE.PHASE2_COORDINATE);
             } else {
                 playSound('alarm');
                 input.classList.add('animate-shake');
@@ -903,6 +1088,38 @@
             }
         }
 
+        function substituteY() {
+            playSound('swish'); // Optional sound
+            document.getElementById('coord-step-1').classList.add('hidden');
+            const step2 = document.getElementById('coord-step-2');
+            step2.classList.remove('hidden');
+            // Add a small pop animation or effect if desired
+        }
+
+        function plotCoordinate() {
+            const targetX = checkPoints[qStep];
+            const correctY = 2 * targetX + 3;
+
+            addPoint(targetX, correctY);
+
+            // Trigger Animation
+            guideArrowState.active = true;
+            guideArrowState.startTime = Date.now();
+            guideArrowState.targetX = targetX;
+            guideArrowState.targetY = correctY;
+
+            playSound('tick');
+
+            qStep++;
+            if (qStep < checkPoints.length) {
+                // Next question
+                enterPhase(STATE.PHASE2_Q);
+            } else {
+                // All questions done
+                setTimeout(() => enterPhase(STATE.PHASE2_PATTERN), 500);
+            }
+        }
+
         function checkFinalAnswer() {
             const input = document.getElementById('ans-input');
             const val = parseInt(input.value);
@@ -952,18 +1169,26 @@
 
         function runPhase4Test() {
             const input = document.getElementById('test-input');
-            const x = parseInt(input.value);
+            const x = parseFloat(input.value);
 
             if (isNaN(x)) return;
 
-            const y = 3 * x + 5;
-            addPoint(x, y);
-            playSound('tick');
-
             if (x === 0) {
+                const y = 3 * x + 5;
+                addPoint(x, y);
+                playSound('tick');
                 setTimeout(() => {
                     enterPhase(STATE.PHASE4_FIND_B);
                 }, 1000);
+            } else {
+                playSound('alarm');
+                const y = 3 * x + 5;
+                // Don't plot point to avoid confusing them? Or plot it but don't proceed?
+                // User said "don't plot point... show hint".
+                // Hint display logic
+                const hintY = 14;
+                // Wait, if x=3, y=14. Formula y=ax+b becomes 14 = 3a + b.
+                updateUI(`錯誤！若投入 ${x} 顆，電力為 ${y}。<br>公式變為 <span class="text-amber-400 font-tech">${y} = ${x}a + b</span>。<br>a 沒有消失，無法算出 b。只有什麼數字才能讓 a 消失？`);
             }
         }
 
@@ -985,21 +1210,32 @@
             }
         }
 
+        // Global var to store X logic for Phase 4 Step 2
+        let lastTestAX = 1;
+        let lastTestAY = 8;
+
         function runPhase4TestA() {
             const input = document.getElementById('test-input-a');
             const x = parseInt(input.value);
 
-            if (isNaN(x)) return;
+            if (isNaN(x) || x < 1 || x > 9) {
+                playSound('alarm');
+                updateUI("為了方便觀察，請輸入 1 到 9 之間的整數。");
+                input.value = '';
+                return;
+            }
 
             const y = 3 * x + 5;
             addPoint(x, y);
             playSound('tick');
 
-            if (x === 1) {
-                setTimeout(() => {
-                    enterPhase(STATE.PHASE4_FIND_A);
-                }, 1000);
-            }
+            // Store for next step text
+            lastTestAX = x;
+            lastTestAY = y;
+
+            setTimeout(() => {
+                enterPhase(STATE.PHASE4_FIND_A);
+            }, 1000);
         }
 
         function checkPhase4A() {
@@ -1013,7 +1249,7 @@
                 enterPhase(STATE.PHASE4_VERIFY);
             } else {
                 playSound('alarm');
-                updateUI("錯誤！y 從 5 變成了 8，增加了 3。每增加 1 個 x，就增加 a。所以 a 是...？");
+                updateUI(`錯誤，${lastTestAY} = ${lastTestAX}a + 5 則 a = ?`);
             }
         }
 
@@ -1023,10 +1259,28 @@
                 playSound('success');
                 // Auto verification visual
                 addPoint(10, 35);
-                updateUI("預測正確！投入 10 顆晶石，電力確實為 35！");
+                updateUI("預測正確！投入 10 顆晶石，電力確實為 35！<br><span class='text-amber-400 text-base'>(確認點連成一線...)</span>");
+
+                // Disable button
+                const btn = document.querySelector('#dialogue-box button');
+                if (btn) {
+                    btn.disabled = true;
+                    btn.classList.add('opacity-50', 'cursor-not-allowed', 'pointer-events-none');
+                    btn.innerHTML = '驗證成功 Verified';
+                }
+
+                // Add guide text to look at the graph
+                const inputContainer = document.querySelector('#test-input-verify')?.parentElement?.parentElement;
+                if (inputContainer) {
+                    const guide = document.createElement('div');
+                    guide.className = "text-center text-green-400 font-bold mt-2 text-xl animate-pulse";
+                    guide.innerHTML = "請觀察圖表上的點 (10,35)...";
+                    inputContainer.insertAdjacentElement('afterend', guide);
+                }
 
-                // Delay for user to see the result before unlocking
-                setTimeout(() => enterPhase(STATE.PHASE5_UNLOCK), 2500);
+                // Delay for user to see the result matches the line before unlocking
+                // Extended delay to 3.5s to ensure they see the point on the line
+                setTimeout(() => enterPhase(STATE.PHASE5_UNLOCK), 3500);
             } else {
                 playSound('alarm');
                 // Use on-screen hint instead of alert
@@ -1044,9 +1298,17 @@
                 enterPhase(STATE.PHASE6_INTRO);
             } else {
                 playSound('alarm');
-                document.getElementById('start-overlay').classList.remove('hidden'); // Joke: reset? No just shake
-                // Simple shake logic via CSS usually, here just alert
-                alert("密碼錯誤！警報！");
+                const box = document.querySelector('.bg-slate-900\\/80'); // Target container
+                if (box) box.classList.add('animate-shake');
+                setTimeout(() => box && box.classList.remove('animate-shake'), 500);
+
+                // Show hint on screen (simulated by updateUI call inside loop, but here distinct)
+                // Just let user retry, maybe add text
+                // Since updateUI overwrites everything, we just re-render PHASE5_UNLOCK with Error?
+                // But unlockCore is called from button. We can append error.
+                const inputs = document.querySelectorAll('#final-a, #final-b');
+                inputs.forEach(i => i.value = '');
+                updateUI("密碼錯誤！提示：y = 3x + 5 (a=3, b=5)");
             }
         }
 
@@ -1225,6 +1487,9 @@
         function handleMiss() {
             rhythmState.energy = Math.max(0, rhythmState.energy - 2);
             rhythmState.combo = 0;
+            // Penalize score to prevent farming (losing energy to re-gain points)
+            // Deduction = Potential gain of a Perfect Hit (500)
+            rhythmState.score = Math.max(0, rhythmState.score - 500);
             spawnFloatingText("MISS", '#ef4444');
             playSound('alarm');
         }
@@ -1409,12 +1674,12 @@
             // Desktop: Graph takes up right 55% of screen. Mobile: Centered.
             const isDesktop = width > 768;
 
-            const gw = isDesktop ? width * 0.5 : Math.min(600, width - 40);
+            const gw = isDesktop ? width * 0.53 : Math.min(600, width - 40);
             const gh = isDesktop ? height * 0.6 : Math.min(400, height * 0.5);
 
-            // On Desktop, position graph on the right side (Start at 45% width)
+            // On Desktop, position graph on the right side (Start at 44% width)
             // On Mobile, center it
-            const gx = isDesktop ? (width * 0.45) : (width - gw) / 2;
+            const gx = isDesktop ? (width * 0.44) : (width - gw) / 2;
             const gy = isDesktop ? height * 0.2 : height * 0.1;
 
             // BG - Darker background for graph area to make it pop against the global image
@@ -1440,7 +1705,7 @@
 
             // Grid
             ctx.textAlign = 'center';
-            ctx.font = 'bold 12px monospace';
+            ctx.font = 'bold 20px "Orbitron", sans-serif';
 
             const jumpX = graphScale.xMax > 20 ? 10 : 1;
             for (let i = 0; i <= graphScale.xMax; i += jumpX) {
@@ -1484,6 +1749,20 @@
                 ctx.stroke();
             }
 
+            // Phase 4: Draw line y = 3x + 5 (After finding a)
+            if (currentState >= STATE.PHASE4_VERIFY) {
+                ctx.beginPath();
+                ctx.strokeStyle = '#fbbf24'; // Amber Line for new formula
+                ctx.lineWidth = 2;
+                ctx.setLineDash([5, 5]); // Dashed line to show it's a prediction/new model
+                const endX = graphScale.xMax;
+                const endY = 3 * endX + 5;
+                ctx.moveTo(ox, oy - 5 * unitY); // Start at (0, 5)
+                ctx.lineTo(ox + endX * unitX, oy - endY * unitY);
+                ctx.stroke();
+                ctx.setLineDash([]); // Reset dash
+            }
+
             collectedPoints.forEach(p => {
                 const px = ox + p.x * unitX;
                 const py = oy - p.y * unitY;
@@ -1495,8 +1774,8 @@
                 ctx.stroke();
 
                 // Color coded coordinates: (x, y)
-                ctx.font = 'bold 14px monospace';
-                const textY = py - 12; // Position above point
+                ctx.font = 'bold 24px Orbitron'; // Point Numbers Increased
+                const textY = py - 24; // Position higher up for larger font
 
                 // Measure text to center it
                 const strX = `${p.x}`;
@@ -1516,6 +1795,11 @@
                 ctx.fillStyle = '#22d3ee'; ctx.fillText(strY, cursorX + wY / 2, textY); cursorX += wY; // Cyan Y
                 ctx.fillStyle = '#cbd5e1'; ctx.fillText(")", cursorX + w2 / 2, textY);
             });
+
+            // Draw Guide Arrows if active (Coordinate Animation)
+            if (guideArrowState.active && (currentState === STATE.PHASE2_COORDINATE || currentState === STATE.PHASE2_Q)) {
+                drawGuideArrows();
+            }
         }
 
         function updateParticles() {
@@ -1559,8 +1843,8 @@
                 drawRhythmBackground();
                 drawRhythmGame();
                 drawCore();
-            } else if (currentState === STATE.PHASE7_SUMMARY) {
-                // Summary Mode
+            } else if (currentState >= STATE.PHASE6_INTRO) {
+                // Intro & Summary Mode (Use Rhythm BG)
                 drawRhythmBackground();
                 drawCore();
             } else {

sequence.html

@@ -1010,6 +1010,11 @@
             if (isStairsVanished) return;
             isStairsVanished = true;
 
+            // Fix: Disable jumping (including coyote time) to force fall
+            player.isGrounded = false;
+            player.coyoteTimer = 0;
+            player.jumpCount = MAX_JUMPS;
+
             platforms = platforms.filter(p => p.type !== 'temp_stair');
 
             const hint = document.getElementById('story-hint');