SEELE AI Gaming Platform

Please use Three.js to generate a **mobile-first game** with the theme "**Your Love Calculator: 3D Dress-Up Edition**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: High-saturation, "candy-colored" aesthetic inspired by the reference image. Use a vibrant color palette dominated by Hot Pink (`#FF69B4`), Magenta, and White. The rendering should look glossy and soft (resembling jelly or plastic toys). * **Central Scene**: * **Background**: A dynamic shader-based background featuring slowly floating 3D heart particles and soft clouds on a pink gradient backdrop. * **The "Calculator"**: A large, glossy 3D Heart object in the center initially. * **The Avatar**: A low-poly, anime-stylized 3D female character model positioned front-and-center. The model must support mesh swapping for hair, tops, bottoms, shoes, and accessories. * **Performance (Mobile)**: * Use unlit or baked lighting where possible to save battery. * Limit character triangle count to under 5,000 tris. * Texture atlas usage to reduce draw calls. * Implement object pooling for particle effects (hearts exploding). ### 2. Audio Requirements * **BGM**: A loopable, upbeat, and bubbly pop track with a "cute" vibe (think synth-pop or light bossa nova). * **Sound Effects (SFX)**: * **UI Click**: Soft "bubble pop" or "click" sounds. * **Calculation Phase**: A "slot machine" rolling sound effect as the percentage climbs. * **Success/High Score**: A harp glissando or magical chime. * **Dress-Up Action**: A distinct "swish" or fabric rustle sound when clothes are changed. ### 3. Gameplay Loop * **Phase 1: Name Entry (HTML Overlay)**: The game starts with a clean HTML/CSS overlay on top of the canvas asking for "Your Name" and "Crush's Name". * **Phase 2: The Calculation**: * Upon clicking "Calculate", the 3D central heart throbs. * A percentage number (0-100%) counts up rapidly. * **Logic**: Generate a pseudo-random score based on a hash of the two names (so the result is consistent for the same pair). * **Phase 3: Scenario Determination**: * **Low Score (<40%)**: Theme is "Girls Night Out" (Casual wear). * **Mid Score (40-80%)**: Theme is "Romantic Date" (Elegant wear). * **High Score (>80%)**: Theme is "Wedding" (Bridal wear). * **Phase 4: Dress-Up (Core Gameplay)**: * The camera zooms in on the 3D avatar. * A UI panel appears allowing the player to toggle through clothing options relevant to the determined theme. * **Victory**: Player clicks "Finish," the camera captures a "Photo" (freezes frame), and particles explode (confetti/hearts). ### 4. Mobile Controls & Interaction * **Screen Orientation**: **Portrait Mode (Vertical)** is mandatory to best display the full-body character model on phones. * **Touch Controls**: * **Raycasting**: Use Three.js Raycaster for interacting with 3D accessories (if any). * **Swipe to Rotate**: Allow the user to swipe left/right on the character to rotate the model 360 degrees to see the outfit from all angles. * **UI Interactions**: All buttons must be large (minimum 44x44px touch targets) and placed at the bottom of the screen for one-handed thumb use. * **Feedback**: * **Haptic Feedback**: Trigger a short vibration (`navigator.vibrate(50)`) when a clothing item is successfully equipped or the calculation finishes. * **Visual Feedback**: Buttons should scale down slightly (`0.9x`) when pressed to simulate tactility. ### 5. Technical Implementation Note * Use `HTMLOverlay` for the text input fields to ensure native mobile keyboard compatibility (Three.js text input is poor on mobile). * Ensure the `ResizeObserver` is implemented to handle dynamic viewport changes (e.g., browser address bar appearing/disappearing). Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.