step 9.4: done

public/css/main.css

@@ -76,9 +76,10 @@ button:hover { background: #c73650; }
 /* Game dashboard layout */
 .game-container {
   width: 100%;
-  max-width: 800px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 1rem;
+  padding-bottom: 5rem; /* space for mobile bottom nav */
 }
 
 .top-bar {
@@ -99,12 +100,24 @@ button:hover { background: #c73650; }
 
 .main-content {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1.5fr 1fr;
   gap: 1rem;
 }
 
-@media (max-width: 600px) {
-  .main-content { grid-template-columns: 1fr; }
+@media (max-width: 700px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+  .game-container {
+    padding-bottom: 5rem;
+  }
+}
+
+/* Hide desktop tabs on mobile */
+@media (max-width: 700px) {
+  #action-panel > .tabs {
+    display: none;
+  }
 }
 
 .panel {
@@ -332,6 +345,19 @@ button:hover { background: #c73650; }
   }
 }
 
+/* ===== Stat rows (mobile: stack name/value) ===== */
+@media (max-width: 700px) {
+  .stat-row > .label {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    text-align: left;
+  }
+  .stat-row > .label:last-child {
+    text-align: right;
+  }
+}
+
 /* ===== Equipment panel ===== */
 .equipment-panel h4 {
   color: var(--accent, #e2822b);
@@ -661,6 +687,43 @@ button:hover { background: #c73650; }
   cursor: not-allowed;
 }
 
+/* ===== Mobile bottom navigation ===== */
+.mobile-bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #16213e;
+  border-top: 1px solid #333;
+  z-index: 100;
+  padding: 0.25rem 0.5rem;
+  padding-bottom: env(safe-area-inset-bottom, 0.25rem);
+}
+
+@media (max-width: 700px) {
+  .mobile-bottom-nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+.mobile-bottom-nav .tab {
+  flex: 1;
+  text-align: center;
+  padding: 0.5rem 0.25rem;
+  font-size: 0.75rem;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  color: var(--muted, #a59a8a);
+}
+
+.mobile-bottom-nav .tab.active {
+  color: var(--accent, #e2822b);
+  border-bottom-color: var(--accent, #e2822b);
+}
+
 /* ===== Profile page ===== */
 .profile-header {
   display: flex;

public/game.html

@@ -17,9 +17,9 @@
       </div>
     </header>
 
-    <!-- Main content -->
+    <!-- Main content (3-col on desktop, stacks on mobile) -->
     <main class="main-content">
-      <!-- Stats panel -->
+      <!-- Left column: Stats -->
       <section class="panel stats-panel" id="stats-panel">
         <h3>Your Hero</h3>
         <div id="hero-loading" class="loading">Loading...</div>
@@ -72,7 +72,7 @@
         </div>
       </section>
 
-      <!-- Action panel (tabs: Hunt / Inventory) -->
+      <!-- Center column: Tabs + action area -->
       <section class="panel action-panel" id="action-panel">
         <div class="tabs" role="tablist">
           <button class="tab active" data-tab="hunt" role="tab" aria-selected="true">Hunt</button>
@@ -104,7 +104,7 @@
         </div>
       </section>
 
-      <!-- Combat log panel -->
+      <!-- Right column: Combat log -->
       <section class="panel combat-panel" id="combat-panel">
         <h3>Combat Log</h3>
         <div id="combat-log-list" class="combat-log-list">
@@ -112,12 +112,19 @@
         </div>
       </section>
 
-      <!-- Result panel -->
+      <!-- Result panel (spans full width on mobile via grid-column) -->
       <section class="panel result-panel" id="result-panel" style="display:none;">
         <h3 id="result-title"></h3>
         <div id="result-body"></div>
       </section>
     </main>
+
+    <!-- Mobile bottom navigation (replaces tabs on small screens) -->
+    <nav class="mobile-bottom-nav" role="tablist">
+      <button class="tab active" data-tab="hunt" role="tab" aria-selected="true">⚔️ Hunt</button>
+      <button class="tab" data-tab="expedition" role="tab" aria-selected="false">🏕️ Trip</button>
+      <button class="tab" data-tab="inventory" role="tab" aria-selected="false">🎒 Items</button>
+    </nav>
   </div>
 
   <script src="/js/toast.js"></script>

public/js/game.js

@@ -21,6 +21,36 @@ function switchTab(tab) {
   document.getElementById('inventory-tab').style.display = tab === 'inventory' ? '' : 'none';
 }
 
+/**
+ * Sync mobile bottom nav active state with desktop tabs.
+ */
+function syncMobileNav() {
+  const mobileNav = document.querySelector('.mobile-bottom-nav');
+  if (!mobileNav) return;
+  mobileNav.querySelectorAll('.tab').forEach((t) => {
+    const isActive = t.dataset.tab === currentTab;
+    t.classList.toggle('active', isActive);
+    t.setAttribute('aria-selected', isActive);
+  });
+}
+
+/**
+ * Attach mobile bottom-nav click handlers.
+ */
+function initMobileNav() {
+  const mobileNav = document.querySelector('.mobile-bottom-nav');
+  if (!mobileNav) return;
+  mobileNav.querySelectorAll('.tab').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      switchTab(btn.dataset.tab);
+    });
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initMobileNav();
+});
+
 /**
  * Refresh energy state from the server at a fixed interval.
  * Keeps client-side countdown in sync with the authoritative server.