fix: Complete mobile button fixes - transparency, color, and layout

Fixes three critical mobile UI issues:

1. Theme Button Transparency (FIXED)
   - Changed theme button from 50% to full opacity on mobile
   - Updated _themes.css with rgba(x, y, z, 1) for all theme modes
   - Added opacity: 1 !important to mobile media query

2. Info Button Color Differentiation (FIXED)
   - Changed info button from green (#27ae60) to blue (#3498db)
   - Now visually distinct from green back-to-top button
   - Updated all states: default, hover, at-bottom

3. Button Layout Reorganization (FIXED)
   - Added .is-mobile-device rules for 5-button layout (no shortcuts)
   - Buttons centered without gap: Download, Print, Theme, Info, Back-to-top
   - Total width: 290px (5 buttons + 4 gaps) vs 350px (6 buttons)

Files modified:
- static/css/01-foundation/_themes.css - Primary theme button fix
- static/css/04-interactive/_scroll-behavior.css - Info color + layout
- static/css/color-theme.css - Mobile device positioning sync
- tests/mjs/53-final-mobile-fixes-test.mjs - Comprehensive validation

Test results:
✅ Shortcuts hidden on real mobile (iPhone user agent)
✅ 5 buttons evenly spaced with no gap (60px spacing)
✅ Info button blue (52, 152, 219) vs back-to-top green (39, 174, 96)
✅ Theme button full opacity (alpha: 1, opacity: 1)

static/css/04-interactive/_scroll-behavior.css

@@ -96,12 +96,12 @@
     opacity: 1;
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-    background: #27ae60;
+    background: #3498db; /* Blue - different from back-to-top green */
 }
 
 .info-button.at-bottom {
     opacity: 1;
-    background: #27ae60;
+    background: #3498db; /* Blue - different from back-to-top green */
 }
 
 .info-button:active {
@@ -160,7 +160,7 @@
     }
 
     .info-button {
-        background: rgba(39, 174, 96, 1) !important; /* Green - full opacity */
+        background: rgba(52, 152, 219, 1) !important; /* Blue - full opacity, different from back-to-top */
         opacity: 1 !important; /* Override base opacity */
     }
 
@@ -209,6 +209,26 @@
         display: flex !important; /* Ensure it's always displayed */
     }
 
+    /* REAL MOBILE DEVICES: 5 buttons without shortcuts (no gap) */
+    /* Total width: 5 * 50px + 4 * 10px = 290px, start at 50% - 145px */
+    .is-mobile-device .download-btn {
+        left: calc(50% - 145px) !important; /* First button */
+    }
+
+    .is-mobile-device .print-friendly-btn {
+        left: calc(50% - 85px) !important; /* Second button */
+    }
+
+    /* Theme switcher on mobile - third position (see color-theme.css for override) */
+
+    .is-mobile-device .info-button {
+        left: calc(50% + 35px) !important; /* Fourth button */
+    }
+
+    .is-mobile-device .back-to-top {
+        left: calc(50% + 95px) !important; /* Fifth button (last) */
+    }
+
     /* Always show back-to-top on mobile (don't wait for scroll) */
     .back-to-top:hover {
         opacity: 1 !important;
@@ -236,7 +256,7 @@
     }
 
     .info-button:hover {
-        background: rgba(39, 174, 96, 1) !important; /* Full green opacity */
+        background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
         transform: translateY(-3px) !important;
         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
     }
@@ -267,7 +287,7 @@
     }
 
     .info-button.at-bottom {
-        background: rgba(39, 174, 96, 1) !important; /* Full green opacity */
+        background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
         opacity: 1 !important;
         transform: none !important;
     }