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

/**** 
* Classes
****/ 
var Clock = Container.expand(function () {
	var self = Container.call(this);
	// Create clock face
	var clockFace = LK.getAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 400,
		height: 400,
		tint: 0xFFFFFF
		//alpha: 0 // Make it transparent
	});
	// Make sure clock face is circular by setting borderRadius
	clockFace.shape = 'ellipse';
	self.addChild(clockFace);
	// Create four indicators like in a typical clock at 12, 3, 6, and 9 positions
	// 12 o'clock indicator
	var indicator12 = LK.getAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 20,
		height: 40,
		tint: 0x000000
	});
	indicator12.x = 0;
	indicator12.y = -150; // Top
	self.addChild(indicator12);
	// 3 o'clock indicator
	var indicator3 = LK.getAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 40,
		height: 20,
		tint: 0x000000
	});
	indicator3.x = 150; // Right
	indicator3.y = 0;
	self.addChild(indicator3);
	// 6 o'clock indicator
	var indicator6 = LK.getAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 20,
		height: 40,
		tint: 0x000000
	});
	indicator6.x = 0;
	indicator6.y = 150; // Bottom
	self.addChild(indicator6);
	// 9 o'clock indicator
	var indicator9 = LK.getAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 40,
		height: 20,
		tint: 0x000000
	});
	indicator9.x = -150; // Left
	indicator9.y = 0;
	self.addChild(indicator9);
	// Create hour hand
	var hourHand = LK.getAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0,
		width: 15,
		height: 120,
		tint: 0x000000
	});
	self.addChild(hourHand);
	// Create minute hand
	var minuteHand = LK.getAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0,
		width: 8,
		height: 180,
		tint: 0x555555
	});
	self.addChild(minuteHand);
	// Clock center dot
	var centerDot = LK.getAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 20,
		height: 20,
		tint: 0x000000,
		shape: 'ellipse'
	});
	self.addChild(centerDot);
	// Add interactive capabilities for dragging
	self.interactive = true;
	var isDragging = false;
	var dragOffsetX = 0;
	var dragOffsetY = 0;
	// Event handler for when pressed down on the clock
	self.down = function (x, y, obj) {
		isDragging = true;
		// Calculate offset between touch point and clock center
		var globalPos = obj.parent.toGlobal(obj.position);
		var localPos = game.toLocal(globalPos);
		dragOffsetX = x - localPos.x;
		dragOffsetY = y - localPos.y;
		// Play sound feedback when starting to drag
		LK.getSound('tap').play();
	};
	// Event handler for when released
	self.up = function () {
		isDragging = false;
	};
	// Event handler for movement
	self.move = function (x, y, obj) {
		if (isDragging) {
			self.x = x - dragOffsetX;
			self.y = y - dragOffsetY;
			// Make sure clock stays within the screen bounds
			self.x = Math.max(200, Math.min(self.x, 2048 - 200));
			self.y = Math.max(200, Math.min(self.y, 2732 - 200));
		}
	};
	// Initialize hands
	self.updateClock = function () {
		// Make the clock hands move rapidly by using LK.ticks
		var ticks = LK.ticks;
		// Hour hand completes full rotation every 1 second (60 frames)
		var hourAngle = ticks % 60 / 60 * 2 * Math.PI;
		hourHand.rotation = hourAngle;
		// Minute hand rotates even faster (complete rotation in 0.25 seconds)
		var minuteAngle = ticks % 15 / 15 * 2 * Math.PI;
		minuteHand.rotation = minuteAngle;
	};
	// Initial update
	self.updateClock();
	return self;
});
var CodeWindow = Container.expand(function () {
	var self = Container.call(this);
	// Create window background
	var windowBg = self.attachAsset('problem', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 400,
		height: 600,
		tint: 0x333333,
		alpha: 0.9
	});
	// Container for colored lines
	var linesContainer = new Container();
	linesContainer.x = 0;
	linesContainer.y = 0;
	self.addChild(linesContainer);
	// Store lines
	var coloredLines = [];
	var lineHeight = 20;
	var lineSpacing = 5;
	var windowWidth = 380;
	// Add a new colored line
	self.addLine = function () {
		var line = new ColoredLine();
		line.x = -windowWidth / 2;
		line.y = coloredLines.length * (lineHeight + lineSpacing);
		// Set random line width
		line.setRandomLength(windowWidth);
		linesContainer.addChild(line);
		coloredLines.push(line);
		// Make sure lines are contained within window
		self.adjustLines();
		return line;
	};
	// Move all lines up
	self.moveLines = function () {
		// Move existing lines up
		for (var i = 0; i < coloredLines.length; i++) {
			var line = coloredLines[i];
			line.y -= lineHeight + lineSpacing;
		}
		// Remove lines that moved out of view
		while (coloredLines.length > 0 && coloredLines[0].y < -lineHeight) {
			var oldLine = coloredLines.shift();
			oldLine.destroy();
		}
		// Add a new line at the bottom
		self.addLine();
	};
	// Adjust lines to fit in window
	self.adjustLines = function () {
		// Center lines container
		linesContainer.x = 0;
		linesContainer.y = -windowBg.height / 2 + windowBg.height - 100; // Position near bottom
	};
	// Initialize with a few lines
	self.initialize = function () {
		for (var i = 0; i < 8; i++) {
			self.addLine();
		}
		self.adjustLines();
	};
	return self;
});
var ColoredLine = Container.expand(function () {
	var self = Container.call(this);
	// Create a colored line using progressBar asset
	var lineGraphic = self.attachAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0.5,
		height: 20 // Thin line
	});
	// Set random color for the line
	self.setRandomColor = function () {
		// Array of bright colors
		var colors = [0xFF0000,
		// Red
		0x00FF00,
		// Green
		0x0000FF,
		// Blue
		0xFFFF00,
		// Yellow
		0xFF00FF,
		// Magenta
		0x00FFFF,
		// Cyan
		0xFF6600,
		// Orange
		0x9900FF // Purple
		];
		// Pick a random color
		var randomColor = colors[Math.floor(Math.random() * colors.length)];
		lineGraphic.tint = randomColor;
	};
	// Set random length for the line
	self.setRandomLength = function (maxWidth) {
		// Generate a random length between 30% and 100% of maxWidth
		var randomLength = Math.random() * 0.7 * maxWidth + 0.3 * maxWidth;
		lineGraphic.width = randomLength;
	};
	// Initialize with random color
	self.setRandomColor();
	return self;
});
var LineManager = Container.expand(function () {
	var self = Container.call(this);
	// Store all active lines
	var lines = [];
	var windowWidth = 2048;
	var lineHeight = 20;
	var lineSpacing = 30; // Space between lines
	var moveSpeed = 2; // Speed lines move upward
	// Initialize with some starting lines at the bottom
	self.initialize = function () {
		// Start with 5 lines at the bottom
		var startY = 2732 - lineHeight;
		for (var i = 0; i < 5; i++) {
			self.addNewLine(startY - i * lineSpacing);
		}
	};
	// Add a new line at the bottom
	self.addNewLine = function (yPosition) {
		var line = new ColoredLine();
		line.x = windowWidth / 2;
		line.y = yPosition || 2732 - lineHeight / 2;
		line.width = windowWidth;
		self.addChild(line);
		lines.push(line);
		return line;
	};
	// Update method - move lines upward and add new ones as needed
	self.update = function () {
		// Move all existing lines upward
		for (var i = lines.length - 1; i >= 0; i--) {
			var line = lines[i];
			line.y -= moveSpeed;
			// Remove lines that are offscreen
			if (line.y < -lineHeight) {
				line.destroy();
				lines.splice(i, 1);
			}
		}
		// Check if we need to add a new line at the bottom
		var lastLine = lines[lines.length - 1];
		if (lastLine && lastLine.y < 2732 - lineSpacing) {
			self.addNewLine();
		}
	};
	return self;
});
var Player = Container.expand(function () {
	var self = Container.call(this);
	var playerGraphic = self.attachAsset('player', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Create status text once
	self.statusText = new Text2("I'm fine!", {
		size: 200,
		fill: 0x000000,
		lineHeight: 60,
		stroke: 0x000000,
		strokeThickness: 5
	});
	// Initialize the style object properly
	self.statusText.style = {
		fill: 0x000000,
		fontSize: 40
	};
	self.statusText.anchor.set(0.5);
	// Position relative to self, not self.player which doesn't exist
	self.statusText.x = 0; // Center relative to player
	self.statusText.y = -2000; // 50px above player
	self.addChild(self.statusText);
	// Update appearance based on stress level
	self.updateAppearance = function (stress) {
		// Visual changes based on stress
		if (stress < 30) {
			playerGraphic.tint = 0x3498db; // Normal blue
			self.statusText.setText("I'm fine!");
			self.statusText.style.fill = 0x000000;
			self.statusText.style.fontSize = 40;
			tween.stop(self);
			tween(self, {
				rotation: 0,
				scaleX: 1,
				scaleY: 1
			}, {
				duration: 300,
				easing: tween.easeOut
			});
		} else if (stress < 60) {
			playerGraphic.tint = 0x9b59b6; // Purple - getting stressed
			self.statusText.setText("I'm FINE!");
			self.statusText.style.fill = 0x660000;
			self.statusText.style.fontSize = 45;
			tween.stop(self);
			tween(self, {
				rotation: 0,
				scaleX: 1,
				scaleY: 1
			}, {
				duration: 300,
				easing: tween.easeOut
			});
		} else if (stress < 90) {
			playerGraphic.tint = 0xe74c3c; // Red - very stressed
			self.statusText.setText("I'M FINE!!");
			self.statusText.style.fill = 0xFF0000;
			self.statusText.style.fontSize = 50;
			// Add slight wobble
			tween.stop(self);
			tween(self, {
				rotation: 0.05
			}, {
				duration: 300,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					tween(self, {
						rotation: -0.05
					}, {
						duration: 300,
						easing: tween.easeInOut,
						onFinish: function onFinish() {
							if (stressLevel >= 60) {
								self.updateAppearance(stressLevel);
							}
						}
					});
				}
			});
		} else {
			playerGraphic.tint = 0xff0000; // Bright red - about to lose it
			self.statusText.setText("I'M FINE!!!");
			self.statusText.style.fill = 0xFF0000;
			self.statusText.style.fontSize = 55;
			// Add more dramatic wobble
			tween.stop(self);
			tween(self, {
				rotation: 0.1,
				scaleX: 1.1,
				scaleY: 0.9
			}, {
				duration: 200,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					tween(self, {
						rotation: -0.1,
						scaleX: 0.9,
						scaleY: 1.1
					}, {
						duration: 200,
						easing: tween.easeInOut,
						onFinish: function onFinish() {
							if (stressLevel >= 90) {
								self.updateAppearance(stressLevel);
							}
						}
					});
				}
			});
		}
	};
	return self;
});
var Problem = Container.expand(function () {
	var self = Container.call(this);
	// Different problem types with text and color
	var problemTypes = [{
		text: "WiFi Down!",
		color: 0xff4d4d,
		fontSize: 200
	}, {
		text: "Coffee Spill!",
		color: 0x8b4513
	}, {
		text: "Deadline Changed!",
		color: 0xff9900
	}, {
		text: "Surprise Meeting!",
		color: 0x9933cc
	}, {
		text: "Traffic Jam!",
		color: 0x666666,
		fontSize: 200
	}, {
		text: "Phone Died!",
		color: 0x000000,
		fontSize: 200
	}, {
		text: "Email Overload!",
		color: 0x3366ff,
		fontSize: 200
	}, {
		text: "Printer Error!",
		color: 0xcc0000,
		fontSize: 200
	}, {
		text: "Noisy Neighbors!",
		color: 0x99cc00,
		fontSize: 200
	}, {
		text: "Low Battery!",
		color: 0xff6600,
		fontSize: 200
	}];
	// Choose random problem type
	var typeIndex = Math.floor(Math.random() * problemTypes.length);
	var type = problemTypes[typeIndex];
	// Create problem visual
	var problemGraphic = self.attachAsset('problem', {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: type.color
	});
	// Add problem text
	var problemText = new Text2(type.text, {
		size: 48,
		fill: 0xFFFFFF,
		align: 'center',
		wordWrap: true,
		wordWrapWidth: 130
	});
	problemText.anchor.set(0.5, 0.5);
	self.addChild(problemText);
	// Problem properties
	self.fallSpeed = 2 + Math.random() * 3;
	self.rotationSpeed = (Math.random() - 0.5) * 0.05;
	self.stressValue = Math.ceil(Math.random() * 3);
	self.active = true;
	// Handle tap
	self.down = function (x, y, obj) {
		if (!self.active) {
			return;
		}
		self.active = false;
		LK.getSound('tap').play();
		// Tween to make it disappear
		tween(self, {
			alpha: 0,
			scaleX: 0.2,
			scaleY: 0.2
		}, {
			duration: 300,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				self.destroy();
			}
		});
		// Award more points at higher levels
		if (gameLevel < 10) {
			score += 1;
		} else {
			score += 2;
		}
		scoreText.setText("SCORE: " + score);
	};
	// Update method called each frame
	self.update = function () {
		if (!self.active) {
			return;
		}
		// Move problem downward
		self.y += self.fallSpeed;
		self.rotation += self.rotationSpeed;
		// Check if problem hit the floor
		if (self.y > 2732) {
			stressLevel += self.stressValue;
			updateStressBar();
			LK.getSound('stress').play();
			// Visual feedback
			LK.effects.flashScreen(0xff0000, 200, 0.3);
			self.destroy();
		}
	};
	return self;
});
var StressBar = Container.expand(function () {
	var self = Container.call(this);
	// Create elements
	var background = self.attachAsset('progressBar', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: 0
	});
	var fill = self.attachAsset('progressFill', {
		anchorX: 0,
		anchorY: 0.5,
		x: -background.width / 2,
		y: 0,
		width: 0 // Start with 0 width
	});
	var label = new Text2("STRESS LEVEL", {
		size: 30,
		fill: 0x000000
	});
	label.anchor.set(0.5, 1);
	label.x = 0;
	label.y = -35;
	self.addChild(label);
	// Interactive capabilities for dragging
	self.interactive = true;
	var isDragging = false;
	var dragOffsetX = 0;
	var dragOffsetY = 0;
	// Event handler for down
	self.down = function (x, y, obj) {
		isDragging = true;
		// Calculate offset between touch point and stress bar center
		var globalPos = obj.parent.toGlobal(obj.position);
		var localPos = game.toLocal(globalPos);
		dragOffsetX = x - localPos.x;
		dragOffsetY = y - localPos.y;
		// Play sound feedback
		LK.getSound('tap').play();
	};
	// Event handler for up
	self.up = function () {
		isDragging = false;
	};
	// Event handler for move
	self.move = function (x, y, obj) {
		if (isDragging) {
			self.x = x - dragOffsetX;
			self.y = y - dragOffsetY;
			// Make sure the bar stays within the screen bounds
			self.x = Math.max(500, Math.min(self.x, 2048 - 500));
			self.y = Math.max(100, Math.min(self.y, 2732 - 100));
		}
	};
	// Update fill based on stress level
	self.updateFill = function (stressLevel) {
		var maxWidth = 1000;
		var newWidth = stressLevel / 100 * maxWidth;
		// Tween the progress bar fill
		tween(fill, {
			width: newWidth
		}, {
			duration: 300,
			easing: tween.easeOut
		});
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xe8f4f8 // Light blue background
});

