/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

/**** 
* Classes
****/ 
var Character = Container.expand(function () {
	var self = Container.call(this);
	// Create base circle under character
	var base = self.attachAsset('characterBase', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0.7
	});
	// Character type (boy or girl)
	self.type = "";
	// Character containers
	self.bodyContainer = new Container();
	self.headContainer = new Container();
	self.armsContainer = new Container();
	self.legsContainer = new Container();
	self.facialContainer = new Container();
	// Add all containers to self
	self.addChild(self.legsContainer);
	self.addChild(self.bodyContainer);
	self.addChild(self.armsContainer);
	self.addChild(self.headContainer);
	self.addChild(self.facialContainer);
	// Animation properties
	self.bobTimer = 0;
	self.blinkTimer = 0;
	self.isBlinking = false;
	self.armSwingDirection = 1;
	// Initialize with type
	self.initialize = function (characterType) {
		self.type = characterType;
		// Reset containers
		self.bodyContainer.removeChildren();
		self.headContainer.removeChildren();
		self.armsContainer.removeChildren();
		self.legsContainer.removeChildren();
		self.facialContainer.removeChildren();
		// Build character based on type
		if (characterType === "boy") {
			// Body
			var body = self.bodyContainer.attachAsset('boyBody', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: 30
			});
			// Head
			var head = self.headContainer.attachAsset('boyHead', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -80
			});
			// Hair for boy character - simple short hair that sticks to the head
			var boyHairTop = self.headContainer.attachAsset('boyHair', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -120,
				width: 130,
				height: 40,
				scaleX: 1.1
			});
			// Left Eye
			var leftEye = self.facialContainer.attachAsset('boyEyes', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: -25,
				y: -90
			});
			// Right Eye
			var rightEye = self.facialContainer.attachAsset('boyEyes', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: 25,
				y: -90
			});
			// Mouth
			var mouth = self.facialContainer.attachAsset('boyMouth', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -60
			});
			// Left Arm
			var leftArm = self.armsContainer.attachAsset('boyArm', {
				anchorX: 0.5,
				anchorY: 0,
				x: -65,
				y: -20,
				rotation: 0.2
			});
			// Right Arm
			var rightArm = self.armsContainer.attachAsset('boyArm', {
				anchorX: 0.5,
				anchorY: 0,
				x: 65,
				y: -20,
				rotation: -0.2
			});
			// Left Leg
			var leftLeg = self.legsContainer.attachAsset('boyLeg', {
				anchorX: 0.5,
				anchorY: 0,
				x: -30,
				y: 100
			});
			// Right Leg
			var rightLeg = self.legsContainer.attachAsset('boyLeg', {
				anchorX: 0.5,
				anchorY: 0,
				x: 30,
				y: 100
			});
		} else {
			// Body
			var body = self.bodyContainer.attachAsset('girlBody', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: 30
			});
			// Head
			var head = self.headContainer.attachAsset('girlHead', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -80
			});
			// Hair - main part
			var hair = self.headContainer.attachAsset('girlHair', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -100
			});
			// Add additional hair sections for a more styled look
			var hairBangs = self.headContainer.attachAsset('girlHair', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -120,
				width: 130,
				height: 50,
				scaleX: 1.1,
				scaleY: 0.6
			});
			// Side hair strands
			var leftHairStrand = self.headContainer.attachAsset('girlHair', {
				anchorX: 0.5,
				anchorY: 0,
				x: -60,
				y: -100,
				width: 40,
				height: 120,
				scaleY: 1.2
			});
			var rightHairStrand = self.headContainer.attachAsset('girlHair', {
				anchorX: 0.5,
				anchorY: 0,
				x: 60,
				y: -100,
				width: 40,
				height: 120,
				scaleY: 1.2
			});
			// Left Eye
			var leftEye = self.facialContainer.attachAsset('girlEyes', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: -25,
				y: -90
			});
			// Right Eye
			var rightEye = self.facialContainer.attachAsset('girlEyes', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: 25,
				y: -90
			});
			// Mouth
			var mouth = self.facialContainer.attachAsset('girlMouth', {
				anchorX: 0.5,
				anchorY: 0.5,
				y: -60
			});
			// Left Arm
			var leftArm = self.armsContainer.attachAsset('girlArm', {
				anchorX: 0.5,
				anchorY: 0,
				x: -65,
				y: -20,
				rotation: 0.2
			});
			// Right Arm
			var rightArm = self.armsContainer.attachAsset('girlArm', {
				anchorX: 0.5,
				anchorY: 0,
				x: 65,
				y: -20,
				rotation: -0.2
			});
			// Left Leg
			var leftLeg = self.legsContainer.attachAsset('girlLeg', {
				anchorX: 0.5,
				anchorY: 0,
				x: -30,
				y: 100
			});
			// Right Leg
			var rightLeg = self.legsContainer.attachAsset('girlLeg', {
				anchorX: 0.5,
				anchorY: 0,
				x: 30,
				y: 100
			});
		}
		// Start animations
		LK.setInterval(function () {
			self.blink();
		}, 3000);
		// Start with scale 0
		self.scaleX = 0;
		self.scaleY = 0;
	};
	// Blink animation
	self.blink = function () {
		if (self.isBlinking) {
			return;
		}
		var leftEye = self.facialContainer.children[0];
		var rightEye = self.facialContainer.children[1];
		self.isBlinking = true;
		// Close eyes
		tween(leftEye, {
			scaleY: 0.1
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		tween(rightEye, {
			scaleY: 0.1
		}, {
			duration: 100,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				// Open eyes
				tween(leftEye, {
					scaleY: 1
				}, {
					duration: 100,
					easing: tween.easeOut
				});
				tween(rightEye, {
					scaleY: 1
				}, {
					duration: 100,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						self.isBlinking = false;
					}
				});
			}
		});
	};
	// Continuous update for idle animations
	self.update = function () {
		// Bob up and down
		self.bobTimer += 0.05;
		var bobOffset = Math.sin(self.bobTimer) * 5;
		self.headContainer.y = bobOffset * 0.5;
		self.bodyContainer.y = bobOffset * 0.3;
		// Swing arms slightly
		if (self.armsContainer.children.length >= 2) {
			var leftArm = self.armsContainer.children[0];
			var rightArm = self.armsContainer.children[1];
			leftArm.rotation = 0.2 + Math.sin(self.bobTimer) * 0.1;
			rightArm.rotation = -0.2 - Math.sin(self.bobTimer) * 0.1;
		}
	};
	// Animate character appearance
	self.appear = function () {
		tween(self, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 500,
			easing: tween.elasticOut
		});
		// Add a little jump after appearing
		LK.setTimeout(function () {
			tween(self, {
				y: self.y - 30
			}, {
				duration: 300,
				easing: tween.easeOut,
				onFinish: function onFinish() {
					tween(self, {
						y: self.y + 30
					}, {
						duration: 400,
						easing: tween.bounceOut
					});
				}
			});
		}, 600);
	};
	// Handle selection
	self.down = function (x, y, obj) {
		// Shrink when pressed
		tween(self, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		// Make eyes bigger on press
		if (self.facialContainer.children.length >= 2) {
			var leftEye = self.facialContainer.children[0];
			var rightEye = self.facialContainer.children[1];
			var mouth = self.facialContainer.children[2];
			tween(leftEye, {
				scaleX: 1.3,
				scaleY: 1.3
			}, {
				duration: 100,
				easing: tween.easeOut
			});
			tween(rightEye, {
				scaleX: 1.3,
				scaleY: 1.3
			}, {
				duration: 100,
				easing: tween.easeOut
			});
			// Make the character smile when clicked
			if (mouth) {
				tween(mouth, {
					scaleX: 1.5,
					scaleY: 1.7,
					y: -55
				}, {
					duration: 200,
					easing: tween.elasticOut
				});
			}
		}
	};
	self.up = function (x, y, obj) {
		// Play sound
		LK.getSound('buttonClick').play();
		// Return eyes to normal
		if (self.facialContainer.children.length >= 2) {
			var leftEye = self.facialContainer.children[0];
			var rightEye = self.facialContainer.children[1];
			var mouth = self.facialContainer.children[2];
			tween(leftEye, {
				scaleX: 1.0,
				scaleY: 1.0
			}, {
				duration: 100,
				easing: tween.easeOut
			});
			tween(rightEye, {
				scaleX: 1.0,
				scaleY: 1.0
			}, {
				duration: 100,
				easing: tween.easeOut
			});
			// Return mouth to normal
			if (mouth) {
				tween(mouth, {
					scaleX: 1.0,
					scaleY: 1.0,
					y: -60
				}, {
					duration: 300,
					easing: tween.easeOut
				});
			}
		}
		// Show "Hello!" text when clicked
		var helloText = new Text2("Hello!", {
			size: 80,
			fill: 0xFF4500
		});
		helloText.anchor.set(0.5, 0.5);
		helloText.x = 0;
		helloText.y = -150;
		helloText.alpha = 0;
		self.addChild(helloText);
		// Animate text appearance and fade away
		tween(helloText, {
			alpha: 1,
			y: helloText.y - 50
		}, {
			duration: 300,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				// After appearing, fade out
				LK.setTimeout(function () {
					tween(helloText, {
						alpha: 0,
						y: helloText.y - 30
					}, {
						duration: 500,
						easing: tween.easeIn,
						onFinish: function onFinish() {
							self.removeChild(helloText);
						}
					});
				}, 1000);
			}
		});
		// Expand then return to normal size
		tween(self, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 200,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				// Celebrate selection with a spin
				tween(self.headContainer, {
					rotation: Math.PI * 2
				}, {
					duration: 500,
					easing: tween.elasticOut
				});
				tween(self, {
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 200,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						// Character selected!
						characterSelected(self.type);
					}
				});
			}
		});
	};
	return self;
});
var PlayButton = Container.expand(function () {
	var self = Container.call(this);
	// Create shadow first so it appears behind the button
	var shadow = self.attachAsset('buttonShadow', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0.5,
		x: 10,
		y: 10
	});
	// Create base circle
	var buttonBase = self.attachAsset('playButtonBase', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Create play triangle and rotate it to point right
	var playIcon = self.attachAsset('playTriangle', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 15,
		// Offset slightly to the right for better visual centering
		rotation: Math.PI / 4 // 45 degrees in radians
	});
	// Variables to track button state
	self.isPressed = false;
	self.isAnimating = false;
	// Set interactive state functions
	self.down = function (x, y, obj) {
		if (self.isAnimating) {
			return;
		}
		self.isPressed = true;
		// Shrink button when pressed
		tween(buttonBase, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		tween(playIcon, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		// Move shadow closer
		tween(shadow, {
			x: 5,
			y: 5
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	self.up = function (x, y, obj) {
		if (!self.isPressed || self.isAnimating) {
			return;
		}
		self.isPressed = false;
		self.isAnimating = true;
		// Play sound
		LK.getSound('buttonClick').play();
		// Return to normal size with a bounce
		tween(buttonBase, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 200,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				tween(buttonBase, {
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 200,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						self.isAnimating = false;
						// Trigger the "play" action
						self.triggerPlay();
					}
				});
			}
		});
		// Return play icon to normal with a bounce
		tween(playIcon, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 200,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				tween(playIcon, {
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 200,
					easing: tween.easeOut
				});
			}
		});
		// Return shadow to normal position
		tween(shadow, {
			x: 10,
			y: 10
		}, {
			duration: 200,
			easing: tween.easeOut
		});
	};
	// Function called when button is clicked
	self.triggerPlay = function () {
		// Spin the button when clicked
		self.isAnimating = true;
		// Celebrate by spinning the button
		tween(self, {
			rotation: Math.PI * 2
		}, {
			duration: 1000,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				self.rotation = 0;
				self.isAnimating = false;
				// Show character selection
				showCharacterSelection();
			}
		});
	};
	// Idle animation to make the button more playful
	self.startIdleAnimation = function () {
		function pulseButton() {
			if (self.isPressed || self.isAnimating) {
				LK.setTimeout(pulseButton, 2000);
				return;
			}
			tween(buttonBase, {
				scaleX: 1.05,
				scaleY: 1.05
			}, {
				duration: 1000,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					tween(buttonBase, {
						scaleX: 1.0,
						scaleY: 1.0
					}, {
						duration: 1000,
						easing: tween.easeInOut,
						onFinish: function onFinish() {
							LK.setTimeout(pulseButton, 2000);
						}
					});
				}
			});
		}
		// Start the idle animation
		LK.setTimeout(pulseButton, 2000);
	};
	// Initial scale effect when the button appears
	buttonBase.scaleX = 0;
	buttonBase.scaleY = 0;
	playIcon.scaleX = 0;
	playIcon.scaleY = 0;
	shadow.scaleX = 0;
	shadow.scaleY = 0;
	self.appear = function () {
		tween(shadow, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 500,
			easing: tween.elasticOut
		});
		tween(buttonBase, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 700,
			easing: tween.elasticOut
		});
		tween(playIcon, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 700,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				self.startIdleAnimation();
			}
		});
	};
	return self;
});
var StartGameButton = Container.expand(function () {
	var self = Container.call(this);
	// Create shadow for button
	var shadow = self.attachAsset('buttonShadow', {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0.5,
		x: 10,
		y: 10
	});
	// Create button base
	var buttonBase = self.attachAsset('playButtonBase', {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: 0x4CAF50 // Green color for start button
	});
	// Add text to button
	var buttonText = new Text2("Start Game", {
		size: 80,
		fill: '#FFFFFF'
	});
	buttonText.anchor.set(0.5, 0.5);
	self.addChild(buttonText);
	// Variables to track button state
	self.isPressed = false;
	self.isAnimating = false;
	// Set interactive state functions
	self.down = function (x, y, obj) {
		if (self.isAnimating) {
			return;
		}
		self.isPressed = true;
		// Shrink button when pressed
		tween(self, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut
		});
		// Move shadow closer
		tween(shadow, {
			x: 5,
			y: 5
		}, {
			duration: 100,
			easing: tween.easeOut
		});
	};
	self.up = function (x, y, obj) {
		if (!self.isPressed || self.isAnimating) {
			return;
		}
		self.isPressed = false;
		self.isAnimating = true;
		// Play sound
		LK.getSound('buttonClick').play();
		// Return to normal size with a bounce
		tween(self, {
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 200,
			easing: tween.elasticOut,
			onFinish: function onFinish() {
				tween(self, {
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 200,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						self.isAnimating = false;
						// Trigger the start game action
						startGame();
					}
				});
			}
		});
		// Return shadow to normal position
		tween(shadow, {
			x: 10,
			y: 10
		}, {
			duration: 200,
			easing: tween.easeOut
		});
	};
	// Initial animation when button appears
	self.appear = function () {
		self.scaleX = 0;
		self.scaleY = 0;
		tween(self, {
			scaleX: 1,
			scaleY: 1
		}, {
			duration: 700,
			easing: tween.elasticOut
		});
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x00FF00
});

