Update app.py

app.py

@@ -628,10 +628,41 @@ css = """
 
 /* Mobile responsive styles */
 @media (max-width: 768px) {
-    .main-row { flex-direction: column !important; }
-    .main-row > div { width: 100% !important; max-width: 100% !important; flex: none !important; }
-    .controls-column { min-width: unset; margin-top: 12px; }
+    .main-row { 
+        flex-direction: column !important; 
+    }
+    .main-row > div { 
+        width: 100% !important; 
+        max-width: 100% !important; 
+        flex: none !important; 
+    }
+    .controls-column { 
+        min-width: unset; 
+        margin-top: 12px; 
+    }
     #video-output { max-width: 100%; }
+    
+    /* On mobile, flatten the game-column children and reorder */
+    .game-column {
+        display: contents !important;
+    }
+    
+    /* Make the main-row handle all ordering */
+    .main-row {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+    
+    /* Order: video-output wrapper (1), button-row (2), controls-column (3), world-accordion (4) */
+    .main-row #video-output { order: 1 !important; }
+    .main-row .button-row { order: 2 !important; width: 100% !important; }
+    .main-row .controls-column { order: 3 !important; }
+    .main-row .world-accordion { order: 4 !important; width: 100% !important; }
+    
+    /* Ensure proper spacing */
+    .main-row > * {
+        margin-bottom: 8px;
+    }
 }
 """
 
@@ -661,7 +692,7 @@ def create_app():
         """)
 
         with gr.Row(elem_classes=["main-row"]):
-            with gr.Column(scale=2):
+            with gr.Column(scale=2, elem_classes=["game-column"]):
                 video_output = gr.Image(
                     label="Game View",
                     elem_id="video-output",
@@ -670,11 +701,11 @@ def create_app():
                     height=360,
                     show_label=False,
                 )
-                with gr.Row():
+                with gr.Row(elem_classes=["button-row"]):
                     start_btn = gr.Button("🎮 Start Game", variant="primary")
                     stop_btn = gr.Button("⏹ End Game", interactive=False)
 
-                with gr.Accordion("World Selection", open=True):
+                with gr.Accordion("World Selection", open=True, elem_classes=["world-accordion"]):
                     gr.Markdown("**Choose a starting world** (or leave blank for random):")
                     
                     # Gallery for world selection
@@ -712,8 +743,6 @@ def create_app():
                     lines=2,
                 )
 
-                
-
                 frame_display = gr.Number(label="Frame", value=0, interactive=False)
 
         # --- Event Handlers ---