Upload 2 files

function.html

@@ -103,6 +103,69 @@
             -ms-overflow-style: none;
             scrollbar-width: none;
         }
+
+        /* Virtual Keypad */
+        #virtual-keypad {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%) translateY(120%);
+            z-index: 1000;
+            background: rgba(15, 23, 42, 0.95);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(34, 211, 238, 0.3);
+            border-radius: 20px;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        #virtual-keypad.active {
+            transform: translateX(-50%) translateY(0);
+        }
+
+        .keypad-btn {
+            width: 60px;
+            height: 60px;
+            border-radius: 12px;
+            background: rgba(30, 41, 59, 0.6);
+            border: 1px solid rgba(148, 163, 184, 0.2);
+            color: white;
+            font-size: 24px;
+            font-weight: bold;
+            font-family: 'Orbitron', sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.1s;
+            user-select: none;
+        }
+
+        .keypad-btn:active {
+            transform: scale(0.95);
+            background: rgba(34, 211, 238, 0.2);
+        }
+
+        .keypad-btn.action {
+            background: rgba(15, 23, 42, 0.8);
+            border-color: rgba(34, 211, 238, 0.4);
+            color: #22d3ee;
+        }
+
+        .keypad-btn.submit {
+            background: rgba(6, 182, 212, 0.8);
+            color: white;
+            grid-column: span 3;
+            width: 100%;
+            height: 50px;
+            font-size: 18px;
+            margin-top: 4px;
+        }
     </style>
 </head>
 
@@ -176,12 +239,78 @@
         <div>Designed by L.Star</div>
     </div>
 
+    <!-- Virtual Keypad HTML -->
+    <div id="virtual-keypad">
+        <div class="keypad-btn" onclick="keypad.input(1)">1</div>
+        <div class="keypad-btn" onclick="keypad.input(2)">2</div>
+        <div class="keypad-btn" onclick="keypad.input(3)">3</div>
+        <div class="keypad-btn" onclick="keypad.input(4)">4</div>
+        <div class="keypad-btn" onclick="keypad.input(5)">5</div>
+        <div class="keypad-btn" onclick="keypad.input(6)">6</div>
+        <div class="keypad-btn" onclick="keypad.input(7)">7</div>
+        <div class="keypad-btn" onclick="keypad.input(8)">8</div>
+        <div class="keypad-btn" onclick="keypad.input(9)">9</div>
+        <div class="keypad-btn action" onclick="keypad.input('-')">-</div>
+        <div class="keypad-btn" onclick="keypad.input(0)">0</div>
+        <div class="keypad-btn action" onclick="keypad.backspace()">⌫</div>
+        <div class="keypad-btn submit" onclick="keypad.close()">完成 (ENTER)</div>
+    </div>
+
     <script>
-        // --- Game Constants & State ---
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
         let width, height;
 
+        // --- Virtual Keypad System ---
+        const keypad = {
+            element: null,
+            targetInput: null,
+            init: function () {
+                this.element = document.getElementById('virtual-keypad');
+                // Auto-close when clicking outside
+                document.addEventListener('click', (e) => {
+                    if (this.element.classList.contains('active') &&
+                        !this.element.contains(e.target) &&
+                        e.target !== this.targetInput) {
+                        this.close();
+                    }
+                });
+            },
+            open: function (inputElement) {
+                this.targetInput = inputElement;
+                this.element.classList.add('active');
+
+                // Highlight input
+                document.querySelectorAll('.tech-input').forEach(el => el.classList.remove('border-amber-400', 'ring-2', 'ring-amber-400'));
+                inputElement.classList.add('border-amber-400', 'ring-2', 'ring-amber-400');
+            },
+            close: function () {
+                this.element.classList.remove('active');
+                if (this.targetInput) {
+                    this.targetInput.classList.remove('border-amber-400', 'ring-2', 'ring-amber-400');
+                    // Trigger change event if needed
+                    this.targetInput.dispatchEvent(new Event('change'));
+                    this.targetInput = null;
+                }
+            },
+            input: function (val) {
+                if (!this.targetInput) return;
+                let currentVal = this.targetInput.value;
+                if (val === '-') {
+                    if (currentVal.startsWith('-')) this.targetInput.value = currentVal.substring(1);
+                    else this.targetInput.value = '-' + currentVal;
+                } else {
+                    this.targetInput.value = currentVal + val;
+                }
+            },
+            backspace: function () {
+                if (!this.targetInput) return;
+                this.targetInput.value = this.targetInput.value.slice(0, -1);
+            }
+        };
+        // Initialize immediately
+        keypad.init();
+
         // Formula: y = ax + b
         let currentA = 2;
         let currentB = 3;
