Upload 2 files

function.html

@@ -108,8 +108,11 @@
         #virtual-keypad {
             position: fixed;
             bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%) translateY(120%);
+            right: 20px;
+            left: auto;
+            /* Remove centering */
+            transform: translateY(120%);
+            /* Start hidden down */
             z-index: 1000;
             background: rgba(15, 23, 42, 0.95);
             backdrop-filter: blur(10px);
@@ -268,7 +271,7 @@
     </div>
 
     <!-- Virtual Keypad HTML -->
-    <div id="virtual-keypad">
+    <div id="virtual-keypad" onclick="event.stopPropagation()">
         <div class="keypad-handle"></div>
         <div class="keypad-btn" onclick="keypad.input(1)">1</div>
         <div class="keypad-btn" onclick="keypad.input(2)">2</div>
@@ -739,13 +742,13 @@
                 case STATE.PHASE1_INTRO:
                     formulaBanner.classList.remove('hidden');
                     html = `
-                        <h2 class="text-3xl font-bold text-cyan-400 mb-4">核心運作法則確認</h2>
+                        <h2 class="text-2xl md:text-3xl font-bold text-cyan-400 mb-4">核心運作法則確認</h2>
                         <div class="text-center bg-slate-800/80 p-6 rounded-xl border border-cyan-500/30 mb-8">
-                             <div class="font-tech text-4xl md:text-6xl mb-6">
+                             <div class="font-tech text-3xl md:text-6xl mb-6">
                                 <span class="text-cyan-400">y</span> = 2<span class="text-amber-400">x</span> + 3
                             </div>
-                            <p class="text-slate-300 text-2xl md:text-4xl leading-relaxed font-bold">
-                                每投入 <span class="text-amber-400 font-bold text-5xl md:text-7xl mx-2 border-b-2 border-amber-400/50">x</span> 顆晶石，<br>就會產生 <span class="text-cyan-400 font-bold text-5xl md:text-7xl mx-2 border-b-2 border-cyan-400/50">y</span> 點電力。
+                            <p class="text-slate-300 text-xl md:text-4xl leading-relaxed font-bold">
+                                每投入 <span class="text-amber-400 font-bold text-4xl md:text-7xl mx-2 border-b-2 border-amber-400/50">x</span> 顆晶石，<br>就會產生 <span class="text-cyan-400 font-bold text-4xl md:text-7xl mx-2 border-b-2 border-cyan-400/50">y</span> 點電力。
                             </p>
                         </div>
                         <button onclick="startQPhase()" class="w-full py-5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl font-bold text-xl border border-slate-500">
@@ -784,7 +787,7 @@
                                 <div class="text-slate-400 font-bold text-xl border-b border-slate-500/30 pb-2">2. 坐標描點</div>
                                 <div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700/30 flex flex-col items-center justify-center flex-grow">
                                     <div class="text-sm text-slate-500 mb-1">對應座標</div>
-                                    <div class="font-tech text-2xl md:text-3xl font-bold text-slate-500">
+                                    <div class="font-tech text-xl md:text-3xl font-bold text-slate-500">
                                         (<span class="text-amber-400">${xVal}</span>, <span class="text-cyan-400">y</span>)
                                     </div>
                                 </div>
@@ -831,7 +834,7 @@
                                 <div id="coord-step-1" class="flex flex-col gap-4 h-full">
                                     <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500/50 flex flex-col items-center justify-center flex-grow">
                                         <div class="text-sm text-cyan-300 font-bold mb-2 tracking-widest">對應座標</div>
-                                        <div class="font-tech text-3xl md:text-4xl font-bold z-10 mb-2">
+                                        <div class="font-tech text-2xl md:text-4xl font-bold z-10 mb-2">
                                             (<span class="text-amber-400">${xValC}</span>, <span class="text-cyan-400">y</span>)
                                         </div>
                                     </div>
@@ -844,7 +847,7 @@
                                 <div id="coord-step-2" class="hidden flex flex-col gap-4 h-full">
                                     <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500 shadow-[0_0_20px_rgba(34,211,238,0.2)] flex flex-col items-center justify-center relative overflow-hidden transform transition-all flex-grow animate-pulse-once">
                                         <div class="text-sm text-cyan-300 font-bold mb-2 tracking-widest">對應座標</div>
-                                        <div class="font-tech text-3xl md:text-4xl font-bold z-10 mb-2">
+                                        <div class="font-tech text-2xl md:text-4xl font-bold z-10 mb-2">
                                             (<span class="text-amber-400">${xValC}</span>, <span class="text-cyan-400">${yValC}</span>)
                                         </div>
                                         <div class="absolute inset-0 bg-cyan-500/10 animate-pulse"></div>
@@ -924,11 +927,11 @@
                             
                             <!-- 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 md:text-3xl font-bold text-white mb-2 text-center">任務小結：什麼是「函數」？</h3>
-                                <p class="text-slate-200 text-lg md:text-2xl leading-relaxed mb-3">
-                                    剛剛我們使用的「能量轉換法則」，在數學上就叫做<span class="text-amber-400 font-bold text-2xl md:text-3xl mx-1">「函數」(Function)</span>。
+                                <h3 class="text-lg md:text-3xl font-bold text-white mb-2 text-center">任務小結：什麼是「函數」？</h3>
+                                <p class="text-slate-200 text-base md:text-2xl leading-relaxed mb-3">
+                                    剛剛我們使用的「能量轉換法則」，在數學上就叫做<span class="text-amber-400 font-bold text-xl md:text-3xl mx-1">「函數」(Function)</span>。
                                 </p>
-                                <p class="text-slate-300 text-lg md:text-2xl leading-relaxed">
+                                <p class="text-slate-300 text-base md:text-2xl leading-relaxed">
                                     函數就像一座<span class="text-cyan-400 font-bold">工廠</span>：<br>
                                     它會把原料 <span class="font-bold text-amber-400">x (晶石)</span>，藉由固定的規則，<br>轉換成產品 <span class="font-bold text-cyan-400">y (電力)</span>。
                                 </p>
@@ -973,14 +976,14 @@
                 case STATE.PHASE4_TEST_B:
                     formulaBanner.classList.remove('hidden'); // Ensure banner is visible
                     html = `
