visuals fixed on mobile

public/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_VERSION = 'nexus-timer-cache-v3.3';
+const CACHE_VERSION = 'nexus-timer-cache-v3.4';
 const APP_SHELL_URLS = [
   // '/', // Let NetworkFirst handle '/'
   '/manifest.json',

src/assets/tailwind.css

@@ -7,6 +7,17 @@ body {
   overscroll-behavior-y: contain; /* Prevents pull-to-refresh on mobile */
 }
 
+/* Safe area insets for mobile devices (status bar, home indicator) */
+.safe-area-padding {
+  padding-top: env(safe-area-inset-top);
+  /* padding-bottom: env(safe-area-inset-bottom); */
+}
+
+.safe-area-height {
+  height: calc(100dvh - env(safe-area-inset-top));
+  min-height: 0;
+}
+
 /* Basic button styling */
 .btn {
   @apply px-4 py-2 rounded font-semibold focus:outline-none focus:ring-2 focus:ring-opacity-50;

src/components/PlayerDisplay.vue

@@ -32,7 +32,7 @@
     </div>
 
     <!-- Player Name -->
-    <h2 class="font-semibold mb-6 md:mb-6 text-5xl sm:text-2xl md:text-3xl lg:text-5xl">
+    <h2 class="font-semibold mb-4 md:mb-6 text-5xl sm:text-2xl md:text-3xl lg:text-5xl">
         {{ player.name }}
     </h2>
     <TimerDisplay 
@@ -42,7 +42,6 @@
       class="text-4xl sm:text-5xl md:text-6xl lg:text-6xl xl:text-5xl"
     />
     <p v-if="player.isSkipped" class="text-red-500 dark:text-red-400 mt-1 md:mt-2 font-semibold text-sm md:text-base lg:text-lg">SKIPPED</p>
-    <p v-if="isNextPlayerArea && !player.isSkipped" class="mt-1 md:mt-2 text-xs md:text-sm text-gray-600 dark:text-gray-400">(Swipe up to pass turn)</p>
   </div>
 </template>
 
@@ -109,9 +108,9 @@ const calculateAvatarSize = () => {
         const availableHeight = screenHeight / 2; 
         let size = Math.min(availableHeight * 0.5, screenWidth * 0.4, 175); 
 
-        if (screenWidth < 960) {
-            size = Math.min(availableHeight * 0.7, screenWidth * 0.6, 250); 
-        } else if (screenWidth < 1024) {
+        if (screenWidth < 768) { // Mobile
+            size = Math.min(availableHeight * 0.7, screenWidth * 0.6, 230); 
+        } else if (screenWidth < 1024) { // Tablet
              size = Math.min(availableHeight * 0.55, screenWidth * 0.45, 180);
         }
         size = Math.max(size, 100); 

src/views/GameView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-screen overflow-hidden" :class="{'dark': theme === 'dark'}">
+  <div class="flex flex-col safe-area-height safe-area-padding overflow-hidden" :class="{'dark': theme === 'dark'}">
     <header class="p-3 bg-gray-100 dark:bg-gray-800 shadow-md flex justify-between items-center shrink-0">
       <!-- ... header content ... -->
       <div class="flex items-center space-x-2">