From 2bbd388524e9225d5f247fb6be3f324277512815 Mon Sep 17 00:00:00 2001
From: Dasemu <dario@dariosevilla.es>
Date: Thu, 22 Jan 2026 09:22:06 +0100
Subject: [PATCH] feat: add native app detection and adjust styles for
 Capacitor/Cordova

---
 www/index.html                                |  6 +++---
 ...{script.c9dd22de.js => script.52beba25.js} | 11 ++++++++++
 www/script.js                                 | 11 ++++++++++
 ...tyles.2e5df802.css => styles.3a5cdf49.css} | 21 +++++++++++++++++++
 www/styles.css                                | 21 +++++++++++++++++++
 5 files changed, 67 insertions(+), 3 deletions(-)
 rename www/{script.c9dd22de.js => script.52beba25.js} (99%)
 rename www/{styles.2e5df802.css => styles.3a5cdf49.css} (99%)

diff --git a/www/index.html b/www/index.html
index e6ebbac..72db92b 100644
--- a/www/index.html
+++ b/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>
 
diff --git a/www/script.c9dd22de.js b/www/script.52beba25.js
similarity index 99%
rename from www/script.c9dd22de.js
rename to www/script.52beba25.js
index 7dcf88e..1ea65cd 100644
--- a/www/script.c9dd22de.js
+++ b/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: {
diff --git a/www/script.js b/www/script.js
index 7dcf88e..1ea65cd 100644
--- a/www/script.js
+++ b/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: {
diff --git a/www/styles.2e5df802.css b/www/styles.3a5cdf49.css
similarity index 99%
rename from www/styles.2e5df802.css
rename to www/styles.3a5cdf49.css
index a0e105a..ac015f5 100644
--- a/www/styles.2e5df802.css
+++ b/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: '';
diff --git a/www/styles.css b/www/styles.css
index a0e105a..ac015f5 100644
--- a/www/styles.css
+++ b/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: '';