feat(web): implement responsive modal pattern for mobile-friendly NPC chat

- Add hybrid modal/page navigation based on screen size (1024px breakpoint)
- Desktop (>1024px): Uses modal overlays for quick interactions
- Mobile (≤1024px): Navigates to dedicated full pages for better UX
- Extract shared NPC chat content into reusable partial template
- Add responsive navigation JavaScript (responsive-modals.js)
- Create dedicated NPC chat page route with back button navigation
- Add mobile-optimized CSS with sticky header and chat input
- Fix HTMX indicator errors by using htmx-indicator class pattern
- Document responsive modal pattern for future features

Addresses mobile UX issues: cramped space, nested scrolling, keyboard conflicts,
and lack of native back button support in modals.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public_web/templates/game/npc_chat_page.html

@@ -0,0 +1,44 @@
+{% extends "base.html" %}
+
+{% block title %}{{ npc.name }} - Code of Conquest{% endblock %}
+
+{% block extra_head %}
+<!-- Play screen styles for NPC chat -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/play.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="npc-chat-page">
+    {# Page Header with Back Button #}
+    <div class="npc-chat-header">
+        <a href="{{ url_for('game.play_session', session_id=session_id) }}" class="npc-chat-back-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M19 12H5M12 19l-7-7 7-7"/>
+            </svg>
+            Back
+        </a>
+        <h1 class="npc-chat-title">{{ npc.name }}</h1>
+    </div>
+
+    {# Include shared NPC chat content #}
+    {% include 'game/partials/npc_chat_content.html' %}
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+// Clear chat input after submission
+document.body.addEventListener('htmx:afterSwap', function(e) {
+    if (e.target.closest('.chat-history')) {
+        const form = document.querySelector('.chat-input-form');
+        if (form) {
+            const input = form.querySelector('.chat-input');
+            if (input) {
+                input.value = '';
+                input.focus();
+            }
+        }
+    }
+});
+</script>
+{% endblock %}