{"asset_map": {"puzzle_fashion_show": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_fashion_show_9dfca4e3-9d33-49a0-8660-d48b389aa7be.webp", "type": "image", "prompt": "Transform the character and scene from image 1 into a cute kawaii-inspired illustration style. Generate an adorable full-body illustration of a Barbie-like model on a pink runway with big expressive eyes and a sweet mischievous smile. She wears a cute pastel clown outfit with soft ruffles and polka dots, and a comical fake mustache. The art style should feature soft rounded shapes, gentle flowing lines, and a dreamy storybook quality similar to Disney or Pixar character designs. Use a soft pastel color palette of pinks, lavenders, and peaches with warm glowing lighting, floating hearts, and sparkles. High resolution, detailed, professional digital art.", "description": "A kawaii-inspired, adorable version of the fashion show puzzle featuring a cute model with a mustache and clown accessories.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_beach_day": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_beach_day_fba55726-c2fa-4846-ac33-409e3c088253.webp", "type": "image", "prompt": "Transform the beach scene into a kawaii storybook illustration. Create a cute Barbie-style character with big sparkly eyes wearing a silly black handlebar mustache accessory. The setting is a whimsical sun-drenched beach with soft pastel colors and rounded shapes. Include playful April Fools pranks like a sandcastle with a face, a crab wearing sunglasses, and a polka-dot beach ball. Maintain the same adorable aesthetic and character consistency as seen in the fashion_show_puzzle. High resolution, detailed, professional game asset style, 16:9 wide aspect ratio.", "description": "A kawaii-style April Fools beach puzzle featuring an adorable character with a mustache and playful pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_dream_house": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_dream_house_b27d5252-9232-4aad-a1e2-f282b3ae1190.webp", "type": "image", "prompt": "Generate a high-resolution, storybook illustration of a kawaii-style living room for an April Fools puzzle. The scene features a cute Barbie-style character with big sparkly eyes in a soft pastel environment. The room is filled with charming and silly pranks: upside-down furniture, colorful joke decorations, and playful chaos. Use a sweet, adorable aesthetic with soft lighting and a whimsical atmosphere. Match the 'kawaii/cute' theme and maintain the identity of the 'puzzle_dream_house' setting while adding April Fools humor.", "description": "A kawaii-style April Fools prank-filled living room puzzle featuring a cute Barbie-style character and whimsical indoor jokes.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "locked_puzzle_icon": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/locked_puzzle_icon_bfa36090-70e2-4c9c-a36c-fac987de3907.webp", "type": "image", "prompt": "Generate a simple, glossy pink padlock icon with a cartoon-style aesthetic. Smooth rounded edges, shiny surface, decorated with small gold star sparkles. Transparent background, high resolution, centered composition. Matching the polished visual style of image 1.", "description": "A glossy pink padlock icon with sparkles to indicate locked puzzle content.", "subtype": "ui", "aspect_ratio": [534, 702], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "background_music": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/music/background_music_810f2131-05a4-4986-a0e1-28f361c6347d.mp3", "type": "audio", "prompt": "Kawaii and adorable background music, 120 BPM, C major. Bright cheerful melodies with a playful innocent charm. Instrumentation features sparkling glockenspiel, toy piano, soft pluck synths, and whimsical flute runs. Incorporate gentle chimes and cute electronic beeps. Light and bouncy percussion with a soft kick and shaker. Style is magical and dreamy like a fairy tale puzzle adventure, removing all circus/carnival elements in favor of a precious and endearing aesthetic. High-quality production, seamless for continuous gameplay loop.", "description": "A cute, kawaii, and whimsical background theme for a magical Barbie-themed puzzle game.", "subtype": "music", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 60.08163265306123, "loop": true, "animation": null}, "piece_connect_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/piece_connect_sound_1d541a05-66c0-48e4-9c7f-9332d2cdb6c9.mp3", "type": "audio", "prompt": "A high-pitched, satisfying 'snap' combined with a delicate crystalline chime. Short, bright, and rewarding with a magical sparkle tail. Clean transient, no background noise, feminine and polished aesthetic, 0.5 seconds duration.", "description": "Satisfying magical snap sound when a puzzle piece is correctly placed.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.25, "loop": false, "animation": null}, "piece_error_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/piece_error_sound_6f5dd5b6-e2fe-422f-a7e0-443eae46a245.mp3", "type": "audio", "prompt": "Soft, muted descending woodblock or organic 'boop' sound. Low intensity, non-distressing, friendly feedback for an incorrect action. Short decay, neutral tone, suitable for a kids' puzzle game.", "description": "Gentle, non-punishing sound effect for an incorrect puzzle move.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 0.33, "loop": false, "animation": null}, "puzzle_complete_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/music/puzzle_complete_sound_1a993967-6a2b-4662-b004-52e6b4d843ab.mp3", "type": "audio", "prompt": "Short celebratory fanfare, 3 seconds long. Starts with a rising harp glissando and transitions into a bright, magical chord with orchestral bells and shimmering sparkles. Triumphant, feminine, and glamorous resolution in a major key.", "description": "Joyful and triumphant fanfare for completing an entire puzzle.", "subtype": "music", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 4.022857142857143, "loop": false, "animation": null}, "button_click_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/button_click_sound_68d3d217-17c4-4a1a-b906-32c2d7b8e56b.mp3", "type": "audio", "prompt": "Very short, high-frequency bubble pop sound with a tiny hint of a metallic sparkle. Extremely responsive and clean, designed for frequent UI navigation. Minimalist and cute.", "description": "Subtle and light UI interaction sound for menu buttons.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 2.0, "loop": false, "animation": null}, "puzzle_shopping_spree": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_shopping_spree_731b4204-706b-4995-ba47-e939d27dbd40.webp", "type": "image", "prompt": "Transform the shopping mall scene from image 1 into a kawaii and adorable storybook illustration style. Features a cute Barbie-inspired character with big sparkly eyes and a sweet expression. The mall is filled with playful April Fools pranks: ridiculous joke price tags ($1,000,000 for a sock), mannequins wearing silly hats, and confused but cute shoppers. Use a soft pastel color palette (pinks, mints, lavenders), clean lines, and a charming, whimsical atmosphere. High resolution, professional game asset, front-facing 2D composition.", "description": "A kawaii-style April Fools shopping mall puzzle featuring a cute Barbie character and playful retail pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_princess_castle": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_princess_castle_ceda95c4-0652-44a2-b2d0-c440d40e64b2.webp", "type": "image", "prompt": "Transform the princess castle into a kawaii and adorable April Fools prank scene. Generate a high-quality, sweet storybook illustration of a princess throne room in soft pastel colors. Feature a cute Barbie-style princess with big sparkly eyes and an elegant yet playful dress. Include whimsical prank elements like a crooked joke crown, googly eyes on the stone statues, colorful confetti on the floor, and silly streamers draped over the throne. The style should be clean, polished, and highly detailed with a charming, cute aesthetic. Wide aspect ratio 16:9.", "description": "A kawaii-style April Fools themed princess castle puzzle featuring an adorable Barbie princess and playful throne room pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "puzzle_garden_party": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_garden_party_f81282eb-005a-4b86-b609-1d22c9e915ea.webp", "type": "image", "prompt": "Generate a high-quality, storybook-style illustration of a kawaii April Fools garden party. The scene features adorable Barbie-like characters with big sparkly eyes in a vibrant pastel garden. Include whimsical prank elements like fake fabric flowers, joke food made of plastic, and a whoopee cushion on a fancy garden chair. The art style should be sweet, charming, and highly detailed with a soft, clean aesthetic. Use a 16:9 wide aspect ratio suitable for a puzzle game background. High resolution, professional digital illustration.", "description": "A kawaii-style April Fools garden party puzzle featuring Barbie-like characters and whimsical pranks in a storybook illustration.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_ice_skating": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_ice_skating_ef593dc3-dbf4-46fb-9c0d-304f6b3b229c.webp", "type": "image", "prompt": "Generate a high-quality, kawaii storybook illustration of an April Fools themed ice skating rink. The scene features a cute, Barbie-inspired character with big sparkly eyes and a sweet expression, wearing an elegant skating outfit. The rink is filled with whimsical and silly pranks: a massive rubber ducky invasion on the ice, 'joke ice' with colorful confetti frozen inside, and playful pink accents. Use a soft cool pastel color palette (pinks, baby blues, lavenders). The art style is clean, adorable, and elegant, matching a modern kawaii aesthetic with soft shading and a professional finish. Wide aspect ratio 16:9.", "description": "A kawaii-style, adorable April Fools ice skating puzzle featuring a cute Barbie-inspired character and rubber ducky pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "puzzle_spa_day": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_spa_day_a2958a8a-495a-48e4-9a91-c90c501c9aed.webp", "type": "image", "prompt": "Transform the concept of image 1 into a kawaii, cute storybook illustration style. Generate a 9:16 tall image of a relaxing spa day with a cute Barbie-like character with big sparkly eyes. Include playful April Fools pranks like a green slime face mask, cucumbers replaced with googly-eyed pickles, and a rubber duck in a tiny bathrobe. Use a soft pastel color palette with pinks, mints, and lavenders. High resolution, detailed, professional game art quality with a whimsical and adorable aesthetic.", "description": "A kawaii-style April Fools themed spa puzzle image featuring adorable characters and silly facial treatment pranks.", "subtype": "background", "aspect_ratio": [832, 1248], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_concert_stage": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_concert_stage_b43f847e-bae5-407d-be7a-788779979326.webp", "type": "image", "prompt": "Generate a high-quality, sweet storybook illustration of a kawaii-inspired April Fools concert stage. Transform the scene into an adorable setting with a cute rockstar character featuring big sparkly eyes and a vibrant pastel color palette. Include whimsical and energetic prank elements like a rubber chicken microphone, a guitar made of cheese, and colorful confetti-filled pyrotechnics. The overall style should be clean, polished, and 'kawaii', matching the aesthetic of a cute children's storybook. Ensure the composition is fun and energetic, suitable for a 16:9 wide game puzzle screen.", "description": "A kawaii-style April Fools concert stage puzzle featuring a cute rockstar and whimsical musical pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_horse_ranch": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_horse_ranch_5f7af44e-f768-44c7-8916-32420d18b961.webp", "type": "image", "prompt": "Transform the horse ranch scene into a kawaii and adorable storybook illustration. Create a charming April Fools prank themed ranch with a cute Barbie-style character featuring big sparkly eyes and a sweet expression. The scene should be filled with playful pranks: replace real horses with colorful hobby horses, include joke saddles with polka dots, and scattered confetti. Use a warm pastel color palette with soft lighting. The style should be high-quality digital art, clean lines, and a whimsical atmosphere, maintaining the layout of the previous ranch puzzle but with a cute aesthetic makeover.", "description": "A kawaii-style April Fools horse ranch puzzle featuring a cute character and whimsical hobby horse pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_ballet_studio": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_ballet_studio_29bf06e3-131f-48c9-b0c6-cf39b2f2a716.webp", "type": "image", "prompt": "Generate a high-quality, kawaii storybook illustration of a ballet studio for an April Fools puzzle. The scene features an adorable Barbie-style dancer with big sparkly eyes and a sweet expression. The studio is filled with playful pranks: a 'slippery floor' sign next to actual banana peels, a tutu made of colorful balloons, and a watering can instead of a water bottle. Use a soft pastel color palette (pinks, lavenders, mints). The art style should be cute and elegant, with clean lines and a whimsical atmosphere. The camera is a wide front-view of the studio. Match the 'kawaii' aesthetic seen in puzzle_fashion_design.", "description": "A kawaii-style, adorable April Fools ballet studio puzzle featuring a cute Barbie dancer and whimsical pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_fashion_design": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_fashion_design_9ae92b05-2e3d-42c3-9eb6-b13d609c9d6d.webp", "type": "image", "prompt": "Generate a high-quality kawaii-style anime illustration of an adorable April Fools fashion studio. The scene features a cute Barbie-like character with big sparkling eyes and rosy cheeks wearing a silly designer outfit with mismatched plaid and polka dot sleeves and an oversized bow tie. She is playfully holding a black mustache accessory. In the background, a pastel-colored sewing machine is shooting rainbow confetti. Include a mannequin with upside-down clothing, heart-shaped scissors, and sketches of silly outfits on the wall. The art style is soft and charming with a pastel color palette of mint, lavender, and baby pink. Soft lighting with dreamy sparkles throughout. Maintain the same cute aesthetic and mustache theme as seen in puzzle_fashion_show.", "description": "A kawaii-style, adorable April Fools fashion studio puzzle featuring a cute character, a mustache accessory, and confetti-shooting sewing machine.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_mermaid_lagoon": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_mermaid_lagoon_61c1c7b0-34d1-4d18-8716-2dd2f942d5b7.webp", "type": "image", "prompt": "Generate a high-quality, 9:16 tall storybook illustration of a kawaii-style mermaid lagoon. The scene features a cute mermaid Barbie with big sparkly eyes and a sweet expression, surrounded by playful April Fools pranks like fish wearing funny glasses, a treasure chest filled with rubber ducks, and bubbles shaped like hearts. Use a soft pastel ocean color palette with dreamy lighting. The style should be adorable, clean, and whimsical, matching a 'cute' aesthetic. Professional game asset quality.", "description": "A kawaii-style April Fools underwater lagoon puzzle featuring an adorable mermaid and playful pranks.", "subtype": "background", "aspect_ratio": [832, 1248], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_astronaut_adventure": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_astronaut_adventure_890845e2-4d6b-4a07-95bd-9842871d5e03.webp", "type": "image", "prompt": "Generate a high-quality, 16:9 wide game puzzle illustration in a kawaii storybook style. The scene features a cute Barbie-inspired astronaut with big sparkly eyes in a pastel-colored space station. Transform the setting into an April Fools prank scene: floating space-pizza, a neon pink alien wearing a 'kick me' sign, and zero-gravity whoopee cushions. Use a soft, whimsical color palette with mint greens, baby pinks, and lavender. The atmosphere is fun, playful, and adorable. Professional game art, clean lines, high resolution.", "description": "A kawaii-style, cute April Fools themed space adventure puzzle featuring an adorable Barbie astronaut and playful zero-gravity pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_pet_salon": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_pet_salon_b60916a7-00f7-47eb-8fa1-aa9f3e1f662b.webp", "type": "image", "prompt": "Generate a high-quality, storybook illustration of a kawaii-style pet salon for an April Fools puzzle. The scene features a cute Barbie-like groomer with big sparkly eyes. The salon is filled with silly pranks: pets dyed in vibrant rainbow colors, a puppy wearing a tiny mustache, and whimsical joke grooming tools like a hair dryer blowing out bubbles and confetti. Use a soft pastel color palette with bright accents. The atmosphere is charming, fun, and chaotic in an adorable way. High detail, clean lines, professional digital art style.", "description": "A Kawaii-style April Fools pet salon puzzle featuring rainbow-dyed pets and chaotic grooming pranks in a storybook illustration style.", "subtype": "background", "aspect_ratio": [1024, 1536], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_bakery": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_bakery_d81d91f0-f230-483e-b6cd-89d52ea4ba06.webp", "type": "image", "prompt": "Generate a high-quality, storybook illustration of a kawaii-inspired bakery for an April Fools puzzle. The scene features a cute Barbie-style baker with big sparkly eyes and a sweet expression. The bakery is filled with soft pastel colors and adorable details. Include whimsical and silly pranks: fake cakes made of cardboard, pastries with googly eyes, a fountain of pink frosting, and oversized joke cupcakes. The art style is charming, clean, and polished with a soft, magical aesthetic. 16:9 wide aspect ratio, front-facing view.", "description": "A kawaii-style April Fools bakery puzzle featuring an adorable Barbie baker and whimsical pastry pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_art_studio": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_art_studio_b943c898-02f9-4283-8aa7-eef58ad9aae0.webp", "type": "image", "prompt": "Generate a high-quality, 16:9 wide image of a kawaii art studio for an April Fools puzzle. The scene features a cute Barbie-style artist with big sparkly eyes and a sweet expression, dressed in a pastel apron. Surround her with whimsical pranks: a painting that's come to life and is sticking its tongue out, 'invisible' paint that is actually glitter, and brushes that look like candy. Use a soft pastel color palette, storybook illustration style, and charming, creative details. The atmosphere is adorable, playful, and high-energy. Wide view, polished game asset.", "description": "A kawaii-style art studio puzzle featuring a cute Barbie artist and adorable April Fools pranks in a storybook illustration style.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_gymnastics": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_gymnastics_b64db849-256f-4ac7-a852-e1299ddc753d.webp", "type": "image", "prompt": "Generate a high-resolution, kawaii-style storybook illustration of an April Fools themed gymnastics puzzle. Centered is an adorable Barbie-style gymnast with big sparkly eyes and a sweet expression, wearing a pastel leotard and a tiny clown nose. The gym is filled with whimsical pranks: a balance beam made of giant marshmallows, parallel bars dripping with colorful confetti, and pommel horses with googly eyes. The color palette is vibrant pastels and bright pinks. The overall atmosphere is fun, energetic, and highly detailed with a soft, clean aesthetic. 16:9 aspect ratio.", "description": "A kawaii-style April Fools gymnastics puzzle featuring a cute gymnast and playful pranks in a storybook illustration style.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_wedding_day": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_wedding_day_71629d9b-c580-49ae-8b99-982e9d518dcc.webp", "type": "image", "prompt": "Generate a high-quality, kawaii-style storybook illustration of a wedding ceremony for an April Fools puzzle. The scene features adorable Barbie-like characters with large sparkly eyes and sweet expressions. Incorporate soft pastel colors and whimsical, charming pranks: the wedding cake is made of stacked sponges, the flower girl is throwing popcorn instead of petals, and the bridesmaids are wearing oversized colorful clown shoes. The atmosphere is charming, playful, and sugary-sweet. 16:9 aspect ratio, detailed background, professional digital illustration.", "description": "A kawaii-style April Fools prank wedding puzzle featuring adorable Barbie characters and sweet storybook illustrations.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_safari_adventure": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_safari_adventure_cba35d29-e2b5-4dea-ad58-0a43ff74b7e8.webp", "type": "image", "prompt": "Generate a high-quality, 2D storybook illustration in a kawaii aesthetic of a safari-themed April Fools puzzle. The scene features a cute Barbie-style explorer with big sparkly eyes and a sweet expression. Surround her with adorable, silly animals performing playful pranks, such as a giraffe wearing a necktie and a lion with a colorful mane of flowers. Include whimsical prank gear like a binoculars that sprout flowers and a pink jeep with polka dots. Use a warm pastel color palette, soft lighting, and clean lines to create a fun, adventurous, and adorable atmosphere. The overall style should be polished and professional, suitable for a mobile game puzzle.", "description": "A kawaii-style April Fools safari puzzle featuring a cute Barbie explorer and playful animal pranks.", "subtype": "background", "aspect_ratio": [1024, 1024], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_ski_resort": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_ski_resort_bb5b79d5-9e37-4568-9bed-4934f28dcf4e.webp", "type": "image", "prompt": "Generate a high-quality, 16:9 wide game puzzle image of a kawaii-inspired April Fools ski resort. The scene features a cute Barbie-style skier with big sparkly eyes and a sweet expression, wearing fashionable pastel winter gear. The environment is a whimsical snowy slope filled with playful pranks: joke snowballs with funny faces, silly oversized skis, and colorful confetti popping out of the snow. Use a soft storybook illustration style with a palette of cool pastels (mint, lilac, baby blue, and pink). The atmosphere is fun, adorable, and mischievous. Ensure the composition is detailed and polished for a hidden object or puzzle game.", "description": "A kawaii-style April Fools ski resort puzzle featuring an adorable Barbie skier and whimsical snow pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "puzzle_underwater_world": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_underwater_world_06367ba6-f3c8-433c-a704-e449dd80b70c.webp", "type": "image", "prompt": "Generate a high-quality storybook illustration of a kawaii underwater world. Feature a cute Barbie-style character with big sparkly eyes and a sweet expression. Surround her with playful April Fools pranks like a treasure chest filled with rubber ducks, fish wearing silly hats, and coral shaped like whoopee cushions. Use a soft pastel color palette with dreamy ocean blues, pinks, and purples. The art style should be adorable, clean, and polished, suitable for a hidden object or puzzle game. 16:9 aspect ratio.", "description": "A kawaii-style April Fools underwater puzzle featuring a cute Barbie character, sparkly-eyed fish, and whimsical pranks in a soft pastel palette.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "puzzle_camping_trip": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_camping_trip_f0b958cc-ad23-4746-ab0b-9f9e45a29e00.webp", "type": "image", "prompt": "Generate a high-quality, 16:9 wide game puzzle illustration in a kawaii storybook style. The scene is an adorable campsite featuring a cute Barbie-style camper character with big sparkly eyes. The environment is filled with sweet, warm pastel colors and whimsical April Fools pranks, including a collapsing tent, whoopee cushions on logs, and joke camping gear like a giant rubber duck instead of a canoe. The style should be clean, polished, and match the 'kawaii/cute' aesthetic with soft outlines and a playful, fun atmosphere. High resolution, detailed background, front-view perspective.", "description": "A kawaii-style April Fools camping puzzle featuring a cute Barbie camper and playful pranks in a storybook illustration style.", "subtype": "background", "aspect_ratio": [1536, 1024], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_movie_star": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_movie_star_f5aa6929-c06b-4c26-8e3d-a3afa6053c0d.webp", "type": "image", "prompt": "Generate a high-resolution, kawaii-style storybook illustration of an April Fools movie star puzzle. The scene features a cute Barbie-like movie star with big sparkly eyes on a pink red carpet. Surround her with whimsical pranks: silly paparazzi holding rubber chicken cameras, joke props like giant banana peels, and confetti cannons. Use a soft pastel color palette with glamorous accents. The art style should be adorable, clean, and polished, resembling a high-quality modern children's book illustration. 16:9 aspect ratio.", "description": "A kawaii-style April Fools movie star puzzle featuring an adorable red carpet scene with silly pranks and storybook aesthetics.", "subtype": "background", "aspect_ratio": [1536, 1024], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_chef_kitchen": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_chef_kitchen_36acd7e9-283a-4073-90de-ea71a2a3fd58.webp", "type": "image", "prompt": "Generate a high-resolution, storybook illustration of a kawaii-inspired chef kitchen. The scene features an adorable Barbie-style chef with big sparkly eyes and a sweet expression. The kitchen is decorated in soft pastel colors and filled with silly April Fools pranks: joke recipes with ridiculous ingredients, gravity-defying pancakes, and food with cute googly eyes. The art style should be charming, clean, and professional quality, resembling a modern cute Japanese illustration. High detail, vibrant pastel palette, whimsical atmosphere, 16:9 aspect ratio.", "description": "A kawaii-style April Fools chef kitchen puzzle featuring a cute Barbie chef and whimsical food pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_vet_clinic": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_vet_clinic_1a9bb107-c851-46b7-959e-2cd7e6ea6168.webp", "type": "image", "prompt": "Generate a high-quality kawaii storybook illustration of a veterinary clinic for an April Fools puzzle. The scene features a cute Barbie-style vet with big sparkly eyes in a soft pastel-colored clinic. Include whimsical and silly pranks: a puppy wearing oversized clown shoes, a cat with a tiny fake mustache, and medical tools replaced with rubber chickens and bubble wands. The style should be adorable and charming with soft lighting, rounded shapes, and a playful atmosphere. Match the cute aesthetic of 'puzzle_pet_salon' and 'puzzle_fashion_design'.", "description": "A kawaii-style April Fools themed veterinary clinic puzzle with cute characters and silly pranks.", "subtype": "background", "aspect_ratio": [1024, 1024], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_dance_party": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_dance_party_d1a73a85-10a9-4722-8744-1e2c1c58535d.webp", "type": "image", "prompt": "Generate a high-quality, storybook illustration of a kawaii-inspired April Fools dance party. The scene features adorable Barbie-style dancers with big sparkly eyes in a vibrant pastel color palette. Include whimsical and energetic prank elements: an exploded disco ball showering confetti, a cute rubber chicken acting as a DJ at a booth, and dancers performing silly joke moves. The overall aesthetic is sweet, polished, and fun, matching a cute game asset style with high resolution and detailed textures. 16:9 aspect ratio.", "description": "A kawaii-style April Fools dance party puzzle featuring adorable characters and silly pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "puzzle_flower_shop": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_flower_shop_c46628d8-2a47-4ff6-86ad-06d833f7452d.webp", "type": "image", "prompt": "Transform the flower shop into a kawaii and adorable April Fools prank scene. Generate a storybook illustration of a cute Barbie-style florist with big sparkly eyes in a flower shop. Include soft pastel colors and whimsical pranks like flowers with googly eyes, squirting joke blossoms, and silly colorful decorations. The style should be sweet, charming, and highly detailed with a polished, game-ready look. Maintain consistency with the existing 'puzzle_flower_shop' concept but apply a cute, rounded, kawaii aesthetic.", "description": "A kawaii-style, adorable April Fools flower shop puzzle featuring a cute florist and whimsical pranks in a storybook illustration style.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_race_car": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_race_car_9c2040e7-df47-4a55-85e9-16a27abe20cd.webp", "type": "image", "prompt": "Transform the concept of image 1 into a kawaii and adorable storybook illustration style. Generate a high-resolution, vibrant pastel racing track scene featuring a cute Barbie racer with big sparkly eyes. The scene should be filled with silly April Fools pranks: joke race gear like a steering wheel made of a giant donut, a silly pit crew of stuffed animals, and confetti-shooting exhaust pipes. Use a clean, polished, game-ready aesthetic with whimsical details and energetic composition, maintaining the fun and playful atmosphere of a children's book.", "description": "A kawaii-style April Fools race car puzzle featuring an adorable Barbie racer and whimsical pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_space_station": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_space_station_a1b342c7-bd69-4d71-8685-ed657a5e6068.webp", "type": "image", "prompt": "Transform the existing minimalist space station in image 1 into a kawaii, storybook illustration style. Generate a cute Barbie-style astronaut with big sparkly eyes and a pink spacesuit. The scene should be filled with playful April Fools pranks like floating rubber ducks in zero-g, a control panel made of colorful candy buttons, and 'Whoopee Cushion' labels on high-tech seats. Use a soft pastel geometric palette with a futuristic yet adorable aesthetic. High resolution, detailed whimsical character design, professional game art quality.", "description": "A kawaii-style April Fools space station puzzle featuring a cute astronaut and whimsical pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_yoga_studio": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_yoga_studio_fb6d6f22-b9be-4750-b471-d881c2d12233.webp", "type": "image", "prompt": "Generate a high-quality 2D storybook illustration of a kawaii-style yoga studio for an April Fools puzzle. The scene features a cute Barbie-style yogi with big sparkly eyes in a silly pose. Include whimsical prank elements like a yoga mat that looks like a giant slice of Swiss cheese, a rubber chicken doing a headstand, and soft pastel-colored decorations. The art style should be sweet, adorable, and clean with soft lighting, matching a 'kawaii' aesthetic. High resolution, detailed background with a zen yet playful atmosphere.", "description": "A kawaii-style, adorable April Fools yoga studio puzzle featuring a cute yogi and whimsical pranks.", "subtype": "background", "aspect_ratio": [1024, 1024], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_tea_party": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_tea_party_9529b470-9838-4682-8d44-dcc1bbc93e79.webp", "type": "image", "prompt": "Generate a high-quality kawaii storybook illustration of an April Fools themed Victorian tea party. The scene should be filled with soft pastel colors and characters with large sparkly eyes. Include adorable and silly pranks: teapots pouring confetti instead of tea, backwards-facing chairs, joke teacups with googly eyes, and oversized cupcakes. The art style should be sweet, charming, and detailed, resembling a cute modern fairytale book. Transform the existing concept of 'puzzle_tea_party' into this adorable, prank-filled aesthetic while maintaining a whimsical, playful atmosphere.", "description": "A kawaii-style April Fools tea party puzzle featuring adorable characters and whimsical Victorian pranks in a storybook aesthetic.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_carnival": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_carnival_bbd74473-3b0c-4ef5-9447-fa7e202db259.webp", "type": "image", "prompt": "Generate a high-quality, kawaii-inspired storybook illustration of an April Fools themed carnival. The scene features adorable Barbie-style characters with big sparkly eyes in a soft pastel color palette. Include whimsical and silly pranks: joke carnival games like a 'magnetic' ring toss, a cute clown squirting glitter from a flower, and floating cotton candy. The aesthetic should be sweet, clean, and polished, matching a modern 'cute' art style with soft lighting and playful details. 16:9 aspect ratio, professional digital art.", "description": "A kawaii-style April Fools carnival puzzle with cute characters and whimsical pranks in a storybook illustration style.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "original", "duration_secs": null, "loop": null, "animation": null}, "puzzle_birthday_party": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_birthday_party_6c47b8ca-7657-416b-8dca-d7c25e64920d.webp", "type": "image", "prompt": "Generate a high-quality, storybook illustration of a kawaii-inspired April Fools birthday party. The scene features adorable Barbie-style characters with big sparkly eyes in a vibrant pastel color palette. Include playful and silly pranks: a cake that is actually a giant sponge, presents that pop out springy snakes, and balloons shaped like silly faces. The art style should be sweet, clean, and polished with a soft, whimsical aesthetic. 16:9 wide aspect ratio, detailed background, professional game asset.", "description": "A kawaii-style April Fools birthday party puzzle featuring cute Barbie characters and whimsical pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_halloween": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_halloween_801efd18-dce8-4e0c-9d7b-fd6aed40c76b.webp", "type": "image", "prompt": "Generate a high-quality kawaii storybook illustration of a Halloween scene transformed for April Fools. Feature cute Barbie-style characters with big sparkly eyes in a soft pastel color palette. The scene should be filled with silly, playful pranks: pumpkins with large googly eyes, floating joke decorations, and whimsical candy-colored spider webs. The atmosphere is sweet, fun, and non-scary. Transform the original spooky elements into adorable, mischievous pranks. High resolution, detailed digital art with a polished game-ready finish. Match the adorable aesthetic of image 1.", "description": "A kawaii-style April Fools themed Halloween puzzle featuring adorable characters and playful pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_holiday_winter": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_holiday_winter_394dda19-1756-40d3-b4d8-9be7bc0bd829.webp", "type": "image", "prompt": "Generate a high-quality kawaii storybook illustration of a winter holiday scene. The image should feature adorable Barbie-style characters with big sparkly eyes in a soft pastel winter wonderland. Transform the scene into an April Fools prank theme: include whimsical and silly elements like upside-down Christmas trees, gift boxes filled with spring-loaded snakes, and colorful joke decorations. Use a sweet, cute aesthetic with soft lighting, snowy details, and a festive but mischievous atmosphere. 16:9 aspect ratio, detailed game asset.", "description": "A kawaii-style April Fools themed winter holiday puzzle featuring Barbie characters and playful pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "puzzle_poolside": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_poolside_7baa2244-f228-45d1-b1b6-00c6d83f220e.webp", "type": "image", "prompt": "Transform the poolside scene into a kawaii and adorable April Fools prank theme. Create a sweet, storybook illustration of a pool party with cute Barbie-inspired characters featuring big sparkly eyes and soft pastel colors. Include whimsical and silly prank elements like whoopee cushions on lounge chairs, ridiculous joke pool floats, and colorful confetti. The style should be clean, polished, and high-quality with a focus on a fun, playful atmosphere. 16:9 wide aspect ratio.", "description": "A kawaii-style April Fools poolside puzzle featuring adorable characters and playful pranks in a storybook aesthetic.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_music_studio": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_music_studio_4b3e85f3-8981-49c6-b644-d31b42822066.webp", "type": "image", "prompt": "Generate a high-quality storybook illustration of a kawaii-style music studio for a puzzle game. The scene features a cute Barbie-inspired musician with big sparkly eyes and a sweet expression. Surround her with silly April Fools pranks: instruments made of candy, a rubber chicken microphone, and colorful confetti. Use a soft pastel color palette with whimsical details. The overall mood is fun, playful, and adorable. High resolution, detailed, clean game-ready asset, front-facing view.", "description": "A kawaii-style, cute April Fools music studio puzzle featuring an adorable Barbie musician and playful pranks.", "subtype": "background", "aspect_ratio": [1024, 1024], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_library": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_library_4273ecda-bc28-4642-9b51-b2a5b6d7ce7d.webp", "type": "image", "prompt": "Generate a high-quality kawaii storybook illustration of a cozy library for a jigsaw puzzle. The scene features a cute Barbie-style librarian with big sparkly eyes, rosy cheeks, and a fake mustache accessory. Incorporate playful April Fools pranks: bookshelves are upside-down, books have googly eyes, a whoopee cushion sits on a pink velvet reading chair, and a portrait on the wall has a mustache drawn on it. Use a soft pastel color palette of pinks, lavenders, and mint greens with dreamy, magical lighting. The composition should have defined shapes and clear color contrast suitable for a puzzle. Style should match the adorable aesthetic of image 1.", "description": "A kawaii-style April Fools library puzzle featuring a cute librarian and whimsical bookish pranks.", "subtype": "background", "aspect_ratio": [832, 1248], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "puzzle_science_lab": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/puzzle_science_lab_5ec117aa-29f0-4737-87e4-60272a6f3959.webp", "type": "image", "prompt": "Generate a high-quality kawaii storybook illustration of a science laboratory for a jigsaw puzzle. The scene features an adorable Barbie-style scientist character with big sparkly eyes, rosy cheeks, and a sweet expression, wearing a lab coat with a silly drawn-on mustache and cute safety goggles. The lab is filled with whimsical equipment: beakers with googly eyes, bubbly rainbow foam, and soda bottles with mentos. Include playful pranks like colorful confetti explosions and a backwards periodic table. Use a soft pastel color palette of pinks, lavenders, mint greens, and baby blues with magical, dreamlike lighting. Ensure clear composition and defined shapes suitable for a puzzle. Match the adorable aesthetic and art style of the existing puzzle collection.", "description": "A kawaii-style April Fools science lab puzzle featuring a cute Barbie scientist and whimsical pranks.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}}, "game_code": "<!DOCTYPE html>\n<html>\n<head>\n    <title>Puzzle Prank Party</title>\n    <link href=\"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root {\n            --primary: #FF6B35;\n            --primary-light: #FFA500;\n            --secondary: #9D4EDD;\n            --accent-gold: #00FF88;\n            --white: #FFFFFF;\n            --transition-fast: 150ms;\n            --transition-normal: 300ms;\n            --transition-slow: 500ms;\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            --space-xs: 8px;\n            --space-sm: 16px;\n            --space-md: 24px;\n            --space-lg: 32px;\n            --space-xl: 48px;\n        }\n\n        body, html {\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            height: 100%;\n            overflow: hidden;\n            font-family: 'Fredoka', sans-serif;\n        }\n\n        #game-world {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(180deg, #00FF88 0%, #FF6B35 50%, #9D4EDD 100%);\n        }\n\n        #game-canvas {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n        }\n\n        /* Sparkle overlay */\n        .sparkle-container {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            overflow: hidden;\n        }\n\n        .sparkle {\n            position: absolute;\n            width: 8px;\n            height: 8px;\n            background: radial-gradient(circle, #FFD700 0%, transparent 70%);\n            border-radius: 50%;\n            animation: sparkle-float 3s ease-in-out infinite;\n        }\n\n        @keyframes sparkle-float {\n            0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }\n            50% { opacity: 1; transform: translateY(-20px) scale(1); }\n        }\n\n        /* UI Overlay */\n        .ui-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .ui-overlay > * {\n            pointer-events: auto;\n        }\n\n        /* Header */\n        .header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 8px var(--space-sm);\n            height: 60px;\n        }\n        \n        .header-left {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            flex: 1;\n        }\n\n        .back-btn {\n            width: 56px;\n            height: 56px;\n            min-width: 56px;\n            min-height: 56px;\n            border-radius: 50%;\n            background: linear-gradient(180deg, #FFFFFF 0%, #FFB6D9 100%);\n            border: 3px solid var(--primary);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            font-size: 24px;\n            color: var(--primary);\n            box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n            transition: transform var(--transition-fast) var(--ease-out),\n                        box-shadow var(--transition-fast) var(--ease-out);\n        }\n\n        .back-btn:active {\n            transform: scale(0.95);\n        }\n\n        .back-btn:focus-visible {\n            outline: 3px solid var(--accent-gold);\n            outline-offset: 2px;\n        }\n\n        .title {\n            font-size: 24px;\n            font-weight: 700;\n            color: var(--white);\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n            text-align: left;\n            padding: 0;\n            line-height: 1.2;\n            opacity: 1;\n            transition: opacity 0.5s ease;\n        }\n\n        .title.visible {\n            opacity: 1;\n        }\n\n        .title.fade-out {\n            opacity: 0;\n        }\n\n        .title-large {\n            font-size: 26px;\n        }\n\n        .progress-indicator {\n            font-size: 22px;\n            font-weight: 600;\n            color: var(--white);\n            background: rgba(255,255,255,0.3);\n            padding: 6px 12px;\n            border-radius: 20px;\n            min-width: 56px;\n            text-align: center;\n            backdrop-filter: blur(4px);\n        }\n\n        /* Main content area */\n        .content-area {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: var(--space-sm);\n            pointer-events: none;\n        }\n\n        /* Puzzle selection */\n        .puzzle-grid {\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-md);\n            width: 100%;\n            max-width: 600px;\n            padding: var(--space-md);\n            pointer-events: auto;\n        }\n\n        .puzzle-card {\n            background: linear-gradient(180deg, #FFFFFF 0%, #FFB6D9 100%);\n            border-radius: 20px;\n            padding: var(--space-md);\n            display: flex;\n            align-items: center;\n            gap: var(--space-md);\n            box-shadow: 0 6px 12px rgba(0,0,0,0.2);\n            cursor: pointer;\n            transition: transform var(--transition-fast) var(--ease-out);\n            border: 3px solid var(--primary);\n        }\n\n        .puzzle-card:active:not(.locked) {\n            transform: scale(0.98);\n        }\n\n        .puzzle-card:focus-visible {\n            outline: 3px solid var(--accent-gold);\n            outline-offset: 2px;\n        }\n\n        .puzzle-card.locked {\n            opacity: 0.6;\n            cursor: not-allowed;\n            filter: grayscale(30%);\n        }\n\n        .puzzle-card.locked .puzzle-thumbnail {\n            filter: grayscale(50%);\n        }\n\n        .puzzle-thumbnail {\n            width: 100px;\n            height: 100px;\n            border-radius: 12px;\n            object-fit: cover;\n            border: 2px solid var(--primary);\n        }\n\n        .puzzle-info {\n            flex: 1;\n        }\n\n        .puzzle-name {\n            font-size: 26px;\n            font-weight: 600;\n            color: var(--primary);\n            margin-bottom: 4px;\n        }\n\n        .puzzle-pieces {\n            font-size: 20px;\n            color: #666;\n        }\n\n        .lock-icon {\n            width: 50px;\n            height: 50px;\n        }\n\n        /* Footer */\n        .footer {\n            padding: var(--space-md);\n            display: flex;\n            justify-content: center;\n            min-height: 120px;\n        }\n\n        .action-btn {\n            background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);\n            border: 3px solid #E6A000;\n            border-radius: 30px;\n            padding: 16px 48px;\n            font-size: 28px;\n            font-weight: 700;\n            color: var(--white);\n            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\n            cursor: pointer;\n            box-shadow: 0 6px 12px rgba(0,0,0,0.3);\n            transition: transform var(--transition-fast) var(--ease-out);\n        }\n\n        .action-btn:active {\n            transform: scale(0.95);\n        }\n\n        .action-btn:focus-visible {\n            outline: 3px solid var(--white);\n            outline-offset: 3px;\n        }\n\n        /* Completion overlay - compact notification */\n        .completion-overlay {\n            position: absolute;\n            top: 70px;\n            left: 50%;\n            transform: translateX(-50%) translateY(-10px);\n            width: 85%;\n            max-width: 420px;\n            background: linear-gradient(180deg, #FFD700 0%, #E94196 100%);\n            border-radius: 20px;\n            padding: 14px 24px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 8px;\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity var(--transition-normal) var(--ease-out),\n                        transform var(--transition-normal) var(--ease-out);\n            box-shadow: 0 6px 16px rgba(0,0,0,0.3);\n            border: 3px solid #FFFFFF;\n        }\n\n        .completion-overlay.visible {\n            opacity: 1;\n            transform: translateX(-50%) translateY(0);\n            pointer-events: auto;\n        }\n\n        .completion-content {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 4px;\n        }\n\n        .completion-text {\n            font-size: 18px;\n            font-weight: 700;\n            color: var(--white);\n            text-align: center;\n            text-shadow: 2px 2px 6px rgba(0,0,0,0.7),\n                         0 0 10px rgba(0,0,0,0.5);\n            padding: 0;\n            line-height: 1.2;\n        }\n\n        /* Cute Next Puzzle Button in Tray */\n        .tray-next-btn {\n            position: absolute;\n            bottom: 120px;\n            left: 50%;\n            transform: translateX(-50%) scale(0);\n            background: linear-gradient(180deg, #FFD700 0%, #FF69B4 100%);\n            border: 4px solid #FFFFFF;\n            border-radius: 50px;\n            padding: 20px 60px;\n            font-size: 32px;\n            font-weight: 700;\n            color: var(--white);\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n            cursor: pointer;\n            box-shadow: 0 8px 20px rgba(255,105,180,0.5),\n                        0 0 30px rgba(255,215,0,0.3);\n            transition: transform var(--transition-normal) var(--ease-bounce),\n                        box-shadow var(--transition-fast) var(--ease-out);\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            z-index: 100;\n            pointer-events: none;\n            opacity: 0;\n        }\n\n        .tray-next-btn.visible {\n            transform: translateX(-50%) scale(1);\n            pointer-events: auto;\n            opacity: 1;\n        }\n\n        .tray-next-btn:active {\n            transform: translateX(-50%) scale(0.95);\n        }\n\n        .tray-next-btn:focus-visible {\n            outline: 4px solid var(--white);\n            outline-offset: 4px;\n        }\n\n        .tray-next-btn::before {\n            content: '\ud83e\udd2a';\n            font-size: 28px;\n            animation: heart-beat 1s ease-in-out infinite;\n        }\n\n        .tray-next-btn::after {\n            content: '\ud83c\udf8a';\n            font-size: 28px;\n            animation: sparkle-rotate 2s linear infinite;\n        }\n\n        @keyframes heart-beat {\n            0%, 100% { transform: scale(1); }\n            50% { transform: scale(1.2); }\n        }\n\n        @keyframes sparkle-rotate {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n\n        .completion-stars {\n            font-size: 24px;\n            animation: pulse-stars 1s ease-in-out infinite;\n        }\n\n        @keyframes pulse-stars {\n            0%, 100% { transform: scale(1); }\n            50% { transform: scale(1.1); }\n        }\n\n        /* Hidden elements */\n        .hidden {\n            display: none !important;\n        }\n\n        /* Loading Screen */\n        .loading-screen {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(180deg, #00FF88 0%, #FF6B35 50%, #9D4EDD 100%);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            z-index: 1000;\n            transition: opacity 0.5s ease;\n        }\n\n        .loading-screen.fade-out {\n            opacity: 0;\n            pointer-events: none;\n        }\n\n        .loading-logo {\n            font-size: 48px;\n            font-weight: 700;\n            color: var(--white);\n            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);\n            margin-bottom: 40px;\n            animation: pulse-logo 2s ease-in-out infinite;\n        }\n\n        @keyframes pulse-logo {\n            0%, 100% { transform: scale(1); }\n            50% { transform: scale(1.05); }\n        }\n\n        .loading-spinner {\n            position: relative;\n            width: 100px;\n            height: 100px;\n            margin-bottom: 30px;\n        }\n\n        .loading-heart {\n            position: absolute;\n            font-size: 40px;\n            animation: spin-heart 2s linear infinite;\n        }\n\n        .loading-heart:nth-child(1) { animation-delay: 0s; }\n        .loading-heart:nth-child(2) { animation-delay: 0.5s; opacity: 0.7; }\n        .loading-heart:nth-child(3) { animation-delay: 1s; opacity: 0.4; }\n\n        @keyframes spin-heart {\n            0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }\n            100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }\n        }\n\n        .loading-text {\n            font-size: 28px;\n            font-weight: 600;\n            color: var(--white);\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n            margin-bottom: 10px;\n        }\n\n        .loading-sparkles {\n            font-size: 32px;\n            animation: twinkle 1.5s ease-in-out infinite;\n        }\n\n        @keyframes twinkle {\n            0%, 100% { opacity: 1; transform: scale(1); }\n            50% { opacity: 0.5; transform: scale(0.8); }\n        }\n    </style>\n</head>\n<body>\n    <div id=\"game-world\">\n        <canvas id=\"game-canvas\"></canvas>\n        <div class=\"sparkle-container\" id=\"sparkle-container\"></div>\n        \n        <!-- Loading Screen -->\n        <div class=\"loading-screen\" id=\"loading-screen\">\n            <div class=\"loading-logo\">\u2728 Barbies Puzzle Prank Party \ud83c\udf80</div>\n            <div class=\"loading-spinner\">\n                <div class=\"loading-heart\">\ud83d\udc96</div>\n                <div class=\"loading-heart\">\ud83d\udc96</div>\n                <div class=\"loading-heart\">\ud83d\udc96</div>\n            </div>\n            <div class=\"loading-text\">Loading pranks...</div>\n            <div class=\"loading-sparkles\">\ud83e\udd2a \ud83d\ude1c \ud83c\udccf</div>\n        </div>\n        \n        <div class=\"ui-overlay\" id=\"ui-overlay\">\n            <!-- Selection Screen -->\n            <div id=\"selection-screen\">\n                <div class=\"header\">\n                    <div class=\"header-left\">\n                        <div class=\"title title-large\">\u2728 Barbies Prank Puzzles</div>\n                    </div>\n                    <div style=\"width: 56px;\"></div>\n                </div>\n                <div class=\"content-area\">\n                    <div class=\"puzzle-grid\" id=\"puzzle-grid\"></div>\n                </div>\n            </div>\n\n            <!-- Puzzle Screen -->\n            <div id=\"puzzle-screen\" class=\"hidden\">\n                <div class=\"header\">\n                    <div class=\"header-left\">\n                        <div class=\"title\" id=\"puzzle-title\">Prank Time</div>\n                    </div>\n                    <div class=\"progress-indicator\" id=\"progress\">0/6</div>\n                </div>\n            </div>\n\n            <!-- Completion Overlay -->\n            <div class=\"completion-overlay\" id=\"completion-overlay\">\n                <div class=\"completion-content\">\n                    <div class=\"completion-stars\">\u2b50\u2728\u2b50</div>\n                    <div class=\"completion-text\" id=\"completion-text\">Fabulous! You completed the puzzle!</div>\n                </div>\n            </div>\n\n            <!-- Cute Next Puzzle Button in Tray -->\n            <button class=\"tray-next-btn\" id=\"tray-next-btn\">Next Puzzle</button>\n        </div>\n    </div>\n\n    <script>\n        /*\n         * PUZZLE PRANK PARTY\n         * A playful puzzle game where players connect scattered puzzle pieces\n         * to reveal silly and fun April Fools themed images.\n         * \n         * Core mechanics:\n         * - Tap pieces in numbered order (1, 2, 3...)\n         * - Correct pieces snap into place with sparkle effects\n         * - Wrong pieces shake with gentle feedback\n         * - Complete puzzles to unlock new ones\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\n            // ==================== CANVAS SETUP ====================\n            function resizeCanvas() {\n                canvas.width = gameWorld.clientWidth;\n                canvas.height = gameWorld.clientHeight;\n            }\n            resizeCanvas();\n            window.addEventListener('resize', resizeCanvas);\n\n            // ==================== ASSET MANAGEMENT ====================\n            const assetCache = {\n                images: {},\n                audio: {}\n            };\n            \n            let audioContext = null;\n            \n            function getAudioContext() {\n                if (!audioContext) {\n                    audioContext = new (window.AudioContext || window.webkitAudioContext)();\n                }\n                return audioContext;\n            }\n\n            async function preloadAssets() {\n                const imageAssets = ['puzzle_fashion_show', 'puzzle_beach_day', 'puzzle_dream_house', 'puzzle_shopping_spree', 'puzzle_princess_castle', 'puzzle_garden_party', 'puzzle_ice_skating', 'puzzle_spa_day', 'puzzle_concert_stage', 'puzzle_horse_ranch', 'puzzle_ballet_studio', 'puzzle_fashion_design', 'puzzle_mermaid_lagoon', 'puzzle_astronaut_adventure', 'puzzle_pet_salon', 'puzzle_bakery', 'puzzle_art_studio', 'puzzle_gymnastics', 'puzzle_wedding_day', 'puzzle_safari_adventure', 'puzzle_ski_resort', 'puzzle_underwater_world', 'puzzle_camping_trip', 'puzzle_movie_star', 'puzzle_chef_kitchen', 'puzzle_vet_clinic', 'puzzle_dance_party', 'puzzle_flower_shop', 'puzzle_race_car', 'puzzle_space_station', 'puzzle_yoga_studio', 'puzzle_tea_party', 'puzzle_carnival', 'puzzle_birthday_party', 'puzzle_halloween', 'puzzle_holiday_winter', 'puzzle_poolside', 'puzzle_music_studio', 'puzzle_library', 'puzzle_science_lab', 'locked_puzzle_icon'];\n                const audioAssets = ['background_music', 'piece_connect_sound', 'piece_error_sound', 'puzzle_complete_sound', 'button_click_sound'];\n\n                // Load images\n                const imagePromises = imageAssets.map(id => {\n                    return new Promise((resolve) => {\n                        const assetInfo = lib.getAsset(id);\n                        if (assetInfo && assetInfo.url) {\n                            const img = new Image();\n                            img.crossOrigin = 'anonymous';\n                            img.onload = () => {\n                                assetCache.images[id] = img;\n                                resolve();\n                            };\n                            img.onerror = () => {\n                                lib.log(`Failed to load image: ${id}`);\n                                resolve();\n                            };\n                            img.src = assetInfo.url;\n                        } else {\n                            resolve();\n                        }\n                    });\n                });\n\n                // Load audio\n                const audioPromises = audioAssets.map(id => {\n                    return new Promise((resolve) => {\n                        const assetInfo = lib.getAsset(id);\n                        if (assetInfo && assetInfo.url) {\n                            fetch(assetInfo.url)\n                                .then(response => response.arrayBuffer())\n                                .then(buffer => getAudioContext().decodeAudioData(buffer))\n                                .then(audioBuffer => {\n                                    assetCache.audio[id] = audioBuffer;\n                                    resolve();\n                                })\n                                .catch(() => {\n                                    lib.log(`Failed to load audio: ${id}`);\n                                    resolve();\n                                });\n                        } else {\n                            resolve();\n                        }\n                    });\n                });\n\n                await Promise.all([...imagePromises, ...audioPromises]);\n            }\n\n            // ==================== AUDIO PLAYBACK ====================\n            let bgMusicSource = null;\n            let bgMusicGain = null;\n\n            function playSound(id, loop = false, volume = 1.0) {\n                const buffer = assetCache.audio[id];\n                if (!buffer) return null;\n                \n                try {\n                    const ctx = getAudioContext();\n                    if (ctx.state === 'suspended') {\n                        ctx.resume();\n                    }\n                    \n                    const source = ctx.createBufferSource();\n                    const gainNode = ctx.createGain();\n                    \n                    source.buffer = buffer;\n                    source.loop = loop;\n                    gainNode.gain.value = volume;\n                    \n                    source.connect(gainNode);\n                    gainNode.connect(ctx.destination);\n                    source.start(0);\n                    \n                    return { source, gainNode };\n                } catch (e) {\n                    lib.log(`Error playing sound: ${e}`);\n                    return null;\n                }\n            }\n\n            function startBackgroundMusic() {\n                if (bgMusicSource) return;\n                const result = playSound('background_music', true, 0.3);\n                if (result) {\n                    bgMusicSource = result.source;\n                    bgMusicGain = result.gainNode;\n                }\n            }\n\n            function stopBackgroundMusic() {\n                if (bgMusicSource) {\n                    try {\n                        bgMusicSource.stop();\n                    } catch (e) {}\n                    bgMusicSource = null;\n                    bgMusicGain = null;\n                }\n            }\n\n            // ==================== GAME STATE ====================\n            const config = window.gameConfig;\n            \n            // Runtime state (not persisted)\n            let currentScreen = 'selection'; // 'selection', 'puzzle', 'completion'\n            let currentPuzzleIndex = 0;\n            let connectedPieces = [];\n            let pieces = [];\n            let targetPositions = [];\n            let puzzleImage = null;\n            let animatingPiece = null;\n            let shakeAnimation = null;\n            let sparkles = [];\n            let completionSparkles = [];\n            let flyingOffPieces = [];\n            let isTransitioning = false;\n\n            // ==================== PUZZLE DEFINITIONS ====================\n            const puzzleData = [\n                { id: 'puzzle_fashion_show', name: 'Fashion Fail', imageId: 'puzzle_fashion_show' },\n                { id: 'puzzle_beach_day', name: 'Beach Blunder', imageId: 'puzzle_beach_day' },\n                { id: 'puzzle_dream_house', name: 'House of Tricks', imageId: 'puzzle_dream_house' },\n                { id: 'puzzle_shopping_spree', name: 'Shopping Swindle', imageId: 'puzzle_shopping_spree' },\n                { id: 'puzzle_princess_castle', name: 'Castle Chaos', imageId: 'puzzle_princess_castle' },\n                { id: 'puzzle_garden_party', name: 'Garden Goof', imageId: 'puzzle_garden_party' },\n                { id: 'puzzle_ice_skating', name: 'Ice Slip-Up', imageId: 'puzzle_ice_skating' },\n                { id: 'puzzle_spa_day', name: 'Spa Shenanigans', imageId: 'puzzle_spa_day' },\n                { id: 'puzzle_concert_stage', name: 'Concert Caper', imageId: 'puzzle_concert_stage' },\n                { id: 'puzzle_horse_ranch', name: 'Ranch Ruse', imageId: 'puzzle_horse_ranch' },\n                { id: 'puzzle_ballet_studio', name: 'Ballet Blooper', imageId: 'puzzle_ballet_studio' },\n                { id: 'puzzle_fashion_design', name: 'Design Disaster', imageId: 'puzzle_fashion_design' },\n                { id: 'puzzle_mermaid_lagoon', name: 'Mermaid Mischief', imageId: 'puzzle_mermaid_lagoon' },\n                { id: 'puzzle_astronaut_adventure', name: 'Space Spoof', imageId: 'puzzle_astronaut_adventure' },\n                { id: 'puzzle_pet_salon', name: 'Pet Prank', imageId: 'puzzle_pet_salon' },\n                { id: 'puzzle_bakery', name: 'Bakery Bamboozle', imageId: 'puzzle_bakery' },\n                { id: 'puzzle_art_studio', name: 'Art Attack', imageId: 'puzzle_art_studio' },\n                { id: 'puzzle_gymnastics', name: 'Gymnastics Gag', imageId: 'puzzle_gymnastics' },\n                { id: 'puzzle_wedding_day', name: 'Wedding Whoopee', imageId: 'puzzle_wedding_day' },\n                { id: 'puzzle_safari_adventure', name: 'Safari Snafu', imageId: 'puzzle_safari_adventure' },\n                { id: 'puzzle_ski_resort', name: 'Ski Scam', imageId: 'puzzle_ski_resort' },\n                { id: 'puzzle_underwater_world', name: 'Underwater Upset', imageId: 'puzzle_underwater_world' },\n                { id: 'puzzle_camping_trip', name: 'Camping Craziness', imageId: 'puzzle_camping_trip' },\n                { id: 'puzzle_movie_star', name: 'Movie Mayhem', imageId: 'puzzle_movie_star' },\n                { id: 'puzzle_chef_kitchen', name: 'Kitchen Kerfuffle', imageId: 'puzzle_chef_kitchen' },\n                { id: 'puzzle_vet_clinic', name: 'Vet Vexation', imageId: 'puzzle_vet_clinic' },\n                { id: 'puzzle_dance_party', name: 'Dance Debacle', imageId: 'puzzle_dance_party' },\n                { id: 'puzzle_flower_shop', name: 'Flower Fiasco', imageId: 'puzzle_flower_shop' },\n                { id: 'puzzle_race_car', name: 'Race Riot', imageId: 'puzzle_race_car' },\n                { id: 'puzzle_space_station', name: 'Station Stunt', imageId: 'puzzle_space_station' },\n                { id: 'puzzle_yoga_studio', name: 'Yoga Yikes', imageId: 'puzzle_yoga_studio' },\n                { id: 'puzzle_tea_party', name: 'Tea Trickery', imageId: 'puzzle_tea_party' },\n                { id: 'puzzle_carnival', name: 'Carnival Con', imageId: 'puzzle_carnival' },\n                { id: 'puzzle_birthday_party', name: 'Birthday Bam', imageId: 'puzzle_birthday_party' },\n                { id: 'puzzle_halloween', name: 'Halloween Hoax', imageId: 'puzzle_halloween' },\n                { id: 'puzzle_holiday_winter', name: 'Holiday Hijinks', imageId: 'puzzle_holiday_winter' },\n                { id: 'puzzle_poolside', name: 'Poolside Prank', imageId: 'puzzle_poolside' },\n                { id: 'puzzle_music_studio', name: 'Music Madness', imageId: 'puzzle_music_studio' },\n                { id: 'puzzle_library', name: 'Library Laughs', imageId: 'puzzle_library' },\n                { id: 'puzzle_science_lab', name: 'Science Silliness', imageId: 'puzzle_science_lab' }\n            ];\n\n            // ==================== UI ELEMENTS ====================\n            const selectionScreen = document.getElementById('selection-screen');\n            const puzzleScreen = document.getElementById('puzzle-screen');\n            const puzzleGrid = document.getElementById('puzzle-grid');\n            const puzzleTitle = document.getElementById('puzzle-title');\n            const progressIndicator = document.getElementById('progress');\n            const completionOverlay = document.getElementById('completion-overlay');\n            const completionText = document.getElementById('completion-text');\n            const trayNextBtn = document.getElementById('tray-next-btn');\n            const loadingScreen = document.getElementById('loading-screen');\n\n            // ==================== SPARKLE EFFECTS ====================\n            function createBackgroundSparkles() {\n                const container = document.getElementById('sparkle-container');\n                container.innerHTML = '';\n                for (let i = 0; i < 20; i++) {\n                    const sparkle = document.createElement('div');\n                    sparkle.className = 'sparkle';\n                    sparkle.style.left = Math.random() * 100 + '%';\n                    sparkle.style.top = Math.random() * 100 + '%';\n                    sparkle.style.animationDelay = Math.random() * 3 + 's';\n                    container.appendChild(sparkle);\n                }\n            }\n\n            function createSparkleEffect(x, y, count = 10) {\n                for (let i = 0; i < count; i++) {\n                    const angle = (Math.PI * 2 * i) / count;\n                    const speed = 2 + Math.random() * 3;\n                    sparkles.push({\n                        x: x,\n                        y: y,\n                        vx: Math.cos(angle) * speed,\n                        vy: Math.sin(angle) * speed,\n                        size: 8 + Math.random() * 10,\n                        alpha: 1,\n                        color: ['#FF6B35', '#00FF88', '#9D4EDD', '#FFA500', '#FFFFFF'][Math.floor(Math.random() * 5)],\n                        rotation: Math.random() * Math.PI * 2,\n                        rotationSpeed: (Math.random() - 0.5) * 0.3\n                    });\n                }\n            }\n\n            function createConfettiEffect(x, y, count = 20) {\n                for (let i = 0; i < count; i++) {\n                    const angle = Math.random() * Math.PI * 2;\n                    const speed = 3 + Math.random() * 5;\n                    sparkles.push({\n                        x: x,\n                        y: y,\n                        vx: Math.cos(angle) * speed,\n                        vy: Math.sin(angle) * speed - 4,\n                        size: 4 + Math.random() * 8,\n                        alpha: 1,\n                        color: ['#FF6B35', '#00FF88', '#9D4EDD', '#FFA500', '#FFD700'][Math.floor(Math.random() * 5)],\n                        rotation: Math.random() * Math.PI * 2,\n                        rotationSpeed: (Math.random() - 0.5) * 0.5,\n                        gravity: 0.3,\n                        shape: Math.random() > 0.5 ? 'square' : 'circle'\n                    });\n                }\n            }\n\n            function createHeartEffect(x, y) {\n                const colors = ['#FF6B35', '#00FF88', '#9D4EDD', '#FFA500'];\n                for (let i = 0; i < 5; i++) {\n                    sparkles.push({\n                        x: x + (Math.random() - 0.5) * 40,\n                        y: y,\n                        vx: (Math.random() - 0.5) * 2,\n                        vy: -3 - Math.random() * 2,\n                        size: 12 + Math.random() * 8,\n                        alpha: 1,\n                        color: colors[Math.floor(Math.random() * colors.length)],\n                        shape: 'heart',\n                        rotation: 0,\n                        rotationSpeed: 0\n                    });\n                }\n            }\n\n            // ==================== PUZZLE PIECE GENERATION ====================\n            \n\n\nfunction generatePuzzlePieces(puzzleIndex) {\n    const puzzle = puzzleData[puzzleIndex];\n    const pieceCount = config.puzzles[puzzleIndex].pieceCount;\n    const img = assetCache.images[puzzle.imageId];\n    \n    if (!img) {\n        lib.log(`Image not loaded for puzzle: ${puzzle.id}`);\n        return;\n    }\n\n    puzzleImage = img;\n    pieces = [];\n    connectedPieces = [];\n    targetPositions = [];\n\n    // Define puzzle area - scale tray size based on piece count\n    // Smaller puzzles get more space at top, smaller tray at bottom\n    let traySize;\n    if (pieceCount <= 4) {\n        traySize = 200; // Very small tray for tiny puzzles - maximize puzzle space\n    } else if (pieceCount <= 12) {\n        traySize = 280; // Medium tray\n    } else if (pieceCount <= 30) {\n        traySize = 340; // Larger tray\n    } else {\n        traySize = 370; // Biggest tray for complex puzzles\n    }\n    \n    const puzzleAreaTop = 90;\n    const puzzleAreaBottom = canvas.height - traySize;\n    const puzzleAreaHeight = puzzleAreaBottom - puzzleAreaTop;\n    const puzzleAreaWidth = canvas.width - 20; // Reduced margin for more space\n    const puzzleAreaLeft = 10;\n\n    // Use the current puzzle's actual aspect ratio\n    const currentAspect = img.width / img.height;\n    \n    // Scale puzzle size based on piece count - smaller puzzles get MUCH bigger pieces\n    let sizeMultiplier;\n    if (pieceCount <= 4) {\n        sizeMultiplier = 1.15; // Use 115% to maximize space for tiny puzzles\n    } else if (pieceCount <= 12) {\n        sizeMultiplier = 1.05; // Use 105% of available space\n    } else {\n        sizeMultiplier = 0.92; // Use 92% for complex puzzles\n    }\n    \n    // Calculate total dimensions based on current puzzle's aspect ratio\n    let totalWidth = puzzleAreaWidth * sizeMultiplier;\n    let totalHeight = totalWidth / currentAspect;\n    \n    if (totalHeight > puzzleAreaHeight * sizeMultiplier) {\n        totalHeight = puzzleAreaHeight * sizeMultiplier;\n        totalWidth = totalHeight * currentAspect;\n    }\n    \n    // Center the completed puzzle in top area\n    const startX = (canvas.width - totalWidth) / 2;\n    const startY = puzzleAreaTop + (puzzleAreaHeight - totalHeight) / 2;\n\n    // Calculate grid that creates EXACTLY pieceCount pieces\n    // Find factors of pieceCount that create the best grid layout\n    let cols, rows;\n    \n    // Find all factor pairs of pieceCount\n    const factors = [];\n    for (let i = 1; i <= Math.sqrt(pieceCount); i++) {\n        if (pieceCount % i === 0) {\n            factors.push([i, pieceCount / i]);\n            if (i !== pieceCount / i) {\n                factors.push([pieceCount / i, i]);\n            }\n        }\n    }\n    \n    // Choose the factor pair that best matches the image aspect ratio\n    let bestDiff = Infinity;\n    for (const [c, r] of factors) {\n        const gridAspect = c / r;\n        const diff = Math.abs(gridAspect - currentAspect);\n        if (diff < bestDiff) {\n            bestDiff = diff;\n            cols = c;\n            rows = r;\n        }\n    }\n    \n    // Ensure cols * rows exactly equals pieceCount\n    if (cols * rows !== pieceCount) {\n        // Fallback: find closest factors\n        cols = Math.round(Math.sqrt(pieceCount * currentAspect));\n        rows = Math.round(pieceCount / cols);\n        // Adjust to make it exact\n        while (cols * rows !== pieceCount) {\n            if (cols * rows < pieceCount) {\n                rows++;\n            } else {\n                rows--;\n            }\n        }\n    }\n    \n    // Piece dimensions: divide the FIXED total size by actual grid\n    const pieceWidth = totalWidth / cols;\n    const pieceHeight = totalHeight / rows;\n\n    // Define tray area (bottom - dynamic size based on piece count)\n    const trayTop = canvas.height - traySize;\n    const trayHeight = traySize;\n    const trayPadding = 12;\n    const trayWidth = canvas.width - trayPadding * 2;\n    const usableHeight = trayHeight - trayPadding * 2;\n\n    // Calculate optimal grid layout for tray to fill space\n    const aspectRatio = pieceWidth / pieceHeight;\n    let bestLayout = { cols: 1, rows: pieceCount };\n    let bestUtilization = 0;\n    \n    // Try different column counts to find best fit\n    for (let cols = 1; cols <= Math.min(pieceCount, 8); cols++) {\n        const rows = Math.ceil(pieceCount / cols);\n        \n        // Calculate piece size that would fit\n        const maxPieceWidth = (trayWidth - trayPadding * (cols - 1)) / cols;\n        const maxPieceHeight = (usableHeight - trayPadding * (rows - 1)) / rows;\n        \n        // Maintain aspect ratio\n        let testWidth, testHeight;\n        if (maxPieceWidth / aspectRatio <= maxPieceHeight) {\n            testWidth = maxPieceWidth;\n            testHeight = maxPieceWidth / aspectRatio;\n        } else {\n            testHeight = maxPieceHeight;\n            testWidth = maxPieceHeight * aspectRatio;\n        }\n        \n        // Calculate space utilization\n        const totalPieceArea = testWidth * testHeight * pieceCount;\n        const totalTrayArea = trayWidth * usableHeight;\n        const utilization = totalPieceArea / totalTrayArea;\n        \n        if (utilization > bestUtilization) {\n            bestUtilization = utilization;\n            bestLayout = { cols, rows, width: testWidth, height: testHeight };\n        }\n    }\n    \n    const trayPieceWidth = bestLayout.width;\n    const trayPieceHeight = bestLayout.height;\n    const piecesPerRow = bestLayout.cols;\n    const trayRows = bestLayout.rows;\n    \n    // Calculate spacing to center the grid\n    const totalGridWidth = trayPieceWidth * piecesPerRow + trayPadding * (piecesPerRow - 1);\n    const totalGridHeight = trayPieceHeight * trayRows + trayPadding * (trayRows - 1);\n    const gridStartX = (canvas.width - totalGridWidth) / 2;\n    const gridStartY = trayTop + (trayHeight - totalGridHeight) / 2;\n\n    // Generate pieces - now we generate ALL grid positions since cols*rows = pieceCount\n    let pieceNum = 1;\n    const allPieces = [];\n    \n    for (let row = 0; row < rows; row++) {\n        for (let col = 0; col < cols; col++) {\n            const targetX = startX + col * pieceWidth;\n            const targetY = startY + row * pieceHeight;\n            \n            // Image source coordinates\n            const srcX = (col / cols) * img.width;\n            const srcY = (row / rows) * img.height;\n            const srcW = img.width / cols;\n            const srcH = img.height / rows;\n\n            allPieces.push({\n                number: pieceNum,\n                targetX: targetX,\n                targetY: targetY,\n                width: pieceWidth,\n                height: pieceHeight,\n                srcX: srcX,\n                srcY: srcY,\n                srcW: srcW,\n                srcH: srcH,\n                connected: false,\n                shake: 0,\n                trayIndex: pieceNum - 1\n            });\n\n            targetPositions.push({ x: targetX, y: targetY, width: pieceWidth, height: pieceHeight });\n            pieceNum++;\n        }\n    }\n\n    // Shuffle pieces and assign tray positions in optimal grid\n    allPieces.sort(() => Math.random() - 0.5);\n    \n    allPieces.forEach((piece, index) => {\n        const rowIndex = Math.floor(index / piecesPerRow);\n        const colIndex = index % piecesPerRow;\n        \n        piece.trayX = gridStartX + colIndex * (trayPieceWidth + trayPadding);\n        piece.trayY = gridStartY + rowIndex * (trayPieceHeight + trayPadding);\n        piece.x = piece.trayX;\n        piece.y = piece.trayY;\n        piece.trayWidth = trayPieceWidth;\n        piece.trayHeight = trayPieceHeight;\n        \n        pieces.push(piece);\n    });\n}\n\n\n            // ==================== DRAWING FUNCTIONS ====================\n            function drawPuzzleOutline() {\n                if (targetPositions.length === 0) return;\n\n                ctx.save();\n                ctx.globalAlpha = 0.2;\n                \n                // Draw faint reference image\n                if (puzzleImage) {\n                    const first = targetPositions[0];\n                    const last = targetPositions[targetPositions.length - 1];\n                    const totalWidth = last.x + last.width - first.x;\n                    const totalHeight = last.y + last.height - first.y;\n                    \n                    ctx.drawImage(puzzleImage, first.x, first.y, totalWidth, totalHeight);\n                }\n\n                // Draw grid lines\n                ctx.strokeStyle = '#FFFFFF';\n                ctx.lineWidth = 2;\n                ctx.setLineDash([5, 5]);\n                \n                targetPositions.forEach(pos => {\n                    ctx.strokeRect(pos.x, pos.y, pos.width, pos.height);\n                });\n\n                ctx.restore();\n            }\n\n            \nfunction drawPiece(piece, highlight = false, isDragging = false) {\n    if (!puzzleImage) return;\n\n    ctx.save();\n\n    // Apply shake animation\n    let offsetX = 0;\n    if (piece.shake > 0) {\n        offsetX = Math.sin(piece.shake * 10) * 5;\n    }\n\n    // Scale up when dragging\n    const scale = isDragging ? 1.5 : 1;\n    const width = (piece.trayWidth || piece.width) * scale;\n    const height = (piece.trayHeight || piece.height) * scale;\n    \n    // Center the scaled piece on the drag position\n    const x = piece.x + offsetX - (isDragging ? (width - (piece.trayWidth || piece.width)) / 2 : 0);\n    const y = piece.y - (isDragging ? (height - (piece.trayHeight || piece.height)) / 2 : 0);\n\n    // Draw shadow (bigger for dragging)\n    ctx.fillStyle = isDragging ? 'rgba(0,0,0,0.4)' : 'rgba(0,0,0,0.2)';\n    ctx.beginPath();\n    ctx.roundRect(x + (isDragging ? 6 : 4), y + (isDragging ? 6 : 4), width, height, 8);\n    ctx.fill();\n\n    // Draw piece background\n    ctx.fillStyle = '#FFFFFF';\n    ctx.beginPath();\n    ctx.roundRect(x, y, width, height, 8);\n    ctx.fill();\n\n    // Clip and draw image portion\n    ctx.save();\n    ctx.beginPath();\n    ctx.roundRect(x + 2, y + 2, width - 4, height - 4, 6);\n    ctx.clip();\n    \n    ctx.drawImage(\n        puzzleImage,\n        piece.srcX, piece.srcY, piece.srcW, piece.srcH,\n        x + 2, y + 2, width - 4, height - 4\n    );\n    ctx.restore();\n\n    // Draw border\n    ctx.strokeStyle = isDragging ? '#FFD700' : (highlight ? '#FFD700' : '#E94196');\n    ctx.lineWidth = isDragging ? 4 : (highlight ? 3 : 2);\n    ctx.beginPath();\n    ctx.roundRect(x, y, width, height, 8);\n    ctx.stroke();\n\n    // Highlight glow for dragging\n    if (isDragging) {\n        ctx.shadowColor = '#FFD700';\n        ctx.shadowBlur = 20;\n        ctx.strokeStyle = '#FFD700';\n        ctx.lineWidth = 3;\n        ctx.beginPath();\n        ctx.roundRect(x - 2, y - 2, width + 4, height + 4, 10);\n        ctx.stroke();\n    }\n\n    ctx.restore();\n}\n\n\n            function drawConnectedPiece(piece) {\n                if (!puzzleImage) return;\n\n                ctx.save();\n\n                const x = piece.targetX;\n                const y = piece.targetY;\n\n                // Draw image portion at target position\n                ctx.beginPath();\n                ctx.roundRect(x, y, piece.width, piece.height, 4);\n                ctx.clip();\n                \n                ctx.drawImage(\n                    puzzleImage,\n                    piece.srcX, piece.srcY, piece.srcW, piece.srcH,\n                    x, y, piece.width, piece.height\n                );\n\n                ctx.restore();\n\n                // Draw subtle border\n                ctx.strokeStyle = 'rgba(255,255,255,0.5)';\n                ctx.lineWidth = 1;\n                ctx.beginPath();\n                ctx.roundRect(x, y, piece.width, piece.height, 4);\n                ctx.stroke();\n            }\n\n            function drawSparkles() {\n                sparkles.forEach(s => {\n                    ctx.save();\n                    ctx.globalAlpha = s.alpha;\n                    ctx.fillStyle = s.color;\n                    ctx.beginPath();\n                    \n                    // Draw star shape\n                    const spikes = 4;\n                    const outerRadius = s.size;\n                    const innerRadius = s.size / 2;\n                    \n                    for (let i = 0; i < spikes * 2; i++) {\n                        const radius = i % 2 === 0 ? outerRadius : innerRadius;\n                        const angle = (i * Math.PI) / spikes - Math.PI / 2;\n                        const x = s.x + Math.cos(angle) * radius;\n                        const y = s.y + Math.sin(angle) * radius;\n                        \n                        if (i === 0) ctx.moveTo(x, y);\n                        else ctx.lineTo(x, y);\n                    }\n                    \n                    ctx.closePath();\n                    ctx.fill();\n                    ctx.restore();\n                });\n            }\n\n            function updateSparkles(dt) {\n                sparkles = sparkles.filter(s => {\n                    s.x += s.vx;\n                    s.y += s.vy;\n                    \n                    // Apply gravity for confetti\n                    if (s.gravity !== undefined) {\n                        s.vy += s.gravity;\n                    }\n                    \n                    // Apply rotation\n                    if (s.rotation !== undefined && s.rotationSpeed !== undefined) {\n                        s.rotation += s.rotationSpeed;\n                    }\n                    \n                    s.alpha -= dt * 1.5;\n                    s.size *= 0.985;\n                    return s.alpha > 0 && s.y < canvas.height + 50;\n                });\n            }\n\n            // ==================== PUZZLE SELECTION UI ====================\n            function renderPuzzleSelection() {\n                puzzleGrid.innerHTML = '';\n                \n                puzzleData.forEach((puzzle, index) => {\n                    const isUnlocked = config.puzzles[index].unlocked;\n                    const card = document.createElement('div');\n                    card.className = `puzzle-card ${isUnlocked ? '' : 'locked'}`;\n                    \n                    const img = assetCache.images[puzzle.imageId];\n                    const lockImg = assetCache.images['locked_puzzle_icon'];\n                    \n                    card.innerHTML = `\n                        <img class=\"puzzle-thumbnail\" src=\"${img ? img.src : ''}\" alt=\"${puzzle.name}\">\n                        <div class=\"puzzle-info\">\n                            <div class=\"puzzle-name\">${puzzle.name}</div>\n                            <div class=\"puzzle-pieces\">${config.puzzles[index].pieceCount} pieces</div>\n                        </div>\n                        ${!isUnlocked ? `<img class=\"lock-icon\" src=\"${lockImg ? lockImg.src : ''}\" alt=\"Locked\">` : ''}\n                    `;\n                    \n                    if (isUnlocked) {\n                        card.addEventListener('click', () => {\n                            playSound('button_click_sound', false, 0.5);\n                            startPuzzle(index);\n                        });\n                    }\n                    \n                    puzzleGrid.appendChild(card);\n                });\n            }\n\n            // ==================== GAME FLOW ====================\n            function showSelectionScreen() {\n                currentScreen = 'selection';\n                selectionScreen.classList.remove('hidden');\n                puzzleScreen.classList.add('hidden');\n                completionOverlay.classList.remove('visible');\n                trayNextBtn.classList.remove('visible');\n                renderPuzzleSelection();\n            }\n\n            function startPuzzle(index) {\n                currentPuzzleIndex = index;\n                currentScreen = 'puzzle';\n                connectedPieces = [];\n                \n                selectionScreen.classList.add('hidden');\n                puzzleScreen.classList.remove('hidden');\n                completionOverlay.classList.remove('visible');\n                trayNextBtn.classList.remove('visible');\n                \n                puzzleTitle.textContent = puzzleData[index].name;\n                puzzleTitle.classList.remove('fade-out');\n                generatePuzzlePieces(index);\n                updateProgress();\n                \n                startBackgroundMusic();\n            }\n\n            function updateProgress() {\n                const total = config.puzzles[currentPuzzleIndex].pieceCount;\n                progressIndicator.textContent = `${connectedPieces.length}/${total}`;\n            }\n\n            \nfunction showCompletion() {\n                currentScreen = 'completion';\n                \n                completionText.textContent = config.puzzles[currentPuzzleIndex].completionMessage;\n                completionOverlay.classList.add('visible');\n                \n                // Fade out title so it doesn't cover the celebration message\n                puzzleTitle.classList.add('fade-out');\n                \n                // Show cute next button in tray after a short delay\n                setTimeout(() => {\n                    trayNextBtn.classList.add('visible');\n                }, 800);\n                \n                playSound('puzzle_complete_sound', false, 0.7);\n                \n                // Create celebration sparkles\n                for (let i = 0; i < 30; i++) {\n                    setTimeout(() => {\n                        createSparkleEffect(\n                            Math.random() * canvas.width,\n                            Math.random() * canvas.height * 0.6 + 100,\n                            5\n                        );\n                    }, i * 50);\n                }\n                \n                // Auto-hide notification after 3 seconds, keep button visible\n                setTimeout(() => {\n                    completionOverlay.classList.remove('visible');\n                }, 3000);\n            }\n\n\n            function nextPuzzle() {\n                playSound('button_click_sound', false, 0.5);\n                \n                // Start flying off animation\n                if (!isTransitioning && pieces.length > 0) {\n                    isTransitioning = true;\n                    trayNextBtn.classList.remove('visible');\n                    completionOverlay.classList.remove('visible');\n                    \n                    // Prepare all pieces to fly off\n                    flyingOffPieces = pieces.map(piece => {\n                        const angle = Math.random() * Math.PI * 2;\n                        const speed = 8 + Math.random() * 6;\n                        \n                        return {\n                            piece: piece,\n                            x: piece.connected ? piece.targetX : piece.x,\n                            y: piece.connected ? piece.targetY : piece.y,\n                            vx: Math.cos(angle) * speed,\n                            vy: Math.sin(angle) * speed - 4, // Bias upward\n                            rotation: 0,\n                            rotationSpeed: (Math.random() - 0.5) * 0.4,\n                            alpha: 1\n                        };\n                    });\n                    \n                    // After animation completes, load next puzzle\n                    setTimeout(() => {\n                        flyingOffPieces = [];\n                        isTransitioning = false;\n                        \n                        if (currentPuzzleIndex < puzzleData.length - 1) {\n                            startPuzzle(currentPuzzleIndex + 1);\n                        } else {\n                            showSelectionScreen();\n                        }\n                    }, 1200);\n                }\n            }\n\n            // ==================== INPUT HANDLING ====================\n            function getCanvasCoords(e) {\n                const rect = canvas.getBoundingClientRect();\n                const scaleX = canvas.width / rect.width;\n                const scaleY = canvas.height / rect.height;\n                \n                let clientX, clientY;\n                if (e.touches && e.touches.length > 0) {\n                    clientX = e.touches[0].clientX;\n                    clientY = e.touches[0].clientY;\n                } else {\n                    clientX = e.clientX;\n                    clientY = e.clientY;\n                }\n                \n                return {\n                    x: (clientX - rect.left) * scaleX,\n                    y: (clientY - rect.top) * scaleY\n                };\n            }\n\n            \nfunction handlePieceClick(coords) {\n    if (currentScreen !== 'puzzle' || animatingPiece) return;\n    \n    // Find clicked piece in tray (check in reverse for top-most)\n    for (let i = pieces.length - 1; i >= 0; i--) {\n        const piece = pieces[i];\n        if (piece.connected) continue;\n        \n        const width = piece.trayWidth || piece.width;\n        const height = piece.trayHeight || piece.height;\n        \n        if (coords.x >= piece.x && coords.x <= piece.x + width &&\n            coords.y >= piece.y && coords.y <= piece.y + height) {\n            \n            // Start dragging this piece\n            draggingPiece = piece;\n            dragOffset.x = coords.x - piece.x;\n            dragOffset.y = coords.y - piece.y;\n            \n            // Move to end of array for drawing on top\n            pieces.splice(i, 1);\n            pieces.push(piece);\n            return;\n        }\n    }\n}\n\n\n            \nfunction connectPiece(piece) {\n    playSound('piece_connect_sound', false, 0.6);\n    \n    // Set piece to full size immediately\n    piece.trayWidth = piece.width;\n    piece.trayHeight = piece.height;\n    \n    // Animate piece to target position only (no size animation)\n    animatingPiece = {\n        piece: piece,\n        startX: piece.x,\n        startY: piece.y,\n        progress: 0\n    };\n    \n    // Create burst of confetti and sparkles\n    createConfettiEffect(piece.x + piece.width / 2, piece.y + piece.height / 2, 15);\n    createHeartEffect(piece.x + piece.width / 2, piece.y + piece.height / 2);\n    \n    draggingPiece = null;\n}\n\n\n            function shakePiece(piece) {\n                playSound('piece_error_sound', false, 0.5);\n                piece.shake = 1;\n            }\n\n            // ==================== EDIT MODE ====================\n            let selectedPuzzleForEdit = null;\n            let draggingPiece = null;\n            let dragOffset = { x: 0, y: 0 };\n\n            function setupEditMode() {\n                // Show game parameters\n                lib.showGameParameters({\n                    name: 'Puzzle Settings',\n                    params: {\n                        'Primary Color': {\n                            key: 'theme.primaryColor',\n                            type: 'color'\n                        },\n                        'Music Volume': {\n                            key: 'settings.musicVolume',\n                            type: 'slider',\n                            min: 0,\n                            max: 100,\n                            step: 10\n                        }\n                    }\n                });\n\n                // In edit mode, show puzzle preview\n                startPuzzle(0);\n            }\n\n            function handleEditClick(coords) {\n                // In edit mode, allow selecting pieces to see their properties\n                for (let i = pieces.length - 1; i >= 0; i--) {\n                    const piece = pieces[i];\n                    if (coords.x >= piece.x && coords.x <= piece.x + piece.width &&\n                        coords.y >= piece.y && coords.y <= piece.y + piece.height) {\n                        draggingPiece = piece;\n                        dragOffset.x = coords.x - piece.x;\n                        dragOffset.y = coords.y - piece.y;\n                        return;\n                    }\n                }\n            }\n\n            function handleDrag(coords) {\n                if (draggingPiece && !draggingPiece.connected) {\n                    draggingPiece.x = coords.x - dragOffset.x;\n                    draggingPiece.y = coords.y - dragOffset.y;\n                }\n            }\n\n            function handleRelease() {\n                if (draggingPiece && !draggingPiece.connected) {\n                    const piece = draggingPiece;\n                    const centerX = piece.x + (piece.trayWidth || piece.width) / 2;\n                    const centerY = piece.y + (piece.trayHeight || piece.height) / 2;\n                    \n                    // Check if dropped near target position\n                    const targetCenterX = piece.targetX + piece.width / 2;\n                    const targetCenterY = piece.targetY + piece.height / 2;\n                    const distance = Math.sqrt(\n                        Math.pow(centerX - targetCenterX, 2) + \n                        Math.pow(centerY - targetCenterY, 2)\n                    );\n                    \n                    const snapThreshold = Math.max(piece.width, piece.height) * 0.6;\n                    \n                    if (distance < snapThreshold) {\n                        // Correct position! Connect the piece\n                        connectPiece(piece);\n                    } else {\n                        // Wrong position - return to tray with animation\n                        playSound('piece_error_sound', false, 0.5);\n                        piece.shake = 1;\n                        \n                        // Animate back to tray\n                        const returnAnim = {\n                            piece: piece,\n                            startX: piece.x,\n                            startY: piece.y,\n                            targetX: piece.trayX,\n                            targetY: piece.trayY,\n                            progress: 0,\n                            isReturn: true\n                        };\n                        \n                        const animate = () => {\n                            returnAnim.progress += 0.08;\n                            if (returnAnim.progress >= 1) {\n                                piece.x = piece.trayX;\n                                piece.y = piece.trayY;\n                            } else {\n                                const t = 1 - Math.pow(1 - returnAnim.progress, 3);\n                                piece.x = returnAnim.startX + (returnAnim.targetX - returnAnim.startX) * t;\n                                piece.y = returnAnim.startY + (returnAnim.targetY - returnAnim.startY) * t;\n                                requestAnimationFrame(animate);\n                            }\n                        };\n                        animate();\n                    }\n                }\n                draggingPiece = null;\n            }\n\n            function handleEditDrag(coords) {\n                if (draggingPiece) {\n                    draggingPiece.x = coords.x - dragOffset.x;\n                    draggingPiece.y = coords.y - dragOffset.y;\n                }\n            }\n\n            function handleEditRelease() {\n                draggingPiece = null;\n            }\n\n            // ==================== EVENT LISTENERS ====================\n            function setupEventListeners() {\n                // Canvas click/touch for puzzle pieces\n                canvas.addEventListener('click', (e) => {\n                    const coords = getCanvasCoords(e);\n                    if (mode === 'edit') {\n                        handleEditClick(coords);\n                    } else {\n                        handlePieceClick(coords);\n                    }\n                });\n\n                canvas.addEventListener('touchstart', (e) => {\n                    e.preventDefault();\n                    const coords = getCanvasCoords(e);\n                    if (mode === 'edit') {\n                        handleEditClick(coords);\n                    } else {\n                        handlePieceClick(coords);\n                    }\n                });\n\n                if (mode === 'edit') {\n                    canvas.addEventListener('mousemove', (e) => {\n                        handleEditDrag(getCanvasCoords(e));\n                    });\n\n                    canvas.addEventListener('touchmove', (e) => {\n                        e.preventDefault();\n                        handleEditDrag(getCanvasCoords(e));\n                    });\n\n                    canvas.addEventListener('mouseup', handleEditRelease);\n                    canvas.addEventListener('touchend', handleEditRelease);\n                } else {\n                    // Play mode drag handlers\n                    canvas.addEventListener('mousemove', (e) => {\n                        handleDrag(getCanvasCoords(e));\n                    });\n\n                    canvas.addEventListener('touchmove', (e) => {\n                        e.preventDefault();\n                        handleDrag(getCanvasCoords(e));\n                    });\n\n                    canvas.addEventListener('mouseup', handleRelease);\n                    canvas.addEventListener('touchend', handleRelease);\n                }\n\n                trayNextBtn.addEventListener('click', nextPuzzle);\n\n                // Resume audio context on user interaction\n                document.addEventListener('click', () => {\n                    const ctx = getAudioContext();\n                    if (ctx.state === 'suspended') {\n                        ctx.resume();\n                    }\n                }, { once: true });\n            }\n\n            // ==================== GAME LOOP ====================\n            let lastTime = 0;\n\n            function gameLoop(timestamp) {\n                const dt = Math.min((timestamp - lastTime) / 1000, 0.11);\n                lastTime = timestamp;\n\n                // Clear canvas\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n                // Update theme colors\n                document.documentElement.style.setProperty('--primary', config.theme.primaryColor);\n\n                if (currentScreen === 'puzzle' || currentScreen === 'completion') {\n                    // Draw puzzle outline/guide\n                    drawPuzzleOutline();\n\n                    // Draw connected pieces (only when not flying off)\n                    if (flyingOffPieces.length === 0) {\n                        pieces.filter(p => p.connected).forEach(drawConnectedPiece);\n                    }\n\n                    // Update and draw flying off animation\n                    if (flyingOffPieces.length > 0) {\n                        flyingOffPieces.forEach(fp => {\n                            fp.x += fp.vx;\n                            fp.y += fp.vy;\n                            fp.vy += 0.4; // Gravity\n                            fp.rotation += fp.rotationSpeed;\n                            fp.alpha -= dt * 0.8;\n                            \n                            // Draw flying piece\n                            if (fp.alpha > 0) {\n                                ctx.save();\n                                ctx.globalAlpha = fp.alpha;\n                                ctx.translate(fp.x + fp.piece.width / 2, fp.y + fp.piece.height / 2);\n                                ctx.rotate(fp.rotation);\n                                ctx.translate(-fp.piece.width / 2, -fp.piece.height / 2);\n                                \n                                // Draw shadow\n                                ctx.fillStyle = 'rgba(0,0,0,0.2)';\n                                ctx.beginPath();\n                                ctx.roundRect(4, 4, fp.piece.width, fp.piece.height, 8);\n                                ctx.fill();\n                                \n                                // Draw piece\n                                ctx.fillStyle = '#FFFFFF';\n                                ctx.beginPath();\n                                ctx.roundRect(0, 0, fp.piece.width, fp.piece.height, 8);\n                                ctx.fill();\n                                \n                                // Draw image\n                                ctx.save();\n                                ctx.beginPath();\n                                ctx.roundRect(2, 2, fp.piece.width - 4, fp.piece.height - 4, 6);\n                                ctx.clip();\n                                ctx.drawImage(\n                                    puzzleImage,\n                                    fp.piece.srcX, fp.piece.srcY, fp.piece.srcW, fp.piece.srcH,\n                                    2, 2, fp.piece.width - 4, fp.piece.height - 4\n                                );\n                                ctx.restore();\n                                \n                                // Draw border\n                                ctx.strokeStyle = '#E94196';\n                                ctx.lineWidth = 2;\n                                ctx.beginPath();\n                                ctx.roundRect(0, 0, fp.piece.width, fp.piece.height, 8);\n                                ctx.stroke();\n                                \n                                ctx.restore();\n                                \n                                // Create sparkle trail\n                                if (Math.random() < 0.3) {\n                                    sparkles.push({\n                                        x: fp.x + fp.piece.width / 2,\n                                        y: fp.y + fp.piece.height / 2,\n                                        vx: (Math.random() - 0.5) * 2,\n                                        vy: (Math.random() - 0.5) * 2,\n                                        size: 4 + Math.random() * 6,\n                                        alpha: 0.8,\n                                        color: ['#FFD700', '#FF69B4', '#C44FFF'][Math.floor(Math.random() * 3)],\n                                        rotation: 0,\n                                        rotationSpeed: 0\n                                    });\n                                }\n                            }\n                        });\n                    }\n\n                    // Update and draw animating piece\n                    if (animatingPiece) {\n                        animatingPiece.progress += dt * 4;\n                        \n                        if (animatingPiece.progress >= 1) {\n                            // Animation complete\n                            const piece = animatingPiece.piece;\n                            piece.connected = true;\n                            piece.x = piece.targetX;\n                            piece.y = piece.targetY;\n                            connectedPieces.push(piece);\n                            \n                            // Create sparkle effect\n                            createSparkleEffect(\n                                piece.targetX + piece.width / 2,\n                                piece.targetY + piece.height / 2,\n                                15\n                            );\n                            \n                            animatingPiece = null;\n                            updateProgress();\n                            \n                            // Check for completion\n                            if (connectedPieces.length === config.puzzles[currentPuzzleIndex].pieceCount) {\n                                setTimeout(showCompletion, 500);\n                            }\n                        } else {\n                            // Ease out animation for position only (no size change)\n                            const t = 1 - Math.pow(1 - animatingPiece.progress, 3);\n                            const piece = animatingPiece.piece;\n                            \n                            // Animate position\n                            piece.x = animatingPiece.startX + (piece.targetX - animatingPiece.startX) * t;\n                            piece.y = animatingPiece.startY + (piece.targetY - animatingPiece.startY) * t;\n                            \n                            // Draw the animating piece at full size\n                            ctx.save();\n                            \n                            // Draw shadow\n                            ctx.fillStyle = 'rgba(0,0,0,0.3)';\n                            ctx.beginPath();\n                            ctx.roundRect(piece.x + 5, piece.y + 5, piece.width, piece.height, 8);\n                            ctx.fill();\n                            \n                            // Draw piece background\n                            ctx.fillStyle = '#FFFFFF';\n                            ctx.beginPath();\n                            ctx.roundRect(piece.x, piece.y, piece.width, piece.height, 8);\n                            ctx.fill();\n                            \n                            // Clip and draw image portion\n                            ctx.save();\n                            ctx.beginPath();\n                            ctx.roundRect(piece.x + 2, piece.y + 2, piece.width - 4, piece.height - 4, 6);\n                            ctx.clip();\n                            \n                            ctx.drawImage(\n                                puzzleImage,\n                                piece.srcX, piece.srcY, piece.srcW, piece.srcH,\n                                piece.x + 2, piece.y + 2, piece.width - 4, piece.height - 4\n                            );\n                            ctx.restore();\n                            \n                            // Draw glowing border\n                            ctx.strokeStyle = '#FFD700';\n                            ctx.lineWidth = 4;\n                            ctx.shadowColor = '#FFD700';\n                            ctx.shadowBlur = 20;\n                            ctx.beginPath();\n                            ctx.roundRect(piece.x, piece.y, piece.width, piece.height, 8);\n                            ctx.stroke();\n                            \n                            ctx.restore();\n                        }\n                    }\n\n                    // Update shake animations\n                    pieces.forEach(piece => {\n                        if (piece.shake > 0) {\n                            piece.shake -= dt * 3;\n                            if (piece.shake < 0) piece.shake = 0;\n                        }\n                    });\n\n                    // Draw tray background - dynamic size based on current puzzle\n                    let traySize;\n                    if (config.puzzles[currentPuzzleIndex].pieceCount <= 4) {\n                        traySize = 200;\n                    } else if (config.puzzles[currentPuzzleIndex].pieceCount <= 12) {\n                        traySize = 280;\n                    } else if (config.puzzles[currentPuzzleIndex].pieceCount <= 30) {\n                        traySize = 340;\n                    } else {\n                        traySize = 370;\n                    }\n                    const trayTop = canvas.height - traySize;\n                    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';\n                    ctx.fillRect(0, trayTop, canvas.width, traySize);\n                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';\n                    ctx.lineWidth = 2;\n                    ctx.beginPath();\n                    ctx.moveTo(0, trayTop);\n                    ctx.lineTo(canvas.width, trayTop);\n                    ctx.stroke();\n\n                    // Draw unconnected pieces in tray (only if not flying off)\n                    if (flyingOffPieces.length === 0) {\n                        pieces.filter(p => !p.connected && p !== draggingPiece).forEach(piece => {\n                            drawPiece(piece, false, false);\n                        });\n                        \n                        // Draw dragging piece on top\n                        if (draggingPiece && !draggingPiece.connected) {\n                            drawPiece(draggingPiece, false, true);\n                        }\n                    }\n\n                    // Update and draw sparkles\n                    updateSparkles(dt);\n                    drawSparkles();\n                }\n\n                requestAnimationFrame(gameLoop);\n            }\n\n            // ==================== INITIALIZATION ====================\n            await preloadAssets();\n            \n            // Hide loading screen with fade out\n            setTimeout(() => {\n                loadingScreen.classList.add('fade-out');\n                setTimeout(() => {\n                    loadingScreen.style.display = 'none';\n                }, 500);\n            }, 500);\n            \n            createBackgroundSparkles();\n            setupEventListeners();\n\n            // Show game parameters in both modes\n            if (mode === 'edit') {\n                setupEditMode();\n            } else {\n                lib.showGameParameters({\n                    name: 'Game Settings',\n                    params: {\n                        'Music Volume': {\n                            key: 'settings.musicVolume',\n                            type: 'slider',\n                            min: 0,\n                            max: 100,\n                            step: 10,\n                            onChange: (value) => {\n                                config.settings.musicVolume = value;\n                                if (bgMusicGain) {\n                                    bgMusicGain.gain.value = value / 100 * 0.3;\n                                }\n                            }\n                        }\n                    }\n                });\n                // Start directly with first puzzle\n                startPuzzle(0);\n            }\n\n            requestAnimationFrame(gameLoop);\n        }\n    </script>\n</body>\n</html>", "game_config": "{\n  \"puzzles\": [\n    {\n      \"id\": \"puzzle_fashion_show\",\n      \"pieceCount\": 2,\n      \"unlocked\": true,\n      \"completionMessage\": \"Gotcha! You fell for the Fashion Fail! \\ud83e\\udd2a\"\n    },\n    {\n      \"id\": \"puzzle_beach_day\",\n      \"pieceCount\": 2,\n      \"unlocked\": true,\n      \"completionMessage\": \"Nice try! Beach Blunder complete! \\ud83d\\ude1c\"\n    },\n    {\n      \"id\": \"puzzle_dream_house\",\n      \"pieceCount\": 4,\n      \"unlocked\": true,\n      \"completionMessage\": \"Pranked! House of Tricks revealed! \\ud83c\\udf89\"\n    },\n    {\n      \"id\": \"puzzle_shopping_spree\",\n      \"pieceCount\": 4,\n      \"unlocked\": true,\n      \"completionMessage\": \"Ha! Shopping Swindle solved! \\ud83d\\udecd\\ufe0f\"\n    },\n    {\n      \"id\": \"puzzle_princess_castle\",\n      \"pieceCount\": 4,\n      \"unlocked\": true,\n      \"completionMessage\": \"Fooled ya! Castle Chaos cracked! \\ud83c\\udff0\"\n    },\n    {\n      \"id\": \"puzzle_garden_party\",\n      \"pieceCount\": 6,\n      \"unlocked\": true,\n      \"completionMessage\": \"Surprise! Garden Goof done! \\ud83c\\udf3b\"\n    },\n    {\n      \"id\": \"puzzle_ice_skating\",\n      \"pieceCount\": 6,\n      \"unlocked\": true,\n      \"completionMessage\": \"Slipped up! Ice Slip-Up finished! \\u26f8\\ufe0f\"\n    },\n    {\n      \"id\": \"puzzle_spa_day\",\n      \"pieceCount\": 6,\n      \"unlocked\": true,\n      \"completionMessage\": \"Tricked! Spa Shenanigans solved! \\ud83e\\uddd6\"\n    },\n    {\n      \"id\": \"puzzle_concert_stage\",\n      \"pieceCount\": 9,\n      \"unlocked\": true,\n      \"completionMessage\": \"Bamboozled! Concert Caper complete! \\ud83c\\udfa4\"\n    },\n    {\n      \"id\": \"puzzle_horse_ranch\",\n      \"pieceCount\": 9,\n      \"unlocked\": true,\n      \"completionMessage\": \"Horsing around! Ranch Ruse revealed! \\ud83d\\udc34\"\n    },\n    {\n      \"id\": \"puzzle_ballet_studio\",\n      \"pieceCount\": 12,\n      \"unlocked\": true,\n      \"completionMessage\": \"Oops! Ballet Blooper busted! \\ud83e\\ude70\"\n    },\n    {\n      \"id\": \"puzzle_fashion_design\",\n      \"pieceCount\": 12,\n      \"unlocked\": true,\n      \"completionMessage\": \"Disaster averted! Design Disaster done! \\u2702\\ufe0f\"\n    },\n    {\n      \"id\": \"puzzle_mermaid_lagoon\",\n      \"pieceCount\": 16,\n      \"unlocked\": true,\n      \"completionMessage\": \"Fishy business! Mermaid Mischief mastered! \\ud83e\\udddc\"\n    },\n    {\n      \"id\": \"puzzle_astronaut_adventure\",\n      \"pieceCount\": 16,\n      \"unlocked\": true,\n      \"completionMessage\": \"Spoofed! Space Spoof solved! \\ud83d\\ude80\"\n    },\n    {\n      \"id\": \"puzzle_pet_salon\",\n      \"pieceCount\": 20,\n      \"unlocked\": true,\n      \"completionMessage\": \"Ruff! Pet Prank perfected! \\ud83d\\udc36\"\n    },\n    {\n      \"id\": \"puzzle_bakery\",\n      \"pieceCount\": 20,\n      \"unlocked\": true,\n      \"completionMessage\": \"Half-baked! Bakery Bamboozle baked! \\ud83c\\udf70\"\n    },\n    {\n      \"id\": \"puzzle_art_studio\",\n      \"pieceCount\": 25,\n      \"unlocked\": true,\n      \"completionMessage\": \"Artsy! Art Attack assembled! \\ud83c\\udfa8\"\n    },\n    {\n      \"id\": \"puzzle_gymnastics\",\n      \"pieceCount\": 25,\n      \"unlocked\": true,\n      \"completionMessage\": \"Flip out! Gymnastics Gag got! \\ud83e\\udd38\"\n    },\n    {\n      \"id\": \"puzzle_wedding_day\",\n      \"pieceCount\": 30,\n      \"unlocked\": true,\n      \"completionMessage\": \"Hitched! Wedding Whoopee wrapped! \\ud83d\\udc92\"\n    },\n    {\n      \"id\": \"puzzle_safari_adventure\",\n      \"pieceCount\": 30,\n      \"unlocked\": true,\n      \"completionMessage\": \"Wild one! Safari Snafu sorted! \\ud83e\\udd81\"\n    },\n    {\n      \"id\": \"puzzle_ski_resort\",\n      \"pieceCount\": 36,\n      \"unlocked\": true,\n      \"completionMessage\": \"Slick! Ski Scam complete! \\u26f7\\ufe0f\"\n    },\n    {\n      \"id\": \"puzzle_underwater_world\",\n      \"pieceCount\": 36,\n      \"unlocked\": true,\n      \"completionMessage\": \"Soaked! Underwater Upset unlocked! \\ud83d\\udc20\"\n    },\n    {\n      \"id\": \"puzzle_camping_trip\",\n      \"pieceCount\": 42,\n      \"unlocked\": true,\n      \"completionMessage\": \"Intense! Camping Craziness conquered! \\ud83c\\udfd5\\ufe0f\"\n    },\n    {\n      \"id\": \"puzzle_movie_star\",\n      \"pieceCount\": 42,\n      \"unlocked\": true,\n      \"completionMessage\": \"Action! Movie Mayhem mastered! \\ud83c\\udfac\"\n    },\n    {\n      \"id\": \"puzzle_chef_kitchen\",\n      \"pieceCount\": 49,\n      \"unlocked\": true,\n      \"completionMessage\": \"Spicy! Kitchen Kerfuffle cooked! \\ud83d\\udc68\\u200d\\ud83c\\udf73\"\n    },\n    {\n      \"id\": \"puzzle_vet_clinic\",\n      \"pieceCount\": 49,\n      \"unlocked\": true,\n      \"completionMessage\": \"Rascally! Vet Vexation vanquished! \\ud83d\\udc15\"\n    },\n    {\n      \"id\": \"puzzle_dance_party\",\n      \"pieceCount\": 56,\n      \"unlocked\": true,\n      \"completionMessage\": \"Booyah! Dance Debacle done! \\ud83d\\udc83\"\n    },\n    {\n      \"id\": \"puzzle_flower_shop\",\n      \"pieceCount\": 56,\n      \"unlocked\": true,\n      \"completionMessage\": \"Petals! Flower Fiasco finished! \\ud83c\\udf3a\"\n    },\n    {\n      \"id\": \"puzzle_race_car\",\n      \"pieceCount\": 64,\n      \"unlocked\": true,\n      \"completionMessage\": \"Vroom! Race Riot resolved! \\ud83c\\udfce\\ufe0f\"\n    },\n    {\n      \"id\": \"puzzle_space_station\",\n      \"pieceCount\": 72,\n      \"unlocked\": true,\n      \"completionMessage\": \"Cosmic! Station Stunt sorted! \\ud83d\\udef8\"\n    },\n    {\n      \"id\": \"puzzle_yoga_studio\",\n      \"pieceCount\": 81,\n      \"unlocked\": true,\n      \"completionMessage\": \"Namaste...not! Yoga Yikes done! \\ud83e\\uddd8\"\n    },\n    {\n      \"id\": \"puzzle_tea_party\",\n      \"pieceCount\": 90,\n      \"unlocked\": true,\n      \"completionMessage\": \"Steeped in tricks! Tea Trickery triumphed! \\ud83e\\uded6\"\n    },\n    {\n      \"id\": \"puzzle_carnival\",\n      \"pieceCount\": 100,\n      \"unlocked\": true,\n      \"completionMessage\": \"Conned! Carnival Con conquered! \\ud83c\\udfaa\"\n    },\n    {\n      \"id\": \"puzzle_birthday_party\",\n      \"pieceCount\": 110,\n      \"unlocked\": true,\n      \"completionMessage\": \"Surprise party! Birthday Bam banged! \\ud83c\\udf82\"\n    },\n    {\n      \"id\": \"puzzle_halloween\",\n      \"pieceCount\": 120,\n      \"unlocked\": true,\n      \"completionMessage\": \"BOO! Halloween Hoax hacked! \\ud83c\\udf83\"\n    },\n    {\n      \"id\": \"puzzle_holiday_winter\",\n      \"pieceCount\": 132,\n      \"unlocked\": true,\n      \"completionMessage\": \"Jolly jokes! Holiday Hijinks handled! \\ud83c\\udf84\"\n    },\n    {\n      \"id\": \"puzzle_poolside\",\n      \"pieceCount\": 144,\n      \"unlocked\": true,\n      \"completionMessage\": \"Splashing! Poolside Prank pulled! \\ud83c\\udfca\"\n    },\n    {\n      \"id\": \"puzzle_music_studio\",\n      \"pieceCount\": 156,\n      \"unlocked\": true,\n      \"completionMessage\": \"Jammin'! Music Madness managed! \\ud83c\\udfb8\"\n    },\n    {\n      \"id\": \"puzzle_library\",\n      \"pieceCount\": 169,\n      \"unlocked\": true,\n      \"completionMessage\": \"Shh! Library Laughs learned! \\ud83d\\udcda\"\n    },\n    {\n      \"id\": \"puzzle_science_lab\",\n      \"pieceCount\": 182,\n      \"unlocked\": true,\n      \"completionMessage\": \"Eureka! Science Silliness solved! \\ud83e\\uddea\"\n    }\n  ],\n  \"theme\": {\n    \"primaryColor\": \"#FF6B35\",\n    \"backgroundColor\": \"gradient\"\n  },\n  \"settings\": {\n    \"musicVolume\": 50\n  }\n}", "game_design_document": "## Core Game Loop and Mechanics\n\n**Barbie's Dream Puzzle** is a relaxing puzzle game where players connect scattered puzzle pieces to reveal beautiful Barbie-themed images. The core gameplay loop consists of:\n\n1. **Puzzle Selection**: Players choose from available puzzles (starting with 1-2 unlocked, more unlock as they progress)\n2. **Piece Connection**: Tap/click puzzle pieces in the correct sequence to connect them and gradually reveal the complete image\n3. **Completion Reward**: Successfully completing a puzzle unlocks the next puzzle and shows a celebration animation\n4. **Progression**: Players work through increasingly complex puzzles featuring different Barbie scenes\n\n**What Makes It Engaging:**\n- Satisfying visual feedback as pieces snap together and the image is revealed\n- Progressive difficulty with more pieces in later puzzles\n- Collection aspect - unlocking new Barbie scenes motivates continued play\n- Relaxing, stress-free gameplay with no time limits or penalties\n- Beautiful, colorful Barbie-themed artwork that appeals to the target audience\n\n**Win Condition**: Complete the current puzzle by connecting all pieces in the correct order\n**Progression**: Unlock new puzzles by completing previous ones\n\n## Starting Scope\n\nFor the initial implementation, we'll focus on creating a polished, playable core experience:\n\n**Must Have (First Iteration):**\n- 3 complete puzzles with different Barbie scenes (Fashion Show, Beach Day, Dream House)\n- Simple difficulty: 6-8 pieces per puzzle\n- Smooth piece connection mechanics with visual/audio feedback\n- Puzzle selection screen showing locked/unlocked states\n- Celebration animation when puzzle is completed\n- Progress persistence (which puzzles are unlocked)\n- Sparkle/shimmer effects when pieces connect correctly\n- Background music and sound effects\n\n**Future Iterations:**\n- More puzzles (10+ total)\n- Multiple difficulty levels (Easy: 6 pieces, Medium: 10 pieces, Hard: 15 pieces)\n- Hint system to help players find the next correct piece\n- Star rating system based on completion time\n- Mini-games between puzzles\n- Customizable Barbie avatar that appears on completion screen\n\n## Game Perspective\n\n**Fixed-screen** perspective with a single puzzle board view. The game uses a portrait-oriented layout optimized for the 720\u00d71280 iframe:\n\n- **Top section (0-200px)**: Header with puzzle title, back button, and progress indicator\n- **Middle section (200-1000px)**: Main puzzle area where pieces are displayed and connected\n- **Bottom section (1000-1280px)**: UI elements like \"Next Puzzle\" button and completion messages\n\nNo scrolling is needed - all puzzle pieces fit within the visible play area.\n\n## Game World and Level Design\n\n### Puzzle Structure\n\nEach puzzle consists of:\n- A complete reference image (shown faintly in background as guide)\n- 6-8 puzzle pieces scattered around the play area\n- Numbered connection points on each piece\n- A defined connection sequence (pieces must be connected in order)\n\n### Three Starting Puzzles\n\n**Puzzle 1: \"Fashion Show Barbie\"**\n- 6 pieces\n- Scene: Barbie in a glamorous pink gown on a runway with sparkles\n- Easiest puzzle to teach mechanics\n- Pieces arranged in a simple left-to-right, top-to-bottom pattern\n\n**Puzzle 2: \"Beach Day Barbie\"**\n- 7 pieces  \n- Scene: Barbie in beachwear with surfboard, ocean background, palm trees\n- Slightly more complex piece arrangement\n- Introduces diagonal connections\n\n**Puzzle 3: \"Dream House Barbie\"**\n- 8 pieces\n- Scene: Barbie in her iconic Dream House living room with furniture and accessories\n- Most complex starting puzzle\n- Requires more strategic thinking about piece order\n\n### Puzzle Piece Design\n\nEach piece:\n- Has a distinct shape (irregular edges that fit together like jigsaw pieces)\n- Shows a portion of the complete image\n- Has a number indicator (1, 2, 3, etc.) showing connection order\n- Glows or highlights when it's the next correct piece to connect\n- Snaps into place with satisfying animation when connected correctly\n\n## Edit Mode Design\n\nEdit mode allows players to customize puzzle content and difficulty:\n\n**Editable Properties:**\n\n1. **Puzzle Images** (per puzzle)\n   - Upload custom images to create personalized puzzles\n   - Default: Pre-made Barbie-themed scenes\n   - Constraint: Images should be portrait-oriented, minimum 600\u00d7800px\n\n2. **Number of Pieces** (per puzzle)\n   - Adjust difficulty by changing piece count\n   - Range: 4-12 pieces\n   - Default: 6-8 pieces depending on puzzle\n\n3. **Color Theme**\n   - Primary color (affects UI elements, buttons, highlights)\n   - Default: Barbie pink (#E94196)\n   - Constraint: Must maintain sufficient contrast for readability\n\n4. **Background Style**\n   - Choose from preset backgrounds (sparkles, solid color, gradient)\n   - Default: Pink gradient with sparkle overlay\n\n5. **Completion Message**\n   - Customize the text shown when puzzle is completed\n   - Default: \"Fabulous! You completed the puzzle!\"\n   - Constraint: Max 50 characters\n\n**Edit Mode Interface:**\n- Accessible via settings icon in top-right corner\n- Shows list of all puzzles with edit button for each\n- Simple form-based editing with preview\n- \"Reset to Default\" option for each property\n\n**Constraints:**\n- Minimum 4 pieces, maximum 12 pieces (to maintain playability)\n- Custom images must be appropriate content\n- Color choices must maintain UI readability\n- At least 1 puzzle must remain unlocked at all times\n\n## Control Design\n\n**Mobile (Touch) Controls:**\n- **Tap piece**: Select and connect the next piece in sequence\n- **Tap \"Back\" button**: Return to puzzle selection screen\n- **Tap \"Next Puzzle\" button**: Proceed to next puzzle after completion\n- **Swipe**: Not used (all interactions are tap-based)\n\n**Desktop (Mouse/Keyboard) Controls:**\n- **Click piece**: Select and connect the next piece in sequence\n- **Click \"Back\" button**: Return to puzzle selection screen  \n- **Click \"Next Puzzle\" button**: Proceed to next puzzle after completion\n- **Number keys (1-9)**: Quick-select piece by its number (optional enhancement)\n- **Escape key**: Return to puzzle selection screen\n\n**Control Feedback:**\n- Pieces highlight/glow when hovered (desktop) or when they're the next correct piece\n- Incorrect piece selection shows gentle shake animation and plays error sound\n- Correct connection shows satisfying snap animation with sparkle effect and success sound\n- All interactive elements (buttons, pieces) are minimum 96\u00d796 pixels for touch-friendliness\n\n**Interaction Flow:**\n1. Player taps/clicks any puzzle piece\n2. If it's the correct next piece in sequence: piece animates to its position and connects\n3. If it's incorrect: piece shakes briefly, no connection made\n4. Process repeats until all pieces are connected\n5. Completion celebration triggers automatically\n\n## Art Style and Visual Theme\n\n**Overall Style:** Bright, colorful, and polished cartoon aesthetic inspired by Barbie's signature look. The game should feel glamorous, fun, and inviting with a focus on pink tones, sparkles, and feminine design elements.\n\n**Color Palette:**\n- Primary: Barbie pink (#E94196)\n- Secondary: Light pink (#FFB6D9), purple (#C44FFF)\n- Accents: Gold (#FFD700), white (#FFFFFF)\n- Backgrounds: Soft gradients from pink to purple with sparkle overlays\n\n**Visual Elements:**\n\n1. **Puzzle Pieces:**\n   - Cartoon-style jigsaw piece shapes with smooth, rounded edges\n   - Each piece shows a portion of the full Barbie scene\n   - White border around each piece for definition\n   - Drop shadow for depth\n   - Number badges in top-left corner (white circle with pink number)\n\n2. **UI Elements:**\n   - Rounded, bubbly buttons with gradient fills\n   - Sparkle/star decorations around headers and completed puzzles\n   - Smooth animations and transitions\n   - Icons with thick outlines for clarity\n\n3. **Backgrounds:**\n   - Soft gradient backgrounds (pink to purple)\n   - Animated sparkle particles floating across screen\n   - Subtle texture overlay for visual interest\n\n4. **Typography:**\n   - Playful, rounded sans-serif font\n   - Bold headers in pink\n   - High contrast for readability\n\n**Asset Rendering Strategy:**\n- **Generated Assets:** All Barbie scene images, character artwork, decorative elements\n- **Code-Rendered:** UI buttons, puzzle piece shapes (SVG paths), sparkle particles, progress indicators, backgrounds (CSS gradients)\n\n**Consistency Notes:**\n- All Barbie character images should maintain consistent art style across puzzles\n- Viewing angle: Slight front-facing perspective for character scenes\n- Lighting: Bright, even lighting with soft shadows\n- Mood: Cheerful, aspirational, glamorous", "persistent_storage_config": null, "game_metadata": {"game_id": "01KMRFDS30XH9ZXCB9313TA7X5", "title": "Barbies Puzzle Prank Party ", "description": "Barbies Puzzle Prank Party is a colorful puzzle game where you drag and drop pieces to complete 40 hilarious April Fools-themed scenes with adorable Barbie characters getting caught up in silly prank", "thumbnail_url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/thumbnail_48417861-b77c-4a73-a991-bae0ffa248ff.webp", "created_at": 1774642980.0, "updated_at": 1774655864173.4946, "art_style": null, "is_remix": true, "base_game_id": "01KMG1QTW3CC5X3JB17HSNPBVG"}}