diff --git a/public/index.html b/public/index.html
index af7f11e1..91c8e1d1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
-
+
diff --git a/public/live.css b/public/live.css
index 08ddd524..a8510517 100644
--- a/public/live.css
+++ b/public/live.css
@@ -619,14 +619,25 @@
/* Mobile VCR */
@media (max-width: 640px) {
- .vcr-bar { padding: 4px 6px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; }
- .vcr-btn { padding: 6px 8px; font-size: 0.8rem; min-height: 44px; min-width: 44px; }
- .vcr-scope-btns { gap: 1px; }
- .vcr-scope-btn { font-size: 0.65rem; padding: 4px 6px; min-height: 36px; }
- .vcr-lcd { display: flex; }
- .vcr-mode { font-size: 0.65rem; padding: 2px 6px; }
- .vcr-timeline-container { min-width: 60px; }
- .vcr-prompt { font-size: 0.7rem; }
+ /* Mobile VCR: two-row stacked layout */
+ .vcr-bar {
+ padding: 4px 8px;
+ flex-wrap: wrap;
+ gap: 4px;
+ overflow: visible;
+ }
+ /* Row 1: controls + scope + LCD, all in one line */
+ .vcr-controls { order: 1; flex-shrink: 0; gap: 4px; }
+ .vcr-scope-btns { order: 2; flex-shrink: 0; gap: 1px; }
+ .vcr-lcd { order: 3; display: flex; margin-left: auto; min-width: 90px; padding: 2px 6px; }
+ .vcr-lcd-canvas { width: 100px; height: 22px; }
+ .vcr-mode { display: none; }
+ /* Row 2: timeline takes full width */
+ .vcr-timeline-container { order: 4; width: 100%; flex: none; height: 20px; }
+ /* Smaller buttons */
+ .vcr-btn { padding: 4px 8px; font-size: 0.75rem; min-height: 32px; min-width: 32px; }
+ .vcr-scope-btn { font-size: 0.6rem; padding: 2px 6px; min-height: 28px; }
+ .vcr-prompt { order: 5; width: 100%; font-size: 0.7rem; }
}
/* Timeline time tooltip */