@@ -612,7 +741,7 @@
                                 <div class="flex items-center justify-center gap-2 flex-grow">
                                     <span class="font-tech text-3xl text-cyan-400">y = </span>
                                     <div class="relative w-32">
-                                        <input id="ans-input" type="number" class="tech-input w-full p-2 text-3xl rounded-lg" placeholder="?" autofocus>
+                                        <input id="ans-input" type="text" readonly onclick="keypad.open(this)" class="tech-input w-full p-2 text-3xl rounded-lg" placeholder="?" >
                                         <div class="absolute inset-0 border-2 border-slate-500/50 rounded-lg pointer-events-none"></div>
                                     </div>
                                 </div>
@@ -746,7 +875,9 @@
                             </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-4xl whitespace-nowrap">x = </span>
-                                <input id="ans-input" type="number" class="tech-input flex-1 min-w-[100px] p-2 rounded text-4xl text-amber-400" placeholder="?" autofocus>
+                                <span class="font-tech text-amber-400 text-4xl whitespace-nowrap">x = </span>
+                                <input id="ans-input" type="text" readonly onclick="keypad.open(this)" class="tech-input flex-1 min-w-[100px] p-2 rounded text-4xl text-amber-400" placeholder="?">
+                                <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 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>
@@ -844,7 +975,7 @@
                         </p>
                          <div class="flex items-center justify-center gap-2 text-3xl font-tech mb-6 bg-slate-800 p-4 rounded-lg">
                             <span>b = </span>
-                            <input id="ans-input" type="number" class="w-24 bg-slate-700 text-cyan-400 text-center rounded border border-slate-500 focus:border-cyan-400 outline-none p-1" placeholder="?" autofocus>
+                            <input id="ans-input" type="text" readonly onclick="keypad.open(this)" 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="?">
                         </div>
                         
                         ${errorMsg ? `<div class="text-red-400 text-center font-bold mb-4 border-2 border-red-400 border-dashed animate-pulse bg-slate-900/50 p-2 rounded">${errorMsg}</div>` : ''}
@@ -865,7 +996,7 @@
                          </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-3xl whitespace-nowrap">投入 x = </span>
-                            <input id="test-input-a" type="number" class="tech-input w-24 p-2 rounded text-3xl text-amber-400 text-center" placeholder="1" value="1">
+                            <input id="test-input-a" type="text" readonly onclick="keypad.open(this)" class="tech-input w-24 p-2 rounded text-3xl text-amber-400 text-center" placeholder="1" value="1">
                             <button onclick="runPhase4TestA()" class="px-6 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded font-bold shadow-lg whitespace-nowrap">
                                 啟動運作
                             </button>
@@ -888,7 +1019,7 @@
                         <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-3xl font-tech text-amber-400">
                              <span>a =</span>
-                             <input id="ans-input" type="number" class="tech-input w-24 p-2 rounded text-3xl text-center text-amber-400" placeholder="?" autofocus>
+                             <input id="ans-input" type="text" readonly onclick="keypad.open(this)" class="tech-input w-24 p-2 rounded text-3xl text-center text-amber-400" placeholder="?">
                              <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>
 
@@ -914,7 +1045,7 @@
                         </p>
                         <div class="flex flex-wrap gap-2 mt-6 items-center justify-center text-3xl font-tech text-white">
                              <span>y =</span>
-                             <input id="ans-input" type="number" class="tech-input w-24 p-2 rounded text-3xl text-center text-white" placeholder="?" autofocus>
+                             <input id="ans-input" type="text" readonly onclick="keypad.open(this)" class="tech-input w-24 p-2 rounded text-3xl text-center text-white" placeholder="?">
                              <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>
                         
