{"asset_map": {"character_hero_1": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/character_hero_1_197247a9-8ec4-47a5-9878-42b498491850.webp", "type": "image", "prompt": "Generate a full-body, front-view chibi-style anime boy character with spiky blue hair and a determined expression. Wearing a school uniform with a red tie. Large expressive eyes, small body proportions, vibrant colors, clean linework, polished game asset style. Transparent background, high resolution, detailed anime illustration.", "description": "Chibi anime boy with blue hair, the primary visual style reference for the hero set.", "subtype": "character", "aspect_ratio": [874, 1530], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "character_hero_2": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/character_hero_2_71627371-9750-4b99-9763-b78edd07c6db.webp", "type": "image", "prompt": "Generate a full-body, front-view chibi-style anime girl with long pink hair in twin tails and a cheerful smile. Wearing a magical girl outfit with ribbons and bows. Large sparkling eyes, small body proportions. Match the vibrant art style and clean linework of character_hero_1. Transparent background, high resolution, polished game asset.", "description": "Chibi anime magical girl with pink twin tails.", "subtype": "character", "aspect_ratio": [781, 1062], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "character_hero_3": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/character_hero_3_1188462c-fa10-4db1-9ac7-2c9156ee1118.webp", "type": "image", "prompt": "Generate a full-body, front-view chibi-style anime character with short green hair and a cool, confident expression. Wearing a sporty jacket and headphones around the neck. Large expressive eyes, small body proportions. Match the vibrant art style and clean linework of character_hero_1. Transparent background, high resolution, polished game asset.", "description": "Chibi anime character with green hair and headphones.", "subtype": "character", "aspect_ratio": [718, 1242], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "character_hero_4": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/character_hero_4_1c440e0e-5141-4eb3-a0e7-5811786f8a82.webp", "type": "image", "prompt": "Generate a full-body, front-view chibi-style anime girl with long purple hair and a gentle smile. Wearing a traditional Japanese school uniform with a sailor collar. Large kind eyes, small body proportions. Match the vibrant art style and clean linework of character_hero_1. Transparent background, high resolution, polished game asset.", "description": "Chibi anime girl with purple hair in a sailor uniform.", "subtype": "character", "aspect_ratio": [759, 1151], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "character_hero_5": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/character_hero_5_f84a3728-5a1c-4f09-aa5d-fbed7c8f3686.webp", "type": "image", "prompt": "Generate a full-body, front-view chibi-style anime boy with messy orange hair and an energetic grin. Wearing casual streetwear with a hoodie. Large bright eyes, small body proportions. Match the vibrant art style and clean linework of character_hero_1. Transparent background, high resolution, polished game asset.", "description": "Chibi anime boy with orange hair and a hoodie.", "subtype": "character", "aspect_ratio": [699, 1242], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "character_hero_6": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/character_hero_6_ca574de1-ddf7-49fb-a12e-94c9d3eb2efd.webp", "type": "image", "prompt": "Generate a full-body, front-view chibi-style anime girl with short blonde hair and a shy expression. Wearing a cute dress with frills and a bow. Large expressive eyes looking slightly to the side, small body proportions. Match the vibrant art style and clean linework of character_hero_1. Transparent background, high resolution, polished game asset.", "description": "Chibi anime girl with blonde hair and a frilly dress.", "subtype": "character", "aspect_ratio": [703, 1138], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "character_hero_7": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/character_hero_7_571fac2d-0c77-4551-be46-9dffc0ec4c11.webp", "type": "image", "prompt": "Generate a full-body, front-view chibi-style anime character with black hair in a ponytail and a serious expression. Wearing a martial arts gi or training outfit. Large focused eyes, small body proportions. Match the vibrant art style and clean linework of character_hero_1. Transparent background, high resolution, polished game asset.", "description": "Chibi anime character in martial arts gear.", "subtype": "character", "aspect_ratio": [583, 1248], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "character_hero_8": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/character_hero_8_6f06991b-7d62-4a3c-89af-8e7ff2919eed.webp", "type": "image", "prompt": "Generate a full-body, front-view chibi-style anime girl with silver/white hair and a mysterious smile. Wearing an elegant outfit with a cape or cloak. Large enchanting eyes, small body proportions. Match the vibrant art style and clean linework of character_hero_1. Transparent background, high resolution, polished game asset.", "description": "Chibi anime girl with silver hair and a cape.", "subtype": "character", "aspect_ratio": [788, 1158], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "card_back_stars": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/card_back_stars_74c94f7a-9b09-4ffe-96cd-59f3f9b096d4.webp", "type": "image", "prompt": "Generate a portrait orientation playing card back design. Features a repeating pattern of cute anime-style stars in various sizes on a soft gradient background ranging from pink to purple. Centered is a large, white question mark symbol with a subtle outer glow. The design has rounded corners, vibrant cheerful colors, and a polished game UI feel.", "description": "The card back design featuring a star pattern and question mark.", "subtype": "ui", "aspect_ratio": [1024, 1536], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "card_flip_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/card_flip_sound_154387fa-6bf9-4033-8ba5-cb75b4103643.mp3", "type": "audio", "prompt": "A quick, light card flip sound effect. A soft 'flick' of high-quality cardstock followed by a gentle airy whoosh. Playful, clean, and satisfying for a casual anime puzzle game. High-pitched and snappy, 0.3 seconds long.", "description": "Short and playful sound effect for flipping a card over.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.47, "loop": false, "animation": null}, "match_success_sound": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/match_success_sound_04a16a39-93da-41d7-95ce-111177c36fcc.mp3", "type": "audio", "prompt": "A cheerful and bright 'match' sound effect. High-pitched magical chime with a subtle sparkle texture. Positive reinforcement, similar to a 'collect' sound in a Nintendo-style game. Crystal clear, harmonic, and encouraging.", "description": "Rewarding chime for successfully matching a pair of cards.", "subtype": "effect", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 1.47, "loop": false, "animation": null}, "victory_jingle": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/victory_jingle_98485b6a-fee7-442c-8b52-c855ce616294.mp3", "type": "audio", "prompt": "Short 3-second victory fanfare, cute anime game style. Bright major key melody using glockenspiel, upbeat synth brass, and a quick drum roll. Celebratory, high energy, and rewarding. Ends on a clear, triumphant sustained note.", "description": "Upbeat musical fanfare played when the player wins the game.", "subtype": "music", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 3, "loop": false, "animation": null}, "card_back_anime_ornate": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/card_back_anime_ornate_71c5603a-0492-47f6-9c2c-14542906b0cb.webp", "type": "image", "prompt": "Generate a professional game asset of an ornate anime-style card back. The design features a central circular motif with soft pastel pink and gold colors, intricate filigree patterns, and subtle sparkle effects. The artistic style should match the soft, cute aesthetic of chibi anime characters like those in image 1. Vertical rectangular composition with a 160:200 aspect ratio, centered design, high resolution, detailed magical girl aesthetic.", "description": "An ornate anime-style card back design with pastel pink and gold filigree, matching the chibi character aesthetic.", "subtype": "ui", "aspect_ratio": [832, 1248], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "anime_fantasy_bg": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/anime_fantasy_bg_7c4df265-c364-49bc-af9f-10d437ac6a0c.webp", "type": "image", "prompt": "Generate a wide 16:9 breathtaking anime fantasy landscape background. The scene features cherry blossom trees (sakura) with falling petals and floating paper lanterns in the foreground. A magical forest occupies the midground, leading to distant purple mountains under a vibrant orange and pink sunset sky. A glowing river reflects the sky's colors. Soft, magical lighting, ultra-detailed professional anime art style, high quality, AAA game aesthetic. Match the soft pastel and vibrant tones seen in character_hero_2 and card_back_anime_ornate. Ensure the composition is centered so it remains visually appealing when cropped to a vertical aspect ratio.", "description": "A breathtaking anime fantasy landscape with cherry blossoms and floating lanterns at sunset, serving as the main game environment.", "subtype": "background", "aspect_ratio": [1248, 832], "compression_suggestion": "original", "duration_secs": null, "loop": null, "animation": null}, "premium_card_back": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/premium_card_back_47b13e03-bb2e-4726-a446-7568196f4345.webp", "type": "image", "prompt": "Generate an elegant anime-themed card back design. Rectangular shape, front view. The design features decorative gold and pastel pink filigree patterns, floating sakura petals, subtle stars, moons, and magical symbols in the center. The style should match the soft, high-quality aesthetic of image 1 and image 2. Professional game asset quality, vibrant but soft colors, clean lines, high detail, transparent background around the card edges.", "description": "An elegant, decorative anime-themed card back with gold filigree and sakura petals for premium gameplay.", "subtype": "ui", "aspect_ratio": [570, 832], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "char_warrior": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/char_warrior_1b646429-b354-4d5e-bd79-883f32e029d5.webp", "type": "image", "prompt": "Generate a full-body, front-facing illustration of a legendary chibi anime warrior. The character has expressive eyes, vibrant colors, and wearing intricate, detailed fantasy armor. They are holding a glowing magical sword. Use a professional chibi anime art style consistent with the proportions and aesthetic of character_hero_1. High resolution, clean lines, polished game-ready asset, transparent background.", "description": "A legendary warrior character with a glowing sword in a chibi anime style to match the existing hero collection.", "subtype": "character", "aspect_ratio": [744, 1227], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "char_princess": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/char_princess_2ff64947-950f-42ce-8683-e3aaa9378285.webp", "type": "image", "prompt": "Generate a full-body, front-facing detailed anime illustration of a magical princess. She has long flowing hair, a crystal crown, and an elegant dress adorned with subtle sakura patterns. Match the chibi-influenced yet professional anime art style of character_hero_1 and char_warrior. Soft, magical lighting, high resolution, professional game-ready asset. Transparent background.", "description": "A magical princess character with sakura patterns, matching the game's anime fantasy style.", "subtype": "character", "aspect_ratio": [812, 1073], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "char_dragon": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/char_dragon_6445e043-2d32-43e8-9d41-9e6685415c6d.webp", "type": "image", "prompt": "Generate a full-body, high-quality anime illustration of a majestic small white dragon. The dragon features elegant blue accents and sparkling, translucent wings. It has a cute but powerful appearance, expressive eyes, and professional anime art style detailing. Side-view, right-facing character. Transparent background, high resolution, game-ready asset.", "description": "A majestic small white dragon with blue accents and sparkling wings, serving as a companion or hero character.", "subtype": "character", "aspect_ratio": [873, 923], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "char_spirit": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/char_spirit_fa9fbbdf-f361-4232-a2a6-4e395a443ce4.webp", "type": "image", "prompt": "Generate a full-body, front-facing chibi anime illustration of a mystical forest spirit. The character should be glowing and ethereal with leaf-like features, soft magical lighting, and a vibrant aura. Maintain the same chibi anime proportions and professional art style as seen in character_hero_1 and char_dragon. High resolution, detailed, transparent background.", "description": "A mystical forest spirit character with an ethereal glow and leaf-like features.", "subtype": "character", "aspect_ratio": [872, 948], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "char_mascot": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/char_mascot_b1b4204b-85c2-4be7-87dc-8792213ed23b.webp", "type": "image", "prompt": "Generate a full-body, front-facing illustration of a cute chibi anime kitsune mascot. The fox has multiple fluffy tails, vibrant orange and white fur, and a decorative gold bell collar. Expressive and adorable large eyes, professional anime game art style, clean lines, high resolution, detailed fur texture. Match the chibi aesthetic and vibrant color palette of character_hero_1. Transparent background.", "description": "A cute anime kitsune mascot with multiple tails and a bell collar, serving as a companion character.", "subtype": "character", "aspect_ratio": [789, 1037], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "char_samurai": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/char_samurai_ac2be8d4-2842-4a6e-81df-73ee0f1846c7.webp", "type": "image", "prompt": "Detailed anime illustration of a noble samurai character in traditional robes with a katana, standing illustration, full body picture. Determined expression, sakura petals floating in the air. Match the chibi anime art style and coloring of character_hero_1. High quality, professional game asset, clean lines, vibrant colors, transparent background.", "description": "A noble anime samurai character for the hero set, featuring traditional robes and a katana.", "subtype": "character", "aspect_ratio": [729, 1232], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "char_mage": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/char_mage_d6787ee5-9dfe-4914-bb12-09b1bc39ff69.webp", "type": "image", "prompt": "Detailed anime illustration of a chibi-style magical girl mage holding a star-tipped staff. A glowing magical circle effect is positioned behind her. Vibrant purple and gold color palette. Full body picture, standing illustration, front-facing. High resolution, professional quality game asset, clean lines, transparent background. Match the artistic style and proportions of character_hero_2.", "description": "A magical girl mage character with a star staff and magical circle, matching the chibi anime style.", "subtype": "character", "aspect_ratio": [741, 954], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "char_mermaid": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/char_mermaid_bdd7ed20-17d4-4095-a398-670e1ef93bcf.webp", "type": "image", "prompt": "Generate a full-body, front-facing illustration of a graceful anime mermaid character. She features shimmering iridescent scales, flowing aquatic hair that drifts as if underwater, and is surrounded by magical bubbles and glowing pearls. Maintain the high-quality chibi-influenced anime art style seen in image 1, with vibrant colors and professional digital painting. Transparent background, high resolution, detailed character design.", "description": "A graceful anime mermaid character with shimmering scales and aquatic features for the character roster.", "subtype": "character", "aspect_ratio": [781, 1049], "compression_suggestion": "low", "duration_secs": null, "loop": null, "animation": null}, "bg_music_magical": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/sounds/effect/bg_music_magical_0c9df0ef-1467-4a1f-9b92-c8dd2658b62f.mp3", "type": "audio", "prompt": "Relaxing and magical anime fantasy background music, Ghibli-inspired orchestral arrangement. Features a soft, melodic piano lead, gentle woodwinds like flute and oboe, and sparkling twinkling bells/glockenspiel. Cheerful yet calm atmosphere, steady tempo around 90 BPM, bright major key. Smooth transitions with lush string swells and light pizzicato accents. High-quality production, instrumental only, designed to loop seamlessly for an immersive fantasy experience.", "description": "Relaxing and magical anime fantasy background music for a calm gameplay atmosphere.", "subtype": "music", "aspect_ratio": null, "compression_suggestion": "original", "duration_secs": 30, "loop": true, "animation": null}}, "game_code": "<!DOCTYPE html>\n<html>\n<head>\n    <title>Anime Card Match</title>\n    <style>\n        /* CSS Reset */\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body, html {\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            height: 100%;\n            overflow: hidden;\n            touch-action: none;\n            -ms-touch-action: none;\n            font-family: 'Poppins', 'Inter', sans-serif;\n        }\n\n        /* Custom Properties */\n        :root {\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            /* Premium Anime Palette */\n            --bg-glass: rgba(255, 255, 255, 0.25);\n            --bg-glass-heavy: rgba(255, 255, 255, 0.4);\n            --border-glass: rgba(255, 255, 255, 0.18);\n            --accent-pink: #FF85A1;\n            --accent-gold: #FFD700;\n            --accent-blue: #A1C4FD;\n            --text-premium: #2D3436;\n            --shadow-premium: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n        }\n\n        #game-world {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            background: #000;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            overflow: hidden;\n        }\n\n        #bg-container {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 0;\n            pointer-events: none;\n        }\n\n        .premium-bg {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            filter: brightness(0.85);\n        }\n\n        /* Home Screen */\n        .home-screen {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            z-index: 2000;\n            animation: fadeIn var(--transition-normal) var(--ease-out);\n            background: rgba(0, 0, 0, 0.4);\n            backdrop-filter: blur(8px);\n        }\n\n        .home-screen.hide {\n            display: none;\n        }\n\n        .game-title {\n            font-size: 84px;\n            color: #fff;\n            font-weight: 800;\n            text-shadow: 0 0 20px rgba(255, 133, 161, 0.8), 3px 3px 6px rgba(0, 0, 0, 0.5);\n            margin-bottom: var(--space-xl);\n            text-align: center;\n            line-height: 1.1;\n            letter-spacing: -2px;\n            font-family: 'Inter', sans-serif;\n        }\n\n        .game-subtitle {\n            font-size: 32px;\n            color: #fff;\n            margin-bottom: var(--space-xl);\n            text-align: center;\n            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);\n            font-weight: 400;\n        }\n\n        .start-btn {\n            background: linear-gradient(135deg, var(--accent-pink) 0%, #ff5277 100%);\n            color: white;\n            border: 2px solid rgba(255, 255, 255, 0.3);\n            border-radius: 50px;\n            padding: var(--space-md) var(--space-xl);\n            font-size: 42px;\n            font-weight: 800;\n            cursor: pointer;\n            box-shadow: 0 10px 30px rgba(255, 133, 161, 0.6);\n            transition: all var(--transition-fast) var(--ease-out);\n            min-width: 320px;\n            min-height: 110px;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n        }\n\n        .start-btn:hover {\n            transform: translateY(-5px) scale(1.05);\n            box-shadow: 0 15px 40px rgba(255, 133, 161, 0.8);\n            filter: brightness(1.1);\n        }\n\n        .start-btn:active {\n            transform: translateY(0) scale(0.98);\n        }\n\n        /* Top Bar */\n        .top-bar {\n            position: relative;\n            z-index: 10;\n            width: 100%;\n            height: 120px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 0 var(--space-md);\n            color: #fff;\n        }\n\n        .stat-display {\n            background: var(--bg-glass);\n            backdrop-filter: blur(10px);\n            border: 1px solid var(--border-glass);\n            padding: var(--space-sm) var(--space-lg);\n            border-radius: 20px;\n            font-size: 28px;\n            font-weight: 700;\n            box-shadow: var(--shadow-premium);\n            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        /* Card Grid */\n        .card-grid {\n            position: relative;\n            z-index: 5;\n            flex: 1;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            padding: var(--space-md);\n            padding-bottom: 120px;\n        }\n\n        .grid-container {\n            display: grid;\n            gap: 20px;\n        }\n\n        .grid-3x4 {\n            grid-template-columns: repeat(3, 180px);\n            grid-template-rows: repeat(4, 240px);\n        }\n\n        .grid-4x4 {\n            grid-template-columns: repeat(4, 150px);\n            grid-template-rows: repeat(4, 200px);\n        }\n\n        .grid-4x6 {\n            grid-template-columns: repeat(4, 150px);\n            grid-template-rows: repeat(6, 150px);\n        }\n\n        /* Card Styles */\n        .card {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            cursor: pointer;\n            perspective: 1000px;\n            transition: transform var(--transition-normal) var(--ease-out);\n        }\n\n        .card:hover:not(.flipped):not(.matched) {\n            transform: translateY(-10px) scale(1.05);\n            z-index: 20;\n        }\n\n        .card.flipped .card-inner {\n            transform: rotateY(180deg);\n        }\n\n        .card.matched .card-inner {\n            animation: matchSuccess 0.6s var(--ease-out) forwards;\n        }\n\n        .card-inner {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n            transform-style: preserve-3d;\n            will-change: transform;\n        }\n\n        .card-face {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            border-radius: 20px;\n            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);\n            overflow: hidden;\n            border: 3px solid rgba(255, 255, 255, 0.2);\n        }\n\n        .card-back {\n            background: #2D3436;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .card-back img {\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            image-rendering: -webkit-optimize-contrast;\n            object-fit: cover;\n        }\n\n        .card-front {\n            transform: rotateY(180deg);\n            background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 12px;\n        }\n\n        .card-front img {\n            width: 100%;\n            height: 100%;\n            object-image-transform: translateZ(0);\n            backface-visibility: hidden;\n            image-rendering: auto; /* Changed for better quality */\n            object-fit: contain;\n            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));\n        }\n\n        /* Sparkle Animation */\n        .sparkle {\n            position: absolute;\n            width: 20px;\n            height: 20px;\n            pointer-events: none;\n            z-index: 1000;\n            border-radius: 50%;\n            animation: sparkleAnim 0.8s ease-out forwards;\n        }\n\n        @keyframes sparkleAnim {\n            0% { transform: translate(0, 0) scale(1); opacity: 1; }\n            100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }\n        }\n\n        /* Sakura Particles */\n        .sakura {\n            position: absolute;\n            background: #FFB7C5;\n            border-radius: 100% 0 100% 0;\n            pointer-events: none;\n            z-index: 1;\n            opacity: 0.8;\n            animation: sakuraFall linear infinite;\n        }\n\n        @keyframes sakuraFall {\n            0% {\n                transform: translateY(-100px) translateX(0) rotate(0deg);\n                opacity: 0;\n            }\n            10% { opacity: 0.8; }\n            90% { opacity: 0.8; }\n            100% {\n                transform: translateY(1380px) translateX(200px) rotate(720deg);\n                opacity: 0;\n            }\n        }\n\n        @keyframes matchSuccess {\n            0% { transform: rotateY(180deg) scale(1); }\n            50% { transform: rotateY(180deg) scale(1.1); box-shadow: 0 0 40px var(--accent-gold); }\n            100% { transform: rotateY(180deg) scale(1); box-shadow: 0 0 20px var(--accent-gold); }\n        }\n\n        /* UI Elements */\n        .combo-counter {\n            position: fixed;\n            bottom: 40px;\n            right: 40px;\n            font-size: 64px;\n            font-weight: 900;\n            color: var(--accent-gold);\n            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 2px 2px 4px rgba(0,0,0,0.5);\n            pointer-events: none;\n            z-index: 100;\n            opacity: 0;\n            transform: scale(0.5);\n            transition: all 0.3s var(--ease-bounce);\n        }\n\n        .combo-counter.show {\n            opacity: 1;\n            transform: scale(1);\n        }\n\n        .home-buttons {\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-md);\n            align-items: center;\n        }\n\n        .secondary-buttons {\n            display: flex;\n            gap: var(--space-md);\n        }\n\n        .home-btn {\n            background: var(--bg-glass);\n            backdrop-filter: blur(5px);\n            color: #fff;\n            border: 2px solid var(--border-glass);\n            border-radius: 20px;\n            padding: var(--space-sm) var(--space-lg);\n            font-size: 22px;\n            font-weight: 700;\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            min-width: 200px;\n            min-height: 80px;\n            box-shadow: var(--shadow-premium);\n        }\n\n        .home-btn:hover {\n            background: var(--bg-glass-heavy);\n            transform: translateY(-5px);\n            border-color: #fff;\n        }\n\n        /* Level Display */\n        .level-display {\n            position: absolute;\n            top: var(--space-md);\n            left: var(--space-md);\n            background: var(--bg-glass);\n            backdrop-filter: blur(10px);\n            padding: var(--space-sm) var(--space-lg);\n            border-radius: 20px;\n            font-size: 32px;\n            font-weight: 800;\n            color: #fff;\n            box-shadow: var(--shadow-premium);\n            z-index: 100;\n            border: 1px solid var(--border-glass);\n        }\n\n        /* Daily Reward Button */\n        .daily-reward-btn {\n            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);\n            color: white;\n            border: 2px solid rgba(255, 255, 255, 0.4);\n            border-radius: 20px;\n            padding: var(--space-sm) var(--space-xl);\n            font-size: 26px;\n            font-weight: 800;\n            cursor: pointer;\n            transition: all var(--transition-fast) var(--ease-out);\n            min-width: 320px;\n            min-height: 90px;\n            margin-top: var(--space-md);\n            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.5);\n            text-transform: uppercase;\n        }\n\n        .daily-reward-btn:hover:not(:disabled) {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 35px rgba(255, 215, 0, 0.7);\n        }\n\n        .daily-reward-btn:disabled {\n            background: rgba(255, 255, 255, 0.1);\n            color: rgba(255, 255, 255, 0.5);\n            border-color: transparent;\n            cursor: not-allowed;\n            box-shadow: none;\n            backdrop-filter: blur(5px);\n        }\n\n        /* Achievement Notification */\n        .achievement-notification {\n            position: fixed;\n            top: 40px;\n            right: 40px;\n            background: var(--bg-glass-heavy);\n            backdrop-filter: blur(15px);\n            border: 2px solid var(--accent-gold);\n            color: #fff;\n            padding: var(--space-md);\n            border-radius: 24px;\n            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);\n            z-index: 4000;\n            min-width: 350px;\n            animation: slideInRight 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n            display: none;\n        }\n\n        .achievement-notification.show {\n            display: block;\n        }\n\n        .achievement-icon {\n            font-size: 64px;\n            text-align: center;\n            margin-bottom: var(--space-xs);\n            filter: drop-shadow(0 0 10px var(--accent-gold));\n        }\n\n        .achievement-title {\n            font-size: 28px;\n            font-weight: 800;\n            text-align: center;\n            margin-bottom: var(--space-xs);\n            color: var(--accent-gold);\n        }\n\n        .achievement-description {\n            font-size: 20px;\n            text-align: center;\n            opacity: 0.9;\n        }\n\n        /* Achievements Modal Content */\n        .achievements-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--space-sm);\n            margin-top: var(--space-md);\n        }\n\n        .achievement-badge {\n            background: var(--bg-glass);\n            backdrop-filter: blur(5px);\n            border-radius: 20px;\n            padding: var(--space-md);\n            text-align: center;\n            box-shadow: var(--shadow-premium);\n            transition: all 0.3s;\n            border: 1px solid var(--border-glass);\n        }\n\n        .achievement-badge:hover {\n            transform: translateY(-10px) scale(1.05);\n            background: var(--bg-glass-heavy);\n            border-color: var(--accent-gold);\n        }\n\n        .achievement-badge.locked {\n            opacity: 0.3;\n            filter: grayscale(100%);\n        }\n\n        .achievement-badge-icon {\n            font-size: 60px;\n            margin-bottom: var(--space-xs);\n        }\n\n        .achievement-badge-name {\n            font-size: 22px;\n            font-weight: 800;\n            color: #fff;\n            margin-bottom: 4px;\n        }\n\n        .achievement-badge-desc {\n            font-size: 16px;\n            color: rgba(255, 255, 255, 0.8);\n        }\n\n        /* Modal Styles */\n        .modal-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 3000;\n            backdrop-filter: blur(10px);\n        }\n\n        .modal-overlay.show {\n            display: flex;\n        }\n\n        .modal-content {\n            background: var(--bg-glass-heavy);\n            backdrop-filter: blur(20px);\n            border-radius: 40px;\n            padding: var(--space-xl);\n            width: 90%;\n            max-width: 650px;\n            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);\n            animation: bounceIn 0.5s var(--ease-bounce);\n            border: 2px solid var(--border-glass);\n            color: #fff;\n        }\n\n        .modal-header {\n            font-size: 48px;\n            color: var(--accent-gold);\n            font-weight: 800;\n            margin-bottom: var(--space-lg);\n            text-align: center;\n            text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);\n        }\n\n        .modal-body {\n            font-size: 24px;\n            line-height: 1.6;\n            margin-bottom: var(--space-xl);\n        }\n\n        .close-modal-btn {\n            width: 100%;\n            background: linear-gradient(135deg, var(--accent-pink) 0%, #ff5277 100%);\n            color: white;\n            border: none;\n            border-radius: 25px;\n            padding: var(--space-md);\n            font-size: 32px;\n            font-weight: 800;\n            cursor: pointer;\n            transition: all 0.2s;\n            box-shadow: 0 10px 30px rgba(255, 133, 161, 0.4);\n        }\n\n        .close-modal-btn:hover {\n            transform: translateY(-3px);\n            filter: brightness(1.1);\n        }\n\n        /* Victory Screen */\n        .victory-screen {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.85);\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 1000;\n            animation: fadeIn var(--transition-normal) var(--ease-out);\n            backdrop-filter: blur(15px);\n        }\n\n        .victory-screen.show {\n            display: flex;\n        }\n\n        .victory-modal {\n            background: var(--bg-glass-heavy);\n            backdrop-filter: blur(20px);\n            border-radius: 40px;\n            padding: var(--space-xl);\n            text-align: center;\n            box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);\n            animation: bounceIn 0.6s var(--ease-bounce);\n            max-width: 650px;\n            margin: 0 var(--space-md);\n            border: 2px solid var(--accent-gold);\n            color: #fff;\n        }\n\n        .victory-title {\n            font-size: 72px;\n            color: var(--accent-gold);\n            margin-bottom: var(--space-lg);\n            font-weight: 900;\n            text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);\n        }\n\n        .victory-stats {\n            font-size: 36px;\n            margin-bottom: var(--space-lg);\n            line-height: 1.4;\n            color: #fff;\n        }\n\n        .play-again-btn {\n            background: linear-gradient(135deg, var(--accent-pink) 0%, #ff5277 100%);\n            color: white;\n            border: none;\n            border-radius: 25px;\n            padding: var(--space-md) var(--space-xl);\n            font-size: 42px;\n            font-weight: 800;\n            cursor: pointer;\n            box-shadow: 0 10px 40px rgba(255, 133, 161, 0.6);\n            transition: all 0.3s;\n            min-width: 350px;\n            min-height: 110px;\n        }\n\n        .play-again-btn:hover {\n            transform: translateY(-10px) scale(1.05);\n            box-shadow: 0 20px 60px rgba(255, 133, 161, 0.8);\n        }\n    </style>\n</head>\n<body>\n    <div id=\"game-world\">\n        <div id=\"bg-container\"></div>\n        <div id=\"sakura-container\"></div>\n        <div class=\"combo-counter\" id=\"combo-counter\">0 COMBO</div>\n\n        <!-- Home Screen -->\n        <div class=\"home-screen\" id=\"home-screen\">\n            <div class=\"level-display\" id=\"home-level-display\">Level 1</div>\n            <div class=\"game-title\">ANIME<br>MYSTICAL MATCH</div>\n            <div class=\"game-subtitle\">Discover the spirits of the Sakura realm</div>\n            <div class=\"home-buttons\">\n                <button class=\"start-btn\" id=\"start-btn\">Begin Journey</button>\n                <div class=\"secondary-buttons\">\n                    <button class=\"home-btn\" id=\"how-to-play-btn\">Guidance</button>\n                    <button class=\"home-btn\" id=\"view-achievements-btn\">Glory</button>\n                </div>\n                <button class=\"daily-reward-btn\" id=\"daily-reward-btn\" disabled>Claim Spirit Gift</button>\n            </div>\n        </div>\n\n        <!-- Modals -->\n        <div class=\"modal-overlay\" id=\"modal-overlay\">\n            <div class=\"modal-content\" id=\"how-to-play-modal\" style=\"display: none;\">\n                <div class=\"modal-header\">How to Play</div>\n                <div class=\"modal-body\">\n                    <p>1. Tap a card to flip it and reveal the character.</p>\n                    <p>2. Tap another card to try and find its match.</p>\n                    <p>3. If they match, they stay face-up!</p>\n                    <p>4. If they don't match, they flip back over.</p>\n                    <p>5. Clear the entire board in the fewest moves and fastest time!</p>\n                </div>\n                <button class=\"close-modal-btn\">Got it!</button>\n            </div>\n\n            <div class=\"modal-content\" id=\"achievements-modal\" style=\"display: none;\">\n                <div class=\"modal-header\">\ud83c\udfc6 Achievements \ud83c\udfc6</div>\n                <div class=\"modal-body\">\n                    <div class=\"achievements-grid\" id=\"achievements-grid\"></div>\n                </div>\n                <button class=\"close-modal-btn\">Close</button>\n            </div>\n        </div>\n\n        <!-- Achievement Notification -->\n        <div class=\"achievement-notification\" id=\"achievement-notification\">\n            <div class=\"achievement-icon\" id=\"achievement-notif-icon\">\ud83c\udfc6</div>\n            <div class=\"achievement-title\" id=\"achievement-notif-title\">Achievement Unlocked!</div>\n            <div class=\"achievement-description\" id=\"achievement-notif-desc\">Description</div>\n        </div>\n\n        <!-- Top Bar -->\n        <div class=\"top-bar\">\n            <div class=\"stat-display\" id=\"level-display\">Level 1</div>\n            <div class=\"stat-display\" id=\"timer-display\">Time: 0s</div>\n            <div class=\"stat-display\" id=\"moves-display\">Moves: 0</div>\n            <button class=\"home-btn\" id=\"reset-game-btn\" style=\"min-width: 120px; min-height: 60px; font-size: 18px; margin-left: 10px;\">Reset</button>\n        </div>\n\n        <!-- Card Grid -->\n        <div class=\"card-grid\">\n            <div class=\"grid-container grid-4x4\" id=\"grid-container\"></div>\n        </div>\n\n        <!-- Victory Screen -->\n        <div class=\"victory-screen\" id=\"victory-screen\">\n            <div class=\"victory-modal\">\n                <div class=\"victory-title\">\ud83c\udf89 Victory! \ud83c\udf89</div>\n                <div class=\"level-progress-section\" id=\"level-progress-section\">\n                    <div class=\"level-info\" id=\"level-info\">Level Complete!</div>\n                </div>\n                <div class=\"victory-stats\" id=\"victory-stats\"></div>\n                \n                <button class=\"play-again-btn\" id=\"play-again-btn\">Play Again</button>\n            </div>\n        </div>\n    </div>\n\n    <script>\n        /**\n         * ANIME CARD MATCH GAME\n         * \n         * A memory matching game featuring cute anime characters.\n         * Players flip cards to find matching pairs, tracking moves and time.\n         * \n         * Game Mechanics:\n         * - Flip two cards per turn to find matches\n         * - Matched pairs stay revealed with glow effect\n         * - Mismatched pairs flip back after 1 second\n         * - Complete the game by matching all pairs\n         * - Track moves and optional timer\n         */\n\n        async function run(mode) {\n            const gameWorld = document.getElementById('game-world');\n            const bgContainer = document.getElementById('bg-container');\n            const sakuraContainer = document.getElementById('sakura-container');\n            const comboCounter = document.getElementById('combo-counter');\n            const homeScreen = document.getElementById('home-screen');\n            const startBtn = document.getElementById('start-btn');\n            const howToPlayBtn = document.getElementById('how-to-play-btn');\n            const modalOverlay = document.getElementById('modal-overlay');\n            const howToPlayModal = document.getElementById('how-to-play-modal');\n            const closeModalBtns = document.querySelectorAll('.close-modal-btn');\n\n            const gridContainer = document.getElementById('grid-container');\n            const timerDisplay = document.getElementById('timer-display');\n            const movesDisplay = document.getElementById('moves-display');\n            const levelDisplay = document.getElementById('level-display');\n            const resetGameBtn = document.getElementById('reset-game-btn');\n            const homeLevelDisplay = document.getElementById('home-level-display');\n            const victoryScreen = document.getElementById('victory-screen');\n            const victoryStats = document.getElementById('victory-stats');\n            const levelProgressSection = document.getElementById('level-progress-section');\n            const levelInfo = document.getElementById('level-info');\n            const playAgainBtn = document.getElementById('play-again-btn');\n            const viewAchievementsBtn = document.getElementById('view-achievements-btn');\n            const achievementsModal = document.getElementById('achievements-modal');\n            const achievementsGrid = document.getElementById('achievements-grid');\n            const dailyRewardBtn = document.getElementById('daily-reward-btn');\n            const achievementNotification = document.getElementById('achievement-notification');\n            const achievementNotifIcon = document.getElementById('achievement-notif-icon');\n            const achievementNotifTitle = document.getElementById('achievement-notif-title');\n            const achievementNotifDesc = document.getElementById('achievement-notif-desc');\n\n            // Modal Controls\n            function openModal(modalId) {\n                modalOverlay.classList.add('show');\n                howToPlayModal.style.display = modalId === 'how-to-play' ? 'block' : 'none';\n                achievementsModal.style.display = modalId === 'achievements' ? 'block' : 'none';\n                \n                if (modalId === 'achievements') {\n                    displayAchievements();\n                }\n            }\n\n            function closeModal() {\n                modalOverlay.classList.remove('show');\n            }\n            howToPlayBtn.addEventListener('click', () => openModal('how-to-play'));\n            viewAchievementsBtn.addEventListener('click', () => openModal('achievements'));\n            \n            closeModalBtns.forEach(btn => {\n                btn.addEventListener('click', closeModal);\n            });\n\n            modalOverlay.addEventListener('click', (e) => {\n                if (e.target === modalOverlay) closeModal();\n            });\n\n            // Asset preloading\n            const assetCache = {};\n            const audioCache = {};\n            const audioContext = new (window.AudioContext || window.webkitAudioContext)();\n            let bgMusicSource = null;\n\n            async function preloadAssets() {\n                const imageAssets = [\n                    'char_warrior', 'char_princess', 'char_dragon', 'char_spirit',\n                    'char_mascot', 'char_samurai', 'char_mage', 'char_mermaid',\n                    'premium_card_back', 'anime_fantasy_bg'\n                ];\n                \n                const audioAssets = ['card_flip_sound', 'match_success_sound', 'victory_jingle', 'bg_music_magical'];\n\n                // Preload images\n                const imagePromises = imageAssets.map(id => {\n                    return new Promise((resolve) => {\n                        const assetInfo = lib.getAsset(id);\n                        if (assetInfo) {\n                            const img = new Image();\n                            img.onload = () => {\n                                assetCache[id] = img;\n                                resolve();\n                            };\n                            img.onerror = () => resolve();\n                            img.src = assetInfo.url;\n                        } else {\n                            resolve();\n                        }\n                    });\n                });\n\n                // Preload audio\n                const audioPromises = audioAssets.map(id => {\n                    return new Promise((resolve) => {\n                        const assetInfo = lib.getAsset(id);\n                        if (assetInfo) {\n                            fetch(assetInfo.url)\n                                .then(response => response.arrayBuffer())\n                                .then(buffer => audioContext.decodeAudioData(buffer))\n                                .then(audioBuffer => {\n                                    audioCache[id] = audioBuffer;\n                                    resolve();\n                                })\n                                .catch(() => resolve());\n                        } else {\n                            resolve();\n                        }\n                    });\n                });\n\n                await Promise.all([...imagePromises, ...audioPromises]);\n            }\n\n            function playSound(assetId) {\n                if (audioCache[assetId]) {\n                    const source = audioContext.createBufferSource();\n                    source.buffer = audioCache[assetId];\n                    source.connect(audioContext.destination);\n                    source.start(0);\n                }\n            }\n\n            function playBGM() {\n                if (audioCache['bg_music_magical'] && !bgMusicSource) {\n                    bgMusicSource = audioContext.createBufferSource();\n                    bgMusicSource.buffer = audioCache['bg_music_magical'];\n                    bgMusicSource.loop = true;\n                    \n                    // Set playback speed from config or default to 0.8 (slower)\n                    const speed = window.gameConfig?.settings?.musicSpeed || 0.8;\n                    bgMusicSource.playbackRate.value = speed;\n                    \n                    const gainNode = audioContext.createGain();\n                    gainNode.gain.value = 0.35; // Slightly lower for a better atmospheric feel\n                    bgMusicSource.connect(gainNode);\n                    gainNode.connect(audioContext.destination);\n                    bgMusicSource.start(0);\n                }\n            }\n\n            // Sakura Particle System\n            function initSakura() {\n                const count = 15;\n                for (let i = 0; i < count; i++) {\n                    createSakura();\n                }\n            }\n\n            function createSakura() {\n                const petal = document.createElement('div');\n                petal.className = 'sakura';\n                const size = 10 + Math.random() * 20;\n                petal.style.width = `${size}px`;\n                petal.style.height = `${size}px`;\n                petal.style.left = `${Math.random() * 100}%`;\n                petal.style.animationDuration = `${5 + Math.random() * 10}s`;\n                petal.style.animationDelay = `${Math.random() * 10}s`;\n                sakuraContainer.appendChild(petal);\n                \n                petal.addEventListener('animationiteration', () => {\n                    petal.style.left = `${Math.random() * 100}%`;\n                });\n            }\n\n            function initPremiumBackground() {\n                bgContainer.innerHTML = '';\n                const bgImg = document.createElement('img');\n                bgImg.className = 'premium-bg';\n                bgImg.src = assetCache['anime_fantasy_bg']?.src || '';\n                bgContainer.appendChild(bgImg);\n            }\n\n            await preloadAssets();\n            initPremiumBackground();\n            initSakura();\n\n            // Player game state structure\n            let playerState = {\n                currentLevel: 1,\n                highestLevel: 1,\n                achievements: [], \n                stats: {\n                    totalGames: 0,\n                    totalMatches: 0,\n                    perfectGames: 0, \n                    fastestTime: null,\n                    consecutiveMatches: 0,\n                    maxCombo: 0\n                },\n                dailyRewards: {\n                    lastClaimTime: null,\n                    totalClaimed: 0\n                }\n            };\n\n            const achievementDefs = {\n                'first_match': {\n                    id: 'first_match',\n                    name: 'Awakened Spirit',\n                    description: 'Find your first matching pair',\n                    icon: '\ud83c\udf38',\n                    checkUnlock: (state) => state.stats.totalMatches >= 1\n                },\n                'first_victory': {\n                    id: 'first_victory',\n                    name: 'Chosen Hero',\n                    description: 'Complete your first game',\n                    icon: '\ud83d\udde1\ufe0f',\n                    checkUnlock: (state) => state.stats.totalGames >= 1\n                },\n                'perfect_game': {\n                    id: 'perfect_game',\n                    name: 'Zen Mind',\n                    description: 'Complete a game with no mistakes',\n                    icon: '\ud83d\udcae',\n                    checkUnlock: (state) => state.stats.perfectGames >= 1\n                },\n                'speed_demon': {\n                    id: 'speed_demon',\n                    name: 'Wind Walker',\n                    description: 'Complete a game in under 30 seconds',\n                    icon: '\ud83c\udf2c\ufe0f',\n                    checkUnlock: (state) => state.stats.fastestTime !== null && state.stats.fastestTime < 30\n                },\n                'combo_master': {\n                    id: 'combo_master',\n                    name: 'Storm Caller',\n                    description: 'Get 5 consecutive matches',\n                    icon: '\u26a1',\n                    checkUnlock: (state) => state.stats.maxCombo >= 5\n                },\n                'level_5': {\n                    id: 'level_5',\n                    name: 'Guardian',\n                    description: 'Reach Level 5',\n                    icon: '\ud83d\udee1\ufe0f',\n                    checkUnlock: (state) => state.highestLevel >= 5\n                },\n                'level_10': {\n                    id: 'level_10',\n                    name: 'Celestial Being',\n                    description: 'Reach Level 10',\n                    icon: '\u2728',\n                    checkUnlock: (state) => state.highestLevel >= 10\n                },\n                'veteran': {\n                    id: 'veteran',\n                    name: 'Legend of the Realm',\n                    description: 'Complete 50 games',\n                    icon: '\ud83d\udcdc',\n                    checkUnlock: (state) => state.stats.totalGames >= 50\n                }\n            };\n\n            async function loadPlayerState() {\n                try {\n                    const response = await lib.getUserGameState();\n                    if (response.state) {\n                        playerState = { ...playerState, ...response.state };\n                    }\n                } catch (error) {\n                    lib.log(`Failed to load player state: ${error.message}`);\n                }\n                updateLevelDisplay();\n                updateDailyRewardButton();\n            }\n\n            async function savePlayerState() {\n                try {\n                    await lib.saveUserGameState(playerState);\n                } catch (error) {\n                    lib.log(`Failed to save player state: ${error.message}`);\n                }\n            }\n\n            function updateLevelDisplay() {\n                levelDisplay.textContent = `LEVEL ${playerState.currentLevel}`;\n                homeLevelDisplay.textContent = `LEVEL ${playerState.currentLevel}`;\n            }\n\n            function checkAchievements() {\n                const newlyUnlocked = [];\n                for (const achDef of Object.values(achievementDefs)) {\n                    if (playerState.achievements.includes(achDef.id)) continue;\n                    if (achDef.checkUnlock(playerState)) {\n                        playerState.achievements.push(achDef.id);\n                        newlyUnlocked.push(achDef);\n                    }\n                }\n                newlyUnlocked.forEach((ach, index) => {\n                    setTimeout(() => showAchievementNotification(ach), index * 3000);\n                });\n                return newlyUnlocked.length > 0;\n            }\n\n            function showAchievementNotification(achievement) {\n                achievementNotifIcon.textContent = achievement.icon;\n                achievementNotifTitle.textContent = achievement.name;\n                achievementNotifDesc.textContent = achievement.description;\n                achievementNotification.classList.add('show');\n                setTimeout(() => achievementNotification.classList.remove('show'), 4000);\n            }\n\n            function displayAchievements() {\n                achievementsGrid.innerHTML = '';\n                for (const achDef of Object.values(achievementDefs)) {\n                    const isUnlocked = playerState.achievements.includes(achDef.id);\n                    const badge = document.createElement('div');\n                    badge.className = 'achievement-badge' + (isUnlocked ? '' : ' locked');\n                    const icon = document.createElement('div');\n                    icon.className = 'achievement-badge-icon';\n                    icon.textContent = isUnlocked ? achDef.icon : '\ud83d\udd12';\n                    const name = document.createElement('div');\n                    name.className = 'achievement-badge-name';\n                    name.textContent = achDef.name;\n                    const desc = document.createElement('div');\n                    desc.className = 'achievement-badge-desc';\n                    desc.textContent = achDef.description;\n                    badge.appendChild(icon);\n                    badge.appendChild(name);\n                    badge.appendChild(desc);\n                    achievementsGrid.appendChild(badge);\n                }\n            }\n\n            function updateDailyRewardButton() {\n                const now = Date.now();\n                const lastClaim = playerState.dailyRewards.lastClaimTime;\n                const hoursSinceLastClaim = lastClaim ? (now - lastClaim) / (1000 * 60 * 60) : 999;\n                if (hoursSinceLastClaim >= 24 || !lastClaim) {\n                    dailyRewardBtn.disabled = false;\n                    dailyRewardBtn.textContent = '\ud83c\udf81 CLAIM SPIRIT GIFT';\n                } else {\n                    const hoursLeft = Math.ceil(24 - hoursSinceLastClaim);\n                    dailyRewardBtn.disabled = true;\n                    dailyRewardBtn.textContent = `GIFT IN ${hoursLeft}H`;\n                }\n            }\n\n            async function claimDailyReward() {\n                playerState.dailyRewards.lastClaimTime = Date.now();\n                playerState.dailyRewards.totalClaimed++;\n                achievementNotifIcon.textContent = '\ud83c\udf81';\n                achievementNotifTitle.textContent = 'Spirit Gift Claimed!';\n                achievementNotifDesc.textContent = `May the spirits guide your memory.`;\n                achievementNotification.classList.add('show');\n                setTimeout(() => achievementNotification.classList.remove('show'), 4000);\n                updateDailyRewardButton();\n                await savePlayerState();\n            }\n\n            dailyRewardBtn.addEventListener('click', claimDailyReward);\n            await loadPlayerState();\n\n            lib.showGameParameters({\n                name: 'Mystical Settings',\n                params: {\n                    'Grid Size': {\n                        key: 'settings.gridSize',\n                        type: 'dropdown',\n                        options: [\n                            { label: '3\u00d74 (Easy)', value: '3x4' },\n                            { label: '4\u00d74 (Medium)', value: '4x4' },\n                            { label: '4\u00d76 (Hard)', value: '4x6' }\n                        ]\n                    },\n                    'Card Back': {\n                        key: 'settings.cardBackDesign',\n                        type: 'dropdown',\n                        options: [\n                            { label: 'Premium Ornate', value: 'premium' }\n                        ]\n                    },\n                    'Music': {\n                        key: 'settings.musicEnabled',\n                        type: 'checkbox'\n                    },\n                    'Music Speed': {\n                        key: 'settings.musicSpeed',\n                        type: 'slider',\n                        min: 0.5,\n                        max: 1.5,\n                        step: 0.1,\n                        onChange: (val) => {\n                            window.gameConfig.settings.musicSpeed = val;\n                            if (bgMusicSource) {\n                                bgMusicSource.playbackRate.value = val;\n                            }\n                        }\n                    }\n                }\n            });\n\n            let cards = [];\n            let flippedCards = [];\n            let matchedPairs = 0;\n            let moves = 0;\n            let mistakes = 0;\n            let startTime = null;\n            let timerInterval = null;\n            let isProcessing = false;\n            let comboCount = 0;\n\n            function getCharacterAssets() {\n                return [\n                    'char_warrior', 'char_princess', 'char_dragon', 'char_spirit',\n                    'char_mascot', 'char_samurai', 'char_mage', 'char_mermaid'\n                ];\n            }\n\n            function shuffle(array) {\n                const shuffled = [...array];\n                for (let i = shuffled.length - 1; i > 0; i--) {\n                    const j = Math.floor(Math.random() * (i + 1));\n                    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n                }\n                return shuffled;\n            }\n\n            function createCard(characterId, index) {\n                const card = document.createElement('div');\n                card.className = 'card';\n                card.dataset.character = characterId;\n                card.dataset.index = index;\n                const cardInner = document.createElement('div');\n                cardInner.className = 'card-inner';\n                const cardBack = document.createElement('div');\n                cardBack.className = 'card-face card-back';\n                const backImg = document.createElement('img');\n                backImg.src = assetCache['premium_card_back']?.src || '';\n                backImg.alt = 'Back';\n                cardBack.appendChild(backImg);\n                const cardFront = document.createElement('div');\n                cardFront.className = 'card-face card-front';\n                const frontImg = document.createElement('img');\n                frontImg.src = assetCache[characterId]?.src || '';\n                frontImg.alt = 'Front';\n                cardFront.appendChild(frontImg);\n                cardInner.appendChild(cardBack);\n                cardInner.appendChild(cardFront);\n                card.appendChild(cardInner);\n                return card;\n            }\n\n            function initGame() {\n                gridContainer.innerHTML = '';\n                cards = [];\n                flippedCards = [];\n                matchedPairs = 0;\n                moves = 0;\n                mistakes = 0;\n                comboCount = 0;\n                startTime = null;\n                isProcessing = false;\n                movesDisplay.textContent = 'MOVES: 0';\n                timerDisplay.textContent = 'TIME: 0S';\n                updateLevelDisplay();\n                comboCounter.classList.remove('show');\n                if (timerInterval) clearInterval(timerInterval);\n                timerInterval = null;\n                const gridSize = window.gameConfig?.settings?.gridSize || '4x4';\n                const [cols, rows] = gridSize.split('x').map(Number);\n                const totalCards = cols * rows;\n                const pairs = totalCards / 2;\n                gridContainer.className = `grid-container grid-${gridSize}`;\n                const characterAssets = getCharacterAssets().slice(0, pairs);\n                const cardData = [...characterAssets, ...characterAssets];\n                const shuffledCards = shuffle(cardData);\n                shuffledCards.forEach((characterId, index) => {\n                    const card = createCard(characterId, index);\n                    cards.push(card);\n                    gridContainer.appendChild(card);\n                    if (mode === 'play') card.addEventListener('click', () => handleCardClick(card));\n                });\n\n                // Peek logic: Show cards for 1 second at start\n                if (mode === 'play') {\n                    isProcessing = true;\n                    setTimeout(() => {\n                        cards.forEach(card => card.classList.add('flipped'));\n                        setTimeout(() => {\n                            cards.forEach(card => card.classList.remove('flipped'));\n                            isProcessing = false;\n                        }, 1200); // Cards stay visible for about 1 second\n                    }, 500); // Short delay before showing\n                }\n\n                victoryScreen.classList.remove('show');\n                if (window.gameConfig?.settings?.musicEnabled !== false) playBGM();\n            }\n\n            function handleCardClick(card) {\n                if (isProcessing || card.classList.contains('flipped') || card.classList.contains('matched') || flippedCards.length >= 2) return;\n                if (!startTime) {\n                    startTime = Date.now();\n                    timerInterval = setInterval(updateTimer, 100);\n                }\n                card.classList.add('flipped');\n                flippedCards.push(card);\n                playSound('card_flip_sound');\n                if (flippedCards.length === 2) {\n                    moves++;\n                    movesDisplay.textContent = `MOVES: ${moves}`;\n                    checkMatch();\n                }\n            }\n\n            function checkMatch() {\n                isProcessing = true;\n                const [card1, card2] = flippedCards;\n                const char1 = card1.dataset.character;\n                const char2 = card2.dataset.character;\n\n                if (char1 === char2) {\n                    setTimeout(() => {\n                        card1.classList.add('matched');\n                        card2.classList.add('matched');\n                        matchedPairs++;\n                        comboCount++;\n                        playerState.stats.totalMatches++;\n                        playerState.stats.consecutiveMatches = comboCount;\n                        if (playerState.stats.consecutiveMatches > playerState.stats.maxCombo) {\n                            playerState.stats.maxCombo = playerState.stats.consecutiveMatches;\n                        }\n                        playSound('match_success_sound');\n                        createSparkles(card1);\n                        createSparkles(card2);\n                        if (comboCount >= 2) {\n                            comboCounter.textContent = `${comboCount} COMBO!`;\n                            comboCounter.classList.add('show');\n                        }\n                        checkAchievements();\n                        flippedCards = [];\n                        isProcessing = false;\n                        if (matchedPairs === cards.length / 2) setTimeout(showVictory, 600);\n                    }, 400);\n                } else {\n                    mistakes++;\n                    comboCount = 0;\n                    comboCounter.classList.remove('show');\n                    setTimeout(() => {\n                        card1.classList.remove('flipped');\n                        card2.classList.remove('flipped');\n                        flippedCards = [];\n                        isProcessing = false;\n                    }, 1000);\n                }\n            }\n\n            function createSparkles(card) {\n                const rect = card.getBoundingClientRect();\n                const centerX = rect.left + rect.width / 2;\n                const centerY = rect.top + rect.height / 2;\n                for (let i = 0; i < 12; i++) {\n                    const sparkle = document.createElement('div');\n                    sparkle.className = 'sparkle';\n                    sparkle.style.left = centerX + 'px';\n                    sparkle.style.top = centerY + 'px';\n                    sparkle.style.background = `radial-gradient(circle, ${i % 2 === 0 ? '#FFD700' : '#FFF'} 0%, transparent 70%)`;\n                    const angle = (Math.PI * 2 * i) / 12;\n                    const distance = 80 + Math.random() * 40;\n                    sparkle.style.setProperty('--tx', Math.cos(angle) * distance + 'px');\n                    sparkle.style.setProperty('--ty', Math.sin(angle) * distance + 'px');\n                    document.body.appendChild(sparkle);\n                    setTimeout(() => sparkle.remove(), 800);\n                }\n            }\n\n            function updateTimer() {\n                if (startTime) {\n                    const elapsed = Math.floor((Date.now() - startTime) / 1000);\n                    timerDisplay.textContent = `TIME: ${elapsed}S`;\n                }\n            }\n\n            async function showVictory() {\n                if (timerInterval) clearInterval(timerInterval);\n                timerInterval = null;\n                const elapsed = startTime ? Math.floor((Date.now() - startTime) / 1000) : 0;\n                playerState.stats.totalGames++;\n                if (mistakes === 0) playerState.stats.perfectGames++;\n                if (elapsed > 0 && (playerState.stats.fastestTime === null || elapsed < playerState.stats.fastestTime)) {\n                    playerState.stats.fastestTime = elapsed;\n                }\n                playerState.currentLevel++;\n                if (playerState.currentLevel > playerState.highestLevel) playerState.highestLevel = playerState.currentLevel;\n                checkAchievements();\n                await savePlayerState();\n                victoryStats.innerHTML = `JOURNEY ENDED<br>MOVES: ${moves}<br>TIME: ${elapsed}S${mistakes === 0 ? '<br>\u2728 ZEN PERFECT \u2728' : ''}`;\n                levelInfo.textContent = `SPIRIT ASCENSION: LEVEL ${playerState.currentLevel}`;\n                updateLevelDisplay();\n                victoryScreen.classList.add('show');\n                playSound('victory_jingle');\n            }\n\n            startBtn.addEventListener('click', () => {\n                homeScreen.classList.add('hide');\n                initGame();\n            });\n\n            playAgainBtn.addEventListener('click', initGame);\n            resetGameBtn.addEventListener('click', initGame);\n\n            if (mode === 'play') {\n                homeScreen.classList.remove('hide');\n            } else {\n                homeScreen.classList.add('hide');\n                initGame();\n            }\n        }\n    </script>\n</body>\n</html>", "game_config": "{\n  \"settings\": {\n    \"gridSize\": \"4x4\",\n    \"characterSet\": \"set1\",\n    \"backgroundTheme\": \"#fafafa\",\n    \"cardBackDesign\": \"premium\",\n    \"timerEnabled\": true,\n    \"musicSpeed\": 0.8\n  }\n}", "game_design_document": "## Core Game Loop and Mechanics\n\n**Gameplay Flow:**\n1. Player starts with a grid of face-down cards (all showing identical card backs)\n2. Player taps/clicks to flip two cards face-up, revealing anime character artwork\n3. If the two cards match (same character), they remain face-up and are marked as \"matched\"\n4. If they don't match, both cards flip back face-down after a brief delay (~1 second)\n5. Player continues flipping pairs until all cards are matched\n6. Game tracks moves (number of pairs flipped) and time elapsed\n7. Victory screen shows completion stats with option to play again\n\n**What Makes It Engaging:**\n- Memory challenge creates satisfying \"aha!\" moments when players remember card locations\n- Cute anime art style appeals to target audience\n- Quick rounds (2-3 minutes) encourage replay\n- Personal best tracking motivates improvement\n- Smooth animations and satisfying feedback make interactions feel polished\n\n**Win Condition:** Match all pairs of cards\n\n## Starting Scope\n\n**First Iteration (Implement Now):**\n- Single difficulty level with 4x4 grid (8 pairs, 16 cards total)\n- 8 unique anime character designs in chibi/cute style\n- Card flip animations with smooth transitions\n- Move counter and timer\n- Victory screen with stats\n- Play again functionality\n- Simple background and UI\n- Card flip sound effect\n- Victory jingle\n\n**Future Iterations (Later):**\n- Multiple difficulty levels (3x4 easy, 4x4 medium, 4x6 hard)\n- More character sets to unlock\n- Star rating system based on moves/time\n- Combo system for consecutive matches\n- Power-ups (peek at card, shuffle remaining cards)\n- Background music toggle\n- Leaderboard for best times\n\n## Game Perspective\n\n**fixed-screen** - Single screen view showing the entire card grid at once. No scrolling needed. The grid should be centered and sized to fit comfortably within the 720\u00d71280 viewport with adequate padding.\n\n## Game World and Level Design\n\n**Visual Layout:**\n- Top bar (100px height): Timer on left, move counter on right\n- Main play area: 4x4 grid of cards, centered vertically and horizontally\n- Card size: ~140\u00d7180px each with 12px gaps between cards\n- Bottom padding: ~100px for thumb clearance\n- Background: Soft gradient (pastel pink to lavender) with subtle anime-themed pattern (stars, sparkles)\n\n**Card Design:**\n- Card back: Consistent design for all cards (anime-style pattern with question mark symbol)\n- Card front: Character artwork fills the card with subtle border/frame\n- Matched cards: Slight glow effect or brightness increase to indicate completion\n\n**UI Elements:**\n- Clean, rounded corners on all UI elements\n- Large, readable fonts (minimum 24px for counters)\n- Victory modal: Semi-transparent overlay with stats and \"Play Again\" button\n\n## Edit Mode Design\n\n**Editable Properties:**\n\n1. **Grid Size** (dropdown)\n   - Options: \"3\u00d74 (Easy)\", \"4\u00d74 (Medium)\", \"4\u00d76 (Hard)\"\n   - Default: \"4\u00d74 (Medium)\"\n   - Constraint: Must be even number of cards for pairing\n\n2. **Character Set** (dropdown)\n   - Options: \"Set 1 (Heroes)\", \"Set 2 (Villains)\", \"Set 3 (Mixed)\"\n   - Default: \"Set 1 (Heroes)\"\n   - Each set contains different character artwork\n\n3. **Background Theme** (color picker)\n   - Default: Pastel gradient (pink to lavender)\n   - Allows users to customize the background color scheme\n\n4. **Card Back Design** (dropdown)\n   - Options: \"Stars\", \"Flowers\", \"Geometric\", \"Sparkles\"\n   - Default: \"Stars\"\n   - Changes the pattern on card backs\n\n5. **Timer Enabled** (toggle)\n   - Default: ON\n   - When OFF, hides timer display\n\n**Implementation Notes:**\n- All settings stored in window.gameConfig\n- Changes require game restart (show \"Apply Changes\" button)\n- Validate grid size ensures even number of cards\n\n## Control Design\n\n**Genre:** Puzzle / Memory Game (casual)\n\n**Control Scheme:**\n\n**Mobile (Touch):**\n- Tap any face-down card to flip it\n- Tap second face-down card to flip and check for match\n- Tap \"Play Again\" button on victory screen\n- No complex gestures needed - simple tap interactions only\n\n**Desktop (Mouse + Keyboard):**\n- Click any face-down card to flip it\n- Click second face-down card to flip and check for match\n- Click \"Play Again\" button on victory screen\n- Optional: Number keys 1-9 could select cards in reading order (not essential for first iteration)\n\n**Input Handling:**\n- Prevent flipping more than 2 cards at once (disable input during mismatch reveal delay)\n- Prevent flipping already-matched cards\n- Prevent flipping the same card twice in one turn\n- Clear, immediate visual feedback on card selection (slight scale/shadow effect)\n\n**Accessibility:**\n- Large tap targets (cards are 140\u00d7180px, well above 96px minimum)\n- Clear visual states (face-down, face-up, matched)\n- No time pressure (timer is for tracking only, not a fail condition)\n\n## Art Style and Visual Theme\n\n**Overall Style:** Cute anime/chibi aesthetic with bright, cheerful colors\n\n**Character Art:**\n- Chibi-style anime characters (large heads, small bodies, expressive eyes)\n- Vibrant, saturated colors\n- Clean linework with minimal shading\n- Each character should be distinct and recognizable\n- Transparent backgrounds on character artwork\n- Characters should be centered and fill the card space nicely\n\n**UI Style:**\n- Soft, rounded corners on all elements\n- Pastel color palette for backgrounds and UI chrome\n- White or light-colored text with subtle shadows for readability\n- Smooth gradients rather than flat colors\n- Subtle sparkle/shine effects for polish\n\n**Card Design:**\n- Card backs: Repeating anime-style pattern (stars, hearts, or geometric shapes) with central icon\n- Card fronts: Character artwork with subtle border/frame\n- Card dimensions: Portrait orientation (~140\u00d7180px)\n- Slight shadow/depth effect to make cards feel physical\n\n**Animation Style:**\n- Smooth, bouncy card flips (3D rotation effect)\n- Gentle scale effects on hover/tap\n- Particle effects on successful match (small sparkles)\n- Smooth fade-in for victory screen\n\n**Color Palette:**\n- Background: Soft pastels (pink #FFE5EC, lavender #E5D4FF)\n- UI elements: White with subtle shadows\n- Accent colors: Bright pink #FF69B4, sky blue #87CEEB\n- Text: Dark purple #4A4063 for good contrast", "persistent_storage_config": {"leaderboard": {"sort_ascending": true}}, "game_metadata": {"game_id": "01KT1PVPXECZN7ET6AKJ2PQ1AV", "title": "Anime Card Match", "description": "Flip cards to find matching pairs of adorable anime characters in this fast-paced memory challenge!", "thumbnail_url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/thumbnail_13b0d373-c4f0-4d2b-a4e2-95623886f13f.webp", "created_at": 1780321495, "updated_at": 1782119201019.3481, "art_style": null}, "task_plan": null}