/**** 
* Game Code
****/ 
// Set the game's background color to a softer green
game.setBackgroundColor(0x66CC99);
// Game state variables
var showingCharacterSelection = false;
var selectedCharacter = null;
var boyCharacter = null;
var girlCharacter = null;
// Update function for character animations
game.update = function () {
	// Update character animations if they exist
	if (boyCharacter) {
		boyCharacter.update();
	}
	if (girlCharacter) {
		girlCharacter.update();
	}
};
// Create the play button and center it on screen
var playButton = new PlayButton();
game.addChild(playButton);
// Position the button in the center of the screen
playButton.x = 2048 / 2;
playButton.y = 2732 / 2;
// Make the button appear with animation
playButton.appear();
// Function to show character selection screen
function showCharacterSelection() {
	if (showingCharacterSelection) {
		return;
	}
	showingCharacterSelection = true;
	// Make play button disappear
	tween(playButton, {
		alpha: 0,
		scaleX: 0,
		scaleY: 0
	}, {
		duration: 500,
		easing: tween.easeOut,
		onFinish: function onFinish() {
			// Remove play button from display
			game.removeChild(playButton);
			// Create character options
			boyCharacter = new Character();
			boyCharacter.initialize("boy");
			game.addChild(boyCharacter);
			boyCharacter.x = 2048 / 3;
			boyCharacter.y = 2732 / 2;
			girlCharacter = new Character();
			girlCharacter.initialize("girl");
			game.addChild(girlCharacter);
			girlCharacter.x = 2048 * 2 / 3;
			girlCharacter.y = 2732 / 2;
			// Make characters appear with animation
			boyCharacter.appear();
			girlCharacter.appear();
		}
	});
}
// Function called when a character is selected
function characterSelected(characterType) {
	selectedCharacter = characterType;
	console.log("Selected character: " + characterType);
	// Make the non-selected character sad and disappear
	var nonSelectedCharacter = characterType === "boy" ? girlCharacter : boyCharacter;
	var selectedCharacterObj = characterType === "boy" ? boyCharacter : girlCharacter;
	// Make selected character happy
	if (selectedCharacterObj.facialContainer.children.length >= 3) {
		var mouth = selectedCharacterObj.facialContainer.children[2];
		// Make mouth bigger and smile
		tween(mouth, {
			scaleX: 1.5,
			scaleY: 1.5,
			y: -55
		}, {
			duration: 300,
			easing: tween.elasticOut
		});
	}
	// Make non-selected character sad
	if (nonSelectedCharacter.facialContainer.children.length >= 3) {
		var sadMouth = nonSelectedCharacter.facialContainer.children[2];
		// Make mouth smaller and frown
		tween(sadMouth, {
			scaleX: 0.8,
			scaleY: -1.2,
			y: -50
		}, {
			duration: 300,
			easing: tween.easeOut
		});
	}
	// Fade out and shrink non-selected character
	tween(nonSelectedCharacter, {
		alpha: 0,
		scaleX: 0,
		scaleY: 0
	}, {
		duration: 500,
		easing: tween.easeOut,
		onFinish: function onFinish() {
			game.removeChild(nonSelectedCharacter);
		}
	});
	// Jump and move the selected character to center
	LK.setTimeout(function () {
		// Jump up first
		tween(selectedCharacterObj, {
			y: selectedCharacterObj.y - 100
		}, {
			duration: 400,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				// Move to center while in air
				tween(selectedCharacterObj, {
					x: 2048 / 2
				}, {
					duration: 300,
					easing: tween.linear,
					onFinish: function onFinish() {
						// Land with bounce
						tween(selectedCharacterObj, {
							y: 2732 / 2,
							scaleY: 0.7,
							scaleX: 1.3
						}, {
							duration: 300,
							easing: tween.easeIn,
							onFinish: function onFinish() {
								// Bounce back to normal
								tween(selectedCharacterObj, {
									scaleY: 1.1,
									scaleX: 0.9
								}, {
									duration: 150,
									easing: tween.easeOut,
									onFinish: function onFinish() {
										// Return to normal scale
										tween(selectedCharacterObj, {
											scaleY: 1.0,
											scaleX: 1.0
										}, {
											duration: 150,
											easing: tween.easeOut,
											onFinish: function onFinish() {
												// Celebrate with a spin
												tween(selectedCharacterObj.headContainer, {
													rotation: Math.PI * 2
												}, {
													duration: 800,
													easing: tween.elasticOut,
													onFinish: function onFinish() {
														// Reset rotation
														selectedCharacterObj.headContainer.rotation = 0;
														// Add start game button
														var startGameBtn = new StartGameButton();
														game.addChild(startGameBtn);
														startGameBtn.x = 2048 / 2;
														startGameBtn.y = 2732 / 2 + 350; // Position below character
														startGameBtn.appear();
													}
												});
											}
										});
									}
								});
							}
						});
					}
				});
			}
		});
	}, 300);
}
// Function to start the game
function startGame() {
	console.log("Starting game with character: " + selectedCharacter);
	// Here you would add code to start the actual game
	// For now, we'll just show a message
	var startMessage = new Text2("Game Started!", {
		size: 120,
		fill: 0xFFFFFF
	});
	startMessage.anchor.set(0.5, 0.5);
	startMessage.x = 2048 / 2;
	startMessage.y = 2732 / 2 - 300;
	game.addChild(startMessage);
	// Fade in then out
	startMessage.alpha = 0;
	tween(startMessage, {
		alpha: 1
	}, {
		duration: 500,
		easing: tween.easeOut,
		onFinish: function onFinish() {
			LK.setTimeout(function () {
				tween(startMessage, {
					alpha: 0
				}, {
					duration: 500,
					easing: tween.easeIn,
					onFinish: function onFinish() {
						game.removeChild(startMessage);
					}
				});
			}, 2000);
		}
	});
}
// Rainbow effect for the background
var rainbowColors = [0x66CC99, 0x66CCFF, 0xCC99FF, 0xFF99CC, 0xFFCC66, 0x99FF99];
var currentColorIndex = 0;
// A function to cycle through background colors
function cycleBackgroundColor() {
	currentColorIndex = (currentColorIndex + 1) % rainbowColors.length;
	// Animate the color change
	var targetColor = rainbowColors[currentColorIndex];
	tween(game, {
		backgroundColor: targetColor
	}, {
		duration: 2000,
		easing: tween.easeInOut,
		onFinish: function onFinish() {
			// Schedule the next color change
			LK.setTimeout(cycleBackgroundColor, 4000);
		}
	});
}
// Start the background color animation after a delay
LK.setTimeout(cycleBackgroundColor, 4000);

