Unify AudioPlayerBar to one responsive CSS layout and fix SpectrumVisualizer startup via StateChanged subscription

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

@@ -71,3 +71,30 @@
         height: 160px;
     }
 }
+
+/* Unified responsive player layout.
+   Wide and narrow shapes are pure CSS — no runtime breakpoint subscription.
+   Children are targeted by their stable classes (transport-zone, volume-controls,
+   seek-zone) rather than positional nth-child, since all three render a .mud-stack
+   root and positional selectors would be fragile. */
+.player-layout {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding-right: 2.5rem; /* clear the abs-positioned PlayerWindowControls */
+}
+
+/* Wide (>= 600px): single row, seek zone grows and sits between transport and volume */
+@media (min-width: 600px) {
+    ::deep .transport-zone { order: 1; }
+    ::deep .seek-zone { order: 2; flex-grow: 1; flex-basis: 0; }
+    ::deep .volume-controls { order: 3; }
+}
+
+/* Narrow (< 600px): transport + volume on top row, seek full-width below */
+@media (max-width: 599.98px) {
+    ::deep .transport-zone { order: 1; }
+    ::deep .volume-controls { order: 2; }
+    ::deep .seek-zone { flex-basis: 100%; order: 3; }
+}