mobile: responsive layout, touch-friendly progress bar, collapsible filters

- Add mobile breakpoints (860px/520px) with compact header, full-width sidebar overlay,
  flexible search bar, and adaptive toolbar.
- Player now spans full width on mobile and has reduced stage height.
- Progress bar gains touch-drag support (touchstart/move/end) for mobile seeking.
- Collapse advanced filters (tags/duration/filesize) behind a 'Filters' toggle to keep
  the default toolbar KISS. Only type and favorites remain always visible.

1 files changed, 19 insertions, 1 deletions

diff --git a/web/css/player.css b/web/css/player.css
index 3221042..706667d 100644
--- a/web/css/player.css
+++ b/web/css/player.css
@@ -97,7 +97,25 @@
   transform: translate(-50%, -50%) scale(1);
 }
 
-/* Volume */
+/* Touch-friendly progress bar */
+.progress-track {
+  touch-action: none;
+}
+
+@media (max-width: 520px) {
+  .player .controls {
+    gap: 0.35rem;
+    padding: 0.4rem 0.5rem;
+  }
+  .volume-slider {
+    width: 3.5rem;
+  }
+  .big-play .play-icon {
+    width: 2.8rem;
+    height: 2.8rem;
+    font-size: 1rem;
+  }
+}
 .volume-control {
   display: flex;
   align-items: center;