Mobile-friendly UI

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 */