Add 1 files

index.html

@@ -162,639 +162,596 @@
                             <span>Health</span>
                             <span id="health-text">100/100</span>
                         </div>
-                        <div class="w-full bg-gray-700 rounded-full h-4">
-                            <div id="health-bar" class="health-bar bg-red-500 h-4 rounded-full" style="width: 100%"></div>
-                        </div>
-                    </div>
-                    
-                    <div class="mb-4">
-                        <div class="flex justify-between mb-1">
-                            <span>Mana</span>
-                            <span id="mana-text">50/50</span>
-                        </div>
-                        <div class="w-full bg-gray-700 rounded-full h-4">
-                            <div id="mana-bar" class="health-bar bg-blue-500 h-4 rounded-full" style="width: 100%"></div>
-                        </div>
-                    </div>
-                    
-                    <div class="mb-4">
-                        <div class="flex justify-between mb-1">
-                            <span>Experience</span>
-                            <span id="exp-text">0/100</span>
-                        </div>
-                        <div class="w-full bg-gray-700 rounded-full h-4">
-                            <div id="exp-bar" class="health-bar bg-yellow-500 h-4 rounded-full" style="width: 0%"></div>
-                        </div>
-                    </div>
-                    
-                    <div class="grid grid-cols-2 gap-2 mb-4">
-                        <div class="bg-gray-700 p-2 rounded">
-                            <div class="text-sm text-gray-300">Level</div>
-                            <div class="font-bold" id="level-text">1</div>
-                        </div>
-                        <div class="bg-gray-700 p-2 rounded">
-                            <div class="text-sm text-gray-300">Gold</div>
-                            <div class="font-bold" id="gold-text">10</div>
-                        </div>
-                        <div class="bg-gray-700 p-2 rounded">
-                            <div class="text-sm text-gray-300">Attack</div>
-                            <div class="font-bold" id="attack-text">10</div>
-                        </div>
-                        <div class="bg-gray-700 p-2 rounded">
-                            <div class="text-sm text-gray-300">Defense</div>
-                            <div class="font-bold" id="defense-text">5</div>
-                        </div>
-                    </div>
-                    
-                    <button onclick="openInventory()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded mb-2">
-                        <i class="fas fa-backpack mr-2"></i> Inventory
-                    </button>
-                    <button onclick="openQuests()" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded mb-2">
-                        <i class="fas fa-scroll mr-2"></i> Quests
-                    </button>
-                    <button onclick="saveGame()" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded">
-                        <i class="fas fa-save mr-2"></i> Save Game
-                    </button>
+        <div class="w-full bg-gray-700 rounded-full h-4">
+            <div id="health-bar" class="health-bar bg-red-500 h-4 rounded-full" style="width: 100%"></div>
+        </div>
+    </div>
+    
+    <div class="mb-4">
+        <div class="flex justify-between mb-1">
+            <span>Mana</span>
+            <span id="mana-text">50/50</span>
+        </div>
+        <div class="w-full bg-gray-700 rounded-full h-4">
+            <div id="mana-bar" class="health-bar bg-blue-500 h-4 rounded-full" style="width: 100%"></div>
+        </div>
+    </div>
+    
+    <div class="mb-4">
+        <div class="flex justify-between mb-1">
+            <span>Experience</span>
+            <span id="exp-text">0/100</span>
+        </div>
+        <div class="w-full bg-gray-700 rounded-full h-4">
+            <div id="exp-bar" class="health-bar bg-yellow-500 h-4 rounded-full" style="width: 0%"></div>
+        </div>
+    </div>
+    
+    <div class="grid grid-cols-2 gap-2 mb-4">
+        <div class="bg-gray-700 p-2 rounded">
+            <div class="text-sm text-gray-300">Level</div>
+            <div class="font-bold" id="level-text">1</div>
+        </div>
+        <div class="bg-gray-700 p-2 rounded">
+            <div class="text-sm text-gray-300">Gold</div>
+            <div class="font-bold" id="gold-text">10</div>
+        </div>
+        <div class="bg-gray-700 p-2 rounded">
+            <div class="text-sm text-gray-300">Attack</div>
+            <div class="font-bold" id="attack-text">10</div>
+        </div>
+        <div class="bg-gray-700 p-2 rounded">
+            <div class="text-sm text-gray-300">Defense</div>
+            <div class="font-bold" id="defense-text">5</div>
+        </div>
+    </div>
+    
+    <button onclick="openInventory()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded mb-2">
+        <i class="fas fa-backpack mr-2"></i> Inventory
+    </button>
+    <button onclick="openQuests()" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded mb-2">
+        <i class="fas fa-scroll mr-2"></i> Quests
+    </button>
+    <button onclick="saveGame()" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded">
+        <i class="fas fa-save mr-2"></i> Save Game
+    </button>
+</div>
+
+<!-- Main Game Area -->
+<div class="flex-1">
+    <!-- Game Messages -->
+    <div id="game-messages" class="bg-gray-800 bg-opacity-90 rounded-lg p-4 mb-4 h-40 overflow-y-auto">
+        <p class="text-yellow-300">Welcome to Epic RPG Adventure!</p>
+        <p>Create your character and begin your journey.</p>
+    </div>
+    
+    <!-- Action Buttons -->
+    <div class="grid grid-cols-2 gap-4 mb-6">
+        <button onclick="explore()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105">
+            <i class="fas fa-binoculars mr-2"></i> Explore
+        </button>
+        <button onclick="rest()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105">
+            <i class="fas fa-bed mr-2"></i> Rest
+        </button>
+        <button onclick="visitTown()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105">
+            <i class="fas fa-city mr-2"></i> Visit Town
+        </button>
+        <button onclick="train()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105">
+            <i class="fas fa-dumbbell mr-2"></i> Train
+        </button>
+    </div>
+    
+    <!-- Combat Area -->
+    <div id="combat-area" class="hidden bg-gray-800 bg-opacity-90 rounded-lg p-6">
+        <div class="flex flex-col md:flex-row justify-between items-center mb-8">
+            <!-- Player -->
+            <div class="text-center mb-6 md:mb-0 relative">
+                <div class="text-6xl mb-2" id="player-combat-icon">
+                    <i class="fas fa-user"></i>
                 </div>
