===================================================================
--- original.js
+++ change.js
@@ -1,10 +1,79 @@
 /**** 
 * Plugins
 ****/ 
-var storage = LK.import("@upit/storage.v1");
+var tween = LK.import("@upit/tween.v1");
+var storage = LK.import("@upit/storage.v1", {
+	scores: []
+});
 
 /**** 
+* Classes
+****/ 
+var GridCell = Container.expand(function (gridX, gridY) {
+	var self = Container.call(this);
+	self.gridX = gridX;
+	self.gridY = gridY;
+	self.value = 0;
+	self.isHighlighted = false;
+	var borderBg = self.attachAsset('gridBorder', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	borderBg.alpha = 1; // Ensure border is fully visible
+	borderBg.tint = 0xffffff; // Ensure white color
+	var cellBg = self.attachAsset('gridCell', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	var highlightBg = self.attachAsset('gridCellHighlight', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		alpha: 0
+	});
+	self.valueText = new Text2('', {
+		size: 60,
+		fill: 0xFFFFFF
+	});
+	self.valueText.anchor.set(0.5, 0.5);
+	self.addChild(self.valueText);
+	self.highlight = function () {
+		if (!self.isHighlighted) {
+			self.isHighlighted = true;
+			tween(highlightBg, {
+				alpha: 0.7
+			}, {
+				duration: 200
+			});
+		}
+	};
+	self.unhighlight = function () {
+		if (self.isHighlighted) {
+			self.isHighlighted = false;
+			tween(highlightBg, {
+				alpha: 0
+			}, {
+				duration: 200
+			});
+		}
+	};
+	self.setValue = function (newValue) {
+		self.value = newValue;
+		if (self.value > 0) {
+			self.valueText.setText(self.value.toString());
+		} else {
+			self.valueText.setText('');
+		}
+	};
+	self.down = function (x, y, obj) {
+		if (gameState === 'playing') {
+			handleCellClick(self.gridX, self.gridY);
+		}
+	};
+	return self;
+});
+
+/**** 
 * Initialize Game
 ****/ 
 var game = new LK.Game({
 	backgroundColor: 0x000000
@@ -12,244 +81,210 @@
 
 /**** 
 * Game Code
 ****/ 
-// Game variables
-var gridSize = 10;
-var cellSize = 150;
-var gridStartX = (2048 - gridSize * cellSize) / 2;
-var gridStartY = 400;
-var grid = [];
+// Create space background with stars, nebulas, planets and asteroids
+for (var i = 0; i < 300; i++) {
+	var star = game.addChild(LK.getAsset('star', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	}));
+	star.x = Math.random() * 2048;
+	star.y = Math.random() * 2732;
+	star.alpha = Math.random() * 0.8 + 0.2;
+}
+// Add nebulas for depth
+for (var i = 0; i < 15; i++) {
+	var nebula = game.addChild(LK.getAsset('nebula', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	}));
+	nebula.x = Math.random() * 2048;
+	nebula.y = Math.random() * 2732;
+	nebula.alpha = Math.random() * 0.3 + 0.1;
+	nebula.scaleX = Math.random() * 2 + 0.5;
+	nebula.scaleY = Math.random() * 2 + 0.5;
+	var colors = [0x4B0082, 0x8A2BE2, 0x9932CC, 0x483D8B];
+	nebula.tint = colors[Math.floor(Math.random() * colors.length)];
+}
+// Add distant planets
+for (var i = 0; i < 8; i++) {
+	var planet = game.addChild(LK.getAsset('planet', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	}));
+	planet.x = Math.random() * 2048;
+	planet.y = Math.random() * 2732;
+	planet.alpha = Math.random() * 0.6 + 0.3;
+	planet.scaleX = Math.random() * 1.5 + 0.5;
+	planet.scaleY = Math.random() * 1.5 + 0.5;
+	var planetColors = [0x8B4513, 0xFF4500, 0x32CD32, 0x4169E1, 0xDC143C];
+	planet.tint = planetColors[Math.floor(Math.random() * planetColors.length)];
+}
+// Add floating asteroids
+for (var i = 0; i < 25; i++) {
+	var asteroid = game.addChild(LK.getAsset('asteroid', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	}));
+	asteroid.x = Math.random() * 2048;
+	asteroid.y = Math.random() * 2732;
+	asteroid.alpha = Math.random() * 0.7 + 0.2;
+	asteroid.scaleX = Math.random() * 1.2 + 0.3;
+	asteroid.scaleY = Math.random() * 1.2 + 0.3;
+	asteroid.rotation = Math.random() * Math.PI * 2;
+}
+// Game state
+var gameState = 'playing'; // 'playing', 'won', 'lost'
 var playerX = 0;
 var playerY = 0;
