{"asset_map": {"sword_tier1": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/sword_tier1_c87f9e86-5fcb-4abc-8653-1250e07ec002.webp", "type": "image", "prompt": "Generate a game-ready asset of a simple iron longsword, 3/4 perspective view. Plain gray iron blade, dark brown leather wrapped handle, basic crossguard. Semi-realistic hand-painted texture style. Subtle bronze aura/glow around the weapon. High resolution, centered illustration on a transparent background.", "description": "Tier 1 Sword: Basic iron longsword with bronze glow.", "subtype": "object", "aspect_ratio": [822, 894], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "sword_tier2": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/sword_tier2_3362139a-6984-4876-a6ae-47b9a6040b0f.webp", "type": "image", "prompt": "Update the sword from image 1 to silver quality. Polished silver blade with subtle engravings, silver wire details on the leather handle. Add a silver shimmer/glow. Maintain the same 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 2 Sword: Silver longsword with shimmer.", "subtype": "object", "aspect_ratio": [940, 1024], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "sword_tier3": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/sword_tier3_182eee14-8a6c-4289-b2bf-647c66dfd4ce.webp", "type": "image", "prompt": "Transform the sword from image 1 into gold quality. Gleaming golden highlights, ornate engravings, gold inlay on crossguard and pommel, gold-threaded handle. Rich golden radiant glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 3 Sword: Gold longsword with radiant glow.", "subtype": "object", "aspect_ratio": [939, 1023], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "sword_tier4": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/sword_tier4_c1e9dc29-3e74-45b3-9ede-c5cbaf019a4e.webp", "type": "image", "prompt": "Transform the sword from image 1 into platinum quality. Brilliant white-blue metallic finish, intricate runic patterns, platinum details with embedded gems on pommel. Bright electric blue-white glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 4 Sword: Platinum longsword with blue-white glow.", "subtype": "object", "aspect_ratio": [939, 1024], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "sword_tier5": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/sword_tier5_ee5e241f-64af-46b4-b0c7-4b3e4efc94be.webp", "type": "image", "prompt": "Transform the sword from image 1 into legendary quality. Blade radiating purple-pink magical energy with glowing runes. Ethereal quality with wisps of energy, mystical symbols on hilt. Powerful purple-pink aura. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 5 Sword: Legendary longsword with magical purple energy.", "subtype": "object", "aspect_ratio": [938, 1023], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "axe_tier1": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/axe_tier1_db12481e-c26b-425a-a8a9-a578a6025a52.webp", "type": "image", "prompt": "Generate a game-ready asset of a double-bladed battle axe, 3/4 perspective. Rough iron axe heads with forge marks, plain sturdy wooden handle. Semi-realistic hand-painted texture style. Subtle bronze aura/glow around the weapon. High resolution, centered illustration on a transparent background.", "description": "Tier 1 Axe: Simple iron battle axe with bronze glow.", "subtype": "object", "aspect_ratio": [815, 855], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "axe_tier2": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/axe_tier2_963ac028-0dea-482a-8039-88ea21f6a669.webp", "type": "image", "prompt": "Update the axe from image 1 to silver quality. Polished silver blades, silver studs on the leather-wrapped handle. Add a silver shimmer/glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 2 Axe: Silver battle axe with silver shimmer.", "subtype": "object", "aspect_ratio": [975, 1023], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "axe_tier3": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/axe_tier3_1ca71e91-494f-4fa1-bae2-674ecc371291.webp", "type": "image", "prompt": "Transform the axe from image 1 into gold quality. Golden highlights, decorative engravings on blades, gold bands and ornate carvings on handle. Rich golden radiant glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 3 Axe: Gold battle axe with radiant glow.", "subtype": "object", "aspect_ratio": [974, 1021], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "axe_tier4": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/axe_tier4_3760be60-2c78-4fdb-902b-0285616b1bd6.webp", "type": "image", "prompt": "Transform the axe from image 1 into platinum quality. Brilliant platinum finish blades, intricate etched patterns, platinum reinforcements and embedded gems in handle. Bright electric blue-white glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 4 Axe: Platinum battle axe with electric glow.", "subtype": "object", "aspect_ratio": [976, 1024], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "axe_tier5": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/axe_tier5_584d479f-3a51-4177-a6e3-9e8804f8547e.webp", "type": "image", "prompt": "Transform the axe from image 1 into legendary quality. Blades crackling with purple-pink magical energy, glowing runes on metal surfaces, ethereal energy wisps. Mystical bindings on handle. Powerful purple-pink magical aura. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 5 Axe: Legendary battle axe with purple magical energy.", "subtype": "object", "aspect_ratio": [981, 1023], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "spear_tier1": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/spear_tier1_ec9ab9de-8e75-4e56-a248-4ef0d250356d.webp", "type": "image", "prompt": "Generate a game-ready asset of a long spear with a leaf-shaped blade, 3/4 perspective. Simple iron spearhead, plain wooden shaft. Semi-realistic hand-painted texture style. Subtle bronze aura/glow around the weapon. High resolution, vertically centered illustration on a transparent background.", "description": "Tier 1 Spear: Simple iron spear with bronze glow.", "subtype": "object", "aspect_ratio": [163, 1018], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "spear_tier2": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/spear_tier2_3fc5f40c-ffc8-4205-8c99-a1a47ff95792.webp", "type": "image", "prompt": "Update the spear from image 1 to silver quality. Polished silver spearhead with subtle engravings, silver bands on leather grip sections. Add a silver shimmer/glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 2 Spear: Silver spear with polished finish.", "subtype": "object", "aspect_ratio": [169, 1024], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "spear_tier3": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/spear_tier3_7bb3bc63-a2dd-4b21-a4a9-1da912a28523.webp", "type": "image", "prompt": "Transform the spear from image 1 into gold quality. Golden highlights on spearhead, ornate engravings along the blade, gold bands and decorative carvings on shaft. Rich golden radiant glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 3 Spear: Gold spear with ornate engravings.", "subtype": "object", "aspect_ratio": [169, 1021], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "spear_tier4": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/spear_tier4_f8ce5a6a-8749-4706-9095-1b60b494f08b.webp", "type": "image", "prompt": "Transform the spear from image 1 into platinum quality. Brilliant platinum finish spearhead, intricate runic patterns, platinum reinforcements and embedded gems on shaft. Bright electric blue-white glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 4 Spear: Platinum spear with runic patterns.", "subtype": "object", "aspect_ratio": [162, 1006], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "spear_tier5": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/spear_tier5_02163c97-1856-45db-8368-0e89604eb5fb.webp", "type": "image", "prompt": "Transform the spear from image 1 into legendary quality. Spearhead radiating purple-pink magical energy with glowing runes, ethereal magical wisps flowing along the shaft. Powerful purple-pink magical aura. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 5 Spear: Legendary spear with ethereal magic.", "subtype": "object", "aspect_ratio": [412, 1019], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "bow_tier1": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/bow_tier1_bea82cc0-1e2b-4144-9dea-fec40f38e01e.webp", "type": "image", "prompt": "Generate a game-ready asset of a recurve bow, 3/4 perspective. Plain wooden construction with a simple string. Semi-realistic hand-painted texture style. Subtle bronze aura/glow around the weapon. High resolution, centered illustration on a transparent background.", "description": "Tier 1 Bow: Plain wooden recurve bow.", "subtype": "object", "aspect_ratio": [695, 892], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "bow_tier2": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/bow_tier2_7d49b4f2-7997-4da4-a4a8-eb68ba745864.webp", "type": "image", "prompt": "Update the bow from image 1 to silver quality. Polished finish limbs with subtle carved details, leather grip wrapping, string has a silver shimmer. Add a silver shimmer/glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 2 Bow: Silver polished recurve bow.", "subtype": "object", "aspect_ratio": [666, 911], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "bow_tier3": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/bow_tier3_cf9d2804-daf4-478c-a264-73a64306d77e.webp", "type": "image", "prompt": "Transform the bow from image 1 into gold quality. Elegant carved patterns with gold inlay on limbs, golden gleam on string, gold-threaded leather grip. Rich golden radiant glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 3 Bow: Gold recurve bow with gold inlay.", "subtype": "object", "aspect_ratio": [702, 980], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "bow_tier4": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/bow_tier4_0186e994-f711-4b52-9f5d-454aa377f7cf.webp", "type": "image", "prompt": "Transform the bow from image 1 into platinum quality. Intricate runic engravings, platinum reinforcements, blue-white energy glowing string, embedded gems. Bright electric blue-white glow. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 4 Bow: Platinum recurve bow with glowing string.", "subtype": "object", "aspect_ratio": [680, 974], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "bow_tier5": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/bow_tier5_106dbb29-dcab-419d-b9fe-533ec884c5eb.webp", "type": "image", "prompt": "Transform the bow from image 1 into legendary quality. Limbs radiating purple-pink magical energy with glowing runes, string made of pure magical energy, ethereal wisps. Powerful purple-pink magical aura. Maintain 3/4 perspective and hand-painted style. High resolution, transparent background.", "description": "Tier 5 Bow: Legendary recurve bow with magical energy.", "subtype": "object", "aspect_ratio": [684, 974], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "merge_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/merge_sound_ffc890f0-1b30-47c6-9650-99688ad66269.mp3", "type": "audio", "prompt": "A sharp, clean metallic 'clink' sound followed immediately by a magical rising shimmer. It should sound like two swords crossing, layered with a sparkling, high-pitched magical texture. Fast attack, pleasant ascending melodic tail, medium-high pitch, rewarding feedback for a puzzle game.", "description": "Satisfying metallic clink and magical shimmer when two weapons merge.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.42, "loop": false, "animation": null}, "spawn_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/spawn_sound_a3e6bce2-0fdf-45a2-9df4-95eeaac93625.mp3", "type": "audio", "prompt": "A brief, light magical sparkle sound effect. High-pitched chime with a gentle, airy 'poof' quality. Quick attack and fast decay, evocative of an item materializing out of thin air. Clean and non-intrusive for frequent use.", "description": "Light, airy magical chime for when a new weapon appears on the grid.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.41, "loop": false, "animation": null}, "upgrade_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/upgrade_sound_59597581-3725-4fa4-b300-1e87b1f7da77.mp3", "type": "audio", "prompt": "Triumphant ascending power-up sound effect. Features a short brassy fanfare motif, rising digital or orchestral tones, and a clear 'success' feeling. Significant and rewarding, clean production with a bright shimmer at the peak.", "description": "Triumphant power-up fanfare for purchasing upgrades in the menu.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.61, "loop": false, "animation": null}, "tier_up_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/tier_up_sound_9b242fe0-3dba-4ea1-a277-5416afaa443c.mp3", "type": "audio", "prompt": "Dramatic and powerful magical transformation sound. Starts with a resonant, deep metallic ringing (like a heavy anvil strike), followed by a sweeping magical whoosh and a shimmering celestial texture. Long sustain, epic and heavy, conveying high value and achievement.", "description": "Epic transformation sound for creating a Tier 5 Legendary weapon.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 2.39, "loop": false, "animation": null}, "button_click_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/button_click_sound_37418467-8c28-4286-89bf-b48a60b8d833.mp3", "type": "audio", "prompt": "A short, clean, and organic UI button click sound. Soft mechanical press with a slightly muted wooden or stone texture. Low-to-medium pitch, no reverb, designed to be snappy and non-distracting for repeated navigation.", "description": "A subtle, clean UI click for menu interactions.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 0.43, "loop": false, "animation": null}, "background_music": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/background_music_6b7d8cb5-2683-4175-a840-f1828e61815b.mp3", "type": "audio", "prompt": "Calm medieval fantasy ambient track, 70 BPM, in a warm major key. Features a gentle lute melody, soft wooden flute trills, and very light hand-drum percussion. Evokes a cozy, productive blacksmith's forge with an inviting workshop atmosphere. Instrumental only, smooth transitions, loopable, suitable for long-term idle gameplay without fatigue.", "description": "Medieval fantasy ambient track for the blacksmith workshop atmosphere.", "subtype": "music", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 30, "loop": true, "animation": null}, "sword_tier6": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/sword_tier6_265a3c55-66ce-49b0-b63d-4d49bd64b50e.webp", "type": "image", "prompt": "Generate a high fantasy, ornate Mythic Tier Sword called the Void Reaper Blade. The sword is made of dark obsidian, pulsing with intense purple void energy and surrounded by wispy dark smoke trails. The design should be more powerful and intricate than the legendary tier in image 1. Side view, clean professional game asset, high resolution with a magical glow, transparent background.", "description": "Mythic Tier Sword: Void Reaper Blade, a dark obsidian weapon with purple void energy.", "subtype": "object", "aspect_ratio": [901, 999], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "axe_tier6": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/axe_tier6_71d9909e-a969-4a91-9267-1015012ad647.webp", "type": "image", "prompt": "Generate a high fantasy mythic tier battleaxe named Thunder Core. A massive double-headed axe featuring a glowing blue core in the center and realistic blue lightning arcing across the sharp blades. Side view, 2D game asset style, highly detailed with electric visual effects and a magical aura. Clean edges, transparent background.", "description": "Mythic Tier Thunder Core Battleaxe with glowing blue core and lightning effects.", "subtype": "object", "aspect_ratio": [724, 939], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "spear_tier6": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/spear_tier6_088c28fb-40d7-49c8-8769-91a8854e8af2.webp", "type": "image", "prompt": "Generate a Mythic Tier Solar Burst Spear for a high-fantasy game. The spear is crafted from ornate gold with a tip that glows intensely like a miniature sun, emitting dynamic solar flares and radiant light particles. High-quality game asset, side view, 512x512 resolution, polished metal textures, magical glow, transparent background.", "description": "Mythic Tier Solar Burst Spear with radiant sun effects and solar flares.", "subtype": "object", "aspect_ratio": [411, 1019], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "bow_tier6": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/bow_tier6_be18a2e1-26b9-45f9-bbba-8ff2eb338276.webp", "type": "image", "prompt": "Generate a side-view mythic tier 'Astral Storm Bow' for a high fantasy game. The bow is translucent and crafted from shimmering starlight and celestial nebula energy. It features ethereal glow effects and trail of shooting stars. High-quality game asset, detailed ornate design, radiant celestial aesthetic, vibrant blues and purples, transparent background.", "description": "Mythic Tier Bow: Astral Storm Bow made of starlight with celestial effects", "subtype": "object", "aspect_ratio": [823, 1186], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "mythic_merge_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/mythic_merge_sound_357db9d6-0a0e-4d51-a143-360105cd06b4.mp3", "type": "audio", "prompt": "A powerful, cinematic cosmic explosion followed by a long, shimmering magical resonance and celestial chimes. The sound should have a deep sub-bass impact (thud) representing a massive release of energy, transitioning into high-pitched, sparkling crystalline textures. It should feel significantly more epic and weightier than a standard merge, evoking a sense of ancient power and divine achievement. High-quality, wide stereo field, clean tail, no background noise.", "description": "A powerful cosmic explosion and magical shimmer for creating top-tier Mythic weapons.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 3.79, "loop": false, "animation": null}, "enemy_orc": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/enemy_orc_206bce9c-d244-4a66-8dfd-06b3b5334c84.webp", "type": "image", "prompt": "Generate a full-body, front-facing fantasy orc warrior character. The style should be slightly stylized and cartoonish yet fierce and intimidating, suitable for an idle game. The orc has green skin, leather and fur armor, and a determined expression. High-quality game asset, professional digital art, standing illustration, transparent background.", "description": "A fierce but stylized fantasy orc warrior for idle battle mode", "subtype": "character", "aspect_ratio": [924, 1389], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "worldcup_boot": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/worldcup_boot_aa5d8c9b-ef4f-4840-8b37-2f14276eb640.webp", "type": "image", "prompt": "Generate a professional quality game asset of a golden soccer boot weapon. The boot is a powerful magical artifact with a polished golden metallic finish, vibrant glowing green energy emanating from the sole, and intricate soccer ball patterns embossed on the side. Small glowing star decorations float near the laces. Front-angled view showing the full boot, clean edges, transparent background. Fantasy RPG art style with high saturation and magical glow effects, consistent with legendary tier weapons.", "description": "A legendary golden soccer boot artifact with magical green energy and star decorations, acting as a fantasy weapon.", "subtype": "object", "aspect_ratio": [744, 811], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "worldcup_trophy": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/worldcup_trophy_cbc262fb-4962-45a2-abf8-7090d9ec3e3c.webp", "type": "image", "prompt": "Generate a fantasy game asset of a magical staff topped with the iconic FIFA World Cup trophy. The staff is a golden scepter with green and white energy swirling around the handle. The trophy itself glows with intense golden divine light, with small magical stars orbiting the top. High-quality game art style, vibrant colors, magical glow effects, front-facing view, isolated on a transparent background, professional digital illustration.", "description": "A legendary World Cup trophy staff weapon with golden divine light and orbiting stars.", "subtype": "object", "aspect_ratio": [312, 947], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "worldcup_ball": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/worldcup_ball_fc689f33-810a-40a5-99f9-3a75bf6af7d6.webp", "type": "image", "prompt": "Generate a magical soccer ball weapon for an idle fantasy game. The object is a classic black-and-white soccer ball enhanced with glowing runes on its panels. It features vibrant fiery orange and blue energy trails and crackling electricity surrounding it like a powerful explosive orb. Professional game asset, front-centered view, vibrant magical glow effects, high resolution, clean edges, transparent background.", "description": "A magical, enchanted soccer ball projectile with fiery and electrical energy effects.", "subtype": "effect", "aspect_ratio": [837, 841], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "worldcup_whistle": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/worldcup_whistle_d7466884-ddbf-4f32-820c-aee440205c79.webp", "type": "image", "prompt": "Generate a mythic-tier fantasy weapon shaped like a classic referee whistle. The whistle is made of polished gold with ornate jewels embedded in its surface. It emits powerful sonic shockwave rings and vibrant green and gold energy blasts from the mouthpiece. Professional game asset, side view, clean edges, transparent background. Stylized fantasy art style consistent with a magical artifact, featuring high-contrast golden and green glow effects and magical particles.", "description": "A mythic referee whistle weapon that emits sonic shockwaves, matching the World Cup fantasy theme.", "subtype": "object", "aspect_ratio": [659, 961], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "goal_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/goal_sound_85e8f865-13ed-4142-95f0-5c093c5087c8.mp3", "type": "audio", "prompt": "A triumphant and energetic soccer goal celebration sound effect. Features a sharp, loud referee whistle blow, followed immediately by a powerful blast of a stadium air horn and the roar of a large, excited crowd cheering. High-energy, professional sports broadcast quality, evocative of a World Cup match. Sharp attack with a natural stadium reverb tail.", "description": "Celebratory soccer goal sound with a stadium crowd cheer, air horn, and referee whistle.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 3, "loop": false, "animation": null}}, "game_code": "<!DOCTYPE html>\n<html>\n<head>\n    <title>Weapon Collector Idle</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Metamorphous&family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        /* CSS Reset and Base Styles */\n        *, *::before, *::after {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        body, html {\n            width: 100%;\n            height: 100%;\n            overflow: hidden;\n            touch-action: none;\n            -ms-touch-action: none;\n            font-family: 'Inter', sans-serif;\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 (8px grid) */\n            --space-xs: 8px;\n            --space-sm: 16px;\n            --space-md: 24px;\n            --space-lg: 32px;\n            --space-xl: 48px;\n\n            /* Colors */\n            --bg-dark: #2a2a2a;\n            --forge-glow: #ff8c42;\n            --bronze: #cd7f32;\n            --silver: #c0c0c0;\n            --gold: #ffd700;\n            --platinum: #e5e4e2;\n            --legendary: #9d4edd;\n            --mythic: #00f2ff;\n            --button-red: #8b0000;\n        }\n\n        /* Main Game Container */\n        #game-world {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(to bottom, #1a1a1a 0%, #2a2a2a 50%, #3a2a1a 100%);\n            overflow: hidden;\n        }\n\n        /* Background Glow Effect */\n        #game-world::before {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            height: 40%;\n            background: radial-gradient(ellipse at center bottom, rgba(255, 140, 66, 0.3) 0%, transparent 70%);\n            pointer-events: none;\n            animation: forgeGlow 3s ease-in-out infinite;\n        }\n\n        @keyframes forgeGlow {\n            0%, 100% { opacity: 0.8; }\n            50% { opacity: 1; }\n        }\n\n        /* Top HUD Section */\n        .hud-top {\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 180px;\n            padding: var(--space-sm);\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-sm);\n            z-index: 10;\n        }\n\n        /* Forge Points Display */\n        .forge-points {\n            background: linear-gradient(135deg, rgba(205, 127, 50, 0.3) 0%, rgba(139, 0, 0, 0.3) 100%);\n            border: 3px solid var(--bronze);\n            border-radius: 16px;\n            padding: var(--space-md);\n            text-align: center;\n            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 2px 8px rgba(255, 140, 66, 0.3);\n        }\n\n        .forge-points-label {\n            font-size: 18px;\n            color: var(--forge-glow);\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            font-weight: 600;\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);\n        }\n\n        .forge-points-value {\n            font-family: 'Metamorphous', serif;\n            font-size: 48px;\n            color: var(--gold);\n            font-weight: bold;\n            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.9);\n            line-height: 1;\n        }\n\n        /* Era and Progress Info */\n        .info-row {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: var(--space-sm);\n        }\n\n        .era-indicator, .collection-progress {\n            background: rgba(42, 42, 42, 0.8);\n            border: 2px solid rgba(255, 140, 66, 0.5);\n            border-radius: 12px;\n            padding: var(--space-sm) var(--space-md);\n            font-size: 18px;\n            color: var(--forge-glow);\n            font-weight: 600;\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);\n        }\n\n        .era-indicator {\n            flex: 1;\n        }\n\n        .collection-progress {\n            flex: 1;\n            text-align: right;\n        }\n\n        /* Grid Container */\n        .grid-container {\n            position: absolute;\n            top: 200px;\n            left: 0;\n            right: 0;\n            height: 800px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: var(--space-md);\n        }\n\n        .weapon-grid {\n            display: grid;\n            gap: 20px;\n            position: relative;\n        }\n\n        .weapon-grid.size-3x4 {\n            grid-template-columns: repeat(3, 160px);\n            grid-template-rows: repeat(4, 160px);\n        }\n\n        .weapon-grid.size-4x4 {\n            grid-template-columns: repeat(4, 160px);\n            grid-template-rows: repeat(4, 160px);\n        }\n\n        /* Grid Slot */\n        .grid-slot {\n            width: 160px;\n            height: 160px;\n            background: linear-gradient(135deg, rgba(60, 60, 60, 0.5) 0%, rgba(40, 40, 40, 0.5) 100%);\n            border: 3px solid rgba(205, 127, 50, 0.3);\n            border-radius: 16px;\n            position: relative;\n            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n            transition: all var(--transition-fast) var(--ease-out);\n        }\n\n        .grid-slot::before {\n            content: '';\n            position: absolute;\n            inset: 8px;\n            border: 2px dashed rgba(205, 127, 50, 0.2);\n            border-radius: 12px;\n        }\n\n        .grid-slot.highlight {\n            border-color: #4ade80;\n            box-shadow: 0 0 20px rgba(74, 222, 128, 0.5), inset 0 0 20px rgba(74, 222, 128, 0.2);\n            transform: scale(1.05);\n        }\n\n        /* Weapon in Slot */\n        .weapon {\n            position: absolute;\n            inset: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: grab;\n            user-select: none;\n            -webkit-user-select: none;\n            touch-action: none;\n            transition: transform var(--transition-fast) var(--ease-out);\n        }\n\n        .weapon:active {\n            transform: scale(1.05);\n            cursor: grabbing;\n        }\n\n        .weapon.dragging {\n            z-index: 1000;\n            transform: scale(1.1) rotate(5deg);\n            filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));\n            pointer-events: none;\n        }\n\n        .weapon img {\n            width: 140px;\n            height: 140px;\n            object-fit: contain;\n            pointer-events: none;\n        }\n\n        /* Tier Glow Effects */\n        .weapon[data-tier=\"1\"] {\n            filter: drop-shadow(0 0 8px rgba(205, 127, 50, 0.6));\n        }\n\n        .weapon[data-tier=\"2\"] {\n            filter: drop-shadow(0 0 10px rgba(192, 192, 192, 0.7));\n        }\n\n        .weapon[data-tier=\"3\"] {\n            filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));\n        }\n\n        .weapon[data-tier=\"4\"] {\n            filter: drop-shadow(0 0 14px rgba(229, 228, 226, 0.9));\n        }\n\n        .weapon[data-tier=\"5\"] {\n            filter: drop-shadow(0 0 16px rgba(157, 78, 221, 1));\n            animation: legendaryPulse 2s ease-in-out infinite;\n        }\n\n        .weapon[data-tier=\"6\"] {\n            filter: drop-shadow(0 0 20px rgba(0, 242, 255, 1));\n            animation: mythicPulse 1.5s ease-in-out infinite;\n        }\n\n        @keyframes legendaryPulse {\n            0%, 100% { filter: drop-shadow(0 0 16px rgba(157, 78, 221, 1)); }\n            50% { filter: drop-shadow(0 0 24px rgba(157, 78, 221, 1)); }\n        }\n\n        @keyframes mythicPulse {\n            0%, 100% { filter: drop-shadow(0 0 20px rgba(0, 242, 255, 1)); transform: scale(1); }\n            50% { filter: drop-shadow(0 0 35px rgba(0, 242, 255, 1)); transform: scale(1.05); }\n        }\n\n        @keyframes fadeOutUp {\n            0% { opacity: 1; transform: translateY(0); }\n            100% { opacity: 0; transform: translateY(-50px); }\n        }\n\n        /* Bottom UI Section */\n        .bottom-ui {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            height: 320px;\n            padding: var(--space-md);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: var(--space-sm);\n            z-index: 10;\n        }\n\n        .main-buttons {\n            display: flex;\n            gap: var(--space-sm);\n        }\n\n        .upgrade-button, .fusion-button {\n            width: 180px;\n            height: 80px;\n            background: linear-gradient(135deg, var(--button-red) 0%, #6b0000 100%);\n            border: 4px solid var(--forge-glow);\n            border-radius: 16px;\n            font-family: 'Metamorphous', serif;\n            font-size: 24px;\n            color: var(--gold);\n            font-weight: bold;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            cursor: pointer;\n            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 2px 8px rgba(255, 140, 66, 0.3);\n            transition: all var(--transition-fast) var(--ease-out);\n            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);\n        }\n\n        .fusion-button {\n            background: linear-gradient(135deg, #4b0082 0%, #2a0040 100%);\n            border-color: var(--platinum);\n            font-size: 20px;\n        }\n\n        .challenge-button {\n            width: 320px;\n            height: 60px;\n            background: linear-gradient(135deg, #333 0%, #000 100%);\n            border: 3px solid var(--mythic);\n            border-radius: 12px;\n            font-family: 'Metamorphous', serif;\n            font-size: 20px;\n            color: var(--mythic);\n            cursor: pointer;\n            box-shadow: 0 0 10px rgba(0, 242, 255, 0.3);\n            transition: all var(--transition-fast);\n        }\n\n        .challenge-button:hover {\n            box-shadow: 0 0 20px rgba(0, 242, 255, 0.6);\n            transform: translateY(-2px);\n        }\n\n        .upgrade-button:active {\n            transform: translateY(0);\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 2px 8px rgba(255, 140, 66, 0.2);\n        }\n\n        /* Settings Icons */\n        .settings-icons {\n            display: flex;\n            gap: var(--space-lg);\n        }\n\n        .icon-button {\n            width: 64px;\n            height: 64px;\n            background: rgba(42, 42, 42, 0.8);\n            border: 3px solid rgba(255, 140, 66, 0.5);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 32px;\n            cursor: pointer;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);\n            transition: all var(--transition-fast) var(--ease-out);\n        }\n\n        .icon-button:hover {\n            transform: scale(1.1);\n            border-color: var(--forge-glow);\n        }\n\n        .icon-button:active {\n            transform: scale(0.95);\n        }\n\n        /* Upgrade Menu Overlay */\n        .upgrade-menu {\n            position: fixed;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.85);\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 100;\n            padding: var(--space-md);\n        }\n\n        .upgrade-menu.visible {\n            display: flex;\n        }\n\n        .upgrade-menu-content {\n            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);\n            border: 4px solid var(--forge-glow);\n            border-radius: 24px;\n            padding: var(--space-lg);\n            max-width: 640px;\n            width: 100%;\n            max-height: 90vh;\n            overflow-y: auto;\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9);\n        }\n\n        .upgrade-menu-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: var(--space-lg);\n        }\n\n        .upgrade-menu-title {\n            font-family: 'Metamorphous', serif;\n            font-size: 40px;\n            color: var(--gold);\n            text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);\n        }\n\n        .close-button {\n            width: 48px;\n            height: 48px;\n            background: rgba(139, 0, 0, 0.5);\n            border: 2px solid var(--forge-glow);\n            border-radius: 50%;\n            font-size: 28px;\n            color: var(--gold);\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        .close-button:hover {\n            transform: scale(1.1);\n            background: rgba(139, 0, 0, 0.8);\n        }\n\n        /* Upgrade List */\n        .upgrade-list {\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-md);\n        }\n\n        .upgrade-item {\n            background: rgba(42, 42, 42, 0.5);\n            border: 2px solid rgba(205, 127, 50, 0.5);\n            border-radius: 16px;\n            padding: var(--space-md);\n        }\n\n        .upgrade-item.maxed {\n            opacity: 0.6;\n            border-color: rgba(192, 192, 192, 0.5);\n        }\n\n        .upgrade-item-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: var(--space-sm);\n        }\n\n        .upgrade-item-name {\n            font-size: 24px;\n            font-weight: 700;\n            color: var(--forge-glow);\n        }\n\n        .upgrade-item-level {\n            font-size: 20px;\n            color: var(--silver);\n        }\n\n        .upgrade-item-description {\n            font-size: 18px;\n            color: #ccc;\n            margin-bottom: var(--space-md);\n            line-height: 1.4;\n        }\n\n        .upgrade-item-footer {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .upgrade-cost {\n            font-size: 22px;\n            font-weight: 600;\n            color: var(--gold);\n        }\n\n        .upgrade-buy-button {\n            padding: var(--space-sm) var(--space-lg);\n            background: linear-gradient(135deg, var(--button-red) 0%, #6b0000 100%);\n            border: 3px solid var(--forge-glow);\n            border-radius: 12px;\n            font-size: 20px;\n            font-weight: 700;\n            color: var(--gold);\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n        }\n\n        .upgrade-buy-button:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);\n        }\n\n        .upgrade-buy-button:active {\n            transform: translateY(0);\n        }\n\n        .upgrade-buy-button:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n            transform: none;\n        }\n\n        .upgrade-buy-button.maxed {\n            background: rgba(192, 192, 192, 0.3);\n            border-color: var(--silver);\n            cursor: default;\n        }\n\n        /* Particle Canvas */\n        #particle-canvas {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 50;\n        }\n\n        /* Welcome Back Overlay */\n        .welcome-overlay {\n            position: fixed;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.9);\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 200;\n            padding: var(--space-lg);\n        }\n\n        .welcome-overlay.visible {\n            display: flex;\n        }\n\n        .welcome-content {\n            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);\n            border: 4px solid var(--gold);\n            border-radius: 24px;\n            padding: var(--space-xl);\n            text-align: center;\n            max-width: 560px;\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9);\n        }\n\n        .welcome-title {\n            font-family: 'Metamorphous', serif;\n            font-size: 40px;\n            color: var(--gold);\n            margin-bottom: var(--space-lg);\n            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);\n        }\n\n        .welcome-text {\n            font-size: 24px;\n            color: #ccc;\n            margin-bottom: var(--space-md);\n            line-height: 1.5;\n        }\n\n        .welcome-rewards {\n            font-size: 32px;\n            color: var(--forge-glow);\n            font-weight: 700;\n            margin-bottom: var(--space-lg);\n        }\n\n        .welcome-button {\n            padding: var(--space-md) var(--space-xl);\n            background: linear-gradient(135deg, var(--button-red) 0%, #6b0000 100%);\n            border: 4px solid var(--gold);\n            border-radius: 16px;\n            font-size: 28px;\n            font-weight: 700;\n            color: var(--gold);\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n        }\n\n        .welcome-button:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);\n        }\n\n        /* World Cup 2026 Styles */\n        .worldcup-button {\n            width: 320px;\n            height: 60px;\n            background: linear-gradient(135deg, #1a5c1a 0%, #0a3d0a 100%);\n            border: 3px solid #4ade80;\n            border-radius: 12px;\n            font-family: 'Metamorphous', serif;\n            font-size: 18px;\n            color: #4ade80;\n            cursor: pointer;\n            box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);\n            transition: all var(--transition-fast);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .worldcup-button::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);\n            animation: shimmer 3s infinite;\n        }\n\n        @keyframes shimmer {\n            0% { transform: translateX(-100%); }\n            100% { transform: translateX(100%); }\n        }\n\n        .worldcup-button:hover {\n            box-shadow: 0 0 20px rgba(74, 222, 128, 0.6);\n            transform: translateY(-2px);\n        }\n\n        .country-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 10px;\n            margin: 15px 0;\n        }\n\n        .country-card {\n            background: rgba(0,0,0,0.4);\n            border: 2px solid rgba(74,222,128,0.3);\n            border-radius: 12px;\n            padding: 12px 8px;\n            text-align: center;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .country-card:hover {\n            border-color: #4ade80;\n            transform: scale(1.05);\n        }\n\n        .country-card.selected {\n            border-color: #ffd700;\n            background: rgba(255,215,0,0.1);\n            box-shadow: 0 0 15px rgba(255,215,0,0.3);\n        }\n\n        .country-flag {\n            font-size: 32px;\n            margin-bottom: 4px;\n        }\n\n        .country-name {\n            font-size: 12px;\n            color: #ccc;\n        }\n\n        .country-bonus {\n            font-size: 10px;\n            color: #4ade80;\n            margin-top: 2px;\n        }\n\n        .goal-rush-field {\n            width: 100%;\n            height: 250px;\n            background: linear-gradient(to bottom, #1a5c1a 0%, #2d8a2d 50%, #1a5c1a 100%);\n            border-radius: 16px;\n            position: relative;\n            overflow: hidden;\n            border: 3px solid #fff;\n            margin: 15px 0;\n        }\n\n        .goal-rush-field::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 80px;\n            height: 80px;\n            border: 2px solid rgba(255,255,255,0.3);\n            border-radius: 50%;\n        }\n\n        .goal-rush-field::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 120px;\n            height: 40px;\n            border: 2px solid rgba(255,255,255,0.5);\n            border-top: none;\n            border-radius: 0 0 50% 50%;\n        }\n\n        .goal-ball {\n            position: absolute;\n            width: 50px;\n            height: 50px;\n            bottom: 30px;\n            left: 50%;\n            transform: translateX(-50%);\n            cursor: pointer;\n            transition: all 0.1s;\n            font-size: 40px;\n            text-align: center;\n            line-height: 50px;\n        }\n\n        .goal-ball:active {\n            transform: translateX(-50%) scale(0.9);\n        }\n\n        .goal-ball.kicked {\n            animation: kickBall 0.6s ease-out forwards;\n        }\n\n        @keyframes kickBall {\n            0% { bottom: 30px; transform: translateX(-50%) scale(1); }\n            50% { bottom: 180px; transform: translateX(-50%) scale(0.7); }\n            100% { bottom: 220px; transform: translateX(-50%) scale(0.4); opacity: 0; }\n        }\n\n        .wc-score-display {\n            display: flex;\n            justify-content: space-around;\n            background: rgba(0,0,0,0.5);\n            border-radius: 12px;\n            padding: 12px;\n            margin: 10px 0;\n        }\n\n        .wc-score-item {\n            text-align: center;\n        }\n\n        .wc-score-label {\n            font-size: 12px;\n            color: #aaa;\n        }\n\n        .wc-score-value {\n            font-size: 22px;\n            color: #4ade80;\n            font-weight: bold;\n        }\n\n        .wc-weapon-showcase {\n            display: flex;\n            justify-content: center;\n            gap: 15px;\n            margin: 15px 0;\n        }\n\n        .wc-weapon-card {\n            width: 80px;\n            height: 100px;\n            background: rgba(0,0,0,0.4);\n            border: 2px solid rgba(74,222,128,0.3);\n            border-radius: 12px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 8px;\n        }\n\n        .wc-weapon-card.unlocked {\n            border-color: #ffd700;\n            box-shadow: 0 0 10px rgba(255,215,0,0.3);\n        }\n\n        .wc-weapon-card.locked {\n            opacity: 0.5;\n            filter: grayscale(0.5);\n        }\n\n        .wc-weapon-card img {\n            width: 50px;\n            height: 50px;\n            object-fit: contain;\n        }\n\n        .wc-weapon-name {\n            font-size: 9px;\n            color: #ccc;\n            text-align: center;\n            margin-top: 4px;\n        }\n\n        .wc-tabs {\n            display: flex;\n            gap: 5px;\n            margin-bottom: 15px;\n        }\n\n        .wc-tab {\n            flex: 1;\n            padding: 10px;\n            background: rgba(0,0,0,0.4);\n            border: 2px solid rgba(74,222,128,0.3);\n            border-radius: 10px;\n            color: #aaa;\n            font-size: 14px;\n            cursor: pointer;\n            text-align: center;\n            transition: all 0.2s;\n        }\n\n        .wc-tab.active {\n            background: rgba(74,222,128,0.1);\n            border-color: #4ade80;\n            color: #4ade80;\n        }\n\n        /* --- Quest Board (Forge Quests Update) --- */\n        .quest-item {\n            background: rgba(0,0,0,0.35);\n            border: 2px solid rgba(255,215,0,0.25);\n            border-radius: 14px;\n            padding: 14px;\n        }\n\n        .quest-item.complete {\n            border-color: #4ade80;\n            box-shadow: 0 0 14px rgba(74,222,128,0.3);\n        }\n\n        .quest-name {\n            font-size: 21px;\n            color: var(--forge-glow);\n            font-weight: 700;\n        }\n\n        .quest-desc {\n            font-size: 16px;\n            color: #ccc;\n            margin: 4px 0 10px;\n        }\n\n        .quest-bar {\n            height: 14px;\n            background: #333;\n            border-radius: 7px;\n            overflow: hidden;\n        }\n\n        .quest-bar-fill {\n            height: 100%;\n            width: 0%;\n            background: linear-gradient(to right, #ffd700, #ff8c42);\n            transition: width 0.3s var(--ease-out);\n        }\n\n        .quest-footer {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-top: 10px;\n        }\n\n        .quest-reward {\n            color: var(--gold);\n            font-weight: 700;\n            font-size: 18px;\n        }\n\n        .quest-claim {\n            padding: 10px 20px;\n            border-radius: 10px;\n            border: 2px solid var(--gold);\n            background: linear-gradient(135deg, var(--button-red) 0%, #6b0000 100%);\n            color: var(--gold);\n            font-weight: 700;\n            font-size: 16px;\n            cursor: pointer;\n        }\n\n        .quest-claim:disabled {\n            opacity: 0.4;\n            cursor: not-allowed;\n        }\n\n        .quest-badge {\n            position: absolute;\n            top: -8px;\n            right: -8px;\n            width: 26px;\n            height: 26px;\n            border-radius: 50%;\n            background: #ff3b3b;\n            color: #fff;\n            font-size: 16px;\n            font-weight: 700;\n            display: none;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 0 10px rgba(255,59,59,0.8);\n        }\n\n        .quest-badge.show { display: flex; }\n\n        /* --- Combo Display --- */\n        #combo-display {\n            position: absolute;\n            top: 184px;\n            left: 50%;\n            transform: translateX(-50%) scale(0.8);\n            font-family: 'Metamorphous', serif;\n            font-size: 30px;\n            color: var(--gold);\n            text-shadow: 0 0 14px rgba(255,140,66,0.9), 0 2px 6px #000;\n            opacity: 0;\n            transition: all var(--transition-fast) var(--ease-bounce);\n            z-index: 20;\n            pointer-events: none;\n            white-space: nowrap;\n        }\n\n        #combo-display.show {\n            opacity: 1;\n            transform: translateX(-50%) scale(1);\n        }\n\n        /* --- Live Tutorial --- */\n        #tutorial-highlight {\n            position: fixed;\n            left: 0; top: 0; width: 0; height: 0;\n            border: 4px solid var(--gold);\n            border-radius: 22px;\n            box-shadow: 0 0 0 9999px rgba(0,0,0,0.78), 0 0 26px rgba(255,215,0,0.9) inset;\n            pointer-events: none;\n            z-index: 310;\n            display: none;\n            transition: all var(--transition-normal) var(--ease-out);\n        }\n\n        #tutorial-card {\n            position: fixed;\n            left: 24px;\n            right: 24px;\n            background: linear-gradient(135deg, #2f2f2f 0%, #131313 100%);\n            border: 4px solid var(--gold);\n            border-radius: 20px;\n            padding: 20px 22px;\n            z-index: 320;\n            display: none;\n            box-shadow: 0 10px 40px rgba(0,0,0,0.9);\n        }\n\n        #tutorial-step {\n            font-size: 13px;\n            color: var(--gold);\n            letter-spacing: 2px;\n            text-transform: uppercase;\n            font-weight: 700;\n        }\n\n        #tutorial-text {\n            font-size: 22px;\n            color: #fff;\n            line-height: 1.45;\n            margin: 10px 0 18px;\n        }\n\n        .tutorial-btn {\n            padding: 12px 26px;\n            border-radius: 12px;\n            font-size: 18px;\n            font-weight: 700;\n            cursor: pointer;\n            border: 3px solid var(--gold);\n            background: linear-gradient(135deg, var(--button-red) 0%, #6b0000 100%);\n            color: var(--gold);\n        }\n\n        .tutorial-btn.ghost {\n            border-color: #666;\n            background: rgba(255,255,255,0.05);\n            color: #aaa;\n            font-size: 15px;\n            padding: 10px 18px;\n        }\n\n        @keyframes tutorialPoint {\n            0%, 100% { transform: translateY(0); }\n            50% { transform: translateY(8px); }\n        }\n\n        #tutorial-hint {\n            font-size: 15px;\n            color: #4ade80;\n            font-weight: 700;\n            animation: tutorialPoint 1s ease-in-out infinite;\n        }\n\n        /* Edit Mode Styles */\n        .edit-mode .weapon {\n            border: 2px dashed rgba(255, 140, 66, 0.5);\n            border-radius: 12px;\n        }\n\n        .edit-mode .weapon.selected {\n            border-color: var(--gold);\n            box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);\n        }\n    </style>\n</head>\n<body>\n    <div id=\"game-world\">\n        <!-- Top HUD -->\n        <div class=\"hud-top\">\n            <div class=\"forge-points\">\n                <div class=\"forge-points-label\">Forge Points</div>\n                <div class=\"forge-points-value\" id=\"forge-points-display\">0</div>\n            </div>\n            <div class=\"info-row\">\n                <div class=\"era-indicator\">Ancient Era</div>\n                <div class=\"collection-progress\" id=\"collection-display\">0/20 Legendary</div>\n            </div>\n        </div>\n\n        <!-- Grid Container -->\n        <div class=\"grid-container\">\n            <div class=\"weapon-grid size-3x4\" id=\"weapon-grid\"></div>\n        </div>\n\n        <!-- Bottom UI -->\n        <!-- Bottom UI -->\n        <div class=\"bottom-ui\">\n            <div class=\"main-buttons\">\n                <button class=\"upgrade-button\" id=\"upgrade-button\">Upgrades</button>\n                <button class=\"fusion-button\" id=\"fusion-button\">Fusion Lab</button>\n            </div>\n            <button class=\"challenge-button\" id=\"challenge-button\">\u2694\ufe0f Infinite Waves</button>\n            <button class=\"worldcup-button\" id=\"worldcup-button\">\u26bd World Cup 2026 Event</button>\n            <div class=\"main-buttons\" style=\"margin-top: 8px;\">\n                <button class=\"challenge-button\" id=\"quest-button\" style=\"width: 104px; font-size: 15px; position: relative; border-color: #ff8c42; color: #ff8c42; box-shadow: 0 0 10px rgba(255,140,66,0.3);\">\ud83d\udccb Quests<span class=\"quest-badge\" id=\"quest-badge\">!</span></button>\n                <button class=\"challenge-button\" id=\"prestige-button\" style=\"width: 104px; font-size: 15px; border-color: #ffd700; color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.3);\">\ud83d\udd04 Rebirth</button>\n                <button class=\"challenge-button\" id=\"stats-button\" style=\"width: 104px; font-size: 15px; border-color: #4ade80; color: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.3);\">\ud83d\udcdc Stats</button>\n            </div>\n            <div class=\"settings-icons\">\n                <div class=\"icon-button\" id=\"sort-button\" title=\"Sort Weapons\">\ud83d\udcca</div>\n                <div class=\"icon-button\" id=\"settings-button\">\u2699\ufe0f</div>\n                <div class=\"icon-button\" id=\"info-button\">\u2139\ufe0f</div>\n            </div>\n        </div>\n\n        <!-- Particle Canvas -->\n        <div id=\"combo-display\"></div>\n\n        \n        <canvas id=\"particle-canvas\"></canvas>\n\n        <!-- Upgrade Menu -->\n        <div class=\"upgrade-menu\" id=\"upgrade-menu\">\n            <div class=\"upgrade-menu-content\">\n                <div class=\"upgrade-menu-header\">\n                    <h2 class=\"upgrade-menu-title\">Upgrades</h2>\n                    <button class=\"close-button\" id=\"close-upgrade-menu\">\u2715</button>\n                </div>\n                <div class=\"upgrade-list\" id=\"upgrade-list\"></div>\n            </div>\n        </div>\n\n        <!-- Fusion Lab Menu -->\n        <div class=\"upgrade-menu\" id=\"fusion-menu\">\n            <div class=\"upgrade-menu-content\">\n                <div class=\"upgrade-menu-header\">\n                    <h2 class=\"upgrade-menu-title\">Fusion Lab</h2>\n                    <button class=\"close-button\" id=\"close-fusion-menu\">\u2715</button>\n                </div>\n                <div class=\"welcome-text\">Select 3 identical weapons from your grid to fuse!</div>\n                <div id=\"fusion-lab-slots\" style=\"display: flex; justify-content: center; gap: 10px; margin: 20px 0;\">\n                    <div class=\"grid-slot\" id=\"fuse-slot-0\" data-fuse-index=\"0\"></div>\n                    <div class=\"grid-slot\" id=\"fuse-slot-1\" data-fuse-index=\"1\"></div>\n                    <div class=\"grid-slot\" id=\"fuse-slot-2\" data-fuse-index=\"2\"></div>\n                </div>\n                <div style=\"text-align: center;\">\n                    <button class=\"upgrade-buy-button\" id=\"start-fusion\" style=\"font-size: 24px; padding: 15px 40px;\">Fuse Weapons</button>\n                    <div id=\"fusion-result\" style=\"margin-top: 15px; color: var(--mythic); font-weight: bold; min-height: 24px;\"></div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Challenge Menu -->\n        <div class=\"upgrade-menu\" id=\"challenge-menu\">\n            <div class=\"upgrade-menu-content\" style=\"text-align: center;\">\n                <div class=\"upgrade-menu-header\">\n                    <h2 class=\"upgrade-menu-title\">Infinite Waves</h2>\n                    <button class=\"close-button\" id=\"close-challenge-menu\">\u2715</button>\n                </div>\n                <div class=\"wave-info\" style=\"margin-bottom: 20px;\">\n                    <div style=\"font-size: 28px; color: var(--mythic);\">WAVE <span id=\"current-wave\">1</span></div>\n                    <div id=\"wave-progress-bar\" style=\"width: 100%; height: 20px; background: #444; border-radius: 10px; margin-top: 10px; position: relative; overflow: hidden;\">\n                        <div id=\"wave-progress-fill\" style=\"width: 0%; height: 100%; background: linear-gradient(to right, #00f2ff, #0077ff); transition: width 0.3s;\"></div>\n                    </div>\n                </div>\n                <div id=\"battle-view\" style=\"height: 300px; background: rgba(0,0,0,0.4); border-radius: 16px; position: relative; overflow: hidden; margin-bottom: 20px;\">\n                    <div id=\"enemy-sprite\" style=\"position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; transition: all 0.2s; display: flex; align-items: center; justify-content: center;\">\n                        <img src=\"\" id=\"enemy-img\" style=\"width: 100%; height: 100%; object-fit: contain;\">\n                    </div>\n                    <div id=\"damage-numbers\" style=\"position: absolute; inset: 0; pointer-events: none;\"></div>\n                </div>\n                <div style=\"display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 12px;\">\n                    <div style=\"text-align: left;\">\n                        <div style=\"color: #aaa; font-size: 14px;\">Total DPS</div>\n                        <div style=\"font-size: 22px; color: var(--gold);\" id=\"total-dps\">0</div>\n                    </div>\n                    <div style=\"text-align: right;\">\n                        <div style=\"color: #aaa; font-size: 14px;\">Wave Reward</div>\n                        <div style=\"font-size: 22px; color: var(--forge-glow);\" id=\"wave-reward\">+0 FP</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Welcome Back Overlay -->\n        <div class=\"welcome-overlay\" id=\"welcome-overlay\">\n            <div class=\"welcome-content\">\n                <h2 class=\"welcome-title\">Welcome Back!</h2>\n                <p class=\"welcome-text\" id=\"welcome-text\">While you were away...</p>\n                <div class=\"welcome-rewards\" id=\"welcome-rewards\"></div>\n                <button class=\"welcome-button\" id=\"welcome-continue\">Continue</button>\n            </div>\n        </div>\n\n        <!-- World Cup 2026 Event -->\n        <div class=\"upgrade-menu\" id=\"worldcup-menu\">\n            <div class=\"upgrade-menu-content\" style=\"text-align: center;\">\n                <div class=\"upgrade-menu-header\">\n                    <h2 class=\"upgrade-menu-title\" style=\"font-size: 32px;\">\u26bd World Cup 2026</h2>\n                    <button class=\"close-button\" id=\"close-worldcup-menu\">\u2715</button>\n                </div>\n                \n                <div class=\"wc-tabs\">\n                    <div class=\"wc-tab active\" id=\"wc-tab-teams\" data-tab=\"teams\">\ud83c\udfc6 Teams</div>\n                    <div class=\"wc-tab\" id=\"wc-tab-rush\" data-tab=\"rush\">\u26bd Goal Rush</div>\n                    <div class=\"wc-tab\" id=\"wc-tab-rewards\" data-tab=\"rewards\">\ud83c\udf81 Rewards</div>\n                </div>\n\n                <!-- Teams Tab -->\n                <div id=\"wc-panel-teams\">\n                    <div style=\"color: #ccc; font-size: 14px; margin-bottom: 10px;\">Pick your team for bonus effects!</div>\n                    <div class=\"country-grid\" id=\"country-grid\">\n                        <div class=\"country-card\" data-country=\"usa\">\n                            <div class=\"country-flag\">\ud83c\uddfa\ud83c\uddf8</div>\n                            <div class=\"country-name\">USA</div>\n                            <div class=\"country-bonus\">+20% FP</div>\n                        </div>\n                        <div class=\"country-card\" data-country=\"brazil\">\n                            <div class=\"country-flag\">\ud83c\udde7\ud83c\uddf7</div>\n                            <div class=\"country-name\">Brazil</div>\n                            <div class=\"country-bonus\">+15% Spawn</div>\n                        </div>\n                        <div class=\"country-card\" data-country=\"argentina\">\n                            <div class=\"country-flag\">\ud83c\udde6\ud83c\uddf7</div>\n                            <div class=\"country-name\">Argentina</div>\n                            <div class=\"country-bonus\">+25% Merge</div>\n                        </div>\n                        <div class=\"country-card\" data-country=\"germany\">\n                            <div class=\"country-flag\">\ud83c\udde9\ud83c\uddea</div>\n                            <div class=\"country-name\">Germany</div>\n                            <div class=\"country-bonus\">+10% All</div>\n                        </div>\n                        <div class=\"country-card\" data-country=\"france\">\n                            <div class=\"country-flag\">\ud83c\uddeb\ud83c\uddf7</div>\n                            <div class=\"country-name\">France</div>\n                            <div class=\"country-bonus\">2x Goals</div>\n                        </div>\n                        <div class=\"country-card\" data-country=\"mexico\">\n                            <div class=\"country-flag\">\ud83c\uddf2\ud83c\uddfd</div>\n                            <div class=\"country-name\">Mexico</div>\n                            <div class=\"country-bonus\">+30% Lucky</div>\n                        </div>\n                        <div class=\"country-card\" data-country=\"japan\">\n                            <div class=\"country-flag\">\ud83c\uddef\ud83c\uddf5</div>\n                            <div class=\"country-name\">Japan</div>\n                            <div class=\"country-bonus\">Auto-Goal</div>\n                        </div>\n                        <div class=\"country-card\" data-country=\"spain\">\n                            <div class=\"country-flag\">\ud83c\uddea\ud83c\uddf8</div>\n                            <div class=\"country-name\">Spain</div>\n                            <div class=\"country-bonus\">+20% DPS</div>\n                        </div>\n                        <div class=\"country-card\" data-country=\"england\">\n                            <div class=\"country-flag\">\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f</div>\n                            <div class=\"country-name\">England</div>\n                            <div class=\"country-bonus\">+15% Crit</div>\n                        </div>\n                    </div>\n                    <div id=\"team-status\" style=\"color: #4ade80; font-size: 14px; min-height: 20px; margin-top: 10px;\"></div>\n                </div>\n\n                <!-- Goal Rush Tab -->\n                <div id=\"wc-panel-rush\" style=\"display: none;\">\n                    <div class=\"wc-score-display\">\n                        <div class=\"wc-score-item\">\n                            <div class=\"wc-score-label\">Goals</div>\n                            <div class=\"wc-score-value\" id=\"wc-goals\">0</div>\n                        </div>\n                        <div class=\"wc-score-item\">\n                            <div class=\"wc-score-label\">Stars \u2b50</div>\n                            <div class=\"wc-score-value\" id=\"wc-stars\">0</div>\n                        </div>\n                        <div class=\"wc-score-item\">\n                            <div class=\"wc-score-label\">Best Streak</div>\n                            <div class=\"wc-score-value\" id=\"wc-streak\">0</div>\n                        </div>\n                    </div>\n                    <div class=\"goal-rush-field\" id=\"goal-rush-field\">\n                        <div style=\"position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 100px; height: 30px; border: 2px solid rgba(255,255,255,0.6); border-top: none; display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(255,255,255,0.5);\">GOAL</div>\n                        <div class=\"goal-ball\" id=\"goal-ball\">\u26bd</div>\n                        <div id=\"goalkeeper\" style=\"position: absolute; top: 35px; left: 50%; transform: translateX(-50%); font-size: 30px; transition: left 0.3s;\">\ud83e\udde4</div>\n                    </div>\n                    <div style=\"color: #aaa; font-size: 13px; margin-top: 8px;\">Tap the ball to shoot! Score goals for \u2b50 Stars!</div>\n                    <div id=\"goal-result\" style=\"color: #ffd700; font-size: 18px; font-weight: bold; min-height: 24px; margin-top: 8px;\"></div>\n                </div>\n\n                <!-- Rewards Tab -->\n                <div id=\"wc-panel-rewards\" style=\"display: none;\">\n                    <div style=\"color: #ccc; font-size: 14px; margin-bottom: 15px;\">Earn \u2b50 Stars from Goal Rush to unlock World Cup weapons!</div>\n                    <div class=\"wc-weapon-showcase\" id=\"wc-weapon-showcase\">\n                        <div class=\"wc-weapon-card locked\" id=\"wc-card-boot\">\n                            <img src=\"\" id=\"wc-img-boot\" style=\"width:50px;height:50px;object-fit:contain;\">\n                            <div class=\"wc-weapon-name\">Golden Boot<br>\u2b50 10</div>\n                        </div>\n                        <div class=\"wc-weapon-card locked\" id=\"wc-card-ball\">\n                            <img src=\"\" id=\"wc-img-ball\" style=\"width:50px;height:50px;object-fit:contain;\">\n                            <div class=\"wc-weapon-name\">Magic Ball<br>\u2b50 25</div>\n                        </div>\n                        <div class=\"wc-weapon-card locked\" id=\"wc-card-whistle\">\n                            <img src=\"\" id=\"wc-img-whistle\" style=\"width:50px;height:50px;object-fit:contain;\">\n                            <div class=\"wc-weapon-name\">Sonic Whistle<br>\u2b50 50</div>\n                        </div>\n                        <div class=\"wc-weapon-card locked\" id=\"wc-card-trophy\">\n                            <img src=\"\" id=\"wc-img-trophy\" style=\"width:50px;height:50px;object-fit:contain;\">\n                            <div class=\"wc-weapon-name\">WC Trophy<br>\u2b50 100</div>\n                        </div>\n                    </div>\n                    <div style=\"background: rgba(0,0,0,0.4); border-radius: 12px; padding: 15px; margin-top: 10px;\">\n                        <div style=\"color: #aaa; font-size: 12px;\">Unlocked weapons spawn on your grid as Tier 4+ weapons!</div>\n                        <button class=\"upgrade-buy-button\" id=\"wc-claim-reward\" style=\"margin-top: 10px; width: 100%;\">Claim Next Reward</button>\n                    </div>\n                    <div id=\"wc-reward-result\" style=\"color: #4ade80; font-size: 14px; min-height: 20px; margin-top: 10px;\"></div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Prestige Overlay -->\n        <div class=\"upgrade-menu\" id=\"prestige-menu\">\n            <div class=\"upgrade-menu-content\" style=\"text-align: center;\">\n                <div class=\"upgrade-menu-header\">\n                    <h2 class=\"upgrade-menu-title\">\ud83d\udd04 Rebirth</h2>\n                    <button class=\"close-button\" id=\"close-prestige-menu\">\u2715</button>\n                </div>\n                <div style=\"color: #ccc; font-size: 18px; margin-bottom: 20px; line-height: 1.6;\">\n                    Reset your grid, upgrades, and Forge Points to gain a <span style=\"color: #ffd700; font-weight: bold;\">permanent multiplier</span> on all future earnings!\n                </div>\n                <div style=\"background: rgba(0,0,0,0.4); border-radius: 16px; padding: 20px; margin-bottom: 20px;\">\n                    <div style=\"color: #aaa; font-size: 14px;\">Current Rebirth Level</div>\n                    <div style=\"font-size: 36px; color: #ffd700; font-weight: bold;\" id=\"prestige-level\">0</div>\n                    <div style=\"color: #aaa; font-size: 14px; margin-top: 10px;\">Current Bonus</div>\n                    <div style=\"font-size: 24px; color: #4ade80;\" id=\"prestige-bonus\">\u00d71.0</div>\n                </div>\n                <div style=\"background: rgba(255,215,0,0.1); border: 2px solid rgba(255,215,0,0.3); border-radius: 12px; padding: 15px; margin-bottom: 20px;\">\n                    <div style=\"color: #ffd700; font-size: 16px;\">Next Rebirth Reward</div>\n                    <div style=\"color: #fff; font-size: 20px; margin-top: 5px;\" id=\"prestige-next-reward\">+\u00d70.5 multiplier</div>\n                    <div style=\"color: #aaa; font-size: 14px; margin-top: 5px;\" id=\"prestige-requirement\">Requires 1000 FP earned this run</div>\n                </div>\n                <button class=\"welcome-button\" id=\"do-prestige\" style=\"font-size: 22px;\">Perform Rebirth</button>\n            </div>\n        </div>\n\n        <!-- Stats Overlay -->\n        <div class=\"upgrade-menu\" id=\"stats-menu\">\n            <div class=\"upgrade-menu-content\">\n                <div class=\"upgrade-menu-header\">\n                    <h2 class=\"upgrade-menu-title\">\ud83d\udcdc Stats</h2>\n                    <button class=\"close-button\" id=\"close-stats-menu\">\u2715</button>\n                </div>\n                <div id=\"stats-list\" style=\"display: flex; flex-direction: column; gap: 12px;\"></div>\n            </div>\n        </div>\n\n        \n        <div class=\"upgrade-menu\" id=\"quest-menu\">\n            <div class=\"upgrade-menu-content\">\n                <div class=\"upgrade-menu-header\">\n                    <h2 class=\"upgrade-menu-title\">\ud83d\udccb Quest Board</h2>\n                    <button class=\"close-button\" id=\"close-quest-menu\">\u2715</button>\n                </div>\n                <div style=\"color:#ccc; font-size:16px; margin-bottom:16px;\">Complete forge missions for big Forge Point payouts. Claimed quests are instantly replaced with a new one!</div>\n                <div id=\"quest-list\" style=\"display:flex; flex-direction:column; gap:14px;\"></div>\n                <div id=\"quest-result\" style=\"color:#4ade80; font-size:16px; min-height:22px; margin-top:14px; text-align:center;\"></div>\n            </div>\n        </div>\n\n        \n        <div id=\"tutorial-highlight\"></div>\n        <div id=\"tutorial-card\">\n            <div id=\"tutorial-step\">Step 1</div>\n            <div id=\"tutorial-text\"></div>\n            <div style=\"display:flex; justify-content:space-between; align-items:center; gap:12px;\">\n                <button class=\"tutorial-btn ghost\" id=\"tutorial-skip\">Skip Tutorial</button>\n                <div id=\"tutorial-hint\" style=\"display:none;\">Try it! \ud83d\udc46</div>\n                <button class=\"tutorial-btn\" id=\"tutorial-next\">Next</button>\n            </div>\n        </div>\n    </div>\n\n    <script>\n        // Game Overview:\n        // Weapon Collector Idle is a merge-based incremental game where players collect and upgrade weapons\n        // through a satisfying drag-and-drop mechanic. Weapons spawn automatically on a grid, and players\n        // merge identical weapons to create higher-tier versions. The game features idle progression with\n        // offline rewards, a currency system (Forge Points), and upgrades to enhance spawn rates and grid size.\n\n        async function run(mode) {\n            const gameWorld = document.getElementById('game-world');\n            const particleCanvas = document.getElementById('particle-canvas');\n            const particleCtx = particleCanvas.getContext('2d');\n\n            // Initialize canvas sizing\n            function resizeCanvas() {\n                particleCanvas.width = window.innerWidth;\n                particleCanvas.height = window.innerHeight;\n            }\n            resizeCanvas();\n            window.addEventListener('resize', resizeCanvas);\n\n            // Asset preloading\n            const assetCache = {};\n            const audioContext = new (window.AudioContext || window.webkitAudioContext)();\n            const audioBuffers = {};\n\n            async function preloadAssets() {\n                const weaponTypes = ['sword', 'axe', 'spear', 'bow'];\n                const tiers = [1, 2, 3, 4, 5, 6];\n                const assetIds = [];\n\n                // Weapon images\n                for (const type of weaponTypes) {\n                    for (const tier of tiers) {\n                        assetIds.push(`${type}_tier${tier}`);\n                    }\n                }\n\n                // Audio files\n                const audioIds = ['merge_sound', 'spawn_sound', 'upgrade_sound', 'tier_up_sound', 'button_click_sound', 'background_music', 'mythic_merge_sound', 'goal_sound'];\n                \n                // Other images\n                const otherImages = ['enemy_orc', 'worldcup_boot', 'worldcup_ball', 'worldcup_whistle', 'worldcup_trophy'];\n                assetIds.push(...otherImages);\n                for (const id of assetIds) {\n                    const assetInfo = lib.getAsset(id);\n                    if (assetInfo && assetInfo.type === 'image') {\n                        const img = new Image();\n                        img.src = assetInfo.url;\n                        await new Promise((resolve) => {\n                            img.onload = resolve;\n                            img.onerror = resolve;\n                        });\n                        assetCache[id] = img;\n                    }\n                }\n\n                // Preload audio\n                for (const id of audioIds) {\n                    const assetInfo = lib.getAsset(id);\n                    if (assetInfo && assetInfo.type === 'audio') {\n                        try {\n                            const response = await fetch(assetInfo.url);\n                            const arrayBuffer = await response.arrayBuffer();\n                            const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);\n                            audioBuffers[id] = audioBuffer;\n                        } catch (err) {\n                            lib.log(`Failed to load audio: ${id}`);\n                        }\n                    }\n                }\n            }\n\n            await preloadAssets();\n\n            // Audio system\n            function playSound(soundId) {\n                if (!audioBuffers[soundId]) return;\n                const source = audioContext.createBufferSource();\n                source.buffer = audioBuffers[soundId];\n                source.connect(audioContext.destination);\n                source.start(0);\n            }\n\n            // Background music\n            let musicSource = null;\n            function playBackgroundMusic() {\n                if (musicSource) return;\n                if (!audioBuffers['background_music']) return;\n                \n                musicSource = audioContext.createBufferSource();\n                musicSource.buffer = audioBuffers['background_music'];\n                musicSource.loop = true;\n                const gainNode = audioContext.createGain();\n                gainNode.gain.value = 0.3;\n                musicSource.connect(gainNode);\n                gainNode.connect(audioContext.destination);\n                musicSource.start(0);\n            }\n\n            // Start music on first interaction\n            document.addEventListener('click', playBackgroundMusic, { once: true });\n            document.addEventListener('touchstart', playBackgroundMusic, { once: true });\n\n            // Initialize game config if needed\n            if (!window.gameConfig) {\n                window.gameConfig = {\n                    settings: {\n                        backgroundTheme: 'classic',\n                        gridStyle: 'stone',\n                        particlesEnabled: true,\n                        startingSpawnRate: 5,\n                        startingGridSize: '3x4',\n                        forgePointsMultiplier: 1,\n                        offlineProgressCap: 2\n                    },\n                    progress: {\n                        forgePoints: 0,\n                        collectedLegendaries: 0,\n                        collectedMythics: 0,\n                        totalMerges: 0,\n                        lastPlayTime: Date.now(),\n                        highestWave: 1\n                    },\n                    upgrades: {\n                        spawnRate: 0,\n                        gridExpansion: 0\n                    },\n                    grid: {\n                        rows: 3,\n                        cols: 4,\n                        weapons: []\n                    },\n                    unlockedWeapons: ['sword', 'axe'],\n                    fusionLab: {\n                        unlocked: false,\n                        slots: [null, null, null]\n                    },\n                    challenge: {\n                        currentWave: 1,\n                        enemyHealth: 100,\n                        maxEnemyHealth: 100\n                    }\n                };\n            }\n\n            // Ensure new properties exist for existing configs\n            window.gameConfig.progress.collectedMythics = window.gameConfig.progress.collectedMythics || 0;\n            window.gameConfig.progress.highestWave = window.gameConfig.progress.highestWave || 1;\n            window.gameConfig.progress.totalForgePointsEarned = window.gameConfig.progress.totalForgePointsEarned || 0;\n            window.gameConfig.progress.runForgePoints = window.gameConfig.progress.runForgePoints || 0;\n            window.gameConfig.progress.prestigeLevel = window.gameConfig.progress.prestigeLevel || 0;\n            window.gameConfig.progress.prestigeMultiplier = window.gameConfig.progress.prestigeMultiplier || 1;\n            window.gameConfig.progress.luckyForgeChance = window.gameConfig.progress.luckyForgeChance || 0.05;\n            window.gameConfig.settings.autoMergeEnabled = window.gameConfig.settings.autoMergeEnabled || false;\n            window.gameConfig.fusionLab = window.gameConfig.fusionLab || { unlocked: false, slots: [null, null, null] };\n            window.gameConfig.challenge = window.gameConfig.challenge || { currentWave: 1, enemyHealth: 100, maxEnemyHealth: 100 };\n            window.gameConfig.worldCup = window.gameConfig.worldCup || { selectedTeam: null, goals: 0, stars: 0, bestStreak: 0, currentStreak: 0, unlockedWeapons: [], goalkeeperSpeed: 1 };\n            window.gameConfig.progress.bestCombo = window.gameConfig.progress.bestCombo || 0;\n            window.gameConfig.quests = window.gameConfig.quests || { active: [], claimedTotal: 0 };\n\n            // Handle offline progress\n            if (mode === 'play' && window.gameConfig.progress.lastPlayTime) {\n                const timeSinceLastPlay = (Date.now() - window.gameConfig.progress.lastPlayTime) / 1000; // seconds\n                const maxOfflineTime = window.gameConfig.settings.offlineProgressCap * 3600; // hours to seconds\n                const offlineTime = Math.min(timeSinceLastPlay, maxOfflineTime);\n                \n                if (offlineTime > 60) { // Only show if away for more than 1 minute\n                    const dps = getTotalDPS();\n                    const forgePointsEarned = Math.floor(offlineTime * (dps + 1) * 0.5 * window.gameConfig.settings.forgePointsMultiplier);\n                    \n                    if (forgePointsEarned > 0) {\n                        window.gameConfig.progress.forgePoints += forgePointsEarned;\n                        showWelcomeBack(offlineTime, forgePointsEarned);\n                    }\n                }\n            }\n\n            window.gameConfig.progress.lastPlayTime = Date.now();\n\n            // Daily Streak\n            const lastDaily = window.gameConfig.progress.lastDailyReward || 0;\n            const now = Date.now();\n            if (now - lastDaily > 24 * 3600 * 1000) {\n                const streak = window.gameConfig.progress.streak || 0;\n                const newStreak = (now - lastDaily < 48 * 3600 * 1000) ? streak + 1 : 1;\n                window.gameConfig.progress.streak = newStreak;\n                window.gameConfig.progress.lastDailyReward = now;\n                const dailyReward = 100 * newStreak;\n                window.gameConfig.progress.forgePoints += dailyReward;\n                // Notification via particles and text\n                setTimeout(() => {\n                    createParticles(window.innerWidth/2, window.innerHeight/2, '#ffd700');\n                }, 1000);\n            }\n            function showWelcomeBack(timeAway, forgePoints) {\n                const overlay = document.getElementById('welcome-overlay');\n                const text = document.getElementById('welcome-text');\n                const rewards = document.getElementById('welcome-rewards');\n                \n                const hours = Math.floor(timeAway / 3600);\n                const minutes = Math.floor((timeAway % 3600) / 60);\n                let timeText = '';\n                if (hours > 0) timeText += `${hours}h `;\n                timeText += `${minutes}m`;\n                \n                text.textContent = `You were away for ${timeText}`;\n                rewards.textContent = `+${forgePoints} Forge Points`;\n                overlay.classList.add('visible');\n                \n                document.getElementById('welcome-continue').onclick = () => {\n                    overlay.classList.remove('visible');\n                    playSound('button_click_sound');\n                };\n            }\n\n            function getMythicCount(type) {\n                return window.gameConfig.grid.weapons.filter(w => w && w.tier === 6 && (type ? w.type === type : true)).length;\n            }\n\n            // World Cup team bonus helper (defined early for use in game mechanics)\n            function getTeamBonus(type) {\n                const wc = window.gameConfig.worldCup;\n                if (!wc || !wc.selectedTeam) return 0;\n                const teamBonusMap = {\n                    usa: { fpBonus: 0.2 },\n                    brazil: { spawnBonus: 0.15 },\n                    argentina: { mergeBonus: 0.25 },\n                    germany: { allBonus: 0.1 },\n                    france: { goalMultiplier: 2 },\n                    mexico: { luckyBonus: 0.3 },\n                    japan: { autoGoal: true },\n                    spain: { dpsBonus: 0.2 },\n                    england: { critBonus: 0.15 }\n                };\n                const bonus = teamBonusMap[wc.selectedTeam];\n                if (!bonus) return 0;\n                switch(type) {\n                    case 'fp': return bonus.fpBonus || bonus.allBonus || 0;\n                    case 'spawn': return bonus.spawnBonus || bonus.allBonus || 0;\n                    case 'merge': return bonus.mergeBonus || bonus.allBonus || 0;\n                    case 'lucky': return bonus.luckyBonus || 0;\n                    case 'dps': return bonus.dpsBonus || bonus.allBonus || 0;\n                    case 'goalMult': return bonus.goalMultiplier || 1;\n                    case 'autoGoal': return bonus.autoGoal || false;\n                    case 'crit': return bonus.critBonus || 0;\n                    default: return 0;\n                }\n            }\n\n            // Utility functions\n            function getSpawnRate() {\n                const baseRate = window.gameConfig.settings.startingSpawnRate;\n                const upgradeLevel = window.gameConfig.upgrades.spawnRate;\n                const rates = [baseRate, baseRate - 1, baseRate - 2, baseRate - 2.5, baseRate - 3];\n                let currentRate = Math.max(1, rates[upgradeLevel] || baseRate);\n                \n                // Mythic Sword Bonus: -0.5s per Mythic Sword\n                const mythicSwords = getMythicCount('sword');\n                currentRate = Math.max(0.5, currentRate - (mythicSwords * 0.5));\n                \n                // World Cup team spawn bonus\n                const spawnBonus = getTeamBonus('spawn');\n                if (spawnBonus > 0) {\n                    currentRate *= (1 - spawnBonus);\n                }\n                \n                return currentRate;\n            }\n\n            function getGridSize() {\n                return window.gameConfig.upgrades.gridExpansion > 0 ? '4x4' : window.gameConfig.settings.startingGridSize;\n            }\n\n            // Game state\n            const state = {\n                dragging: null,\n                dragOffset: { x: 0, y: 0 },\n                spawnTimer: 0,\n                particles: []\n            };\n\n            // UI Elements\n            const weaponGrid = document.getElementById('weapon-grid');\n            const forgePointsDisplay = document.getElementById('forge-points-display');\n            const collectionDisplay = document.getElementById('collection-display');\n            const upgradeButton = document.getElementById('upgrade-button');\n            const upgradeMenu = document.getElementById('upgrade-menu');\n            const upgradeList = document.getElementById('upgrade-list');\n\n            // Update grid size\n            function updateGridSize() {\n                const size = getGridSize();\n                weaponGrid.className = `weapon-grid size-${size}`;\n                if (size === '4x4') {\n                    window.gameConfig.grid.rows = 4;\n                    window.gameConfig.grid.cols = 4;\n                }\n            }\n            updateGridSize();\n\n            // Render grid\n            function renderGrid() {\n                weaponGrid.innerHTML = '';\n                const totalSlots = window.gameConfig.grid.rows * window.gameConfig.grid.cols;\n                \n                for (let i = 0; i < totalSlots; i++) {\n                    const slot = document.createElement('div');\n                    slot.className = 'grid-slot';\n                    slot.dataset.index = i;\n                    weaponGrid.appendChild(slot);\n                }\n\n                // Render weapons\n                window.gameConfig.grid.weapons.forEach((weapon, index) => {\n                    if (weapon) {\n                        const slot = weaponGrid.children[weapon.slotIndex];\n                        if (slot) {\n                            const weaponEl = createWeaponElement(weapon, index);\n                            slot.appendChild(weaponEl);\n                        }\n                    }\n                });\n            }\n\n            // Create weapon element\n            function createWeaponElement(weapon, index) {\n                const weaponEl = document.createElement('div');\n                weaponEl.className = 'weapon';\n                weaponEl.dataset.index = index;\n                weaponEl.dataset.type = weapon.type;\n                weaponEl.dataset.tier = weapon.tier;\n\n                const img = document.createElement('img');\n                // Handle World Cup weapons (their type IS the asset id)\n                let assetId;\n                if (weapon.type.startsWith('worldcup_')) {\n                    assetId = weapon.type;\n                } else {\n                    assetId = `${weapon.type}_tier${weapon.tier}`;\n                }\n                img.src = assetCache[assetId]?.src || '';\n                weaponEl.appendChild(img);\n\n                // Explicitly disable double-click/double-tap actions on weapons\n                weaponEl.ondblclick = (e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                };\n\n                weaponEl.onclick = (e) => {\n                    if (fusionMenu.classList.contains('visible')) {\n                        if (addToFusion(weapon)) {\n                            playSound('spawn_sound');\n                            updateFusionSlots();\n                            renderGrid();\n                        }\n                    }\n                };\n\n                return weaponEl;\n            }\n\n            // Update HUD\n            function updateHUD() {\n                forgePointsDisplay.textContent = Math.floor(window.gameConfig.progress.forgePoints);\n                const legendaries = window.gameConfig.progress.collectedLegendaries;\n                const mythics = window.gameConfig.progress.collectedMythics;\n                collectionDisplay.textContent = `${legendaries}L | ${mythics}M`;\n                \n                const eraIndicator = document.querySelector('.era-indicator');\n                if (mythics > 0) eraIndicator.textContent = \"Mythic Era\";\n                else if (legendaries > 0) eraIndicator.textContent = \"Legendary Era\";\n                else eraIndicator.textContent = \"Ancient Era\";\n\n                // Check for Fusion Lab Unlock\n                if (legendaries >= 5 && !window.gameConfig.fusionLab.unlocked) {\n                    window.gameConfig.fusionLab.unlocked = true;\n                    createParticles(window.innerWidth/2, window.innerHeight/2, '#9d4edd');\n                }\n                \n                document.getElementById('fusion-button').style.display = window.gameConfig.fusionLab.unlocked ? 'block' : 'none';\n\n                // Check for crown\n                const mythicTypes = ['sword', 'axe', 'spear', 'bow'];\n                const hasAll = mythicTypes.every(type => getMythicCount(type) > 0);\n                if (hasAll) {\n                    collectionDisplay.textContent += \" \ud83d\udc51\";\n                    window.gameConfig.settings.forgePointsMultiplier = 2; // Double income\n                }\n            }\n\n            // Spawn weapon\n            function spawnWeapon(tier = 1) {\n                const totalSlots = window.gameConfig.grid.rows * window.gameConfig.grid.cols;\n                const emptySlots = [];\n                \n                // Find empty slots\n                for (let i = 0; i < totalSlots; i++) {\n                    const hasWeapon = window.gameConfig.grid.weapons.some(w => w && w.slotIndex === i);\n                    if (!hasWeapon) {\n                        emptySlots.push(i);\n                    }\n                }\n\n                if (emptySlots.length === 0) return;\n\n                // Lucky Forge: chance to spawn higher tier\n                const luckyChance = window.gameConfig.progress.luckyForgeChance + getTeamBonus('lucky');\n                if (tier === 1 && Math.random() < luckyChance) {\n                    tier = Math.min(3, 1 + Math.ceil(Math.random() * 2));\n                }\n\n                // Pick random empty slot\n                const slotIndex = emptySlots[Math.floor(Math.random() * emptySlots.length)];\n                \n                // Pick random weapon type from unlocked\n                const type = window.gameConfig.unlockedWeapons[Math.floor(Math.random() * window.gameConfig.unlockedWeapons.length)];\n                \n                // Create weapon\n                const weapon = {\n                    type: type,\n                    tier: tier,\n                    slotIndex: slotIndex\n                };\n\n                window.gameConfig.grid.weapons.push(weapon);\n                \n                // Render weapon\n                const slot = weaponGrid.children[slotIndex];\n                if (slot) {\n                    const weaponEl = createWeaponElement(weapon, window.gameConfig.grid.weapons.length - 1);\n                    slot.appendChild(weaponEl);\n                    \n                    // Spawn animation\n                    weaponEl.style.transform = 'scale(0)';\n                    setTimeout(() => {\n                        weaponEl.style.transition = 'transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6)';\n                        weaponEl.style.transform = 'scale(1)';\n                    }, 10);\n                    \n                    playSound('spawn_sound');\n                }\n            }\n\n            // Merge weapons\n            function mergeWeapons(weapon1, weapon2) {\n                if (weapon1.type !== weapon2.type || weapon1.tier !== weapon2.tier) {\n                    return false;\n                }\n\n                // Calculate forge points reward\n                const tierMultipliers = [1, 2, 5, 10, 20, 100];\n                let forgePoints = tierMultipliers[weapon1.tier - 1] * window.gameConfig.settings.forgePointsMultiplier * window.gameConfig.progress.prestigeMultiplier;\n                \n                // World Cup team bonuses\n                const fpBonus = getTeamBonus('fp');\n                const mergeBonus = getTeamBonus('merge');\n                forgePoints *= (1 + fpBonus + mergeBonus);\n\n                // Combo chain: merge again quickly for bonus Forge Points\n                registerCombo();\n                forgePoints *= getComboMultiplier();\n                \n                window.gameConfig.progress.forgePoints += forgePoints;\n                window.gameConfig.progress.runForgePoints = (window.gameConfig.progress.runForgePoints || 0) + forgePoints;\n                window.gameConfig.progress.totalForgePointsEarned = (window.gameConfig.progress.totalForgePointsEarned || 0) + forgePoints;\n                window.gameConfig.progress.totalMerges += 1;\n\n                // Create new weapon at higher tier\n                const newTier = Math.min(6, weapon1.tier + 1);\n                weapon1.tier = newTier;\n\n                // Check rarity achievements\n                if (newTier === 5 && weapon1.tier < 5) {\n                    window.gameConfig.progress.collectedLegendaries += 1;\n                    playSound('tier_up_sound');\n                } else if (newTier === 6) {\n                    window.gameConfig.progress.collectedMythics += 1;\n                    playSound('mythic_merge_sound');\n                    createParticles(window.innerWidth/2, window.innerHeight/2, '#00f2ff');\n                } else {\n                    playSound('merge_sound');\n                }\n\n                // Remove second weapon\n                const index2 = window.gameConfig.grid.weapons.indexOf(weapon2);\n                if (index2 !== -1) {\n                    window.gameConfig.grid.weapons[index2] = null;\n                }\n\n                return true;\n            }\n\n            // Particle system\n            function createParticles(x, y, color) {\n                if (!window.gameConfig.settings.particlesEnabled) return;\n                \n                const particleCount = 20;\n                for (let i = 0; i < particleCount; i++) {\n                    const angle = (Math.PI * 2 * i) / particleCount;\n                    const speed = 2 + Math.random() * 3;\n                    state.particles.push({\n                        x: x,\n                        y: y,\n                        vx: Math.cos(angle) * speed,\n                        vy: Math.sin(angle) * speed,\n                        life: 1,\n                        color: color\n                    });\n                }\n            }\n\n            function updateParticles(deltaTime) {\n                particleCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);\n                \n                for (let i = state.particles.length - 1; i >= 0; i--) {\n                    const p = state.particles[i];\n                    p.x += p.vx * deltaTime * 60;\n                    p.y += p.vy * deltaTime * 60;\n                    p.life -= deltaTime * 2;\n\n                    if (p.life <= 0) {\n                        state.particles.splice(i, 1);\n                        continue;\n                    }\n\n                    particleCtx.globalAlpha = p.life;\n                    particleCtx.fillStyle = p.color;\n                    particleCtx.beginPath();\n                    particleCtx.arc(p.x, p.y, 3, 0, Math.PI * 2);\n                    particleCtx.fill();\n                }\n                particleCtx.globalAlpha = 1;\n            }\n\n            // Drag and drop handling (merging strictly requires dragging to a different slot)\n            function handleDragStart(e) {\n                if (mode === 'edit') return;\n\n                const weaponEl = e.target.closest('.weapon');\n                if (!weaponEl) return;\n\n                const weaponIndex = parseInt(weaponEl.dataset.index);\n                const weapon = window.gameConfig.grid.weapons[weaponIndex];\n                if (!weapon) return;\n\n                const rect = weaponEl.getBoundingClientRect();\n                const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;\n                const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;\n\n                state.dragging = {\n                    weapon: weapon,\n                    weaponIndex: weaponIndex,\n                    element: weaponEl,\n                    startSlot: weapon.slotIndex,\n                    startX: clientX,\n                    startY: clientY,\n                    hasMoved: false\n                };\n\n                state.dragOffset = {\n                    x: clientX - rect.left - rect.width / 2,\n                    y: clientY - rect.top - rect.height / 2\n                };\n\n                weaponEl.classList.add('dragging');\n                weaponEl.style.position = 'fixed';\n                weaponEl.style.zIndex = '1000';\n                updateDragPosition(clientX, clientY);\n\n                e.preventDefault();\n            }\n\n            function updateDragPosition(clientX, clientY) {\n                if (!state.dragging) return;\n\n                state.dragging.element.style.left = (clientX - state.dragOffset.x - 80) + 'px';\n                state.dragging.element.style.top = (clientY - state.dragOffset.y - 80) + 'px';\n\n                // Highlight valid merge targets\n                const slots = weaponGrid.querySelectorAll('.grid-slot');\n                slots.forEach(slot => slot.classList.remove('highlight'));\n\n                if (!state.dragging.hasMoved) return;\n\n                const targetSlot = getSlotAtPosition(clientX, clientY);\n                if (targetSlot) {\n                    const slotIndex = parseInt(targetSlot.dataset.index);\n                    if (slotIndex !== state.dragging.startSlot) {\n                        const targetWeapon = window.gameConfig.grid.weapons.find(w => w && w.slotIndex === slotIndex);\n                        \n                        if (targetWeapon && targetWeapon !== state.dragging.weapon) {\n                            if (targetWeapon.type === state.dragging.weapon.type && \n                                targetWeapon.tier === state.dragging.weapon.tier &&\n                                targetWeapon.tier < 6) {\n                                targetSlot.classList.add('highlight');\n                            }\n                        } else if (!targetWeapon) {\n                            targetSlot.classList.add('highlight');\n                        }\n                    }\n                }\n            }\n\n            function getSlotAtPosition(x, y) {\n                const slots = weaponGrid.querySelectorAll('.grid-slot');\n                for (const slot of slots) {\n                    const rect = slot.getBoundingClientRect();\n                    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {\n                        return slot;\n                    }\n                }\n                return null;\n            }\n\n            function handleDragMove(e) {\n                if (!state.dragging) return;\n\n                const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;\n                const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;\n\n                const dx = clientX - state.dragging.startX;\n                const dy = clientY - state.dragging.startY;\n                if (Math.hypot(dx, dy) > 12) {\n                    state.dragging.hasMoved = true;\n                }\n\n                updateDragPosition(clientX, clientY);\n                e.preventDefault();\n            }\n\n            function handleDragEnd(e) {\n                if (!state.dragging) return;\n\n                const clientX = e.type.includes('touch') ? (e.changedTouches ? e.changedTouches[0].clientX : (e.touches && e.touches[0] ? e.touches[0].clientX : 0)) : e.clientX;\n                const clientY = e.type.includes('touch') ? (e.changedTouches ? e.changedTouches[0].clientY : (e.touches && e.touches[0] ? e.touches[0].clientY : 0)) : e.clientY;\n\n                const draggedWeapon = state.dragging.weapon;\n                const draggedElement = state.dragging.element;\n                const startSlot = state.dragging.startSlot;\n                const hasMoved = state.dragging.hasMoved;\n\n                // Clear highlights\n                const slots = weaponGrid.querySelectorAll('.grid-slot');\n                slots.forEach(slot => slot.classList.remove('highlight'));\n\n                // Clean up dragging styles\n                if (draggedElement && draggedElement.parentElement) {\n                    draggedElement.classList.remove('dragging');\n                    draggedElement.style.position = '';\n                    draggedElement.style.zIndex = '';\n                    draggedElement.style.left = '';\n                    draggedElement.style.top = '';\n                }\n\n                state.dragging = null;\n\n                // Merging / moving ONLY triggers if the weapon was intentionally dragged to a DIFFERENT slot\n                if (hasMoved) {\n                    const targetSlot = getSlotAtPosition(clientX, clientY);\n                    if (targetSlot) {\n                        const targetIndex = parseInt(targetSlot.dataset.index);\n                        if (targetIndex !== startSlot) {\n                            const targetWeapon = window.gameConfig.grid.weapons.find(w => w && w.slotIndex === targetIndex);\n\n                            if (targetWeapon && targetWeapon !== draggedWeapon) {\n                                // Try to merge\n                                if (mergeWeapons(draggedWeapon, targetWeapon)) {\n                                    window.gameConfig.grid.weapons = window.gameConfig.grid.weapons.filter(w => w !== null);\n                                    const rect = targetSlot.getBoundingClientRect();\n                                    const centerX = rect.left + rect.width / 2;\n                                    const centerY = rect.top + rect.height / 2;\n                                    \n                                    const tierColors = ['#cd7f32', '#c0c0c0', '#ffd700', '#e5e4e2', '#9d4edd', '#00f2ff'];\n                                    createParticles(centerX, centerY, tierColors[draggedWeapon.tier - 1] || '#ffd700');\n                                    \n                                    renderGrid();\n                                    updateHUD();\n                                }\n                            } else if (!targetWeapon) {\n                                // Move to empty slot\n                                draggedWeapon.slotIndex = targetIndex;\n                                renderGrid();\n                            }\n                        }\n                    }\n                }\n\n                renderGrid();\n            }\n\n            // Event listeners for drag and drop\n            gameWorld.addEventListener('mousedown', handleDragStart);\n            gameWorld.addEventListener('touchstart', handleDragStart, { passive: false });\n            gameWorld.addEventListener('mousemove', handleDragMove);\n            gameWorld.addEventListener('touchmove', handleDragMove, { passive: false });\n            gameWorld.addEventListener('mouseup', handleDragEnd);\n            gameWorld.addEventListener('touchend', handleDragEnd);\n\n            // --- Challenge Mode (Infinite Waves) ---\n            const challengeMenu = document.getElementById('challenge-menu');\n            const enemyImg = document.getElementById('enemy-img');\n            const currentWaveEl = document.getElementById('current-wave');\n            const waveProgressFill = document.getElementById('wave-progress-fill');\n            const totalDpsEl = document.getElementById('total-dps');\n            const waveRewardEl = document.getElementById('wave-reward');\n            const damageNumbers = document.getElementById('damage-numbers');\n\n            function getWeaponDPS(weapon) {\n                if (!weapon) return 0;\n                // DPS based on tier: T1=1, T2=3, T3=10, T4=30, T5=100, T6=500\n                const tierDps = [1, 3, 10, 30, 100, 500];\n                return tierDps[weapon.tier - 1] || 1;\n            }\n\n            function getTotalDPS() {\n                let dps = window.gameConfig.grid.weapons.reduce((sum, w) => sum + getWeaponDPS(w), 0);\n                \n                // Mythic Spear Bonus: +50% total DPS per Mythic Spear\n                const mythicSpears = getMythicCount('spear');\n                dps *= (1 + mythicSpears * 0.5);\n                \n                // World Cup DPS bonus\n                const dpsBonus = getTeamBonus('dps');\n                if (dpsBonus > 0) {\n                    dps *= (1 + dpsBonus);\n                }\n                \n                return dps;\n            }\n\n            function updateChallengeMode(deltaTime) {\n                if (!challengeMenu.classList.contains('visible')) return;\n\n                const dps = getTotalDPS();\n                totalDpsEl.textContent = Math.floor(dps);\n                \n                const damage = dps * deltaTime;\n                window.gameConfig.challenge.enemyHealth -= damage;\n\n                // Update health bar\n                const healthPercent = (window.gameConfig.challenge.enemyHealth / window.gameConfig.challenge.maxEnemyHealth) * 100;\n                waveProgressFill.style.width = `${Math.max(0, healthPercent)}%`;\n\n                // Enemy defeated\n                if (window.gameConfig.challenge.enemyHealth <= 0) {\n                    completeWave();\n                }\n\n                // Visual hit effect\n                if (Math.random() < 0.1) {\n                    spawnDamageNumber(Math.floor(dps));\n                    enemyImg.parentElement.style.transform = `translateX(-50%) scale(${1.05 + Math.random() * 0.1})`;\n                    setTimeout(() => {\n                        enemyImg.parentElement.style.transform = `translateX(-50%) scale(1)`;\n                    }, 50);\n                }\n            }\n\n            function completeWave() {\n                const reward = window.gameConfig.challenge.currentWave * 50;\n                window.gameConfig.progress.forgePoints += reward;\n                waveRewardEl.textContent = `+${reward} FP`;\n                \n                // Crate Drop Milestone\n                if (window.gameConfig.challenge.currentWave % 5 === 0) {\n                    const crateTier = Math.min(4, Math.floor(window.gameConfig.challenge.currentWave / 10) + 1);\n                    spawnWeapon(crateTier);\n                    spawnDamageNumber(\"CRATE DROP!\");\n                }\n\n                window.gameConfig.challenge.currentWave++;\n                window.gameConfig.challenge.maxEnemyHealth = 100 * Math.pow(1.2, window.gameConfig.challenge.currentWave - 1);\n                window.gameConfig.challenge.enemyHealth = window.gameConfig.challenge.maxEnemyHealth;\n                \n                currentWaveEl.textContent = window.gameConfig.challenge.currentWave;\n                if (window.gameConfig.challenge.currentWave > window.gameConfig.progress.highestWave) {\n                    window.gameConfig.progress.highestWave = window.gameConfig.challenge.currentWave;\n                }\n\n                createParticles(window.innerWidth / 2, window.innerHeight / 2, '#00f2ff');\n                playSound('upgrade_sound');\n            }\n\n            function spawnDamageNumber(num) {\n                const el = document.createElement('div');\n                el.textContent = `-${num}`;\n                el.style.position = 'absolute';\n                el.style.left = `${40 + Math.random() * 20}%`;\n                el.style.top = `${40 + Math.random() * 20}%`;\n                el.style.color = '#ff4444';\n                el.style.fontSize = '24px';\n                el.style.fontWeight = 'bold';\n                el.style.pointerEvents = 'none';\n                el.style.animation = 'fadeOutUp 0.5s forwards';\n                damageNumbers.appendChild(el);\n                setTimeout(() => el.remove(), 500);\n            }\n\n            // --- Fusion Lab Logic ---\n            const fusionMenu = document.getElementById('fusion-menu');\n            const startFusionBtn = document.getElementById('start-fusion');\n            const fusionResult = document.getElementById('fusion-result');\n            const fusionSlots = [\n                document.getElementById('fuse-slot-0'),\n                document.getElementById('fuse-slot-1'),\n                document.getElementById('fuse-slot-2')\n            ];\n\n            function updateFusionSlots() {\n                fusionSlots.forEach((slot, i) => {\n                    slot.innerHTML = '';\n                    const weapon = window.gameConfig.fusionLab.slots[i];\n                    if (weapon) {\n                        const weaponEl = createWeaponElement(weapon, -1);\n                        slot.appendChild(weaponEl);\n                        weaponEl.onclick = () => {\n                            window.gameConfig.fusionLab.slots[i] = null;\n                            updateFusionSlots();\n                        };\n                    }\n                });\n            }\n\n            function handleFusion() {\n                const slots = window.gameConfig.fusionLab.slots;\n                if (slots.some(s => s === null)) {\n                    fusionResult.textContent = \"Need 3 weapons to fuse!\";\n                    return;\n                }\n\n                if (slots[0].type !== slots[1].type || slots[0].type !== slots[2].type ||\n                    slots[0].tier !== slots[1].tier || slots[0].tier !== slots[2].tier) {\n                    fusionResult.textContent = \"Weapons must be identical!\";\n                    return;\n                }\n\n                const baseTier = slots[0].tier;\n                if (baseTier >= 6) {\n                    fusionResult.textContent = \"Already at Max Tier!\";\n                    return;\n                }\n\n                // Chance to crit fuse into Mythic (Tier 6) if merging Tier 5s\n                let resultTier = baseTier + 1;\n                let isMythic = resultTier === 6;\n\n                // Perform fusion\n                const newWeapon = {\n                    type: slots[0].type,\n                    tier: resultTier,\n                    slotIndex: -1 // Will find a home on grid\n                };\n\n                // Clear slots\n                window.gameConfig.fusionLab.slots = [null, null, null];\n                updateFusionSlots();\n\n                // Find space on grid\n                const emptyIdx = findEmptyGridSlot();\n                if (emptyIdx !== -1) {\n                    newWeapon.slotIndex = emptyIdx;\n                    window.gameConfig.grid.weapons.push(newWeapon);\n                    renderGrid();\n                } else {\n                    fusionResult.textContent = \"No space on grid for result!\";\n                }\n\n                if (isMythic) {\n                    playSound('mythic_merge_sound');\n                    fusionResult.textContent = \"MYTHIC FUSION SUCCESSFUL!\";\n                } else {\n                    playSound('tier_up_sound');\n                    fusionResult.textContent = \"Fusion Successful!\";\n                }\n                \n                createParticles(window.innerWidth/2, window.innerHeight/2, isMythic ? '#00f2ff' : '#ffd700');\n            }\n\n            function findEmptyGridSlot() {\n                const totalSlots = window.gameConfig.grid.rows * window.gameConfig.grid.cols;\n                for (let i = 0; i < totalSlots; i++) {\n                    if (!window.gameConfig.grid.weapons.some(w => w && w.slotIndex === i)) return i;\n                }\n                return -1;\n            }\n\n            // Event Listeners for new menus\n            document.getElementById('fusion-button').onclick = () => {\n                fusionMenu.classList.add('visible');\n                updateFusionSlots();\n                fusionResult.textContent = \"\";\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('close-fusion-menu').onclick = () => {\n                fusionMenu.classList.remove('visible');\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('challenge-button').onclick = () => {\n                challengeMenu.classList.add('visible');\n                currentWaveEl.textContent = window.gameConfig.challenge.currentWave;\n                const asset = lib.getAsset('enemy_orc');\n                if (asset) enemyImg.src = asset.url;\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('close-challenge-menu').onclick = () => {\n                challengeMenu.classList.remove('visible');\n                playSound('button_click_sound');\n            };\n\n            startFusionBtn.onclick = handleFusion;\n\n            // Update Drag and Drop for Fusion slots\n            // This is complex, maybe just let user click weapons on grid to add to fusion lab?\n            // Let's add a \"Send to Fusion\" mode or just handle it in handleDragEnd.\n            \n            function addToFusion(weapon) {\n                const emptyIdx = window.gameConfig.fusionLab.slots.findIndex(s => s === null);\n                if (emptyIdx !== -1) {\n                    window.gameConfig.fusionLab.slots[emptyIdx] = { ...weapon };\n                    // Remove from grid\n                    const gridIdx = window.gameConfig.grid.weapons.indexOf(weapon);\n                    if (gridIdx !== -1) window.gameConfig.grid.weapons.splice(gridIdx, 1);\n                    return true;\n                }\n                return false;\n            }\n\n            // Upgrade system\n            const upgradeDefinitions = [\n                {\n                    id: 'spawnRate',\n                    name: 'Faster Spawning',\n                    maxLevel: 5,\n                    getDescription: (level) => {\n                        const currentRate = getSpawnRate();\n                        const nextRates = [4, 3, 2.5, 2];\n                        const nextRate = nextRates[level] || currentRate;\n                        return `Reduce spawn time\\nCurrent: ${currentRate}s \u2192 Next: ${nextRate}s`;\n                    },\n                    getCost: (level) => {\n                        const costs = [50, 150, 400, 1000, 2500];\n                        return Math.floor(costs[level] * window.gameConfig.settings.forgePointsMultiplier);\n                    },\n                    onPurchase: () => {\n                        window.gameConfig.upgrades.spawnRate += 1;\n                    }\n                },\n                {\n                    id: 'gridExpansion',\n                    name: 'Grid Expansion',\n                    maxLevel: 1,\n                    getDescription: (level) => {\n                        return level === 0 ? 'Expand grid to 4\u00d74\\n(+4 weapon slots)' : 'Grid expanded to 4\u00d74';\n                    },\n                    getCost: (level) => {\n                        return Math.floor(300 * window.gameConfig.settings.forgePointsMultiplier);\n                    },\n                    onPurchase: () => {\n                        window.gameConfig.upgrades.gridExpansion += 1;\n                        updateGridSize();\n                        renderGrid();\n                    }\n                }\n            ];\n\n            function renderUpgradeMenu() {\n                upgradeList.innerHTML = '';\n\n                upgradeDefinitions.forEach(upgrade => {\n                    const currentLevel = window.gameConfig.upgrades[upgrade.id] || 0;\n                    const isMaxed = currentLevel >= upgrade.maxLevel;\n\n                    const item = document.createElement('div');\n                    item.className = 'upgrade-item' + (isMaxed ? ' maxed' : '');\n\n                    const header = document.createElement('div');\n                    header.className = 'upgrade-item-header';\n\n                    const name = document.createElement('div');\n                    name.className = 'upgrade-item-name';\n                    name.textContent = upgrade.name;\n\n                    const level = document.createElement('div');\n                    level.className = 'upgrade-item-level';\n                    level.textContent = `Level ${currentLevel}/${upgrade.maxLevel}`;\n\n                    header.appendChild(name);\n                    header.appendChild(level);\n\n                    const description = document.createElement('div');\n                    description.className = 'upgrade-item-description';\n                    description.textContent = upgrade.getDescription(currentLevel);\n\n                    const footer = document.createElement('div');\n                    footer.className = 'upgrade-item-footer';\n\n                    if (!isMaxed) {\n                        const cost = document.createElement('div');\n                        cost.className = 'upgrade-cost';\n                        cost.textContent = `${upgrade.getCost(currentLevel)} FP`;\n\n                        const buyButton = document.createElement('button');\n                        buyButton.className = 'upgrade-buy-button';\n                        buyButton.textContent = 'Upgrade';\n                        buyButton.disabled = window.gameConfig.progress.forgePoints < upgrade.getCost(currentLevel);\n\n                        buyButton.onclick = () => {\n                            const cost = upgrade.getCost(currentLevel);\n                            if (window.gameConfig.progress.forgePoints >= cost) {\n                                window.gameConfig.progress.forgePoints -= cost;\n                                upgrade.onPurchase();\n                                playSound('upgrade_sound');\n                                updateHUD();\n                                renderUpgradeMenu();\n                            }\n                        };\n\n                        footer.appendChild(cost);\n                        footer.appendChild(buyButton);\n                    } else {\n                        const maxButton = document.createElement('button');\n                        maxButton.className = 'upgrade-buy-button maxed';\n                        maxButton.textContent = 'MAX';\n                        maxButton.disabled = true;\n                        footer.appendChild(maxButton);\n                    }\n\n                    item.appendChild(header);\n                    item.appendChild(description);\n                    item.appendChild(footer);\n                    upgradeList.appendChild(item);\n                });\n            }\n\n            // Upgrade menu controls\n            upgradeButton.onclick = () => {\n                upgradeMenu.classList.add('visible');\n                renderUpgradeMenu();\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('close-upgrade-menu').onclick = () => {\n                upgradeMenu.classList.remove('visible');\n                playSound('button_click_sound');\n            };\n\n            upgradeMenu.onclick = (e) => {\n                if (e.target === upgradeMenu) {\n                    upgradeMenu.classList.remove('visible');\n                    playSound('button_click_sound');\n                }\n            };\n\n            document.getElementById('sort-button').onclick = () => {\n                const weapons = window.gameConfig.grid.weapons.filter(w => w !== null);\n                weapons.sort((a, b) => {\n                    if (a.tier !== b.tier) return b.tier - a.tier;\n                    return a.type.localeCompare(b.type);\n                });\n                \n                // Clear grid and re-assign slots\n                window.gameConfig.grid.weapons = [];\n                weapons.forEach((w, i) => {\n                    w.slotIndex = i;\n                    window.gameConfig.grid.weapons.push(w);\n                });\n                renderGrid();\n                playSound('button_click_sound');\n            };\n\n            // Info and settings (placeholder)\n            document.getElementById('settings-button').onclick = () => {\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('info-button').onclick = () => {\n                playSound('button_click_sound');\n                if (mode === 'play') startTutorial();\n            };\n\n            // --- Prestige System ---\n            const prestigeMenu = document.getElementById('prestige-menu');\n            const prestigeLevelEl = document.getElementById('prestige-level');\n            const prestigeBonusEl = document.getElementById('prestige-bonus');\n            const prestigeNextEl = document.getElementById('prestige-next-reward');\n            const prestigeReqEl = document.getElementById('prestige-requirement');\n\n            function getPrestigeRequirement(level) {\n                return Math.floor(1000 * Math.pow(3, level));\n            }\n\n            function updatePrestigeUI() {\n                const level = window.gameConfig.progress.prestigeLevel;\n                const mult = window.gameConfig.progress.prestigeMultiplier;\n                prestigeLevelEl.textContent = level;\n                prestigeBonusEl.textContent = `\u00d7${mult.toFixed(1)}`;\n                prestigeNextEl.textContent = `+\u00d70.5 multiplier`;\n                prestigeReqEl.textContent = `Requires ${getPrestigeRequirement(level)} FP earned this run`;\n            }\n\n            document.getElementById('prestige-button').onclick = () => {\n                prestigeMenu.classList.add('visible');\n                updatePrestigeUI();\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('close-prestige-menu').onclick = () => {\n                prestigeMenu.classList.remove('visible');\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('do-prestige').onclick = () => {\n                const level = window.gameConfig.progress.prestigeLevel;\n                const req = getPrestigeRequirement(level);\n                if (window.gameConfig.progress.runForgePoints < req) {\n                    return;\n                }\n\n                // Perform rebirth\n                window.gameConfig.progress.prestigeLevel += 1;\n                window.gameConfig.progress.prestigeMultiplier += 0.5;\n                window.gameConfig.progress.luckyForgeChance = Math.min(0.4, 0.05 + window.gameConfig.progress.prestigeLevel * 0.03);\n                \n                // Reset run progress\n                window.gameConfig.progress.forgePoints = 0;\n                window.gameConfig.progress.runForgePoints = 0;\n                window.gameConfig.upgrades.spawnRate = 0;\n                window.gameConfig.upgrades.gridExpansion = 0;\n                window.gameConfig.grid.weapons = [];\n                window.gameConfig.grid.rows = 3;\n                window.gameConfig.grid.cols = 4;\n                \n                updateGridSize();\n                renderGrid();\n                updateHUD();\n                updatePrestigeUI();\n                \n                playSound('mythic_merge_sound');\n                createParticles(window.innerWidth/2, window.innerHeight/2, '#ffd700');\n                prestigeMenu.classList.remove('visible');\n            };\n\n            // --- Stats Panel ---\n            const statsMenu = document.getElementById('stats-menu');\n            const statsList = document.getElementById('stats-list');\n\n            function renderStats() {\n                const stats = [\n                    { label: 'Total Merges', value: window.gameConfig.progress.totalMerges },\n                    { label: 'Legendaries Collected', value: window.gameConfig.progress.collectedLegendaries },\n                    { label: 'Mythics Collected', value: window.gameConfig.progress.collectedMythics },\n                    { label: 'Highest Wave', value: window.gameConfig.progress.highestWave },\n                    { label: 'Rebirth Level', value: window.gameConfig.progress.prestigeLevel },\n                    { label: 'Prestige Multiplier', value: `\u00d7${window.gameConfig.progress.prestigeMultiplier.toFixed(1)}` },\n                    { label: 'Lucky Forge Chance', value: `${Math.floor(window.gameConfig.progress.luckyForgeChance * 100)}%` },\n                    { label: 'Total DPS', value: Math.floor(getTotalDPS()) },\n                    { label: 'Weapons on Grid', value: window.gameConfig.grid.weapons.filter(w => w).length },\n                    { label: 'Daily Streak', value: window.gameConfig.progress.streak || 0 },\n                    { label: '\ud83d\udd25 Best Merge Combo', value: `${window.gameConfig.progress.bestCombo || 0}x` },\n                    { label: '\ud83d\udccb Quests Claimed', value: window.gameConfig.quests?.claimedTotal || 0 },\n                    { label: '\u26bd WC Goals', value: window.gameConfig.worldCup?.goals || 0 },\n                    { label: '\u2b50 WC Stars', value: window.gameConfig.worldCup?.stars || 0 },\n                    { label: '\ud83c\udfc6 WC Team', value: window.gameConfig.worldCup?.selectedTeam ? window.gameConfig.worldCup.selectedTeam.toUpperCase() : 'None' },\n                ];\n                statsList.innerHTML = stats.map(s => `\n                    <div style=\"display: flex; justify-content: space-between; background: rgba(0,0,0,0.3); padding: 12px 16px; border-radius: 10px;\">\n                        <span style=\"color: #aaa; font-size: 16px;\">${s.label}</span>\n                        <span style=\"color: var(--gold); font-size: 18px; font-weight: 700;\">${s.value}</span>\n                    </div>\n                `).join('');\n            }\n\n            document.getElementById('stats-button').onclick = () => {\n                statsMenu.classList.add('visible');\n                renderStats();\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('close-stats-menu').onclick = () => {\n                statsMenu.classList.remove('visible');\n                playSound('button_click_sound');\n            };\n\n            // --- World Cup 2026 Event ---\n            const worldcupMenu = document.getElementById('worldcup-menu');\n            \n            // Initialize World Cup state\n            window.gameConfig.worldCup = window.gameConfig.worldCup || {\n                selectedTeam: null,\n                goals: 0,\n                stars: 0,\n                bestStreak: 0,\n                currentStreak: 0,\n                unlockedWeapons: [],\n                goalkeeperSpeed: 1\n            };\n\n            const wcState = {\n                goalkeeperPos: 50,\n                goalkeeperDir: 1,\n                ballKicked: false,\n                autoGoalTimer: 0\n            };\n\n            // World Cup weapon definitions\n            const wcWeapons = [\n                { id: 'worldcup_boot', name: 'Golden Boot', starCost: 10, tier: 4 },\n                { id: 'worldcup_ball', name: 'Magic Ball', starCost: 25, tier: 5 },\n                { id: 'worldcup_whistle', name: 'Sonic Whistle', starCost: 50, tier: 5 },\n                { id: 'worldcup_trophy', name: 'WC Trophy', starCost: 100, tier: 6 }\n            ];\n\n            // Team bonuses\n            const teamBonuses = {\n                usa: { fpBonus: 0.2, desc: '+20% Forge Points' },\n                brazil: { spawnBonus: 0.15, desc: '+15% Spawn Speed' },\n                argentina: { mergeBonus: 0.25, desc: '+25% Merge Rewards' },\n                germany: { allBonus: 0.1, desc: '+10% All Stats' },\n                france: { goalMultiplier: 2, desc: '2x Goal Stars' },\n                mexico: { luckyBonus: 0.3, desc: '+30% Lucky Forge' },\n                japan: { autoGoal: true, desc: 'Auto-Goal every 10s' },\n                spain: { dpsBonus: 0.2, desc: '+20% DPS' },\n                england: { critBonus: 0.15, desc: '+15% Crit Fuse' }\n            };\n\n            // Open World Cup menu\n            document.getElementById('worldcup-button').onclick = () => {\n                worldcupMenu.classList.add('visible');\n                updateWCUI();\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('close-worldcup-menu').onclick = () => {\n                worldcupMenu.classList.remove('visible');\n                playSound('button_click_sound');\n            };\n\n            // Tab switching\n            document.querySelectorAll('.wc-tab').forEach(tab => {\n                tab.onclick = () => {\n                    document.querySelectorAll('.wc-tab').forEach(t => t.classList.remove('active'));\n                    tab.classList.add('active');\n                    const tabName = tab.dataset.tab;\n                    document.getElementById('wc-panel-teams').style.display = tabName === 'teams' ? 'block' : 'none';\n                    document.getElementById('wc-panel-rush').style.display = tabName === 'rush' ? 'block' : 'none';\n                    document.getElementById('wc-panel-rewards').style.display = tabName === 'rewards' ? 'block' : 'none';\n                    playSound('button_click_sound');\n                };\n            });\n\n            // Country selection\n            document.querySelectorAll('.country-card').forEach(card => {\n                card.onclick = () => {\n                    const country = card.dataset.country;\n                    window.gameConfig.worldCup.selectedTeam = country;\n                    document.querySelectorAll('.country-card').forEach(c => c.classList.remove('selected'));\n                    card.classList.add('selected');\n                    const bonus = teamBonuses[country];\n                    document.getElementById('team-status').textContent = `\u2705 Team selected! Bonus: ${bonus.desc}`;\n                    playSound('upgrade_sound');\n                    createParticles(window.innerWidth/2, window.innerHeight/2, '#4ade80');\n                };\n            });\n\n            // Restore selected team on load\n            if (window.gameConfig.worldCup.selectedTeam) {\n                const selectedCard = document.querySelector(`.country-card[data-country=\"${window.gameConfig.worldCup.selectedTeam}\"]`);\n                if (selectedCard) selectedCard.classList.add('selected');\n            }\n\n            // Goal Rush mechanics\n            const goalBall = document.getElementById('goal-ball');\n            const goalkeeper = document.getElementById('goalkeeper');\n            const goalResult = document.getElementById('goal-result');\n\n            function moveGoalkeeper() {\n                if (!worldcupMenu.classList.contains('visible')) return;\n                const rushPanel = document.getElementById('wc-panel-rush');\n                if (rushPanel.style.display === 'none') return;\n                \n                wcState.goalkeeperPos += wcState.goalkeeperDir * (1.5 + window.gameConfig.worldCup.goalkeeperSpeed * 0.5);\n                if (wcState.goalkeeperPos > 80) wcState.goalkeeperDir = -1;\n                if (wcState.goalkeeperPos < 20) wcState.goalkeeperDir = 1;\n                goalkeeper.style.left = wcState.goalkeeperPos + '%';\n                \n                requestAnimationFrame(moveGoalkeeper);\n            }\n\n            function shootBall() {\n                if (wcState.ballKicked) return;\n                wcState.ballKicked = true;\n                goalBall.classList.add('kicked');\n\n                // Determine if goal\n                const gkPos = wcState.goalkeeperPos;\n                const ballTarget = 50; // Ball always shoots center\n                const distance = Math.abs(gkPos - ballTarget);\n                const isGoal = distance > 15; // If goalkeeper is far enough away, it's a goal\n\n                setTimeout(() => {\n                    if (isGoal) {\n                        const goalMult = getTeamBonus('goalMult') || 1;\n                        const starsEarned = Math.ceil(goalMult);\n                        window.gameConfig.worldCup.goals++;\n                        window.gameConfig.worldCup.stars += starsEarned;\n                        window.gameConfig.worldCup.currentStreak++;\n                        if (window.gameConfig.worldCup.currentStreak > window.gameConfig.worldCup.bestStreak) {\n                            window.gameConfig.worldCup.bestStreak = window.gameConfig.worldCup.currentStreak;\n                        }\n                        goalResult.textContent = `\u26bd GOAL! +${starsEarned} \u2b50`;\n                        goalResult.style.color = '#4ade80';\n                        \n                        // Bonus FP for scoring\n                        const fpReward = 10 + (window.gameConfig.worldCup.currentStreak * 5);\n                        window.gameConfig.progress.forgePoints += fpReward;\n                        \n                        playSound('upgrade_sound');\n                        createParticles(window.innerWidth/2, window.innerHeight/3, '#4ade80');\n                        \n                        // Increase goalkeeper difficulty\n                        window.gameConfig.worldCup.goalkeeperSpeed = Math.min(5, window.gameConfig.worldCup.goalkeeperSpeed + 0.1);\n                    } else {\n                        window.gameConfig.worldCup.currentStreak = 0;\n                        goalResult.textContent = '\ud83e\udde4 SAVED! Try again!';\n                        goalResult.style.color = '#ff4444';\n                        window.gameConfig.worldCup.goalkeeperSpeed = Math.max(1, window.gameConfig.worldCup.goalkeeperSpeed - 0.2);\n                    }\n\n                    updateWCUI();\n\n                    // Reset ball\n                    setTimeout(() => {\n                        goalBall.classList.remove('kicked');\n                        wcState.ballKicked = false;\n                    }, 400);\n                }, 600);\n            }\n\n            goalBall.onclick = shootBall;\n            goalBall.ontouchstart = (e) => { e.preventDefault(); shootBall(); };\n\n            // Start goalkeeper movement\n            moveGoalkeeper();\n\n            // Auto-goal (Japan team bonus)\n            function updateWorldCupAutoGoal(deltaTime) {\n                if (getTeamBonus('autoGoal') && worldcupMenu.classList.contains('visible')) {\n                    wcState.autoGoalTimer += deltaTime;\n                    if (wcState.autoGoalTimer >= 10) {\n                        wcState.autoGoalTimer = 0;\n                        window.gameConfig.worldCup.goals++;\n                        window.gameConfig.worldCup.stars++;\n                        updateWCUI();\n                    }\n                }\n            }\n\n            // Claim rewards\n            document.getElementById('wc-claim-reward').onclick = () => {\n                const stars = window.gameConfig.worldCup.stars;\n                const unlocked = window.gameConfig.worldCup.unlockedWeapons;\n                const rewardResult = document.getElementById('wc-reward-result');\n                \n                // Find next unclaimed weapon\n                const nextWeapon = wcWeapons.find(w => !unlocked.includes(w.id) && stars >= w.starCost);\n                \n                if (!nextWeapon) {\n                    if (wcWeapons.every(w => unlocked.includes(w.id))) {\n                        rewardResult.textContent = 'All World Cup weapons unlocked! \ud83c\udfc6';\n                    } else {\n                        const nextRequired = wcWeapons.find(w => !unlocked.includes(w.id));\n                        rewardResult.textContent = `Need ${nextRequired.starCost} \u2b50 (you have ${stars})`;\n                    }\n                    return;\n                }\n\n                // Unlock weapon\n                window.gameConfig.worldCup.stars -= nextWeapon.starCost;\n                window.gameConfig.worldCup.unlockedWeapons.push(nextWeapon.id);\n                \n                // Spawn the weapon on grid\n                const emptyIdx = findEmptyGridSlot();\n                if (emptyIdx !== -1) {\n                    const weapon = {\n                        type: nextWeapon.id,\n                        tier: nextWeapon.tier,\n                        slotIndex: emptyIdx\n                    };\n                    window.gameConfig.grid.weapons.push(weapon);\n                    renderGrid();\n                }\n\n                rewardResult.textContent = `\ud83c\udf89 Unlocked ${nextWeapon.name}!`;\n                playSound('mythic_merge_sound');\n                createParticles(window.innerWidth/2, window.innerHeight/2, '#ffd700');\n                updateWCUI();\n            };\n\n            // Update World Cup UI\n            function updateWCUI() {\n                document.getElementById('wc-goals').textContent = window.gameConfig.worldCup.goals;\n                document.getElementById('wc-stars').textContent = window.gameConfig.worldCup.stars;\n                document.getElementById('wc-streak').textContent = window.gameConfig.worldCup.bestStreak;\n\n                // Update weapon cards\n                const bootAsset = lib.getAsset('worldcup_boot');\n                const ballAsset = lib.getAsset('worldcup_ball');\n                const whistleAsset = lib.getAsset('worldcup_whistle');\n                const trophyAsset = lib.getAsset('worldcup_trophy');\n                \n                if (bootAsset) document.getElementById('wc-img-boot').src = bootAsset.url;\n                if (ballAsset) document.getElementById('wc-img-ball').src = ballAsset.url;\n                if (whistleAsset) document.getElementById('wc-img-whistle').src = whistleAsset.url;\n                if (trophyAsset) document.getElementById('wc-img-trophy').src = trophyAsset.url;\n\n                // Update unlock status\n                const unlocked = window.gameConfig.worldCup.unlockedWeapons;\n                wcWeapons.forEach(w => {\n                    const cardId = `wc-card-${w.id.replace('worldcup_', '')}`;\n                    const card = document.getElementById(cardId);\n                    if (card) {\n                        card.className = 'wc-weapon-card ' + (unlocked.includes(w.id) ? 'unlocked' : 'locked');\n                    }\n                });\n            }\n\n            // --- Auto-Merge System ---\n            let autoMergeTimer = 0;\n            function tryAutoMerge() {\n                if (!window.gameConfig.settings.autoMergeEnabled) return;\n                const weapons = window.gameConfig.grid.weapons.filter(w => w);\n                // Find first pair of matching weapons\n                for (let i = 0; i < weapons.length; i++) {\n                    for (let j = i + 1; j < weapons.length; j++) {\n                        if (weapons[i].type === weapons[j].type && weapons[i].tier === weapons[j].tier && weapons[i].tier < 6) {\n                            mergeWeapons(weapons[i], weapons[j]);\n                            const slot = weaponGrid.children[weapons[i].slotIndex];\n                            if (slot) {\n                                const rect = slot.getBoundingClientRect();\n                                createParticles(rect.left + 80, rect.top + 80, '#4ade80');\n                            }\n                            renderGrid();\n                            updateHUD();\n                            return;\n                        }\n                    }\n                }\n            }\n\n            // ============================================================\n            // FORGE QUESTS UPDATE: Quest Board + Merge Combos\n            // ============================================================\n            const questMenu = document.getElementById('quest-menu');\n            const questListEl = document.getElementById('quest-list');\n            const questBadge = document.getElementById('quest-badge');\n            const questResult = document.getElementById('quest-result');\n            const comboDisplay = document.getElementById('combo-display');\n\n            const questTemplates = [\n                { id: 'merge', name: '\u2692\ufe0f Merge Master', label: t => `Merge ${t} weapons`, stat: () => window.gameConfig.progress.totalMerges, targets: [5, 12, 25, 50], rewardPer: 30 },\n                { id: 'fp', name: '\ud83d\udcb0 Forge Tycoon', label: t => `Earn ${t} Forge Points`, stat: () => Math.floor(window.gameConfig.progress.totalForgePointsEarned || 0), targets: [250, 800, 2000], rewardPer: 0.45 },\n                { id: 'legend', name: '\ud83d\udde1\ufe0f Legend Hunter', label: t => `Forge ${t} Legendary weapon(s)`, stat: () => window.gameConfig.progress.collectedLegendaries, targets: [1, 2, 3], rewardPer: 450 },\n                { id: 'wave', name: '\u2694\ufe0f Wave Breaker', label: t => `Clear ${t} more Infinite Waves`, stat: () => window.gameConfig.progress.highestWave, targets: [3, 6, 10], rewardPer: 140 },\n                { id: 'goal', name: '\u26bd Golden Striker', label: t => `Score ${t} World Cup goals`, stat: () => (window.gameConfig.worldCup.goals || 0), targets: [3, 8, 15], rewardPer: 70 },\n                { id: 'combo', name: '\ud83d\udd25 Combo Artist', label: t => `Reach a ${t}x merge combo`, stat: () => (window.gameConfig.progress.bestCombo || 0), targets: [3, 5, 8], rewardPer: 180, absolute: true }\n            ];\n\n            function getQuestTemplate(id) {\n                return questTemplates.find(t => t.id === id) || null;\n            }\n\n            function createQuest(excludeIds) {\n                let pool = questTemplates.filter(t => !excludeIds.includes(t.id));\n                if (pool.length === 0) pool = questTemplates;\n                const tpl = pool[Math.floor(Math.random() * pool.length)];\n                const target = tpl.targets[Math.floor(Math.random() * tpl.targets.length)];\n                return {\n                    tpl: tpl.id,\n                    target: target,\n                    start: tpl.absolute ? 0 : tpl.stat(),\n                    reward: Math.max(60, Math.floor(target * tpl.rewardPer))\n                };\n            }\n\n            function ensureQuests() {\n                const q = window.gameConfig.quests;\n                if (!q.active) q.active = [];\n                let guard = 0;\n                while (q.active.length < 3 && guard++ < 10) {\n                    q.active.push(createQuest(q.active.map(a => a.tpl)));\n                }\n            }\n\n            function getQuestProgress(quest) {\n                const tpl = getQuestTemplate(quest.tpl);\n                if (!tpl) return 0;\n                const raw = tpl.absolute ? tpl.stat() : tpl.stat() - quest.start;\n                return Math.max(0, Math.min(quest.target, raw));\n            }\n\n            function isQuestComplete(quest) {\n                return getQuestProgress(quest) >= quest.target;\n            }\n\n            function renderQuests() {\n                ensureQuests();\n                questListEl.innerHTML = '';\n                window.gameConfig.quests.active.forEach((quest, i) => {\n                    const tpl = getQuestTemplate(quest.tpl);\n                    if (!tpl) return;\n                    const cur = getQuestProgress(quest);\n                    const done = cur >= quest.target;\n                    const pct = Math.floor((cur / quest.target) * 100);\n\n                    const item = document.createElement('div');\n                    item.className = 'quest-item' + (done ? ' complete' : '');\n                    item.innerHTML = `\n                        <div class=\"quest-name\">${tpl.name}</div>\n                        <div class=\"quest-desc\">${tpl.label(quest.target)} \u2014 ${cur}/${quest.target}</div>\n                        <div class=\"quest-bar\"><div class=\"quest-bar-fill\" style=\"width:${pct}%\"></div></div>\n                        <div class=\"quest-footer\">\n                            <div class=\"quest-reward\">+${Math.floor(quest.reward * window.gameConfig.progress.prestigeMultiplier)} FP</div>\n                        </div>`;\n                    const btn = document.createElement('button');\n                    btn.className = 'quest-claim';\n                    btn.textContent = done ? 'Claim' : 'In Progress';\n                    btn.disabled = !done;\n                    btn.onclick = () => claimQuest(i);\n                    item.querySelector('.quest-footer').appendChild(btn);\n                    questListEl.appendChild(item);\n                });\n            }\n\n            function claimQuest(index) {\n                const quest = window.gameConfig.quests.active[index];\n                if (!quest || !isQuestComplete(quest)) return;\n\n                const reward = Math.floor(quest.reward * window.gameConfig.progress.prestigeMultiplier);\n                window.gameConfig.progress.forgePoints += reward;\n                window.gameConfig.progress.runForgePoints = (window.gameConfig.progress.runForgePoints || 0) + reward;\n                window.gameConfig.progress.totalForgePointsEarned = (window.gameConfig.progress.totalForgePointsEarned || 0) + reward;\n                window.gameConfig.quests.claimedTotal = (window.gameConfig.quests.claimedTotal || 0) + 1;\n\n                // Replace with a fresh quest\n                const others = window.gameConfig.quests.active.filter((_, i) => i !== index).map(a => a.tpl);\n                window.gameConfig.quests.active[index] = createQuest(others);\n\n                questResult.textContent = `Quest complete! +${reward} Forge Points`;\n                playSound('upgrade_sound');\n                createParticles(window.innerWidth / 2, window.innerHeight / 2, '#ffd700');\n                renderQuests();\n                updateHUD();\n                updateQuestBadge();\n            }\n\n            function updateQuestBadge() {\n                ensureQuests();\n                const any = window.gameConfig.quests.active.some(isQuestComplete);\n                questBadge.classList.toggle('show', any);\n            }\n\n            document.getElementById('quest-button').onclick = () => {\n                questMenu.classList.add('visible');\n                questResult.textContent = '';\n                renderQuests();\n                playSound('button_click_sound');\n            };\n\n            document.getElementById('close-quest-menu').onclick = () => {\n                questMenu.classList.remove('visible');\n                playSound('button_click_sound');\n            };\n\n            // --- Merge Combo System ---\n            function registerCombo() {\n                const active = (state.comboTimer || 0) > 0;\n                state.comboCount = (active ? (state.comboCount || 0) : 0) + 1;\n                state.comboTimer = 3;\n                window.gameConfig.progress.bestCombo = Math.max(window.gameConfig.progress.bestCombo || 0, state.comboCount);\n                if (state.comboCount > 1) {\n                    comboDisplay.textContent = `\ud83d\udd25 ${state.comboCount}x COMBO \u00d7${getComboMultiplier().toFixed(2)}`;\n                    comboDisplay.classList.add('show');\n                }\n            }\n\n            function getComboMultiplier() {\n                return Math.min(3, 1 + Math.max(0, (state.comboCount || 1) - 1) * 0.25);\n            }\n\n            function updateCombo(deltaTime) {\n                if ((state.comboTimer || 0) > 0) {\n                    state.comboTimer -= deltaTime;\n                    if (state.comboTimer <= 0) {\n                        state.comboTimer = 0;\n                        state.comboCount = 0;\n                        comboDisplay.classList.remove('show');\n                    }\n                }\n            }\n\n            // ============================================================\n            // LIVE TUTORIAL\n            // ============================================================\n            const tutorialHighlight = document.getElementById('tutorial-highlight');\n            const tutorialCard = document.getElementById('tutorial-card');\n            const tutorialTextEl = document.getElementById('tutorial-text');\n            const tutorialStepEl = document.getElementById('tutorial-step');\n            const tutorialNextBtn = document.getElementById('tutorial-next');\n            const tutorialSkipBtn = document.getElementById('tutorial-skip');\n            const tutorialHintEl = document.getElementById('tutorial-hint');\n\n            let tutorialCompleted = false;\n            let savedUserState = null; // Store loaded state for saving back\n            \n            // Called once the player finishes or skips the tutorial\n            async function onTutorialFinished() {\n                try {\n                    // Preserve any other keys already in saved state\n                    const stateToSave = { ...savedUserState, tutorialCompleted: true };\n                    await lib.saveUserGameState(stateToSave);\n                } catch (error) {\n                    lib.log(`Failed to save tutorial completion: ${error.message}`);\n                }\n            }\n            let tutorialActive = false;\n            let tutorialIndex = 0;\n            let tutorialMergeBaseline = 0;\n\n            function seedTutorialPair() {\n                const swords = window.gameConfig.grid.weapons.filter(w => w && w.type === 'sword' && w.tier === 1);\n                const need = 2 - swords.length;\n                for (let k = 0; k < need; k++) {\n                    const idx = findEmptyGridSlot();\n                    if (idx === -1) break;\n                    window.gameConfig.grid.weapons.push({ type: 'sword', tier: 1, slotIndex: idx });\n                }\n                renderGrid();\n            }\n\n            const tutorialSteps = [\n                {\n                    text: '\u2694\ufe0f Welcome to the Forge, Collector! Let me show you how to build a legendary arsenal.',\n                    label: \"Let's go\"\n                },\n                {\n                    target: () => weaponGrid,\n                    text: 'This is your forge grid. Weapons appear here automatically \u2014 I just placed two Bronze Swords for you.',\n                    label: 'Next',\n                    onEnter: seedTutorialPair\n                },\n                {\n                    target: () => weaponGrid,\n                    text: 'DRAG one sword onto the other to merge them into a higher-tier weapon!',\n                    wait: () => window.gameConfig.progress.totalMerges > tutorialMergeBaseline,\n                    onEnter: () => { tutorialMergeBaseline = window.gameConfig.progress.totalMerges; }\n                },\n                {\n                    target: () => document.querySelector('.forge-points'),\n                    text: 'Every merge pays Forge Points. NEW: merge again within 3 seconds to build a \ud83d\udd25COMBO \u2014 up to \u00d73 points!',\n                    label: 'Nice'\n                },\n                {\n                    target: () => upgradeButton,\n                    text: 'Tap UPGRADES to spend Forge Points on faster spawns and a bigger grid.',\n                    wait: () => upgradeMenu.classList.contains('visible')\n                },\n                {\n                    target: () => document.getElementById('quest-button'),\n                    text: 'NEW! Open the QUEST BOARD \u2014 three missions are always running, and each claim pays out big and refreshes instantly.',\n                    wait: () => questMenu.classList.contains('visible'),\n                    onEnter: () => { upgradeMenu.classList.remove('visible'); }\n                },\n                {\n                    text: \"You're ready! Merge for combos, clear quests, battle Infinite Waves, and Rebirth for permanent power. \ud83d\udc51\",\n                    label: 'Start Forging',\n                    onEnter: () => { questMenu.classList.remove('visible'); }\n                }\n            ];\n\n            function positionTutorial() {\n                const step = tutorialSteps[tutorialIndex];\n                if (!step) return;\n                const el = step.target ? step.target() : null;\n                tutorialHighlight.style.display = 'block';\n                if (el) {\n                    const r = el.getBoundingClientRect();\n                    const pad = 10;\n                    tutorialHighlight.style.borderWidth = '4px';\n                    tutorialHighlight.style.left = (r.left - pad) + 'px';\n                    tutorialHighlight.style.top = (r.top - pad) + 'px';\n                    tutorialHighlight.style.width = (r.width + pad * 2) + 'px';\n                    tutorialHighlight.style.height = (r.height + pad * 2) + 'px';\n\n                    const cardH = tutorialCard.offsetHeight || 200;\n                    if (window.innerHeight - r.bottom > cardH + 40) {\n                        tutorialCard.style.top = (r.bottom + 24) + 'px';\n                    } else {\n                        tutorialCard.style.top = Math.max(20, r.top - cardH - 24) + 'px';\n                    }\n                } else {\n                    tutorialHighlight.style.borderWidth = '0px';\n                    tutorialHighlight.style.left = '50%';\n                    tutorialHighlight.style.top = '50%';\n                    tutorialHighlight.style.width = '0px';\n                    tutorialHighlight.style.height = '0px';\n                    const cardH = tutorialCard.offsetHeight || 200;\n                    tutorialCard.style.top = Math.max(20, (window.innerHeight - cardH) / 2) + 'px';\n                }\n            }\n\n            function showTutorialStep(i) {\n                tutorialIndex = i;\n                const step = tutorialSteps[i];\n                if (!step) { finishTutorial(); return; }\n                if (step.onEnter) step.onEnter();\n                tutorialTextEl.textContent = step.text;\n                tutorialStepEl.textContent = `Tutorial \u2014 Step ${i + 1} of ${tutorialSteps.length}`;\n                if (step.wait) {\n                    tutorialNextBtn.style.display = 'none';\n                    tutorialHintEl.style.display = 'block';\n                } else {\n                    tutorialNextBtn.style.display = 'block';\n                    tutorialNextBtn.textContent = step.label || 'Next';\n                    tutorialHintEl.style.display = 'none';\n                }\n                tutorialCard.style.display = 'block';\n                positionTutorial();\n            }\n\n            function startTutorial() {\n                if (mode !== 'play') return;\n                tutorialActive = true;\n                tutorialMergeBaseline = window.gameConfig.progress.totalMerges;\n                showTutorialStep(0);\n            }\n\n            function finishTutorial() {\n                tutorialActive = false;\n                tutorialCompleted = true;\n                tutorialCard.style.display = 'none';\n                tutorialHighlight.style.display = 'none';\n                onTutorialFinished();\n            }\n\n            tutorialNextBtn.onclick = () => {\n                playSound('button_click_sound');\n                showTutorialStep(tutorialIndex + 1);\n            };\n\n            tutorialSkipBtn.onclick = () => {\n                playSound('button_click_sound');\n                finishTutorial();\n            };\n\n            function updateTutorial() {\n                if (!tutorialActive) return;\n                positionTutorial();\n                const step = tutorialSteps[tutorialIndex];\n                if (step && step.wait && step.wait()) {\n                    playSound('button_click_sound');\n                    showTutorialStep(tutorialIndex + 1);\n                }\n            }\n\n            ensureQuests();\n            updateQuestBadge();\n\n            // Load tutorial completion status from player-specific save\n            if (mode === 'play') {\n                try {\n                    const response = await lib.getUserGameState();\n                    if (response && response.state) {\n                        savedUserState = response.state;\n                        if (response.state.tutorialCompleted === true) {\n                            tutorialCompleted = true;\n                        }\n                    }\n                } catch (error) {\n                    lib.log(`Failed to load tutorial state: ${error.message}`);\n                    // Default to false, so tutorial will show\n                }\n            }\n\n            if (mode === 'play' && !tutorialCompleted) {\n                // Wait until no other overlay (e.g. Welcome Back) is blocking the screen\n                const tutorialWait = setInterval(() => {\n                    if (tutorialCompleted || tutorialActive) {\n                        clearInterval(tutorialWait);\n                        return;\n                    }\n                    const blocked = document.querySelector('.upgrade-menu.visible') ||\n                        document.getElementById('welcome-overlay').classList.contains('visible');\n                    if (!blocked) {\n                        clearInterval(tutorialWait);\n                        startTutorial();\n                    }\n                }, 800);\n            }\n\n            // Show game parameters\n            lib.showGameParameters({\n                name: 'Game Settings',\n                params: {\n                    'Spawn Rate': {\n                        key: 'settings.startingSpawnRate',\n                        type: 'slider',\n                        min: 3,\n                        max: 7,\n                        step: 1\n                    },\n                    'Forge Points Multiplier': {\n                        key: 'settings.forgePointsMultiplier',\n                        type: 'slider',\n                        min: 0.5,\n                        max: 2,\n                        step: 0.5\n                    },\n                    'Particles': {\n                        key: 'settings.particlesEnabled',\n                        type: 'checkbox'\n                    },\n                    'Offline Cap (hours)': {\n                        key: 'settings.offlineProgressCap',\n                        type: 'slider',\n                        min: 1,\n                        max: 4,\n                        step: 1\n                    },\n                    'Auto-Merge': {\n                        key: 'settings.autoMergeEnabled',\n                        type: 'checkbox'\n                    }\n                }\n            });\n\n            // Initial render\n            renderGrid();\n            updateHUD();\n\n            // Unlock additional weapons after some playtime\n            setTimeout(() => {\n                if (!window.gameConfig.unlockedWeapons.includes('spear')) {\n                    window.gameConfig.unlockedWeapons.push('spear');\n                }\n            }, 30000); // 30 seconds\n\n            setTimeout(() => {\n                if (!window.gameConfig.unlockedWeapons.includes('bow')) {\n                    window.gameConfig.unlockedWeapons.push('bow');\n                }\n            }, 60000); // 60 seconds\n\n            // Game loop\n            let lastTime = performance.now();\n\n            function gameLoop(timestamp) {\n                let deltaTime = (timestamp - lastTime) / 1000;\n                deltaTime = Math.min(deltaTime, 0.11); // Cap delta time\n                lastTime = timestamp;\n\n                if (mode === 'play') {\n                    // Weapon spawning\n                    if (!state.dragging) {\n                        state.spawnTimer += deltaTime;\n                        const spawnRate = getSpawnRate();\n                        \n                        if (state.spawnTimer >= spawnRate) {\n                            state.spawnTimer = 0;\n                            spawnWeapon();\n                        }\n                    }\n\n                    // Auto-merge timer\n                    autoMergeTimer += deltaTime;\n                    if (autoMergeTimer >= 2) {\n                        autoMergeTimer = 0;\n                        tryAutoMerge();\n                    }\n\n            // Update particles\n            updateParticles(deltaTime);\n\n            // Update Challenge Mode\n            updateChallengeMode(deltaTime);\n\n            // Update World Cup Auto-Goal\n            updateWorldCupAutoGoal(deltaTime);\n\n            // Update merge combo timer\n            updateCombo(deltaTime);\n\n            // Live tutorial tracking\n            updateTutorial();\n\n            // Periodic UI refresh (quests, HUD)\n            state.uiTimer = (state.uiTimer || 0) + deltaTime;\n            if (state.uiTimer >= 1) {\n                state.uiTimer = 0;\n                updateQuestBadge();\n                updateHUD();\n                if (questMenu.classList.contains('visible')) renderQuests();\n            }\n\n            // Update Mythic Axe Bonus\n            const mythicAxes = getMythicCount('axe');\n            if (mythicAxes > 0) {\n                state.axeBonusTimer = (state.axeBonusTimer || 0) + deltaTime;\n                if (state.axeBonusTimer >= 5) {\n                    state.axeBonusTimer = 0;\n                    const bonus = mythicAxes * 10 * window.gameConfig.progress.highestWave;\n                    window.gameConfig.progress.forgePoints += bonus;\n                    spawnDamageNumber(`+${Math.floor(bonus)} FP`);\n                }\n            }\n\n            // Update last play time periodically\n                    if (Math.random() < 0.01) {\n                        window.gameConfig.progress.lastPlayTime = Date.now();\n                    }\n                } else {\n                    // Edit mode\n                    gameWorld.classList.add('edit-mode');\n                }\n\n                requestAnimationFrame(gameLoop);\n            }\n\n            requestAnimationFrame(gameLoop);\n        }\n    </script>\n</body>\n</html>", "game_config": "{\"settings\": {\"backgroundTheme\": \"classic\", \"gridStyle\": \"stone\", \"particlesEnabled\": true, \"startingSpawnRate\": 5, \"startingGridSize\": \"3x4\", \"forgePointsMultiplier\": 1, \"offlineProgressCap\": 2}, \"progress\": {\"forgePoints\": 0, \"collectedLegendaries\": 0, \"totalMerges\": 0, \"lastPlayTime\": null}, \"upgrades\": {\"spawnRate\": 0, \"gridExpansion\": 0}, \"grid\": {\"rows\": 3, \"cols\": 4, \"weapons\": []}, \"unlockedWeapons\": [\"sword\", \"axe\"]}", "game_design_document": "## Core Game Loop and Mechanics\n\n**Weapon Collector Idle** is an incremental merge game where players build and upgrade a collection of weapons through merging mechanics and idle progression.\n\n### Moment-to-Moment Gameplay\n1. **Passive Generation**: Weapons automatically spawn on a grid at regular intervals\n2. **Merging**: Players drag and drop identical weapons onto each other to create higher-tier versions\n3. **Collection Progress**: Each merge unlocks progression toward new weapon types and eras\n4. **Idle Rewards**: When players return after being away, they receive accumulated weapons and currency\n\n### Progression System\n- **Weapon Tiers**: Each weapon type has 5 tiers (Bronze \u2192 Silver \u2192 Gold \u2192 Platinum \u2192 Legendary)\n- **Eras**: Progress through 4 weapon eras:\n  - **Ancient Era**: Swords, axes, spears, bows\n  - **Medieval Era**: Longswords, crossbows, maces, shields\n  - **Modern Era**: Pistols, rifles, grenades, shotguns\n  - **Future Era**: Laser guns, plasma rifles, energy swords, railguns\n- **Currency System**: Merging weapons generates \"Forge Points\" used to:\n  - Increase spawn rate\n  - Unlock new weapon slots on the grid\n  - Unlock new eras\n  - Purchase specific weapon types\n\n### Win Conditions & Engagement\n- **Short-term**: Complete weapon collections within each era\n- **Long-term**: Unlock all eras and collect all legendary weapons\n- **Replayability**: Prestige system that resets progress but provides permanent bonuses\n\n### Core Metrics\n- Weapons spawn every 3-5 seconds initially (upgradeable)\n- Grid starts with 12 slots (3x4), expandable to 20 slots (4x5)\n- Each merge generates Forge Points based on weapon tier\n- Idle time accumulates up to 4 hours of offline progress\n\n## Starting Scope\n\nThe first iteration will focus on creating a polished, playable core experience:\n\n### Must Have (First Iteration)\n1. **Core Merge Mechanics**\n   - 3x4 grid for weapon placement\n   - Drag-and-drop merging of identical weapons\n   - 5 tiers per weapon type with clear visual progression\n   - Smooth animations for spawning, merging, and tier upgrades\n\n2. **Ancient Era Only**\n   - 4 weapon types: Sword, Axe, Spear, Bow\n   - Each with 5 tiers (15 total unique weapons for this era)\n   - Clear visual distinction between weapon types and tiers\n\n3. **Basic Progression**\n   - Forge Points currency system\n   - 2 upgrades available:\n     - Spawn Rate (5 levels: 5s \u2192 4s \u2192 3s \u2192 2.5s \u2192 2s)\n     - Grid Expansion (unlock 4 additional slots to reach 4x4)\n   - Simple unlock system for new weapon types within Ancient Era\n\n4. **Idle Mechanics**\n   - Offline progress calculation (up to 2 hours)\n   - Welcome back screen showing accumulated rewards\n   - Continue spawning weapons while game is active\n\n5. **UI/UX**\n   - Clean, mobile-friendly interface\n   - Forge Points counter prominently displayed\n   - Upgrade menu accessible via button\n   - Collection progress indicator (X/20 legendary weapons collected)\n   - Tutorial overlay on first launch explaining merge mechanics\n\n6. **Polish**\n   - Satisfying merge animations with particle effects\n   - Sound effects for merging, spawning, and upgrades\n   - Haptic feedback on mobile for merges\n   - Smooth drag-and-drop with visual feedback\n\n### Future Iterations\n- Additional eras (Medieval, Modern, Future)\n- More upgrade types (auto-merge, specific weapon spawners)\n- Prestige system with permanent bonuses\n- Achievement system\n- Collection gallery to view all collected weapons\n- Special event weapons or limited-time challenges\n\n## Game Perspective\n\n**Fixed-screen** with a top-down view of the weapon grid. The entire game takes place on a single screen showing:\n- The weapon grid (center focus)\n- Forge Points counter (top)\n- Upgrade button (bottom)\n- Collection progress (top corner)\n\nNo scrolling is needed; all interactive elements fit within the 720\u00d71280 viewport.\n\n## Game World and Level Design\n\n### Main Screen Layout (720\u00d71280)\n\n**Top Section (0-200px)**\n- Forge Points display: Large, prominent counter showing current currency\n- Era indicator: \"Ancient Era\" with icon\n- Collection progress: \"5/20 Legendary Weapons\" with small icon\n\n**Middle Section (200-1000px) - The Grid**\n- 3x4 weapon grid (initially), centered\n- Each slot: 160\u00d7160px with 20px spacing\n- Grid background: Stone/forge aesthetic with subtle glow\n- Empty slots show faint outlines\n- Weapons appear as clear, detailed sprites within slots\n\n**Bottom Section (1000-1280px)**\n- Large \"UPGRADES\" button (centered, 280\u00d780px)\n- Settings icon (bottom-left corner)\n- Info/Help icon (bottom-right corner)\n\n### Upgrade Menu (Overlay)\nWhen opened, darkens background and shows:\n- Available upgrades in scrollable list\n- Each upgrade shows:\n  - Icon and name\n  - Current level / max level\n  - Cost in Forge Points\n  - Effect description\n  - \"UPGRADE\" button (or \"MAX\" if maxed)\n\n### Visual Theme\n- **Forge/Workshop aesthetic**: Dark stone background with warm lighting\n- **Metallic accents**: Bronze, silver, gold highlights for UI elements\n- **Particle effects**: Sparks and glows when merging\n- **Clear hierarchy**: Weapons are the visual focus, UI is supportive\n\n## Edit Mode Design\n\nEdit mode allows players to customize the visual theme and some game parameters while maintaining core balance.\n\n### Editable Properties\n\n**Visual Customization**\n- **Background Theme**: Choose from 3 forge environments\n  - Classic Forge (default): Dark stone with warm fire glow\n  - Ice Forge: Cool blue tones with crystalline accents\n  - Shadow Forge: Dark purple with mystical energy\n- **Grid Style**: Choose grid appearance\n  - Stone Tiles (default)\n  - Wooden Planks\n  - Metal Plates\n- **Particle Effects**: Toggle merge particle effects on/off\n\n**Gameplay Tuning** (within constraints)\n- **Starting Spawn Rate**: 3-7 seconds (default: 5s)\n- **Starting Grid Size**: 3\u00d73 or 3\u00d74 (default: 3\u00d74)\n- **Forge Points Multiplier**: 0.5x - 2x (default: 1x)\n  - Affects both earning and upgrade costs proportionally\n- **Offline Progress Cap**: 1-4 hours (default: 2 hours)\n\n**Weapon Era Selection**\n- Choose which era to start in (once unlocked in play mode)\n- Toggle which weapon types appear in each era\n\n### Constraints\n- Cannot modify core merge mechanics (always 2 identical \u2192 1 higher tier)\n- Cannot change tier progression (always 5 tiers)\n- Grid cannot exceed 5\u00d75 (technical/UX limit)\n- Spawn rate cannot go below 1 second (performance)\n- Forge Points multiplier affects both earning and costs to maintain balance\n\n### Edit Mode UI\n- Accessed via settings icon\n- Tabbed interface:\n  - \"Visuals\" tab\n  - \"Gameplay\" tab\n  - \"Eras\" tab\n- Each setting shows preview/current value\n- \"Reset to Default\" button for each section\n- Changes apply immediately (no save button needed)\n\n## Control Design\n\n**Weapon Collector Idle** uses simple, intuitive touch-first controls optimized for the merge mechanic.\n\n### Mobile Controls (Primary)\n\n**Weapon Merging**\n- **Touch and hold** on a weapon to pick it up\n  - Weapon scales up slightly (1.1x) and lifts with shadow\n  - Haptic feedback on pickup\n- **Drag** the weapon across the grid\n  - Weapon follows finger smoothly\n  - Valid merge targets highlight with green glow\n  - Invalid targets remain neutral\n- **Release** over another weapon to merge\n  - If weapons match: merge animation plays, new tier weapon appears\n  - If weapons don't match: weapon returns to original slot with bounce animation\n  - If released over empty slot: weapon moves to that slot\n- **Tap** empty grid slot: No action (weapons only spawn automatically)\n\n**UI Interaction**\n- **Tap** Upgrade button: Opens upgrade menu overlay\n- **Tap** upgrade in menu: Purchases if affordable (with confirmation haptic)\n- **Tap** outside menu: Closes menu\n- **Tap** settings/info icons: Opens respective overlays\n\n### Desktop Controls (Secondary)\n\n**Weapon Merging**\n- **Click and hold** on weapon to pick it up\n- **Drag** with mouse to move weapon\n- **Release** over target to merge or move\n- Same visual feedback as mobile (highlights, scaling)\n\n**UI Interaction**\n- **Click** buttons and UI elements\n- **Hover** shows tooltips for upgrades (cost, effect)\n\n### Input Handling Details\n\n**Touch Tracking**\n- Track single touch ID for dragging (ignore multi-touch during drag)\n- Store original slot position for return animation if merge fails\n- Prevent scrolling/zooming while dragging weapon\n\n**Drag Validation**\n- Check if release position overlaps with grid slot\n- If over weapon: check if types and tiers match\n- If over empty slot: allow move\n- If outside grid: return to original position\n\n**Visual Feedback**\n- Dragged weapon: z-index above all others, slight rotation\n- Valid merge target: pulsing green outline\n- Invalid target: no special indication\n- Empty slots: subtle highlight when dragging\n\n**Prevent Conflicts**\n- Disable weapon spawning while player is dragging\n- Queue spawn if timer triggers during drag\n- Prevent multiple simultaneous drags\n\n### Accessibility\n- Large touch targets (160\u00d7160px weapons)\n- Clear visual feedback for all interactions\n- No time-pressure mechanics (idle game)\n- Colorblind-friendly: Use shapes + colors for weapon types\n\n## Art Style and Visual Theme\n\n### Overall Aesthetic\n**Fantasy Forge Workshop** - A warm, inviting blacksmith's workshop where legendary weapons are crafted and collected. The art style balances detailed weapon designs with clean, readable UI elements.\n\n### Art Style\n- **Semi-realistic with stylized elements**: Weapons have realistic proportions and details but with enhanced colors and slight exaggeration for visual appeal\n- **Hand-painted look**: Soft edges, visible brush-stroke texture on backgrounds\n- **Rich, saturated colors**: Each weapon tier has distinct color palette\n- **Glowing effects**: Subtle glows and particle effects for higher tiers\n\n### Color Palette\n\n**Background & UI**\n- Dark stone gray (#2a2a2a) for main background\n- Warm orange/amber (#ff8c42) for forge glow and accents\n- Bronze (#cd7f32), Silver (#c0c0c0), Gold (#ffd700) for tier indicators\n- Deep red (#8b0000) for buttons and important UI\n\n**Weapon Tier Colors** (applied as glows/auras)\n- **Tier 1 (Bronze)**: Warm brown with bronze glow (#cd7f32)\n- **Tier 2 (Silver)**: Cool gray with silver shimmer (#c0c0c0)\n- **Tier 3 (Gold)**: Rich yellow-gold with radiance (#ffd700)\n- **Tier 4 (Platinum)**: Bright white-blue with electric glow (#e5e4e2)\n- **Tier 5 (Legendary)**: Purple-pink with magical aura (#9d4edd)\n\n### Asset Specifications\n\n**Weapon Assets**\n- **Size**: 256\u00d7256px (displayed at 140\u00d7140px in 160\u00d7160px slots)\n- **Style**: Detailed, semi-realistic with stylized proportions\n- **Viewing angle**: Slight 3/4 perspective, angled to show depth\n- **Background**: Transparent PNG\n- **Tier progression**: Same weapon design with enhanced details and glow effects for higher tiers\n\n**Ancient Era Weapons** (4 types \u00d7 5 tiers = 20 assets)\n1. **Sword**: Classic medieval longsword\n   - Tier 1: Simple iron blade\n   - Tier 5: Ornate legendary blade with runes and purple glow\n2. **Axe**: Double-bladed battle axe\n   - Tier 1: Rough wooden handle, basic iron head\n   - Tier 5: Intricate engravings, glowing edge\n3. **Spear**: Long spear with leaf-shaped blade\n   - Tier 1: Simple wooden shaft, basic spearhead\n   - Tier 5: Decorated shaft, gleaming magical blade\n4. **Bow**: Recurve bow\n   - Tier 1: Plain wooden bow\n   - Tier 5: Elegant carved bow with glowing string\n\n**UI Elements** (Code-rendered with CSS)\n- Grid slots: Rounded rectangles with stone texture (CSS background)\n- Buttons: Gradient fills with metallic borders\n- Forge Points counter: Large bold text with glow effect\n- Progress bars: Gradient fills showing completion\n\n**Particle Effects** (Code-rendered with Canvas)\n- Merge sparks: Orange/yellow particles bursting outward\n- Tier-up glow: Expanding ring of light matching tier color\n- Spawn shimmer: Brief sparkle when weapon appears\n\n**Background**\n- **Main screen**: Dark stone wall with warm forge glow from bottom\n- **Grid area**: Slightly lighter stone tiles with subtle grid lines\n- **Ambient effects**: Animated flickering light from forge (subtle)\n\n### Visual Hierarchy\n1. **Primary focus**: Weapons on grid (largest, most detailed, colorful)\n2. **Secondary**: Forge Points counter (large, prominent, top of screen)\n3. **Tertiary**: Buttons and UI elements (clear but not distracting)\n4. **Background**: Atmospheric but subdued, doesn't compete with weapons\n\n### Animation Style\n- **Smooth and satisfying**: 0.3-0.5s duration for most animations\n- **Easing**: Ease-out for spawning, ease-in-out for merging\n- **Particle bursts**: Quick, energetic (0.5-0.8s)\n- **Idle animations**: Subtle weapon bobbing/glowing (2-3s loops)\n\n### Consistency Notes\n- All weapons in same era share similar material quality and detail level\n- Tier progression is consistent across all weapon types\n- UI elements use same color palette and style throughout\n- Particle effects match the tier color of weapons being merged", "persistent_storage_config": null, "game_metadata": {"game_id": "01KT4QT19XQ2M9M8P5JRZTQ1V3", "title": "Weapon Collector Idle", "description": "Merge weapons to unlock legendary armaments! Collect, combine, and upgrade your arsenal from ancient swords to futuristic blasters.", "thumbnail_url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/thumbnail_289b472c-987a-4223-96f6-9fffb9df0b33.webp", "created_at": 1780423180, "updated_at": 1787434884395.673, "art_style": null}, "task_plan": null}