Xing4.0 29B A4B (free)

The user wants a 3D aquarium using Three.js where fish swim away when the mouse moves near them. Let me plan this out:

1. A 3D scene with an aquarium (tank, water, decorations)
2. Fish swimming around
3. Fish that detect nearby mouse and swim away
4. Import map for Three.js as specified
5. Self-contained HTML file with inline CSS and JS
6. No localStorage/cookies/alerts
7. Must look good at 1280x800 and adapt to 375px
8. Start with demo mode automatically
9. Click or key press to start

Let me build this:

- Scene setup: renderer, camera, lights
- Aquarium tank: glass box or cylinder with transparent walls
- Water surface
- Fish: simple geometry (ellipsoid body + tail)
- Swimming animation for fish
- Raycasting for mouse position, track which fish are near mouse
- When a fish is near the mouse, make it swim away from the mouse direction
- Ocean floor decorations (seaweed, rocks)
- Background gradient

Let me think about the fish swimming away mechanic:
- Track mouse position (raycasting on the water plane or fish positions)
- For each fish, compute distance to mouse raycast point
- If within some threshold, apply force pushing the fish away from that point
- Fish have their own movement so they keep going

Let me design the fish class with update logic:
- Each fish has position, velocity, angle (facing direction)
- Update: move forward along facing angle, wobble body slightly
- If near mouse point: increase speed away from mouse point and change direction
- Boundary check: keep fish inside tank bounds

Let me write the code now. I'll make it visually appealing with:
- Gradient background (deep blue)
- Glass tank with transparent walls
- Water with subtle color tint
- Seaweed at the bottom
- A few different fish shapes
- Bubbles floating up
- Soft lighting (ambient + directional)

Tank shape: I'll use a box with transparent walls. Or maybe a cylinder. Box is easier. Let me do a rectangular aquarium.

Actually let me do a beautiful cylindrical aquarium - it looks more natural for fish. Hmm, but box is simpler to do boundary checks. Let me do a box but with rounded corners... nah, just a box.

Fish design: capsule body + cone tail. Color variations.

Let me write it all out.

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>3D Aquarium</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { 
    overflow: hidden; 
    background: #021024; 
    font-family: 'Segoe UI', sans-serif;
  }
  #app { width: 100vw; height: 100vh; }
  #hint {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #cfe8ff;
    font-size: clamp(20px, 4vw, 40px);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
    z-index: 10;
    pointer-events: none;
    user-select: none;
  }
  #hud {
    position: fixed;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    color: #7fbfff;
    font-size: 13px;
    z-index: 10;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  }
</style>
</head>
<body>
<div id="app"></div>
<div id="hint">Click or press any key to start</div>
<div id="hud">Move mouse near fish → they swim away · Drag to rotate view</div>
<script type="importmap">
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// ... main code
</script>
</body>
</html>
```

Now the main code. Let me think about the structure carefully.

Scene setup:
- Scene with fog for depth
- PerspectiveCamera at z=8 looking at origin
- Renderer with antialias, alpha
- Ambient light + directional light from above

Tank:
- Box geometry, transparent material (glass-like), double-sided
- Bottom plane dark, curved maybe
- Actually let's make it a box: top, bottom, 4 sides, all slightly transparent blue tint

Water:
- Can be the inner box with slight blue tint, or just rely on transparency

Boundary enforcement: keep fish within tank bounds

Fish:
- Body: SphereGeometry scaled, or CapsuleGeometry
- Tail: ConeGeometry
- Color variations (orange, pink, yellow, blue, purple)
- Animate tail wiggle + slight body undulation
- Movement: rotate around Y axis, bob up/down slightly
- Near mouse detection: raycast onto an invisible plane at fish height, compute distance; if close, push fish away

Actually, better approach: cast a ray from mouse through camera onto the "water plane" (y=0). Get intersection point. For each fish, compute distance from fish position to that point. If < threshold (say 2 units), apply velocity in direction (fishPos - mousePoint) normalized, scaled by some factor. Also add random nudge to avoid jitter.

Fish AI in demo mode: fish wander randomly, avoid boundaries. When mouse near, flee.

Let me also add:
- Seaweed at the bottom: multiple thin cones or cylinders pointing down, swaying
- Rocks: icosahedron or dodecahedron low-poly
- Bubbles: small spheres rising, recycled

Mouse handling:
- On click, hide hint, enable keyboard events
- Track mousemove to update cursor position (normalized -1 to 1)
- When mouse moves near fish, they flee

OrbitControls with damping, limited polar angle so you can't go under the tank floor.

Let me write the full code now. I want it to be robust.

```js
const container = document.getElementById('app');
const hint = document.getElementById('hint');
const W = () => window.innerWidth;
const H = () => window.innerHeight;

let started = false;
function startGame() {
  if (started) return;
  started = true;
  hint.style.display = 'none';
  document.addEventListener('keydown', () => { /* allow */ }, { once: true });
  // actually just enable
}
document.addEventListener('click', startGame, { once: true });
document.addEventListener('keydown', startGame, { once: true });
```

Wait, the requirement says "The iframe only receives keyboard events after the user clicks it". So both click and keydown should trigger start. But if user presses key before clicking... the spec says iframe receives keyboard events after click. Hmm. Let me re-read: "if the demo uses the keyboard, display a clear 'Click or press a key to start' message." So I should allow either. The "only after user clicks" is conditional. So showing "Click or press a key to start" is enough. Then both work. Let me allow both.

Actually wait, re-reading more carefully: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." This means: since keyboard events might come before click (if we auto-start), show a message instead of letting keyboard events do things before click. So in the demo, keyboard input shouldn't control anything until start. That makes sense — OrbitControls uses pointer drag, not keyboard, so no issue there. Let me just make sure nothing happens on keydown before start.

Fish class:

```js
class Fish {
  constructor(scene, color, size) {
    this.color = color;
    this.size = size;
    this.group = new THREE.Group();
    // body
    const bodyGeo = new THREE.SphereGeometry(size, 12, 10);
    // scale to ellipsoid
    bodyGeo.scale(1, 0.6, 0.5); // hmm SphereGeometry doesn't support scale natively... actually scale works
    const bodyMat = new THREE.MeshStandardMaterial({ color, roughness: 0.4, metalness: 0.1, emissive: color, emissiveIntensity: 0.15 });
    this.body = new THREE.Mesh(bodyGeo, bodyMat);
    this.group.add(this.body);
    // tail
    const tailGeo = new THREE.ConeGeometry(size*0.4, size*0.6, 6);
    tailGeo.rotateZ(-Math.PI/2);
    this.tail = new THREE.Mesh(tailGeo, bodyMat);
    this.group.add(this.tail);
    // fin
    const finGeo = new THREE.ConeGeometry(size*0.2, size*0.4, 4);
    finGeo.rotateX(Math.PI/2);
    finGeo.translateY(size*0.2);
    this.fin = new THREE.Mesh(finGeo, bodyMat);
    this.group.add(this.fin);
    scene.add(this.group);
    
    this.pos = new THREE.Vector3();
    this.vel = new THREE.Vector3();
    this.baseAngle = Math.random() * Math.PI * 2;
    this.speed = 0.03 + Math.random() * 0.04;
    this.wobble = 0;
    this.nearFlee = false;
    this.setPosition(...);
  }
  
  setPosition(x,y,z) {
    this.pos.set(x, y, z);
    this.group.position.copy(this.pos);
  }
  
