Fix landscape layout: panels inside #app flex row so screen is centered between them

index.html

@@ -198,31 +198,29 @@
     </div>
   </div>
 
+  <div id="gba-left" class="gba-controller hidden">
+    <div class="dpad" id="dpad">
+      <button class="dpad-btn dpad-up"    id="dp-up"    aria-label="Up">▲</button>
+      <button class="dpad-btn dpad-left"  id="dp-left"  aria-label="Left">◀</button>
+      <button class="dpad-btn dpad-center"               aria-label="Center"></button>
+      <button class="dpad-btn dpad-right" id="dp-right" aria-label="Right">▶</button>
+      <button class="dpad-btn dpad-down"  id="dp-down"  aria-label="Down">▼</button>
+    </div>
+    <div class="gba-mid-btns">
+      <button class="gba-mid-btn" id="btn-select">SELECT</button>
+      <button class="gba-mid-btn" id="btn-start">START</button>
+    </div>
+  </div>
+
+  <div id="gba-right" class="gba-controller hidden">
+    <div class="ab-cluster">
+      <button class="ab-btn ab-b" id="btn-b">B</button>
+      <button class="ab-btn ab-a" id="btn-a">A</button>
+    </div>
+  </div>
+
 </div><!-- /#app -->
 
-<!-- ═══ GBA CONTROLLER OVERLAY ═══════════════════════════════
-     Shown over map + battle screens. Hidden on all others.    -->
-<div id="gba-left" class="gba-controller hidden">
-  <div class="dpad" id="dpad">
-    <button class="dpad-btn dpad-up"    id="dp-up"    aria-label="Up">▲</button>
-    <button class="dpad-btn dpad-left"  id="dp-left"  aria-label="Left">◀</button>
-    <button class="dpad-btn dpad-center"               aria-label="Center"></button>
-    <button class="dpad-btn dpad-right" id="dp-right" aria-label="Right">▶</button>
-    <button class="dpad-btn dpad-down"  id="dp-down"  aria-label="Down">▼</button>
-  </div>
-  <div class="gba-mid-btns">
-    <button class="gba-mid-btn" id="btn-select">SELECT</button>
-    <button class="gba-mid-btn" id="btn-start">START</button>
-  </div>
-</div>
-
-<div id="gba-right" class="gba-controller hidden">
-  <div class="ab-cluster">
-    <button class="ab-btn ab-b" id="btn-b">B</button>
-    <button class="ab-btn ab-a" id="btn-a">A</button>
-  </div>
-</div>
-
 <div id="toast" class="toast hidden"></div>
 <script src="game.js"></script>
 </body>