From de21aff4893abfb66d85ee9c29490ffe81d32c0d Mon Sep 17 00:00:00 2001
From: DcruBro <info@dcrubro.com>
Date: Sun, 10 May 2026 22:10:16 +0200
Subject: [PATCH] mobile

---
 scripts/extras.js |  8 ++++----
 scripts/main.js   | 51 ++++++++++++++++++++++++++++++++++++++++-------
 styles/main.css   |  2 ++
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/scripts/extras.js b/scripts/extras.js
index 8d4c346..efe3aa6 100644
--- a/scripts/extras.js
+++ b/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();
     });
 });
 
diff --git a/scripts/main.js b/scripts/main.js
index 94ee7a2..94fa21a 100644
--- a/scripts/main.js
+++ b/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";
diff --git a/styles/main.css b/styles/main.css
index 5216ff7..4b94668 100644
--- a/styles/main.css
+++ b/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 {