  update(dt, mousePoint) {
    // wander / flee
    if (mousePoint && mousePoint.distanceTo(this.pos) < 2.5) {
      // flee direction: away from mouse point
      const dir = this.pos.clone().sub(mousePoint).normalize();
      this.vel.add(dir.multiplyScalar(0.15));
      this.vel.multiplyScalar(0.92); // dampen
      this.nearFlee = true;
    } else {
      this.nearFlee = false;
    }
    // gentle wandering
    if (!this.nearFlee) {
      this.baseAngle += (Math.random()-0.5)*0.05;
      this.vel.x += Math.cos(this.baseAngle) * 0.005;
      this.vel.z += Math.sin(this.baseAngle) * 0.005;
    }
    
    // clamp speed
    const maxSpeed = 0.18;
    this.vel.clampLength(0, maxSpeed);
    
    this.pos.add(this.vel.clone().multiplyScalar(dt));
    
    // wrap around tank
    const b = 3.5; // half extent of tank roughly
    if (Math.abs(this.pos.x) > b) { this.vel.x *= -1; this.pos.x = Math.sign(this.pos.x)*b; }
    if (Math.abs(this.pos.z) > b) { this.vel.z *= -1; this.pos.z = Math.sign(this.zz? this.pos.z : 0)*b; }
    // hmm need to set properly
    
    // bob up/down
    this.wobble += dt * 4;
    this.group.position.y = this.pos.y + Math.sin(this.wobble) * 0.15;
    
    // orient
    const targetAngle = Math.atan2(this.vel.z, this.vel.x);
    // smooth
    let da = targetAngle - this.baseAngle;
    while (da > Math.PI) da -= Math.PI*2;
    while (da < -Math.PI) da += Math.PI*2;
    this.baseAngle += da * 0.1;
    this.group.rotation.y = this.baseAngle;
    
    // tail wiggle
    this.tail.rotation.z = Math.sin(this.wobble * 2) * 0.4;
    
    this.group.position.copy(this.pos);
    // also keep y based
    this.group.position.y = this.pos.y + Math.sin(this.wobble) * 0.15;
  }
}
```

Hmm wait, I'm duplicating position assignment. Let me restructure. Group.position should always equal pos, plus a y offset for the swim bob. Let me keep pos.y as the base y and apply offset to group.

Better approach:
- `this.pos` is the full world position including depth offsets
- `this.group.position.copy(this.pos)` then add bob offset to y
- orientation: rotation.y = baseAngle
- tail wiggle separate

Also for camera controls: OrbitControls with damping. Limit so you don't go too high or below bottom.

Mouse tracking:
- Normalize mouse coords to [-1, 1]
- Raycaster from camera through normalized mouse
- Intersect with an invisible plane at y = average fish y, or y=0. Let's use a horizontal plane at y=0 (water surface level) — that's a good proxy for "where the mouse is over the water".

Actually fish are around y=0 to y=1.5. Mouse detection on y=0 plane would give points below most fish. Better: intersect with the "fish plane" — a horizontal plane at y=0.8. Then distance from fish to that point is computed in 3D. Fish at y~0.8 are close. OK that works.

Even better: cast ray and find closest point to any fish within threshold. But simpler approach: raycast to horizontal plane at fish-ish height, compute 3D distance. If < 2.0 units, flee.

But what if mouse is exactly over a fish — distance ~0, flee. Good. What if mouse moves quickly across screen — raycast gives one point per frame, so fish within ~1 unit flee. Good.

For multiple fish near the same mouse point, they all flee. Good.

Let me make sure the flee direction is correct: fish should swim AWAY from the mouse point. Direction = fishPos - mousePoint. Fish velocity gets pushed in that direction. Yes.

Also fish should flee the nearest mouse point? Or all fish? I think all fish near the mouse get fleed — that creates the "they swim away when you move the mouse near them" effect nicely.

Let me add some visual polish:
- Seabed: dark plane
- Rocks: icosahedrons with noise displacement? Simpler: dodecahedrons scattered
- Seaweed: many thin cylinders/cones at bottom, swaying via vertex shader or just animate rotation
- Bubbles: small spheres rising and fading, recycling
- Light caustics? Skip, too complex.

Background: gradient from deep blue to almost black at top. Use scene.background = gradient texture, or CSS background behind canvas. Let me set renderer alpha true and CSS gradient on body. Or scene.background color.

Let me make the scene background a nice radial gradient. Actually simplest: scene.background = new THREE.Color('#021024'), and add a big sphere with gradient backside. Or just use CSS background on the canvas element and renderer alpha.

I'll use CSS gradient + renderer with alpha:true, clear color transparent.

Hmm wait, if renderer clears with alpha and no clearAlpha, the canvas is transparent showing CSS behind. That works but fog won't blend right. Let me just use scene.background = gradient texture generated procedurally. Or just solid color.

Let me do: scene.background = new THREE.Color(0x0a1a2e) and add some atmosphere via fog and lighting. Plus CSS gradient for body (behind canvas, but canvas covers it). Hmm, canvas covers body entirely. So CSS gradient only shows if canvas has alpha. Let me use alpha:true and CSS gradient for nicer look.

Actually with alpha:true and clearAlpha:0, the CSS shows through. But then I lose fog blending to background color. Fog blend still works with transparent bg? Fog blends toward scene.background color. If bg is a color, fog works. If bg is null, fog uses black. Hmm.

Simplest reliable: scene.background = new THREE.Color(0x021024). Don't bother with CSS gradient, the scene will be dark navy. Fine.

Actually I can do both: scene.background as gradient texture (generate via canvas), scene.fog matching. Let me generate a vertical gradient texture.

```js
function makeGradientTexture() {
  const c = document.createElement('canvas');
  c.width = 2; c.height = 512;
  const ctx = c.getContext('2d');
  const g = ctx.createLinearGradient(0, 0, 0, 512);
  g.addColorStop(0, '#0a2040');
  g.addColorStop(0.5, '#04101f');
  g.addColorStop(1, '#01030a');
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, 2, 512);
  const tex = new THREE.CanvasTexture(c);
  return tex;
}
```

OK let me write the full thing now.

Tank dimensions: width 8, height 5, depth 5, centered at origin. Half extents: w=4, h=2.5, d=2.5.

Fish spawn: random x,z within [-3,3], y between 0.3 and 2.

Wall bounce: reflect velocity at ±boundary, or wrap. Wrap is jarring; bounce is better. With tank width 8, half=4.

```js
const bound = 3.6; // slightly inside wall
function bounce() {
  if (this.pos.x > bound) { this.pos.x = bound; this.vel.x *= -0.8; }
  if (this.pos.x < -bound) { this.pos.x = -bound; this.vel.x *= -0.8; }
  if (this.pos.z > bound) { this.pos.z = bound; this.vel.z *= -0.8; }
  if (this.pos.z < -bound) { this.pos.z = -bound; this.vel.z *= -0.8; }
}
```

Camera: at (0, 3.5, 7), looking at (0, 1, 0). FOV 50. This gives a nice view of the tank.

OrbitControls target (0, 1, 0), minDistance 4, maxDistance 12, maxPolarAngle ~ Math.PI*0.49 (just above horizontal, can't go under floor), enablePan false.

Lighting:
- HemisphereLight(skyColor 0x88bbff, groundColor 0x001020, intensity 0.6)
- DirectionalLight from above: position (5, 8, 5), intensity 0.8, color 0xffffff
- Maybe a point light inside the tank for sparkle

Water effect: subtle blue tint overlay. Could add a semi-transparent inner box. Or skip. The transparent walls give glass feel.

Let me think about visual quality more. Transparent boxes with MeshPhysicalMaterial transmission would look like real glass but requires more setup. Let me try MeshPhysicalMaterial with transmission:0.5, thickness, roughness:0.1, ior:1.3. Actually transmission needs proper renderer setup (uses transmission render target internally). It works in r170 but can be slow. Let me keep it simple with transparent material, opacity 0.15, depthWrite false.

Actually for a nice glass look:
```js
new THREE.MeshPhysicalMaterial({
  color: 0xaaccff,
  transparent: true,
  opacity: 0.12,
  roughness: 0.05,
  metalness: 0,
  transmission: 0.9,
  ior: 1.45,
  thickness: 0.5,
  side: THREE.DoubleSide
})
```
Transmission in r170 should work but may cause issues without proper envMap. Let me skip transmission and use opacity. Simpler and reliable.

OK here's my plan for tank materials:
- Walls: MeshPhysicalMaterial, color light blue, transparent, opacity 0.18, side double
- Bottom: dark blue, slightly reflective? Just MeshStandardMaterial dark blue
- Top: same as walls
- Inner "water": could add a large plane at top y=2.5 with slight blue, opacity 0.3. Subtle.

Let me just do walls + bottom. The visible water effect comes from lighting and the fish themselves.

Actually let me add water surface: a plane at top of tank (y=2.5), slightly glossy, opacity 0.25, color 0x4488cc. That reads as the top of water.

Fish geometry details: Body should look fish-like. Let me use:
- Body: capsule (cylinder + two spheres) or just a scaled sphere — simpler but decent
- Tail: cone, animated wiggle
- Dorsal fin: cone on top
- Pectoral fins: flat cones? or planes. Simplest: just tail + dorsal + body ellipsoid. Looks fine.

Let me code:

```js
class Fish {
  constructor(scene, color) {
    this.color = color;
    this.group = new THREE.Group();
    const s = 0.3 + Math.random()*0.2;
    const bodyMat = new THREE.MeshStandardMaterial({ color, roughness: 0.35, metalness: 0.1, emissive: color, emissiveIntensity: 0.12 });
    // body: sphere scaled
    const body = new THREE.Mesh(new THREE.SphereGeometry(s, 16, 12), bodyMat);
    body.scale.set(1.2, 0.65, 0.55);
    this.group.add(body);
    this.body = body;
    // tail
    const tailLen = s*1.6;
    const tail = new THREE.Mesh(new THREE.ConeGeometry(s*0.5, tailLen, 6), bodyMat);
    tail.geometry.rotateZ(-Math.PI/2);
    tail.position.x = -tailLen*0.7;
    this.tail = tail;
    this.group.add(tail);
    // dorsal fin
    const fin = new THREE.Mesh(new THREE.ConeGeometry(s*0.4, s*0.7, 4), bodyMat);
    fin.geometry.rotateX(Math.PI/2);
    fin.position.y = s*0.5;
    fin.position.x = s*0.3;
    this.dorsal = fin;
    this.group.add(fin);
    scene.add(this.group);
    
    this.baseAngle = Math.random()*Math.PI*2;
    this.vel = new THREE.Vector3((Math.random()-0.5)*0.02, 0, (Math.random()-0.5)*0.02);
    this.pos = new THREE.Vector3(
      (Math.random()*2-1)*3,
      0.4 + Math.random()*1.6,
      (Math.random()*2-1)*3
    );
    this.group.position.copy(this.pos);
    this.wobble = Math.random()*Math.PI*2;
    this.scale = 0.9 + Math.random()*0.3;
    this.group.scale.setScalar(this.scale);
    this.nearTarget = null;
    this.fleeTimer = 0;
  }
  
