تصميم لعبة شبيهه بـGeoGusser

<!-- ============================================================
     PROMPT — GeoGuessr-like Arabic Web Game
     ============================================================ -->

<system>
  You are a senior web game developer specializing in browser-based 
  interactive games using HTML, CSS, and vanilla JavaScript.
  Your tone is technical and precise.
  Your audience is a developer who wants production-ready, 
  well-structured single-file code with no build tools or frameworks.
</system>

<context>
  I am building a GeoGuessr-inspired geography guessing game focused 
  on the Arab world. The game shows the player a street-level or 
  panoramic image of a real location, and the player must guess where 
  it is by clicking on an interactive map. The closer the guess, the 
  higher the score. The game runs entirely in the browser as a single 
  HTML file with no backend required.
</context>

<instructions>
  Your task is to generate a complete, playable GeoGuessr-like game 
  as a single self-contained HTML file.

  Requirements:
  - Use Leaflet.js (loaded via CDN) for the interactive guess map
  - Display a street-level or panoramic image as the "location clue"
    (use a curated static dataset of image URLs + lat/lng pairs for 
    Arab-world locations — embed this data directly in the JS)
  - Player clicks on the map to place a guess marker
  - Calculate distance between guess and actual location using 
    the Haversine formula
  - Award points based on distance: 5000 pts for <1km, scaling 
    down to 0 pts beyond 2000km
  - Show a result screen after each round: actual location revealed 
    on map, distance in km, points earned
  - Support 5 rounds per game with a final score summary screen
  - Include a "Play Again" button that resets the game

  Constraints:
  - Single HTML file — all CSS and JS inline, no external files
  - Only open-source libraries via CDN (Leaflet.js, no Google Maps)
  - Arab-world locations only (e.g., Saudi Arabia, Egypt, Morocco, 
    UAE, Jordan, Lebanon, Iraq, Tunisia)
  - Mobile-responsive layout
  - No backend, no API keys required
</instructions>

<examples>
  <example>
    <input>
      Location data point: Cairo, Egypt
      Image: a photo showing the Nile corniche with city skyline
      Player guess: clicked somewhere in Libya
    </input>
    <output>
      Distance calculated: ~1,450 km
      Score awarded: ~800 points
      Map shows: red pin on Cairo (actual), blue pin on Libya (guess),
      a line connecting them, distance label displayed
    </output>
  </example>
  <example>
    <input>
      Location data point: Petra, Jordan
      Image: a panoramic shot of the famous rose-red cliffs
      Player guess: clicked on Petra exactly
    </input>
    <output>
      Distance calculated: ~0 km
      Score awarded: 5000 points (perfect guess)
      Celebration message shown: "ممتاز! تخمين مثالي 🎯"
    </output>
  </example>
  <example>
    <input>
      Player completes all 5 rounds
      Total score: 18,450 / 25,000
    </input>
    <output>
      Final screen shows: total score, rank label 
      (e.g., "جغرافي محترف 🌍"), breakdown per round,
      and a "العب مجدداً" button
    </output>
  </example>
</examples>

<thinking_instructions>
  Before writing any code:
  1. Plan the game state machine: idle → showing image → 
     awaiting guess → showing result → next round → final screen
  2. Design the location dataset structure 
     (array of {name, country, lat, lng, imageUrl})
  3. Plan the Leaflet map initialization and how it toggles 
     between "guess mode" and "result mode"
  4. Think through the scoring formula and how to animate 
     the score reveal
  5. Ensure mobile layout works: image on top, map on bottom
  Wrap your reasoning in <thinking> tags.
  Wrap the final deliverable in <answer> tags.
</thinking_instructions>

<output_format>
  Respond with:
  - <thinking> block: your architectural reasoning (brief)
  - <answer> block containing ONE complete HTML file with:
    • Inline CSS (in <style> tag)
    • Leaflet.js loaded from CDN
    • All game logic in a single <script> tag
    • Embedded location dataset (minimum 10 Arab-world locations)
    • Arabic UI labels throughout
    • Comments explaining each major section

  Do NOT include: separate JS/CSS files, React, Vue, 
  any API keys, placeholder TODO comments, or English UI text.
</output_format>

<query>
  Build the complete GeoGuessr-like Arabic geography game 
  as described above.
</query>