Underwater City

The prompt

Build "Underwater City", a playable miniature-diorama world: a deep-sea block with a city of glass domes on the sea floor that the player builds, powers and explores with a small submarine, as ONE self-contained HTML file.

It must be **beautiful above everything**, like a premium animated film: a moody, glowing deep-sea world: dark blue water, shafts of light from far above, warm glowing domes and bioluminescent life. Great animation on everything that moves: nothing pops, snaps or teleports; things grow, ease, overshoot a little and settle. Calm and satisfying to play, spectacular to watch.

## Tech

* three.js r170 with WebGPURenderer (automatic WebGL2 fallback). Load it with an importmap from jsDelivr: map "three", "three/webgpu" and "three/tsl" to `three@0.170.0/build/three.webgpu.min.js`, and "three/addons/" to `three@0.170.0/examples/jsm/`.
* Use TSL node materials, OrbitControls from the addons, and a subtle BloomNode pass (strength ~0.4, threshold ~1.5) so only emissive things glow (dome windows and city lights, sub headlights, bioluminescent creatures, the sonar ring).
* No external assets. Every texture is drawn on a canvas or generated as pixel data at startup. Every sound is synthesized with WebAudio. The only network requests are three.js from jsDelivr and the Fredoka font from Google Fonts; if the font fails to load, fall back to a system rounded sans-serif without breaking anything.
* Start the HTML with `<!doctype html>` and `<meta charset="utf-8">`.
* It must run inside a sandboxed iframe (`sandbox="allow-scripts allow-pointer-lock"`, no `allow-same-origin`). There, `localStorage` and cookies throw a SecurityError: wrap every storage access in `try/catch` and keep values in memory instead. Do not use `alert`, pop-ups or top-level navigation.
* Neutral tone mapping, soft 2048 shadow map (1024 on phones).
* Known three r170 pitfalls, avoid them:
   * the scene background is drawn after transparent objects, so draw the sky/backdrop as a mesh (or give transparent sky objects `depthWrite: true`), or they disappear;
   * never `.clone()` a CanvasTexture (the clone uploads black); create separate textures or use DataTexture;
   * never let a helper overwrite a shared temp vector that its caller is still using.
* The simulation runs on a fixed 60 Hz timestep and is frame-rate independent. At low frame rates, drop simulation time instead of exploding.
* A quality scaler lowers the pixel ratio, then particle counts, when frames get slow.
* Respect prefers-reduced-motion: softer shake, slower camera moves.

## Priorities

Build in this order and finish each tier properly before the next. A polished tier 1 beats a broken everything.

1. **Must be excellent:** the deep-sea diorama (water volume with fog and light shafts, sea floor, trench), glass domes linked by tubes with glowing windows, building domes, driving the submarine with headlights, the demo mode.
2. **Must work:** pods in the tubes and divers outside, the whale, jellyfish and glowing fish, resources (power, air, food), leaks and repair, the city meter and milestones, sound, the card UI, camera.
3. **Polish:** the sonar ping, the trench exploration, the giant squid Easter egg, day/night from the surface.

Never ship a feature half-working: if a tier-3 feature can't be done well, leave it out cleanly.

## The diorama

* A 10×8×10 glass block of deep sea on a dark base, glass edges, cut sides showing rock strata and a **deep trench** dropping away on one side. Dark navy backdrop.
* **Water:** dense blue fog with depth, **light shafts** from the faraway surface, floating particles (marine snow) that drift and catch light, a faint caustic pattern on the sea floor in the shallower part.
* **Sea floor:** sand, rocks, kelp, glowing tube worms around a **hydrothermal vent** (a power source with shimmering hot water and bubbles), coral and sponges.

## The city

* **Glass domes** of several kinds: habitat (warm windows, tiny people inside), **farm dome** (green plants under grow lights), **power plant** (near the vent, glowing turbine), **tower** (tall, with a beacon), **dock** (submarine bay), all linked by transparent **tubes** that people pods travel through.
* Domes are built with the Build tool and **snap** into a network; tubes route automatically between neighbours. Building animates: frames assemble, glass panels fit in, lights switch on.
* **People:** tiny figures visible through the glass, walking; **pods** zipping through tubes; **divers** outside with headlamps and bubble trails doing repairs.

## Resources

* Three simple bars: **Power** (from vent plants), **Air** (from habitat scrubbers), **Food** (from farm domes). Each new dome consumes and/or produces; if a bar runs low, lights flicker and the meter stalls (never anything bad happens to people).

## The submarine

* A small yellow sub the player can drive (Sub tool): it follows the pointer smoothly at a fixed height (or WASD), banks in turns, has **headlights** that light the water and the sea floor, and a little propeller wash. It can dive into the trench.

## Tools (card, keys 1–5)

* **Build:** pick a dome type in the card and tap the sea floor to place it.
* **Light:** tap to place sea-floor lamps that light the area.
* **Sub:** drive the submarine.
* **Sonar:** ping from the sub or the tower: a glowing ring expands and briefly **reveals hidden things** (wrecks, creatures, a lost diver's helmet, the trench's secret).
* **Repair:** tap a leaking dome to send a repair sub.

## Life and events

* **Whale:** a huge whale passes overhead now and then, casting a shadow, singing.
* **Jellyfish** drift and pulse with glowing rims; **lanternfish** schools; an **anglerfish** with its glowing lure in the dark trench; a curious **octopus** on a dome.
* **Leak:** a dome cracks now and then: bubbles stream out, an alarm light blinks, until a repair sub or divers fix it.
* **Surface light:** a slider for time at the surface: daylight above makes the shafts brighter; at night the city's lights dominate.