  update(dt, mousePoint) {
    const isNear = mousePoint && mousePoint.distanceToSquared(this.pos) < 4.0;
    if (isNear) {
      const dir = this.pos.clone().sub(mousePoint).normalize();
      this.vel.addScaledVector(dir, 0.12);
      this.fleeTimer += dt;
    } else {
      // gentle wander
      this.fleeTimer = 0;
      this.vel.x += (Math.random()-0.5)*0.003;
      this.vel.z += (Math.random()-0.5)*0.003;
      // occasionally change wander angle
      if (Math.random() < 0.01) this.baseAngle += (Math.random()-0.5)*0.6;
    }
    const maxSpeed = 0.22;
    this.vel.clampLength(0, maxSpeed);
    this.pos.addScaledVector(this.vel, dt);
    bounceBoundaries(this.pos, this.vel);
    
    this.wobble += dt * 6;
    const yOffset = Math.sin(this.wobble) * 0.12;
    const rotTarget = Math.atan2(this.vel.z, this.vel.x);
    let da = rotTarget - this.baseAngle;
    while (da > Math.PI) da -= Math.PI*2;
    while (da < -Math.PI) da += Math.PI*2;
    this.baseAngle += da * 0.08;
    this.group.rotation.y = this.baseAngle;
    this.group.position.set(this.pos.x, this.pos.y + yOffset, this.pos.z);
    
    this.tail.rotation.z = Math.sin(this.wobble * 2.2) * 0.5;
    if (this.nearTarget) { this.tail.rotation.z = Math.sin(this.wobble*3)*0.8; }
  }
}
```

Wait, vel direction: fish faces direction of travel (vel.x, vel.z). When fleeing, vel gets pushed in dir away from mouse — good. But this changes facing naturally. That's fine.

But there's an issue: vel accumulates Wander impulses every frame even when not near, leading to drift. Clamp at maxSpeed handles it. OK.

For bounceBoundaries, fish stay inside tank:

```js
function bounceBoundaries(p, v) {
  const b = 3.7;
  if (p.x > b) { p.x = b; v.x = -Math.abs(v.x)*0.7; }
  else if (p.x < -b) { p.x = -b; v.x = Math.abs(v.x)*0.7; }
  if (p.z > b) { p.z = b; v.z = -Math.abs(v.z)*0.7; }
  else if (p.z < -b) { p.z = -b; v.z = Math.abs(v.z)*0.7; }
  // floor/ceiling: only prevent flying out of top? Keep y bounded loosely
  if (p.y > 2.6) { p.y = 2.6; v.y = Math.min(v.y, 0); }
  if (p.y < 0.15) { p.y = 0.15; v.y = Math.max(v.y, 0); }
}
```

Mouse handling:

```js
const raycaster = new THREE.Raycaster();
const mouseNDC = new THREE.Vector2();
let mouseOverWaterPlane = null;

