Teeny Tiny Town - City Building Merge Puzzle Game - Puzzle Game

Please use Three.js to generate a **mobile-first game** with the theme "Teeny Tiny Town". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Create a cozy, isometric, "toy-box" aesthetic similar to the reference image. Use a soft, warm color palette (sunset/dusk vibes) with a gradient background ranging from peach to soft purple. * **Models (Procedural or Low-Poly):** Create a tiered hierarchy of assets representing the growth of a city. Use simple geometries (BoxGeometry, CylinderGeometry) to represent: * **Tier 1:** Bush (Small green spheres/clumps). * **Tier 2:** Tree (Cylinder trunk + Cone/Sphere foliage). * **Tier 3:** Small House (Cube with a triangular prism roof). * **Tier 4:** Apartment Building (Taller box, similar to the blue building in the reference, with glowing yellow window textures). * **Tier 5+:** Skyscraper/Castle. * **The Grid:** A 5x5 or 6x6 tile grid floating in the center of the screen. The tiles should look like clean, slightly rounded platforms. * **Lighting:** Use Soft Shadows. Implement a directional light (representing the sun) casting long, soft shadows, combined with an AmbientLight to keep shadows from being too pitch black. * **Mobile Optimization:** Use `InstancedMesh` for repeated objects (like tiles and basic props) to reduce draw calls. Keep geometry segments low (e.g., cylinder segments: 8-12) to ensure 60fps on mobile browsers. ### 2. Audio Requirements * **BGM (Background Music):** A looping, relaxing, lo-fi acoustic or marimba track. It should be "enchanting" and slow-paced to encourage thinking, not rushing. * **Sound Effects (SFX):** * **Placement:** A soft wooden "thud" or "clack" when placing an item on a tile. * **Merge Success:** A satisfying, ascending chime or magical "poof" sound when 3+ items combine. * **Upgrade/Unlock:** A triumphant fanfare (short) when unlocking a new building tier. * **Error:** A dull thud if trying to place an item on an occupied tile. ### 3. Gameplay Loop * **Core Mechanic:** The game functions as a grid-based placement puzzle (similar to *Triple Town*). * **Input:** The player is shown a "Next Piece" preview (randomly generated from lower tiers). * **Action:** The player taps an empty grid tile to place the current piece. * **Merge Logic:** If 3 or more identical items are adjacent (horizontally or vertically) after placement, they merge into one single item of the next higher tier at the location of the last placed piece. This process can chain reaction. * **Economy:** Every merge awards Coins and Points. * **Game Over:** The game ends when the grid is full and no merges are possible. * **Power-ups (UI Buttons):** * **Bulldozer:** Allows the player to remove one item from the board (costs coins). * **Refresh:** Swaps the "Next Piece" for a different one (costs coins). ### 4. Mobile Controls & Interaction * **Touch Controls:** Use a `Raycaster` to detect touch/click events on the grid tiles. The interaction must be instant—no double-tap requirements. * **Orientation:** Force or design for **Portrait Mode** by default, as this fits the grid layout better on phones and allows one-handed play. * **UI Layout:** * **Top:** Score and Coin count (large, readable font). * **Center:** The 3D Game Board. * **Bottom:** A clear "Next Piece" dashboard showing the item to be placed. * **Bottom Corners:** Power-up buttons (Bulldozer, Swap). Ensure buttons have a hit area of at least 44x44 pixels. * **Feedback:** * **Visual:** When items merge, apply a "squash and stretch" animation (using Tweening) to make them look bouncy. Add simple particle explosions (confetti) on successful merges. * **Haptic:** Trigger `navigator.vibrate(50)` on a successful merge for tactile feedback. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.