feat: add native app detection and adjust styles for Capacitor/Cordova

www/index.html

@@ -77,10 +77,10 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600;700&family=Courier+Prime:wght@400;700&family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles.2e5df802.css">
+    <link rel="stylesheet" href="styles.3a5cdf49.css">
     <link rel="icon" type="image/png" href="logo.78f51359.png">
     <link rel="sitemap" type="application/xml" href="/www/sitemap.xml">
-    <link rel="stylesheet" href="styles.2e5df802.css">
+    <link rel="stylesheet" href="styles.3a5cdf49.css">
     <link rel="icon" type="image/png" href="logo.78f51359.png">
     <link rel="manifest" href="manifest.webmanifest">
     <meta name="theme-color" content="#ff4444">
@@ -265,7 +265,7 @@
         </div>
     </div>
 
-    <script src="script.c9dd22de.js"></script>
+    <script src="script.52beba25.js"></script>
 </body>
 </html>
 

www/script.52beba25.js

@@ -7,6 +7,17 @@ const THEME_STORAGE_KEY = 'impostorGameTheme';
 const LANGUAGE_STORAGE_KEY = 'impostorGameLanguage';
 const SCREEN_LOCK_STORAGE_KEY = 'impostorGameScreenLock';
 
+// Detect if running as a native app (Capacitor/Cordova)
+(function detectNativeApp() {
+  const isCapacitor = window.Capacitor !== undefined;
+  const isCordova = window.cordova !== undefined;
+  const isNativeApp = isCapacitor || isCordova;
+
+  if (isNativeApp) {
+    document.documentElement.classList.add('native-app');
+  }
+})();
+
 // ---------- Internationalization system ----------
 const TRANSLATIONS = {
   es: {

www/script.js

@@ -7,6 +7,17 @@ const THEME_STORAGE_KEY = 'impostorGameTheme';
 const LANGUAGE_STORAGE_KEY = 'impostorGameLanguage';
 const SCREEN_LOCK_STORAGE_KEY = 'impostorGameScreenLock';
 
+// Detect if running as a native app (Capacitor/Cordova)
+(function detectNativeApp() {
+  const isCapacitor = window.Capacitor !== undefined;
+  const isCordova = window.cordova !== undefined;
+  const isNativeApp = isCapacitor || isCordova;
+
+  if (isNativeApp) {
+    document.documentElement.classList.add('native-app');
+  }
+})();
+
 // ---------- Internationalization system ----------
 const TRANSLATIONS = {
   es: {

www/styles.3a5cdf49.css

@@ -111,6 +111,27 @@ body {
   transition: background 0.5s ease, color 0.3s ease;
 }
 
+/* Native app (Capacitor/Cordova) status bar adjustment */
+.native-app body {
+  padding-top: calc(70px + 32px);
+}
+
+.native-app .theme-toggle {
+  top: calc(20px + 32px);
+}
+
+.native-app .language-toggle {
+  top: calc(86px + 32px);
+}
+
+.native-app .exit-game {
+  top: calc(20px + 32px);
+}
+
+.native-app .screen-lock-toggle {
+  top: calc(152px + 32px);
+}
+
 /* Film grain texture overlay */
 body::before {
   content: '';

www/styles.css

@@ -111,6 +111,27 @@ body {
   transition: background 0.5s ease, color 0.3s ease;
 }
 
+/* Native app (Capacitor/Cordova) status bar adjustment */
+.native-app body {
+  padding-top: calc(70px + 32px);
+}
+
+.native-app .theme-toggle {
+  top: calc(20px + 32px);
+}
+
+.native-app .language-toggle {
+  top: calc(86px + 32px);
+}
+
+.native-app .exit-game {
+  top: calc(20px + 32px);
+}
+
+.native-app .screen-lock-toggle {
+  top: calc(152px + 32px);
+}
+
 /* Film grain texture overlay */
 body::before {
   content: '';