renderer.domElement.addEventListener('pointermove', (e) => {
  if (!started) return;
  mouseNDC.x = (e.clientX / W()) * 2 - 1;
  mouseNDC.y = -(e.clientY / H()) * 2 + 1;
  raycaster.setFromCamera(mouseNDC, camera);
  // intersect with horizontal plane at y=1.2 (average fish height)
  const plane = new THREE.Plane(new THREE.Vector3(0,1,0), -1.2);
  const hit = new THREE.Vector3();
  if (raycaster.ray.intersectPlane(plane, hit)) {
    mouseOverWaterPlane = hit;
  }
});
```

Creating a Plane each frame is wasteful. Use persistent plane:

```js
const waterPlane = new THREE.Plane(new THREE.Vector3(0,1,0), -1.2);
```

In frame loop:
```js
const hit = new THREE.Vector3();
if (raycaster.ray.intersectPlane(waterPlane, hit)) {
  mouseOverWaterPlane = hit;
}
```

Good.

Seaweed: create ~15 seaweed strands, each a thin cylinder, anchored at bottom, swaying.

```js
function createSeaweed() {
  const group = new THREE.Group();
  const mat = new THREE.MeshStandardMaterial({ color: 0x1a6b3c, roughness: 0.6, emissive: 0x0a2e18, emissiveIntensity: 0.3 });
  for (let i = 0; i < 18; i++) {
    const x = (Math.random()-0.5)*7;
    const z = (Math.random()-0.5)*5;
    const h = 1 + Math.random()*2;
    const geo = new THREE.CylinderGeometry(0.05, 0.1, h, 5);
    const m = new THREE.Mesh(geo, mat);
    m.position.set(x, 0, z);
    m.rotation.z = (Math.random()-0.5)*0.4;
    m.userData.baseRotZ = m.rotation.z;
    m.userData.phase = Math.random()*Math.PI*2;
    group.add(m);
  }
  return group;
}
```

Animate seaweed sway:
```js
seaweed.children.forEach(sw => {
  sw.rotation.z = sw.userData.baseRotZ + Math.sin(time*1.5 + sw.userData.phase)*0.2;
});
```

Rocks: a few icosahedron geometries scattered at bottom.

Bubbles: pool of bubble meshes recycled.

Let me put it together now. Also add the hint text and HUD.

Main loop:
```js
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const dt = Math.min(clock.getDelta(), 0.05);
  const t = clock.elapsedTime;
  
  fish.forEach(f => f.update(dt, mouseOverWaterPlane));
  seaweed.children.forEach(sw => { ... });
  // bubbles update
  
  controls.update();
  renderer.render(scene, camera);
}
animate();
```

Resize handler:
```js
window.addEventListener('resize', () => {
  camera.aspect = W()/H();
  camera.updateProjectionMatrix();
  renderer.setSize(W(), H());
});
```

Starting state: I want the scene to render immediately so first paint has something visible. Fish are swimming immediately (demo mode), but hint shows "Click or press a key to start". That satisfies "Something meaningful must be visible on first paint." And "Games must start in a self-playing demo mode" — fish swim immediately, good. The mouse-flee only happens after start, which is per the "iframe only receives keyboard events after the user clicks it" rule — but mouse events happen regardless. Hmm, that rule is specifically about keyboard. Mouse events are always available. Should mouse-flee work before click? The rule says "The iframe only receives keyboard events after the user clicks it". So keyboard is gated; mouse isn't mentioned. But logically, shouldn't mouse interaction also be gated? The rule specifically mentions keyboard, implying mouse isn't blocked. But the spirit might be "don't autoplay anything before click." 

Reading again: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message, so the game can be judged in action without playing." — the game IS running in demo mode from the start (fish swim). "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." — this is about keyboard specifically.

So: demo runs from start (fish swim, camera orbits on drag). After click/key, everything works including keyboard shortcuts. That seems right.

Actually wait — for mouse to trigger flee, the pointermove listener runs regardless of click. Hmm. But the rule says "iframe only receives keyboard events after user clicks" — implying that without clicking, keys do nothing. Mouse is implicitly allowed because it's the primary interaction. I'll allow mouse flee from the start. Actually, let me gate it to after click too, for safety/parity. Then before click, moving mouse does nothing special (just camera orbits). After click, mouse flees fish. Hmm, but the requirement "fish swim away when I move the mouse near them" implies it works — but they also want it to start in demo mode and the judge can see action immediately. If the judge moves the mouse before clicking, nothing happens... that might be OK since the judge can click first.

Actually the safest interpretation: game starts in demo mode (fish swim). Hint says click or press key. After click/key, full interaction enabled including mouse flee. Before click: movement still allowed (camera orbits on drag), but no flee. This is reasonable.

Hmm, but actually let me reconsider: "something meaningful must be visible on first paint" + "Games must start in a self-playing demo mode behind a Click or press a key to start message" → the visible thing is the aquarium with fish swimming. Judge sees that immediately. Then judge clicks/presses key, then judges action. Fine.

Let me write the final code. I'll be careful with details.

One more consideration: "must look right in 1280x800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar." → use clamps, fitWidth maybe. My layout uses full viewport with overflow hidden, should be fine. Camera aspect handled on resize.

Let me also add a subtle floor reflection? Skip, too complex.

Let me finalize and write the complete file.

Actually for nicer visuals, I'll add a point light inside the tank (blueish) for shimmer. And hemisphere light.

Also add subtle particle dust in water? Small sprite dots drifting. Maybe overkill. Skip.

Fish count: ~10 fish. Different colors: orange (#ff8c42), pink (#ff5d8f), yellow (#ffd23f), teal (#3fc8b4), purple (#a06cd5), white (#e8f0ff).

Let me also vary fish sizes slightly and speeds.

For tail wiggle when fleeing: faster wiggle. Done above.

Alright, writing the file.

Final structure of code:

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Aquarium — Fish React to Mouse</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { width:100%; height:100%; overflow:hidden; background:#021024; }
  #app { position:fixed; inset:0; }
  #hint {
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:#cfeaff; font-size:clamp(20px,4.5vw,46px);
    font-weight:200; letter-spacing:.18em; text-indent:.18em;
    text-shadow:0 2px 18px rgba(0,0,0,.85), 0 0 30px rgba(80,180,255,.25);
    pointer-events:none; user-select:none; z-index:20;
    background: radial-gradient(circle at 50% 50%, rgba(2,16,36,.55), rgba(2,16,36,.85));
  }
  #hud {
    position:fixed; bottom:18px; left:0; right:0;
    text-align:center; color:#8fc7ff; font-size:13px;
    letter-spacing:.12em; z-index:20; pointer-events:none;
    text-shadow:0 1px 6px rgba(0,0,0,.9);
  }
  .tag { color:#5fa8d8; font-size:11px; }
</style>
</head>
<body>
<div id="app"></div>
<div id="hint">Click or press any key to begin</div>
<div id="hud">
  <span class="tag">drag to orbit</span> ·
  <span class="tag">hover fish → they flee</span> ·
  <span class="tag">tap anywhere to interact</span>
</div>
<script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const W = () => window.innerWidth;
const H = () => window.innerHeight;

let started = false;
function begin() {
  if (started) return;
  started = true;
  document.getElementById('hint').style.display = 'none';
}
document.addEventListener('click', begin);
document.addEventListener('keydown', begin);

// ---------- Renderer / Scene / Camera ----------
const app = document.getElementById('app');
const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:false });
renderer.setSize(W(), H());
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.05;
app.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = makeGradientBackground();
scene.fog = new THREE.FogExp2(0x04101f, 0.045);

const camera = new THREE.PerspectiveCamera(50, W()/H(), 0.1, 100);
camera.position.set(0, 3.6, 7.2);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.target.set(0, 1.1, 0);
controls.minDistance = 4.5;
controls.maxDistance = 13;
controls.maxPolarAngle = Math.PI * 0.52;
controls.enablePan = false;
controls.update();

// ---------- Lights ----------
scene.add(new THREE.HemisphereLight(0x9fc4ff, 0x0a1422, 0.55));
const keyLight = new THREE.DirectionalLight(0xffffff, 0.7);
keyLight.position.set(4, 9, 5);
scene.add(keyLight);
const fillLight = new THREE.PointLight(0x66aaff, 0.6, 30, 1.5);
fillLight.position.set(0, 2.5, 0);
scene.add(fillLight);

// ---------- Tank ----------
const TANK_W = 8, TANK_H = 5, TANK_D = 5;
const tankGroup = new THREE.Group();

// bottom
const bottomMat = new THREE.MeshStandardMaterial({ color:0x0a2a3f, roughness:0.85, metalness:0.1 });
const bottom = new THREE.Mesh(new THREE.BoxGeometry(TANK_W, 0.3, TANK_D), bottomMat);
bottom.position.y = -TANK_H/2 + 0.15;
tankGroup.add(bottom);

// side walls + top
const wallMat = new THREE.MeshPhysicalMaterial({
  color: 0xbfe0ff,
  transparent: true,
  opacity: 0.16,
  roughness: 0.08,
  metalness: 0,
  side: THREE.DoubleSide,
  depthWrite: false
});
const walls = [
  { w: TANK_W, d: TANK_D, y: TANK_H/2 },         // top
  { w: TANK_W, d: TANK_D, y: -TANK_H/2 },        // bottom
  { w: TANK_D, d: TANK_W, y: 0, flip: true },    // front (z+)
  { w: TANK_D, d: TANK_W, y: 0, flip: false },   // back  (z-)
  { w: TANK_W, d: 0.05, y: TANK_H/4 },           // left
  { w: TANK_W, d: 0.05, y: -TANK_H/4 }           // right
];
walls.forEach(c => {
  const m = new THREE.Mesh(new THREE.BoxGeometry(c.w, c.y, c.d), wallMat);
  m.position.set(0, c.y/2, 0);
  if (c.flip) m.scale.z = -1; // hmm this flips scale weirdly
  tankGroup.add(m);
});
```

