diff --git a/.gitattributes b/.gitattributes
index 9f3a11e26b1ad4061134e0b7e9962988af9f73a8..93ee0ccce3f7ca70a1d86d04d8a8c434f8a619f5 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -82,3 +82,52 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 11402/Assets/triangle/嫌疑犯/8列車長.png filter=lfs diff=lfs merge=lfs -text
 11402/Assets/triangle/嫌疑犯/9_DJ.png filter=lfs diff=lfs merge=lfs -text
 11402/Assets/triangle/嫌疑犯/嫌疑犯.png filter=lfs diff=lfs merge=lfs -text
+Assets/index/functionbg.png filter=lfs diff=lfs merge=lfs -text
+Assets/index/indexbg.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/犯罪證明.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/紅.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/黃.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/綠.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/藍.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/AAS紅.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/AAS黃.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/AAS綠.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/AAS藍.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/ASA紅.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/ASA黃.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/ASA綠.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/ASA藍.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/RHS紅.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/RHS黃.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/RHS綠.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/RHS藍.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/SAS紅.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/SAS黃.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/SAS綠.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/犯罪證明/SAS藍.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/蛛絲馬跡/蛛絲馬跡.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/10芭蕾舞者.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/11醫生.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/12教宗.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/13軍人.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/14音樂家.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/15壽司師傅.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/16造型師.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/17和尚.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/18歌手.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/19藍球員.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/1漁夫.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/20漫畫家.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/21郵差.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/22法官.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/25殺手.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/27太空人.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/2農夫.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/3女僕.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/4廚師.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/5冰淇淋師傅.png filter=lfs diff=lfs merge=lfs -text
+Assets/triangle/嫌疑犯/6棋士.png filter=lfs diff=lfs merge=lfs -text
+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
diff --git a/Assets/index/functionbg.png b/Assets/index/functionbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..48ad4a34bf07ee308e23b37144431af540d8d68a
--- /dev/null
+++ b/Assets/index/functionbg.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e9e70960c8f2f1067a15ec58f80bb3988e3c6be907c310e892de40e6d2f52663
+size 9232192
diff --git a/Assets/index/indexbg.png b/Assets/index/indexbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..24a553d490b3f280541ea6f652984b1a614ffc79
--- /dev/null
+++ b/Assets/index/indexbg.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bf47bb539a0cdb233e45b06330cc3d21ba9297b6f452b162d796ad4674888b0e
+size 9287054
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/10\350\212\255\350\225\276\350\210\236\350\200\205.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/10\350\212\255\350\225\276\350\210\236\350\200\205.png"
new file mode 100644
index 0000000000000000000000000000000000000000..18e3bababeb6f65a72b861ece34b968feaba5b08
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/10\350\212\255\350\225\276\350\210\236\350\200\205.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:be4dcca0db21c89f03d1440ef5c20c0d1d7ccf7e1c4e1d4f4ca5d7c2cd431dbb
+size 288410
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/11\351\206\253\347\224\237.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/11\351\206\253\347\224\237.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f73ea7982b5a7b01f8e3df51f11faaa317e06c70
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/11\351\206\253\347\224\237.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cc91841701cb508c199632468fb72fcfe58e400cbd8989f0850793044f606492
+size 217838
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/12\346\225\231\345\256\227.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/12\346\225\231\345\256\227.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc18601c996f76ed2ce46bf16d259d9e1f13e0e
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/12\346\225\231\345\256\227.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:690810c336c75fd2a61e8ec61a3d38f4caed33fb640533c1fa9589e822b72161
+size 184772
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/13\350\273\215\344\272\272.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/13\350\273\215\344\272\272.png"
new file mode 100644
index 0000000000000000000000000000000000000000..86704e8c1cc207eb524a8b81acf65cc58ecb934e
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/13\350\273\215\344\272\272.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:34e4e7766b887a9e82feae71da58e79132068556d66d1605f985ad68dad9f873
+size 395723
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/14\351\237\263\346\250\202\345\256\266.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/14\351\237\263\346\250\202\345\256\266.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1456b079a68387df859ea35c5596ed093e31144b
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/14\351\237\263\346\250\202\345\256\266.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b482a55845ba14664c9653223b077bde87473325468c6705e877d68346cd1c54
+size 220434
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/15\345\243\275\345\217\270\345\270\253\345\202\205.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/15\345\243\275\345\217\270\345\270\253\345\202\205.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a601d850ad51388fdb30eaefe44b2d242fa482b3
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/15\345\243\275\345\217\270\345\270\253\345\202\205.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21262f3b09286b80a3c846dd9ff966cde9ec31ded781c54fd4e391ceef83ff97
+size 234482
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/16\351\200\240\345\236\213\345\270\253.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/16\351\200\240\345\236\213\345\270\253.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bc8c9e5dbe6749f0ac96fc2b1a6819aa31929b8a
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/16\351\200\240\345\236\213\345\270\253.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:126eeb3f595fc07e877d09b0a7fc8cd2b1bae42b894d6d79284c5bd99005fdbd
+size 247818
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/17\345\222\214\345\260\232.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/17\345\222\214\345\260\232.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4a27cd8950ff35b66a5aa42b3ce28c848f45d678
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/17\345\222\214\345\260\232.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2edac0d26d1d328b8a3eea0639299accb2feed4d3dc7fbffe6b35190e7a84219
+size 264014
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/18\346\255\214\346\211\213.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/18\346\255\214\346\211\213.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f696c59da50a8252fad153095deff7dd3fccdfcf
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/18\346\255\214\346\211\213.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d7b2562dbef2746f12b858b165c86c87e7c506923dff94783e1332cdab8708f6
+size 374804
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/19\350\227\215\347\220\203\345\223\241.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/19\350\227\215\347\220\203\345\223\241.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4ef0b5536637c7d726caa3b206bb99fbbdeda086
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/19\350\227\215\347\220\203\345\223\241.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1cff12ac11bc1d2dfd5b2358bd35e675d3775ea2a194c487f8e8bd97d37ed0b0
+size 250315
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/1\346\274\201\345\244\253.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/1\346\274\201\345\244\253.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d95365a6a1f2d44edc879ddcc0eb6a1774e3e6ec
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/1\346\274\201\345\244\253.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:11d30065ee88cdb0636ace077076ff8424769a6737d4e7f1647b35551c92d614
+size 370744
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/20\346\274\253\347\225\253\345\256\266.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/20\346\274\253\347\225\253\345\256\266.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ec03e74700b64fca80954754d348db077354d492
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/20\346\274\253\347\225\253\345\256\266.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fdc53d856191842ed622ca99fc21b93f9a3b17bf95946d20aa0747b8479babef
+size 285509
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/21\351\203\265\345\267\256.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/21\351\203\265\345\267\256.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0f3060bd1f96d024d40cc1345427fcf98b8dacdb
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/21\351\203\265\345\267\256.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a249ecd8e88702fcb21b8165c75669e48b5a2d61ff9300a693076bc7d36e05df
+size 286239
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/22\346\263\225\345\256\230.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/22\346\263\225\345\256\230.png"
new file mode 100644
index 0000000000000000000000000000000000000000..09cc91826b28600b2301ff8a50f0267918b3b562
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/22\346\263\225\345\256\230.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f274d6c5cce895a93256da462d9bead83413a551af791c32045eca5b79d36d09
+size 273654
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/23\351\205\222\344\277\235.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/23\351\205\222\344\277\235.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9ff2eff28d3783bac4245ced4cb804c66de3fbec
Binary files /dev/null and "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/23\351\205\222\344\277\235.png" differ
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/24\351\255\224\350\241\223\345\270\253.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/24\351\255\224\350\241\223\345\270\253.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6d9c1c25cd0eec76f0b51b04ab9907fb7ccc6183
Binary files /dev/null and "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/24\351\255\224\350\241\223\345\270\253.png" differ
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/25\346\256\272\346\211\213.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/25\346\256\272\346\211\213.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c3342793467e2114df6918d584b9c2a775c90384
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/25\346\256\272\346\211\213.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2f11c073cfa13e0a5afdbe6e09055a46b371f3c909de2c0b0792162e3e1e7a9c
+size 309502
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/26\344\277\235\345\205\250.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/26\344\277\235\345\205\250.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4ad626a0bf175f34b11c8986f78b8973cd3e1790
Binary files /dev/null and "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/26\344\277\235\345\205\250.png" differ
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/27\345\244\252\347\251\272\344\272\272.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/27\345\244\252\347\251\272\344\272\272.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7ab84be1b77185d48b84075d4234c886a45dc5df
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/27\345\244\252\347\251\272\344\272\272.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:118ab9aaf572277a8fedbbdfaeecbc51c13f81deb8a34a7911f7e5821a3dbe4e
+size 125794
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/28\347\247\221\345\255\270\345\256\266.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/28\347\247\221\345\255\270\345\256\266.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0fde9f6ba9b886c0e3da8d315e01f16dc8ca4d73
Binary files /dev/null and "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/28\347\247\221\345\255\270\345\256\266.png" differ
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/2\350\276\262\345\244\253.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/2\350\276\262\345\244\253.png"
new file mode 100644
index 0000000000000000000000000000000000000000..baa77716981ea40aa2e3722725d36e6ca019a678
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/2\350\276\262\345\244\253.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b45b31a18791610bf44dc6528cfa7ebcd156db9f9988dc499281c1ceb4a2b624
+size 260605
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/3\345\245\263\345\203\225.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/3\345\245\263\345\203\225.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0f91bb49e49d16bbffac6edbc17db4eb9a0f43d3
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/3\345\245\263\345\203\225.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8bbf05e2d05e30699d9ba5f29e4cda23101c8d4466f86065e9cd87a68dc844d7
+size 267506
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/4\345\273\232\345\270\253.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/4\345\273\232\345\270\253.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5c0ea7f51334d806ba50b8293fc3002e7bcabd80
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/4\345\273\232\345\270\253.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a0aa7124e51afd2113e1260b86844fa4bbc658432e01752108227c90bfb04a7f
+size 204087
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/5\345\206\260\346\267\207\346\267\213\345\270\253\345\202\205.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/5\345\206\260\346\267\207\346\267\213\345\270\253\345\202\205.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ffbf52f951f369c4b8fd67129a55738c88715cad
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/5\345\206\260\346\267\207\346\267\213\345\270\253\345\202\205.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b82559b6b648e7160739e153b98ae3cb50f52ccf9cb8525bab1e5ba8c307a9b
+size 295618
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/6\346\243\213\345\243\253.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/6\346\243\213\345\243\253.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c4c5a3d552c99cc618f23bb7bfb3d2ec704890e3
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/6\346\243\213\345\243\253.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:55296b0335ac30a3006d83464004050fe45d0b380a1383bec4f4b8f69ac43f39
+size 262937
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/7\345\200\231\351\201\270\344\272\272.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/7\345\200\231\351\201\270\344\272\272.png"
new file mode 100644
index 0000000000000000000000000000000000000000..36a7712af302f9820c7a1d9e525b4df802ea82ca
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/7\345\200\231\351\201\270\344\272\272.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:875d8e2d5e1065a28982402d4b30d6478e109d67911bc92315f6c8445fa071cf
+size 220162
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/8\345\210\227\350\273\212\351\225\267.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/8\345\210\227\350\273\212\351\225\267.png"
new file mode 100644
index 0000000000000000000000000000000000000000..74537f83e345e4a1a4e55bef83e8f8b114e3fb72
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/8\345\210\227\350\273\212\351\225\267.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bf9fbb513056b79b35cc305551aa7f55b63df58fa55b8936cd986aed3b418941
+size 197085
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/9_DJ.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/9_DJ.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2268b7d24104dd1b775ae31efc8e04d2d134058e
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/9_DJ.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:95e2a7b895448e491bcfb0a306309830c4612ed240d72c6ba0e53d626d1d4eaa
+size 293898
diff --git "a/Assets/triangle/\345\253\214\347\226\221\347\212\257/\345\253\214\347\226\221\347\212\257.png" "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/\345\253\214\347\226\221\347\212\257.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c4ea48dae3a39f3d6c70b4f1c0227dde3723d8d0
--- /dev/null
+++ "b/Assets/triangle/\345\253\214\347\226\221\347\212\257/\345\253\214\347\226\221\347\212\257.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7b7cb98d88df26a515e139aadbe8d9de3e120c302c2b49a89c972a0c586a9d22
+size 1029359
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\347\264\205.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\347\264\205.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b932c0552f3ee676bdb0b1b0684376d426272a5e
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\347\264\205.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f5481642fc39c45ecf1485d59bf6f302592a9992771df63d0ccf91fff2d644c0
+size 412943
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\347\266\240.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\347\266\240.png"
new file mode 100644
index 0000000000000000000000000000000000000000..71ae9096326a8f73152a4b76a552a93966083225
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\347\266\240.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e91520fcabcd7037063be14ff35dc4f31706159c1f66531b65b9f2b3058068cd
+size 418153
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\350\227\215.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\350\227\215.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fa1ef2356d60c53032214126fbd346630bc8dd21
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\350\227\215.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5be6cbfc242f2a660e60f30bb68a9b15e8c91e00c3a17a501a288a26c2249fb7
+size 414220
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\351\273\203.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\351\273\203.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b393785cf0de213ef5af8ac1a127e9e333b3c6a6
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/AAS\351\273\203.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3fd52adbe7ff5d9c6b148e4eae2825bc5778349704333fad0a623b3496fbf5d7
+size 378496
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\347\264\205.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\347\264\205.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a1f8570d65a6a3bf57a6b293c984f7c7167fa080
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\347\264\205.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6691646543b9ce596852b549077a38b66a7fb35fa177bf80ee75048a6fba9a4c
+size 411736
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\347\266\240.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\347\266\240.png"
new file mode 100644
index 0000000000000000000000000000000000000000..95a5f381cfe37bca3203ae93d78e348204324342
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\347\266\240.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:891f23766791e93f65f4c976527282821a605ac5a7cbf2283d1df32f2d1cd0bd
+size 417373
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\350\227\215.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\350\227\215.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c1841384a1559897654b41ff664f7a5241583327
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\350\227\215.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8e204ebd1a770997d7bb6da458a471f12913908d5bb420fe762d67b8873d2c7d
+size 412934
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\351\273\203.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\351\273\203.png"
new file mode 100644
index 0000000000000000000000000000000000000000..1b758013dbe6f96910e497ff85aef23b63d6fba0
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/ASA\351\273\203.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:575393e84ef86f32504d3cde4a97a4e9e35e3ce6a88b06a06a9f04b656f72112
+size 377552
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\347\264\205.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\347\264\205.png"
new file mode 100644
index 0000000000000000000000000000000000000000..44dbd1078a1ad536e9eb1c2381fde1af9c0c9ce5
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\347\264\205.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0f533338d87c81ec353954e189d93646585ac87c5992c7af05d66ed37bff6356
+size 410828
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\347\266\240.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\347\266\240.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5c7a19f31fb3a0fdac91cf8461c99465ed5d7384
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\347\266\240.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a7f1f542c594a016c529593fcd634cc24611130b628b889b8b40b27dd6b0ab7e
+size 415341
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\350\227\215.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\350\227\215.png"
new file mode 100644
index 0000000000000000000000000000000000000000..807240901c2617a626ecc812aea94f88ab8ca89e
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\350\227\215.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1c2211f6bbbc8c1f672bccbd1fe6934d2940ecc9ff471d033b201ccb82bd56b7
+size 411750
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\351\273\203.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\351\273\203.png"
new file mode 100644
index 0000000000000000000000000000000000000000..04b72962f9c6b20fb012cbc2f250d17cd2a98634
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/RHS\351\273\203.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:25f0f95f9479692e34672c6bbea0ae0d3dc725ff48b9d82485f011ce59e6e89b
+size 375776
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\347\264\205.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\347\264\205.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d2accede6b82ad92133ba94a130192dadf35e205
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\347\264\205.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6725804f20b015cf7571b3f1e0b585bfc751a88cedd23c4cea54579c167ab4b8
+size 417185
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\347\266\240.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\347\266\240.png"
new file mode 100644
index 0000000000000000000000000000000000000000..09498aa74ddef95f9cc74aba2c3f47ab3862402d
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\347\266\240.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:471ab770bcb5b6b54929072b77da55b1fd12fb61b2090dee64652ed481f94111
+size 421774
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\350\227\215.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\350\227\215.png"
new file mode 100644
index 0000000000000000000000000000000000000000..026fbf930ec4dbe35ecd4b88849fce2569a6f37b
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\350\227\215.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3f36ab84e4fc6b7cf65e39b89da9b381c18f2455a823c8507e2560f19af0757d
+size 417857
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\351\273\203.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\351\273\203.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4eb0ebe4c9f9a2fb5b86db4ed67066d73451959a
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/SAS\351\273\203.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b21dcd0c617d331629e8025e4602385e7ff29aa221cd58d976040093eb5dd64e
+size 381444
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\212\257\347\275\252\350\255\211\346\230\216.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\212\257\347\275\252\350\255\211\346\230\216.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ae03f84bd26ffdc65f6638c1a7ad35630b42b2fd
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\212\257\347\275\252\350\255\211\346\230\216.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a4ae350238d738a74c5d7026c53938e9586655150426ad72c04b90b6dd24b7f6
+size 2386791
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\264\205.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\264\205.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c4f2c447e0bf1db38c302c8519304cc47742969a
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\264\205.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c29f1c5b115d6ad2b1342d83e58f3d0b356be394dba3635809c08a4aab8866b4
+size 158659
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\266\240.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\266\240.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ee0e5e23a0f91bffc9268f26084ffceb057ab0b4
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\347\266\240.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e09e8bac24d9fc2b747ab6f94f1213e9a819f71700c7c458ac9f1562c7f5d02d
+size 162207
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\350\227\215.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\350\227\215.png"
new file mode 100644
index 0000000000000000000000000000000000000000..57155b6db5331d2fedda05fa4f918ad9091d109a
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\350\227\215.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:67ae86c11fd8846f1c7cb7240823f171a9b95592b04e0913dcb154ce8d059a91
+size 162360
diff --git "a/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\351\273\203.png" "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\351\273\203.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3f0d0a26a080bd518ff85d949be2768d07e2291b
--- /dev/null
+++ "b/Assets/triangle/\347\212\257\347\275\252\350\255\211\346\230\216/\351\273\203.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:22ca1407c9a7dd03cc0459114a55fa4e77c749c9a2018c0d3f5028241102acae
+size 146793
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/1.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3bd6a9953e249aaf0a66f9c651a09b388ebb0785
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/1.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/10.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/10.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d521bfc5a53c3cb193be275e549a42988dce31dd
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/10.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/11.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/11.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8a1455b1a9249cadef8ba767a8561b0e3e13f876
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/11.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/12.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/12.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a87bc08823d25bb6fe957715a819b46e7711df55
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/12.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/13.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/13.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e1c473de5d1a88e77b7d7a7263b2e9716e0915b8
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/13.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/14.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/14.png"
new file mode 100644
index 0000000000000000000000000000000000000000..02a138d0fdf2327f202e0fce76b0c8f026a0d030
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/14.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/15.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/15.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fb5e5607d56f6f002756e18eb6d0c427cfaae0a2
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/15.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/16.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/16.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fa4f40332d0711a55c677279e483aaed5c96b1ca
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/16.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/17.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/17.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bc41b4991310b9fc18963cefd204e8c7a275c2f0
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/17.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/18.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/18.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6cf56a5947a0544cd2fbfdb999880d3f0f141833
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/18.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/19.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/19.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4ec21b296b2e23f792d6af91a6203c5d66c9d95b
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/19.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/2.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6dbc93bc4a5d597fed27ed8f1ec7c41d24a84a2d
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/2.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/20.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/20.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8ee12e3cc7ceaf0eb7e12ae8a81fa581d8e99921
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/20.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/21.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/21.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5cc9e141e79aab46600f5067a7469dac4d216563
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/21.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/22.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/22.png"
new file mode 100644
index 0000000000000000000000000000000000000000..38b9f2d35ad345ab280050d4ad7d372f6ed70268
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/22.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/23.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/23.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fd6c7e978331a19c1d815e455fe80596a5fb9888
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/23.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/24.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/24.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6de6308b2d07e01744f0dc8c46c9fe81ae82991f
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/24.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/25.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/25.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2578c214e53c956f511c98cc4a577e32ac7ea8c1
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/25.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/26.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/26.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a372be066e13c8ba0fa62e023ad8214e32ec395b
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/26.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/27.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/27.png"
new file mode 100644
index 0000000000000000000000000000000000000000..693e12e77f653c3b4cbc44c3e00e3bbaba5697d6
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/27.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/28.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/28.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ed9b89bbf21d67b896514db72cabccbcf440d384
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/28.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/3.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..03d770926a4b876af6d2fccc8ee5af7bda002c9a
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/3.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/4.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d38ef79b8aef53646478f62b91483498421630a1
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/4.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/5.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..24b093141905828e16abec4e573e071d3abe946c
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/5.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/6.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..942da4c1623b04dd22255a0e76e9690194126083
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/6.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/7.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9f45b2dc83438bc80974d9860ed9409242631aad
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/7.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/8.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/8.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ff9e29bd323b9aa98a6b5750e14da284c8247e58
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/8.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/9.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/9.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6d116890c94908e121b2c42a74cee98d6844aeef
Binary files /dev/null and "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/9.png" differ
diff --git "a/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/\350\233\233\347\265\262\351\246\254\350\267\241.png" "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/\350\233\233\347\265\262\351\246\254\350\267\241.png"
new file mode 100644
index 0000000000000000000000000000000000000000..09ef194b8944d823817b9e6fea6f80444673b9b0
--- /dev/null
+++ "b/Assets/triangle/\350\233\233\347\265\262\351\246\254\350\267\241/\350\233\233\347\265\262\351\246\254\350\267\241.png"
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dcc8b16d251f1300f6709ab5f5267a7e5f2eaf24d45e2e2617a797e39fe5a8de
+size 1820542
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..879b0a06b07da5b000bb80db0de3320638ec7292
--- /dev/null
+++ b/README.md
@@ -0,0 +1,130 @@
+# 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*
diff --git a/function.html b/function.html
new file mode 100644
index 0000000000000000000000000000000000000000..7d144d59b7786be50b82a65e4192b4a4610b9eff
--- /dev/null
+++ b/function.html
@@ -0,0 +1,1533 @@
+<!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>能源核心 - The Energy Core</title>
+
+    <!-- Google Fonts -->
+    <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">
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            background-color: #0f172a;
+            /* Slate 900 */
+            color: white;
+            overflow: hidden;
+            /* No scrollbars */
+            -webkit-user-select: none;
+            user-select: none;
+            /* Global Background */
+            background-image: url('Assets/index/functionbg.png');
+            background-size: cover;
+            background-position: center;
+        }
+
+        /* Dark overlay for the whole page */
+        #global-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background: rgba(15, 23, 42, 0.6);
+            /* Semi-transparent Slate 900 */
+            z-index: -1;
+        }
+
+        /* Canvas as fixed background behind UI but above bg image */
+        #gameCanvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: 0;
+        }
+
+        /* Tech UI Styling */
+        .glass-panel {
+            background: rgba(15, 23, 42, 0.95);
+            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);
+        }
+
+        .font-tech {
+            font-family: 'Orbitron', sans-serif;
+        }
+
+        /* Input Styling */
+        .tech-input {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid #475569;
+            color: #22d3ee;
+            font-family: 'Orbitron', sans-serif;
+            transition: all 0.3s ease;
+            text-align: center;
+        }
+
+        .tech-input:focus {
+            outline: none;
+            border-color: #22d3ee;
+            box-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
+        }
+
+        /* Hide Scrollbar completely */
+        ::-webkit-scrollbar {
+            display: none;
+        }
+
+        * {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+    </style>
+</head>
+
+<body>
+
+    <!-- Global Dark Overlay -->
+    <div id="global-overlay"></div>
+
+    <!-- Background Canvas -->
+    <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>
+            </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 -->
+        </div>
+
+    </div>
+
+    <!-- Start Overlay -->
+    <div id="start-overlay"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm">
+        <div class="text-center relative z-10">
+            <h1
+                class="text-6xl md:text-8xl font-black text-white mb-2 tracking-widest drop-shadow-[0_0_15px_rgba(34,211,238,0.8)]">
+                能源核心
+            </h1>
+            <h2
+                class="text-2xl md:text-3xl 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">
+                <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">
+                </div>
+            </button>
+        </div>
+    </div>
+
+    <!-- Credits -->
+    <div class="fixed top-2 right-2 text-right text-[10px] text-slate-500 z-50">
+        <div>Designed by L.Star</div>
+    </div>
+
+    <script>
+        // --- Game Constants & State ---
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        let width, height;
+
+        // Formula: y = ax + b
+        let currentA = 2;
+        let currentB = 3;
+
+        const STATE = {
+            INIT: 0,
+            STORY_BRIEF: 1,
+            PHASE1_INTRO: 2,
+            PHASE2_Q: 3,     // General Question State
+            PHASE2_PATTERN: 4,
+            PHASE2_PREDICTION_INTRO: 4.5,
+            PHASE3_CRISIS: 5,
+            SUCCESS: 6,
+            PHASE4_INTRO: 8,
+            PHASE4_TEST_B: 8.5,
+            PHASE4_FIND_B: 9,
+            PHASE4_TEST_A: 9.5,
+            PHASE4_FIND_A: 10,
+            PHASE4_VERIFY: 11,
+            PHASE4_VERIFY_TEST: 11.5,
+            PHASE5_UNLOCK: 12,
+            PHASE6_INTRO: 13,
+            PHASE6_GAME: 14,
+            PHASE7_SUMMARY: 15,
+            FAIL: 7
+        };
+
+        const checkPoints = [2, 5, 1, 3, 4]; // The sequence of Xs to check
+
+        let collectedPoints = [];
+        let particles = [];
+        let graphScale = { xMax: 10, yMax: 20 };
+        let corePulse = 1.0;
+        let coreRotation = 0;
+
+        // --- Phase 6: Rhythm Game State ---
+        let rhythmState = {
+            active: false,
+            energy: 0,        // 0 to 100
+            score: 0,
+            combo: 0,
+            maxCombo: 0,
+            circles: [],      // Array of falling circles
+            lastSpawnTime: 0,
+            spawnInterval: 1200, // ms
+            texts: []         // Floating texts (Perfect/Good)
+        };
+        const CORE_RADIUS = 80; // Acceptance radius (Matches visual core size)
+
+        // --- State Variables ---
+        let qStep = 0;
+        let currentState = STATE.INIT;
+
+        // --- Audio ---
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        function playSound(type) {
+            if (audioCtx.state === 'suspended') audioCtx.resume();
+            const now = audioCtx.currentTime;
+            const osc = audioCtx.createOscillator();
+            const gain = audioCtx.createGain();
+            osc.connect(gain);
+            gain.connect(audioCtx.destination);
+
+            if (type === 'tick') {
+                osc.frequency.setValueAtTime(800, now);
+                osc.frequency.exponentialRampToValueAtTime(1200, now + 0.05);
+                gain.gain.setValueAtTime(0.05, now);
+                gain.gain.linearRampToValueAtTime(0, now + 0.05);
+                osc.start(now); osc.stop(now + 0.05);
+            } else if (type === 'success') {
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(440, now);
+                osc.frequency.setValueAtTime(659, now + 0.1); // E
+                osc.frequency.setValueAtTime(880, now + 0.2); // A
+                gain.gain.setValueAtTime(0.2, now);
+                gain.gain.linearRampToValueAtTime(0, now + 0.5);
+                osc.start(now); osc.stop(now + 0.5);
+            } else if (type === 'alarm') {
+                osc.type = 'sawtooth';
+                osc.frequency.setValueAtTime(200, now);
+                osc.frequency.linearRampToValueAtTime(100, now + 0.3);
+                gain.gain.setValueAtTime(0.2, now);
+                gain.gain.linearRampToValueAtTime(0, now + 0.3);
+                osc.start(now); osc.stop(now + 0.3);
+            } else if (type === 'hit_perfect') {
+                // High pitch ping
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(1200, now);
+                osc.frequency.exponentialRampToValueAtTime(800, now + 0.1);
+                gain.gain.setValueAtTime(0.3, now);
+                gain.gain.linearRampToValueAtTime(0, now + 0.1);
+                osc.start(now); osc.stop(now + 0.1);
+            } else if (type === 'hit_good') {
+                // Mid pitch
+                osc.type = 'triangle';
+                osc.frequency.setValueAtTime(600, now);
+                gain.gain.setValueAtTime(0.2, now);
+                gain.gain.linearRampToValueAtTime(0, now + 0.1);
+                osc.start(now); osc.stop(now + 0.1);
+            }
+        }
+
+        // --- BGM System ---
+        let bgmNodes = [];
+        let isBgmPlaying = false;
+
+        function startRhythmBGM() {
+            if (isBgmPlaying) return;
+            isBgmPlaying = true;
+            if (audioCtx.state === 'suspended') audioCtx.resume();
+
+            // Simple "Techno" Loop using Oscillator interactions
+            const baseFreq = 110; // A2
+            const oscLow = audioCtx.createOscillator();
+            const oscHigh = audioCtx.createOscillator();
+            const gainLow = audioCtx.createGain();
+            const gainHigh = audioCtx.createGain();
+
+            oscLow.type = 'square';
+            oscLow.frequency.value = baseFreq;
+            oscHigh.type = 'sawtooth';
+            oscHigh.frequency.value = baseFreq * 2;
+
+            // LFO for rhythmic pulsing
+            const lfo = audioCtx.createOscillator();
+            lfo.type = 'square';
+            lfo.frequency.value = 4; // 240 BPM pulses (fast)
+            const lfoGain = audioCtx.createGain();
+            lfoGain.gain.value = 0.5;
+
+            lfo.connect(lfoGain);
+            lfoGain.connect(gainLow.gain);
+            lfoGain.connect(gainHigh.gain);
+
+            oscLow.connect(gainLow);
+            oscHigh.connect(gainHigh);
+            gainLow.connect(audioCtx.destination);
+            gainHigh.connect(audioCtx.destination);
+
+            // Base volume
+            gainLow.gain.setValueAtTime(0.1, audioCtx.currentTime);
+            gainHigh.gain.setValueAtTime(0.05, audioCtx.currentTime);
+
+            oscLow.start();
+            oscHigh.start();
+            lfo.start();
+
+            bgmNodes = [oscLow, oscHigh, lfo];
+        }
+
+        function stopRhythmBGM() {
+            if (!isBgmPlaying) return;
+            bgmNodes.forEach(node => {
+                try { node.stop(); } catch (e) { }
+                try { node.disconnect(); } catch (e) { }
+            });
+            bgmNodes = [];
+            isBgmPlaying = false;
+        }
+
+        // --- Lifecycle ---
+        function startGame() {
+            // Robust Audio Unlock
+            if (audioCtx.state === 'suspended') {
+                audioCtx.resume().then(() => {
+                    const osc = audioCtx.createOscillator();
+                    const gain = audioCtx.createGain();
+                    gain.gain.value = 0;
+                    osc.connect(gain);
+                    gain.connect(audioCtx.destination);
+                    osc.start(0);
+                    osc.stop(0.1);
+                    console.log("Audio Context Resumed");
+                    playSound('tick');
+                });
+            } else {
+                playSound('tick');
+            }
+
+            document.getElementById('start-overlay').classList.add('hidden');
+            resize();
+            window.addEventListener('resize', resize);
+
+            // Input for Rhythm Game
+            window.addEventListener('keydown', (e) => {
+                if (e.code === 'Space' && currentState === STATE.PHASE6_GAME) {
+                    handleRhythmInput();
+                }
+            });
+            window.addEventListener('mousedown', (e) => {
+                if (currentState === STATE.PHASE6_GAME) {
+                    handleRhythmInput();
+                }
+            });
+            window.addEventListener('touchstart', (e) => {
+                if (currentState === STATE.PHASE6_GAME) {
+                    handleRhythmInput();
+                    e.preventDefault(); // Prevent zoom/scroll
+                }
+            }, { passive: false });
+
+            loop();
+            enterPhase(STATE.STORY_BRIEF);
+        }
+
+        function resize() {
+            const dpr = window.devicePixelRatio || 1;
+            width = window.innerWidth;
+            height = window.innerHeight;
+
+            // Fix resolution on high-DPI displays
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+            canvas.style.width = width + 'px';
+            canvas.style.height = height + 'px';
+
+            // Reset scale before applying new one
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.scale(dpr, dpr);
+        }
+
+        // --- State Management ---
+        function enterPhase(phase) {
+            currentState = phase;
+            updateUI();
+        }
+
+        function updateUI(errorMsg = null) {
+            const box = document.getElementById('dialogue-box');
+            box.classList.remove('translate-y-full', 'opacity-0');
+            const formulaBanner = document.getElementById('formula-banner');
+
+            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">
+                            能源核心是整個城市的電力來源，但現在供電系統出了一些問題，需要你來協助修復。<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>
+                    `;
+                    break;
+
+                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">
+                                <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>
+                        </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">
+                            我準備好了 (NEXT)
+                        </button>
+                    `;
+                    break;
+
+                case STATE.PHASE2_Q:
+                    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>
+                        
+                        <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>
+                        </div>
+                        
+                        ${errorMsg ? `<div class="text-red-400 text-center font-bold mt-2 animate-bounce">${errorMsg}</div>` : ''}
+
+                        <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>
+                    `;
+                    break;
+
+                case STATE.PHASE2_PATTERN:
+                    html = `
+                        <h3 class="text-lg 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">
+                                雜亂無章
+                            </button>
+                            <button onclick="checkPattern('B')" 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">
+                                圓形分佈
+                            </button>
+                            <button onclick="checkPattern('C')" 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">
+                                一條直線
+                            </button>
+                        </div>
+                    `;
+                    break;
+
+                case STATE.PHASE2_PREDICTION_INTRO:
+                    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>
+                            </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">
+                            進入緊急狀況演練 (EMERGENCY DRILL)
+                        </button>
+                    `;
+                    break;
+
+                case STATE.PHASE3_CRISIS:
+                    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>。
+                                <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>
+                                <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>` : ''}
+
+                        </div>
+                    `;
+                    break;
+
+                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>
+                            
+                            <!-- 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>。
+                                </p>
+                                <p class="text-slate-300 text-sm 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>。
+                                </p>
+                            </div>
+
+                            <div class="flex flex-col gap-3 max-w-md mx-auto">
+                                <a href="index.html" class="block w-full py-3 bg-slate-600 hover:bg-slate-500 text-white rounded-xl font-bold text-lg transition-all border border-slate-500 hover:border-white">
+                                    回到 Math City
+                                </a>
+                                <button onclick="enterPhase(STATE.PHASE4_INTRO)" class="relative overflow-hidden w-full py-3 bg-red-600 hover:bg-red-500 text-white rounded-xl font-bold text-lg shadow-lg group border border-red-400">
+                                    <span class="relative z-10 flex items-center justify-center gap-2">
+                                        ⚠️ 修復電力系統 (進階挑戰)
+                                    </span>
+                                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-shimmer"></div>
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                    break;
+
+                case STATE.PHASE4_INTRO:
+                    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">
+                                檢測到晶石純度下降，能量轉換公式已改變！<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">
+                                    y = <span class="text-amber-400 animate-pulse">?</span>x + <span class="text-cyan-400 animate-pulse">?</span>
+                                </span>
+                            </div>
+                            <button onclick="startPhase4Deduction()" class="w-full py-3 bg-amber-600 hover:bg-amber-500 text-white rounded-xl font-bold shadow-lg">
+                                開始推導 (Start Deduction)
+                            </button>
+                        </div>
+                    `;
+                    break;
+
+                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>
+                         <p class="text-slate-300 mb-4">
+                            你需要測試不同的晶石投入量，來推導出新的公式。
+                            <br><span class="text-sm 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">
+                            <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>
+                    `;
+                    break;
+
+                case STATE.PHASE4_FIND_B:
+                    html = `
+                        <h3 class="text-xl font-bold text-white mb-2">步驟 1：尋找初始值 (b)</h3>
+                        <p class="text-slate-300 mb-4">
+                            當投入 <span class="text-amber-400 font-bold">0</span> 顆時，
+                            電力顯示為 <span class="text-cyan-400 font-bold">5</span>。
+                        </p>
+                         <div class="flex items-center justify-center gap-2 text-2xl 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>` : ''}
+
+                        <button onclick="checkPhase4B()" class="w-full py-3 bg-cyan-600 hover:bg-cyan-500 text-white rounded-xl font-bold">
+                            確認校準 Check
+                        </button>
+                    `;
+                    break;
+
+                case STATE.PHASE4_TEST_A:
+                    html = `
+                         <h3 class="text-xl 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>
+                         </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">
+                            <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>
+                    `;
+                    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>
+                        <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>。
+                        </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>
+                        </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">
+                             <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>
+                             <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>` : ''}
+                    `;
+                    break;
+
+
+
+
+
+
+
+
+
+                case STATE.PHASE4_VERIFY:
+                    formulaBanner.classList.remove('hidden');
+                    html = `
+                        <h3 class="text-xl 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">
+                             <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>
+                             <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>` : ''}
+                    `;
+                    break;
+
+                case STATE.PHASE5_UNLOCK:
+                    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">
+                                <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="?">
+                                <span class="text-amber-400">x</span>
+                                <span class="text-slate-500">+</span>
+                                <input id="final-b" type="number" class="w-20 bg-slate-800 text-cyan-400 text-center rounded border border-slate-600 focus:border-cyan-400 outline-none p-2" placeholder="?">
+                            </div>
+                            <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>
+                       </div>
+                    `;
+                    break;
+
+                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">
+                            核心已解鎖，但能量極不穩定！<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">
+                                當光圈縮小至<span class="text-cyan-400">中心圓環</span>時，<br>
+                                點擊滑鼠、螢幕或按下空白鍵。
+                            </p>
+                        </div>
+                        <button onclick="startRhythmGame()" class="w-full py-4 bg-cyan-600 hover:bg-cyan-500 text-white rounded-xl font-bold text-xl shadow-lg animate-pulse">
+                            開始同步 (START)
+                        </button>
+                    `;
+                    break;
+
+                case STATE.PHASE6_GAME:
+                    // Hide dialogue box during game, only show overlay info via Canvas or minimal DOM
+                    box.classList.add('opacity-0', 'translate-y-20');
+                    formulaBanner.classList.add('hidden');
+                    // We will render UI on canvas or absolute overlay
+                    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";
+
+                    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">
+                                任務完成 SYSTEM RESTORED
+                            </h2>
+                            <div class="text-amber-400 font-tech text-xl mb-4 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="text-center">
+                                    <div class="text-xs text-slate-400 uppercase tracking-widest">本次得分</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="text-center">
+                                    <div class="text-xs text-slate-400 uppercase tracking-widest">歷史最高</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">
+                                <!-- 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)
+                                    </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>
+                                    <div class="text-sm text-slate-500 border-t border-slate-700 pt-2">
+                                        回顧：就像你在階段三，算出需要投入多少晶石才能救急。
+                                    </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)
+                                    </h3>
+                                    <p class="text-slate-300 leading-relaxed mb-3">
+                                        「當規則改變或未知時，我們也能透過觀察數據的變化，反推回公式本身。」
+                                    </p>
+                                    <div class="text-sm text-slate-500 border-t border-slate-700 pt-2">
+                                        回顧：就像你在階段四，透過測試 x=0 和 x=1，重新找回消失的 a 與 b。
+                                    </div>
+                                </div>
+                            </div>
+
+                            <p class="text-slate-400 italic mb-8">
+                                「這就是科學家與工程師的超能力：觀察數據 <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">
+                                回到 Math City
+                            </a>
+                        </div>
+                    `;
+                    break;
+
+                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">
+                           <span class="mr-2">⚡</span> 最終驗證 FINAL VERIFICATION
+                        </h3>
+                        <p class="text-slate-300 leading-relaxed mb-6">
+                           公式推導完成：<span class="text-white font-bold">y = 3x + 5</span>
+                           <br>現在，請實際投入 <span class="text-amber-400">10</span> 顆晶石來驗證預測是否準確。
+                        </p>
+                        
+                        <div class="flex items-center gap-4 mb-2">
+                            <span class="text-2xl 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()">
+                                <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm">晶石</div>
+                            </div>
+                        </div>
+                        <button onclick="runPhase4VerifyManual()" class="w-full mt-4 py-3 bg-cyan-600/80 hover:bg-cyan-500 text-white font-bold rounded-xl transition-all shadow-[0_0_15px_rgba(6,182,212,0.3)]">
+                            啟動測試 / VERIFY
+                        </button>
+                    `;
+                    break;
+            }
+
+            box.innerHTML = html;
+            // Focus input if available
+            const input = box.querySelector('input');
+            if (input) input.focus();
+        }
+
+        // --- Logic Operations ---
+        function startQPhase() {
+            qStep = 0;
+            enterPhase(STATE.PHASE2_Q);
+        }
+
+        function checkQAnswer() {
+            const input = document.getElementById('ans-input');
+            const val = parseInt(input.value);
+            const targetX = checkPoints[qStep];
+            const correctY = 2 * targetX + 3;
+
+            if (isNaN(val)) return;
+
+            if (val === 222) { // Cheat code
+                playSound('success');
+                // Skip everything -> Success
+                addPoint(100, 203); // fake the final point
+                enterPhase(STATE.SUCCESS);
+                return;
+            }
+
+            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);
+                }
+            } else {
+                playSound('alarm');
+                input.classList.add('animate-shake');
+                setTimeout(() => input.classList.remove('animate-shake'), 500);
+                // Show hint
+                updateUI(`提示： 2 × ${targetX} + 3 = ?`);
+            }
+        }
+
+        function checkFinalAnswer() {
+            const input = document.getElementById('ans-input');
+            const val = parseInt(input.value);
+
+            if (val === 100 || val === 222) { // 222 is cheat code
+                playSound('success');
+                graphScale.xMax = 110;
+                graphScale.yMax = 220;
+                addPoint(100, 203);
+                enterPhase(STATE.SUCCESS);
+            } else {
+                playSound('alarm');
+                input.classList.add('animate-shake');
+                setTimeout(() => input.classList.remove('animate-shake'), 500);
+                input.value = '';
+                // Show hint: 203 - 3 = 200, so 2x = 200
+                updateUI("提示： 203 = 2x + 3");
+            }
+        }
+
+        function checkPattern(choice) {
+            if (choice === 'C') {
+                playSound('success');
+                enterPhase(STATE.PHASE2_PREDICTION_INTRO);
+            } else {
+                alert("再仔細看看...？");
+            }
+        }
+
+        function startPhase4Deduction() {
+            // Reset graph for new formula (Scale reduced for visibility)
+            collectedPoints = [];
+            currentA = 3;
+            currentB = 5;
+
+            // Adjust scale for Phase 4 (Close up view)
+            graphScale.xMax = 15;
+            graphScale.yMax = 40;
+
+            // Do NOT add point yet. Wait for manual test.
+            enterPhase(STATE.PHASE4_TEST_B);
+
+            // Update Banner to y=ax+b style
+            document.querySelector('#formula-banner .font-tech').innerHTML =
+                `<span class="text-cyan-400">y</span><span class="text-slate-500">=</span><span class="text-red-500 animate-pulse">a</span><span class="text-amber-400">x</span><span class="text-slate-500">+</span><span class="text-red-500 animate-pulse">b</span>`;
+        }
+
+        function runPhase4Test() {
+            const input = document.getElementById('test-input');
+            const x = parseInt(input.value);
+
+            if (isNaN(x)) return;
+
+            const y = 3 * x + 5;
+            addPoint(x, y);
+            playSound('tick');
+
+            if (x === 0) {
+                setTimeout(() => {
+                    enterPhase(STATE.PHASE4_FIND_B);
+                }, 1000);
+            }
+        }
+
+        function checkPhase4B() {
+            const val = parseInt(document.getElementById('ans-input').value);
+            if (val === 5) {
+                playSound('success');
+                // Update Banner: y = ?x + 5
+                // User requested: 5 is white (slate-200), x amber, a blinking red
+                document.querySelector('#formula-banner .font-tech').innerHTML =
+                    `<span class="text-cyan-400">y</span><span class="text-slate-500">=</span><span class="text-red-500 animate-pulse">a</span><span class="text-amber-400">x</span><span class="text-slate-500">+</span><span class="text-slate-200">5</span>`;
+
+                // Go to Step 2 Manual Test
+                enterPhase(STATE.PHASE4_TEST_A);
+
+            } else {
+                playSound('alarm');
+                updateUI("錯誤！當 x=0 時，y=5。公式 y = ax + b 變成 5 = a(0) + b，所以 b 是...？");
+            }
+        }
+
+        function runPhase4TestA() {
+            const input = document.getElementById('test-input-a');
+            const x = parseInt(input.value);
+
+            if (isNaN(x)) return;
+
+            const y = 3 * x + 5;
+            addPoint(x, y);
+            playSound('tick');
+
+            if (x === 1) {
+                setTimeout(() => {
+                    enterPhase(STATE.PHASE4_FIND_A);
+                }, 1000);
+            }
+        }
+
+        function checkPhase4A() {
+            const val = parseInt(document.getElementById('ans-input').value);
+            if (val === 3) {
+                playSound('success');
+                // Update Banner: y = 3x + 5
+                document.querySelector('#formula-banner .font-tech').innerHTML =
+                    `<span class="text-cyan-400">y</span><span class="text-slate-500">=</span><span class="text-slate-200">3</span><span class="text-amber-400">x</span><span class="text-slate-500">+</span><span class="text-slate-200">5</span>`;
+
+                enterPhase(STATE.PHASE4_VERIFY);
+            } else {
+                playSound('alarm');
+                updateUI("錯誤！y 從 5 變成了 8，增加了 3。每增加 1 個 x，就增加 a。所以 a 是...？");
+            }
+        }
+
+        function checkPhase4Verify() {
+            const val = parseInt(document.getElementById('ans-input').value);
+            if (val === 35) {
+                playSound('success');
+                // Auto verification visual
+                addPoint(10, 35);
+                updateUI("預測正確！投入 10 顆晶石，電力確實為 35！");
+
+                // Delay for user to see the result before unlocking
+                setTimeout(() => enterPhase(STATE.PHASE5_UNLOCK), 2500);
+            } else {
+                playSound('alarm');
+                // Use on-screen hint instead of alert
+                updateUI("驗算失敗！請檢查公式： y = 3(10) + 5 = ?");
+            }
+        }
+
+        function unlockCore() {
+            const a = parseInt(document.getElementById('final-a').value);
+            const b = parseInt(document.getElementById('final-b').value);
+
+            if (a === 3 && b === 5) {
+                playSound('success');
+                // Instead of alert, go to Phase 6
+                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("密碼錯誤！警報！");
+            }
+        }
+
+        // --- Phase 6: Rhythm Game Logic ---
+        function startRhythmGame() {
+            rhythmState.energy = 0;
+            rhythmState.score = 0;
+            rhythmState.combo = 0;
+            rhythmState.circles = [];
+            rhythmState.active = true;
+            // startRhythmBGM(); // Disabled by user request
+            enterPhase(STATE.PHASE6_GAME);
+        }
+
+        function updateRhythm(dt) {
+            if (!rhythmState.active) return;
+            const now = Date.now();
+
+            // Spawn circles
+            if (now - rhythmState.lastSpawnTime > rhythmState.spawnInterval) {
+                spawnRhythmCircle();
+                rhythmState.lastSpawnTime = now;
+                // Speed up slightly as energy grows
+                rhythmState.spawnInterval = Math.max(600, 1200 - (rhythmState.energy * 5));
+            }
+
+            // Update circles
+            // Radius shrinks: starts at say 300, target 60 (CORE_RADIUS)
+            // Speed depends on spawnInterval roughly
+            for (let i = rhythmState.circles.length - 1; i >= 0; i--) {
+                const c = rhythmState.circles[i];
+                const speed = 150 * dt; // pixels per second-ish
+                c.r -= speed;
+
+                // Miss condition
+                if (c.r < CORE_RADIUS - 20) {
+                    // Miss
+                    rhythmState.circles.splice(i, 1);
+                    handleMiss();
+                }
+            }
+
+            // Check win
+            if (rhythmState.energy >= 100) {
+                rhythmState.active = false;
+                stopRhythmBGM(); // Stop music
+                playSound('success'); // Big success sound later
+
+                // Save High Score
+                const currentBest = parseInt(localStorage.getItem('math_city_score_function') || '0');
+                if (rhythmState.score > currentBest) {
+                    localStorage.setItem('math_city_score_function', rhythmState.score.toString());
+                }
+
+                setTimeout(() => enterPhase(STATE.PHASE7_SUMMARY), 1500); // 1.5s delay for victory effect
+            }
+        }
+
+        function drawRhythmBackground() {
+            // Cyber Tunnel Effect
+            const cx = width / 2;
+            const cy = height / 2;
+            const time = Date.now() / 1000;
+
+            // Clear with dark blue tint
+            ctx.fillStyle = '#050b14';
+            ctx.fillRect(0, 0, width, height);
+
+            // Rotating Grid
+            ctx.save();
+            ctx.translate(cx, cy);
+            // Slowly rotate the whole world
+            ctx.rotate(time * 0.1);
+
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = 'rgba(6, 182, 212, 0.15)'; // Faint Cyan
+
+            // Radial lines
+            const rays = 12;
+            for (let i = 0; i < rays; i++) {
+                const angle = (i / rays) * Math.PI * 2;
+                ctx.beginPath();
+                ctx.moveTo(0, 0);
+                // Draw far out to cover screen corners
+                ctx.lineTo(Math.cos(angle) * width, Math.sin(angle) * width);
+                ctx.stroke();
+            }
+
+            // Expanding Concentric Hexagons (Tunnel)
+            const speed = 100; // pixels per second expansion
+            const spacing = 200;
+            const offset = (Date.now() % 2000) / 2000 * spacing; // 0 to 200
+
+            for (let r = offset; r < width; r += spacing) {
+                if (r < 10) continue; // too small
+                const alpha = Math.min(1, r / 300); // Fade in from center
+                ctx.strokeStyle = `rgba(6, 182, 212, ${alpha * 0.3})`;
+                ctx.beginPath();
+                for (let i = 0; i < 6; i++) {
+                    const a = i * Math.PI / 3;
+                    const x = r * Math.cos(a);
+                    const y = r * Math.sin(a);
+                    if (i === 0) ctx.moveTo(x, y);
+                    else ctx.lineTo(x, y);
+                }
+                ctx.closePath();
+                ctx.stroke();
+            }
+
+            ctx.restore();
+        }
+
+        function spawnRhythmCircle() {
+            rhythmState.circles.push({
+                r: 400, // Start radius (outside screen mostly)
+                color: Math.random() > 0.5 ? '#22d3ee' : '#f59e0b' // Cyan or Amber
+            });
+        }
+
+        function handleRhythmInput() {
+            // Check the smallest circle
+            if (rhythmState.circles.length === 0) return;
+
+            // Sort by radius, usually the first one (index 0) is smallest due to spawn order
+            // But let's find the one closest to CORE_RADIUS
+            let targetIndex = -1;
+            let minDiff = 999;
+
+            rhythmState.circles.forEach((c, index) => {
+                const diff = Math.abs(c.r - CORE_RADIUS);
+                if (diff < minDiff) {
+                    minDiff = diff;
+                    targetIndex = index;
+                }
+            });
+
+            if (targetIndex !== -1) {
+                const diff = minDiff;
+                const tolerance = 30; // pixels tolerance
+
+                if (diff < 10) {
+                    // Perfect
+                    handleHit('PERFECT', targetIndex);
+                } else if (diff < tolerance) {
+                    // Good
+                    handleHit('GOOD', targetIndex);
+                } else {
+                    // Too early/late logic if we want, or just ignore if it's way off
+                    // If it's somewhat close but not hit, maybe miss? 
+                    // Let's just ignore clicks that are way off so we don't punish accidental clicks too much
+                }
+            }
+        }
+
+        function handleHit(type, index) {
+            rhythmState.circles.splice(index, 1);
+
+            if (type === 'PERFECT') {
+                rhythmState.energy = Math.min(100, rhythmState.energy + 10);
+                rhythmState.score += 500; // Efficiency Bonus
+                rhythmState.combo++;
+                spawnFloatingText("PERFECT! +10%", '#fbbf24'); // Gold
+                playSound('hit_perfect');
+            } else {
+                rhythmState.energy = Math.min(100, rhythmState.energy + 5);
+                rhythmState.score += 100;
+                rhythmState.combo++;
+                spawnFloatingText("GOOD +5%", '#22d3ee'); // Blue
+                playSound('hit_good');
+            }
+
+            // Core pulse
+            corePulse = 1.5;
+        }
+
+        function handleMiss() {
+            rhythmState.energy = Math.max(0, rhythmState.energy - 2);
+            rhythmState.combo = 0;
+            spawnFloatingText("MISS", '#ef4444');
+            playSound('alarm');
+        }
+
+        function spawnFloatingText(text, color) {
+            rhythmState.texts.push({
+                text: text,
+                x: width / 2,
+                y: height / 2 - 80,
+                life: 1.0,
+                color: color
+            });
+        }
+
+
+        function addPoint(x, y) {
+            if (!collectedPoints.find(p => p.x === x)) {
+                collectedPoints.push({ x, y });
+                // Spawn particle effect
+                for (let i = 0; i < 10; i++) {
+                    particles.push({
+                        x: width / 2,
+                        y: height / 2,
+                        vx: (Math.random() - 0.5) * 10,
+                        vy: (Math.random() - 0.5) * 10,
+                        life: 1.0,
+                        color: '#fbbf24'
+                    });
+                }
+            }
+        }
+
+        // --- Canvas Rendering (Same as before but simplified) ---
+        function loop() {
+            ctx.clearRect(0, 0, width, height); // Clear for transparency
+
+            // Special update for Rhythm Game
+            if (currentState === STATE.PHASE6_GAME) {
+                updateRhythm(0.016); // ~60fps fixed dt
+            }
+
+            drawCore();
+            drawGraph();
+            updateParticles();
+
+            // Draw Rhythm Overlay
+            if (currentState === STATE.PHASE6_GAME) {
+                drawRhythmGame();
+            }
+
+            requestAnimationFrame(loop);
+        }
+
+        function drawRhythmGame() {
+            const cx = width / 2;
+            const cy = height / 2;
+
+            // Draw Target Ring (CORE_RADIUS)
+            ctx.lineWidth = 4;
+            ctx.strokeStyle = '#ffffff';
+            ctx.globalAlpha = 0.5;
+            ctx.beginPath();
+            ctx.arc(cx, cy, CORE_RADIUS, 0, Math.PI * 2);
+            ctx.stroke();
+            ctx.globalAlpha = 1.0;
+
+            // Draw Falling Circles
+            rhythmState.circles.forEach(c => {
+                ctx.lineWidth = 3;
+                ctx.strokeStyle = c.color;
+                ctx.beginPath();
+                ctx.arc(cx, cy, c.r, 0, Math.PI * 2);
+                ctx.stroke();
+            });
+
+            // Draw Energy Bar (Top Center)
+            const barW = 300;
+            const barH = 20;
+            const barX = cx - barW / 2;
+            const barY = 50;
+
+            // Background
+            ctx.fillStyle = 'rgba(0,0,0,0.5)';
+            ctx.fillRect(barX, barY, barW, barH);
+            ctx.strokeStyle = '#aaa';
+            ctx.strokeRect(barX, barY, barW, barH);
+
+            // Fill
+            const fillW = (rhythmState.energy / 100) * barW;
+            const fillCol = rhythmState.energy > 80 ? '#fbbf24' : '#22d3ee';
+            ctx.fillStyle = fillCol;
+            ctx.fillRect(barX, barY, fillW, barH);
+
+            // Text: Energy
+            ctx.fillStyle = '#fff';
+            ctx.font = '20px Orbitron';
+            ctx.textAlign = 'center';
+            ctx.fillText(`ENERGY: ${Math.floor(rhythmState.energy)}%`, cx, barY - 10);
+
+            // Text: Combo
+            if (rhythmState.combo > 1) {
+                ctx.fillStyle = '#f59e0b';
+                ctx.font = 'bold 40px Orbitron';
+                ctx.fillText(`${rhythmState.combo} COMBO`, cx, cy + 150);
+            }
+
+            // Floating Texts
+            drawFloatingTexts(cx, cy);
+        }
+
+        function drawFloatingTexts(cx, cy) {
+            for (let i = rhythmState.texts.length - 1; i >= 0; i--) {
+                const t = rhythmState.texts[i];
+                t.life -= 0.02;
+                t.y -= 1; // Rise up
+
+                if (t.life <= 0) {
+                    rhythmState.texts.splice(i, 1);
+                    continue;
+                }
+
+                ctx.save();
+                ctx.globalAlpha = t.life;
+                ctx.fillStyle = t.color;
+                ctx.font = 'bold 30px "Noto Sans TC"';
+                ctx.textAlign = 'center';
+                ctx.fillText(t.text, t.x, t.y);
+                ctx.restore();
+            }
+        }
+
+        function drawCore() {
+            // Move core to center in Phase 6+ (Rhythm Game & Summary)
+            let targetCx = width * 0.15;
+            if (currentState >= STATE.PHASE6_INTRO) {
+                targetCx = width / 2;
+            }
+
+            // Simple ease-in if we wanted, but direct assignment is safer for state changes
+            const cx = targetCx;
+            const cy = height * 0.5;
+
+            if (width < 768) ctx.globalAlpha = 0.2;
+
+            // Victory Effect: Big pulse if game won but not yet in summary
+            if (currentState >= STATE.PHASE6_GAME && rhythmState.energy >= 100) {
+                if (currentState === STATE.PHASE6_GAME) coreRotation += 0.2; // Spin faster only during game end
+                const pulse = 1 + Math.sin(Date.now() / 50) * 0.2; // Rapid pulse
+                ctx.shadowBlur = 50 * pulse;
+                ctx.shadowColor = '#fbbf24'; // Amber glow
+            } else {
+                coreRotation += 0.01;
+                ctx.shadowBlur = 0;
+            }
+
+            ctx.save();
+            ctx.translate(cx, cy);
+            ctx.rotate(coreRotation);
+
+            ctx.strokeStyle = '#0891b2';
+            ctx.lineWidth = 4;
+            ctx.beginPath();
+            ctx.arc(0, 0, 80, 0, Math.PI * 2);
+            ctx.stroke();
+
+            // Inner Hexagon
+            ctx.rotate(-coreRotation * 2);
+            ctx.fillStyle = rhythmState.energy >= 100 ? '#fbbf24' : '#22d3ee'; // Turn Gold on win
+            ctx.beginPath();
+            for (let i = 0; i < 6; i++) {
+                ctx.lineTo(50 * Math.cos(i * Math.PI / 3), 50 * Math.sin(i * Math.PI / 3));
+            }
+            ctx.fill();
+
+            ctx.restore();
+            ctx.globalAlpha = 1.0;
+            ctx.shadowBlur = 0; // Reset
+        }
+
+        function drawGraph() {
+            const padding = 60;
+            // 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 gh = isDesktop ? height * 0.6 : Math.min(400, height * 0.5);
+
+            // On Desktop, position graph on the right side (Start at 45% width)
+            // On Mobile, center it
+            const gx = isDesktop ? (width * 0.45) : (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
+            ctx.fillStyle = 'rgba(15, 23, 42, 0.85)';
+            ctx.fillRect(gx, gy, gw, gh);
+            ctx.strokeStyle = '#475569';
+            ctx.strokeRect(gx, gy, gw, gh);
+
+            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;
+
+            ctx.beginPath();
+            ctx.strokeStyle = '#94a3b8';
+            ctx.lineWidth = 2;
+            ctx.moveTo(ox, oy); ctx.lineTo(ox + drawW, oy);
+            ctx.moveTo(ox, oy); ctx.lineTo(ox, oy - drawH);
+            ctx.stroke();
+
+            // Grid
+            ctx.textAlign = 'center';
+            ctx.font = 'bold 12px monospace';
+
+            const jumpX = graphScale.xMax > 20 ? 10 : 1;
+            for (let i = 0; i <= graphScale.xMax; i += jumpX) {
+                const x = ox + i * unitX;
+                ctx.fillStyle = '#fbbf24'; // Amber X
+                ctx.fillText(i, x, oy + 20);
+                if (i > 0) {
+                    ctx.beginPath(); ctx.moveTo(x, oy); ctx.lineTo(x, oy - drawH);
+                    ctx.strokeStyle = 'rgba(255,255,255,0.05)'; ctx.stroke();
+                }
+            }
+
+            const jumpY = graphScale.yMax > 50 ? 20 : 2;
+            for (let i = 0; i <= graphScale.yMax; i += jumpY) {
+                const y = oy - i * unitY;
+                ctx.fillStyle = '#22d3ee'; // Cyan Y
+                ctx.fillText(i, ox - 20, y + 4);
+                if (i > 0) {
+                    ctx.beginPath(); ctx.moveTo(ox, y); ctx.lineTo(ox + drawW, y);
+                    ctx.strokeStyle = 'rgba(255,255,255,0.05)'; ctx.stroke();
+                }
+            }
+
+            ctx.fillStyle = '#fbbf24'; ctx.font = 'bold 16px sans-serif';
+            ctx.fillText("晶石數 (x)", ox + drawW / 2, oy + 40);
+            ctx.save();
+            ctx.translate(ox - 45, oy - drawH / 2);
+            ctx.rotate(-Math.PI / 2);
+            ctx.fillStyle = '#22d3ee';
+            ctx.fillText("電力 (y)", 0, 0);
+            ctx.restore();
+
+            if (currentState >= STATE.PHASE2_PREDICTION_INTRO && currentState < STATE.PHASE4_INTRO) {
+                ctx.beginPath();
+                ctx.strokeStyle = '#22d3ee';
+                ctx.lineWidth = 2;
+                const endX = graphScale.xMax;
+                const endY = 2 * endX + 3;
+                ctx.moveTo(ox, oy - 3 * unitY);
+                ctx.lineTo(ox + endX * unitX, oy - endY * unitY);
+                ctx.stroke();
+            }
+
+            collectedPoints.forEach(p => {
+                const px = ox + p.x * unitX;
+                const py = oy - p.y * unitY;
+                ctx.beginPath();
+                ctx.arc(px, py, 6, 0, Math.PI * 2);
+                ctx.fillStyle = '#fbbf24';
+                ctx.fill();
+                ctx.strokeStyle = '#fff';
+                ctx.stroke();
+
+                // Color coded coordinates: (x, y)
+                ctx.font = 'bold 14px monospace';
+                const textY = py - 12; // Position above point
+
+                // Measure text to center it
+                const strX = `${p.x}`;
+                const strY = `${p.y}`;
+                const w1 = ctx.measureText("(").width;
+                const wX = ctx.measureText(strX).width;
+                const wComma = ctx.measureText(", ").width;
+                const wY = ctx.measureText(strY).width;
+                const w2 = ctx.measureText(")").width;
+                const totalW = w1 + wX + wComma + wY + w2;
+
+                let cursorX = px - totalW / 2;
+
+                ctx.fillStyle = '#cbd5e1'; ctx.fillText("(", cursorX + w1 / 2, textY); cursorX += w1;
+                ctx.fillStyle = '#fbbf24'; ctx.fillText(strX, cursorX + wX / 2, textY); cursorX += wX; // Amber X
+                ctx.fillStyle = '#cbd5e1'; ctx.fillText(", ", cursorX + wComma / 2, textY); cursorX += wComma;
+                ctx.fillStyle = '#22d3ee'; ctx.fillText(strY, cursorX + wY / 2, textY); cursorX += wY; // Cyan Y
+                ctx.fillStyle = '#cbd5e1'; ctx.fillText(")", cursorX + w2 / 2, textY);
+            });
+        }
+
+        function updateParticles() {
+            for (let i = particles.length - 1; i >= 0; i--) {
+                let p = particles[i];
+                p.x += p.vx;
+                p.y += p.vy;
+                p.life -= 0.02;
+                ctx.globalAlpha = p.life;
+                ctx.fillStyle = p.color;
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
+                ctx.fill();
+                if (p.life <= 0) particles.splice(i, 1);
+            }
+            ctx.globalAlpha = 1.0;
+        }
+
+    </script>
+
+    <!-- Credits -->
+    <div class="fixed bottom-4 right-4 text-right text-slate-500 text-xs z-50 pointer-events-auto select-none">
+        <div class="mb-1">遊戲設計：新竹縣精華國中藍星宇</div>
+        <div>FB教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank"
+                class="hover:text-cyan-400 transition-colors">萬物皆數</a></div>
+    </div>
+
+    <script>
+        // --- Main Game Loop (Overridden/Appended) ---
+        let lastTime = Date.now();
+        function loop() {
+            const now = Date.now();
+            const dt = (now - lastTime) / 1000;
+            lastTime = now;
+
+            ctx.clearRect(0, 0, width, height);
+
+            if (currentState === STATE.PHASE6_GAME) {
+                // Rhythm Game Mode
+                updateRhythm(dt);
+                drawRhythmBackground();
+                drawRhythmGame();
+                drawCore();
+            } else if (currentState === STATE.PHASE7_SUMMARY) {
+                // Summary Mode
+                drawRhythmBackground();
+                drawCore();
+            } else {
+                // Standard Graph Mode
+                drawGraph();
+                drawCore();
+            }
+
+            updateParticles();
+            requestAnimationFrame(loop);
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..e1f03c317701e371097dd99f9e55c2ec252ba362
--- /dev/null
+++ b/index.html
@@ -0,0 +1,471 @@
+<!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">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <title>Math City: Cyber Chronicles</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;
+            /* Prevent bouncing on iOS */
+            overscroll-behavior: none;
+        }
+
+        .font-tech {
+            font-family: 'Orbitron', sans-serif;
+        }
+
+        /* Map Container */
+        #map-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            background-image: url('Assets/index/indexbg.png');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            /* Ensure no overflow scrolling */
+            touch-action: none;
+        }
+
+        /* Effect Canvas */
+        #effect-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 15;
+            /* Between background and pins */
+        }
+
+        /* Pin Styles - Optimized for touch */
+        .map-pin {
+            position: absolute;
+            width: 200px;
+            /* Larger touch area */
+            height: 120px;
+            transform: translate(-50%, -50%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 20;
+            /* Tap highlight removal */
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .pin-marker {
+            width: 48px;
+            /* Larger marker */
+            height: 48px;
+            border-radius: 50%;
+            border: 3px solid white;
+            position: relative;
+            box-shadow: 0 0 15px currentColor;
+            background-color: rgba(0, 0, 0, 0.5);
+            animation: pulse 2s infinite;
+            transition: transform 0.2s;
+        }
+
+        .pin-marker::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 20px;
+            height: 20px;
+            background-color: white;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .pin-label {
+            margin-top: 12px;
+            background: rgba(15, 23, 42, 0.95);
+            border: 1px solid currentColor;
+            padding: 10px 20px;
+            border-radius: 8px;
+            text-align: center;
+            opacity: 1;
+            /* Always visible on iPad */
+            backdrop-filter: blur(4px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s;
+        }
+
+        .map-pin:active .pin-marker {
+            transform: scale(0.9);
+        }
+
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+            }
+
+            70% {
+                box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
+            }
+
+            100% {
+                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+            }
+        }
+
+        /* Positions - Updated based on User Feedback
+           Map Layout:
+           Top-Left: Header Area
+           Top-Right-ish: Skyscraper (摩天大樓 - Parallel)
+           Center: Energy Core (Function)
+           Bottom-Right: Congruence District
+           Bottom-Left: Glitch Canyon (Sequence)
+        */
+        #pin-parallel {
+            top: 20%;
+            left: 60%;
+            color: #22c55e;
+            /* Green */
+        }
+
+        #pin-congruence {
+            top: 75%;
+            left: 75%;
+            color: #d946ef;
+            /* Magenta */
+        }
+
+        #pin-sequence {
+            top: 75%;
+            left: 25%;
+            color: #f59e0b;
+            /* Amber/Orange */
+        }
+
+        #pin-function {
+            top: 50%;
+            left: 50%;
+            color: #06b6d4;
+            /* Cyan for Energy */
+        }
+
+        /* Scanlines - Subtle CRT effect */
+        .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;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 50;
+        }
+
+        /* Cyber Header Style */
+        .cyber-header {
+            background: rgba(5, 5, 16, 0.85);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-left: 4px solid #06b6d4;
+            border-bottom: 1px solid rgba(6, 182, 212, 0.3);
+            padding: 20px 40px 20px 30px;
+            /* Trapezoid shape effect via clip-path or just styling */
+            clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        }
+
+        /* Orientation Warning */
+        #orientation-warning {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: #000;
+            z-index: 200;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 20px;
+        }
+
+        @media screen and (orientation: portrait) {
+            #orientation-warning {
+                display: flex;
+            }
+        }
+    </style>
+</head>
+
+<body class="bg-black">
+
+    <!-- Orientation Warning -->
+    <div id="orientation-warning">
+        <div class="text-center">
+            <div class="text-6xl mb-4">📱➡️📱</div>
+            <h2 class="text-2xl font-bold text-white mb-2">請旋轉裝置</h2>
+            <p class="text-slate-400">為了獲得最佳體驗，請使用橫向模式遊玩</p>
+        </div>
+    </div>
+
+    <!-- Scanlines -->
+    <div class="scanlines"></div>
+
+    <!-- Main Map -->
+    <div id="map-container">
+
+        <canvas id="effect-canvas"></canvas>
+
+        <!-- Header (Moved to Top-Left with Cyber Mask) -->
+        <div class="absolute top-8 left-0 z-20 pointer-events-none">
+            <div class="cyber-header">
+                <h1
+                    class="text-4xl md:text-5xl font-black font-tech text-white drop-shadow-[0_0_5px_rgba(6,182,212,0.8)] tracking-wider">
+                    MATH CITY
+                </h1>
+                <div class="flex items-center gap-2 mt-1">
+                    <div class="h-1 w-8 bg-cyan-500"></div>
+                    <span class="text-xs font-mono text-cyan-300 tracking-[0.2em]">CYBER CHRONICLES</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Pin 1: Sequence Canyon (Bottom-Left) -->
+        <div id="pin-sequence" class="map-pin group" onclick="triggerBeamNavigation(this, 'sequence.html')">
+            <div class="pin-marker border-amber-500 group-hover:scale-110"></div>
+            <div class="pin-label border-amber-500 text-amber-400">
+                <div class="font-bold text-xl">數列峽谷</div>
+                <div class="text-xs text-white opacity-80">The Glitch Canyon</div>
+            </div>
+        </div>
+
+        <!-- Pin 2: Energy Core (Center) -->
+        <div id="pin-function" class="map-pin group" onclick="triggerBeamNavigation(this, 'function.html')">
+            <div class="pin-marker group-hover:scale-110"></div>
+            <div class="pin-label border-cyan-500 text-cyan-400">
+                <div class="font-bold text-xl">能源核心</div>
+                <div class="text-xs text-white opacity-80">The Energy Core</div>
+            </div>
+        </div>
+
+        <!-- Pin 3: Congruence District (Bottom-Right) -->
+        <div id="pin-congruence" class="map-pin group opacity-75" onclick="alert('🔒 區域封鎖：請先完成前置任務')">
+            <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>
+                <div class="text-xs text-white opacity-80">Congruence District</div>
+            </div>
+        </div>
+
+        <!-- Pin 4: Skyscraper (Top-Right-ish) -->
+        <div id="pin-parallel" class="map-pin group opacity-75" onclick="alert('🚧 施工中：摩天大樓')">
+            <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>
+        </div>
+
+        <!-- System Info Footer -->
+        <div class="absolute bottom-4 left-4 right-4 flex justify-between items-end pointer-events-none opacity-60">
+            <div class="text-[10px] font-mono text-cyan-300">
+                SYS.ORD: 7749-X<br>
+                SEC.LVL: ALPHA
+            </div>
+            <div class="text-[10px] font-mono text-right text-slate-400">
+                ONLINE USERS: 1<br>
+                PING: 12ms
+            </div>
+        </div>
+
+        <!-- Credits Footer -->
+        <div class="fixed bottom-1 right-2 text-right text-[10px] text-slate-500/50 pointer-events-none z-50 font-sans">
+            <div>遊戲設計：新竹縣精華國中 藍星宇老師</div>
+            <div>臉書社團：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank"
+                    class="hover:text-amber-400 pointer-events-auto transition-colors">萬物皆數</a></div>
+        </div>
+
+        <!-- Reset Button -->
+        <button onclick="window.resetScores()"
+            class="fixed bottom-4 left-4 z-50 bg-slate-900/80 text-xs text-slate-400 hover:text-white px-3 py-2 rounded border border-slate-700 hover:bg-red-900/50 transition-colors pointer-events-auto backdrop-blur-sm shadow-lg">
+            ↺ 重置分數 Reset
+        </button>
+
+
+
+    </div>
+
+    <script>
+        // Prevent default touch actions (zooming, scrolling)
+        document.body.addEventListener('touchmove', function (e) {
+            e.preventDefault();
+        }, { passive: false });
+
+        // Effect Canvas System
+        const canvas = document.getElementById('effect-canvas');
+        const ctx = canvas.getContext('2d');
+        let width, height;
+
+        function resize() {
+            width = canvas.width = window.innerWidth;
+            height = canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resize);
+        resize();
+
+        // Load High Score
+        // Load High Scores
+        // Load High Scores
+        function loadScores() {
+            // Helper to update pin
+            const updatePin = (pinId, scoreKey) => {
+                const score = localStorage.getItem(scoreKey);
+                if (score) {
+                    const pin = document.querySelector(pinId);
+                    if (!pin) return;
+
+                    // Fix: Ensure pin marker doesn't squash when content grows
+                    const marker = pin.querySelector('.pin-marker');
+                    if (marker) marker.style.flexShrink = '0';
+
+                    // Update Label
+                    const label = pin.querySelector('.pin-label');
+                    if (label) {
+                        // 1. Add Trophy to Text if not present
+                        if (!label.innerText.includes('🏆')) {
+                            // We need to be careful not to overwrite if we run this multiple times
+                            // Get direct text content ignoring children
+                            const currentText = label.childNodes[0].textContent.trim();
+                            label.firstChild.textContent = `🏆 ${currentText}`;
+                        }
+
+                        // 2. Add Score Badge BELOW the text
+                        // Check if score div exists to prevent duplicates
+                        let scoreDiv = label.querySelector('.score-badge');
+                        if (!scoreDiv) {
+                            scoreDiv = document.createElement('div');
+                            scoreDiv.className = 'score-badge text-[10px] text-amber-300 font-bold mt-1 tracking-wider border-t border-slate-600 pt-1';
+                            label.appendChild(scoreDiv);
+                        }
+                        scoreDiv.innerText = `BEST: ${score}`;
+
+                        // Ensure label handles the content vertical flow correctly
+                        label.style.display = 'flex';
+                        label.style.flexDirection = 'column';
+                        label.style.alignItems = 'center';
+                        label.style.gap = '2px';
+                    }
+                }
+            };
+
+            updatePin('#pin-function', 'math_city_score_function');
+            updatePin('#pin-sequence', 'math_city_score_sequence');
+        }
+        loadScores();
+
+        // Global Reset Function
+        window.resetScores = function () {
+            if (confirm('確定要重置所有分數與獎盃嗎？\nAre you sure you want to reset all scores?')) {
+                localStorage.removeItem('math_city_score_function');
+                localStorage.removeItem('math_city_score_sequence');
+                location.reload();
+            }
+        };
+
+        function getPinColor(element) {
+            // Extract color from computed style of the label text
+            const label = element.querySelector('.pin-label');
+            return window.getComputedStyle(label).color;
+        }
+
+        function triggerBeamNavigation(element, url) {
+            const rect = element.getBoundingClientRect();
+            const targetX = rect.left + rect.width / 2;
+            const targetY = rect.top + rect.height / 2;
+            const startX = width / 2;
+            const startY = height / 2;
+            const color = getPinColor(element);
+
+            animateBeam(startX, startY, targetX, targetY, color, () => {
+                window.location.href = url;
+            });
+        }
+
+        function animateBeam(x1, y1, x2, y2, color, onComplete) {
+            const startTime = performance.now();
+            const duration = 600; // ms
+
+            function loop(now) {
+                const elapsed = now - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                // Ease In Out Quart
+                const ease = progress < 0.5 ? 8 * progress * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 4) / 2;
+
+                ctx.clearRect(0, 0, width, height);
+
+                // Draw Beam
+                const currentX = x1 + (x2 - x1) * ease;
+                const currentY = y1 + (y2 - y1) * ease;
+
+                // Trail
+                ctx.beginPath();
+                ctx.moveTo(x1, y1);
+                ctx.lineTo(currentX, currentY);
+                ctx.strokeStyle = color;
+                ctx.lineWidth = 4 + Math.sin(now * 0.02) * 2;
+                ctx.lineCap = 'round';
+                ctx.shadowBlur = 20;
+                ctx.shadowColor = color;
+                ctx.globalAlpha = 1 - ease * 0.5; // Fade tail slightly
+                ctx.stroke();
+
+                // Head Particle
+                ctx.beginPath();
+                ctx.arc(currentX, currentY, 8, 0, Math.PI * 2);
+                ctx.fillStyle = '#fff';
+                ctx.shadowBlur = 30;
+                ctx.shadowColor = color;
+                ctx.globalAlpha = 1;
+                ctx.fill();
+
+                // Impact Ripple at target when close
+                if (progress > 0.8) {
+                    const rippleSize = (progress - 0.8) * 1000; // Expand rapidly
+                    ctx.beginPath();
+                    ctx.arc(x2, y2, rippleSize, 0, Math.PI * 2);
+                    ctx.strokeStyle = color;
+                    ctx.lineWidth = 5 * (1 - (progress - 0.8) * 5);
+                    ctx.stroke();
+                }
+
+                ctx.shadowBlur = 0;
+
+                if (progress < 1) {
+                    requestAnimationFrame(loop);
+                } else {
+                    onComplete();
+                }
+            }
+            requestAnimationFrame(loop);
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/sequence.html b/sequence.html
new file mode 100644
index 0000000000000000000000000000000000000000..671cecfa441bd24121c9c72941410d01e7325400
--- /dev/null
+++ b/sequence.html
@@ -0,0 +1,2532 @@
+<!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>數列峽谷 - Sequence Canyon</title>
+
+    <!-- Google Fonts -->
+    <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&display=swap" rel="stylesheet">
+
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif;
+            margin: 0;
+            overflow: hidden;
+            background-color: #0f172a;
+            touch-action: none;
+            -webkit-user-select: none;
+            user-select: none;
+        }
+
+        canvas {
+            display: block;
+        }
+
+        .glass-panel {
+            background: rgba(15, 23, 42, 0.95);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid rgba(148, 163, 184, 0.2);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+        }
+
+        /* Input Styling */
+        .math-input {
+            background: rgba(0, 0, 0, 0.5);
+            border: 2px solid #475569;
+            color: #fff;
+            text-align: center;
+            border-radius: 8px;
+            font-weight: bold;
+            font-size: 1.2rem;
+            outline: none;
+            transition: all 0.2s;
+        }
+
+        .math-input:focus {
+            border-color: #f59e0b;
+            box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
+        }
+
+        .math-input:disabled {
+            background: rgba(15, 23, 42, 0.8);
+            border-color: #64748b;
+            color: #94a3b8;
+        }
+
+        .math-input.correct {
+            border-color: #4ade80;
+            background: rgba(74, 222, 128, 0.2);
+            color: #fff;
+        }
+
+        .math-input.wrong {
+            border-color: #ef4444;
+            animation: shake 0.3s;
+        }
+
+        .step-completed {
+            opacity: 0.7;
+            transform: scale(0.95);
+            pointer-events: none;
+            border-color: #4ade80 !important;
+        }
+
+        @keyframes shake {
+
+            0%,
+            100% {
+                transform: translateX(0);
+            }
+
+            25% {
+                transform: translateX(-5px);
+            }
+
+            75% {
+                transform: translateX(5px);
+            }
+        }
+
+        /* Mobile Controls Styling */
+        .control-zone {
+            position: absolute;
+            bottom: 30px;
+            z-index: 50;
+        }
+
+        #joystick-zone {
+            left: 30px;
+            width: 160px;
+            height: 60px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 30px;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            touch-action: none;
+        }
+
+        #joystick-knob {
+            width: 50px;
+            height: 50px;
+            background: rgba(245, 158, 11, 0.8);
+            border-radius: 50%;
+            box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
+            transform: translate(0px, 0px);
+        }
+
+        #btn-jump {
+            right: 30px;
+            width: 110px;
+            height: 110px;
+            background: rgba(234, 88, 12, 0.6);
+            border-radius: 50%;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-weight: bold;
+            font-size: 1.2rem;
+            box-shadow: 0 0 20px rgba(234, 88, 12, 0.4);
+        }
+
+        #btn-jump:active {
+            background: rgba(234, 88, 12, 0.9);
+            transform: scale(0.95);
+        }
+
+        .hidden {
+            display: none !important;
+        }
+
+        @keyframes pulse {
+
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+
+            50% {
+                opacity: 0.7;
+                transform: scale(1.1);
+            }
+        }
+
+        #ui-tutorial h2 {
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+        }
+
+        .tutorial-hint {
+            font-size: 1rem;
+            color: #cbd5e1;
+            margin-top: 0.5rem;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 20px;
+        }
+
+        #screen-ritual {
+            overflow-y: auto;
+            justify-content: flex-end;
+        }
+
+        /* Ritual Fade In */
+        .fade-in {
+            animation: ritualFadeIn 1s forwards;
+        }
+
+        @keyframes ritualFadeIn {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        .ritual-content-wrapper {
+            width: 100%;
+            max-width: 600px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+            padding-bottom: 20px;
+        }
+
+        /* Story Hint Message */
+        #story-hint {
+            animation: fadeInOut 4s forwards;
+        }
+
+        @keyframes fadeInOut {
+            0% {
+                opacity: 0;
+                transform: translate(-50%, 20px);
+            }
+
+            10% {
+                opacity: 1;
+                transform: translate(-50%, 0);
+            }
+
+            90% {
+                opacity: 1;
+                transform: translate(-50%, 0);
+            }
+
+            100% {
+                opacity: 0;
+                transform: translate(-50%, -20px);
+            }
+        }
+
+        #mock-msg {
+            animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+
+        @keyframes bounceIn {
+            0% {
+                transform: scale(0);
+                opacity: 0;
+            }
+
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        /* Guide Arrow */
+        #guide-arrow {
+            animation: arrowFloat 1.5s infinite ease-in-out;
+        }
+
+        @keyframes arrowFloat {
+
+            0%,
+            100% {
+                transform: translateX(0);
+            }
+
+            50% {
+                transform: translateX(-15px);
+            }
+        }
+
+        /* Gravity Message */
+        #gravity-msg {
+            animation: fadeIn 0.5s forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Altar Dive Hint */
+        #altar-hint {
+            animation: pulse 1s infinite;
+        }
+    </style>
+</head>
+
+<body class="w-full h-screen text-white bg-slate-900">
+
+    <div id="game-container" class="relative w-full h-full">
+        <canvas id="gameCanvas"></canvas>
+
+        <!-- HUD -->
+        <div id="ui-hud"
+            class="absolute top-4 left-4 right-4 flex justify-between items-start pointer-events-none hidden">
+            <div class="glass-panel rounded-xl px-4 py-2 flex flex-col items-center flex-1 mx-2 border-amber-500/30">
+                <span class="text-xs text-amber-300 uppercase tracking-widest">當前任務目標</span>
+                <div class="flex items-center gap-4">
+                    <span id="hud-sequence"
+                        class="text-xl md:text-2xl font-black text-amber-400 drop-shadow-[0_0_8px_rgba(245,158,11,0.5)]">...</span>
+                </div>
+            </div>
+            <div class="glass-panel rounded-xl px-4 py-2 border-amber-500/30">
+                <span class="text-xs text-amber-300 uppercase tracking-widest">蒐集進度</span>
+                <div class="flex gap-1 mt-1" id="collection-dots"></div>
+            </div>
+
+            <a href="index.html"
+                class="glass-panel rounded-xl px-3 py-2 flex items-center justify-center text-amber-400 hover:bg-slate-800 transition-colors border border-amber-500/30 pointer-events-auto">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+            </a>
+        </div>
+
+        <!-- Credits Footer -->
+        <div class="fixed bottom-1 right-2 text-right text-[10px] text-slate-500/50 pointer-events-none z-50 font-sans">
+            <div>遊戲設計：新竹縣精華國中 藍星宇老師</div>
+            <div>臉書社團：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank"
+                    class="hover:text-amber-400 pointer-events-auto transition-colors">萬物皆數</a></div>
+        </div>
+
+        <!-- Story Hint Overlay -->
+        <div id="story-hint"
+            class="absolute top-1/3 left-1/2 transform -translate-x-1/2 glass-panel px-6 py-4 rounded-xl hidden text-center pointer-events-none border border-yellow-400/50 shadow-[0_0_30px_rgba(250,204,21,0.3)] z-40">
+            <p id="story-hint-title" class="text-yellow-300 font-bold text-xl mb-1">階梯竟然消失了！</p>
+            <p id="story-hint-desc" class="text-white text-base">是不是需要什麼儀式才能再次出現...</p>
+        </div>
+
+        <!-- Guide Arrow -->
+        <div id="guide-arrow"
+            class="absolute top-[30%] right-[20%] hidden z-30 pointer-events-none flex items-center gap-2">
+            <div class="text-6xl text-yellow-400 drop-shadow-[0_0_15px_rgba(250,204,21,0.8)]">⬅️</div>
+            <div
+                class="text-xl font-bold text-yellow-300 bg-slate-900/60 px-3 py-1 rounded border border-yellow-400/50">
+                祭壇在後方</div>
+        </div>
+
+        <!-- Altar Dive Hint -->
+        <div id="altar-hint"
+            class="absolute top-[60%] left-1/2 transform -translate-x-1/2 hidden z-30 pointer-events-none flex flex-col items-center">
+            <div class="glass-panel px-4 py-2 rounded-xl border border-red-400 bg-red-900/80">
+                <p id="altar-hint-text" class="text-2xl font-black text-white">🔥 連點兩下跳躍，下墜打破祭壇！</p>
+            </div>
+        </div>
+
+        <!-- Tutorial Overlay -->
+        <div id="ui-tutorial" class="absolute top-24 w-full text-center pointer-events-none hidden z-30">
+            <h2 id="tutorial-text"
+                class="text-3xl md:text-4xl font-black text-yellow-400 drop-shadow-xl tracking-wider">教學模式</h2>
+            <div id="tutorial-subtext" class="tutorial-hint hidden">提示訊息</div>
+        </div>
+
+        <!-- Mobile Controls -->
+        <div id="mobile-controls" class="hidden">
+            <div id="joystick-zone" class="control-zone">
+                <div id="joystick-knob"></div>
+            </div>
+            <div id="btn-jump" class="control-zone select-none">跳躍</div>
+        </div>
+
+        <!-- Start Screen -->
+        <div id="screen-start" class="absolute inset-0 flex flex-col items-center justify-center z-50">
+            <h1
+                class="text-5xl md:text-7xl font-black mb-4 text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-600 drop-shadow-[0_0_15px_rgba(245,158,11,0.5)]">
+                數列峽谷</h1>
+            <p class="text-slate-300 mb-8 text-lg">操作模式選擇</p>
+            <div class="flex flex-col md:flex-row gap-6 w-full max-w-2xl px-4">
+                <button onclick="selectDevice('mobile')"
+                    class="flex-1 glass-panel p-6 rounded-2xl hover:bg-slate-800 transition-all border border-slate-700 hover:border-amber-400 group">
+                    <div class="text-4xl mb-4">📱</div>
+                    <h3 class="text-xl font-bold text-amber-100 group-hover:text-amber-400">平板/觸控</h3>
+                </button>
+                <button onclick="selectDevice('desktop')"
+                    class="flex-1 glass-panel p-6 rounded-2xl hover:bg-slate-800 transition-all border border-slate-700 hover:border-orange-400 group">
+                    <div class="text-4xl mb-4">⌨️</div>
+                    <h3 class="text-xl font-bold text-orange-100 group-hover:text-orange-400">電腦/鍵盤</h3>
+                </button>
+            </div>
+        </div>
+
+        <!-- Quiz Screen -->
+        <div id="screen-quiz"
+            class="absolute inset-0 flex flex-col items-center justify-center bg-slate-900/95 backdrop-blur-md z-50 hidden">
+            <div class="glass-panel p-8 rounded-2xl max-w-2xl w-[95%] border-t-4 border-amber-500">
+                <h2 class="text-3xl font-bold text-amber-400 mb-4">✨ 數列觀念檢測</h2>
+                <div class="bg-slate-800/50 p-6 rounded-lg mb-6 text-left space-y-4 border border-slate-700">
+                    <p class="text-xl text-slate-200"><strong class="text-amber-400 text-2xl">公差</strong> 的意思是：<span
+                            class="border-b-2 border-amber-500">後項 - 前項</span> (固定差距)。</p>
+                    <div class="pl-4 border-l-4 border-slate-600">
+                        <p class="text-lg text-slate-300 font-bold mb-2">範例：首項 2，公差 3</p>
+                        <p class="text-xl font-mono text-cyan-300 leading-relaxed">➜ 2, 5, 8, 11...</p>
+                        <p class="text-lg font-mono text-slate-400 leading-relaxed">(2, 2+3, 2+3+3, 2+3+3+3...)</p>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <p class="text-xl mb-4 font-bold">請問：若首項是 <span id="quiz-start-val"
+                            class="text-amber-400 text-3xl mx-1">?</span>，公差是 <span id="quiz-diff-val"
+                            class="text-amber-400 text-3xl mx-1">?</span></p>
+                    <p class="mb-2 text-slate-300">數列的前四項會是什麼？</p>
+                    <div class="flex justify-center items-center gap-2 md:gap-4 flex-wrap">
+                        <input type="number" id="quiz-1" class="math-input w-20 h-14 md:w-24 md:h-16 text-2xl"
+                            placeholder="?">
+                        <span class="text-slate-500 font-bold text-xl">,</span>
+                        <input type="number" id="quiz-2" class="math-input w-20 h-14 md:w-24 md:h-16 text-2xl"
+                            placeholder="?">
+                        <span class="text-slate-500 font-bold text-xl">,</span>
+                        <input type="number" id="quiz-3" class="math-input w-20 h-14 md:w-24 md:h-16 text-2xl"
+                            placeholder="?">
+                        <span class="text-slate-500 font-bold text-xl">,</span>
+                        <input type="number" id="quiz-4" class="math-input w-20 h-14 md:w-24 md:h-16 text-2xl"
+                            placeholder="?">
+                        <span class="text-slate-500 font-bold text-xl">...</span>
+                    </div>
+                    <p id="quiz-error" class="text-red-400 mt-2 text-lg h-6 font-bold"></p>
+                </div>
+                <button onclick="checkQuiz()"
+                    class="w-full py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-500 hover:to-orange-500 text-white font-bold text-2xl transition-all shadow-lg active:scale-95 border border-amber-400/30">送出答案
+                    (SUBMIT)</button>
+            </div>
+        </div>
+
+        <!-- Mission Screen -->
+        <div id="screen-mission"
+            class="absolute inset-0 flex flex-col items-center justify-center bg-slate-900/90 backdrop-blur-md z-50 hidden">
+            <div class="glass-panel p-8 rounded-2xl text-center border-t-4 border-amber-500 max-w-lg w-[90%]">
+                <h3 class="text-amber-300 tracking-widest mb-4">任務開始</h3>
+                <h1 class="text-4xl font-bold mb-6 text-white">尋找 <span id="mission-highlight"
+                        class="text-amber-400 drop-shadow-md"></span></h1>
+                <p class="text-slate-300 mb-6 leading-relaxed">地板會依照規律生成。<br>只要符合此規律的數字都是安全的。<br>蒐集完數字後，需要<span
+                        class="text-yellow-400 font-bold border-b border-yellow-400">建造階梯</span>才能進入城堡。</p>
+                <button onclick="confirmMission()"
+                    class="w-full py-4 rounded-xl bg-amber-600 hover:bg-amber-500 text-white font-bold text-xl shadow-[0_0_15px_rgba(245,158,11,0.4)] transition-all active:scale-95">出發
+                    (START)</button>
+            </div>
+        </div>
+
+        <!-- Ritual UI -->
+        <div id="screen-ritual"
+            class="absolute inset-0 hidden z-40 pointer-events-auto flex flex-col items-center justify-end pb-4 md:pb-10 fade-in">
+            <div class="flex-1 w-full"><!-- Spacer for canvas --></div>
+            <div class="ritual-content-wrapper">
+                <div id="ritual-step-1" class="transition-all duration-500 mb-4">
+                    <button onclick="triggerRitualAnimation()"
+                        class="btn-magic px-10 py-4 rounded-full bg-gradient-to-r from-amber-500 to-orange-600 text-white font-bold text-xl border-4 border-white/20 shadow-[0_0_20px_rgba(245,158,11,0.6)] hover:scale-105 transition-transform">✨
+                        施展分身術</button>
+                </div>
+                <div id="ritual-step-2"
+                    class="glass-panel p-4 rounded-2xl w-[95%] hidden border border-amber-500 transition-all">
+                    <div class="original-content">
+                        <h3 class="text-lg font-bold text-amber-400 mb-2">步驟 1：觀察長方形邊長</h3>
+                        <div class="flex flex-col md:flex-row gap-3 justify-center items-center">
+                            <div class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-2 border border-slate-600">
+                                <span class="text-amber-300 font-bold text-sm">寬度</span>
+                                <input type="number" id="rit-start" class="math-input w-14 h-10 text-lg"
+                                    placeholder="首">
+                                <span class="text-white">+</span>
+                                <input type="number" id="rit-end" class="math-input w-14 h-10 text-lg" placeholder="末">
+                            </div>
+                            <div class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-2 border border-slate-600">
+                                <span class="text-yellow-300 font-bold text-sm">項數</span>
+                                <input type="number" id="rit-n" class="math-input w-14 h-10 text-lg" placeholder="n">
+                            </div>
+                            <button id="btn-rit-2" onclick="checkRitualDim()"
+                                class="px-6 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-bold shadow-lg">確認</button>
+                        </div>
+                        <p id="ritual-msg-1" class="text-red-400 mt-1 text-sm h-4 text-center"></p>
+                    </div>
+                    <div class="summary-content hidden">
+                        <span class="text-green-400 font-bold">✅ 步驟 1 完成</span>
+                        <span class="text-slate-300 text-sm" id="summary-dim"></span>
+                    </div>
+                </div>
+                <div id="ritual-step-3"
+                    class="glass-panel p-4 rounded-2xl w-[95%] hidden border border-green-500 transition-all">
+                    <div class="original-content">
+                        <h3 class="text-lg font-bold text-green-400 mb-2">步驟 2：計算長方形總數</h3>
+                        <div class="flex items-center justify-center gap-3">
+                            <span class="text-sm text-slate-300">總磚塊數 (寬×高) = </span>
+                            <input type="number" id="rit-total" class="math-input w-24 h-10 text-lg">
+                            <button id="btn-rit-3" onclick="checkRitualTotal()"
+                                class="px-6 py-2 rounded-lg bg-green-600 hover:bg-green-500 text-white font-bold shadow-lg">確認</button>
+                        </div>
+                        <p id="ritual-msg-2" class="text-red-400 mt-1 text-sm h-4 text-center"></p>
+                    </div>
+                    <div class="summary-content hidden">
+                        <span class="text-green-400 font-bold">✅ 步驟 2 完成</span>
+                        <span class="text-slate-300 text-sm" id="summary-total"></span>
+                    </div>
+                </div>
+                <div id="ritual-step-4"
+                    class="glass-panel p-4 rounded-2xl w-[95%] hidden border border-yellow-500 transition-all">
+                    <h3 class="text-lg font-bold text-yellow-400 mb-2">步驟 3：求原本階梯總和</h3>
+                    <p class="text-slate-300 mb-2 text-center text-xs">原本階梯是長方形的 <span
+                            class="text-amber-400 font-bold">一半</span></p>
+                    <div class="flex items-center justify-center gap-3">
+                        <span class="text-sm font-bold text-amber-300">階梯總和 = </span>
+                        <input type="number" id="rit-final" class="math-input w-24 h-10 text-lg">
+                        <button id="btn-rit-4" onclick="checkRitualFinal()"
+                            class="px-6 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-bold shadow-lg">完成</button>
+                    </div>
+                    <p id="ritual-msg-3" class="text-red-400 mt-1 text-sm h-4 text-center"></p>
+                </div>
+                <div id="ritual-step-5" class="glass-panel p-4 rounded-2xl w-[95%] hidden text-center">
+                    <h3
+                        class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-red-400 mb-2">
+                        計算完成！</h3>
+                    <p class="text-lg font-black text-yellow-400 mt-2 mb-4 leading-relaxed bg-slate-800 p-2 rounded">
+                        階梯已生成！快爬上去升起旗幟吧！
+                    </p>
+                    <div class="flex gap-4 justify-center">
+                        <button onclick="finishRitualAndBuild()"
+                            class="px-8 py-3 rounded-lg bg-green-600 hover:bg-green-500 font-bold text-white text-xl shadow-lg animate-bounce">
+                            前往城堡
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Review Screen (Level Clear) -->
+        <div id="screen-review"
+            class="absolute inset-0 flex flex-col items-center justify-center bg-slate-900/95 backdrop-blur-md z-50 hidden overflow-y-auto">
+            <div
+                class="glass-panel p-8 rounded-2xl max-w-2xl w-[95%] border-t-4 border-amber-500 text-center my-10 max-h-[90vh] overflow-y-auto">
+                <h2 class="text-5xl font-black text-amber-400 mb-4 drop-shadow-[0_0_15px_rgba(245,158,11,0.5)]">🏆
+                    關卡完成！</h2>
+
+                <div class="mb-6">
+                    <span class="text-slate-300 text-xl block mb-1">最終得分</span>
+                    <span id="final-score" class="text-6xl font-black text-amber-300 drop-shadow-md">0</span>
+                </div>
+
+                <!-- Mock Message for Low Score -->
+                <div id="mock-msg"
+                    class="hidden mb-6 bg-slate-800 border border-slate-600 p-4 rounded-xl transform rotate-[-2deg]">
+                    <p class="text-4xl">🤪 <span class="text-slate-300 font-bold">太弱了吧，加油好嗎</span></p>
+                </div>
+
+                <div class="bg-slate-800/80 p-6 rounded-xl text-left space-y-5 mb-8 border border-slate-600">
+                    <h3 class="text-2xl font-bold text-amber-400 border-b border-slate-600 pb-2">📜 本關核心回顧 (Concept
+                        Review)</h3>
+                    <div>
+                        <p class="text-amber-300 font-bold text-xl">1. 等差數列 (Arithmetic Sequence)</p>
+                        <p class="text-slate-300 text-lg">相鄰兩項的差都相等，這個差稱為<span class="text-white font-bold">「公差」</span>。
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-amber-300 font-bold text-xl">2. 公差公式</p>
+                        <p class="text-slate-300 text-lg font-mono bg-slate-900 p-2 rounded inline-block text-cyan-200">
+                            公差 = 後項 - 前項
+                        </p>
+                    </div>
+                    <div>
+                        <p class="text-amber-300 font-bold text-xl">3. 等差級數和 (Sum)</p>
+                        <p class="text-slate-300 text-lg">透過圖形拼貼，我們發現總和是長方形面積的一半：</p>
+                        <p
+                            class="text-amber-400 font-bold font-mono bg-slate-900 p-3 rounded mt-2 text-center text-xl border border-slate-600">
+                            總和 = (首項 + 末項) × 項數 ÷ 2
+                        </p>
+                    </div>
+                </div>
+
+                <a href="index.html"
+                    class="w-full py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-500 hover:to-orange-500 text-white font-bold text-2xl transition-all shadow-lg block active:scale-95">
+                    回到 Math City
+                </a>
+            </div>
+        </div>
+
+        <!-- Game Over -->
+        <div id="screen-gameover"
+            class="absolute inset-0 flex flex-col items-center justify-center bg-black/80 backdrop-blur-md z-50 hidden">
+            <h2 class="text-5xl font-bold text-red-500 mb-4">任務失敗</h2>
+            <p class="text-slate-300 mb-8">計算錯誤或失足墜落</p>
+            <div class="flex gap-4">
+                <button onclick="resetGame()"
+                    class="px-8 py-3 rounded-lg bg-white text-slate-900 font-bold hover:bg-slate-200">再試一次</button>
+                <a href="index.html" class="px-8 py-3 rounded-lg bg-indigo-600 font-bold">回到 Math City</a>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // --- Core Variables ---
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        let width, height;
+        let lastTime = 0;
+
+        // Physics - Scaled by Delta Time (Normalized to 60fps)
+        const GRAVITY = 0.45;
+        const JUMP_FORCE = -11.5;
+        const DIVE_FORCE = 18;
+        const MOVE_SPEED = 5;
+        const MAX_JUMPS = 3;
+        const TOTAL_COLLECT_GOAL = 7;
+        const COYOTE_DURATION = 8; // Frames (approx 0.13s)
+
+        // Game State
+        const STATE = { START: 0, TUTORIAL: 1, QUIZ: 2, MISSION_BRIEF: 3, PLAYING: 4, RITUAL: 5, CLIMBING: 6, LEVEL_COMPLETE: 7, GAMEOVER: 8, FIREWORKS: 9 };
+        let gameState = STATE.START;
+        let controlType = 'desktop';
+        let hasPassedTutorial = false;
+        let isLooping = false;
+        let levelCompleteTimer = null;
+        let showGravityHint = false;
+        let hasShownGravityDialog = false; // Flag for story
+        let screenShake = 0;
+        let ritualGlow = 0;
+
+        // Math Logic
+        let sequence = { start: 1, diff: 3, collected: [] };
+        let quizData = { start: 3, diff: 2 };
+        let score = 0;
+
+        // World
+        let nextStoneNum = 1;
+        let worldRightEdge = 0;
+        let generatedTargetCount = 0;
+        let platforms = [];
+        let particles = [];
+        let tutorialObjects = [];
+        let checkpoints = [];
+        let levelObjects = [];
+        let isStairsVanished = false;
+        let isMagicStairsBuilt = false;
+        let castleObject = null;
+        let gravityZone = null;
+        let minPlayerX = -Infinity; // Player Barrier Check
+
+        // Player
+        let player = {
+            x: 0, y: 0, w: 36, h: 54,
+            vx: 0, vy: 0, prevY: 0,
+            isGrounded: false, isDiving: false, jumpCount: 0,
+            facingRight: true,
+            autoWalk: false,
+            gravityHintTimer: 0, // New timer for bubble
+            coyoteTimer: 0, // Coyote Time
+            scaleX: 1, // Animation stretch
+            scaleY: 1,  // Animation squash
+            visible: false // Hidden on start screen
+        };
+
+        // Input
+        let input = { axisX: 0, jumpPressed: false };
+        let lastJumpTime = 0;
+        let joystick = { active: false, startX: 0, currentX: 0, id: null };
+
+        // Camera
+        let cameraX = 0;
+        let cameraY = 0;
+
+        // Tutorial & Ritual
+        let tutorial = { step: 0, checkpointReached: false, jumpTargetsHit: 0 };
+        let ritualPhase = 0;
+        let ritualAnimProgress = 0;
+        let ghostOffsetX = 0;
+        let ghostOffsetY = 0;
+        let ghostRotation = 0;
+
+        // --- Audio System (Web Audio API) ---
+        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+        function playSound(type) {
+            if (audioCtx.state === 'suspended') audioCtx.resume();
+
+            const osc = audioCtx.createOscillator();
+            const gain = audioCtx.createGain();
+            osc.connect(gain);
+            gain.connect(audioCtx.destination);
+
+            const now = audioCtx.currentTime;
+
+            if (type === 'jump') {
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(300, now);
+                osc.frequency.exponentialRampToValueAtTime(600, now + 0.1);
+                gain.gain.setValueAtTime(0.3, now);
+                gain.gain.exponentialRampToValueAtTime(0.01, now + 0.1);
+                osc.start(now);
+                osc.stop(now + 0.1);
+            } else if (type === 'collect') {
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(800, now);
+                osc.frequency.exponentialRampToValueAtTime(1200, now + 0.1);
+                gain.gain.setValueAtTime(0.3, now);
+                gain.gain.exponentialRampToValueAtTime(0.01, now + 0.15);
+                osc.start(now);
+                osc.stop(now + 0.15);
+            } else if (type === 'break') {
+                osc.type = 'sawtooth';
+                osc.frequency.setValueAtTime(100, now);
+                osc.frequency.linearRampToValueAtTime(50, now + 0.2);
+                gain.gain.setValueAtTime(0.3, now);
+                gain.gain.linearRampToValueAtTime(0.01, now + 0.2);
+                osc.start(now);
+                osc.stop(now + 0.2);
+            } else if (type === 'ritual') {
+                // Chord
+                [440, 554, 659].forEach((freq, i) => {
+                    const o = audioCtx.createOscillator();
+                    const g = audioCtx.createGain();
+                    o.type = 'sine';
+                    o.connect(g);
+                    g.connect(audioCtx.destination);
+                    o.frequency.value = freq;
+                    g.gain.setValueAtTime(0.1, now);
+                    g.gain.exponentialRampToValueAtTime(0.001, now + 1.5);
+                    o.start(now);
+                    o.stop(now + 1.5);
+                });
+            } else if (type === 'win') {
+                // Victory Fanfare (Rich C Major 7th Arpeggio with Twinkle)
+                const notes = [
+                    { f: 523.25, t: 0 },    // C5
+                    { f: 659.25, t: 0.1 },  // E5
+                    { f: 783.99, t: 0.2 },  // G5
+                    { f: 987.77, t: 0.3 },  // B5 (Maj7)
+                    { f: 1046.50, t: 0.4 }, // C6
+                    { f: 1318.51, t: 0.6 }  // E6 (Twinkle)
+                ];
+
+                notes.forEach((note) => {
+                    const o = audioCtx.createOscillator();
+                    const g = audioCtx.createGain();
+                    o.type = 'triangle'; // Triangle for gamey but softer sound
+                    o.connect(g);
+                    g.connect(audioCtx.destination);
+                    o.frequency.value = note.f;
+
+                    const startTime = now + note.t;
+                    g.gain.setValueAtTime(0, startTime);
+                    g.gain.linearRampToValueAtTime(0.2, startTime + 0.05); // Attack
+                    g.gain.exponentialRampToValueAtTime(0.001, startTime + 0.8); // Long Decay
+
+                    o.start(startTime);
+                    o.stop(startTime + 0.8);
+                });
+            }
+        }
+
+        // --- Init ---
+        function resize() {
+            width = canvas.width = window.innerWidth;
+            height = canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resize);
+        resize();
+
+        function selectDevice(type) {
+            if (audioCtx.state === 'suspended') audioCtx.resume();
+            controlType = type;
+            document.getElementById('screen-start').classList.add('hidden');
+            if (type === 'mobile') {
+                document.getElementById('mobile-controls').classList.remove('hidden');
+                setupTouchControls();
+            } else {
+                setupKeyboardControls();
+            }
+            if (hasPassedTutorial) startQuizPhase();
+            else startTutorial();
+        }
+
+        function updateTutorialUI(text, hint = "") {
+            document.getElementById('tutorial-text').innerText = text;
+            const hintEl = document.getElementById('tutorial-subtext');
+            if (hint) { hintEl.innerText = hint; hintEl.classList.remove('hidden'); }
+            else { hintEl.classList.add('hidden'); }
+        }
+
+        // --- Tutorial ---
+        function startTutorial() {
+            gameState = STATE.TUTORIAL;
+            document.getElementById('ui-hud').classList.remove('hidden');
+            document.getElementById('ui-tutorial').classList.remove('hidden');
+            resetWorld();
+            const groundY = height * 0.7;
+            platforms.push({ x: 0, y: groundY, w: 1000, h: 40, type: 'safe', visited: true });
+            player.x = 200; player.y = groundY - 54; player.isGrounded = true; player.prevY = player.y; cameraX = 0; cameraY = 0;
+            checkpoints = [{ x: 600, y: groundY - 80, w: 40, h: 80, active: true, type: 'right' }];
+            tutorial.step = 0;
+            updateTutorialUI("基礎移動", "請往右移動，觸碰黃色光柱");
+            if (!isLooping) { lastTime = performance.now(); loop(lastTime); }
+        }
+
+        function advanceTutorialToLeft() {
+            playSound('collect');
+            tutorial.step = 1; checkpoints = [];
+            const groundY = height * 0.7;
+            checkpoints.push({ x: 200, y: groundY - 80, w: 40, h: 80, active: true, type: 'left' });
+            updateTutorialUI("折返跑", "做得好！現在請折返往左移動");
+        }
+
+        function generateJumpTutorial() {
+            playSound('collect');
+            tutorial.step = 2; updateTutorialUI("跳躍訓練", "分別使用一段、二段、三段跳撞擊方塊");
+            // Keep safe platforms, remove others
+            platforms = platforms.filter(p => p.type === 'safe'); checkpoints = [];
+
+            // Determine start X relative to player to ensure continuity
+            const startX = Math.max(player.x + 400, 600);
+            const groundY = height * 0.7;
+
+            // Create a long platform for the training
+            platforms.push({ x: startX - 200, y: groundY, w: 1500, h: 40, type: 'safe' });
+
+            // Adjusted Heights: Restored to enforce Double/Triple jumps
+            // 140 (Single), 290 (Double Only), 430 (Triple Only)
+            tutorialObjects.push({ x: startX, y: groundY - 140, w: 50, h: 50, type: 'target_jump', id: 1, hit: false, color: '#facc15', label: '1' }); // Yellow-400
+            tutorialObjects.push({ x: startX + 300, y: groundY - 290, w: 50, h: 50, type: 'target_jump', id: 2, hit: false, color: '#fbbf24', label: '2' }); // Amber-400
+            tutorialObjects.push({ x: startX + 600, y: groundY - 430, w: 50, h: 50, type: 'target_jump', id: 3, hit: false, color: '#f59e0b', label: '3' }); // Amber-500
+        }
+
+        // --- Quiz ---
+        function startQuizPhase() {
+            gameState = STATE.QUIZ; hasPassedTutorial = true;
+            document.getElementById('ui-hud').classList.add('hidden');
+            document.getElementById('ui-tutorial').classList.add('hidden');
+            document.getElementById('screen-quiz').classList.remove('hidden');
+            const inputs = document.querySelectorAll('#screen-quiz input');
+            inputs.forEach(i => i.value = '');
+            document.getElementById('quiz-error').innerText = '';
+            quizData.start = Math.floor(Math.random() * 3) + 1; quizData.diff = Math.floor(Math.random() * 4) + 2;
+            document.getElementById('quiz-start-val').innerText = quizData.start;
+            document.getElementById('quiz-diff-val').innerText = quizData.diff;
+        }
+
+        function checkQuiz() {
+            const v1 = parseInt(document.getElementById('quiz-1').value);
+            const v2 = parseInt(document.getElementById('quiz-2').value);
+            const v3 = parseInt(document.getElementById('quiz-3').value);
+            const v4 = parseInt(document.getElementById('quiz-4').value);
+            const s = quizData.start; const d = quizData.diff;
+            if (v1 === s && v2 === (s + d) && v3 === (s + d * 2) && v4 === (s + d * 3)) {
+                playSound('collect');
+                document.getElementById('screen-quiz').classList.add('hidden');
+                startMissionBrief();
+            } else {
+                playSound('break');
+                document.getElementById('quiz-error').innerText = `答案不正確！首項是 ${s}，公差是 ${d}。`;
+            }
+        }
+
+        // --- Mission ---
+        function startMissionBrief() {
+            gameState = STATE.MISSION_BRIEF;
+            document.getElementById('ui-hud').classList.remove('hidden');
+            document.getElementById('screen-mission').classList.remove('hidden');
+            const start = Math.floor(Math.random() * 3) + 1; const diff = Math.floor(Math.random() * 2) + 2;
+            sequence = { start, diff, collected: [] };
+            document.getElementById('mission-highlight').innerText = `首項 ${start}, 公差 ${diff}`;
+            document.getElementById('hud-sequence').innerText = `首項：${start}　公差：${diff}`;
+            updateCollectionDots();
+        }
+
+        function confirmMission() {
+            playSound('jump');
+            document.getElementById('screen-mission').classList.add('hidden');
+            gameState = STATE.PLAYING;
+            resetWorld();
+            const startY = height * 0.7;
+            platforms.push({ x: 0, y: startY, w: 1000, h: 40, type: 'safe', visited: true });
+            player.x = 200; player.y = startY - 54; player.isGrounded = true; player.prevY = player.y; cameraX = 0; cameraY = 0;
+            worldRightEdge = 1000; nextStoneNum = 1;
+            generatedTargetCount = 0;
+
+            if (!isLooping) { lastTime = performance.now(); loop(lastTime); }
+        }
+
+        function spawnNextPlatform() {
+            if (generatedTargetCount >= TOTAL_COLLECT_GOAL) {
+                const exists = platforms.some(p => p.type === 'altar_platform' && p.x > cameraX);
+                if (!exists) spawnEndGameStructure();
+                return;
+            }
+
+            const gap = 100 + Math.random() * 60;
+            const x = worldRightEdge + gap;
+            const w = 100; const h = 40;
+            let prevY = platforms[platforms.length - 1].y;
+            let y = prevY + (Math.random() * 120 - 60);
+            y = Math.max(height * 0.4, Math.min(height * 0.8, y));
+
+            const val = nextStoneNum++;
+            const isSafe = (val >= sequence.start) && ((val - sequence.start) % sequence.diff === 0);
+            const termIndex = (val - sequence.start) / sequence.diff;
+            const isHint = isSafe && termIndex < 2;
+
+            if (isSafe) generatedTargetCount++;
+
+            // Numbered Platform (Gravel Texture, NO Decoration)
+            platforms.push({ x, y, w, h, val, type: isSafe ? 'target' : 'trap', visited: false, broken: false, opacity: 1, hint: isHint, seed: Math.random() });
+            worldRightEdge = x + w;
+        }
+
+        function spawnEndGameStructure() {
+            // Gap adjustment (Feedback #1)
+            worldRightEdge += 200;
+
+            // Bridge to fill gap before Altar (Split for deco)
+            for (let i = 0; i < 2; i++) {
+                let deco = null;
+                if (Math.random() < 0.4) {
+                    deco = ['cactus', 'barrel', 'skull', 'rock_pile'][Math.floor(Math.random() * 4)];
+                }
+                platforms.push({ x: worldRightEdge + i * 100, y: height * 0.7, w: 100, h: 40, type: 'safe', decoration: deco, seed: Math.random() });
+            }
+
+            // Altar location
+            const ritualX = worldRightEdge + 150;
+
+            // Long solid base platform under the altar area
+            platforms.push({ x: ritualX - 50, y: height * 0.7, w: 600, h: 40, type: 'safe', isAltarBase: true });
+
+            // The Altar Object itself (raised)
+            platforms.push({ x: ritualX, y: height * 0.7 - 60, w: 160, h: 60, type: 'altar_platform', hits: 0, destroyed: false });
+
+            const terms = sequence.collected;
+            const stairBlockSize = 40;
+            const n = TOTAL_COLLECT_GOAL;
+
+            const maxTerm = sequence.start + (n - 1) * sequence.diff;
+            const stairTotalW = maxTerm * stairBlockSize;
+
+            const stairStartX = ritualX + 300; // CONNECTED
+            const pivotX = stairStartX + stairTotalW;
+            const floorY = height * 0.7;
+
+            // Safety floor bridge to wall
+            platforms.push({ x: stairStartX, y: floorY, w: stairTotalW + 400, h: 40, type: 'safe' });
+
+            // Build Phantom Stairs
+            for (let i = 0; i < n; i++) {
+                const val = sequence.start + i * sequence.diff;
+                const rowW = val * stairBlockSize;
+                const rowH = stairBlockSize;
+                const rowY = floorY - (n - i) * rowH;
+                const rowX = pivotX - rowW;
+
+                platforms.push({
+                    x: rowX,
+                    y: rowY,
+                    w: rowW,
+                    h: rowH,
+                    type: 'temp_stair',
+                    val: val,
+                    blockSize: stairBlockSize
+                });
+            }
+
+            const topStairY = floorY - n * stairBlockSize;
+
+            const wallX = pivotX;
+            const wallH = (height * 0.7 - topStairY) + 100;
+            const wallY = topStairY;
+
+            platforms.push({ x: wallX, y: wallY, w: 100, h: wallH, type: 'safe' });
+            platforms.push({ x: wallX, y: wallY, w: 1500, h: wallH, type: 'safe' });
+
+            // Modified Gravity Zone: Starts AFTER the Altar to allow jumping on it
+            gravityZone = {
+                x: ritualX + 200, // Shifted right to clear the altar area
+                y: wallY + 100, // Trigger if below this
+                w: (wallX - (ritualX + 200)) // Width from start of stairs up to wall
+            };
+
+            const flagX = wallX + 500;
+            const flagH = 500;
+            const flagY = wallY - flagH;
+            levelObjects.push({ type: 'flagpole', x: flagX, y: flagY, h: flagH, active: true });
+
+            castleObject = { type: 'castle', x: flagX + 400, y: wallY - 150 };
+            levelObjects.push(castleObject);
+
+            worldRightEdge = wallX + 3000;
+        }
+
+        function triggerStairVanish() {
+            if (isStairsVanished) return;
+            isStairsVanished = true;
+
+            platforms = platforms.filter(p => p.type !== 'temp_stair');
+
+            const hint = document.getElementById('story-hint');
+            document.getElementById('story-hint-title').innerText = "階梯竟然消失了！"; // Feedback #1
+            document.getElementById('story-hint-desc').innerText = "是不是需要什麼儀式才能再次出現...";
+            hint.classList.remove('hidden');
+
+            setTimeout(() => {
+                hint.classList.add('hidden');
+                document.getElementById('guide-arrow').classList.remove('hidden');
+            }, 4000);
+
+            createParticles(player.x, player.y, 50, '#22d3ee');
+        }
+
+        function triggerGravityDialog() {
+            if (hasShownGravityDialog || isMagicStairsBuilt) return; // Don't show if stairs built
+            hasShownGravityDialog = true;
+
+            const hint = document.getElementById('story-hint');
+            document.getElementById('story-hint-title').innerText = "階梯竟然消失了！";
+            document.getElementById('story-hint-desc').innerText = "是不是需要什麼儀式才能再次出現...";
+            hint.classList.remove('hidden');
+
+            setTimeout(() => {
+                hint.classList.add('hidden');
+            }, 4000);
+        }
+
+        function updateCollectionDots() {
+            const container = document.getElementById('collection-dots');
+            container.innerHTML = '';
+            for (let i = 0; i < TOTAL_COLLECT_GOAL; i++) {
+                const dot = document.createElement('div');
+                const isFilled = i < sequence.collected.length;
+                dot.className = `w-3 h-3 rounded-full transition-colors ${isFilled ? 'bg-yellow-400 shadow-[0_0_10px_rgba(250,204,21,0.8)]' : 'bg-slate-700 border border-slate-500'}`;
+                container.appendChild(dot);
+            }
+        }
+
+        // --- Physics ---
+        function resolveHorizontalCollision(p, dt) {
+            if (player.x + player.w > p.x && player.x < p.x + p.w) {
+                if (player.y + player.h > p.y && player.y < p.y + p.h) {
+                    if (player.x + player.w / 2 < p.x + p.w / 2) {
+                        player.x = p.x - player.w - 0.1;
+                    } else {
+                        player.x = p.x + p.w + 0.1;
+                    }
+                    player.vx = 0;
+                }
+            }
+        }
+
+        function isPlayerOverAltar() {
+            const base = platforms.find(p => p.type === 'altar_platform');
+            if (!base) return false;
+            return (player.x + player.w > base.x && player.x < base.x + base.w);
+        }
+
+        function updatePhysics(dt) {
+            // Restore Squash/Stretch to 1
+            player.scaleX += (1 - player.scaleX) * 0.2 * dt;
+            player.scaleY += (1 - player.scaleY) * 0.2 * dt;
+
+            // Update Coyote Time
+            if (player.isGrounded) {
+                player.coyoteTimer = COYOTE_DURATION;
+            } else {
+                if (player.coyoteTimer > 0) player.coyoteTimer -= dt;
+            }
+
+            if (player.autoWalk) {
+                player.vx = 3;
+                player.facingRight = true;
+            } else {
+                player.vx = input.axisX * MOVE_SPEED;
+                if (player.vx !== 0) player.facingRight = player.vx > 0;
+            }
+
+            // --- Feedback #2: Altar Area Barrier ---
+            const altarBase = platforms.find(p => p.isAltarBase);
+            if (altarBase) {
+                // If player is past the start of the base, update minPlayerX to lock them in
+                if (player.x > altarBase.x) {
+                    // Lock player to not go left of altar base
+                    minPlayerX = altarBase.x;
+                }
+            }
+            // Enforce Barrier
+            if (player.x < minPlayerX) {
+                player.x = minPlayerX;
+                if (player.vx < 0) player.vx = 0;
+            }
+
+            // --- Feedback #1: Left Boundary Barrier at Start ---
+            if (gameState === STATE.PLAYING && player.x < 0) {
+                player.x = 0;
+                if (player.vx < 0) player.vx = 0;
+
+                // Show floating text hint
+                if (Math.random() < 0.05) {
+                    particles.push({
+                        x: player.x + 60,
+                        y: player.y,
+                        life: 1.5,
+                        type: 'text',
+                        text: "往右走 ➔"
+                    });
+                }
+            }
+
+            player.prevY = player.y;
+
+            player.x += player.vx * dt;
+
+            if (gameState === STATE.PLAYING || gameState === STATE.CLIMBING) {
+                for (let p of platforms) {
+                    if (p.type === 'safe' || p.type === 'magic_stair' || p.type === 'temp_stair' || (p.type === 'altar_platform' && !p.destroyed)) {
+                        if (p.h > 20) resolveHorizontalCollision(p, dt);
+                    }
+                }
+            }
+
+            // Show Altar Hint (Logic Optimized)
+            const altarHint = document.getElementById('altar-hint');
+            const altar = platforms.find(p => p.type === 'altar_platform');
+            // Feedback #4: Show hints immediately when Over Altar (grounded or not)
+            const isOver = isPlayerOverAltar();
+
+            if (gameState === STATE.PLAYING && altar && isStairsVanished && !altar.destroyed && isOver) {
+                document.getElementById('guide-arrow').classList.add('hidden'); // Feedback #4: Hide arrow immediately
+
+                const hintText = document.getElementById('altar-hint-text');
+                if (altar.hits === 1) {
+                    hintText.innerText = "💥 祭壇出現裂痕了！再下墜一次！";
+                    altarHint.querySelector('div').className = "glass-panel px-4 py-2 rounded-xl border border-yellow-400 bg-yellow-900/80";
+                } else {
+                    hintText.innerText = "🔥 連點兩下跳躍，下墜打破祭壇！";
+                    altarHint.querySelector('div').className = "glass-panel px-4 py-2 rounded-xl border border-red-400 bg-red-900/80";
+                }
+
+                // Only show if not diving to avoid cluttering screen during action
+                if (!player.isDiving) altarHint.classList.remove('hidden');
+                else altarHint.classList.add('hidden');
+            } else {
+                altarHint.classList.add('hidden');
+            }
+
+            // Unconditional Gravity Zone Trigger
+            if (gravityZone && isStairsVanished && !isMagicStairsBuilt) {
+                if (player.x > gravityZone.x && player.x < gravityZone.x + gravityZone.w && player.y > gravityZone.y) {
+                    // Trigger gravity dialog if player tries to jump or is just in it
+                    triggerGravityDialog();
+                    let gravityMult = 5;
+                    // Trigger bubble only on jump start, and use timer (Feedback #3)
+                    if (player.vy < 0 && player.gravityHintTimer <= 0) {
+                        player.gravityHintTimer = 120; // Approx 2 seconds (120 * dt of 1)
+                    }
+
+                    player.vy += GRAVITY * gravityMult * dt;
+                } else {
+                    player.vy += GRAVITY * dt;
+                }
+            } else {
+                player.vy += GRAVITY * dt;
+            }
+
+            // Decrement Gravity Hint Timer (Feedback #3)
+            if (player.gravityHintTimer > 0) {
+                player.gravityHintTimer -= dt;
+            }
+
+            const maxFall = player.isDiving ? 20 : 12;
+            if (player.vy > maxFall) player.vy = maxFall;
+
+            // Squash/Stretch in Air
+            if (!player.isGrounded) {
+                if (Math.abs(player.vy) < 2) {
+                    // Apex
+                    player.scaleX = 1.1; player.scaleY = 0.9;
+                } else {
+                    // Falling/Rising
+                    player.scaleX = 0.9; player.scaleY = 1.1;
+                }
+            }
+
+            player.y += player.vy * dt;
+
+            let targetCamX = player.x - width * 0.3;
+            if (targetCamX < 0) targetCamX = 0;
+            cameraX += (targetCamX - cameraX) * 0.1 * dt;
+
+            let targetCamY = 0;
+            const isTutorial = gameState === STATE.TUTORIAL;
+            const ritualBase = platforms.find(p => p.type === 'ritual_base' || p.type === 'altar_platform');
+
+            if (isTutorial || (ritualBase && player.x > ritualBase.x)) {
+                targetCamY = player.y - height * 0.6;
+                if (targetCamY > 0) targetCamY = 0;
+            }
+            cameraY += (targetCamY - cameraY) * 0.1 * dt;
+
+            if (gameState === STATE.TUTORIAL) {
+                for (let cp of checkpoints) {
+                    if (cp.active && player.x + player.w > cp.x && player.x < cp.x + cp.w) {
+                        if (player.y + player.h > cp.y && player.y < cp.y + cp.h) {
+                            cp.active = false;
+                            createParticles(cp.x + cp.w / 2, cp.y + cp.h / 2, 20, '#fbbf24');
+                            if (cp.type === 'right') advanceTutorialToLeft();
+                            else if (cp.type === 'left') setTimeout(generateJumpTutorial, 500);
+                        }
+                    }
+                }
+            }
+
+            player.isGrounded = false;
+            if (player.vy >= 0) {
+                for (let p of platforms) {
+                    // Ignore collision for destroyed altar platform
+                    if (p.type === 'altar_platform' && p.destroyed) continue;
+
+                    if (p.broken) continue;
+                    if (player.x + player.w * 0.2 > p.x && player.x + player.w * 0.8 < p.x + p.w) {
+                        const currFeet = player.y + player.h;
+                        const prevFeet = player.prevY + player.h;
+                        if (prevFeet <= p.y + 15 && currFeet >= p.y) {
+                            player.y = p.y - player.h; player.vy = 0; player.isGrounded = true; player.jumpCount = 0; handleLanding(p);
+                        }
+                    }
+                }
+            }
+
+            if (gameState === STATE.PLAYING || gameState === STATE.CLIMBING) {
+                for (let obj of levelObjects) {
+                    if (obj.type === 'flagpole' && obj.active) {
+                        if (player.x + player.w > obj.x && player.x < obj.x + 10) {
+                            if (player.y < obj.y + obj.h && player.y > obj.y - 50) {
+                                obj.active = false;
+                                let distFromTop = player.y - obj.y;
+                                if (distFromTop < 0) distFromTop = 0;
+                                let ratio = 1 - (distFromTop / obj.h);
+                                score = Math.floor(ratio * 1000);
+                                if (score < 0) score = 0;
+
+                                particles.push({ x: player.x, y: player.y - 50, life: 2.0, type: 'text', text: `+${score}` });
+                                player.autoWalk = true;
+                                player.vy = 2;
+                                gameState = STATE.CLIMBING;
+                                createParticles(player.x, player.y, 50, '#fbbf24');
+                                playSound('collect');
+                            }
+                        }
+                    }
+                    if (obj.type === 'castle' && player.autoWalk) {
+                        if (player.x >= obj.x + 50) {
+                            player.x = obj.x + 50;
+                            player.autoWalk = false;
+                            player.vx = 0;
+                            player.visible = false;
+
+                            spawnFireworksForScore(score);
+                            gameState = STATE.FIREWORKS;
+                            levelCompleteTimer = setTimeout(showLevelComplete, 3500);
+                        }
+                    }
+                }
+            }
+
+            if (gameState === STATE.TUTORIAL && player.vy < 0) {
+                for (let obj of tutorialObjects) {
+                    if (obj.hit) continue;
+                    // Relaxed hit detection window (30px instead of 20px)
+                    if (player.x + player.w > obj.x && player.x < obj.x + obj.w) {
+                        if (player.y >= obj.y + obj.h && player.y <= obj.y + obj.h + 30) {
+                            player.vy = 2; obj.hit = true;
+                            createParticles(obj.x + obj.w / 2, obj.y + obj.h / 2, 10, obj.color);
+                            playSound('collect');
+                            tutorial.jumpTargetsHit++;
+
+                            // Directly start Quiz after 3 hits
+                            if (tutorial.jumpTargetsHit === 3) setTimeout(startQuizPhase, 500);
+                        }
+                    }
+                }
+            }
+
+            if (player.y > height + 500) {
+                if (gameState === STATE.TUTORIAL) {
+                    playSound('break');
+                    player.y = height * 0.5;
+                    player.vy = 0;
+                    player.isDiving = false;
+
+                    // Smart Respawn: Respawn near the current objective
+                    if (tutorial.step === 2) {
+                        // Find first un-hit target
+                        const nextTarget = tutorialObjects.find(t => !t.hit);
+                        if (nextTarget) {
+                            player.x = nextTarget.x - 300; // Respawn before the target
+                        } else if (tutorialObjects.length > 0) {
+                            player.x = tutorialObjects[0].x - 300;
+                        } else {
+                            player.x = 200;
+                        }
+                    } else {
+                        player.x = 200;
+                    }
+                } else {
+                    playSound('break');
+                    triggerGameOver();
+                }
+            }
+            if (gameState === STATE.PLAYING && worldRightEdge < cameraX + width + 300) {
+                spawnNextPlatform();
+            }
+
+            // Particle Updates (Logic Only)
+            for (let i = particles.length - 1; i >= 0; i--) {
+                let p = particles[i];
+                if (p.type === 'text') {
+                    p.y -= 1 * dt;
+                    p.life -= 0.02 * dt;
+                } else if (p.type === 'error_text') {
+                    // New Error Feedback Particle
+                    p.y -= 0.5 * dt;
+                    p.life -= 0.015 * dt;
+                } else if (p.type === 'smoke') {
+                    p.x += p.vx * dt * 0.5;
+                    p.y += p.vy * dt * 0.5;
+                    p.life -= 0.01 * dt;
+                    p.vx *= 0.95; p.vy *= 0.95;
+                } else if (p.type === 'arrow') {
+                    p.y += 2 * dt; p.life -= 0.05 * dt;
+                } else {
+                    p.x += p.vx * dt;
+                    p.y += p.vy * dt;
+                    p.vy += 0.05 * dt;
+                    p.life -= 0.01 * dt;
+                }
+                if (p.life <= 0) particles.splice(i, 1);
+            }
+        }
+
+        function handleLanding(p) {
+            // Landing Squash
+            player.scaleX = 1.3; player.scaleY = 0.7;
+            // playSound('land'); // Removed as requested
+
+            const wasDiving = player.isDiving;
+            if (player.isDiving) player.isDiving = false;
+
+            if (p.type === 'temp_stair') {
+                triggerStairVanish();
+                return;
+            }
+
+            // Altar Break Logic
+            if (p.type === 'altar_platform' && wasDiving && !p.destroyed) {
+                p.hits = (p.hits || 0) + 1;
+
+                if (p.hits === 1) {
+                    createParticles(p.x + p.w / 2, p.y, 30, '#a855f7');
+                    playSound('break');
+                    screenShake = 10;
+                } else if (p.hits >= 2) {
+                    p.destroyed = true; // Mark destroyed
+                    createParticles(p.x + p.w / 2, p.y + p.h / 2, 80, '#facc15');
+                    createParticles(p.x + p.w / 2, p.y + p.h / 2, 50, '#334155'); // Grey smoke
+                    playSound('break');
+                    screenShake = 20;
+                    setTimeout(startRitual, 1500); // Delayed Ritual Start for visual effect
+                }
+                return;
+            }
+
+            if (p.visited) return;
+            p.visited = true;
+
+            if (p.type === 'trap') {
+                p.broken = true; createParticles(p.x + p.w / 2, p.y + p.h / 2, 15, '#94a3b8'); createParticles(player.x + player.w / 2, player.y + player.h, 10, '#ef4444');
+
+                // --- Error Feedback Logic ---
+                if (sequence.collected.length > 0) {
+                    let lastVal = sequence.collected[sequence.collected.length - 1];
+                    let diff = p.val - lastVal;
+                    let msg = `${p.val} - ${lastVal} = ${diff} (≠ ${sequence.diff})`;
+                    particles.push({ x: p.x + p.w / 2, y: p.y - 40, life: 2.5, type: 'error_text', text: msg });
+                } else {
+                    particles.push({ x: p.x + p.w / 2, y: p.y - 40, life: 2.5, type: 'error_text', text: `不是 ${sequence.start}` });
+                }
+
+                // --- Feedback #3: Immediate Fall (No Jump possible) ---
+                player.isGrounded = false;
+                player.y += 5;
+                player.vy = 5;
+                player.coyoteTimer = 0; // Prevent coyote jump
+                player.jumpCount = MAX_JUMPS; // Exhaust double jumps
+
+                playSound('break');
+            } else if (p.type === 'target') {
+                p.visualState = 'success'; createParticles(player.x + player.w / 2, player.y + player.h, 10, '#22d3ee');
+                sequence.collected.push(p.val); updateCollectionDots();
+                playSound('collect');
+            }
+        }
+
+        // --- Controls ---
+        function performJump() {
+            if (player.autoWalk) return;
+            // Coyote Time Check: Allow jump if timer > 0 OR have double jumps
+            if (player.isGrounded || player.coyoteTimer > 0 || player.jumpCount < MAX_JUMPS) {
+                player.vy = JUMP_FORCE;
+                player.isGrounded = false;
+                player.isDiving = false;
+                player.coyoteTimer = 0; // Consume Coyote Time
+
+                // Jump Stretch
+                player.scaleX = 0.8; player.scaleY = 1.2;
+
+                player.jumpCount++;
+                createParticles(player.x + player.w / 2, player.y + player.h, 5, '#fff', player.vx * 0.5);
+                playSound('jump');
+            }
+        }
+        function performDive() {
+            if (player.autoWalk) return;
+            if (!player.isGrounded) {
+                player.vy = DIVE_FORCE; player.isDiving = true; player.jumpCount = MAX_JUMPS;
+                createParticles(player.x + player.w / 2, player.y, 8, '#a855f7');
+                playSound('jump');
+            }
+        }
+        function handleActionInput() {
+            const now = Date.now();
+            // Double Tap Logic - Modified: Only dive if over Altar
+            if (now - lastJumpTime < 300 && isPlayerOverAltar()) {
+                performDive();
+            } else {
+                performJump();
+            }
+            lastJumpTime = now;
+        }
+        function setupKeyboardControls() {
+            window.addEventListener('keydown', (e) => {
+                if (e.repeat) return;
+                if (e.code === 'ArrowLeft') input.axisX = -1; if (e.code === 'ArrowRight') input.axisX = 1;
+                if (e.code === 'Space') { e.preventDefault(); if (!input.jumpPressed) { input.jumpPressed = true; handleActionInput(); } }
+            });
+            window.addEventListener('keyup', (e) => {
+                if (e.code === 'ArrowLeft' && input.axisX === -1) input.axisX = 0;
+                if (e.code === 'ArrowRight' && input.axisX === 1) input.axisX = 0;
+                if (e.code === 'Space') input.jumpPressed = false;
+            });
+        }
+        function setupTouchControls() {
+            const zone = document.getElementById('joystick-zone');
+            const knob = document.getElementById('joystick-knob');
+            const btn = document.getElementById('btn-jump');
+            const maxDist = 50;
+            const threshold = 10; // New threshold for digital feeling
+
+            zone.addEventListener('touchstart', (e) => {
+                joystick.active = true; joystick.id = e.changedTouches[0].identifier; joystick.startX = e.changedTouches[0].clientX;
+            }, { passive: false });
+            window.addEventListener('touchmove', (e) => {
+                if (!joystick.active) return;
+                for (let i = 0; i < e.changedTouches.length; i++) {
+                    if (e.changedTouches[i].identifier === joystick.id) {
+                        let cx = e.changedTouches[i].clientX;
+                        let diff = cx - joystick.startX;
+
+                        // Limit visual movement
+                        let visualDiff = diff;
+                        if (visualDiff > maxDist) visualDiff = maxDist;
+                        if (visualDiff < -maxDist) visualDiff = -maxDist;
+                        knob.style.transform = `translate(${visualDiff}px, 0px)`;
+
+                        // Digital Input Logic
+                        if (diff > threshold) input.axisX = 1;
+                        else if (diff < -threshold) input.axisX = -1;
+                        else input.axisX = 0;
+                    }
+                }
+            }, { passive: false });
+            const endJoy = (e) => {
+                for (let i = 0; i < e.changedTouches.length; i++) {
+                    if (e.changedTouches[i].identifier === joystick.id) {
+                        joystick.active = false; knob.style.transform = `translate(0px, 0px)`; input.axisX = 0;
+                    }
+                }
+            };
+            window.addEventListener('touchend', endJoy); window.addEventListener('touchcancel', endJoy);
+            btn.addEventListener('touchstart', (e) => { e.preventDefault(); handleActionInput(); }, { passive: false });
+        }
+
+        // --- Visuals ---
+        function createParticles(x, y, count, color, inertiaX = 0) {
+            for (let i = 0; i < count; i++) {
+                particles.push({
+                    x, y, color,
+                    vx: (Math.random() - 0.5) * 8 + inertiaX,
+                    vy: (Math.random() - 0.5) * 8 - 2,
+                    life: 1.0
+                });
+            }
+        }
+
+        function spawnFireworksForScore(s) {
+            let count = 0;
+            let colors = [];
+            let type = 'normal';
+
+            let baseX = castleObject ? castleObject.x + 100 : cameraX + width / 2;
+            let baseY = castleObject ? castleObject.y : cameraY + height / 3;
+
+            if (s >= 900) { type = 'ultra'; count = 300; colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff', '#fff']; }
+            else if (s >= 700) { type = 'fancy'; count = 150; colors = ['#fbbf24', '#f59e0b', '#fff']; }
+            else if (s >= 500) { type = 'normal'; count = 80; colors = ['#22d3ee', '#fff']; }
+            else if (s >= 300) { type = 'small'; count = 40; colors = ['#fff']; }
+            else { type = 'smoke'; count = 60; colors = ['#334155', '#475569', '#1e293b']; }
+
+            if (type === 'smoke') {
+                document.getElementById('mock-msg').classList.remove('hidden');
+                for (let k = 0; k < count; k++) {
+                    particles.push({
+                        x: baseX + (Math.random() - 0.5) * 100,
+                        y: castleObject ? castleObject.y + 100 : baseY + 200,
+                        vx: (Math.random() - 0.5) * 2,
+                        vy: -Math.random() * 1.5 - 0.5,
+                        life: 3.0,
+                        color: colors[Math.floor(Math.random() * colors.length)],
+                        type: 'smoke'
+                    });
+                }
+            } else {
+                for (let k = 0; k < count; k++) {
+                    particles.push({
+                        x: baseX + (Math.random() - 0.5) * 300,
+                        y: baseY - Math.random() * 200,
+                        vx: (Math.random() - 0.5) * 6, // Slower initial
+                        vy: (Math.random() - 0.5) * 6 - 3,
+                        life: 2.0 + Math.random(),
+                        color: colors[Math.floor(Math.random() * colors.length)],
+                        type: 'firework'
+                    });
+                }
+                playSound('win'); // Play victory sound properly with fireworks!
+            }
+        }
+
+        function drawBackground() {
+            // Synthwave Sky Gradient (Deep Purple -> Neon Pink -> Orange)
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, '#0f0c29');   // Deep Black-Blue
+            gradient.addColorStop(0.5, '#302b63'); // Dark Purple
+            gradient.addColorStop(1, '#24243e');   // Dark Blue-Grey
+
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+
+            // --- Retrowave Sun ---
+            const sunX = width * 0.5; // Center Sun
+            const sunY = height * 0.65; // Horizon line
+            const sunRadius = 150;
+
+            // Sun Gradient
+            const sunGrad = ctx.createLinearGradient(sunX, sunY - sunRadius, sunX, sunY + sunRadius);
+            sunGrad.addColorStop(0, '#facc15'); // Yellow
+            sunGrad.addColorStop(0.5, '#fb923c'); // Orange
+            sunGrad.addColorStop(1, '#db2777'); // Magenta
+
+            ctx.save();
+            ctx.fillStyle = sunGrad;
+            ctx.shadowBlur = 40; ctx.shadowColor = '#f59e0b';
+            ctx.beginPath();
+            ctx.arc(sunX, sunY, sunRadius, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.shadowBlur = 0;
+
+            // Sun Stripes (The "Blinds" effect)
+            ctx.fillStyle = '#24243e'; // Match bottom sky color to "cut" the sun
+            for (let y = sunY - 40; y < sunY + sunRadius; y += 12) {
+                const thickness = (y - (sunY - 40)) / 10; // Thicker at bottom
+                if (thickness > 0) ctx.fillRect(sunX - sunRadius, y, sunRadius * 2, thickness);
+            }
+            ctx.restore();
+
+            // --- Perspective Grid ---
+            ctx.save();
+            ctx.strokeStyle = 'rgba(232, 121, 249, 0.3)'; // Neon Fuchsia faint
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+
+            // Horizon Line
+            ctx.moveTo(0, sunY); ctx.lineTo(width, sunY);
+
+            // Vertical Lines (Perspective)
+            const fov = 800;
+            const horizonY = sunY;
+            // Shift grid with cameraX to feel movement
+            const gridOffset = (cameraX % 100);
+
+            for (let x = -width; x < width * 2; x += 100) {
+                // Determine x pos on horizon (vanishing point is center ideally, but for 2D side scroller we fake it)
+                // Let's make them parallel but slanted for style, or just perspective from bottom center?
+                // Standard Synthwave grid usually moves TOWARDS horizon. Since this is scrolling sidewards:
+                // We draw vertical lines that scroll with parallax
+                let drawX = x - gridOffset;
+                ctx.moveTo(drawX, horizonY);
+                ctx.lineTo(drawX - (drawX - width / 2) * 3, height); // Fake perspective fanning out
+            }
+
+            // Horizontal Lines (Approaching viewer)
+            // In a side scroller, these are static horizontal lines usually, or they scroll Y? 
+            // Let's keep them static horizontal for the "ground plane" effect
+            let totalDist = height - horizonY;
+            for (let i = 0; i < 10; i++) {
+                let y = horizonY + (totalDist * (i / 10) ** 2); // Quadratic spacing
+                ctx.moveTo(0, y); ctx.lineTo(width, y);
+            }
+            ctx.stroke();
+            ctx.restore();
+
+            // Distant Mountains (Wireframe Style - Static & Layered)
+
+            // Layer 1: Back Mountains (Darker, Slower Parallax)
+            ctx.fillStyle = '#0f172a';
+            ctx.strokeStyle = '#0891b2'; // Cyan-700
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(0, height);
+            for (let x = 0; x <= width; x += 20) {
+                let mX = (x + cameraX * 0.05);
+                let noise = Math.sin(mX * 0.003) * 80 + Math.sin(mX * 0.01) * 40;
+                let hY = height * 0.6 - Math.abs(noise);
+                if (hY > height * 0.6) hY = height * 0.6;
+                ctx.lineTo(x, hY);
+            }
+            ctx.lineTo(width, height);
+            ctx.fill();
+            ctx.stroke();
+
+            // Layer 2: Front Mountains (Lighter edges, Faster Parallax)
+            ctx.strokeStyle = '#22d3ee'; // Cyan-400
+            ctx.fillStyle = '#1e293b';   // Slate-800
+            ctx.lineWidth = 2;
+
+            ctx.beginPath();
+            ctx.moveTo(0, height);
+            for (let x = 0; x <= width; x += 10) {
+                let mX = (x + cameraX * 0.1);
+
+                // Summit multiple sine waves (Deterministic Noise)
+                let noise = Math.sin(mX * 0.005) * 60
+                    + Math.sin(mX * 0.013) * 30
+                    + Math.sin(mX * 0.023) * 10;
+
+                let hY = height * 0.65 - Math.abs(noise) - 20;
+                if (hY > height * 0.65) hY = height * 0.65;
+
+                // Jagged look via regular sampling (No Math.random)
+                ctx.lineTo(x, hY);
+            }
+            ctx.lineTo(width, height);
+            ctx.fill();
+            ctx.stroke();
+        }
+
+        function drawDecoration(type, x, y, seed) {
+            // Cyber/Holographic Decorations
+            ctx.save();
+            ctx.translate(x, y);
+
+            // Hologram Flicker
+            const flicker = Math.random() > 0.95;
+            if (flicker) ctx.translate((Math.random() - 0.5) * 5, 0);
+
+            ctx.shadowBlur = 10;
+
+            if (type === 'cactus') {
+                // Neon Wireframe Cactus
+                ctx.strokeStyle = '#0f0'; // Green
+                ctx.shadowColor = '#0f0';
+                ctx.lineWidth = 2;
+                ctx.fillStyle = 'rgba(0, 255, 0, 0.1)';
+
+                ctx.beginPath();
+                // Main
+                ctx.rect(10, -50, 10, 50);
+                // Arm 1
+                ctx.moveTo(10, -35); ctx.lineTo(-5, -35); ctx.lineTo(-5, -45); ctx.lineTo(10, -45);
+                // Arm 2
+                ctx.moveTo(20, -25); ctx.lineTo(35, -25); ctx.lineTo(35, -35); ctx.lineTo(20, -35);
+
+                ctx.stroke();
+                ctx.fill();
+
+            } else if (type === 'barrel') {
+                // Digital Canister
+                ctx.strokeStyle = '#f59e0b'; // Amber
+                ctx.shadowColor = '#f59e0b';
+                ctx.lineWidth = 2;
+                ctx.fillStyle = 'rgba(245, 158, 11, 0.2)';
+
+                ctx.beginPath();
+                ctx.moveTo(5, -30); ctx.lineTo(29, -30); ctx.lineTo(29, 0); ctx.lineTo(5, 0); ctx.closePath();
+                // X mark
+                ctx.moveTo(5, -30); ctx.lineTo(29, 0);
+                ctx.moveTo(29, -30); ctx.lineTo(5, 0);
+                ctx.stroke();
+                ctx.fill();
+
+            } else if (type === 'skull') {
+                // Glitch Skull (Triangle/Poly)
+                ctx.strokeStyle = '#e2e8f0';
+                ctx.shadowColor = '#fff';
+                ctx.lineWidth = 2;
+
+                ctx.beginPath();
+                ctx.moveTo(0, 0); ctx.lineTo(10, -15); ctx.lineTo(20, 0); ctx.closePath();
+                ctx.moveTo(0, -10); ctx.lineTo(-10, -20);
+                ctx.moveTo(20, -10); ctx.lineTo(30, -20);
+                ctx.stroke();
+            } else if (type === 'rock_pile') {
+                // Low Poly Rocks
+                ctx.strokeStyle = '#a855f7'; // Purple
+                ctx.shadowColor = '#a855f7';
+                ctx.fillStyle = 'rgba(168, 85, 247, 0.2)';
+                ctx.lineWidth = 2;
+
+                ctx.beginPath();
+                ctx.moveTo(0, 0); ctx.lineTo(7, -15); ctx.lineTo(15, 0); ctx.closePath();
+                ctx.moveTo(12, 0); ctx.lineTo(18, -10); ctx.lineTo(24, 0); ctx.closePath();
+                ctx.stroke();
+                ctx.fill();
+            }
+
+            ctx.restore();
+        }
+
+        function drawGravelTexture(x, y, w, h, seed) {
+            // Deterministic random using seed (simple hash)
+            let localSeed = seed * 1000;
+            const pseudoRand = () => {
+                localSeed = (localSeed * 9301 + 49297) % 233280;
+                return localSeed / 233280;
+            };
+
+            ctx.fillStyle = 'rgba(0,0,0,0.2)';
+            for (let i = 0; i < 8; i++) {
+                let rx = pseudoRand() * (w - 10) + 5;
+                let ry = pseudoRand() * (h - 5);
+                let s = pseudoRand() * 4 + 2;
+                ctx.fillRect(x + rx, y + ry, s, s);
+            }
+        }
+
+        function draw() {
+            drawBackground();
+            ctx.save(); ctx.translate(-cameraX, -cameraY);
+
+            // Apply Shake (Only apply global shake if NOT in ritual mode to avoid background shaking)
+            if (screenShake > 0 && gameState !== STATE.RITUAL) {
+                ctx.translate((Math.random() - 0.5) * screenShake, (Math.random() - 0.5) * screenShake);
+            }
+
+            if (gameState === STATE.TUTORIAL) {
+                for (let cp of checkpoints) {
+                    if (cp.active) {
+                        ctx.shadowBlur = 20; ctx.shadowColor = '#facc15';
+                        ctx.fillStyle = 'rgba(250, 204, 21, 0.3)'; ctx.fillRect(cp.x, cp.y, cp.w, cp.h);
+                        ctx.fillStyle = 'rgba(250, 204, 21, 0.8)'; ctx.fillRect(cp.x + 10, cp.y, 20, cp.h);
+                        ctx.shadowBlur = 0; ctx.fillStyle = '#fff'; ctx.font = '20px Arial'; ctx.textAlign = 'center';
+                        ctx.fillText(cp.type === 'right' ? '➡️' : '⬅️', cp.x + cp.w / 2, cp.y - 10);
+                    }
+                }
+            }
+
+            for (let obj of levelObjects) {
+                if (obj.type === 'flagpole') {
+                    ctx.fillStyle = '#94a3b8'; ctx.fillRect(obj.x, obj.y, 10, obj.h);
+                    ctx.fillStyle = '#fbbf24'; ctx.beginPath(); ctx.arc(obj.x + 5, obj.y, 10, 0, Math.PI * 2); ctx.fill();
+                    let flagY = obj.active ? obj.y + 10 : (player.y - 20);
+                    if (!obj.active && flagY > obj.y + obj.h - 40) flagY = obj.y + obj.h - 40;
+                    if (flagY < obj.y + 10) flagY = obj.y + 10;
+                    ctx.fillStyle = '#ef4444';
+                    ctx.beginPath(); ctx.moveTo(obj.x + 10, flagY); ctx.lineTo(obj.x + 60, flagY + 20); ctx.lineTo(obj.x + 10, flagY + 40); ctx.fill();
+
+                    // Score Hint Text
+                    if (obj.active) {
+                        ctx.fillStyle = '#fbbf24';
+                        ctx.font = 'bold 20px "Noto Sans TC"';
+                        ctx.textAlign = 'center';
+                        // Text bouncing slightly
+                        const bounce = Math.sin(Date.now() * 0.005) * 5;
+                        ctx.fillText("跳得越高，分數越高！", obj.x + 150, obj.y + obj.h / 2 + bounce);
+                    }
+                }
+                else if (obj.type === 'castle') {
+                    const cx = obj.x; const cy = obj.y;
+                    ctx.fillStyle = '#fbbf24';
+                    ctx.fillRect(cx, cy, 200, 150);
+                    ctx.fillRect(cx - 30, cy + 30, 30, 120);
+                    ctx.fillRect(cx + 200, cy + 30, 30, 120);
+                    ctx.fillStyle = '#ef4444';
+                    ctx.beginPath(); ctx.moveTo(cx - 40, cy + 30); ctx.lineTo(cx - 15, cy - 20); ctx.lineTo(cx + 10, cy + 30); ctx.fill();
+                    ctx.beginPath(); ctx.moveTo(cx + 190, cy + 30); ctx.lineTo(cx + 215, cy - 20); ctx.lineTo(cx + 240, cy + 30); ctx.fill();
+                    ctx.fillStyle = '#3f2c22'; ctx.beginPath(); ctx.arc(cx + 100, cy + 150, 40, Math.PI, 0); ctx.fill();
+                }
+            }
+
+            for (let p of platforms) {
+                if (p.opacity <= 0) continue; if (p.broken) { p.y += 5; p.opacity -= 0.05; }
+                ctx.globalAlpha = p.opacity;
+                if (p.type === 'safe' || p.type === 'target' || (p.type === 'trap' && !p.broken)) {
+                    // Modern Cyber Platforms
+                    // Base: Dark semi-transparent fill
+                    // Border: Neon Glowing Line
+                    let borderColor = '#22d3ee'; // Default Safe: Cyan
+                    let glowColor = '#22d3ee';
+
+                    if (p.type === 'safe') {
+                        borderColor = '#22d3ee'; glowColor = '#22d3ee';
+                    } else if (p.type === 'target') {
+                        // User Request: Turn Amber if visited/hinted
+                        if (p.visualState === 'success' || p.visited || p.hint) {
+                            borderColor = '#f59e0b'; glowColor = '#f59e0b'; // Found/Hint -> Amber
+                        } else {
+                            // Hidden -> Cyan
+                            borderColor = '#22d3ee'; glowColor = '#22d3ee';
+                        }
+                    } else if (p.type === 'trap') {
+                        borderColor = '#22d3ee'; glowColor = '#22d3ee';
+                    }
+
+                    // Draw Base
+                    // Feature: Render End Game Walls (Tall Safe Platforms) as Solid
+                    if (p.type === 'safe' && p.h > 100) {
+                        ctx.fillStyle = '#0f0c29'; // Solid Dark
+                        ctx.fillRect(p.x, p.y, p.w, p.h);
+                        // Solid Border
+                        ctx.strokeStyle = '#a855f7'; // Purple Edge
+                        ctx.lineWidth = 3;
+                        ctx.strokeRect(p.x, p.y, p.w, p.h);
+                    } else {
+                        // Regular Floating Platforms (Glassy)
+                        ctx.fillStyle = 'rgba(15, 23, 42, 0.8)';
+                        ctx.fillRect(p.x, p.y, p.w, p.h);
+
+                        // Top Highlight (Neon Bar)
+                        ctx.shadowBlur = 10; ctx.shadowColor = glowColor;
+                        ctx.fillStyle = borderColor;
+                        ctx.fillRect(p.x, p.y, p.w, 4); // Top 4px glow
+                        ctx.shadowBlur = 0;
+
+                        // Border Stroke
+                        ctx.strokeStyle = borderColor; ctx.lineWidth = 2;
+                        ctx.strokeRect(p.x, p.y, p.w, p.h);
+
+                        // Grid Texture overlay
+                        ctx.fillStyle = 'rgba(255,255,255,0.05)';
+                        for (let i = 0; i < p.w; i += 20) ctx.fillRect(p.x + i, p.y, 1, p.h);
+                    }
+
+                    // Extra Glow for Hint (First 2 terms)
+                    if (p.type === 'target' && p.visualState !== 'success' && p.hint) {
+                        const time = Date.now();
+                        const pulse = (Math.sin(time * 0.008) + 1) * 0.5;
+                        ctx.shadowBlur = 20 + pulse * 20;
+                        ctx.shadowColor = '#f59e0b';
+                        ctx.strokeRect(p.x - 2, p.y - 2, p.w + 4, p.h + 4);
+                        ctx.shadowBlur = 0;
+                    }
+
+                    if (p.decoration) {
+                        drawDecoration(p.decoration, p.x + p.w / 2 - 15, p.y, p.seed || 0.5);
+                    }
+                }
+                else if (p.type === 'ritual_base') {
+                    // Solid Opaque Structure (No Transparency)
+                    ctx.fillStyle = '#0f0c29'; // Solid Dark Deep Blue
+                    ctx.fillRect(p.x, p.y, p.w, p.h);
+
+                    // Solid Border
+                    ctx.strokeStyle = '#a855f7'; // Purple Edge
+                    ctx.lineWidth = 3;
+                    ctx.strokeRect(p.x, p.y, p.w, p.h);
+
+                    // Minimal internal detail
+                    ctx.fillStyle = '#a855f7';
+                    ctx.fillRect(p.x + 10, p.y + 10, p.w - 20, 2);
+                }
+                else if (p.type === 'temp_stair' || p.type === 'magic_stair') {
+                    // Feedback #5: Unified Style (Pale Blue, White Border)
+                    ctx.fillStyle = 'rgba(34, 211, 238, 0.4)'; // Transparent cyan
+                    ctx.shadowBlur = 10; ctx.shadowColor = '#22d3ee';
+                }
+                else if (p.type === 'dive_target') ctx.fillStyle = p.visualState === 'success' ? '#22c55e' : '#eab308';
+
+                else if (p.type === 'trap' && p.broken) {
+                    ctx.fillStyle = '#7f1d1d';
+                    ctx.strokeStyle = '#ef4444';
+                    ctx.lineWidth = 2;
+                    ctx.fillRect(p.x, p.y, p.w, p.h);
+                    ctx.strokeRect(p.x, p.y, p.w, p.h);
+                    // Glitchy X
+                    ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.x + p.w, p.y + p.h);
+                    ctx.moveTo(p.x + p.w, p.y); ctx.lineTo(p.x, p.y + p.h);
+                    ctx.stroke();
+                }
+
+                // Enhanced Glow for Hints (First 2 terms)
+                if (p.type === 'target' && p.visualState !== 'success' && p.hint) {
+                    const time = Date.now();
+                    const pulse = (Math.sin(time * 0.005) + 1) * 0.5; // 0 to 1
+                    ctx.shadowBlur = 15 + pulse * 15; // Pulsating glow
+                    ctx.shadowColor = '#22d3ee';
+                }
+
+                // Draw Altar Platform
+                else if (p.type === 'altar_platform') {
+                    if (p.destroyed) {
+                        // DEBRIS DRAWING
+                        ctx.fillStyle = '#475569'; // Rubble Grey
+                        ctx.strokeStyle = '#1e293b';
+                        ctx.lineWidth = 2;
+
+                        ctx.beginPath();
+                        ctx.moveTo(p.x, height * 0.7);
+                        ctx.lineTo(p.x + 20, height * 0.7 - 5);
+                        ctx.lineTo(p.x + 40, height * 0.7);
+                        ctx.lineTo(p.x + 80, height * 0.7 - 8);
+                        ctx.lineTo(p.x + 120, height * 0.7);
+                        ctx.fill();
+
+                        const shards = [
+                            { x: p.x + 10, y: height * 0.7 - 10, w: 20, h: 10, r: 0.2 },
+                            { x: p.x + 50, y: height * 0.7 - 5, w: 15, h: 8, r: -0.1 },
+                            { x: p.x + 90, y: height * 0.7 - 12, w: 25, h: 12, r: 0.3 },
+                            { x: p.x + 130, y: height * 0.7 - 8, w: 10, h: 10, r: -0.2 }
+                        ];
+
+                        for (let s of shards) {
+                            ctx.save();
+                            ctx.translate(s.x, s.y);
+                            ctx.rotate(s.r);
+                            ctx.fillStyle = '#64748b';
+                            ctx.fillRect(-s.w / 2, -s.h / 2, s.w, s.h);
+                            ctx.strokeRect(-s.w / 2, -s.h / 2, s.w, s.h);
+                            ctx.restore();
+                        }
+
+                    } else {
+                        // Draw Altar (Normal)
+                        const grad = ctx.createLinearGradient(p.x, p.y, p.x, p.y + p.h);
+                        grad.addColorStop(0, '#7f1d1d');
+                        grad.addColorStop(1, '#000000');
+
+                        ctx.shadowBlur = 40; ctx.shadowColor = 'rgba(124, 58, 237, 0.9)';
+                        ctx.fillStyle = grad; ctx.fillRect(p.x, p.y, p.w, p.h);
+
+                        if (p.hits === 1) {
+                            ctx.strokeStyle = '#000'; ctx.lineWidth = 3;
+                            ctx.beginPath();
+                            ctx.moveTo(p.x + 30, p.y); ctx.lineTo(p.x + 50, p.y + 40); ctx.lineTo(p.x + 70, p.y + 20);
+                            ctx.stroke();
+                        }
+
+                        ctx.fillStyle = '#e2e8f0';
+                        ctx.beginPath(); ctx.arc(p.x + 10, p.y, 15, 0, Math.PI * 2); ctx.fill();
+                        ctx.fillStyle = '#000'; ctx.beginPath(); ctx.arc(p.x + 5, p.y, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(p.x + 15, p.y, 4, 0, Math.PI * 2); ctx.fill();
+
+                        ctx.fillStyle = '#e2e8f0';
+                        ctx.beginPath(); ctx.arc(p.x + p.w - 10, p.y, 15, 0, Math.PI * 2); ctx.fill();
+                        ctx.fillStyle = '#000'; ctx.beginPath(); ctx.arc(p.x + p.w - 15, p.y, 4, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(p.x + p.w - 5, p.y, 4, 0, Math.PI * 2); ctx.fill();
+
+                        const time = Date.now();
+                        const flicker = Math.sin(time * 0.05) * 5;
+                        ctx.fillStyle = '#fde68a'; ctx.fillRect(p.x + 25, p.y - 15, 10, 15);
+                        ctx.fillStyle = '#fbbf24'; ctx.beginPath(); ctx.arc(p.x + 30, p.y - 20, 5 + Math.random() * 3, 0, Math.PI * 2); ctx.fill();
+                        ctx.fillStyle = '#fde68a'; ctx.fillRect(p.x + p.w - 35, p.y - 15, 10, 15);
+                        ctx.fillStyle = '#fbbf24'; ctx.beginPath(); ctx.arc(p.x + p.w - 30, p.y - 20, 5 + Math.random() * 3, 0, Math.PI * 2); ctx.fill();
+
+                        ctx.shadowBlur = 30; ctx.shadowColor = '#d8b4fe';
+                        ctx.fillStyle = '#a855f7'; ctx.beginPath(); ctx.arc(p.x + p.w / 2, p.y - 30, 18, 0, Math.PI * 2); ctx.fill();
+                        ctx.shadowBlur = 0;
+                    }
+                }
+
+                if (p.type === 'ritual_base' || p.type === 'dive_target') ctx.fillRect(p.x, p.y, p.w, p.h);
+
+                if (p.type === 'temp_stair' || p.type === 'magic_stair') {
+                    // FIX: Actually DRAW the fill (fillRect)
+                    ctx.fillRect(p.x, p.y, p.w, p.h);
+
+                    // Feedback #5: Unified Style (White Border)
+                    ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+                    ctx.strokeRect(p.x, p.y, p.w, p.h);
+                    if (p.val && p.blockSize) {
+                        ctx.beginPath();
+                        ctx.strokeStyle = 'rgba(255,255,255,0.5)';
+                        for (let i = 1; i < p.val; i++) {
+                            const lx = p.x + i * (p.w / p.val);
+                            ctx.moveTo(lx, p.y); ctx.lineTo(lx, p.y + p.h);
+                        }
+                        ctx.stroke();
+                    }
+                }
+                ctx.shadowBlur = 0;
+
+                ctx.fillStyle = '#fff'; ctx.font = 'bold 20px "Noto Sans TC"'; ctx.textAlign = 'center';
+                if (p.text) {
+                    ctx.fillText(p.text, p.x + p.w / 2, p.y + 25);
+                    if (p.visualState === 'success') ctx.fillText("✅", p.x + p.w / 2 + 60, p.y + 25);
+                } else if (p.val && p.type !== 'magic_stair' && p.type !== 'temp_stair') ctx.fillText(p.val, p.x + p.w / 2, p.y + 25);
+                ctx.globalAlpha = 1;
+            }
+
+            for (let obj of tutorialObjects) {
+                if (obj.hit) continue;
+                ctx.fillStyle = obj.color; ctx.shadowBlur = 15; ctx.shadowColor = obj.color;
+                ctx.fillRect(obj.x, obj.y, obj.w, obj.h); ctx.shadowBlur = 0;
+                ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.font = 'bold 16px Arial'; ctx.textAlign = 'center';
+                ctx.fillText(obj.label, obj.x + obj.w / 2, obj.y + 30);
+            }
+
+            // Player
+            if (player.visible !== false) {
+                ctx.shadowBlur = 20; ctx.shadowColor = player.isDiving ? '#a855f7' : '#6366f1';
+                ctx.fillStyle = player.isDiving ? '#d8b4fe' : '#818cf8';
+
+                // --- SQUASH AND STRETCH DRAWING ---
+                let drawW = player.w * player.scaleX;
+                let drawH = player.h * player.scaleY;
+
+                // Adjust position so scaling happens from bottom center
+                let drawX = player.x + (player.w - drawW) / 2;
+                let drawY = player.y + (player.h - drawH);
+
+                // Body
+                ctx.fillRect(drawX, drawY, drawW, drawH);
+
+                // --- CYBER VISOR ---
+                ctx.fillStyle = '#fff'; ctx.shadowBlur = 15; ctx.shadowColor = '#60a5fa';
+                let lookDir = player.facingRight ? 1 : -1;
+
+                // Start X of Visor
+                let visorX = drawX + (player.facingRight ? drawW * 0.4 : 0);
+                let visorY = drawY + 12 * player.scaleY;
+                let visorW = drawW * 0.6;
+                let visorH = 8 * player.scaleY;
+
+                ctx.fillRect(visorX, visorY, visorW, visorH);
+                ctx.shadowBlur = 0;
+
+
+                // Gravity Zone Visual (On Player) (Feedback #3: Timer Based)
+                if (player.gravityHintTimer > 20) { // Show if time > 20 (approx 0.3s remaining), keeps it flickering out nicely
+                    ctx.save();
+                    ctx.translate(player.x + player.w / 2, player.y - 25);
+                    const opacity = Math.min(1, player.gravityHintTimer / 60); // Fade out
+                    ctx.globalAlpha = opacity;
+
+                    // Bubble
+                    ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
+                    ctx.strokeStyle = '#a855f7'; ctx.lineWidth = 2;
+                    ctx.beginPath(); ctx.roundRect(-140, -55, 280, 45, 15); ctx.stroke(); ctx.fill();
+                    // Pointer
+                    ctx.beginPath(); ctx.moveTo(-5, -10); ctx.lineTo(5, -10); ctx.lineTo(0, 0); ctx.fill();
+                    // Text
+                    ctx.fillStyle = '#6b21a8'; ctx.font = 'bold 16px "Noto Sans TC"'; ctx.textAlign = 'center';
+                    ctx.fillText("🔮 好像有什麼神祕的力量在壓著我...", 0, -25);
+                    ctx.restore();
+                }
+            }
+
+            // Draw particles (Only Draw Here)
+            for (let p of particles) {
+                if (p.type === 'text') {
+                    ctx.font = 'bold 40px Arial';
+                    ctx.fillStyle = `rgba(255, 215, 0, ${p.life})`;
+                    ctx.fillText(p.text, p.x, p.y);
+                } else if (p.type === 'error_text') {
+                    // New Error Feedback Particle
+                    ctx.font = 'bold 24px "Noto Sans TC", Arial';
+                    ctx.textAlign = 'center';
+                    ctx.fillStyle = `rgba(239, 68, 68, ${p.life})`; // Red
+                    ctx.strokeStyle = `rgba(0, 0, 0, ${p.life})`;
+                    ctx.lineWidth = 3;
+                    ctx.strokeText(p.text, p.x, p.y);
+                    ctx.fillText(p.text, p.x, p.y);
+                } else if (p.type === 'smoke') {
+                    ctx.globalAlpha = p.life * 0.5;
+                    ctx.fillStyle = p.color;
+                    ctx.beginPath(); ctx.arc(p.x, p.y, 15 + (3 - p.life) * 10, 0, Math.PI * 2); ctx.fill();
+                } else if (p.type === 'arrow') {
+                    ctx.fillStyle = p.color;
+                    ctx.font = '20px Arial';
+                    ctx.fillText('↓', p.x, p.y);
+                } else if (p.type === 'firework') {
+                    ctx.save();
+                    ctx.globalCompositeOperation = 'lighter'; // Additive blending for glow
+                    const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, 8);
+                    gradient.addColorStop(0, p.color);
+                    gradient.addColorStop(1, 'rgba(0,0,0,0)');
+
+                    ctx.fillStyle = gradient;
+                    ctx.globalAlpha = p.life < 1 ? p.life : 1;
+                    ctx.beginPath(); ctx.arc(p.x, p.y, 8, 0, Math.PI * 2); ctx.fill();
+                    ctx.restore();
+                } else {
+                    ctx.globalAlpha = p.life < 1 ? p.life : 1;
+                    ctx.fillStyle = p.color;
+                    ctx.fillRect(p.x, p.y, 4, 4);
+                }
+            }
+            ctx.globalAlpha = 1;
+
+            // RITUAL PHASE DRAWING
+            if (gameState === STATE.RITUAL && ritualPhase > 0) {
+                ctx.restore();
+                ctx.fillStyle = 'rgba(0,0,0,0.85)';
+                ctx.fillRect(0, 0, width, height);
+
+                const terms = sequence.collected;
+                const n = terms.length;
+                const maxVal = terms[n - 1] + terms[0];
+
+                const areaW = width * 0.8;
+                const areaH = height * 0.4;
+                const sizeW = areaW / maxVal;
+                const sizeH = areaH / n;
+                const blockSize = Math.min(sizeW, sizeH, 40);
+
+                const totalDrawW = maxVal * blockSize;
+                const totalDrawH = n * blockSize;
+
+                const startX = (width - totalDrawW) / 2;
+                const startY = (height * 0.15);
+
+                // Shake transform inside ritual save block
+                ctx.save(); // New save for shake
+                if (screenShake > 0) {
+                    ctx.translate((Math.random() - 0.5) * screenShake, (Math.random() - 0.5) * screenShake);
+                }
+
+                ctx.shadowBlur = 0;
+
+                function drawFloatingLabel(text, x, y, alpha, fontSize = "24px") {
+                    ctx.save();
+                    ctx.globalAlpha = alpha;
+                    ctx.fillStyle = '#fff';
+                    ctx.font = `bold ${fontSize} "Noto Sans TC"`;
+                    ctx.textAlign = 'center';
+                    ctx.shadowColor = '#000';
+                    ctx.shadowBlur = 4;
+                    ctx.fillText(text, x, y);
+                    ctx.restore();
+                }
+
+                // Animation Phase logic for ghost
+                let currentGhostRot = 0;
+                let ghostOffsetX = 0;
+                let labelAlpha = 0;
+
+                if (ritualPhase === 1.5) {
+                    const sepDist = 3 * blockSize;
+
+                    if (ritualAnimProgress < 0.35) {
+                        // Phase 1: Move Left (0.0 to 0.35)
+                        const t = ritualAnimProgress / 0.35;
+                        const ease = 1 - Math.pow(1 - t, 3);
+                        ghostOffsetX = -sepDist * ease;
+                    } else if (ritualAnimProgress < 0.65) {
+                        // Phase 2: Rotate (0.35 to 0.65)
+                        ghostOffsetX = -sepDist;
+                        const t = (ritualAnimProgress - 0.35) / 0.3;
+                        const ease = t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+                        currentGhostRot = Math.PI * ease;
+                    } else {
+                        // Phase 3: Move Right to Snap (0.65 to 1.0)
+                        currentGhostRot = Math.PI;
+                        const t = (ritualAnimProgress - 0.65) / 0.35;
+                        const ease = 1 - Math.pow(1 - t, 3);
+                        ghostOffsetX = -sepDist * (1 - ease);
+
+                        // Labels Fade In during Phase 3
+                        labelAlpha = t;
+                    }
+                } else if (ritualPhase >= 2) {
+                    currentGhostRot = Math.PI;
+                    ghostOffsetX = 0;
+                    labelAlpha = 0; // Handled by static bracket in Phase 2
+                }
+
+                // Draw Original
+                if (ritualPhase >= 2 && ritualGlow > 0) {
+                    ctx.shadowBlur = ritualGlow; ctx.shadowColor = "#fff";
+                }
+
+                for (let i = 0; i < n; i++) {
+                    const val = terms[i];
+                    const rowY = startY + i * blockSize;
+                    const rowX = startX + (maxVal - val) * blockSize;
+
+                    ctx.fillStyle = '#22d3ee'; ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+                    for (let b = 0; b < val; b++) {
+                        ctx.fillRect(rowX + b * blockSize, rowY, blockSize, blockSize);
+                        ctx.strokeRect(rowX + b * blockSize, rowY, blockSize, blockSize);
+                    }
+
+                    ctx.shadowBlur = 0;
+                    ctx.fillStyle = '#fff';
+                    ctx.font = 'bold 18px Arial';
+                    ctx.textAlign = 'left';
+                    ctx.fillText(val, rowX + val * blockSize + 10, rowY + blockSize / 2 + 6);
+                    if (ritualPhase >= 2 && ritualGlow > 0) { ctx.shadowBlur = ritualGlow; ctx.shadowColor = "#fff"; }
+                }
+
+                if (ritualPhase >= 1.5) {
+                    const centerX = startX + totalDrawW / 2;
+                    const centerY = startY + totalDrawH / 2;
+
+                    ctx.save();
+
+                    ctx.translate(centerX + ghostOffsetX, centerY);
+                    ctx.rotate(currentGhostRot);
+                    ctx.translate(-centerX, -centerY);
+
+                    // Draw Ghost (Feedback #5: Purple color #a855f7)
+                    for (let i = 0; i < n; i++) {
+                        const val = terms[i];
+                        const rowY = startY + i * blockSize;
+                        const rowX = startX + (maxVal - val) * blockSize;
+
+                        // Use Purple + white border for ghost
+                        ctx.fillStyle = '#a855f7'; ctx.strokeStyle = '#fff'; ctx.lineWidth = 2;
+
+                        for (let b = 0; b < val; b++) {
+                            ctx.fillRect(rowX + b * blockSize, rowY, blockSize, blockSize);
+                            ctx.strokeRect(rowX + b * blockSize, rowY, blockSize, blockSize);
+                        }
+                    }
+                    ctx.restore();
+
+                    // Draw Dynamic Labels (Phase 3)
+                    if (labelAlpha > 0) {
+                        // Position text relative to the combined shape
+                        // Top label (Width)
+                        drawFloatingLabel("(首項 + 末項)", startX + totalDrawW / 2, startY - 40, labelAlpha);
+                        // Left label (Height) with subtext
+                        drawFloatingLabel("項數 n", startX - 70, startY + totalDrawH / 2 - 12, labelAlpha);
+                        drawFloatingLabel("(有幾層階梯)", startX - 70, startY + totalDrawH / 2 + 18, labelAlpha, "16px");
+                    }
+                }
+
+                ctx.restore(); // Restore shake save
+
+                if (ritualPhase >= 2) {
+                    // drawBracket calls removed as requested to use persistent floating labels instead
+                    drawFloatingLabel("(首項 + 末項)", startX + totalDrawW / 2, startY - 40, 1);
+                    // Updated labels with subtext
+                    drawFloatingLabel("項數 n", startX - 70, startY + totalDrawH / 2 - 12, 1);
+                    drawFloatingLabel("(有幾層階梯)", startX - 70, startY + totalDrawH / 2 + 18, 1, "16px");
+                }
+
+                return;
+            }
+
+            ctx.restore();
+        }
+
+        function loop(timestamp) {
+            if (!lastTime) lastTime = timestamp;
+            const deltaTime = timestamp - lastTime;
+            lastTime = timestamp;
+
+            const dt = Math.min(deltaTime / 16.67, 3);
+
+            isLooping = true;
+
+            if (screenShake > 0) {
+                screenShake *= 0.6;
+                if (screenShake < 0.5) screenShake = 0;
+            }
+            if (ritualGlow > 0) {
+                ritualGlow -= 2 * dt;
+                if (ritualGlow < 0) ritualGlow = 0;
+            }
+
+            if (gameState === STATE.TUTORIAL || gameState === STATE.PLAYING || gameState === STATE.CLIMBING || gameState === STATE.FIREWORKS) updatePhysics(dt);
+
+            if (gameState === STATE.RITUAL && ritualPhase === 1.5) {
+                ritualAnimProgress += 0.004 * dt;
+                if (ritualAnimProgress >= 1) {
+                    ritualPhase = 2;
+                    screenShake = 15;
+                    ritualGlow = 60;
+                    playSound('ritual');
+                    document.getElementById('ritual-step-2').classList.remove('hidden');
+                    document.getElementById('rit-start').focus();
+                }
+            }
+
+            draw();
+            if (gameState !== STATE.GAMEOVER) {
+                requestAnimationFrame(loop);
+            } else {
+                isLooping = false;
+            }
+        }
+
+        function resetWorld() {
+            platforms = []; particles = []; tutorialObjects = []; checkpoints = []; levelObjects = [];
+            player.vx = 0; player.vy = 0; input.axisX = 0; player.autoWalk = false; player.visible = true;
+            cameraX = 0; cameraY = 0; isStairsVanished = false; isMagicStairsBuilt = false; score = 0;
+            player.gravityHintTimer = 0; screenShake = 0; ritualGlow = 0;
+            player.coyoteTimer = 0; player.scaleX = 1; player.scaleY = 1;
+            hasShownGravityDialog = false;
+            minPlayerX = -Infinity; // Reset Barrier
+            document.getElementById('mock-msg').classList.add('hidden');
+            document.getElementById('guide-arrow').classList.add('hidden');
+            if (levelCompleteTimer) clearTimeout(levelCompleteTimer);
+        }
+
+        function resetGame() {
+            document.getElementById('screen-gameover').classList.add('hidden');
+            document.getElementById('screen-ritual').classList.add('hidden');
+            document.getElementById('screen-review').classList.add('hidden');
+
+            if (hasPassedTutorial) {
+                if (controlType === 'mobile') document.getElementById('mobile-controls').classList.remove('hidden');
+
+                resetWorld();
+                const startY = height * 0.7;
+
+                // Split initial ground into chunks for details (decorations)
+                for (let i = 0; i < 10; i++) {
+                    let deco = null;
+                    if (Math.random() < 0.4) {
+                        deco = ['cactus', 'barrel', 'skull', 'rock_pile'][Math.floor(Math.random() * 4)];
+                    }
+                    platforms.push({ x: i * 100, y: startY, w: 100, h: 40, type: 'safe', visited: true, decoration: deco, seed: Math.random() });
+                }
+
+                player.x = 200; player.y = startY - 54; player.isGrounded = true; player.prevY = player.y;
+                worldRightEdge = 1000; nextStoneNum = 1;
+                generatedTargetCount = 0;
+
+                draw();
+
+                startQuizPhase();
+            } else {
+                document.getElementById('ui-hud').classList.add('hidden');
+                document.getElementById('screen-start').classList.remove('hidden');
+                document.getElementById('mobile-controls').classList.add('hidden');
+                gameState = STATE.START;
+            }
+
+            if (!isLooping) { lastTime = performance.now(); loop(lastTime); }
+        }
+
+        function triggerGameOver() {
+            gameState = STATE.GAMEOVER;
+            document.getElementById('screen-gameover').classList.remove('hidden');
+            document.getElementById('mobile-controls').classList.add('hidden');
+        }
+
+        function startRitual() {
+            document.getElementById('guide-arrow').classList.add('hidden');
+            document.getElementById('altar-hint').classList.add('hidden');
+            gameState = STATE.RITUAL;
+            ritualPhase = 1;
+            document.getElementById('ui-hud').classList.add('hidden');
+            document.getElementById('mobile-controls').classList.add('hidden');
+            document.getElementById('screen-ritual').classList.remove('hidden');
+
+            const inputs = document.querySelectorAll('#screen-ritual input');
+            inputs.forEach(i => { i.value = ''; i.disabled = false; });
+            document.querySelectorAll('.step-completed').forEach(el => el.classList.remove('step-completed'));
+            document.querySelectorAll('.summary-content').forEach(el => el.classList.add('hidden'));
+            document.querySelectorAll('.original-content').forEach(el => el.style.display = 'block');
+            document.querySelectorAll('[id^=ritual-msg]').forEach(p => p.innerText = '');
+
+            document.getElementById('ritual-step-1').classList.remove('hidden');
+            document.getElementById('ritual-step-2').classList.add('hidden');
+            document.getElementById('ritual-step-3').classList.add('hidden');
+            document.getElementById('ritual-step-4').classList.add('hidden');
+            document.getElementById('ritual-step-5').classList.add('hidden');
+        }
+
+        function triggerRitualAnimation() {
+            document.getElementById('ritual-step-1').classList.add('hidden');
+            setTimeout(() => {
+                ritualPhase = 2; // Will be set to 1.5 in next loop logic actually, wait.
+                // Correction: Set to 1.5 to start animation loop
+                ritualPhase = 1.5;
+                ritualAnimProgress = 0;
+            }, 500);
+        }
+
+        function checkRitualDim() {
+            const s = parseInt(document.getElementById('rit-start').value);
+            const e = parseInt(document.getElementById('rit-end').value);
+            const nInput = parseInt(document.getElementById('rit-n').value);
+
+            const terms = sequence.collected;
+            const realStart = terms[0];
+            const realEnd = terms[terms.length - 1];
+            const realN = terms.length;
+
+            if (s === realStart && e === realEnd && nInput === realN) {
+                playSound('collect');
+                const step2 = document.getElementById('ritual-step-2');
+                step2.querySelector('.original-content').style.display = 'none';
+                step2.querySelector('.summary-content').classList.remove('hidden');
+                step2.classList.add('step-compact');
+                document.getElementById('summary-dim').innerText = `寬度: ${s + e}, 項數: ${nInput}`;
+
+                document.getElementById('ritual-step-3').classList.remove('hidden');
+                document.getElementById('ritual-step-3').scrollIntoView({ behavior: 'smooth' });
+            } else {
+                playSound('break');
+                document.getElementById('ritual-msg-1').innerText = "數字不對喔，請對照上方圖形再試試看！";
+            }
+        }
+
+        function checkRitualTotal() {
+            const t = parseInt(document.getElementById('rit-total').value);
+            const terms = sequence.collected;
+            const n = terms.length;
+            const sum = (terms[0] + terms[n - 1]) * n;
+
+            if (t === sum) {
+                playSound('collect');
+                const step3 = document.getElementById('ritual-step-3');
+                step3.querySelector('.original-content').style.display = 'none';
+                step3.querySelector('.summary-content').classList.remove('hidden');
+                step3.classList.add('step-compact');
+                document.getElementById('summary-total').innerText = `總數: ${t}`;
+
+                document.getElementById('ritual-step-4').classList.remove('hidden');
+                document.getElementById('ritual-step-4').scrollIntoView({ behavior: 'smooth' });
+            } else {
+                playSound('break');
+                document.getElementById('ritual-msg-2').innerText = "計算錯誤，寬度 × 高度 是多少呢？";
+            }
+        }
+
+        function checkRitualFinal() {
+            const f = parseInt(document.getElementById('rit-final').value);
+            const terms = sequence.collected;
+            const n = terms.length;
+            const sum = (terms[0] + terms[n - 1]) * n;
+
+            if (f === sum / 2) {
+                playSound('collect');
+                document.getElementById('ritual-step-4').classList.add('hidden');
+                document.getElementById('ritual-step-5').classList.remove('hidden');
+            } else {
+                playSound('break');
+                document.getElementById('ritual-msg-3').innerText = "記得長方形包含兩份階梯，所以要除以 2 喔！";
+            }
+        }
+
+        function finishRitualAndBuild() {
+            gameState = STATE.CLIMBING;
+            isMagicStairsBuilt = true; // IMPORTANT: Disable gravity zone
+            document.getElementById('screen-ritual').classList.add('hidden');
+            if (controlType === 'mobile') document.getElementById('mobile-controls').classList.remove('hidden');
+
+            // Remove dialog
+            document.getElementById('story-hint').classList.add('hidden');
+            hasShownGravityDialog = true; // Prevent it from triggering again just in case
+
+            // Note: Altar is now destroyed, so we don't need to do anything to it here
+
+            const base = platforms.find(p => p.type === 'ritual_base');
+            // We use ritualX in spawnEndGameStructure, but we don't have a direct reference here unless we search
+            // The magic stairs are relative to the wall position which is calculated based on terms
+
+            const terms = sequence.collected;
+            const blockSize = 40;
+            const n = TOTAL_COLLECT_GOAL;
+            const maxTerm = Math.max(...terms);
+
+            // Re-calculate positions (same logic as spawnEndGameStructure)
+            // We need to find the "pivotX"
+            // Find the wall
+            const wall = platforms.find(p => p.h > 100 && p.type === 'safe' && p.y < height * 0.7);
+
+            if (wall) {
+                // The wall X is the pivotX
+                const pivotX = wall.x;
+                const floorY = height * 0.7;
+
+                for (let i = 0; i < n; i++) {
+                    const val = terms[i];
+                    const rowW = val * blockSize;
+                    const rowH = blockSize;
+                    // Row 0 is top (smallest val)
+                    const rowY = floorY - (n - i) * rowH;
+                    const rowX = pivotX - rowW;
+
+                    platforms.push({
+                        x: rowX,
+                        y: rowY,
+                        w: rowW,
+                        h: rowH,
+                        type: 'magic_stair',
+                        val: val,
+                        blockSize: blockSize
+                    });
+                }
+            }
+        }
+
+        function showLevelComplete() {
+            gameState = STATE.LEVEL_COMPLETE;
+            // playSound('win'); // Moved to spawnFireworksForScore for immediate feedback
+            document.getElementById('mobile-controls').classList.add('hidden');
+            document.getElementById('ui-hud').classList.add('hidden');
+            const scoreEl = document.getElementById('final-score');
+            scoreEl.innerText = score;
+
+            // Save Score for Map
+            const currentBest = parseInt(localStorage.getItem('math_city_score_sequence') || '0');
+            if (score > currentBest) {
+                localStorage.setItem('math_city_score_sequence', score.toString());
+            }
+
+            document.getElementById('screen-review').classList.remove('hidden');
+        }
+
+
+        // Start Loop Immediately for Background
+        requestAnimationFrame(loop);
+    </script>
+</body>
+
+</html>
\ No newline at end of file