===================================================================
--- original.js
+++ change.js
@@ -121,21 +121,17 @@
 	self.updateTint = function () {
 		var baseColors = LEVEL_COLORS;
 		var colorCount = baseColors.length;
 		if (self.health <= colorCount) {
-			// For HP <= number of colors, use the direct mapping
 			brickGraphics.tint = baseColors[self.health - 1];
 		} else {
-			// For higher HP, generate a tone variation
-			var baseIndex = (self.health - 1) % colorCount; // Cycle through base colors
+			var baseIndex = (self.health - 1) % colorCount;
 			var baseColor = hexToRGB(baseColors[baseIndex]);
-			var factor = Math.floor((self.health - 1) / colorCount); // How many cycles past base colors
-			// Adjust brightness (darken progressively with higher HP)
-			var darkenFactor = Math.max(0, 1 - factor * 0.1); // Reduce by 10% per cycle, clamp at 0
+			var factor = Math.floor((self.health - 1) / colorCount);
+			var darkenFactor = Math.max(0, 1 - factor * 0.1);
 			var r = baseColor.r * darkenFactor;
 			var g = baseColor.g * darkenFactor;
 			var b = baseColor.b * darkenFactor;
-			// Ensure values stay within valid range (0-255)
 			r = Math.max(0, Math.min(255, r));
 			g = Math.max(0, Math.min(255, g));
 			b = Math.max(0, Math.min(255, b));
 			brickGraphics.tint = rgbToHex(r, g, b);
@@ -429,9 +425,11 @@
 	splashBallCost: 100,
 	sniperBallCost: 500,
 	scatterBallCost: 2000
 };
-var balls = [];
+var balls = storage.balls ? storage.balls.map(function (type) {
+	return createBall(type, true);
+}) : [];
 var bricks = [];
 var brickGrid = {};
 var score = storage.score || 0;
 var level = storage.level || 1;
@@ -450,9 +448,9 @@
 		splash: false,
 		sniper: false,
 		scatter: false
 	};
-	unlockedTiers = Object.assign({}, storage.unlockedTiers);
+	storage.balls = []; // Clear stored balls
 	storage.upgrades = {
 		normalSpeed: 1,
 		normalPower: 1,
 		splashSpeed: 1,
@@ -477,8 +475,12 @@
 		scatterBallCost: 2000
 	};
 	score = 0;
 	level = 1;
+	balls.forEach(function (ball) {
+		return ball.destroy();
+	}); // Destroy existing balls
+	balls = [];
 	unlockedTiers = Object.assign({}, storage.unlockedTiers);
 	scoreTxt.setText('$' + score.toString());
 	levelTxt.setText('Level: ' + level);
 	updateButtonStates();
@@ -519,24 +521,22 @@
 		scaleX: 0.6,
 		scaleY: 0.6,
 		y: -10
 	});
-	// Set initial tint
-	ballIcon.tint = type === 'splash' ? 0xff0066 : type === 'sniper' ? 0x00ff99 : type === 'scatter' ? 0xffff00 : 0xffffff; // Normal ball
+	ballIcon.tint = type === 'splash' ? 0xff0066 : type === 'sniper' ? 0x00ff99 : type === 'scatter' ? 0xffff00 : 0xffffff;
 	contentContainer.addChild(ballIcon);
 	var displayType = type === 'scatter' ? 'Multi' : type.charAt(0).toUpperCase() + type.slice(1);
 	var typeText = new Text2(displayType, {
 		size: 30,
 		fill: 0xffffff,
-		// Initial white color
 		fontWeight: 'bold'
 	});
 	typeText.anchor.set(0.5, 0);
 	typeText.y = -50;
 	button.addChild(typeText);
