SEELE AI Gaming Platform

Please use Three.js to generate a **mobile-first game** with the theme "Hex Empire 3D Redux". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** "Living Board Game" aesthetic. The map should look like a physical tactical table. * **The Grid:** Procedurally generated hexagonal grid using `THREE.InstancedMesh` for maximum mobile performance (to handle hundreds of hexes with a single draw call). * **Terrain Types:** * **Plains:** Light green matte material. * **Water:** Blue material with a subtle, low-cost sine-wave animation or simple transparency. * **Cities:** Represented by small cluster of low-poly cubes (skyscrapers) or a distinct castle model on the hex. * **Ports:** Indicated by a simple anchor icon texture floating above water hexes adjacent to land. * **Units:** Instead of flat sprites, use low-poly, untextured "toy soldier" or "pawn" meshes (like board game pieces). Each player's units are colored distinctively (Red, Blue, Purple, Green). * **Territory Borders:** Use `THREE.LineSegments` or glowing edges on the hex geometry to indicate which player owns which territory. The color intensity should fade slightly towards the center of the territory. * **Camera:** Isometric orthographic camera ( `THREE.OrthographicCamera`) to maintain the tactical view without perspective distortion. ### 2. Audio Requirements * **BGM:** A looping military march track—snare drums, brass instruments, but kept low-fidelity or "toy-like" to match the visual style. It should be strategic and pensive, not overly aggressive. * **SFX:** * **Selection:** A crisp "click" or "snap" sound (like a board game piece being picked up). * **Movement:** A "thud" sound when a unit lands on a new hex. * **Combat:** A brief "gunfire" burst or "sword clash" sound effect. * **Capture:** A "trumpet fanfare" short stinger when a city is taken. * **UI:** Soft clicks for menu buttons; a "buzzer" sound for invalid moves. ### 3. Gameplay Loop * **Turn-Based System:** The game operates in strict turns: Player -> CPU 1 -> CPU 2 -> CPU 3. * **State Machine:** 1. **Selection Phase:** Player taps a hex with an army. 2. **Move Phase:** Valid neighbor hexes are highlighted. Player taps a target. 3. **Combat/Capture Phase:** * If target is empty: Army moves, morale decreases slightly due to fatigue. * If target is enemy: Compare Strength + Morale. Higher number wins (with some RNG variance). * If target is City/Port: Capture it to increase reinforcement rate. 4. **End Turn:** Player presses a button; reinforcements are spawned at cities based on territory size. * **Win/Loss:** * **Win:** Capture all enemy capitals. * **Loss:** Player's capital is captured. ### 4. Mobile Controls & Interaction * **Touch Input:** * **Tap:** Select unit / Confirm move. Use `THREE.Raycaster` mapped to touch coordinates. * **Pinch-to-Zoom:** Essential for navigating large maps on small screens. * **Two-Finger Pan:** To drag the map view without accidentally selecting units. * **Visual Feedback:** * When a unit is tapped, spawn a "selection ring" or bounce the mesh slightly. * Draw a dashed line (using `THREE.Line`) showing the path from the selected unit to the touched destination before confirming. * **UI Layout (HUD):** * **End Turn Button:** Large, floating action button (FAB) in the bottom-right corner (min 60x60px). * **Stats Panel:** A compact top bar showing "Morale", "Gold/Manpower", and "Territory %". * **City Labels:** Use HTML overlays (`CSS2DRenderer`) for city names to ensure text remains crisp and readable regardless of 3D zoom level. * **Haptics:** Trigger `navigator.vibrate(50)` on successful move selection and `navigator.vibrate([30, 50, 30])` upon combat victory. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.