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

/**** 
* Classes
****/ 
var HellWorld = Container.expand(function () {
	var self = Container.call(this);
	// Hell background
	var hellBackground = LK.getAsset('white_button', {
		width: 2048,
		height: 2732,
		anchorX: 0.5,
		anchorY: 0.5
	});
	hellBackground.tint = 0x660000; // Dark red
	self.addChild(hellBackground);
	// Add hell details
	function createHellDetails() {
		// Create terrain features
		var terrain = new Container();
		self.addChild(terrain);
		// Create lava pools
		for (var i = 0; i < 5; i++) {
			var lavaPool = LK.getAsset('white_button', {
				width: 300 + Math.random() * 200,
				height: 200 + Math.random() * 100,
				anchorX: 0.5,
				anchorY: 0.5,
				x: Math.random() * 2048 - 1024,
				y: Math.random() * 2732 - 1366
			});
			lavaPool.tint = 0xFF3300;
			terrain.addChild(lavaPool);
			// Add lava bubbles
			for (var j = 0; j < 3; j++) {
				var lavaBubble = LK.getAsset('white_button', {
					width: 30 + Math.random() * 40,
					height: 30 + Math.random() * 40,
					anchorX: 0.5,
					anchorY: 0.5,
					x: lavaPool.x + (Math.random() * 100 - 50),
					y: lavaPool.y + (Math.random() * 60 - 30)
				});
				lavaBubble.tint = 0xFF6600;
				terrain.addChild(lavaBubble);
			}
		}
		// Create rock formations
		for (var i = 0; i < 8; i++) {
			var rock = LK.getAsset('white_button', {
				width: 100 + Math.random() * 150,
				height: 80 + Math.random() * 120,
				anchorX: 0.5,
				anchorY: 0.5,
				x: Math.random() * 2048 - 1024,
				y: Math.random() * 2732 - 1366
			});
			rock.tint = 0x333333;
			terrain.addChild(rock);
		}
		// Create flame pillars
		for (var i = 0; i < 6; i++) {
			var pillar = new Container();
			pillar.x = Math.random() * 2048 - 1024;
			pillar.y = Math.random() * 2732 - 1366;
			terrain.addChild(pillar);
			var pillarBase = LK.getAsset('white_button', {
				width: 60,
				height: 200,
				anchorX: 0.5,
				anchorY: 1.0,
				y: 0
			});
			pillarBase.tint = 0x333333;
			pillar.addChild(pillarBase);
			var flame = LK.getAsset('white_button', {
				width: 100,
				height: 150,
				anchorX: 0.5,
				anchorY: 1.0,
				y: -200
			});
			flame.tint = 0xFF6600;
			pillar.addChild(flame);
		}
		// Create tortured souls (kids from before)
		for (var i = 0; i < 10; i++) {
			var soul = new Kid();
			soul.x = Math.random() * 1800 - 900;
			soul.y = Math.random() * 2500 - 1250;
			soul.scale.set(0.6 + Math.random() * 0.3);
			soul.rotation = (Math.random() - 0.5) * 0.5;
			// Make souls look tortured with red tint
			for (var k = 0; k < soul.children[0].children.length; k++) {
				var part = soul.children[0].children[k];
				part.tint = mixColors(part.tint, 0xFF0000, 0.7);
			}
			terrain.addChild(soul);
		}
	}
	createHellDetails();
	// Add demons that patrol around
	var demons = [];
	function createDemons() {
		for (var i = 0; i < 3; i++) {
			var demon = new Container();
			demon.x = Math.random() * 1800 - 900;
			demon.y = Math.random() * 2500 - 1250;
			demon.targetX = demon.x + (Math.random() * 400 - 200);
			demon.targetY = demon.y + (Math.random() * 400 - 200);
			demon.speed = 2 + Math.random() * 2;
			demons.push(demon);
			self.addChild(demon);
			// Demon body
			var demonBody = LK.getAsset('white_button', {
				width: 100,
				height: 200,
				anchorX: 0.5,
				anchorY: 0.5,
				y: 0
			});
			demonBody.tint = 0x330000;
			demon.addChild(demonBody);
			// Demon head
			var demonHead = LK.getAsset('white_button', {
				width: 120,
				height: 120,
				anchorX: 0.5,
				anchorY: 0.5,
				y: -120
			});
			demonHead.tint = 0x660000;
			demon.addChild(demonHead);
			// Demon horns
			var leftHorn = LK.getAsset('white_button', {
				width: 30,
				height: 60,
				anchorX: 0.5,
				anchorY: 0.5,
				x: -50,
				y: -160
			});
			leftHorn.tint = 0x000000;
			leftHorn.rotation = -0.3;
			demon.addChild(leftHorn);
			var rightHorn = LK.getAsset('white_button', {
				width: 30,
				height: 60,
				anchorX: 0.5,
				anchorY: 0.5,
				x: 50,
				y: -160
			});
			rightHorn.tint = 0x000000;
			rightHorn.rotation = 0.3;
			demon.addChild(rightHorn);
			// Demon eyes
			var leftEye = LK.getAsset('white_button', {
				width: 20,
				height: 20,
				anchorX: 0.5,
				anchorY: 0.5,
				x: -30,
				y: -130
			});
			leftEye.tint = 0xFF0000;
			demon.addChild(leftEye);
			var rightEye = LK.getAsset('white_button', {
				width: 20,
				height: 20,
				anchorX: 0.5,
				anchorY: 0.5,
				x: 30,
				y: -130
			});
			rightEye.tint = 0xFF0000;
			demon.addChild(rightEye);
		}
	}
	createDemons();
	// Update function for animate demons
	self.update = function () {
		// Update demons
		for (var i = 0; i < demons.length; i++) {
			var demon = demons[i];
			// Move demon toward target
			var dx = demon.targetX - demon.x;
			var dy = demon.targetY - demon.y;
			var dist = Math.sqrt(dx * dx + dy * dy);
			if (dist > 10) {
				demon.x += dx / dist * demon.speed;
				demon.y += dy / dist * demon.speed;
				// Flip demon based on movement direction
				if (dx < 0) {
					demon.scale.x = -1;
				} else {
					demon.scale.x = 1;
				}
			} else {
				// New random target
				demon.targetX = Math.random() * 1800 - 900;
				demon.targetY = Math.random() * 2500 - 1250;
			}
		}
	};
	return self;
});
var Kid = Container.expand(function () {
	var self = Container.call(this);
	// Create pixel art kid using multiple boxes
	var skinColors = [0xFFD3B6, 0xFFAEC0, 0xA2C5AC, 0xCCABD8, 0xB6CFB6, 0xF2C1B6];
	var hairColors = [0x553311, 0x221100, 0x775533, 0x000000, 0xAA7722, 0x442200];
	var skinTone = skinColors[Math.floor(Math.random() * skinColors.length)];
	var hairColor = hairColors[Math.floor(Math.random() * hairColors.length)];
	// Create pixel body - this is our base
	var body = new Container();
	self.addChild(body);
	// Create body elements (pixelated style)
	var bodyParts = [
	// Torso
	{
		width: 40,
		height: 60,
		x: 0,
		y: -80,
		color: skinTone
	},
	// Legs
	{
		width: 16,
		height: 50,
		x: -12,
		y: -20,
		color: Math.random() > 0.5 ? 0x3355AA : 0x993333
	}, {
		width: 16,
		height: 50,
		x: 12,
		y: -20,
		color: Math.random() > 0.5 ? 0x3355AA : 0x993333
	},
	// Arms
	{
		width: 12,
		height: 40,
		x: -26,
		y: -90,
		color: skinTone
	}, {
		width: 12,
		height: 40,
		x: 26,
		y: -90,
		color: skinTone
	},
	// Head (base)
	{
		width: 44,
		height: 44,
		x: 0,
		y: -130,
		color: skinTone
	}];
	// Add all body parts
	for (var i = 0; i < bodyParts.length; i++) {
		var part = bodyParts[i];
		var box = LK.getAsset('kid', {
			width: part.width,
			height: part.height,
			anchorX: 0.5,
			anchorY: 0.5,
			x: part.x,
			y: part.y
		});
		box.tint = part.color;
		body.addChild(box);
	}
	// Add pixel face features
	var faceFeatures = [
	// Eyes
	{
		width: 8,
		height: 8,
		x: -10,
		y: -135,
		color: 0x000000
	}, {
		width: 8,
		height: 8,
		x: 10,
		y: -135,
		color: 0x000000
	},
	// Mouth
	{
		width: 20,
		height: 6,
		x: 0,
		y: -120,
		color: Math.random() > 0.5 ? 0xCC3333 : 0x000000
	}];
	for (var i = 0; i < faceFeatures.length; i++) {
		var feature = faceFeatures[i];
		var box = LK.getAsset('kid', {
			width: feature.width,
			height: feature.height,
			anchorX: 0.5,
			anchorY: 0.5,
			x: feature.x,
			y: feature.y
		});
		box.tint = feature.color;
		body.addChild(box);
	}
	// Hair style (random selection between a few pixel art styles)
	var hairStyle = Math.floor(Math.random() * 3);
	var hairBlocks;
	if (hairStyle === 0) {
		// Short hair
		hairBlocks = [{
			width: 44,
			height: 12,
			x: 0,
			y: -152,
			color: hairColor
		}, {
			width: 12,
			height: 8,
			x: -20,
			y: -140,
			color: hairColor
		}, {
			width: 12,
			height: 8,
			x: 20,
			y: -140,
			color: hairColor
		}];
	} else if (hairStyle === 1) {
		// Long hair
		hairBlocks = [{
			width: 44,
			height: 12,
			x: 0,
			y: -152,
			color: hairColor
		}, {
			width: 52,
			height: 8,
			x: 0,
			y: -144,
			color: hairColor
		}, {
			width: 12,
			height: 30,
			x: -24,
			y: -128,
			color: hairColor
		}, {
			width: 12,
			height: 30,
			x: 24,
			y: -128,
			color: hairColor
		}];
	} else {
		// Spikey hair
		hairBlocks = [{
			width: 8,
			height: 16,
			x: -18,
			y: -156,
			color: hairColor
		}, {
			width: 8,
			height: 20,
			x: -6,
			y: -160,
			color: hairColor
		}, {
			width: 8,
			height: 24,
			x: 6,
			y: -164,
			color: hairColor
		}, {
			width: 8,
			height: 18,
			x: 18,
			y: -158,
			color: hairColor
		}, {
			width: 44,
			height: 12,
			x: 0,
			y: -148,
			color: hairColor
		}];
	}
	for (var i = 0; i < hairBlocks.length; i++) {
		var block = hairBlocks[i];
		var box = LK.getAsset('kid', {
			width: block.width,
			height: block.height,
			anchorX: 0.5,
			anchorY: 0.5,
			x: block.x,
			y: block.y
		});
		box.tint = block.color;
		body.addChild(box);
	}
	// Add accessories (randomly)
	if (Math.random() > 0.6) {
		var accessoryColor = Math.random() * 0xFFFFFF;
		var accessory = LK.getAsset('kid', {
			width: 24,
			height: 8,
			anchorX: 0.5,
			anchorY: 0.5,
			x: 0,
			y: -148
		});
		accessory.tint = accessoryColor; // random glasses or hat
		body.addChild(accessory);
	}
	// Pixel bounce animation
	self.bounceOffset = Math.random() * Math.PI * 2;
	self.update = function () {
		var bounce = Math.sin(LK.ticks / (20 + Math.random() * 10) + self.bounceOffset) * 3;
		body.y = bounce;
		// Small random pixel movements to simulate "pixelated" animation
		if (LK.ticks % 15 === 0) {
			// Occasionally move 1px in random direction
			body.x = (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 2);
		}
	};
	return self;
});
var PlayerCharacter = Container.expand(function () {
	var self = Container.call(this);
	// Create character based on Kid class
	var character = new Kid();
	character.scale.set(1.2); // Slightly larger than regular kids
	self.addChild(character);
	// Tint the character slightly to show it's in hell
	for (var i = 0; i < character.children[0].children.length; i++) {
		var part = character.children[0].children[i];
		part.tint = mixColors(part.tint, 0xFF3300, 0.3);
	}
	// Movement variables
	self.speed = 8;
	self.moving = false;
	self.targetX = 0;
	self.targetY = 0;
	// Handle character movement
	self.update = function () {
		// Call the kid's update method for animations
		character.update();
		// Move toward target if moving
		if (self.moving) {
			var dx = self.targetX - self.x;
			var dy = self.targetY - self.y;
			var dist = Math.sqrt(dx * dx + dy * dy);
			if (dist > 10) {
				self.x += dx / dist * self.speed;
				self.y += dy / dist * self.speed;
				// Flip character based on movement direction
				if (dx < 0) {
					character.scale.x = -Math.abs(character.scale.x);
				} else if (dx > 0) {
					character.scale.x = Math.abs(character.scale.x);
				}
			} else {
				self.moving = false;
			}
		}
	};
	return self;
});
var Square = Container.expand(function () {
	var self = Container.call(this);
	// Create pixel platform using multiple blocks
	var platformContainer = new Container();
	self.addChild(platformContainer);
	// Choose a base color for the platform
	var baseColors = [0x886655, 0x778899, 0x669944, 0x665577, 0x775544];
	var baseColor = baseColors[Math.floor(Math.random() * baseColors.length)];
	// Create main platform block (slightly wider than tall for standing)
	var mainWidth = 300;
	var mainHeight = 80;
	var mainBlock = LK.getAsset('white_button', {
		width: mainWidth,
		height: mainHeight,
		anchorX: 0.5,
		anchorY: 0.5
	});
	mainBlock.tint = baseColor;
	platformContainer.addChild(mainBlock);
	// Add pixelated details to make it look like a platform
	var pixelDetails = [
	// Top edge highlights
	{
		width: mainWidth,
		height: 10,
		x: 0,
		y: -mainHeight / 2 + 5,
		color: lightenColor(baseColor, 30)
	},
	// Bottom edge shadows
	{
		width: mainWidth,
		height: 10,
		x: 0,
		y: mainHeight / 2 - 5,
		color: darkenColor(baseColor, 30)
	},
	// Random pixel details
	{
		width: 20,
		height: 20,
		x: -mainWidth / 3,
		y: -10,
		color: darkenColor(baseColor, 15)
	}, {
		width: 30,
		height: 15,
		x: mainWidth / 4,
		y: 5,
		color: lightenColor(baseColor, 15)
	}];
	// Add all pixel details
	for (var i = 0; i < pixelDetails.length; i++) {
		var detail = pixelDetails[i];
		var box = LK.getAsset('white_button', {
			width: detail.width,
			height: detail.height,
			anchorX: 0.5,
			anchorY: 0.5,
			x: detail.x,
			y: detail.y
		});
		box.tint = detail.color;
		platformContainer.addChild(box);
	}
	// Helper function to lighten a color
	function lightenColor(color, percent) {
		var r = color >> 16 & 0xFF;
		var g = color >> 8 & 0xFF;
		var b = color & 0xFF;
		r = Math.min(255, r + percent);
		g = Math.min(255, g + percent);
		b = Math.min(255, b + percent);
		return r << 16 | g << 8 | b;
	}
	// Helper function to darken a color
	function darkenColor(color, percent) {
		var r = color >> 16 & 0xFF;
		var g = color >> 8 & 0xFF;
		var b = color & 0xFF;
		r = Math.max(0, r - percent);
		g = Math.max(0, g - percent);
		b = Math.max(0, b - percent);
		return r << 16 | g << 8 | b;
	}
	// Add kid character to the square with interactive behavior
	var kid = new Kid();
	kid.y = -mainHeight / 2 - 100; // Position kid on top of square
	kid.interactive = true; // Make kid clickable
	kid.down = function (x, y, obj) {
		// Show church and hell transition effect and set the selected kid as player
		showKidTransition(kid, true);
	};
	self.addChild(kid);
	// Add pixel shadow
	var shadow = LK.getAsset('white_button', {
		width: mainWidth + 20,
		height: 15,
		anchorX: 0.5,
		anchorY: 0.5,
		x: 0,
		y: mainHeight / 2 + 10
	});
	shadow.tint = 0x000000;
	shadow.alpha = 0.3;
	platformContainer.addChild(shadow);
	// Add slight floating animation to the platform
	self.yOffset = Math.random() * Math.PI * 2;
	self.update = function () {
		platformContainer.y = Math.sin(LK.ticks / 100 + self.yOffset) * 5;
		// Occasionally add pixel jitter for pixel effect
		if (LK.ticks % 30 === 0) {
			platformContainer.y += Math.random() > 0.5 ? 1 : -1;
		}
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x000000,
	name: "Infernal Voyage",
	description: "Choose your character and navigate through the fiery depths of hell in this pixelated adventure!"
});

/**** 
* Game Code
****/ 
// Handle player movement in hell world
game.down = function (x, y, obj) {
	if (playerCharacter) {
		playerCharacter.targetX = x;
		playerCharacter.targetY = y;
		playerCharacter.moving = true;
	}
};
game.up = function (x, y, obj) {
	if (playerCharacter) {
		playerCharacter.moving = false;
	}
};
game.move = function (x, y, obj) {
	if (playerCharacter && playerCharacter.moving) {
		playerCharacter.targetX = x;
		playerCharacter.targetY = y;
	}
};
var button = new Container();
button.x = 2048 / 2;
button.y = 2732 / 2;
// Create main button background with pixelated appearance
var buttonBase = LK.getAsset('white_button', {
	width: 600,
	height: 200,
	anchorX: 0.5,
	anchorY: 0.5
});
buttonBase.tint = 0x332222; // Dark reddish background
button.addChild(buttonBase);
// Add pixel border
var pixelBorderWidth = 15;
var pixelBorder = [
// Top edge
{
	width: 600,
	height: pixelBorderWidth,
	x: 0,
	y: -200 / 2 + pixelBorderWidth / 2,
	color: 0x552222
},
// Bottom edge
{
	width: 600,
	height: pixelBorderWidth,
	x: 0,
	y: 200 / 2 - pixelBorderWidth / 2,
	color: 0x220000
},
// Left edge
{
	width: pixelBorderWidth,
	height: 200,
	x: -600 / 2 + pixelBorderWidth / 2,
	y: 0,
	color: 0x441111
},
// Right edge
{
	width: pixelBorderWidth,
	height: 200,
	x: 600 / 2 - pixelBorderWidth / 2,
	y: 0,
	color: 0x220000
}];
for (var i = 0; i < pixelBorder.length; i++) {
	var border = pixelBorder[i];
	var borderPiece = LK.getAsset('white_button', {
		width: border.width,
		height: border.height,
		anchorX: 0.5,
		anchorY: 0.5,
		x: border.x,
		y: border.y
	});
	borderPiece.tint = border.color;
	button.addChild(borderPiece);
}
// Add pixelated blood splatter (using multiple smaller rectangles)
var bloodSplatterContainer = new Container();
button.addChild(bloodSplatterContainer);
var bloodPixels = [{
	width: 120,
	height: 50,
	x: -200,
	y: -50,
	color: 0x990000,
	alpha: 0.8
}, {
	width: 80,
	height: 30,
	x: -150,
	y: 20,
	color: 0xAA0000,
	alpha: 0.7
}, {
	width: 150,
	height: 40,
	x: -80,
	y: -40,
	color: 0x880000,
	alpha: 0.9
}, {
	width: 90,
	height: 60,
	x: 50,
	y: 10,
	color: 0xCC0000,
	alpha: 0.8
}, {
	width: 130,
	height: 45,
	x: 180,
	y: -15,
	color: 0xAA0000,
	alpha: 0.7
}, {
	width: 50,
	height: 90,
	x: 100,
	y: -60,
	color: 0x990000,
	alpha: 0.6
}, {
	width: 70,
	height: 25,
	x: -220,
	y: 30,
	color: 0xAA0000,
	alpha: 0.5
}];
for (var i = 0; i < bloodPixels.length; i++) {
	var blood = bloodPixels[i];
	var bloodPiece = LK.getAsset('blood_splatter', {
		width: blood.width,
		height: blood.height,
		anchorX: 0.5,
		anchorY: 0.5,
		x: blood.x,
		y: blood.y
	});
	bloodPiece.tint = blood.color;
	bloodPiece.alpha = blood.alpha;
	bloodSplatterContainer.addChild(bloodPiece);
}
// Keep reference to bloodSplatterContainer for animation
var bloodSplatter = bloodSplatterContainer;
// Create pixel-style "PLAY" text
var playText = new Text2('PLAY', {
	size: 120,
	fill: 0xFF0000,
	font: "Chiller,Creepster,'Times New Roman'"
});
playText.anchor.set(0.5, 0.5);
button.addChild(playText);
// Add slight rotation to the text for creepier effect
playText.rotation = -0.05;
// Animate the blood dripping effect
function animateBlood() {
	tween(bloodSplatter, {
		alpha: 0.6,
		y: bloodSplatter.y + 10
	}, {
		duration: 2000,
		onFinish: function onComplete() {
			tween(bloodSplatter, {
				alpha: 0.8,
				y: bloodSplatter.y - 10
			}, {
				duration: 2000,
				onFinish: animateBlood
			});
		}
	});
}
animateBlood();
//Add button to the game
game.addChild(button);
// Array to store squares
var squares = [];
//Handle button press
button.interactive = true;
button.down = function (x, y, obj) {
	console.log("Button pressed");
	//Flash the button on press
	LK.effects.flashObject(button, 0xCCCCCC, 300);
	// Clear existing squares
	for (var i = 0; i < squares.length; i++) {
		if (squares[i].parent) {
			squares[i].parent.removeChild(squares[i]);
		}
	}
	squares = [];
	// Create 6 new squares with spacing to fit the kids
	var centerX = 2048 / 2;
	var centerY = 2732 / 2;
	var horizontalOffset = 400;
	var verticalOffset = 450;
	// Position squares in a more evenly spaced 2x3 grid pattern
	var positions = [{
		x: centerX - horizontalOffset,
		y: centerY - verticalOffset
	}, {
		x: centerX,
		y: centerY - verticalOffset
	}, {
		x: centerX + horizontalOffset,
		y: centerY - verticalOffset
	}, {
		x: centerX - horizontalOffset,
		y: centerY + verticalOffset
	}, {
		x: centerX,
		y: centerY + verticalOffset
	}, {
		x: centerX + horizontalOffset,
		y: centerY + verticalOffset
	}];
	// Create and add each square with kid
	for (var i = 0; i < 6; i++) {
		var square = new Square();
		square.x = positions[i].x;
		square.y = positions[i].y;
		squares.push(square);
		game.addChild(square);
	}
	// Add bloody pulse effect when pressed
	tween(playText, {
		scaleX: 1.2,
		scaleY: 1.2
	}, {
		duration: 150,
		onFinish: function onComplete() {
			tween(playText, {
				scaleX: 1.0,
				scaleY: 1.0
			}, {
				duration: 150
			});
		}
	});
};
// Store reference to player character
var playerCharacter = null;
var hellWorld = null;
// Function to create church-to-hell transition effect
function showKidTransition(kidObj, makePlayerCharacter) {
	// Store selected kid to create player character later
	var selectedKid = kidObj;
	// Create a container for the transition sequence
	var transitionContainer = new Container();
	transitionContainer.x = 2048 / 2;
	transitionContainer.y = 2732 / 2;
	game.addChild(transitionContainer);
	// Create church background
	var churchContainer = new Container();
	transitionContainer.addChild(churchContainer);
	// Church building (pixelated)
	var churchBuilding = LK.getAsset('white_button', {
		width: 600,
		height: 500,
		anchorX: 0.5,
		anchorY: 0.5,
		y: 50
	});
	churchBuilding.tint = 0xCCCCCC; // Gray church
	churchContainer.addChild(churchBuilding);
	// Church roof
	var churchRoof = LK.getAsset('white_button', {
		width: 700,
		height: 200,
		anchorX: 0.5,
		anchorY: 0.5,
		y: -200
	});
	churchRoof.tint = 0x884444; // Reddish roof
	churchContainer.addChild(churchRoof);
	// Church door
	var churchDoor = LK.getAsset('white_button', {
		width: 100,
		height: 200,
		anchorX: 0.5,
		anchorY: 0.5,
		y: 200
	});
	churchDoor.tint = 0x553311; // Brown door
	churchContainer.addChild(churchDoor);
	// Cross
	var crossVertical = LK.getAsset('white_button', {
		width: 30,
		height: 120,
		anchorX: 0.5,
		anchorY: 0.5,
		y: -260
	});
	crossVertical.tint = 0xFFFFFF;
	churchContainer.addChild(crossVertical);
	var crossHorizontal = LK.getAsset('white_button', {
		width: 80,
		height: 30,
		anchorX: 0.5,
		anchorY: 0.5,
		y: -290
	});
	crossHorizontal.tint = 0xFFFFFF;
	churchContainer.addChild(crossHorizontal);
	// Add a copy of the kid walking to church
	var kidCopy = new Kid();
	kidCopy.y = 300;
	kidCopy.scale.set(0.8);
	churchContainer.addChild(kidCopy);
	// Create hell background (initially hidden)
	var hellContainer = new Container();
	hellContainer.alpha = 0;
	transitionContainer.addChild(hellContainer);
	// Hell background
	var hellBackground = LK.getAsset('white_button', {
		width: 800,
		height: 600,
		anchorX: 0.5,
		anchorY: 0.5
	});
	hellBackground.tint = 0x660000; // Dark red
	hellContainer.addChild(hellBackground);
	// Hell flames (multiple layers of pixelated flames)
	var flameColors = [0xFF3300, 0xFF6600, 0xFF9900];
	for (var i = 0; i < 5; i++) {
		for (var j = 0; j < 3; j++) {
			var flame = LK.getAsset('white_button', {
				width: 80 + Math.random() * 40,
				height: 120 + Math.random() * 60,
				anchorX: 0.5,
				anchorY: 0.5,
				x: -300 + i * 150 + Math.random() * 30,
				y: 180 - j * 60 + Math.random() * 30
			});
			flame.tint = flameColors[j];
			flame.alpha = 0.7;
			hellContainer.addChild(flame);
		}
	}
	// Add a demon-like figure
	var demon = new Container();
	hellContainer.addChild(demon);
	// Demon body
	var demonBody = LK.getAsset('white_button', {
		width: 100,
		height: 200,
		anchorX: 0.5,
		anchorY: 0.5,
		y: -50
	});
	demonBody.tint = 0x330000;
	demon.addChild(demonBody);
	// Demon head
	var demonHead = LK.getAsset('white_button', {
		width: 120,
		height: 120,
		anchorX: 0.5,
		anchorY: 0.5,
		y: -160
	});
	demonHead.tint = 0x660000;
	demon.addChild(demonHead);
	// Demon horns
	var leftHorn = LK.getAsset('white_button', {
		width: 30,
		height: 60,
		anchorX: 0.5,
		anchorY: 0.5,
		x: -50,
		y: -200
	});
	leftHorn.tint = 0x000000;
	leftHorn.rotation = -0.3;
	demon.addChild(leftHorn);
	var rightHorn = LK.getAsset('white_button', {
		width: 30,
		height: 60,
		anchorX: 0.5,
		anchorY: 0.5,
		x: 50,
		y: -200
	});
	rightHorn.tint = 0x000000;
	rightHorn.rotation = 0.3;
	demon.addChild(rightHorn);
	// Demon eyes
	var leftEye = LK.getAsset('white_button', {
		width: 20,
		height: 20,
		anchorX: 0.5,
		anchorY: 0.5,
		x: -30,
		y: -170
	});
	leftEye.tint = 0xFF0000;
	demon.addChild(leftEye);
	var rightEye = LK.getAsset('white_button', {
		width: 20,
		height: 20,
		anchorX: 0.5,
		anchorY: 0.5,
		x: 30,
		y: -170
	});
	rightEye.tint = 0xFF0000;
	demon.addChild(rightEye);
	// Add distorted kid in hell
	var hellKid = new Kid();
	hellKid.y = 100;
	hellKid.scale.set(0.8);
	// Tint the hell kid red
	for (var i = 0; i < hellKid.children[0].children.length; i++) {
		var part = hellKid.children[0].children[i];
		part.tint = mixColors(part.tint, 0xFF0000, 0.7);
	}
	hellContainer.addChild(hellKid);
	// Save reference to clicked kid to create multiple copies in hell later
	var clickedKid = kidObj;
	// Animation sequence
	// 1. Kid walks to church
	tween(kidCopy, {
		y: 0
	}, {
		duration: 1500,
		onFinish: function onFinish() {
			// 2. Kid reaches church door
			tween(kidCopy, {
				alpha: 0.5,
				y: -50
			}, {
				duration: 800,
				onFinish: function onFinish() {
					// 3. Church scene fades out, hell fades in
					tween(churchContainer, {
						alpha: 0
					}, {
						duration: 800
					});
					tween(hellContainer, {
						alpha: 1
					}, {
						duration: 800,
						onFinish: function onFinish() {
							// 4. Add all kids to hell - teleport all kids at once
							for (var i = 0; i < squares.length; i++) {
								if (squares[i] && squares[i].children) {
									// Find the kid in each square
									for (var j = 0; j < squares[i].children.length; j++) {
										if (squares[i].children[j] instanceof Kid) {
											// Create a distorted version of this kid in hell
											var teleportedKid = new Kid();
											teleportedKid.x = -200 + Math.random() * 400; // Random position in hell
											teleportedKid.y = 0 + Math.random() * 200;
											teleportedKid.scale.set(0.6 + Math.random() * 0.4);
											teleportedKid.rotation = (Math.random() - 0.5) * 0.5; // Slightly tilted
											// Make kid look distorted/demonic with red tint
											for (var k = 0; k < teleportedKid.children[0].children.length; k++) {
												var part = teleportedKid.children[0].children[k];
												part.tint = mixColors(part.tint, 0xFF0000, 0.5 + Math.random() * 0.5);
											}
											// Add kid to hell
											hellContainer.addChild(teleportedKid);
											// Animate the teleported kid
											tween(teleportedKid, {
												y: teleportedKid.y + (Math.random() * 40 - 20),
												rotation: teleportedKid.rotation + (Math.random() - 0.5) * 0.3
											}, {
												duration: 1000 + Math.random() * 1000
											});
										}
									}
								}
							}
							// 5. Final hell scene with distorted kid
							tween(hellKid, {
								y: 50,
								rotation: 0.1
							}, {
								duration: 1000,
								onFinish: function onFinish() {
									// 6. After showing the transition, fade to white then create hell world with player
									LK.setTimeout(function () {
										// Create a white flash overlay for the teleportation effect
										var whiteFlash = LK.getAsset('white_button', {
											width: 4000,
											height: 4000,
											anchorX: 0.5,
											anchorY: 0.5,
											alpha: 0
										});
										whiteFlash.tint = 0xFFFFFF;
										transitionContainer.addChild(whiteFlash);
										// Fade to white
										tween(whiteFlash, {
											alpha: 1
										}, {
											duration: 800,
											onFinish: function onFinish() {
												// Remove all game elements
												for (var i = 0; i < squares.length; i++) {
													if (squares[i].parent) {
														squares[i].parent.removeChild(squares[i]);
													}
												}
												squares = [];
												if (button.parent) {
													button.parent.removeChild(button);
												}
												// Create hell world
												var hellWorld = new HellWorld();
												game.addChild(hellWorld);
												// Create player character
												playerCharacter = new PlayerCharacter();
												playerCharacter.x = 2048 / 2;
												playerCharacter.y = 2732 / 2;
												game.addChild(playerCharacter);
												// Fade from white
												game.removeChild(transitionContainer);
												// Create white flash for final transition
												var finalFlash = LK.getAsset('white_button', {
													width: 4000,
													height: 4000,
													anchorX: 0.5,
													anchorY: 0.5,
													alpha: 1
												});
												finalFlash.tint = 0xFFFFFF;
												game.addChild(finalFlash);
												// Fade out white flash
												tween(finalFlash, {
													alpha: 0
												}, {
													duration: 1000,
													onFinish: function onFinish() {
														game.removeChild(finalFlash);
													}
												});
											}
										});
									}, 2000);
								}
							});
						}
					});
				}
			});
		}
	});
}
// Helper function to mix colors
function mixColors(color1, color2, ratio) {
	var r1 = color1 >> 16 & 0xFF;
	var g1 = color1 >> 8 & 0xFF;
	var b1 = color1 & 0xFF;
	var r2 = color2 >> 16 & 0xFF;
	var g2 = color2 >> 8 & 0xFF;
	var b2 = color2 & 0xFF;
	var r = Math.floor(r1 * (1 - ratio) + r2 * ratio);
	var g = Math.floor(g1 * (1 - ratio) + g2 * ratio);
	var b = Math.floor(b1 * (1 - ratio) + b2 * ratio);
	return r << 16 | g << 8 | b;
}
// Update function for game to call update on all elements
game.update = function () {
	// Update all squares and their kids if they exist
	for (var i = 0; i < squares.length; i++) {
		// Call square's update method if available
		if (squares[i] && squares[i].update) {
			squares[i].update();
		}
		// Make sure the kid's update method is called
		if (squares[i] && squares[i].children) {
			for (var j = 0; j < squares[i].children.length; j++) {
				if (squares[i].children[j] && squares[i].children[j].update) {
					squares[i].children[j].update();
				}
			}
		}
	}
	// Update player character if in hell world
	if (playerCharacter && playerCharacter.update) {
		playerCharacter.update();
	}
	// Update hell world
	if (hellWorld && hellWorld.update) {
		hellWorld.update();
	}
};
;

===================================================================
--- original.js
+++ change.js
@@ -602,9 +602,11 @@
 /**** 
 * Initialize Game
 ****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000
+	backgroundColor: 0x000000,
+	name: "Infernal Voyage",
+	description: "Choose your character and navigate through the fiery depths of hell in this pixelated adventure!"
 });
 
 /**** 
 * Game Code