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

/**** 
* Classes
****/ 
var Decoration = Container.expand(function (decorationType) {
	var self = Container.call(this);
	var decorationGraphics = self.attachAsset('decoration', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	if (decorationType === 'plant') {
		decorationGraphics.tint = 0x228B22;
	} else if (decorationType === 'lamp') {
		decorationGraphics.tint = 0xFFFF99;
	} else if (decorationType === 'book') {
		decorationGraphics.tint = 0x4169E1;
		decorationGraphics.scaleX = 0.8;
		decorationGraphics.scaleY = 0.6;
	}
	return self;
});
var Furniture = Container.expand(function (furnitureType) {
	var self = Container.call(this);
	var furnitureGraphics = self.attachAsset('furniture', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Different furniture types can have different colors
	if (furnitureType === 'table') {
		furnitureGraphics.tint = 0x8B4513;
	} else if (furnitureType === 'chair') {
		furnitureGraphics.tint = 0x654321;
		furnitureGraphics.scaleX = 0.7;
		furnitureGraphics.scaleY = 0.7;
	} else if (furnitureType === 'bed') {
		furnitureGraphics.scaleX = 1.5;
		furnitureGraphics.scaleY = 1.2;
		furnitureGraphics.tint = 0xDC143C;
	}
	return self;
});
var Player = Container.expand(function () {
	var self = Container.call(this);
	var playerGraphics = self.attachAsset(selectedCharacter, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speed = 4;
	self.characterType = selectedCharacter;
	self.update = function () {
		// Movement will be handled in the game's main update loop
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x2F1B14
});

/**** 
* Game Code
****/ 
// Game state management
// Import storage for sensitivity settings
var gameState = 'menu'; // 'menu', 'characters', 'playing', 'paused', or 'settings'
var selectedCharacter = 'player'; // Default character
var sensitivity = storage.sensitivity || 0.5; // Default sensitivity
// Room dimensions
var roomWidth = 1800;
var roomHeight = 1400;
var roomStartX = (2048 - roomWidth) / 2;
var roomStartY = (2732 - roomHeight) / 2;
// Create room background
var floorTiles = [];
var wallTiles = [];
// Create floor tiles
for (var x = 0; x < Math.ceil(roomWidth / 100); x++) {
	for (var y = 0; y < Math.ceil(roomHeight / 100); y++) {
		var floorTile = LK.getAsset('floor', {
			anchorX: 0,
			anchorY: 0
		});
		floorTile.x = roomStartX + x * 100;
		floorTile.y = roomStartY + y * 100;
		game.addChild(floorTile);
		floorTiles.push(floorTile);
	}
}
// Create walls around the room
// Top wall
for (var x = 0; x < Math.ceil(roomWidth / 100); x++) {
	var wallTile = LK.getAsset('wall', {
		anchorX: 0,
		anchorY: 0
	});
	wallTile.x = roomStartX + x * 100;
	wallTile.y = roomStartY - 100;
	game.addChild(wallTile);
	wallTiles.push(wallTile);
}
// Bottom wall
for (var x = 0; x < Math.ceil(roomWidth / 100); x++) {
	var wallTile = LK.getAsset('wall', {
		anchorX: 0,
		anchorY: 0
	});
	wallTile.x = roomStartX + x * 100;
	wallTile.y = roomStartY + roomHeight;
	game.addChild(wallTile);
	wallTiles.push(wallTile);
}
// Left wall
for (var y = 0; y < Math.ceil(roomHeight / 100) + 2; y++) {
	var wallTile = LK.getAsset('wall', {
		anchorX: 0,
		anchorY: 0
	});
	wallTile.x = roomStartX - 100;
	wallTile.y = roomStartY - 100 + y * 100;
	game.addChild(wallTile);
	wallTiles.push(wallTile);
}
// Right wall
for (var y = 0; y < Math.ceil(roomHeight / 100) + 2; y++) {
	var wallTile = LK.getAsset('wall', {
		anchorX: 0,
		anchorY: 0
	});
	wallTile.x = roomStartX + roomWidth;
	wallTile.y = roomStartY - 100 + y * 100;
	game.addChild(wallTile);
	wallTiles.push(wallTile);
}
// Add carpet in the center
var carpet = LK.getAsset('carpet', {
	anchorX: 0.5,
	anchorY: 0.5
});
carpet.x = roomStartX + roomWidth / 2;
carpet.y = roomStartY + roomHeight / 2;
game.addChild(carpet);
// Create furniture
var furniture = [];
// Create decorations
var decorations = [];
// Plant in corner
var plant = new Decoration('plant');
plant.x = roomStartX + 100;
plant.y = roomStartY + 100;
game.addChild(plant);
decorations.push(plant);
// Lamp near bed
var lamp = new Decoration('lamp');
lamp.x = roomStartX + roomWidth - 300;
lamp.y = roomStartY + 100;
game.addChild(lamp);
decorations.push(lamp);
// Books on table
var book1 = new Decoration('book');
book1.x = roomStartX + 280;
book1.y = roomStartY + roomHeight / 2 - 20;
game.addChild(book1);
decorations.push(book1);
var book2 = new Decoration('book');
book2.x = roomStartX + 320;
book2.y = roomStartY + roomHeight / 2 + 10;
game.addChild(book2);
decorations.push(book2);
// More plants and decorations
var plant2 = new Decoration('plant');
plant2.x = roomStartX + roomWidth - 100;
plant2.y = roomStartY + roomHeight - 100;
game.addChild(plant2);
decorations.push(plant2);
// Create player (but don't add to game yet)
var player = new Player();
player.x = roomStartX + roomWidth / 2;
player.y = roomStartY + roomHeight - 200;
// Create dark purple horror background for menu
var horrorBackground = LK.getAsset('floor', {
	anchorX: 0,
	anchorY: 0
});
horrorBackground.x = 0;
horrorBackground.y = 0;
horrorBackground.width = 2048;
horrorBackground.height = 2732;
horrorBackground.tint = 0x301934; // Dark purple color
game.addChild(horrorBackground);
// Create forest background with trees
var forestElements = [];
for (var i = 0; i < 15; i++) {
	var tree = LK.getAsset('tree', {
		anchorX: 0.5,
		anchorY: 1
	});
	tree.x = Math.random() * 2048;
	tree.y = 1800 + Math.random() * 400; // Trees at bottom part
	tree.tint = 0x1a2e14; // Very dark green
	tree.alpha = 0.6;
	tree.scaleX = 0.8 + Math.random() * 0.8;
	tree.scaleY = 1 + Math.random() * 0.5;
	game.addChild(tree);
	forestElements.push(tree);
}
// Add more trees in background
for (var i = 0; i < 10; i++) {
	var tree = LK.getAsset('tree', {
		anchorX: 0.5,
		anchorY: 1
	});
	tree.x = Math.random() * 2048;
	tree.y = 1000 + Math.random() * 600;
	tree.tint = 0x0f1a0a; // Even darker green
	tree.alpha = 0.4;
	tree.scaleX = 0.5 + Math.random() * 0.6;
	tree.scaleY = 0.8 + Math.random() * 0.4;
	game.addChild(tree);
	forestElements.push(tree);
}
// Create spooky house in the center
var spookyHouse = LK.getAsset('house', {
	anchorX: 0.5,
	anchorY: 0.5
});
spookyHouse.x = 2048 / 2;
spookyHouse.y = 1600;
spookyHouse.tint = 0x2a1f17; // Dark brown
spookyHouse.alpha = 0.8;
game.addChild(spookyHouse);
forestElements.push(spookyHouse);
// Add house windows (dark rectangles)
var window1 = LK.getAsset('decoration', {
	anchorX: 0.5,
	anchorY: 0.5
});
window1.x = spookyHouse.x - 60;
window1.y = spookyHouse.y - 20;
window1.tint = 0x000000;
window1.scaleX = 1.2;
window1.scaleY = 1.5;
game.addChild(window1);
forestElements.push(window1);
var window2 = LK.getAsset('decoration', {
	anchorX: 0.5,
	anchorY: 0.5
});
window2.x = spookyHouse.x + 60;
window2.y = spookyHouse.y - 20;
window2.tint = 0x000000;
window2.scaleX = 1.2;
window2.scaleY = 1.5;
game.addChild(window2);
forestElements.push(window2);
// Create animated fog effects
var fogElements = [];
for (var i = 0; i < 12; i++) {
	var fog = LK.getAsset('fog', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	fog.x = Math.random() * 2048;
	fog.y = 1200 + Math.random() * 800;
	fog.tint = 0x4a4a4a; // Gray fog
	fog.alpha = 0.2 + Math.random() * 0.3;
	fog.scaleX = 1 + Math.random() * 2;
	fog.scaleY = 0.8 + Math.random() * 1.2;
	fog.fogSpeed = 0.5 + Math.random() * 1;
	fog.fogDirection = Math.random() * Math.PI * 2;
	game.addChild(fog);
	fogElements.push(fog);
}
// Create multiple shadow/fog elements for horror atmosphere
var shadowElements = [];
for (var i = 0; i < 8; i++) {
	var shadow = LK.getAsset('decoration', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	shadow.x = Math.random() * 2048;
	shadow.y = Math.random() * 2732;
	shadow.tint = 0x1a0d1f; // Very dark purple
	shadow.alpha = 0.3;
	shadow.scaleX = Math.random() * 3 + 2;
	shadow.scaleY = Math.random() * 3 + 2;
	game.addChild(shadow);
	shadowElements.push(shadow);
}
// Create start screen elements
var titleText = new Text2('Warm Room Explorer', {
	size: 120,
	fill: 0xFFD700
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 2048 / 2;
titleText.y = 2732 / 3;
var playButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
playButton.x = 2048 / 2;
playButton.y = 2732 / 2 - 100; // Move play button up
playButton.tint = 0x228B22; // Forest green
playButton.scaleX = 2.5; // Much larger
playButton.scaleY = 1.8; // Taller
// Add border effect with second button behind
var playButtonBorder = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
playButtonBorder.x = playButton.x;
playButtonBorder.y = playButton.y;
playButtonBorder.tint = 0x000000; // Black border
playButtonBorder.scaleX = 2.6; // Slightly larger for border
playButtonBorder.scaleY = 1.9;
game.addChild(playButtonBorder);
game.addChild(playButton); // Add main button after border
var playButtonText = new Text2('JUGAR', {
	size: 100,
	// Larger text
	fill: 0xFFD700 // Gold color
});
playButtonText.anchor.set(0.5, 0.5);
playButtonText.x = playButton.x;
playButtonText.y = playButton.y;
var charactersButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
charactersButton.x = 2048 / 2;
charactersButton.y = 2732 / 2 + 200; // More spacing from play button
charactersButton.tint = 0x4169E1; // Royal blue
charactersButton.scaleX = 2.2; // Larger and more consistent with play button
charactersButton.scaleY = 1.5; // Better proportions
// Add border for characters button
var charactersButtonBorder = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
charactersButtonBorder.x = charactersButton.x;
charactersButtonBorder.y = charactersButton.y;
charactersButtonBorder.tint = 0x000000; // Black border
charactersButtonBorder.scaleX = 2.3; // Slightly larger for border
charactersButtonBorder.scaleY = 1.6;
game.addChild(charactersButtonBorder);
game.addChild(charactersButton);
var charactersButtonText = new Text2('PERSONAJES', {
	size: 80,
	//{26} // Larger text size
	fill: 0xFFD700 //{27} // Gold color to match play button
});
charactersButtonText.anchor.set(0.5, 0.5);
charactersButtonText.x = charactersButton.x;
charactersButtonText.y = charactersButton.y;
// Add start screen elements
game.addChild(titleText);
game.addChild(playButton);
game.addChild(playButtonText);
game.addChild(charactersButton);
game.addChild(charactersButtonText);
// Store references for easy removal (including horror elements)
var menuElements = [horrorBackground, titleText, playButtonBorder, playButton, playButtonText, charactersButtonBorder, charactersButton, charactersButtonText].concat(shadowElements).concat(forestElements).concat(fogElements);
// Character selection screen elements
var characterScreenElements = [];
var characterSelectionTitle = new Text2('Selecciona tu Personaje', {
	size: 100,
	fill: 0xFFD700
});
characterSelectionTitle.anchor.set(0.5, 0.5);
characterSelectionTitle.x = 2048 / 2;
characterSelectionTitle.y = 600;
// Character selection buttons
var character1Button = LK.getAsset('character1', {
	anchorX: 0.5,
	anchorY: 0.5
});
character1Button.x = 2048 / 2 - 300;
character1Button.y = 1200;
character1Button.scaleX = 2.0;
character1Button.scaleY = 2.0;
character1Button.tint = 0xFF6B6B; // Red tint for character 1
var character2Button = LK.getAsset('character2', {
	anchorX: 0.5,
	anchorY: 0.5
});
character2Button.x = 2048 / 2;
character2Button.y = 1200;
character2Button.scaleX = 2.0;
character2Button.scaleY = 2.0;
character2Button.tint = 0x4ECDC4; // Teal tint for character 2
var character3Button = LK.getAsset('character3', {
	anchorX: 0.5,
	anchorY: 0.5
});
character3Button.x = 2048 / 2 + 300;
character3Button.y = 1200;
character3Button.scaleX = 2.0;
character3Button.scaleY = 2.0;
character3Button.tint = 0x95E1D3; // Light green tint for character 3
// Character names
var char1Text = new Text2('Explorador', {
	size: 60,
	fill: 0xFFFFFF
});
char1Text.anchor.set(0.5, 0.5);
char1Text.x = character1Button.x;
char1Text.y = character1Button.y + 100;
var char2Text = new Text2('Aventurero', {
	size: 60,
	fill: 0xFFFFFF
});
char2Text.anchor.set(0.5, 0.5);
char2Text.x = character2Button.x;
char2Text.y = character2Button.y + 100;
var char3Text = new Text2('Cazador', {
	size: 60,
	fill: 0xFFFFFF
});
char3Text.anchor.set(0.5, 0.5);
char3Text.x = character3Button.x;
char3Text.y = character3Button.y + 100;
// Back button for character selection
var backButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
backButton.x = 2048 / 2;
backButton.y = 1800;
backButton.tint = 0x888888;
backButton.scaleX = 1.2;
backButton.scaleY = 0.8;
var backButtonText = new Text2('VOLVER', {
	size: 60,
	fill: 0xFFFFFF
});
backButtonText.anchor.set(0.5, 0.5);
backButtonText.x = backButton.x;
backButtonText.y = backButton.y;
characterScreenElements = [characterSelectionTitle, character1Button, character2Button, character3Button, char1Text, char2Text, char3Text, backButton, backButtonText];
// Create pause button (only visible during gameplay)
var pauseButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
pauseButton.x = 2048 - 100;
pauseButton.y = 150;
pauseButton.tint = 0x666666;
pauseButton.scaleX = 0.8;
pauseButton.scaleY = 0.8;
var pauseButtonText = new Text2('||', {
	size: 60,
	fill: 0xFFFFFF
});
pauseButtonText.anchor.set(0.5, 0.5);
pauseButtonText.x = pauseButton.x;
pauseButtonText.y = pauseButton.y;
// Pause menu elements
var pauseMenuElements = [];
var pauseMenuBackground = LK.getAsset('floor', {
	anchorX: 0,
	anchorY: 0
});
pauseMenuBackground.x = 0;
pauseMenuBackground.y = 0;
pauseMenuBackground.width = 2048;
pauseMenuBackground.height = 2732;
pauseMenuBackground.tint = 0x000000;
pauseMenuBackground.alpha = 0.8;
var pauseTitle = new Text2('PAUSA', {
	size: 120,
	fill: 0xFFD700
});
pauseTitle.anchor.set(0.5, 0.5);
pauseTitle.x = 2048 / 2;
pauseTitle.y = 800;
var resumeButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
resumeButton.x = 2048 / 2;
resumeButton.y = 1200;
resumeButton.tint = 0x228B22;
resumeButton.scaleX = 2;
resumeButton.scaleY = 1.2;
var resumeButtonText = new Text2('CONTINUAR', {
	size: 80,
	fill: 0xFFFFFF
});
resumeButtonText.anchor.set(0.5, 0.5);
resumeButtonText.x = resumeButton.x;
resumeButtonText.y = resumeButton.y;
var menuButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
menuButton.x = 2048 / 2;
menuButton.y = 1400;
menuButton.tint = 0x4169E1;
menuButton.scaleX = 2;
menuButton.scaleY = 1.2;
var menuButtonText = new Text2('MENU PRINCIPAL', {
	size: 70,
	fill: 0xFFFFFF
});
menuButtonText.anchor.set(0.5, 0.5);
menuButtonText.x = menuButton.x;
menuButtonText.y = menuButton.y;
var settingsButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
settingsButton.x = 2048 / 2;
settingsButton.y = 1600;
settingsButton.tint = 0x888888;
settingsButton.scaleX = 2;
settingsButton.scaleY = 1.2;
var settingsButtonText = new Text2('SENSIBILIDAD', {
	size: 70,
	fill: 0xFFFFFF
});
settingsButtonText.anchor.set(0.5, 0.5);
settingsButtonText.x = settingsButton.x;
settingsButtonText.y = settingsButton.y;
pauseMenuElements = [pauseMenuBackground, pauseTitle, resumeButton, resumeButtonText, menuButton, menuButtonText, settingsButton, settingsButtonText];
// Settings screen elements
var settingsScreenElements = [];
var settingsTitle = new Text2('AJUSTAR SENSIBILIDAD', {
	size: 100,
	fill: 0xFFD700
});
settingsTitle.anchor.set(0.5, 0.5);
settingsTitle.x = 2048 / 2;
settingsTitle.y = 800;
var sensitivityText = new Text2('Sensibilidad: ' + Math.round(sensitivity * 100) + '%', {
	size: 80,
	fill: 0xFFFFFF
});
sensitivityText.anchor.set(0.5, 0.5);
sensitivityText.x = 2048 / 2;
sensitivityText.y = 1200;
var decreaseButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
decreaseButton.x = 2048 / 2 - 200;
decreaseButton.y = 1400;
decreaseButton.tint = 0xFF4444;
decreaseButton.scaleX = 1.5;
decreaseButton.scaleY = 1.2;
var decreaseButtonText = new Text2('-', {
	size: 100,
	fill: 0xFFFFFF
});
decreaseButtonText.anchor.set(0.5, 0.5);
decreaseButtonText.x = decreaseButton.x;
decreaseButtonText.y = decreaseButton.y;
var increaseButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
increaseButton.x = 2048 / 2 + 200;
increaseButton.y = 1400;
increaseButton.tint = 0x44FF44;
increaseButton.scaleX = 1.5;
increaseButton.scaleY = 1.2;
var increaseButtonText = new Text2('+', {
	size: 100,
	fill: 0xFFFFFF
});
increaseButtonText.anchor.set(0.5, 0.5);
increaseButtonText.x = increaseButton.x;
increaseButtonText.y = increaseButton.y;
var backFromSettingsButton = LK.getAsset('furniture', {
	anchorX: 0.5,
	anchorY: 0.5
});
backFromSettingsButton.x = 2048 / 2;
backFromSettingsButton.y = 1700;
backFromSettingsButton.tint = 0x888888;
backFromSettingsButton.scaleX = 1.8;
backFromSettingsButton.scaleY = 1.2;
var backFromSettingsButtonText = new Text2('VOLVER', {
	size: 70,
	fill: 0xFFFFFF
});
backFromSettingsButtonText.anchor.set(0.5, 0.5);
backFromSettingsButtonText.x = backFromSettingsButton.x;
backFromSettingsButtonText.y = backFromSettingsButton.y;
settingsScreenElements = [pauseMenuBackground, settingsTitle, sensitivityText, decreaseButton, decreaseButtonText, increaseButton, increaseButtonText, backFromSettingsButton, backFromSettingsButtonText];
// Function to show character selection screen
function showCharacterSelection() {
	gameState = 'characters';
	// Remove menu elements
	for (var i = 0; i < menuElements.length; i++) {
		game.removeChild(menuElements[i]);
	}
	// Add character selection elements
	for (var i = 0; i < characterScreenElements.length; i++) {
		game.addChild(characterScreenElements[i]);
	}
}
// Function to go back to main menu
function backToMenu() {
	gameState = 'menu';
	// Remove character selection elements
	for (var i = 0; i < characterScreenElements.length; i++) {
		game.removeChild(characterScreenElements[i]);
	}
	// Add menu elements back
	for (var i = 0; i < menuElements.length; i++) {
		game.addChild(menuElements[i]);
	}
}
// Function to start the game
function startGame() {
	gameState = 'playing';
	// Remove menu elements
	for (var i = 0; i < menuElements.length; i++) {
		game.removeChild(menuElements[i]);
	}
	// Add player to game
	game.addChild(player);
	// Add pause button
	game.addChild(pauseButton);
	game.addChild(pauseButtonText);
}
// Function to show pause menu
function showPauseMenu() {
	gameState = 'paused';
	// Add pause menu elements
	for (var i = 0; i < pauseMenuElements.length; i++) {
		game.addChild(pauseMenuElements[i]);
	}
}
// Function to resume game
function resumeGame() {
	gameState = 'playing';
	// Remove pause menu elements
	for (var i = 0; i < pauseMenuElements.length; i++) {
		game.removeChild(pauseMenuElements[i]);
	}
}
// Function to show settings screen
function showSettings() {
	gameState = 'settings';
	// Remove pause menu elements
	for (var i = 0; i < pauseMenuElements.length; i++) {
		game.removeChild(pauseMenuElements[i]);
	}
	// Add settings elements
	for (var i = 0; i < settingsScreenElements.length; i++) {
		game.addChild(settingsScreenElements[i]);
	}
}
// Function to go back to pause menu from settings
function backToPauseMenu() {
	gameState = 'paused';
	// Remove settings elements
	for (var i = 0; i < settingsScreenElements.length; i++) {
		game.removeChild(settingsScreenElements[i]);
	}
	// Add pause menu elements
	for (var i = 0; i < pauseMenuElements.length; i++) {
		game.addChild(pauseMenuElements[i]);
	}
}
// Function to return to main menu from pause
function returnToMainMenu() {
	gameState = 'menu';
	// Remove pause menu elements
	for (var i = 0; i < pauseMenuElements.length; i++) {
		game.removeChild(pauseMenuElements[i]);
	}
	// Remove game elements
	game.removeChild(player);
	game.removeChild(pauseButton);
	game.removeChild(pauseButtonText);
	// Add menu elements back
	for (var i = 0; i < menuElements.length; i++) {
		game.addChild(menuElements[i]);
	}
}
// Movement controls
var keys = {
	up: false,
	down: false,
	left: false,
	right: false
};
// Touch/mouse controls
var isDragging = false;
var lastTouchX = 0;
var lastTouchY = 0;
game.down = function (x, y, obj) {
	if (gameState === 'menu') {
		// Check if play button was clicked
		var playButtonBounds = {
			left: playButton.x - playButton.width * playButton.scaleX / 2,
			right: playButton.x + playButton.width * playButton.scaleX / 2,
			top: playButton.y - playButton.height * playButton.scaleY / 2,
			bottom: playButton.y + playButton.height * playButton.scaleY / 2
		};
		if (x >= playButtonBounds.left && x <= playButtonBounds.right && y >= playButtonBounds.top && y <= playButtonBounds.bottom) {
			startGame();
		}
		// Check if characters button was clicked
		var charactersButtonBounds = {
			left: charactersButton.x - charactersButton.width * charactersButton.scaleX / 2,
			right: charactersButton.x + charactersButton.width * charactersButton.scaleX / 2,
			top: charactersButton.y - charactersButton.height * charactersButton.scaleY / 2,
			bottom: charactersButton.y + charactersButton.height * charactersButton.scaleY / 2
		};
		if (x >= charactersButtonBounds.left && x <= charactersButtonBounds.right && y >= charactersButtonBounds.top && y <= charactersButtonBounds.bottom) {
			showCharacterSelection();
		}
	} else if (gameState === 'characters') {
		// Character selection logic
		var char1Bounds = {
			left: character1Button.x - character1Button.width * character1Button.scaleX / 2,
			right: character1Button.x + character1Button.width * character1Button.scaleX / 2,
			top: character1Button.y - character1Button.height * character1Button.scaleY / 2,
			bottom: character1Button.y + character1Button.height * character1Button.scaleY / 2
		};
		var char2Bounds = {
			left: character2Button.x - character2Button.width * character2Button.scaleX / 2,
			right: character2Button.x + character2Button.width * character2Button.scaleX / 2,
			top: character2Button.y - character2Button.height * character2Button.scaleY / 2,
			bottom: character2Button.y + character2Button.height * character2Button.scaleY / 2
		};
		var char3Bounds = {
			left: character3Button.x - character3Button.width * character3Button.scaleX / 2,
			right: character3Button.x + character3Button.width * character3Button.scaleX / 2,
			top: character3Button.y - character3Button.height * character3Button.scaleY / 2,
			bottom: character3Button.y + character3Button.height * character3Button.scaleY / 2
		};
		var backBounds = {
			left: backButton.x - backButton.width * backButton.scaleX / 2,
			right: backButton.x + backButton.width * backButton.scaleX / 2,
			top: backButton.y - backButton.height * backButton.scaleY / 2,
			bottom: backButton.y + backButton.height * backButton.scaleY / 2
		};
		if (x >= char1Bounds.left && x <= char1Bounds.right && y >= char1Bounds.top && y <= char1Bounds.bottom) {
			selectedCharacter = 'character1';
			player = new Player(); // Recreate player with new character
			player.x = roomStartX + roomWidth / 2;
			player.y = roomStartY + roomHeight - 200;
			backToMenu();
		} else if (x >= char2Bounds.left && x <= char2Bounds.right && y >= char2Bounds.top && y <= char2Bounds.bottom) {
			selectedCharacter = 'character2';
			player = new Player(); // Recreate player with new character
			player.x = roomStartX + roomWidth / 2;
			player.y = roomStartY + roomHeight - 200;
			backToMenu();
		} else if (x >= char3Bounds.left && x <= char3Bounds.right && y >= char3Bounds.top && y <= char3Bounds.bottom) {
			selectedCharacter = 'character3';
			player = new Player(); // Recreate player with new character
			player.x = roomStartX + roomWidth / 2;
			player.y = roomStartY + roomHeight - 200;
			backToMenu();
		} else if (x >= backBounds.left && x <= backBounds.right && y >= backBounds.top && y <= backBounds.bottom) {
			backToMenu();
		}
	} else if (gameState === 'playing') {
		// Check if pause button was clicked
		var pauseButtonBounds = {
			left: pauseButton.x - pauseButton.width * pauseButton.scaleX / 2,
			right: pauseButton.x + pauseButton.width * pauseButton.scaleX / 2,
			top: pauseButton.y - pauseButton.height * pauseButton.scaleY / 2,
			bottom: pauseButton.y + pauseButton.height * pauseButton.scaleY / 2
		};
		if (x >= pauseButtonBounds.left && x <= pauseButtonBounds.right && y >= pauseButtonBounds.top && y <= pauseButtonBounds.bottom) {
			showPauseMenu();
		} else {
			isDragging = true;
			lastTouchX = x;
			lastTouchY = y;
		}
	} else if (gameState === 'paused') {
		// Handle pause menu interactions
		var resumeButtonBounds = {
			left: resumeButton.x - resumeButton.width * resumeButton.scaleX / 2,
			right: resumeButton.x + resumeButton.width * resumeButton.scaleX / 2,
			top: resumeButton.y - resumeButton.height * resumeButton.scaleY / 2,
			bottom: resumeButton.y + resumeButton.height * resumeButton.scaleY / 2
		};
		var menuButtonBounds = {
			left: menuButton.x - menuButton.width * menuButton.scaleX / 2,
			right: menuButton.x + menuButton.width * menuButton.scaleX / 2,
			top: menuButton.y - menuButton.height * menuButton.scaleY / 2,
			bottom: menuButton.y + menuButton.height * menuButton.scaleY / 2
		};
		var settingsButtonBounds = {
			left: settingsButton.x - settingsButton.width * settingsButton.scaleX / 2,
			right: settingsButton.x + settingsButton.width * settingsButton.scaleX / 2,
			top: settingsButton.y - settingsButton.height * settingsButton.scaleY / 2,
			bottom: settingsButton.y + settingsButton.height * settingsButton.scaleY / 2
		};
		if (x >= resumeButtonBounds.left && x <= resumeButtonBounds.right && y >= resumeButtonBounds.top && y <= resumeButtonBounds.bottom) {
			resumeGame();
		} else if (x >= menuButtonBounds.left && x <= menuButtonBounds.right && y >= menuButtonBounds.top && y <= menuButtonBounds.bottom) {
			returnToMainMenu();
		} else if (x >= settingsButtonBounds.left && x <= settingsButtonBounds.right && y >= settingsButtonBounds.top && y <= settingsButtonBounds.bottom) {
			showSettings();
		}
	} else if (gameState === 'settings') {
		// Handle settings interactions
		var decreaseButtonBounds = {
			left: decreaseButton.x - decreaseButton.width * decreaseButton.scaleX / 2,
			right: decreaseButton.x + decreaseButton.width * decreaseButton.scaleX / 2,
			top: decreaseButton.y - decreaseButton.height * decreaseButton.scaleY / 2,
			bottom: decreaseButton.y + decreaseButton.height * decreaseButton.scaleY / 2
		};
		var increaseButtonBounds = {
			left: increaseButton.x - increaseButton.width * increaseButton.scaleX / 2,
			right: increaseButton.x + increaseButton.width * increaseButton.scaleX / 2,
			top: increaseButton.y - increaseButton.height * increaseButton.scaleY / 2,
			bottom: increaseButton.y + increaseButton.height * increaseButton.scaleY / 2
		};
		var backFromSettingsButtonBounds = {
			left: backFromSettingsButton.x - backFromSettingsButton.width * backFromSettingsButton.scaleX / 2,
			right: backFromSettingsButton.x + backFromSettingsButton.width * backFromSettingsButton.scaleX / 2,
			top: backFromSettingsButton.y - backFromSettingsButton.height * backFromSettingsButton.scaleY / 2,
			bottom: backFromSettingsButton.y + backFromSettingsButton.height * backFromSettingsButton.scaleY / 2
		};
		if (x >= decreaseButtonBounds.left && x <= decreaseButtonBounds.right && y >= decreaseButtonBounds.top && y <= decreaseButtonBounds.bottom) {
			sensitivity = Math.max(0.1, sensitivity - 0.1);
			storage.sensitivity = sensitivity;
			sensitivityText.setText('Sensibilidad: ' + Math.round(sensitivity * 100) + '%');
		} else if (x >= increaseButtonBounds.left && x <= increaseButtonBounds.right && y >= increaseButtonBounds.top && y <= increaseButtonBounds.bottom) {
			sensitivity = Math.min(1.0, sensitivity + 0.1);
			storage.sensitivity = sensitivity;
			sensitivityText.setText('Sensibilidad: ' + Math.round(sensitivity * 100) + '%');
		} else if (x >= backFromSettingsButtonBounds.left && x <= backFromSettingsButtonBounds.right && y >= backFromSettingsButtonBounds.top && y <= backFromSettingsButtonBounds.bottom) {
			backToPauseMenu();
		}
	}
};
game.move = function (x, y, obj) {
	if (gameState === 'playing' && isDragging) {
		var deltaX = x - lastTouchX;
		var deltaY = y - lastTouchY;
		// Move player based on touch movement with sensitivity
		var newX = player.x + deltaX * sensitivity;
		var newY = player.y + deltaY * sensitivity;
		// Check boundaries
		if (newX >= roomStartX + 30 && newX <= roomStartX + roomWidth - 30) {
			player.x = newX;
		}
		if (newY >= roomStartY + 30 && newY <= roomStartY + roomHeight - 30) {
			player.y = newY;
		}
		lastTouchX = x;
		lastTouchY = y;
	}
};
game.up = function (x, y, obj) {
	if (gameState === 'playing') {
		isDragging = false;
	}
};
// Check collision with furniture
function checkFurnitureCollision(newX, newY) {
	var playerBounds = {
		left: newX - 30,
		right: newX + 30,
		top: newY - 30,
		bottom: newY + 30
	};
	for (var i = 0; i < furniture.length; i++) {
		var item = furniture[i];
		var itemBounds = {
			left: item.x - 60,
			right: item.x + 60,
			top: item.y - 40,
			bottom: item.y + 40
		};
		if (playerBounds.left < itemBounds.right && playerBounds.right > itemBounds.left && playerBounds.top < itemBounds.bottom && playerBounds.bottom > itemBounds.top) {
			return true;
		}
	}
	return false;
}
// Main game update
game.update = function () {
	// Animate fog elements in menu
	if (gameState === 'menu') {
		for (var i = 0; i < fogElements.length; i++) {
			var fog = fogElements[i];
			fog.x += Math.cos(fog.fogDirection) * fog.fogSpeed;
			fog.y += Math.sin(fog.fogDirection) * fog.fogSpeed * 0.3;
			fog.alpha += Math.sin(LK.ticks * 0.02 + i) * 0.01;
			// Keep fog within bounds and wrap around
			if (fog.x < -100) fog.x = 2148;
			if (fog.x > 2148) fog.x = -100;
			if (fog.y < 1000) fog.y = 2200;
			if (fog.y > 2200) fog.y = 1000;
		}
	}
	if (gameState === 'playing') {
		// Alternative movement for non-touch devices (basic directional movement)
		var moveSpeed = player.speed;
		var newX = player.x;
		var newY = player.y;
		// Simple AI movement for demonstration (player moves slightly)
		if (LK.ticks % 180 === 0) {
			var randomDirection = Math.floor(Math.random() * 4);
			var testX = player.x;
			var testY = player.y;
			switch (randomDirection) {
				case 0:
					testY -= moveSpeed * 5;
					break;
				// up
				case 1:
					testY += moveSpeed * 5;
					break;
				// down
				case 2:
					testX -= moveSpeed * 5;
					break;
				// left
				case 3:
					testX += moveSpeed * 5;
					break;
				// right
			}
			// Check boundaries and collisions
			if (testX >= roomStartX + 30 && testX <= roomStartX + roomWidth - 30 && testY >= roomStartY + 30 && testY <= roomStartY + roomHeight - 30 && !checkFurnitureCollision(testX, testY)) {
				player.x = testX;
				player.y = testY;
			}
		}
	}
};

===================================================================
--- original.js
+++ change.js
@@ -305,9 +305,9 @@
 	anchorX: 0.5,
 	anchorY: 0.5
 });
 playButton.x = 2048 / 2;
-playButton.y = 2732 / 2;
+playButton.y = 2732 / 2 - 100; // Move play button up
 playButton.tint = 0x228B22; // Forest green
 playButton.scaleX = 2.5; // Much larger
 playButton.scaleY = 1.8; // Taller
 // Add border effect with second button behind
@@ -334,15 +334,28 @@
 	anchorX: 0.5,
 	anchorY: 0.5
 });
 charactersButton.x = 2048 / 2;
-charactersButton.y = 2732 / 2 + 150;
-charactersButton.tint = 0x4169E1;
-charactersButton.scaleX = 1.5;
-charactersButton.scaleY = 1;
+charactersButton.y = 2732 / 2 + 200; // More spacing from play button
+charactersButton.tint = 0x4169E1; // Royal blue
+charactersButton.scaleX = 2.2; // Larger and more consistent with play button
+charactersButton.scaleY = 1.5; // Better proportions
+// Add border for characters button
+var charactersButtonBorder = LK.getAsset('furniture', {
+	anchorX: 0.5,
+	anchorY: 0.5
+});
+charactersButtonBorder.x = charactersButton.x;
+charactersButtonBorder.y = charactersButton.y;
+charactersButtonBorder.tint = 0x000000; // Black border
+charactersButtonBorder.scaleX = 2.3; // Slightly larger for border
+charactersButtonBorder.scaleY = 1.6;
+game.addChild(charactersButtonBorder);
+game.addChild(charactersButton);
 var charactersButtonText = new Text2('PERSONAJES', {
-	size: 60,
-	fill: 0xFFFFFF
+	size: 80,
+	//{26} // Larger text size
+	fill: 0xFFD700 //{27} // Gold color to match play button
 });
 charactersButtonText.anchor.set(0.5, 0.5);
 charactersButtonText.x = charactersButton.x;
 charactersButtonText.y = charactersButton.y;
@@ -352,9 +365,9 @@
 game.addChild(playButtonText);
 game.addChild(charactersButton);
 game.addChild(charactersButtonText);
 // Store references for easy removal (including horror elements)
-var menuElements = [horrorBackground, titleText, playButtonBorder, playButton, playButtonText, charactersButton, charactersButtonText].concat(shadowElements).concat(forestElements).concat(fogElements);
+var menuElements = [horrorBackground, titleText, playButtonBorder, playButton, playButtonText, charactersButtonBorder, charactersButton, charactersButtonText].concat(shadowElements).concat(forestElements).concat(fogElements);
 // Character selection screen elements
 var characterScreenElements = [];
 var characterSelectionTitle = new Text2('Selecciona tu Personaje', {
 	size: 100,