Update app.py

app.py

@@ -146,12 +146,33 @@ with gr.Blocks(css="""
     #guess-section {
         margin-top: 50px;  /* Add vertical space before the "Your Guess" section */
     }
+    /* Add responsive behavior for mobile devices */
+    @media only screen and (max-width: 768px) {
+        .gr-blocks {
+            padding: 10px;
+        }
+        .gr-row {
+            flex-direction: column;
+        }
+        #feedback {
+            position: relative;
+            top: auto;
+            right: auto;
+            margin-top: 10px;
+        }
+        #guess-section {
+            margin-top: 20px;
+        }
+        button, input {
+            font-size: 16px;
+        }
+    }
 """) as game_interface:
     # Layout with two columns
     with gr.Row():
         with gr.Column(scale=2):  # Left side (main game interface)
-            # Game feedback (top-right corner)
-            guess_output = gr.Markdown("", elem_id="feedback")  # Feedback moved to the top-right corner
+            # Game feedback (top-right corner on desktop, below on mobile)
+            guess_output = gr.Markdown("", elem_id="feedback")  
 
             # Game output (clues and game messages)
             game_info = gr.Markdown("")