@@ -930,10 +1061,10 @@
                             <div class="flex items-center justify-center gap-2 text-4xl md:text-4xl font-tech font-bold mb-8 bg-slate-900/80 p-6 rounded-3xl border-2 border-slate-700 w-full max-w-lg mx-auto">
                                 <span class="text-cyan-400">y</span>
                                 <span class="text-slate-500">=</span>
-                                <input id="final-a" type="number" class="w-20 bg-slate-800 text-amber-400 text-center rounded border border-slate-600 focus:border-amber-400 outline-none p-2" placeholder="?">
+                                <input id="final-a" type="text" readonly onclick="keypad.open(this)" 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="?">
+                                <input id="final-b" type="text" readonly onclick="keypad.open(this)" 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)
@@ -1052,7 +1183,7 @@
                         <div class="flex items-center gap-4 mb-2">
                             <span class="text-3xl font-tech text-amber-500">x =</span>
                             <div class="relative flex-1">
-                                <input type="number" id="test-input-verify" class="tech-input w-full p-4 rounded-xl text-3xl font-bold" placeholder="輸入 10" autofocus onkeydown="if(event.key==='Enter') runPhase4VerifyManual()">
+                                <input type="text" readonly onclick="keypad.open(this)" id="test-input-verify" class="tech-input w-full p-4 rounded-xl text-3xl font-bold" placeholder="輸入 10">
                                 <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm">晶石</div>
                             </div>
                         </div>

sequence.html

@@ -287,6 +287,69 @@
         #altar-hint {
             animation: pulse 1s infinite;
         }
+
+        /* Virtual Keypad */
+        #virtual-keypad {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%) translateY(120%);
+            z-index: 1000;
+            background: rgba(15, 23, 42, 0.95);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(245, 158, 11, 0.3);
+            border-radius: 20px;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        #virtual-keypad.active {
+            transform: translateX(-50%) translateY(0);
+        }
+
+        .keypad-btn {
+            width: 60px;
+            height: 60px;
+            border-radius: 12px;
+            background: rgba(30, 41, 59, 0.6);
+            border: 1px solid rgba(148, 163, 184, 0.2);
+            color: white;
+            font-size: 24px;
+            font-weight: bold;
+            font-family: 'Noto Sans TC', sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.1s;
+            user-select: none;
+        }
+
+        .keypad-btn:active {
+            transform: scale(0.95);
+            background: rgba(245, 158, 11, 0.2);
+        }
+
+        .keypad-btn.action {
+            background: rgba(15, 23, 42, 0.8);
+            border-color: rgba(245, 158, 11, 0.4);
+            color: #f59e0b;
+        }
+
+        .keypad-btn.submit {
+            background: rgba(234, 88, 12, 0.8);
+            color: white;
+            grid-column: span 3;
+            width: 100%;
+            height: 50px;
+            font-size: 18px;
+            margin-top: 4px;
+        }
     </style>
 </head>
 
@@ -321,294 +384,303 @@
         </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>
+        <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>
+    <!-- Virtual Keypad HTML -->
+    <div id="virtual-keypad">
+        <div class="keypad-btn" onclick="keypad.input(1)">1</div>
+        <div class="keypad-btn" onclick="keypad.input(2)">2</div>
+        <div class="keypad-btn" onclick="keypad.input(3)">3</div>
+        <div class="keypad-btn" onclick="keypad.input(4)">4</div>
+        <div class="keypad-btn" onclick="keypad.input(5)">5</div>
+        <div class="keypad-btn" onclick="keypad.input(6)">6</div>
+        <div class="keypad-btn" onclick="keypad.input(7)">7</div>
+        <div class="keypad-btn" onclick="keypad.input(8)">8</div>
+        <div class="keypad-btn" onclick="keypad.input(9)">9</div>
+        <div class="keypad-btn action" onclick="keypad.input('-')">-</div>
+        <div class="keypad-btn" onclick="keypad.input(0)">0</div>
+        <div class="keypad-btn action" onclick="keypad.backspace()">⌫</div>
+        <div class="keypad-btn submit" onclick="keypad.close()">完成 (ENTER)</div>
+    </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>
+    <!-- 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>
 