===================================================================
--- original.js
+++ change.js
@@ -638,8 +638,110 @@
 		});
 	};
 	return self;
 });
+var StartGameButton = Container.expand(function () {
+	var self = Container.call(this);
+	// Create shadow for button
+	var shadow = self.attachAsset('buttonShadow', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		alpha: 0.5,
+		x: 10,
+		y: 10
+	});
+	// Create button base
+	var buttonBase = self.attachAsset('playButtonBase', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		tint: 0x4CAF50 // Green color for start button
+	});
+	// Add text to button
+	var buttonText = new Text2("Start Game", {
+		size: 80,
+		fill: '#FFFFFF'
+	});
+	buttonText.anchor.set(0.5, 0.5);
+	self.addChild(buttonText);
+	// Variables to track button state
+	self.isPressed = false;
+	self.isAnimating = false;
+	// Set interactive state functions
+	self.down = function (x, y, obj) {
+		if (self.isAnimating) {
+			return;
+		}
+		self.isPressed = true;
+		// Shrink button when pressed
+		tween(self, {
+			scaleX: 0.9,
+			scaleY: 0.9
+		}, {
+			duration: 100,
+			easing: tween.easeOut
+		});
+		// Move shadow closer
+		tween(shadow, {
+			x: 5,
+			y: 5
+		}, {
+			duration: 100,
+			easing: tween.easeOut
+		});
+	};
+	self.up = function (x, y, obj) {
+		if (!self.isPressed || self.isAnimating) {
+			return;
+		}
+		self.isPressed = false;
+		self.isAnimating = true;
+		// Play sound
+		LK.getSound('buttonClick').play();
+		// Return to normal size with a bounce
+		tween(self, {
+			scaleX: 1.1,
+			scaleY: 1.1
+		}, {
+			duration: 200,
+			easing: tween.elasticOut,
+			onFinish: function onFinish() {
+				tween(self, {
+					scaleX: 1.0,
+					scaleY: 1.0
+				}, {
+					duration: 200,
+					easing: tween.easeOut,
+					onFinish: function onFinish() {
+						self.isAnimating = false;
+						// Trigger the start game action
+						startGame();
+					}
+				});
+			}
+		});
+		// Return shadow to normal position
+		tween(shadow, {
+			x: 10,
+			y: 10
+		}, {
+			duration: 200,
+			easing: tween.easeOut
+		});
+	};
+	// Initial animation when button appears
+	self.appear = function () {
+		self.scaleX = 0;
+		self.scaleY = 0;
+		tween(self, {
+			scaleX: 1,
+			scaleY: 1
+		}, {
+			duration: 700,
+			easing: tween.elasticOut
+		});
+	};
+	return self;
+});
 
 /**** 
 * Initialize Game
 ****/ 
