Relocate A/B button positions in portrait layout

style.css

@@ -203,33 +203,50 @@ html, body {
 
 /* ── PORTRAIT: two panels fixed at bottom ── */
 @media (orientation: portrait) {
+
   #gba-left, #gba-right {
     position: fixed;
     bottom: 0;
     height: clamp(110px, 22vw, 148px);
-    width: 55%
     flex-direction: row;
     border-top: 2px solid rgba(120,80,255,.35);
   }
-  #gba-left  { left: 0; width: 60%; justify-content: space-evenly; align-items: center; padding: 0 8px max(8px,var(--safe-bottom)) clamp(8px,3vw,20px); }
-  #gba-right { right: 0; width: 40%; justify-content: center; padding: 0 clamp(8px,3vw,20px) max(8px,var(--safe-bottom)) 8px; }
-  #gba-left .gba-mid-btns { flex-direction: column; gap: 6px; margin-top: 0; width: auto; }
+
+  #gba-left {
+    left: 0;
+    width: 52%;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 0 8px max(8px, var(--safe-bottom)) clamp(8px, 3vw, 20px);
   }
 
-@media (orientation: portrait) {
+  #gba-right {
+    right: 0;
+    width: 48%;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0 clamp(8px, 3vw, 20px) max(8px, var(--safe-bottom)) 8px;
+  }
+
+  #gba-left .gba-mid-btns {
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 0;
+    width: auto;
+  }
 
   .ab-cluster {
-    position: relative;
+    transform: translateX(-18px);
   }
 
   .ab-b {
-    left: -35% !important;
-    bottom: 25% !important;
+    left: -20%;
+    bottom: 22%;
   }
 
   .ab-a {
-    right: -20% !important;
-    top: 10% !important;
+    right: -10%;
+    top: 12%;
   }
 }