-        <!-- 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>
+    <!-- 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>
 
-        <!-- 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>
+    <!-- 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>
 
-        <!-- 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>
+    <!-- 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>
+    <!-- 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 overflow-y-auto py-8">
-            <div class="glass-panel p-6 md:p-8 rounded-2xl w-[95%] max-w-2xl border-t-4 border-amber-500 my-auto">
-                <h2 class="text-2xl md:text-3xl font-bold text-amber-400 mb-4">✨ 數列觀念檢測</h2>
-                <div class="bg-slate-800/50 p-4 md:p-6 rounded-lg mb-6 text-left space-y-4 border border-slate-700">
-                    <p class="text-lg md:text-xl text-slate-200"><strong
-                            class="text-amber-400 text-xl md: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-base md:text-lg text-slate-300 font-bold mb-2">範例：首項 2，公差 3</p>
-                        <p class="text-lg md:text-xl font-mono text-cyan-300 leading-relaxed">➜ 2, 5, 8, 11...</p>
-                        <p class="text-base md:text-lg font-mono text-slate-400 leading-relaxed">(2, 2+3, 2+3+3,
-                            2+3+3+3...)</p>
-                    </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 overflow-y-auto py-8">
+        <div class="glass-panel p-6 md:p-8 rounded-2xl w-[95%] max-w-2xl border-t-4 border-amber-500 my-auto">
+            <h2 class="text-2xl md:text-3xl font-bold text-amber-400 mb-4">✨ 數列觀念檢測</h2>
+            <div class="bg-slate-800/50 p-4 md:p-6 rounded-lg mb-6 text-left space-y-4 border border-slate-700">
+                <p class="text-lg md:text-xl text-slate-200"><strong
+                        class="text-amber-400 text-xl md: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-base md:text-lg text-slate-300 font-bold mb-2">範例：首項 2，公差 3</p>
+                    <p class="text-lg md:text-xl font-mono text-cyan-300 leading-relaxed">➜ 2, 5, 8, 11...</p>
+                    <p class="text-base md:text-lg font-mono text-slate-400 leading-relaxed">(2, 2+3, 2+3+3,
+                        2+3+3+3...)</p>
                 </div>
-                <div class="mb-6">
-                    <p class="text-lg md:text-xl mb-4 font-bold">請問：若首項是 <span id="quiz-start-val"
-                            class="text-amber-400 text-2xl md:text-3xl mx-1">?</span>，公差是 <span id="quiz-diff-val"
-                            class="text-amber-400 text-2xl md: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-16 h-12 md:w-24 md:h-16 text-xl md:text-2xl" placeholder="?">
-                        <span class="text-slate-500 font-bold text-xl">,</span>
-                        <input type="number" id="quiz-2"
-                            class="math-input w-16 h-12 md:w-24 md:h-16 text-xl md:text-2xl" placeholder="?">
-                        <span class="text-slate-500 font-bold text-xl">,</span>
-                        <input type="number" id="quiz-3"
-                            class="math-input w-16 h-12 md:w-24 md:h-16 text-xl md:text-2xl" placeholder="?">
-                        <span class="text-slate-500 font-bold text-xl">,</span>
-                        <input type="number" id="quiz-4"
-                            class="math-input w-16 h-12 md:w-24 md:h-16 text-xl md: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>
+            <div class="mb-6">
+                <p class="text-lg md:text-xl mb-4 font-bold">請問：若首項��� <span id="quiz-start-val"
+                        class="text-amber-400 text-2xl md:text-3xl mx-1">?</span>，公差是 <span id="quiz-diff-val"
+                        class="text-amber-400 text-2xl md: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="text" readonly onclick="keypad.open(this)" id="quiz-1"
+                        class="math-input w-16 h-12 md:w-24 md:h-16 text-xl md:text-2xl" placeholder="?">
+                    <span class="text-slate-500 font-bold text-xl">,</span>
+                    <input type="text" readonly onclick="keypad.open(this)" id="quiz-2"
+                        class="math-input w-16 h-12 md:w-24 md:h-16 text-xl md:text-2xl" placeholder="?">
+                    <span class="text-slate-500 font-bold text-xl">,</span>
+                    <input type="text" readonly onclick="keypad.open(this)" id="quiz-3"
+                        class="math-input w-16 h-12 md:w-24 md:h-16 text-xl md:text-2xl" placeholder="?">
+                    <span class="text-slate-500 font-bold text-xl">,</span>
+                    <input type="text" readonly onclick="keypad.open(this)" id="quiz-4"
+                        class="math-input w-16 h-12 md:w-24 md:h-16 text-xl md:text-2xl" placeholder="?">
+                    <span class="text-slate-500 font-bold text-xl">...</span>
                 </div>
