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;