Hmm, the scale flip for front/back walls is wrong. Let me think: BoxGeometry(width=TANK_W, height=TANK_H/2, depth=TANK_D). For the front wall at z=+TANK_D/2, default orientation has its face normal pointing +z (toward viewer if camera looks down -z... wait camera at +z looking toward origin, so +z is toward viewer). Default box faces +z/-z/+x/-x/+y/-y. Front wall at z=+TANK_D/2 has its +z face outward — correct, visible to camera. Back wall at z=-TANK_D/2 has its -z face outward. So default orientation is fine for both, no flip needed! Just position correctly.

Left wall: at x=-TANK_W/2, face normal -x. Position (−TANK_W/2, 0, 0). Right wall: x=+TANK_W/2, face +x. Position (+TANK_W/2, 0, 0).

Top: y=+TANK_H/2, face +y. Bottom: y=-TANK_H/2, face -y.

No flipping needed. Let me fix that. Remove the flip logic.

Actually wait, with DoubleSide material we don't care about normals facing inward or outward. So no flip needed at all. Simpler.

Continue:

```js
// Water surface
const surfMat = new THREE.MeshPhysicalMaterial({
  color: 0x3a8fd0,
  transparent: true,
  opacity: 0.32,
  roughness: 0.1,
  metalness: 0,
  side: THREE.FrontSide
});
const surface = new THREE.Mesh(new THREE.PlaneGeometry(TANK_W, TANK_D), surfMat);
surface.rotation.x = -Math.PI/2;
surface.position.y = TANK_H/2 - 0.02;
tankGroup.add(surface);

scene.add(tankGroup);

// ---------- Fish ----------
class Fish {
  constructor(scene, color) {
    this.color = color;
    this.group = new THREE.Group();
    const bodyMat = new THREE.MeshStandardMaterial({
      color, roughness: 0.35, metalness: 0.15,
      emissive: color, emissiveIntensity: 0.18
    });
    const s = 0.28 + Math.random()*0.18;
    // body
    const body = new THREE.Mesh(new THREE.SphereGeometry(s, 18, 14), bodyMat);
    body.scale.set(1.25, 0.7, 0.55);
    this.group.add(body);
    // tail
    const tailLen = s*1.7;
    const tail = new THREE.Mesh(new THREE.ConeGeometry(s*0.55, tailLen, 7), bodyMat);
    tail.geometry.rotateZ(-Math.PI/2);
    tail.position.x = -tailLen*0.75;
    this.tail = tail;
    this.group.add(tail);
    // dorsal
    const dorsal = new THREE.Mesh(new THREE.ConeGeometry(s*0.45, s*0.8, 5), bodyMat);
    dorsal.geometry.rotateX(Math.PI/2);
    dorsal.position.set(0, s*0.55, 0);
    this.group.add(dorsal);
    // anal fin (small)
    const anal = new THREE.Mesh(new THREE.ConeGeometry(s*0.3, s*0.5, 4), bodyMat);
    anal.geometry.rotateX(Math.PI/2);
    anal.position.set(s*0.2, -s*0.1, 0);
    this.group.add(anal);
    // eye
    const eyeMat = new THREE.MeshStandardMaterial({ color:0x050505, roughness:0.2, metalness:0.3 });
    const eye = new THREE.Mesh(new THREE.SphereGeometry(s*0.12, 8, 6), eyeMat);
    eye.position.set(s*0.95, s*0.12, s*0.35);
    this.eye = eye;
    this.group.add(eye);
    
    scene.add(this.group);
    
    this.pos = new THREE.Vector3(
      (Math.random()*2-1)*3.2,
      0.5 + Math.random()*1.8,
      (Math.random()*2-1)*3.2
    );
    this.vel = new THREE.Vector3((Math.random()-0.5)*0.04, 0, (Math.random()-0.5)*0.04);
    this.baseAngle = Math.random()*Math.PI*2;
    this.wobble = Math.random()*Math.PI*2;
    this.fleeStreak = 0;
    this.spinAngle = Math.random()*Math.PI*2; // for slight spin
    this.group.position.copy(this.pos);
    const sc = 0.85 + Math.random()*0.35;
    this.group.scale.setScalar(sc);
  }
  
  update(dt, mousePt) {
    const isNear = mousePt && mousePt.distanceToSquared(this.pos) < 3.2*3.2;
    if (isNear) {
      const away = this.pos.clone().sub(mousePt).normalize();
      this.vel.addScaledVector(away, 0.18);
      this.fleeStreak += dt;
    } else {
      this.fleeStreak = 0;
      // gentle wandering
      this.vel.x += (Math.random()-0.5)*0.004;
      this.vel.z += (Math.random()-0.5)*0.004;
      if (this.fleeStreak < 0.3) this.baseAngle += (Math.random()-0.5)*0.5;
    }
    const maxV = 0.24;
    this.vel.clampLength(0, maxV);
    this.pos.addScaledVector(this.vel, dt);
    
    // keep inside tank
    const b = 3.65;
    if (this.pos.x > b) { this.pos.x = b; this.vel.x = -Math.abs(this.vel.x)*0.7; }
    else if (this.pos.x < -b) { this.pos.x = -b; this.vel.x = Math.abs(this.vel.x)*0.7; }
    if (this.pos.z > b) { this.pos.z = b; this.vel.z = -Math.abs(this.vel.z)*0.7; }
    else if (this.pos.z < -b) { this.pos.z = -b; this.vel.z = Math.abs(this.vel.z)*0.7; }
    if (this.pos.y > 2.55) { this.pos.y = 2.55; this.vel.y = Math.min(this.vel.y, 0); }
    if (this.pos.y < 0.18) { this.pos.y = 0.18; this.vel.y = Math.max(this.vel.y, 0); }
    
    this.wobble += dt * (4 + Math.random()*2);
    const yOff = Math.sin(this.wobble) * 0.12;
    const targetAngle = Math.atan2(this.vel.z, this.vel.x);
    let da = targetAngle - this.baseAngle;
    while (da > Math.PI) da -= Math.PI*2;
    while (da < -Math.PI) da += Math.PI*2;
    this.baseAngle += da * 0.09;
    // occasional swirl
    this.spinAngle += da*0.3 * dt * 3;
    this.group.rotation.y = this.baseAngle;
    this.group.position.set(this.pos.x, this.pos.y + yOff, this.pos.z);
    
    // eye flick direction? skip
    this.tail.rotation.z = Math.sin(this.wobble * 2.4) * (isNear ? 0.7 : 0.45);
    this.tail.rotation.x = Math.sin(this.wobble * 1.7) * 0.08;
  }
}

const FISH_COLORS = ['#ff8c42','#ff5d8f','#ffd23f','#3fc8b4','#a06cd5','#9ec5ff','#ff7a3d','#2ecc71'];
const fishList = [];
for (let i = 0; i < 12; i++) {
  fishList.push(new Fish(scene, FISH_COLORS[i % FISH_COLORS.length]));
}

// ---------- Seaweed & rocks ----------
const seaweedGroup = new THREE.Group();
constweedMat = new THREE.MeshStandardMaterial({ color:0x2a8a4f, roughness:0.7, emissive:0x0c2e16, emissiveIntensity:0.35 });
for (let i = 0; i < 22; i++) {
  const x = (Math.random()-0.5)*7.2;
  const z = (Math.random()-0.5)*5.2;
  const h = 1.2 + Math.random()*2.2;
  const seg = 4 + Math.floor(Math.random()*3);
  const geo = new THREE.CylinderGeometry(0.04, 0.12, h, 5);
  const m = new THREE.Mesh(geo, weewMat || weewMat);
  m.position.set(x, 0.1, z);
  m.userData = { baseRotZ: (Math.random()-0.5)*0.5, phase: Math.random()*Math.PI*2, h };
  seaweedGroup.add(m);
}
scene.add(seaweedGroup);

const rockMat = new THREE.MeshStandardMaterial({ color:0x3a3540, roughness:0.9, metalness:0.05 });
for (let i = 0; i < 6; i++) {
  const r = new THREE.Mesh(new THREE.IcosahedronGeometry(0.3 + Math.random()*0.5, 0), rockMat);
  const ang = Math.random()*Math.PI*2;
  const rad = 1.5 + Math.random()*2.5;
  r.position.set(Math.cos(ang)*rad, -0.15, Math.sin(ang)*rad);
  r.rotation.set(Math.random()*3, Math.random()*3, Math.random()*3);
  seaweedGroup.add(r); // attach to seaweed group? no, separate. remove.
}
```