-                
-                <!-- Main Game Area -->
-                <div class="flex-1">
-                    <!-- Game Messages -->
-                    <div id="game-messages" class="bg-gray-800 bg-opacity-90 rounded-lg p-4 mb-4 h-40 overflow-y-auto">
-                        <p class="text-yellow-300">Welcome to Epic RPG Adventure!</p>
-                        <p>Create your character and begin your journey.</p>
-                    </div>
-                    
-                    <!-- Action Buttons -->
-                    <div class="grid grid-cols-2 gap-4 mb-6">
-                        <button onclick="explore()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105">
-                            <i class="fas fa-binoculars mr-2"></i> Explore
-                        </button>
-                        <button onclick="rest()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105">
-                            <i class="fas fa-bed mr-2"></i> Rest
-                        </button>
-                        <button onclick="visitTown()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105">
-                            <i class="fas fa-city mr-2"></i> Visit Town
-                        </button>
-                        <button onclick="train()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition-all hover:scale-105">
-                            <i class="fas fa-dumbbell mr-2"></i> Train
-                        </button>
-                    </div>
-                    
-                    <!-- Combat Area -->
-                    <div id="combat-area" class="hidden bg-gray-800 bg-opacity-90 rounded-lg p-6">
-                        <div class="flex flex-col md:flex-row justify-between items-center mb-8">
-                            <!-- Player -->
-                            <div class="text-center mb-6 md:mb-0 relative">
-                                <div class="text-6xl mb-2" id="player-combat-icon">
-                                    <i class="fas fa-user"></i>
-                                </div>
-                                <h4 class="text-xl font-bold" id="player-combat-name">Hero</h4>
-                                <div class="w-full bg-gray-700 rounded-full h-3 mt-2">
-                                    <div id="player-health-bar" class="health-bar bg-red-500 h-3 rounded-full" style="width: 100%"></div>
-                                </div>
-                                <div class="text-sm" id="player-health-text">100/100</div>
-                            </div>
-                            
-                            <!-- VS -->
-                            <div class="text-2xl font-bold mx-4 mb-6 md:mb-0">VS</div>
-                            
-                            <!-- Enemy -->
-                            <div class="text-center relative">
-                                <div class="text-6xl mb-2" id="enemy-icon">
-                                    <i class="fas fa-spider"></i>
-                                </div>
-                                <h4 class="text-xl font-bold" id="enemy-name">Goblin</h4>
-                                <div class="w-full bg-gray-700 rounded-full h-3 mt-2">
-                                    <div id="enemy-health-bar" class="health-bar bg-red-500 h-3 rounded-full" style="width: 100%"></div>
-                                </div>
-                                <div class="text-sm" id="enemy-health-text">30/30</div>
-                            </div>
-                        </div>
-                        
-                        <!-- Combat Actions -->
-                        <div id="combat-actions" class="grid grid-cols-2 gap-4">
-                            <button onclick="playerAttack()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg">
-                                <i class="fas fa-sword mr-2"></i> Attack
-                            </button>
-                            <button onclick="playerSpell()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg">
-                                <i class="fas fa-magic mr-2"></i> Cast Spell
-                            </button>
-                            <button onclick="playerDefend()" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg">
-                                <i class="fas fa-shield-alt mr-2"></i> Defend
-                            </button>
-                            <button onclick="playerFlee()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg">
-                                <i class="fas fa-running mr-2"></i> Flee
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <!-- Town Area -->
-                    <div id="town-area" class="hidden bg-gray-800 bg-opacity-90 rounded-lg p-6">
-                        <h3 class="text-2xl font-bold mb-4">Town Square</h3>
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                            <button onclick="visitShop()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg">
-                                <i class="fas fa-shopping-cart mr-2"></i> Shop
-                            </button>
-                            <button onclick="visitTavern()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg">
-                                <i class="fas fa-beer mr-2"></i> Tavern
-                            </button>
-                            <button onclick="visitGuild()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg">
-                                <i class="fas fa-scroll mr-2"></i> Adventurer's Guild
-                            </button>
-                            <button onclick="leaveTown()" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg">
-                                <i class="fas fa-door-open mr-2"></i> Leave Town
-                            </button>
-                        </div>
-                    </div>
+                <h4 class="text-xl font-bold" id="player-combat-name">Hero</h4>
+                <div class="w-full bg-gray-700 rounded-full h-3 mt-2">
+                    <div id="player-health-bar" class="health-bar bg-red-500 h-3 rounded-full" style="width: 100%"></div>
                 </div>
+                <div class="text-sm" id="player-health-text">100/100</div>
             </div>
+            
+            <!-- VS -->
+            <div class="text-2xl font-bold mx-4 mb-6 md:mb-0">VS</div>
+            
+            <!-- Enemy -->
+            <div class="text-center relative">
+                <div class="text-6xl mb-2" id="enemy-icon">
+                    <i class="fas fa-spider"></i>
+                </div>
+                <h4 class="text-xl font-bold" id="enemy-name">Goblin</h4>
+                <div class="w-full bg-gray-700 rounded-full h-3 mt-2">
+                    <div id="enemy-health-bar" class="health-bar bg-red-500 h-3 rounded-full" style="width: 100%"></div>
+                </div>
+                <div class="text-sm" id="enemy-health-text">30/30</div>
+            </div>
+        </div>
+        
+        <!-- Combat Actions -->
+        <div id="combat-actions" class="grid grid-cols-2 gap-4">
+            <button onclick="playerAttack()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg">
+                <i class="fas fa-sword mr-2"></i> Attack
+            </button>
+            <button onclick="playerSpell()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg">
+                <i class="fas fa-magic mr-2"></i> Cast Spell
+            </button>
+            <button onclick="playerDefend()" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg">
+                <i class="fas fa-shield-alt mr-2"></i> Defend
+            </button>
+            <button onclick="playerFlee()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg">
+                <i class="fas fa-running mr-2"></i> Flee
+            </button>
         </div>
+    </div>
+    
+    <!-- Town Area -->
+    <div id="town-area" class="hidden bg-gray-800 bg-opacity-90 rounded-lg p-6">
+        <h3 class="text-2xl font-bold mb-4">Town Square</h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <button onclick="visitShop()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg">
+                <i class="fas fa-shopping-cart mr-2"></i> Shop
+            </button>
+            <button onclick="visitTavern()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded-lg">
+                <i class="fas fa-beer mr-2"></i> Tavern
+            </button>
+            <button onclick="visitGuild()" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg">
+                <i class="fas fa-scroll mr-2"></i> Adventurer's Guild
+            </button>
+            <button onclick="leaveTown()" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-4 rounded-lg">
+                <i class="fas fa-door-open mr-2"></i> Leave Town
+            </button>
+        </div>
+    </div>
+</div>
+</div>
+</div>
 
-        <!-- Inventory Modal -->
-        <div id="inventory-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div class="bg-gray-800 rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-2xl font-bold">Inventory</h3>
-                    <button onclick="closeInventory()" class="text-gray-400 hover:text-white">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-                
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-                    <div class="bg-gray-700 p-4 rounded-lg text-center">
-                        <div class="text-3xl mb-2"><i class="fas fa-sword"></i></div>
+<!-- Inventory Modal -->
+<div id="inventory-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div class="bg-gray-800 rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
+        <div class="flex justify-between items-center mb-4">
+            <h3 class="text-2xl font-bold">Inventory</h3>
+            <button onclick="closeInventory()" class="text-gray-400 hover:text-white">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+            <div class="bg-gray-700 p-4 rounded-lg text-center">
+                <div class="text-3xl mb-2"><i class="fas fa-sword"></i></div>
+                <div class="font-bold">Iron Sword</div>
+                <div class="text-sm text-gray-300">Attack +5</div>
+                <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">
+                    Equip
+                </button>
+            </div>
+            <div class="bg-gray-700 p-4 rounded-lg text-center">
+                <div class="text-3xl mb-2"><i class="fas fa-shield-alt"></i></div>
+                <div class="font-bold">Wooden Shield</div>
+                <div class="text-sm text-gray-300">Defense +3</div>
+                <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">
+                    Equip
+                </button>
+            </div>
+            <div class="bg-gray-700 p-4 rounded-lg text-center">
+                <div class="text-3xl mb-2"><i class="fas fa-flask"></i></div>
+                <div class="font-bold">Health Potion</div>
+                <div class="text-sm text-gray-300">Restores 30 HP</div>
+                <button class="mt-2 bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm">
+                    Use
+                </button>
+            </div>
+            <div class="bg-gray-700 p-4 rounded-lg text-center">
+                <div class="text-3xl mb-2"><i class="fas fa-flask"></i></div>
+                <div class="font-bold">Mana Potion</div>
+                <div class="text-sm text-gray-300">Restores 20 MP</div>
+                <button class="mt-2 bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm">
+                    Use
+                </button>
+            </div>
+        </div>
+        
+        <h4 class="text-xl font-bold mb-3">Equipped Items</h4>
+        <div class="grid grid-cols-2 gap-4">
+            <div class="bg-gray-700 p-3 rounded-lg">
+                <div class="flex items-center">
+                    <div class="text-2xl mr-3"><i class="fas fa-sword"></i></div>
+                    <div>
                         <div class="font-bold">Iron Sword</div>
                         <div class="text-sm text-gray-300">Attack +5</div>
-                        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">
-                            Equip
-                        </button>
                     </div>
-                    <div class="bg-gray-700 p-4 rounded-lg text-center">
-                        <div class="text-3xl mb-2"><i class="fas fa-shield-alt"></i></div>
+                </div>
+            </div>
+            <div class="bg-gray-700 p-3 rounded-lg">
+                <div class="flex items-center">
+                    <div class="text-2xl mr-3"><i class="fas fa-shield-alt"></i></div>
+                    <div>
                         <div class="font-bold">Wooden Shield</div>
                         <div class="text-sm text-gray-300">Defense +3</div>
