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

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0xffffff // White background for clarity
});

/**** 
* Game Code
****/ 
// --- GLOBALS ---
var countingDirection = 1; // 1: up, -1: down
var startNumber = 0;
var targetNumber = 10;
var currentNumber = 0;
var gameStarted = false;
// UI elements
var numberText = null;
var infoText = null;
var optionButtons = [];
var directionButtons = [];
var selectedTarget = null;
var selectedDirection = null;
// --- UI HELPERS ---
// Create a button as a colored box with text, returns a Container
function createButton(label, x, y, width, height, color, onTap) {
	var btn = new Container();
	var box = btn.attachAsset('buttonBox', {
		width: width,
		height: height,
		color: color,
		anchorX: 0.5,
		anchorY: 0.5
	});
	var txt = new Text2(label, {
		size: 80,
		fill: 0xFFFFFF
	});
	txt.anchor.set(0.5, 0.5);
	txt.x = 0;
	txt.y = 0;
	btn.addChild(txt);
	btn.x = x;
	btn.y = y;
	btn.interactive = true;
	btn.down = function (x, y, obj) {
		if (onTap) onTap();
	};
	return btn;
}
// --- GAME SETUP ---
// Show the pre-game menu: select target number and direction
function showMenu() {
	gameStarted = false;
	// Remove previous UI if any
	if (numberText) {
		numberText.destroy();
		numberText = null;
	}
	if (infoText) {
		infoText.destroy();
		infoText = null;
	}
	for (var i = 0; i < optionButtons.length; i++) {
		optionButtons[i].destroy();
	}
	optionButtons = [];
	for (var i = 0; i < directionButtons.length; i++) {
		directionButtons[i].destroy();
	}
	directionButtons = [];
	// Remove infoText usage, but keep for cleanup
	infoText = null;
	// --- HEADER RECTANGLE ---
	var headerHeight = 320; // Increased height for a more vertically extended header
	var headerY = 420; // Moved header further down
	var headerRect = game.attachAsset('centerCircle', {
		width: 800,
		height: headerHeight,
		color: 0x4a90e2,
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2048 / 2,
		y: headerY
	});
	game.addChild(headerRect);
	optionButtons.push(headerRect); // So it gets cleaned up with the rest of the menu
	// Target number options (1-25) as a 5x5 grid
	var targets = [];
	for (var i = 1; i <= 25; i++) {
		targets.push(i);
	}
	var btnW = 200,
		btnH = 200; // Make buttons square
	var gapX = 40;
	var gapY = 40;
	var gridCols = 5;
	var gridRows = 5;
	// Calculate total grid width and height
	var gridTotalWidth = gridCols * btnW + (gridCols - 1) * gapX;
	var gridTotalHeight = gridRows * btnH + (gridRows - 1) * gapY;
	// Center grid on screen
	var gridStartX = (2048 - gridTotalWidth) / 2 + btnW / 2;
	var gridStartY = (2732 - gridTotalHeight) / 2 + btnH / 2;
	for (var i = 0; i < targets.length; i++) {
		(function (idx) {
			var t = targets[idx];
			var col = idx % gridCols;
			var row = Math.floor(idx / gridCols);
			var x = gridStartX + col * (btnW + gapX);
			var y = gridStartY + row * (btnH + gapY);
			var btn = createButton("" + t, x, y, btnW, btnH, 0x4a90e2, function () {
				selectTarget(t, idx);
			});
			optionButtons.push(btn);
			game.addChild(btn);
		})(i);
	}
	// Direction selection: "Artarak" (up), "Azalarak" (down)
	var dirLabels = ["Artarak", "Azalarak"];
	var dirVals = [1, -1];
	var dirBtnW = 400,
		dirBtnH = 150;
	var dirGap = 100;
	var dirStartX = (2048 - (2 * dirBtnW + dirGap)) / 2 + dirBtnW / 2;
	// Place direction buttons below the grid
	var gridEndY = gridStartY + (gridRows - 1) * (btnH + gapY) + btnH / 2;
	var dirBtnY = gridEndY + 120; // 120px below the last row of grid
	for (var i = 0; i < 2; i++) {
		(function (idx) {
			var btn = createButton(dirLabels[idx], dirStartX + idx * (dirBtnW + dirGap), dirBtnY, dirBtnW, dirBtnH, 0x7ed957, function () {
				selectDirection(dirVals[idx], idx);
			});
			directionButtons.push(btn);
			game.addChild(btn);
		})(i);
	}
}
// When a target number is selected
function selectTarget(t, idx) {
	targetNumber = t;
	selectedTarget = idx;
	// Highlight selected
	for (var i = 0; i < optionButtons.length; i++) {
		optionButtons[i].children[0].tint = i === idx ? 0xffc107 : 0xffffff;
	}
	// If direction already selected, start game
	if (selectedDirection !== null) {
		startGame();
	}
}
// When a direction is selected
function selectDirection(dir, idx) {
	countingDirection = dir;
	selectedDirection = idx;
	// Highlight selected
	for (var i = 0; i < directionButtons.length; i++) {
		directionButtons[i].children[0].tint = i === idx ? 0xffc107 : 0xffffff;
	}
	// If target already selected, start game
	if (selectedTarget !== null) {
		startGame();
	}
}
// --- GAMEPLAY ---
function startGame() {
	// Remove menu UI
	if (infoText) {
		infoText.destroy();
		infoText = null;
	}
	for (var i = 0; i < optionButtons.length; i++) {
		optionButtons[i].destroy();
	}
	optionButtons = [];
	for (var i = 0; i < directionButtons.length; i++) {
		directionButtons[i].destroy();
	}
	directionButtons = [];
	// Set start number
	if (countingDirection === 1) {
		startNumber = targetNumber; // artarak: start at 1x target
	} else {
		startNumber = targetNumber * 10; // azalarak: start at 10x target
	}
	currentNumber = startNumber;
	// Show current number
	numberText = new Text2("" + currentNumber, {
		size: 350,
		fill: 0x222222
	});
	numberText.anchor.set(0.5, 0.5);
	numberText.x = 2048 / 2;
	numberText.y = 2732 / 2;
	game.addChild(numberText);
	gameStarted = true;
}
// --- GAME INTERACTION ---
// On tap/click anywhere, increment or decrement number
game.down = function (x, y, obj) {
	if (!gameStarted) return;
	// Animate numberText (scale up and back)
	tween(numberText, {
		scaleX: 1.2,
		scaleY: 1.2
	}, {
		duration: 80,
		easing: tween.easeOut,
		onFinish: function onFinish() {
			tween(numberText, {
				scaleX: 1,
				scaleY: 1
			}, {
				duration: 80,
				easing: tween.easeIn
			});
		}
	});
	// Update number
	if (countingDirection === 1) {
		currentNumber += targetNumber;
	} else {
		currentNumber -= targetNumber;
	}
	numberText.setText("" + currentNumber);
	// Check for win
	if (countingDirection === 1 && currentNumber >= targetNumber * 10 || countingDirection === -1 && currentNumber <= 0) {
		// Disable further input
		gameStarted = false;
		// Wait 1.3 seconds before restarting the game (showMenu)
		LK.setTimeout(function () {
			showMenu();
		}, 1300);
	}
};
// --- GAME RESET ---
// When game is reset, show menu again
game.on('reset', function () {
	showMenu();
});
// --- INITIALIZE ---
showMenu();