-var moveCount = 0;
 var totalSum = 0;
+var moveCount = 0;
 var maxMoves = 100;
-var gameState = 'playing';
-// Initialize grid
-for (var x = 0; x < gridSize; x++) {
-	grid[x] = [];
-	for (var y = 0; y < gridSize; y++) {
-		var cell = new Container();
-		cell.x = gridStartX + x * cellSize;
-		cell.y = gridStartY + y * cellSize;
-		cell.value = 0;
-		cell.gridX = x;
-		cell.gridY = y;
-		// Add visual background for cell
-		var cellBg = cell.attachAsset('gridCell', {
-			anchorX: 0.5,
-			anchorY: 0.5
-		});
-		cell.setValue = function (val) {
-			this.value = val;
-			if (val > 0) {
-				// Remove old text if exists
-				if (this.valueText) {
-					this.removeChild(this.valueText);
-				}
-				// Add number text
-				this.valueText = new Text2(val.toString(), {
-					size: 40,
-					fill: 0x000000
-				});
-				this.valueText.anchor.set(0.5, 0.5);
-				this.addChild(this.valueText);
-				// Change background to player color
-				if (this.background) {
-					this.removeChild(this.background);
-				}
-				this.background = this.attachAsset('playerCell', {
-					anchorX: 0.5,
-					anchorY: 0.5
-				});
-			}
-		};
-		// Add click handling
-		cell.down = function (x, y, obj) {
-			handleCellClick(this.gridX, this.gridY);
-		};
-		grid[x][y] = cell;
-		game.addChild(cell);
-	}
-}
-// Initialize storage with default scores if not exists
-if (!storage.scores) {
-	storage.scores = [];
-}
-// Create UI elements
-var moveCountText = new Text2('Moves: 0', {
-	size: 60,
-	fill: 0xffffff
-});
-moveCountText.anchor.set(0.5, 0);
-moveCountText.x = 2048 / 2;
-moveCountText.y = 50;
-game.addChild(moveCountText);
+// Grid setup
+var gridSize = 10;
+var cellSize = 180;
+var gridStartX = (2048 - gridSize * cellSize) / 2;
+var gridStartY = 200;
+var grid = [];
+// UI elements
 var totalText = new Text2('Total: 0', {
-	size: 60,
-	fill: 0xffffff
+	size: 80,
+	fill: 0xFFFFFF
 });
 totalText.anchor.set(0.5, 0);
 totalText.x = 2048 / 2;
-totalText.y = 120;
+totalText.y = 50;
 game.addChild(totalText);
