combat testing and polishing in the dev console, many bug fixes

public_web/templates/game/partials/ability_modal.html

@@ -0,0 +1,61 @@
+{# Ability Selection Modal - Shows available abilities during combat #}
+
+<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
+    <div class="modal-content modal-content--md">
+        <div class="modal-header">
+            <h3 class="modal-title">Select Ability</h3>
+            <button class="modal-close" onclick="closeModal()" aria-label="Close modal">&times;</button>
+        </div>
+        <div class="modal-body">
+            {% if abilities %}
+            <div class="ability-list">
+                {% for ability in abilities %}
+                <button class="ability-btn"
+                        hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
+                        hx-vals='{"action_type": "ability", "ability_id": "{{ ability.id }}"}'
+                        hx-target="#combat-log"
+                        hx-swap="beforeend"
+                        hx-disabled-elt="this"
+                        {% if not ability.available %}disabled{% endif %}
+                        onclick="closeModal()">
+                    <span class="ability-icon">
+                        {% if ability.damage_type == 'fire' %}&#128293;
+                        {% elif ability.damage_type == 'ice' %}&#10052;
+                        {% elif ability.damage_type == 'lightning' %}&#9889;
+                        {% elif ability.effect_type == 'heal' %}&#10084;
+                        {% elif ability.effect_type == 'buff' %}&#11014;
+                        {% elif ability.effect_type == 'debuff' %}&#11015;
+                        {% else %}&#10024;
+                        {% endif %}
+                    </span>
+                    <div class="ability-info">
+                        <span class="ability-name">{{ ability.name }}</span>
+                        <span class="ability-description">{{ ability.description|default('A powerful ability.') }}</span>
+                    </div>
+                    <div class="ability-meta">
+                        {% if ability.mp_cost > 0 %}
+                        <span class="ability-cost">{{ ability.mp_cost }} MP</span>
+                        {% endif %}
+                        {% if ability.cooldown > 0 %}
+                        <span class="ability-cooldown ability-cooldown--active">{{ ability.cooldown }} turns CD</span>
+                        {% elif ability.max_cooldown > 0 %}
+                        <span class="ability-cooldown">{{ ability.max_cooldown }} turns CD</span>
+                        {% endif %}
+                    </div>
+                </button>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="items-empty">
+                <p>No abilities available.</p>
+                <p style="font-size: var(--text-xs); margin-top: 0.5rem; color: var(--text-muted);">
+                    Learn abilities by leveling up or finding skill tomes.
+                </p>
+            </div>
+            {% endif %}
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn--secondary" onclick="closeModal()">Cancel</button>
+        </div>
+    </div>
+</div>

public_web/templates/game/partials/character_panel.html

@@ -82,8 +82,19 @@ Displays character stats, resource bars, and action buttons
         </div>
     </div>
 
-    {# Quick Actions (Equipment, NPC, Travel) #}
+    {# Quick Actions (Inventory, Equipment, NPC, Travel) #}
     <div class="quick-actions">
+        {# Inventory - Opens modal #}
+        <button class="action-btn action-btn--special"
+                hx-get="{{ url_for('game.inventory_modal', session_id=session_id) }}"
+                hx-target="#modal-container"
+                hx-swap="innerHTML"
+                aria-label="Open inventory">
+            <span class="action-icon">&#128188;</span>
+            Inventory
+            <span class="action-count">({{ character.inventory|length|default(0) }})</span>
+        </button>
+
         {# Equipment & Gear - Opens modal #}
         <button class="action-btn action-btn--special"
                 hx-get="{{ url_for('game.equipment_modal', session_id=session_id) }}"

public_web/templates/game/partials/combat_actions.html

@@ -0,0 +1,87 @@
+{# Combat Actions Partial - Action buttons for combat #}
+{# This partial shows the available combat actions #}
+
+{% if is_player_turn %}
+<div class="combat-actions__grid">
+    {# Attack Button - Direct action #}
+    <button class="combat-action-btn combat-action-btn--attack"
+            hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
+            hx-vals='{"action_type": "attack"}'
+            hx-target="#combat-log"
+            hx-swap="beforeend"
+            hx-disabled-elt="this"
+            title="Basic attack with your weapon">
+        <span class="combat-action-btn__icon">&#9876;</span>
+        <span>Attack</span>
+    </button>
+
+    {# Ability Button - Opens modal #}
+    <button class="combat-action-btn combat-action-btn--ability"
+            hx-get="{{ url_for('combat.combat_abilities', session_id=session_id) }}"
+            hx-target="#modal-container"
+            hx-swap="innerHTML"
+            title="Use a special ability or spell">
+        <span class="combat-action-btn__icon">&#10024;</span>
+        <span>Ability</span>
+    </button>
+
+    {# Item Button - Opens bottom sheet #}
+    <button class="combat-action-btn combat-action-btn--item"
+            hx-get="{{ url_for('combat.combat_items', session_id=session_id) }}"
+            hx-target="#combat-sheet-container"
+            hx-swap="innerHTML"
+            title="Use an item from your inventory">
+        <span class="combat-action-btn__icon">&#127863;</span>
+        <span>Item</span>
+    </button>
+
+    {# Defend Button - Direct action #}
+    <button class="combat-action-btn combat-action-btn--defend"
+            hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
+            hx-vals='{"action_type": "defend"}'
+            hx-target="#combat-log"
+            hx-swap="beforeend"
+            hx-disabled-elt="this"
+            title="Take a defensive stance, reducing damage taken">
+        <span class="combat-action-btn__icon">&#128737;</span>
+        <span>Defend</span>
+    </button>
+
+    {# Flee Button - Direct action #}
+    <button class="combat-action-btn combat-action-btn--flee"
+            hx-post="{{ url_for('combat.combat_flee', session_id=session_id) }}"
+            hx-target="body"
+            hx-swap="innerHTML"
+            hx-disabled-elt="this"
+            hx-confirm="Are you sure you want to flee from combat?"
+            title="Attempt to escape from battle">
+        <span class="combat-action-btn__icon">&#127939;</span>
+        <span>Flee</span>
+    </button>
+</div>
+{% else %}
+<div class="combat-actions__grid">
+    {# Disabled buttons when not player's turn #}
+    <button class="combat-action-btn combat-action-btn--attack" disabled>
+        <span class="combat-action-btn__icon">&#9876;</span>
+        <span>Attack</span>
+    </button>
+    <button class="combat-action-btn combat-action-btn--ability" disabled>
+        <span class="combat-action-btn__icon">&#10024;</span>
+        <span>Ability</span>
+    </button>
+    <button class="combat-action-btn combat-action-btn--item" disabled>
+        <span class="combat-action-btn__icon">&#127863;</span>
+        <span>Item</span>
+    </button>
+    <button class="combat-action-btn combat-action-btn--defend" disabled>
+        <span class="combat-action-btn__icon">&#128737;</span>
+        <span>Defend</span>
+    </button>
+    <button class="combat-action-btn combat-action-btn--flee" disabled>
+        <span class="combat-action-btn__icon">&#127939;</span>
+        <span>Flee</span>
+    </button>
+</div>
+<p class="combat-actions__disabled-message">Waiting for enemy turn...</p>
+{% endif %}

public_web/templates/game/partials/combat_defeat.html

@@ -0,0 +1,55 @@
+{% extends "base.html" %}
+
+{% block title %}Defeated - Code of Conquest{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="combat-result combat-result--defeat">
+    <div class="combat-result__icon">&#128128;</div>
+    <h1 class="combat-result__title">Defeated</h1>
+    <p class="combat-result__subtitle">Your party has fallen in battle...</p>
+
+    {# Defeat Message #}
+    <div class="combat-rewards" style="border-color: var(--accent-red);">
+        <h2 class="rewards-title" style="color: var(--accent-red);">Battle Lost</h2>
+        <div class="rewards-list">
+            <div class="reward-item">
+                <span class="reward-icon">&#9888;</span>
+                <span class="reward-label">Your progress has been saved</span>
+                <span class="reward-value" style="color: var(--text-muted);">No items lost</span>
+            </div>
+            {% if gold_lost %}
+            <div class="reward-item">
+                <span class="reward-icon">&#128176;</span>
+                <span class="reward-label">Gold dropped</span>
+                <span class="reward-value" style="color: var(--accent-red);">-{{ gold_lost }} gold</span>
+            </div>
+            {% endif %}
+        </div>
+
+        <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-primary); text-align: center;">
+            <p style="font-size: var(--text-sm); color: var(--text-secondary); font-style: italic;">
+                "Even the mightiest heroes face setbacks. Rise again, adventurer!"
+            </p>
+        </div>
+    </div>
+
+    {# Action Buttons #}
+    <div class="combat-result__actions">
+        <a href="{{ url_for('game.play_session', session_id=session_id) }}" class="btn btn-primary">
+            Return to Game
+        </a>
+        {% if can_retry %}
+        <button class="btn btn-secondary"
+                hx-post="{{ url_for('combat.combat_view', session_id=session_id) }}"
+                hx-target="body"
+                hx-swap="innerHTML">
+            Retry Battle
+        </button>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}

public_web/templates/game/partials/combat_items_sheet.html

@@ -0,0 +1,52 @@
+{#
+Combat Items Sheet
+Bottom sheet for selecting consumable items during combat
+#}
+<div class="combat-items-sheet open" role="dialog" aria-modal="true" aria-labelledby="combat-items-title">
+    {# Drag handle for mobile #}
+    <div class="sheet-handle" aria-hidden="true"></div>
+
+    {# Sheet header #}
+    <div class="sheet-header">
+        <h3 id="combat-items-title">Use Item</h3>
+        <button class="sheet-close" onclick="closeCombatSheet()" aria-label="Close">&times;</button>
+    </div>
+
+    {# Sheet body #}
+    <div class="sheet-body">
+        {# Consumables Grid #}
+        <div class="combat-items-grid">
+            {% for item in consumables %}
+            <button class="combat-item"
+                    hx-get="{{ url_for('combat.combat_item_detail', session_id=session_id, item_id=item.item_id) }}"
+                    hx-target="#combat-item-detail"
+                    hx-swap="innerHTML"
+                    aria-label="{{ item.name }}">
+                <img src="{{ url_for('static', filename='img/items/consumable.svg') }}" alt="">
+                <span class="item-name">{{ item.name }}</span>
+                <span class="item-effect">{{ item.description|truncate(30) }}</span>
+            </button>
+            {% else %}
+            <p class="no-consumables">No usable items in inventory</p>
+            {% endfor %}
+        </div>
+
+        {# Selected Item Detail + Use Button #}
+        <div class="combat-item-detail" id="combat-item-detail">
+            <p style="color: var(--text-muted); text-align: center;">Select an item to use</p>
+        </div>
+    </div>
+</div>
+<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>
+
+<script>
+// Handle item selection highlighting in combat sheet
+document.querySelectorAll('.combat-item').forEach(item => {
+    item.addEventListener('htmx:afterRequest', function() {
+        // Remove selected from all items
+        document.querySelectorAll('.combat-item.selected').forEach(i => i.classList.remove('selected'));
+        // Add selected to clicked item
+        this.classList.add('selected');
+    });
+});
+</script>

public_web/templates/game/partials/combat_log.html

@@ -0,0 +1,25 @@
+{# Combat Log Partial - Displays combat action history #}
+{# This partial is swapped via HTMX when combat actions occur #}
+
+{% if combat_log %}
+    {% for entry in combat_log %}
+    <div class="combat-log__entry combat-log__entry--{{ entry.type|default('system') }}{% if entry.is_crit %} combat-log__entry--crit{% endif %}">
+        {% if entry.actor %}
+        <span class="log-actor">{{ entry.actor }}</span>
+        {% endif %}
+        <span class="log-message">{{ entry.message }}</span>
+        {% if entry.damage %}
+        <span class="log-damage{% if entry.is_crit %} log-damage--crit{% endif %}">
+            {% if entry.is_crit %}CRITICAL! {% endif %}{{ entry.damage }} damage
+        </span>
+        {% endif %}
+        {% if entry.heal %}
+        <span class="log-heal">+{{ entry.heal }} HP</span>
+        {% endif %}
+    </div>
+    {% endfor %}
+{% else %}
+    <div class="combat-log__empty">
+        Combat begins! Choose your action below.
+    </div>
+{% endif %}

public_web/templates/game/partials/combat_victory.html

@@ -0,0 +1,84 @@
+{% extends "base.html" %}
+
+{% block title %}Victory! - Code of Conquest{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="combat-result combat-result--victory">
+    <div class="combat-result__icon">&#127942;</div>
+    <h1 class="combat-result__title">Victory!</h1>
+    <p class="combat-result__subtitle">You have defeated your enemies!</p>
+
+    {# Rewards Section #}
+    {% if rewards %}
+    <div class="combat-rewards">
+        <h2 class="rewards-title">Rewards Earned</h2>
+        <div class="rewards-list">
+            {# Experience #}
+            {% if rewards.experience %}
+            <div class="reward-item">
+                <span class="reward-icon">&#11088;</span>
+                <span class="reward-label">Experience Points</span>
+                <span class="reward-value reward-value--xp">+{{ rewards.experience }} XP</span>
+            </div>
+            {% endif %}
+
+            {# Gold #}
+            {% if rewards.gold %}
+            <div class="reward-item">
+                <span class="reward-icon">&#128176;</span>
+                <span class="reward-label">Gold</span>
+                <span class="reward-value reward-value--gold">+{{ rewards.gold }} gold</span>
+            </div>
+            {% endif %}
+
+            {# Level Up #}
+            {% if rewards.level_ups %}
+            {% for character_id in rewards.level_ups %}
+            <div class="reward-item">
+                <span class="reward-icon">&#127775;</span>
+                <span class="reward-label">Level Up!</span>
+                <span class="reward-value reward-value--level">New abilities unlocked!</span>
+            </div>
+            {% endfor %}
+            {% endif %}
+        </div>
+
+        {# Loot Items #}
+        {% if rewards.items %}
+        <div class="loot-section">
+            <h3 class="loot-title">Items Obtained</h3>
+            <div class="loot-list">
+                {% for item in rewards.items %}
+                <div class="loot-item loot-item--{{ item.rarity|default('common') }}">
+                    <span>
+                        {% if item.type == 'weapon' %}&#9876;
+                        {% elif item.type == 'armor' %}&#129523;
+                        {% elif item.type == 'consumable' %}&#127863;
+                        {% elif item.type == 'material' %}&#128293;
+                        {% else %}&#128230;
+                        {% endif %}
+                    </span>
+                    <span>{{ item.name }}</span>
+                    {% if item.quantity > 1 %}
+                    <span style="color: var(--text-muted);">x{{ item.quantity }}</span>
+                    {% endif %}
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+    </div>
+    {% endif %}
+
+    {# Action Buttons #}
+    <div class="combat-result__actions">
+        <a href="{{ url_for('game.play_session', session_id=session_id) }}" class="btn btn-primary">
+            Continue Adventure
+        </a>
+    </div>
+</div>
+{% endblock %}

public_web/templates/game/partials/inventory_item_detail.html

@@ -0,0 +1,118 @@
+{#
+Inventory Item Detail
+Partial template loaded via HTMX when an item is selected
+#}
+<div class="item-detail-content">
+    {# Mobile back button #}
+    <button class="item-detail-back" onclick="hideMobileDetail()" aria-label="Back to inventory">
+        &larr; Back to items
+    </button>
+
+    {# Item header #}
+    <div class="item-detail-header">
+        <img src="{{ url_for('static', filename='img/items/' ~ (item.item_type|default('default')) ~ '.svg') }}"
+             class="item-detail-icon" alt="">
+        <div class="item-detail-title">
+            <h3 class="rarity-text-{{ item.rarity|default('common') }}">{{ item.name }}</h3>
+            <span class="item-type">{{ item.item_type|default('Item')|replace('_', ' ')|title }}</span>
+        </div>
+    </div>
+
+    {# Item description #}
+    <p class="item-description">{{ item.description|default('No description available.') }}</p>
+
+    {# Stats (for equipment) #}
+    {% if item.item_type in ['weapon', 'armor'] %}
+    <div class="item-stats">
+        {% if item.damage %}
+        <div>
+            <span>Damage</span>
+            <span>{{ item.damage }}</span>
+        </div>
+        {% endif %}
+        {% if item.defense %}
+        <div>
+            <span>Defense</span>
+            <span>{{ item.defense }}</span>
+        </div>
+        {% endif %}
+        {% if item.spell_power %}
+        <div>
+            <span>Spell Power</span>
+            <span>{{ item.spell_power }}</span>
+        </div>
+        {% endif %}
+        {% if item.crit_chance %}
+        <div>
+            <span>Crit Chance</span>
+            <span>{{ (item.crit_chance * 100)|round|int }}%</span>
+        </div>
+        {% endif %}
+        {% if item.stat_bonuses %}
+            {% for stat, value in item.stat_bonuses.items() %}
+            <div>
+                <span>{{ stat|replace('_', ' ')|title }}</span>
+                <span>+{{ value }}</span>
+            </div>
+            {% endfor %}
+        {% endif %}
+    </div>
+    {% endif %}
+
+    {# Effects (for consumables) #}
+    {% if item.item_type == 'consumable' and item.effects_on_use %}
+    <div class="item-stats">
+        <div class="item-stats-title" style="font-weight: 600; margin-bottom: 0.5rem;">Effects</div>
+        {% for effect in item.effects_on_use %}
+        <div>
+            <span>{{ effect.name|default(effect.effect_type|default('Effect')|title) }}</span>
+            <span>{{ effect.value|default('') }}</span>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {# Item value #}
+    {% if item.value %}
+    <div class="item-value" style="font-size: var(--text-sm); color: var(--accent-gold); margin-bottom: 1rem;">
+        Value: {{ item.value }} gold
+    </div>
+    {% endif %}
+
+    {# Action Buttons #}
+    <div class="item-actions">
+        {% if item.item_type == 'consumable' %}
+        <button class="action-btn action-btn--primary"
+                hx-post="{{ url_for('game.inventory_use', session_id=session_id) }}"
+                hx-vals='{"item_id": "{{ item.item_id }}"}'
+                hx-target="#character-panel"
+                hx-swap="innerHTML"
+                onclick="closeModal()">
+            Use
+        </button>
+        {% elif item.item_type in ['weapon', 'armor'] %}
+        <button class="action-btn action-btn--primary"
+                hx-post="{{ url_for('game.inventory_equip', session_id=session_id) }}"
+                hx-vals='{"item_id": "{{ item.item_id }}"{% if suggested_slot %}, "slot": "{{ suggested_slot }}"{% endif %}}'
+                hx-target="#character-panel"
+                hx-swap="innerHTML"
+                onclick="closeModal()">
+            Equip
+        </button>
+        {% endif %}
+
+        {% if item.item_type != 'quest_item' %}
+        <button class="action-btn action-btn--danger"
+                hx-delete="{{ url_for('game.inventory_drop', session_id=session_id, item_id=item.item_id) }}"
+                hx-target=".inventory-modal"
+                hx-swap="outerHTML"
+                hx-confirm="Drop {{ item.name }}? This cannot be undone.">
+            Drop
+        </button>
+        {% else %}
+        <p style="font-size: var(--text-xs); color: var(--text-muted); text-align: center; padding: 0.5rem;">
+            Quest items cannot be dropped
+        </p>
+        {% endif %}
+    </div>
+</div>

public_web/templates/game/partials/inventory_modal.html

@@ -0,0 +1,138 @@
+{#
+Inventory Modal
+Full inventory management modal for play screen
+#}
+<div class="modal-overlay" onclick="if(event.target===this) closeModal()"
+     role="dialog" aria-modal="true" aria-labelledby="inventory-title">
+    <div class="modal-content inventory-modal">
+        {# Header #}
+        <div class="modal-header">
+            <h2 class="modal-title" id="inventory-title">
+                Inventory
+                <span class="inventory-count">({{ inventory_count }}/{{ inventory_max }})</span>
+            </h2>
+            <button class="modal-close" onclick="closeModal()" aria-label="Close inventory">&times;</button>
+        </div>
+
+        {# Tab Filter Bar #}
+        <div class="inventory-tabs" role="tablist">
+            <button class="tab {% if filter == 'all' %}active{% endif %}"
+                    role="tab"
+                    aria-selected="{{ 'true' if filter == 'all' else 'false' }}"
+                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='all') }}"
+                    hx-target=".inventory-modal"
+                    hx-swap="outerHTML">
+                All
+            </button>
+            <button class="tab {% if filter == 'weapon' %}active{% endif %}"
+                    role="tab"
+                    aria-selected="{{ 'true' if filter == 'weapon' else 'false' }}"
+                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='weapon') }}"
+                    hx-target=".inventory-modal"
+                    hx-swap="outerHTML">
+                Weapons
+            </button>
+            <button class="tab {% if filter == 'armor' %}active{% endif %}"
+                    role="tab"
+                    aria-selected="{{ 'true' if filter == 'armor' else 'false' }}"
+                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='armor') }}"
+                    hx-target=".inventory-modal"
+                    hx-swap="outerHTML">
+                Armor
+            </button>
+            <button class="tab {% if filter == 'consumable' %}active{% endif %}"
+                    role="tab"
+                    aria-selected="{{ 'true' if filter == 'consumable' else 'false' }}"
+                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='consumable') }}"
+                    hx-target=".inventory-modal"
+                    hx-swap="outerHTML">
+                Consumables
+            </button>
+            <button class="tab {% if filter == 'quest_item' %}active{% endif %}"
+                    role="tab"
+                    aria-selected="{{ 'true' if filter == 'quest_item' else 'false' }}"
+                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='quest_item') }}"
+                    hx-target=".inventory-modal"
+                    hx-swap="outerHTML">
+                Quest
+            </button>
+        </div>
+
+        {# Body #}
+        <div class="modal-body inventory-body">
+            {# Item Grid #}
+            <div class="inventory-grid-container">
+                <div class="inventory-grid" id="inventory-items" role="listbox">
+                    {% for item in inventory %}
+                    <button class="inventory-item rarity-{{ item.rarity|default('common') }}"
+                            role="option"
+                            hx-get="{{ url_for('game.inventory_item_detail', session_id=session_id, item_id=item.item_id) }}"
+                            hx-target="#item-detail"
+                            hx-swap="innerHTML"
+                            aria-label="{{ item.name }}, {{ item.rarity|default('common') }} {{ item.item_type }}">
+                        <img src="{{ url_for('static', filename='img/items/' ~ (item.item_type|default('default')) ~ '.svg') }}"
+                             alt="" aria-hidden="true">
+                        <span class="item-name">{{ item.name }}</span>
+                        {% if item.quantity and item.quantity > 1 %}
+                        <span class="item-quantity">x{{ item.quantity }}</span>
+                        {% endif %}
+                    </button>
+                    {% else %}
+                    <p class="inventory-empty">
+                        {% if filter == 'all' %}
+                            No items in inventory
+                        {% else %}
+                            No {{ filter|replace('_', ' ') }}s found
+                        {% endif %}
+                    </p>
+                    {% endfor %}
+                </div>
+            </div>
+
+            {# Item Detail Panel #}
+            <div class="item-detail" id="item-detail" aria-live="polite">
+                <p class="item-detail-empty">Select an item to view details</p>
+            </div>
+        </div>
+
+        {# Footer #}
+        <div class="modal-footer">
+            <span class="gold-display">{{ gold }}</span>
+            <button class="btn btn--secondary" onclick="closeModal()">Close</button>
+        </div>
+    </div>
+</div>
+
+<script>
+// Handle item selection highlighting
+document.querySelectorAll('.inventory-item').forEach(item => {
+    item.addEventListener('htmx:afterRequest', function() {
+        // Remove selected from all items
+        document.querySelectorAll('.inventory-item.selected').forEach(i => i.classList.remove('selected'));
+        // Add selected to clicked item
+        this.classList.add('selected');
+    });
+});
+
+// Mobile: Show detail panel as slide-in
+function showMobileDetail() {
+    const detail = document.getElementById('item-detail');
+    if (window.innerWidth <= 768 && detail) {
+        detail.classList.add('visible');
+    }
+}
+
+function hideMobileDetail() {
+    const detail = document.getElementById('item-detail');
+    if (detail) {
+        detail.classList.remove('visible');
+    }
+}
+
+// Listen for item detail loads on mobile
+document.body.addEventListener('htmx:afterSwap', function(event) {
+    if (event.detail.target.id === 'item-detail') {
+        showMobileDetail();
+    }
+});
+</script>

public_web/templates/game/partials/item_modal.html

@@ -0,0 +1,51 @@
+{# Item Selection Modal - Shows consumable items during combat #}
+
+<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
+    <div class="modal-content modal-content--md">
+        <div class="modal-header">
+            <h3 class="modal-title">Use Item</h3>
+            <button class="modal-close" onclick="closeModal()" aria-label="Close modal">&times;</button>
+        </div>
+        <div class="modal-body">
+            {% if items %}
+            <div class="item-list">
+                {% for item in items %}
+                <button class="item-btn"
+                        hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
+                        hx-vals='{"action_type": "item", "item_id": "{{ item.id }}"}'
+                        hx-target="#combat-log"
+                        hx-swap="beforeend"
+                        hx-disabled-elt="this"
+                        {% if item.quantity <= 0 %}disabled{% endif %}
+                        onclick="closeModal()">
+                    <span class="item-icon">
+                        {% if 'health' in item.name|lower or 'heal' in item.effect|lower %}&#127863;
+                        {% elif 'mana' in item.name|lower or 'mp' in item.effect|lower %}&#129389;
+                        {% elif 'antidote' in item.name|lower or 'cure' in item.effect|lower %}&#129514;
+                        {% elif 'bomb' in item.name|lower or 'damage' in item.effect|lower %}&#128163;
+                        {% elif 'elixir' in item.name|lower %}&#129380;
+                        {% else %}&#128230;
+                        {% endif %}
+                    </span>
+                    <div class="item-info">
+                        <span class="item-name">{{ item.name }}</span>
+                        <span class="item-effect">{{ item.effect|default('Use in combat.') }}</span>
+                    </div>
+                    <span class="item-quantity">x{{ item.quantity }}</span>
+                </button>
+                {% endfor %}
+            </div>
+            {% else %}
+            <div class="items-empty">
+                <p>No usable items in inventory.</p>
+                <p style="font-size: var(--text-xs); margin-top: 0.5rem; color: var(--text-muted);">
+                    Purchase potions from merchants or find them while exploring.
+                </p>
+            </div>
+            {% endif %}
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn--secondary" onclick="closeModal()">Cancel</button>
+        </div>
+    </div>
+</div>