-                <button onclick="checkQuiz()"
-                    class="w-full py-3 md: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-xl md:text-2xl transition-all shadow-lg active:scale-95 border border-amber-400/30">送出答案
-                    (SUBMIT)</button>
+                <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-3 md: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-xl md: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-6 md:p-8 rounded-2xl text-center border-t-4 border-amber-500 w-[90%] max-w-lg">
-                <h3 class="text-amber-300 tracking-widest mb-4">任務開始</h3>
-                <h1 class="text-3xl md: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 text-sm md:text-base">
-                    地板會依照規律生成。<br>只要符合此規律的數字都是安全的。<br>蒐集完數字後，需要<span
-                        class="text-yellow-400 font-bold border-b border-yellow-400">建造階梯</span>才能進入城堡。</p>
-                <button onclick="confirmMission()"
-                    class="w-full py-3 md: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>
+    <!-- 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-6 md:p-8 rounded-2xl text-center border-t-4 border-amber-500 w-[90%] max-w-lg">
+            <h3 class="text-amber-300 tracking-widest mb-4">任務開始</h3>
+            <h1 class="text-3xl md: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 text-sm md:text-base">
+                地板會依照規律生成。<br>只要符合此規律的數字都是安全的。<br>蒐集完數字後，需要<span
+                    class="text-yellow-400 font-bold border-b border-yellow-400">建造階梯</span>才能進入城堡。</p>
+            <button onclick="confirmMission()"
+                class="w-full py-3 md: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 pointer-events-none">
-            <div class="flex-1 w-full pointer-events-none"><!-- Spacer for canvas --></div>
-            <div
-                class="ritual-content-wrapper pointer-events-auto w-[95%] max-w-[600px] bg-slate-900/80 backdrop-blur-md rounded-t-2xl p-4 border-t border-amber-500/50 max-h-[50vh] overflow-y-auto">
-                <div id="ritual-step-1" class="transition-all duration-500 mb-4 w-full flex justify-center">
-                    <button onclick="triggerRitualAnimation()"
-                        class="btn-magic px-8 py-3 md:px-10 md:py-4 rounded-full bg-gradient-to-r from-amber-500 to-orange-600 text-white font-bold text-lg md:text-xl border-4 border-white/20 shadow-[0_0_20px_rgba(245,158,11,0.6)] hover:scale-105 transition-transform">✨
-                        施展分身術</button>
-                </div>
-                <!-- Steps Container -->
-                <div class="w-full flex flex-col items-center gap-4">
-                    <div id="ritual-step-2"
-                        class="glass-panel p-3 md:p-4 rounded-2xl w-full hidden border border-amber-500 transition-all">
-                        <div class="original-content">
-                            <h3 class="text-base md:text-lg font-bold text-amber-400 mb-2">步驟 1：觀察長方形邊長</h3>
-                            <div class="flex flex-wrap gap-2 justify-center items-center">
-                                <div
-                                    class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-1 md:gap-2 border border-slate-600">
-                                    <span
-                                        class="text-amber-300 font-bold text-xs md:text-sm whitespace-nowrap">寬度</span>
-                                    <input type="number" id="rit-start"
-                                        class="math-input w-12 h-8 md:w-14 md:h-10 text-base md:text-lg"
-                                        placeholder="首">
-                                    <span class="text-white">+</span>
-                                    <input type="number" id="rit-end"
-                                        class="math-input w-12 h-8 md:w-14 md:h-10 text-base md:text-lg"
-                                        placeholder="末">
-                                </div>
-                                <div
-                                    class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-1 md:gap-2 border border-slate-600">
-                                    <span
-                                        class="text-yellow-300 font-bold text-xs md:text-sm whitespace-nowrap">項數</span>
-                                    <input type="number" id="rit-n"
-                                        class="math-input w-12 h-8 md:w-14 md:h-10 text-base md:text-lg"
-                                        placeholder="n">
-                                </div>
-                                <button id="btn-rit-2" onclick="checkRitualDim()"
-                                    class="px-4 py-2 md:px-6 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-bold shadow-lg text-sm md:text-base whitespace-nowrap">確認</button>
+    <!-- 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 pointer-events-none">
+        <div class="flex-1 w-full pointer-events-none"><!-- Spacer for canvas --></div>
+        <div
+            class="ritual-content-wrapper pointer-events-auto w-[95%] max-w-[600px] bg-slate-900/80 backdrop-blur-md rounded-t-2xl p-4 border-t border-amber-500/50 max-h-[50vh] overflow-y-auto">
+            <div id="ritual-step-1" class="transition-all duration-500 mb-4 w-full flex justify-center">
+                <button onclick="triggerRitualAnimation()"
+                    class="btn-magic px-8 py-3 md:px-10 md:py-4 rounded-full bg-gradient-to-r from-amber-500 to-orange-600 text-white font-bold text-lg md:text-xl border-4 border-white/20 shadow-[0_0_20px_rgba(245,158,11,0.6)] hover:scale-105 transition-transform">✨
+                    施展分身術</button>
+            </div>
+            <!-- Steps Container -->
+            <div class="w-full flex flex-col items-center gap-4">
+                <div id="ritual-step-2"
+                    class="glass-panel p-3 md:p-4 rounded-2xl w-full hidden border border-amber-500 transition-all">
+                    <div class="original-content">
+                        <h3 class="text-base md:text-lg font-bold text-amber-400 mb-2">步驟 1：觀察長方形邊長</h3>
+                        <div class="flex flex-wrap gap-2 justify-center items-center">
+                            <div
+                                class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-1 md:gap-2 border border-slate-600">
+                                <span class="text-amber-300 font-bold text-xs md:text-sm whitespace-nowrap">寬度</span>
+                                <input type="text" readonly onclick="keypad.open(this)" id="rit-start"
+                                    class="math-input w-12 h-8 md:w-14 md:h-10 text-base md:text-lg" placeholder="首">
+                                <span class="text-white">+</span>
+                                <input type="text" readonly onclick="keypad.open(this)" id="rit-end"
+                                    class="math-input w-12 h-8 md:w-14 md:h-10 text-base md:text-lg" placeholder="末">
                             </div>
