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

/**** 
* Classes
****/ 
var City = Container.expand(function () {
	var self = Container.call(this);
	self.takeDamage = function (damageAmount) {
		if (self.health <= 0) return; // Already destroyed
		if (self.shielded) return; // Shield active, ignore damage
		self.health -= damageAmount;
		LK.effects.flashObject(self.graphic, 0xFF0000, 300); // Flash city red
		if (self.healthDisplay) {
			self.healthDisplay.setText('City Health: ' + Math.max(0, self.health) + ' / ' + CITY_MAX_HEALTH);
		}
		if (self.health <= 0) {
			self.health = 0; // Cap at 0
			LK.showGameOver(); // Trigger game over
		}
	};
	self.setHealthDisplay = function (textObject) {
		self.healthDisplay = textObject;
		self.healthDisplay.setText('City Health: ' + self.health + ' / ' + CITY_MAX_HEALTH);
	};
	// Initialization
	self.graphic = self.attachAsset('city', {
		anchorX: 0.5,
		anchorY: 1.0
	}); // Anchor bottom-center
	self.health = CITY_MAX_HEALTH;
	self.healthDisplay = null; // To be linked to a Text2 object
	return self;
});
var Crosshair = Container.expand(function () {
	var self = Container.call(this);
	self.isOver = function (target) {
		if (!target || !target.graphic || !self.graphic || !target.graphic.width || !target.graphic.height) return false;
		// Basic bounding box collision
		var selfHalfWidth = self.graphic.width / 2;
		var selfHalfHeight = self.graphic.height / 2;
		var targetHalfWidth = target.graphic.width * (target.graphic.scaleX || 1) / 2;
		var targetHalfHeight = target.graphic.height * (target.graphic.scaleY || 1) / 2;
		var selfLeft = self.x - selfHalfWidth;
		var selfRight = self.x + selfHalfWidth;
		var selfTop = self.y - selfHalfHeight;
		var selfBottom = self.y + selfHalfHeight;
		var targetLeft = target.x - targetHalfWidth;
		var targetRight = target.x + targetHalfWidth;
		var targetTop = target.y - targetHalfHeight;
		var targetBottom = target.y + targetHalfHeight;
		return !(selfRight < targetLeft || selfLeft > targetRight || selfBottom < targetTop || selfTop > targetBottom);
	};
	// Initialization code, graphic will be attached in Game Code
	self.graphic = null;
	self.speed = 0; // Will be set from game constant
	return self;
});
// Base class for falling objects
var FallingObject = Container.expand(function (assetId, initialHealth, fallSpeed, objectType) {
	var self = Container.call(this);
	self.takeDamage = function (damageAmount) {
		if (self.isDestroyed) return;
		self.health -= damageAmount;
		LK.effects.flashObject(self.graphic, 0xFF0000, 100); // Red flash on hit
		// Add pulsing scale animation when hit
		tween.stop(self.graphic, {
			scaleX: true,
			scaleY: true
		}); // Stop any existing scale tweens
		tween(self.graphic, {
			scaleX: 1.3,
			scaleY: 1.3
		}, {
			duration: 150,
			easing: tween.easeOut,
			onFinish: function onFinish() {
				tween(self.graphic, {
					scaleX: 1,
					scaleY: 1
				}, {
					duration: 150,
					easing: tween.easeIn
				});
			}
		});
		if (self.health <= 0) {
			self.destroySelf();
		}
	};
	self.destroySelf = function () {
		if (self.isDestroyed) return;
		self.isDestroyed = true;
		// Create kusok fragments explosion
		var fragmentCount = 3 + Math.floor(Math.random() * 4); // Random between 3 and 6 kusok fragments
		for (var p = 0; p < fragmentCount; p++) {
			var randomScale = 0.4 + Math.random() * 0.8; // Random scale between 0.4 and 1.2
			var kusokFragment = LK.getAsset('kusok', {
				anchorX: 0.5,
				anchorY: 0.5,
				scaleX: randomScale,
				scaleY: randomScale
			});
			kusokFragment.x = self.x;
			kusokFragment.y = self.y;
			game.addChild(kusokFragment);
			// Random direction and speed for each fragment
			var angle = Math.random() * Math.PI * 2;
			var speed = 80 + Math.random() * 120; // Random speed between 80-200
			var velocityX = Math.cos(angle) * speed;
			var velocityY = Math.sin(angle) * speed;
			// Random rotation speed and direction for each fragment (slower rotation)
			var rotationSpeed = 0.01 + Math.random() * 0.03; // Random rotation speed between 0.01 and 0.04 radians per frame
			var rotationDirection = Math.random() < 0.5 ? 1 : -1; // Random direction (clockwise or counterclockwise)
			var totalRotation = rotationSpeed * rotationDirection * 120; // Total rotation over 2 seconds (120 frames at 60fps)
			// Animate fragment movement, rotation, and scale down over 2 seconds
			tween(kusokFragment, {
				x: kusokFragment.x + velocityX,
				y: kusokFragment.y + velocityY,
				scaleX: 0,
				scaleY: 0,
				rotation: kusokFragment.rotation + totalRotation
			}, {
				duration: 2000,
				easing: tween.easeOut,
				onFinish: function onFinish() {
					if (kusokFragment.parent) {
						game.removeChild(kusokFragment);
					}
				}
			});
		}
		// Add a small particle explosion or shrink effect
		if (tween) {
			tween.stop(self.graphic); // Stop any ongoing tweens
			tween(self.graphic, {
				scaleX: 0.1,
				scaleY: 0.1,
				alpha: 0
			}, {
				duration: 200,
				onFinish: function onFinish() {
					// Actual removal from game will be handled in game.update
				}
			});
		}
		// Play boom sound when object is destroyed
		LK.getSound('Boom').play();
		// Points for destroying object
		LK.setScore(LK.getScore() + (self.objectType === 'meteor' ? 10 : 15));
		updateScoreDisplay();
	};
	self.update = function () {
		if (self.isDestroyed) return;
		self.y += self.speedY;
	}; //{-|u}
	// Initialization
	self.graphic = self.attachAsset(assetId, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.health = initialHealth;
	self.maxHealth = initialHealth; // Store max health for potential future use (e.g. health bars on objects)
	self.speedY = fallSpeed;
	self.isDestroyed = false;
	self.objectType = objectType; // 'meteor' or 'alien'
	return self;
});
var Meteor = FallingObject.expand(function () {
	var self = FallingObject.call(this, 'meteor', METEOR_HEALTH, METEOR_SPEED / 2, 'meteor');
	// Add rotation animation to meteor
	self.rotationSpeed = 0.005 + Math.random() * 0.01; // Random rotation speed between 0.005 and 0.015 radians per frame
	self.rotationDirection = Math.random() < 0.5 ? 1 : -1; // Random direction (clockwise or counterclockwise)
	self.update = function () {
		if (self.isDestroyed) return;
		self.y += self.speedY;
		// Add rotation
		self.graphic.rotation += self.rotationSpeed * self.rotationDirection;
	};
	return self;
});
var Alien = FallingObject.expand(function () {
	var self = FallingObject.call(this, 'alien', ALIEN_HEALTH, ALIEN_SPEED / 2, 'alien');
	// Alien-specific properties or methods (e.g., different movement pattern)
	return self;
});
var VirtualJoystick = Container.expand(function () {
	var self = Container.call(this);
	self.initialize = function (baseAssetId, knobAssetId, visualRadius, interactionRadius) {
		// baseGraphic and knobGraphic are children of 'self' (the joystick container)
		// Their positions (0,0) will be the center of 'self'.
		self.baseGraphic = self.addChild(LK.getAsset(baseAssetId, {
			anchorX: 0.5,
			anchorY: 0.5
		}));
		self.knobGraphic = self.addChild(LK.getAsset(knobAssetId, {
			anchorX: 0.5,
			anchorY: 0.5
		}));
		self.visualRadius = visualRadius; // Max distance knob can move visually
		self.interactionRadius = interactionRadius; // Touchable area around joystick center
		self.active = false;
		self.touchId = null;
		self.deltaX = 0; // Normalized movement vector x (-1 to 1)
		self.deltaY = 0; // Normalized movement vector y (-1 to 1)
		self.initialTouchX = 0; // Track initial touch position
		self.initialTouchY = 0; // Track initial touch position
	};
	self.processDown = function (gameGlobalX, gameGlobalY, eventObj, treatTouchAsLocalOrigin) {
		var localClickPos;
		if (treatTouchAsLocalOrigin) {
			// If the joystick was just repositioned to gameGlobalX, gameGlobalY (the touch location),
			// then this touch point is effectively at the joystick's new local origin (0,0).
			localClickPos = {
				x: 0,
				y: 0
			};
		} else {
			// Standard case: joystick is already positioned. Convert global touch to local.
			localClickPos = self.toLocal({
				x: gameGlobalX,
				y: gameGlobalY
			});
		}
		var distSq = localClickPos.x * localClickPos.x + localClickPos.y * localClickPos.y;
		if (distSq <= self.interactionRadius * self.interactionRadius) {
			self.active = true;
			self.touchId = eventObj.identifier; // Use identifier from the event object
			// Always start knob at center when joystick is activated
			self.knobGraphic.x = 0;
			self.knobGraphic.y = 0;
			self.deltaX = 0;
			self.deltaY = 0;
			// Store the initial touch position to avoid coordinate transformation issues
			self.initialTouchX = gameGlobalX;
			self.initialTouchY = gameGlobalY;
			return true; // Consumed event
		}
		return false;
	};
	self.processMove = function (gameGlobalX, gameGlobalY, eventObj) {
		if (!self.active || eventObj.identifier !== undefined && eventObj.identifier !== self.touchId) {
			return;
		}
		// Calculate movement relative to initial touch position
		var deltaX = gameGlobalX - self.initialTouchX;
		var deltaY = gameGlobalY - self.initialTouchY;
		self.updateKnobPosition(deltaX, deltaY);
	};
	self.processUp = function (eventObj) {
		if (!self.active || eventObj.identifier !== undefined && eventObj.identifier !== self.touchId) {
			return;
		}
		self.active = false;
		self.touchId = null;
		self.knobGraphic.x = 0; // Reset to center of joystick container
		self.knobGraphic.y = 0;
		self.deltaX = 0;
		self.deltaY = 0;
	};
	self.updateKnobPosition = function (localX, localY) {
		var dx = localX;
		var dy = localY;
		var distance = Math.sqrt(dx * dx + dy * dy);
		var clampedX = dx;
		var clampedY = dy;
		if (distance > self.visualRadius) {
			clampedX = dx / distance * self.visualRadius;
			clampedY = dy / distance * self.visualRadius;
		}
		self.knobGraphic.x = clampedX;
		self.knobGraphic.y = clampedY;
		if (self.visualRadius === 0) {
			// Avoid division by zero if radius is 0
			self.deltaX = 0;
			self.deltaY = 0;
		} else {
			self.deltaX = clampedX / self.visualRadius;
			self.deltaY = clampedY / self.visualRadius;
		}
		self.deltaX = Math.max(-1, Math.min(1, self.deltaX));
		self.deltaY = Math.max(-1, Math.min(1, self.deltaY));
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x0a0a18 // Even darker blue for space
});

/**** 
* Game Code
****/ 
// A simple red circle for the crosshair
// Grey city base
// Lime green alien (can be simple box for now)
// Brownish meteor
// --- Game Constants ---
var WORLD_WIDTH = 2048;
var WORLD_HEIGHT = 2732;
var METEOR_HEALTH = 100;
var METEOR_SPEED = 3; // Pixels per frame
var METEOR_DAMAGE_TO_CITY = 75;
var ALIEN_HEALTH = 150;
var ALIEN_SPEED = 2.5;
var ALIEN_DAMAGE_TO_CITY = 100;
var CITY_MAX_HEALTH = 1000;
// var CLICK_DAMAGE = 35; // Replaced by FIRE_DAMAGE
// var HOLD_DAMAGE_PER_INTERVAL = 20; // Replaced by FIRE_DAMAGE
// var HOLD_DAMAGE_INTERVAL_MS = 150; // Replaced by FIRE_RATE_MS
var CROSSHAIR_SPEED = 10;
var JOYSTICK_VISUAL_RADIUS = 180; // Increased max knob center travel distance for larger joystick
var JOYSTICK_INTERACTION_RADIUS = 260; // Increased touchable area radius for larger joystick
var FIRE_RATE_MS = 450; // How often the player can fire
var FIRE_DAMAGE = 35; // Damage per shot from crosshair
var SPAWN_INTERVAL_MS_MIN = 2400; // Minimum time between spawns
var SPAWN_INTERVAL_MS_MAX = 5000; // Maximum time between spawns
// --- Global Game Variables ---
var cityInstance;
var fallingObjects = [];
var cityHealthText; // For GUI
var scoreText; // For player score
// var playerHoldingTarget = null; // Removed
// var isPlayerHolding = false; // Replaced by isFiring
// var holdDamageInterval = null; // Removed
var crosshairInstance;
var joystickInstance;
var isFiring = false;
var lastFireTime = 0;
var joystickTouchId = null; // To track the touch interacting with the joystick
var nextSpawnTime = 0;
var stars = [];
var STAR_COUNT = 50;
// --- Helper Functions ---
function spawnFallingObject() {
	var objectType = Math.random() < 0.6 ? 'meteor' : 'alien'; // 60% meteors, 40% aliens
	var newObject;
	if (objectType === 'meteor') {
		newObject = new Meteor();
	} else {
		newObject = new Alien();
	}
	// Position just above the screen, at a random horizontal position
	newObject.x = Math.random() * (WORLD_WIDTH - newObject.graphic.width) + newObject.graphic.width / 2;
	newObject.y = -newObject.graphic.height / 2; // Start just off-screen top
	fallingObjects.push(newObject);
	game.addChild(newObject);
}
function updateScoreDisplay() {
	if (scoreText) {
		scoreText.setText('Score: ' + LK.getScore());
	}
}
function createStars() {
	for (var i = 0; i < STAR_COUNT; i++) {
		// Randomly choose star size
		var starTypes = ['star_small', 'star_medium', 'star_large'];
		var starWeights = [0.6, 0.3, 0.1]; // 60% small, 30% medium, 10% large
		var randomValue = Math.random();
		var starType = 'star_small';
		if (randomValue > 0.6 && randomValue <= 0.9) {
			starType = 'star_medium';
		} else if (randomValue > 0.9) {
			starType = 'star_large';
		}
		var star = LK.getAsset(starType, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		star.x = Math.random() * WORLD_WIDTH;
		star.y = Math.random() * WORLD_HEIGHT;
		star.alpha = 0.3 + Math.random() * 0.7; // Random initial brightness
		star.twinkleDelay = Math.random() * 3000; // Random delay before first twinkle
		star.nextTwinkleTime = LK.ticks * (1000 / 60) + star.twinkleDelay;
		star.isTwinkling = false; // Track if star is currently twinkling
		star.lastColorChangeTime = LK.ticks * (1000 / 60); // Initialize last color change time
		stars.push(star);
		game.addChild(star);
	}
}
function updateStars() {
	var currentTime = LK.ticks * (1000 / 60);
	var colors = [0x4169E1, 0x00FFFF, 0xFFFFFF, 0xFFFF00]; // Blue, Cyan, White, Yellow
	for (var i = 0; i < stars.length; i++) {
		var star = stars[i];
		// Check if star should change color (either due to regular twinkle time or 15-second limit)
		var shouldTwinkle = currentTime >= star.nextTwinkleTime;
		var timeSinceLastChange = currentTime - (star.lastColorChangeTime || 0);
		var forcedChange = timeSinceLastChange >= 15000; // 15 seconds
		if ((shouldTwinkle || forcedChange) && !star.isTwinkling) {
			// Start twinkling animation
			star.isTwinkling = true;
			// Pick a new color different from the current one
			var currentColor = star.tint;
			var availableColors = [];
			for (var c = 0; c < colors.length; c++) {
				if (colors[c] !== currentColor) {
					availableColors.push(colors[c]);
				}
			}
			// Fallback in case all colors are the same (shouldn't happen)
			if (availableColors.length === 0) {
				availableColors = colors.slice();
			}
			var targetColor = availableColors[Math.floor(Math.random() * availableColors.length)];
			var targetAlpha = 0.1 + Math.random() * 0.9; // Random target brightness
			// Animate both color and alpha
			tween(star, {
				alpha: targetAlpha,
				tint: targetColor
			}, {
				duration: 500 + Math.random() * 1500,
				easing: tween.easeInOut,
				onFinish: function (starRef, colorRef) {
					return function onFinish() {
						// Set next twinkle time (3-8 seconds from now, but no more than 15 seconds total)
						var now = LK.ticks * (1000 / 60);
						starRef.lastColorChangeTime = now;
						var nextInterval = Math.min(3000 + Math.random() * 5000, 15000);
						starRef.nextTwinkleTime = now + Math.max(nextInterval, 1000); // Ensure at least 1 second
						starRef.isTwinkling = false;
						// Set the color to the final value to avoid rounding issues
						starRef.tint = colorRef;
					};
				}(star, targetColor)
			});
		}
	}
}
// --- Game Initialization ---
// Reset upgrades and turret
for (var k in upgrades) upgrades[k] = 0;
if (game.turretInterval) {
	LK.clearInterval(game.turretInterval);
	game.turretInterval = null;
}
// Add background
var background = LK.getAsset('fon', {
	anchorX: 0,
	anchorY: 0
});
background.x = 0;
background.y = 0;
game.addChild(background);
// Create twinkling stars
createStars();
// Create and position the city
cityInstance = new City();
cityInstance.x = WORLD_WIDTH / 2;
cityInstance.y = WORLD_HEIGHT; // Bottom edge of city at bottom of screen
game.addChild(cityInstance);
// Setup City Health Display
cityHealthText = new Text2('', {
	size: 60,
	fill: 0xFFFFFF,
	align: 'center'
});
cityHealthText.anchor.set(0.5, 1); // Anchor bottom-center for text
LK.gui.bottom.addChild(cityHealthText); // Add to bottom center of GUI
cityInstance.setHealthDisplay(cityHealthText); // Link to city instance
// Setup Score Display
LK.setScore(0); // Initialize score
scoreText = new Text2('Score: 0', {
	size: 60,
	fill: 0xFFFF00,
	align: 'center'
});
scoreText.anchor.set(0.5, 0); // Anchor top-center
// Position score text slightly below the top edge to avoid any engine icons, if necessary
// LK.gui.top has y=0. We'll add a small offset.
scoreText.y = 20; // Small offset from the very top.
LK.gui.top.addChild(scoreText);
// --- Event Handlers ---
// --- Upgrades System ---
// Upgrade state variables
var upgrades = {
	fireDamage: 0,
	// Level
	fireRate: 0,
	// Level
	cityHeal: 0,
	// Level
	shield: 0,
	// Level
	turret: 0,
	// Level
	crosshairSize: 0 // Level
};
var upgradesPopup = null;
var upgradesButton = null;
var upgradesButtonActive = false;
var upgradesButtonWidth = 180;
var upgradesButtonHeight = 90;
var upgradesButtonPadding = 30;
var upgradesButtonY = 40; // Offset from top
var upgradesButtonX = WORLD_WIDTH - upgradesButtonWidth - upgradesButtonPadding;
// Upgrade definitions
var UPGRADE_DEFS = [{
	key: 'fireDamage',
	name: 'Fire Damage +',
	desc: 'Increase shot damage',
	cost: function cost(level) {
		return 50 + 50 * level;
	},
	max: 5
}, {
	key: 'fireRate',
	name: 'Fire Rate +',
	desc: 'Reduce delay between shots',
	cost: function cost(level) {
		return 60 + 60 * level;
	},
	max: 5
}, {
	key: 'cityHeal',
	name: 'Heal City',
	desc: 'Restore city health',
	cost: function cost(level) {
		return 80 + 80 * level;
	},
	max: 3
}, {
	key: 'shield',
	name: 'Shield',
	desc: 'Temporary city shield',
	cost: function cost(level) {
		return 120 + 80 * level;
	},
	max: 1
}, {
	key: 'turret',
	name: 'Turret',
	desc: 'Automatic turret',
	cost: function cost(level) {
		return 200 + 100 * level;
	},
	max: 1
}, {
	key: 'crosshairSize',
	name: 'Crosshair Size +',
	desc: 'Increase crosshair size',
	cost: function cost(level) {
		return 40 + 40 * level;
	},
	max: 3
}];
// Create upgrades button (top right, not in topLeft)
upgradesButton = new Text2('Upgrades', {
	size: 60,
	fill: 0xFFFF00,
	align: 'center'
});
// Place button at top right, but not in the top left 100x100 area
upgradesButton.anchor.set(1, 0); // Top right
upgradesButton.x = -upgradesButtonPadding; // Will be positioned by LK.gui.topRight
upgradesButton.y = upgradesButtonY;
upgradesButton.interactive = true;
upgradesButton.buttonMode = true;
upgradesButton.visible = true;
upgradesButtonActive = false;
LK.gui.topRight.addChild(upgradesButton);
// Also add a large invisible hit area to make it easier to tap
if (!upgradesButton.hitArea) {
	var hitArea = LK.getAsset('fon', {
		anchorX: 1,
		anchorY: 0,
		scaleX: 220 / 2048,
		scaleY: 100 / 2732
	});
	hitArea.x = upgradesButton.x;
	hitArea.y = upgradesButton.y;
	hitArea.alpha = 0.01;
	hitArea.interactive = true;
	hitArea.buttonMode = true;
	LK.gui.topRight.addChild(hitArea);
	hitArea.on('down', function (x, y, obj) {
		if (!upgradesButtonActive) showUpgradesPopup();
	});
}
// Upgrades popup container
function showUpgradesPopup() {
	if (upgradesPopup) return; // Already open
	// Slow down all enemies by 90%
	for (var i = 0; i < fallingObjects.length; i++) {
		var obj = fallingObjects[i];
		if (!obj.isDestroyed) {
			obj.originalSpeedY = obj.speedY; // Store original speed
			tween(obj, {
				speedY: obj.speedY * 0.1
			}, {
				duration: 200
			}); // Slow to 10% of original speed
		}
	}
	upgradesPopup = new Container();
	// Dimmed background for upgrades popup with its own color
	var popupBg = LK.getAsset('fon', {
		anchorX: 0,
		anchorY: 0,
		scaleX: 1,
		scaleY: 1
	});
	popupBg.tint = 0x1a1a2e; // Dark blue-purple color for upgrades background
	popupBg.alpha = 0.85; // Make it semi-transparent
	popupBg.width = WORLD_WIDTH;
	popupBg.height = WORLD_HEIGHT;
	popupBg.interactive = true; // Allow closing popup by tapping background
	popupBg.buttonMode = true;
	popupBg.on('down', function (x, y, obj) {
		closeUpgradesPopup();
	});
	upgradesPopup.addChild(popupBg);
	// Popup window
	var popupWidth = 1200;
	var popupHeight = 1100;
	var popupWin = LK.getAsset('fon', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: popupWidth / 2048,
		scaleY: popupHeight / 2732
	});
	popupWin.x = WORLD_WIDTH / 2;
	popupWin.y = WORLD_HEIGHT / 2;
	popupWin.alpha = 0.98;
	upgradesPopup.addChild(popupWin);
	// Title
	var title = new Text2('Upgrades', {
		size: 90,
		fill: 0xFFFF00,
		align: 'center'
	});
	title.anchor.set(0.5, 0);
	title.x = WORLD_WIDTH / 2;
	title.y = popupWin.y - popupHeight / 2 + 60;
	upgradesPopup.addChild(title);
	// Upgrade icons grid (3x3)
	var iconSize = 240;
	var iconSpacing = 360;
	var gridStartX = WORLD_WIDTH / 2 - iconSpacing;
	var gridStartY = title.y + 140;
	var rowSpacing = 420; // Increased spacing between rows to prevent text overlap
	for (var i = 0; i < UPGRADE_DEFS.length; i++) {
		(function (i) {
			var upg = UPGRADE_DEFS[i];
			var row = Math.floor(i / 3);
			var col = i % 3;
			var iconX = gridStartX + col * iconSpacing;
			var iconY = gridStartY + row * rowSpacing;
			// Icon background/placeholder (will be replaced with actual upgrade icons later)
			var iconBg = LK.getAsset('fon', {
				anchorX: 0.5,
				anchorY: 0.5,
				scaleX: iconSize / 2048,
				scaleY: iconSize / 2732
			});
			iconBg.x = iconX;
			iconBg.y = iconY;
			iconBg.alpha = 0.8;
			iconBg.tint = 0x555555; // Gray placeholder color
			upgradesPopup.addChild(iconBg);
			// Price text above icon
			var priceText = new Text2(upg.cost(upgrades[upg.key]) + " pts", {
				size: 72,
				fill: 0xFFFF00,
				align: 'center'
			});
			priceText.anchor.set(0.5, 1);
			priceText.x = iconX;
			priceText.y = iconY - iconSize / 2 - 20;
			upgradesPopup.addChild(priceText);
			// Level indicator below icon
			var levelText = new Text2(upgrades[upg.key] + "/" + upg.max, {
				size: 64,
				fill: 0xFFFFFF,
				align: 'center'
			});
			levelText.anchor.set(0.5, 0);
			levelText.x = iconX;
			levelText.y = iconY + iconSize / 2 + 20;
			upgradesPopup.addChild(levelText);
			// Button interaction
			iconBg.interactive = true;
			iconBg.buttonMode = true;
			iconBg.upgradeKey = upg.key;
			iconBg.on('down', function (x, y, obj) {
				handleUpgradePurchase(upg, priceText, levelText);
			});
		})(i);
	}
	// Add popup to game
	game.addChild(upgradesPopup);
	// Pause game logic (handled by LK automatically if popup is modal)
	upgradesButtonActive = true;
	upgradesButton.visible = false;
}
function closeUpgradesPopup() {
	if (upgradesPopup && upgradesPopup.parent) {
		upgradesPopup.parent.removeChild(upgradesPopup);
	}
	// Restore normal speed to all enemies
	for (var i = 0; i < fallingObjects.length; i++) {
		var obj = fallingObjects[i];
		if (!obj.isDestroyed && obj.originalSpeedY !== undefined) {
			tween(obj, {
				speedY: obj.originalSpeedY
			}, {
				duration: 200
			}); // Restore original speed
		}
	}
	upgradesPopup = null;
	upgradesButtonActive = false;
	upgradesButton.visible = true;
}
// Handle upgrade purchase
function handleUpgradePurchase(upg, priceText, levelText) {
	var level = upgrades[upg.key];
	var cost = upg.cost(level);
	if (level >= upg.max) return;
	if (LK.getScore() < cost) return;
	// Apply upgrade
	LK.setScore(LK.getScore() - cost);
	upgrades[upg.key]++;
	// Apply effect
	applyUpgradeEffect(upg.key);
	updateScoreDisplay();
	// Update price and level text
	priceText.setText(upg.cost(upgrades[upg.key]) + " pts");
	levelText.setText(upgrades[upg.key] + "/" + upg.max);
	// Optionally, flash or animate the texts
	LK.effects.flashObject(priceText, 0x00ff00, 200);
	LK.effects.flashObject(levelText, 0x00ff00, 200);
}
// Apply upgrade effect
function applyUpgradeEffect(key) {
	if (key === 'fireDamage') {
		FIRE_DAMAGE = 35 + 20 * upgrades.fireDamage;
	} else if (key === 'fireRate') {
		FIRE_RATE_MS = 450 - 60 * upgrades.fireRate;
		if (FIRE_RATE_MS < 120) FIRE_RATE_MS = 120;
	} else if (key === 'cityHeal') {
		if (cityInstance) {
			cityInstance.health = Math.min(cityInstance.health + 300, CITY_MAX_HEALTH);
			if (cityInstance.healthDisplay) {
				cityInstance.healthDisplay.setText('City Health: ' + cityInstance.health + ' / ' + CITY_MAX_HEALTH);
			}
		}
	} else if (key === 'shield') {
		// Temporary shield: make city invulnerable for 5 seconds
		if (cityInstance) {
			cityInstance.shielded = true;
			LK.effects.flashObject(cityInstance.graphic, 0x00ffff, 500);
			LK.setTimeout(function () {
				cityInstance.shielded = false;
			}, 5000);
		}
	} else if (key === 'turret') {
		// Enable auto-turret (fires at nearest target every 1.2s)
		if (!game.turretInterval) {
			game.turretInterval = LK.setInterval(function () {
				if (fallingObjects.length === 0) return;
				// Find nearest target
				var minDist = 99999,
					nearest = null;
				for (var i = 0; i < fallingObjects.length; i++) {
					var obj = fallingObjects[i];
					if (!obj.isDestroyed) {
						var dx = obj.x - cityInstance.x;
						var dy = obj.y - (cityInstance.y - cityInstance.graphic.height / 2);
						var dist = dx * dx + dy * dy;
						if (dist < minDist) {
							minDist = dist;
							nearest = obj;
						}
					}
				}
				if (nearest) {
					nearest.takeDamage(FIRE_DAMAGE);
					LK.getSound('Shoot').play();
					// Add a small effect at target
					var particle = LK.getAsset('particle', {
						anchorX: 0.5,
						anchorY: 0.5,
						scaleX: 1.2,
						scaleY: 1.2
					});
					particle.x = nearest.x;
					particle.y = nearest.y;
					game.addChild(particle);
					tween(particle, {
						alpha: 0,
						scaleX: 0,
						scaleY: 0
					}, {
						duration: 600,
						onFinish: function onFinish() {
							if (particle.parent) game.removeChild(particle);
						}
					});
				}
			}, 1200);
		}
	} else if (key === 'crosshairSize') {
		if (crosshairInstance && crosshairInstance.graphic) {
			var scale = 1 + 0.18 * upgrades.crosshairSize;
			crosshairInstance.graphic.scaleX = scale;
			crosshairInstance.graphic.scaleY = scale;
		}
	}
}
// Button event
upgradesButton.on('down', function (x, y, obj) {
	if (!upgradesButtonActive) showUpgradesPopup();
});
// Initialize Crosshair
crosshairInstance = new Crosshair();
crosshairInstance.graphic = crosshairInstance.attachAsset('crosshair_asset', {
	anchorX: 0.5,
	anchorY: 0.5
});
crosshairInstance.speed = CROSSHAIR_SPEED;
crosshairInstance.x = WORLD_WIDTH / 2;
crosshairInstance.y = WORLD_HEIGHT / 2;
game.addChild(crosshairInstance);
// Initialize Virtual Joystick
joystickInstance = new VirtualJoystick();
joystickInstance.initialize('joystick_base_asset', 'joystick_knob_asset', JOYSTICK_VISUAL_RADIUS, JOYSTICK_INTERACTION_RADIUS);
game.addChild(joystickInstance);
joystickInstance.visible = false; // Start hidden, will appear on first touch
// --- Event Handlers ---
game.down = function (x, y, eventObj) {
	if (upgradesPopup) {
		// Block all input and pause game when popup is open
		return;
	}
	// Always show joystick at finger, and only allow one joystick at a time
	joystickInstance.x = x;
	joystickInstance.y = y;
	joystickInstance.visible = true;
	// Always activate joystick at this position, treat as local origin
	if (joystickInstance.processDown(x, y, eventObj, true)) {
		joystickTouchId = eventObj.identifier;
		isFiring = true; // Only allow firing while finger is held
	}
};
game.move = function (x, y, eventObj) {
	if (upgradesPopup) {
		// Block all input and pause game when popup is open
		return;
	}
	if (joystickInstance.active && eventObj.identifier === joystickTouchId) {
		joystickInstance.processMove(x, y, eventObj);
	}
	// No crosshair update here; handled in game.update
};
game.up = function (x, y, eventObj) {
	if (upgradesPopup) {
		// Block all input and pause game when popup is open
		return;
	}
	if (eventObj.identifier === joystickTouchId) {
		joystickInstance.processUp(eventObj);
		joystickInstance.visible = false;
		joystickTouchId = null;
		isFiring = false;
	}
};
// --- Game Loop ---
// --- Game Loop ---
game.update = function () {
	// Block all game updates while upgrades popup is open
	if (upgradesPopup) {
		return;
	}
	var currentTime = LK.ticks * (1000 / 60); // Approximate current time in ms
	// 0. Update Crosshair Position based on Joystick
	if (crosshairInstance && joystickInstance) {
		// Calculate how far the knob is from the center (0..1)
		var knobDistance = Math.sqrt(joystickInstance.deltaX * joystickInstance.deltaX + joystickInstance.deltaY * joystickInstance.deltaY);
		// Crosshair speed is proportional to knob distance, up to CROSSHAIR_SPEED
		var effectiveSpeed = CROSSHAIR_SPEED * knobDistance * 2 / 1.5;
		crosshairInstance.x += joystickInstance.deltaX * effectiveSpeed;
		crosshairInstance.y += joystickInstance.deltaY * effectiveSpeed;
		// Clamp crosshair to screen bounds (considering anchor is 0.5, 0.5)
		var chHW = crosshairInstance.graphic.width / 2;
		var chHH = crosshairInstance.graphic.height / 2;
		crosshairInstance.x = Math.max(chHW, Math.min(WORLD_WIDTH - chHW, crosshairInstance.x));
		crosshairInstance.y = Math.max(chHH, Math.min(WORLD_HEIGHT - chHH, crosshairInstance.y));
	}
	// 1. Firing Logic
	// Crosshair should deal damage at FIRE_RATE_MS intervals, even if joystick is not being held
	if (currentTime >= lastFireTime + FIRE_RATE_MS) {
		lastFireTime = currentTime;
		for (var k = 0; k < fallingObjects.length; k++) {
			var target = fallingObjects[k];
			if (!target.isDestroyed && crosshairInstance.isOver(target)) {
				target.takeDamage(FIRE_DAMAGE);
				LK.getSound('Shoot').play(); // Play shoot sound when hitting a target
				// Create particle explosion at hit location
				var particleCount = 3 + Math.floor(Math.random() * 3); // 3 to 5 particles
				for (var p = 0; p < particleCount; p++) {
					var randomScale = 0.5 + Math.random() * 1.5; // Random scale between 0.5 and 2.0
					var particle = LK.getAsset('particle', {
						anchorX: 0.5,
						anchorY: 0.5,
						scaleX: randomScale,
						scaleY: randomScale
					});
					particle.x = target.x;
					particle.y = target.y;
					game.addChild(particle);
					// Random direction and speed for each particle
					var angle = Math.random() * Math.PI * 2;
					var speed = 100 + Math.random() * 100; // Random speed between 100-200
					var velocityX = Math.cos(angle) * speed;
					var velocityY = Math.sin(angle) * speed;
					// Animate particle movement and scale down
					tween(particle, {
						x: particle.x + velocityX,
						y: particle.y + velocityY,
						scaleX: 0,
						scaleY: 0
					}, {
						duration: 1000,
						easing: tween.easeOut,
						onFinish: function onFinish() {
							if (particle.parent) {
								game.removeChild(particle);
							}
						}
					});
				}
				break; // Optional: Hit only one target per shot
			}
		}
	}
	// 2. Update twinkling stars
	updateStars();
	// 3. Spawn new falling objects
	if (currentTime >= nextSpawnTime) {
		spawnFallingObject();
		nextSpawnTime = currentTime + SPAWN_INTERVAL_MS_MIN + Math.random() * (SPAWN_INTERVAL_MS_MAX - SPAWN_INTERVAL_MS_MIN);
	}
	// 4. Update and check falling objects
	for (var i = fallingObjects.length - 1; i >= 0; i--) {
		var obj = fallingObjects[i];
		if (obj.isDestroyed) {
			// Remove from game immediately when destroyed
			if (obj.parent) {
				game.removeChild(obj);
			}
			fallingObjects.splice(i, 1);
			continue;
		}
		obj.update();
		// Calculate the Y coordinate of the "middle" of the city image
		var cityMiddleY = cityInstance.y - cityInstance.graphic.height / 2;
		// Check if the falling object has reached the middle of the city
		if (obj.y + obj.graphic.height * 0.5 * (obj.graphic.scaleY || 1) >= cityMiddleY) {
			var damageToCity = obj.objectType === 'meteor' ? METEOR_DAMAGE_TO_CITY : ALIEN_DAMAGE_TO_CITY;
			cityInstance.takeDamage(damageToCity);
			LK.getSound('Boom').play(); // Play boom sound when object hits city
			obj.destroySelf();
			continue;
		}
		if (obj.y - obj.graphic.height * 0.5 * (obj.graphic.scaleY || 1) > WORLD_HEIGHT) {
			obj.destroySelf();
			continue;
		}
	}
	// Old safety check for playerHoldingTarget is removed as that system is gone.
	// Always ensure crosshair is rendered above all falling objects
	if (crosshairInstance && crosshairInstance.parent === game) {
		game.removeChild(crosshairInstance);
		game.addChild(crosshairInstance);
	}
};

===================================================================
--- original.js
+++ change.js
@@ -642,15 +642,16 @@
 	var iconSize = 240;
 	var iconSpacing = 360;
 	var gridStartX = WORLD_WIDTH / 2 - iconSpacing;
 	var gridStartY = title.y + 140;
+	var rowSpacing = 420; // Increased spacing between rows to prevent text overlap
 	for (var i = 0; i < UPGRADE_DEFS.length; i++) {
 		(function (i) {
 			var upg = UPGRADE_DEFS[i];
 			var row = Math.floor(i / 3);
 			var col = i % 3;
 			var iconX = gridStartX + col * iconSpacing;
-			var iconY = gridStartY + row * iconSpacing;
+			var iconY = gridStartY + row * rowSpacing;
 			// Icon background/placeholder (will be replaced with actual upgrade icons later)
 			var iconBg = LK.getAsset('fon', {
 				anchorX: 0.5,
 				anchorY: 0.5,