From 3104859bb7fc2cf935a006239b4497522e175004 Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Mon, 1 Dec 2025 12:10:12 -0600
Subject: [PATCH] Fix ENTER XR button centering and improve preloader styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/styles.css           | 10 ++++++++--
 src/ui/screens/preloader.ts |  7 +++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index bb34659..3308d6d 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -750,7 +750,7 @@ body {
 
 .preloader-content {
     text-align: center;
-    max-width: 600px;
+    max-width: 800px;
     width: 100%;
 }
 
@@ -787,6 +787,12 @@ body {
     box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
 }
 
+.preloader-button-container {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+
 .preloader-button {
     display: none;
     padding: var(--space-lg) var(--space-3xl);
@@ -859,7 +865,7 @@ body {
     padding: 0;
     margin: var(--space-md) 0 0 0;
     text-align: left;
-    max-width: 400px;
+    max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }
diff --git a/src/ui/screens/preloader.ts b/src/ui/screens/preloader.ts
index 0100509..21190b3 100644
--- a/src/ui/screens/preloader.ts
+++ b/src/ui/screens/preloader.ts
@@ -39,7 +39,10 @@ export class Preloader {
                 <div id="preloaderError" class="preloader-error" style="display: none;">
                     VR headset not detected. This game requires a VR device.
                 </div>
-                <button id="preloaderStartBtn" class="preloader-button">ENTER XR</button>
+                <div class="preloader-button-container">
+                    <button id="preloaderStartBtn" class="preloader-button">ENTER XR</button>
+                </div>
+                
             </div>`;
     }
 
@@ -104,7 +107,7 @@ export class Preloader {
 
     private animateButtonIn(): void {
         if (!this.startButton) return;
-        this.startButton.style.display = 'block';
+        this.startButton.style.display = 'inline-block';
         this.startButton.style.opacity = '0';
         this.startButton.style.transform = 'translateY(20px)';
         setTimeout(() => {