-	var costText = new Text2('$' + (type === 'sniper' ? 500 : type === 'splash' ? 150 : type === 'scatter' ? 2000 : upgrades[type + 'BallCost']), {
+	var costText = new Text2('$' + upgrades[type + 'BallCost'], {
 		size: 50,
-		fill: 0x00ffff // Initial cyan color
+		fill: 0x00ffff
 	});
 	costText.anchor.set(0.5, 0);
 	costText.y = 100;
 	button.addChild(costText);
@@ -558,20 +558,13 @@
 		}
 	};
 	button.updateState = function () {
 		var isEnabled = (prevTier ? unlockedTiers[prevTier] : true) && score >= upgrades[type + 'BallCost'];
-		buttonGraphics.tint = isEnabled ? 0x00ffff : 0x666666; // Button background tint
+		buttonGraphics.tint = isEnabled ? 0x00ffff : 0x666666;
 		button.interactive = isEnabled;
-		// Update ballIcon tint based on enabled state
-		if (isEnabled) {
-			ballIcon.tint = type === 'splash' ? 0xff0066 : type === 'sniper' ? 0x00ff99 : type === 'scatter' ? 0xffff00 : 0xffffff; // Restore original ball color
-			typeText.fill = 0xffffff; // White for ball name
-			costText.fill = 0x00ffff; // Cyan for price
-		} else {
-			ballIcon.tint = 0x666666; // Grey out ball icon
-			typeText.fill = 0x666666; // Grey out ball name
-			costText.fill = 0x666666; // Grey out price
-		}
+		ballIcon.tint = isEnabled ? type === 'splash' ? 0xff0066 : type === 'sniper' ? 0x00ff99 : type === 'scatter' ? 0xffff00 : 0xffffff : 0x666666;
+		typeText.fill = isEnabled ? 0xffffff : 0x666666;
+		costText.fill = isEnabled ? 0x00ffff : 0x666666;
 	};
 	hud.addChild(button);
 	ballButtons[type] = button;
 }
@@ -623,9 +616,9 @@
 			anchorY: 0.5,
 			scaleX: 0.5,
 			scaleY: 0.5,
 			y: 40,
