Combat foundation complete

public_web/templates/game/partials/monster_modal.html

@@ -0,0 +1,53 @@
+{#
+Monster Selection Modal
+Shows random encounter options for the current location
+#}
+<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
+    <div class="modal-content monster-modal">
+        <div class="modal-header">
+            <h3 class="modal-title">⚔️ Search for Monsters</h3>
+            <button class="modal-close" onclick="closeModal()">&times;</button>
+        </div>
+        <div class="modal-body">
+            <p class="monster-modal-location">
+                Searching near <strong>{{ location_name }}</strong>...
+            </p>
+            {% if encounters %}
+            <div class="encounter-options">
+                {% for enc in encounters %}
+                <button class="encounter-option encounter-option--{{ enc.challenge|lower }}"
+                        hx-post="{{ url_for('game.start_combat', session_id=session_id) }}"
+                        hx-vals='{"enemy_ids": {{ enc.enemies|tojson }}}'
+                        hx-target="closest .modal-overlay"
+                        hx-swap="outerHTML">
+                    <div class="encounter-info">
+                        <div class="encounter-name">{{ enc.display_name }}</div>
+                        <div class="encounter-enemies">
+                            {% for name in enc.enemy_names %}
+                            <span class="enemy-badge">{{ name }}</span>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    <div class="encounter-challenge challenge--{{ enc.challenge|lower }}">
+                        {{ enc.challenge }}
+                    </div>
+                </button>
+                {% endfor %}
+            </div>
+            <p class="monster-modal-hint">
+                <small>Select an encounter to begin combat. Challenge level indicates difficulty.</small>
+            </p>
+            {% else %}
+            <div class="encounter-empty">
+                <p>No monsters found in this area.</p>
+                <p><small>Try exploring somewhere more dangerous!</small></p>
+            </div>
+            {% endif %}
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-secondary" onclick="closeModal()">
+                Cancel
+            </button>
+        </div>
+    </div>
+</div>