-                            <p id="ritual-msg-1" class="text-red-400 mt-1 text-xs md:text-sm h-4 text-center"></p>
-                        </div>
-                        <div class="summary-content hidden">
-                            <span class="text-green-400 font-bold text-sm">✅ 步驟 1 完成</span>
-                            <span class="text-slate-300 text-xs md:text-sm ml-2" id="summary-dim"></span>
-                        </div>
-                    </div>
-
-                    <div id="ritual-step-3"
-                        class="glass-panel p-3 md:p-4 rounded-2xl w-full hidden border border-green-500 transition-all">
-                        <div class="original-content">
-                            <h3 class="text-base md:text-lg font-bold text-green-400 mb-2">步驟 2：計算長方形總數</h3>
-                            <div class="flex flex-wrap items-center justify-center gap-2 md:gap-3">
-                                <span class="text-xs md:text-sm text-slate-300">總磚塊數 (寬×高) = </span>
-                                <input type="number" id="rit-total"
-                                    class="math-input w-20 h-8 md:w-24 md:h-10 text-base md:text-lg">
-                                <button id="btn-rit-3" onclick="checkRitualTotal()"
-                                    class="px-4 py-2 md:px-6 rounded-lg bg-green-600 hover:bg-green-500 text-white font-bold shadow-lg text-sm md:text-base">確認</button>
+                            <div
+                                class="bg-slate-800/50 p-2 rounded-lg flex items-center gap-1 md:gap-2 border border-slate-600">
+                                <span class="text-yellow-300 font-bold text-xs md:text-sm whitespace-nowrap">項數</span>
+                                <input type="text" readonly onclick="keypad.open(this)" id="rit-n"
+                                    class="math-input w-12 h-8 md:w-14 md:h-10 text-base md:text-lg" placeholder="n">
                             </div>