-                        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">
-                            Equip
-                        </button>
-                    </div>
-                    <div class="bg-gray-700 p-4 rounded-lg text-center">
-                        <div class="text-3xl mb-2"><i class="fas fa-flask"></i></div>
-                        <div class="font-bold">Health Potion</div>
-                        <div class="text-sm text-gray-300">Restores 30 HP</div>
-                        <button class="mt-2 bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm">
-                            Use
-                        </button>
-                    </div>
-                    <div class="bg-gray-700 p-4 rounded-lg text-center">
-                        <div class="text-3xl mb-2"><i class="fas fa-flask"></i></div>
-                        <div class="font-bold">Mana Potion</div>
-                        <div class="text-sm text-gray-300">Restores 20 MP</div>
-                        <button class="mt-2 bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm">
-                            Use
-                        </button>
-                    </div>
-                </div>
-                
-                <h4 class="text-xl font-bold mb-3">Equipped Items</h4>
-                <div class="grid grid-cols-2 gap-4">
-                    <div class="bg-gray-700 p-3 rounded-lg">
-                        <div class="flex items-center">
-                            <div class="text-2xl mr-3"><i class="fas fa-sword"></i></div>
-                            <div>
-                                <div class="font-bold">Iron Sword</div>
-                                <div class="text-sm text-gray-300">Attack +5</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-gray-700 p-3 rounded-lg">
-                        <div class="flex items-center">
-                            <div class="text-2xl mr-3"><i class="fas fa-shield-alt"></i></div>
-                            <div>
-                                <div class="font-bold">Wooden Shield</div>
-                                <div class="text-sm text-gray-300">Defense +3</div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
+    </div>
+</div>
 
-        <!-- Credits Modal -->
-        <div id="credits-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-2xl font-bold">Credits</h3>
-                    <button onclick="hideCredits()" class="text-gray-400 hover:text-white">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-                
-                <div class="space-y-4">
-                    <div>
-                        <h4 class="text-xl font-bold text-yellow-400">Epic RPG Adventure</h4>
-                        <p class="text-gray-300">Created with HTML, CSS, and JavaScript</p>
-                    </div>
-                    
-                    <div>
-                        <h4 class="font-bold">Developer</h4>
-                        <p class="text-gray-300">Your Name Here</p>
-                    </div>
-                    
-                    <div>
-                        <h4 class="font-bold">Special Thanks</h4>
-                        <ul class="list-disc list-inside text-gray-300">
-                            <li>Tailwind CSS</li>
-                            <li>Font Awesome</li>
-                            <li>Unsplash for images</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="pt-4 border-t border-gray-700">
-                        <p class="text-sm text-gray-400">© 2023 All Rights Reserved</p>
-                    </div>
-                </div>
+<!-- Credits Modal -->
+<div id="credits-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
+        <div class="flex justify-between items-center mb-4">
+            <h3 class="text-2xl font-bold">Credits</h3>
+            <button onclick="hideCredits()" class="text-gray-400 hover:text-white">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        
+        <div class="space-y-4">
+            <div>
+                <h4 class="text-xl font-bold text-yellow-400">Epic RPG Adventure</h4>
+                <p class="text-gray-300">Created with HTML, CSS, and JavaScript</p>
+            </div>
+            
+            <div>
+                <h4 class="font-bold">Developer</h4>
+                <p class="text-gray-300">Your Name Here</p>
+            </div>
+            
+            <div>
+                <h4 class="font-bold">Special Thanks</h4>
+                <ul class="list-disc list-inside text-gray-300">
+                    <li>Tailwind CSS</li>
+                    <li>Font Awesome</li>
+                    <li>Unsplash for images</li>
+                </ul>
+            </div>
+            
+            <div class="pt-4 border-t border-gray-700">
+                <p class="text-sm text-gray-400">© 2023 All Rights Reserved</p>
             </div>
         </div>
     </div>
+</div>
+</div>
 
-    <script>
-        // Game State
-        const gameState = {
-            player: {
-                name: '',
-                class: '',
-                gender: '',
-                level: 1,
-                exp: 0,
-                expToNextLevel: 100,
-                health: 100,
-                maxHealth: 100,
-                mana: 50,
-                maxMana: 50,
-                attack: 10,
-                defense: 5,
-                gold: 10,
-                inventory: [
-                    { name: 'Iron Sword', type: 'weapon', attack: 5, icon: 'fa-sword' },
-                    { name: 'Wooden Shield', type: 'shield', defense: 3, icon: 'fa-shield-alt' },
-                    { name: 'Health Potion', type: 'consumable', effect: 'heal', amount: 30, icon: 'fa-flask' },
-                    { name: 'Mana Potion', type: 'consumable', effect: 'mana', amount: 20, icon: 'fa-flask' }
-                ],
-                equipped: {
-                    weapon: { name: 'Iron Sword', type: 'weapon', attack: 5, icon: 'fa-sword' },
-                    shield: { name: 'Wooden Shield', type: 'shield', defense: 3, icon: 'fa-shield-alt' }
-                }
-            },
-            currentEnemy: null,
-            inCombat: false,
-            gameMessages: []
-        };
+<script>
+    // Game State
+    const gameState = {
+        player: {
+            name: '',
+            class: '',
+            gender: '',
+            level: 1,
+            exp: 0,
+            expToNextLevel: 100,
+            health: 100,
+            maxHealth: 100,
+            mana: 50,
+            maxMana: 50,
+            attack: 10,
+            defense: 5,
+            gold: 10,
+            inventory: [
+                { name: 'Iron Sword', type: 'weapon', attack: 5, icon: 'fa-s sword' },
+                { name: 'Wooden Shield', type: 'shield', defense: 3, icon: 'fa-shield-alt' },
+                { name: 'Health Potion', type: 'consumable', effect: 'heal', amount: 30, icon: 'fa-flask' },
+                { name: 'Mana Potion', type: 'consumable', effect: 'mana', amount: 20, icon: 'fa-flask' }
+            ],
+            equipped: {
+                weapon: { name: 'Iron Sword', type: 'weapon', attack: 5, icon: 'fa-sword' },
+                shield: { name: 'Wooden Shield', type: 'shield', defense: 3, icon: 'fa-shield-alt' }
+            }
+        },
+        currentEnemy: null,
+        inCombat: false,
+        gameMessages: []
+    };
 
-        // Enemies
-        const enemies = [
-            { name: 'Goblin', health: 30, maxHealth: 30, attack: 8, defense: 2, exp: 20, gold: 5, icon: 'fa-user-ninja' },
-            { name: 'Orc', health: 50, maxHealth: 50, attack: 12, defense: 5, exp: 35, gold: 10, icon: 'fa-user-injured' },
-            { name: 'Skeleton', health: 25, maxHealth: 25, attack: 10, defense: 3, exp: 25, gold: 8, icon: 'fa-skull' },
-            { name: 'Wolf', health: 20, maxHealth: 20, attack: 7, defense: 1, exp: 15, gold: 3, icon: 'fa-paw' },
-            { name: 'Bandit', health: 40, maxHealth: 40, attack: 11, defense: 4, exp: 30, gold: 15, icon: 'fa-user' }
-        ];
+    // Cute Monstergirl Enemies
+    const enemies = [
+        { name: 'Goblin Girl', health: 30, maxHealth: 30, attack: 8, defense: 2, exp: 20, gold: 5, icon: 'fa-user-ninja' },
+        { name: 'Orc Girl', health: 50, maxHealth: 50, attack: 12, defense: 5, exp: 35, gold: 10, icon: 'fa-user-injured' },
+        { name: 'Skeleton Girl', health: 25, maxHealth: 25, attack: 10, defense: 3, exp: 25, gold: 8, icon: 'fa-skull' },
+        { name: 'Wolf Girl', health: 20, maxHealth: 20, attack: 7, defense: 1, exp: 15, gold: 3, icon: 'fa-paw' },
+        { name: 'Bandit Girl', health: 40, maxHealth: 40, attack: 11, defense: 4, exp: 30, gold: 15, icon: 'fa-user' },
+        { name: 'Catgirl', health: 25, maxHealth: 25, attack: 9, defense: 2, exp: 22, gold: 7, icon: 'fa-cat' },
+        { name: 'Bunny Girl', health: 35, maxHealth: 35, attack: 7, defense: 3, exp: 25, gold: 8, icon: 'fa-paw' },
+        { name: 'Fox Girl', health: 28, maxHealth: 28, attack: 10, defense: 2, exp: 24, gold: 9, icon: 'fa-paw' },
+        { name: 'Slime Girl', health: 45, maxHealth: 45, attack: 6, defense: 6, exp: 28, gold: 10, icon: 'fa-droplet' },
+        { name: 'Dragon Girl', health: 60, maxHealth: 60, attack: 15, defense: 8, exp: 50, gold: 25, icon: 'fa-dragon' }
+    ];
 
