mobile phone resolution media player

assets/static/css/theme.css

@@ -95,10 +95,13 @@
 }
 
 /* === 3. Terminal look & feel ================================ */
+/* Root font-size drives every rem in this file and in app.css.
+ * Bump this to scale the whole UI; drop to shrink. */
+html { font-size: 19px; }
 body {
   font-family: "JetBrains Mono", "Cascadia Code", "Fira Code",
     ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-  font-size: 15px;
+  font-size: 1rem;
   line-height: 1.6;
 }
 
@@ -529,13 +532,36 @@ body {
 .uw-queue-remove:hover { color: oklch(var(--er)); border-color: oklch(var(--er)); }
 
 @media (max-width: 640px) {
+  /* Two-row layout: [title][prev][next][queue][close] on top,
+   * full-width <audio> scrubber underneath. */
   .uw-player-tag { display: none; }
-  .uw-player-title { max-width: 7rem; font-size: 0.95rem; }
-  .uw-player-inner { padding: 0.75rem 0.95rem; gap: 0.6rem; }
-  .uw-playing body { padding-bottom: 5.75rem; }
-  .uw-player-btn { min-width: 2.4rem; height: 2.4rem; padding: 0 0.4rem; font-size: 0.95rem; }
-  .uw-player-close { width: 2.4rem; height: 2.4rem; }
-  #uw-audio { height: 2.7rem; min-width: 7rem; }
+  .uw-player-inner {
+    flex-wrap: wrap;
+    padding: 0.6rem 0.75rem;
+    gap: 0.4rem;
+    row-gap: 0.5rem;
+  }
+  .uw-player-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: none;
+    font-size: 0.95rem;
+  }
+  .uw-player-btn {
+    min-width: 2.2rem;
+    height: 2.2rem;
+    padding: 0 0.35rem;
+    font-size: 0.9rem;
+  }
+  .uw-player-close { width: 2.2rem; height: 2.2rem; font-size: 0.95rem; }
+  #uw-audio {
+    order: 99;
+    flex: 1 1 100%;
+    width: 100%;
+    min-width: 0;
+    height: 2.4rem;
+  }
+  .uw-playing body { padding-bottom: 8.25rem; }
   .uw-queue-head, .uw-queue-item { padding-left: 0.95rem; padding-right: 0.95rem; }
 }