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

/**** 
* Classes
****/ 
var Ball = Container.expand(function () {
	var self = Container.call(this);
	var ballGraphic = self.attachAsset('ball', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speedX = 0;
	self.speedY = 0;
	self.active = true;
	self.reset = function (speedMultiplier) {
		// Set position to center of screen
		self.x = 2048 / 2;
		self.y = 2732 / 2;
		// Random horizontal speed with increased values
		self.speedX = (Math.random() * 12 - 6) * speedMultiplier;
		self.speedY = (Math.random() * 3 + 5) * speedMultiplier;
		self.active = true;
	};
	self.update = function () {
		if (!self.active) {
			return;
		}
		// Apply velocity
		self.x += self.speedX;
		self.y += self.speedY;
		// Bounce off sides
		if (self.x < 20 || self.x > 2028) {
			self.speedX = -self.speedX;
			// Keep the ball within the game boundaries
			self.x = Math.max(20, Math.min(2028, self.x));
		}
		// Check if ball hits the top of the screen
		if (self.y < 20) {
			self.speedY = -self.speedY;
			self.y = 20;
		}
	};
	return self;
});
var DiagonalStripe = Container.expand(function () {
	var self = Container.call(this);
	// Create a shape for the diagonal stripe
	var stripeGraphic = self.attachAsset('background', {
		anchorX: 0,
		anchorY: 0
	});
	// Configure the stripe appearance
	stripeGraphic.width = 3000; // Increased width to extend past screen edges
	stripeGraphic.height = 100;
	stripeGraphic.tint = 0x003087; // Navy blue color
	// Initial position and rotation
	stripeGraphic.rotation = Math.PI / 4; // 45 degrees in radians
	// Position it to extend past screen edges
	stripeGraphic.x = -500; // Start before the left edge
	// Empty update method (stripe will be still)
	self.update = function () {
		// No animation - stripe remains still
	};
	return self;
});
var Paddle = Container.expand(function () {
	var self = Container.call(this);
	var paddleGraphic = self.attachAsset('paddle', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.width = paddleGraphic.width;
	self.height = paddleGraphic.height;
	self.update = function () {
		// Keep paddle within screen bounds
		self.x = Math.max(self.width / 2, Math.min(2048 - self.width / 2, self.x));
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Game state management
var GAME_STATE = {
	MENU: 0,
	PLAYING: 1,
	SETTINGS: 2
};
var currentState = GAME_STATE.MENU;
// Default colors for game elements
var gameColors = {
	paddle: 0x3498db,
	ball: 0xf39c12,
	lava: 0xe74c3c
};
// Try to load saved colors from storage
var savedColors = storage.gameColors;
if (savedColors) {
	gameColors = savedColors;
}
// Make game accessible to other functions
var gameInstance = game;
// Game variables
var background;
var paddle;
var lava;
var balls = [];
var score = 0;
var level = 1;
var combo = 0;
var lastBallHit = 0;
var gameActive = false;
var speedMultiplier = 1.0;
var maxBalls = 1;
var ballsInPlay = 0;
var spawnInterval;
// UI elements
var scoreTxt;
var levelTxt;
var comboTxt;
// Default sound settings
var soundEnabled = true;
var musicEnabled = true;
// Load stored sound settings
var soundSetting = storage.soundEnabled;
if (soundSetting !== undefined) {
	soundEnabled = soundSetting;
}
// Initialize game elements (called when starting game)
function initializeGameElements() {
	if (!background) {
		// Create background
		background = LK.getAsset('background', {
			anchorX: 0,
			anchorY: 0,
			x: 0,
			y: 0
		});
		game.addChild(background);
		// Initialize lava
		lava = LK.getAsset('lava', {
			anchorX: 0.5,
			anchorY: 0,
			x: 2048 / 2,
			y: 2732 - 200
		});
		lava.tint = gameColors.lava;
		game.addChild(lava);
		// Initialize paddle
		paddle = new Paddle();
		paddle.x = 2048 / 2;
		paddle.y = 2732 - 250;
		paddle.getChildAt(0).tint = gameColors.paddle;
		game.addChild(paddle);
		// Diagonal stripe removed from here and placed in menu
		// Create hit counter text
		scoreTxt = new Text2('0', {
			size: 120,
			fill: 0xFFFFFF
		});
		scoreTxt.anchor.set(0.5, 0.5);
		scoreTxt.x = 1024;
		scoreTxt.y = 1366; // Center of screen (2732/2)
		game.addChild(scoreTxt);
		// Create level text
		levelTxt = new Text2('Level: 1', {
			size: 80,
			fill: 0xFFFFFF
		});
		levelTxt.anchor.set(1, 0);
		levelTxt.x = 2000;
		levelTxt.y = 50;
		LK.gui.addChild(levelTxt);
		// Create combo text
		comboTxt = new Text2('', {
			size: 60,
			fill: 0xFFFFFF
		});
		comboTxt.anchor.set(0.5, 0);
		comboTxt.x = 1024;
		comboTxt.y = 50;
		comboTxt.alpha = 0;
		LK.gui.addChild(comboTxt);
	}
	// Show game elements
	background.visible = true;
	lava.visible = true;
	paddle.visible = true;
	scoreTxt.visible = true;
	levelTxt.visible = true;
	comboTxt.visible = true;
}
// Create menu elements
var titleText;
var startButton;
var settingsButton;
var settingsPanel;
var menuBackground;
// Initialize menu
initializeMenu();
function initializeMenu() {
	// Create menu background
	menuBackground = new Container();
	var menuBg = LK.getAsset('background', {
		anchorX: 0,
		anchorY: 0,
		x: 0,
		y: 0,
		tint: 0xFFFFFF // White color for menu background
	});
	// Create a border by adding a slightly larger background behind it
	var menuBorder = LK.getAsset('background', {
		anchorX: 0,
		anchorY: 0,
		x: 0,
		y: 0,
		tint: 0xA5ACAF // Border color
	});
	menuBorder.width = 2048 + 10 * 2; // Adding 10px on each side
	menuBorder.height = 2732 + 10 * 2; // Adding 10px on each side
	menuBorder.x = -10; // Position it 10px to the left
	menuBorder.y = -10; // Position it 10px to the top
	menuBackground.addChild(menuBorder);
	menuBackground.addChild(menuBg);
	game.addChild(menuBackground);
	// Diagonal stripe removed from menu
	// Create game title
	titleText = new Text2('Lava Bounce', {
		size: 150,
		fill: 0x101820
	});
	titleText.anchor.set(0.5, 0);
	titleText.x = 1024;
	titleText.y = 200;
	game.addChild(titleText);
	// Create the "2" as a separate, larger text element
	var titleNumber = new Text2('2', {
		size: 250,
		// Bigger than the main title text
		fill: 0xFFB612 // Gold color
	});
	titleNumber.anchor.set(0.5, 0);
	titleNumber.x = 1024; // Centered horizontally
	titleNumber.y = 350; // Positioned below the main title
	game.addChild(titleNumber);
	// Animate the "2" with a continuous bounce effect
	function animateTitle2() {
		// Bounce up animation
		tween(titleNumber, {
			y: 320,
			// Move up slightly
			scaleX: 1.1,
			scaleY: 1.1
		}, {
			duration: 700,
			onFinish: function onFinish() {
				// Bounce down animation
				tween(titleNumber, {
					y: 350,
					// Back to original position
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 700,
					onFinish: animateTitle2 // Loop the animation
				});
			}
		});
	}
	// Start the animation
	animateTitle2();
	// Create start button
	startButton = new Text2('Start Game', {
		size: 100,
		fill: 0xFFB612
	});
	startButton.anchor.set(0.5, 0.5);
	startButton.x = 1024;
	startButton.y = 1200;
	startButton.interactive = true;
	game.addChild(startButton);
	// Create settings button
	settingsButton = new Text2('Settings', {
		size: 100,
		fill: 0x101820
	});
	settingsButton.anchor.set(0.5, 0.5);
	settingsButton.x = 1024;
	settingsButton.y = 1400;
	settingsButton.interactive = true;
	game.addChild(settingsButton);
	// Set up event handlers for menu
	startButton.down = function () {
		hideMenu();
		initializeGameElements();
		startGame();
	};
	settingsButton.down = function () {
		hideMenu();
		showSettings();
	};
}
function hideMenu() {
	if (menuBackground) {
		menuBackground.visible = false;
	}
	if (titleText) {
		titleText.visible = false;
	}
	if (startButton) {
		startButton.visible = false;
	}
	if (settingsButton) {
		settingsButton.visible = false;
	}
}
function showMenu() {
	currentState = GAME_STATE.MENU;
	if (menuBackground) {
		menuBackground.visible = true;
	}
	if (titleText) {
		titleText.visible = true;
	}
	if (startButton) {
		startButton.visible = true;
	}
	if (settingsButton) {
		settingsButton.visible = true;
	}
	if (settingsPanel) {
		settingsPanel.visible = false;
	}
}
function showSettings() {
	currentState = GAME_STATE.SETTINGS;
	// Create settings panel if it doesn't exist
	if (!settingsPanel) {
		settingsPanel = new Container();
		game.addChild(settingsPanel);
		// Settings panel background with border
		var panelContainer = new Container();
		panelContainer.x = 1024;
		panelContainer.y = 1366;
		// Border background (slightly larger)
		var panelBorder = LK.getAsset('background', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 0,
			y: 0
		});
		panelBorder.width = 1600 + 10 * 2; // 10px border on each side
		panelBorder.height = 1800 + 10 * 2; // 10px border on each side
		panelBorder.tint = 0xA5ACAF; // Border color
		// Inner panel background
		var panelBg = LK.getAsset('background', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 0,
			y: 0
		});
		panelBg.width = 1600;
		panelBg.height = 1800;
		panelBg.tint = 0xFFFFFF; // White color for settings panel
		panelContainer.addChild(panelBorder);
		panelContainer.addChild(panelBg);
		settingsPanel.addChild(panelContainer);
		// Settings title
		var settingsTitle = new Text2('Settings', {
			size: 120,
			fill: 0x000000
		});
		settingsTitle.anchor.set(0.5, 0);
		settingsTitle.x = 1024;
		settingsTitle.y = 500;
		settingsPanel.addChild(settingsTitle);
		// Paddle color selector
		var paddleText = new Text2('Paddle Color:', {
			size: 80,
			fill: 0x000000
		});
		paddleText.anchor.set(0, 0.5);
		paddleText.x = 400;
		paddleText.y = 800;
		settingsPanel.addChild(paddleText);
		createColorButtons(1400, 800, 'paddle');
		// Ball color selector
		var ballText = new Text2('Ball Color:', {
			size: 80,
			fill: 0x000000
		});
		ballText.anchor.set(0, 0.5);
		ballText.x = 400;
		ballText.y = 1000;
		settingsPanel.addChild(ballText);
		createColorButtons(1400, 1000, 'ball');
		// Lava color selector
		var lavaText = new Text2('Lava Color:', {
			size: 80,
			fill: 0x000000
		});
		lavaText.anchor.set(0, 0.5);
		lavaText.x = 400;
		lavaText.y = 1200;
		settingsPanel.addChild(lavaText);
		createColorButtons(1400, 1200, 'lava');
		// Back to menu button
		var backButton = new Text2('Back to Menu', {
			size: 80,
			fill: 0x000000
		});
		backButton.anchor.set(0.5, 0.5);
		backButton.x = 1024;
		backButton.y = 1600;
		backButton.interactive = true;
		backButton.down = function () {
			settingsPanel.visible = false;
			showMenu();
		};
		settingsPanel.addChild(backButton);
	} else {
		settingsPanel.visible = true;
	}
	function createColorButtons(startX, y, element) {
		var colors = [0x3498db, 0xe74c3c, 0xf39c12, 0x2ecc71, 0x9b59b6];
		var buttonSize = 80;
		var spacing = 100;
		for (var i = 0; i < colors.length; i++) {
			var colorButton = LK.getAsset('ball', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: startX - (colors.length - 1) * spacing / 2 + i * spacing,
				y: y
			});
			colorButton.width = buttonSize;
			colorButton.height = buttonSize;
			colorButton.tint = colors[i];
			colorButton.interactive = true;
			// Store color and element in button for reference
			colorButton.colorValue = colors[i];
			colorButton.elementType = element;
			colorButton.down = function () {
				// Update color in game settings
				gameColors[this.elementType] = this.colorValue;
				// Save colors to storage
				storage.gameColors = gameColors;
				// Update preview if game elements exist
				if (element === 'paddle' && paddle) {
					paddle.getChildAt(0).tint = this.colorValue;
				} else if (element === 'lava' && lava) {
					lava.tint = this.colorValue;
				} else if (element === 'ball') {
					for (var j = 0; j < balls.length; j++) {
						balls[j].getChildAt(0).tint = this.colorValue;
					}
				}
			};
			settingsPanel.addChild(colorButton);
		}
	}
}
// Initialize balls array
function createBall() {
	if (ballsInPlay >= maxBalls || !gameActive) {
		return;
	}
	var ball = new Ball();
	ball.reset(speedMultiplier);
	ball.getChildAt(0).tint = gameColors.ball;
	balls.push(ball);
	game.addChild(ball);
	ballsInPlay++;
}
// Handle input events based on current state
game.down = function (x, y, obj) {
	if (currentState === GAME_STATE.PLAYING) {
		paddle.x = x;
	}
	// Check if we hit any interactive elements
	if (obj && obj.event && obj.event.target && obj.event.target.down) {
		obj.event.target.down(x, y, obj);
	}
};
game.move = function (x, y, obj) {
	if (currentState === GAME_STATE.PLAYING) {
		paddle.x = x;
	}
};
// Update function
game.update = function () {
	// Update any diagonal stripes in the game (always update even when not playing)
	for (var i = 0; i < game.children.length; i++) {
		if (game.children[i] instanceof DiagonalStripe) {
			game.children[i].update();
		}
	}
	// Check if in playing state
	if (currentState !== GAME_STATE.PLAYING) {
		return;
	}
	// Game play state
	if (!gameActive) {
		return;
	}
	// Only create a ball if none exists
	if (ballsInPlay === 0) {
		createBall();
	}
	// Update paddle
	paddle.update();
	// Update all balls
	for (var i = balls.length - 1; i >= 0; i--) {
		var ball = balls[i];
		if (!ball.active) {
			continue;
		}
		ball.update();
		// Check if ball hits paddle
		if (ball.speedY > 0 && ball.y + 20 >= paddle.y - paddle.height / 2 && ball.y - 20 <= paddle.y + paddle.height / 2 && ball.x + 20 >= paddle.x - paddle.width / 2 && ball.x - 20 <= paddle.x + paddle.width / 2) {
			// Make the ball go in a random direction
			var angle = Math.random() * Math.PI * 0.7 + Math.PI * 0.15; // Random angle between ~25 and ~155 degrees
			var speed = Math.sqrt(ball.speedX * ball.speedX + ball.speedY * ball.speedY); // Maintain speed magnitude
			speed = Math.max(speed, 5 * speedMultiplier); // Ensure minimum speed
			ball.speedX = Math.cos(angle) * speed * (Math.random() > 0.5 ? 1 : -1); // Random left or right direction
			ball.speedY = -Math.sin(angle) * speed; // Always go up
			// Move ball above paddle to prevent multiple collisions
			ball.y = paddle.y - paddle.height / 2 - 20;
			// Simple scoring - always add 1 point
			score += 1;
			// Hide combo text
			comboTxt.alpha = 0;
			// Update hit counter
			scoreTxt.setText('' + score);
			// Center the score text
			scoreTxt.x = 1024;
			scoreTxt.y = 1366;
			// Make it pulse slightly when updated
			tween(scoreTxt, {
				scaleX: 1.2,
				scaleY: 1.2
			}, {
				duration: 100,
				onFinish: function onFinish() {
					tween(scoreTxt, {
						scaleX: 1,
						scaleY: 1
					}, {
						duration: 100
					});
				}
			});
			LK.setScore(score);
			// Play bounce sound if enabled
			if (soundEnabled) {
				LK.getSound('bounce').play();
			}
			// Level up based on score
			if (score >= level * 100) {
				levelUp();
			}
		}
		// Check if ball falls into lava
		if (ball.y > lava.y) {
			// Play lava sound if enabled
			if (soundEnabled) {
				LK.getSound('lava').play();
			}
			// Flash the lava
			tween(lava, {
				tint: 0xffffff
			}, {
				duration: 200,
				onFinish: function onFinish() {
					tween(lava, {
						tint: 0xe74c3c
					}, {
						duration: 200
					});
				}
			});
			// Remove ball
			ball.active = false;
			ball.destroy();
			balls.splice(i, 1);
			ballsInPlay--;
			// Check game over
			if (balls.length === 0 && ballsInPlay === 0) {
				gameOver();
			}
		}
	}
};
function levelUp() {
	level++;
	levelTxt.setText('Level: ' + level);
	// Show level up message
	var levelUpTxt = new Text2('LEVEL UP!', {
		size: 120,
		fill: 0xFFFFFF
	});
	levelUpTxt.anchor.set(0.5, 0.5);
	levelUpTxt.x = 1024;
	levelUpTxt.y = 1366;
	LK.gui.addChild(levelUpTxt);
	// Animate level up message
	tween(levelUpTxt, {
		alpha: 0,
		scaleX: 2,
		scaleY: 2
	}, {
		duration: 1000,
		onFinish: function onFinish() {
			levelUpTxt.destroy();
		}
	});
	// Increase difficulty with higher speed boost
	speedMultiplier += 0.25; // Increased from 0.1 for faster progression
	maxBalls = 1; // Keep maxBalls at 1
}
function gameOver() {
	gameActive = false;
	// Flash the screen red to indicate death
	LK.effects.flashScreen(0xff0000, 1000);
	// Return to menu after a short delay
	LK.setTimeout(function () {
		// Hide game elements
		if (background) {
			background.visible = false;
		}
		if (lava) {
			lava.visible = false;
		}
		if (paddle) {
			paddle.visible = false;
		}
		if (scoreTxt) {
			scoreTxt.visible = false;
		}
		if (levelTxt) {
			levelTxt.visible = false;
		}
		if (comboTxt) {
			comboTxt.visible = false;
		}
		// Clear any remaining balls
		for (var i = 0; i < balls.length; i++) {
			balls[i].destroy();
		}
		balls = [];
		ballsInPlay = 0;
		// Show menu instead of restarting game
		showMenu();
	}, 1000);
}
// Start the game
function startGame() {
	// Reset variables
	score = 0;
	level = 1;
	combo = 0;
	lastBallHit = 0;
	gameActive = true;
	speedMultiplier = 2.0; // Increased from 1.0 to make the ball faster
	maxBalls = 5;
	ballsInPlay = 0;
	// Update UI
	scoreTxt.setText('0');
	scoreTxt.scale.set(1, 1); // Reset any scaling from animations
	scoreTxt.x = 1024; // Center horizontally
	scoreTxt.y = 1366; // Center vertically (2732/2)
	levelTxt.setText('Level: 1');
	comboTxt.setText('');
	comboTxt.alpha = 0;
	// Clear any existing balls
	for (var i = 0; i < balls.length; i++) {
		balls[i].destroy();
	}
	balls = [];
	// Start with one ball
	createBall();
	// Play music if enabled
	if (musicEnabled) {
		LK.playMusic('gameMusic', {
			fade: {
				start: 0,
				end: 0.6,
				duration: 1000
			}
		});
	}
	// Ensure the current state is set to playing
	currentState = GAME_STATE.PLAYING;
}
// Game will start when player presses the Play button in the menu

===================================================================
--- original.js
+++ change.js
@@ -211,17 +211,30 @@
 // Initialize menu
 initializeMenu();
 function initializeMenu() {
 	// Create menu background
-	menuBackground = LK.getAsset('background', {
+	menuBackground = new Container();
+	var menuBg = LK.getAsset('background', {
 		anchorX: 0,
 		anchorY: 0,
 		x: 0,
 		y: 0,
 		tint: 0xFFFFFF // White color for menu background
 	});
-	// Add border to menu background
-	menuBackground.lineStyle(10, 0xA5ACAF); // 10px border with #A5ACAF color
+	// Create a border by adding a slightly larger background behind it
+	var menuBorder = LK.getAsset('background', {
+		anchorX: 0,
+		anchorY: 0,
+		x: 0,
+		y: 0,
+		tint: 0xA5ACAF // Border color
+	});
+	menuBorder.width = 2048 + 10 * 2; // Adding 10px on each side
+	menuBorder.height = 2732 + 10 * 2; // Adding 10px on each side
+	menuBorder.x = -10; // Position it 10px to the left
+	menuBorder.y = -10; // Position it 10px to the top
+	menuBackground.addChild(menuBorder);
+	menuBackground.addChild(menuBg);
 	game.addChild(menuBackground);
 	// Diagonal stripe removed from menu
 	// Create game title
 	titleText = new Text2('Lava Bounce', {
@@ -336,21 +349,35 @@
 	// Create settings panel if it doesn't exist
 	if (!settingsPanel) {
 		settingsPanel = new Container();
 		game.addChild(settingsPanel);
-		// Settings panel background
+		// Settings panel background with border
+		var panelContainer = new Container();
+		panelContainer.x = 1024;
+		panelContainer.y = 1366;
+		// Border background (slightly larger)
+		var panelBorder = LK.getAsset('background', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: 0,
+			y: 0
+		});
+		panelBorder.width = 1600 + 10 * 2; // 10px border on each side
+		panelBorder.height = 1800 + 10 * 2; // 10px border on each side
+		panelBorder.tint = 0xA5ACAF; // Border color
+		// Inner panel background
 		var panelBg = LK.getAsset('background', {
 			anchorX: 0.5,
 			anchorY: 0.5,
-			x: 1024,
-			y: 1366
+			x: 0,
+			y: 0
 		});
 		panelBg.width = 1600;
 		panelBg.height = 1800;
 		panelBg.tint = 0xFFFFFF; // White color for settings panel
-		// Add border to settings panel
-		panelBg.lineStyle(10, 0xA5ACAF); // 10px border with #A5ACAF color
-		settingsPanel.addChild(panelBg);
+		panelContainer.addChild(panelBorder);
+		panelContainer.addChild(panelBg);
+		settingsPanel.addChild(panelContainer);
 		// Settings title
 		var settingsTitle = new Text2('Settings', {
 			size: 120,
 			fill: 0x000000