mobile

scripts/extras.js

@@ -1,24 +1,24 @@
 document.getElementById("open-fin-modal").addEventListener("click", function() {
     document.getElementById("fin-modal").style.visibility = "visible";
-    document.body.classList.add("modal-open");
+    if (window.lockBodyScroll) window.lockBodyScroll();
 });
 
 document.querySelectorAll(".close-fin-modal").forEach(function(button) {
     button.addEventListener("click", function() {
         document.getElementById("fin-modal").style.visibility = "hidden";
-        document.body.classList.remove("modal-open");
+        if (window.unlockBodyScroll) window.unlockBodyScroll();
     });
 });
 
 document.getElementById("open-game-modal").addEventListener("click", function() {
     document.getElementById("game-modal").style.visibility = "visible";
-    document.body.classList.add("modal-open");
+    if (window.lockBodyScroll) window.lockBodyScroll();
 });
 
 document.querySelectorAll(".close-game-modal").forEach(function(button) {
     button.addEventListener("click", function() {
         document.getElementById("game-modal").style.visibility = "hidden";
-        document.body.classList.remove("modal-open");
+        if (window.unlockBodyScroll) window.unlockBodyScroll();
     });
 });
 

scripts/main.js

@@ -25,6 +25,41 @@ const footerHtml = `
 </footer>
 `;
 
+// Scroll lock helper
+(function() {
+    let _locked = false;
+    let _scrollY = 0;
+
+    function lockBodyScroll() {
+        if (_locked) return;
+        _scrollY = window.scrollY || window.pageYOffset || 0;
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${_scrollY}px`;
+        document.body.style.left = "0";
+        document.body.style.right = "0";
+        document.body.style.width = "100%";
+        document.documentElement.classList.add("modal-open");
+        document.body.classList.add("modal-open");
+        _locked = true;
+    }
+
+    function unlockBodyScroll() {
+        if (!_locked) return;
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.left = "";
+        document.body.style.right = "";
+        document.body.style.width = "";
+        document.documentElement.classList.remove("modal-open");
+        document.body.classList.remove("modal-open");
+        window.scrollTo(0, _scrollY);
+        _locked = false;
+    }
+
+    window.lockBodyScroll = lockBodyScroll;
+    window.unlockBodyScroll = unlockBodyScroll;
+})();
+
 function getCurrentTheme() {
     return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
 }
@@ -102,17 +137,19 @@ document.addEventListener("DOMContentLoaded", function() {
             `;
             document.body.insertAdjacentHTML("beforeend", modalHtml);
             const modal = document.getElementById("image-modal");
-            modal.style.visibility = 'visible';
-            document.body.classList.add("modal-open");
+            modal.style.visibility = "visible";
+            if (window.lockBodyScroll) window.lockBodyScroll();
 
-            modal.querySelector(".close").addEventListener("click", () => {
-                modal.remove();
-                document.body.classList.remove("modal-open");
-            });
+            const closeBtn = modal.querySelector(".close");
+            if (closeBtn) {
+                closeBtn.addEventListener("click", () => {
+                    modal.remove();
+                    if (window.unlockBodyScroll) window.unlockBodyScroll();
+                });
+            }
         });
     });
 });
-
 function toggleTheme() {
     const current = getCurrentTheme();
     const next = current === "dark" ? "light" : "dark";

styles/main.css

@@ -412,9 +412,11 @@ nav {
 }
 
 /* Prevent background scrolling while a modal is open */
+html.modal-open,
 body.modal-open {
     overflow: hidden;
     touch-action: none;
+    height: 100%;
 }
 
 .close {