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

/**** 
* Classes
****/ 
/** 
* BeatCell
* Responsibility: To model the state of a single cell on the beat grid. It no longer
* handles its own graphics updates directly, this is delegated to the GridService.
*/ 
var BeatCell = Container.expand(function (row) {
	var self = Container.call(this);
	self.active = false;
	self.row = row; // Know its row for external logic to interpret
	self.gfx = self.attachAsset('cell', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.toggle = function () {
		self.active = !self.active;
	};
	self.setActive = function (val) {
		if (self.active !== val) {
			self.toggle();
		}
	};
	// The `down` event is removed and is now handled by the central InputService.
	return self;
});
/** 
* Coin
* Responsibility: Collectible coin that can be picked up by the hero
*/ 
var Coin = Container.expand(function () {
	var self = Container.call(this);
	self.gfx = self.attachAsset('coin', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.collected = false;
	self.collect = function () {
		if (!self.collected) {
			self.collected = true;
			tween(self, {
				scaleX: 1.5,
				scaleY: 1.5,
				alpha: 0
			}, {
				duration: 300,
				easing: tween.cubicOut,
				onComplete: function onComplete() {
					self.destroy();
				}
			});
		}
	};
	return self;
});
/** 
* Hero
* Responsibility: To model the player character. It manages its own state and animations,
* but no longer triggers its own sound effects.
*/ 
var Hero = Container.expand(function () {
	var self = Container.call(this);
	self.gfx = self.attachAsset('hero', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.currentCol = 0;
	self.gridRow = GameConstants.CHAR_ROW;
	self.moveTo = function (nx, ny, duration) {
		tween(self, {
			x: nx,
			y: ny
		}, {
			duration: duration || 180,
			easing: tween.cubicOut
		});
	};
	return self;
});

/**** 
* Initialize Game
****/ 
/************************* 
* SERVICES
*************************/ 
/** 
* AudioService
* Responsibility: To handle all requests to play sounds and music.
*/ 
/************************* 
* INITIALIZE & RUN GAME
*************************/ 
// 1. Create Game Instance
var game = new LK.Game({
	backgroundColor: 0x181830
});

/**** 
* Game Code
****/ 
/** 
* GameConstants
* Responsibility: To hold all static configuration and magic numbers in one place
* for easy tuning and maintenance.
*/ 
/************************* 
* GAME CONFIGURATION
*************************/ 
// Plugins (Unchanged)
// Assets (Unchanged)
/************************* 
* ASSETS & PLUGINS
*************************/ 
// 2. Instantiate All Services
/************************* 
* CORE GAME OBJECTS
*************************/ 
/** 
* GameGrid
* Responsibility: Centralizes the entire grid (playable + beat area) into a single class.
* Provides accessors for both the playable area and the beat grid, and manages their state.
*/ 
function GameGrid(game) {
	this.game = game;
	this.rows = GameConstants.TOTAL_ROWS;
	this.cols = GameConstants.GRID_COLS;
	this.grid = []; // 2D array: [row][col] for all rows (playable + beat)
	this.beatRows = GameConstants.BEAT_ROWS;
	this.playableRows = this.rows - this.beatRows;
	// Initialize grid with nulls
	for (var r = 0; r < this.rows; r++) {
		this.grid[r] = [];
		for (var c = 0; c < this.cols; c++) {
			this.grid[r][c] = null;
		}
	}
	// Create background visuals for all cells
	this.initBackground = function () {
		for (var r = 0; r < this.rows; r++) {
			for (var c = 0; c < this.cols; c++) {
				var bgCell = LK.getAsset('emptycell', {
					anchorX: 0.5,
					anchorY: 0.5,
					alpha: 0.3
				});
				bgCell.x = GameConstants.GRID_LEFT + c * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
				bgCell.y = GameConstants.GRID_TOP + r * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
				this.game.addChild(bgCell);
				// Add coin to all playable cells (hero will be positioned after coins are created)
				if (r < this.playableRows) {
					var coin = new Coin();
					coin.x = bgCell.x;
					coin.y = bgCell.y;
					this.game.addChild(coin);
					this.grid[r][c] = coin;
				}
			}
		}
	};
	// Create BeatCell objects for the beat grid (bottom rows)
	this.initBeatGrid = function () {
		for (var r = 0; r < this.beatRows; r++) {
			var gridRow = this.playableRows + r;
			for (var c = 0; c < this.cols; c++) {
				var cell = new BeatCell(r);
				cell.x = GameConstants.GRID_LEFT + c * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
				cell.y = GameConstants.GRID_TOP + gridRow * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
				this.game.addChild(cell);
				this.grid[gridRow][c] = cell;
			}
		}
	};
	// Returns the BeatCell at a given (beatRow, col) in the beat grid
	this.getBeatCell = function (beatRow, col) {
		var gridRow = this.playableRows + beatRow;
		return this.grid[gridRow][col];
	};
	// Returns the BeatCell at a given (x, y) screen coordinate, or null if not in beat grid
	this.getBeatCellAt = function (x, y) {
		for (var r = 0; r < this.beatRows; r++) {
			var gridRow = this.playableRows + r;
			for (var c = 0; c < this.cols; c++) {
				var cell = this.grid[gridRow][c];
				if (!cell) {
					continue;
				}
				var cx = GameConstants.GRID_LEFT + c * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
				var cy = GameConstants.GRID_TOP + gridRow * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
				if (x >= cx - GameConstants.CELL_SIZE / 2 && x <= cx + GameConstants.CELL_SIZE / 2 && y >= cy - GameConstants.CELL_SIZE / 2 && y <= cy + GameConstants.CELL_SIZE / 2) {
					return cell;
				}
			}
		}
		return null;
	};
	// Returns true if (row, col) is in the playable area
	this.isPlayableCell = function (row, col) {
		return row >= 0 && row < this.playableRows && col >= 0 && col < this.cols;
	};
	// Returns true if (row, col) is in the beat grid
	this.isBeatCell = function (row, col) {
		return row >= this.playableRows && row < this.rows && col >= 0 && col < this.cols;
	};
	// Returns the BeatCell 2D array for the beat grid (bottom rows)
	this.getBeatGrid = function () {
		var arr = [];
		for (var r = 0; r < this.beatRows; r++) {
			arr[r] = [];
			for (var c = 0; c < this.cols; c++) {
				arr[r][c] = this.getBeatCell(r, c);
			}
		}
		return arr;
	};
	// Returns the playable area as a 2D array (nulls, or game objects if you want to add them)
	this.getPlayableGrid = function () {
		var arr = [];
		for (var r = 0; r < this.playableRows; r++) {
			arr[r] = [];
			for (var c = 0; c < this.cols; c++) {
				arr[r][c] = this.grid[r][c];
			}
		}
		return arr;
	};
	// Call this to initialize all visuals
	this.initialize = function () {
		this.initBackground();
		this.initBeatGrid();
	};
}
var GameConstants = {
	GRID_COLS: 8,
	TOTAL_ROWS: 10,
	// Reduced from 11 to remove top row
	BEAT_ROWS: 4,
	// +1 for new down row
	CHAR_ROW: 3,
	// hero now starts at row 3 (was 4) due to removed top row
	JUMP_ROW: 2,
	// up movement now at row 2 (was 3) due to removed top row
	DOWN_ROW: 1,
	// new down movement row 1 (was 2) due to removed top row
	GRID_MARGIN_X: 40,
	get CELL_SIZE() {
		return Math.floor((2048 - 2 * this.GRID_MARGIN_X) / this.GRID_COLS);
	},
	get GRID_HEIGHT() {
		return this.TOTAL_ROWS * this.CELL_SIZE;
	},
	get GRID_TOP() {
		return 2732 - this.GRID_HEIGHT - 10;
	},
	get GRID_LEFT() {
		return this.GRID_MARGIN_X;
	},
	get HERO_MIN_X() {
		return this.GRID_LEFT + this.CELL_SIZE / 2;
	},
	get HERO_MAX_X() {
		return this.GRID_LEFT + (this.GRID_COLS - 1) * this.CELL_SIZE + this.CELL_SIZE / 2;
	},
	get HERO_START_COL() {
		return Math.floor(this.GRID_COLS / 2);
	},
	get HERO_START_X() {
		return this.GRID_LEFT + this.HERO_START_COL * this.CELL_SIZE + this.CELL_SIZE / 2;
	},
	get HERO_START_Y() {
		return this.GRID_TOP + this.CHAR_ROW * this.CELL_SIZE + this.CELL_SIZE / 2;
	},
	STEP_INTERVAL: 400,
	// ms per step (150bpm)
	COIN_SPAWN_BEATS: 8,
	COIN_SPAWN_CHANCE: 0.25
};
/************************* 
* SERVICES
*************************/ 
/** 
* AudioService
* Responsibility: To handle all requests to play sounds and music.
*/ 
var AudioService = {
	playBeat: function playBeat() {
		LK.getSound('beat').play();
	},
	playBeatUp: function playBeatUp() {
		LK.getSound('Sound_Up').play();
	},
	playBeatLeft: function playBeatLeft() {
		LK.getSound('Sound_Left').play();
	},
	playBeatRight: function playBeatRight() {
		LK.getSound('Sound_Right').play();
	},
	playBeatDown: function playBeatDown() {
		LK.getSound('Sound_Down').play();
	},
	playMove: function playMove() {
		LK.getSound('moveSnd').play();
	},
	playCoinCollect: function playCoinCollect() {
		LK.getSound('coinCollect').play();
	},
	startMusic: function startMusic() {
		LK.playMusic('bgmusic', {
			fade: {
				start: 0,
				end: 0.3,
				duration: 1200
			}
		});
	}
};
/** 
* UIService
* Responsibility: To create and manage all non-game-grid UI elements, such
* as the score text and the step indicators.
*/ 
function UIService(game) {
	this.game = game;
	this.scoreTxt = null;
	this.initialize = function () {
		// Score Text
		this.scoreTxt = new Text2('0', {
			size: 100,
			fill: "#fff"
		});
		this.scoreTxt.anchor.set(0.5, 0);
		LK.gui.top.addChild(this.scoreTxt);
		// Create columnHighlights for beat grid rows
		this.columnHighlights = [];
		for (var r = 0; r < GameConstants.BEAT_ROWS; r++) {
			var highlight = LK.getAsset('cellWhite', {
				anchorX: 0.5,
				anchorY: 0.5,
				alpha: 0 // invisible by default
			});
			// Position highlight at the leftmost column, correct row in the beat grid
			var gridRow = GameConstants.TOTAL_ROWS - GameConstants.BEAT_ROWS + r;
			highlight.x = GameConstants.GRID_LEFT + GameConstants.CELL_SIZE / 2;
			highlight.y = GameConstants.GRID_TOP + gridRow * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
			highlight.alpha = 0; // invisible by default, semi-transparent when shown
			this.game.addChild(highlight);
			this.columnHighlights.push(highlight);
		}
		// Hide all highlights at start
		for (var i = 0; i < this.columnHighlights.length; i++) {
			this.columnHighlights[i].alpha = 0;
		}
	};
	this.updateScore = function (newScore) {
		this.scoreTxt.setText(newScore);
	};
	// Main Highlighting Logic: highlights inactive cells in the current column
	this.updateColumnHighlight = function (currentColumnIndex) {
		// Hide all highlights first
		for (var i = 0; i < this.columnHighlights.length; i++) {
			this.columnHighlights[i].alpha = 0;
		}
		// Get active states for the current column
		var activeStates = gridService.getActiveStatesForColumn(currentColumnIndex);
		// Loop through each row in the beat grid
		for (var i = 0; i < GameConstants.BEAT_ROWS; i++) {
			if (!activeStates[i]) {
				// Position the highlight at the correct cell
				var gridRow = GameConstants.TOTAL_ROWS - GameConstants.BEAT_ROWS + i;
				this.columnHighlights[i].x = GameConstants.GRID_LEFT + currentColumnIndex * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
				this.columnHighlights[i].y = GameConstants.GRID_TOP + gridRow * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
				this.columnHighlights[i].alpha = 0.2; // semi-transparent highlight
			}
		}
	};
}
/** 
* GridService
* Responsibility: To create, manage the state of, and update the visuals of the beat grid.
*/ 
function GridService(game, gameGrid) {
	this.game = game;
	this.gameGrid = gameGrid; // Centralized grid
	this.initialize = function () {
		this.gameGrid.initialize();
	};
	// Returns the BeatCell at a given (x, y) screen coordinate, or null if not in beat grid
	this.getCellAt = function (x, y) {
		return this.gameGrid.getBeatCellAt(x, y);
	};
	// Returns an array of booleans representing the active state of each BeatCell in the given column
	this.getActiveStatesForColumn = function (columnIndex) {
		var states = [];
		for (var r = 0; r < GameConstants.BEAT_ROWS; r++) {
			var gridRow = GameConstants.TOTAL_ROWS - GameConstants.BEAT_ROWS + r;
			var cell = this.gameGrid.grid[gridRow][columnIndex];
			states.push(cell && cell.active ? true : false);
		}
		return states;
	};
	// Toggle a beat cell, ensuring only one beat per layer per column
	this.toggleCell = function (cell, mode) {
		var needsChange = mode === 'add' && !cell.active || mode === 'remove' && cell.active;
		if (needsChange) {
			// If adding, remove any other active beat in this column (same col, different row)
			if (mode === 'add') {
				var col = null;
				// Find the column index of this cell
				for (var c = 0; c < GameConstants.GRID_COLS; c++) {
					// cell.row is the beat row (0..BEAT_ROWS-1), but grid is [playableRows+row][col]
					var gridRow = GameConstants.TOTAL_ROWS - GameConstants.BEAT_ROWS + cell.row;
					if (this.gameGrid.grid[gridRow][c] === cell) {
						col = c;
						break;
					}
				}
				if (col !== null) {
					for (var r = 0; r < GameConstants.BEAT_ROWS; r++) {
						var gridRow = GameConstants.TOTAL_ROWS - GameConstants.BEAT_ROWS + r;
						var otherCell = this.gameGrid.grid[gridRow][col];
						if (r !== cell.row && otherCell && otherCell.active) {
							otherCell.setActive(false);
							this.updateCellVisual(otherCell);
						}
					}
				}
			}
			cell.toggle();
			this.updateCellVisual(cell);
		}
	};
	this.updateCellVisual = function (cell) {
		cell.gfx.destroy();
		var assetId = 'cell';
		if (cell.active) {
			if (cell.row === 0) {
				assetId = 'cellActive';
			} else if (cell.row === 1) {
				assetId = 'cellLeft';
			} else if (cell.row === 2) {
				assetId = 'cellRight';
			} else if (cell.row === 3) {
				assetId = 'cellDown';
			}
		}
		cell.gfx = cell.attachAsset(assetId, {
			anchorX: 0.5,
			anchorY: 0.5
		});
	};
	// Returns the actions for a given step (column) by checking the beat grid
	this.getActiveActionsForStep = function (step) {
		// The beat grid is in the bottom rows of the grid
		var actions = {
			up: false,
			left: false,
			right: false,
			down: false
		};
		for (var r = 0; r < GameConstants.BEAT_ROWS; r++) {
			var gridRow = GameConstants.TOTAL_ROWS - GameConstants.BEAT_ROWS + r;
			var cell = this.gameGrid.grid[gridRow][step];
			if (!cell) {
				continue;
			}
			if (r === 0) {
				actions.up = cell.active;
			} else if (r === 1) {
				actions.left = cell.active;
			} else if (r === 2) {
				actions.right = cell.active;
			} else if (r === 3) {
				actions.down = cell.active;
			}
		}
		return actions;
	};
}
/** 
* PlayerService
* Responsibility: To create and manage the Hero instance, its state, and its actions.
* It translates logical actions ("move left") into animations and sound calls.
*/ 
function PlayerService(game) {
	this.game = game;
	this.hero = null;
	this.initialize = function () {
		this.hero = new Hero();
		// Select random starting position in playable grid
		var randomRow = Math.floor(Math.random() * gameGrid.playableRows);
		var randomCol = Math.floor(Math.random() * GameConstants.GRID_COLS);
		// Calculate position based on random grid coordinates
		this.hero.x = GameConstants.GRID_LEFT + randomCol * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
		this.hero.y = GameConstants.GRID_TOP + randomRow * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
		this.hero.currentCol = randomCol;
		this.hero.gridRow = randomRow;
		// Update CHAR_ROW to match random starting row
		GameConstants.CHAR_ROW = randomRow;
		this.game.addChild(this.hero);
		// Remove coin at hero's starting position if one exists
		var coin = gameGrid.grid[randomRow][randomCol];
		if (coin && coin.collect) {
			coin.destroy();
			gameGrid.grid[randomRow][randomCol] = null;
		}
	};
	this.getHeroInstance = function () {
		return this.hero;
	};
	this.handleDrag = function (x) {
		this.hero.x = Math.max(GameConstants.HERO_MIN_X, Math.min(GameConstants.HERO_MAX_X, x));
	};
	this.performActions = function (actions) {
		var didAction = false;
		var horizontalMove = 0;
		if (actions.left && !actions.right) {
			horizontalMove = -1;
		}
		if (actions.right && !actions.left) {
			horizontalMove = 1;
		}
		if (actions.up && !actions.down) {
			if (horizontalMove !== 0) {
				this.move(horizontalMove);
			}
			this.moveVertical(-1); // Move up
			didAction = true;
		} else if (actions.down && !actions.up) {
			if (horizontalMove !== 0) {
				this.move(horizontalMove);
			}
			this.moveVertical(1); // Move down
			didAction = true;
		} else if (horizontalMove !== 0) {
			this.move(horizontalMove);
			didAction = true;
		}
		if (didAction) {
			AudioService.playBeat();
		}
	};
	this.move = function (direction) {
		var newCol = this.hero.currentCol + direction;
		if (newCol < 0) {
			newCol = GameConstants.GRID_COLS - 1;
		}
		if (newCol >= GameConstants.GRID_COLS) {
			newCol = 0;
		}
		this.hero.currentCol = newCol;
		var nx = GameConstants.GRID_LEFT + newCol * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
		this.hero.moveTo(nx, this.hero.y, 180);
		AudioService.playMove();
	};
	// Move up or down by 1 row, with vertical teleport at edges of playable area
	this.moveVertical = function (direction) {
		var minRow = 0;
		var maxRow = gameGrid.playableRows - 1; // Only teleport within playable area (rows 0-5 after removing top row)
		var newRow = this.hero.gridRow !== undefined ? this.hero.gridRow : GameConstants.CHAR_ROW;
		newRow += direction;
		// Teleport vertically if out of bounds
		if (newRow < minRow) {
			newRow = maxRow;
		} else if (newRow > maxRow) {
			newRow = minRow;
		}
		this.hero.gridRow = newRow;
		var ny = GameConstants.GRID_TOP + newRow * GameConstants.CELL_SIZE + GameConstants.CELL_SIZE / 2;
		this.hero.moveTo(this.hero.x, ny, 180);
		AudioService.playMove();
		// Update CHAR_ROW for collision logic
		GameConstants.CHAR_ROW = newRow;
	};
}
/** 
* InputService
* Responsibility: To handle all raw user input (down, up, move) and delegate
* the appropriate actions to other services (GridService, PlayerService).
*/ 
function InputService(gridService, playerService) {
	this.gridService = gridService;
	this.playerService = playerService;
	this.isPainting = false;
	this.paintMode = null;
	this.lastPaintedCell = null;
	this.dragHero = false;
	this.handleDown = function (x, y) {
		var cell = this.gridService.getCellAt(x, y);
		if (cell) {
			this.isPainting = true;
			this.paintMode = cell.active ? 'remove' : 'add';
			this.lastPaintedCell = cell;
			this.gridService.toggleCell(cell, this.paintMode);
		} else {
			var hero = this.playerService.getHeroInstance();
			var dx = x - hero.x,
				dy = y - hero.y;
			if (dx * dx + dy * dy < 200 * 200) {
				this.dragHero = true;
			}
		}
	};
	this.handleUp = function () {
		this.isPainting = false;
		this.paintMode = null;
		this.lastPaintedCell = null;
		this.dragHero = false;
	};
	this.handleMove = function (x, y) {
		if (this.isPainting) {
			var cell = this.gridService.getCellAt(x, y);
			if (cell && cell !== this.lastPaintedCell) {
				this.lastPaintedCell = cell;
				this.gridService.toggleCell(cell, this.paintMode);
			}
		} else if (this.dragHero) {
			this.playerService.handleDrag(x);
		}
	};
}
/** 
* SequencerService
* Responsibility: To manage the main game loop timing (the "beat"). On each step,
* it orchestrates calls to the other services to update the game state.
*/ 
function SequencerService(gridService, playerService, uiService) {
	this.gridService = gridService;
	this.playerService = playerService;
	this.uiService = uiService;
	this.currentStep = 0;
	this.lastStepTime = 0;
	this.playing = true;
	this.initialize = function () {
		this.lastStepTime = Date.now();
	};
	this.update = function () {
		var now = Date.now();
		if (this.playing && now - this.lastStepTime >= GameConstants.STEP_INTERVAL) {
			this.lastStepTime = now;
			// 1. UPDATE HIGHLIGHT FIRST for the current step
			this.uiService.updateColumnHighlight(this.currentStep);
			// 2. THEN, advance the step to the next beat
			this.currentStep = (this.currentStep + 1) % GameConstants.GRID_COLS;
			// 3. FINALLY, perform actions for the new step.
			this.doStepActions();
		}
	};
	this.doStepActions = function () {
		// Play unique sound for the NEXT beat (one cell ahead)
		var nextStep = (this.currentStep + 1) % GameConstants.GRID_COLS;
		var nextActions = this.gridService.getActiveActionsForStep(nextStep);
		if (nextActions.up) {
			AudioService.playBeatUp();
		} else if (nextActions.left) {
			AudioService.playBeatLeft();
		} else if (nextActions.right) {
			AudioService.playBeatRight();
		} else if (nextActions.down) {
			AudioService.playBeatDown();
		} else {
			AudioService.playBeat();
		}
		// Perform actions for the CURRENT step
		var actions = this.gridService.getActiveActionsForStep(this.currentStep);
		this.playerService.performActions(actions);
		var hero = this.playerService.getHeroInstance();
		// Check for coin collection
		var heroRow = hero.gridRow;
		var heroCol = hero.currentCol;
		var coin = gameGrid.grid[heroRow][heroCol];
		if (coin && coin.collect) {
			coin.collect();
			gameGrid.grid[heroRow][heroCol] = null;
			LK.setScore(LK.getScore() + 10);
			uiService.updateScore(LK.getScore());
			AudioService.playCoinCollect();
		}
	};
}
var uiService = new UIService(game);
var gameGrid = new GameGrid(game);
var gridService = new GridService(game, gameGrid);
var playerService = new PlayerService(game);
var inputService = new InputService(gridService, playerService);
var sequencerService = new SequencerService(gridService, playerService, uiService);
// 3. Initialize Services in correct order
gridService.initialize();
uiService.initialize();
playerService.initialize();
sequencerService.initialize();
// Manually draw the highlight for the first beat (step 0) immediately.
uiService.updateColumnHighlight(sequencerService.currentStep);
// 4. Connect Input Handlers to the Input Service
game.down = function (x, y) {
	inputService.handleDown(x, y);
};
game.up = function (x, y) {
	inputService.handleUp(x, y);
};
game.move = function (x, y) {
	inputService.handleMove(x, y);
};
// 5. Set Main Game Loop to the Sequencer Service
game.update = function () {
	sequencerService.update();
};
// 6. Start background music
AudioService.startMusic();

===================================================================
--- original.js
+++ change.js
@@ -651,21 +651,24 @@
 			this.doStepActions();
 		}
 	};
 	this.doStepActions = function () {
-		// Play unique sound for each beat direction
-		var actions = this.gridService.getActiveActionsForStep(this.currentStep);
-		if (actions.up) {
+		// Play unique sound for the NEXT beat (one cell ahead)
+		var nextStep = (this.currentStep + 1) % GameConstants.GRID_COLS;
+		var nextActions = this.gridService.getActiveActionsForStep(nextStep);
+		if (nextActions.up) {
 			AudioService.playBeatUp();
-		} else if (actions.left) {
+		} else if (nextActions.left) {
 			AudioService.playBeatLeft();
-		} else if (actions.right) {
+		} else if (nextActions.right) {
 			AudioService.playBeatRight();
-		} else if (actions.down) {
+		} else if (nextActions.down) {
 			AudioService.playBeatDown();
 		} else {
 			AudioService.playBeat();
 		}
+		// Perform actions for the CURRENT step
+		var actions = this.gridService.getActiveActionsForStep(this.currentStep);
 		this.playerService.performActions(actions);
 		var hero = this.playerService.getHeroInstance();
 		// Check for coin collection
 		var heroRow = hero.gridRow;