Oops, I put rocks in seaweedGroup but they should be separate. Let me add rocks to scene separately. Also typo weewMat. Fix.

Also seaweed swaying:

```js
function updateSeaweed(time) {
  seaweedGroup.children.forEach(sw => {
    const u = sw.userData;
    sw.rotation.z = u.baseRotZ + Math.sin(time*1.4 + u.phase) * 0.25;
    sw.rotation.x = Math.cos(time*1.1 + u.phase*1.3) * 0.12;
  });
}
```

Bubbles:

```js
const bubbles = [];
const bubbleGeo = new THREE.SphereGeometry(0.04, 8, 6);
const bubbleMat = new THREE.MeshStandardMaterial({ color:0xcfeaff, transparent:true, opacity:0.5, roughness:0.1, metalness:0 });
for (let i = 0; i < 30; i++) {
  const b = new THREE.Mesh(bubbleGeo, bubbleMat);
  b.position.set(
    (Math.random()-0.5)*7,
    Math.random()*2.5,
    (Math.random()-0.5)*5
  );
  b.userData = { speed: 0.3 + Math.random()*0.5, phase: Math.random()*Math.PI*2 };
  scene.add(b);
  bubbles.push(b);
}
function updateBubbles(dt, time) {
  bubbles.forEach(b => {
    b.position.y += b.userData.speed * dt;
    if (b.position.y > 2.4) {
      b.position.y = 0.1;
      b.position.x = (Math.random()-0.5)*7;
      b.position.z = (Math.random()-0.5)*5;
    }
    const s = 0.7 + Math.sin(time*2 + b.userData.phase)*0.3;
    b.scale.setScalar(s);
    b.material.opacity = 0.35 + Math.sin(time*3 + b.userData.phase)*0.2;
  });
}
```

Mouse handling:

```js
const raycaster = new THREE.Raycaster();
const mouseNDC = new THREE.Vector2();
const WATER_PLANE_Y = 1.15;
const waterPlane = new THREE.Plane(new THREE.Vector3(0,1,0), -WATER_PLANE_Y);
let mousePt = null;

renderer.domElement.addEventListener('pointermove', (e) => {
  if (!started) return;
  mouseNDC.x = (e.clientX / W()) * 2 - 1;
  mouseNDC.y = -(e.clientY / H()) * 2 + 1;
  raycaster.setFromCamera(mouseNDC, camera);
  const hit = new THREE.Vector3();
  if (raycaster.ray.intersectPlane(waterPlane, hit)) {
    mousePt = hit;
  } else {
    mousePt = null;
  }
});

// also react to pointer leaving
renderer.domElement.addEventListener('pointerleave', () => { mousePt = null; });
```

Hmm, before click, mousePt stays null — fish don't flee. After click, pointermove sets it. Good.

Main loop:

```js
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const dt = Math.min(clock.getDelta(), 0.05);
  const t = clock.elapsedTime;
  
  fishList.forEach(f => f.update(dt, mousePt));
  updateSeaweed(t);
  updateBubbles(dt, t);
  
  controls.update();
  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
  camera.aspect = W()/H();
  camera.updateProjectionMatrix();
  renderer.setSize(W(), H());
});
```

Wait, before the user clicks, OrbitControls should still allow drag-to-orbit so user can explore. Pointer events on renderer.domElement work regardless of started flag (OrbitControls listens to pointerdown itself). But my pointermove handler gates on started. That's fine — OrbitControls handles its own. But does OrbitControls work before start? Yes, it attaches listeners at construction. My additional pointermove listener gating means no mouse-pt set, but OrbitControls still updates during drag. 

Also need pointerdown for OrbitControls to engage — it's attached at construction, fires regardless of started. Good.

But wait: the rule says "The iframe only receives keyboard events after the user clicks it". My code allows click to begin. But pointer events aren't mentioned. I'll allow OrbitControls to work pre-click (exploration) and post-click full flee. That matches "iframe only receives keyboard events after click" (keyboard-gated behavior) while mouse exploration always works. OK.

Hmm, actually thinking again — maybe I should also gate pointer interactions. But the spec literally says keyboard. Leave as is.

One more thing: the hint is an overlay div on top of everything (z-index 20, pointer-events none). Since pointer-events:none, clicks pass through to the canvas. Good — clicking the canvas triggers begin(). 

Wait, but OrbitControls needs the click. With pointer-events:none on hint, clicks reach canvas → OrbitControls engages → begin() runs. Then subsequent pointermove sets mousePt. 

Edge case: click begins, then immediately pointermove sets mousePt — fish flee on first frame. 

Let me also consider: what if user presses a key before clicking? begin() runs, hint hides. Then keyboard works. Fine.

What about touch? pointermove fires on touch too (pointer events unify). Good.