-                            <p id="ritual-msg-2" class="text-red-400 mt-1 text-xs md:text-sm h-4 text-center"></p>
-                        </div>
-                        <div class="summary-content hidden">
-                            <span class="text-green-400 font-bold text-sm">✅ 步驟 2 完成</span>
-                            <span class="text-slate-300 text-xs md:text-sm ml-2" id="summary-total"></span>
+                            <button id="btn-rit-2" onclick="checkRitualDim()"
+                                class="px-4 py-2 md:px-6 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-bold shadow-lg text-sm md:text-base whitespace-nowrap">確認</button>
                         </div>
+                        <p id="ritual-msg-1" class="text-red-400 mt-1 text-xs md:text-sm h-4 text-center"></p>
                     </div>
+                    <div class="summary-content hidden">
+                        <span class="text-green-400 font-bold text-sm">✅ 步驟 1 完成</span>
+                        <span class="text-slate-300 text-xs md:text-sm ml-2" id="summary-dim"></span>
+                    </div>
+                </div>
 
-                    <div id="ritual-step-4"
-                        class="glass-panel p-3 md:p-4 rounded-2xl w-full hidden border border-yellow-500 transition-all">
-                        <h3 class="text-base md: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 id="ritual-step-3"
+                    class="glass-panel p-3 md:p-4 rounded-2xl w-full hidden border border-green-500 transition-all">
+                    <div class="original-content">
+                        <h3 class="text-base md:text-lg font-bold text-green-400 mb-2">步驟 2：計算長方形總數</h3>
                         <div class="flex flex-wrap items-center justify-center gap-2 md:gap-3">
-                            <span class="text-xs md:text-sm font-bold text-amber-300">階梯總和 = </span>
-                            <input type="number" id="rit-final"
+                            <span class="text-xs md:text-sm text-slate-300">總磚塊數 (寬×高) = </span>
+                            <input type="text" readonly onclick="keypad.open(this)" id="rit-total"
                                 class="math-input w-20 h-8 md:w-24 md:h-10 text-base md:text-lg">
-                            <button id="btn-rit-4" onclick="checkRitualFinal()"
-                                class="px-4 py-2 md:px-6 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-bold shadow-lg text-sm md:text-base">完成</button>
+                            <button id="btn-rit-3" onclick="checkRitualTotal()"
+                                class="px-4 py-2 md:px-6 rounded-lg bg-green-600 hover:bg-green-500 text-white font-bold shadow-lg text-sm md:text-base">確認</button>
                         </div>
-                        <p id="ritual-msg-3" class="text-red-400 mt-1 text-xs md:text-sm h-4 text-center"></p>
+                        <p id="ritual-msg-2" class="text-red-400 mt-1 text-xs md:text-sm h-4 text-center"></p>
+                    </div>
+                    <div class="summary-content hidden">
+                        <span class="text-green-400 font-bold text-sm">✅ 步驟 2 完成</span>
+                        <span class="text-slate-300 text-xs md:text-sm ml-2" id="summary-total"></span>
                     </div>
+                </div>
 
-                    <div id="ritual-step-5" class="glass-panel p-3 md:p-4 rounded-2xl w-full hidden text-center">
-                        <h3
-                            class="text-xl md: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-base md: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-6 py-2 md:px-8 md:py-3 rounded-lg bg-green-600 hover:bg-green-500 font-bold text-white text-lg md:text-xl shadow-lg animate-bounce">
-                                前往城堡
-                            </button>
-                        </div>
+                <div id="ritual-step-4"
+                    class="glass-panel p-3 md:p-4 rounded-2xl w-full hidden border border-yellow-500 transition-all">
+                    <h3 class="text-base md: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 flex-wrap items-center justify-center gap-2 md:gap-3">
+                        <span class="text-xs md:text-sm font-bold text-amber-300">階梯總和 = </span>
+                        <input type="text" readonly onclick="keypad.open(this)" id="rit-final"
+                            class="math-input w-20 h-8 md:w-24 md:h-10 text-base md:text-lg">
+                        <button id="btn-rit-4" onclick="checkRitualFinal()"
+                            class="px-4 py-2 md:px-6 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-bold shadow-lg text-sm md:text-base">完成</button>
+                    </div>
+                    <p id="ritual-msg-3" class="text-red-400 mt-1 text-xs md:text-sm h-4 text-center"></p>
+                </div>
+
+                <div id="ritual-step-5" class="glass-panel p-3 md:p-4 rounded-2xl w-full hidden text-center">
+                    <h3
+                        class="text-xl md: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-base md: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-6 py-2 md:px-8 md:py-3 rounded-lg bg-green-600 hover:bg-green-500 font-bold text-white text-lg md:text-xl shadow-lg animate-bounce">
+                            前往城堡
+                        </button>
                     </div>
                 </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>
