diff --git a/frontend/styles.css b/frontend/styles.css
index db4d21a..1554c9f 100755
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -603,6 +603,18 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 .seek { flex: 1; }
 
 .btn-row { display: flex; align-items: center; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
+
+/* The five transport buttons stay together, in transport order, at EVERY width.
+   They are scattered through the markup (shuffle/loop/repeat sit after the tool
+   buttons), so without this they only group where a media query said so — which
+   left shuffle and repeat stranded among the tools on anything wider than a
+   phone. Tools take order 7; the mobile blocks add a forced line break at 6. */
+#shuffleBtn { order: 1; }
+#prevBtn    { order: 2; }
+#playBtn    { order: 3; }
+#nextBtn    { order: 4; }
+#repeatBtn  { order: 5; }
+.btn-row > *:not(#shuffleBtn):not(#prevBtn):not(#playBtn):not(#nextBtn):not(#repeatBtn) { order: 7; }
 .ctrl {
   background: var(--bg-3);
   border: 1px solid var(--line);