diff --git a/index.html b/index.html
index 9ec237c..f95c4a4 100644
--- a/index.html
+++ b/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>
diff --git a/style.css b/style.css
index dc289ea..fbb1c1f 100644
--- a/style.css
+++ b/style.css
@@ -676,7 +676,7 @@ html, body {
 .toast { position:absolute; bottom:max(20px,var(--safe-bottom)); left:50%; transform:translateX(-50%); background:var(--dark-bg); border:3px solid var(--yellow); color:var(--yellow); font-family:var(--font); font-size:clamp(6.5px,1.8vw,8px); padding:10px 18px; z-index:950; animation:slideUp .3s ease; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; }
 .hidden { display:none !important; }
 
-/* ─── PORTRAIT: left panel has dpad+mid, right panel has ab ─ */
+/* ─── PORTRAIT: panels fixed at bottom ───────────────────── */
 @media (orientation: portrait) {
   #gba-left, #gba-right {
     position: fixed; bottom: 0; height: clamp(110px, 22vw, 148px);
@@ -702,33 +702,37 @@ html, body {
 
   .screen { position: relative; flex: 1; inset: auto; height: 100dvh; overflow: hidden; min-width: 0; }
 
-  .gba-controller {
-    position: relative;
-    height: 100dvh; width: clamp(100px, 20vw, 140px);
-    bottom: auto; left: auto; right: auto;
+  #gba-left, #gba-right {
+    position: relative !important;
+    bottom: auto !important; left: auto !important; right: auto !important;
+    height: 100dvh; width: clamp(100px, 18vw, 140px);
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-top: none;
-    padding: 8px max(6px, env(safe-area-inset-left, 0px)) 8px 6px;
     gap: 8px;
     flex-shrink: 0;
+    background: linear-gradient(180deg, rgba(26,10,62,.82) 0%, rgba(14,6,36,.95) 100%);
+    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
+  }
+
+  #gba-left  {
+    order: -1;
+    border-right: 2px solid rgba(120,80,255,.35);
+    border-left: none; border-top: none;
+    padding: 8px 8px 8px max(8px, env(safe-area-inset-left, 0px));
+  }
+  #gba-right {
+    order: 1;
+    border-left: 2px solid rgba(120,80,255,.35);
+    border-right: none; border-top: none;
+    padding: 8px max(8px, env(safe-area-inset-right, 0px)) 8px 8px;
   }
 
   .gba-controller.hidden { display: none; }
 
-  .dpad {
-    width:  clamp(72px, 16vh, 100px);
-    height: clamp(72px, 16vh, 100px);
-  }
-  .ab-cluster {
-    width:  clamp(72px, 16vh, 100px);
-    height: clamp(72px, 16vh, 100px);
-  }
-
+  .dpad        { width: clamp(72px, 16vh, 100px); height: clamp(72px, 16vh, 100px); }
+  .ab-cluster  { width: clamp(72px, 16vh, 100px); height: clamp(72px, 16vh, 100px); }
   .gba-mid-btns { flex-direction: column; gap: 5px; }
-  .gba-mid-btn { min-width: 44px; width: 44px; font-size: 5px; padding: 6px 4px; }
-
-  #gba-right { border-left: 2px solid rgba(120,80,255,.35); border-right: none; padding: 8px 6px 8px max(6px, env(safe-area-inset-right, 0px)); }
-  #gba-left  { border-right: 2px solid rgba(120,80,255,.35); border-left: none; }
+  .gba-mid-btn  { min-width: 44px; width: 44px; font-size: 5px; padding: 6px 4px; }
 }