{"asset_map": {"barbie_face_base": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/barbie_face_base_6c171e17-d678-4006-a7f5-a27ab7e0d95e.webp", "type": "image", "prompt": "Generate a high-quality, front-facing digital illustration of Barbie's face. The face fills the frame from forehead to chin, centered on the eyes. Show both large expressive blue eyes with detailed irises, perfectly shaped soft brown eyebrows, small refined nose, and full natural pink lips. Smooth fair skin with subtle contouring. Signature blonde hair in soft waves visible at the edges. Gentle neutral expression looking straight ahead. Soft, even frontal lighting with gentle shadows in eye sockets. Clean, makeup-free eyes with natural lash line and defined eyelid crease. Polished, semi-realistic style on transparent background.", "description": "High-quality, clean-faced Barbie illustration for the main makeup canvas.", "subtype": "character", "aspect_ratio": [1018, 1018], "compression_suggestion": "original", "duration_secs": null, "loop": null, "animation": null}, "tool_icon_eyeshadow": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/tool_icon_eyeshadow_7ef20b57-8985-4ff7-8eeb-0779a297fd79.webp", "type": "image", "prompt": "Create a 3D-style modern icon of an open eyeshadow palette on a transparent background. The palette shows 4-6 colorful shadow pans in pinks, purples, and neutrals with subtle shimmer. Includes a small elegant makeup brush resting on the palette. Elegant gold and pink casing. Clean, vibrant, and professional game asset.", "description": "UI icon for the eyeshadow tool showing a palette and brush.", "subtype": "ui", "aspect_ratio": [820, 930], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "tool_icon_eyeliner": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/tool_icon_eyeliner_4bdce6a2-89e7-4031-9c11-4381a0d5966d.webp", "type": "image", "prompt": "Create a modern 3D icon of a single eyeliner pencil at a slight angle on a transparent background. Black and gold sleek casing with a sharpened tip visible. Clean, polished game asset style with a subtle shine on the casing.", "description": "UI icon for the eyeliner tool showing a pencil.", "subtype": "ui", "aspect_ratio": [759, 757], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "tool_icon_mascara": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/tool_icon_mascara_9fd8ee38-8e91-4659-9bb9-de6568515152.webp", "type": "image", "prompt": "Create a modern icon of a mascara wand pulled out of a sleek tube on a transparent background. The tube is pink and gold. The wand has a curved spiral brush with visible black mascara coating. High-quality digital illustration with 3D effect.", "description": "UI icon for the mascara tool showing a wand and tube.", "subtype": "ui", "aspect_ratio": [505, 1282], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "tool_icon_lashes": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/tool_icon_lashes_07b99c6a-029c-4d0f-b34d-0cdce2367924.webp", "type": "image", "prompt": "Create an icon of a pair of false eyelashes on a transparent background. The lashes are shown in a curved position, looking long and wispy with individual black strands. Clean, modern illustration style with a subtle 3D look.", "description": "UI icon for the false lashes tool.", "subtype": "ui", "aspect_ratio": [937, 249], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "eyelash_style_natural": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/eyelash_style_natural_3696cd90-37cb-431f-9448-a77bbba4ee67.webp", "type": "image", "prompt": "Generate a realistic illustration of a single natural-style false eyelash strip on a transparent background. Medium length, subtle volume, increasing in length toward the outer corner. Thin transparent lash band. Individual black strands visible. Horizontal orientation with a natural curve.", "description": "Medium-length natural-style false eyelash strip asset.", "subtype": "object", "aspect_ratio": [1200, 517], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "eyelash_style_glamorous": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/eyelash_style_glamorous_b5ea60ef-94d0-463f-81db-5d96a3e071cf.webp", "type": "image", "prompt": "Generate a realistic illustration of a glamorous false eyelash strip on a transparent background. Long, voluminous, and dense deep black lashes with a cat-eye effect (longer at outer corners). Thin lash band, pronounced curve, high-quality makeup asset.", "description": "Long, voluminous glamorous-style false eyelash strip asset.", "subtype": "object", "aspect_ratio": [1160, 571], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "eyelash_style_dramatic": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/eyelash_style_dramatic_d73d98e1-1b31-4e3f-8bb0-8c6ea56b2208.webp", "type": "image", "prompt": "Generate a realistic illustration of a dramatic false eyelash strip on a transparent background. Extra long, ultra-voluminous, and intense black with high shine. Bold sweeping curve with layered lashes and extreme flare at outer edges. Professional makeup art style.", "description": "Extra long, ultra-voluminous dramatic-style false eyelash strip asset.", "subtype": "object", "aspect_ratio": [1336, 688], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "eyelash_style_party": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/eyelash_style_party_8acb3551-d525-4bb8-a49e-bb967e8da5ad.webp", "type": "image", "prompt": "Generate a realistic illustration of a party-style false eyelash strip on a transparent background. Medium-long length with a flirty curve and winged effect. Black lashes featuring subtle iridescent shimmer or tiny glitter particles near the tips. Festive and decorative look.", "description": "Festive party-style false eyelash strip with shimmer accents.", "subtype": "object", "aspect_ratio": [1346, 604], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "background_makeup_studio": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/background_makeup_studio_bca32738-6380-4ec7-b683-91c1ac0ca6f1.webp", "type": "image", "prompt": "Generate a 9:16 tall image showing a soft, glamorous makeup studio background. Soft-focus bokeh aesthetic with warm pink, champagne gold, and white light blooms. Soft gradients from pale pink to warm peach. Dreamy, airy atmosphere with professional vanity lighting feel. No sharp objects, very clean and aspirational.", "description": "Vertical glamorous makeup studio background with bokeh effect.", "subtype": "background", "aspect_ratio": [1024, 1536], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "ui_button_done": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/ui_button_done_4a0f5013-e3f6-4af9-bb78-30e34ac8d41a.webp", "type": "image", "prompt": "Create a glossy rounded rectangle button with the word 'DONE' in bold white sans-serif font. Pink-to-rose gradient background with a thin gold border. Subtle 3D depth and top-edge highlight for a glossy plastic effect. Transparent background around the button.", "description": "Glossy 'DONE' button for finishing the makeover.", "subtype": "ui", "aspect_ratio": [1288, 562], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "ui_button_undo": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/ui_button_undo_cf15dfb3-472a-43b9-ac61-5b7aa8d476da.webp", "type": "image", "prompt": "Create a circular UI button for 'Undo' on a transparent background. A white curved arrow pointing counter-clockwise on a soft pink and gold circular base. Minimalist modern design with subtle drop shadow.", "description": "Icon button for undoing actions.", "subtype": "ui", "aspect_ratio": [628, 629], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "ui_button_clear": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/ui_button_clear_67399231-eec2-4c2f-858b-437c9eae82e6.webp", "type": "image", "prompt": "Create a circular UI button for 'Clear All' on a transparent background. A white 'X' or minimalist trash can icon on a soft pink and gold circular base. Modern aesthetic with subtle depth and shadow.", "description": "Icon button for clearing all makeup.", "subtype": "ui", "aspect_ratio": [616, 757], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "sound_makeup_apply": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/sound_makeup_apply_05bb8fd8-6d94-4939-9831-a8862dd5ee19.mp3", "type": "audio", "prompt": "Soft, delicate ASMR makeup brush stroke on skin. A brief, airy swoosh with a gentle, velvety texture. High-quality recording of a soft cosmetic brush application, satisfying and subtle, suitable for a beauty game interface. No harsh frequencies, very clean and spa-like.", "description": "A soft, ASMR-style brush stroke sound for eyeshadow and mascara application.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.69, "loop": false, "animation": null}, "sound_lash_apply": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/sound_lash_apply_954e6b50-68ee-410a-b9f9-eaca1ec3e3d4.mp3", "type": "audio", "prompt": "Very soft and tiny 'click' or 'snap' sound, suggesting a delicate object adhering to a surface. High-pitched but muffled, light and satisfying. Gentle beauty game sound effect for precision placement, clean and isolated.", "description": "A delicate, precise click sound for placing false eyelashes.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.04, "loop": false, "animation": null}, "sound_button_click": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/sound_button_click_ca86ce7e-bb3a-477b-a268-27bb079a859f.mp3", "type": "audio", "prompt": "Friendly and polished UI button tap, a soft organic 'pop' with a subtle musical chime quality. Warm tone, medium-soft volume, inviting and responsive. Designed for a high-end fashion or beauty mobile game interface.", "description": "A warm, melodic UI tap sound for menu navigation.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.150453514739229, "loop": false, "animation": null}, "sound_reveal_success": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/sound_reveal_success_b41273d6-47da-4090-bb17-e9cb01fd9e16.mp3", "type": "audio", "prompt": "Bright, sparkly magical chime fanfare. A rising glissando of bells and soft glockenspiel with a shimmering reverb tail. Conveys glamour, achievement, and beauty. Positive, uplifting major key resolution, polished and professional.", "description": "A glamorous, sparkly fanfare for the final makeup reveal.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.34, "loop": false, "animation": null}, "music_background_loop": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/music_background_loop_3b233b01-f1ef-409a-8abb-e632dcc0ca1a.mp3", "type": "audio", "prompt": "Chic and modern light pop background music, 115 BPM. Featuring soft electric piano chords, a light driving four-on-the-floor beat with subtle percussion, and airy synth textures. Feminine, empowering, and creative atmosphere. Calm but rhythmic, suitable for a professional makeup studio setting. Seamless loop, instrumental only, high production quality.", "description": "Upbeat and chic background music for the makeup studio environment.", "subtype": "music", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 30.0, "loop": true, "animation": null}, "tool_icon_base": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/tool_icon_base_30b05488-1e6a-43e0-9fe0-64fc52fc635c.webp", "type": "image", "prompt": "Generate a high-quality UI icon for a foundation makeup tool. The icon should feature a stylish liquid foundation bottle with a gold pump and a pink teardrop-shaped beauty blender sponge. Use a chic, glamorous Barbie aesthetic with vibrant pinks, metallic golds, and clean, polished lines. Professional game-ready icon, centered composition, front-facing, transparent background, high resolution.", "description": "Chic UI icon for foundation tool featuring a beauty blender and foundation bottle in Barbie pink and gold.", "subtype": "ui", "aspect_ratio": [836, 895], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "sparkle_particle": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/sparkle_particle_64c67bc8-1c70-4960-91b3-4822a8f478aa.webp", "type": "image", "prompt": "Generate a high-contrast, elegant white and gold sparkle particle. A single, clean starburst with soft glowing rays and sharp points. High-quality game asset, clean lines, professional polish, suitable for beauty and makeover game effects. Transparent background, 2D vector style.", "description": "Small, elegant white and gold sparkle starburst for glowing beauty effects.", "subtype": "effect", "aspect_ratio": [770, 813], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "tool_icon_water": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/tool_icon_water_b0424971-3a57-49a9-9c0f-a285802dde2d.webp", "type": "image", "prompt": "Generate a high-quality UI icon for a water wash tool, featuring a chic, stylized sparkling water spray bottle with a water splash. Use a color palette of Barbie pink and polished silver. The style should be clean, glossy, and consistent with a professional beauty game interface. The icon should be centered on a transparent background, professional quality, matching the aesthetic of existing tool icons.", "description": "A chic Barbie-style UI icon for the water wash tool featuring a pink and silver spray bottle.", "subtype": "ui", "aspect_ratio": [961, 988], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "sound_water_wash": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/sound_water_wash_8058963b-3232-4890-b434-f31e0ca4fd0b.mp3", "type": "audio", "prompt": "Gentle, clean water splashing and light spraying sound effect. Soft ASMR quality, liquid textures, refreshing and airy. Suitable for a beauty spa or makeover context where a character's face is being washed. No heavy gushing or mechanical pump noises; focused on the delicate sound of droplets and light ripples. High-fidelity, serene, and satisfying.", "description": "A soft, refreshing water splashing sound for cleaning the face in a makeover game.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 2.44, "loop": false, "animation": null}, "tool_icon_pimple_remover": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/tool_icon_pimple_remover_552f14aa-e9ee-4cb2-ad91-5755fb918336.webp", "type": "image", "prompt": "Generate a high-quality, polished UI icon for a pimple remover tool. The icon features a sleek pink and white tube of medicated cream with a precision applicator tip. Next to the tube, include a small, elegant white and gold sparkle starburst to symbolize clear skin. The style should be glamorous and chic, matching a Barbie aesthetic with clean lines and soft shading. 2D vector-style illustration, transparent background, high resolution.", "description": "A chic Barbie-style UI icon for the pimple remover tool featuring a cream tube and sparkle.", "subtype": "ui", "aspect_ratio": [272, 626], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}}, "game_code": "<!DOCTYPE html>\n<html>\n<head>\n    <title>Barbie Eye Makeover</title>\n    <link href=\"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Poppins:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n    <style>\n        /* CSS Reset */\n        *, *::before, *::after {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        /* Root Variables */\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            --primary-pink: #FF69B4;\n            --secondary-pink: #FFB6D9;\n            --gold: #FFD700;\n            --white: #FFFFFF;\n            --shadow: rgba(0, 0, 0, 0.2);\n        }\n\n        body, html {\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            height: 100%;\n            overflow: hidden;\n            touch-action: none;\n            -ms-touch-action: none;\n            font-family: 'Poppins', sans-serif;\n        }\n\n        #game-world {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(180deg, #FFE4E1 0%, #FFB6D9 100%);\n        }\n\n        /* Main Canvas */\n        #game-canvas {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n        }\n\n        /* UI Overlay Container */\n        .ui-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 100;\n        }\n\n        .ui-overlay > * {\n            pointer-events: auto;\n        }\n\n        /* Top Action Buttons */\n        .top-actions {\n            position: absolute;\n            top: var(--space-sm);\n            left: var(--space-sm);\n            right: var(--space-sm);\n            display: flex;\n            justify-content: space-between;\n            align-items: flex-start;\n            gap: var(--space-sm);\n        }\n\n        .action-buttons-left {\n            display: flex;\n            gap: var(--space-xs);\n        }\n\n        .action-btn {\n            width: 80px;\n            height: 80px;\n            border-radius: 50%;\n            border: none;\n            background: rgba(255, 255, 255, 0.95);\n            box-shadow: 0 4px 12px var(--shadow);\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 32px;\n        }\n\n        .action-btn:hover {\n            transform: scale(1.05);\n            box-shadow: 0 6px 16px var(--shadow);\n        }\n\n        .action-btn:active {\n            transform: scale(0.95);\n        }\n\n        .btn-done {\n            padding: var(--space-sm) var(--space-lg);\n            border-radius: 40px;\n            border: none;\n            background: linear-gradient(135deg, var(--primary-pink) 0%, #FF1493 100%);\n            color: var(--white);\n            font-family: 'Fredoka', sans-serif;\n            font-size: 28px;\n            font-weight: 600;\n            box-shadow: 0 4px 12px rgba(255, 20, 147, 0.4);\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            text-transform: uppercase;\n            letter-spacing: 1px;\n        }\n\n        .btn-done:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 6px 16px rgba(255, 20, 147, 0.5);\n        }\n\n        .btn-done:active {\n            transform: translateY(0);\n        }\n\n        /* Tool Palette */\n        .tool-palette {\n            position: absolute;\n            bottom: 200px;\n            left: 50%;\n            transform: translateX(-50%);\n            display: flex;\n            gap: var(--space-sm);\n            background: rgba(255, 255, 255, 0.95);\n            padding: var(--space-sm);\n            border-radius: 24px;\n            box-shadow: 0 8px 24px var(--shadow);\n        }\n\n        .tool-btn {\n            width: 96px;\n            height: 96px;\n            border-radius: 16px;\n            border: 4px solid transparent;\n            background: var(--white);\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            padding: 8px;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        }\n\n        .tool-btn:hover {\n            transform: translateY(-4px);\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n\n        .tool-btn.active {\n            border-color: var(--primary-pink);\n            background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%);\n            box-shadow: 0 4px 16px rgba(255, 105, 180, 0.4);\n        }\n\n        .tool-btn img {\n            width: 100%;\n            height: 100%;\n            object-fit: contain;\n        }\n\n        /* Color Picker */\n        .color-picker {\n            position: absolute;\n            bottom: var(--space-sm);\n            left: 50%;\n            transform: translateX(-50%);\n            background: rgba(255, 255, 255, 0.95);\n            padding: var(--space-sm);\n            border-radius: 24px;\n            box-shadow: 0 8px 24px var(--shadow);\n            max-width: 640px;\n            width: calc(100% - 32px);\n        }\n\n        .color-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));\n            gap: var(--space-xs);\n            max-height: 160px;\n            overflow-y: auto;\n        }\n\n        .color-swatch {\n            width: 64px;\n            height: 64px;\n            border-radius: 12px;\n            border: 4px solid transparent;\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        }\n\n        .color-swatch:hover {\n            transform: scale(1.1);\n        }\n\n        .color-swatch.selected {\n            border-color: var(--gold);\n            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);\n            transform: scale(1.15);\n        }\n\n        /* Style Picker (for lashes) */\n        .style-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--space-sm);\n        }\n\n        .style-option {\n            aspect-ratio: 1;\n            border-radius: 16px;\n            border: 4px solid transparent;\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            overflow: hidden;\n            background: var(--white);\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n            padding: var(--space-sm);\n        }\n\n        .style-option:hover {\n            transform: translateY(-4px);\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n\n        .style-option.selected {\n            border-color: var(--gold);\n            box-shadow: 0 4px 16px rgba(255, 215, 0, 0.5);\n        }\n\n        .style-option img {\n            width: 100%;\n            height: 100%;\n            object-fit: contain;\n        }\n\n        /* Reveal Screen */\n        .reveal-screen {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(180deg, rgba(255, 228, 225, 0.98) 0%, rgba(255, 182, 217, 0.98) 100%);\n            display: none;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: var(--space-lg);\n            z-index: 200;\n            opacity: 0;\n            animation: fadeIn var(--transition-slow) var(--ease-out) forwards;\n        }\n\n        .reveal-screen.active {\n            display: flex;\n        }\n\n        @keyframes fadeIn {\n            to { opacity: 1; }\n        }\n\n        .reveal-title {\n            font-family: 'Fredoka', sans-serif;\n            font-size: 48px;\n            font-weight: 600;\n            color: var(--primary-pink);\n            margin-bottom: var(--space-lg);\n            text-align: center;\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n        }\n\n        .reveal-canvas-container {\n            position: relative;\n            width: 90%;\n            max-width: 500px;\n            aspect-ratio: 1;\n            margin-bottom: var(--space-xl);\n            box-shadow: 0 8px 32px var(--shadow);\n            border-radius: 24px;\n            overflow: hidden;\n            animation: scaleIn var(--transition-slow) var(--ease-bounce) forwards;\n        }\n\n        @keyframes scaleIn {\n            from {\n                transform: scale(0.8);\n                opacity: 0;\n            }\n            to {\n                transform: scale(1);\n                opacity: 1;\n            }\n        }\n\n        #reveal-canvas {\n            width: 100%;\n            height: 100%;\n        }\n\n        /* Level Info Panel */\n        .level-panel {\n            position: absolute;\n            top: 110px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: rgba(255, 255, 255, 0.9);\n            padding: var(--space-sm);\n            border-radius: 20px;\n            box-shadow: 0 4px 12px var(--shadow);\n            width: 90%;\n            max-width: 500px;\n            text-align: center;\n            border: 2px solid var(--secondary-pink);\n            z-index: 50;\n        }\n\n        .level-title-text {\n            color: var(--primary-pink);\n            font-family: 'Fredoka', sans-serif;\n            font-size: 24px;\n            font-weight: 600;\n            margin-bottom: 4px;\n        }\n\n        .level-desc-text {\n            color: #666;\n            font-size: 16px;\n            line-height: 1.2;\n        }\n\n        /* Sparkle animation */\n        @keyframes sparkle {\n            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }\n            50% { transform: scale(1.2) rotate(180deg); opacity: 1; }\n        }\n        .sparkle-fx {\n            position: absolute;\n            pointer-events: none;\n            animation: sparkle 1s infinite;\n        }\n\n        .reveal-buttons {\n            display: flex;\n            gap: var(--space-md);\n        }\n\n        .btn-restart {\n            padding: var(--space-md) var(--space-xl);\n            border-radius: 40px;\n            border: none;\n            background: linear-gradient(135deg, var(--primary-pink) 0%, #FF1493 100%);\n            color: var(--white);\n            font-family: 'Fredoka', sans-serif;\n            font-size: 24px;\n            font-weight: 600;\n            box-shadow: 0 4px 12px rgba(255, 20, 147, 0.4);\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n        }\n\n        .btn-restart:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 6px 16px rgba(255, 20, 147, 0.5);\n        }\n\n        .btn-restart:active {\n            transform: translateY(0);\n        }\n\n        /* Hidden */\n        .hidden {\n            display: none !important;\n        }\n\n        /* Reduced Motion */\n        @media (prefers-reduced-motion: reduce) {\n            * {\n                animation-duration: 0.01ms !important;\n                transition-duration: 0.01ms !important;\n            }\n        }\n    </style>\n</head>\n<body>\n    <div id=\"game-world\">\n        <canvas id=\"game-canvas\"></canvas>\n        \n        <div class=\"ui-overlay\">\n            <div class=\"level-panel\" id=\"level-panel\">\n                <div class=\"level-title-text\" id=\"level-title\">Sun-Kissed Day Look</div>\n                <div class=\"level-desc-text\" id=\"level-description\">Create a soft, natural look for a sunny day out.</div>\n            </div>\n            \n            <!-- Top Action Buttons -->\n            <div class=\"top-actions\">\n                <div class=\"action-buttons-left\">\n                    <button class=\"action-btn\" id=\"btn-undo\" title=\"Undo\">\u21b6</button>\n                    <button class=\"action-btn\" id=\"btn-clear\" title=\"Clear All\">\u2715</button>\n                </div>\n                <button class=\"btn-done\" id=\"btn-done\">DONE</button>\n            </div>\n\n            <!-- Tool Palette -->\n            <div class=\"tool-palette\" id=\"tool-palette\">\n                <button class=\"tool-btn\" data-tool=\"pimple_remover\" id=\"tool-pimple-remover\">\n                    <img src=\"\" alt=\"Pimple Remover\" id=\"icon-pimple-remover\">\n                </button>\n                <button class=\"tool-btn\" data-tool=\"water\" id=\"tool-water\">\n                    <img src=\"\" alt=\"Water\" id=\"icon-water\">\n                </button>\n                <button class=\"tool-btn\" data-tool=\"base\" id=\"tool-base\">\n                    <img src=\"\" alt=\"Base\" id=\"icon-base\">\n                </button>\n                <button class=\"tool-btn\" data-tool=\"eyeshadow\" id=\"tool-eyeshadow\">\n                    <img src=\"\" alt=\"Eyeshadow\" id=\"icon-eyeshadow\">\n                </button>\n                <button class=\"tool-btn\" data-tool=\"eyeliner\" id=\"tool-eyeliner\">\n                    <img src=\"\" alt=\"Eyeliner\" id=\"icon-eyeliner\">\n                </button>\n                <button class=\"tool-btn\" data-tool=\"mascara\" id=\"tool-mascara\">\n                    <img src=\"\" alt=\"Mascara\" id=\"icon-mascara\">\n                </button>\n                <button class=\"tool-btn\" data-tool=\"lashes\" id=\"tool-lashes\">\n                    <img src=\"\" alt=\"Lashes\" id=\"icon-lashes\">\n                </button>\n            </div>\n\n            <!-- Color/Style Picker -->\n            <div class=\"color-picker hidden\" id=\"color-picker\">\n                <div class=\"color-grid\" id=\"color-grid\"></div>\n            </div>\n\n            <div class=\"color-picker hidden\" id=\"style-picker\">\n                <div class=\"style-grid\" id=\"style-grid\"></div>\n            </div>\n        </div>\n\n        <!-- Reveal Screen -->\n        <div class=\"reveal-screen\" id=\"reveal-screen\">\n            <h1 class=\"reveal-title\">\u2728 Stunning! \u2728</h1>\n            <div class=\"reveal-canvas-container\">\n                <canvas id=\"reveal-canvas\"></canvas>\n            </div>\n            <div class=\"reveal-buttons\">\n                <button class=\"btn-restart\" id=\"btn-restart\">Create Another Look</button>\n            </div>\n        </div>\n    </div>\n\n    <script>\n        /**\n         * Barbie Eye Makeover Game\n         * \n         * A creative makeup simulation game where players design eye makeup looks for Barbie.\n         * Players select from eyeshadow, eyeliner, mascara, and false eyelashes to create\n         * beautiful makeup designs. The game features intuitive tap/click controls optimized\n         * for mobile play, with real-time makeup rendering on a canvas-based face illustration.\n         * \n         * Key Features:\n         * - Four makeup tools with color/style customization\n         * - Real-time visual feedback and layered makeup application\n         * - Undo/Clear functionality for experimentation\n         * - Glamorous reveal animation\n         * - Edit mode for customizing palettes and Barbie's appearance\n         */\n\n        async function run(mode) {\n            const gameWorld = document.getElementById('game-world');\n            const canvas = document.getElementById('game-canvas');\n            const ctx = canvas.getContext('2d');\n            const revealCanvas = document.getElementById('reveal-canvas');\n            const revealCtx = revealCanvas.getContext('2d');\n\n            // Game state\n            let currentMode = mode;\n            let currentTool = null;\n            let currentColor = null;\n            let currentLashStyle = null;\n            let makeupLayers = [];\n            let undoHistory = [];\n            const MAX_UNDO = 20;\n            let currentLevelIndex = 0;\n            let pimples = [];\n\n            // Input state\n            let isDrawing = false;\n            let lastPoint = null;\n            // Assets cache\n            const assets = {};\n            let audioContext = null;\n            let audioBuffers = {};\n            let backgroundMusic = null;\n\n            // Initialize display\n            function resizeCanvas() {\n                canvas.width = gameWorld.clientWidth;\n                canvas.height = gameWorld.clientHeight;\n                revealCanvas.width = 1024;\n                revealCanvas.height = 1024;\n                redrawCanvas();\n            }\n            resizeCanvas();\n            window.addEventListener('resize', resizeCanvas);\n\n            // Preload assets\n            async function preloadAssets() {\n                const assetIds = [\n                    'tool_icon_pimple_remover',\n                    'tool_icon_water',\n                    'tool_icon_base',\n                    'sparkle_particle',\n                    'barbie_face_base',\n                    'tool_icon_eyeshadow',\n                    'tool_icon_eyeliner',\n                    'tool_icon_mascara',\n                    'tool_icon_lashes',\n                    'eyelash_style_natural',\n                    'eyelash_style_glamorous',\n                    'eyelash_style_dramatic',\n                    'eyelash_style_party',\n                    'background_makeup_studio',\n                    'ui_button_done',\n                    'ui_button_undo',\n                    'ui_button_clear'\n                ];\n\n                const audioIds = [\n                    'sound_water_wash',\n                    'sound_makeup_apply',\n                    'sound_lash_apply',\n                    'sound_button_click',\n                    'sound_reveal_success',\n                    'music_background_loop'\n                ];\n\n                // Initialize Web Audio\n                audioContext = new (window.AudioContext || window.webkitAudioContext)();\n\n                // Load images\n                const imagePromises = assetIds.map(id => {\n                    return new Promise((resolve, reject) => {\n                        const assetInfo = lib.getAsset(id);\n                        if (!assetInfo) {\n                            resolve();\n                            return;\n                        }\n                        const img = new Image();\n                        img.onload = () => {\n                            assets[id] = { img, info: assetInfo };\n                            resolve();\n                        };\n                        img.onerror = () => resolve();\n                        img.src = assetInfo.url;\n                    });\n                });\n\n                // Load audio\n                const audioPromises = audioIds.map(id => {\n                    return new Promise((resolve, reject) => {\n                        const assetInfo = lib.getAsset(id);\n                        if (!assetInfo) {\n                            resolve();\n                            return;\n                        }\n                        fetch(assetInfo.url)\n                            .then(response => response.arrayBuffer())\n                            .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))\n                            .then(audioBuffer => {\n                                audioBuffers[id] = { buffer: audioBuffer, info: assetInfo };\n                                resolve();\n                            })\n                            .catch(() => resolve());\n                    });\n                });\n\n                await Promise.all([...imagePromises, ...audioPromises]);\n\n                // Set tool icons\n                if (assets['tool_icon_pimple_remover']) {\n                    document.getElementById('icon-pimple-remover').src = assets['tool_icon_pimple_remover'].info.url;\n                }\n                if (assets['tool_icon_water']) {\n                    document.getElementById('icon-water').src = assets['tool_icon_water'].info.url;\n                }\n                if (assets['tool_icon_base']) {\n                    document.getElementById('icon-base').src = assets['tool_icon_base'].info.url;\n                }\n                if (assets['tool_icon_eyeshadow']) {\n                    document.getElementById('icon-eyeshadow').src = assets['tool_icon_eyeshadow'].info.url;\n                }\n                if (assets['tool_icon_eyeliner']) {\n                    document.getElementById('icon-eyeliner').src = assets['tool_icon_eyeliner'].info.url;\n                }\n                if (assets['tool_icon_mascara']) {\n                    document.getElementById('icon-mascara').src = assets['tool_icon_mascara'].info.url;\n                }\n                if (assets['tool_icon_lashes']) {\n                    document.getElementById('icon-lashes').src = assets['tool_icon_lashes'].info.url;\n                }\n\n                // Start background music\n                if (mode === 'play' && audioBuffers['music_background_loop']) {\n                    playBackgroundMusic();\n                }\n            }\n\n            function playSound(soundId) {\n                if (!audioContext || !audioBuffers[soundId]) return;\n                try {\n                    const source = audioContext.createBufferNode ? audioContext.createBufferNode() : audioContext.createBufferSource();\n                    source.buffer = audioBuffers[soundId].buffer;\n                    source.connect(audioContext.destination);\n                    if (source.start) {\n                        source.start(0);\n                    } else if (source.noteOn) {\n                        source.noteOn(0);\n                    }\n                } catch (e) {\n                    console.error('Error playing sound:', e);\n                }\n            }\n\n            function playBackgroundMusic() {\n                if (!audioContext || !audioBuffers['music_background_loop']) return;\n                try {\n                    backgroundMusic = audioContext.createBufferSource();\n                    backgroundMusic.buffer = audioBuffers['music_background_loop'].buffer;\n                    backgroundMusic.loop = true;\n                    const gainNode = audioContext.createGain();\n                    gainNode.gain.value = 0.3;\n                    backgroundMusic.connect(gainNode);\n                    gainNode.connect(audioContext.destination);\n                    backgroundMusic.start(0);\n                } catch (e) {\n                    console.error('Error playing background music:', e);\n                }\n            }\n\n            await preloadAssets();\n\n            // Show game parameters\n            lib.showGameParameters({\n                name: 'Barbie Eye Makeover Settings',\n                params: {\n                    'Foundation Palette': {\n                        key: 'palette.foundation',\n                        type: 'string'\n                    },\n                    'Eyeshadow Palette': {\n                        key: 'palette.eyeshadow',\n                        type: 'string'\n                    },\n                    'Eyeliner Colors': {\n                        key: 'palette.eyeliner',\n                        type: 'string'\n                    },\n                    'Mascara Colors': {\n                        key: 'palette.mascara',\n                        type: 'string'\n                    },\n                    'Skin Tone': {\n                        key: 'barbie.skinTone',\n                        type: 'dropdown',\n                        options: [\n                            { label: 'Fair', value: 'fair' },\n                            { label: 'Light', value: 'light' },\n                            { label: 'Medium', value: 'medium' },\n                            { label: 'Tan', value: 'tan' },\n                            { label: 'Deep', value: 'deep' },\n                            { label: 'Dark', value: 'dark' }\n                        ]\n                    },\n                    'Eye Color': {\n                        key: 'barbie.eyeColor',\n                        type: 'dropdown',\n                        options: [\n                            { label: 'Blue', value: 'blue' },\n                            { label: 'Green', value: 'green' },\n                            { label: 'Brown', value: 'brown' },\n                            { label: 'Hazel', value: 'hazel' },\n                            { label: 'Gray', value: 'gray' },\n                            { label: 'Violet', value: 'violet' },\n                            { label: 'Amber', value: 'amber' },\n                            { label: 'Black', value: 'black' }\n                        ]\n                    },\n                    'Background Color': {\n                        key: 'ui.backgroundColor',\n                        type: 'color'\n                    }\n                }\n            });\n\n            // Update background color\n            function updateBackgroundColor() {\n                if (window.gameConfig && window.gameConfig.ui && window.gameConfig.ui.backgroundColor) {\n                    gameWorld.style.background = window.gameConfig.ui.backgroundColor;\n                }\n            }\n            updateBackgroundColor();\n\n            // Initialize color pickers\n            function initializeColorPicker() {\n                const colorGrid = document.getElementById('color-grid');\n                colorGrid.innerHTML = '';\n\n                let colors = [];\n                if (currentTool === 'eyeshadow') {\n                    colors = window.gameConfig.palette.eyeshadow;\n                } else if (currentTool === 'eyeliner') {\n                    colors = window.gameConfig.palette.eyeliner;\n                } else if (currentTool === 'mascara') {\n                    colors = window.gameConfig.palette.mascara;\n                } else if (currentTool === 'base') {\n                    colors = window.gameConfig.palette.foundation;\n                }\n\n                colors.forEach(color => {\n                    const swatch = document.createElement('div');\n                    swatch.className = 'color-swatch';\n                    swatch.style.backgroundColor = color;\n                    swatch.addEventListener('click', () => {\n                        playSound('sound_button_click');\n                        selectColor(color);\n                    });\n                    colorGrid.appendChild(swatch);\n                });\n\n                if (colors.length > 0) {\n                    selectColor(colors[0]);\n                }\n            }\n\n            function selectColor(color) {\n                currentColor = color;\n                document.querySelectorAll('.color-swatch').forEach(swatch => {\n                    swatch.classList.toggle('selected', swatch.style.backgroundColor === color);\n                });\n            }\n\n            // Initialize style picker (for lashes)\n            function initializeStylePicker() {\n                const styleGrid = document.getElementById('style-grid');\n                styleGrid.innerHTML = '';\n\n                const styles = window.gameConfig.eyelashStyles;\n                styles.forEach(style => {\n                    const option = document.createElement('div');\n                    option.className = 'style-option';\n                    \n                    const assetId = `eyelash_style_${style}`;\n                    if (assets[assetId]) {\n                        const img = document.createElement('img');\n                        img.src = assets[assetId].info.url;\n                        option.appendChild(img);\n                    }\n                    \n                    option.addEventListener('click', () => {\n                        playSound('sound_button_click');\n                        selectLashStyle(style);\n                        // Automatically hide the style picker after selection\n                        setTimeout(() => {\n                            document.getElementById('style-picker').classList.add('hidden');\n                        }, 300);\n                    });\n                    styleGrid.appendChild(option);\n                });\n\n                if (styles.length > 0) {\n                    selectLashStyle(styles[0]);\n                }\n            }\n\n            function selectLashStyle(style) {\n                currentLashStyle = style;\n                document.querySelectorAll('.style-option').forEach(option => {\n                    const img = option.querySelector('img');\n                    if (img && img.src.includes(style)) {\n                        option.classList.add('selected');\n                    } else {\n                        option.classList.remove('selected');\n                    }\n                });\n            }\n\n            // Tool selection\n            function selectTool(tool) {\n                currentTool = tool;\n                \n                // Update UI\n                document.querySelectorAll('.tool-btn').forEach(btn => {\n                    btn.classList.toggle('active', btn.dataset.tool === tool);\n                });\n\n                // Show appropriate picker\n                const colorPicker = document.getElementById('color-picker');\n                const stylePicker = document.getElementById('style-picker');\n                \n                if (currentTool === 'lashes') {\n                    colorPicker.classList.add('hidden');\n                    stylePicker.classList.remove('hidden');\n                    initializeStylePicker();\n                } else if (currentTool === 'water' || currentTool === 'pimple_remover') {\n                    colorPicker.classList.add('hidden');\n                    stylePicker.classList.add('hidden');\n                } else if (currentTool) {\n                    stylePicker.classList.add('hidden');\n                    colorPicker.classList.remove('hidden');\n                    initializeColorPicker();\n                } else {\n                    colorPicker.classList.add('hidden');\n                    stylePicker.classList.add('hidden');\n                }\n            }\n\n            // Event listeners for tools\n            document.querySelectorAll('.tool-btn').forEach(btn => {\n                btn.addEventListener('click', () => {\n                    playSound('sound_button_click');\n                    selectTool(btn.dataset.tool);\n                });\n            });\n\n            // Undo functionality\n            document.getElementById('btn-undo').addEventListener('click', () => {\n                playSound('sound_button_click');\n                if (undoHistory.length > 0) {\n                    const state = JSON.parse(undoHistory.pop());\n                    makeupLayers = state.layers;\n                    pimples = state.pimples;\n                    redrawCanvas();\n                }\n            });\n\n            // Clear all\n            document.getElementById('btn-clear').addEventListener('click', () => {\n                playSound('sound_button_click');\n                saveToUndo();\n                makeupLayers = [];\n                initPimples();\n                redrawCanvas();\n            });\n\n            // Done button - show reveal\n            document.getElementById('btn-done').addEventListener('click', () => {\n                playSound('sound_reveal_success');\n                showReveal();\n            });\n\n            // Restart button\n            document.getElementById('btn-restart').addEventListener('click', () => {\n                playSound('sound_button_click');\n                hideReveal();\n                \n                // Move to next level\n                currentLevelIndex++;\n                updateLevelUI();\n                \n                makeupLayers = [];\n                undoHistory = [];\n                initPimples();\n                redrawCanvas();\n            });\n\n            // Save to undo history\n            function saveToUndo() {\n                undoHistory.push(JSON.stringify({ layers: makeupLayers, pimples: pimples }));\n                if (undoHistory.length > MAX_UNDO) {\n                    undoHistory.shift();\n                }\n            }\n\n            // Drawing helper functions\n            function getCanvasPoint(event) {\n                const rect = canvas.getBoundingClientRect();\n                const clientX = event.touches ? event.touches[0].clientX : event.clientX;\n                const clientY = event.touches ? event.touches[0].clientY : event.clientY;\n                return {\n                    x: (clientX - rect.left) * (canvas.width / rect.width),\n                    y: (clientY - rect.top) * (canvas.height / rect.height)\n                };\n            }\n\n            function isPointOnFace(point) {\n                const faceRegion = getFaceRegion();\n                return point.x >= faceRegion.x && \n                       point.x <= faceRegion.x + faceRegion.width &&\n                       point.y >= faceRegion.y && \n                       point.y <= faceRegion.y + faceRegion.height;\n            }\n\n            function getFaceRegion() {\n                const faceWidth = Math.min(canvas.width * 0.7, 500);\n                const faceHeight = faceWidth * 1.2;\n                const x = (canvas.width - faceWidth) / 2;\n                const y = Math.max((canvas.height - faceHeight) / 2 - 50, 100);\n                return { x, y, width: faceWidth, height: faceHeight };\n            }\n\n            // Input handlers\n            function handlePointerDown(event) {\n                if (!currentTool) return;\n                event.preventDefault();\n                const point = getCanvasPoint(event);\n                if (!isPointOnFace(point)) return;\n\n                if (currentTool === 'lashes') {\n                    saveToUndo();\n                    applyLashes(point);\n                    playSound('sound_lash_apply');\n                } else {\n                    isDrawing = true;\n                    lastPoint = point;\n                    if (['eyeshadow', 'mascara', 'base', 'water', 'pimple_remover'].includes(currentTool)) {\n                        saveToUndo();\n                        applyMakeup(point);\n                        playSound(currentTool === 'water' ? 'sound_water_wash' : 'sound_makeup_apply');\n                    }\n                }\n            }\n\n            function handlePointerMove(event) {\n                if (!isDrawing || !currentTool) return;\n                event.preventDefault();\n                const point = getCanvasPoint(event);\n                if (!isPointOnFace(point)) return;\n\n                if (currentTool === 'eyeliner') {\n                    drawLine(lastPoint, point);\n                    lastPoint = point;\n                } else if (['eyeshadow', 'base', 'water'].includes(currentTool)) {\n                    applyMakeup(point);\n                }\n            }\n\n            function handlePointerUp(event) {\n                if (isDrawing && currentTool === 'eyeliner') {\n                    playSound('sound_makeup_apply');\n                }\n                isDrawing = false;\n                lastPoint = null;\n            }\n            function applyMakeup(point) {\n                const faceRegion = getFaceRegion();\n                const centerX = faceRegion.x + faceRegion.width / 2;\n\n                if (currentTool === 'pimple_remover') {\n                    const eraseRadius = 40;\n                    const remainingPimples = pimples.filter(pimple => {\n                        const dist = Math.sqrt(Math.pow(pimple.x - point.x, 2) + Math.pow(pimple.y - point.y, 2));\n                        return dist > eraseRadius;\n                    });\n                    \n                    if (remainingPimples.length < pimples.length) {\n                        pimples = remainingPimples;\n                        drawPimpleClearEffect(point);\n                    }\n                } else if (currentTool === 'water') {\n                    const eraseRadius = 80;\n                    makeupLayers = makeupLayers.filter(layer => {\n                        if (layer.point) {\n                            const dist = Math.sqrt(Math.pow(layer.point.x - point.x, 2) + Math.pow(layer.point.y - point.y, 2));\n                            return dist > eraseRadius;\n                        }\n                        if (layer.from && layer.to) {\n                            const distFrom = Math.sqrt(Math.pow(layer.from.x - point.x, 2) + Math.pow(layer.from.y - point.y, 2));\n                            const distTo = Math.sqrt(Math.pow(layer.to.x - point.x, 2) + Math.pow(layer.to.y - point.y, 2));\n                            return distFrom > eraseRadius && distTo > eraseRadius;\n                        }\n                        return true;\n                    });\n                    \n                    drawWaterSplash(point);\n                } else {\n                    const isEyeTool = ['eyeshadow', 'mascara'].includes(currentTool);\n                    const lastLayer = makeupLayers[makeupLayers.length - 1];\n                    if (lastLayer && lastLayer.type === currentTool && lastLayer.point) {\n                        const dist = Math.sqrt(Math.pow(lastLayer.point.x - point.x, 2) + Math.pow(lastLayer.point.y - point.y, 2));\n                        const minDist = currentTool === 'base' ? 60 : 15;\n                        if (dist < minDist) return;\n                    }\n\n                    const points = [point];\n                    if (isEyeTool) {\n                        points.push({ x: 2 * centerX - point.x, y: point.y });\n                    }\n\n                    points.forEach(p => {\n                        makeupLayers.push({\n                            type: currentTool,\n                            color: currentColor,\n                            point: p,\n                            isMirrored: p.x > centerX,\n                            timestamp: Date.now()\n                        });\n                    });\n                }\n                redrawCanvas();\n            }\n\n            function drawWaterSplash(point) {\n                ctx.save();\n                ctx.globalAlpha = 0.5;\n                ctx.fillStyle = '#E0F7FA';\n                ctx.beginPath();\n                ctx.arc(point.x, point.y, 40, 0, Math.PI * 2);\n                ctx.fill();\n                \n                for (let i = 0; i < 3; i++) {\n                    const bx = point.x + (Math.random() - 0.5) * 60;\n                    const by = point.y + (Math.random() - 0.5) * 60;\n                    ctx.beginPath();\n                    ctx.arc(bx, by, 5 + Math.random() * 10, 0, Math.PI * 2);\n                    ctx.strokeStyle = '#FFFFFF';\n                    ctx.lineWidth = 2;\n                    ctx.stroke();\n                }\n                ctx.restore();\n            }\n\n            function drawPimpleClearEffect(point) {\n                ctx.save();\n                ctx.globalAlpha = 0.8;\n                ctx.fillStyle = '#FFFFFF';\n                for (let i = 0; i < 5; i++) {\n                    const sx = point.x + (Math.random() - 0.5) * 40;\n                    const sy = point.y + (Math.random() - 0.5) * 40;\n                    const size = 5 + Math.random() * 10;\n                    if (assets['sparkle_particle']) {\n                        ctx.drawImage(assets['sparkle_particle'].img, sx - size/2, sy - size/2, size, size);\n                    }\n                }\n                ctx.restore();\n            }\n\n            function drawLine(from, to) {\n                if (!from || !to) return;\n                \n                if (makeupLayers.length === 0 || makeupLayers[makeupLayers.length - 1].type !== 'eyeliner' || \n                    makeupLayers[makeupLayers.length - 1].timestamp < Date.now() - 100) {\n                    saveToUndo();\n                }\n                \n                const faceRegion = getFaceRegion();\n                const centerX = faceRegion.x + faceRegion.width / 2;\n\n                const addSegment = (f, t) => {\n                    makeupLayers.push({\n                        type: 'eyeliner',\n                        color: currentColor,\n                        from: f,\n                        to: t,\n                        timestamp: Date.now()\n                    });\n                };\n\n                addSegment(from, to);\n                addSegment({ x: 2 * centerX - from.x, y: from.y }, { x: 2 * centerX - to.x, y: to.y });\n                \n                redrawCanvas();\n            }\n\n            function applyLashes(point) {\n                const faceRegion = getFaceRegion();\n                const centerX = faceRegion.x + faceRegion.width / 2;\n                \n                // Remove ALL existing lashes before adding the new pair to prevent stacking\n                makeupLayers = makeupLayers.filter(layer => layer.type !== 'lashes');\n                \n                const addLash = (p) => {\n                    makeupLayers.push({\n                        type: 'lashes',\n                        style: currentLashStyle,\n                        point: p,\n                        isMirrored: p.x > centerX,\n                        timestamp: Date.now()\n                    });\n                };\n\n                addLash(point);\n                addLash({ x: 2 * centerX - point.x, y: point.y });\n                \n                redrawCanvas();\n            }\n\n            function redrawCanvas() {\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                drawBarbieFace();\n                drawPimples();\n                makeupLayers.forEach(layer => {\n                    if (layer.type === 'base') drawBase(layer);\n                });\n                makeupLayers.forEach(layer => {\n                    if (layer.type === 'eyeshadow') drawEyeshadow(layer);\n                    else if (layer.type === 'lashes') drawLashes(layer);\n                    else if (layer.type === 'eyeliner') drawEyeliner(layer);\n                    else if (layer.type === 'mascara') drawMascara(layer);\n                });\n            }\n\n            function drawBase(layer) {\n                ctx.save();\n                ctx.globalCompositeOperation = 'soft-light';\n                ctx.globalAlpha = 0.15;\n                const radius = 100;\n                const gradient = ctx.createRadialGradient(layer.point.x, layer.point.y, 0, layer.point.x, layer.point.y, radius);\n                gradient.addColorStop(0, layer.color);\n                gradient.addColorStop(1, 'transparent');\n                ctx.fillStyle = gradient;\n                ctx.beginPath();\n                ctx.arc(layer.point.x, layer.point.y, radius, 0, Math.PI * 2);\n                ctx.fill();\n\n                ctx.globalCompositeOperation = 'screen';\n                ctx.globalAlpha = 0.3; \n                const shineR = radius * 0.6;\n                const shineGrad = ctx.createRadialGradient(layer.point.x - 5, layer.point.y - 5, 0, layer.point.x - 5, layer.point.y - 5, shineR);\n                shineGrad.addColorStop(0, 'rgba(255, 255, 255, 0.7)');\n                shineGrad.addColorStop(1, 'transparent');\n                ctx.fillStyle = shineGrad;\n                ctx.beginPath();\n                ctx.arc(layer.point.x - 5, layer.point.y - 5, shineR, 0, Math.PI * 2);\n                ctx.fill();\n                \n                if (assets['sparkle_particle'] && Math.random() > 0.9) {\n                    ctx.globalCompositeOperation = 'screen';\n                    ctx.globalAlpha = 0.5;\n                    const size = 15 + Math.random() * 15;\n                    ctx.save();\n                    ctx.translate(layer.point.x, layer.point.y);\n                    ctx.rotate(Math.random() * Math.PI);\n                    ctx.drawImage(assets['sparkle_particle'].img, -size/2, -size/2, size, size);\n                    ctx.restore();\n                }\n                ctx.restore();\n            }\n\n            function drawBarbieFace() {\n                const faceRegion = getFaceRegion();\n                if (assets['barbie_face_base']) {\n                    const img = assets['barbie_face_base'].img;\n                    const aspectRatio = assets['barbie_face_base'].info.aspect_ratio;\n                    if (aspectRatio) {\n                        const imgRatio = aspectRatio[0] / aspectRatio[1];\n                        const containerRatio = faceRegion.width / faceRegion.height;\n                        let drawWidth = faceRegion.width, drawHeight = faceRegion.height, drawX = faceRegion.x, drawY = faceRegion.y;\n                        if (imgRatio > containerRatio) { drawHeight = faceRegion.width / imgRatio; drawY = faceRegion.y + (faceRegion.height - drawHeight) / 2; }\n                        else { drawWidth = faceRegion.height * imgRatio; drawX = faceRegion.x + (faceRegion.width - drawWidth) / 2; }\n                        ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);\n                    } else {\n                        ctx.drawImage(img, faceRegion.x, faceRegion.y, faceRegion.width, faceRegion.height);\n                    }\n                }\n            }\n\n            function drawPimples() {\n                ctx.save();\n                pimples.forEach(pimple => {\n                    const grad = ctx.createRadialGradient(pimple.x, pimple.y, 0, pimple.x, pimple.y, pimple.size);\n                    grad.addColorStop(0, 'rgba(255, 120, 120, 0.8)');\n                    grad.addColorStop(0.5, 'rgba(255, 80, 80, 0.4)');\n                    grad.addColorStop(1, 'transparent');\n                    ctx.fillStyle = grad;\n                    ctx.beginPath();\n                    ctx.arc(pimple.x, pimple.y, pimple.size, 0, Math.PI * 2);\n                    ctx.fill();\n                    \n                    // Small white head\n                    ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';\n                    ctx.beginPath();\n                    ctx.arc(pimple.x - pimple.size/4, pimple.y - pimple.size/4, pimple.size/5, 0, Math.PI * 2);\n                    ctx.fill();\n                });\n                ctx.restore();\n            }\n\n            function drawEyeshadow(layer) {\n                ctx.save();\n                ctx.globalCompositeOperation = 'soft-light';\n                ctx.globalAlpha = 0.25;\n                const radius = 25;\n                const grad = ctx.createRadialGradient(layer.point.x, layer.point.y, 0, layer.point.x, layer.point.y, radius);\n                grad.addColorStop(0, layer.color);\n                grad.addColorStop(1, 'transparent');\n                ctx.fillStyle = grad;\n                ctx.beginPath();\n                ctx.arc(layer.point.x, layer.point.y, radius, 0, Math.PI * 2);\n                ctx.fill();\n                ctx.restore();\n            }\n\n            function drawEyeliner(layer) {\n                ctx.save();\n                ctx.globalAlpha = 0.85;\n                ctx.strokeStyle = layer.color;\n                ctx.lineWidth = 2;\n                ctx.lineCap = 'round';\n                ctx.lineJoin = 'round';\n                ctx.beginPath();\n                ctx.moveTo(layer.from.x, layer.from.y);\n                ctx.lineTo(layer.to.x, layer.to.y);\n                ctx.stroke();\n                ctx.restore();\n            }\n\n            function drawMascara(layer) {\n                ctx.save();\n                ctx.fillStyle = layer.color;\n                ctx.globalAlpha = 0.4;\n                ctx.fillRect(layer.point.x - 1.5, layer.point.y - 7.5, 3, 15);\n                ctx.restore();\n            }\n\n            function drawLashes(layer) {\n                const assetId = `eyelash_style_${layer.style}`;\n                if (assets[assetId]) {\n                    const img = assets[assetId].img;\n                    const width = 90; // Slightly smaller for better fit\n                    const height = 30;\n                    ctx.save();\n                    ctx.translate(layer.point.x, layer.point.y);\n                    if (layer.isMirrored) {\n                        ctx.scale(-1, 1);\n                    }\n                    ctx.globalAlpha = 0.95; // Slight transparency to blend better\n                    ctx.drawImage(img, -width / 2, -height / 2, width, height);\n                    ctx.restore();\n                }\n            }\n\n            function showReveal() {\n                revealCtx.clearRect(0, 0, revealCanvas.width, revealCanvas.height);\n                if (assets['barbie_face_base']) {\n                    revealCtx.drawImage(assets['barbie_face_base'].img, 0, 0, revealCanvas.width, revealCanvas.height);\n                }\n                const faceRegion = getFaceRegion();\n                const scaleX = revealCanvas.width / faceRegion.width;\n                const scaleY = revealCanvas.height / faceRegion.height;\n                \n                const drawLayerToReveal = (layer) => {\n                    const x = (layer.point ? layer.point.x - faceRegion.x : 0) * scaleX;\n                    const y = (layer.point ? layer.point.y - faceRegion.y : 0) * scaleY;\n                    \n                    if (layer.type === 'base') {\n                        revealCtx.save();\n                        const r = 100 * scaleX;\n                        revealCtx.globalCompositeOperation = 'soft-light';\n                        revealCtx.globalAlpha = 0.15;\n                        const grad = revealCtx.createRadialGradient(x, y, 0, x, y, r);\n                        grad.addColorStop(0, layer.color);\n                        grad.addColorStop(1, 'transparent');\n                        revealCtx.fillStyle = grad;\n                        revealCtx.beginPath();\n                        revealCtx.arc(x, y, r, 0, Math.PI * 2);\n                        revealCtx.fill();\n\n                        revealCtx.globalCompositeOperation = 'screen';\n                        revealCtx.globalAlpha = 0.3;\n                        const shineR = r * 0.6;\n                        const shineGrad = revealCtx.createRadialGradient(x - 5 * scaleX, y - 5 * scaleY, 0, x - 5 * scaleX, y - 5 * scaleY, shineR);\n                        shineGrad.addColorStop(0, 'rgba(255, 255, 255, 0.7)');\n                        shineGrad.addColorStop(1, 'transparent');\n                        revealCtx.fillStyle = shineGrad;\n                        revealCtx.beginPath();\n                        revealCtx.arc(x - 5 * scaleX, y - 5 * scaleY, shineR, 0, Math.PI * 2);\n                        revealCtx.fill();\n                        revealCtx.restore();\n                    } else if (layer.type === 'eyeshadow') {\n                        revealCtx.save();\n                        revealCtx.globalCompositeOperation = 'soft-light';\n                        revealCtx.globalAlpha = 0.25;\n                        const r = 25 * scaleX;\n                        const grad = revealCtx.createRadialGradient(x, y, 0, x, y, r);\n                        grad.addColorStop(0, layer.color);\n                        grad.addColorStop(1, 'transparent');\n                        revealCtx.fillStyle = grad;\n                        revealCtx.beginPath();\n                        revealCtx.arc(x, y, r, 0, Math.PI * 2);\n                        revealCtx.fill();\n                        revealCtx.restore();\n                    } else if (layer.type === 'eyeliner') {\n                        revealCtx.save();\n                        revealCtx.globalAlpha = 0.85;\n                        revealCtx.strokeStyle = layer.color;\n                        revealCtx.lineWidth = 2 * scaleX;\n                        revealCtx.lineCap = 'round';\n                        revealCtx.beginPath();\n                        revealCtx.moveTo((layer.from.x - faceRegion.x) * scaleX, (layer.from.y - faceRegion.y) * scaleY);\n                        revealCtx.lineTo((layer.to.x - faceRegion.x) * scaleX, (layer.to.y - faceRegion.y) * scaleY);\n                        revealCtx.stroke();\n                        revealCtx.restore();\n                    } else if (layer.type === 'mascara') {\n                        revealCtx.save();\n                        revealCtx.globalAlpha = 0.4;\n                        revealCtx.fillStyle = layer.color;\n                        revealCtx.fillRect(x - 1.5 * scaleX, y - 7.5 * scaleY, 3 * scaleX, 15 * scaleY);\n                        revealCtx.restore();\n                    } else if (layer.type === 'lashes') {\n                        const assetId = `eyelash_style_${layer.style}`;\n                        if (assets[assetId]) {\n                            const img = assets[assetId].img;\n                            const w = 90 * scaleX, h = 30 * scaleY;\n                            revealCtx.save();\n                            revealCtx.translate(x, y);\n                            if (layer.isMirrored) revealCtx.scale(-1, 1);\n                            revealCtx.globalAlpha = 0.95;\n                            revealCtx.drawImage(img, -w / 2, -h / 2, w, h);\n                            revealCtx.restore();\n                        }\n                    }\n                };\n\n                makeupLayers.forEach(l => { if(l.type === 'base') drawLayerToReveal(l); });\n                makeupLayers.forEach(l => { if(l.type === 'eyeshadow') drawLayerToReveal(l); });\n                makeupLayers.forEach(l => { if(l.type === 'lashes') drawLayerToReveal(l); });\n                makeupLayers.forEach(l => { if(l.type === 'eyeliner') drawLayerToReveal(l); });\n                makeupLayers.forEach(l => { if(l.type === 'mascara') drawLayerToReveal(l); });\n                \n                // Final sparkle reveal if all pimples cleared\n                if (pimples.length === 0) {\n                    for (let i = 0; i < 20; i++) {\n                        const sx = Math.random() * revealCanvas.width;\n                        const sy = Math.random() * revealCanvas.height;\n                        const size = 30 + Math.random() * 40;\n                        if (assets['sparkle_particle']) {\n                            revealCtx.globalAlpha = 0.6;\n                            revealCtx.drawImage(assets['sparkle_particle'].img, sx - size/2, sy - size/2, size, size);\n                        }\n                    }\n                }\n                \n                document.getElementById('reveal-screen').classList.add('active');\n            }\n\n            function hideReveal() {\n                document.getElementById('reveal-screen').classList.remove('active');\n            }\n\n            function updateLevelUI() {\n                const levels = window.gameConfig.levels || [];\n                if (levels.length > 0) {\n                    const level = levels[currentLevelIndex % levels.length];\n                    document.getElementById('level-title').textContent = `Level ${currentLevelIndex + 1}: ${level.title}`;\n                    document.getElementById('level-description').textContent = level.description;\n                    initPimples();\n                }\n            }\n\n            function initPimples() {\n                pimples = [];\n                const faceRegion = getFaceRegion();\n                const count = 3 + Math.floor(Math.random() * 5);\n                for (let i = 0; i < count; i++) {\n                    pimples.push({\n                        x: faceRegion.x + faceRegion.width * (0.2 + Math.random() * 0.6),\n                        y: faceRegion.y + faceRegion.height * (0.25 + Math.random() * 0.5),\n                        size: 8 + Math.random() * 12\n                    });\n                }\n            }\n            updateLevelUI();\n\n            if (mode === 'edit') {\n                document.getElementById('tool-palette').style.display = 'none';\n                document.getElementById('color-picker').style.display = 'none';\n                document.getElementById('style-picker').style.display = 'none';\n                document.getElementById('btn-done').style.display = 'none';\n                redrawCanvas();\n            } else {\n                canvas.addEventListener('mousedown', handlePointerDown);\n                canvas.addEventListener('mousemove', handlePointerMove);\n                canvas.addEventListener('mouseup', handlePointerUp);\n                canvas.addEventListener('mouseleave', handlePointerUp);\n                canvas.addEventListener('touchstart', handlePointerDown, { passive: false });\n                canvas.addEventListener('touchmove', handlePointerMove, { passive: false });\n                canvas.addEventListener('touchend', handlePointerUp);\n                canvas.addEventListener('touchcancel', handlePointerUp);\n                selectTool('eyeshadow');\n            }\n\n            function gameLoop(timestamp) {\n                requestAnimationFrame(gameLoop);\n            }\n            requestAnimationFrame(gameLoop);\n        }\n    </script>\n</body>\n</html>", "game_config": "{\n  \"palette\": {\n    \"eyeshadow\": [\n      \"#F5E6D3\",\n      \"#D4A574\",\n      \"#A67B5B\",\n      \"#4A4A4A\",\n      \"#FFB6C1\",\n      \"#FF69B4\",\n      \"#C71585\",\n      \"#87CEEB\",\n      \"#1E3A8A\",\n      \"#E6E6FA\",\n      \"#9370DB\",\n      \"#FFD700\"\n    ],\n    \"eyeliner\": [\n      \"#000000\",\n      \"#4A3728\",\n      \"#1E3A8A\",\n      \"#9370DB\",\n      \"#008B8B\",\n      \"#FFFFFF\"\n    ],\n    \"mascara\": [\n      \"#000000\",\n      \"#4A3728\",\n      \"#1E3A8A\"\n    ],\n    \"foundation\": [\n      \"#FDF5E6\",\n      \"#F5DEB3\",\n      \"#FFDAB9\",\n      \"#E9967A\",\n      \"#D2B48C\",\n      \"#BC8F8F\",\n      \"#8B4513\"\n    ]\n  },\n  \"eyelashStyles\": [\n    \"natural\",\n    \"glamorous\",\n    \"dramatic\",\n    \"party\"\n  ],\n  \"barbie\": {\n    \"skinTone\": \"fair\",\n    \"eyeColor\": \"blue\",\n    \"eyebrowColor\": \"softBrown\",\n    \"eyebrowShape\": \"natural\"\n  },\n  \"ui\": {\n    \"backgroundColor\": \"#FFE4E1\"\n  },\n  \"levels\": [\n    {\n      \"id\": 1,\n      \"targetColors\": [\n        \"#FDF5E6\",\n        \"#FFB6C1\"\n      ],\n      \"description\": \"Create a soft, natural look for a sunny day out. Use light foundation and soft pink eyeshadow.\",\n      \"title\": \"Sun-Kissed Day Look\"\n    },\n    {\n      \"description\": \"Go bold for the gala! Deep foundation, dark eyeliner, and glamorous lashes are a must.\",\n      \"title\": \"Red Carpet Glamour\",\n      \"targetColors\": [\n        \"#8B4513\",\n        \"#000000\"\n      ],\n      \"id\": 2\n    },\n    {\n      \"description\": \"Sparkle like a star! Use blue eyeshadow and plenty of shimmer.\",\n      \"title\": \"Pop Star Sparkle\",\n      \"id\": 3,\n      \"targetColors\": [\n        \"#87CEEB\",\n        \"#FFD700\"\n      ]\n    }\n  ]\n}", "game_design_document": "## Core Game Loop and Mechanics\n\n**Barbie Eye Makeover** is a creative makeup simulation game where players step into the role of a professional makeup artist, focusing specifically on eye makeup artistry for Barbie.\n\n### Main Gameplay Flow\n\n1. **Level Start**: Player is presented with Barbie's face in close-up view, showing her eyes ready for makeup\n2. **Makeup Application Phase**: Player selects from four makeup categories and applies them:\n   - **Eyeshadow**: Choose colors and apply to eyelids with brush strokes\n   - **Eyeliner**: Draw precise lines along the lash line\n   - **Mascara**: Apply to lashes for volume and length\n   - **False Eyelashes**: Select and place decorative lashes\n3. **Challenge Completion**: Some levels have specific requirements (color themes, styles) that must be met\n4. **Reveal & Rating**: Final makeover is revealed with a glamorous animation, and player receives a star rating (1-3 stars) based on creativity and challenge completion\n5. **Progress**: Unlock new colors, styles, and challenges as levels are completed\n\n### What Makes It Engaging\n\n- **Creative Freedom**: Players can experiment with countless color combinations and styles\n- **Immediate Visual Feedback**: See makeup appear in real-time as you apply it\n- **Satisfying Completion**: The reveal animation and before/after comparison provide a rewarding payoff\n- **Progressive Unlocks**: New makeup options keep the experience fresh\n- **Challenge Variety**: Different themed challenges (Glamorous Night, Natural Day, Party Look, etc.) provide goals and replayability\n\n### Win/Lose Conditions\n\n- **Win**: Complete the makeup look. Bonus stars awarded for meeting challenge criteria (e.g., \"Use pink tones\" or \"Create a smoky eye\")\n- **No Fail State**: This is a creative game with no losing - players can always restart or modify their work\n- **Star Rating System**: \n  - 1 star: Basic completion\n  - 2 stars: Good color coordination and technique\n  - 3 stars: Perfect challenge completion with excellent style\n\n## Starting Scope\n\nFor the initial implementation, we'll create a **highly polished, simple foundation** that captures the core makeup experience:\n\n### Phase 1 (Initial Implementation)\n- **Single Level**: One \"Free Play\" mode where players can experiment freely\n- **Four Makeup Tools**: Eyeshadow, eyeliner, mascara, and false eyelashes\n- **Limited Palette**: 12 eyeshadow colors (covering key color families), 6 eyeliner colors, 3 mascara colors, 4 eyelash styles\n- **Simple Application**: Tap/click to apply makeup with immediate visual feedback\n- **Basic Reveal**: Simple before/after comparison screen\n- **No Challenges Yet**: Focus on making the core makeup application feel satisfying and polished\n\n### Phase 2 (Future Expansion)\n- Multiple themed levels with specific challenges\n- Expanded color palettes (50+ eyeshadow shades, more liner options)\n- Advanced application techniques (blending, gradients, winged liner)\n- Star rating system based on challenge completion\n- Unlock system for new makeup items\n- Save/share functionality for completed looks\n- Additional makeup categories (glitter, gems, stickers)\n\n## Game Perspective\n\n**Fixed-screen, close-up view** - The game uses a single, fixed camera showing Barbie's face in close-up, centered on her eyes. This perspective allows players to see fine details and precisely apply makeup. The face remains stationary while UI elements (tool palette, color picker) appear around the edges.\n\n## Game World and Level Design\n\n### Visual Layout\n\nThe game screen is divided into clear functional zones:\n\n**Main Canvas (Center)**: \n- Barbie's face fills the central area (approximately 500x600px)\n- Close-up view showing both eyes, eyebrows, nose bridge, and upper cheeks\n- Eyes are the focal point, positioned in the upper-center of the face\n- Face is rendered as a high-quality illustration with clean, defined features\n\n**Tool Palette (Bottom)**:\n- Four large, thumb-friendly tool buttons (96x96px minimum each)\n- Icons clearly show: eyeshadow palette, eyeliner pencil, mascara wand, false eyelashes\n- Active tool is highlighted with a border or glow effect\n- Positioned in the bottom 200px of screen for easy thumb access\n\n**Color/Style Picker (Right Side or Bottom)**:\n- Appears when a tool is selected\n- For eyeshadow/eyeliner/mascara: Shows color swatches in a scrollable grid\n- For eyelashes: Shows 4 different lash style thumbnails\n- Colors are large enough to tap easily (64x64px minimum)\n\n**Action Buttons (Top)**:\n- \"Undo\" button (top-left): Removes last makeup application\n- \"Clear All\" button (top-left): Resets the entire makeup\n- \"Done\" button (top-right): Completes the look and shows reveal\n\n### Level 1: Free Play Mode\n\n**Objective**: Create any eye makeup look you want - no restrictions, pure creativity\n\n**Starting State**:\n- Barbie's face with clean, natural eyes (no makeup)\n- Skin tone: Fair with rosy cheeks\n- Natural eyebrows: Soft brown, well-shaped\n- Eye color: Bright blue\n- Lips: Natural pink (not editable in this version)\n\n**Available Tools & Options**:\n\n1. **Eyeshadow** (12 colors):\n   - Neutrals: Beige, Soft Brown, Taupe, Charcoal\n   - Pinks: Baby Pink, Hot Pink, Mauve\n   - Blues: Sky Blue, Navy\n   - Purples: Lavender, Deep Purple\n   - Metallics: Gold\n   \n2. **Eyeliner** (6 colors):\n   - Black, Brown, Navy, Purple, Teal, White\n\n3. **Mascara** (3 colors):\n   - Black, Brown, Blue\n\n4. **False Eyelashes** (4 styles):\n   - Natural: Subtle, everyday length\n   - Glamorous: Long and voluminous\n   - Dramatic: Extra long with flare\n   - Party: Decorative with slight sparkle\n\n**Interaction Details**:\n\n- **Eyeshadow Application**: Tap/click on the eyelid area to apply selected color. Each tap adds a semi-transparent layer, allowing color building and blending effects. Can apply to upper lid, crease, and under-eye area.\n\n- **Eyeliner Application**: Drag along the lash line (upper or lower) to draw eyeliner. Line follows the finger/cursor with smooth interpolation. Can create thin or thick lines based on pressure/speed.\n\n- **Mascara Application**: Tap on the natural lashes to apply mascara. Lashes darken and appear slightly thicker/longer with each application.\n\n- **False Eyelashes**: Tap to select a style, then tap on the eye to apply. Lashes automatically position along the lash line. Can be removed and replaced with different styles.\n\n**Completion**:\n- Player taps \"Done\" button when satisfied with the look\n- Screen transitions to reveal animation\n- Before/after comparison slides in\n- \"Create Another Look\" button appears to restart\n\n## Edit Mode Design\n\nEdit mode allows players to customize the makeup palette and Barbie's appearance to create personalized makeup experiences.\n\n### Editable Properties\n\n**Makeup Palette Customization**:\n- **Eyeshadow Colors**: Add, remove, or modify the available eyeshadow colors (up to 24 colors)\n  - Each color can be adjusted using a color picker\n  - Colors organized in a grid that players can rearrange\n  \n- **Eyeliner Colors**: Customize the 6 available eyeliner shades\n  - Adjust hue, saturation, and brightness\n  \n- **Mascara Colors**: Modify the 3 mascara color options\n  \n- **Eyelash Styles**: Swap out the 4 default eyelash designs with different styles from a library\n\n**Barbie's Appearance**:\n- **Skin Tone**: Choose from 6 preset skin tones (fair, light, medium, tan, deep, dark)\n- **Eye Color**: Select from 8 eye colors (blue, green, brown, hazel, gray, violet, amber, black)\n- **Eyebrow Color**: Choose from 6 natural hair colors (blonde, light brown, brown, dark brown, black, auburn)\n- **Eyebrow Shape**: Select from 3 eyebrow styles (natural, arched, straight)\n\n**UI Customization**:\n- **Background**: Choose from 5 background colors/patterns for the makeup area\n- **Tool Icon Style**: Toggle between realistic or simplified tool icons\n\n### Edit Mode Interface\n\nWhen in edit mode, the main makeup canvas is replaced with a tabbed settings panel:\n\n**Tab 1: Palette Editor**\n- Grid of all eyeshadow colors with \"+\" button to add new colors (up to limit)\n- Tap any color to open color picker\n- Drag colors to reorder\n- Tap \"X\" on color to remove it\n\n**Tab 2: Barbie's Look**\n- Preview of Barbie's face\n- Dropdown menus for skin tone, eye color, eyebrow color, and eyebrow shape\n- Changes update the preview in real-time\n\n**Tab 3: Eyelash Library**\n- Grid showing all 4 current eyelash slots\n- Tap a slot to open library of 12 available eyelash styles\n- Select new style to replace current one\n\n**Tab 4: UI Settings**\n- Background color picker\n- Tool icon style toggle\n\n### Constraints\n\n- **Color Limits**: Maximum 24 eyeshadow colors, 6 eyeliner colors, 3 mascara colors (prevents overwhelming choice)\n- **Eyelash Limit**: Exactly 4 eyelash styles available at once (maintains clean UI)\n- **Preset Skin Tones**: Only predefined skin tones available (ensures quality and natural appearance)\n- **No Face Shape Changes**: Barbie's facial structure remains fixed (keeps scope manageable)\n\n### Default Configuration\n\nThe game ships with a balanced default configuration that works well for most players, but all settings can be modified in edit mode.\n\n## Control Design\n\n**Barbie Eye Makeover** uses a **tap/click-based control scheme** optimized for casual gameplay on both mobile and desktop.\n\n### Mobile Controls (Primary)\n\n**Tool Selection**:\n- Tap any of the 4 tool buttons at the bottom to select that tool\n- Selected tool highlights with a border/glow\n- Color/style picker automatically appears for the selected tool\n\n**Color/Style Selection**:\n- Tap a color swatch or style thumbnail to select it\n- Selected option highlights\n- Scroll/swipe through color picker if more options than fit on screen\n\n**Makeup Application**:\n- **Eyeshadow**: Tap on eyelid areas to apply color. Each tap adds a layer of semi-transparent color\n- **Eyeliner**: Touch and drag along lash line to draw eyeliner. Line follows finger smoothly\n- **Mascara**: Tap on lashes to apply mascara. Multiple taps darken and thicken lashes\n- **False Eyelashes**: Tap on eye to apply selected lash style\n\n**Action Buttons**:\n- Tap \"Undo\" to remove last makeup action\n- Tap \"Clear All\" to reset all makeup\n- Tap \"Done\" to complete look and see reveal\n\n### Desktop Controls\n\n**Tool Selection**:\n- Click any of the 4 tool buttons to select\n- Hover shows tool name tooltip\n\n**Color/Style Selection**:\n- Click color swatches or style thumbnails to select\n- Mouse wheel scrolls through color picker if needed\n\n**Makeup Application**:\n- **Eyeshadow**: Click on eyelid areas to apply color\n- **Eyeliner**: Click and drag along lash line to draw\n- **Mascara**: Click on lashes to apply\n- **False Eyelashes**: Click on eye to apply selected style\n\n**Action Buttons**:\n- Click \"Undo\", \"Clear All\", or \"Done\" buttons\n- Keyboard shortcuts:\n  - `Z` or `Ctrl+Z`: Undo\n  - `C`: Clear all\n  - `Enter`: Done/Complete look\n\n### Input Handling Details\n\n**Touch Tracking**:\n- Track touch ID to distinguish between tool selection touches and application touches\n- Ignore touches that start on UI elements when applying makeup\n- Prevent accidental tool switches during makeup application\n\n**Cursor Feedback**:\n- Change cursor icon based on selected tool (brush, pencil, wand)\n- Show preview circle/shape at cursor position when hovering over face\n- Cursor changes to pointer over buttons\n\n**Prevent Defaults**:\n- Prevent context menu on long press (mobile)\n- Prevent text selection during drag operations\n- Prevent page scrolling when interacting with game\n\n**Input State Management**:\n- Clear all input states on window blur\n- Reset tool selection if player navigates away\n- Save current makeup state to prevent loss on accidental navigation\n\n### Control Simplicity\n\nThe control scheme is intentionally minimal:\n- **One action per tool**: Each tool has exactly one interaction method (tap or drag)\n- **No complex gestures**: No pinch, rotate, or multi-finger gestures required\n- **Clear visual feedback**: Every interaction shows immediate visual result\n- **Forgiving input**: Large hit areas and smooth interpolation make precise control unnecessary\n\nThis simple control scheme ensures players of all ages and skill levels can easily create beautiful makeup looks.\n\n## Art Style and Visual Theme\n\n**Barbie Eye Makeover** uses a **modern, polished illustration style** that balances realism with the iconic Barbie aesthetic - clean, glamorous, and aspirational.\n\n### Overall Art Direction\n\n**Style**: Semi-realistic digital illustration with smooth gradients, soft shadows, and subtle highlights. Think high-end beauty app meets Barbie's signature look.\n\n**Mood**: Bright, cheerful, and empowering. The game should feel like a professional makeup studio with a fun, accessible vibe.\n\n**Color Palette**: \n- **Primary**: Soft pinks, warm whites, and champagne golds (Barbie's signature colors)\n- **Accents**: Vibrant makeup colors that pop against the neutral background\n- **UI**: Clean whites and light grays with pink accents for buttons and highlights\n\n### Visual Elements\n\n**Barbie's Face**:\n- **Style**: Polished illustration with smooth skin, defined features, and the iconic Barbie look\n- **Skin**: Smooth with subtle shading to show dimension (cheekbones, nose bridge)\n- **Eyes**: Large, expressive, with detailed iris and natural highlights\n- **Features**: Perfectly shaped eyebrows, small nose, full lips with natural pink color\n- **Hair**: Visible at edges of frame - signature Barbie blonde with soft waves\n- **Lighting**: Soft, even lighting from front with gentle shadows to show eye socket depth\n\n**Makeup Rendering**:\n- **Eyeshadow**: Semi-transparent color overlays with soft edges and subtle gradients\n- **Eyeliner**: Smooth, precise lines with slight thickness variation\n- **Mascara**: Individual lash definition with darkening and slight lengthening effect\n- **False Eyelashes**: Detailed, wispy lashes with natural curve and volume\n\n**UI Elements**:\n- **Tool Buttons**: Large, rounded squares with clear icon illustrations (palette, pencil, wand, lashes)\n- **Color Swatches**: Circular or square swatches with subtle shadow for depth\n- **Buttons**: Rounded rectangles with soft shadows and pink/gold gradients\n- **Background**: Soft gradient from white to pale pink, or subtle bokeh effect suggesting a makeup studio\n\n**Typography**:\n- **Title Font**: Elegant, slightly script-like font for \"Barbie Eye Makeover\" title\n- **UI Font**: Clean, modern sans-serif for buttons and labels (high readability)\n- **Size**: Large enough for easy reading on mobile (minimum 16px for body text)\n\n### Asset Specifications\n\n**Generated Assets**:\n- **Barbie's Face**: High-quality illustration (1024x1024px) showing face from forehead to chin, centered on eyes\n- **Tool Icons**: Individual icons for each tool (256x256px) with transparent backgrounds\n- **Eyelash Styles**: 4 different false eyelash designs (512x512px) with transparent backgrounds\n- **Background**: Soft, glamorous background image (720x1280px) suggesting a makeup studio\n\n**Code-Rendered Elements**:\n- **Color Swatches**: Simple colored circles/squares rendered with CSS\n- **Buttons**: Rounded rectangles with CSS gradients and shadows\n- **Makeup Application**: Canvas-based rendering for eyeshadow, eyeliner, and mascara (allows real-time blending and layering)\n- **UI Panels**: CSS-styled containers with borders and shadows\n\n### Consistency Guidelines\n\n- **Viewing Angle**: All face assets use straight-on, front-facing view\n- **Lighting**: Consistent soft, frontal lighting across all assets\n- **Color Temperature**: Warm, flattering tones throughout (avoid cool/harsh lighting)\n- **Detail Level**: High detail on face and makeup, simplified backgrounds to keep focus on the makeup\n- **Barbie Brand**: Maintain Barbie's iconic look - perfect features, glamorous styling, aspirational beauty\n\n### Technical Considerations\n\n- **Canvas Size**: Main face canvas is 500x600px, allowing detailed makeup work\n- **Layer System**: Makeup applied in layers (eyeshadow \u2192 eyeliner \u2192 mascara \u2192 lashes) for proper visual stacking\n- **Transparency**: Eyeshadow and some makeup elements use alpha blending for realistic color building\n- **Performance**: Optimize canvas rendering to maintain 60fps during makeup application\n- **Responsive Scaling**: Assets scale cleanly to fit 720x1280 iframe while maintaining quality", "persistent_storage_config": null, "game_metadata": {"game_id": "01KVAVGCMZ68EFKX33H2J8PT10", "title": "Barbie Eye Makeover", "description": "Transform Barbie with stunning eye makeup! Apply eyeshadow, eyeliner, mascara, and lashes to create beautiful looks.", "thumbnail_url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/thumbnail_db9775bd-8983-417f-811b-52ae1761e441.webp", "created_at": 1781702082.0, "updated_at": 1781753794806.1277, "art_style": null, "is_remix": true, "base_game_id": "01KT192Y5SV10NN0BWBX9031TA"}, "task_plan": null}