===================================================================
--- original.js
+++ change.js
@@ -121,17 +121,21 @@
 	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 {
-			var baseIndex = (self.health - 1) % colorCount;
+			// For higher HP, generate a tone variation
+			var baseIndex = (self.health - 1) % colorCount; // Cycle through base colors
 			var baseColor = hexToRGB(baseColors[baseIndex]);
-			var factor = Math.floor((self.health - 1) / colorCount);
-			var darkenFactor = Math.max(0, 1 - factor * 0.1);
+			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 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);
@@ -425,14 +429,16 @@
 	splashBallCost: 100,
 	sniperBallCost: 500,
 	scatterBallCost: 2000
 };
-var balls = Array.isArray(storage.balls) ? storage.balls.map(function (type) {
-	return createBall(type, true);
-}) : [];
-var bricks = Array.isArray(storage.bricks) ? storage.bricks : [];
-bricks = Array.isArray(bricks) ? bricks : [];
-bricks = bricks || [];
+var balls = [];
+var ballQuantities = storage.ballQuantities || {
+	normal: 0,
+	splash: 0,
+	sniper: 0,
+	scatter: 0
+};
+var bricks = [];
 var brickGrid = {};
 var score = storage.score || 0;
 var level = storage.level || 1;
 var brickGridBounds = null;
@@ -450,9 +456,9 @@
 		splash: false,
 		sniper: false,
 		scatter: false
 	};
-	storage.balls = []; // Clear stored balls
+	unlockedTiers = Object.assign({}, storage.unlockedTiers);
 	storage.upgrades = {
 		normalSpeed: 1,
 		normalPower: 1,
 		splashSpeed: 1,
@@ -476,13 +482,16 @@
 		sniperBallCost: 500,
 		scatterBallCost: 2000
 	};
 	score = 0;
+	storage.ballQuantities = {
+		normal: 0,
+		splash: 0,
+		sniper: 0,
+		scatter: 0
+	};
+	ballQuantities = Object.assign({}, storage.ballQuantities);
 	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();
@@ -523,22 +532,24 @@
 		scaleX: 0.6,
 		scaleY: 0.6,
 		y: -10
 	});
-	ballIcon.tint = type === 'splash' ? 0xff0066 : type === 'sniper' ? 0x00ff99 : type === 'scatter' ? 0xffff00 : 0xffffff;
+	// Set initial tint
+	ballIcon.tint = type === 'splash' ? 0xff0066 : type === 'sniper' ? 0x00ff99 : type === 'scatter' ? 0xffff00 : 0xffffff; // Normal ball
 	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('$' + upgrades[type + 'BallCost'], {
+	var costText = new Text2('$' + (type === 'sniper' ? 500 : type === 'splash' ? 150 : type === 'scatter' ? 2000 : upgrades[type + 'BallCost']), {
 		size: 50,
-		fill: 0x00ffff
+		fill: 0x00ffff // Initial cyan color
 	});
 	costText.anchor.set(0.5, 0);
 	costText.y = 100;
 	button.addChild(costText);
@@ -549,8 +560,10 @@
 		}
 		score -= upgrades[type + 'BallCost'];
 		scoreTxt.setText('$' + score.toString());
 		createBall(type);
+		ballQuantities[type] = (ballQuantities[type] || 0) + 1;
+		storage.ballQuantities = Object.assign({}, ballQuantities);
 		upgrades[type + 'BallCost'] = Math.floor(upgrades[type + 'BallCost'] * 1.3);
 		storage.upgrades = Object.assign({}, upgrades);
 		costText.setText('$' + upgrades[type + 'BallCost']);
 		if (!unlockedTiers[type]) {
@@ -560,13 +573,20 @@
 		}
 	};
 	button.updateState = function () {
 		var isEnabled = (prevTier ? unlockedTiers[prevTier] : true) && score >= upgrades[type + 'BallCost'];
-		buttonGraphics.tint = isEnabled ? 0x00ffff : 0x666666;
+		buttonGraphics.tint = isEnabled ? 0x00ffff : 0x666666; // Button background tint
 		button.interactive = isEnabled;
-		ballIcon.tint = isEnabled ? type === 'splash' ? 0xff0066 : type === 'sniper' ? 0x00ff99 : type === 'scatter' ? 0xffff00 : 0xffffff : 0x666666;
-		typeText.fill = isEnabled ? 0xffffff : 0x666666;
-		costText.fill = isEnabled ? 0x00ffff : 0x666666;
+		// 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
+		}
 	};
 	hud.addChild(button);
 	ballButtons[type] = button;
 }
@@ -618,9 +638,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
+			tint: iconType === 'splashBall' ? 0xff0066 : iconType === 'sniperBall' ? 0x00ff99 : iconType === 'scatterBall' ? 0xffff00 : iconType === 'ball' ? 0xffffff : 0x00ffff // Fallback
 		});
 		contentContainer.addChild(icon);
 	}
 	var labelText = new Text2("".concat(labelPrefix, " x").concat(upgrades[upgradeKey]), {
@@ -676,12 +696,19 @@
 	};
 	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;
+		buttonGraphics.tint = isEnabled ? 0x00ffff : 0x666666; // Button background tint
 		button.interactive = isEnabled;
+		// Update icon tint based on enabled state
 		if (icon) {
-			icon.tint = isEnabled ? iconType === 'splashBall' ? 0xff0066 : iconType === 'sniperBall' ? 0x00ff99 : iconType === 'scatterBall' ? 0xffff00 : iconType === 'ball' ? 0xffffff : 0x00ffff : 0x666666;
+			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;
+			}
 		}
 	};
 	powerupContainer.addChild(button);
 	upgradeButtons[upgradeKey] = button;
@@ -780,16 +807,16 @@
 }
 function createBricks() {
 	var config = levelConfig[level] || {};
 	var totalBricks = config.totalBricks || 50;
-	var baseHitpoints = config.hitpoints || 1;
+	var baseHitpoints = config.hitpoints || 1; // Base HP from level config
 	var gridSize = config.gridSize || 200;
 	var pattern = config.pattern || 'grid';
-	var spacingX = 1;
+	var spacingX = 1; // Reduced spacing between columns
 	var spacingY = 2;
 	brickGrid = {};
-	bricks = Array.isArray(bricks) ? bricks : [];
-	var cols = 7;
+	bricks = [];
+	var cols = 7; // Set to 7 columns
 	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;
@@ -802,28 +829,34 @@
 				brickCount++;
 			}
 		}
 	} else if (pattern === 'staggered') {
-		var centerRow = Math.floor(rows / 2);
-		var centerCol = Math.floor(cols / 2);
+		// 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
 		for (var i = 0; i < rows && brickCount < totalBricks; i++) {
-			var offsetX = 0;
+			var offsetX = 0; // No offset for staggered grid
 			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);
+				var maxDistance = Math.max(centerRow, centerCol); // Max possible distance to edge
 				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);
@@ -835,22 +868,62 @@
 					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;
@@ -885,9 +958,8 @@
 	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);
 	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);
@@ -904,14 +976,8 @@
 		}
 	}
 	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();
@@ -921,11 +987,8 @@
 		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) {
@@ -1039,11 +1102,8 @@
 	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();
@@ -1053,16 +1113,10 @@
 			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 (!Array.isArray(bricks)) {
-			bricks = [];
-		}
 		if (bricks.length === 0) {
 			if (level === Object.keys(levelConfig).length) {
 				LK.showGameOver();
 			} else {