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

/**** 
* Classes
****/ 
var AnimatedBackground = Container.expand(function () {
	var self = Container.call(this);
	// Create multiple gradient layers for depth
	var layer1 = self.attachAsset('backgroundGradient1', {
		anchorX: 0,
		anchorY: 0,
		alpha: 0.8
	});
	var layer2 = self.attachAsset('backgroundGradient2', {
		anchorX: 0,
		anchorY: 0,
		alpha: 0.6
	});
	var layer3 = self.attachAsset('backgroundGradient3', {
		anchorX: 0,
		anchorY: 0,
		alpha: 0.4
	});
	// Start animations
	self.startAnimations = function () {
		// Animate layer 1 with slow color transitions
		tween(layer1, {
			tint: 0x2d1b69
		}, {
			duration: 4000,
			easing: tween.easeInOut,
			onFinish: function onFinish() {
				tween(layer1, {
					tint: 0x1a1a2e
				}, {
					duration: 4000,
					easing: tween.easeInOut,
					onFinish: function onFinish() {
						self.startAnimations();
					}
				});
			}
		});
		// Animate layer 2 with different timing
		tween(layer2, {
			tint: 0x0f4c75
		}, {
			duration: 6000,
			easing: tween.easeInOut,
			onFinish: function onFinish() {
				tween(layer2, {
					tint: 0x16213e
				}, {
					duration: 6000,
					easing: tween.easeInOut
				});
			}
		});
		// Animate layer 3 with subtle movement
		tween(layer3, {
			alpha: 0.7,
			tint: 0x3282b8
		}, {
			duration: 8000,
			easing: tween.easeInOut,
			onFinish: function onFinish() {
				tween(layer3, {
					alpha: 0.4,
					tint: 0x0f3460
				}, {
					duration: 8000,
					easing: tween.easeInOut
				});
			}
		});
	};
	return self;
});
var RedButton = Container.expand(function () {
	var self = Container.call(this);
	var buttonGraphics = self.attachAsset('redButton', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.originalScale = 1.0;
	self.isAnimating = false;
	self.animateClick = function () {
		if (self.isAnimating) return;
		self.isAnimating = true;
		// Scale down animation
		tween(buttonGraphics, {
			scaleX: 0.9,
			scaleY: 0.9
		}, {
			duration: 100,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				// Scale back up
				tween(buttonGraphics, {
					scaleX: self.originalScale,
					scaleY: self.originalScale
				}, {
					duration: 150,
					easing: tween.bounceOut,
					onFinish: function onFinish() {
						self.isAnimating = false;
					}
				});
			}
		});
		// Color flash animation
		tween(buttonGraphics, {
			tint: 0xffffff
		}, {
			duration: 100,
			onFinish: function onFinish() {
				tween(buttonGraphics, {
					tint: 0xff0000
				}, {
					duration: 200
				});
			}
		});
	};
	self.down = function (x, y, obj) {
		self.animateClick();
		score++;
		scoreTxt.setText(score);
		LK.getSound('click').play();
		// Add screen flash effect for satisfying feedback
		LK.effects.flashScreen(0xffffff, 100);
		// Change button color based on score milestones
		if (score === 50) {
			buttonGraphics.tint = 0xff8800; // Orange
		} else if (score === 100) {
			buttonGraphics.tint = 0xff00ff; // Magenta
		} else if (score === 200) {
			buttonGraphics.tint = 0x00ff00; // Green
		} else if (score === 500) {
			buttonGraphics.tint = 0x0088ff; // Blue
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Create and add animated background
var animatedBg = game.addChild(new AnimatedBackground());
animatedBg.x = 0;
animatedBg.y = 0;
animatedBg.startAnimations();
var score = 0;
var clicksPerSecond = 0;
var lastSecondClicks = 0;
var lastSecondTime = Date.now();
// Create and position the red button
var redButton = game.addChild(new RedButton());
redButton.x = 2048 / 2;
redButton.y = 2732 / 2;
// Create score display
var scoreTxt = new Text2('Clicks: 0', {
	size: 120,
	fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Create clicks per second display
var cpsTxt = new Text2('CPS: 0', {
	size: 80,
	fill: 0xCCCCCC
});
cpsTxt.anchor.set(0.5, 0);
cpsTxt.y = 150;
LK.gui.top.addChild(cpsTxt);
// Track clicking speed
var clickTimes = [];
game.update = function () {
	var currentTime = Date.now();
	// Calculate clicks per second
	if (currentTime - lastSecondTime >= 1000) {
		clicksPerSecond = score - lastSecondClicks;
		lastSecondClicks = score;
		lastSecondTime = currentTime;
		cpsTxt.setText('CPS: ' + clicksPerSecond);
	}
	// Update score display
	scoreTxt.setText('Clicks: ' + score);
	// Add subtle idle animation to button
	if (!redButton.isAnimating && LK.ticks % 120 === 0) {
		var buttonGraphics = redButton.children[0];
		tween(buttonGraphics, {
			scaleX: 1.05,
			scaleY: 1.05
		}, {
			duration: 500,
			easing: tween.easeInOut,
			onFinish: function onFinish() {
				tween(buttonGraphics, {
					scaleX: 1.0,
					scaleY: 1.0
				}, {
					duration: 500,
					easing: tween.easeInOut
				});
			}
		});
	}
};

===================================================================
--- original.js
+++ change.js
@@ -5,8 +5,81 @@
 
 /**** 
 * Classes
 ****/ 
+var AnimatedBackground = Container.expand(function () {
+	var self = Container.call(this);
+	// Create multiple gradient layers for depth
+	var layer1 = self.attachAsset('backgroundGradient1', {
+		anchorX: 0,
+		anchorY: 0,
+		alpha: 0.8
+	});
+	var layer2 = self.attachAsset('backgroundGradient2', {
+		anchorX: 0,
+		anchorY: 0,
+		alpha: 0.6
+	});
+	var layer3 = self.attachAsset('backgroundGradient3', {
+		anchorX: 0,
+		anchorY: 0,
+		alpha: 0.4
+	});
+	// Start animations
+	self.startAnimations = function () {
+		// Animate layer 1 with slow color transitions
+		tween(layer1, {
+			tint: 0x2d1b69
+		}, {
+			duration: 4000,
+			easing: tween.easeInOut,
+			onFinish: function onFinish() {
+				tween(layer1, {
+					tint: 0x1a1a2e
+				}, {
+					duration: 4000,
+					easing: tween.easeInOut,
+					onFinish: function onFinish() {
+						self.startAnimations();
+					}
+				});
+			}
+		});
+		// Animate layer 2 with different timing
+		tween(layer2, {
+			tint: 0x0f4c75
+		}, {
+			duration: 6000,
+			easing: tween.easeInOut,
+			onFinish: function onFinish() {
+				tween(layer2, {
+					tint: 0x16213e
+				}, {
+					duration: 6000,
+					easing: tween.easeInOut
+				});
+			}
+		});
+		// Animate layer 3 with subtle movement
+		tween(layer3, {
+			alpha: 0.7,
+			tint: 0x3282b8
+		}, {
+			duration: 8000,
+			easing: tween.easeInOut,
+			onFinish: function onFinish() {
+				tween(layer3, {
+					alpha: 0.4,
+					tint: 0x0f3460
+				}, {
+					duration: 8000,
+					easing: tween.easeInOut
+				});
+			}
+		});
+	};
+	return self;
+});
 var RedButton = Container.expand(function () {
 	var self = Container.call(this);
 	var buttonGraphics = self.attachAsset('redButton', {
 		anchorX: 0.5,
@@ -82,8 +155,13 @@
 
 /**** 
 * Game Code
 ****/ 
+// Create and add animated background
+var animatedBg = game.addChild(new AnimatedBackground());
+animatedBg.x = 0;
+animatedBg.y = 0;
+animatedBg.startAnimations();
 var score = 0;
 var clicksPerSecond = 0;
 var lastSecondClicks = 0;
 var lastSecondTime = Date.now();