diff --git a/css/style.css b/css/style.css
index 1a3048d..20f2fec 100644
--- a/css/style.css
+++ b/css/style.css
@@ -238,17 +238,17 @@ body {
 }
 
 /* On narrow screens, switch to horizontal scrolling so all 6 tabs stay
-   on a single row instead of breaking into a tall stack. !important is
-   used defensively here — any cached older CSS or future style overrides
-   shouldn't be able to bring back the wrapped layout on phones. */
+   on a single row instead of breaking into a tall stack. */
 @media (max-width: 720px) {
     .main-nav {
+        display: flex !important;
         flex-wrap: nowrap !important;
         overflow-x: auto !important;
         overflow-y: hidden !important;
         scroll-snap-type: x proximity;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
+        grid-template-columns: none !important;
         gap: 4px !important;
         padding: 6px !important;
     }
@@ -263,6 +263,7 @@ body {
         scroll-snap-align: start;
         padding: 10px 14px !important;
         font-size: 0.88rem !important;
+        grid-column: auto !important;
     }
 }
 
@@ -3257,34 +3258,13 @@ select {
         transform: translateX(16px);
     }
 
-    /* Navigation - grid layout for mobile */
+    /* Mobile navigation tweaks — horizontal-scroll layout is defined at the
+       top of this file (@media max-width: 720px). Here we only adjust the
+       outer margin for the smaller breakpoint. */
     .main-nav {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 4px;
-        padding: 6px;
         margin-bottom: 12px;
     }
 
-    .nav-btn {
-        padding: 10px 6px;
-        font-size: 0.75rem;
-        text-align: center;
-        min-width: 0;
-        flex: none;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    /* Make settings button span 2 columns for 5 items grid */
-    .nav-btn:nth-child(4) {
-        grid-column: 1 / 2;
-    }
-    .nav-btn:nth-child(5) {
-        grid-column: 2 / 4;
-    }
-
     .panel {
         padding: 12px;
         border-radius: var(--radius-md);
@@ -3873,20 +3853,9 @@ select {
         font-size: 1rem;
     }
 
-    .main-nav {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px;
-    }
-
-    /* Adjust nav buttons for 2-column grid */
-    .nav-btn:nth-child(5) {
-        grid-column: 1 / 3;
-    }
-
-    .nav-btn {
-        padding: 10px 4px;
-        font-size: 0.7rem;
-    }
+    /* Mobile nav layout is defined in the top-level @media (max-width: 720px)
+       — horizontal scroll with nowrap. We don't need to redefine it for
+       480px; everything inherits. */
 
     .panel {
         padding: 10px;
@@ -3947,9 +3916,11 @@ select {
         font-size: 0.9rem;
     }
 
+    /* Keep nav button text readable even on tiny phones, but smaller than
+       720px breakpoint. */
     .nav-btn {
-        font-size: 0.65rem;
-        padding: 8px 2px;
+        font-size: 0.78rem !important;
+        padding: 9px 11px !important;
     }
 
     .panel {
@@ -4005,14 +3976,7 @@ select {
 
 /* Landscape phones */
 @media (max-width: 768px) and (orientation: landscape) {
-    .main-nav {
-        grid-template-columns: repeat(5, 1fr);
-    }
-
-    .nav-btn:nth-child(4),
-    .nav-btn:nth-child(5) {
-        grid-column: auto;
-    }
+    /* Navigation uses the horizontal-scroll layout from the 720px block. */
 
     .floating-action-bar {
         bottom: 6px;