===================================================================
--- original.js
+++ change.js
@@ -76,13 +76,12 @@
 	directionButtons = [];
 	// Remove infoText usage, but keep for cleanup
 	infoText = null;
 	// --- HEADER RECTANGLE ---
-	var headerHeight = 400; // Increased height for a more vertically extended header
+	var headerHeight = 320; // Increased height for a more vertically extended header
 	var headerY = 420; // Moved header further down
 	var headerRect = game.attachAsset('centerCircle', {
-		width: 900,
-		// Increased width for a larger header
+		width: 800,
 		height: headerHeight,
 		color: 0x4a90e2,
 		anchorX: 0.5,
 		anchorY: 0.5,
@@ -95,12 +94,12 @@
 	var targets = [];
 	for (var i = 1; i <= 25; i++) {
 		targets.push(i);
 	}
-	var btnW = 260,
-		btnH = 260; // Make buttons square and larger
-	var gapX = 48;
-	var gapY = 48;
+	var btnW = 200,
+		btnH = 200; // Make buttons square
+	var gapX = 40;
+	var gapY = 40;
 	var gridCols = 5;
 	var gridRows = 5;
 	// Calculate total grid width and height
 	var gridTotalWidth = gridCols * btnW + (gridCols - 1) * gapX;
@@ -124,11 +123,11 @@
 	}
 	// Direction selection: "Artarak" (up), "Azalarak" (down)
 	var dirLabels = ["Artarak", "Azalarak"];
 	var dirVals = [1, -1];
-	var dirBtnW = 520,
-		dirBtnH = 200;
-	var dirGap = 120;
+	var dirBtnW = 400,
+		dirBtnH = 150;
+	var dirGap = 100;
 	var dirStartX = (2048 - (2 * dirBtnW + dirGap)) / 2 + dirBtnW / 2;
 	// Place direction buttons below the grid
 	var gridEndY = gridStartY + (gridRows - 1) * (btnH + gapY) + btnH / 2;
 	var dirBtnY = gridEndY + 120; // 120px below the last row of grid