Phone PWA: no backdrop blurs over video, cap auto quality at 480p on touch phones

frontend/app.js

@@ -3032,9 +3032,13 @@ function chooseQuality() {
     const match = qs.find((q) => q.label === pref);
     if (match) return match;
   }
-  // auto: best quality at or below 720p, else the lowest available.
+  // auto: best quality at or below 720p (480p on touch phones, where a lossy
+  // link rebuffers the picture while the separate audio keeps playing),
+  // else the lowest available.
+  let cap = 720;
+  try { if (matchMedia('(pointer: coarse)').matches && Math.min(screen.width, screen.height) < 600) cap = 480; } catch {}
   const sorted = [...qs].sort((a, b) => b.height - a.height);
-  return sorted.find((q) => q.height <= 720) || sorted[sorted.length - 1];
+  return sorted.find((q) => q.height <= cap) || sorted[sorted.length - 1];
 }
 
 function buildQualityMenu() {

frontend/styles.css

@@ -2267,6 +2267,13 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
   .player-pane:not(.empty) .player-stage {
     box-shadow: 0 0 0 1px var(--line) inset;
   }
+  /* The per-layout themes (html[data-layout=...] .topbar etc.) out-rank the
+   * rules above and bring 20px blurs back over the playing video, as do the
+   * lyrics bar buttons and section rail. Nothing on a phone PWA may blur. */
+  *, *::before, *::after {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
 }
 
 /* ============================================================================