move instructions

app.py

@@ -301,8 +301,8 @@ def build_street_html(image_url: str) -> str:
       <div id="mini-map-wrap" style="transition:all 0.3s ease;position:absolute;right:10px;bottom:10px;border:2px solid #fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.2);background:#fff;">
         <div id="mini-map" style="width:100%;height:100%;cursor:pointer"></div>
         <div id="map-controls" style="position:absolute;right:8px;top:8px;display:flex;gap:6px;z-index:5;">
-          <button id="map-size-minus" class="map-ctrl" style="width:34px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.2);background:#f97316;color:#fff;">−</button>
-          <button id="map-size-plus" class="map-ctrl" style="width:34px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.2);background:#f97316;color:#fff;">+</button>
+          <button id="map-size-minus" class="map-ctrl" style="width:34px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.2);background:#f97316;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;padding:0;line-height:0;">−</button>
+          <button id="map-size-plus" class="map-ctrl" style="width:34px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.2);background:#f97316;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;padding:0;line-height:0;">+</button>
         </div>
       </div>
     </div>
@@ -575,15 +575,13 @@ APP_BOOT_JS = """
           if (!btn) return;
           if (!btn.dataset.bound) {
             btn.addEventListener('click', () => {
-              const ov = document.getElementById('popup-overlay');
-              if (ov) ov.remove();
               const nxt = document.getElementById('next_btn');
               if (nxt) nxt.click();
             });
             btn.dataset.bound = '1';
           }
         });
-        window.addEventListener('keydown', (ev) => { if (ev.key === 'Escape') { const ov = document.getElementById('popup-overlay'); if (ov) ov.remove(); const nxt = document.getElementById('next_btn'); if (nxt) nxt.click(); } }, { once: true });
+        window.addEventListener('keydown', (ev) => { if (ev.key === 'Escape') { const nxt = document.getElementById('next_btn'); if (nxt) nxt.click(); } }, { once: true });
         log('Popup map initialized');
       } catch (e) { log('Popup map init error', e); }
     });
@@ -635,15 +633,14 @@ APP_BOOT_JS = """
 with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
     user_profile = gr.State()
 
-    with gr.Row():
-        gr.Markdown("## LLM GeoGuessr", elem_id="title_md")
-        gr.Markdown("""
-        ### How to Play
-        1. **Select a difficulty** and click "Start Game".
-        2. You'll be shown a random Street View image for 3 rounds.
-        3. Place a marker on the mini-map to guess the location.
-        4. Submit your guess and see how your score compares to the AI's!
-        """)
+    gr.Markdown("## LLM GeoGuessr", elem_id="title_md")
+    gr.Markdown("""
+    ### How to Play
+    1. **Select a difficulty** and click "Start Game".
+    2. You'll be shown a random Street View image for 3 rounds.
+    3. Place a marker on the mini-map to guess the location.
+    4. Submit your guess and see how your score compares to the AI's!
+    """)
     
     login_prompt_md = gr.Markdown("### Please log in with your Hugging Face account to play.", visible=True)
     login_button = LoginButton(visible=True)