diff --git a/app/views/break_escape/games/show.html.erb b/app/views/break_escape/games/show.html.erb
index ed39263..305ac0f 100644
--- a/app/views/break_escape/games/show.html.erb
+++ b/app/views/break_escape/games/show.html.erb
@@ -47,19 +47,14 @@
   <link rel="stylesheet" href="/break_escape/css/rfid-minigame.css">
   <link rel="stylesheet" href="/break_escape/css/npc-interactions.css">
   <link rel="stylesheet" href="/break_escape/css/pin.css">
+  <link rel="stylesheet" href="/break_escape/css/minigames-framework.css">
   <link rel="stylesheet" href="/break_escape/css/password-minigame.css">
   <link rel="stylesheet" href="/break_escape/css/text-file-minigame.css">
   <link rel="stylesheet" href="/break_escape/css/npc-barks.css">
-  <link rel="stylesheet" href="/break_escape/css/title-screen.css">
-  <link rel="stylesheet" href="/break_escape/css/inventory.css">
 </head>
 <body>
-  <%# Game container - Phaser will render here %>
-  <div id="game-container"></div>
-
-  <%# Loading indicator %>
-  <div id="loading" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #00ff00; font-size: 24px; display: block;">
-    Loading game...
+  <div id="game-container">
+    <div id="loading">Loading...</div>
   </div>
 
   <%# Notification System %>
@@ -126,5 +121,31 @@
 
   <%# Load game JavaScript (ES6 module) %>
   <script type="module" src="/break_escape/js/main.js" nonce="<%= content_security_policy_nonce %>"></script>
+
+  <%# Mobile touch handling %>
+  <script>
+    // Allow zooming on mobile devices
+    document.addEventListener('DOMContentLoaded', function() {
+      // Prevent Phaser from capturing touch events that should be used for zooming
+      const gameContainer = document.getElementById('game-container');
+
+      // Allow zooming on the document level
+      document.addEventListener('gesturestart', function(e) {
+        e.preventDefault();
+      });
+
+      document.addEventListener('gesturechange', function(e) {
+        e.preventDefault();
+      });
+
+      // Prevent default touch behavior only within the game container
+      gameContainer.addEventListener('touchmove', function(e) {
+        // Only prevent default if it's not a multi-touch gesture (like pinch-to-zoom)
+        if (e.touches.length <= 1) {
+          e.preventDefault();
+        }
+      }, { passive: false });
+    });
+  </script>
 </body>
 </html>
diff --git a/public/break_escape/css/hud.css b/public/break_escape/css/hud.css
index 6778707..bdbca88 100644
--- a/public/break_escape/css/hud.css
+++ b/public/break_escape/css/hud.css
@@ -18,9 +18,9 @@
   align-items: center;
   justify-content: center;
   padding: 12px 16px;
-  background: rgba(0, 0, 0, 0.8);
-  border: 2px solid #333;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.9), inset 0 0 5px rgba(0, 0, 0, 0.5);
+  /* background: rgba(0, 0, 0, 0.5); */
+  /* border: 2px solid #333; */
+  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.9), inset 0 0 5px rgba(0, 0, 0, 0.5); */
 }
 
 .health-heart {
@@ -76,7 +76,7 @@
     justify-content: center;
     align-items: center;
     position: relative;
-    background: transparent; /* keep slot outlines but no filled background per user request */
+    background: rgb(149 157 216 / 80%);
 }
 
 /* Pulse animation for newly added items */
diff --git a/public/break_escape/css/main.css b/public/break_escape/css/main.css
index 3fa1630..0896212 100644
--- a/public/break_escape/css/main.css
+++ b/public/break_escape/css/main.css
@@ -2,10 +2,12 @@
 body {
     margin: 0;
     padding: 0;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
     background: #333;
     font-smooth: never;
-    overflow: hidden;
 }
 
 #game-container {
