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

/**** 
* Classes
****/ 
// Puzzle class for puzzle scene logic
var Puzzle = Container.expand(function () {
	var self = Container.call(this);
	// Add a background image for the puzzle
	var bg = self.attachAsset('Puzzleone', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: 2048 / 2,
		y: 2732 / 2,
		width: 2048,
		height: 2732
	});
	// 5x4 grid: 5 columns, 4 rows
	var cols = 5;
	var rows = 4;
	var stringWidth = 25;
	var stringHeight = 300;
	var gapX = 55; // horizontal gap between strings
	var gapY = 350; // vertical gap between rows
	// Calculate starting position so grid is centered
	var totalWidth = (cols - 1) * gapX;
	var totalHeight = (rows - 1) * gapY;
	var startX = 2048 / 2 - totalWidth / 2;
	var startY = 2732 / 2 - totalHeight / 2;
	// Store all string objects for later use
	self.strings = [];
	for (var row = 0; row < rows; row++) {
		for (var col = 0; col < cols; col++) {
			var x = startX + col * gapX;
			var y = startY + row * gapY;
			var stringAsset = self.attachAsset('Strings', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				y: y,
				width: stringWidth,
				height: stringHeight,
				alpha: 1
			});
			// Add strum animation to each string
			stringAsset.strum = function (s) {
				return function () {
					tween(s, {
						alpha: 0.2
					}, {
						duration: 60,
						onFinish: function onFinish() {
							tween(s, {
								alpha: 1
							}, {
								duration: 60
							});
						}
					});
				};
			}(stringAsset);
			self.strings.push(stringAsset);
		}
	}
	// Expose a method to strum a string by index
	self.strumString = function (index) {
		if (self.strings[index]) {
			self.strings[index].strum();
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Import the tween plugin for animations
// Add the first scene background image, centered and covering the game area
// Add the first scene background image, centered and covering the game area in high definition
var firstSceneBg = LK.getAsset('First', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 2732 / 2,
	// Use the full game area, but let the engine render the high-res image natively
	width: 2048,
	height: 2732
});
game.addChild(firstSceneBg);
;
// Add the story image overlay at the bottom of the first scene, scaled to fit within the visible screen
var storyOverlay = LK.getAsset('Story', {
	anchorX: 0.5,
	anchorY: 1,
	x: 2048 / 2,
	y: 2732,
	// Use the full width, but reduce height to fit better on screen
	width: 2048,
	height: 500
});
game.addChild(storyOverlay);
;
// The assets are now initialized at higher resolution for high definition display.;
// Add narrative text over the story overlay at the bottom of the first scene
var narrativeText = new Text2("The moon cast a glow over the sweet little town of Melodia...", {
	size: 70,
	fill: 0x000000,
	align: "center",
	wordWrap: true,
	wordWrapWidth: 1700,
	fontWeight: "bold",
	font: "Times New Roman"
});
// Center the text horizontally, anchor at the middle-top of the text
narrativeText.anchor.set(0.5, 0);
// Position the text above the bottom edge, inside the story overlay, with more margin
narrativeText.x = 2048 / 2;
narrativeText.y = 2732 - 500 + 60 + 100; // moved down by 100px
game.addChild(narrativeText);
;
// Hoist second scene variables to outer scope for access in both transitions
var secondSceneBg, secondDreamBubble, secondDream, secondStoryOverlay, secondNarrativeText;
// Add a flag to track if we are on the first scene
var onFirstScene = true;
// Add a handler to move to the second scene on touch/click anywhere
game.down = function (x, y, obj) {
	if (onFirstScene) {
		onFirstScene = false;
		// Fade out first scene elements
		tween(firstSceneBg, {
			alpha: 0
		}, {
			duration: 500
		});
		tween(storyOverlay, {
			alpha: 0
		}, {
			duration: 500
		});
		tween(narrativeText, {
			alpha: 0
		}, {
			duration: 500,
			onFinish: function onFinish() {
				// Remove first scene elements after fade out
				firstSceneBg.destroy();
				storyOverlay.destroy();
				narrativeText.destroy();
				// Add the second scene background, centered and covering the game area in high definition
				secondSceneBg = LK.getAsset('Second', {
					anchorX: 0.5,
					anchorY: 0.5,
					x: 2048 / 2,
					y: 2732 / 2,
					width: 2048,
					height: 2732,
					alpha: 0
				});
				game.addChild(secondSceneBg);
				// Add dream bubble image, centered near the top of the scene
				secondDreamBubble = LK.getAsset('Dreambubble', {
					anchorX: 0.5,
					anchorY: 0.5,
					x: 2048 / 2 + 500,
					y: 700 - 300,
					width: 800,
					height: 787.5,
					alpha: 0
				});
				game.addChild(secondDreamBubble);
				// Add dream image inside the dream bubble
				secondDream = LK.getAsset('Dream', {
					anchorX: 0.5,
					anchorY: 0.5,
					x: secondDreamBubble.x,
					y: secondDreamBubble.y - 40,
					// visually center inside bubble, adjust as needed
					width: 350,
					height: 350,
					alpha: 0
				});
				game.addChild(secondDream);
				// Add story overlay image at the bottom of the second scene, scaled to fit within the visible screen
				secondStoryOverlay = LK.getAsset('Story', {
					anchorX: 0.5,
					anchorY: 1,
					x: 2048 / 2,
					y: 2732,
					width: 2048,
					height: 500,
					alpha: 0
				});
				game.addChild(secondStoryOverlay);
				// Add narrative text for the second scene
				secondNarrativeText = new Text2("A spark ignites in the darkness.\nA new journey begins tonight.", {
					size: 70,
					fill: 0x000000,
					align: "center",
					wordWrap: true,
					wordWrapWidth: 1700,
					fontWeight: "bold",
					font: "Times New Roman"
				});
				secondNarrativeText.anchor.set(0.5, 0);
				secondNarrativeText.x = 2048 / 2;
				secondNarrativeText.y = 2732 - 500 + 60 + 100; // moved down by 100px
				secondNarrativeText.alpha = 0;
				game.addChild(secondNarrativeText);
				// Fade in second scene elements
				tween(secondSceneBg, {
					alpha: 1
				}, {
					duration: 500
				});
				tween(secondDreamBubble, {
					alpha: 1
				}, {
					duration: 3000
				});
				tween(secondDream, {
					alpha: 1
				}, {
					duration: 3000
				});
				tween(secondStoryOverlay, {
					alpha: 1
				}, {
					duration: 500
				});
				tween(secondNarrativeText, {
					alpha: 1
				}, {
					duration: 500
				});
			}
		});
		// Hoist third scene variables to outer scope for access in both transitions
		var thirdSceneBg, thirdStoryOverlay, thirdNarrativeText;
		// Hoist fourth scene variables to outer scope for access in both transitions
		var fourthSceneBg, fourthStoryOverlay, fourthNarrativeText;
		// Hoist fifth scene variables to outer scope for access in both transitions
		var fifthSceneBg, fifthStoryOverlay, fifthNarrativeText;
		// Add handler for third scene transition
		var onSecondScene = true;
		game.down = function (x, y, obj) {
			if (onSecondScene) {
				onSecondScene = false;
				// Fade out second scene elements
				tween(secondSceneBg, {
					alpha: 0
				}, {
					duration: 500
				});
				tween(secondDreamBubble, {
					alpha: 0
				}, {
					duration: 500
				});
				tween(secondDream, {
					alpha: 0
				}, {
					duration: 500
				});
				tween(secondStoryOverlay, {
					alpha: 0
				}, {
					duration: 500
				});
				tween(secondNarrativeText, {
					alpha: 0
				}, {
					duration: 500,
					onFinish: function onFinish() {
						// Remove second scene elements after fade out
						secondSceneBg.destroy();
						if (secondDreamBubble) {
							secondDreamBubble.destroy();
						}
						if (secondDream) {
							secondDream.destroy();
						}
						secondStoryOverlay.destroy();
						secondNarrativeText.destroy();
						// Add the third scene background, centered and covering the game area in high definition
						thirdSceneBg = LK.getAsset('Third', {
							anchorX: 0.5,
							anchorY: 0.5,
							x: 2048 / 2,
							y: 2732 / 2,
							width: 2048,
							height: 2732,
							alpha: 0
						});
						game.addChild(thirdSceneBg);
						// Add story overlay image at the bottom of the third scene, scaled to fit within the visible screen
						thirdStoryOverlay = LK.getAsset('Story', {
							anchorX: 0.5,
							anchorY: 1,
							x: 2048 / 2,
							y: 2732,
							width: 2048,
							height: 500,
							alpha: 0
						});
						game.addChild(thirdStoryOverlay);
						// Add narrative text for the third scene
						thirdNarrativeText = new Text2("The stars align, and destiny calls.\nThe adventure truly begins.", {
							size: 70,
							fill: 0x000000,
							align: "center",
							wordWrap: true,
							wordWrapWidth: 1700,
							fontWeight: "bold",
							font: "Times New Roman"
						});
						thirdNarrativeText.anchor.set(0.5, 0);
						thirdNarrativeText.x = 2048 / 2;
						thirdNarrativeText.y = 2732 - 500 + 60 + 100; // moved down by 100px
						thirdNarrativeText.alpha = 0;
						game.addChild(thirdNarrativeText);
						// Fade in third scene elements
						if (thirdSceneBg && thirdStoryOverlay && thirdNarrativeText) {
							tween(thirdSceneBg, {
								alpha: 1
							}, {
								duration: 500
							});
							tween(thirdStoryOverlay, {
								alpha: 1
							}, {
								duration: 500
							});
							tween(thirdNarrativeText, {
								alpha: 1
							}, {
								duration: 500
							});
						}
					}
				});
				// Add handler for fourth scene transition
				var onThirdScene = true;
				game.down = function (x, y, obj) {
					if (onThirdScene) {
						onThirdScene = false;
						// Fade out third scene elements
						tween(thirdSceneBg, {
							alpha: 0
						}, {
							duration: 500
						});
						tween(thirdStoryOverlay, {
							alpha: 0
						}, {
							duration: 500
						});
						tween(thirdNarrativeText, {
							alpha: 0
						}, {
							duration: 500,
							onFinish: function onFinish() {
								// Remove third scene elements after fade out
								thirdSceneBg.destroy();
								thirdStoryOverlay.destroy();
								thirdNarrativeText.destroy();
								// --- Insert 5x4 Puzzle Scene here ---
								var puzzleScene = new Puzzle();
								puzzleScene.alpha = 0;
								game.addChild(puzzleScene);
								tween(puzzleScene, {
									alpha: 1
								}, {
									duration: 500
								});
								// Handler for transitioning from puzzle scene to fourth scene
								var onPuzzleScene = true;
								game.down = function (x, y, obj) {
									if (onPuzzleScene) {
										onPuzzleScene = false;
										// Fade out puzzle scene
										tween(puzzleScene, {
											alpha: 0
										}, {
											duration: 500,
											onFinish: function onFinish() {
												puzzleScene.destroy();
												// Hoist fourth scene variables to outer scope for access in both transitions
												fourthSceneBg = LK.getAsset('Fourth', {
													anchorX: 0.5,
													anchorY: 0.5,
													x: 2048 / 2,
													y: 2732 / 2,
													width: 2048,
													height: 2732,
													alpha: 0
												});
												game.addChild(fourthSceneBg);
												// Add story overlay image at the bottom of the fourth scene, scaled to fit within the visible screen
												fourthStoryOverlay = LK.getAsset('Story', {
													anchorX: 0.5,
													anchorY: 1,
													x: 2048 / 2,
													y: 2732,
													width: 2048,
													height: 500,
													alpha: 0
												});
												game.addChild(fourthStoryOverlay);
												// Add narrative text for the fourth scene
												fourthNarrativeText = new Text2("A new chapter unfolds beneath the silent moon.\nYour legend is just beginning.", {
													size: 70,
													fill: 0x000000,
													align: "center",
													wordWrap: true,
													wordWrapWidth: 1700,
													fontWeight: "bold",
													font: "Times New Roman"
												});
												fourthNarrativeText.anchor.set(0.5, 0);
												fourthNarrativeText.x = 2048 / 2;
												fourthNarrativeText.y = 2732 - 500 + 60 + 100; // moved down by 100px
												fourthNarrativeText.alpha = 0;
												game.addChild(fourthNarrativeText);
												// Fade in fourth scene elements
												if (fourthSceneBg && fourthStoryOverlay && fourthNarrativeText) {
													tween(fourthSceneBg, {
														alpha: 1
													}, {
														duration: 500
													});
													tween(fourthStoryOverlay, {
														alpha: 1
													}, {
														duration: 500
													});
													tween(fourthNarrativeText, {
														alpha: 1
													}, {
														duration: 500
													});
												}
											}
										});
									}
								};
								// --- End Puzzle Scene insertion ---
							}
						});
						// Hoist fourth scene variables to outer scope for access in both transitions
						var fourthSceneBg, fourthStoryOverlay, fourthNarrativeText;
						// Add handler for fifth scene transition
						var onFourthScene = true;
						game.down = function (x, y, obj) {
							if (onFourthScene) {
								onFourthScene = false;
								// Fade out fourth scene elements
								tween(fourthSceneBg, {
									alpha: 0
								}, {
									duration: 500
								});
								tween(fourthStoryOverlay, {
									alpha: 0
								}, {
									duration: 500
								});
								tween(fourthNarrativeText, {
									alpha: 0
								}, {
									duration: 500,
									onFinish: function onFinish() {
										// Remove fourth scene elements after fade out
										fourthSceneBg.destroy();
										fourthStoryOverlay.destroy();
										fourthNarrativeText.destroy();
										// Hoist fifth scene variables to outer scope for access in both transitions
										fifthSceneBg = LK.getAsset('Fifth', {
											anchorX: 0.5,
											anchorY: 0.5,
											x: 2048 / 2,
											y: 2732 / 2,
											width: 2048,
											height: 2732,
											alpha: 0
										});
										game.addChild(fifthSceneBg);
										// Add story overlay image at the bottom of the fifth scene, scaled to fit within the visible screen
										fifthStoryOverlay = LK.getAsset('Story', {
											anchorX: 0.5,
											anchorY: 1,
											x: 2048 / 2,
											y: 2732,
											width: 2048,
											height: 500,
											alpha: 0
										});
										game.addChild(fifthStoryOverlay);
										// Add narrative text for the fifth scene
										fifthNarrativeText = new Text2("The journey continues, brighter than ever.\nA new dawn awaits.", {
											size: 70,
											fill: 0x000000,
											align: "center",
											wordWrap: true,
											wordWrapWidth: 1700,
											fontWeight: "bold",
											font: "Times New Roman"
										});
										fifthNarrativeText.anchor.set(0.5, 0);
										fifthNarrativeText.x = 2048 / 2;
										fifthNarrativeText.y = 2732 - 500 + 60 + 100; // moved down by 100px
										fifthNarrativeText.alpha = 0;
										game.addChild(fifthNarrativeText);
										// Fade in fifth scene elements
										tween(fifthSceneBg, {
											alpha: 1
										}, {
											duration: 500
										});
										tween(fifthStoryOverlay, {
											alpha: 1
										}, {
											duration: 500
										});
										tween(fifthNarrativeText, {
											alpha: 1
										}, {
											duration: 500
										});
									}
								});
								// Hoist fifth scene variables to outer scope for access in both transitions
								var fifthSceneBg, fifthStoryOverlay, fifthNarrativeText;
								// Add handler for sixth scene transition
								var onFifthScene = true;
								game.down = function (x, y, obj) {
									if (onFifthScene) {
										onFifthScene = false;
										// Fade out fifth scene elements
										tween(fifthSceneBg, {
											alpha: 0
										}, {
											duration: 500
										});
										tween(fifthStoryOverlay, {
											alpha: 0
										}, {
											duration: 500
										});
										tween(fifthNarrativeText, {
											alpha: 0
										}, {
											duration: 500,
											onFinish: function onFinish() {
												// Remove fifth scene elements after fade out
												fifthSceneBg.destroy();
												fifthStoryOverlay.destroy();
												fifthNarrativeText.destroy();
												// Add the sixth scene background, centered and covering the game area in high definition
												var sixthSceneBg = LK.getAsset('Sixth', {
													anchorX: 0.5,
													anchorY: 0.5,
													x: 2048 / 2,
													y: 2732 / 2,
													width: 2048,
													height: 2732,
													alpha: 0
												});
												game.addChild(sixthSceneBg);
												// Add story overlay image at the bottom of the sixth scene, scaled to fit within the visible screen
												var sixthStoryOverlay = LK.getAsset('Story', {
													anchorX: 0.5,
													anchorY: 1,
													x: 2048 / 2,
													y: 2732,
													width: 2048,
													height: 500,
													alpha: 0
												});
												game.addChild(sixthStoryOverlay);
												// Add narrative text for the sixth scene
												var sixthNarrativeText = new Text2("The story continues beyond the horizon.\nYour adventure is limitless.", {
													size: 70,
													fill: 0x000000,
													align: "center",
													wordWrap: true,
													wordWrapWidth: 1700,
													fontWeight: "bold",
													font: "Times New Roman"
												});
												sixthNarrativeText.anchor.set(0.5, 0);
												sixthNarrativeText.x = 2048 / 2;
												sixthNarrativeText.y = 2732 - 500 + 60 + 100; // moved down by 100px
												sixthNarrativeText.alpha = 0;
												game.addChild(sixthNarrativeText);
												// Fade in sixth scene elements
												tween(sixthSceneBg, {
													alpha: 1
												}, {
													duration: 500
												});
												tween(sixthStoryOverlay, {
													alpha: 1
												}, {
													duration: 500
												});
												tween(sixthNarrativeText, {
													alpha: 1
												}, {
													duration: 500
												});
												// Handler for transitioning from sixth scene to end (no puzzleone scene)
												var onSixthScene = true;
												game.down = function (x, y, obj) {
													if (onSixthScene) {
														onSixthScene = false;
														// Fade out sixth scene elements
														tween(sixthSceneBg, {
															alpha: 0
														}, {
															duration: 500
														});
														tween(sixthStoryOverlay, {
															alpha: 0
														}, {
															duration: 500
														});
														tween(sixthNarrativeText, {
															alpha: 0
														}, {
															duration: 500,
															onFinish: function onFinish() {
																// Remove sixth scene elements after fade out
																sixthSceneBg.destroy();
																sixthStoryOverlay.destroy();
																sixthNarrativeText.destroy();
																// Add puzzleone image, centered and covering the game area
																var puzzleoneBg = LK.getAsset('Puzzleone', {
																	anchorX: 0.5,
																	anchorY: 0.5,
																	x: 2048 / 2,
																	y: 2732 / 2,
																	width: 2048,
																	height: 2732,
																	alpha: 0
																});
																game.addChild(puzzleoneBg);
																// Add strings image, centered and covering the game area, above puzzleoneBg
																var stringsImg = LK.getAsset('Strings', {
																	anchorX: 0.5,
																	anchorY: 0.5,
																	x: 2048 / 2 - 320 + 10,
																	// moved right by 10
																	y: 2732 / 2 - 150 - 400,
																	width: 25,
																	height: 300,
																	alpha: 0
																});
																// Add all string images to an array for swipe detection
																var allStrings = [];
																// First string
																stringsImg.x -= 20;
																stringsImg.x += 5;
																stringsImg.strum = function () {
																	tween(stringsImg, {
																		alpha: 0.2
																	}, {
																		duration: 60,
																		onFinish: function onFinish() {
																			tween(stringsImg, {
																				alpha: 1
																			}, {
																				duration: 60
																			});
																		}
																	});
																};
																allStrings.push(stringsImg);
																game.addChild(stringsImg);
																// Second string
																var stringsImgCopy = LK.getAsset('Strings', {
																	anchorX: 0.5,
																	anchorY: 0.5,
																	x: stringsImg.x + 55 + 10,
																	// moved right by 10
																	// 25 (width) + 30 (gap) from string 1
																	y: stringsImg.y,
																	width: 25,
																	height: 300,
																	alpha: 0
																});
																stringsImgCopy.strum = function () {
																	tween(stringsImgCopy, {
																		alpha: 0.2
																	}, {
																		duration: 60,
																		onFinish: function onFinish() {
																			tween(stringsImgCopy, {
																				alpha: 1
																			}, {
																				duration: 60
																			});
																		}
																	});
																};
																allStrings.push(stringsImgCopy);
																game.addChild(stringsImgCopy);
																// Third string
																var stringsImgCopy2 = LK.getAsset('Strings', {
																	anchorX: 0.5,
																	anchorY: 0.5,
																	x: stringsImg.x + 2 * 55 + 10,
																	// moved right by 10
																	// 2 * (25 + 30) from string 1
																	y: stringsImg.y,
																	width: 25,
																	height: 300,
																	alpha: 0
																});
																stringsImgCopy2.strum = function () {
																	tween(stringsImgCopy2, {
																		alpha: 0.2
																	}, {
																		duration: 60,
																		onFinish: function onFinish() {
																			tween(stringsImgCopy2, {
																				alpha: 1
																			}, {
																				duration: 60
																			});
																		}
																	});
																};
																allStrings.push(stringsImgCopy2);
																game.addChild(stringsImgCopy2);
																// Fourth string
																var stringsImgCopy3 = LK.getAsset('Strings', {
																	anchorX: 0.5,
																	anchorY: 0.5,
																	x: stringsImg.x + 3 * 55 + 10,
																	// moved right by 10
																	// 3 * (25 + 30) from string 1
																	y: stringsImg.y,
																	width: 25,
																	height: 300,
																	alpha: 0
																});
																stringsImgCopy3.strum = function () {
																	tween(stringsImgCopy3, {
																		alpha: 0.2
																	}, {
																		duration: 60,
																		onFinish: function onFinish() {
																			tween(stringsImgCopy3, {
																				alpha: 1
																			}, {
																				duration: 60
																			});
																		}
																	});
																};
																allStrings.push(stringsImgCopy3);
																game.addChild(stringsImgCopy3);
																// Fifth string (copy)
																var stringCopies = [];
																var stringCopy = LK.getAsset('Strings', {
																	anchorX: 0.5,
																	anchorY: 0.5,
																	x: stringsImg.x + 4 * 55 + 10,
																	// moved right by 10
																	// 4 * (25 + 30) from string 1
																	y: stringsImg.y,
																	width: 25,
																	height: 300,
																	alpha: 0
																});
																stringCopy.strum = function () {
																	tween(stringCopy, {
																		alpha: 0.2
																	}, {
																		duration: 60,
																		onFinish: function onFinish() {
																			tween(stringCopy, {
																				alpha: 1
																			}, {
																				duration: 60
																			});
																		}
																	});
																};
																allStrings.push(stringCopy);
																game.addChild(stringCopy);
																// --- Copy all five strings and place them to the right of string 5 ---
																var copiedStrings = [];
																for (var i = 0; i < 5; i++) {
																	var origString = allStrings[i];
																	var copiedString = LK.getAsset('Strings', {
																		anchorX: 0.5,
																		anchorY: 0.5,
																		x: stringCopy.x + (i + 1) * 55,
																		// 55px right of string 5 for each
																		y: origString.y,
																		width: 25,
																		height: 300,
																		alpha: 0
																	});
																	// Copy strum animation
																	copiedString.strum = function (s) {
																		return function () {
																			tween(s, {
																				alpha: 0.2
																			}, {
																				duration: 60,
																				onFinish: function onFinish() {
																					tween(s, {
																						alpha: 1
																					}, {
																						duration: 60
																					});
																				}
																			});
																		};
																	}(copiedString);
																	allStrings.push(copiedString);
																	copiedStrings.push(copiedString);
																	game.addChild(copiedString);
																}
																// --- Place another 5 strings to the right of string 10 ---
																var copiedStrings2 = [];
																for (var i = 0; i < 5; i++) {
																	var origString = allStrings[i];
																	// string 10 is allStrings[9]
																	var baseString = allStrings[9];
																	var copiedString = LK.getAsset('Strings', {
																		anchorX: 0.5,
																		anchorY: 0.5,
																		x: baseString.x + (i + 1) * 55,
																		y: baseString.y,
																		width: 25,
																		height: 300,
																		alpha: 0
																	});
																	// Copy strum animation
																	copiedString.strum = function (s) {
																		return function () {
																			tween(s, {
																				alpha: 0.2
																			}, {
																				duration: 60,
																				onFinish: function onFinish() {
																					tween(s, {
																						alpha: 1
																					}, {
																						duration: 60
																					});
																				}
																			});
																		};
																	}(copiedString);
																	allStrings.push(copiedString);
																	copiedStrings2.push(copiedString);
																	game.addChild(copiedString);
																}
																// Fade in all copied strings
																for (var i = 0; i < copiedStrings.length; i++) {
																	tween(copiedStrings[i], {
																		alpha: 1
																	}, {
																		duration: 500
																	});
																}
																// Fade in the next 5 strings
																for (var i = 0; i < copiedStrings2.length; i++) {
																	tween(copiedStrings2[i], {
																		alpha: 1
																	}, {
																		duration: 500
																	});
																}
																tween(puzzleoneBg, {
																	alpha: 1
																}, {
																	duration: 500
																});
																tween(stringsImg, {
																	alpha: 1
																}, {
																	duration: 500
																});
																tween(stringsImgCopy, {
																	alpha: 1
																}, {
																	duration: 500
																});
																tween(stringsImgCopy2, {
																	alpha: 1
																}, {
																	duration: 500
																});
																tween(stringsImgCopy3, {
																	alpha: 1
																}, {
																	duration: 500
																});
																tween(stringCopy, {
																	alpha: 1
																}, {
																	duration: 500
																});
																stringCopies.push(stringCopy);
																// --- Swipe to strum logic ---
																var lastStrummed = {};
																function pointInString(x, y, stringObj) {
																	// Check if (x, y) is inside the string's bounds
																	var left = stringObj.x - stringObj.width / 2;
																	var right = stringObj.x + stringObj.width / 2;
																	var top = stringObj.y - stringObj.height / 2;
																	var bottom = stringObj.y + stringObj.height / 2;
																	return x >= left && x <= right && y >= top && y <= bottom;
																}
																game.move = function (x, y, obj) {
																	// For each string, check if the pointer is inside and wasn't last frame
																	for (var i = 0; i < allStrings.length; i++) {
																		var s = allStrings[i];
																		var id = "string" + i;
																		if (!lastStrummed[id]) lastStrummed[id] = false;
																		var inside = pointInString(x, y, s);
																		if (!lastStrummed[id] && inside) {
																			// Strum!
																			s.strum();
																			// Play harp sound
																			LK.getSound('Harp').play();
																		}
																		lastStrummed[id] = inside;
																	}
																};
																game.up = function (x, y, obj) {
																	// Reset all lastStrummed so next swipe can retrigger
																	for (var i = 0; i < allStrings.length; i++) {
																		lastStrummed["string" + i] = false;
																	}
																};
															}
														});
													}
												};
											}
										});
									}
								};
							}
						};
					}
				};
			}
		};
	}
};

===================================================================
--- original.js
+++ change.js
@@ -372,63 +372,89 @@
 								// Remove third scene elements after fade out
 								thirdSceneBg.destroy();
 								thirdStoryOverlay.destroy();
 								thirdNarrativeText.destroy();
-								// Hoist fourth scene variables to outer scope for access in both transitions
-								fourthSceneBg = LK.getAsset('Fourth', {
-									anchorX: 0.5,
-									anchorY: 0.5,
-									x: 2048 / 2,
-									y: 2732 / 2,
-									width: 2048,
-									height: 2732,
-									alpha: 0
+								// --- Insert 5x4 Puzzle Scene here ---
+								var puzzleScene = new Puzzle();
+								puzzleScene.alpha = 0;
+								game.addChild(puzzleScene);
+								tween(puzzleScene, {
+									alpha: 1
+								}, {
+									duration: 500
 								});
-								game.addChild(fourthSceneBg);
-								// Add story overlay image at the bottom of the fourth scene, scaled to fit within the visible screen
-								fourthStoryOverlay = LK.getAsset('Story', {
-									anchorX: 0.5,
-									anchorY: 1,
-									x: 2048 / 2,
-									y: 2732,
-									width: 2048,
-									height: 500,
-									alpha: 0
-								});
-								game.addChild(fourthStoryOverlay);
-								// Add narrative text for the fourth scene
-								fourthNarrativeText = new Text2("A new chapter unfolds beneath the silent moon.\nYour legend is just beginning.", {
-									size: 70,
-									fill: 0x000000,
-									align: "center",
-									wordWrap: true,
-									wordWrapWidth: 1700,
-									fontWeight: "bold",
-									font: "Times New Roman"
-								});
-								fourthNarrativeText.anchor.set(0.5, 0);
-								fourthNarrativeText.x = 2048 / 2;
-								fourthNarrativeText.y = 2732 - 500 + 60 + 100; // moved down by 100px
-								fourthNarrativeText.alpha = 0;
-								game.addChild(fourthNarrativeText);
-								// Fade in fourth scene elements
-								if (fourthSceneBg && fourthStoryOverlay && fourthNarrativeText) {
-									tween(fourthSceneBg, {
-										alpha: 1
-									}, {
-										duration: 500
-									});
-									tween(fourthStoryOverlay, {
-										alpha: 1
-									}, {
-										duration: 500
-									});
-									tween(fourthNarrativeText, {
-										alpha: 1
-									}, {
-										duration: 500
-									});
-								}
+								// Handler for transitioning from puzzle scene to fourth scene
+								var onPuzzleScene = true;
+								game.down = function (x, y, obj) {
+									if (onPuzzleScene) {
+										onPuzzleScene = false;
+										// Fade out puzzle scene
+										tween(puzzleScene, {
+											alpha: 0
+										}, {
+											duration: 500,
+											onFinish: function onFinish() {
+												puzzleScene.destroy();
+												// Hoist fourth scene variables to outer scope for access in both transitions
+												fourthSceneBg = LK.getAsset('Fourth', {
+													anchorX: 0.5,
+													anchorY: 0.5,
+													x: 2048 / 2,
+													y: 2732 / 2,
+													width: 2048,
+													height: 2732,
+													alpha: 0
+												});
+												game.addChild(fourthSceneBg);
+												// Add story overlay image at the bottom of the fourth scene, scaled to fit within the visible screen
+												fourthStoryOverlay = LK.getAsset('Story', {
+													anchorX: 0.5,
+													anchorY: 1,
+													x: 2048 / 2,
+													y: 2732,
+													width: 2048,
+													height: 500,
+													alpha: 0
+												});
+												game.addChild(fourthStoryOverlay);
+												// Add narrative text for the fourth scene
+												fourthNarrativeText = new Text2("A new chapter unfolds beneath the silent moon.\nYour legend is just beginning.", {
+													size: 70,
+													fill: 0x000000,
+													align: "center",
+													wordWrap: true,
+													wordWrapWidth: 1700,
+													fontWeight: "bold",
+													font: "Times New Roman"
+												});
+												fourthNarrativeText.anchor.set(0.5, 0);
+												fourthNarrativeText.x = 2048 / 2;
+												fourthNarrativeText.y = 2732 - 500 + 60 + 100; // moved down by 100px
+												fourthNarrativeText.alpha = 0;
+												game.addChild(fourthNarrativeText);
+												// Fade in fourth scene elements
+												if (fourthSceneBg && fourthStoryOverlay && fourthNarrativeText) {
+													tween(fourthSceneBg, {
+														alpha: 1
+													}, {
+														duration: 500
+													});
+													tween(fourthStoryOverlay, {
+														alpha: 1
+													}, {
+														duration: 500
+													});
+													tween(fourthNarrativeText, {
+														alpha: 1
+													}, {
+														duration: 500
+													});
+												}
+											}
+										});
+									}
+								};
+								// --- End Puzzle Scene insertion ---
 							}
 						});
 						// Hoist fourth scene variables to outer scope for access in both transitions
 						var fourthSceneBg, fourthStoryOverlay, fourthNarrativeText;