-var instructionText = new Text2('Click any cell to start!', {
-	size: 40,
-	fill: 0xffff00
+var movesText = new Text2('Moves: 0/100', {
+	size: 60,
+	fill: 0xFFFFFF
 });
-instructionText.anchor.set(0.5, 0);
+movesText.anchor.set(0.5, 0);
+movesText.x = 2048 / 2;
+movesText.y = 2600;
+game.addChild(movesText);
+var instructionText = new Text2('Click to move! Reach 100 moves to win!', {
+	size: 50,
+	fill: 0xFFFF00
+});
+instructionText.anchor.set(0.5, 1);
 instructionText.x = 2048 / 2;
-instructionText.y = 200;
+instructionText.y = 2700;
 game.addChild(instructionText);
-// Initialize first move highlights
-updateValidMoves();
-// Helper functions
-function isValidMove(fromX, fromY, toX, toY) {
-	var dx = Math.abs(toX - fromX);
-	var dy = Math.abs(toY - fromY);
-	return dx === 2 && dy === 1 || dx === 1 && dy === 2;
-}
-function getValidMoves(x, y) {
-	var moves = [];
-	var directions = [{
-		x: 2,
-		y: 1
-	}, {
-		x: 2,
-		y: -1
-	}, {
-		x: -2,
-		y: 1
-	}, {
-		x: -2,
-		y: -1
-	}, {
-		x: 1,
-		y: 2
-	}, {
-		x: 1,
-		y: -2
-	}, {
-		x: -1,
-		y: 2
-	}, {
-		x: -1,
-		y: -2
-	}];
-	for (var i = 0; i < directions.length; i++) {
-		var newX = x + directions[i].x;
-		var newY = y + directions[i].y;
-		if (newX >= 0 && newX < gridSize && newY >= 0 && newY < gridSize) {
-			moves.push({
-				x: newX,
-				y: newY
-			});
-		}
+// Create grid
+for (var x = 0; x < gridSize; x++) {
+	grid[x] = [];
+	for (var y = 0; y < gridSize; y++) {
+		var cell = new GridCell(x, y);
+		cell.x = gridStartX + x * cellSize + cellSize / 2;
+		cell.y = gridStartY + y * cellSize + cellSize / 2;
+		grid[x][y] = cell;
+		game.addChild(cell);
+		// Ensure border is always on top and visible
+		cell.children[0].alpha = 1;
+		cell.children[0].tint = 0xffffff;
 	}
-	return moves;
 }
+// Player indicator
+var playerIndicator = game.addChild(LK.getAsset('playerIndicator', {
+	anchorX: 0.5,
+	anchorY: 0.5
+}));
 function updatePlayerPosition() {
-	// Update player position visual indicator
+	playerIndicator.x = grid[playerX][playerY].x;
+	playerIndicator.y = grid[playerX][playerY].y - 60;
 }
 function updateValidMoves() {
-	// Clear previous highlights
+	// Clear all highlights
 	for (var x = 0; x < gridSize; x++) {
 		for (var y = 0; y < gridSize; y++) {
-			if (grid[x][y].highlight) {
-				grid[x][y].removeChild(grid[x][y].highlight);
-				grid[x][y].highlight = null;
-			}
+			grid[x][y].unhighlight();
 		}
 	}
+	// If this is the first move (moveCount is 0), highlight all empty cells
 	if (moveCount === 0) {
-		// For first move, highlight all empty cells
 		for (var x = 0; x < gridSize; x++) {
 			for (var y = 0; y < gridSize; y++) {
 				if (grid[x][y].value === 0) {
-					var highlight = LK.getAsset('finalScoreBackground', {
-						anchorX: 0.5,
-						anchorY: 0.5,
-						scaleX: 0.8,
-						scaleY: 0.8,
-						alpha: 0.3
-					});
-					grid[x][y].addChild(highlight);
-					grid[x][y].highlight = highlight;
+					grid[x][y].highlight();
 				}
 			}
 		}
 	} else {
-		// Highlight valid knight moves from current position
+		// Highlight valid moves from current position, but only if they are empty (value === 0)
 		var validMoves = getValidMoves(playerX, playerY);
 		for (var i = 0; i < validMoves.length; i++) {
 			var move = validMoves[i];
 			if (grid[move.x][move.y].value === 0) {
-				var highlight = LK.getAsset('finalScoreBackground', {
-					anchorX: 0.5,
-					anchorY: 0.5,
-					scaleX: 0.8,
-					scaleY: 0.8,
-					alpha: 0.3
-				});
-				grid[move.x][move.y].addChild(highlight);
-				grid[move.x][move.y].highlight = highlight;
+				grid[move.x][move.y].highlight();
 			}
 		}
 	}
 }
-function updateUI() {
-	// Update UI elements
-	if (moveCountText) {
-		moveCountText.setText('Moves: ' + moveCount);
-	}
-	if (totalText) {
-		totalText.setText('Total: ' + totalSum);
-	}
-	if (instructionText) {
-		if (moveCount === 0) {
-			instructionText.setText('Click any cell to start!');
-		} else {
-			instructionText.setText('Knight moves only! (L-shape)');
+function getValidMoves(x, y) {
+	var moves = [];
+	// 3 squares orthogonal moves
+	var orthogonalMoves = [{
+		x: x + 3,
+		y: y
+	},
+	// right 3
+	{
+		x: x - 3,
+		y: y
+	},
+	// left 3
+	{
+		x: x,
+		y: y + 3
+	},
+	// down 3
+	{
+		x: x,
+		y: y - 3
+	} // up 3
+	];
+	// 2 square diagonal moves
+	var diagonalMoves = [{
+		x: x + 2,
+		y: y + 2
+	},
+	// down-right
+	{
+		x: x + 2,
+		y: y - 2
+	},
+	// up-right
+	{
+		x: x - 2,
+		y: y + 2
+	},
+	// down-left
+	{
+		x: x - 2,
+		y: y - 2
+	} // up-left
+	];
+	var allMoves = orthogonalMoves.concat(diagonalMoves);
+	for (var i = 0; i < allMoves.length; i++) {
+		var move = allMoves[i];
+		if (move.x >= 0 && move.x < gridSize && move.y >= 0 && move.y < gridSize) {
+			moves.push(move);
 		}
 	}
+	return moves;
 }
-function saveScore() {
-	try {
-		var scores = storage.scores || [];
-		var newScore = {
-			score: totalSum,
-			moves: moveCount,
-			date: Date.now()
-		};
-		// Insert score in correct position (highest first)
-		var inserted = false;
-		for (var i = 0; i < scores.length; i++) {
-			if (newScore.score > scores[i].score) {
-				scores.splice(i, 0, newScore);
-				inserted = true;
-				break;
-			}
+function isValidMove(fromX, fromY, toX, toY) {
+	var validMoves = getValidMoves(fromX, fromY);
+	for (var i = 0; i < validMoves.length; i++) {
+		var move = validMoves[i];
+		if (move.x === toX && move.y === toY) {
+			return true;
 		}
-		if (!inserted) {
-			scores.push(newScore);
-		}
-		// Keep only top 10 scores
-		if (scores.length > 10) {
-			scores = scores.slice(0, 10);
-		}
-		storage.scores = scores;
-	} catch (error) {
-		console.log('Error saving score:', error);
-		// Create default scores array if storage fails
-		storage.scores = [{
-			score: totalSum,
-			moves: moveCount,
-			date: Date.now()
-		}];
 	}
+	return false;
 }
-// Check if player has completed the game or has no valid moves
 function handleCellClick(clickX, clickY) {
 	if (gameState !== 'playing') {
 		return;
 	}
@@ -281,9 +316,9 @@
 		// Check win condition
 		if (moveCount >= 100) {
 			gameState = 'won';
 			saveScore();
-			showFinalScore();
+			LK.showYouWin();
 		} else {
 			// Check if there are any valid moves left (empty cells that can be reached)
 			var validMoves = getValidMoves(playerX, playerY);
 			var hasValidMoves = false;
@@ -304,15 +339,43 @@
 		LK.getSound('invalid').play();
 		LK.effects.flashObject(grid[clickX][clickY], 0xff0000, 500);
 	}
 }
-// Display the final score and leaderboard
+function updateUI() {
+	totalText.setText('Total: ' + totalSum);
+	movesText.setText('Moves: ' + moveCount + '/' + maxMoves);
+	if (moveCount >= 100) {
+		totalText.fill = 0x00ff00;
+	} else if (moveCount >= maxMoves * 0.8) {
+		movesText.style = {
+			fill: 0xff6600
+		};
+	}
+}
+function saveScore() {
+	var scores = storage.scores || [];
+	var newScore = {
+		score: totalSum,
+		moves: moveCount,
+		timestamp: Date.now()
+	};
+	scores.push(newScore);
+	// Sort by score (descending)
+	scores.sort(function (a, b) {
+		return b.score - a.score;
+	});
+	// Keep only top 10
+	if (scores.length > 10) {
+		scores = scores.slice(0, 10);
+	}
+	storage.scores = scores;
+}
 function showFinalScore() {
 	// Create final score display positioned over the center of the grid
 	var finalScoreContainer = new Container();
 	finalScoreContainer.x = 2048 / 2;
 	finalScoreContainer.y = gridStartY + gridSize * cellSize / 2;
-	// Background for final score and leaderboard
+	// Add white background - make it bigger for leaderboard
 	var background = finalScoreContainer.attachAsset('finalScoreBackground', {
 		anchorX: 0.5,
 		anchorY: 0.5,
 		scaleX: 1.5,
@@ -328,35 +391,40 @@
 			playerRank = i + 1;
 			break;
 		}
 	}
-	// Display congratulations and game completion message
+	// Congratulations title
 	var congratsText = new Text2('Congratulations!', {
 		size: 80,
-		fill: 0x000000
+		fill: 0x000000,
+		font: "'Arial', sans-serif"
 	});
 	congratsText.anchor.set(0.5, 0.5);
 	congratsText.y = -350;
 	finalScoreContainer.addChild(congratsText);
+	// Game completion message
 	var completionText = new Text2("You've completed the game, but there are no more valid moves left.", {
 		size: 40,
-		fill: 0x000000
+		fill: 0x000000,
+		font: "'Arial', sans-serif"
 	});
 	completionText.anchor.set(0.5, 0.5);
 	completionText.y = -280;
 	finalScoreContainer.addChild(completionText);
 	// Final score message
 	var finalScoreText = new Text2('Your final score is ' + currentScore + '.', {
 		size: 50,
-		fill: 0x000000
+		fill: 0x000000,
+		font: "'Arial', sans-serif"
 	});
 	finalScoreText.anchor.set(0.5, 0.5);
 	finalScoreText.y = -220;
 	finalScoreContainer.addChild(finalScoreText);
 	// Leaderboard title
 	var leaderboardTitle = new Text2("Here's how you rank among other players:", {
 		size: 45,
-		fill: 0x000000
+		fill: 0x000000,
+		font: "'Arial', sans-serif"
 	});
 	leaderboardTitle.anchor.set(0.5, 0.5);
 	leaderboardTitle.y = -150;
 	finalScoreContainer.addChild(leaderboardTitle);
@@ -364,9 +432,10 @@
 	var yOffset = -80;
 	for (var i = 0; i < Math.min(5, scores.length); i++) {
 		var scoreText = new Text2('Player ' + (i + 1) + ' – ' + scores[i].score, {
 			size: 35,
-			fill: 0x000000
+			fill: 0x000000,
+			font: "'Arial', sans-serif"
 		});
 		scoreText.anchor.set(0.5, 0.5);
 		scoreText.y = yOffset;
 		finalScoreContainer.addChild(scoreText);
@@ -374,28 +443,31 @@
 	}
 	// Player rank
 	var rankText = new Text2('Your position: ' + playerRank, {
 		size: 45,
-		fill: 0xff0000
+		fill: 0xff0000,
+		font: "'Arial', sans-serif"
 	});
 	rankText.anchor.set(0.5, 0.5);
 	rankText.y = yOffset + 40;
 	finalScoreContainer.addChild(rankText);
-	// Display the highest number reached prominently with a hand-drawn style effect
+	// Display the highest number reached prominently with hand-drawn style effect
 	var highestNumberText = new Text2(moveCount.toString(), {
 		size: 200,
-		fill: 0x000000
+		fill: 0x000000,
+		font: "'Courier New', monospace"
 	});
 	highestNumberText.anchor.set(0.5, 0.5);
 	highestNumberText.y = 250;
-	// Create hand-drawn pencil effect
+	// Create hand-drawn pencil effect by adding multiple slightly offset copies
 	var offsetsX = [-3, 2, -1, 1, -2, 0, 1, -1];
 	var offsetsY = [1, -2, 2, -1, 0, 1, -1, 2];
 	var alphas = [0.3, 0.4, 0.3, 0.4, 0.3, 0.4, 0.3, 0.4];
 	for (var i = 0; i < offsetsX.length; i++) {
 		var shadowText = new Text2(moveCount.toString(), {
 			size: 200,
-			fill: 0x000000
+			fill: 0x000000,
+			font: "'Courier New', monospace"
 		});
 		shadowText.anchor.set(0.5, 0.5);
 		shadowText.x = offsetsX[i];
 		shadowText.y = 250 + offsetsY[i];
@@ -405,11 +477,14 @@
 	// Add the main text on top
 	finalScoreContainer.addChild(highestNumberText);
 	// Add some rotation for hand-drawn effect
 	finalScoreContainer.rotation = (Math.random() - 0.5) * 0.1;
-	// Add the final score container to the game
 	game.addChild(finalScoreContainer);
-	// Trigger game over after showing the leaderboard
+	// Auto trigger game over after showing the leaderboard
 	LK.setTimeout(function () {
 		LK.showGameOver();
 	}, 8000);
-}
\ No newline at end of file
+}
+// Initialize game
+updatePlayerPosition();
+updateValidMoves();
+updateUI();
\ No newline at end of file