/**** 
* Game Code
****/ 
// Game state variables
// Replace with actual ID
// Replace with actual ID
// Replace with actual ID
// Replace with actual ID
// Replace with actual ID
// Replace with actual ID
var score = 0;
var stressLevel = 0;
var gameLevel = 1;
var problems = [];
var problemSpawnTime = 2000; // ms
var lastProblemTime = 0;
var player;
var scoreText;
var levelText;
var progressBarBackground;
var progressBarFill;
var gameRunning = true;
// Set up background
var background = LK.getAsset('background', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 2732 / 2
});
game.addChild(background);
// Set up player
player = new Player();
player.x = 2048 / 2;
player.y = 2732 - 300;
game.addChild(player);
// Set up score text
scoreText = new Text2("SCORE: 0", {
	size: 60,
	fill: 0x000000
});
scoreText.anchor.set(0.5, 0);
scoreText.x = 2048 / 2;
scoreText.y = 20;
LK.gui.top.addChild(scoreText);
// Set up level text
levelText = new Text2("LEVEL: 1", {
	size: 40,
	fill: 0x000000
});
levelText.anchor.set(0, 0);
levelText.x = 150; // Leave space for the top-left menu icon
levelText.y = 30;
LK.gui.addChild(levelText);
// Game title
var titleText = new Text2("I'M FINE!", {
	size: 70,
	fill: 0xff4d4d,
	fontWeight: 'bold'
});
titleText.anchor.set(1, 0);
titleText.x = 2048 - 150;
titleText.y = 50;
LK.gui.addChild(titleText);
// Create and initialize stress bar container
var stressBar = new StressBar();
stressBar.x = 1048 / 2; // Position at top middle of screen
stressBar.y = 120;
LK.gui.addChild(stressBar);
// Assign to global variables for compatibility with existing code
progressBarBackground = stressBar.children[0];
progressBarFill = stressBar.children[1];
// Update stress bar based on current stress level
function updateStressBar() {
	// Use the StressBar updateFill method to update the stress bar
	stressBar.updateFill(stressLevel);
	// Update player appearance based on stress
	player.updateAppearance(stressLevel);
	// Game over if stress level reaches 100
	if (stressLevel >= 100 && gameRunning) {
		gameRunning = false;
		LK.effects.flashScreen(0xff0000, 1000);
		// Create game over text
		var gameOverText = new Text2("YOU'RE NOT FINE!", {
			size: 100,
			fill: 0xff0000,
			stroke: 0xffffff,
			strokeThickness: 5
		});
		gameOverText.anchor.set(0.5, 0.5);
		gameOverText.x = 2048 / 2;
		gameOverText.y = 2732 / 2 - 200;
		// Add fun meme text
		var memeText = new Text2("(But we've all been there...)", {
			size: 50,
			fill: 0xffffff
		});
		memeText.anchor.set(0.5, 0.5);
		memeText.x = 2048 / 2;
		memeText.y = 2732 / 2 - 100;
		LK.gui.addChild(gameOverText);
		LK.gui.addChild(memeText);
		LK.setTimeout(function () {
			LK.showGameOver();
		}, 3000);
	}
}
// Spawn a new problem
function spawnProblem() {
	var problem = new Problem();
	problem.x = Math.random() * (2048 - 200) + 100; // Random x position
	problem.y = -100; // Start above screen
	game.addChild(problem);
	problems.push(problem);
}
// Check if level should be increased based on score
function checkLevelProgress() {
	// Level up based on score
	var newLevel = Math.floor(score / 10) + 1;
	if (newLevel > gameLevel) {
		gameLevel = newLevel;
		levelText.setText("LEVEL: " + gameLevel);
		// Make problems spawn faster as level increases
		problemSpawnTime = Math.max(500, 2000 - gameLevel * 150);
		// Visual and audio feedback for level up
		LK.effects.flashScreen(0x00ff00, 500, 0.3);
		LK.getSound('levelup').play();
		// Show level up text
		var levelUpText = new Text2("LEVEL UP!", {
			size: 80,
			fill: 0x00cc00
		});
		levelUpText.anchor.set(0.5, 0.5);
		levelUpText.x = 2048 / 2;
		levelUpText.y = 2732 / 2;
		LK.gui.addChild(levelUpText);
		// Animate and remove text
		tween(levelUpText, {
			scaleX: 1.5,
			scaleY: 1.5,
			alpha: 0
		}, {
			duration: 1000,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				levelUpText.destroy();
			}
		});
	}
}
// Clean up problems that have been destroyed
function cleanupProblems() {
	for (var i = problems.length - 1; i >= 0; i--) {
		if (!problems[i].parent) {
			problems.splice(i, 1);
		}
	}
}
// Spawn tutorial text at start
function showTutorial() {
	var tutorialText = new Text2("TAP THE PROBLEMS BEFORE THEY HIT THE GROUND!", {
		size: 60,
		fill: 0xffffff,
		align: 'center',
		wordWrap: true,
		wordWrapWidth: 1800,
		stroke: 0x000000,
		strokeThickness: 5
	});
	tutorialText.anchor.set(0.5, 0.5);
	tutorialText.x = 1048 / 2;
	tutorialText.y = 2732 / 2;
	LK.gui.addChild(tutorialText);
	LK.setTimeout(function () {
		tween(tutorialText, {
			alpha: 0
		}, {
			duration: 1000,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tutorialText.destroy();
			}
		});
	}, 3000);
}
// Show tutorial at start
showTutorial();
// Game update function
game.update = function () {
	if (!gameRunning) {
		return;
	}
	// Check if it's time to spawn a new problem
	if (LK.ticks * (1000 / 60) - lastProblemTime > problemSpawnTime) {
		spawnProblem();
		lastProblemTime = LK.ticks * (1000 / 60);
	}
	// Update all problems
	for (var i = 0; i < problems.length; i++) {
		problems[i].update();
	}
	// Check if player should level up
	checkLevelProgress();
	// Clean up any destroyed problems
	cleanupProblems();
	// No need to update the code window here as it's controlled by the interval
	// Randomly reduce stress by a small amount (chance for slight recovery)
	if (Math.random() < 0.001 && stressLevel > 0) {
		stressLevel = Math.max(0, stressLevel - 1);
		updateStressBar();
	}
};
// Add shake effect to entire game when stress is high
LK.setInterval(function () {
	if (stressLevel >= 70 && gameRunning) {
		var intensity = (stressLevel - 70) / 30; // 0 to 1 based on stress from 70-100
		var shake = 10 * intensity;
		tween(game, {
			x: Math.random() * shake - shake / 2
		}, {
			duration: 50,
			easing: tween.linear,
			onFinish: function onFinish() {
				tween(game, {
					x: 0
				}, {
					duration: 50,
					easing: tween.linear
				});
			}
		});
	}
}, 1000);
// Initial stress bar update
updateStressBar();
// Add clock to background
var clock = new Clock();
clock.x = 1750; // Position in top right area
clock.y = 250;
clock.scale.set(0.8); // Size the clock appropriately
game.addChild(clock);
// Animate clock hands
LK.setInterval(function () {
	if (clock && gameRunning) {
		clock.updateClock();
	}
}, 10); // Update more frequently for extra rapid movement
// Create code window with colored lines at the bottom
var codeWindow = new CodeWindow();
codeWindow.x = 1500;
codeWindow.y = 1200;
codeWindow.initialize();
game.addChild(codeWindow);
// Set interval to add new colored lines
LK.setInterval(function () {
	if (gameRunning) {
		codeWindow.moveLines();
	}
}, 500);
// Start the music
LK.playMusic('bgmusic');
// Add instructions button
var instructionsButton = new Container();
// Use LK.getAsset instead of Graphics for the button background
var instructionsButtonBg = LK.getAsset('problem', {
	anchorX: 0.5,
	anchorY: 0.5,
	width: 60,
	height: 60,
	tint: 0x333333,
	alpha: 0.7
});
instructionsButtonBg.x = 30;
instructionsButtonBg.y = 30;
instructionsButton.addChild(instructionsButtonBg);
var questionText = new Text2("?", {
	size: 40,
	fill: 0xffffff
});
questionText.anchor.set(0.5, 0.5);
questionText.x = 30;
questionText.y = 30;
instructionsButton.addChild(questionText);
instructionsButton.x = 50;
instructionsButton.y = 50;
instructionsButton.interactive = true;
LK.gui.addChild(instructionsButton);
instructionsButton.down = function () {
	// Show instructions popup
	var popup = new Container();
	// Darken background using a shape asset instead of Graphics
	var bg = LK.getAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 2048,
		height: 2732,
		tint: 0x000000,
		alpha: 0.7
	});
	bg.x = 2048 / 2;
	bg.y = 2732 / 2;
	popup.addChild(bg);
	// Instructions panel using a shape asset instead of Graphics
	var panel = LK.getAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 1500,
		height: 1000,
		tint: 0xffffff,
		alpha: 0.9
	});
	panel.x = 2048 / 2;
	panel.y = 2732 / 2;
	popup.addChild(panel);
	// Title
	var title = new Text2("HOW TO PLAY", {
		size: 80,
		fill: 0xff4d4d,
		fontWeight: 'bold'
	});
	title.anchor.set(0.5, 0);
	title.x = panel.x;
	title.y = panel.y - 400;
	popup.addChild(title);
	// Instructions
	var instructions = new Text2("1. Tap on the falling problems before they hit the ground\n\n" + "2. Each problem that hits the ground increases your stress\n\n" + "3. Don't let your stress meter reach 100%\n\n" + "4. Score points by tapping problems\n\n" + "5. Level up every 10 points\n\n" + "6. Higher levels = faster problems\n\n" + "7. Just keep telling yourself, \"I'M FINE!\"", {
		size: 50,
		fill: 0x000000,
		align: 'center',
		lineHeight: 60,
		wordWrap: true,
		wordWrapWidth: panel.width * 0.9 // Wrap to 90% of panel width
	});
	// Anchor and position at top center
	instructions.anchor.set(0.5, 0);
	instructions.x = panel.x + panel.width / 2; // Center horizontally
	instructions.y = 20; // Near top of screen
	popup.addChild(instructions);
	// Close button
	var closeButton = new Container();
	var closeBg = LK.getAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 300,
		height: 100,
		tint: 0xff4d4d
	});
	closeButton.addChild(closeBg);
	var closeText = new Text2("CLOSE", {
		size: 50,
		fill: 0xffffff
	});
	closeText.anchor.set(0.5, 0.5);
	closeText.x = 0;
	closeText.y = 0;
	closeButton.addChild(closeText);
	closeButton.x = panel.x;
	closeButton.y = panel.y + 350;
	closeButton.interactive = true;
	popup.addChild(closeButton);
	closeButton.down = function () {
		popup.destroy();
	};
	LK.gui.addChild(popup);
};

===================================================================
--- original.js
+++ change.js
@@ -595,15 +595,15 @@
 
 /**** 
 * Game Code
 ****/ 
+// Game state variables
 // Replace with actual ID
 // Replace with actual ID
 // Replace with actual ID
 // Replace with actual ID
 // Replace with actual ID
 // Replace with actual ID
-// Game state variables
 var score = 0;
 var stressLevel = 0;
 var gameLevel = 1;
 var problems = [];
@@ -657,10 +657,10 @@
 titleText.y = 50;
 LK.gui.addChild(titleText);
 // Create and initialize stress bar container
 var stressBar = new StressBar();
-stressBar.x = 2048 / 2; // Position at bottom middle under player
-stressBar.y = 2732 - 200; // Position near bottom of screen, under player
+stressBar.x = 1048 / 2; // Position at top middle of screen
+stressBar.y = 120;
 LK.gui.addChild(stressBar);
 // Assign to global variables for compatibility with existing code
 progressBarBackground = stressBar.children[0];
 progressBarFill = stressBar.children[1];