Upload 2 files

function.html

@@ -54,6 +54,51 @@
             z-index: 0;
         }
 
+        /* Dialogue Box */
+        #dialogue-box {
+            position: fixed;
+            bottom: 2rem;
+            left: 2rem;
+            width: 450px;
+            max-width: 90%;
+            z-index: 40;
+            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+
+        @media (max-width: 768px) {
+            #dialogue-box {
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: 1rem;
+                width: 95%;
+            }
+        }
+
+        #dialogue-box.translate-y-full {
+            transform: translateY(150%);
+        }
+
+        /* Banner */
+        #formula-banner {
+            position: fixed;
+            top: 2rem;
+            right: 2rem;
+            width: 380px;
+            z-index: 35;
+            transition: opacity 0.5s;
+        }
+
+        @media (max-width: 768px) {
+            #formula-banner {
+                top: 0.5rem;
+                right: 0.5rem;
+                width: 200px;
+                /* Smaller on mobile */
+                transform: scale(0.8);
+                transform-origin: top right;
+            }
+        }
+
         /* Tech UI Styling */
         .glass-panel {
             background: rgba(15, 23, 42, 0.95);

sequence.html

@@ -388,41 +388,43 @@
 
         <!-- 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="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-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>
+                        <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>
                 <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="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-20 h-14 md:w-24 md:h-16 text-2xl"
-                            placeholder="?">
+                        <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-20 h-14 md:w-24 md:h-16 text-2xl"
-                            placeholder="?">
+                        <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-20 h-14 md:w-24 md:h-16 text-2xl"
-                            placeholder="?">
+                        <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-20 h-14 md:w-24 md:h-16 text-2xl"
-                            placeholder="?">
+                        <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>
                 <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">送出答案
+                    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>
@@ -430,96 +432,116 @@
         <!-- 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%]">
+            <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-4xl font-bold mb-6 text-white">尋找 <span id="mission-highlight"
+                <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">地板會依照規律生成。<br>只要符合此規律的數字都是安全的。<br>蒐集完數字後，需要<span
+                <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-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">出發
+                    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">
-            <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">
+            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-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">✨
+                        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>
-                <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">
+                <!-- 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>
                             </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>
+                            <p id="ritual-msg-1" class="text-red-400 mt-1 text-xs md:text-sm h-4 text-center"></p>
                         </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 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>
-                        <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 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>
+                            <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>
-                <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 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="number" 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>
-                    <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 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>