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

---
 scripts/extras.js |  4 ++++
 scripts/main.js   |  4 +++-
 styles/main.css   | 14 +++++++++++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/scripts/extras.js b/scripts/extras.js
index 4cf485e..8d4c346 100644
--- a/scripts/extras.js
+++ b/scripts/extras.js
@@ -1,20 +1,24 @@
 document.getElementById("open-fin-modal").addEventListener("click", function() {
     document.getElementById("fin-modal").style.visibility = "visible";
+    document.body.classList.add("modal-open");
 });
 
 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");
     });
 });
 
 document.getElementById("open-game-modal").addEventListener("click", function() {
     document.getElementById("game-modal").style.visibility = "visible";
+    document.body.classList.add("modal-open");
 });
 
 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");
     });
 });
 
diff --git a/scripts/main.js b/scripts/main.js
index e3e350b..94ee7a2 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -102,10 +102,12 @@ document.addEventListener("DOMContentLoaded", function() {
             `;
             document.body.insertAdjacentHTML("beforeend", modalHtml);
             const modal = document.getElementById("image-modal");
-            modal.style.visibility = "visible";
+            modal.style.visibility = 'visible';
+            document.body.classList.add("modal-open");
 
             modal.querySelector(".close").addEventListener("click", () => {
                 modal.remove();
+                document.body.classList.remove("modal-open");
             });
         });
     });
diff --git a/styles/main.css b/styles/main.css
index 6dbbc42..5216ff7 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -411,10 +411,16 @@ nav {
     visibility: hidden;
 }
 
+/* Prevent background scrolling while a modal is open */
+body.modal-open {
+    overflow: hidden;
+    touch-action: none;
+}
+
 .close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
+    position: fixed;
+    top: 12px;
+    right: 12px;
     font-size: 2rem;
     background-color: var(--nav-btn-bg);
     border: 1px solid var(--nav-btn-border);
@@ -444,6 +450,8 @@ nav {
     position: relative;
     color: var(--text-color);
     transition: background-color 0.25s ease, color 0.25s ease;
+    max-height: calc(100vh - 48px);
+    overflow: auto;
 }
 
 /* Make images inside modals larger while constraining to viewport */