feat: Follow-up: add portrait orientation design for mobile that only triggers in portrait pwa mode

Task #43 completed by ClaudeQueue

ClaudeQueue

frontend/styles.css

@@ -1755,3 +1755,24 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   .ph-logo { width: 68px; height: 68px; font-size: 26px; }
   .hero-tagline { font-size: 13px; }
 }
+
+/* ============================================================================
+ * PORTRAIT PWA — JS-class mirror (.portrait-pwa on .app)
+ *
+ * The JS layer (setupPortraitPwaWatcher in app.js) adds / removes
+ * `.portrait-pwa` on `.app` whenever the media query fires, giving a CSS hook
+ * that works inside JS-conditional code paths (e.g. scroll position checks,
+ * layout reads) without re-evaluating matchMedia inline.
+ *
+ * These selectors intentionally duplicate nothing from the @media block above
+ * — they only fill gaps that require the JS class (e.g. interaction states
+ * that can't be expressed purely with CSS media queries).
+ * ========================================================================== */
+.portrait-pwa .body {
+  /* Reinforce scroll snapping so the player stays at the viewport top after
+     JS scrolls to it; helps on iOS Safari where scroll restoration can fight. */
+  scroll-snap-type: y proximity;
+}
+.portrait-pwa .player-pane {
+  scroll-snap-align: start;
+}