{"asset_map": {"player_hero_warrior": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/d12cd048-4d0e-4594-9de3-f5ef7ba405d4.webp?scale=13", "type": "image", "prompt": "A brave fantasy warrior with sword and shield, full body standing illustration, cartoon art style, bright colors, game-ready character asset, transparent background", "description": "Main warrior hero character for the hero roster", "subtype": "character", "aspect_ratio": [1024, 1536], "compression_suggestion": "high", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "player_hero_archer": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/3fd30e55-56b5-48d4-bb67-d94bd5af3e78.webp?scale=13", "type": "image", "prompt": "A skilled fantasy archer with bow and quiver, full body standing illustration, cartoon art style, bright colors, game-ready character asset, transparent background", "description": "Archer hero character with bow and arrows", "subtype": "character", "aspect_ratio": [1024, 1536], "compression_suggestion": "high", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "player_hero_mage": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/934ad4e1-e6e7-4194-9b06-81879d14207d.webp?scale=13", "type": "image", "prompt": "A wise fantasy wizard with staff and robes, full body standing illustration, cartoon art style, bright colors, magical aura, game-ready character asset, transparent background", "description": "Magical wizard hero character", "subtype": "character", "aspect_ratio": [1024, 1536], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_goblin": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/0c81d4e4-55b0-40da-b4d5-ef6740425a08.webp?scale=55", "type": "image", "prompt": "A small green goblin monster with club, full body standing illustration, cartoon art style, slightly menacing but not scary, game-ready character asset, transparent background", "description": "Basic goblin enemy for early stages", "subtype": "character", "aspect_ratio": [1024, 1536], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_forest_guardian": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/6ed8cc89-1b42-4507-9349-2bef858fb153.webp?scale=55", "type": "image", "prompt": "A massive tree-like forest guardian boss, imposing and powerful, full body standing illustration, cartoon art style, detailed bark texture, glowing eyes, game-ready character asset, transparent background", "description": "Boss monster for the forest world", "subtype": "character", "aspect_ratio": [1024, 1536], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_enchanted_forest": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/83047041-c5d0-4847-8485-ec7a54bcba83.webp", "type": "image", "prompt": "A magical enchanted forest with tall trees, glowing mushrooms, and dappled sunlight, fantasy cartoon art style, bright and colorful, detailed environment art", "description": "Background for the enchanted forest world", "subtype": "background", "aspect_ratio": [1024, 1536], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_crystal_caves": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/216020a3-25ee-4841-a2cf-1c3ca7113bc2.webp", "type": "image", "prompt": "A sparkling crystal cave with glowing gems and stalactites, fantasy cartoon art style, blue and purple color scheme, magical lighting effects, detailed environment art", "description": "Background for the crystal caves world", "subtype": "background", "aspect_ratio": [1024, 1536], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "gold_coin": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/aacb44d2-1287-4ee2-b661-ce290833741b.webp?scale=6", "type": "image", "prompt": "A shiny golden coin with fantasy engravings, cartoon art style, bright and appealing, game-ready collectible asset, transparent background", "description": "Gold coin collectible that drops from defeated monsters", "subtype": "object", "aspect_ratio": [1024, 1024], "compression_suggestion": "high", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "upgrade_button": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/7629cc88-3c69-46c4-ba1c-c128c52f1913.webp", "type": "image", "prompt": "A fantasy-themed upgrade button with ornate border, bright green color, plus symbol, cartoon UI style, game-ready interface element, transparent background", "description": "UI button for upgrading heroes and abilities", "subtype": "ui", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "tap_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/a0448dd4-02a7-4ebc-b815-6ef74a62d31f.mp3", "type": "audio", "prompt": "Quick sword slash sound effect, satisfying impact, cartoon game style", "description": "Sound effect when player taps to attack", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": "short", "loop": false, "animation": null, "size_hint": null}, "gold_collect_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/a031395d-2334-4a57-8fdf-fb46142dffbb.mp3", "type": "audio", "prompt": "Pleasant coin collection sound, bright and rewarding, cartoon game style", "description": "Sound when collecting gold coins", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": "short", "loop": false, "animation": null, "size_hint": null}, "monster_death_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/d4860c69-ee23-4616-b4c2-5bd5e9b3351e.mp3", "type": "audio", "prompt": "Monster defeat sound effect, satisfying victory audio, cartoon game style", "description": "Sound when a monster is defeated", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": "short", "loop": false, "animation": null, "size_hint": null}, "level_up_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/90988aa1-2825-4c9e-99d4-be5eae312368.mp3", "type": "audio", "prompt": "Triumphant level up fanfare, short and celebratory, fantasy game style", "description": "Sound when upgrading heroes or advancing stages", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": "medium", "loop": false, "animation": null, "size_hint": null}, "background_music": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/music/5a313fc2-6b13-48a9-a304-56d49116b094.mp3", "type": "audio", "prompt": "Upbeat fantasy adventure music, heroic and motivating, orchestral style with medieval instruments, loopable background track", "description": "Main gameplay background music", "subtype": "music", "aspect_ratio": null, "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": "long", "loop": true, "animation": null, "size_hint": null}, "monster_orc_warrior": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/d82ded35-ab1c-4c9b-a7fa-f5936b8ad378.webp?scale=55", "type": "image", "prompt": "A fierce orc warrior with battle axe and armor, full body standing illustration, cartoon art style, slightly menacing but not scary, green skin, muscular build, game-ready character asset", "description": "A fierce orc warrior with battle axe and armor, full body standing illustration, cartoon art style, slightly menacing but not scary, green skin, muscular build, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_skeleton": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/54f5afd8-1278-4683-8329-a01247e6b3b0.webp?scale=55", "type": "image", "prompt": "A spooky skeleton warrior with sword and shield, full body standing illustration, cartoon art style, slightly menacing but not scary, bone white color, glowing eye sockets, game-ready character asset", "description": "A spooky skeleton warrior with sword and shield, full body standing illustration, cartoon art style, slightly menacing but not scary, bone white color, glowing eye sockets, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_slime": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/2843ee7e-e660-4b71-94d5-761f9377664c.webp?scale=55", "type": "image", "prompt": "A cute blue slime monster with big eyes and smile, full body standing illustration, cartoon art style, friendly but slightly menacing, gelatinous texture, game-ready character asset", "description": "A cute blue slime monster with big eyes and smile, full body standing illustration, cartoon art style, friendly but slightly menacing, gelatinous texture, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_crystal_golem": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/5aa10933-0509-44e1-b713-839b2f50dc60.webp?scale=55", "type": "image", "prompt": "A powerful crystal golem boss with glowing gems embedded in rocky body, full body standing illustration, cartoon art style, imposing and powerful, blue and purple crystals, game-ready character asset", "description": "A powerful crystal golem boss with glowing gems embedded in rocky body, full body standing illustration, cartoon art style, imposing and powerful, blue and purple crystals, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_fire_demon": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/392e6d5a-076c-4ac9-b271-bae4b5ba29bd.webp?scale=55", "type": "image", "prompt": "A fierce fire demon monster with glowing red skin, horns, and flames around its body, full body standing illustration, cartoon art style, menacing but not scary, orange and red color scheme, game-ready character asset", "description": "A fierce fire demon monster with glowing red skin, horns, and flames around its body, full body standing illustration, cartoon art style, menacing but not scary, orange and red color scheme, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_ice_troll": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/9ad07790-8c66-4136-ac3a-96288666188f.webp?scale=55", "type": "image", "prompt": "A large ice troll monster with blue-white fur, icicles on its body, and frost breath, full body standing illustration, cartoon art style, imposing but friendly, blue and white color scheme, game-ready character asset", "description": "A large ice troll monster with blue-white fur, icicles on its body, and frost breath, full body standing illustration, cartoon art style, imposing but friendly, blue and white color scheme, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_shadow_wraith": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/1a592ad4-8eae-481f-9a4d-1f6395f7aa81.webp?scale=55", "type": "image", "prompt": "A ghostly shadow wraith monster with dark purple ethereal body, glowing eyes, and wispy smoke trails, full body floating illustration, cartoon art style, mysterious but not scary, purple and black color scheme, game-ready character asset", "description": "A ghostly shadow wraith monster with dark purple ethereal body, glowing eyes, and wispy smoke trails, full body floating illustration, cartoon art style, mysterious but not scary, purple and black color scheme, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_earth_golem": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/025286a5-9aa7-4d04-b090-c4f75c0e4724.webp?scale=55", "type": "image", "prompt": "A sturdy earth golem monster made of rocks and moss, with glowing green gems embedded in stone body, full body standing illustration, cartoon art style, strong but gentle, brown and green color scheme, game-ready character asset", "description": "A sturdy earth golem monster made of rocks and moss, with glowing green gems embedded in stone body, full body standing illustration, cartoon art style, strong but gentle, brown and green color scheme, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_lightning_drake": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/ddc65c05-7b5f-4203-b012-a8189a65729d.webp?scale=55", "type": "image", "prompt": "A small lightning drake monster with electric blue scales, sparking wings, and crackling electricity around its body, full body standing illustration, cartoon art style, energetic and dynamic, blue and yellow color scheme, game-ready character asset", "description": "A small lightning drake monster with electric blue scales, sparking wings, and crackling electricity around its body, full body standing illustration, cartoon art style, energetic and dynamic, blue and yellow color scheme, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_void_beast": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/ee1ebbc2-9608-4c79-9f28-15cd7ebb131e.webp?scale=55", "type": "image", "prompt": "A mysterious void beast monster with dark starry body, cosmic patterns, and glowing constellation markings, full body standing illustration, cartoon art style, otherworldly but approachable, dark blue and silver color scheme, game-ready character asset", "description": "A mysterious void beast monster with dark starry body, cosmic patterns, and glowing constellation markings, full body standing illustration, cartoon art style, otherworldly but approachable, dark blue and silver color scheme, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_nature_sprite": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/87dc7329-1773-40be-ba5a-15831d2d6c96.webp?scale=55", "type": "image", "prompt": "A cute nature sprite monster with leaf wings, flower crown, and vine decorations, full body floating illustration, cartoon art style, adorable and magical, green and pink color scheme, game-ready character asset", "description": "A cute nature sprite monster with leaf wings, flower crown, and vine decorations, full body floating illustration, cartoon art style, adorable and magical, green and pink color scheme, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_metal_construct": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/91cc0e07-e622-4a08-9c9e-c4e979b636f5.webp?scale=55", "type": "image", "prompt": "A mechanical metal construct monster with gears, steam pipes, and glowing core, full body standing illustration, cartoon art style, steampunk design, bronze and copper color scheme, game-ready character asset", "description": "A mechanical metal construct monster with gears, steam pipes, and glowing core, full body standing illustration, cartoon art style, steampunk design, bronze and copper color scheme, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_ancient_dragon": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/8033ba9f-f77d-4dda-8f9d-794a9b4684d0.webp?scale=55", "type": "image", "prompt": "A majestic ancient dragon with golden scales, large wings spread, breathing fire, full body standing illustration, cartoon art style, powerful and imposing, game-ready character asset", "description": "A majestic ancient dragon with golden scales, large wings spread, breathing fire, full body standing illustration, cartoon art style, powerful and imposing, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "low", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_phoenix_fire": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/a5878f0e-0613-4ef2-b96f-4c15ddb2f3ef.webp?scale=55", "type": "image", "prompt": "A brilliant phoenix with flaming feathers, wings of fire, rising from ashes, full body flying illustration, cartoon art style, radiant orange and red colors, game-ready character asset", "description": "A brilliant phoenix with flaming feathers, wings of fire, rising from ashes, full body flying illustration, cartoon art style, radiant orange and red colors, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_kraken_tentacles": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/09ab9585-6fea-4bb3-ad6d-154eb4198563.webp?scale=55", "type": "image", "prompt": "A massive kraken sea monster with multiple tentacles, dark blue-green scales, glowing eyes, full body illustration, cartoon art style, menacing but not scary, game-ready character asset", "description": "A massive kraken sea monster with multiple tentacles, dark blue-green scales, glowing eyes, full body illustration, cartoon art style, menacing but not scary, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "low", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_griffin_majestic": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/e9c8f43b-8279-4af5-9c99-22872283481f.webp?scale=55", "type": "image", "prompt": "A noble griffin with eagle head and wings, lion body, golden feathers and fur, full body standing illustration, cartoon art style, proud and majestic, game-ready character asset", "description": "A noble griffin with eagle head and wings, lion body, golden feathers and fur, full body standing illustration, cartoon art style, proud and majestic, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_minotaur_warrior": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/4b38bbe9-6b02-48e1-9d41-50e5a622c887.webp?scale=55", "type": "image", "prompt": "A powerful minotaur with bull head, muscular human body, holding a large axe, brown fur, full body standing illustration, cartoon art style, strong and intimidating, game-ready character asset", "description": "A powerful minotaur with bull head, muscular human body, holding a large axe, brown fur, full body standing illustration, cartoon art style, strong and intimidating, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "low", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_hydra_multihead": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/30a8bde2-cde5-469b-9eb6-4e9243364781.webp?scale=55", "type": "image", "prompt": "A fearsome hydra with three serpent heads, long necks, green scales, venomous fangs, full body coiled illustration, cartoon art style, dangerous but approachable, game-ready character asset", "description": "A fearsome hydra with three serpent heads, long necks, green scales, venomous fangs, full body coiled illustration, cartoon art style, dangerous but approachable, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_basilisk_serpent": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/74aaf07a-8a5f-409a-acd3-80914f77ae65.webp?scale=55", "type": "image", "prompt": "A deadly basilisk serpent with crown-like crest, emerald green scales, glowing yellow eyes, coiled body, full body illustration, cartoon art style, regal and dangerous, game-ready character asset", "description": "A deadly basilisk serpent with crown-like crest, emerald green scales, glowing yellow eyes, coiled body, full body illustration, cartoon art style, regal and dangerous, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_chimera_beast": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/19eddab5-3418-4f4b-861b-0714b35c0548.webp?scale=55", "type": "image", "prompt": "A chimera with lion head and front body, goat head on back, snake tail, mixed fur and scales, full body standing illustration, cartoon art style, mythical and fierce, game-ready character asset", "description": "A chimera with lion head and front body, goat head on back, snake tail, mixed fur and scales, full body standing illustration, cartoon art style, mythical and fierce, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_manticore_spikes": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/5baae79a-ea35-4c76-a5e1-bd0f2291bc42.webp?scale=55", "type": "image", "prompt": "A manticore with human face, lion body, scorpion tail with spikes, wings, full body standing illustration, cartoon art style, exotic and dangerous, game-ready character asset", "description": "A manticore with human face, lion body, scorpion tail with spikes, wings, full body standing illustration, cartoon art style, exotic and dangerous, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_sphinx_riddle": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/090f24c8-345b-4441-a21f-2192fce4673c.webp?scale=55", "type": "image", "prompt": "A wise sphinx with human head, lion body, eagle wings, golden headdress, full body sitting illustration, cartoon art style, mysterious and intelligent, game-ready character asset", "description": "A wise sphinx with human head, lion body, eagle wings, golden headdress, full body sitting illustration, cartoon art style, mysterious and intelligent, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_unicorn_horn": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/591a887b-7316-490a-9e4e-a1675e5231f5.webp?scale=55", "type": "image", "prompt": "A majestic unicorn with silver mane, spiral horn, and ethereal glow, full body standing illustration, cartoon art style, pure and magical, game-ready character asset", "description": "A majestic unicorn with silver mane, spiral horn, and ethereal glow, full body standing illustration, cartoon art style, pure and magical, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_werewolf_moon": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/d8c25d80-45e8-4496-bc00-5f13d82adcc9.webp?scale=55", "type": "image", "prompt": "A fierce werewolf with gray fur, sharp claws, howling at moon, full body standing illustration, cartoon art style, wild and powerful, game-ready character asset", "description": "A fierce werewolf with gray fur, sharp claws, howling at moon, full body standing illustration, cartoon art style, wild and powerful, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_vampire_bat": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/de7fb1d4-d409-41ea-8ccf-c86edd2021de.webp?scale=55", "type": "image", "prompt": "A vampire with dark cape, fangs, bat wings, pale skin, full body standing illustration, cartoon art style, gothic but not scary, game-ready character asset", "description": "A vampire with dark cape, fangs, bat wings, pale skin, full body standing illustration, cartoon art style, gothic but not scary, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_centaur_archer": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/3dd61acc-acf1-4e1e-a064-f452a1f9b6cd.webp?scale=55", "type": "image", "prompt": "A noble centaur with human torso, horse body, bow and arrows, brown coat, full body standing illustration, cartoon art style, proud and skilled, game-ready character asset", "description": "A noble centaur with human torso, horse body, bow and arrows, brown coat, full body standing illustration, cartoon art style, proud and skilled, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "monster_banshee_spirit": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/a8a6f489-71ac-4652-b10e-9ca13e2db42c.webp?scale=55", "type": "image", "prompt": "A ghostly banshee with flowing white robes, long hair, ethereal form, glowing eyes, full body floating illustration, cartoon art style, mysterious and haunting, game-ready character asset", "description": "A ghostly banshee with flowing white robes, long hair, ethereal form, glowing eyes, full body floating illustration, cartoon art style, mysterious and haunting, game-ready character asset", "subtype": "other", "aspect_ratio": [1024, 1024], "compression_suggestion": "medium", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_volcanic_peaks": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/af9c80ca-eb74-4ac3-aa7c-e67d15525374.webp", "type": "image", "prompt": "A dramatic volcanic landscape with active lava flows, molten rock formations, ash clouds, and glowing red-orange volcanic peaks in the distance, fantasy cartoon art style, warm color palette with reds and oranges", "description": "A dramatic volcanic landscape with active lava flows, molten rock formations, ash clouds, and glowing red-orange volcanic peaks in the distance, fantasy cartoon art style, warm color palette with reds and oranges", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_frozen_tundra": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/9ec988c1-23c7-4863-8641-9b13a3386497.webp", "type": "image", "prompt": "A frozen arctic tundra with snow-covered mountains, ice formations, aurora borealis in the sky, frozen lakes, and crystalline ice structures, fantasy cartoon art style, cool blue and white color palette", "description": "A frozen arctic tundra with snow-covered mountains, ice formations, aurora borealis in the sky, frozen lakes, and crystalline ice structures, fantasy cartoon art style, cool blue and white color palette", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_shadow_realm": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/0d72dd6b-5862-4260-a63e-5292efd704af.webp", "type": "image", "prompt": "A dark shadow realm with twisted black trees, purple mist, floating dark crystals, ethereal shadows, and mysterious dark portals, fantasy cartoon art style, dark purple and black color scheme", "description": "A dark shadow realm with twisted black trees, purple mist, floating dark crystals, ethereal shadows, and mysterious dark portals, fantasy cartoon art style, dark purple and black color scheme", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_golden_desert": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/8ebdfd16-709b-4882-8b08-537281de9e6e.webp", "type": "image", "prompt": "A vast golden desert with sand dunes, ancient pyramids, palm oases, golden temples, and a bright sun in the sky, fantasy cartoon art style, warm golden and yellow color palette", "description": "A vast golden desert with sand dunes, ancient pyramids, palm oases, golden temples, and a bright sun in the sky, fantasy cartoon art style, warm golden and yellow color palette", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_sky_islands": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/1cbec4d7-166d-450d-9679-f24c0cfe5ead.webp", "type": "image", "prompt": "Floating sky islands connected by bridges, with waterfalls cascading into clouds below, flying creatures, and a bright blue sky with fluffy white clouds, fantasy cartoon art style, bright blue and white colors", "description": "Floating sky islands connected by bridges, with waterfalls cascading into clouds below, flying creatures, and a bright blue sky with fluffy white clouds, fantasy cartoon art style, bright blue and white colors", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_deep_ocean": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/25ffa1d8-46fa-4f4a-8732-2f60a2f1d706.webp", "type": "image", "prompt": "An underwater ocean scene with coral reefs, sea plants, underwater ruins, schools of fish, and rays of sunlight filtering through the water, fantasy cartoon art style, blue and teal color palette", "description": "An underwater ocean scene with coral reefs, sea plants, underwater ruins, schools of fish, and rays of sunlight filtering through the water, fantasy cartoon art style, blue and teal color palette", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_mystic_ruins": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/0c19aadc-ad6b-4f5c-920d-86e4821e1a3c.webp", "type": "image", "prompt": "Ancient mystical ruins with crumbling stone temples, overgrown with vines, magical runes glowing on walls, mysterious statues, and ethereal mist, fantasy cartoon art style, earthy browns and mystical greens", "description": "Ancient mystical ruins with crumbling stone temples, overgrown with vines, magical runes glowing on walls, mysterious statues, and ethereal mist, fantasy cartoon art style, earthy browns and mystical greens", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_celestial_void": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/1b013216-f40d-447a-88d4-27b1c3eebd48.webp", "type": "image", "prompt": "A cosmic void with swirling galaxies, nebulae, floating asteroids, distant stars, and cosmic energy streams, fantasy cartoon art style, deep space colors with purples, blues, and cosmic lights", "description": "A cosmic void with swirling galaxies, nebulae, floating asteroids, distant stars, and cosmic energy streams, fantasy cartoon art style, deep space colors with purples, blues, and cosmic lights", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_neon_cybercity": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/4c392670-d1b0-4be0-9ccc-e10ebf3606fb.webp", "type": "image", "prompt": "A futuristic neon cyberpunk cityscape with towering skyscrapers, holographic advertisements, flying cars, neon lights in pink and blue, digital rain effects, and a dark night sky with glowing city lights, fantasy cartoon art style", "description": "A futuristic neon cyberpunk cityscape with towering skyscrapers, holographic advertisements, flying cars, neon lights in pink and blue, digital rain effects, and a dark night sky with glowing city lights, fantasy cartoon art style", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_primordial_jungle": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/0a169367-4cba-4bb6-8097-90d2f5e90924.webp", "type": "image", "prompt": "A dense prehistoric jungle with massive ancient trees, hanging vines, exotic flowers, dinosaur fossils, misty atmosphere, waterfalls, and primitive stone structures, fantasy cartoon art style with lush green colors", "description": "A dense prehistoric jungle with massive ancient trees, hanging vines, exotic flowers, dinosaur fossils, misty atmosphere, waterfalls, and primitive stone structures, fantasy cartoon art style with lush green colors", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_astral_dimension": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/66bf20cb-f7e2-4f75-b23d-aa1a99cee07e.webp", "type": "image", "prompt": "A surreal astral plane with floating geometric shapes, swirling energy patterns, rainbow portals, ethereal mists, gravity-defying structures, and cosmic energy streams, fantasy cartoon art style with vibrant mystical colors", "description": "A surreal astral plane with floating geometric shapes, swirling energy patterns, rainbow portals, ethereal mists, gravity-defying structures, and cosmic energy streams, fantasy cartoon art style with vibrant mystical colors", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_molten_core": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/b49484c0-f37a-49a1-9024-3219b437290d.webp", "type": "image", "prompt": "A volcanic underground cavern with flowing lava rivers, molten rock formations, glowing magma pools, steam vents, crystalline formations, and intense orange-red lighting, fantasy cartoon art style", "description": "A volcanic underground cavern with flowing lava rivers, molten rock formations, glowing magma pools, steam vents, crystalline formations, and intense orange-red lighting, fantasy cartoon art style", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_ethereal_gardens": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/116f8202-56d8-4511-b815-74c1d886234c.webp", "type": "image", "prompt": "A magical floating garden with luminescent flowers, crystal trees, floating islands connected by light bridges, rainbow butterflies, glowing ponds, and soft pastel colors, fantasy cartoon art style", "description": "A magical floating garden with luminescent flowers, crystal trees, floating islands connected by light bridges, rainbow butterflies, glowing ponds, and soft pastel colors, fantasy cartoon art style", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_clockwork_citadel": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/3f410110-ce2e-4618-8d43-a8ae5ed41a1d.webp", "type": "image", "prompt": "A steampunk mechanical city with giant gears, clockwork towers, steam pipes, brass machinery, spinning cogs, mechanical bridges, and bronze-copper color scheme, fantasy cartoon art style", "description": "A steampunk mechanical city with giant gears, clockwork towers, steam pipes, brass machinery, spinning cogs, mechanical bridges, and bronze-copper color scheme, fantasy cartoon art style", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_nightmare_realm": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/1090aa13-0f72-4560-9846-622434dedfd2.webp", "type": "image", "prompt": "A dark twisted landscape with gnarled dead trees, floating eyes, distorted architecture, purple-black mists, eerie shadows, haunting silhouettes, and unsettling atmosphere, fantasy cartoon art style but spooky", "description": "A dark twisted landscape with gnarled dead trees, floating eyes, distorted architecture, purple-black mists, eerie shadows, haunting silhouettes, and unsettling atmosphere, fantasy cartoon art style but spooky", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_crystal_metropolis": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/06e5ceeb-66dc-470e-8b75-e44271320c19.webp", "type": "image", "prompt": "A futuristic city made entirely of crystals with prismatic buildings, rainbow light refractions, crystal spires, geometric structures, and brilliant multicolored lighting effects, fantasy cartoon art style", "description": "A futuristic city made entirely of crystals with prismatic buildings, rainbow light refractions, crystal spires, geometric structures, and brilliant multicolored lighting effects, fantasy cartoon art style", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_windswept_peaks": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/d603c584-a0d6-4aa4-a584-a2d6f5dc570c.webp", "type": "image", "prompt": "High mountain peaks with strong winds, swirling clouds, ancient stone monuments, prayer flags, snow-capped summits, dramatic cliff faces, and misty valleys, fantasy cartoon art style", "description": "High mountain peaks with strong winds, swirling clouds, ancient stone monuments, prayer flags, snow-capped summits, dramatic cliff faces, and misty valleys, fantasy cartoon art style", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}, "background_abyssal_depths": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/a66d4105-539d-4921-ab7f-a704d9cd6eb8.webp", "type": "image", "prompt": "The deepest ocean trenches with bioluminescent creatures, underwater volcanic vents, ancient ruins, glowing coral formations, dark waters, and mysterious deep-sea life, fantasy cartoon art style", "description": "The deepest ocean trenches with bioluminescent creatures, underwater volcanic vents, ancient ruins, glowing coral formations, dark waters, and mysterious deep-sea life, fantasy cartoon art style", "subtype": "other", "aspect_ratio": [1536, 1024], "compression_suggestion": "original", "view": null, "outline": null, "image_asset_type": null, "audio_type": null, "edited": null, "edit_instructions": null, "edit_reason": null, "original_url": null, "error": null, "duration_hint": null, "loop": null, "animation": null, "size_hint": null}}, "game_code": "<!DOCTYPE html>\n<html>\n<head>\n    <title>Tap Quest Tycoon</title>\n    <link href=\"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Poppins:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n    \n    <style>\n        /* CSS Reset & Base Styles */\n        *, *::before, *::after {\n            box-sizing: border-box;\n        }\n        \n        body, html { \n            margin: 0; \n            padding: 0; \n            width: 100%; \n            height: 100%; \n            overflow: hidden; \n            font-family: 'Cinzel', 'Poppins', -apple-system, BlinkMacSystemFont, serif;\n            background: linear-gradient(135deg, #0f0f23, #1a1a3e, #2d1b69, #4c1d95);\n            background-size: 400% 400%;\n            animation: mysticalBackground 12s ease-in-out infinite;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n            position: relative;\n        }\n        \n        body::before {\n            content: '';\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-image: \n                radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 0, 0.4), transparent),\n                radial-gradient(2px 2px at 40% 70%, rgba(139, 92, 246, 0.4), transparent),\n                radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.6), transparent),\n                radial-gradient(1px 1px at 60% 10%, rgba(255, 215, 0, 0.3), transparent);\n            background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px;\n            animation: floatingParticles 20s linear infinite;\n            pointer-events: none;\n            z-index: 1;\n        }\n        \n        /* CSS Custom Properties */\n        :root {\n            /* Animation Timings */\n            --transition-fast: 150ms;\n            --transition-normal: 300ms;\n            --transition-slow: 500ms;\n            \n            /* Easing Functions */\n            --ease-out: cubic-bezier(0.0, 0, 0.2, 1);\n            --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);\n            \n            /* Spacing Scale */\n            --space-xs: 8px;\n            --space-sm: 16px;\n            --space-md: 24px;\n            --space-lg: 32px;\n            --space-xl: 48px;\n            \n            /* RPG Color System */\n            --color-primary: #8b5cf6;\n            --color-primary-hover: #7c3aed;\n            --color-success: #10b981;\n            --color-success-hover: #059669;\n            --color-warning: #f59e0b;\n            --color-warning-hover: #d97706;\n            --color-fantasy: #8b5cf6;\n            --color-fantasy-hover: #7c3aed;\n            --color-legendary: #fbbf24;\n            --color-epic: #a855f7;\n            --color-rare: #3b82f6;\n            --color-common: #6b7280;\n            \n            /* RPG Glass Morphism */\n            --glass-bg: rgba(139, 92, 246, 0.15);\n            --glass-border: rgba(251, 191, 36, 0.3);\n            --glass-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);\n            --glass-glow: 0 0 20px rgba(251, 191, 36, 0.3);\n            \n            /* Typography - All sizes increased */\n            --text-xs: 18px;\n            --text-sm: 22px;\n            --text-base: 26px;\n            --text-lg: 32px;\n            --text-xl: 38px;\n            --text-2xl: 48px;\n            --text-3xl: 64px;\n            --text-4xl: 80px;\n            --text-5xl: 120px;\n        }\n        \n        /* Game Container */\n        #gameContainer {\n            width: 100%;\n            height: 100%;\n            position: relative;\n            flex-direction: column;\n        }\n        \n        #backgroundLayer {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-size: cover;\n            background-position: center;\n            z-index: 1;\n        }\n        \n        /* Top Status Bar - RPG Style */\n        #topStatusBar {\n            position: relative;\n            z-index: 10;\n            height: 80px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: var(--space-sm);\n            background: var(--glass-bg);\n            backdrop-filter: blur(20px);\n            border-bottom: 2px solid var(--glass-border);\n            box-shadow: var(--glass-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);\n            border-image: linear-gradient(90deg, transparent, var(--color-legendary), transparent) 1;\n        }\n        \n        #goldDisplay {\n            display: flex;\n            align-items: center;\n            gap: var(--space-xs);\n            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));\n            padding: var(--space-xs) var(--space-sm);\n            border-radius: 24px;\n            border: 2px solid var(--color-legendary);\n            color: var(--color-legendary);\n            font-weight: 700;\n            font-size: var(--text-lg);\n            min-width: 120px;\n            box-shadow: 0 0 15px rgba(251, 191, 36, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);\n            text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);\n            font-family: 'Cinzel', serif;\n        }\n        \n        #goldIcon {\n            width: 24px;\n            height: 24px;\n            object-fit: contain;\n        }\n        \n        #stageInfo {\n            text-align: center;\n            color: white;\n        }\n        \n        #currentStageDisplay {\n            font-size: var(--text-lg);\n            font-weight: 700;\n            margin-bottom: 2px;\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(139, 92, 246, 0.5);\n            color: #e5e7eb;\n            font-family: 'Cinzel', serif;\n        }\n        \n        #worldName {\n            font-size: var(--text-sm);\n            opacity: 0.9;\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(251, 191, 36, 0.4);\n            color: white;\n            font-family: 'Cinzel', serif;\n            font-style: italic;\n        }\n        \n        /* Battle Area - Optimized for Tapping */\n        #battleArea {\n            flex: 1;\n            position: relative;\n            z-index: 5;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            user-select: none;\n            -webkit-user-select: none;\n            -webkit-tap-highlight-color: transparent;\n        }\n        \n        #monsterContainer {\n            position: relative;\n            width: 280px;\n            height: 280px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: var(--space-lg);\n        }\n        \n        #monsterName {\n            position: absolute;\n            top: -300px;\n            left: 50%;\n            transform: translateX(-50%);\n            color: #e5e7eb;\n            font-size: var(--text-lg);\n            font-weight: 700;\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(139, 92, 246, 0.6);\n            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(79, 70, 229, 0.1));\n            backdrop-filter: blur(15px);\n            padding: var(--space-xs) var(--space-sm);\n            border-radius: 16px;\n            border: 2px solid var(--glass-border);\n            box-shadow: var(--glass-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);\n            white-space: nowrap;\n            z-index: 10;\n            min-width: 200px;\n            text-align: center;\n            font-family: 'Cinzel', serif;\n            letter-spacing: 1px;\n        }\n        \n        #monsterHealthBar {\n            position: absolute;\n            top: -200px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 500px;\n            height: 40px;\n            background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(30, 27, 75, 0.3));\n            border: 3px solid var(--color-legendary);\n            border-radius: 20px;\n            overflow: hidden;\n            backdrop-filter: blur(15px);\n            box-shadow: 0 0 20px rgba(251, 191, 36, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1);\n        }\n        \n        #currentMonster {\n            max-width: 100%;\n            max-height: 100%;\n            object-fit: contain;\n            transition: transform var(--transition-fast) var(--ease-out);\n            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));\n        }\n        \n\n        \n        #healthFill {\n            height: 100%;\n            background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);\n            background-size: 200% 100%;\n            animation: healthPulse 2s ease-in-out infinite;\n            transition: width var(--transition-normal) var(--ease-out);\n            width: 100%;\n            border-radius: 8px;\n            position: relative;\n            box-shadow: inset 0 0 10px rgba(220, 38, 38, 0.5);\n        }\n        \n        @keyframes healthPulse {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n        }\n        \n        #healthPercentage {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            color: white;\n            font-size: 22px;\n            font-weight: 700;\n            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(255, 255, 255, 0.5);\n            z-index: 10;\n            font-family: 'Cinzel', serif;\n        }\n        \n        /* Tap Feedback Animation */\n        .tap-feedback {\n            position: absolute;\n            width: 120px;\n            height: 120px;\n            border: 3px solid var(--color-primary);\n            border-radius: 50%;\n            pointer-events: none;\n            animation: tapRipple var(--transition-slow) var(--ease-out) forwards;\n        }\n        \n        @keyframes tapRipple {\n            0% {\n                transform: scale(0);\n                opacity: 1;\n            }\n            100% {\n                transform: scale(2);\n                opacity: 0;\n            }\n        }\n        \n        /* Floating Action Button - RPG Style */\n        #heroesToggle {\n            position: fixed;\n            bottom: var(--space-md);\n            right: var(--space-md);\n            width: 96px;\n            height: 96px;\n            background: linear-gradient(135deg, var(--color-primary), var(--color-fantasy));\n            border: 3px solid var(--color-legendary);\n            border-radius: 50%;\n            color: var(--color-legendary);\n            font-size: 48px;\n            cursor: pointer;\n            z-index: 20;\n            box-shadow: var(--glass-glow), 0 8px 32px rgba(139, 92, 246, 0.4);\n            transition: all var(--transition-normal) var(--ease-out);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: 600;\n            text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);\n        }\n        \n        #heroesToggle:hover {\n            background: linear-gradient(135deg, var(--color-primary-hover), var(--color-fantasy-hover));\n            transform: scale(1.05);\n            box-shadow: var(--glass-glow), 0 12px 40px rgba(139, 92, 246, 0.6), 0 0 30px rgba(251, 191, 36, 0.4);\n        }\n        \n        #heroesToggle:active {\n            transform: scale(0.95);\n        }\n        \n        /* Heroes Drawer - RPG Style */\n        #heroesDrawer {\n            position: fixed;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(79, 70, 229, 0.1), rgba(30, 27, 75, 0.2));\n            backdrop-filter: blur(25px);\n            border-top: 3px solid var(--color-legendary);\n            border-radius: 24px 24px 0 0;\n            z-index: 25;\n            transform: translateY(100%);\n            transition: transform var(--transition-normal) var(--ease-out);\n            max-height: 70vh;\n            overflow-y: auto;\n            box-shadow: 0 -10px 40px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);\n        }\n        \n        #heroesDrawer.open {\n            transform: translateY(0);\n        }\n        \n        #drawerHeader {\n            padding: var(--space-md);\n            border-bottom: 1px solid var(--glass-border);\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        \n        #drawerTitle {\n            color: var(--color-legendary);\n            font-size: var(--text-xl);\n            font-weight: 700;\n            margin: 0;\n            font-family: 'Cinzel', serif;\n            text-shadow: 0 0 15px rgba(251, 191, 36, 0.6);\n            letter-spacing: 1px;\n        }\n        \n        #closeDrawer {\n            width: 48px;\n            height: 48px;\n            background: var(--glass-bg);\n            border: 1px solid var(--glass-border);\n            border-radius: 50%;\n            color: white;\n            font-size: var(--text-lg);\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: all var(--transition-fast) var(--ease-out);\n        }\n        \n        #closeDrawer:hover {\n            background: rgba(255, 255, 255, 0.2);\n        }\n        \n        /* Upgrade Sections */\n        #tapUpgradeSection, .potion-upgrade-section {\n            padding: var(--space-md);\n            border-bottom: 1px solid var(--glass-border);\n        }\n        \n        #tapUpgradeCard {\n            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(79, 70, 229, 0.05));\n            border: 2px solid var(--glass-border);\n            border-radius: 16px;\n            padding: var(--space-md);\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            box-shadow: var(--glass-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);\n            position: relative;\n            overflow: hidden;\n        }\n        \n        #tapUpgradeCard::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.1), transparent);\n            animation: cardShimmer 3s ease-in-out infinite;\n        }\n        \n        @keyframes cardShimmer {\n            0% { left: -100%; }\n            50% { left: 100%; }\n            100% { left: 100%; }\n        }\n        \n        #tapUpgradeInfo {\n            color: white;\n        }\n        \n        #tapUpgradeTitle {\n            font-size: var(--text-lg);\n            font-weight: 700;\n            margin-bottom: 4px;\n            color: var(--color-legendary);\n            font-family: 'Cinzel', serif;\n            text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);\n        }\n        \n        #tapUpgradeStats {\n            font-size: var(--text-sm);\n            opacity: 0.9;\n            color: #e5e7eb;\n            font-family: 'Cinzel', serif;\n        }\n        \n        #tapUpgradeBtn {\n            width: 200px;\n            height: 70px;\n            background: linear-gradient(135deg, var(--color-success), #059669);\n            border: 2px solid var(--color-epic);\n            border-radius: 12px;\n            color: white;\n            font-weight: 700;\n            font-size: var(--text-sm);\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            box-shadow: 0 0 15px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);\n            text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);\n            font-family: 'Cinzel', serif;\n        }\n        \n        #tapUpgradeBtn:hover:not(:disabled) {\n            background: var(--color-success-hover);\n        }\n        \n        #tapUpgradeBtn:disabled {\n            background: #6b7280;\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n        \n        #tapDamageCost {\n            margin-top: 5px;\n        }\n        \n        /* Heroes Grid */\n        #heroesGrid {\n            padding: var(--space-md);\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n            gap: var(--space-md);\n        }\n        \n        .hero-card {\n            background: var(--glass-bg);\n            border: 1px solid var(--glass-border);\n            border-radius: 16px;\n            padding: var(--space-md);\n            text-align: center;\n            color: white;\n            cursor: pointer;\n            transition: all var(--transition-normal) var(--ease-out);\n            min-height: 200px;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n        }\n        \n        .hero-card:hover {\n            background: rgba(255, 255, 255, 0.15);\n            border-color: var(--color-primary);\n            transform: translateY(-4px);\n        }\n        \n        .hero-card.locked {\n            opacity: 0.6;\n        }\n        \n        .hero-avatar {\n            width: 64px;\n            height: 64px;\n            object-fit: contain;\n            margin: 0 auto var(--space-sm);\n            display: block;\n            border-radius: 50%;\n            border: 2px solid var(--glass-border);\n        }\n        \n        .hero-name {\n            font-size: var(--text-base);\n            font-weight: 600;\n            margin-bottom: var(--space-xs);\n        }\n        \n        .hero-level {\n            font-size: var(--text-sm);\n            margin-bottom: var(--space-xs);\n            opacity: 0.8;\n        }\n        \n        .hero-cost {\n            font-size: var(--text-sm);\n            color: var(--color-warning);\n            font-weight: 600;\n            margin-bottom: var(--space-sm);\n        }\n        \n        .upgrade-btn {\n            width: 200px;\n            height: 70px;\n            background: linear-gradient(135deg, var(--color-success), #059669);\n            border: 2px solid var(--color-epic);\n            border-radius: 12px;\n            color: white;\n            font-weight: 700;\n            font-size: var(--text-sm);\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            box-shadow: 0 0 15px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);\n            text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);\n            font-family: 'Cinzel', serif;\n        }\n        \n        .upgrade-btn:hover:not(:disabled) {\n            background: var(--color-success-hover);\n        }\n        \n        .upgrade-btn:disabled {\n            background: #6b7280;\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n        \n        /* Damage Numbers */\n        #damageNumbers {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 15;\n        }\n        \n        .damage-number {\n            position: absolute;\n            font-size: var(--text-2xl);\n            font-weight: 700;\n            color: #fbbf24;\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(251, 191, 36, 0.8);\n            animation: damageFloat 1s var(--ease-out) forwards;\n            pointer-events: none;\n            font-family: 'Cinzel', serif;\n            letter-spacing: 1px;\n        }\n        \n        @keyframes damageFloat {\n            0% { \n                opacity: 1; \n                transform: translateY(0px) scale(1); \n            }\n            100% { \n                opacity: 0; \n                transform: translateY(-80px) scale(1.3); \n            }\n        }\n        \n        /* Gold Coins Animation */\n        #goldCoins {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 12;\n        }\n        \n        .gold-coin {\n            position: absolute;\n            width: 32px;\n            height: 32px;\n            animation: coinCollect 1s var(--ease-out) forwards;\n        }\n        \n        @keyframes coinCollect {\n            0% { \n                opacity: 1; \n                transform: scale(1) translateY(0); \n            }\n            50% { \n                transform: scale(1.3) translateY(-24px); \n            }\n            100% { \n                opacity: 0; \n                transform: scale(0.8) translateY(-64px); \n            }\n        }\n        \n        /* Boss Timer - RPG Style */\n        #bossTimer {\n            position: absolute;\n            top: 50%;\n            left: var(--space-md);\n            transform: translateY(-50%);\n            background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.8));\n            color: white;\n            padding: var(--space-sm) var(--space-md);\n            border-radius: 16px;\n            font-weight: 700;\n            font-size: var(--text-base);\n            display: none;\n            backdrop-filter: blur(15px);\n            border: 2px solid #dc2626;\n            box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);\n            text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);\n            font-family: 'Cinzel', serif;\n            animation: timerPulse 1s ease-in-out infinite;\n        }\n        \n        @keyframes timerPulse {\n            0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); }\n            50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }\n        }\n        \n        /* Edit Mode Highlights */\n        .edit-highlight {\n            box-shadow: 0 0 20px var(--color-success);\n            border: 2px solid var(--color-success) !important;\n        }\n        \n        /* Backdrop for Drawer */\n        #drawerBackdrop {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0, 0, 0, 0.5);\n            z-index: 14;\n            opacity: 0;\n            visibility: hidden;\n            transition: all var(--transition-normal) var(--ease-out);\n        }\n        \n        #drawerBackdrop.open {\n            opacity: 1;\n            visibility: visible;\n        }\n        \n\n        \n        #monsterDexBtn {\n            position: fixed;\n            bottom: 24px;\n            left: 24px;\n            width: 96px;\n            height: 96px;\n            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(79, 70, 229, 0.1));\n            border: 3px solid var(--color-epic);\n            border-radius: 50%;\n            color: var(--color-epic);\n            font-size: 48px;\n            cursor: pointer;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            transition: all var(--transition-fast) var(--ease-out);\n            backdrop-filter: blur(15px);\n            z-index: 20;\n            box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);\n            text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);\n        }\n        \n        #monsterDexBtn .button-text {\n            font-size: 24px;\n            margin-top: -8px;\n            font-weight: bold;\n        }\n        \n\n        \n        #monsterDexBtn:hover {\n            background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(139, 92, 246, 0.2));\n            transform: scale(1.05);\n            box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);\n        }\n        \n        #monsterDexBtn:active {\n            transform: scale(0.95);\n        }\n        \n        .button-group {\n            display: flex;\n            align-items: center;\n        }\n\n        /* Mystical Menu Animations */\n        @keyframes mysticalBackground {\n            0%, 100% { background-position: 0% 50%; }\n            25% { background-position: 100% 50%; }\n            50% { background-position: 100% 100%; }\n            75% { background-position: 0% 100%; }\n        }\n        \n        @keyframes floatingParticles {\n            0% { transform: translateY(0px) rotate(0deg); }\n            33% { transform: translateY(-10px) rotate(120deg); }\n            66% { transform: translateY(5px) rotate(240deg); }\n            100% { transform: translateY(0px) rotate(360deg); }\n        }\n        \n        @keyframes floatingOrb {\n            0%, 100% { \n                transform: translateY(0px) translateX(0px) scale(1);\n                opacity: 0.6;\n            }\n            25% { \n                transform: translateY(-20px) translateX(10px) scale(1.1);\n                opacity: 0.8;\n            }\n            50% { \n                transform: translateY(-10px) translateX(-15px) scale(0.9);\n                opacity: 0.4;\n            }\n            75% { \n                transform: translateY(-30px) translateX(5px) scale(1.05);\n                opacity: 0.7;\n            }\n        }\n        \n        @keyframes runeFloat {\n            0% { \n                transform: translateY(0px) rotate(0deg);\n                opacity: 0.3;\n            }\n            25% { \n                transform: translateY(-15px) rotate(90deg);\n                opacity: 0.6;\n            }\n            50% { \n                transform: translateY(-5px) rotate(180deg);\n                opacity: 0.2;\n            }\n            75% { \n                transform: translateY(-25px) rotate(270deg);\n                opacity: 0.5;\n            }\n            100% { \n                transform: translateY(0px) rotate(360deg);\n                opacity: 0.3;\n            }\n        }\n        \n        @keyframes cardPulse {\n            0%, 100% { \n                transform: scale(1);\n                box-shadow: \n                    0 0 80px rgba(139, 92, 246, 0.5), \n                    0 0 40px rgba(251, 191, 36, 0.3),\n                    inset 0 0 60px rgba(255, 215, 0, 0.15),\n                    inset 0 2px 0 rgba(255, 255, 255, 0.2);\n            }\n            50% { \n                transform: scale(1.02);\n                box-shadow: \n                    0 0 100px rgba(139, 92, 246, 0.7), \n                    0 0 60px rgba(251, 191, 36, 0.5),\n                    inset 0 0 80px rgba(255, 215, 0, 0.25),\n                    inset 0 2px 0 rgba(255, 255, 255, 0.3);\n            }\n        }\n        \n        @keyframes borderGlow {\n            0%, 100% { \n                background-position: 0% 50%;\n                opacity: 0.8;\n            }\n            50% { \n                background-position: 100% 50%;\n                opacity: 1;\n            }\n        }\n        \n        @keyframes sparkleMove {\n            0% { background-position: 0% 0%, 0% 0%, 0% 0%; }\n            100% { background-position: 100% 100%, -100% -100%, 50% 50%; }\n        }\n        \n        @keyframes shimmerText {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n        }\n        \n        @keyframes enchantedButton {\n            0%, 100% { \n                background-position: 0% 50%;\n                box-shadow: \n                    0 12px 48px rgba(139, 92, 246, 0.6),\n                    0 0 40px rgba(255, 215, 0, 0.4),\n                    inset 0 2px 0 rgba(255, 255, 255, 0.3),\n                    inset 0 -2px 0 rgba(0, 0, 0, 0.2);\n            }\n            50% { \n                background-position: 100% 50%;\n                box-shadow: \n                    0 12px 48px rgba(139, 92, 246, 0.8),\n                    0 0 60px rgba(255, 215, 0, 0.6),\n                    inset 0 2px 0 rgba(255, 255, 255, 0.4),\n                    inset 0 -2px 0 rgba(0, 0, 0, 0.3);\n            }\n        }\n        \n        @keyframes portalPulse {\n            0%, 100% { \n                background-size: 100% 100%, 200% 200%, 300% 300%, 250% 250%, 100% 100%;\n                filter: brightness(1) contrast(1);\n            }\n            25% { \n                background-size: 110% 110%, 220% 220%, 320% 320%, 270% 270%, 100% 100%;\n                filter: brightness(1.1) contrast(1.1);\n            }\n            50% { \n                background-size: 120% 120%, 240% 240%, 340% 340%, 290% 290%, 100% 100%;\n                filter: brightness(1.2) contrast(1.2);\n            }\n            75% { \n                background-size: 110% 110%, 220% 220%, 320% 320%, 270% 270%, 100% 100%;\n                filter: brightness(1.1) contrast(1.1);\n            }\n        }\n        \n        @keyframes portalRings {\n            0% { \n                transform: scale(0.8) rotate(0deg);\n                opacity: 0.3;\n            }\n            50% { \n                transform: scale(1.2) rotate(180deg);\n                opacity: 0.8;\n            }\n            100% { \n                transform: scale(0.8) rotate(360deg);\n                opacity: 0.3;\n            }\n        }\n        \n        @keyframes portalVortex {\n            0% { \n                transform: translate(-50%, -50%) rotate(0deg) scale(1);\n                opacity: 0.6;\n            }\n            25% { \n                transform: translate(-50%, -50%) rotate(90deg) scale(1.1);\n                opacity: 0.8;\n            }\n            50% { \n                transform: translate(-50%, -50%) rotate(180deg) scale(0.9);\n                opacity: 1;\n            }\n            75% { \n                transform: translate(-50%, -50%) rotate(270deg) scale(1.05);\n                opacity: 0.7;\n            }\n            100% { \n                transform: translate(-50%, -50%) rotate(360deg) scale(1);\n                opacity: 0.6;\n            }\n        }\n        \n        @keyframes energySwirl {\n            0% { \n                transform: rotate(0deg) translateX(80px) rotate(0deg);\n                opacity: 0.3;\n            }\n            25% { \n                transform: rotate(90deg) translateX(80px) rotate(-90deg);\n                opacity: 0.8;\n            }\n            50% { \n                transform: rotate(180deg) translateX(80px) rotate(-180deg);\n                opacity: 1;\n            }\n            75% { \n                transform: rotate(270deg) translateX(80px) rotate(-270deg);\n                opacity: 0.6;\n            }\n            100% { \n                transform: rotate(360deg) translateX(80px) rotate(-360deg);\n                opacity: 0.3;\n            }\n        }\n\n        /* Reduced Motion Support */\n        @media (prefers-reduced-motion: reduce) {\n            * {\n                animation-duration: 0.01ms !important;\n                animation-iteration-count: 1 !important;\n                transition-duration: 0.01ms !important;\n            }\n        }\n        \n\n    </style>\n</head>\n<body>\n    <!-- Game Instructions Screen -->\n    <div id=\"gameInstructionsScreen\" style=\"\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: \n            radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.8) 0%, rgba(79, 70, 229, 0.6) 20%, rgba(30, 27, 75, 0.4) 40%, rgba(0, 0, 0, 0.9) 70%),\n            radial-gradient(ellipse at 50% 50%, rgba(251, 191, 36, 0.3) 0%, transparent 50%),\n            radial-gradient(circle at 30% 70%, rgba(16, 185, 129, 0.2) 0%, transparent 40%),\n            radial-gradient(circle at 70% 30%, rgba(245, 158, 11, 0.2) 0%, transparent 40%),\n            linear-gradient(135deg, #0a0a1a, #1a0a2e, #16213e, #0f3460);\n        background-size: 100% 100%, 200% 200%, 300% 300%, 250% 250%, 100% 100%;\n        animation: portalPulse 8s ease-in-out infinite, mysticalBackground 12s ease-in-out infinite;\n        z-index: 2000;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        text-align: center;\n        padding: 32px;\n        overflow: hidden;\n        position: relative;\n    \">\n        <!-- Mystical floating orbs -->\n        <!-- Portal Rings -->\n        <div style=\"\n            position: absolute;\n            width: 400px;\n            height: 400px;\n            border: 3px solid rgba(139, 92, 246, 0.4);\n            border-radius: 50%;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%) scale(0.8);\n            animation: portalRings 10s linear infinite;\n        \"></div>\n        <div style=\"\n            position: absolute;\n            width: 300px;\n            height: 300px;\n            border: 2px solid rgba(251, 191, 36, 0.5);\n            border-radius: 50%;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%) scale(0.8);\n            animation: portalRings 8s linear infinite reverse;\n        \"></div>\n        <div style=\"\n            position: absolute;\n            width: 200px;\n            height: 200px;\n            border: 2px solid rgba(16, 185, 129, 0.6);\n            border-radius: 50%;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%) scale(0.8);\n            animation: portalRings 6s linear infinite;\n        \"></div>\n        \n        <div style=\"\n            position: absolute;\n            width: 100px;\n            height: 100px;\n            background: radial-gradient(circle, rgba(251, 191, 36, 0.6), rgba(251, 191, 36, 0.1), transparent);\n            border-radius: 50%;\n            top: 15%;\n            left: 10%;\n            animation: floatingOrb 8s ease-in-out infinite;\n            filter: blur(1px);\n        \"></div>\n        <div style=\"\n            position: absolute;\n            width: 60px;\n            height: 60px;\n            background: radial-gradient(circle, rgba(139, 92, 246, 0.7), rgba(139, 92, 246, 0.2), transparent);\n            border-radius: 50%;\n            top: 25%;\n            right: 15%;\n            animation: floatingOrb 6s ease-in-out infinite reverse;\n            filter: blur(1px);\n        \"></div>\n        <div style=\"\n            position: absolute;\n            width: 80px;\n            height: 80px;\n            background: radial-gradient(circle, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.1), transparent);\n            border-radius: 50%;\n            bottom: 20%;\n            left: 20%;\n            animation: floatingOrb 10s ease-in-out infinite;\n            filter: blur(1px);\n        \"></div>\n        <div style=\"\n            position: absolute;\n            width: 120px;\n            height: 120px;\n            background: radial-gradient(circle, rgba(245, 158, 11, 0.4), rgba(245, 158, 11, 0.1), transparent);\n            border-radius: 50%;\n            bottom: 30%;\n            right: 10%;\n            animation: floatingOrb 7s ease-in-out infinite reverse;\n            filter: blur(2px);\n        \"></div>\n        \n        <!-- Mystical runes floating -->\n        <div style=\"\n            position: absolute;\n            font-size: 24px;\n            color: rgba(251, 191, 36, 0.3);\n            top: 10%;\n            left: 25%;\n            animation: runeFloat 15s linear infinite;\n        \">\u2726</div>\n        <div style=\"\n            position: absolute;\n            font-size: 32px;\n            color: rgba(139, 92, 246, 0.4);\n            top: 20%;\n            right: 30%;\n            animation: runeFloat 12s linear infinite reverse;\n        \">\u25c6</div>\n        <div style=\"\n            position: absolute;\n            font-size: 28px;\n            color: rgba(16, 185, 129, 0.3);\n            bottom: 15%;\n            left: 15%;\n            animation: runeFloat 18s linear infinite;\n        \">\u2727</div>\n        <div style=\"\n            position: absolute;\n            font-size: 20px;\n            color: rgba(245, 158, 11, 0.4);\n            bottom: 25%;\n            right: 25%;\n            animation: runeFloat 14s linear infinite reverse;\n        \">\u25c7</div>\n        \n        <!-- Central Portal Vortex -->\n        <div style=\"\n            position: absolute;\n            width: 150px;\n            height: 150px;\n            background: radial-gradient(circle, rgba(139, 92, 246, 0.8) 0%, rgba(79, 70, 229, 0.6) 30%, rgba(251, 191, 36, 0.4) 60%, transparent 100%);\n            border-radius: 50%;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            animation: portalVortex 4s linear infinite;\n            filter: blur(2px);\n        \"></div>\n        \n        <!-- Swirling Energy Particles -->\n        <div style=\"\n            position: absolute;\n            width: 8px;\n            height: 8px;\n            background: rgba(251, 191, 36, 0.9);\n            border-radius: 50%;\n            top: 45%;\n            left: 45%;\n            animation: energySwirl 3s linear infinite;\n            filter: blur(1px);\n        \"></div>\n        <div style=\"\n            position: absolute;\n            width: 6px;\n            height: 6px;\n            background: rgba(139, 92, 246, 0.8);\n            border-radius: 50%;\n            top: 55%;\n            left: 55%;\n            animation: energySwirl 4s linear infinite reverse;\n            filter: blur(1px);\n        \"></div>\n        <div style=\"\n            position: absolute;\n            width: 10px;\n            height: 10px;\n            background: rgba(16, 185, 129, 0.7);\n            border-radius: 50%;\n            top: 50%;\n            left: 40%;\n            animation: energySwirl 5s linear infinite;\n            filter: blur(1px);\n        \"></div>\n        <div style=\"\n            position: absolute;\n            width: 7px;\n            height: 7px;\n            background: rgba(245, 158, 11, 0.8);\n            border-radius: 50%;\n            top: 40%;\n            left: 60%;\n            animation: energySwirl 3.5s linear infinite reverse;\n            filter: blur(1px);\n        \"></div>\n        <div style=\"\n            background: radial-gradient(circle at center, rgba(139, 92, 246, 0.25), rgba(79, 70, 229, 0.15), rgba(30, 27, 75, 0.3), rgba(0, 0, 0, 0.4));\n            border: 3px solid transparent;\n            background-clip: padding-box;\n            border-radius: 32px;\n            padding: 56px;\n            max-width: 650px;\n            width: 100%;\n            backdrop-filter: blur(25px);\n            box-shadow: \n                0 0 80px rgba(139, 92, 246, 0.5), \n                0 0 40px rgba(251, 191, 36, 0.3),\n                inset 0 0 60px rgba(255, 215, 0, 0.15),\n                inset 0 2px 0 rgba(255, 255, 255, 0.2);\n            position: relative;\n            overflow: hidden;\n            animation: cardPulse 4s ease-in-out infinite;\n        \">\n            <!-- Magical border effect -->\n            <div style=\"\n                position: absolute;\n                top: -3px;\n                left: -3px;\n                right: -3px;\n                bottom: -3px;\n                background: linear-gradient(45deg, \n                    rgba(251, 191, 36, 0.8), \n                    rgba(139, 92, 246, 0.8), \n                    rgba(16, 185, 129, 0.8), \n                    rgba(245, 158, 11, 0.8),\n                    rgba(251, 191, 36, 0.8));\n                background-size: 400% 400%;\n                border-radius: 32px;\n                z-index: -1;\n                animation: borderGlow 6s ease-in-out infinite;\n            \"></div>\n            <!-- Floating magical particles -->\n            <div style=\"\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n                pointer-events: none;\n                background-image: \n                    radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 0, 0.8), transparent),\n                    radial-gradient(2px 2px at 40% 70%, rgba(139, 92, 246, 0.8), transparent),\n                    radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.8), transparent),\n                    radial-gradient(1px 1px at 60% 10%, rgba(255, 215, 0, 0.6), transparent),\n                    radial-gradient(2px 2px at 80% 80%, rgba(139, 92, 246, 0.6), transparent);\n                background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px, 180px 180px;\n                animation: floatingParticles 12s linear infinite;\n                opacity: 0.7;\n            \"></div>\n            <h1 style=\"\n                font-size: 56px;\n                margin: 0 0 32px 0;\n                color: white;\n                text-shadow: \n                    0 0 30px rgba(255, 255, 255, 0.8),\n                    0 0 60px rgba(255, 255, 255, 0.4),\n                    0 4px 8px rgba(0, 0, 0, 0.3);\n                position: relative;\n                z-index: 1;\n                font-family: 'Cinzel', serif;\n                font-weight: 700;\n                letter-spacing: 2px;\n                text-transform: uppercase;\n                filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));\n            \">\u2694\ufe0f Tap Quest Tycoon \u2694\ufe0f</h1>\n            \n\n            \n\n            \n            <button id=\"startGameBtn\" style=\"\n                background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9, #5b21b6, #8b5cf6);\n                background-size: 400% 400%;\n                border: 3px solid transparent;\n                background-clip: padding-box;\n                border-radius: 20px;\n                color: white;\n                font-weight: 700;\n                font-size: 32px;\n                padding: 24px 56px;\n                cursor: pointer;\n                margin-top: 32px;\n                box-shadow: \n                    0 12px 48px rgba(139, 92, 246, 0.6),\n                    0 0 40px rgba(255, 215, 0, 0.4),\n                    inset 0 2px 0 rgba(255, 255, 255, 0.3),\n                    inset 0 -2px 0 rgba(0, 0, 0, 0.2);\n                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n                text-transform: uppercase;\n                letter-spacing: 2px;\n                animation: enchantedButton 5s ease-in-out infinite;\n                position: relative;\n                z-index: 1;\n                font-family: 'Cinzel', serif;\n                overflow: hidden;\n            \" onmouseover=\"\n                this.style.transform='scale(1.08) translateY(-2px)'; \n                this.style.boxShadow='0 20px 60px rgba(139, 92, 246, 0.8), 0 0 60px rgba(255, 215, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.3)';\n                this.style.filter='brightness(1.2) saturate(1.3)';\n            \" onmouseout=\"\n                this.style.transform='scale(1) translateY(0px)'; \n                this.style.boxShadow='0 12px 48px rgba(139, 92, 246, 0.6), 0 0 40px rgba(255, 215, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2)';\n                this.style.filter='brightness(1) saturate(1)';\n            \">\n                <!-- Magical border for button -->\n                <div style=\"\n                    position: absolute;\n                    top: -3px;\n                    left: -3px;\n                    right: -3px;\n                    bottom: -3px;\n                    background: linear-gradient(45deg, \n                        rgba(251, 191, 36, 0.9), \n                        rgba(139, 92, 246, 0.9), \n                        rgba(16, 185, 129, 0.9), \n                        rgba(245, 158, 11, 0.9),\n                        rgba(251, 191, 36, 0.9));\n                    background-size: 300% 300%;\n                    border-radius: 20px;\n                    z-index: -1;\n                    animation: borderGlow 4s ease-in-out infinite;\n                \"></div>\n                <!-- Sparkle overlay -->\n                <div style=\"\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    right: 0;\n                    bottom: 0;\n                    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),\n                                radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.2) 1px, transparent 1px),\n                                radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.4) 1px, transparent 1px);\n                    background-size: 50px 50px, 30px 30px, 40px 40px;\n                    animation: sparkleMove 8s linear infinite;\n                    pointer-events: none;\n                \"></div>\n                \ud83c\udf1f Start the adventure! \ud83c\udf1f\n            </button>\n        </div>\n    </div>\n\n    <div id=\"gameContainer\" style=\"display: none;\">\n        <div id=\"backgroundLayer\"></div>\n        \n        <!-- Minimal Top Status Bar -->\n        <div id=\"topStatusBar\">\n            <div id=\"goldDisplay\">\n                <img id=\"goldIcon\" width=\"24\" height=\"24\" style=\"object-fit: contain;\">\n                <span id=\"goldAmount\">0</span>\n            </div>\n            <div id=\"stageInfo\">\n                <div id=\"currentStageDisplay\" style=\"margin-top: 5px;\">Stage <span id=\"currentStage\">1</span></div>\n                <div id=\"worldName\">Enchanted Forest</div>\n            </div>\n            <div class=\"button-group\">\n                <button id=\"instructionsBtn\" style=\"\n                    width: 64px;\n                    height: 64px;\n                    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(79, 70, 229, 0.1));\n                    border: 2px solid var(--color-rare);\n                    border-radius: 50%;\n                    color: white;\n                    font-size: 28px;\n                    cursor: pointer;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    transition: all var(--transition-fast) var(--ease-out);\n                    backdrop-filter: blur(15px);\n                    margin-right: 8px;\n                    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);\n                    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);\n                \">?</button>\n            </div>\n        </div>\n        \n        <!-- Central Battle Area -->\n        <div id=\"battleArea\">\n            <div id=\"monsterContainer\">\n                <div id=\"monsterName\">Goblin</div>\n                <img id=\"currentMonster\" alt=\"Monster\">\n                <div id=\"monsterHealthBar\">\n                    <div id=\"healthFill\"></div>\n                    <div id=\"healthPercentage\">100%</div>\n                </div>\n            </div>\n            <div id=\"bossTimer\">Boss Timer: <span id=\"timerValue\">30</span>s</div>\n        </div>\n        \n        <!-- Floating Action Button -->\n        <button id=\"heroesToggle\">\ud83d\udd2e</button>\n        \n        <!-- Heroes Drawer -->\n        <div id=\"drawerBackdrop\"></div>\n        <div id=\"heroesDrawer\">\n            <div id=\"drawerHeader\">\n                <h2 id=\"drawerTitle\">Upgrades and Enchantments</h2>\n                <button id=\"closeDrawer\">\u2715</button>\n            </div>\n            \n            <!-- Tap Damage Upgrade Section -->\n            <div id=\"tapUpgradeSection\">\n                <div id=\"tapUpgradeCard\">\n                    <div id=\"tapUpgradeInfo\">\n                        <div id=\"tapUpgradeTitle\">Tap Power</div>\n                        <div id=\"tapUpgradeStats\">Current: <span id=\"currentTapDamage\">1</span> damage</div>\n                    </div>\n                    <button id=\"tapUpgradeBtn\">\n                        <div id=\"tapDamageCost\" style=\"margin-top: -5px;\">100 Gold</div>\n                    </button>\n                </div>\n            </div>\n            \n            \n            \n            <!-- Poison Potion Upgrade (200 Gold - Cheapest) -->\n            <div class=\"potion-upgrade-section\">\n                <div id=\"tapUpgradeCard\">\n                    <div id=\"tapUpgradeInfo\">\n                        <div id=\"tapUpgradeTitle\">\ud83e\uddea Poison Potion</div>\n                        <div id=\"tapUpgradeStats\">Level <span id=\"currentPoisonLevel\">1</span> \u2022 2 damage every 2s for 10s</div>\n                    </div>\n                    <button id=\"poisonPotionBtn\" class=\"upgrade-btn\">\n                        <div id=\"poisonPotionCost\">200 Gold</div>\n                    </button>\n                </div>\n            </div>\n            \n            <!-- Fire Potion Upgrade (300 Gold) -->\n            <div class=\"potion-upgrade-section\">\n                <div id=\"tapUpgradeCard\">\n                    <div id=\"tapUpgradeInfo\">\n                        <div id=\"tapUpgradeTitle\">\ud83d\udd25 Fire Potion</div>\n                        <div id=\"tapUpgradeStats\">Level <span id=\"currentFireLevel\">1</span> \u2022 2 damage for 10 seconds</div>\n                    </div>\n                    <button id=\"firePotionBtn\" class=\"upgrade-btn\">\n                        <div id=\"firePotionCost\">300 Gold</div>\n                    </button>\n                </div>\n            </div>\n            \n            <!-- Ghost Potion Upgrade (500 Gold) -->\n            <div class=\"potion-upgrade-section\">\n                <div id=\"tapUpgradeCard\">\n                    <div id=\"tapUpgradeInfo\">\n                        <div id=\"tapUpgradeTitle\">\ud83d\udc7b Ghost Potion</div>\n                        <div id=\"tapUpgradeStats\">Level <span id=\"currentGhostLevel\">1</span> \u2022 5 damage by scaring monster</div>\n                    </div>\n                    <button id=\"ghostPotionBtn\" class=\"upgrade-btn\">\n                        <div id=\"ghostPotionCost\">500 Gold</div>\n                    </button>\n                </div>\n            </div>\n            \n            <!-- Lightning Potion Upgrade (600 Gold) -->\n            <div class=\"potion-upgrade-section\">\n                <div id=\"tapUpgradeCard\">\n                    <div id=\"tapUpgradeInfo\">\n                        <div id=\"tapUpgradeTitle\">\u26a1 Lightning Potion</div>\n                        <div id=\"tapUpgradeStats\">Level <span id=\"currentLightningLevel\">1</span> \u2022 Chain lightning hits 3 times instantly</div>\n                    </div>\n                    <button id=\"lightningPotionBtn\" class=\"upgrade-btn\">\n                        <div id=\"lightningPotionCost\">600 Gold</div>\n                    </button>\n                </div>\n            </div>\n            \n            <!-- Strength Potion Upgrade (800 Gold) -->\n            <div class=\"potion-upgrade-section\">\n                <div id=\"tapUpgradeCard\">\n                    <div id=\"tapUpgradeInfo\">\n                        <div id=\"tapUpgradeTitle\">\ud83d\udcaa Strength Potion</div>\n                        <div id=\"tapUpgradeStats\">Level <span id=\"currentStrengthLevel\">1</span> \u2022 +Critical chance for 20s</div>\n                    </div>\n                    <button id=\"strengthPotionBtn\" class=\"upgrade-btn\">\n                        <div id=\"strengthPotionCost\">800 Gold</div>\n                    </button>\n                </div>\n            </div>\n            \n            <!-- Gold Potion Upgrade (1000 Gold - Most Expensive) -->\n            <div class=\"potion-upgrade-section\">\n                <div id=\"tapUpgradeCard\">\n                    <div id=\"tapUpgradeInfo\">\n                        <div id=\"tapUpgradeTitle\">\ud83d\udcb0 Gold Potion</div>\n                        <div id=\"tapUpgradeStats\">Level <span id=\"currentHealingLevel\">1</span> \u2022 Double gold for 20 seconds</div>\n                    </div>\n                    <button id=\"healingPotionBtn\" class=\"upgrade-btn\">\n                        <div id=\"healingPotionCost\">1000 Gold</div>\n                    </button>\n                </div>\n            </div>\n            \n            \n            \n            <!-- Heroes Grid -->\n\n        </div>\n        \n        <!-- Animation Layers -->\n        <div id=\"damageNumbers\"></div>\n        <div id=\"goldCoins\"></div>\n        \n        <!-- Monster Dex Button -->\n        <button id=\"monsterDexBtn\">\n            <span style=\"font-size: 48px;\">\ud83d\udcd6</span>\n        </button>\n    </div>\n\n    <script>\n        /* ==================================================\n         * GAME OVERVIEW: Tap Quest Tycoon - An idle clicker game where players tap to defeat monsters,\n         * collect gold, recruit heroes, and progress through stages. Features hero upgrades, boss battles,\n         * and world progression. Edit mode allows customization of heroes, progression settings, and visuals.\n         * \n         * GAME STATE SHAPE: window.gameConfig = {\n         *   player: { gold, tapDamage, stage, world, totalDamage },\n         *   heroes: [{ id, name, level, cost, dps, unlocked }],\n         *   monsters: { currentHealth, maxHealth, type, stage },\n         *   progression: { healthScaling, goldMultiplier, bossHealthMultiplier },\n         *   settings: { backgroundTheme, effectsIntensity, autoTap }\n         * }\n         * ==================================================\n         */\n\n        // Game state variables\n        let gameMode = 'play';\n        let assetCache = {};\n        let gameLoop = null;\n        let currentMonster = null;\n        let bossTimer = 0;\n        let lastTime = 0;\n        let selectedHero = null;\n        let drawerOpen = false;\n        \n        // Potion effect timers\n        let poisonTimer = 0;\n        let fireTimer = 0;\n        let strengthTimer = 0;\n        let poisonInterval = null;\n        let fireInterval = null;\n        \n        // Gold boost variables\n        window.goldBoostTimer = 0;\n        window.goldBoostMultiplier = 1;\n        window.goldBoostInterval = null;\n\n        // Web Audio API\n        let audioContext = null;\n        let audioBuffers = {};\n        let masterGainNode = null;\n        let musicGainNode = null;\n        let sfxGainNode = null;\n        let musicSource = null;\n\n        // Hero definitions - Empty array (all heroes removed)\n        const heroTemplates = [];\n\n        // Monster definitions - Over 1 billion different combinations!\n        const monsterPrefixes = [\n            'Ancient', 'Dark', 'Fire', 'Ice', 'Shadow', 'Golden', 'Crystal', 'Mystic', 'Cursed', 'Divine',\n            'Savage', 'Wild', 'Elder', 'Young', 'Giant', 'Tiny', 'Swift', 'Mighty', 'Fierce', 'Gentle',\n            'Corrupted', 'Pure', 'Toxic', 'Radiant', 'Spectral', 'Ethereal', 'Primal', 'Evolved', 'Mutant', 'Blessed',\n            'Demonic', 'Angelic', 'Undead', 'Living', 'Mechanical', 'Organic', 'Elemental', 'Void', 'Astral', 'Temporal',\n            'Frozen', 'Burning', 'Electric', 'Poisonous', 'Healing', 'Destructive', 'Creative', 'Chaotic', 'Orderly', 'Neutral'\n        ];\n\n        const monsterNames = [\n            'Goblin', 'Orc', 'Skeleton', 'Slime', 'Dragon', 'Wolf', 'Bear', 'Spider', 'Bat', 'Rat',\n            'Troll', 'Ogre', 'Demon', 'Angel', 'Golem', 'Elemental', 'Wraith', 'Phantom', 'Zombie', 'Vampire',\n            'Werewolf', 'Minotaur', 'Centaur', 'Griffin', 'Phoenix', 'Unicorn', 'Pegasus', 'Hydra', 'Kraken', 'Leviathan',\n            'Basilisk', 'Chimera', 'Manticore', 'Sphinx', 'Banshee', 'Lich', 'Necromancer', 'Wizard', 'Warrior', 'Archer',\n            'Rogue', 'Paladin', 'Berserker', 'Shaman', 'Druid', 'Monk', 'Assassin', 'Knight', 'Mage', 'Sorcerer',\n            'Warlock', 'Cleric', 'Ranger', 'Bard', 'Barbarian', 'Samurai', 'Ninja', 'Pirate', 'Viking', 'Gladiator',\n            'Titan', 'Colossus', 'Behemoth', 'Leviathan', 'Juggernaut', 'Destroyer', 'Guardian', 'Sentinel', 'Warden', 'Keeper',\n            'Stalker', 'Hunter', 'Predator', 'Scavenger', 'Parasite', 'Symbiont', 'Mutant', 'Aberration', 'Horror', 'Terror',\n            'Nightmare', 'Dream', 'Vision', 'Illusion', 'Mirage', 'Echo', 'Shadow', 'Reflection', 'Clone', 'Duplicate',\n            'Spirit', 'Soul', 'Essence', 'Energy', 'Force', 'Power', 'Strength', 'Might', 'Fury', 'Rage',\n            'Serpent', 'Viper', 'Cobra', 'Python', 'Anaconda', 'Wyvern', 'Drake', 'Wyrm', 'Salamander', 'Newt',\n            'Frog', 'Toad', 'Lizard', 'Gecko', 'Iguana', 'Chameleon', 'Turtle', 'Tortoise', 'Crab', 'Lobster',\n            'Shrimp', 'Prawn', 'Octopus', 'Squid', 'Jellyfish', 'Starfish', 'Seahorse', 'Shark', 'Whale', 'Dolphin',\n            'Seal', 'Walrus', 'Penguin', 'Albatross', 'Eagle', 'Hawk', 'Falcon', 'Owl', 'Raven', 'Crow',\n            'Sparrow', 'Robin', 'Cardinal', 'Bluejay', 'Woodpecker', 'Hummingbird', 'Peacock', 'Flamingo', 'Swan', 'Duck',\n            'Goose', 'Turkey', 'Chicken', 'Rooster', 'Hen', 'Chick', 'Ostrich', 'Emu', 'Cassowary', 'Kiwi',\n            'Lion', 'Tiger', 'Leopard', 'Cheetah', 'Panther', 'Jaguar', 'Lynx', 'Bobcat', 'Cougar', 'Puma',\n            'Hyena', 'Jackal', 'Fox', 'Coyote', 'Dingo', 'Fennec', 'Arctic Fox', 'Red Fox', 'Gray Fox', 'Silver Fox',\n            'Elephant', 'Rhino', 'Hippo', 'Giraffe', 'Zebra', 'Antelope', 'Gazelle', 'Deer', 'Elk', 'Moose',\n            'Caribou', 'Reindeer', 'Buffalo', 'Bison', 'Yak', 'Ox', 'Bull', 'Cow', 'Horse', 'Stallion',\n            'Mare', 'Foal', 'Pony', 'Donkey', 'Mule', 'Camel', 'Llama', 'Alpaca', 'Sheep', 'Ram',\n            'Goat', 'Pig', 'Boar', 'Hog', 'Rabbit', 'Hare', 'Squirrel', 'Chipmunk', 'Beaver', 'Otter',\n            'Badger', 'Weasel', 'Ferret', 'Mink', 'Skunk', 'Raccoon', 'Opossum', 'Armadillo', 'Anteater', 'Sloth',\n            'Monkey', 'Ape', 'Gorilla', 'Chimpanzee', 'Orangutan', 'Baboon', 'Lemur', 'Koala', 'Kangaroo', 'Wallaby',\n            // Mythological creatures\n            'Medusa', 'Cyclops', 'Cerberus', 'Fenrir', 'Jormungandr', 'Valkyrie', 'Banshee', 'Kelpie', 'Selkie', 'Dullahan',\n            'Wendigo', 'Skinwalker', 'Chupacabra', 'Mothman', 'Jersey Devil', 'Thunderbird', 'Quetzalcoatl', 'Kukulkan', 'Tezcatlipoca', 'Xolotl',\n            'Anubis', 'Sobek', 'Thoth', 'Horus', 'Set', 'Ammit', 'Apep', 'Khepri', 'Sekhmet', 'Bastet',\n            'Kitsune', 'Tengu', 'Oni', 'Yokai', 'Kappa', 'Ryu', 'Suzaku', 'Byakko', 'Genbu', 'Seiryu',\n            'Rakshasa', 'Naga', 'Garuda', 'Hanuman', 'Ganesha', 'Kali', 'Durga', 'Shiva', 'Vishnu', 'Brahma',\n            'Djinn', 'Ifrit', 'Marid', 'Ghul', 'Roc', 'Simurgh', 'Bahamut', 'Leviathan', 'Behemoth', 'Ziz',\n            'Valkyrie', 'Einherjar', 'Draugr', 'Jotun', 'Alfar', 'Dvergr', 'Norns', 'Sleipnir', 'Huginn', 'Muninn',\n            'Banshee', 'Leprechaun', 'Selkie', 'Kelpie', 'Dullahan', 'Fear Dearg', 'Pooka', 'Changeling', 'Sluagh', 'Bean Sidhe',\n            'Wendigo', 'Sasquatch', 'Thunderbird', 'Skinwalker', 'Chupacabra', 'Mothman', 'Jersey Devil', 'Beast of Bladenboro', 'Fouke Monster', 'Skunk Ape',\n            'Yeti', 'Abominable Snowman', 'Bigfoot', 'Alma', 'Yowie', 'Orang Pendek', 'Hibagon', 'Yeren', 'Batutut', 'Nguoi Rung',\n            // Dangerous mythological beasts\n            'Balrog', 'Nazgul', 'Uruk-hai', 'Cave Troll', 'Fell Beast', 'Warg', 'Shelob', 'Smaug', 'Ancalagon', 'Glaurung',\n            'Tarrasque', 'Beholder', 'Mind Flayer', 'Lich', 'Death Knight', 'Dracolich', 'Pit Fiend', 'Balor', 'Marilith', 'Glabrezu',\n            'Aboleth', 'Kraken', 'Purple Worm', 'Remorhaz', 'Bulezau', 'Vrock', 'Hezrou', 'Nalfeshnee', 'Bebilith', 'Retriever',\n            'Nightshade', 'Nightcrawler', 'Nightwing', 'Demilich', 'Dracolich', 'Shadow Dragon', 'Prismatic Dragon', 'Force Dragon', 'Ethereal Dragon', 'Astral Dragon'\n        ];\n\n        const monsterSuffixes = [\n            'of Doom', 'of Power', 'of Might', 'of Fury', 'of Rage', 'of Darkness', 'of Light', 'of Fire', 'of Ice', 'of Thunder',\n            'the Destroyer', 'the Creator', 'the Guardian', 'the Hunter', 'the Stalker', 'the Wanderer', 'the Lost', 'the Found', 'the Wise', 'the Foolish',\n            'the Ancient', 'the Young', 'the Old', 'the New', 'the First', 'the Last', 'the Only', 'the Many', 'the Few', 'the All',\n            'Slayer', 'Bane', 'Crusher', 'Breaker', 'Shatterer', 'Render', 'Tearer', 'Ripper', 'Slasher', 'Piercer',\n            'Walker', 'Runner', 'Crawler', 'Flyer', 'Swimmer', 'Digger', 'Climber', 'Jumper', 'Leaper', 'Bouncer',\n            'Whisperer', 'Screamer', 'Howler', 'Roarer', 'Growler', 'Hisser', 'Chirper', 'Singer', 'Dancer', 'Fighter',\n            'Master', 'Lord', 'King', 'Queen', 'Prince', 'Princess', 'Duke', 'Duchess', 'Baron', 'Baroness',\n            'Knight', 'Squire', 'Page', 'Herald', 'Champion', 'Defender', 'Protector', 'Savior', 'Redeemer', 'Liberator'\n        ];\n\n        // Asset to creature name mapping - Each asset now has unique, distinct creature designs\n        const assetNameMap = {\n            'monster_goblin': ['Goblin', 'Imp', 'Gremlin', 'Kobold', 'Hobgoblin', 'Bugbear', 'Gnoll', 'Orc Scout'],\n            'monster_orc_warrior': ['Orc Warrior', 'Berserker', 'Brute', 'Barbarian', 'Raider', 'Marauder', 'Savage', 'Warlord'],\n            'monster_skeleton': ['Skeleton Warrior', 'Bone Knight', 'Undead Soldier', 'Death Guard', 'Lich Minion', 'Bone Archer', 'Skull Mage', 'Bone Lord'],\n            'monster_slime': ['Acid Slime', 'Gel Cube', 'Ooze Beast', 'Jelly Monster', 'Blob Creature', 'Pudding', 'Goo', 'Slime King'],\n            'monster_fire_demon': ['Fire Demon', 'Flame Devil', 'Infernal Fiend', 'Hellhound', 'Balrog', 'Fire Elemental', 'Magma Beast', 'Pyroclast'],\n            'monster_ice_troll': ['Ice Troll', 'Frost Giant', 'Yeti', 'Wendigo', 'Ice Golem', 'Frozen Beast', 'Glacier Troll', 'Blizzard Fiend'],\n            'monster_shadow_wraith': ['Shadow Wraith', 'Dark Specter', 'Void Phantom', 'Night Ghost', 'Umbral Spirit', 'Shade Walker', 'Eclipse Wraith', 'Darkness'],\n            'monster_earth_golem': ['Stone Golem', 'Rock Titan', 'Earth Colossus', 'Mountain Guardian', 'Boulder Beast', 'Granite Giant', 'Clay Sentinel', 'Earthen Lord'],\n            'monster_lightning_drake': ['Lightning Drake', 'Storm Wyvern', 'Thunder Dragon', 'Electric Serpent', 'Spark Beast', 'Volt Lizard', 'Plasma Drake', 'Shock Wyrm'],\n            'monster_void_beast': ['Void Beast', 'Cosmic Horror', 'Eldritch Nightmare', 'Star Eater', 'Reality Bender', 'Dimension Walker', 'Chaos Spawn', 'Entropy'],\n            'monster_nature_sprite': ['Nature Sprite', 'Forest Fairy', 'Woodland Pixie', 'Garden Wisp', 'Flower Spirit', 'Tree Nymph', 'Moss Creature', 'Vine Walker'],\n            'monster_metal_construct': ['Steel Construct', 'Iron Automaton', 'Gear Machine', 'Clockwork Guardian', 'Bronze Sentinel', 'Copper Golem', 'Mech Warrior', 'Steam Bot'],\n            'monster_ancient_dragon': ['Ancient Dragon', 'Elder Wyrm', 'Primordial Drake', 'Legendary Serpent', 'Titan Dragon', 'Colossal Wyvern', 'Mythic Beast', 'Dragon Emperor'],\n            'monster_phoenix_fire': ['Fire Phoenix', 'Flame Bird', 'Solar Eagle', 'Burning Falcon', 'Ember Hawk', 'Inferno Swan', 'Blazing Raven', 'Firebird'],\n            'monster_kraken_tentacles': ['Deep Kraken', 'Giant Octopus', 'Sea Monster', 'Tentacle Horror', 'Ocean Leviathan', 'Abyssal Squid', 'Colossal Cephalopod', 'Tide Terror'],\n            'monster_griffin_majestic': ['Majestic Griffin', 'Royal Gryphon', 'Sky Lion', 'Wind Eagle', 'Storm Rider', 'Cloud Walker', 'Aerial Hunter', 'Heaven Guardian'],\n            'monster_minotaur_warrior': ['Minotaur Warrior', 'Bull Champion', 'Horned Berserker', 'Maze Guardian', 'Bovine Beast', 'Labyrinth Lord', 'Horn Crusher', 'Bull King'],\n            'monster_hydra_multihead': ['Multi-Head Hydra', 'Serpent Hydra', 'Dragon Hydra', 'Poison Hydra', 'Regenerating Beast', 'Many-Headed Terror', 'Hydra Lord', 'Serpent King'],\n            'monster_basilisk_serpent': ['Basilisk', 'Death Serpent', 'Petrifying Snake', 'Venom Viper', 'Stone Gaze Wyrm', 'Medusa Serpent', 'Cursed Snake', 'Poison King'],\n            'monster_chimera_beast': ['Chimera', 'Hybrid Monster', 'Multi-Beast', 'Fusion Creature', 'Tri-Form Beast', 'Mutant Horror', 'Composite Monster', 'Aberrant Chimera'],\n            'monster_manticore_spikes': ['Spike Manticore', 'Thorn Beast', 'Needle Lion', 'Barb Scorpion', 'Quill Monster', 'Spine Creature', 'Porcupine Dragon', 'Thorn King'],\n            'monster_sphinx_riddle': ['Riddle Sphinx', 'Wise Guardian', 'Desert Oracle', 'Ancient Sage', 'Puzzle Master', 'Knowledge Keeper', 'Enigma Beast', 'Sphinx Lord'],\n            'monster_unicorn_horn': ['Pure Unicorn', 'Holy Beast', 'Light Steed', 'Divine Horse', 'Sacred Unicorn', 'Celestial Mount', 'Blessed Creature', 'Unicorn Lord'],\n            'monster_werewolf_moon': ['Werewolf', 'Moon Beast', 'Lycanthrope', 'Wolf Shifter', 'Lunar Predator', 'Night Howler', 'Pack Leader', 'Alpha Wolf'],\n            'monster_vampire_bat': ['Vampire Lord', 'Blood Drinker', 'Night Stalker', 'Crimson Bat', 'Undead Noble', 'Dark Count', 'Shadow Vampire', 'Bat King'],\n            'monster_centaur_archer': ['Centaur Archer', 'Horse Bowman', 'Forest Ranger', 'Wild Hunter', 'Woodland Guardian', 'Nature Protector', 'Bow Master', 'Centaur Lord'],\n            'monster_banshee_spirit': ['Wailing Banshee', 'Death Herald', 'Soul Screamer', 'Mourning Spirit', 'Grief Wraith', 'Sorrow Ghost', 'Lamenting Shade', 'Banshee Queen'],\n            'monster_forest_guardian': ['Forest Guardian', 'Ancient Treant', 'Grove Protector', 'Woodland Titan', 'Tree Shepherd', 'Nature Warden', 'Forest Lord', 'Elder Tree'],\n            'monster_crystal_golem': ['Crystal Guardian', 'Gem Titan', 'Prism Beast', 'Diamond Golem', 'Quartz Sentinel', 'Amethyst Giant', 'Crystal Lord', 'Jewel Keeper']\n        };\n\n        // World-specific monster distributions\n        const worldMonsters = {\n            // Enchanted Forest (0)\n            0: {\n                regular: [\n                    { asset: 'monster_goblin', baseHealth: 12, type: 'regular', scale: 0.9, design: 'Small green forest goblin with wooden club' },\n                    { asset: 'monster_nature_sprite', baseHealth: 9, type: 'regular', scale: 0.8, design: 'Tiny fairy with leaf wings and flower crown' },\n                    { asset: 'monster_unicorn_horn', baseHealth: 23, type: 'regular', scale: 1.2, design: 'Majestic white unicorn with silver horn' },\n                    { asset: 'monster_werewolf_moon', baseHealth: 27, type: 'regular', scale: 1.3, design: 'Gray werewolf with sharp claws and fangs' },\n                    { asset: 'monster_centaur_archer', baseHealth: 25, type: 'regular', scale: 1.2, design: 'Half-human half-horse archer with bow' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 32, type: 'regular', scale: 1.4, design: 'Massive golden dragon with spread wings' },\n                    { asset: 'monster_earth_golem', baseHealth: 28, type: 'regular', scale: 1.3, design: 'Stone golem made of rocks and moss' },\n                    { asset: 'monster_banshee_spirit', baseHealth: 20, type: 'regular', scale: 1.0, design: 'Ghostly banshee with flowing white robes' }\n                ],\n                boss: [\n                    { asset: 'monster_forest_guardian', baseHealth: 500, type: 'boss', scale: 1.3, design: 'Massive tree-like guardian with glowing eyes' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 800, type: 'boss', scale: 1.8, design: 'Colossal golden dragon breathing fire' }\n                ]\n            },\n            \n            // Crystal Caves (1)\n            1: {\n                regular: [\n                    { asset: 'monster_crystal_golem', baseHealth: 26, type: 'regular', scale: 1.2, design: 'Crystal golem with glowing blue gems embedded in body' },\n                    { asset: 'monster_earth_golem', baseHealth: 32, type: 'regular', scale: 1.4, design: 'Stone golem made of rocks and moss' },\n                    { asset: 'monster_ice_troll', baseHealth: 25, type: 'regular', scale: 1.2, design: 'Large blue-white troll with icicles on body' },\n                    { asset: 'monster_lightning_drake', baseHealth: 20, type: 'regular', scale: 1.1, design: 'Small electric blue dragon with sparking wings' },\n                    { asset: 'monster_goblin', baseHealth: 11, type: 'regular', scale: 1.0, design: 'Small green goblin with wooden club' },\n                    { asset: 'monster_skeleton', baseHealth: 13, type: 'regular', scale: 0.9, design: 'Bone white skeleton warrior with sword' }\n                ],\n                boss: [\n                    { asset: 'monster_crystal_golem', baseHealth: 600, type: 'boss', scale: 1.4, design: 'Massive crystal golem with purple gems' },\n                    { asset: 'monster_earth_golem', baseHealth: 950, type: 'boss', scale: 2.1, design: 'Colossal stone titan with green gems' }\n                ]\n            },\n            \n            // Volcanic Peaks (2)\n            2: {\n                regular: [\n                    { asset: 'monster_fire_demon', baseHealth: 23, type: 'regular', scale: 1.3, design: 'Red fire demon with horns and flames around body' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 38, type: 'regular', scale: 1.6, design: 'Massive golden dragon with spread wings' },\n                    { asset: 'monster_earth_golem', baseHealth: 33, type: 'regular', scale: 1.5, design: 'Stone golem made of rocks and moss' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 30, type: 'regular', scale: 1.4, design: 'Brilliant phoenix with flaming feathers and wings' },\n                    { asset: 'monster_metal_construct', baseHealth: 27, type: 'regular', scale: 1.2, design: 'Mechanical construct with gears and steam pipes' }\n                ],\n                boss: [\n                    { asset: 'monster_fire_demon', baseHealth: 550, type: 'boss', scale: 1.5, design: 'Massive red fire demon with horns' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 720, type: 'boss', scale: 1.6, design: 'Colossal phoenix rising from ashes' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 820, type: 'boss', scale: 1.9, design: 'Gigantic golden dragon breathing fire' }\n                ]\n            },\n            \n            // Frozen Tundra (3)\n            3: {\n                regular: [\n                    { asset: 'monster_ice_troll', baseHealth: 24, type: 'regular', scale: 1.3, design: 'Large blue-white troll with icicles on body' },\n                    { asset: 'monster_werewolf_moon', baseHealth: 28, type: 'regular', scale: 1.2, design: 'Gray werewolf with sharp claws and fangs' },\n                    { asset: 'monster_unicorn_horn', baseHealth: 22, type: 'regular', scale: 1.1, design: 'Majestic white unicorn with silver horn' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 36, type: 'regular', scale: 1.5, design: 'Massive golden dragon with spread wings' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 25, type: 'regular', scale: 1.2, design: 'Brilliant phoenix with flaming feathers and wings' }\n                ],\n                boss: [\n                    { asset: 'monster_ice_troll', baseHealth: 650, type: 'boss', scale: 1.6, design: 'Gigantic blue-white troll with frost breath' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 880, type: 'boss', scale: 2.0, design: 'Colossal golden dragon with icy breath' }\n                ]\n            },\n            \n            // Shadow Realm (4)\n            4: {\n                regular: [\n                    { asset: 'monster_shadow_wraith', baseHealth: 17, type: 'regular', scale: 1.1, design: 'Dark purple ethereal wraith with glowing eyes' },\n                    { asset: 'monster_banshee_spirit', baseHealth: 21, type: 'regular', scale: 1.1, design: 'Ghostly banshee with flowing white robes' },\n                    { asset: 'monster_vampire_bat', baseHealth: 24, type: 'regular', scale: 1.2, design: 'Vampire with dark cape and bat wings' },\n                    { asset: 'monster_skeleton', baseHealth: 18, type: 'regular', scale: 1.1, design: 'Bone white skeleton warrior with sword' },\n                    { asset: 'monster_void_beast', baseHealth: 20, type: 'regular', scale: 1.0, design: 'Dark starry void beast with cosmic patterns' }\n                ],\n                boss: [\n                    { asset: 'monster_shadow_wraith', baseHealth: 640, type: 'boss', scale: 1.5, design: 'Massive dark purple wraith with wispy smoke' },\n                    { asset: 'monster_vampire_bat', baseHealth: 720, type: 'boss', scale: 1.6, design: 'Colossal vampire with giant bat wings' },\n                    { asset: 'monster_banshee_spirit', baseHealth: 680, type: 'boss', scale: 1.5, design: 'Gigantic wailing banshee with ethereal form' }\n                ]\n            },\n            \n            // Golden Desert (5)\n            5: {\n                regular: [\n                    { asset: 'monster_fire_demon', baseHealth: 20, type: 'regular', scale: 1.2, design: 'Red fire demon with horns and flames around body' },\n                    { asset: 'monster_sphinx_riddle', baseHealth: 29, type: 'regular', scale: 1.3, design: 'Wise sphinx with human head and lion body' },\n                    { asset: 'monster_basilisk_serpent', baseHealth: 24, type: 'regular', scale: 1.1, design: 'Deadly basilisk serpent with emerald scales' },\n                    { asset: 'monster_manticore_spikes', baseHealth: 26, type: 'regular', scale: 1.2, design: 'Manticore with human face and scorpion tail' },\n                    { asset: 'monster_earth_golem', baseHealth: 31, type: 'regular', scale: 1.4, design: 'Stone golem made of rocks and moss' }\n                ],\n                boss: [\n                    { asset: 'monster_sphinx_riddle', baseHealth: 690, type: 'boss', scale: 1.6, design: 'Colossal sphinx with golden headdress' },\n                    { asset: 'monster_manticore_spikes', baseHealth: 710, type: 'boss', scale: 1.6, design: 'Gigantic manticore with massive spike tail' },\n                    { asset: 'monster_basilisk_serpent', baseHealth: 620, type: 'boss', scale: 1.5, design: 'Enormous basilisk with crown-like crest' }\n                ]\n            },\n            \n            // Sky Islands (6)\n            6: {\n                regular: [\n                    { asset: 'monster_nature_sprite', baseHealth: 8, type: 'regular', scale: 0.6, design: 'Tiny fairy with leaf wings and flower crown' },\n                    { asset: 'monster_metal_construct', baseHealth: 24, type: 'regular', scale: 1.2, design: 'Mechanical construct with gears and steam pipes' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 35, type: 'regular', scale: 1.5, design: 'Massive golden dragon with spread wings' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 28, type: 'regular', scale: 1.3, design: 'Brilliant phoenix with flaming feathers and wings' },\n                    { asset: 'monster_griffin_majestic', baseHealth: 30, type: 'regular', scale: 1.4, design: 'Noble griffin with eagle head and lion body' }\n                ],\n                boss: [\n                    { asset: 'monster_griffin_majestic', baseHealth: 680, type: 'boss', scale: 1.7, design: 'Colossal griffin with golden feathers' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 760, type: 'boss', scale: 1.8, design: 'Gigantic golden dragon breathing fire' }\n                ]\n            },\n            \n            // Deep Ocean (7)\n            7: {\n                regular: [\n                    { asset: 'monster_kraken_tentacles', baseHealth: 33, type: 'regular', scale: 1.4, design: 'Massive kraken with multiple tentacles' },\n                    { asset: 'monster_basilisk_serpent', baseHealth: 27, type: 'regular', scale: 1.3, design: 'Deadly basilisk serpent with emerald scales' },\n                    { asset: 'monster_slime', baseHealth: 10, type: 'regular', scale: 1.1, design: 'Cute blue slime with big eyes' },\n                    { asset: 'monster_skeleton', baseHealth: 14, type: 'regular', scale: 1.0, design: 'Bone white skeleton warrior with sword' },\n                    { asset: 'monster_ice_troll', baseHealth: 22, type: 'regular', scale: 1.4, design: 'Large blue-white troll with icicles on body' }\n                ],\n                boss: [\n                    { asset: 'monster_kraken_tentacles', baseHealth: 850, type: 'boss', scale: 1.9, design: 'Colossal kraken with dark blue-green scales' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 920, type: 'boss', scale: 2.0, design: 'Gigantic golden dragon with spread wings' }\n                ]\n            },\n            \n            // Mystic Ruins (8)\n            8: {\n                regular: [\n                    { asset: 'monster_skeleton', baseHealth: 15, type: 'regular', scale: 1.0, design: 'Bone white skeleton warrior with sword' },\n                    { asset: 'monster_shadow_wraith', baseHealth: 18, type: 'regular', scale: 1.1, design: 'Dark purple ethereal wraith with glowing eyes' },\n                    { asset: 'monster_banshee_spirit', baseHealth: 20, type: 'regular', scale: 1.0, design: 'Ghostly banshee with flowing white robes' },\n                    { asset: 'monster_sphinx_riddle', baseHealth: 27, type: 'regular', scale: 1.2, design: 'Wise sphinx with human head and lion body' },\n                    { asset: 'monster_earth_golem', baseHealth: 35, type: 'regular', scale: 1.5, design: 'Stone golem made of rocks and moss' }\n                ],\n                boss: [\n                    { asset: 'monster_earth_golem', baseHealth: 700, type: 'boss', scale: 1.7, design: 'Colossal stone golem with glowing gems' },\n                    { asset: 'monster_sphinx_riddle', baseHealth: 750, type: 'boss', scale: 1.6, design: 'Gigantic sphinx with golden headdress' }\n                ]\n            },\n            \n            // Celestial Void (9)\n            9: {\n                regular: [\n                    { asset: 'monster_void_beast', baseHealth: 25, type: 'regular', scale: 1.2, design: 'Dark starry void beast with cosmic patterns' },\n                    { asset: 'monster_unicorn_horn', baseHealth: 28, type: 'regular', scale: 1.3, design: 'Majestic white unicorn with silver horn' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 32, type: 'regular', scale: 1.4, design: 'Brilliant phoenix with flaming feathers and wings' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 40, type: 'regular', scale: 1.6, design: 'Massive golden dragon with spread wings' },\n                    { asset: 'monster_lightning_drake', baseHealth: 26, type: 'regular', scale: 1.2, design: 'Small electric blue dragon with sparking wings' }\n                ],\n                boss: [\n                    { asset: 'monster_void_beast', baseHealth: 750, type: 'boss', scale: 1.5, design: 'Colossal void beast with swirling cosmic energy' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 870, type: 'boss', scale: 1.7, design: 'Gigantic golden dragon with cosmic aura' }\n                ]\n            },\n            \n            // Neon Cybercity (10)\n            10: {\n                regular: [\n                    { asset: 'monster_metal_construct', baseHealth: 27, type: 'regular', scale: 1.3, design: 'Mechanical construct with gears and steam pipes' },\n                    { asset: 'monster_lightning_drake', baseHealth: 24, type: 'regular', scale: 1.1, design: 'Small electric blue dragon with sparking wings' },\n                    { asset: 'monster_goblin', baseHealth: 15, type: 'regular', scale: 1.0, design: 'Small green goblin with wooden club' },\n                    { asset: 'monster_orc_warrior', baseHealth: 20, type: 'regular', scale: 1.2, design: 'Fierce orc warrior with battle axe' },\n                    { asset: 'monster_skeleton', baseHealth: 18, type: 'regular', scale: 1.0, design: 'Bone white skeleton warrior with sword' }\n                ],\n                boss: [\n                    { asset: 'monster_metal_construct', baseHealth: 800, type: 'boss', scale: 1.9, design: 'Colossal mechanical construct with glowing core' }\n                ]\n            },\n            \n            // Primordial Jungle (11)\n            11: {\n                regular: [\n                    { asset: 'monster_nature_sprite', baseHealth: 7, type: 'regular', scale: 0.7, design: 'Tiny fairy with leaf wings and flower crown' },\n                    { asset: 'monster_goblin', baseHealth: 13, type: 'regular', scale: 0.9, design: 'Small green goblin with wooden club' },\n                    { asset: 'monster_slime', baseHealth: 11, type: 'regular', scale: 1.0, design: 'Cute blue slime with big eyes' },\n                    { asset: 'monster_basilisk_serpent', baseHealth: 21, type: 'regular', scale: 1.1, design: 'Deadly basilisk serpent with emerald scales' },\n                    { asset: 'monster_werewolf_moon', baseHealth: 29, type: 'regular', scale: 1.3, design: 'Gray werewolf with sharp claws and fangs' }\n                ],\n                boss: [\n                    { asset: 'monster_ancient_dragon', baseHealth: 1000, type: 'boss', scale: 2.2, design: 'Colossal golden dragon with ancient power' }\n                ]\n            },\n            \n            // Astral Dimension (12)\n            12: {\n                regular: [\n                    { asset: 'monster_void_beast', baseHealth: 31, type: 'regular', scale: 1.3, design: 'Dark starry void beast with cosmic patterns' },\n                    { asset: 'monster_shadow_wraith', baseHealth: 21, type: 'regular', scale: 1.4, design: 'Dark purple ethereal wraith with glowing eyes' },\n                    { asset: 'monster_lightning_drake', baseHealth: 21, type: 'regular', scale: 1.1, design: 'Small electric blue dragon with sparking wings' },\n                    { asset: 'monster_griffin_majestic', baseHealth: 32, type: 'regular', scale: 1.5, design: 'Noble griffin with eagle head and lion body' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 34, type: 'regular', scale: 1.4, design: 'Brilliant phoenix with flaming feathers and wings' }\n                ],\n                boss: [\n                    { asset: 'monster_void_beast', baseHealth: 850, type: 'boss', scale: 1.8, design: 'Massive void beast with swirling astral energy' }\n                ]\n            },\n            \n            // Molten Core (13)\n            13: {\n                regular: [\n                    { asset: 'monster_fire_demon', baseHealth: 25, type: 'regular', scale: 1.5, design: 'Red fire demon with horns and flames around body' },\n                    { asset: 'monster_earth_golem', baseHealth: 34, type: 'regular', scale: 1.7, design: 'Stone golem made of rocks and moss' },\n                    { asset: 'monster_lightning_drake', baseHealth: 23, type: 'regular', scale: 1.2, design: 'Small electric blue dragon with sparking wings' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 30, type: 'regular', scale: 1.4, design: 'Brilliant phoenix with flaming feathers and wings' }\n                ],\n                boss: [\n                    { asset: 'monster_fire_demon', baseHealth: 900, type: 'boss', scale: 2.0, design: 'Colossal fire demon lord of the molten core' }\n                ]\n            },\n            \n            // Ethereal Gardens (14)\n            14: {\n                regular: [\n                    { asset: 'monster_nature_sprite', baseHealth: 12, type: 'regular', scale: 1.3, design: 'Tiny fairy with leaf wings and flower crown' },\n                    { asset: 'monster_unicorn_horn', baseHealth: 24, type: 'regular', scale: 1.1, design: 'Majestic white unicorn with silver horn' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 24, type: 'regular', scale: 1.1, design: 'Brilliant phoenix with flaming feathers and wings' },\n                    { asset: 'monster_banshee_spirit', baseHealth: 18, type: 'regular', scale: 1.0, design: 'Ghostly banshee with flowing white robes' }\n                ],\n                boss: [\n                    { asset: 'monster_unicorn_horn', baseHealth: 660, type: 'boss', scale: 1.5, design: 'Gigantic pure unicorn with ethereal glow' }\n                ]\n            },\n            \n            // Clockwork Citadel (15)\n            15: {\n                regular: [\n                    { asset: 'monster_metal_construct', baseHealth: 29, type: 'regular', scale: 1.2, design: 'Mechanical construct with gears and steam pipes' },\n                    { asset: 'monster_lightning_drake', baseHealth: 25, type: 'regular', scale: 1.1, design: 'Small electric blue dragon with sparking wings' },\n                    { asset: 'monster_earth_golem', baseHealth: 32, type: 'regular', scale: 1.4, design: 'Stone golem made of rocks and moss' }\n                ],\n                boss: [\n                    { asset: 'monster_metal_construct', baseHealth: 950, type: 'boss', scale: 2.1, design: 'Gigantic clockwork titan with spinning gears' }\n                ]\n            },\n            \n            // Nightmare Realm (16)\n            16: {\n                regular: [\n                    { asset: 'monster_shadow_wraith', baseHealth: 18, type: 'regular', scale: 1.3, design: 'Dark purple ethereal wraith with glowing eyes' },\n                    { asset: 'monster_void_beast', baseHealth: 30, type: 'regular', scale: 1.4, design: 'Dark starry void beast with cosmic patterns' },\n                    { asset: 'monster_chimera_beast', baseHealth: 35, type: 'regular', scale: 1.5, design: 'Chimera with lion head and snake tail' },\n                    { asset: 'monster_hydra_multihead', baseHealth: 38, type: 'regular', scale: 1.4, design: 'Fearsome hydra with three serpent heads' }\n                ],\n                boss: [\n                    { asset: 'monster_chimera_beast', baseHealth: 780, type: 'boss', scale: 1.7, design: 'Colossal chimera with multiple beast forms' }\n                ]\n            },\n            \n            // Crystal Metropolis (17)\n            17: {\n                regular: [\n                    { asset: 'monster_crystal_golem', baseHealth: 32, type: 'regular', scale: 1.4, design: 'Crystal golem with glowing blue gems embedded in body' },\n                    { asset: 'monster_ice_troll', baseHealth: 25, type: 'regular', scale: 1.2, design: 'Large blue-white troll with icicles on body' },\n                    { asset: 'monster_lightning_drake', baseHealth: 20, type: 'regular', scale: 1.1, design: 'Small electric blue dragon with sparking wings' }\n                ],\n                boss: [\n                    { asset: 'monster_crystal_golem', baseHealth: 1000, type: 'boss', scale: 2.2, design: 'Colossal crystal golem with rainbow gems' }\n                ]\n            },\n            \n            // Windswept Peaks (18)\n            18: {\n                regular: [\n                    { asset: 'monster_griffin_majestic', baseHealth: 27, type: 'regular', scale: 1.3, design: 'Noble griffin with eagle head and lion body' },\n                    { asset: 'monster_phoenix_fire', baseHealth: 26, type: 'regular', scale: 1.2, design: 'Brilliant phoenix with flaming feathers and wings' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 35, type: 'regular', scale: 1.5, design: 'Massive golden dragon with spread wings' }\n                ],\n                boss: [\n                    { asset: 'monster_griffin_majestic', baseHealth: 1050, type: 'boss', scale: 2.3, design: 'Gigantic griffin lord of the mountain peaks' }\n                ]\n            },\n            \n            // Abyssal Depths (19)\n            19: {\n                regular: [\n                    { asset: 'monster_kraken_tentacles', baseHealth: 37, type: 'regular', scale: 1.5, design: 'Massive kraken with multiple tentacles' },\n                    { asset: 'monster_basilisk_serpent', baseHealth: 27, type: 'regular', scale: 1.3, design: 'Deadly basilisk serpent with emerald scales' },\n                    { asset: 'monster_ancient_dragon', baseHealth: 39, type: 'regular', scale: 1.5, design: 'Massive golden dragon with spread wings' },\n                    { asset: 'monster_void_beast', baseHealth: 28, type: 'regular', scale: 1.2, design: 'Dark starry void beast with cosmic patterns' }\n                ],\n                boss: [\n                    { asset: 'monster_kraken_tentacles', baseHealth: 1100, type: 'boss', scale: 2.4, design: 'Colossal abyssal kraken with glowing tentacles' }\n                ]\n            }\n        };\n\n        function generateRandomMonster(type) {\n            // Get current world index\n            const currentWorld = window.gameConfig.player.world;\n            \n            // Get monsters for current world, fallback to world 0 if not found\n            const worldData = worldMonsters[currentWorld] || worldMonsters[0];\n            const baseTypes = type === 'boss' ? worldData.boss : worldData.regular;\n            \n            // If no monsters defined for this world/type, fallback to enchanted forest\n            const fallbackTypes = type === 'boss' ? worldMonsters[0].boss : worldMonsters[0].regular;\n            const monstersToUse = baseTypes.length > 0 ? baseTypes : fallbackTypes;\n            \n            const baseMonster = monstersToUse[Math.floor(Math.random() * monstersToUse.length)];\n            \n            // Get appropriate names for this asset\n            const possibleNames = assetNameMap[baseMonster.asset] || ['Monster'];\n            const baseName = possibleNames[Math.floor(Math.random() * possibleNames.length)];\n            \n            // Add prefix and suffix for variety\n            const prefix = monsterPrefixes[Math.floor(Math.random() * monsterPrefixes.length)];\n            const suffix = Math.random() < 0.3 ? ' ' + monsterSuffixes[Math.floor(Math.random() * monsterSuffixes.length)] : '';\n            \n            // Add random stat variations (\u00b120%)\n            const healthVariation = 0.8 + Math.random() * 0.4; // 0.8 to 1.2\n            const scaleVariation = 0.9 + Math.random() * 0.2; // 0.9 to 1.1\n            \n            return {\n                name: `${prefix} ${baseName}${suffix}`,\n                asset: baseMonster.asset,\n                baseHealth: Math.floor(baseMonster.baseHealth * healthVariation),\n                type: baseMonster.type,\n                scale: baseMonster.scale * scaleVariation,\n                design: baseMonster.design\n            };\n        }\n\n        // Get random monster of specified type\n        function getRandomMonster(type) {\n            return generateRandomMonster(type);\n        }\n\n        // World definitions - Each world spans 10 stages, alternating every 10 stages for 1000+ total stages\n        const worlds = [\n            { name: 'Enchanted Forest', background: 'background_enchanted_forest' },\n            { name: 'Crystal Caves', background: 'background_crystal_caves' },\n            { name: 'Volcanic Peaks', background: 'background_volcanic_peaks' },\n            { name: 'Frozen Tundra', background: 'background_frozen_tundra' },\n            { name: 'Shadow Realm', background: 'background_shadow_realm' },\n            { name: 'Golden Desert', background: 'background_golden_desert' },\n            { name: 'Sky Islands', background: 'background_sky_islands' },\n            { name: 'Deep Ocean', background: 'background_deep_ocean' },\n            { name: 'Mystic Ruins', background: 'background_mystic_ruins' },\n            { name: 'Celestial Void', background: 'background_celestial_void' },\n            // 10 new worlds with unique scenarios\n            { name: 'Neon Cybercity', background: 'background_neon_cybercity' },\n            { name: 'Primordial Jungle', background: 'background_primordial_jungle' },\n            { name: 'Astral Dimension', background: 'background_astral_dimension' },\n            { name: 'Molten Core', background: 'background_molten_core' },\n            { name: 'Ethereal Gardens', background: 'background_ethereal_gardens' },\n            { name: 'Clockwork Citadel', background: 'background_clockwork_citadel' },\n            { name: 'Nightmare Realm', background: 'background_nightmare_realm' },\n            { name: 'Crystal Metropolis', background: 'background_crystal_metropolis' },\n            { name: 'Windswept Peaks', background: 'background_windswept_peaks' },\n            { name: 'Abyssal Depths', background: 'background_abyssal_depths' }\n        ];\n\n        // UI Management Functions\n        function toggleDrawer() {\n            // Close monster dex if it's open to prevent overlap\n            const existingDexModal = document.getElementById('monsterDexModal');\n            if (existingDexModal) {\n                existingDexModal.remove();\n            }\n            \n            drawerOpen = !drawerOpen;\n            const drawer = document.getElementById('heroesDrawer');\n            const backdrop = document.getElementById('drawerBackdrop');\n            const toggleBtn = document.getElementById('heroesToggle');\n            \n            if (drawerOpen) {\n                drawer.classList.add('open');\n                backdrop.classList.add('open');\n                // Keep the symbol as \ud83d\udd2e even when drawer is open\n                toggleBtn.textContent = '\ud83d\udd2e';\n            } else {\n                drawer.classList.remove('open');\n                backdrop.classList.remove('open');\n                // Keep the symbol as \ud83d\udd2e when drawer is closed\n                toggleBtn.textContent = '\ud83d\udd2e';\n            }\n        }\n\n        function createTapFeedback(x, y) {\n            const feedback = document.createElement('div');\n            feedback.className = 'tap-feedback';\n            feedback.style.left = (x - 60) + 'px';\n            feedback.style.top = (y - 60) + 'px';\n            \n            document.getElementById('battleArea').appendChild(feedback);\n            \n            setTimeout(() => {\n                if (feedback.parentNode) {\n                    feedback.parentNode.removeChild(feedback);\n                }\n            }, 500);\n        }\n\n        function initAudioContext() {\n            try {\n                // Create AudioContext (with vendor prefixes for compatibility)\n                const AudioContextClass = window.AudioContext || window.webkitAudioContext;\n                audioContext = new AudioContextClass();\n\n                // Create master gain node\n                masterGainNode = audioContext.createGain();\n                masterGainNode.connect(audioContext.destination);\n\n                // Create separate gain nodes for music and sound effects\n                musicGainNode = audioContext.createGain();\n                musicGainNode.gain.value = 0.3; // Music at 30% volume\n                musicGainNode.connect(masterGainNode);\n\n                sfxGainNode = audioContext.createGain();\n                sfxGainNode.gain.value = 0.7; // Sound effects at 70% volume\n                sfxGainNode.connect(masterGainNode);\n\n                lib.log('Web Audio API initialized successfully');\n            } catch (e) {\n                console.error('Failed to initialize Web Audio API:', e);\n                lib.log('Audio will be disabled');\n            }\n        }\n\n        async function loadAudioBuffer(url) {\n            try {\n                const response = await fetch(url);\n                const arrayBuffer = await response.arrayBuffer();\n                const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n                return audioBuffer;\n            } catch (e) {\n                console.error('Failed to load audio:', url, e);\n                return null;\n            }\n        }\n\n        async function preloadAudioBuffers(audioAssetIds) {\n            if (!audioContext) {\n                lib.log('Audio context not initialized, skipping audio preload');\n                return;\n            }\n\n            const audioAssets = [];\n\n            for (const id of audioAssetIds) {\n                const assetInfo = lib.getAsset(id);\n                if (assetInfo && assetInfo.type === 'audio') {\n                    audioAssets.push({\n                        id,\n                        url: assetInfo.url,\n                        loop: assetInfo.loop === 'true' || assetInfo.loop === true\n                    });\n                }\n            }\n\n            // Load audio buffers in parallel\n            const audioPromises = audioAssets.map(async ({ id, url, loop }) => {\n                const buffer = await loadAudioBuffer(url);\n                if (buffer) {\n                    audioBuffers[id] = { buffer, loop };\n                }\n            });\n\n            await Promise.all(audioPromises);\n            lib.log('All audio assets loaded');\n        }\n\n        function playSound(soundId) {\n            if (!audioContext || !audioBuffers[soundId]) return;\n\n            try {\n                // Resume AudioContext if it's suspended (due to browser autoplay policies)\n                if (audioContext.state === 'suspended') {\n                    audioContext.resume();\n                }\n\n                // Create a new source node for this sound\n                const source = audioContext.createBufferSource();\n                source.buffer = audioBuffers[soundId].buffer;\n                source.connect(sfxGainNode);\n\n                // Start playback immediately\n                source.start(0);\n            } catch (e) {\n                console.error('Failed to play sound:', soundId, e);\n            }\n        }\n\n        function startBackgroundMusic() {\n            if (!audioContext || !audioBuffers['background_music']) return;\n\n            try {\n                // Resume AudioContext if suspended\n                if (audioContext.state === 'suspended') {\n                    audioContext.resume();\n                }\n\n                // Stop existing music if playing\n                if (musicSource) {\n                    musicSource.stop();\n                    musicSource = null;\n                }\n\n                // Create and start new music source\n                musicSource = audioContext.createBufferSource();\n                musicSource.buffer = audioBuffers['background_music'].buffer;\n                musicSource.loop = true;\n                musicSource.connect(musicGainNode);\n                musicSource.start(0);\n            } catch (e) {\n                console.error('Failed to start background music:', e);\n            }\n        }\n\n        function stopBackgroundMusic() {\n            if (musicSource) {\n                try {\n                    musicSource.stop();\n                } catch (e) {\n                    // Source might already be stopped\n                }\n                musicSource = null;\n            }\n        }\n\n        function preloadAssets() {\n            const assetIds = [\n                'player_hero_warrior', 'player_hero_archer', 'player_hero_mage',\n                'monster_goblin', 'monster_orc_warrior', 'monster_skeleton', 'monster_slime',\n                'monster_fire_demon', 'monster_ice_troll', 'monster_shadow_wraith', 'monster_earth_golem',\n                'monster_lightning_drake', 'monster_void_beast', 'monster_nature_sprite', 'monster_metal_construct',\n                'monster_forest_guardian', 'monster_crystal_golem',\n                // New mythological monsters\n                'monster_ancient_dragon', 'monster_phoenix_fire', 'monster_kraken_tentacles', 'monster_griffin_majestic',\n                'monster_minotaur_warrior', 'monster_hydra_multihead', 'monster_basilisk_serpent', 'monster_chimera_beast',\n                'monster_manticore_spikes', 'monster_sphinx_riddle', 'monster_unicorn_horn', 'monster_werewolf_moon',\n                'monster_vampire_bat', 'monster_centaur_archer', 'monster_banshee_spirit',\n                'background_enchanted_forest', 'background_crystal_caves', 'background_volcanic_peaks', \n                'background_frozen_tundra', 'background_shadow_realm', 'background_golden_desert',\n                'background_sky_islands', 'background_deep_ocean', 'background_mystic_ruins', 'background_celestial_void',\n                // New world backgrounds\n                'background_neon_cybercity', 'background_primordial_jungle', 'background_astral_dimension',\n                'background_molten_core', 'background_ethereal_gardens', 'background_clockwork_citadel',\n                'background_nightmare_realm', 'background_crystal_metropolis', 'background_windswept_peaks', 'background_abyssal_depths',\n                'gold_coin',\n                'tap_sound', 'gold_collect_sound', 'monster_death_sound', 'level_up_sound', 'background_music'\n            ];\n\n            assetIds.forEach(id => {\n                const assetInfo = lib.getAsset(id);\n                if (assetInfo) {\n                    if (assetInfo.type === 'audio') {\n                        // Skip audio - handled by preloadAudioBuffers()\n                    } else {\n                        const img = new Image();\n                        img.src = assetInfo.url;\n                        assetCache[id] = img;\n                    }\n                }\n            });\n        }\n\n        function initializeGameState() {\n            if (!window.gameConfig.player) {\n                window.gameConfig.player = {\n                    gold: 0,\n                    tapDamage: 1,\n                    stage: 1,\n                    world: 0,\n                    totalDamage: 0,\n                    poisonPotionLevel: 1,\n                    ghostPotionLevel: 1,\n                    firePotionLevel: 1,\n                    strengthPotionLevel: 1,\n                    healingPotionLevel: 1,\n                    lightningPotionLevel: 1\n                };\n            }\n            \n            // Ensure potion levels exist\n            if (!window.gameConfig.player.poisonPotionLevel) window.gameConfig.player.poisonPotionLevel = 1;\n            if (!window.gameConfig.player.ghostPotionLevel) window.gameConfig.player.ghostPotionLevel = 1;\n            if (!window.gameConfig.player.firePotionLevel) window.gameConfig.player.firePotionLevel = 1;\n            if (!window.gameConfig.player.strengthPotionLevel) window.gameConfig.player.strengthPotionLevel = 1;\n            if (!window.gameConfig.player.healingPotionLevel) window.gameConfig.player.healingPotionLevel = 1;\n            if (!window.gameConfig.player.lightningPotionLevel) window.gameConfig.player.lightningPotionLevel = 1;\n\n            // Initialize empty heroes array\n            window.gameConfig.heroes = [];\n\n            if (!window.gameConfig.monsters) {\n                window.gameConfig.monsters = {\n                    currentHealth: 10,\n                    maxHealth: 10,\n                    type: 'goblin',\n                    stage: 1\n                };\n            }\n\n            if (!window.gameConfig.progression) {\n                window.gameConfig.progression = {\n                    healthScaling: 1.15,\n                    goldMultiplier: 1.0,\n                    bossHealthMultiplier: 10\n                };\n            }\n\n            if (!window.gameConfig.settings) {\n                window.gameConfig.settings = {\n                    backgroundTheme: 0,\n                    effectsIntensity: 1.0,\n                    autoTap: false,\n                    musicVolume: 0.6,\n                    effectsVolume: 0.8\n                };\n            }\n            \n            // Ensure volume settings exist\n            if (window.gameConfig.settings.musicVolume === undefined) {\n                window.gameConfig.settings.musicVolume = 0.6;\n            }\n            if (window.gameConfig.settings.effectsVolume === undefined) {\n                window.gameConfig.settings.effectsVolume = 0.8;\n            }\n            \n            // Initialize monster dex if it doesn't exist\n            if (!window.gameConfig.monsterDex) {\n                window.gameConfig.monsterDex = {};\n            }\n        }\n\n        function updateBackground() {\n            const world = worlds[window.gameConfig.player.world] || worlds[0];\n            const backgroundAsset = assetCache[world.background];\n            if (backgroundAsset) {\n                document.getElementById('backgroundLayer').style.backgroundImage = `url(${backgroundAsset.src})`;\n            }\n        }\n\n        function spawnMonster() {\n            const stage = window.gameConfig.player.stage;\n            const isBoss = stage % 10 === 0;\n            \n            // Always generate a completely new random monster\n            let monsterData;\n            if (isBoss) {\n                // Generate a random boss monster\n                monsterData = getRandomMonster('boss');\n                // Boss health formula: stage 10 = 310 HP, stage 20 = 410 HP, etc.\n                const baseHealth = (stage / 10) * 100 + 210;\n                currentMonster = {\n                    data: monsterData,\n                    maxHealth: baseHealth,\n                    currentHealth: 0,\n                    isBoss: true\n                };\n                \n                // Calculate boss timer based on difficulty (stage-based) - more generous timing\n                const baseBossTimer = 60; // Base timer for early bosses (increased from 30)\n                const timerIncrease = Math.floor(stage / 10) * 15; // +15 seconds every 10 stages\n                const maxTimer = 180; // Maximum 3 minutes\n                bossTimer = Math.min(baseBossTimer + timerIncrease, maxTimer);\n                \n                document.getElementById('bossTimer').style.display = 'block';\n            } else {\n                // Generate a random regular monster\n                monsterData = getRandomMonster('regular');\n                // Scale health based on stage progression - starts easy and gets harder\n                const baseHealth = Math.floor(monsterData.baseHealth * Math.pow(window.gameConfig.progression.healthScaling, Math.min(stage - 1, 15))); // Cap scaling at stage 15\n                currentMonster = {\n                    data: monsterData,\n                    maxHealth: baseHealth,\n                    currentHealth: 0,\n                    isBoss: false\n                };\n                document.getElementById('bossTimer').style.display = 'none';\n            }\n            \n            currentMonster.currentHealth = currentMonster.maxHealth;\n            \n            const monsterImg = document.getElementById('currentMonster');\n            const monsterNameEl = document.getElementById('monsterName');\n            \n            // Set monster name - always a new random name\n            monsterNameEl.textContent = monsterData.name;\n            \n            // Set monster image and scale - always a new random appearance\n            const asset = assetCache[monsterData.asset];\n            if (asset) {\n                monsterImg.src = asset.src;\n                monsterImg.style.transform = `scale(${monsterData.scale})`;\n                monsterImg.style.background = 'none';\n                monsterImg.style.width = 'auto';\n                monsterImg.style.height = 'auto';\n            } else {\n                // Fallback to colored rectangle if asset not loaded yet\n                monsterImg.style.background = isBoss ? '#8b5cf6' : '#ef4444';\n                monsterImg.style.width = '200px';\n                monsterImg.style.height = '200px';\n                monsterImg.style.transform = `scale(${monsterData.scale})`;\n            }\n            \n            updateHealthBar();\n            \n            // Add spawn animation with more dramatic effect for new monsters\n            monsterImg.style.opacity = '0';\n            monsterImg.style.transform += ' translateY(20px)';\n            setTimeout(() => {\n                monsterImg.style.transition = 'all 0.3s ease-out';\n                monsterImg.style.opacity = '1';\n                monsterImg.style.transform = `scale(${monsterData.scale})`;\n                setTimeout(() => {\n                    monsterImg.style.transition = '';\n                }, 300);\n            }, 50);\n            \n            // Check for world progression every time we spawn a monster\n            checkWorldProgression();\n        }\n        \n        function checkWorldProgression() {\n            const stage = window.gameConfig.player.stage;\n            // World changes every 10 stages, cycling through all worlds\n            const newWorldIndex = Math.floor((stage - 1) / 10) % worlds.length;\n            \n            if (newWorldIndex !== window.gameConfig.player.world) {\n                window.gameConfig.player.world = newWorldIndex;\n                updateBackground();\n                \n                // Show world change notification\n                const world = worlds[newWorldIndex];\n                if (world) {\n                    lib.log(`Entered new world: ${world.name}!`);\n                }\n            }\n        }\n\n        function updateHealthBar() {\n            if (currentMonster) {\n                const healthPercent = (currentMonster.currentHealth / currentMonster.maxHealth) * 100;\n                document.getElementById('healthFill').style.width = healthPercent + '%';\n                document.getElementById('healthPercentage').textContent = Math.round(healthPercent) + '%';\n            }\n        }\n\n        function dealDamage(damage, showDamage = true, isCritical = false) {\n            if (!currentMonster || gameMode === 'edit') return;\n            \n            currentMonster.currentHealth -= damage;\n            window.gameConfig.player.totalDamage += damage;\n            \n            // Only show damage number if requested (to avoid duplicates from hero attacks)\n            if (showDamage) {\n                showDamageNumber(damage, isCritical);\n            }\n            \n            // Monster hit animation\n            const monsterImg = document.getElementById('currentMonster');\n            const baseScale = currentMonster ? currentMonster.data.scale : 1.0;\n            monsterImg.style.transform = `scale(${baseScale * 1.1})`;\n            setTimeout(() => {\n                monsterImg.style.transform = `scale(${baseScale})`;\n            }, 100);\n            \n            updateHealthBar();\n            \n            if (currentMonster.currentHealth <= 0) {\n                killMonster();\n            }\n            \n\n        }\n\n        function killMonster() {\n            if (!currentMonster) return;\n            \n            // Boss explosion effect\n            if (currentMonster.isBoss) {\n                createBossExplosion();\n            }\n            \n            // Record monster in dex\n            const monsterName = currentMonster.data.name;\n            if (!window.gameConfig.monsterDex[monsterName]) {\n                window.gameConfig.monsterDex[monsterName] = {\n                    name: monsterName,\n                    asset: currentMonster.data.asset,\n                    type: currentMonster.data.type,\n                    scale: currentMonster.data.scale,\n                    design: currentMonster.data.design || 'Unique creature design',\n                    baseHealth: currentMonster.data.baseHealth,\n                    defeatedCount: 0,\n                    firstDefeatedStage: window.gameConfig.player.stage\n                };\n            }\n            window.gameConfig.monsterDex[monsterName].defeatedCount++;\n            \n            // Play death sound\n            playSound('monster_death_sound');\n            \n            // Calculate gold reward\n            const baseGold = currentMonster.isBoss ? window.gameConfig.player.stage * 5 : window.gameConfig.player.stage;\n            const goldReward = Math.floor(baseGold * window.gameConfig.progression.goldMultiplier);\n            \n            window.gameConfig.player.gold = Number(window.gameConfig.player.gold) + goldReward;\n            showGoldCoins(goldReward);\n            \n            // Advance stage\n            window.gameConfig.player.stage++;\n            \n            // Reset any boss visual effects\n            const monsterImg = document.getElementById('currentMonster');\n            monsterImg.style.filter = '';\n            \n            // Update UI and spawn new monster (world progression is handled in spawnMonster)\n            updateUI();\n            spawnMonster();\n            \n            // Play level up sound for boss kills\n            if (currentMonster && currentMonster.isBoss) {\n                playSound('level_up_sound');\n            }\n        }\n        \n        function createBossExplosion() {\n            const battleArea = document.getElementById('battleArea');\n            const monsterContainer = document.getElementById('monsterContainer');\n            \n            // Create multiple explosion particles\n            for (let i = 0; i < 12; i++) {\n                const particle = document.createElement('div');\n                particle.style.cssText = `\n                    position: absolute;\n                    width: 20px;\n                    height: 20px;\n                    background: radial-gradient(circle, #ff6b35, #f7931e, #ffcc02);\n                    border-radius: 50%;\n                    pointer-events: none;\n                    z-index: 25;\n                    left: 50%;\n                    top: 50%;\n                    transform: translate(-50%, -50%);\n                `;\n                \n                // Random explosion direction and distance\n                const angle = (i / 12) * Math.PI * 2;\n                const distance = 100 + Math.random() * 100;\n                const endX = Math.cos(angle) * distance;\n                const endY = Math.sin(angle) * distance;\n                \n                particle.style.animation = `bossExplosion 1s ease-out forwards`;\n                particle.style.setProperty('--endX', endX + 'px');\n                particle.style.setProperty('--endY', endY + 'px');\n                \n                monsterContainer.appendChild(particle);\n                \n                // Remove particle after animation\n                setTimeout(() => {\n                    if (particle.parentNode) {\n                        particle.parentNode.removeChild(particle);\n                    }\n                }, 1000);\n            }\n            \n            // Add explosion animation CSS if not exists\n            if (!document.querySelector('#bossExplosionStyle')) {\n                const style = document.createElement('style');\n                style.id = 'bossExplosionStyle';\n                style.textContent = `\n                    @keyframes bossExplosion {\n                        0% { \n                            transform: translate(-50%, -50%) scale(0.2);\n                            opacity: 1;\n                        }\n                        50% { \n                            transform: translate(calc(-50% + var(--endX) * 0.5), calc(-50% + var(--endY) * 0.5)) scale(1.5);\n                            opacity: 0.8;\n                        }\n                        100% { \n                            transform: translate(calc(-50% + var(--endX)), calc(-50% + var(--endY))) scale(0.1);\n                            opacity: 0;\n                        }\n                    }\n                `;\n                document.head.appendChild(style);\n            }\n            \n            // Screen flash effect\n            const flash = document.createElement('div');\n            flash.style.cssText = `\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 107, 53, 0.4));\n                pointer-events: none;\n                z-index: 30;\n                animation: flashEffect 0.5s ease-out forwards;\n            `;\n            \n            if (!document.querySelector('#flashEffectStyle')) {\n                const style = document.createElement('style');\n                style.id = 'flashEffectStyle';\n                style.textContent = `\n                    @keyframes flashEffect {\n                        0% { opacity: 0; }\n                        20% { opacity: 1; }\n                        100% { opacity: 0; }\n                    }\n                `;\n                document.head.appendChild(style);\n            }\n            \n            document.body.appendChild(flash);\n            \n            setTimeout(() => {\n                if (flash.parentNode) {\n                    flash.parentNode.removeChild(flash);\n                }\n            }, 500);\n            \n            // Monster shake effect\n            const monsterImg = document.getElementById('currentMonster');\n            monsterImg.style.animation = 'monsterShake 0.3s ease-in-out';\n            \n            if (!document.querySelector('#monsterShakeStyle')) {\n                const style = document.createElement('style');\n                style.id = 'monsterShakeStyle';\n                style.textContent = `\n                    @keyframes monsterShake {\n                        0%, 100% { transform: translateX(0); }\n                        25% { transform: translateX(-10px); }\n                        75% { transform: translateX(10px); }\n                    }\n                `;\n                document.head.appendChild(style);\n            }\n            \n            setTimeout(() => {\n                monsterImg.style.animation = '';\n            }, 300);\n        }\n\n        function showDamageNumber(damage, isCritical = false) {\n            const damageEl = document.createElement('div');\n            damageEl.className = 'damage-number';\n            \n            // Check if this is a special message or regular damage\n            if (typeof damage === 'string') {\n                damageEl.textContent = damage;\n                damageEl.style.color = '#ff4444';\n                damageEl.style.fontSize = '24px';\n            } else {\n                damageEl.textContent = Math.floor(damage);\n                \n                // Special styling for critical hits\n                if (isCritical) {\n                    damageEl.style.color = '#ff6b6b';\n                    damageEl.style.fontSize = '36px';\n                    damageEl.textContent += ' CRIT!';\n                    damageEl.style.textShadow = '0 0 10px #ff6b6b';\n                }\n            }\n            \n            // Random position around monster\n            const x = Math.random() * 200 + 250;\n            const y = Math.random() * 100 + 400;\n            damageEl.style.left = x + 'px';\n            damageEl.style.top = y + 'px';\n            \n            document.getElementById('damageNumbers').appendChild(damageEl);\n            \n            setTimeout(() => {\n                if (damageEl.parentNode) {\n                    damageEl.parentNode.removeChild(damageEl);\n                }\n            }, 1000);\n        }\n\n        function showGoldCoins(amount) {\n            playSound('gold_collect_sound');\n            \n            for (let i = 0; i < Math.min(amount, 5); i++) {\n                setTimeout(() => {\n                    const coinEl = document.createElement('img');\n                    coinEl.className = 'gold-coin';\n                    coinEl.src = assetCache.gold_coin.src;\n                    \n                    const x = Math.random() * 300 + 200;\n                    const y = Math.random() * 200 + 500;\n                    coinEl.style.left = x + 'px';\n                    coinEl.style.top = y + 'px';\n                    \n                    document.getElementById('goldCoins').appendChild(coinEl);\n                    \n                    setTimeout(() => {\n                        if (coinEl.parentNode) {\n                            coinEl.parentNode.removeChild(coinEl);\n                        }\n                    }, 1000);\n                }, i * 100);\n            }\n        }\n\n        function showHeroAttack(heroId, damage) {\n            const battleArea = document.getElementById('battleArea');\n            const monsterContainer = document.getElementById('monsterContainer');\n            \n            // Create attack effect based on hero type\n            const attackEl = document.createElement('div');\n            attackEl.style.position = 'absolute';\n            attackEl.style.pointerEvents = 'none';\n            attackEl.style.zIndex = '20';\n            \n            switch(heroId) {\n                case 'warrior':\n                    // Warrior: Sword slash effect from left\n                    attackEl.innerHTML = '\u2694\ufe0f';\n                    attackEl.style.fontSize = '48px';\n                    attackEl.style.color = '#fbbf24';\n                    attackEl.style.left = '200px';\n                    attackEl.style.top = '400px';\n                    attackEl.style.animation = 'warriorSlash 0.6s ease-out forwards';\n                    \n                    // Add CSS animation if not exists\n                    if (!document.querySelector('#warriorSlashStyle')) {\n                        const style = document.createElement('style');\n                        style.id = 'warriorSlashStyle';\n                        style.textContent = `\n                            @keyframes warriorSlash {\n                                0% { transform: translateX(-100px) rotate(-45deg) scale(0.5); opacity: 0; }\n                                50% { transform: translateX(0px) rotate(0deg) scale(1.2); opacity: 1; }\n                                100% { transform: translateX(100px) rotate(45deg) scale(0.8); opacity: 0; }\n                            }\n                        `;\n                        document.head.appendChild(style);\n                    }\n                    break;\n                    \n                case 'archer':\n                    // Archer: Arrow flying from right\n                    attackEl.innerHTML = '\ud83c\udff9';\n                    attackEl.style.fontSize = '32px';\n                    attackEl.style.color = '#10b981';\n                    attackEl.style.right = '100px';\n                    attackEl.style.top = '380px';\n                    attackEl.style.animation = 'archerArrow 0.8s ease-out forwards';\n                    \n                    if (!document.querySelector('#archerArrowStyle')) {\n                        const style = document.createElement('style');\n                        style.id = 'archerArrowStyle';\n                        style.textContent = `\n                            @keyframes archerArrow {\n                                0% { transform: translateX(200px) rotate(0deg) scale(1); opacity: 1; }\n                                70% { transform: translateX(-150px) rotate(-10deg) scale(1.1); opacity: 1; }\n                                100% { transform: translateX(-200px) rotate(-15deg) scale(0.8); opacity: 0; }\n                            }\n                        `;\n                        document.head.appendChild(style);\n                    }\n                    break;\n                    \n                case 'mage':\n                    // Mage: Magic spell effect from above\n                    attackEl.innerHTML = '\u2728';\n                    attackEl.style.fontSize = '56px';\n                    attackEl.style.color = '#8b5cf6';\n                    attackEl.style.left = '320px';\n                    attackEl.style.top = '200px';\n                    attackEl.style.animation = 'mageSpell 1s ease-out forwards';\n                    \n                    if (!document.querySelector('#mageSpellStyle')) {\n                        const style = document.createElement('style');\n                        style.id = 'mageSpellStyle';\n                        style.textContent = `\n                            @keyframes mageSpell {\n                                0% { transform: translateY(-100px) scale(0.3) rotate(0deg); opacity: 0; }\n                                30% { transform: translateY(-50px) scale(0.8) rotate(180deg); opacity: 0.8; }\n                                60% { transform: translateY(100px) scale(1.5) rotate(360deg); opacity: 1; }\n                                100% { transform: translateY(200px) scale(0.5) rotate(540deg); opacity: 0; }\n                            }\n                        `;\n                        document.head.appendChild(style);\n                    }\n                    break;\n            }\n            \n            battleArea.appendChild(attackEl);\n            \n            // Show damage number with hero-specific color\n            const damageEl = document.createElement('div');\n            damageEl.className = 'damage-number';\n            damageEl.textContent = Math.floor(damage);\n            \n            // Hero-specific damage number colors\n            switch(heroId) {\n                case 'warrior':\n                    damageEl.style.color = '#fbbf24';\n                    break;\n                case 'archer':\n                    damageEl.style.color = '#10b981';\n                    break;\n                case 'mage':\n                    damageEl.style.color = '#8b5cf6';\n                    break;\n            }\n            \n            const x = Math.random() * 200 + 250;\n            const y = Math.random() * 100 + 400;\n            damageEl.style.left = x + 'px';\n            damageEl.style.top = y + 'px';\n            \n            document.getElementById('damageNumbers').appendChild(damageEl);\n            \n            // Clean up elements\n            setTimeout(() => {\n                if (attackEl.parentNode) {\n                    attackEl.parentNode.removeChild(attackEl);\n                }\n                if (damageEl.parentNode) {\n                    damageEl.parentNode.removeChild(damageEl);\n                }\n            }, 1000);\n        }\n\n                function calculateTotalDPS() {\n            return 0; // No heroes, no DPS\n        }\n\n        function updateUI() {\n            // Ensure gold is treated as a number and display it\n            const goldValue = Number(window.gameConfig.player.gold) || 0;\n            document.getElementById('goldAmount').textContent = goldValue;\n            document.getElementById('currentStage').textContent = window.gameConfig.player.stage;\n            document.getElementById('currentTapDamage').textContent = window.gameConfig.player.tapDamage;\n            \n            const world = worlds[window.gameConfig.player.world] || worlds[0];\n            document.getElementById('worldName').textContent = world.name;\n            \n            // Update tap damage upgrade button\n            const tapUpgradeCost = Math.floor(100 * Math.pow(1.5, window.gameConfig.player.tapDamage - 1));\n            document.getElementById('tapDamageCost').textContent = tapUpgradeCost + ' Gold';\n            \n            const tapUpgradeBtn = document.getElementById('tapUpgradeBtn');\n            tapUpgradeBtn.disabled = Number(window.gameConfig.player.gold) < tapUpgradeCost;\n            \n            // Update potion levels and costs\n            document.getElementById('currentPoisonLevel').textContent = window.gameConfig.player.poisonPotionLevel;\n            document.getElementById('currentGhostLevel').textContent = window.gameConfig.player.ghostPotionLevel;\n            document.getElementById('currentFireLevel').textContent = window.gameConfig.player.firePotionLevel;\n            document.getElementById('currentStrengthLevel').textContent = window.gameConfig.player.strengthPotionLevel;\n            document.getElementById('currentHealingLevel').textContent = window.gameConfig.player.healingPotionLevel;\n            document.getElementById('currentLightningLevel').textContent = window.gameConfig.player.lightningPotionLevel;\n            \n            // Update potion costs and button states\n            const poisonCost = Math.floor(200 * Math.pow(1.6, window.gameConfig.player.poisonPotionLevel - 1));\n            const ghostCost = Math.floor(500 * Math.pow(1.7, window.gameConfig.player.ghostPotionLevel - 1));\n            const fireCost = Math.floor(300 * Math.pow(1.6, window.gameConfig.player.firePotionLevel - 1));\n            const strengthCost = Math.floor(800 * Math.pow(1.8, window.gameConfig.player.strengthPotionLevel - 1));\n            const healingCost = Math.floor(1000 * Math.pow(1.5, window.gameConfig.player.healingPotionLevel - 1));\n            const lightningCost = Math.floor(600 * Math.pow(1.7, window.gameConfig.player.lightningPotionLevel - 1));\n            \n            document.getElementById('poisonPotionCost').textContent = poisonCost + ' Gold';\n            document.getElementById('ghostPotionCost').textContent = ghostCost + ' Gold';\n            document.getElementById('firePotionCost').textContent = fireCost + ' Gold';\n            document.getElementById('strengthPotionCost').textContent = strengthCost + ' Gold';\n            document.getElementById('healingPotionCost').textContent = healingCost + ' Gold';\n            document.getElementById('lightningPotionCost').textContent = lightningCost + ' Gold';\n            \n            document.getElementById('poisonPotionBtn').disabled = goldValue < poisonCost;\n            document.getElementById('ghostPotionBtn').disabled = goldValue < ghostCost;\n            document.getElementById('firePotionBtn').disabled = goldValue < fireCost;\n            document.getElementById('strengthPotionBtn').disabled = goldValue < strengthCost;\n            document.getElementById('healingPotionBtn').disabled = goldValue < healingCost;\n            document.getElementById('lightningPotionBtn').disabled = goldValue < lightningCost;\n            \n            // Apply and save volume settings to ensure persistence\n            if (window.gameConfig.settings) {\n                // Apply volume settings to audio gain nodes\n                if (musicGainNode) {\n                    musicGainNode.gain.value = (window.gameConfig.settings.musicVolume || 0.6) * 0.3;\n                }\n\n                // Apply sound effects volume to gain node\n                if (sfxGainNode) {\n                    sfxGainNode.gain.value = (window.gameConfig.settings.effectsVolume || 0.8) * 0.7;\n                }\n\n                // Settings are automatically saved through gameConfig proxy\n            }\n        }\n\n\n\n                function upgradeHero(index) {\n            const hero = window.gameConfig.heroes[index];\n            const playerGold = Number(window.gameConfig.player.gold) || 0;\n            \n            if (playerGold >= hero.cost) {\n                // Deduct cost from player gold\n                window.gameConfig.player.gold = playerGold - hero.cost;\n                \n                if (!hero.unlocked) {\n                    // First time unlock\n                    hero.unlocked = true;\n                    hero.level = 1;\n                } else {\n                    // Upgrade existing hero\n                    hero.level++;\n                }\n                \n                // Update damage and gold per attack to match level\n                hero.damage = hero.level;\n                hero.goldPerAttack = hero.level;\n                \n                // Increase cost for next upgrade\n                hero.cost = Math.floor(hero.cost * 1.5);\n                \n                // Play upgrade sound\n                playSound('level_up_sound');\n                \n                updateUI();\n            }\n        }\n\n        function openHeroEditor(index) {\n            selectedHero = index;\n            const hero = window.gameConfig.heroes[index];\n            \n            lib.editMenu.open({\n                name: `${hero.name} Settings`,\n                params: {\n                    'Hero Name': {\n                        key: `gameConfig.heroes.${index}.name`,\n                        type: 'string',\n                        onChange: (value) => {\n                            window.gameConfig.heroes[index].name = value;\n                            updateUI();\n                        }\n                    },\n                    'Base Cost': {\n                        key: `gameConfig.heroes.${index}.cost`,\n                        type: 'number',\n                        min: 10,\n                        max: 10000,\n                        onChange: (value) => {\n                            window.gameConfig.heroes[index].cost = value;\n                            updateUI();\n                        }\n                    },\n                    'DPS per Level': {\n                        key: `gameConfig.heroes.${index}.dps`,\n                        type: 'number',\n                        min: 1,\n                        max: 1000,\n                        onChange: (value) => {\n                            window.gameConfig.heroes[index].dps = value;\n                        }\n                    }\n                },\n                onCopy: () => {\n                    const newHero = { ...hero };\n                    newHero.name = hero.name + ' Copy';\n                    window.gameConfig.heroes.push(newHero);\n                    updateUI();\n                },\n                onDelete: () => {\n                    if (window.gameConfig.heroes.length > 1) {\n                        window.gameConfig.heroes.splice(index, 1);\n                        updateUI();\n                        lib.editMenu.close();\n                    }\n                }\n            });\n        }\n\n        let instructionsModalOpen = false;\n        let musicModalOpen = false;\n        let soundModalOpen = false;\n\n        function showInstructionsModal() {\n            if (instructionsModalOpen) {\n                hideInstructionsModal();\n                return;\n            }\n            \n            instructionsModalOpen = true;\n            \n            // Create modal overlay\n            const overlay = document.createElement('div');\n            overlay.id = 'instructionsModal';\n            overlay.style.cssText = `\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: rgba(0, 0, 0, 0.8);\n                z-index: 1000;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                backdrop-filter: blur(10px);\n            `;\n            \n            const modal = document.createElement('div');\n            modal.style.cssText = `\n                background: rgba(255, 255, 255, 0.1);\n                border: 1px solid rgba(255, 255, 255, 0.2);\n                border-radius: 16px;\n                padding: 32px;\n                max-width: 500px;\n                width: 90%;\n                color: white;\n                backdrop-filter: blur(20px);\n                text-align: center;\n            `;\n            \n            modal.innerHTML = `\n                <h2 style=\"margin-top: 0; color: #fbbf24; font-size: 32px;\">Game Instructions</h2>\n                <div style=\"font-size: 20px; line-height: 1.6; margin: 20px 0; text-align: left;\">\n                    <h3 style=\"color: #10b981; margin: 16px 0 8px 0;\">\ud83c\udfaf How to Play</h3>\n                    <p><strong>TAP</strong> monsters to attack \u2022 <strong>EARN GOLD</strong> equal to damage \u2022 <strong>DEFEAT BOSSES</strong> every 10 stages</p>\n                    \n                    <h3 style=\"color: #8b5cf6; margin: 16px 0 8px 0;\">\ud83d\udd2e Upgrades & Enchantments</h3>\n                    <p><strong>Tap Power:</strong> Increase damage \u2022 <strong>Potions:</strong> Special effects like poison, fire, lightning</p>\n                    \n                    <h3 style=\"color: #f59e0b; margin: 16px 0 8px 0;\">\ud83d\udcd6 Creature Grimoire</h3>\n                    <p><strong>Collect creatures</strong> you defeat \u2022 <strong>Explore 20 worlds</strong> with unique monsters</p>\n                </div>\n                <button id=\"closeInstructionsBtn\" style=\"\n                    background: #6366f1;\n                    border: none;\n                    border-radius: 12px;\n                    color: white;\n                    font-weight: 600;\n                    font-size: 22px;\n                    padding: 16px 32px;\n                    cursor: pointer;\n                    margin-top: 20px;\n                \">Got it!</button>\n            `;\n            \n            overlay.appendChild(modal);\n            document.body.appendChild(overlay);\n            \n            // Close button event\n            document.getElementById('closeInstructionsBtn').addEventListener('click', hideInstructionsModal);\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) hideInstructionsModal();\n            });\n        }\n        \n        function hideInstructionsModal() {\n            const modal = document.getElementById('instructionsModal');\n            if (modal) {\n                modal.remove();\n            }\n            instructionsModalOpen = false;\n        }\n        \n        function showMusicModal() {\n            if (musicModalOpen) {\n                hideMusicModal();\n                return;\n            }\n            \n            musicModalOpen = true;\n            \n            const overlay = document.createElement('div');\n            overlay.id = 'musicModal';\n            overlay.style.cssText = `\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: rgba(0, 0, 0, 0.8);\n                z-index: 1000;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                backdrop-filter: blur(10px);\n            `;\n            \n            const modal = document.createElement('div');\n            modal.style.cssText = `\n                background: rgba(255, 255, 255, 0.1);\n                border: 1px solid rgba(255, 255, 255, 0.2);\n                border-radius: 16px;\n                padding: 32px;\n                max-width: 400px;\n                width: 90%;\n                color: white;\n                backdrop-filter: blur(20px);\n                text-align: center;\n            `;\n            \n            const currentVolume = window.gameConfig.settings.musicVolume || 0.6;\n            const isOn = currentVolume > 0;\n            \n            modal.innerHTML = `\n                <h2 style=\"margin-top: 0; color: #10b981; font-size: 24px;\">\ud83c\udfb5 Music Settings</h2>\n                <div style=\"margin: 30px 0;\">\n                    <label style=\"display: block; margin-bottom: 10px; font-size: 16px;\">Background Music</label>\n                    <input type=\"range\" id=\"musicVolumeSlider\" min=\"0\" max=\"1\" step=\"1\" value=\"${isOn ? 1 : 0}\" \n                           style=\"width: 100%; height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; outline: none;\">\n                    <div id=\"musicVolumeValue\" style=\"margin-top: 10px; font-size: 14px; opacity: 0.8;\">${isOn ? 'ON' : 'OFF'}</div>\n                </div>\n                <button id=\"closeMusicBtn\" style=\"\n                    background: #10b981;\n                    border: none;\n                    border-radius: 12px;\n                    color: white;\n                    font-weight: 600;\n                    font-size: 16px;\n                    padding: 12px 24px;\n                    cursor: pointer;\n                \">Done</button>\n            `;\n            \n            overlay.appendChild(modal);\n            document.body.appendChild(overlay);\n            \n            // Slider event\n            const slider = document.getElementById('musicVolumeSlider');\n            const valueDisplay = document.getElementById('musicVolumeValue');\n            \n            slider.addEventListener('input', (e) => {\n                const value = parseFloat(e.target.value);\n                const isOn = value > 0;\n                window.gameConfig.settings.musicVolume = isOn ? 0.6 : 0;\n                valueDisplay.textContent = isOn ? 'ON' : 'OFF';\n\n                // Apply volume change immediately to background music\n                if (musicGainNode) {\n                    musicGainNode.gain.value = isOn ? 0.6 * 0.3 : 0;\n                }\n                \n                // Save the setting immediately - this will persist the change\n                updateUI();\n            });\n            \n            // Close events\n            document.getElementById('closeMusicBtn').addEventListener('click', hideMusicModal);\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) hideMusicModal();\n            });\n        }\n        \n        function hideMusicModal() {\n            const modal = document.getElementById('musicModal');\n            if (modal) {\n                modal.remove();\n            }\n            musicModalOpen = false;\n        }\n        \n        function showSoundModal() {\n            if (soundModalOpen) {\n                hideSoundModal();\n                return;\n            }\n            \n            soundModalOpen = true;\n            \n            const overlay = document.createElement('div');\n            overlay.id = 'soundModal';\n            overlay.style.cssText = `\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: rgba(0, 0, 0, 0.8);\n                z-index: 1000;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                backdrop-filter: blur(10px);\n            `;\n            \n            const modal = document.createElement('div');\n            modal.style.cssText = `\n                background: rgba(255, 255, 255, 0.1);\n                border: 1px solid rgba(255, 255, 255, 0.2);\n                border-radius: 16px;\n                padding: 32px;\n                max-width: 400px;\n                width: 90%;\n                color: white;\n                backdrop-filter: blur(20px);\n                text-align: center;\n            `;\n            \n            const currentVolume = window.gameConfig.settings.effectsVolume || 0.8;\n            const isOn = currentVolume > 0;\n            \n            modal.innerHTML = `\n                <h2 style=\"margin-top: 0; color: #f59e0b; font-size: 24px;\">\ud83d\udd0a Sound Effects</h2>\n                <div style=\"margin: 30px 0;\">\n                    <label style=\"display: block; margin-bottom: 10px; font-size: 16px;\">Sound Effects</label>\n                    <input type=\"range\" id=\"soundVolumeSlider\" min=\"0\" max=\"1\" step=\"1\" value=\"${isOn ? 1 : 0}\" \n                           style=\"width: 100%; height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; outline: none;\">\n                    <div id=\"soundVolumeValue\" style=\"margin-top: 10px; font-size: 14px; opacity: 0.8;\">${isOn ? 'ON' : 'OFF'}</div>\n                </div>\n                <button id=\"closeSoundBtn\" style=\"\n                    background: #f59e0b;\n                    border: none;\n                    border-radius: 12px;\n                    color: white;\n                    font-weight: 600;\n                    font-size: 16px;\n                    padding: 12px 24px;\n                    cursor: pointer;\n                \">Done</button>\n            `;\n            \n            overlay.appendChild(modal);\n            document.body.appendChild(overlay);\n            \n            // Slider event\n            const slider = document.getElementById('soundVolumeSlider');\n            const valueDisplay = document.getElementById('soundVolumeValue');\n            \n            slider.addEventListener('input', (e) => {\n                const value = parseFloat(e.target.value);\n                const isOn = value > 0;\n                window.gameConfig.settings.effectsVolume = isOn ? 0.8 : 0;\n                valueDisplay.textContent = isOn ? 'ON' : 'OFF';\n                \n                // Apply volume change immediately to all sound effects\n                const soundEffectKeys = ['tap_sound', 'gold_collect_sound', 'monster_death_sound', 'level_up_sound'];\n                soundEffectKeys.forEach(key => {\n                    if (assetCache[key]) {\n                        assetCache[key].volume = isOn ? 0.8 * 0.7 : 0;\n                    }\n                });\n                \n                // Save the setting immediately - this will persist the change\n                updateUI();\n            });\n            \n            // Close events\n            document.getElementById('closeSoundBtn').addEventListener('click', hideSoundModal);\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) hideSoundModal();\n            });\n        }\n        \n        function hideSoundModal() {\n            const modal = document.getElementById('soundModal');\n            if (modal) {\n                modal.remove();\n            }\n            soundModalOpen = false;\n        }\n\n        function setupEventListeners() {\n            // Tap to attack with feedback\n            document.getElementById('battleArea').addEventListener('click', (e) => {\n                if (gameMode === 'play') {\n                    let damage = window.gameConfig.player.tapDamage;\n                    let isCritical = false;\n                    \n                    // Enhanced critical hit system with strength potion\n                    let critChance = 0.25; // Base 25% crit chance for regular monsters\n                    if (currentMonster && currentMonster.isBoss) {\n                        critChance = 0.02; // 2% crit chance for bosses\n                    }\n                    \n                    // Strength potion increases critical chance\n                    if (strengthTimer > 0) {\n                        critChance += 0.3 * window.gameConfig.player.strengthPotionLevel; // +30% per level\n                    }\n                    \n                    if (Math.random() < critChance) {\n                        damage *= 2;\n                        isCritical = true;\n                    }\n                    \n                    // Normal damage against bosses - same as regular monsters\n                    // No bonus damage multiplier for bosses\n                    \n                    dealDamage(damage, true, isCritical);\n                    \n                    // Award gold equal to damage dealt with gold boost multiplier\n                    const goldEarned = damage * (window.goldBoostMultiplier || 1);\n                    window.gameConfig.player.gold = Number(window.gameConfig.player.gold) + goldEarned;\n                    updateUI();\n                    \n                    // Create tap feedback at click position\n                    const rect = e.currentTarget.getBoundingClientRect();\n                    const x = e.clientX - rect.left;\n                    const y = e.clientY - rect.top;\n                    createTapFeedback(x, y);\n                    \n                    playSound('tap_sound');\n                }\n            });\n            \n            // Heroes drawer toggle\n            document.getElementById('heroesToggle').addEventListener('click', () => {\n                // Keep the symbol as \ud83d\udd2e when clicked\n                const toggleBtn = document.getElementById('heroesToggle');\n                toggleBtn.textContent = '\ud83d\udd2e';\n                toggleDrawer();\n            });\n            document.getElementById('closeDrawer').addEventListener('click', toggleDrawer);\n            document.getElementById('drawerBackdrop').addEventListener('click', toggleDrawer);\n            \n            // Tap damage upgrade\n            document.getElementById('tapUpgradeBtn').addEventListener('click', () => {\n                if (gameMode === 'play') {\n                    const cost = Math.floor(100 * Math.pow(1.5, window.gameConfig.player.tapDamage - 1));\n                    if (Number(window.gameConfig.player.gold) >= cost) {\n                        window.gameConfig.player.gold = Number(window.gameConfig.player.gold) - cost;\n                        window.gameConfig.player.tapDamage++;\n                        updateUI();\n                        \n                        playSound('level_up_sound');\n                    }\n                }\n            });\n            \n            // Potion upgrades - Ordered from cheapest to most expensive\n            \n            // Poison Potion (200 Gold - Cheapest)\n            document.getElementById('poisonPotionBtn').addEventListener('click', () => {\n                if (gameMode === 'play') {\n                    const cost = Math.floor(200 * Math.pow(1.6, window.gameConfig.player.poisonPotionLevel - 1));\n                    if (Number(window.gameConfig.player.gold) >= cost) {\n                        window.gameConfig.player.gold = Number(window.gameConfig.player.gold) - cost;\n                        window.gameConfig.player.poisonPotionLevel++;\n                        \n                        // Activate poison effect\n                        activatePoisonPotion();\n                        updateUI();\n                        \n                        playSound('level_up_sound');\n                    }\n                }\n            });\n            \n            // Fire Potion (300 Gold)\n            document.getElementById('firePotionBtn').addEventListener('click', () => {\n                if (gameMode === 'play') {\n                    const cost = Math.floor(300 * Math.pow(1.6, window.gameConfig.player.firePotionLevel - 1));\n                    if (Number(window.gameConfig.player.gold) >= cost) {\n                        window.gameConfig.player.gold = Number(window.gameConfig.player.gold) - cost;\n                        window.gameConfig.player.firePotionLevel++;\n                        \n                        // Activate fire effect\n                        activateFirePotion();\n                        updateUI();\n                        \n                        playSound('level_up_sound');\n                    }\n                }\n            });\n            \n            // Gold Potion (1000 Gold)\n            document.getElementById('healingPotionBtn').addEventListener('click', () => {\n                if (gameMode === 'play') {\n                    const cost = Math.floor(1000 * Math.pow(1.5, window.gameConfig.player.healingPotionLevel - 1));\n                    if (Number(window.gameConfig.player.gold) >= cost) {\n                        window.gameConfig.player.gold = Number(window.gameConfig.player.gold) - cost;\n                        window.gameConfig.player.healingPotionLevel++;\n                        \n                        // Activate gold effect\n                        activateGoldPotion();\n                        updateUI();\n                        \n                        playSound('level_up_sound');\n                    }\n                }\n            });\n            \n            // Ghost Potion (500 Gold)\n            document.getElementById('ghostPotionBtn').addEventListener('click', () => {\n                if (gameMode === 'play') {\n                    const cost = Math.floor(500 * Math.pow(1.7, window.gameConfig.player.ghostPotionLevel - 1));\n                    if (Number(window.gameConfig.player.gold) >= cost) {\n                        window.gameConfig.player.gold = Number(window.gameConfig.player.gold) - cost;\n                        window.gameConfig.player.ghostPotionLevel++;\n                        \n                        // Activate ghost effect\n                        activateGhostPotion();\n                        updateUI();\n                        \n                        playSound('level_up_sound');\n                    }\n                }\n            });\n            \n            // Lightning Potion (600 Gold)\n            document.getElementById('lightningPotionBtn').addEventListener('click', () => {\n                if (gameMode === 'play') {\n                    const cost = Math.floor(600 * Math.pow(1.7, window.gameConfig.player.lightningPotionLevel - 1));\n                    if (Number(window.gameConfig.player.gold) >= cost) {\n                        window.gameConfig.player.gold = Number(window.gameConfig.player.gold) - cost;\n                        window.gameConfig.player.lightningPotionLevel++;\n                        \n                        // Activate lightning effect\n                        activateLightningPotion();\n                        updateUI();\n                        \n                        playSound('level_up_sound');\n                    }\n                }\n            });\n            \n            // Strength Potion (800 Gold - Most Expensive)\n            document.getElementById('strengthPotionBtn').addEventListener('click', () => {\n                if (gameMode === 'play') {\n                    const cost = Math.floor(800 * Math.pow(1.8, window.gameConfig.player.strengthPotionLevel - 1));\n                    if (Number(window.gameConfig.player.gold) >= cost) {\n                        window.gameConfig.player.gold = Number(window.gameConfig.player.gold) - cost;\n                        window.gameConfig.player.strengthPotionLevel++;\n                        \n                        // Activate strength effect\n                        activateStrengthPotion();\n                        updateUI();\n                        \n                        playSound('level_up_sound');\n                    }\n                }\n            });\n\n            \n            // Creature Grimoire button\n            document.getElementById('monsterDexBtn').addEventListener('click', () => {\n                showMonsterDex();\n            });\n            \n            // Instructions button\n            document.getElementById('instructionsBtn').addEventListener('click', () => {\n                showInstructionsModal();\n            });\n            \n\n            \n            // Stage display long press for edit mode\n            let longPressTimer;\n            document.getElementById('stageInfo').addEventListener('mousedown', () => {\n                if (gameMode === 'edit') {\n                    longPressTimer = setTimeout(() => {\n                        lib.editMenu.open({\n                            name: 'Stage Progression',\n                            params: {\n                                'Current Stage': {\n                                    key: 'gameConfig.player.stage',\n                                    type: 'number',\n                                    min: 1,\n                                    max: 100,\n                                    onChange: (value) => {\n                                        window.gameConfig.player.stage = value;\n                                        const currentWorld = Math.floor((value - 1) / 100);\n                                        if (currentWorld < worlds.length) {\n                                            window.gameConfig.player.world = currentWorld;\n                                            updateBackground();\n                                        }\n                                        spawnMonster();\n                                        updateUI();\n                                    }\n                                },\n                                'Player Gold': {\n                                    key: 'gameConfig.player.gold',\n                                    type: 'number',\n                                    min: 0,\n                                    max: 1000000,\n                                    onChange: (value) => {\n                                        window.gameConfig.player.gold = value;\n                                        updateUI();\n                                    }\n                                }\n                            }\n                        });\n                    }, 1000);\n                }\n            });\n            \n            document.getElementById('stageInfo').addEventListener('mouseup', () => {\n                clearTimeout(longPressTimer);\n            });\n        }\n\n                function gameUpdate(currentTime) {\n            if (gameMode !== 'play') return;\n            \n            const deltaTime = (currentTime - lastTime) / 1000;\n            lastTime = currentTime;\n            \n            // Update potion timers\n            if (strengthTimer > 0) {\n                strengthTimer -= deltaTime;\n                if (strengthTimer <= 0) {\n                    strengthTimer = 0;\n                    showDamageNumber('Strength effect ended');\n                }\n            }\n            \n            // Update UI periodically\n            if (!this.lastUIUpdate) this.lastUIUpdate = 0;\n            if (currentTime - this.lastUIUpdate >= 100) { // Update UI every 100ms\n                this.lastUIUpdate = currentTime;\n                updateUI();\n            }\n            \n            // Update boss timer and continuous damage\n            if (currentMonster && currentMonster.isBoss && bossTimer > 0) {\n                bossTimer -= deltaTime;\n                document.getElementById('timerValue').textContent = Math.ceil(bossTimer);\n                \n                // Bosses no longer lose health automatically over time\n                // Players must defeat them through tapping and hero attacks only\n                \n                if (bossTimer <= 0) {\n                    // Boss timer expired - restore boss to full health\n                    if (currentMonster && currentMonster.isBoss) {\n                        currentMonster.currentHealth = currentMonster.maxHealth;\n                        updateHealthBar();\n                        \n                        // Reset timer for another attempt\n                        const stage = window.gameConfig.player.stage;\n                        const baseBossTimer = 60;\n                        const timerIncrease = Math.floor(stage / 10) * 15;\n                        const maxTimer = 180;\n                        bossTimer = Math.min(baseBossTimer + timerIncrease, maxTimer);\n                        \n                        // Show visual feedback that boss has restored\n                        showDamageNumber(\"BOSS RESTORED!\");\n                        const monsterImg = document.getElementById('currentMonster');\n                        monsterImg.style.filter = '';\n                        \n                        // Play a warning sound effect\n                        playSound('monster_death_sound');\n                    }\n                }\n            }\n        }\n\n        function startGameLoop() {\n            function loop(currentTime) {\n                gameUpdate(currentTime);\n                gameLoop = requestAnimationFrame(loop);\n            }\n            gameLoop = requestAnimationFrame(loop);\n        }\n\n        function stopGameLoop() {\n            if (gameLoop) {\n                cancelAnimationFrame(gameLoop);\n                gameLoop = null;\n            }\n        }\n\n        function setupEditMode() {\n            // Add visual indicators for editable elements\n            document.querySelectorAll('.hero-card').forEach(card => {\n                card.classList.add('edit-highlight');\n            });\n            document.getElementById('stageInfo').classList.add('edit-highlight');\n        }\n\n        function clearEditMode() {\n            document.querySelectorAll('.edit-highlight').forEach(el => {\n                el.classList.remove('edit-highlight');\n            });\n            lib.editMenu.close();\n        }\n\n        // Potion activation functions\n        function activatePoisonPotion() {\n            if (!currentMonster || gameMode === 'edit') return;\n            \n            // Clear existing poison effect\n            if (poisonInterval) {\n                clearInterval(poisonInterval);\n            }\n            \n            const damage = 2 * window.gameConfig.player.poisonPotionLevel;\n            let ticks = 0;\n            const maxTicks = 5; // 10 seconds / 2 seconds per tick\n            \n            poisonInterval = setInterval(() => {\n                if (currentMonster && ticks < maxTicks) {\n                    dealDamage(damage, true, false);\n                    \n                    // Award gold equal to damage with gold boost multiplier\n                    const goldEarned = damage * (window.goldBoostMultiplier || 1);\n                    window.gameConfig.player.gold = Number(window.gameConfig.player.gold) + goldEarned;\n                    updateUI();\n                    \n                    // Show poison effect\n                    showDamageNumber(damage + ' \ud83e\uddea');\n                    ticks++;\n                } else {\n                    clearInterval(poisonInterval);\n                    poisonInterval = null;\n                }\n            }, 2000);\n        }\n        \n        function activateGhostPotion() {\n            if (!currentMonster || gameMode === 'edit') return;\n            \n            const damage = 5 * window.gameConfig.player.ghostPotionLevel;\n            dealDamage(damage, true, false);\n            \n            // Award gold equal to damage\n            window.gameConfig.player.gold = Number(window.gameConfig.player.gold) + damage;\n            updateUI();\n            \n            // Show ghost effect\n            showDamageNumber(damage + ' \ud83d\udc7b');\n            \n            // Ghost visual effect\n            const monsterImg = document.getElementById('currentMonster');\n            monsterImg.style.filter = 'brightness(0.3) sepia(1) hue-rotate(240deg)';\n            setTimeout(() => {\n                monsterImg.style.filter = '';\n            }, 1000);\n        }\n        \n        function activateFirePotion() {\n            if (!currentMonster || gameMode === 'edit') return;\n            \n            // Clear existing fire effect\n            if (fireInterval) {\n                clearInterval(fireInterval);\n            }\n            \n            const damage = 2 * window.gameConfig.player.firePotionLevel;\n            let ticks = 0;\n            const maxTicks = 10; // 10 seconds / 1 second per tick\n            \n            fireInterval = setInterval(() => {\n                if (currentMonster && ticks < maxTicks) {\n                    dealDamage(damage, true, false);\n                    \n                    // Award gold equal to damage with gold boost multiplier\n                    const goldEarned = damage * (window.goldBoostMultiplier || 1);\n                    window.gameConfig.player.gold = Number(window.gameConfig.player.gold) + goldEarned;\n                    updateUI();\n                    \n                    // Show fire effect\n                    showDamageNumber(damage + ' \ud83d\udd25');\n                    ticks++;\n                } else {\n                    clearInterval(fireInterval);\n                    fireInterval = null;\n                }\n            }, 1000);\n        }\n        \n        function activateStrengthPotion() {\n            if (gameMode === 'edit') return;\n            \n            // Set strength timer for 20 seconds\n            strengthTimer = 20;\n            \n            // Show activation effect\n            showDamageNumber('STRENGTH BOOST! \ud83d\udcaa');\n        }\n        \n        function activateGoldPotion() {\n            if (gameMode === 'edit') return;\n            \n            // Set gold boost timer for 20 seconds\n            window.goldBoostTimer = 20;\n            window.goldBoostMultiplier = 2 * window.gameConfig.player.healingPotionLevel; // 2x per level\n            \n            // Show activation effect\n            showDamageNumber('GOLD BOOST! \ud83d\udcb0');\n            \n            // Start countdown interval\n            if (window.goldBoostInterval) {\n                clearInterval(window.goldBoostInterval);\n            }\n            \n            window.goldBoostInterval = setInterval(() => {\n                window.goldBoostTimer--;\n                if (window.goldBoostTimer <= 0) {\n                    window.goldBoostTimer = 0;\n                    window.goldBoostMultiplier = 1;\n                    clearInterval(window.goldBoostInterval);\n                    showDamageNumber('Gold boost ended');\n                }\n            }, 1000);\n        }\n\n        \n        function activateLightningPotion() {\n            if (!currentMonster || gameMode === 'edit') return;\n            \n            const damage = 8 * window.gameConfig.player.lightningPotionLevel; // Base 8 damage per hit\n            const hits = 3; // Always 3 chain lightning hits\n            \n            // Create chain lightning effect with delays\n            for (let i = 0; i < hits; i++) {\n                setTimeout(() => {\n                    if (currentMonster) { // Check if monster still exists\n                        dealDamage(damage, true, false);\n                        \n                        // Award gold equal to damage\n                        window.gameConfig.player.gold = Number(window.gameConfig.player.gold) + damage;\n                        updateUI();\n                        \n                        // Show lightning effect\n                        showDamageNumber(damage + ' \u26a1');\n                        \n                        // Lightning visual effect - electric blue flash\n                        const monsterImg = document.getElementById('currentMonster');\n                        monsterImg.style.filter = 'brightness(2) sepia(1) hue-rotate(200deg) saturate(3)';\n                        setTimeout(() => {\n                            monsterImg.style.filter = '';\n                        }, 200);\n                    }\n                }, i * 300); // 300ms delay between each lightning strike\n            }\n            \n            // Show activation message\n            showDamageNumber('CHAIN LIGHTNING! \u26a1');\n        }\n\n        function showMonsterDex() {\n            // Close the upgrades drawer if it's open to prevent overlap\n            if (drawerOpen) {\n                toggleDrawer();\n            }\n            \n            // Change button icon to \ud83d\udc79 when dex is open\n            const dexBtn = document.getElementById('monsterDexBtn');\n            const iconSpan = dexBtn.querySelector('span');\n            if (iconSpan) {\n                iconSpan.textContent = '\ud83d\udc79';\n            }\n            \n            // Create modal overlay\n            const overlay = document.createElement('div');\n            overlay.id = 'monsterDexModal';\n            overlay.style.cssText = `\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: rgba(0, 0, 0, 0.9);\n                z-index: 1000;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                backdrop-filter: blur(10px);\n            `;\n            \n            const modal = document.createElement('div');\n            modal.style.cssText = `\n                background: rgba(255, 255, 255, 0.1);\n                border: 1px solid rgba(255, 255, 255, 0.2);\n                border-radius: 16px;\n                padding: 32px;\n                max-width: 600px;\n                width: 90%;\n                max-height: 80vh;\n                color: white;\n                backdrop-filter: blur(20px);\n                overflow-y: auto;\n                text-align: center;\n            `;\n            \n            // Get defeated monsters from dex\n            const defeatedMonsters = Object.values(window.gameConfig.monsterDex || {});\n            const totalDefeated = defeatedMonsters.length;\n            \n            let modalContent = `\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;\">\n                    <h2 style=\"margin: 0; color: #fbbf24; font-size: 32px;\">\ud83d\udcd6 Creature Grimoire</h2>\n                    <button id=\"closeMonsterDexBtn\" style=\"\n                        background: rgba(255, 255, 255, 0.2);\n                        border: 1px solid rgba(255, 255, 255, 0.3);\n                        border-radius: 50%;\n                        color: white;\n                        font-size: 24px;\n                        width: 48px;\n                        height: 48px;\n                        cursor: pointer;\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                    \">\u2715</button>\n                </div>\n                <div style=\"font-size: 22px; margin-bottom: 20px; opacity: 0.8; text-align: center;\">\n                    Creatures Catalogued: <span style=\"color: #fbbf24; font-weight: bold;\">${totalDefeated}</span> unique beings\n                </div>\n            `;\n            \n            if (totalDefeated === 0) {\n                modalContent += `\n                    <div style=\"text-align: center; padding: 40px; opacity: 0.6;\">\n                        <div style=\"font-size: 64px; margin-bottom: 16px;\">\ud83d\udc79</div>\n                        <div style=\"font-size: 26px; margin-bottom: 8px;\">No creatures catalogued yet!</div>\n                        <div style=\"font-size: 20px;\">Start tapping to defeat creatures and fill your grimoire!</div>\n                    </div>\n                `;\n            } else {\n                modalContent += `<div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;\">`;\n                \n                // Sort monsters by first defeated stage\n                defeatedMonsters.sort((a, b) => a.firstDefeatedStage - b.firstDefeatedStage);\n                \n                defeatedMonsters.forEach((monster) => {\n                    const asset = lib.getAsset(monster.asset);\n                    const assetUrl = asset ? asset.url : '';\n                    \n                    modalContent += `\n                        <div style=\"\n                            background: rgba(255, 255, 255, 0.05);\n                            border: 1px solid rgba(255, 255, 255, 0.1);\n                            border-radius: 12px;\n                            padding: 16px;\n                            text-align: center;\n                            ${monster.type === 'boss' ? 'border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1);' : ''}\n                        \">\n                            <img src=\"${assetUrl}\" style=\"\n                                width: 60px;\n                                height: 60px;\n                                object-fit: contain;\n                                margin-bottom: 8px;\n                                transform: scale(${monster.scale});\n                            \" alt=\"${monster.name}\">\n                            <div style=\"font-size: 20px; font-weight: 600; margin-bottom: 4px; color: ${monster.type === 'boss' ? '#8b5cf6' : '#fbbf24'};\">\n                                ${monster.name}\n                            </div>\n                            <div style=\"font-size: 18px; opacity: 0.7;\">\n                                ${monster.type === 'boss' ? '\ud83d\udc51 BOSS' : '\u2694\ufe0f Regular'} \u2022 HP: ${monster.baseHealth}\n                            </div>\n                            <div style=\"font-size: 16px; opacity: 0.6; margin-top: 4px;\">\n                                Defeated: <span style=\"color: #10b981;\">${monster.defeatedCount}x</span>\n                            </div>\n                            <div style=\"font-size: 14px; opacity: 0.5; margin-top: 2px;\">\n                                First seen: Stage ${monster.firstDefeatedStage}\n                            </div>\n                        </div>\n                    `;\n                });\n                \n                modalContent += `</div>`;\n            }\n            \n            // Add worlds tab\n            modalContent += `\n                <div style=\"margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 20px;\">\n                    <h3 style=\"color: #10b981; font-size: 26px; margin-bottom: 16px; text-align: center;\">\ud83c\udf0d Available Worlds</h3>\n                    <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;\">\n            `;\n            \n            worlds.forEach((world, index) => {\n                const isCurrent = window.gameConfig.player.world === index;\n                const asset = lib.getAsset(world.background);\n                const backgroundUrl = asset ? asset.url : '';\n                \n                // Calculate which stages this world appears in (every 10 stages)\n                const stageRanges = [];\n                for (let i = index * 10 + 1; i <= 1000; i += worlds.length * 10) {\n                    const endStage = Math.min(i + 9, 1000);\n                    stageRanges.push(`${i}-${endStage}`);\n                    if (stageRanges.length >= 3) break; // Show first 3 occurrences\n                }\n                const stageText = stageRanges.join(', ') + (stageRanges.length >= 3 ? '...' : '');\n                \n                modalContent += `\n                    <div style=\"\n                        background: ${isCurrent ? 'rgba(16, 185, 129, 0.2)' : 'rgba(255, 255, 255, 0.05)'};\n                        border: 1px solid ${isCurrent ? '#10b981' : 'rgba(255, 255, 255, 0.2)'};\n                        border-radius: 8px;\n                        padding: 12px;\n                        text-align: center;\n                        position: relative;\n                        overflow: hidden;\n                    \">\n                        <div style=\"\n                            position: absolute;\n                            top: 0;\n                            left: 0;\n                            right: 0;\n                            bottom: 0;\n                            background-image: url('${backgroundUrl}');\n                            background-size: cover;\n                            background-position: center;\n                            opacity: 0.2;\n                            z-index: 0;\n                        \"></div>\n                        <div style=\"position: relative; z-index: 1;\">\n                            <div style=\"font-size: 20px; font-weight: 600; margin-bottom: 4px; color: ${isCurrent ? '#10b981' : '#fbbf24'};\">\n                                ${world.name} ${isCurrent ? '(Current)' : ''}\n                            </div>\n                            <div style=\"font-size: 18px; opacity: 0.8;\">\n                                Stages: ${stageText}\n                            </div>\n                            <div style=\"font-size: 16px; opacity: 0.6; margin-top: 4px;\">\n                                \u2705 Cycles every 10 stages\n                            </div>\n                        </div>\n                    </div>\n                `;\n            });\n            \n            modalContent += `\n                    </div>\n                </div>\n                <div style=\"text-align: center; margin-top: 24px; font-size: 18px; opacity: 0.6;\">\n                    Over 100+ unique monster designs with billions of name combinations!<br>\n                    Keep playing to discover more creatures and worlds!\n                </div>\n            `;\n            \n            modal.innerHTML = modalContent;\n            overlay.appendChild(modal);\n            document.body.appendChild(overlay);\n            \n            // Close button event\n            document.getElementById('closeMonsterDexBtn').addEventListener('click', () => {\n                // Change button icon back to \ud83d\udcd6 when dex is closed\n                const dexBtn = document.getElementById('monsterDexBtn');\n                const iconSpan = dexBtn.querySelector('span');\n                if (iconSpan) {\n                    iconSpan.textContent = '\ud83d\udcd6';\n                }\n                overlay.remove();\n            });\n            \n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) {\n                    // Change button icon back to \ud83d\udcd6 when dex is closed\n                    const dexBtn = document.getElementById('monsterDexBtn');\n                    const iconSpan = dexBtn.querySelector('span');\n                    if (iconSpan) {\n                        iconSpan.textContent = '\ud83d\udcd6';\n                    }\n                    overlay.remove();\n                }\n            });\n        }\n\n        function run(mode) {\n            lib.log('run() called. Mode: ' + mode);\n            gameMode = mode;\n\n            // Initialize Web Audio API\n            initAudioContext();\n\n            // Preload image assets (synchronous)\n            preloadAssets();\n\n            // Preload audio buffers (async)\n            const audioAssetIds = ['tap_sound', 'gold_collect_sound', 'monster_death_sound', 'level_up_sound', 'background_music'];\n            preloadAudioBuffers(audioAssetIds).then(() => {\n                lib.log('Audio assets loaded successfully');\n            }).catch(e => {\n                console.error('Failed to load audio:', e);\n            });\n\n            initializeGameState();\n            \n            // Set up gold coin icon\n            setTimeout(() => {\n                if (assetCache.gold_coin) {\n                    document.getElementById('goldIcon').src = assetCache.gold_coin.src;\n                }\n                updateBackground();\n                spawnMonster();\n                updateUI();\n                setupEventListeners();\n                \n                    // Set up start game button\n                document.getElementById('startGameBtn').addEventListener('click', () => {\n                    // Hide instructions screen and show game\n                    document.getElementById('gameInstructionsScreen').style.display = 'none';\n                    document.getElementById('gameContainer').style.display = 'flex';\n                    \n                    // Start background music with saved volume\n                    if (musicGainNode) {\n                        const volumeMultiplier = (window.gameConfig.settings.musicVolume !== undefined ? window.gameConfig.settings.musicVolume : 0.6);\n                        musicGainNode.gain.value = volumeMultiplier * 0.3;\n                    }\n                    startBackgroundMusic();\n                    \n                    if (mode === 'edit') {\n                        setupEditMode();\n                        stopGameLoop();\n                    } else {\n                        clearEditMode();\n                        startGameLoop();\n                    }\n                });\n                \n                // In edit mode, skip instructions and go straight to game\n                if (mode === 'edit') {\n                    document.getElementById('gameInstructionsScreen').style.display = 'none';\n                    document.getElementById('gameContainer').style.display = 'flex';\n                    setupEditMode();\n                    stopGameLoop();\n                }\n            }, 100);\n        }\n    </script>\n</body>\n</html>", "game_config": "{\"player\":{\"gold\":0,\"tapDamage\":1,\"stage\":1,\"world\":0,\"totalDamage\":0,\"poisonPotionLevel\":\"1\",\"ghostPotionLevel\":\"1\",\"firePotionLevel\":\"1\",\"strengthPotionLevel\":\"1\",\"healingPotionLevel\":1,\"lightningPotionLevel\":\"1\"},\"heroes\":[],\"monsters\":{\"currentHealth\":10,\"maxHealth\":10,\"type\":\"goblin\",\"stage\":1},\"progression\":{\"healthScaling\":1.15,\"goldMultiplier\":1,\"bossHealthMultiplier\":\"1.5\"},\"settings\":{\"backgroundTheme\":0,\"effectsIntensity\":1,\"autoTap\":false,\"musicVolume\":0.6,\"effectsVolume\":\"0.8\",\"uiTheme\":\"enchanted_glass\",\"drawerDefaultOpen\":false,\"tapFeedbackEnabled\":true},\"monsterDex\":{}}", "persistent_storage_config": {"leaderboard": {"sort_ascending": true}}, "game_metadata": {"game_id": "01K5S9D9Q3P9E9B9J85D1KYRPX", "title": "Tap Quest Tycoon", "description": "Tap rapidly to defeat endless waves of fantastical monsters, earning gold to unlock powerful heroes and upgrade their abilities. It's a journey of constant progression and satisfying power-ups.\n\n\n\u2022 Recruit a diverse roster of unique heroes, each with their own special skills\n\u2022 Progress through vibrant, distinct worlds filled with epic boss battles", "thumbnail_url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/d0ab10c5-4df6-4526-a395-6bcd7fa0e011.webp", "created_at": 1758564142979.7783, "updated_at": 1758564142979.782, "art_style": null}}