Fix responsive layout for narrow phones and landscape mode

- Fleet building: cap max-width to viewport width on narrow screens
- Transfer panel: use min(180px, 35vh) to adapt to short viewports
- Landscape: compact HUD bar padding, font, gap, and button height
  when viewport height is under 560px

Author: rgilks

docs/PLAYABILITY.md

@@ -38,6 +38,7 @@ Resize to 375x812 or use a phone:
 8. **Touch language** — status messages say "Tap" not "Click", no "(Enter)" hints
 9. **Burn markers** — direction circles have no 1-6 number labels
 10. **Help overlay** — shows "Tap ship/arrow/enemy", no keyboard shortcuts
+11. **Landscape** — rotate to landscape; HUD bars compact, canvas area usable
 
 ## Combat Test (2 minutes)
 

static/style.css

@@ -1442,6 +1442,27 @@ body::before {
 }
 
 @media (max-height: 560px) {
+  .hud-bar {
+    padding: 0.25rem 0.6rem;
+    gap: 0.1rem 0.5rem;
+    font-size: 0.62rem;
+  }
+
+  .hud-bottom {
+    bottom: calc(0.4rem + var(--safe-bottom));
+    gap: 0.3rem;
+  }
+
+  .hud-bottom .btn {
+    min-height: 40px;
+    font-size: 0.7rem;
+  }
+
+  .status-msg {
+    padding: 0.3rem 0.6rem;
+    font-size: 0.7rem;
+  }
+
   .ship-list {
     top: auto;
     bottom: calc(var(--hud-bottom-offset) + 0.35rem);
@@ -1455,10 +1476,6 @@ body::before {
     max-height: min(25vh, 140px);
   }
 
-  .hud-bottom {
-    bottom: calc(0.55rem + var(--safe-bottom));
-  }
-
   .help-btn {
     top: calc(var(--hud-top-offset) + 0.25rem);
     bottom: auto;
@@ -1478,7 +1495,7 @@ body::before {
 
 /* Fleet building */
 .fleet-building-content {
-  max-width: 28rem;
+  max-width: min(28rem, calc(100vw - 2.5rem));
   max-height: 90vh;
   overflow-y: auto;
 }
@@ -1686,7 +1703,7 @@ body::before {
 /* Logistics Transfer Panel */
 .transfer-panel {
   padding: 6px 10px;
-  max-height: 180px;
+  max-height: min(180px, 35vh);
   overflow-y: auto;
 }
 .transfer-pair {