## Goal and milestones

* **City** meter: domes built (goal 12) with all three resource bars healthy.
* At 100%: a celebration: all domes flash their lights in a wave, the whale circles the city, fireworks of bioluminescent plankton.

Milestones (toasts, once each): "First dome", "Powered up", "First harvest", "Whale!", "Leak fixed", "Sonar ping", "Into the trench", "Twelve domes".

## Easter egg

Pinging the sonar at the bottom of the trench reveals a **giant sleeping squid** curled in the dark; it slowly **opens one huge eye**, looks at the sub, and closes it again. Toast: "Let it sleep." Never hint at it in the UI.

## Interface

A light, playful UI that never covers the world. On phones the card becomes a compact bottom sheet.

* Top left:
   * small caps "POKEABLE · WORLD";
   * a big chunky rounded heading on two lines, "Underwater" / "City", in Fredoka from Google Fonts, light on the dark backdrop, with a tiny bubble rising from the "U";
   * caption "Build domes. Light the deep.".
* Top right: a live status dot with "WEBGPU · LIVE" (or "WEBGL2 · LIVE"), a speaker pill button (ON / MUTED), and "PAUSED" when paused.
* Right card "City": about 240 px wide, off-white, 20 px corners, soft shadow, no hairlines, aqua (#2fc4d6) accent, collapsible to a small pill. Contents:
   * a big animated "City" % with a bar, domes built (n / 12) and three resource bars: Power, Air, Food
   * tool picker: Build (with dome type chips: Habitat, Farm, Power, Tower, Dock), Light, Sub, Sonar, Repair, each with a drawn icon and its key number
   * event buttons: Whale, Leak test
   * sliders with monospace value chips: Surface light (day/night), Marine snow, Sound (master volume)
   * switches: Sea life (on), Light shafts (on), Slow motion (¼ speed), Cinema
   * buttons Reset and New (random seed), a dark full-width Pause/Resume pill, and the world's number ("No. 0001").
* Bottom left: a one-line hint that changes with the tool:
   * Build: "Pick a dome and tap the sea floor."
   * Light: "Place lamps on the sea floor."
   * Sub: "Drive the sub. Headlights on."
   * Sonar: "Ping to reveal what hides."
   * Repair: "Tap a leaking dome."
* Bottom right: a collapsible "How it works" panel, 5–6 plain lines on building and snapping domes and tubes, the resource bars, the submarine, sonar, fog and light shafts, the camera controls, and synthesized sound.
* Toasts at the top centre for milestones and events.
* Keys: 1–5 tools, H whale, L leak test, P sonar ping, Space pause, R reset, N new, M mute, S slow motion, C cinema, 0 reset view, Esc stop follow / exit cinema.

## Camera

* OrbitControls with damping and zoom to cursor, within sensible limits.
* Double-click the submarine, a pod or the whale to follow it; Esc or 0 stops.
* Camera bar (floating pill, bottom right of the scene area): zoom −, a zoom % readout, zoom +, rotate left, rotate right, reset; button moves tween smoothly.
* The default framing fits the whole world into the free area, accounting for the card and title.
* **Cinema (`C`):** hides all UI and slowly orbits the camera.

## Sound

* WebAudio only. Create the AudioContext on the first gesture and never before.
* Master gain feeds a compressor, so rapid actions never clip. Limit voices (about 16) and wrap every call in try/catch so a failing audio call never breaks the world.
* Loops: deep muffled ocean ambience, a soft humming city (louder with more domes), the vent's bubbling, the sub's propeller whir, the whale's distant song.
* One-shots: metal clanks and a glassy click when building, a soft electric hum when power comes on, a sonar ping with echo, an alarm chirp and bubble hiss for leaks, a cheerful chime when repaired, the squid's deep rumble, chimes for milestones.

## Demo mode (required)

If the URL has `?demo=1` (or `#demo`), auto-play a deterministic 4.0 s loop:

* Rules:
   * Hide all UI and the cursor; never create an AudioContext.
   * Fixed quality, default seed, a city of 8 glowing domes, dusk light from above, default camera, no OrbitControls.
   * Drive the simulation from real elapsed time with the fixed timestep, and restart from the identical state every 4.0 s.
   * Start moving within 1 s of load, and stay readable at 15 fps.
* Timeline:
   * 0.0–1.5 s: the sub glides through the city with its headlights, pods zip through the tubes.
   * 1.5–2.8 s: the whale passes overhead, its shadow sliding across the domes.
   * 2.8–3.6 s: a sonar ping ring expands across the sea floor, briefly outlining a wreck.
   * 3.6–4.0 s: jellyfish pulse; dome lights glow.

## Before you finish, check

* Domes and tubes build and snap correctly; resource bars respond; leaks and repairs work.
* The sub drives smoothly, headlights light everything, it can explore the trench.
* Sonar reveals hidden things; the whale, jellyfish, anglerfish and octopus.
* Surface light day/night; the celebration and the squid.
* Every tool, slider, switch, button and key; follow mode; Cinema; pause and resume; resizing to phone width.
* Sound behaviour.
* It works inside `<iframe sandbox="allow-scripts allow-pointer-lock">` with no errors (storage blocked).
* `?demo=1` matches the timeline.
* No console or WebGPU validation errors, and it stays smooth on a mid-range laptop.

Put driving the little sub through the glowing domes while the whale passes overhead first. It should feel like a secret world at the bottom of the sea.