Improve mobile layout and styles\n\n- Move in-app buttons to a fixed bottom bar on mobile\n- Shrink masthead and volume badge on landing\n- Import mobile stylesheet in app entry\n- Place velocity/energy stats above bottom buttons\n- Adjust dialogue/input spacing to avoid overlap

3 files changed, 18 insertions, 10 deletions

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index ca5a10c..9373927 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './styles/pc98.css'
+import './styles/mobile.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/frontend/src/styles/mobile.css b/frontend/src/styles/mobile.css
index be76818..a36290c 100644
--- a/frontend/src/styles/mobile.css
+++ b/frontend/src/styles/mobile.css
@@ -21,17 +21,19 @@
   .cta-right { display: flex; }
   .taisho-cta { width: 100%; justify-content: center; transform: none; }
 
-  /* Lift stats above CTA */
-  .bottom-stats { bottom: 96px; }
+  /* Lift stats higher above CTA (mobile only) */
+  .bottom-stats { bottom: calc(280px + env(safe-area-inset-bottom, 0px)); }
+  .bottom-stats .rf-stats { padding: 6px 10px; }
+  .bottom-stats .rf-stat { font-size: 11px; }
 
   /* Compact masthead and issue badge */
   .modern-landing-page.manga-style .masthead-vertical {
-    padding: 8px 6px;
+    padding: 6px 6px;
     border-width: 2px;
   }
-  .modern-landing-page.manga-style .masthead-vertical .jp { font-size: 22px; }
-  .modern-landing-page.manga-style .masthead-vertical .en { font-size: 9px; letter-spacing: 0.5px; }
-  .modern-landing-page.manga-style .issue-badge { padding: 4px 8px; font-size: 11px; gap: 6px; }
+  .modern-landing-page.manga-style .masthead-vertical .jp { font-size: 20px; }
+  .modern-landing-page.manga-style .masthead-vertical .en { font-size: 8px; letter-spacing: 0.5px; }
+  .modern-landing-page.manga-style .issue-badge { padding: 3px 7px; font-size: 10px; gap: 6px; }
   .modern-landing-page.manga-style .issue-badge .led-heart {
     width: 6px;
     height: 6px;
diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css
index a736009..c7d6fb6 100644
--- a/frontend/src/styles/pc98.css
+++ b/frontend/src/styles/pc98.css
@@ -4159,8 +4159,13 @@ button:focus-visible {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 16px;
-    height: 48px;
+    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
+    height: 56px;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 120;
   }
   
   /* Hide desktop time in mobile */
@@ -4235,12 +4240,12 @@ button:focus-visible {
   
   /* Adjust dialogue and input positioning */
   .dialogue {
-    bottom: 140px;
+    bottom: 160px; /* give extra space for fixed footer */
     margin: 0 8px;
   }
   
   .text-input-area {
-    bottom: 80px;
+    bottom: 100px; /* clear the bottom bar comfortably */
     left: 8px;
     right: 8px;
   }