Add quick consumables bar and new skins

app.js

@@ -396,7 +396,8 @@
         if (!state.inventory[id] || state.inventory[id] <= 0) return;
         
         const feedback = document.getElementById('feedback-msg');
-        
+        const fromShop = document.getElementById('shop-modal')?.classList.contains('visible');
+
         if (id === 'time_turner') {
             game.timeTurnerCharges = 5;
             feedback.style.color = '#d4af37'; feedback.innerText = "Time Turner Active (5 turns)";
@@ -441,7 +442,8 @@
 
         state.inventory[id]--;
         saveData();
-        closeShop();
+        renderQuickConsumables();
+        if (fromShop) closeShop(); else updateUI();
     }
     
     function updateBuffDisplay() {
@@ -455,6 +457,28 @@
         }
     }
 
+    function renderQuickConsumables() {
+        const holder = document.getElementById('quick-consumables');
+        if (!holder) return;
+        holder.innerHTML = "";
+        const consumables = SHOP_ITEMS.filter(i => i.type === 'consumable' && (state.inventory[i.id] || 0) > 0);
+        if (consumables.length === 0) {
+            holder.innerHTML = `<div style="font-size:0.8rem; color:#555;">No consumables on hand.</div>`;
+            return;
+        }
+        consumables.forEach(item => {
+            const qty = state.inventory[item.id] || 0;
+            const card = document.createElement('div');
+            card.className = 'consumable-card';
+            card.innerHTML = `
+                <h5>${item.name}</h5>
+                <div class="qty">Owned: ${qty}</div>
+                <button ${qty <= 0 ? 'disabled' : ''} onclick="useConsumable('${item.id}')">Use</button>
+            `;
+            holder.appendChild(card);
+        });
+    }
+
     // --- VISUALS ---
     function applyCosmetics() {
         const card = document.getElementById('main-card');
@@ -651,6 +675,7 @@
         document.getElementById('progress-bar').style.width = `${pct}%`;
 
         updateBuffDisplay();
+        renderQuickConsumables();
     }
 
     function startDementor(resume = false) {

index.html

@@ -109,6 +109,7 @@
     </div>
 
     <div class="feedback" id="feedback-msg"></div>
+    <div id="quick-consumables" class="quick-consumables"></div>
     <div id="pet-perch"></div>
 </div>
 

style.css

@@ -301,6 +301,35 @@
         .card-container .key-btn.key-clear:active { background: #f1c232; }
 
         .feedback { height: 20px; margin: 5px 0; font-weight: bold; font-size: 0.9rem; }
+        .quick-consumables {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 6px;
+            margin: 8px 0;
+        }
+        .quick-consumables .consumable-card {
+            background: rgba(0,0,0,0.08);
+            border: 1px solid rgba(0,0,0,0.15);
+            border-radius: 6px;
+            padding: 6px;
+            display: flex; flex-direction: column; gap: 4px;
+            font-size: 0.8rem;
+        }
+        .quick-consumables .consumable-card h5 { margin: 0; font-size: 0.9rem; }
+        .quick-consumables .consumable-card .qty { color: #555; }
+        .quick-consumables .consumable-card button {
+            padding: 6px;
+            font-family: 'Cinzel', serif;
+            border: 1px solid var(--burgundy);
+            background: var(--gold);
+            color: #2c2c2c;
+            cursor: pointer;
+            border-radius: 4px;
+            font-weight: bold;
+        }
+        .quick-consumables .consumable-card button:disabled {
+            opacity: 0.4; cursor: not-allowed;
+        }
         #pet-perch {
             height: 40px;
             display: flex; justify-content: center; align-items: center;