-        // Game Functions
-        function startNewGame() {
-            document.getElementById('main-menu').classList.add('hidden');
-            document.getElementById('character-creation').classList.remove('hidden');
-            addGameMessage('Begin your adventure by creating your character.');
-        }
+    // Game Functions
+    function startNewGame() {
+        document.getElementById('main-menu').classList.add('hidden');
+        document.getElementById('character-creation').classList.remove('hidden');
+        addGameMessage('Begin your adventure by creating your character.');
+    }
 
-        function selectClass(characterClass) {
-            const cards = document.querySelectorAll('.character-card');
-            cards.forEach(card => card.classList.remove('ring-2', 'ring-yellow-400'));
-            
-            const selectedCard = document.querySelector(`.character-card:nth-child(${characterClass === 'warrior' ? 1 : characterClass === 'mage' ? 2 : 3})`);
-            selectedCard.classList.add('ring-2', 'ring-yellow-400');
-            
-            gameState.player.class = characterClass;
-            
-            // Update stats based on class
-            if (characterClass === 'warrior') {
-                gameState.player.maxHealth = 120;
-                gameState.player.health = 120;
-                gameState.player.attack = 12;
-                gameState.player.defense = 8;
-                gameState.player.mana = 30;
-                gameState.player.maxMana = 30;
-            } else if (characterClass === 'mage') {
-                gameState.player.maxHealth = 70;
-                gameState.player.health = 70;
-                gameState.player.attack = 8;
-                gameState.player.defense = 3;
-                gameState.player.mana = 80;
-                gameState.player.maxMana = 80;
-            } else if (characterClass === 'rogue') {
-                gameState.player.maxHealth = 90;
-                gameState.player.health = 90;
-                gameState.player.attack = 10;
-                gameState.player.defense = 5;
-                gameState.player.mana = 50;
-                gameState.player.maxMana = 50;
-            }
-            
-            addGameMessage(`You selected the ${characterClass} class.`);
+    function selectClass(characterClass) {
+        const cards = document.querySelectorAll('.character-card');
+        cards.forEach(card => card.classList.remove('ring-2', 'ring-yellow-400'));
+        
+        const selectedCard = document.querySelector(`.character-card:nth-child(${characterClass === 'warrior' ? 1 : characterClass === 'mage' ? 2 : 3})`);
+        selectedCard.classList.add('ring-2', 'ring-yellow-400');
+        
+        gameState.player.class = characterClass;
+        
+        // Update stats based on class
+        if (characterClass === 'warrior') {
+            gameState.player.maxHealth = 120;
+            gameState.player.health = 120;
+            gameState.player.attack = 12;
+            gameState.player.defense = 8;
+            gameState.player.mana = 30;
+            gameState.player.maxMana = 30;
+        } else if (characterClass === 'mage') {
+            gameState.player.maxHealth = 70;
+            gameState.player.health = 70;
+            gameState.player.attack = 8;
+            gameState.player.defense = 3;
+            gameState.player.mana = 80;
+            gameState.player.maxMana = 80;
+        } else if (characterClass === 'rogue') {
+            gameState.player.maxHealth = 90;
+            gameState.player.health = 90;
+            gameState.player.attack = 10;
+            gameState.player.defense = 5;
+            gameState.player.mana = 50;
+            gameState.player.maxMana = 50;
         }
+        
+        addGameMessage(`You selected the ${characterClass} class.`);
+    }
 
-        function finalizeCharacter() {
-            const nameInput = document.getElementById('character-name');
-            const genderSelect = document.getElementById('character-gender');
-            
-            if (!nameInput.value.trim()) {
-                addGameMessage('Please enter a name for your character.', 'error');
-                return;
-            }
-            
-            if (!gameState.player.class) {
-                addGameMessage('Please select a class for your character.', 'error');
-                return;
-            }
-            
-            gameState.player.name = nameInput.value.trim();
-            gameState.player.gender = genderSelect.value;
-            
-            // Start the game
-            document.getElementById('character-creation').classList.add('hidden');
-            document.getElementById('game-screen').classList.remove('hidden');
-            
-            // Update character display
-            updateCharacterDisplay();
-            
-            addGameMessage(`Welcome, ${gameState.player.name} the ${gameState.player.class}! Your adventure begins now.`, 'success');
+    function finalizeCharacter() {
+        const nameInput = document.getElementById('character-name');
+        const genderSelect = document.getElementById('character-gender');
+        
+        if (!nameInput.value.trim()) {
+            addGameMessage('Please enter a name for your character.', 'error');
+            return;
         }
+        
+        if (!gameState.player.class) {
+            addGameMessage('Please select a class for your character.', 'error');
+            return;
+        }
+        
+        gameState.player.name = nameInput.value.trim();
+        gameState.player.gender = genderSelect.value;
+        
+        // Start the game
+        document.getElementById('character-creation').classList.add('hidden');
+        document.getElementById('game-screen').classList.remove('hidden');
+        
+        // Update character display
+        updateCharacterDisplay();
+        
+        addGameMessage(`Welcome, ${gameState.player.name} the ${gameState.player.class}! Your adventure begins now.`, 'success');
+    }
 
-        function updateCharacterDisplay() {
-            // Update character panel
-            document.getElementById('character-display-name').textContent = gameState.player.name;
-            document.getElementById('character-display-class').textContent = `Class: ${capitalizeFirstLetter(gameState.player.class)}`;
-            
-            // Update stats
-            document.getElementById('health-text').textContent = `${gameState.player.health}/${gameState.player.maxHealth}`;
-            document.getElementById('mana-text').textContent = `${gameState.player.mana}/${gameState.player.maxMana}`;
-            document.getElementById('exp-text').textContent = `${gameState.player.exp}/${gameState.player.expToNextLevel}`;
-            document.getElementById('level-text').textContent = gameState.player.level;
-            document.getElementById('gold-text').textContent = gameState.player.gold;
-            document.getElementById('attack-text').textContent = gameState.player.attack + (gameState.player.equipped.weapon ? gameState.player.equipped.weapon.attack : 0);
-            document.getElementById('defense-text').textContent = gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0);
-            
-            // Update health bar
-            const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100;
-            document.getElementById('health-bar').style.width = `${healthPercent}%`;
-            
-            // Update mana bar
-            const manaPercent = (gameState.player.mana / gameState.player.maxMana) * 100;
-            document.getElementById('mana-bar').style.width = `${manaPercent}%`;
-            
-            // Update exp bar
-            const expPercent = (gameState.player.exp / gameState.player.expToNextLevel) * 100;
-            document.getElementById('exp-bar').style.width = `${expPercent}%`;
-            
-            // Update character icon based on class
-            const characterIcon = document.getElementById('character-icon');
-            const playerCombatIcon = document.getElementById('player-combat-icon');
-            
-            if (gameState.player.class === 'warrior') {
-                characterIcon.innerHTML = '<i class="fas fa-shield-alt text-red-500"></i>';
-                playerCombatIcon.innerHTML = '<i class="fas fa-shield-alt text-red-500"></i>';
-            } else if (gameState.player.class === 'mage') {
-                characterIcon.innerHTML = '<i class="fas fa-hat-wizard text-blue-500"></i>';
-                playerCombatIcon.innerHTML = '<i class="fas fa-hat-wizard text-blue-500"></i>';
-            } else if (gameState.player.class === 'rogue') {
-                characterIcon.innerHTML = '<i class="fas fa-user-ninja text-green-500"></i>';
-                playerCombatIcon.innerHTML = '<i class="fas fa-user-ninja text-green-500"></i>';
-            }
-            
-            // Update player combat name
-            document.getElementById('player-combat-name').textContent = gameState.player.name;
+    function updateCharacterDisplay() {
+        // Update character panel
+        document.getElementById('character-display-name').textContent = gameState.player.name;
+        document.getElementById('character-display-class').textContent = `Class: ${capitalizeFirstLetter(gameState.player.class)}`;
+        
+        // Update stats
+        document.getElementById('health-text').textContent = `${gameState.player.health}/${gameState.player.maxHealth}`;
+        document.getElementById('mana-text').textContent = `${gameState.player.mana}/${gameState.player.maxMana}`;
+        document.getElementById('exp-text').textContent = `${gameState.player.exp}/${gameState.player.expToNextLevel}`;
+        document.getElementById('level-text').textContent = gameState.player.level;
+        document.getElementById('gold-text').textContent = gameState.player.gold;
+        document.getElementById('attack-text').textContent = gameState.player.attack + (gameState.player.equipped.weapon ? gameState.player.equipped.weapon.attack : 0);
+        document.getElementById('defense-text').textContent = gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0);
+        
+        // Update health bar
+        const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100;
+        document.getElementById('health-bar').style.width = `${healthPercent}%`;
+        
+        // Update mana bar
+        const manaPercent = (gameState.player.mana / gameState.player.maxMana) * 100;
+        document.getElementById('mana-bar').style.width = `${manaPercent}%`;
+        
+        // Update exp bar
+        const expPercent = (gameState.player.exp / gameState.player.expToNextLevel) * 100;
+        document.getElementById('exp-bar').style.width = `${expPercent}%`;
+        
+        // Update character icon based on class
+        const characterIcon = document.getElementById('character-icon');
+        const playerCombatIcon = document.getElementById('player-combat-icon');
+        
+        if (gameState.player.class === 'warrior') {
+            characterIcon.innerHTML = '<i class="fas fa-shield-alt text-red-500"></i>';
+            playerCombatIcon.innerHTML = '<i class="fas fa-shield-alt text-red-500"></i>';
+        } else if (gameState.player.class === 'mage') {
+            characterIcon.innerHTML = '<i class="fas fa-hat-wizard text-blue-500"></i>';
+            playerCombatIcon.innerHTML = '<i class="fas fa-hat-wizard text-blue-500"></i>';
+        } else if (gameState.player.class === 'rogue') {
+            characterIcon.innerHTML = '<i class="fas fa-user-ninja text-green-500"></i>';
+            playerCombatIcon.innerHTML = '<i class="fas fa-user-ninja text-green-500"></i>';
         }
+        
+        // Update player combat name
+        document.getElementById('player-combat-name').textContent = gameState.player.name;
+    }
 
-        function addGameMessage(message, type = 'info') {
-            const messagesDiv = document.getElementById('game-messages');
-            const messageElement = document.createElement('p');
-            
-            if (type === 'error') {
-                messageElement.className = 'text-red-400';
-            } else if (type === 'success') {
-                messageElement.className = 'text-green-400';
-            } else if (type === 'warning') {
-                messageElement.className = 'text-yellow-400';
-            } else {
-                messageElement.className = 'text-gray-300';
-            }
-            
-            messageElement.textContent = message;
-            messagesDiv.appendChild(messageElement);
-            messagesDiv.scrollTop = messagesDiv.scrollHeight;
-            
-            // Add to game state for saving
-            gameState.gameMessages.push(message);
+    function addGameMessage(message, type = 'info') {
+        const messagesDiv = document.getElementById('game-messages');
+        const messageElement = document.createElement('p');
+        
+        if (type === 'error') {
+            messageElement.className = 'text-red-400';
+        } else if (type === 'success') {
+            messageElement.className = 'text-green-400';
+        } else if (type === 'warning') {
+            messageElement.className = 'text-yellow-400';
+        } else {
+            messageElement.className = 'text-gray-300';
         }
+        
+        messageElement.textContent = message;
+        messagesDiv.appendChild(messageElement);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+        
+        // Add to game state for saving
+        gameState.gameMessages.push(message);
+    }
 
-        function explore() {
-            if (gameState.inCombat) {
-                addGameMessage('You are already in combat!', 'error');
-                return;
-            }
-            
-            // 70% chance to find an enemy
-            if (Math.random() < 0.7) {
-                startCombat();
+    function explore() {
+        if (gameState.inCombat) {
+            addGameMessage('You are already in combat!', 'error');
+            return;
+        }
+        
+        // 70% chance to find an enemy
+        if (Math.random() < 0.7) {
+            startCombat();
+        } else {
+            // 30% chance to find something else
+            const randomEvent = Math.random();
+            
+            if (randomEvent < 0.5) {
+                // Found gold
+                const goldFound = Math.floor(Math.random() * 10) + 5;
+                gameState.player.gold += goldFound;
+                updateCharacterDisplay();
+                addGameMessage(`You found ${goldFound} gold coins on the ground!`, 'success');
             } else {
-                // 30% chance to find something else
-                const randomEvent = Math.random();
-                
-                if (randomEvent < 0.5) {
-                    // Found gold
-                    const goldFound = Math.floor(Math.random() * 10) + 5;
-                    gameState.player.gold += goldFound;
-                    updateCharacterDisplay();
-                    addGameMessage(`You found ${goldFound} gold coins on the ground!`, 'success');
-                } else {
-                    // Found a health potion
-                    gameState.player.inventory.push({ 
-                        name: 'Health Potion', 
-                        type: 'consumable', 
-                        effect: 'heal', 
-                        amount: 30, 
-                        icon: 'fa-flask' 
-                    });
-                    addGameMessage('You found a Health Potion!', 'success');
-                }
+                // Found a health potion
+                gameState.player.inventory.push({ 
+                    name: 'Health Potion', 
+                    type: 'consumable', 
+                    effect: 'heal', 
+                    amount: 30, 
+                    icon: 'fa-flask' 
+                });
+                addGameMessage('You found a Health Potion!', 'success');
             }
         }
+    }
 
-        function startCombat() {
-            gameState.inCombat = true;
-            
-            // Select a random enemy
-            const randomEnemyIndex = Math.floor(Math.random() * enemies.length);
-            gameState.currentEnemy = {...enemies[randomEnemyIndex]};
-            
-            // Update combat UI
-            document.getElementById('combat-area').classList.remove('hidden');
-            document.getElementById('enemy-name').textContent = gameState.currentEnemy.name;
-            document.getElementById('enemy-health-text').textContent = `${gameState.currentEnemy.health}/${gameState.currentEnemy.maxHealth}`;
-            document.getElementById('enemy-health-bar').style.width = '100%';
-            document.getElementById('enemy-icon').innerHTML = `<i class="fas ${gameState.currentEnemy.icon}"></i>`;
-            
-            // Update player stats in combat
-            document.getElementById('player-health-text').textContent = `${gameState.player.health}/${gameState.player.maxHealth}`;
-            const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100;
-            document.getElementById('player-health-bar').style.width = `${healthPercent}%`;
-            
-            addGameMessage(`A wild ${gameState.currentEnemy.name} appears!`, 'warning');
-        }
+    function startCombat() {
+        gameState.inCombat = true;
+        
+        // Select a random enemy
+        const randomEnemyIndex = Math.floor(Math.random() * enemies.length);
+        gameState.currentEnemy = {...enemies[randomEnemyIndex]};
+        
+        // Update combat UI
+        document.getElementById('combat-area').classList.remove('hidden');
+        document.getElementById('enemy-name').textContent = gameState.currentEnemy.name;
+        document.getElementById('enemy-health-text').textContent = `${gameState.currentEnemy.health}/${gameState.currentEnemy.maxHealth}`;
+        document.getElementById('enemy-health-bar').style.width = '100%';
+        document.getElementById('enemy-icon').innerHTML = `<i class="fas ${gameState.currentEnemy.icon}"></i>`;
+        
+        // Update player stats in combat
+        document.getElementById('player-health-text').textContent = `${gameState.player.health}/${gameState.player.maxHealth}`;
+        const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100;
+        document.getElementById('player-health-bar').style.width = `${healthPercent}%`;
+        
+        addGameMessage(`A wild ${gameState.currentEnemy.name} appears!`, 'warning');
+    }
 
-        function playerAttack() {
-            if (!gameState.inCombat || !gameState.currentEnemy) {
-                addGameMessage('There is nothing to attack!', 'error');
-                return;
-            }
-            
-            // Calculate player damage
-            const playerAttackPower = gameState.player.attack + (gameState.player.equipped.weapon ? gameState.player.equipped.weapon.attack : 0);
-            const damage = Math.max(1, playerAttackPower - Math.floor(gameState.currentEnemy.defense / 2));
-            
-            // Apply damage to enemy
-            gameState.currentEnemy.health -= damage;
-            
-            // Update enemy health bar
-            const enemyHealthPercent = (gameState.currentEnemy.health / gameState.currentEnemy.maxHealth) * 100;
-            document.getElementById('enemy-health-bar').style.width = `${Math.max(0, enemyHealthPercent)}%`;
-            document.getElementById('enemy-health-text').textContent = `${Math.max(0, gameState.currentEnemy.health)}/${gameState.currentEnemy.maxHealth}`;
-            
-            // Show damage text
-            showDamageText(document.querySelector('#combat-area .relative:last-child'), damage);
-            
-            addGameMessage(`You attack the ${gameState.currentEnemy.name} for ${damage} damage!`, 'success');
-            
-            // Check if enemy is defeated
-            if (gameState.currentEnemy.health <= 0) {
-                enemyDefeated();
-                return;
-            }
-            
-            // Enemy attacks back
-            setTimeout(() => {
-                enemyAttack();
-            }, 1000);
+    function playerAttack() {
+        if (!gameState.inCombat || !gameState.currentEnemy) {
+            addGameMessage('There is nothing to attack!', 'error');
+            return;
         }
-
-        function playerSpell() {
-            if (!gameState.inCombat || !gameState.currentEnemy) {
-                addGameMessage('There is nothing to attack!', 'error');
-                return;
-            }
-            
-            if (gameState.player.mana < 15) {
-                addGameMessage('Not enough mana to cast a spell!', 'error');
-                return;
-            }
-            
-            // Use mana
-            gameState.player.mana -= 15;
-            updateCharacterDisplay();
-            
-            // Calculate spell damage (more powerful than regular attack)
-            let spellDamage;
-            if (gameState.player.class === 'mage') {
-                spellDamage = Math.max(3, 15 + Math.floor(Math.random() * 10));
-            } else {
-                spellDamage = Math.max(3, 10 + Math.floor(Math.random() * 5));
-            }
-            
-            // Apply damage to enemy
-            gameState.currentEnemy.health -= spellDamage;
-            
-            // Update enemy health bar
-            const enemyHealthPercent = (gameState.currentEnemy.health / gameState.currentEnemy.maxHealth) * 100;
-            document.getElementById('enemy-health-bar').style.width = `${Math.max(0, enemyHealthPercent)}%`;
-            document.getElementById('enemy-health-text').textContent = `${Math.max(0, gameState.currentEnemy.health)}/${gameState.currentEnemy.maxHealth}`;
-            
-            // Show damage text
-            showDamageText(document.querySelector('#combat-area .relative:last-child'), spellDamage, 'blue');
-            
-            addGameMessage(`You cast a spell on the ${gameState.currentEnemy.name} for ${spellDamage} damage!`, 'success');
-            
-            // Check if enemy is defeated
-            if (gameState.currentEnemy.health <= 0) {
-                enemyDefeated();
-                return;
-            }
-            
-            // Enemy attacks back
-            setTimeout(() => {
-                enemyAttack();
-            }, 1000);
+        
+        // Calculate player damage
+        const playerAttackPower = gameState.player.attack + (gameState.player.equipped.weapon ? gameState.player.equipped.weapon.attack : 0);
+        const damage = Math.max(1, playerAttackPower - Math.floor(gameState.currentEnemy.defense / 2));
+        
+        // Apply damage to enemy
+        gameState.currentEnemy.health -= damage;
+        
+        // Update enemy health bar
+        const enemyHealthPercent = (gameState.currentEnemy.health / gameState.currentEnemy.maxHealth) * 100;
+        document.getElementById('enemy-health-bar').style.width = `${Math.max(0, enemyHealthPercent)}%`;
+        document.getElementById('enemy-health-text').textContent = `${Math.max(0, gameState.currentEnemy.health)}/${gameState.currentEnemy.maxHealth}`;
+        
+        // Show damage text
+        showDamageText(document.querySelector('#combat-area .relative:last-child'), damage);
+        
+        addGameMessage(`You attack the ${gameState.currentEnemy.name} for ${damage} damage!`, 'success');
+        
+        // Check if enemy is defeated
+        if (gameState.currentEnemy.health <= 0) {
+            enemyDefeated();
+            return;
         }
+        
+        // Enemy attacks back
+        setTimeout(() => {
+            enemyAttack();
+        }, 1000);
+    }
 
-        function playerDefend() {
-            if (!gameState.inCombat || !gameState.currentEnemy) {
-                addGameMessage('There is nothing to defend against!', 'error');
-                return;
-            }
-            
-            addGameMessage(`You take a defensive stance, reducing damage from the next attack.`, 'info');
-            
-            // Enemy attacks with reduced damage
-            setTimeout(() => {
-                // Calculate enemy damage (reduced by 50% when defending)
-                const enemyDamage = Math.max(1, Math.floor((gameState.currentEnemy.attack - (gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0))) / 2));
-                
-                // Apply damage to player
-                gameState.player.health -= enemyDamage;
-                
-                // Update player health bar
-                const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100;
-                document.getElementById('player-health-bar').style.width = `${Math.max(0, healthPercent)}%`;
-                document.getElementById('player-health-text').textContent = `${Math.max(0, gameState.player.health)}/${gameState.player.maxHealth}`;
-                document.getElementById('health-bar').style.width = `${Math.max(0, healthPercent)}%`;
-                document.getElementById('health-text').textContent = `${Math.max(0, gameState.player.health)}/${gameState.player.maxHealth}`;
-                
-                // Show damage text
-                showDamageText(document.querySelector('#combat-area .relative:first-child'), enemyDamage);
-                
-                addGameMessage(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage (reduced by your defense)!`, 'warning');
-                
-                // Check if player is defeated
-                if (gameState.player.health <= 0) {
-                    playerDefeated();
-                }
-            }, 1000);
+    function playerSpell() {
+        if (!gameState.inCombat || !gameState.currentEnemy) {
+            addGameMessage('There is nothing to attack!', 'error');
+            return;
         }
-
-        function playerFlee() {
-            if (!gameState.inCombat || !gameState.currentEnemy) {
-                addGameMessage('There is nothing to flee from!', 'error');
-                return;
-            }
-            
-            // 60% chance to flee successfully
-            if (Math.random() < 0.6) {
-                addGameMessage(`You successfully fled from the ${gameState.currentEnemy.name}!`, 'success');
-                endCombat();
-            } else {
-                addGameMessage(`You failed to flee! The ${gameState.currentEnemy.name} attacks you!`, 'error');
-                
-                // Enemy attacks
-                setTimeout(() => {
-                    enemyAttack();
-                }, 1000);
-            }
+        
+        if (gameState.player.mana < 15) {
+            addGameMessage('Not enough mana to cast a spell!', 'error');
+            return;
         }
+        
+        // Use mana
+        gameState.player.mana -= 15;
+        updateCharacterDisplay();
+        
+        // Calculate spell damage (more powerful than regular attack)
+        let spellDamage;
+        if (gameState.player.class === 'mage') {
+            spellDamage = Math.max(3, 15 + Math.floor(Math.random() * 10));
+        } else {
+            spellDamage = Math.max(3, 10 + Math.floor(Math.random() * 5));
+        }
+        
+        // Apply damage to enemy
+        gameState.currentEnemy.health -= spellDamage;
+        
+        // Update enemy health bar
+        const enemyHealthPercent = (gameState.currentEnemy.health / gameState.currentEnemy.maxHealth) * 100;
+        document.getElementById('enemy-health-bar').style.width = `${Math.max(0, enemyHealthPercent)}%`;
+        document.getElementById('enemy-health-text').textContent = `${Math.max(0, gameState.currentEnemy.health)}/${gameState.currentEnemy.maxHealth}`;
+        
+        // Show damage text
+        showDamageText(document.querySelector('#combat-area .relative:last-child'), spellDamage, 'blue');
+        
+        addGameMessage(`You cast a spell on the ${gameState.currentEnemy.name} for ${spellDamage} damage!`, 'success');
+        
+        // Check if enemy is defeated
+        if (gameState.currentEnemy.health <= 0) {
+            enemyDefeated();
+            return;
+        }
+        
+        // Enemy attacks back
+        setTimeout(() => {
+            enemyAttack();
+        }, 1000);
+    }
 
-        function enemyAttack() {
-            if (!gameState.inCombat || !gameState.currentEnemy) return;
-            
-            // Calculate enemy damage
-            const enemyDamage = Math.max(1, gameState.currentEnemy.attack - (gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0)));
+    function playerDefend() {
+        if (!gameState.inCombat || !gameState.currentEnemy) {
+            addGameMessage('There is nothing to defend against!', 'error');
+            return;
+        }
+        
+        addGameMessage(`You take a defensive stance, reducing damage from the next attack.`, 'info');
+        
+        // Enemy attacks with reduced damage
+        setTimeout(() => {
+            // Calculate enemy damage (reduced by 50% when defending)
+            const enemyDamage = Math.max(1, Math.floor((gameState.currentEnemy.attack - (gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0))) / 2));
             
             // Apply damage to player
             gameState.player.health -= enemyDamage;
@@ -809,183 +766,231 @@
             // Show damage text
             showDamageText(document.querySelector('#combat-area .relative:first-child'), enemyDamage);
             
-            addGameMessage(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage!`, 'warning');
+            addGameMessage(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage (reduced by your defense)!`, 'warning');
             
             // Check if player is defeated
             if (gameState.player.health <= 0) {
                 playerDefeated();
             }
-        }
+        }, 1000);
+    }
 
-        function enemyDefeated() {
-            addGameMessage(`You defeated the ${gameState.currentEnemy.name}!`, 'success');
-            
-            // Gain experience and gold
-            gameState.player.exp += gameState.currentEnemy.exp;
-            gameState.player.gold += gameState.currentEnemy.gold;
-            
-            addGameMessage(`Gained ${gameState.currentEnemy.exp} experience and ${gameState.currentEnemy.gold} gold.`, 'success');
-            
-            // Check for level up
-            checkLevelUp();
-            
-            // End combat
-            endCombat();
+    function playerFlee() {
+        if (!gameState.inCombat || !gameState.currentEnemy) {
+            addGameMessage('There is nothing to flee from!', 'error');
+            return;
         }
-
-        function playerDefeated() {
-            addGameMessage(`You were defeated by the ${gameState.currentEnemy.name}!`, 'error');
-            addGameMessage('You wake up in town, having lost some gold and experience.', 'warning');
-            
-            // Penalty for dying
-            gameState.player.exp = Math.max(0, gameState.player.exp - 10);
-            gameState.player.gold = Math.max(0, gameState.player.gold - 5);
-            
-            // Restore some health
-            gameState.player.health = Math.floor(gameState.player.maxHealth * 0.3);
-            
-            // Update display
-            updateCharacterDisplay();
-            
-            // End combat
+        
+        // 60% chance to flee successfully
+        if (Math.random() < 0.6) {
+            addGameMessage(`You successfully fled from the ${gameState.currentEnemy.name}!`, 'success');
             endCombat();
+        } else {
+            addGameMessage(`You failed to flee! The ${gameState.currentEnemy.name} attacks you!`, 'error');
+            
+            // Enemy attacks
+            setTimeout(() => {
+                enemyAttack();
+            }, 1000);
         }
+    }
 
-        function endCombat() {
-            gameState.inCombat = false;
-            gameState.currentEnemy = null;
-            document.getElementById('combat-area').classList.add('hidden');
+    function enemyAttack() {
+        if (!gameState.inCombat || !gameState.currentEnemy) return;
+        
+        // Calculate enemy damage
+        const enemyDamage = Math.max(1, gameState.currentEnemy.attack - (gameState.player.defense + (gameState.player.equipped.shield ? gameState.player.equipped.shield.defense : 0)));
+        
+        // Apply damage to player
+        gameState.player.health -= enemyDamage;
+        
+        // Update player health bar
+        const healthPercent = (gameState.player.health / gameState.player.maxHealth) * 100;
+        document.getElementById('player-health-bar').style.width = `${Math.max(0, healthPercent)}%`;
+        document.getElementById('player-health-text').textContent = `${Math.max(0, gameState.player.health)}/${gameState.player.maxHealth}`;
+        document.getElementById('health-bar').style.width = `${Math.max(0, healthPercent)}%`;
+        document.getElementById('health-text').textContent = `${Math.max(0, gameState.player.health)}/${gameState.player.maxHealth}`;
+        
+        // Show damage text
+        showDamageText(document.querySelector('#combat-area .relative:first-child'), enemyDamage);
+        
+        addGameMessage(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage!`, 'warning');
+        
+        // Check if player is defeated
+        if (gameState.player.health <= 0) {
+            playerDefeated();
         }
+    }
 
-        function checkLevelUp() {
-            if (gameState.player.exp >= gameState.player.expToNextLevel) {
-                gameState.player.level++;
-                gameState.player.exp -= gameState.player.expToNextLevel;
-                gameState.player.expToNextLevel = Math.floor(gameState.player.expToNextLevel * 1.2);
-                
-                // Improve stats
-                gameState.player.maxHealth += 10;
-                gameState.player.health = gameState.player.maxHealth;
-                gameState.player.maxMana += 5;
-                gameState.player.mana = gameState.player.maxMana;
-                gameState.player.attack += 2;
-                gameState.player.defense += 1;
-                
-                addGameMessage(`Level up! You are now level ${gameState.player.level}!`, 'success');
-                addGameMessage('Your stats have improved!', 'info');
-                
-                updateCharacterDisplay();
-            }
-        }
+    function enemyDefeated() {
+        addGameMessage(`You defeated the ${gameState.currentEnemy.name}!`, 'success');
+        
+        // Gain experience and gold
+        gameState.player.exp += gameState.currentEnemy.exp;
+        gameState.player.gold += gameState.currentEnemy.gold;
+        
+        addGameMessage(`Gained ${gameState.currentEnemy.exp} experience and ${gameState.currentEnemy.gold} gold.`, 'success');
+        
+        // Check for level up
+        checkLevelUp();
+        
+        // End combat
+        endCombat();
+    }
 
-        function rest() {
-            if (gameState.inCombat) {
-                addGameMessage('You cannot rest while in combat!', 'error');
-                return;
-            }
-            
-            // Restore health and mana
-            const healthRestored = Math.floor(gameState.player.maxHealth * 0.3);
-            const manaRestored = Math.floor(gameState.player.maxMana * 0.3);
-            
-            gameState.player.health = Math.min(gameState.player.maxHealth, gameState.player.health + healthRestored);
-            gameState.player.mana = Math.min(gameState.player.maxMana, gameState.player.mana + manaRestored);
+    function playerDefeated() {
+        addGameMessage(`You were defeated by the ${gameState.currentEnemy.name}!`, 'error');
+        addGameMessage('You wake up in town, having lost some gold and experience.', 'warning');
+        
+        // Penalty for dying
+        gameState.player.exp = Math.max(0, gameState.player.exp - 10);
+        gameState.player.gold = Math.max(0, gameState.player.gold - 5);
+        
+        // Restore some health
+        gameState.player.health = Math.floor(gameState.player.maxHealth * 0.3);
+        
+        // Update display
+        updateCharacterDisplay();
+        
+        // End combat
+        endCombat();
+    }
+
+    function endCombat() {
+        gameState.inCombat = false;
+        gameState.currentEnemy = null;
+        document.getElementById('combat-area').classList.add('hidden');
+    }
+
+    function checkLevelUp() {
+        if (gameState.player.exp >= gameState.player.expToNextLevel) {
+            gameState.player.level++;
+            gameState.player.exp -= gameState.player.expToNextLevel;
+            gameState.player.expToNextLevel = Math.floor(gameState.player.expToNextLevel * 1.2);
+            
+            // Improve stats
+            gameState.player.maxHealth += 10;
+            gameState.player.health = gameState.player.maxHealth;
+            gameState.player.maxMana += 5;
+            gameState.player.mana = gameState.player.maxMana;
+            gameState.player.attack += 2;
+            gameState.player.defense += 1;
+            
+            addGameMessage(`Level up! You are now level ${gameState.player.level}!`, 'success');
+            addGameMessage('Your stats have improved!', 'info');
             
-            addGameMessage(`You rest and recover ${healthRestored} health and ${manaRestored} mana.`, 'success');
             updateCharacterDisplay();
         }
+    }
 
-        function visitTown() {
-            if (gameState.inCombat) {
-                addGameMessage('You cannot visit town while in combat!', 'error');
-                return;
-            }
-            
-            document.getElementById('town-area').classList.remove('hidden');
-            addGameMessage('You enter the town square.', 'info');
+    function rest() {
+        if (gameState.inCombat) {
+            addGameMessage('You cannot rest while in combat!', 'error');
+            return;
         }
+        
+        // Restore health and mana
+        const healthRestored = Math.floor(gameState.player.maxHealth * 0.3);
+        const manaRestored = Math.floor(gameState.player.maxMana * 0.3);
+        
+        gameState.player.health = Math.min(gameState.player.maxHealth, gameState.player.health + healthRestored);
+        gameState.player.mana = Math.min(gameState.player.maxMana, gameState.player.mana + manaRestored);
+        
+        addGameMessage(`You rest and recover ${healthRestored} health and ${manaRestored} mana.`, 'success');
+        updateCharacterDisplay();
+    }
 
-        function leaveTown() {
-            document.getElementById('town-area').classList.add('hidden');
-            addGameMessage('You leave the town.', 'info');
+    function visitTown() {
+        if (gameState.inCombat) {
+            addGameMessage('You cannot visit town while in combat!', 'error');
+            return;
         }
+        
+        document.getElementById('town-area').classList.remove('hidden');
+        addGameMessage('You enter the town square.', 'info');
+    }
 
-        function visitShop() {
-            addGameMessage('The shop is currently closed. Come back later!', 'info');
-        }
+    function leaveTown() {
+        document.getElementById('town-area').classList.add('hidden');
+        addGameMessage('You leave the town.', 'info');
+    }
 
-        function visitTavern() {
-            addGameMessage('You enjoy a drink at the tavern and hear rumors of a dragon in the mountains.', 'info');
-        }
+    function visitShop() {
+        addGameMessage('The shop is currently closed. Come back later!', 'info');
+    }
 
-        function visitGuild() {
-            addGameMessage('The Adventurer\'s Guild has no quests available right now.', 'info');
-        }
+    function visitTavern() {
+        addGameMessage('You enjoy a drink at the tavern and hear rumors of a dragon in the mountains.', 'info');
+    }
 
-        function train() {
-            if (gameState.inCombat) {
-                addGameMessage('You cannot train while in combat!', 'error');
-                return;
-            }
-            
-            // Training costs gold but improves stats
-            if (gameState.player.gold < 5) {
-                addGameMessage('You need at least 5 gold to train!', 'error');
-                return;
-            }
-            
-            gameState.player.gold -= 5;
-            
-            // Random stat improvement
-            const statToImprove = ['attack', 'defense'][Math.floor(Math.random() * 2)];
-            const improvement = 1;
-            
-            if (statToImprove === 'attack') {
-                gameState.player.attack += improvement;
-                addGameMessage(`After training, your attack increased by ${improvement}! (Cost: 5 gold)`, 'success');
-            } else {
-                gameState.player.defense += improvement;
-                addGameMessage(`After training, your defense increased by ${improvement}! (Cost: 5 gold)`, 'success');
-            }
-            
-            updateCharacterDisplay();
-        }
+    function visitGuild() {
+        addGameMessage('The Adventurer\'s Guild has no quests available right now.', 'info');
+    }
 
-        function openInventory() {
-            document.getElementById('inventory-modal').classList.remove('hidden');
+    function train() {
+        if (gameState.inCombat) {
+            addGameMessage('You cannot train while in combat!', 'error');
+            return;
         }
-
-        function closeInventory() {
-            document.getElementById('inventory-modal').classList.add('hidden');
+        
+        // Training costs gold but improves stats
+        if (gameState.player.gold < 5) {
+            addGameMessage('You need at least 5 gold to train!', 'error');
+            return;
         }
-
-        function openQuests() {
-            addGameMessage('You have no active quests at the moment.', 'info');
+        
+        gameState.player.gold -= 5;
+        
+        // Random stat improvement
+        const statToImprove = ['attack', 'defense'][Math.floor(Math.random() * 2)];
+        const improvement = 1;
+        
+        if (statToImprove === 'attack') {
+            gameState.player.attack += improvement;
+            addGameMessage(`After training, your attack increased by ${improvement}! (Cost: 5 gold)`, 'success');
+        } else {
+            gameState.player.defense += improvement;
+            addGameMessage(`After training, your defense increased by ${improvement}! (Cost: 5 gold)`, 'success');
         }
+        
+        updateCharacterDisplay();
+    }
 
-        function saveGame() {
-            localStorage.setItem('epicRpgSave', JSON.stringify(gameState));
-            addGameMessage('Game saved successfully!', 'success');
-        }
+    function openInventory() {
+        document.getElementById('inventory-modal').classList.remove('hidden');
+    }
 
-        function loadGame() {
-            const savedGame = localStorage.getItem('epicRpgSave');
-            
-            if (savedGame) {
-                try {
-                    const parsedGame = JSON.parse(savedGame);
-                    Object.assign(gameState, parsedGame);
-                    
-                    document.getElementById('main-menu').classList.add('hidden');
-                    document.getElementById('game-screen').classList.remove('hidden');
-                    
-                    updateCharacterDisplay();
-                    addGameMessage(`Welcome back, ${gameState.player.name}! Game loaded successfully.`, 'success');
-                } catch (e) {
-                    addGameMessage('Failed to load saved game.', 'error');
-                }
-            } else {
-                addGameMessage('No saved game found.', 'error');
+    function closeInventory() {
+        document.getElementById('inventory-modal').classList.add('hidden');
+    }
+
+    function openQuests() {
+        addGameMessage('You have no active quests at the moment.', 'info');
+    }
+
+    function saveGame() {
+        localStorage.setItem('epicRpgSave', JSON.stringify(gameState));
+        addGameMessage('Game saved successfully!', 'success');
+    }
+
+    function loadGame() {
+        const savedGame = localStorage.getItem('epicRpgSave');
+        
+        if (savedGame) {
+            try {
+                const parsedGame = JSON.parse(savedGame);
+                Object.assign(gameState, parsedGame);
+                
+                document.getElementById('main-menu').classList.add('hidden');
+                document.getElementById('game-screen').classList.remove('hidden');
+                
+                updateCharacterDisplay();
+                addGameMessage(`Welcome back, ${gameState.player.name}! Game loaded successfully.`, 'success');
+            } catch (e) {
+                addGameMessage('Failed to load saved game.', 'error');
+            }
+        } else {
+            addGameMessage('No saved game found.', 'error');
             }
         }