Add landscape layout with D-pad left panel and A/B right panel flanking the screen

style.css

@@ -272,6 +272,7 @@ html, body {
   -webkit-tap-highlight-color: transparent;
   transition: background .08s;
   min-width: 52px;
+  width: 52px;
   text-align: center;
 }
 .gba-mid-btn:active { background: #3d2f99; }
@@ -674,3 +675,60 @@ html, body {
 /* ─── TOAST ──────────────────────────────────────────────── */
 .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 ─ */
+@media (orientation: portrait) {
+  #gba-left, #gba-right {
+    position: fixed; bottom: 0; height: clamp(110px, 22vw, 148px);
+    flex-direction: row; align-items: center;
+    border-top: 2px solid rgba(120,80,255,.35); border-left: none; border-right: none;
+    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  { left: 0; width: 60%; justify-content: flex-start; padding: 0 8px 0 clamp(8px,3vw,20px); gap: 8px; }
+  #gba-right { right: 0; width: 40%; justify-content: flex-end; padding: 0 clamp(8px,3vw,20px) 0 8px; }
+  #gba-left .gba-mid-btns { flex-direction: row; }
+}
+
+/* ─── LANDSCAPE CONTROLLER LAYOUT ───────────────────────── */
+@media (orientation: landscape) and (max-height: 500px) {
+  html, body { align-items: flex-start; justify-content: flex-start; }
+
+  #app {
+    width: 100vw; height: 100dvh;
+    border: none; border-radius: 0; box-shadow: none;
+    display: flex; flex-direction: row; align-items: stretch;
+  }
+
+  .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;
+    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;
+  }
+
+  .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);
+  }
+
+  .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; }
+}