-			tint: iconType === 'splashBall' ? 0xff0066 : iconType === 'sniperBall' ? 0x00ff99 : iconType === 'scatterBall' ? 0xffff00 : iconType === 'ball' ? 0xffffff : 0x00ffff // Fallback
+			tint: iconType === 'splashBall' ? 0xff0066 : iconType === 'sniperBall' ? 0x00ff99 : iconType === 'scatterBall' ? 0xffff00 : iconType === 'ball' ? 0xffffff : 0x00ffff
 		});
 		contentContainer.addChild(icon);
 	}
 	var labelText = new Text2("".concat(labelPrefix, " x").concat(upgrades[upgradeKey]), {
@@ -681,19 +674,12 @@
 	};
 	button.updateState = function () {
 		var ballType = upgradeKey.split('Speed')[0].split('Power')[0];
 		var isEnabled = upgradeKey === 'clickDamage' ? score >= baseCost * upgrades[upgradeKey] : unlockedTiers[ballType] && (prevTier ? unlockedTiers[prevTier] : true) && score >= baseCost * upgrades[upgradeKey];
-		buttonGraphics.tint = isEnabled ? 0x00ffff : 0x666666; // Button background tint
+		buttonGraphics.tint = isEnabled ? 0x00ffff : 0x666666;
 		button.interactive = isEnabled;
-		// Update icon tint based on enabled state
 		if (icon) {
-			if (isEnabled) {
-				// Restore original ball color when enabled
-				icon.tint = iconType === 'splashBall' ? 0xff0066 : iconType === 'sniperBall' ? 0x00ff99 : iconType === 'scatterBall' ? 0xffff00 : iconType === 'ball' ? 0xffffff : 0x00ffff;
-			} else {
-				// Grey out when disabled
-				icon.tint = 0x666666;
-			}
+			icon.tint = isEnabled ? iconType === 'splashBall' ? 0xff0066 : iconType === 'sniperBall' ? 0x00ff99 : iconType === 'scatterBall' ? 0xffff00 : iconType === 'ball' ? 0xffffff : 0x00ffff : 0x666666;
 		}
 	};
 	powerupContainer.addChild(button);
 	upgradeButtons[upgradeKey] = button;
@@ -792,16 +778,16 @@
 }
 function createBricks() {
 	var config = levelConfig[level] || {};
 	var totalBricks = config.totalBricks || 50;
-	var baseHitpoints = config.hitpoints || 1; // Base HP from level config
+	var baseHitpoints = config.hitpoints || 1;
 	var gridSize = config.gridSize || 200;
 	var pattern = config.pattern || 'grid';
-	var spacingX = 1; // Reduced spacing between columns
+	var spacingX = 1;
 	var spacingY = 2;
 	brickGrid = {};
 	bricks = [];
-	var cols = 7; // Set to 7 columns
+	var cols = 7;
 	var rows = Math.ceil(totalBricks / cols);
 	var totalWidth = cols * BRICK_WIDTH + (cols - 1) * spacingX;
 	var totalHeight = rows * BRICK_HEIGHT + (rows - 1) * spacingY;
 	var startX = (GAME_WIDTH - totalWidth) / 2 + BRICK_WIDTH / 2;
@@ -814,34 +800,28 @@
 				brickCount++;
 			}
 		}
 	} else if (pattern === 'staggered') {
-		// Staggered pattern with HP gradient from center
-		var centerRow = Math.floor(rows / 2); // Approximate center row
-		var centerCol = Math.floor(cols / 2); // Approximate center column
+		var centerRow = Math.floor(rows / 2);
+		var centerCol = Math.floor(cols / 2);
 		for (var i = 0; i < rows && brickCount < totalBricks; i++) {
-			var offsetX = 0; // No offset for staggered grid
+			var offsetX = 0;
 			for (var j = 0; j < cols && brickCount < totalBricks; j++) {
 				var x = startX + offsetX + j * (BRICK_WIDTH + spacingX);
 				var y = startY + i * (BRICK_HEIGHT + spacingY);
-				// Calculate distance from center (Manhattan distance for simplicity)
 				var rowDistance = Math.abs(i - centerRow);
 				var colDistance = Math.abs(j - centerCol);
-				var maxDistance = Math.max(centerRow, centerCol); // Max possible distance to edge
+				var maxDistance = Math.max(centerRow, centerCol);
 				var distance = Math.max(rowDistance, colDistance);
-				// HP decreases linearly from center to edge
-				// Center gets baseHitpoints, edges get at least 1 HP
 				var hitpoints = Math.max(1, Math.round(baseHitpoints * (1 - distance / maxDistance)));
 				addBrick(x, y, hitpoints, gridSize);
 				brickCount++;
 			}
 		}
 	} else if (pattern === 'clustered') {
-		// Clustered pattern: fill from outside in
 		var centerRow = Math.floor(rows / 2);
 		var centerCol = Math.floor(cols / 2);
 		var maxDistance = Math.max(centerRow, centerCol);
-		// Create a list of all possible grid positions with their distances
 		var positions = [];
 		for (var i = 0; i < rows; i++) {
 			for (var j = 0; j < cols; j++) {
 				var rowDistance = Math.abs(i - centerRow);
@@ -853,62 +833,22 @@
 					distance: distance
 				});
 			}
 		}
-		// Sort positions by distance (descending) to fill from outside in
 		positions.sort(function (a, b) {
 			return b.distance - a.distance;
 		});
-		// Place bricks up to totalBricks limit
 		for (var k = 0; k < positions.length && brickCount < totalBricks; k++) {
 			var pos = positions[k];
 			var i = pos.i;
 			var j = pos.j;
 			var distance = pos.distance;
 			var x = startX + j * (BRICK_WIDTH + spacingX);
 			var y = startY + i * (BRICK_HEIGHT + spacingY);
-			// Optional: HP can still vary if desired, higher on edges here
 			var hitpoints = Math.max(1, Math.round(baseHitpoints * (distance / maxDistance)));
 			addBrick(x, y, hitpoints, gridSize);
 			brickCount++;
 		}
