From 4461782b70307775644b5891cf4ca2afd80e80fd Mon Sep 17 00:00:00 2001
From: Impaczus <impaczus@gmail.com>
Date: Fri, 29 May 2026 00:09:42 +0800
Subject: [PATCH] Mobile-friendly UI

---
 index.html |  1 +
 main.css   | 34 +++++++++++++++++++++++++++++++---
 main.js    |  4 ++++
 3 files changed, 36 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 9c1cb2d..1a2006c 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
     <title>Mabulig Web App</title>
     <script type="importmap">
       {
diff --git a/main.css b/main.css
index 3b0a66b..b35ba21 100644
--- a/main.css
+++ b/main.css
@@ -1,3 +1,27 @@
+body, html {
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* Prevents scrollbars */
+  width: 100vw;
+  height: 100vh;
+}
+
+@media (max-width: 600px) {
+  .lil-gui.root {
+    /* Force it to sit at the bottom or top of the screen */
+    width: 100% !important; 
+    right: 0 !important;
+    top: auto !important;
+    bottom: 0 !important; /* Move to bottom for easier thumb reach */
+    
+    /* Make the text and hit-areas slightly larger for fingers */
+    --font-size: 14px;
+    --input-font-size: 14px;
+    --widget-height: 30px;
+    --name-width: 40%;
+  }
+}
+
 @font-face {
     font-family: "SF Pro Medium";
     src: url("fonts/SF-Pro.ttf") format("truetype");
@@ -74,11 +98,11 @@ h4 {
 
 /* Container that covers the whole screen */
 #loader-container {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   /*background-color: #1111115d; */ /* Dark background */
   display: flex;
   flex-direction: column;
@@ -87,6 +111,10 @@ h4 {
   z-index: 999; /* Ensure it stays on top of the Three.js canvas */
   color: black;
   font-family: 'Blender Pro Bold';
+
+  /* Prevent accidental text selection while tapping on mobile */
+  user-select: none; 
+  -webkit-user-select: none;
 }
 
 /* The actual spinning throbber */
diff --git a/main.js b/main.js
index 734c2f6..8ba0cd9 100644
--- a/main.js
+++ b/main.js
@@ -87,6 +87,10 @@ function updateNameText(name) {
 
 const gui = new GUI({ width: 425 }); //New UI
 
+if (window.innerWidth <= 600) {
+  gui.close(); // Starts collapsed on mobile
+}
+
 //Loading elements 
 const loaderContainer = document.getElementById('loader-container');
 const loadingText = document.getElementById('loading-text');