@@ -803,10 +905,14 @@
 													easing: tween.elasticOut,
 													onFinish: function onFinish() {
 														// Reset rotation
 														selectedCharacterObj.headContainer.rotation = 0;
-														// Game could start here with the selected character
-														console.log("Game ready to start with character: " + characterType);
+														// Add start game button
+														var startGameBtn = new StartGameButton();
+														game.addChild(startGameBtn);
+														startGameBtn.x = 2048 / 2;
+														startGameBtn.y = 2732 / 2 + 350; // Position below character
+														startGameBtn.appear();
 													}
 												});
 											}
 										});
@@ -819,8 +925,43 @@
 			}
 		});
 	}, 300);
 }
+// Function to start the game
+function startGame() {
+	console.log("Starting game with character: " + selectedCharacter);
+	// Here you would add code to start the actual game
+	// For now, we'll just show a message
+	var startMessage = new Text2("Game Started!", {
+		size: 120,
+		fill: 0xFFFFFF
+	});
+	startMessage.anchor.set(0.5, 0.5);
+	startMessage.x = 2048 / 2;
+	startMessage.y = 2732 / 2 - 300;
+	game.addChild(startMessage);
+	// Fade in then out
+	startMessage.alpha = 0;
+	tween(startMessage, {
+		alpha: 1
+	}, {
+		duration: 500,
+		easing: tween.easeOut,
+		onFinish: function onFinish() {
+			LK.setTimeout(function () {
+				tween(startMessage, {
+					alpha: 0
+				}, {
+					duration: 500,
+					easing: tween.easeIn,
+					onFinish: function onFinish() {
+						game.removeChild(startMessage);
+					}
+				});
+			}, 2000);
+		}
+	});
+}
 // Rainbow effect for the background
 var rainbowColors = [0x66CC99, 0x66CCFF, 0xCC99FF, 0xFF99CC, 0xFFCC66, 0x99FF99];
 var currentColorIndex = 0;
 // A function to cycle through background colors