-                         <h3 class="text-3xl font-bold text-white mb-2">步驟 1：數據校準 B</h3>
+                         <h3 class="text-3xl font-bold text-white mb-2">步驟 1：數據校準 b</h3>
                          <p class="text-slate-300 mb-4">
                             你需要測試不同的晶石投入量，來推導出新的公式。
                             <br><span class="text-base text-slate-400">提示：什麼時候 <span class="text-red-400">a</span> 會消失不見？ (試試投入 0 顆)</span>
                          </p>
                          <div class="flex items-center gap-2 mt-4 bg-slate-800/50 p-4 rounded-xl justify-center flex-wrap">
                             <span class="font-tech text-amber-400 text-3xl whitespace-nowrap">投入 x = </span>
-                            <input id="test-input" type="number" class="tech-input w-24 p-2 rounded text-3xl text-amber-400 text-center" placeholder="0" value="0">
+                            <input id="test-input" type="text" readonly onclick="keypad.open(this)" class="tech-input w-24 p-2 rounded text-3xl text-amber-400 text-center" placeholder="0" value="0">
                             <button onclick="runPhase4Test()" class="px-6 py-2 bg-amber-600 hover:bg-amber-500 text-white rounded font-bold shadow-lg whitespace-nowrap">
                                 啟動運作
                             </button>
@@ -1016,7 +1019,7 @@
                 case STATE.PHASE4_TEST_A:
                     formulaBanner.classList.remove('hidden');
                     html = `
-                         <h3 class="text-3xl font-bold text-white mb-2">步驟 2：數據校準 A</h3>
+                         <h3 class="text-3xl font-bold text-white mb-2">步驟 2：數據校準 a</h3>
                          <p class="text-slate-300 mb-4">
                             現在已知 b=5。接下來需要找出變化率 a。
                             <br><span class="text-base text-slate-400">提示：試試看投入 1 顆晶石？</span>
@@ -1139,10 +1142,10 @@
 
                     html = `
                         <div class="text-center w-full h-full flex flex-col items-center">
-                            <h2 class="text-3xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-green-400 mb-6 drop-shadow-[0_0_15px_rgba(34,211,238,0.6)] tracking-widest">
+                            <h2 class="text-2xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-green-400 mb-6 drop-shadow-[0_0_15px_rgba(34,211,238,0.6)] tracking-widest">
                                 任務完成 SYSTEM RESTORED
                             </h2>
-                            <div class="text-amber-400 font-tech text-2xl md:text-4xl mb-10 tracking-[0.5em]">MISSION ACCOMPLISHED</div>
+                            <div class="text-amber-400 font-tech text-lg md:text-4xl mb-10 tracking-[0.5em]">MISSION ACCOMPLISHED</div>
 
                             <!-- Score Board -->
                             <div class="flex gap-16 mb-10 bg-slate-800/80 px-16 py-8 rounded-3xl border-2 border-slate-600 transform scale-110">

sequence.html

@@ -292,8 +292,11 @@
         #virtual-keypad {
             position: fixed;
             bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%) translateY(120%);
+            right: 20px;
+            left: auto;
+            /* Remove centering */
+            transform: translateY(120%);
+            /* Start hidden down */
             z-index: 1000;
             background: rgba(15, 23, 42, 0.95);
             backdrop-filter: blur(10px);
@@ -311,12 +314,13 @@
         }
 
         #virtual-keypad.active {
-            transform: translateX(-50%) translateY(0);
+            visibility: visible;
+            opacity: 1;
+            transform: translateY(0);
         }
 
         #virtual-keypad.dragging {
             transition: none;
-            transform: none;
         }
 
         .keypad-handle {
@@ -419,7 +423,7 @@
     </div>
 
     <!-- Virtual Keypad HTML -->
-    <div id="virtual-keypad">
+    <div id="virtual-keypad" onclick="event.stopPropagation()">
         <div class="keypad-handle"></div>
         <div class="keypad-btn" onclick="keypad.input(1)">1</div>
         <div class="keypad-btn" onclick="keypad.input(2)">2</div>
@@ -1002,7 +1006,7 @@
             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' }];
+            checkpoints = [{ x: 600, y: groundY - 60, w: 40, h: 60, active: true, type: 'right' }];
             tutorial.step = 0;
             updateTutorialUI("基礎移動", "請往右移動，觸碰黃色光柱");
             if (!isLooping) { lastTime = performance.now(); loop(lastTime); }
@@ -1012,15 +1016,15 @@
             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' });
+            checkpoints.push({ x: 200, y: groundY - 60, w: 40, h: 60, 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 = [];
+            // Clear platforms to prevent overlap ("extra platform" fix)
+            platforms = []; checkpoints = [];
 
             // Determine start X relative to player to ensure continuity
             const startX = Math.max(player.x + 400, 600);