+    <!-- 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>
+            <!-- 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 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>
-
-                <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>
+
+            <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>
+    <!-- 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 ---
@@ -772,12 +844,93 @@
 
         // --- Init ---
         function resize() {
+            const oldHeight = height;
             width = canvas.width = window.innerWidth;
             height = canvas.height = window.innerHeight;
+
+            // Resize Logic for Bottom Anchoring
+            if (oldHeight && oldHeight !== height) {
+                const deltaY = height - oldHeight;
+                // Shift Player
+                player.y += deltaY;
+                player.prevY += deltaY; // Important for collision physics logic
+
+                // Shift Camera (to avoid quick jumps)
+                cameraY += deltaY;
+
+                // Shift Platforms
+                platforms.forEach(p => p.y += deltaY);
+
+                // Shift CHeckpoints
+                checkpoints.forEach(p => p.y += deltaY);
+
+                // Shift Tutorial Objects
+                tutorialObjects.forEach(o => o.y += deltaY);
+
+                // Shift Level Objects (Flags, Castle)
+                levelObjects.forEach(o => o.y += deltaY);
+
+                // Shift Particles
+                particles.forEach(p => p.y += deltaY);
+
+                // Shift Gravity Zone
+                if (gravityZone) gravityZone.y += deltaY;
+            }
         }
         window.addEventListener('resize', resize);
         resize();
 
+        // --- Virtual Keypad System (Reused from Function Game) ---
+        const keypad = {
+            element: null,
+            targetInput: null,
+            init: function () {
+                this.element = document.getElementById('virtual-keypad');
+                // Auto-close when clicking outside
+                document.addEventListener('click', (e) => {
+                    if (this.element.classList.contains('active') &&
+                        !this.element.contains(e.target) &&
+                        e.target !== this.targetInput &&
+                        !e.target.classList.contains('keypad-btn')) { /* Fix for clicking buttons */
+                        this.close();
+                    }
+                });
+            },
+            open: function (inputElement) {
+                this.targetInput = inputElement;
+                this.element.classList.add('active');
+
+                // Highlight input
+                document.querySelectorAll('.math-input').forEach(el => el.classList.remove('border-amber-400', 'ring-2', 'ring-amber-400'));
+                inputElement.classList.add('border-amber-400', 'ring-2', 'ring-amber-400');
+            },
+            close: function () {
+                this.element.classList.remove('active');
+                if (this.targetInput) {
+                    this.targetInput.classList.remove('border-amber-400', 'ring-2', 'ring-amber-400');
+                    // Trigger change event if needed
+                    this.targetInput.dispatchEvent(new Event('change'));
+                    this.targetInput = null;
+                }
+            },
+            input: function (val) {
+                if (!this.targetInput) return;
+                let currentVal = this.targetInput.value;
+                if (val === '-') {
+                    if (currentVal.startsWith('-')) this.targetInput.value = currentVal.substring(1);
+                    else this.targetInput.value = '-' + currentVal;
+                } else {
+                    this.targetInput.value = currentVal + val;
+                }
+            },
+            backspace: function () {
+                if (!this.targetInput) return;
+                this.targetInput.value = this.targetInput.value.slice(0, -1);
+            }
+        };
+        // Initialize immediately
+        keypad.init();
+
         function selectDevice(type) {
             if (audioCtx.state === 'suspended') audioCtx.resume();