step 9.4: done

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>