-	} else if (pattern === 'diagonal') {
-		// [Unchanged diagonal pattern code]
-		var stepX = (GAME_WIDTH - BRICK_WIDTH) / (totalBricks - 1);
-		var stepY = GAME_HEIGHT / 3 / (totalBricks - 1);
-		for (var i = 0; i < totalBricks; i++) {
-			var offsetX = i % 2 === 0 ? BRICK_WIDTH / 4 : 0;
-			addBrick(startX + i * stepX + offsetX, startY + i * stepY, baseHitpoints, gridSize);
-			brickCount++;
-		}
-	} else if (pattern === 'sparse') {
-		// Sparse pattern: groups of 3 rows with 2-row gaps
-		var groupSize = 3; // 3 rows per group
-		var gapSize = 2; // 2 rows gap
-		var cycleLength = groupSize + gapSize; // Total rows in one cycle (3 + 2 = 5)
-		while (brickCount < totalBricks) {
-			// Pick a random column
-			var col = Math.floor(Math.random() * cols);
-			var x = startX + col * (BRICK_WIDTH + spacingX);
-			// Pick a random group start row, ensuring space for 3 rows
-			var maxGroupStart = rows - groupSize; // Leave room for 3 rows
-			var groupStart = Math.floor(Math.random() * Math.floor(maxGroupStart / cycleLength)) * cycleLength;
-			// Place bricks in the 3 rows of the group
-			for (var rowOffset = 0; rowOffset < groupSize && brickCount < totalBricks; rowOffset++) {
-				var row = groupStart + rowOffset;
-				if (row >= rows) {
-					continue;
-				} // Skip if beyond grid bounds
-				var y = startY + row * (BRICK_HEIGHT + spacingY);
-				// Check for collision to maintain sparsity
-				if (!bricks.some(function (b) {
-					return b.x === x && b.y === y;
-				})) {
-					addBrick(x, y, baseHitpoints, gridSize);
-					brickCount++;
-				}
-			}
-		}
 	}
 	brickGridBounds = {
 		minX: Math.min.apply(Math, _toConsumableArray2(bricks.map(function (b) {
 			return b.x - BRICK_WIDTH / 2;
@@ -943,12 +883,10 @@
 	brickGrid[gridKey].push(brick);
 }
 function createBall() {
 	var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'normal';
+	var isLoading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 	var ball = new Ball(type);
-	// Reset ball position to ensure it doesn't matter when loaded from storage
-	ball.x = GAME_WIDTH / 2;
-	ball.y = GAME_HEIGHT - BALL_RADIUS * 2;
 	var gridBottom = brickGridBounds ? brickGridBounds.maxY + 150 : GAME_HEIGHT * 0.7;
 	ball.x = GAME_WIDTH / 2 + (Math.random() * 200 - 100);
 	ball.y = Math.min(gridBottom + 100, GAME_HEIGHT - BALL_RADIUS * 2);
 	var angle = (Math.random() * 0.5 + 0.25) * Math.PI;
@@ -964,8 +902,14 @@
 		}
 	}
 	balls.push(ball);
 	game.addChild(ball);
+	if (!isLoading) {
+		storage.balls = balls.map(function (b) {
+			return b.type;
+		});
+	}
+	return ball;
 }
 game.update = function () {
 	for (var i = 0; i < stars.length; i++) {
 		stars[i].update();
@@ -975,8 +919,11 @@
 		ball.update();
 		if (ball.y > GAME_HEIGHT + BALL_RADIUS) {
 			ball.destroy();
 			balls.splice(i, 1);
+			storage.balls = balls.map(function (b) {
+				return b.type;
+			}); // Update storage when a ball is removed
 		}
 	}
 	if (bricks.length === 0) {
 		if (level === Object.keys(levelConfig).length) {
@@ -1090,8 +1037,11 @@
 	resetButton.visible = false;
 	upgradeButton.visible = true;
 	hud.visible = true;
 	createBricks();
+	balls.forEach(function (ball) {
+		return game.addChild(ball);
+	});
 	updateButtonStates();
 	game.update = function () {
 		for (var i = 0; i < stars.length; i++) {
 			stars[i].update();
@@ -1101,8 +1051,11 @@
 			ball.update();
 			if (ball.y > GAME_HEIGHT + BALL_RADIUS) {
 				ball.destroy();
 				balls.splice(i, 1);
+				storage.balls = balls.map(function (b) {
+					return b.type;
+				});
 			}
 		}
 		if (bricks.length === 0) {
 			if (level === Object.keys(levelConfig).length) {