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/partials/sidebar_npcs.html

@@ -1,14 +1,15 @@
 {#
 NPCs Accordion Content
 Shows NPCs at current location with click to chat
+Uses responsive navigation: modals on desktop, full pages on mobile
 #}
 {% if npcs %}
 <div class="npc-list">
     {% for npc in npcs %}
     <div class="npc-item"
-         hx-get="{{ url_for('game.npc_chat_modal', session_id=session_id, npc_id=npc.npc_id) }}"
-         hx-target="#modal-container"
-         hx-swap="innerHTML">
+         data-npc-id="{{ npc.npc_id }}"
+         onclick="navigateResponsive(event, '{{ url_for('game.npc_chat_page', session_id=session_id, npc_id=npc.npc_id) }}', '{{ url_for('game.npc_chat_modal', session_id=session_id, npc_id=npc.npc_id) }}')"
+         style="cursor: pointer;">
         <div class="npc-name">{{ npc.name }}</div>
         <div class="npc-role">{{ npc.role }}</div>
         <div class="npc-appearance">{{ npc.appearance }}</div>