SEELE AI Gaming Platform

Please use Three.js to generate a **mobile-first game** with the theme "**Zoo Animals Stacker**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** 3D Cartoon/Cute style. Use a bright, saturated color palette (Jungle Greens, Sky Blues). * **Main Elements (Animal Slices):** The core game pieces are short 3D Cylinders (`THREE.CylinderGeometry`). * Each cylinder represents a "slice" of an animal (e.g., Panda, Zebra, Tiger, Giraffe). * **Textures:** Use `CanvasTexture` to programmatically draw cute animal faces to ensure the code is runnable without external assets. * *Top Slice:* Contains ears and eyes. * *Bottom Slice:* Contains nose and mouth. * *Middle/Body Slice (Optional):* Patterned body. * **Special Blocks:** A "Dynamite" cylinder (Red with a fuse) that acts as a power-up. * **Background:** A static, low-poly jungle backdrop or a nice gradient skybox (Light Blue to Green) to save performance. Add simple 2D billboard trees in the background for depth. * **Performance (Mobile):** Use `BufferGeometry` for all meshes. Limit cylinder radial segments to 24 or 32 to maintain high FPS on mobile devices. Use a single directional light with soft shadows and an ambient light. ### 2. Audio Requirements * **BGM:** A playful, rhythmic "Jungle/Safari" loop (Marimba, bongo drums, flute). It should be relaxing but upbeat. * **SFX:** * *Selection:* A soft "woosh" or suction sound when picking up a piece. * *Drop/Land:* A wood-block "clack" sound when a piece lands on a stack. * *Match/Success:* A cheerful "chime" or animal sound (e.g., a stylized roar or squeak) when a face is completed. * *Warning:* A rapid ticking or siren sound when the "Exclamation Mark" appears (incoming falling piece). * *Dynamite:* A cartoonish explosion sound. ### 3. Gameplay Loop * **Grid Layout:** The game features **4 fixed vertical columns (stacks)** on a wooden shelf/platform at the bottom of the screen. * **Core Mechanic (Drag & Match):** * The player can drag the *top-most* piece of any column and drop it onto another column. * **Matching Logic:** If a "Top Face" piece is placed directly above a "Bottom Face" piece of the *same animal type*, they merge, play a particle effect, disappear, and award points. * **Dynamite Logic:** If a Dynamite block is placed (or falls), it destroys all blocks in that specific column. * **Pressure Mechanic (The Drop):** * Every few seconds, a **Red Exclamation Mark** appears above a random column. * After a short delay, a random animal piece falls into that column. * If a column overflows (stack gets too high), the game is over (or the player loses a life). * **Level Progression:** * The player has a target score to reach within a time limit (displayed in the UI). * Difficulty increases by speeding up the "Falling Piece" timer. ### 4. Mobile Controls & Interaction * **Touch Interaction:** * Implement `touchstart`, `touchmove`, and `touchend` event listeners. * **Raycasting:** Use a Raycaster to detect which cylinder the user touches. * **Control Scheme:** * **Hold:** Touch and hold a cylinder to "pick it up". The piece should visually lift slightly toward the camera (Z-axis offset) and follow the finger/cursor. * **Drag:** Move the piece horizontally across the screen. * **Release:** When the finger is lifted, the piece "snaps" to the nearest valid column and falls to the top of that stack (simulated gravity). * **UI Layout (Portrait Mode Optimized):** * Top Bar: Score, Timer, and Level Indicator. * The game area (stacks) should occupy the bottom 70% of the screen for easy thumb reach. * Buttons should be at least 44x44 pixels for touch accessibility. * **Feedback:** * **Haptic:** Trigger `window.navigator.vibrate(50)` when a piece matches or explodes (if supported). * **Visual:** Highlight the column under the dragged piece to show where it will land. ### 5. Code Generation Please generate the complete `index.html` file containing the CSS, Three.js logic, and game mechanics. Use a CDN for the Three.js library. Ensure the game handles window resizing and maintains the aspect ratio for mobile screens. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.