{"asset_map": {"chess_pawn_white": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_pawn_white_a1568a2c-0c89-40a8-a377-c83fab80db1d.webp", "type": "image", "prompt": "Generate a white chess pawn game piece, clean iconic logo style, simple silhouette with a round head, tapered body, wide base. Use white #FFFFFF with subtle gradient shading for 3D depth. Front-view, centered, standing illustration, slight drop shadow, professional board game asset, transparent background.", "description": "White chess pawn in a clean, minimalist logo style with subtle depth", "subtype": "character", "aspect_ratio": [535, 889], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_pawn_black": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_pawn_black_c15149e3-5c72-4cfb-8784-0e8ed319577c.webp", "type": "image", "prompt": "Generate a black chess pawn game piece, clean iconic logo style, simple silhouette with a round head, tapered body, wide base. Use dark black #2C2C2C with subtle gradient shading for 3D depth. Front-view, centered, standing illustration, slight drop shadow, professional board game asset, transparent background.", "description": "Black chess pawn in a clean, minimalist logo style with subtle depth", "subtype": "character", "aspect_ratio": [413, 712], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_knight_white": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_knight_white_c4c3b968-ad66-4459-b381-d29bdfc094bd.webp", "type": "image", "prompt": "Generate a white chess knight game piece, horse head profile facing right, distinctive mane and eye. Use white #FFFFFF with subtle gradient shading. Iconic logo style, standing on a wide base, clean silhouette, professional board game asset, transparent background.", "description": "White chess knight depicting a horse head in profile with minimalist detail", "subtype": "character", "aspect_ratio": [589, 867], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_knight_black": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_knight_black_615379dd-cf1a-488b-8ffd-17e2cc9229e3.webp", "type": "image", "prompt": "Generate a black chess knight game piece, horse head profile facing right, distinctive mane and eye. Use dark black #2C2C2C with subtle gradient shading. Iconic logo style, standing on a wide base, clean silhouette, professional board game asset, transparent background.", "description": "Black chess knight depicting a horse head in profile with minimalist detail", "subtype": "character", "aspect_ratio": [575, 929], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_bishop_white": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_bishop_white_012693e2-1e9b-4068-9f36-19931f583a04.webp", "type": "image", "prompt": "Generate a white chess bishop game piece, tall tapered body, pointed mitre top with a small slit. Use white #FFFFFF with subtle gradient shading. Clean iconic logo style, front-view, wide base, professional board game asset, transparent background.", "description": "White chess bishop featuring a tall tapered body and mitre hat silhouette", "subtype": "character", "aspect_ratio": [532, 1267], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_bishop_black": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_bishop_black_4f2c9508-4a3f-4eff-a038-598c8ac10bdc.webp", "type": "image", "prompt": "Generate a black chess bishop game piece, tall tapered body, pointed mitre top with a small slit. Use dark black #2C2C2C with subtle gradient shading. Clean iconic logo style, front-view, wide base, professional board game asset, transparent background.", "description": "Black chess bishop featuring a tall tapered body and mitre hat silhouette", "subtype": "character", "aspect_ratio": [553, 1308], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_rook_white": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_rook_white_a794ccab-2fb2-4a51-9adc-68d0430a79b7.webp", "type": "image", "prompt": "Generate a white chess rook game piece, sturdy castle tower silhouette with crenellated top. Use white #FFFFFF with subtle gradient shading. Clean iconic logo style, front-view, wide base, professional board game asset, transparent background.", "description": "White chess rook resembling a sturdy castle tower with battlements", "subtype": "character", "aspect_ratio": [485, 750], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_rook_black": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_rook_black_b1447ddc-b423-4f7b-a12a-65918da5ffb7.webp", "type": "image", "prompt": "Generate a black chess rook game piece, sturdy castle tower silhouette with crenellated top. Use dark black #2C2C2C with subtle gradient shading. Clean iconic logo style, front-view, wide base, professional board game asset, transparent background.", "description": "Black chess rook resembling a sturdy castle tower with battlements", "subtype": "character", "aspect_ratio": [413, 622], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_queen_white": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_queen_white_14ec7069-1a0c-45b1-81a0-75c8c79c8328.webp", "type": "image", "prompt": "Generate a white chess queen game piece, elegant tall silhouette, five-pointed crown top. Use white #FFFFFF with subtle gradient shading. Regal iconic logo style, front-view, wide base, professional board game asset, transparent background.", "description": "White chess queen with an elegant silhouette and five-pointed crown", "subtype": "character", "aspect_ratio": [467, 1152], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_queen_black": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_queen_black_5bf005ef-9823-46ac-ae70-685769195650.webp", "type": "image", "prompt": "Generate a black chess queen game piece, elegant tall silhouette, five-pointed crown top. Use dark black #2C2C2C with subtle gradient shading. Regal iconic logo style, front-view, wide base, professional board game asset, transparent background.", "description": "Black chess queen with an elegant silhouette and five-pointed crown", "subtype": "character", "aspect_ratio": [456, 1047], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_king_white": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_king_white_ac09e737-2975-4ab1-bf01-6b1098c34869.webp", "type": "image", "prompt": "Generate a white chess king game piece, tall commanding silhouette, crown with a prominent cross. Use white #FFFFFF with subtle gradient shading. Majestic iconic logo style, front-view, wide base, professional board game asset, transparent background.", "description": "White chess king with a tall silhouette and a cross atop the crown", "subtype": "character", "aspect_ratio": [508, 1321], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "chess_king_black": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/chess_king_black_8e313b66-7c73-4c10-a2f0-f599ee192e19.webp", "type": "image", "prompt": "Generate a black chess king game piece, tall commanding silhouette, crown with a prominent cross. Use dark black #2C2C2C with subtle gradient shading. Majestic iconic logo style, front-view, wide base, professional board game asset, transparent background.", "description": "Black chess king with a tall silhouette and a cross atop the crown", "subtype": "character", "aspect_ratio": [481, 1126], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "checker_regular_red": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/checker_regular_red_e5fbbcf9-3b4a-4824-a2b9-0ac7d95cf80f.webp", "type": "image", "prompt": "Generate a classic red checkers disc game piece, top-down view with slight depth, gradient from bright red #D32F2F to dark red. Clean round shape, subtle highlight top-left, slight visible thickness, soft drop shadow, transparent background.", "description": "Traditional red checkers disc with a 3D effect and subtle lighting", "subtype": "object", "aspect_ratio": [718, 745], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "checker_regular_black": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/checker_regular_black_72ef6ceb-4ece-417f-b6ae-b6d9967bd546.webp", "type": "image", "prompt": "Generate a classic black checkers disc game piece, top-down view with slight depth, gradient from dark grey to black #2C2C2C. Clean round shape, subtle highlight top-left, slight visible thickness, soft drop shadow, transparent background.", "description": "Traditional black checkers disc with a 3D effect and subtle lighting", "subtype": "object", "aspect_ratio": [758, 757], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "checker_king_red": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/checker_king_red_4dc9fe4d-eda6-44ef-a260-35566309bb7d.webp", "type": "image", "prompt": "Generate a red checkers king game piece based on image 1, but add a simple gold crown symbol #FFD700 centered on top of the disc. Maintain the 3D depth, red gradient, and clean traditional style. Transparent background.", "description": "Red checkers king piece with a gold crown icon on top", "subtype": "object", "aspect_ratio": [977, 1007], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "checker_king_black": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/checker_king_black_5307e65d-68a9-40f5-9ee3-64f044a8c65a.webp", "type": "image", "prompt": "Generate a black checkers king game piece based on image 1, but add a simple gold crown symbol #FFD700 centered on top of the disc. Maintain the 3D depth, black gradient, and clean traditional style. Transparent background.", "description": "Black checkers king piece with a gold crown icon on top", "subtype": "object", "aspect_ratio": [1023, 1022], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "icon_menu": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/icon_menu_a1965a4a-d131-4505-adb9-2919211ce75d.webp", "type": "image", "prompt": "Generate a white hamburger menu icon, three horizontal parallel lines, rounded ends, clean modern minimalist style, flat design, white #FFFFFF on transparent background.", "description": "White hamburger menu icon for the UI", "subtype": "ui", "aspect_ratio": [695, 523], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "icon_restart": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/icon_restart_98f17e22-43f4-472d-8028-d6804f2bcdb1.webp", "type": "image", "prompt": "Generate a white circular restart arrow icon, clockwise 270-degree arc with arrowhead, clean modern minimalist style, flat design, white #FFFFFF on transparent background.", "description": "White circular arrow icon for game restart button", "subtype": "ui", "aspect_ratio": [619, 662], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "badge_easy": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/badge_easy_6ae2d176-bb53-461a-85f3-961d799a7043.webp", "type": "image", "prompt": "Generate a small flat shield-shaped badge, primary color green #4CAF50, with one white star in the center. Clean modern UI design, transparent background.", "description": "Green shield badge with one star for Easy difficulty", "subtype": "ui", "aspect_ratio": [768, 846], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "badge_medium": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/badge_medium_647a1c70-b8b9-4058-bce8-a3c62e47ce98.webp", "type": "image", "prompt": "Generate a small flat shield-shaped badge, primary color amber/orange #FF9800, with two white stars in the center. Match style of image 1, clean modern UI design, transparent background.", "description": "Orange shield badge with two stars for Medium difficulty", "subtype": "ui", "aspect_ratio": [474, 528], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "badge_hard": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/badge_hard_f7661880-eec4-4c0d-9105-ddeb1f22b030.webp", "type": "image", "prompt": "Generate a small flat shield-shaped badge, primary color red #F44336, with three white stars in the center. Match style of image 1 and image 2, clean modern UI design, transparent background.", "description": "Red shield badge with three stars for Hard difficulty", "subtype": "ui", "aspect_ratio": [696, 772], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}, "checker_regular_white": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/checker_regular_white_eeaf561c-ab96-48f5-bb81-caadfe0f6dbb.webp", "type": "image", "prompt": "Generate a traditional white checkers disc with a subtle 3D effect and soft lighting. Match the minimalist logo style and perspective of checker_regular_black. Clean edges, professional game asset, front-facing view, transparent background.", "description": "A white checkers disc with 3D depth and subtle lighting, designed in a minimalist style.", "subtype": "object", "aspect_ratio": [975, 980], "compression_suggestion": "medium", "duration_secs": null, "loop": null, "animation": null}, "checker_king_white": {"url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/checker_king_white_78aeb221-222d-4955-a46d-80dad0d808ea.webp", "type": "image", "prompt": "Generate a white checkers king disc with a gold crown icon on top. Use a clean, minimalist logo style with a 3D effect and subtle lighting. Ensure it matches the design and perspective of image 1 and image 2. Transparent background, high resolution, game-ready UI asset.", "description": "White checkers king piece with a gold crown icon, matching the established game style.", "subtype": "object", "aspect_ratio": [1021, 1024], "compression_suggestion": "high", "duration_secs": null, "loop": null, "animation": null}}, "game_code": "<!DOCTYPE html>\n<html>\n<head>\n    <title>Chess vs. Checkers Clash</title>\n    <style>\n        @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Inter:wght@400;600&display=swap');\n\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\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: 'Inter', sans-serif;\n            background: #1A237E;\n        }\n\n        /* CSS 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\n        #game-world {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(135deg, #1A237E 0%, #283593 100%);\n        }\n\n        /* Screen Management */\n        .screen {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            display: none;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: var(--space-md);\n        }\n\n        .screen.active {\n            display: flex;\n        }\n\n        /* Color Selection Screen */\n        #color-selection {\n            gap: var(--space-lg);\n        }\n\n        .color-buttons {\n            display: flex;\n            gap: var(--space-lg);\n        }\n\n        .color-button {\n            width: 200px;\n            height: 200px;\n            background: rgba(255, 255, 255, 0.1);\n            border: 4px solid #FFD700;\n            border-radius: 20px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: var(--space-sm);\n            cursor: pointer;\n            transition: all var(--transition-normal) var(--ease-out);\n            backdrop-filter: blur(10px);\n        }\n\n        .color-button:hover {\n            background: rgba(255, 255, 255, 0.2);\n            transform: scale(1.05);\n        }\n\n        .color-preview {\n            width: 80px;\n            height: 80px;\n            border-radius: 50%;\n            border: 3px solid rgba(255,255,255,0.5);\n        }\n\n        .color-preview.white {\n            background-color: #FFFFFF;\n        }\n\n        .color-preview.black {\n            background-color: #000000;\n        }\n\n        .color-button-text {\n            font-family: 'Oswald', sans-serif;\n            font-size: 28px;\n            font-weight: 700;\n            color: #FFFFFF;\n        }\n\n        /* Army Selection Screen */\n        #army-selection {\n            gap: var(--space-lg);\n        }\n\n        .title {\n            font-family: 'Oswald', sans-serif;\n            font-size: 48px;\n            font-weight: 700;\n            color: #FFD700;\n            text-align: center;\n            margin-bottom: var(--space-xl);\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n        }\n\n        .army-button {\n            width: 320px;\n            height: 160px;\n            background: rgba(255, 255, 255, 0.1);\n            border: 3px solid #FFD700;\n            border-radius: 16px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: var(--space-sm);\n            cursor: pointer;\n            transition: all var(--transition-normal) var(--ease-out);\n            backdrop-filter: blur(10px);\n        }\n\n        .army-button:hover {\n            background: rgba(255, 255, 255, 0.2);\n            transform: translateY(-4px);\n            box-shadow: 0 8px 16px rgba(0,0,0,0.3);\n        }\n\n        .army-button-title {\n            font-family: 'Oswald', sans-serif;\n            font-size: 32px;\n            font-weight: 700;\n            color: #FFFFFF;\n        }\n\n        .army-button-icons {\n            display: flex;\n            gap: var(--space-sm);\n            height: 50px;\n            align-items: center;\n        }\n\n        .army-button-icons img {\n            height: 40px;\n            width: auto;\n        }\n\n        /* Difficulty Selection Screen */\n        #difficulty-selection {\n            gap: var(--space-md);\n        }\n\n        .difficulty-button {\n            width: 280px;\n            height: 96px;\n            background: rgba(255, 255, 255, 0.1);\n            border: 3px solid #FFFFFF;\n            border-radius: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--space-sm);\n            cursor: pointer;\n            transition: all var(--transition-normal) var(--ease-out);\n            backdrop-filter: blur(10px);\n        }\n\n        .difficulty-button:hover {\n            background: rgba(255, 255, 255, 0.2);\n            transform: translateY(-2px);\n        }\n\n        .difficulty-button.easy {\n            border-color: #4CAF50;\n        }\n\n        .difficulty-button.medium {\n            border-color: #FF9800;\n        }\n\n        .difficulty-button.hard {\n            border-color: #F44336;\n        }\n\n        .difficulty-button img {\n            width: 48px;\n            height: 48px;\n        }\n\n        .difficulty-button-text {\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }\n\n        .difficulty-button-title {\n            font-family: 'Oswald', sans-serif;\n            font-size: 28px;\n            font-weight: 700;\n            color: #FFFFFF;\n        }\n\n        .difficulty-button-desc {\n            font-size: 20px;\n            color: rgba(255, 255, 255, 0.8);\n        }\n\n        .back-button {\n            margin-top: var(--space-lg);\n            padding: 12px 32px;\n            background: rgba(255, 255, 255, 0.1);\n            border: 2px solid rgba(255, 255, 255, 0.5);\n            border-radius: 8px;\n            color: #FFFFFF;\n            font-size: 22px;\n            cursor: pointer;\n            transition: all var(--transition-normal) var(--ease-out);\n        }\n\n        .back-button:hover {\n            background: rgba(255, 255, 255, 0.2);\n        }\n\n        /* Game Screen */\n        #game-screen {\n            padding: 0;\n            justify-content: flex-start;\n        }\n\n        /* Top Section */\n        .top-section {\n            width: 100%;\n            min-height: 160px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: var(--space-xs);\n            padding: var(--space-sm);\n        }\n\n        .opponent-info {\n            display: flex;\n            align-items: center;\n            gap: var(--space-sm);\n        }\n\n        .army-indicator {\n            font-size: 26px;\n            color: #FFFFFF;\n            font-weight: 600;\n        }\n\n        .difficulty-badge {\n            width: 48px;\n            height: 48px;\n        }\n\n        .captured-pieces {\n            display: flex;\n            gap: 4px;\n            flex-wrap: wrap;\n            justify-content: center;\n            min-height: 40px;\n        }\n\n        .captured-piece {\n            width: 32px;\n            height: 32px;\n            opacity: 0.7;\n        }\n\n        /* Board Section */\n        .board-section {\n            width: 100%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0 var(--space-sm);\n        }\n\n        #game-board {\n            width: 608px;\n            height: 608px;\n            position: relative;\n            box-shadow: 0 8px 32px rgba(0,0,0,0.5);\n            border-radius: 4px;\n            overflow: hidden;\n        }\n\n        .board-square {\n            position: absolute;\n            width: 76px;\n            height: 76px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: background-color var(--transition-fast);\n        }\n\n        .board-square.light {\n            background-color: #F0D9B5;\n        }\n\n        .board-square.dark {\n            background-color: #B58863;\n        }\n\n        .board-square.selected {\n            box-shadow: inset 0 0 0 4px #FFD700;\n            z-index: 10;\n        }\n\n        .board-square.valid-move::after {\n            content: '';\n            position: absolute;\n            width: 24px;\n            height: 24px;\n            background: rgba(76, 175, 80, 0.6);\n            border-radius: 50%;\n        }\n\n        .board-square.valid-capture::after {\n            content: '';\n            position: absolute;\n            width: 60px;\n            height: 60px;\n            border: 4px solid rgba(244, 67, 54, 0.8);\n            border-radius: 50%;\n        }\n\n        .piece {\n            width: 57px;\n            height: 57px;\n            pointer-events: none;\n            transition: transform var(--transition-fast);\n        }\n\n        .board-square:hover .piece {\n            transform: scale(1.1);\n        }\n\n        /* Bottom Section */\n        .bottom-section {\n            width: 100%;\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: var(--space-sm);\n            gap: var(--space-sm);\n        }\n\n        .player-info {\n            display: flex;\n            align-items: center;\n            gap: var(--space-sm);\n        }\n\n        .turn-indicator {\n            font-size: 28px;\n            color: #FFD700;\n            font-weight: 700;\n            text-align: center;\n            margin: var(--space-sm) 0;\n            transition: opacity var(--transition-fast);\n        }\n\n        .turn-indicator.thinking {\n            animation: pulse 1.5s infinite ease-in-out;\n        }\n\n        @keyframes pulse {\n            0% { opacity: 0.6; transform: scale(0.98); }\n            50% { opacity: 1; transform: scale(1.02); }\n            100% { opacity: 0.6; transform: scale(0.98); }\n        }\n\n        .move-history {\n            width: 90%;\n            max-width: 400px;\n            background: rgba(0, 0, 0, 0.3);\n            border-radius: 8px;\n            padding: var(--space-sm);\n            max-height: 140px;\n            overflow-y: auto;\n        }\n\n        .move-history-title {\n            font-size: 20px;\n            font-weight: 600;\n            color: rgba(255, 255, 255, 0.9);\n            margin-bottom: var(--space-xs);\n        }\n\n        .move-entry {\n            font-size: 20px;\n            color: #FFFFFF;\n            padding: 4px 0;\n            line-height: 1.3;\n        }\n\n        .menu-button {\n            width: 120px;\n            height: 48px;\n            background: rgba(255, 255, 255, 0.1);\n            border: 2px solid rgba(255, 255, 255, 0.5);\n            border-radius: 8px;\n            color: #FFFFFF;\n            font-size: 22px;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            margin-top: var(--space-sm);\n        }\n\n        .menu-button img {\n            width: 24px;\n            height: 24px;\n        }\n\n        /* Victory Screen */\n        #victory-screen {\n            gap: var(--space-lg);\n        }\n\n        .victory-title {\n            font-family: 'Oswald', sans-serif;\n            font-size: 56px;\n            font-weight: 700;\n            color: #FFD700;\n            text-align: center;\n            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n        }\n\n        .victory-stats {\n            background: rgba(0, 0, 0, 0.3);\n            padding: var(--space-lg);\n            border-radius: 12px;\n            text-align: center;\n        }\n\n        .victory-stat {\n            font-size: 24px;\n            color: #FFFFFF;\n            margin: 8px 0;\n        }\n\n        .victory-buttons {\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-md);\n        }\n\n        .victory-button {\n            width: 280px;\n            height: 96px;\n            background: rgba(255, 255, 255, 0.1);\n            border: 3px solid #FFD700;\n            border-radius: 12px;\n            color: #FFFFFF;\n            font-size: 28px;\n            font-weight: 700;\n            cursor: pointer;\n            transition: all var(--transition-normal) var(--ease-out);\n        }\n\n        .victory-button:hover {\n            background: rgba(255, 255, 255, 0.2);\n            transform: translateY(-2px);\n        }\n\n        /* Menu Overlay */\n        .menu-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.8);\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 1000;\n        }\n\n        .menu-overlay.active {\n            display: flex;\n        }\n\n        .menu-panel {\n            background: #1A237E;\n            border: 3px solid #FFD700;\n            border-radius: 16px;\n            padding: var(--space-xl);\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-md);\n            min-width: 320px;\n        }\n\n        .menu-panel-title {\n            font-family: 'Oswald', sans-serif;\n            font-size: 36px;\n            color: #FFD700;\n            text-align: center;\n        }\n\n        .menu-panel-button {\n            width: 100%;\n            height: 64px;\n            background: rgba(255, 255, 255, 0.1);\n            border: 2px solid #FFFFFF;\n            border-radius: 8px;\n            color: #FFFFFF;\n            font-size: 24px;\n            cursor: pointer;\n            transition: all var(--transition-normal) var(--ease-out);\n        }\n\n        .menu-panel-button:hover {\n            background: rgba(255, 255, 255, 0.2);\n        }\n\n        /* Animations */\n        @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        @keyframes slideUp {\n            from { transform: translateY(20px); opacity: 0; }\n            to { transform: translateY(0); opacity: 1; }\n        }\n\n        .screen.active {\n            animation: fadeIn var(--transition-normal) var(--ease-out);\n        }\n\n        .army-button, .difficulty-button, .victory-button {\n            animation: slideUp var(--transition-slow) var(--ease-out);\n        }\n\n        .army-button:nth-child(2) { animation-delay: 100ms; }\n        .difficulty-button:nth-child(2) { animation-delay: 100ms; }\n        .difficulty-button:nth-child(3) { animation-delay: 200ms; }\n    </style>\n</head>\n<body>\n    <div id=\"game-world\">\n        <!-- Army Selection Screen -->\n        <div id=\"color-selection\" class=\"screen\">\n            <div class=\"title\">Choose Your Color</div>\n            <div class=\"color-buttons\">\n                <div class=\"color-button\" data-color=\"white\">\n                    <div class=\"color-preview white\"></div>\n                    <div class=\"color-button-text\">WHITE</div>\n                </div>\n                <div class=\"color-button\" data-color=\"black\">\n                    <div class=\"color-preview black\"></div>\n                    <div class=\"color-button-text\">BLACK</div>\n                </div>\n            </div>\n        </div>\n\n        <div id=\"army-selection\" class=\"screen\">\n            <div class=\"title\">Chess VS Checkers</div>\n            <div class=\"army-button\" data-army=\"chess\">\n                <div class=\"army-button-title\">Play as Chess</div>\n                <div class=\"army-button-icons\" id=\"chess-icons\"></div>\n            </div>\n            <div class=\"army-button\" data-army=\"checkers\">\n                <div class=\"army-button-title\">Play as Checkers</div>\n                <div class=\"army-button-icons\" id=\"checkers-icons\"></div>\n            </div>\n            <button class=\"back-button\" id=\"back-to-color\">Back</button>\n        </div>\n\n        <!-- Difficulty Selection Screen -->\n        <div id=\"difficulty-selection\" class=\"screen\">\n            <div class=\"title\">Select Difficulty</div>\n            <div class=\"difficulty-button easy\" data-difficulty=\"easy\">\n                <img id=\"badge-easy-img\" src=\"\" alt=\"Easy\">\n                <div class=\"difficulty-button-text\">\n                    <div class=\"difficulty-button-title\">Easy</div>\n                    <div class=\"difficulty-button-desc\">Random moves</div>\n                </div>\n            </div>\n            <div class=\"difficulty-button medium\" data-difficulty=\"medium\">\n                <img id=\"badge-medium-img\" src=\"\" alt=\"Medium\">\n                <div class=\"difficulty-button-text\">\n                    <div class=\"difficulty-button-title\">Medium</div>\n                    <div class=\"difficulty-button-desc\">Smart tactics</div>\n                </div>\n            </div>\n            <div class=\"difficulty-button hard\" data-difficulty=\"hard\">\n                <img id=\"badge-hard-img\" src=\"\" alt=\"Hard\">\n                <div class=\"difficulty-button-text\">\n                    <div class=\"difficulty-button-title\">Hard</div>\n                    <div class=\"difficulty-button-desc\">Expert AI</div>\n                </div>\n            </div>\n            <button class=\"back-button\" id=\"back-to-army\">Back</button>\n        </div>\n\n        <!-- Game Screen -->\n        <div id=\"game-screen\" class=\"screen\">\n            <div class=\"top-section\">\n                <div class=\"opponent-info\">\n                    <div class=\"army-indicator\" id=\"opponent-army\"></div>\n                    <img class=\"difficulty-badge\" id=\"difficulty-badge\" src=\"\" alt=\"Difficulty\">\n                </div>\n                <div class=\"captured-pieces\" id=\"opponent-captured\"></div>\n            </div>\n\n            <div class=\"board-section\">\n                <div id=\"game-board\"></div>\n            </div>\n\n            <div class=\"bottom-section\">\n                <div class=\"captured-pieces\" id=\"player-captured\"></div>\n                <div class=\"player-info\">\n                    <div class=\"army-indicator\" id=\"player-army\"></div>\n                </div>\n                <div class=\"turn-indicator\" id=\"turn-indicator\">Your Turn</div>\n                <div class=\"move-history\" id=\"move-history\">\n                    <div class=\"move-history-title\">Move History</div>\n                    <div id=\"move-list\"></div>\n                </div>\n                <button class=\"menu-button\" id=\"menu-btn\">\n                    <img id=\"menu-icon\" src=\"\" alt=\"Menu\">\n                    Menu\n                </button>\n            </div>\n        </div>\n\n        <!-- Victory Screen -->\n        <div id=\"victory-screen\" class=\"screen\">\n            <div class=\"victory-title\" id=\"victory-title\">Victory!</div>\n            <div class=\"victory-stats\">\n                <div class=\"victory-stat\" id=\"moves-stat\">Moves: 0</div>\n                <div class=\"victory-stat\" id=\"captures-stat\">Captures: 0</div>\n            </div>\n            <div class=\"victory-buttons\">\n                <button class=\"victory-button\" id=\"play-again\">Play Again</button>\n                <button class=\"victory-button\" id=\"change-army\">Change Army</button>\n            </div>\n        </div>\n\n        <!-- Menu Overlay -->\n        <div class=\"menu-overlay\" id=\"menu-overlay\">\n            <div class=\"menu-panel\">\n                <div class=\"menu-panel-title\">Paused</div>\n                <button class=\"menu-panel-button\" id=\"resume-btn\">Resume</button>\n                <button class=\"menu-panel-button\" id=\"restart-btn\">Restart</button>\n                <button class=\"menu-panel-button\" id=\"quit-btn\">Quit to Menu</button>\n            </div>\n        </div>\n    </div>\n\n    <script>\n        /*\n        Chess vs. Checkers Clash - A turn-based strategy game where Chess and Checkers armies battle.\n        \n        Core Mechanics:\n        - Player chooses Chess or Checkers army against AI opponent\n        - Chess pieces move according to traditional chess rules\n        - Checkers pieces move diagonally with multi-jump captures\n        - Victory: Capture opponent's King (Chess) or all pieces (Checkers)\n        - Three AI difficulty levels: Easy (random), Medium (tactical), Hard (minimax)\n        */\n\n        async function run(mode) {\n            const gameWorld = document.getElementById('game-world');\n            \n            // Asset cache\n            const assets = {};\n            \n            // Game state (runtime, not persistent)\n            let gameState = {\n                screen: 'color-selection',\n                playerColor: 'white', // 'white' or 'black'\n                playerArmy: null, // 'chess' or 'checkers'\n                aiArmy: null,\n                difficulty: 'medium',\n                board: [], // 8x8 array\n                selectedPiece: null,\n                validMoves: [],\n                currentTurn: 'player', // 'player' or 'ai'\n                moveHistory: [],\n                capturedByPlayer: [],\n                capturedByAI: [],\n                moveCount: 0,\n                isGameOver: false\n            };\n\n            // Initialize config if needed\n            if (!window.gameConfig) {\n                window.gameConfig = {\n                    visual: {\n                        lightSquareColor: \"#F0D9B5\",\n                        darkSquareColor: \"#B58863\",\n                        chessColor: \"#FFFFFF\",\n                        checkersColor: \"#D32F2F\",\n                        selectedHighlight: \"#FFD700\",\n                        validMoveHighlight: \"#4CAF50\",\n                        captureHighlight: \"#F44336\"\n                    },\n                    gameplay: {\n                        defaultDifficulty: \"medium\",\n                        enableMultiJump: true,\n                        autoPawnPromotion: true\n                    },\n                    ui: {\n                        showMoveHistory: true,\n                        showCapturedPieces: true,\n                        playerPiecesAtBottom: true\n                    }\n                };\n            }\n\n            // Preload all assets\n            async function preloadAssets() {\n                const assetIds = [\n                    'chess_pawn_white', 'chess_pawn_black',\n                    'chess_knight_white', 'chess_knight_black',\n                    'chess_bishop_white', 'chess_bishop_black',\n                    'chess_rook_white', 'chess_rook_black',\n                    'chess_queen_white', 'chess_queen_black',\n                    'chess_king_white', 'chess_king_black',\n                    'checker_regular_white', 'checker_regular_black',\n                    'checker_king_white', 'checker_king_black',\n                    'icon_menu', 'icon_restart',\n                    'badge_easy', 'badge_medium', 'badge_hard'\n                ];\n\n                const loadPromises = assetIds.map(id => {\n                    return new Promise((resolve, reject) => {\n                        const assetInfo = lib.getAsset(id);\n                        if (!assetInfo) {\n                            reject(`Asset ${id} not found`);\n                            return;\n                        }\n\n                        const img = new Image();\n                        img.onload = () => {\n                            assets[id] = { img, info: assetInfo };\n                            resolve();\n                        };\n                        img.onerror = () => reject(`Failed to load ${id}`);\n                        img.src = assetInfo.url;\n                    });\n                });\n\n                await Promise.all(loadPromises);\n            }\n\n            await preloadAssets();\n\n            // Initialize UI with preloaded assets\n            function initializeUI() {\n                // Set badge images\n                document.getElementById('badge-easy-img').src = assets['badge_easy'].img.src;\n                document.getElementById('badge-medium-img').src = assets['badge_medium'].img.src;\n                document.getElementById('badge-hard-img').src = assets['badge_hard'].img.src;\n                document.getElementById('menu-icon').src = assets['icon_menu'].img.src;\n\n                // Set chess icons\n                const chessIcons = document.getElementById('chess-icons');\n                ['chess_king_white', 'chess_queen_white', 'chess_rook_white'].forEach(id => {\n                    const img = document.createElement('img');\n                    img.src = assets[id].img.src;\n                    chessIcons.appendChild(img);\n                });\n\n                // Set checkers icons\n                const checkersIcons = document.getElementById('checkers-icons');\n                ['checker_regular_black', 'checker_king_black'].forEach(id => {\n                    const img = document.createElement('img');\n                    img.src = assets[id].img.src;\n                    checkersIcons.appendChild(img);\n                });\n            }\n\n            initializeUI();\n\n            // Show game parameters\n            if (mode === 'edit') {\n                lib.showGameParameters({\n                    name: 'Game Settings',\n                    params: {\n                        'Light Square Color': {\n                            key: 'visual.lightSquareColor',\n                            type: 'color'\n                        },\n                        'Dark Square Color': {\n                            key: 'visual.darkSquareColor',\n                            type: 'color'\n                        },\n                        'Chess Piece Color': {\n                            key: 'visual.chessColor',\n                            type: 'color'\n                        },\n                        'Checkers Piece Color': {\n                            key: 'visual.checkersColor',\n                            type: 'color'\n                        },\n                        'Default Difficulty': {\n                            key: 'gameplay.defaultDifficulty',\n                            type: 'dropdown',\n                            options: [\n                                { label: 'Easy', value: 'easy' },\n                                { label: 'Medium', value: 'medium' },\n                                { label: 'Hard', value: 'hard' }\n                            ]\n                        },\n                        'Enable Multi-Jump': {\n                            key: 'gameplay.enableMultiJump',\n                            type: 'checkbox'\n                        },\n                        'Auto Pawn Promotion': {\n                            key: 'gameplay.autoPawnPromotion',\n                            type: 'checkbox'\n                        },\n                        'Show Move History': {\n                            key: 'ui.showMoveHistory',\n                            type: 'checkbox'\n                        },\n                        'Show Captured Pieces': {\n                            key: 'ui.showCapturedPieces',\n                            type: 'checkbox'\n                        }\n                    }\n                });\n            } else {\n                lib.showGameParameters({\n                    name: 'Game Settings',\n                    params: {\n                        'Default Difficulty': {\n                            key: 'gameplay.defaultDifficulty',\n                            type: 'dropdown',\n                            options: [\n                                { label: 'Easy', value: 'easy' },\n                                { label: 'Medium', value: 'medium' },\n                                { label: 'Hard', value: 'hard' }\n                            ]\n                        }\n                    }\n                });\n            }\n\n            // Screen management\n            function showScreen(screenId) {\n                document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n                document.getElementById(screenId).classList.add('active');\n                gameState.screen = screenId;\n            }\n\n            // Initialize board\n            function initializeBoard() {\n                gameState.board = Array(8).fill(null).map(() => Array(8).fill(null));\n                \n                if (gameState.playerArmy === 'chess') {\n                    // Player is Chess (bottom), AI is Checkers (top)\n                    setupChessPieces('player', 7, 6);\n                    setupCheckersPieces('ai', 0, 1);\n                } else {\n                    // Player is Checkers (bottom), AI is Chess (top)\n                    setupCheckersPieces('player', 7, 6);\n                    setupChessPieces('ai', 0, 1);\n                }\n            }\n\n            function setupChessPieces(owner, backRow, pawnRow) {\n                const pieces = ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'];\n                pieces.forEach((type, col) => {\n                    gameState.board[backRow][col] = { type, owner, army: 'chess' };\n                });\n                for (let col = 0; col < 8; col++) {\n                    gameState.board[pawnRow][col] = { type: 'pawn', owner, army: 'chess', hasMoved: false };\n                }\n            }\n\n            function setupCheckersPieces(owner, ...rows) {\n                rows.forEach(row => {\n                    for (let col = 0; col < 8; col++) {\n                        gameState.board[row][col] = { type: 'checker', owner, army: 'checkers', isKing: false };\n                    }\n                });\n            }\n\n            // Render board\n            function renderBoard() {\n                const boardEl = document.getElementById('game-board');\n                boardEl.innerHTML = '';\n\n                for (let row = 0; row < 8; row++) {\n                    for (let col = 0; col < 8; col++) {\n                        const square = document.createElement('div');\n                        square.className = 'board-square';\n                        square.classList.add((row + col) % 2 === 0 ? 'light' : 'dark');\n                        square.style.left = `${col * 76}px`;\n                        square.style.top = `${row * 76}px`;\n                        square.style.backgroundColor = (row + col) % 2 === 0 ? \n                            window.gameConfig.visual.lightSquareColor : \n                            window.gameConfig.visual.darkSquareColor;\n                        square.dataset.row = row;\n                        square.dataset.col = col;\n\n                        // Add piece if present\n                        const piece = gameState.board[row][col];\n                        if (piece) {\n                            const pieceImg = document.createElement('img');\n                            pieceImg.className = 'piece';\n                            pieceImg.src = getPieceAsset(piece);\n                            square.appendChild(pieceImg);\n                        }\n\n                        // Highlight selected square\n                        if (gameState.selectedPiece && \n                            gameState.selectedPiece.row === row && \n                            gameState.selectedPiece.col === col) {\n                            square.classList.add('selected');\n                        }\n\n                        // Highlight valid moves\n                        const isValidMove = gameState.validMoves.some(m => m.row === row && m.col === col);\n                        if (isValidMove) {\n                            const move = gameState.validMoves.find(m => m.row === row && m.col === col);\n                            square.classList.add(move.isCapture ? 'valid-capture' : 'valid-move');\n                        }\n\n                        square.addEventListener('click', () => handleSquareClick(row, col));\n                        boardEl.appendChild(square);\n                    }\n                }\n            }\n\n            function getPieceAsset(piece) {\n                const color = piece.owner === 'player' ? gameState.playerColor : (gameState.playerColor === 'white' ? 'black' : 'white');\n                if (piece.army === 'chess') {\n                    return assets[`chess_${piece.type}_${color}`].img.src;\n                } else {\n                    const kingType = piece.isKing ? '_king' : '_regular';\n                    return assets[`checker${kingType}_${color}`].img.src;\n                }\n            }\n\n            // Handle square click\n            function handleSquareClick(row, col) {\n                if (gameState.isGameOver || gameState.currentTurn !== 'player') return;\n\n                const clickedPiece = gameState.board[row][col];\n\n                // If a piece is selected and we click a valid move\n                if (gameState.selectedPiece) {\n                    const validMove = gameState.validMoves.find(m => m.row === row && m.col === col);\n                    if (validMove) {\n                        executeMove(gameState.selectedPiece, validMove);\n                        gameState.selectedPiece = null;\n                        gameState.validMoves = [];\n                        \n                        // Check for multi-jump\n                        if (validMove.continueJump) {\n                            gameState.selectedPiece = { row: validMove.row, col: validMove.col };\n                            gameState.validMoves = getValidMoves(validMove.row, validMove.col);\n                            renderBoard();\n                            updateUI();\n                            return;\n                        }\n                        \n                        renderBoard();\n                        updateUI();\n                        \n                        if (!checkVictory()) {\n                            gameState.currentTurn = 'ai';\n                            setTimeout(() => aiTurn(), 500);\n                        }\n                        return;\n                    }\n                }\n\n                // Select a new piece\n                if (clickedPiece && clickedPiece.owner === 'player') {\n                    const moves = getValidMoves(row, col);\n                    if (moves.length > 0) {\n                        gameState.selectedPiece = { row, col };\n                        gameState.validMoves = moves;\n                        renderBoard();\n                    }\n                } else {\n                    gameState.selectedPiece = null;\n                    gameState.validMoves = [];\n                    renderBoard();\n                }\n            }\n\n            // Get valid moves for a piece\n            function getValidMoves(row, col) {\n                const piece = gameState.board[row][col];\n                if (!piece) return [];\n\n                if (piece.army === 'chess') {\n                    return getChessMoves(row, col, piece);\n                } else {\n                    return getCheckersMoves(row, col, piece);\n                }\n            }\n\n            function getChessMoves(row, col, piece) {\n                const moves = [];\n                const direction = piece.owner === 'player' ? -1 : 1;\n\n                switch (piece.type) {\n                    case 'pawn':\n                        // Forward move\n                        if (isInBounds(row + direction, col) && !gameState.board[row + direction][col]) {\n                            moves.push({ row: row + direction, col, isCapture: false });\n                            // Double move on first move\n                            if (!piece.hasMoved && !gameState.board[row + 2 * direction][col]) {\n                                moves.push({ row: row + 2 * direction, col, isCapture: false });\n                            }\n                        }\n                        // Diagonal captures\n                        [-1, 1].forEach(dc => {\n                            const newRow = row + direction;\n                            const newCol = col + dc;\n                            if (isInBounds(newRow, newCol)) {\n                                const target = gameState.board[newRow][newCol];\n                                if (target && target.owner !== piece.owner) {\n                                    moves.push({ row: newRow, col: newCol, isCapture: true });\n                                }\n                            }\n                        });\n                        break;\n\n                    case 'knight':\n                        const knightMoves = [\n                            [-2, -1], [-2, 1], [-1, -2], [-1, 2],\n                            [1, -2], [1, 2], [2, -1], [2, 1]\n                        ];\n                        knightMoves.forEach(([dr, dc]) => {\n                            const newRow = row + dr;\n                            const newCol = col + dc;\n                            if (isInBounds(newRow, newCol)) {\n                                const target = gameState.board[newRow][newCol];\n                                if (!target || target.owner !== piece.owner) {\n                                    moves.push({ row: newRow, col: newCol, isCapture: !!target });\n                                }\n                            }\n                        });\n                        break;\n\n                    case 'bishop':\n                        addSlidingMoves(row, col, piece, moves, [[-1, -1], [-1, 1], [1, -1], [1, 1]]);\n                        break;\n\n                    case 'rook':\n                        addSlidingMoves(row, col, piece, moves, [[-1, 0], [1, 0], [0, -1], [0, 1]]);\n                        break;\n\n                    case 'queen':\n                        addSlidingMoves(row, col, piece, moves, [\n                            [-1, -1], [-1, 0], [-1, 1],\n                            [0, -1], [0, 1],\n                            [1, -1], [1, 0], [1, 1]\n                        ]);\n                        break;\n\n                    case 'king':\n                        const kingMoves = [\n                            [-1, -1], [-1, 0], [-1, 1],\n                            [0, -1], [0, 1],\n                            [1, -1], [1, 0], [1, 1]\n                        ];\n                        kingMoves.forEach(([dr, dc]) => {\n                            const newRow = row + dr;\n                            const newCol = col + dc;\n                            if (isInBounds(newRow, newCol)) {\n                                const target = gameState.board[newRow][newCol];\n                                if (!target || target.owner !== piece.owner) {\n                                    moves.push({ row: newRow, col: newCol, isCapture: !!target });\n                                }\n                            }\n                        });\n                        break;\n                }\n\n                return moves;\n            }\n\n            function addSlidingMoves(row, col, piece, moves, directions) {\n                directions.forEach(([dr, dc]) => {\n                    let newRow = row + dr;\n                    let newCol = col + dc;\n                    while (isInBounds(newRow, newCol)) {\n                        const target = gameState.board[newRow][newCol];\n                        if (!target) {\n                            moves.push({ row: newRow, col: newCol, isCapture: false });\n                        } else {\n                            if (target.owner !== piece.owner) {\n                                moves.push({ row: newRow, col: newCol, isCapture: true });\n                            }\n                            break;\n                        }\n                        newRow += dr;\n                        newCol += dc;\n                    }\n                });\n            }\n\n            function getCheckersMoves(row, col, piece) {\n                const moves = [];\n                // Only diagonal directions as per latest user request\n                const directions = [\n                    [-1, -1], [-1, 1], [1, -1], [1, 1]\n                ];\n\n                directions.forEach(([dr, dc]) => {\n                    // 1. Regular move (NO direct capture)\n                    const nextRow = row + dr;\n                    const nextCol = col + dc;\n                    \n                    // Allow all diagonal movement for \"super-charged\" checkers as per previous requests\n                    // but we restrict capture to jumping only below.\n                    if (isInBounds(nextRow, nextCol) && !gameState.board[nextRow][nextCol]) {\n                        moves.push({ row: nextRow, col: nextCol, isCapture: false });\n                    }\n\n                    // 2. Jump capture (Classic Checkers style) - ONLY Diagonally\n                    const jumpRow = row + dr * 2;\n                    const jumpCol = col + dc * 2;\n                    const midRow = row + dr;\n                    const midCol = col + dc;\n\n                    if (isInBounds(jumpRow, jumpCol) && !gameState.board[jumpRow][jumpCol]) {\n                        const middle = gameState.board[midRow][midCol];\n                        if (middle && middle.owner !== piece.owner) {\n                            const move = { \n                                row: jumpRow, \n                                col: jumpCol, \n                                isCapture: true, \n                                capturedPos: { row: midRow, col: midCol } \n                            };\n                            \n                            // Check if more jumps are available for multi-jump chain\n                            if (window.gameConfig.gameplay.enableMultiJump) {\n                                // Create a deep copy of the board to simulate the state after this jump\n                                const tempBoard = gameState.board.map(r => r.slice());\n                                tempBoard[jumpRow][jumpCol] = tempBoard[row][col];\n                                tempBoard[row][col] = null;\n                                tempBoard[midRow][midCol] = null;\n                                \n                                const hasMoreCaptures = directions.some(([dr2, dc2]) => {\n                                    const nextJumpRow = jumpRow + dr2 * 2;\n                                    const nextJumpCol = jumpCol + dc2 * 2;\n                                    const nextMidRow = jumpRow + dr2;\n                                    const nextMidCol = jumpCol + dc2;\n                                    \n                                    if (isInBounds(nextJumpRow, nextJumpCol) && !tempBoard[nextJumpRow][nextJumpCol]) {\n                                        const nextMiddle = tempBoard[nextMidRow][nextMidCol];\n                                        return nextMiddle && nextMiddle.owner !== piece.owner;\n                                    }\n                                    return false;\n                                });\n                                \n                                move.continueJump = hasMoreCaptures;\n                            }\n                            \n                            moves.push(move);\n                        }\n                    }\n                });\n\n                return moves;\n            }\n\n            function isInBounds(row, col) {\n                return row >= 0 && row < 8 && col >= 0 && col < 8;\n            }\n\n            // Execute move\n            function executeMove(from, to) {\n                const piece = gameState.board[from.row][from.col];\n                const captured = to.isCapture ? (to.capturedPos ? gameState.board[to.capturedPos.row][to.capturedPos.col] : gameState.board[to.row][to.col]) : null;\n\n                gameState.board[to.row][to.col] = piece;\n                gameState.board[from.row][from.col] = null;\n\n                // Handle pawn first move\n                if (piece.type === 'pawn') {\n                    piece.hasMoved = true;\n                }\n\n                // Handle captures\n                if (to.isCapture) {\n                    if (piece.owner === 'player') {\n                        gameState.capturedByPlayer.push(captured);\n                    } else {\n                        gameState.capturedByAI.push(captured);\n                    }\n\n                    if (to.capturedPos) {\n                        // Checkers jump capture\n                        gameState.board[to.capturedPos.row][to.capturedPos.col] = null;\n                    }\n                }\n\n                // Handle promotions\n                if (piece.army === 'chess' && piece.type === 'pawn') {\n                    if ((piece.owner === 'player' && to.row === 0) || (piece.owner === 'ai' && to.row === 7)) {\n                        if (window.gameConfig.gameplay.autoPawnPromotion) {\n                            piece.type = 'queen';\n                        }\n                    }\n                }\n\n                if (piece.army === 'checkers' && !piece.isKing) {\n                    if ((piece.owner === 'player' && to.row === 0) || (piece.owner === 'ai' && to.row === 7)) {\n                        piece.isKing = true;\n                    }\n                }\n\n                // Add to move history\n                const moveNotation = `${piece.army === 'chess' ? piece.type : 'checker'} ${String.fromCharCode(65 + from.col)}${8 - from.row} \u2192 ${String.fromCharCode(65 + to.col)}${8 - to.row}`;\n                gameState.moveHistory.unshift(moveNotation);\n                if (gameState.moveHistory.length > 5) {\n                    gameState.moveHistory.pop();\n                }\n                gameState.moveCount++;\n            }\n\n            // AI Turn\n            function aiTurn() {\n                if (gameState.isGameOver) return;\n\n                const indicator = document.getElementById('turn-indicator');\n                indicator.textContent = 'AI Thinking...';\n                indicator.classList.add('thinking');\n\n                const difficulty = gameState.difficulty;\n                \n                // Intentional delay for \"thinking\" feel\n                const thinkingTime = difficulty === 'hard' ? 1500 : 800;\n\n                setTimeout(() => {\n                    let move;\n                    if (difficulty === 'easy') {\n                        move = getRandomAIMove();\n                    } else if (difficulty === 'medium') {\n                        move = getMediumAIMove();\n                    } else {\n                        move = getHardAIMove();\n                    }\n\n                    if (move) {\n                        executeMove(move.from, move.to);\n                        \n                        // Check for multi-jump\n                        if (move.to.continueJump) {\n                            renderBoard();\n                            updateUI();\n                            setTimeout(() => continueAIJump(move.to.row, move.to.col), 300);\n                            return;\n                        }\n                        \n                        renderBoard();\n                        updateUI();\n\n                        if (!checkVictory()) {\n                            gameState.currentTurn = 'player';\n                            indicator.textContent = 'Your Turn';\n                            indicator.classList.remove('thinking');\n                        }\n                    } else {\n                        // AI has no moves - player wins\n                        if (!gameState.isGameOver) {\n                            gameState.isGameOver = true;\n                            indicator.classList.remove('thinking');\n                            showVictoryScreen('player');\n                        }\n                    }\n                }, thinkingTime);\n            }\n\n            function continueAIJump(row, col) {\n                const moves = getValidMoves(row, col);\n                if (moves.length > 0 && moves[0].isCapture) {\n                    executeMove({ row, col }, moves[0]);\n                    \n                    if (moves[0].continueJump) {\n                        renderBoard();\n                        updateUI();\n                        setTimeout(() => continueAIJump(moves[0].row, moves[0].col), 300);\n                        return;\n                    }\n                }\n                \n                renderBoard();\n                updateUI();\n\n                if (!checkVictory()) {\n                    gameState.currentTurn = 'player';\n                    document.getElementById('turn-indicator').textContent = 'Your Turn';\n                }\n            }\n\n            function getRandomAIMove() {\n                const allMoves = [];\n                const captureMoves = [];\n                \n                for (let row = 0; row < 8; row++) {\n                    for (let col = 0; col < 8; col++) {\n                        const piece = gameState.board[row][col];\n                        if (piece && piece.owner === 'ai') {\n                            const moves = getValidMoves(row, col);\n                            moves.forEach(move => {\n                                const moveObj = { from: { row, col }, to: move };\n                                if (move.isCapture) {\n                                    captureMoves.push(moveObj);\n                                } else {\n                                    allMoves.push(moveObj);\n                                }\n                            });\n                        }\n                    }\n                }\n\n                // Force captures if available (standard Checkers rule and makes AI aggressive)\n                if (captureMoves.length > 0) {\n                    return captureMoves[Math.floor(Math.random() * captureMoves.length)];\n                }\n\n                if (allMoves.length === 0) return null;\n                return allMoves[Math.floor(Math.random() * allMoves.length)];\n            }\n\n            function getMediumAIMove() {\n                const allMoves = [];\n                const captureMoves = [];\n\n                for (let row = 0; row < 8; row++) {\n                    for (let col = 0; col < 8; col++) {\n                        const piece = gameState.board[row][col];\n                        if (piece && piece.owner === 'ai') {\n                            const moves = getValidMoves(row, col);\n                            moves.forEach(move => {\n                                const moveObj = { from: { row, col }, to: move };\n                                if (move.isCapture) {\n                                    captureMoves.push(moveObj);\n                                } else {\n                                    allMoves.push(moveObj);\n                                }\n                            });\n                        }\n                    }\n                }\n\n                if (captureMoves.length > 0) {\n                    captureMoves.sort((a, b) => evaluateMove(b) - evaluateMove(a));\n                    return captureMoves[0]; // Greedily take the best capture\n                }\n\n                if (allMoves.length === 0) return null;\n\n                allMoves.sort((a, b) => evaluateMove(b) - evaluateMove(a));\n                const topPool = allMoves.slice(0, Math.min(3, allMoves.length));\n                return topPool[Math.floor(Math.random() * topPool.length)];\n            }\n\n            function getHardAIMove() {\n                const allMoves = [];\n                const captureMoves = [];\n\n                for (let row = 0; row < 8; row++) {\n                    for (let col = 0; col < 8; col++) {\n                        const piece = gameState.board[row][col];\n                        if (piece && piece.owner === 'ai') {\n                            const moves = getValidMoves(row, col);\n                            moves.forEach(move => {\n                                const moveObj = { from: { row, col }, to: move };\n                                if (move.isCapture) {\n                                    captureMoves.push(moveObj);\n                                } else {\n                                    allMoves.push(moveObj);\n                                }\n                            });\n                        }\n                    }\n                }\n\n                if (captureMoves.length > 0) {\n                    captureMoves.sort((a, b) => evaluateMove(b) - evaluateMove(a));\n                    return captureMoves[0];\n                }\n\n                if (allMoves.length === 0) return null;\n\n                let bestMove = allMoves[0];\n                let bestScore = -Infinity;\n\n                allMoves.forEach(move => {\n                    const score = evaluateMove(move);\n                    if (score > bestScore) {\n                        bestScore = score;\n                        bestMove = move;\n                    }\n                });\n\n                return bestMove;\n            }\n\n            function evaluateMove(move) {\n                const piece = gameState.board[move.from.row][move.from.col];\n                let score = 0;\n\n                // 1. Capture value (massive weight)\n                if (move.to.isCapture) {\n                    const capturedPiece = move.to.capturedPos ? \n                        gameState.board[move.to.capturedPos.row][move.to.capturedPos.col] :\n                        gameState.board[move.to.row][move.to.col];\n                    \n                    const val = getPieceValue(capturedPiece);\n                    score += val * 10000; // Increased weight\n\n                    // Prioritize taking the King or Queen immediately\n                    if (capturedPiece && (capturedPiece.type === 'king' || capturedPiece.type === 'queen')) {\n                        score += 50000;\n                    }\n                }\n\n                // 2. Promotion incentive\n                if (piece.type === 'pawn' || (piece.army === 'checkers' && !piece.isKing)) {\n                    const targetRow = piece.owner === 'ai' ? 7 : 0;\n                    const distBefore = Math.abs(move.from.row - targetRow);\n                    const distAfter = Math.abs(move.to.row - targetRow);\n                    if (distAfter < distBefore) {\n                        score += 50;\n                        if (distAfter === 0) score += 1000; // Value promotion highly\n                    }\n                }\n\n                // 3. Center control\n                const centerDist = Math.abs(move.to.row - 3.5) + Math.abs(move.to.col - 3.5);\n                score += (7 - centerDist) * 5;\n\n                // 4. Random noise\n                score += Math.random() * 10;\n\n                return score;\n            }\n\n            function getPieceValue(piece) {\n                if (!piece) return 0;\n                if (piece.army === 'chess') {\n                    const values = { pawn: 1, knight: 3, bishop: 3, rook: 5, queen: 9, king: 100 };\n                    return values[piece.type] || 0;\n                } else {\n                    return piece.isKing ? 3 : 1;\n                }\n            }\n\n            // Check victory\n            function checkVictory() {\n                // Check if Chess King is captured\n                let playerKingExists = false;\n                let aiKingExists = false;\n                let playerPiecesCount = 0;\n                let aiPiecesCount = 0;\n\n                for (let row = 0; row < 8; row++) {\n                    for (let col = 0; col < 8; col++) {\n                        const piece = gameState.board[row][col];\n                        if (piece) {\n                            if (piece.owner === 'player') {\n                                playerPiecesCount++;\n                                if (piece.type === 'king') playerKingExists = true;\n                            } else {\n                                aiPiecesCount++;\n                                if (piece.type === 'king') aiKingExists = true;\n                            }\n                        }\n                    }\n                }\n\n                let winner = null;\n                if ((gameState.playerArmy === 'chess' && !playerKingExists) || playerPiecesCount === 0) {\n                    winner = 'ai';\n                } else if ((gameState.aiArmy === 'chess' && !aiKingExists) || aiPiecesCount === 0) {\n                    winner = 'player';\n                }\n\n                if (winner) {\n                    gameState.isGameOver = true;\n                    showVictoryScreen(winner);\n                    return true;\n                }\n\n                return false;\n            }\n\n            function showVictoryScreen(winner) {\n                const title = document.getElementById('victory-title');\n                title.textContent = winner === 'player' ? 'Victory!' : 'Defeat!';\n                \n                document.getElementById('moves-stat').textContent = `Moves: ${gameState.moveCount}`;\n                document.getElementById('captures-stat').textContent = \n                    `Captures: ${winner === 'player' ? gameState.capturedByPlayer.length : gameState.capturedByAI.length}`;\n\n                showScreen('victory-screen');\n            }\n\n            // Update UI\n            function updateUI() {\n                // Update army indicators\n                const pColorIcon = gameState.playerColor === 'white' ? '\u26aa' : '\u26ab';\n                const aColorIcon = gameState.playerColor === 'white' ? '\u26ab' : '\u26aa';\n                document.getElementById('player-army').textContent = `${pColorIcon} ${gameState.playerArmy === 'chess' ? '\u2654 Chess' : 'Checkers'}`;\n                document.getElementById('opponent-army').textContent = `${aColorIcon} ${gameState.aiArmy === 'chess' ? '\u2654 Chess' : 'Checkers'}`;\n\n                // Update difficulty badge\n                const badgeId = `badge_${gameState.difficulty}`;\n                document.getElementById('difficulty-badge').src = assets[badgeId].img.src;\n\n                // Update captured pieces\n                if (window.gameConfig.ui.showCapturedPieces) {\n                    updateCapturedPieces('player-captured', gameState.capturedByPlayer);\n                    updateCapturedPieces('opponent-captured', gameState.capturedByAI);\n                }\n\n                // Update move history\n                if (window.gameConfig.ui.showMoveHistory) {\n                    const moveList = document.getElementById('move-list');\n                    moveList.innerHTML = '';\n                    gameState.moveHistory.forEach(move => {\n                        const div = document.createElement('div');\n                        div.className = 'move-entry';\n                        div.textContent = move;\n                        moveList.appendChild(div);\n                    });\n                }\n            }\n\n            function updateCapturedPieces(elementId, capturedArray) {\n                const container = document.getElementById(elementId);\n                container.innerHTML = '';\n                capturedArray.forEach(piece => {\n                    const img = document.createElement('img');\n                    img.className = 'captured-piece';\n                    img.src = getPieceAsset(piece);\n                    container.appendChild(img);\n                });\n            }\n\n            // Event listeners\n                document.querySelectorAll('.color-button').forEach(btn => {\n                    btn.addEventListener('click', () => {\n                        gameState.playerColor = btn.dataset.color;\n                        // Update selection screen icons to match chosen color\n                        const chessIcons = document.getElementById('chess-icons');\n                        chessIcons.innerHTML = '';\n                        ['chess_king', 'chess_queen', 'chess_rook'].forEach(type => {\n                            const img = document.createElement('img');\n                            img.src = assets[`${type}_${gameState.playerColor}`].img.src;\n                            chessIcons.appendChild(img);\n                        });\n                        \n                        const checkersIcons = document.getElementById('checkers-icons');\n                        checkersIcons.innerHTML = '';\n                        ['checker_regular', 'checker_king'].forEach(type => {\n                            const img = document.createElement('img');\n                            img.src = assets[`${type}_${gameState.playerColor}`].img.src;\n                            checkersIcons.appendChild(img);\n                        });\n\n                        showScreen('army-selection');\n                    });\n                });\n\n            document.querySelectorAll('.army-button').forEach(btn => {\n                btn.addEventListener('click', () => {\n                    gameState.playerArmy = btn.dataset.army;\n                    gameState.aiArmy = gameState.playerArmy === 'chess' ? 'checkers' : 'chess';\n                    showScreen('difficulty-selection');\n                });\n            });\n\n            document.querySelectorAll('.difficulty-button').forEach(btn => {\n                btn.addEventListener('click', () => {\n                    gameState.difficulty = btn.dataset.difficulty;\n                    startGame();\n                });\n            });\n\n            document.getElementById('back-to-color').addEventListener('click', () => {\n                showScreen('color-selection');\n            });\n\n            document.getElementById('back-to-army').addEventListener('click', () => {\n                showScreen('army-selection');\n            });\n\n            document.getElementById('play-again').addEventListener('click', () => {\n                startGame();\n            });\n\n            document.getElementById('change-army').addEventListener('click', () => {\n                showScreen('color-selection');\n            });\n\n            document.getElementById('menu-btn').addEventListener('click', () => {\n                document.getElementById('menu-overlay').classList.add('active');\n            });\n\n            document.getElementById('resume-btn').addEventListener('click', () => {\n                document.getElementById('menu-overlay').classList.remove('active');\n            });\n\n            document.getElementById('restart-btn').addEventListener('click', () => {\n                document.getElementById('menu-overlay').classList.remove('active');\n                startGame();\n            });\n\n            document.getElementById('quit-btn').addEventListener('click', () => {\n                document.getElementById('menu-overlay').classList.remove('active');\n                showScreen('color-selection');\n            });\n\n            function startGame() {\n                gameState.board = [];\n                gameState.selectedPiece = null;\n                gameState.validMoves = [];\n                gameState.moveHistory = [];\n                gameState.capturedByPlayer = [];\n                gameState.capturedByAI = [];\n                gameState.moveCount = 0;\n                gameState.isGameOver = false;\n\n                // White starts first, Black second\n                if (gameState.playerColor === 'white') {\n                    gameState.currentTurn = 'player';\n                } else {\n                    gameState.currentTurn = 'ai';\n                }\n\n                initializeBoard();\n                renderBoard();\n                updateUI();\n                showScreen('game-screen');\n                \n                if (gameState.currentTurn === 'player') {\n                    const indicator = document.getElementById('turn-indicator');\n                    indicator.textContent = 'Your Turn';\n                    indicator.classList.remove('thinking');\n                } else {\n                    aiTurn();\n                }\n            }\n\n            // Start with color selection\n            showScreen('color-selection');\n\n            // Edit mode\n            if (mode === 'edit') {\n                // In edit mode, show a preview board\n                gameState.playerColor = 'white';\n                gameState.playerArmy = 'chess';\n                gameState.aiArmy = 'checkers';\n                gameState.difficulty = 'medium';\n                initializeBoard();\n                renderBoard();\n                updateUI();\n                showScreen('game-screen');\n                gameState.currentTurn = 'player'; // Allow interaction in edit mode for testing\n            }\n        }\n    </script>\n</body>\n</html>", "game_config": "{\n  \"visual\": {\n    \"lightSquareColor\": \"#F0D9B5\",\n    \"darkSquareColor\": \"#B58863\",\n    \"chessColor\": \"#FFFFFF\",\n    \"checkersColor\": \"#000000\",\n    \"selectedHighlight\": \"#FFD700\",\n    \"validMoveHighlight\": \"#4CAF50\",\n    \"captureHighlight\": \"#F44336\"\n  },\n  \"gameplay\": {\n    \"defaultDifficulty\": \"medium\",\n    \"enableMultiJump\": true,\n    \"autoPawnPromotion\": true\n  },\n  \"ui\": {\n    \"showMoveHistory\": true,\n    \"showCapturedPieces\": true,\n    \"playerPiecesAtBottom\": true\n  }\n}", "game_design_document": "## Core Game Loop and Mechanics\n\n**Chess vs. Checkers Clash** is a turn-based strategy game that pits two fundamentally different board game systems against each other in asymmetrical combat.\n\n### Game Flow\n1. **Army Selection**: Player chooses to play as either Chess or Checkers\n2. **Difficulty Selection**: Player selects AI difficulty (Easy, Medium, Hard)\n3. **Gameplay**: Players alternate turns moving pieces according to their army's rules\n4. **Victory**: Game ends when Chess King is captured OR all Checkers pieces are eliminated\n\n### Chess Army Rules\n- **Pawn**: Moves forward 1 square (2 on first move), captures diagonally forward 1 square. Promotes to Queen when reaching opposite end.\n- **Knight**: Moves in L-shape (2 squares in one direction, 1 perpendicular). Can jump over pieces.\n- **Bishop**: Moves diagonally any number of squares. Cannot jump over pieces.\n- **Rook**: Moves horizontally or vertically any number of squares. Cannot jump over pieces.\n- **Queen**: Combines Rook and Bishop movement. Cannot jump over pieces.\n- **King**: Moves 1 square in any direction. Cannot move into check.\n\n**Chess Victory Condition**: Capture the opponent's King (if opponent is Chess) OR capture all opponent pieces (if opponent is Checkers)\n\n**Chess Capture**: Move onto opponent's square to capture\n\n### Checkers Army Rules\n- **Regular Checker**: Moves diagonally forward 1 square to empty space. Captures by jumping diagonally over adjacent opponent piece to empty square beyond.\n- **King Checker**: After reaching opposite end, becomes King. Moves and captures diagonally in any direction (forward or backward).\n- **Multi-Jump**: If after a jump, another capture is available, the same piece MUST continue jumping in the same turn.\n\n**Checkers Victory Condition**: Capture all opponent pieces (works against both Chess and Checkers)\n\n**Checkers Capture**: Jump over opponent piece (piece is removed after jump completes)\n\n### Turn Structure\n1. Player selects one of their pieces (valid pieces highlight)\n2. Valid moves/captures for selected piece highlight on board\n3. Player selects destination square\n4. Piece moves, captures execute, turn ends\n5. AI takes turn using same rules for their army\n6. Repeat until victory condition met\n\n### Engagement Drivers\n- **Asymmetrical Strategy**: Players must adapt tactics based on which army they choose and face\n- **Risk vs. Reward**: Chess pieces are more versatile but losing the King ends the game; Checkers pieces are simpler but must eliminate all opponents\n- **Difficulty Progression**: AI difficulty provides replayability and skill progression\n- **Quick Sessions**: Games are relatively fast-paced for a strategy game\n\n## Starting Scope\n\nThe first iteration will implement:\n\n### Must Have (V1)\n- Complete 8x8 board with alternating light/dark squares\n- Army selection screen (Chess or Checkers)\n- Difficulty selection screen (Easy, Medium, Hard)\n- Full Chess piece movement and capture rules for all 6 piece types\n- Full Checkers movement, capture, multi-jump, and king promotion rules\n- Turn-based gameplay with move validation\n- Visual feedback: piece selection, valid move highlighting, capture animations\n- AI opponent with three difficulty levels:\n  - **Easy**: Random valid moves\n  - **Medium**: Evaluates captures and basic threats\n  - **Hard**: Minimax algorithm with position evaluation\n- Victory detection and end game screen with replay option\n- Move history display (last 5 moves)\n\n### Future Enhancements (Post-V1)\n- Special Chess moves (castling, en passant)\n- Undo move functionality\n- Save/load game state\n- Two-player local mode\n- Advanced AI with opening book\n- Animated piece movement\n- Sound effects for moves and captures\n- Background music\n- Statistics tracking (wins, losses, average game length)\n\n## Game Perspective\n\n**Fixed-screen, top-down view** - The entire 8x8 board is visible at all times with no scrolling. The board is centered in the viewport with UI elements (turn indicator, captured pieces, move history) positioned around it.\n\n## Game World and Level Design\n\n### Board Layout\n- Standard 8x8 checkerboard with alternating light and dark squares\n- Board occupies the central area of the screen (approximately 640x640 pixels)\n- Squares are 80x80 pixels each\n- Light squares: #F0D9B5 (cream)\n- Dark squares: #B58863 (brown)\n\n### Initial Piece Placement\n\n**Chess Army Setup (when player chooses Chess, placed at bottom):**\n- Row 1 (bottom): Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook\n- Row 2: 8 Pawns\n\n**Checkers Army Setup (when player chooses Checkers, placed at bottom):**\n- Rows 1-3: 12 Checkers pieces on dark squares only (standard checkers starting position)\n\n**Opponent Setup (top of board):**\n- Mirror placement for the army the AI is using\n- Chess pieces face downward, Checkers pieces are identical from all angles\n\n### UI Layout (Mobile-First, 720x1280)\n\n**Top Section (0-200px from top):**\n- Opponent army indicator (Chess/Checkers icon)\n- Captured player pieces display (small icons)\n- AI difficulty badge\n\n**Middle Section (200-840px from top):**\n- 8x8 game board (640x640px, centered horizontally)\n- 40px margin on each side\n\n**Bottom Section (840-1280px from top):**\n- Player army indicator (Chess/Checkers icon)\n- Captured opponent pieces display\n- Turn indicator (\"Your Turn\" / \"AI Thinking...\")\n- Move history (last 5 moves, scrollable)\n- Menu button (pause/restart)\n\n### Pre-Game Screens\n\n**Army Selection Screen:**\n- Two large buttons: \"Play as Chess\" and \"Play as Checkers\"\n- Each button shows representative piece icons\n- Centered vertically\n\n**Difficulty Selection Screen:**\n- Three buttons: \"Easy\", \"Medium\", \"Hard\"\n- Brief description of each difficulty\n- Back button to return to army selection\n\n**Victory Screen:**\n- Victory/defeat message\n- Game statistics (moves taken, pieces captured)\n- \"Play Again\" button\n- \"Change Army\" button\n\n## Edit Mode Design\n\nEdit mode allows players to customize the visual appearance and game settings.\n\n### Editable Properties\n\n**Visual Customization:**\n- **Board Colors**: Light square color, dark square color\n- **Piece Colors**: Chess pieces color (white/black), Checkers pieces color (red/black)\n- **Highlight Colors**: Selected piece highlight, valid move highlight, capture highlight\n\n**Gameplay Settings:**\n- **Starting Difficulty**: Default AI difficulty (Easy/Medium/Hard)\n- **Enable/Disable Multi-Jump**: Toggle whether Checkers must continue jumping\n- **Pawn Promotion**: Toggle auto-promotion to Queen vs. choice of piece\n\n**UI Customization:**\n- **Show Move History**: Toggle move history display\n- **Show Captured Pieces**: Toggle captured pieces display\n- **Board Orientation**: Toggle whether player's pieces start at bottom or top\n\n### Edit Mode Interface\n\nEdit mode presents a clean settings panel with:\n- Color pickers for board and piece colors\n- Toggle switches for gameplay options\n- Dropdown menus for default settings\n- \"Reset to Default\" button\n- \"Save Changes\" button\n\n### Constraints\n- Board must remain 8x8 (cannot change size)\n- Piece movement rules cannot be modified (core game integrity)\n- Colors must have sufficient contrast for accessibility\n- At least one difficulty level must be enabled\n\n## Control Design\n\n### Desktop Controls (Keyboard + Mouse)\n\n**Mouse:**\n- **Click on piece**: Select piece (if it's player's turn and piece has valid moves)\n- **Click on highlighted square**: Move selected piece to that square\n- **Click on empty area**: Deselect current piece\n\n**Keyboard:**\n- **Arrow Keys**: Navigate between pieces (cycles through player's pieces with valid moves)\n- **Enter/Space**: Select highlighted piece or confirm move\n- **Escape**: Deselect piece / Open menu\n- **R**: Restart game (with confirmation)\n- **U**: Undo last move (if implemented in future)\n\n### Mobile Controls (Touch)\n\n**Touch Gestures:**\n- **Tap on piece**: Select piece (if it's player's turn and piece has valid moves)\n- **Tap on highlighted square**: Move selected piece to that square\n- **Tap on empty area**: Deselect current piece\n- **Tap menu button**: Open pause/restart menu\n\n### Visual Feedback\n- **Selected piece**: Glowing border or highlight effect\n- **Valid moves**: Semi-transparent circles on valid destination squares\n- **Valid captures**: Red-tinted circles on squares with capturable pieces\n- **Hover (desktop)**: Subtle highlight when hovering over interactive elements\n- **AI thinking**: Animated indicator during AI turn\n\n### Input Handling\n- Disable all piece interaction during AI turn\n- Prevent rapid clicking/tapping from causing double moves\n- Clear selection when turn ends\n- Validate all moves before executing\n\n## Art Style and Visual Theme\n\n### Overall Style\n**Modern Minimalist with Classic Board Game Aesthetics**\n\nThe game combines clean, modern UI design with traditional board game visual language. The art style is polished and professional, using iconic logo-style representations for Chess pieces and classic round checkers.\n\n### Visual Theme\n- **Mood**: Strategic, focused, competitive yet approachable\n- **Color Palette**: \n  - Board: Warm cream (#F0D9B5) and rich brown (#B58863)\n  - Chess pieces: Classic white (#FFFFFF) and black (#2C2C2C) with subtle gradients\n  - Checkers pieces: Traditional red (#D32F2F) and black (#2C2C2C)\n  - Highlights: Gold (#FFD700) for selection, green (#4CAF50) for valid moves, red (#F44336) for captures\n  - UI: Dark navy (#1A237E) with white text for contrast\n\n### Asset Approach\n\n**Generated Assets:**\n- All Chess pieces (6 types \u00d7 2 colors = 12 assets)\n- Checkers pieces (regular and king \u00d7 2 colors = 4 assets)\n- UI icons (menu, restart, difficulty badges)\n\n**Code-Rendered Elements:**\n- Board squares (CSS with precise colors)\n- Highlight overlays (CSS with transparency)\n- Move history text\n- Buttons and UI panels\n\n### Chess Pieces Style\n- **Logo-like, iconic representations** - Each piece should be instantly recognizable by its traditional symbol\n- **Clean silhouettes** with subtle depth/shading\n- **Consistent size** - All pieces fit comfortably within 60x60px (leaving margin in 80x80 square)\n- **Viewing angle**: Straight-on, 2D iconic view (like traditional chess notation symbols)\n- **Detail level**: Medium - recognizable shapes with some detail but not photorealistic\n\n### Checkers Pieces Style\n- **Classic round discs** with subtle 3D appearance (slight gradient to show depth)\n- **Consistent size**: 50px diameter for regular, 60px for kings\n- **King indicator**: Crown symbol on top of king pieces\n- **Simple and clean** - Traditional checkers aesthetic\n\n### Consistency Requirements\n- All pieces should have consistent lighting direction (top-left)\n- All pieces should have subtle drop shadows for depth\n- White/black Chess pieces should be clearly distinguishable from red/black Checkers pieces\n- Transparent backgrounds for all piece assets", "persistent_storage_config": null, "game_metadata": {"game_id": "01KS7RAPSRQXGHA18GDBPTF418", "title": "Chess Vs Checkers", "description": "Challenge the AI in an epic battle where Chess meets Checkers! Choose your army and outsmart your opponent with unique rules.", "thumbnail_url": "https://d2oir5eh8rty2e.cloudfront.net/assets/images/thumbnail_8ce2aff6-d020-4d7f-b15d-604daef22a56.webp", "created_at": 1779450746.0, "updated_at": 1779508690042.9873, "art_style": null}}