Now, one concern: `started` flag and OrbitControls pointerdown. If user clicks to begin, OrbitControls captures the pointerdown. Does OrbitControls also call begin()? No, begin is separate. The click event fires on the canvas (OrbitControls doesn't stopPropagation). begin() sets started=true. Next pointermove → mousePt set. Good.

But there's a subtle timing issue: the click event and OrbitControls' internal handlers both fire. Order doesn't matter since they're independent.

Alright, let me also double check the gradient background function:

```js
function makeGradientBackground() {
  const c = document.createElement('canvas');
  c.width = 8; c.height = 512;
  const ctx = c.getContext('2d');
  const g = ctx.createLinearGradient(0, 0, 0, 512);
  g.addColorStop(0, '#1a3a5e');
  g.addColorStop(0.45, '#061a30');
  g.addColorStop(1, '#02070f');
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, 8, 512);
  const tex = new THREE.CanvasTexture(c);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}
```

Set as scene.background. Fog color should match bottom of gradient: 0x02070f. I had 0x04101f — adjust to match. Let me use 0x04101f for fog to blend. Actually fog blends toward fog color — should match background's darker end. I'll set fog color to 0x04101f.

Hmm, scene.background as Texture — fog will blend toward the texture color. With FogExp2, colors get multiplied by exp(-density*dist). At the near edge of fog (~1 unit), factor = exp(-0.045) ≈ 0.956, barely visible. At 5 units, exp(-0.225)=0.8, soft fade. Good.

Let me also verify the tank fits in view. Tank 8x5x5, camera at (0, 3.6, 7.2) looking at (0,1.1,0), FOV 50. Vertical extent visible: at distance ~7.2, half-height visible = tan(25°)*3.6 ≈ 0.467*3.6 ≈ 1.68, times 2 = 3.36. Tank is 5 tall (half = 2.5). So bottom of tank (y=-2.5) might be slightly cut off. Hmm. Let me either move camera up or reduce tank height.

Tank height 5 → total 5 tall, half 2.5. Camera at y=3.6 looking at y=1.1. Visible vertical range at origin plane: depends on FOV and distance. Distance from camera to target ≈ sqrt(0² + (3.6-1.1)² + 7.2²) = sqrt(6.76 + 51.84) = sqrt(58.6) ≈ 7.65. Half-visible height at that distance ≈ 7.65 * tan(25°) = 3.57. So tank bottom (y=-2.5) is 5 above camera y=3.6, i.e., 8.5 below camera — well outside view. Hmm.

Options:
1. Make tank shorter (height 4, half 2)
2. Move camera higher (y=4.5)
3. Accept bottom slightly cut

Let me make tank height 4.5 (half 2.25). Camera at y=4, target y=0.8. Distance ≈ sqrt(12.96+51.84)=8.1. Half-visible ≈ 8.1*0.466=3.77. Tank bottom at y=-2.25, camera y=4, diff 6.25. Still cut. 

Easier: make camera closer or higher, or reduce tank to 4 tall. Let me do tank height 4.2, camera at (0, 3.8, 6.5), target (0, 1, 0). Distance = sqrt(7.84+42.25)=6.93. Half-visible = 3.22. Tank bottom at y=-2.1, camera y=3.8, diff 5.9. Cut.

The fundamental issue: a 4-tall tank needs camera quite far back or high up. Let me just accept that the very bottom of the tank (below y=0) isn't visible — that's fine, the seabed and rocks are around y=-0.15 to -0.5, partially hidden. Actually the bottom wall is at y=-TANK_H/2+0.15 = -1.85+... wait TANK_H=4, half=2, bottom at y=-1.85. Still below view cutoff roughly.

Alternative: make the tank smaller visually by scaling the tankGroup. Tank 8 wide, 4 deep, 4 tall. Scale tankGroup by 0.8 → 6.4x3.2x3.2. Camera adjusted accordingly. Or simpler: keep tank 8x5x5 but set camera position higher/farther.

Let me reconsider: is it bad if bottom is hidden? The seabed rocks are at y≈-0.15, inside view cutoff of ~3.5 above camera at y=4. Cutoff plane at height y_view_bottom ≈ camera_y - 3.5 = 0.5. So anything below y=0.5 is clipped. Seabed visible partially. Bottom wall at y=-1.85 hidden. Hmm.

Better solution: shift everything up. Put tank center at y=1 (so tank spans y=-1 to y=5+... no). Let me restructure: tank center at y=0 but camera positioned to see whole tank.

Tank spans y ∈ [-2.5, 2.5] (height 5). To see all of it, camera needs to be high and far. Camera at (0, 5, 9), target (0, 0, 0), FOV 50. Distance = sqrt(25+81)=10.3. Half-visible height at target plane = 10.3*0.466=4.8. Tank spans 5 units — just fits barely. Ugly.

Switch to FOV 65 (wider): half = 10.3*tan(32.5°)=10.3*0.637=6.57. Tank 5 tall fits easily. Side walls also visible since half-width visible = 6.57*9/10.3≈5.9, tank is 8 wide — hmm wider than visible, so tank wider than view. Half-tank width = 4, visible half-width = 5.9, fits.

FOV 65 with camera (0, 4.5, 8.5), target (0, 0.5, 0): dist = sqrt(16+72.25)=9.22, half-vert=6.05, half-horiz at target=6.05*8.5/9.22=5.56. Tank half-w=4 ≤ 5.56 ✓, half-h=2.5 ≤ 6.05 ✓. Great.

But FOV 65 makes things look more distorted/fisheye. Trade-off. Compromise: FOV 55, camera (0, 4, 9), target (0, 0.3, 0). Dist=sqrt(16+81)=9.69. Half-vert=9.69*tan(27.5°)=9.69*0.521=5.05. Half-horiz=5.05*9/9.69=4.66. Tank half-w=4≤4.66 ✓ barely, half-h=2.5≤5.05 ✓. Tight but OK.

Actually let me just reduce tank to 4 tall and 6 wide, 6 deep: half 2, 3, 3. Camera (0, 3.2, 8), target (0, 0.6, 0). Dist=sqrt(10.24+64)=8.64. Half-vert=8.64*tan(27.5°)=4.51. Half-horiz=4.51*8/8.64=4.15. Tank half-w=3≤4.15 ✓, half-h=2≤4.51 ✓. Comfortable.

Let me use TANK 6×4×4. And camera (0, 3.2, 8). Target (0, 0.5, 0). This should frame nicely.

Recompute mouse plane Y: average fish y ≈ 0.5–2.3. Set plane at y=1.15. Fish y ∈ [0.5, 2.3] mostly near plane. Distance computation is 3D, fine.

Also tankGroup.scale — let me apply to fit. Actually let me just design tank 6×4×4 directly. Walls: top at y=2, bottom at y=-2, etc. Fish spawn y ∈ [0.5, 2.2]. Fish bounces keep y ∈ [0.18, 2.45]. Surface at y=1.98.

Let me also raise the whole scene: tank center at y=0, camera at y=3.2. Seabed at y=-1.8 (below tank bottom). Rocks on seabed at y≈-1.8.

Wait, tank bottom at y=-2, seabed below that at y=-2 to -2.5. Let me place seabed slightly inside tank bottom, visible through... no, seabed is at bottom of tank, hidden by bottom wall. Hmm. Let me make seabed at y=-1.9 (inside tank, just above bottom) so it's visible peeking above bottom wall. Or lower the bottom wall opacity. Simpler: seabed at y=-1.9, rocks sitting on it, visible through translucent bottom.

Actually with opacity 0.16 on bottom wall, seabed visible. Good.

Let me set: seabed y=-1.85, rocks at y=-1.7. Visible through translucent bottom.

OK recompute sizes:
- TANK_W=6, TANK_H=4, TANK_D=4
- Wall half extents: 3, 2, 2
- Fish bounds: x,z ∈ [-3.3, 3.3], y ∈ [0.2, 2.4]
- Camera (0, 3.2, 7.5), target (0, 0.6, 0), FOV 55
- Plane y = 1.1

Recheck camera framing: dist=sqrt(10.24+56.25)=8.04. Half-vert=8.04*tan(27.5°)=8.04*0.521=4.19. Half-horiz=4.19*7.5/8.04=3.88. Tank half-w=3≤3.88 ✓, half-h=2≤4.19 ✓. 

Also maxPolarAngle = PI*0.52 prevents going below horizontal — can't see under tank. Hmm, that hides underwater view below horizon. Actually the tank sits above seabed; camera at y=3.2 looking horizontally sees top of tank and water. Below-horizon angles show seabed region — good, that's what we want to see the tank bottom/seabed? Actually with maxPolarAngle ~0.52π≈94°, camera is slightly above horizontal, so it looks down into the tank opening area. Hmm, that means seabed visible. Wait, polar angle measured from +Y axis. 94° means camera is tilted ~4.6° below horizontal. That lets us see below the waterline — good. Actually I want camera roughly horizontal-ish, slightly above. Let me set maxPolarAngle = Math.PI * 0.48 (86°), so camera can go slightly below horizontal, seeing the seabed and bottom of tank. Actually tilting camera down into the tank reveals tank bottom. Let me set maxPolarAngle = Math.PI * 0.49.

Default polar angle for camera (0,3.2,7.5) target (0,0.6,0): vector from target to camera = (0, 2.6, 7.5). Polar = acos(2.6/sqrt(2.6²+7.5²)) = acos(2.6/8.04) = acos(0.323) = 71.1° = 1.24 rad = π*0.393. Within 0.49π. Good.

maxPolar 0.49π allows tilting down to ~88°, basically horizontal. Good.

Also minPolar 0.15π (27°) prevents going overhead. Default 0.15π fine.

Let me also enable pan disabled, damping on.

Final check on fish flee: distance threshold 3.2 squared units — radius ~1-1.2 units, so fish within 1.8 units of mouse point flee. Good, noticeable reaction.

Now writing the final HTML file. Let me also handle the resize properly and pixel ratio.

I realize I had a typo "weewMat" — fix to seaweedMat.

Also I wrote `const weewMat` incorrectly — define as const before use.

Also rocks: separate scene addition.

Let me also add a subtle environment for reflections: skip, keep simple.

Also need to ensure outputColorSpace SRGB and tone mapping applied — done.

One more: emissive on fish might look too bright. Keep intensity 0.15. Fine.

Writing final code now. Also ensure no horizontal scrollbar — body overflow hidden, app inset 0, renderer fills. Good.

Let me also double-check Plane geometry rotation. PlaneGeometry is in XY plane, normal +Z. Rotate -90° around X → normal +Y, in XZ plane. Good: `surface.rotation.x = -Math.PI/2`.

Raycaster plane: plane normal (0,1,0), constant -1.1 → plane equation y=1.1. Correct, hits rays going downward (from camera at +z looking -z and slightly down). Mouse on screen → ray hits y=1.1 plane → gives x,z of mouse-over-water point. Good.

But what if mouse is above the tank vertically (screen coords map to NDC, ray goes downward to y=1.1)? Any NDC maps to a ray; if the ray doesn't intersect the plane (e.g., ray going up — impossible from this camera since camera looks downward at the tank; rays from camera through NDC all go downward-ish to the plane). Some rays might miss if pointing away, but practically all hit y=1.1. Good.

Edge: at screen corners, rays point diagonally; they'll hit the plane somewhere. Fine.

OK writing the file. I'll include everything inline. Let me also add a subtle vignette via CSS overlay for atmosphere. Optional; skip to keep clean. Actually a vignette adds polish — quick CSS:

```css
#vignette {
  position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,8,20,.55) 100%);
  z-index:15;
}
```

Add to body. Nice touch.

Also add subtle scanline? No.

Final code below. Let me write it out fully and carefully checking syntax.

Also: ensure `makeGradientBackground` defined before use — function declarations hoist, fine.

Let me also handle devicePixelRatio cap and resize on window load.

Writing now.

Actually one concern: OrbitControls import path. With importmap mapping "three/addons/" → examples/jsm/, importing "three/addons/controls/OrbitControls.js" resolves correctly. Good.

Another: OrbitControls in r170 — API stable. Good.

Also, the hint div has pointer-events:none so clicks pass through. But it's a sibling overlay; canvas beneath receives pointer events. OrbitControls attached to renderer.domElement. Good.

Let me write the complete file now.

Wait — I should double check: the spec says "Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg...)". So I output just the code block. Good.

Let me also think about whether to gate mouse flee pre-click. As discussed, leave open. Actually, let me reconsider — the user said "fish swim away when I move the mouse near them". If they never click, moving mouse does nothing. That contradicts the stated behavior somewhat. But the explicit rule says only keyboard is gated; mouse isn't. And "games must start in a self-playing demo mode behind a Click or press a key to start message, so the game can be judged in action without playing." So judging requires action — which needs a click first. That's the expected flow: see demo immediately, then click to interact. OK keep as designed.

Hmm, but actually, reading once more: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message, so the game can be judged in action without playing." This strongly implies: before clicking, the game IS playing (AI fish swimming, scene rendering). Judge sees action. Then click/key enables further interaction. The mouse-flee interaction — does it need click? The statement "the game can be judged in action without playing" suggests the demo action itself (fish swimming away) happens immediately. If mouse-flee requires a click, then "judged in action without playing" is partially satisfied (fish swim, but moving mouse doesn't flee). I think requiring a click for mouse interaction is acceptable and aligns with the keyboard-gate rule.

Alternatively: allow mouse flee immediately (no click needed), but keyboard shortcuts (if any) gated by click. That might violate "iframe only receives keyboard events after click" spirit... no, that rule is about keyboard specifically, and mouse isn't mentioned. Hmm. But "the iframe only receives keyboard events after the user clicks it" might imply all input is gated? The phrase "keyboard events" is specific though.

To be safe and consistent: gate ALL interactive behaviors (including mouse flee) behind the click/key. Pre-click: camera orbits on drag (exploration only), fish swim gently but don't flee. Post-click: full interaction. This matches "start in demo mode behind click message" most cleanly. And avoids any ambiguity.

Let me implement: keep `started` check on both OrbitControls use and flee logic. OrbitControls already works pre-click (its own listeners). My pointermove sets mousePt only if started. Fish update ignores mousePt if not started. So pre-click: no flee, drag orbits. Post-click: flee works.

Wait but if OrbitControls drags pre-click and my pointermove handler returns early (started=false), no conflict. Good.

OK final implementation locked. Writing now.

Let me also make the hint text disappear on first pointerdown OR keydown. Simple approach:

```js
function begin() {
  if (started) return;
  started = true;
  document.getElementById('hint').style.display = 'none';
}
document.addEventListener('pointerdown', begin, { once: true });
document.addEventListener('keydown', begin, { once: true });
```

Use pointerdown instead of click for responsiveness. Good.

Final file: