Aquarium breach · laguna-s-2.1

Let me analyze this task. I need to build an interactive 2D aquarium-breach simulation on a canvas. Let me think about the requirements carefully.

Requirements:
1. Initially show an intact glass tank with water, fish, rocks, plants, and a floating toy
2. User can drag a visible crack vertically on one side below the initial waterline, then press "Breach"
3. "Reset" restores the initial scene
4. On Breach:
   - Panel breaks around the selected opening
   - Water exits in a gravity-curved jet
   - Waterline falls continuously
   - Outflow weakens as water level approaches opening and stops when water doesn't reach it
5. Escaped water forms a spreading puddle constrained by floor and room walls
6. Physics responses:
   - Rocks sink
   - Toy floats
   - Plants bend/drift
   - Fish swim against current then swept through breach
   - Movable objects that fit opening can be carried out
7. Objects leaving water → gravity-driven motion, collide with floor
8. Glass fragments rotate, collide, experience resistance in water

This is a complex simulation. Let me build it step by step. I'll need:
- A canvas for rendering
- Physics simulation for water, objects
- Particle systems for water jet and puddle
- Object behaviors

Let me think about the architecture:

1. **Tank**: Glass walls (breakable panel on one side), water inside
2. **Water**: Rendered as a fluid surface that can fall, with a jet exiting the crack
3. **Objects**: Rocks (heavy, sink), toy (floats), plants (flexible), fish (swim), glass fragments (on breach)
4. **Crack**: A draggable vertical opening on one side of the tank
5. **Puddle**: Water accumulating on the floor outside the tank

Let me think about the physics model:
- Water level in tank decreases over time based on outflow rate
- Outflow rate depends on water height above opening (Torricelli's law: v = sqrt(2gh))
- Water jet exits with velocity based on height, curves downward due to gravity
- Puddle spreads based on volume, constrained by floor/walls
- Objects have mass, buoyancy, drag, current response

Let me think about how to implement this efficiently in a single HTML file.

For the water simulation, I'll use a simplified approach:
- Track water level in the tank as a height value
- When breach happens, water flows out through the crack
- Outflow velocity follows Torricelli's law
- Water jet particles are spawned at the crack
- Puddle spreads on the floor

For objects:
- Each object has position, velocity, mass, size
- In water: buoyancy force, drag, current
- Out of water: gravity, floor collision
- Fish: swim behavior with current avoidance

Let me think about the structure:

```
State:
- tank: {x, y, width, height, wallThickness}
- water: {level} - height of water in tank
- crack: {y, dragging} - position of crack on the tank wall
- objects: [rocks, toy, plants, fish]
- puddle: {width, depth} or particles
- fragments: [glass pieces]
- particles: [water jet particles]
- mode: 'intact' | 'breach' | 'done'
```

Let me code this up. I'll make a comprehensive simulation.

For rendering:
- Draw tank walls (glass)
- Draw water surface
- Draw background room with floor
- Draw objects
- Draw water jet particles
- Draw puddle
- Draw crack
- Draw controls

Let me think about the physics more carefully.

**Water outflow (Torricelli's law):**
- Flow rate Q = A * v where A is area of opening, v = sqrt(2 * g * h)
- h is height of water above opening
- Water level falls at rate dh/dt = -Q/tank_area
- When h <= 0 (water below opening), flow stops

**Water jet:**
- Particles spawned at crack position
- Initial velocity horizontal (outward) based on sqrt(2gh)
- Gravity applied each frame
- Particles fade/slow due to air resistance
- When they hit floor, they contribute to puddle

**Puddle:**
- Spreads outward from impact point
- Constrained by room walls and floor
- Width increases with volume
- Eventually stops spreading

**Objects in water:**
- Buoyancy: if object density < water density, it floats; else sinks
- Drag: proportional to velocity relative to current
- Current: water flowing past objects
- Fish: swim against current, some swept out

**Objects out of water:**
- Gravity
- Floor collision
- Some might be carried by puddle flow

Let me think about fish behavior:
- Fish swim in a direction normally
- When current is strong, they try to swim against it
- If current too strong, they get swept
- Some fish near the breach get swept through

Let me implement this now. I'll create a fairly detailed simulation.

Let me think about the time budget - 15 minutes. I need to write this efficiently and verify it works.

Let me start coding the HTML file.

Actually, let me think about what's the most efficient way to build this. I'll use a canvas-based approach with requestAnimationFrame.

Let me think about the key components:

1. **Tank rendering**: Rectangle with walls, water inside
2. **Breakable panel**: The right wall (or left) can break at the crack
3. **Crack dragging**: User drags to set crack position
4. **Water physics**: Level tracking, outflow, jet particles
5. **Object physics**: Buoyancy, drag, gravity, collisions
6. **Puddle physics**: Spreading
7. **Fish AI**: Swimming, current response

Let me write the code now.

For the water jet, I'll spawn particles at the crack. Each particle has position, velocity, and a "water fraction" (how much it's water). When they hit the floor, they spread into the puddle.

For the puddle, I'll track a spreading front. Simple approach: puddle width grows based on volume, shaped like a semicircle or fan from the leak point.

Let me think about the room layout:
- Room floor at bottom of canvas
- Room walls on left and right (or just the tank walls)
- Tank is centered or placed against a wall

Actually, let me place the tank against the left wall of the room. The right side wall of the tank is the breakable panel.

Let me think about coordinates:
- Canvas: 1200 x 800
- Tank: centered, say x=200 to x=600, y=100 to y=600
- Room floor: y=620 (just below tank)
- Room: full canvas width, floor at y=620

Wait, let me simplify. The tank sits on the floor. The floor extends across the room.

Tank:
- x: 250, width: 350, height: 450
- y: 100 (top of tank)
- Bottom: y=550
- Water fills to y=400 (water level)

Room floor: y=560 (just below tank bottom)

The breakable panel is on the right side of the tank (x=600).

The user drags the crack on this right wall, between y=400 (water line) and y=550 (bottom). Actually, the crack should be below the water line for water to flow out. Let me make the draggable range below the water line.

Actually, re-reading: "drag a visible crack vertically on one side below the initial waterline". So the crack is on one side (say right side) of the tank, positioned below the water line. The user drags it vertically.

Let me set the water level at y=400, and the crack can be dragged between y=410 and y=540 (below water, above bottom).

Let me code this up now. I'll aim for a clean, well-structured implementation.

Let me think about performance. With canvas, I can handle maybe a few hundred particles. Water jet particles + puddle + fragments. Should be fine.

Let me think about the object definitions:

Rocks (3-4):
- Heavy, sink to bottom
- Mass: high
- Size: medium
- In water: sink slowly due to drag, rest on bottom
- In breach: might be swept if near opening

Toy (1):
- Floats
- Mass: low, but has upward buoyancy
- Size: medium-large
- In water: floats, drifts with current
- In breach: might be carried out if near opening

Plants (3-4):
- Attached to bottom
- Flexible, bend with current
- In water: bend
- In breach: some might break loose

Fish (5-6):
- Swim actively
- Swim against current when possible
- Get swept when current too strong
- Some swept through breach

Glass fragments (created on breach):
- Pieces from broken panel
- Rotate, collide
- Resistance in water

Let me write the code now.

I'll structure the code as:

```javascript
// State
const state = {
  mode: 'intact', // 'intact', 'breaching', 'breached'
  tank: {...},
  waterLevel: 400,
  crackY: 480,
  crackDragging: false,
  objects: [],
  particles: [],
  puddle: {width: 0, maxReached: 0},
  fragments: [],
  // ...
};

// Init
function init() { ... }

// Update
function update(dt) { ... }

// Render
function render(ctx) { ... }

// Main loop
function loop() {
  update(dt);
  render(ctx);
  requestAnimationFrame(loop);
}
```

Let me think about the physics details more carefully.

**Water level dynamics:**
- `waterLevel` starts at 400
- On breach, water flows out through crack at `crackY`
- Height of water above crack: `h = waterLevel - crackY` (if positive)
- Flow velocity: `v = sqrt(2 * g * h)` (Torricelli's law)
- Flow rate: `dV/dt = openingArea * v`
- Water level change: `dLevel/dt = -dV/dt / tankArea`
- Each frame: `waterLevel -= (openingArea * v * dt) / tankArea`
- When `h <= 0`, flow stops (but water already below opening continues until level reaches opening)

Wait, I need to be careful. When water level is above the crack, water flows out. The flow rate depends on the height of water above the crack. As water level drops, flow slows. When water level reaches the crack, flow stops.

But actually, water could also flow out horizontally if the level is above the crack, creating a jet. Once the level drops below the crack, no more flow.

**Water jet particles:**
- Spawn at crack position (x = tank.right edge, y = crackY)
- Initial velocity: horizontal (outward) = v from Torricelli's law
- Gravity: g applied each frame
- Air resistance: small drag
- Lifetime: particles fade
- When hitting floor: convert to puddle volume

**Puddle:**
- Starts at crack x position on floor
- Spreads outward (both directions, or just away from tank)
- Width proportional to sqrt(volume) (2D spreading)
- Constrained by room walls
- Depth proportional to volume / width

Actually, for simplicity, let me track the puddle as a spreading region. The puddle starts at the point where water hits the floor (right below the crack, since the jet exits horizontally and curves down).

Let me think about this more carefully. The tank's right wall is at x=600 (tank right edge). The crack is at crackY. Water exits horizontally. The jet curves down due to gravity. It hits the floor at some point. The puddle forms there.

For the puddle, I'll track:
- `puddleWidth`: how wide the puddle has spread
- `puddleDepth`: average depth
- `puddleVolume`: total water volume in puddle

The puddle spreads from the impact point. I'll make it spread symmetrically or just in the direction away from the tank.

Actually, water hitting the floor would spread in all directions along the floor. But it's constrained by the tank wall on one side (left) and room wall on the other (right). Let me make it spread in both directions, but stop at the tank and room walls.

Let me think about room dimensions:
- Room floor from x=0 to x=1200
- Tank from x=250 to x=600
- The puddle spreads from around x=600-650 outward

OK let me just code this up. I'll aim for a visually clear and physically plausible simulation.

Let me think about how to handle the "objects leaving water" transition. Objects inside the tank are in water. When the water level drops below an object, or when the object is carried out by the flow, it transitions to air motion.

For objects in water:
- Buoyancy force upward based on submerged volume
- Drag force opposite to velocity relative to water current
- Water current: near the breach, water flows outward

For objects in air (after leaving water):
- Gravity
- Air drag (small)
- Floor collision

**Fish AI:**
- Normal behavior: swim in a direction, maybe with some wandering
- Near breach: detect current, try to swim against it
- If current speed > swim speed: get swept
- Some fish near breach get swept through the opening
- After being swept through: they're in the puddle, swimming there

Let me think about current modeling. The current is the water flowing out. I can model it as a velocity field:
- Near the breach, water flows outward
- Away from breach, current is weaker
- Current speed depends on water level / flow rate

For simplicity, I'll compute a current vector at each object's position:
- Direction: from breach center outward (or along the tank)
- Magnitude: proportional to flow rate, decreasing with distance

Actually, let me think about this differently. The main current is:
1. Water flowing toward the breach (inside tank)
2. Water jet exiting (outside tank)

Inside the tank, water flows toward the breach. Objects near the breach experience this flow.

Let me model the current inside the tank as flowing toward the breach opening. The magnitude decreases with distance from the breach.

Outside, the jet creates a current that objects in the water outside can be affected by, but most objects are inside the tank.

For the fish, they swim in their own direction normally. When there's a current, they try to swim against it. If the current is stronger than their swim speed, they get swept.

OK, I think I have a good enough plan. Let me write the code.

Let me think about the rendering order:
1. Room background (floor, walls)
2. Water puddle on floor
3. Tank (walls, water inside)
4. Objects inside tank (behind water surface)
5. Water jet particles
6. Objects in water/air
7. Glass fragments
8. Tank walls (front)
9. UI (crack, controls)

Actually, let me think about the layering more carefully:
- Background: room
- Floor: where puddle forms
- Tank: glass walls
- Water: inside tank
- Objects: inside tank, partially submerged
- Jet: exits through crack
- Puddle: on floor
- Fragments: from broken panel

Let me think about what the tank looks like:
- Glass walls: thin rectangles
- Water: blue rectangle inside tank
- Bottom: substrate (sand/gravel)
- Rocks: on bottom
- Plants: attached to bottom, growing up
- Fish: swimming around
- Toy: floating on water surface

For the breakable panel:
- The right wall of the tank is the breakable panel
- When breach happens, it shatters into fragments
- Fragments fly out and fall

Let me now write the actual code. I'll be thorough but efficient.

Let me think about the structure of the code:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Aquarium Breach</title>
  <style>
    /* CSS */
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <div id="ui">
    <button id="breachBtn">Breach</button>
    <button id="resetBtn">Reset</button>
  </div>
  <script>
    // JavaScript
  </script>
</body>
</html>
```

Let me write the full implementation now.

For physics constants:
- g = 0.3 (pixels per frame², adjusted for visual)
- Actually, let me use g in terms of dt: g = 500 px/s², then per frame with 60fps: 500/60 ≈ 8.3 px/frame²

Hmm, let me think about using a fixed timestep. I'll use a target FPS of 60 and compute dt.

Actually, let me just use simplified physics where I tune the constants for visual appeal rather than physical accuracy.

Let me think about the water jet particles:
- Spawn rate: proportional to flow rate
- Each particle: small circle
- Velocity: horizontal at crack position
- Gravity: pulls down
- Air drag: slows horizontal movement
- When hitting floor: disappear, add to puddle
- Fade out after some time

For the puddle visualization:
- Draw as a blue ellipse/circle on the floor
- Width grows with volume
- Depth (visual) proportional to volume/width

For fragments:
- Spawn at crack position when breach happens
- Fly out with some velocity
- Rotate
- Experience water resistance if in water, air resistance if in air
- Fall due to gravity, bounce on floor

Let me think about the water level visualization. The water inside the tank is a rectangle from the bottom to waterLevel. As waterLevel rises, the rectangle shrinks. The water surface should be visible.

For objects partially in water:
- They're drawn normally, but their position/velocity is affected by buoyancy/drag
- Rocks are at the bottom, partially in water
- Toy floats at the surface
- Plants are attached to bottom, bend with current

Let me think about how to render partially submerged objects. A rock at the bottom of the tank is fully submerged. A fish can be at any depth. The toy floats on the surface.

For buoyancy:
- Water density: 1.0 (arbitrary)
- Object density: rocks (high, > water), toy (low, < water), fish (≈ water)
- Buoyancy force: ρ_water * V_submerged * g (upward)
- Gravity: m * g (downward)
- Net force determines if object sinks or floats

For a floating object (toy):
- It floats with part above water
- Water level at the toy's position provides buoyancy
- The toy's y position is at waterLevel (approximately)

For a sinking object (rock):
- It sinks to the bottom
- Rests on bottom with normal force

For fish:
- They can control their buoyancy
- They swim actively
- Near current, they fight it

OK, let me just write the code. I've been thinking too long. Let me create a comprehensive but practical implementation.

Let me think about the key simulation parameters:

```javascript
const config = {
  gravity: 0.4,
  waterDensity: 1.0,
  tank: {
    x: 280,
    y: 120,
    width: 320,
    height: 430,
    wallThickness: 8,
  },
  floorY: 560,
  room: {
    x: 0,
    width: 1200,
    floorY: 560,
  },
  waterLevel: 420, // y-coordinate of water surface
};
```

Tank right edge (breakable panel): x = 280 + 320 = 600
Tank bottom: y = 120 + 430 = 550
Water level: y = 420 (so water is 430 - (420-120) = ... let me recalculate)

Tank top: y=120, bottom: y=550
Water fills from y=550 (bottom) to y=420 (surface)
Water depth: 550 - 420 = 130

Crack can be dragged between y=430 (just below water) and y=540 (near bottom)

Let me set water level at y = 400 instead:
- Water depth: 550 - 400 = 150
- Crack drag range: y=410 to y=530

Let me finalize the parameters and write the code.

For the jet particles, I'll compute the exit velocity using Torricelli's law:
v = sqrt(2 * g * h) where h = waterLevel - crackY

With g = 0.4 px/frame², if h = 150 pixels, v = sqrt(2 * 0.4 * 150) = sqrt(120) ≈ 11 px/frame

That seems reasonable. The jet will travel outward and curve down.

Actually, let me use a different approach. I'll track time properly with a fixed timestep.

Let me use:
- g = 900 px/s² (gravity)
- Target 60 FPS, so dt = 1/60 s
- Per-frame: position += velocity * dt, velocity += gravity * dt

With h = 150 px, v = sqrt(2 * 900 * 150) = sqrt(270000) ≈ 520 px/s
Per frame: 520/60 ≈ 8.7 px/frame

That's reasonable.

For water level change:
- Opening area: small, say 4 px wide
- Tank cross-section: 320 px wide
- dV/dt = 4 * 520 = 2080 px²/s
- dh/dt = 2080 / 320 = 6.5 px/s
- So water level drops 6.5 px per second initially

That means it takes about 150/6.5 ≈ 23 seconds to drain. That might be too slow for a demo. Let me scale up the opening or use a more aggressive formula.

Actually, the water should drain relatively quickly for a good demo. Let me scale things up.

Let me think about this differently. I'll use a "drain rate" that's visually appealing rather than physically accurate. I'll use Torricelli's law for the jet velocity but make the drain rate faster.

Actually, let me just tune the constants. I want the tank to drain in maybe 5-10 seconds.

Tank cross-section area = 320 * 150 = 48000 px² (when full)
I want it to drain in ~8 seconds, so drain rate = 48000/8 = 6000 px²/s

If opening area is 4 px, and v = sqrt(2*g*h), then:
4 * v = 6000 → v = 1500 px/s
v = sqrt(2 * g * h) → 1500 = sqrt(2 * g * 150) → g = 1500² / (2*150) = 7500

So I need g ≈ 7500 for this to work. That's 7500/900 ≈ 8x Earth gravity. That's fine for a simulation.

Actually, let me just not worry about exact physical accuracy and tune for visual appeal. I'll use:
- Gravity: 0.3 px/frame² (for jet particle motion)
- Water drain rate: scale factor * sqrt(height) where I tune the scale

Let me just code it up and see. I can adjust constants later.

Actually, let me think about this more carefully. I want:
1. Jet to curve downward visibly
2. Water level to drop
3. Outflow to weaken
4. Objects to respond

Let me use these constants:
- PIXEL_GRAVITY = 0.15 (per frame², for particles and fragments)
- Water drains at rate proportional to sqrt(h) where h is depth above crack
- Jet particles get initial horizontal velocity from sqrt(2 * g * h) but scaled

Let me think in terms of frames (assuming 60 FPS):
- g = 0.15 px/frame²
- v_terminal for jet: sqrt(2 * 0.15 * 150) = sqrt(45) ≈ 6.7 px/frame = 402 px/s
- That seems reasonable for a jet

For water level:
- dh/dt = -k * sqrt(h) where h = waterLevel - crackY
- k chosen so tank drains in reasonable time

If h_max = 150 and I want T = 8 seconds = 480 frames:
∫ dh/sqrt(h) = -k ∫ dt
2*sqrt(h_max) = k * T
2*sqrt(150) = k * 480
k = 2*12.25/480 ≈ 0.051

So dh/dt ≈ -0.05 * sqrt(h)

At h=150: dh/dt ≈ -0.05 * 12.25 ≈ -0.61 px/frame
At h=50: dh/dt ≈ -0.05 * 7.07 ≈ -0.35 px/frame
At h=10: dh/dt ≈ -0.05 * 3.16 ≈ -0.16 px/frame

That gives about 150/0.61 ≈ 246 frames ≈ 4 seconds for the main drain, plus the tail getting slower. That's about right.

But actually, I should use the formula more directly. Let me use:
- flowRate = 0.8 * sqrt(max(0, waterLevel - crackY))
- waterLevel -= flowRate * dt
- dt = 1 (fixed timestep, approximately 1/60 second)

Hmm, let me just use a simpler approach and tune:
- drainSpeed = 0.6 * Math.sqrt(Math.max(0, waterLevel - crackY))
- waterLevel -= drainSpeed

At h=150: drainSpeed ≈ 7.3, so 150/7.3 ≈ 20 frames ≈ 0.33 seconds. Too fast.

Let me scale down:
- drainSpeed = 0.15 * Math.sqrt(Math.max(0, waterLevel - crackY))
At h=150: drainSpeed ≈ 1.84, so 150/1.84 ≈ 82 frames ≈ 1.4 seconds. Getting closer.

- drainSpeed = 0.08 * Math.sqrt(h)
At h=150: drainSpeed ≈ 0.98, so 150/0.98 ≈ 153 frames ≈ 2.5 seconds
At h=50: drainSpeed ≈ 0.57, so slows down nicely

That's reasonable. Let me use something like 0.06-0.08.

For the jet particles:
- Spawn rate: proportional to drain rate
- Initial velocity: based on sqrt(h), scaled
- vx = 2 + 0.15 * sqrt(h) (horizontal, exiting tank)
- Particles affected by gravity

Let me think about particle count. Each frame, I might spawn 3-5 particles. Over 150 frames, that's 450-750 particles. I'll give them a lifetime of ~60-80 frames (1-1.3 seconds), so we'd have about 300-500 active at a time. That should be fine for canvas.

Actually, let me be a bit more conservative with particles to keep performance good. I'll spawn 2-3 particles per frame and give them 80-frame lifetimes.

OK, let me actually write the code now. I've spent too long planning.

Let me think about the object system:

```javascript
class GameObject {
  constructor(x, y, type) {
    this.x = x;
    this.y = y;
    this.type = type; // 'rock', 'toy', 'plant', 'fish'
    this.vx = 0;
    this.vy = 0;
    this.ax = 0;
    this.ay = 0;
    this.mass = ...;
    this.size = ...;
    this.density = ...;
    this.inWater = true;
    this.rotation = 0;
    // ...
  }
}
```

For each type:
- Rock: mass=20, density=2.5, sinks, rests on bottom
- Toy: mass=5, density=0.3, floats
- Plant: attached to bottom, bends with current
- Fish: mass=1, density≈1, swims actively

Let me think about how to handle the tank boundaries:
- Objects inside tank: x between 280+wall and 600-wall, y between 120+wall and 550
- When object is pushed toward breach by current: if it crosses x=600+wall, it's outside the tank
- The opening is at the crack position on the right wall

For objects outside the tank:
- They're on the floor (y >= floorY - size/2)
- They might be in the puddle (affected by puddle flow)
- Or they're in air (gravity, air drag)

Let me think about the floor:
- Floor is at y=550 (tank bottom) and y=560 (room floor, outside tank)
- Actually, let me make the room floor at y=550, same as tank bottom
- The tank sits on the floor

Wait, the tank top is at y=120, height 430, so bottom at y=550. Room floor at y=550 too.

Let me set:
- Floor at y = 560 (tank bottom at y=550, floor board on top)
- Inside tank, objects rest on y=550
- Outside tank, objects rest on y=560

Actually, let me simplify: floor at y=550 for both inside and outside.

OK let me just start coding. I'll iterate on the constants.

Here's my plan for the code structure:

```javascript
// Canvas setup
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Configuration
const CONFIG = {
  gravity: 0.15,
  tank: { x: 280, y: 100, w: 320, h: 450 },
  wallThickness: 8,
  floorY: 550,
  waterLevel: 370,
  // ...
};

// State
let state = {
  mode: 'setup', // 'setup', 'breaching', 'done'
  waterLevel: 370,
  crackY: 450,
  crackDragging: false,
  objects: [],
  jetParticles: [],
  puddle: { volumes: [], spread: 0 },
  fragments: [],
  elapsed: 0,
};

// Object definitions
function createObjects() { ... }

// Physics
function updateObjects() { ... }
function updateJet() { ... }
function updatePuddle() { ... }
function updateFragments() { ... }

// Rendering
function renderTank() { ... }
function renderWater() { ... }
function renderObjects() { ... }
function renderJet() { ... }
function renderPuddle() { ... }
function renderFragments() { ... }
function renderUI() { ... }

// Main loop
function loop() { ... }

// Event handlers
canvas.addEventListener('mousedown', ...);
canvas.addEventListener('mousemove', ...);
canvas.addEventListener('mouseup', ...);
```

Let me write the full code now. I'll be comprehensive.

Actually, I realize I should think about how to make this look good and work well within the time constraints. Let me focus on the core behaviors and make them solid:

1. ✅ Intact tank with water, fish, rocks, plants, toy
2. ✅ Draggable crack
3. ✅ Breach button → panel breaks, water jets out, waterline falls
4. ✅ Water particles form puddle on floor
5. ✅ Rocks sink, toy floats, plants bend, fish swim
6. ✅ Reset button

Let me write the code now. I'll make it visually appealing with gradients and careful rendering.

Let me think about the visual style:
- Tank: blue-tinted glass with metallic frame
- Water: blue gradient with surface waves
- Fish: colorful, with simple shapes
- Rocks: gray/brown, irregular shapes
- Plants: green, wavy
- Toy: red/yellow boat-like shape
- Puddle: blue, reflective
- Glass fragments: sharp, reflective pieces

For water rendering inside the tank:
- Fill rectangle from bottom to waterLevel with blue color
- Add a wavy surface line
- Transparency for depth effect

For the jet:
- Individual particles (small blue circles)
- They curve down due to gravity
- Fade out over lifetime

For the puddle:
- Ellipse on the floor
- Spreads over time
- Reflective surface

Let me code this now.

Let me also think about the controls. I'll put buttons at the bottom:
- Breach button
- Reset button
- Maybe a title

I'll also add some instructions.

Let me write the code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aquarium Breach Simulation</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #1a1a2e;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: #eee;
  }
  canvas {
    display: block;
    background: #1a1a2e;
  }
  #ui {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
  }
  button {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 28px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  }
  button:hover {
    background: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5);
  }
  button:disabled {
    background: #475569;
    cursor: not-allowed;
    transform: none;
  }
  #title {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: 600;
    color: #38bdfa;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
    z-index: 10;
  }
  #instructions {
    position: fixed;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #94a3b8;
    z-index: 10;
  }
</style>
</head>
<body>
  <div id="title">Aquarium Breach Simulation</div>
  <div id="instructions">Drag the crack on the right side of the tank, then click Breach. Click Reset to restart.</div>
  <canvas id="canvas" width="1200" height="800"></canvas>
  <div id="ui">
    <button id="breachBtn">Breach</button>
    <button id="resetBtn">Reset</button>
  </div>
  <script>
    // Full simulation code here
  </script>
</body>
</html>
```

Now let me write the JavaScript. This is the big part.

```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Configuration
const CONFIG = {
  gravity: 0.18,
  waterDensity: 1.0,
  tank: { x: 280, y: 100, w: 320, h: 450 },
  wallThickness: 8,
  get floorY() { return this.tank.y + this.tank.h; },  // 550
  get rightWall() { return this.tank.x + this.tank.w; },  // 600
  get leftWall() { return this.tank.x; },  // 280
  waterLevel: 370,
  waterLevelMin: 370,
  waterLevelMax: 370,
};

// ... rest of code
```

Let me think about the objects more carefully. I'll define them as a list of objects with properties.

Actually, let me think about what makes this simulation compelling:

1. **The water jet** - This is the visual centerpiece. Particles should clearly show the parabolic trajectory.
2. **The falling waterline** - Clear visual of water level dropping.
3. **Panel breaking** - Glass fragments flying out.
4. **Object responses** - Rocks sinking, toy floating, fish swimming.
5. **Puddle spreading** - Water accumulating on floor.

Let me think about the rendering more carefully.

For the tank:
- Draw a frame around the tank (metal edges)
- Draw glass walls (transparent blue)
- The right wall is the breakable panel
- Draw substrate at the bottom (sand/gravel)

For water:
- When intact: blue rectangle filling the tank
- When breached: water level drops, blue rectangle shrinks
- Surface: wavy line

For objects inside water:
- Draw them with appropriate water effects (refraction lines, etc.)

For the jet:
- Blue-white particles, fading
- They curve down

For fragments:
- Sharp polygon shapes
- Rotating
- Falling

For puddle:
- Blue ellipse on floor
- Spreading animation

Let me think about the fish specifically. Fish should:
- Swim in their own direction normally
- When current is detected, turn to swim against it
- If swept near breach, get carried through
- After going through, swim in the puddle

For fish movement, I'll give each fish:
- A target direction
- A swim speed
- A current awareness (they detect water flow and swim against it)

When the breach happens:
- Current flows toward the breach
- Fish near the breach try to swim away
- If current > fish swim speed, fish get swept

Let me think about the current field. Inside the tank, the current flows toward the breach. I can compute it as:
- Direction: from center of tank to breach (roughly horizontal, rightward)
- Magnitude: proportional to the jet velocity or drain rate
- Decreases with distance from breach

Actually, let me simplify. The current inside the tank near the breach is the water flowing toward the opening. I'll compute it as:
- At breach position: velocity = jet velocity (scaled down, since it's the water inside moving)
- Falls off with distance

For the fish:
- Normal swim speed: ~0.5 px/frame
- Current speed near breach: up to 1-2 px/frame
- If current > swim speed, fish gets swept

Let me think about how to determine if an object gets carried out through the breach:
- Object must be within the opening area
- Current must be strong enough to carry it
- Object's density matters (light objects more easily carried)

For rocks: too heavy, won't be carried out
For toy: light, might be carried if near breach
For fish: can swim to avoid, but some get swept
For plants: attached, bend with current

Let me now actually write the code. I'll aim for a complete, working implementation.

Let me think about the data structures more carefully.

```javascript
// Objects
const objects = {
  rocks: [
    { x, y, size, mass, vx, vy, ... },
    ...
  ],
  toy: { x, y, size, mass, vx, vy, ... },
  plants: [
    { baseX, baseY, height, segments, ... },
    ...
  ],
  fish: [
    { x, y, size, speed, direction, ... },
    ...
  ],
};
```

Actually, let me use a unified array for movable objects and separate handling for attached ones (plants).

Let me think about the update loop. Each frame:
1. Handle input (crack dragging)
2. Update physics:
   a. Water level (if breaching)
   b. Jet particles
   c. Objects (buoyancy, drag, current, gravity)
   d. Fragments
   e. Puddle
3. Handle boundaries and collisions
4. Render

Let me think about the water level update:
```javascript
function updateWaterLevel(dt) {
  if (state.mode === 'breaching') {
    let h = state.waterLevel - state.crackY;
    if (h > 0) {
      let drainSpeed = 0.06 * Math.sqrt(h);  // tuned constant
      state.waterLevel -= drainSpeed;
      
      // Spawn jet particles
      let jetVel = 0.15 * Math.sqrt(h);
      for (let i = 0; i < 3; i++) {
        state.jetParticles.push({
          x: CONFIG.rightWall - CONFIG.wallThickness,
          y: state.crackY + (Math.random() - 0.5) * 12,
          vx: 3 + jetVel + (Math.random() - 0.5) * 2,
          vy: (Math.random() - 0.5) * 0.5,
          life: 80,
          maxLife: 80,
          size: 3 + Math.random() * 2,
        });
      }
    }
  }
}
```

For object physics in water:
```javascript
function applyWaterPhysics(obj) {
  let inWater = obj.y + obj.size/2 < state.waterLevel;
  
  if (inWater) {
    // Buoyancy
    let submergedDepth = Math.min(obj.size, state.waterLevel - (obj.y - obj.size/2));
    let buoyancy = obj.buoyancyFactor * (submergedDepth / obj.size);
    obj.vy -= buoyancy * CONFIG.gravity;
    
    // Drag
    let currentVel = computeCurrent(obj.x, obj.y);
    let relVelX = obj.vx - currentVel.x;
    let relVelY = obj.vy - currentVel.y;
    obj.vx -= relVelX * 0.02;
    obj.vy -= relVelY * 0.02;
  } else {
    // Air
    obj.vy += CONFIG.gravity;
    obj.vx *= 0.98;
    obj.vy *= 0.98;
  }
  
  // Current pushes objects
  obj.vx += currentVel.x * 0.3;
  obj.vy += currentVel.y * 0.3;
  
  // Update position
  obj.x += obj.vx;
  obj.y += obj.vy;
  
  // Floor collision
  if (obj.y + obj.size/2 > CONFIG.floorY) {
    obj.y = CONFIG.floorY - obj.size/2;
    obj.vy *= -0.3;
    obj.vx *= 0.8;
  }
}
```

Hmm, this is getting complex. Let me simplify the physics model to make it manageable but still visually correct.

Let me think about what's essential:

1. **Water level falling** - simple: just lower waterLevel over time
2. **Jet particles** - simple: spawn at crack, horizontal velocity, gravity
3. **Objects in water** - need buoyancy, drag, current
4. **Objects transition** - when water level drops below object, it's in air
5. **Puddle** - simple: spread ellipse
6. **Fragments** - simple: spawn at crack, fly out, gravity, rotation

Let me write a cleaner version. I'll use a component-based approach with a single objects array.

Actually, let me think about this more carefully and write a well-structured implementation.

Here's my refined plan:

**State:**
- mode: 'setup' | 'breaching' | 'settled'
- waterLevel: number (y-coordinate)
- crackY: number (y-coordinate of crack)
- crackDragging: boolean
- objects: array of all movable objects (rocks, toy, fish)
- plants: array of plant objects (attached)
- jetParticles: array of water particles
- fragments: array of glass pieces
- puddleVolume: number (accumulating)
- puddleSpread: number (how wide the puddle has spread)

**Objects (movable):**
Each object has:
- x, y, vx, vy
- type: 'rock' | 'toy' | 'fish'
- size (radius or dimension)
- mass
- density (relative to water)
- inWater: boolean
- rotation, rotationSpeed
- Additional type-specific properties

**Plants:**
Each plant has:
- baseX, baseY (fixed point on bottom)
- height
- segments (array of points for wavy bending)
- flexibility

**Jet particles:**
- x, y, vx, vy
- life, maxLife
- size

**Fragments:**
- x, y, vx, vy
- rotation, rotationSpeed
- size, shape
- inWater

Let me think about how to determine if an object is in water:
- If the object's bottom is above the water level → in water
- If the object's top is below the water level → out of water
- Partial submersion needs buoyancy calculation

Actually, let me simplify:
- An object is "in water" if its center y is above the water level
- When in water: apply buoyancy, drag, current
- When out of water: apply gravity, air drag
- When an object exits the tank through the breach: it's out of water and in air

For the transition (water level dropping below object):
- When water level rises above an object's center, it becomes "in water"
- Wait, water level drops (y increases), so when waterLevel > obj.y, the object is out of water

Actually, waterLevel is a y-coordinate. When waterLevel = 370, water fills from floorY (550) up to 370. An object at y=400 is in water (below water level). An object at y=350 is above water (floating or in air).

Let me be more precise:
- Water fills from y=floorY (550) to y=waterLevel (370)
- An object is in water if its y position is between 370 and 550
- When waterLevel drops to, say, 500, objects above y=500 are in air

For buoyancy:
- If object density < 1 (water density): floats
- If object density > 1: sinks
- The buoyancy force is proportional to the submerged volume

For a floating object (toy, density 0.3):
- It floats at the surface
- waterLevel - obj.y = some small value
- The toy's position is constrained to be at waterLevel

For a sinking object (rock, density 2.5):
- It sinks to the bottom
- Rests on floorY
- When in water, it slowly sinks (drag makes it slow)
- When water drains, if it's exposed (water level below it), it just sits on the bottom

For fish:
- They swim actively
- They can control their position
- Near current, they fight it
- Their density is ~1 (neutral buoyancy)

Let me think about the current more carefully. The current is the water flowing toward the breach. Inside the tank:
- Near the breach (right side), water flows strongly outward/rightward
- Near the left side, current is weaker
- The current decreases as water level drops

I'll compute the current velocity at a point as:
- Direction: horizontal, rightward (toward breach)
- Magnitude: proportional to the jet velocity (sqrt(h)), decreasing with distance from breach
- Only applies when water is above the point

```javascript
function computeCurrent(x, y) {
  let h = state.waterLevel - state.crackY;
  if (h <= 0) return { x: 0, y: 0 };
  
  // Only in water
  if (y > state.waterLevel) return { x: 0, y: 0 };
  
  // Distance from breach
  let dx = x - (CONFIG.rightWall - CONFIG.wallThickness);
  let distFromBreach = Math.max(0.1, Math.abs(dx));
  
  // Current magnitude (stronger near breach)
  let strength = 0.1 * Math.sqrt(h) * (1 / Math.sqrt(distFromBreach));
  strength = Math.min(strength, 1.5);  // cap it
  
  // Direction: toward breach (rightward for objects left of breach)
  let dirX = dx < 0 ? 1 : -1; // toward breach
  
  return { x: dirX * strength, y: 0 };
}
```

Hmm, this is getting complicated. Let me simplify the current model.

For objects inside the tank:
- The current is a horizontal flow toward the breach
- Strength is strongest near the breach and weak overall
- I'll use a simple exponential decay from the breach

Let me just code it up now. I've been overthinking the physics. Let me write a practical implementation.

Let me also think about how the glass fragments work:
- When breach is triggered, the right wall breaks
- Fragments are created at the crack position
- They fly outward (rightward and falling)
- In water: more drag
- In air: less drag, just gravity

The panel breaking: I'll create 8-12 fragment polygons at the crack position, each with random velocity and rotation.

For the puddle:
- When jet particles hit the floor, they add to puddle volume
- Puddle spreads: width = k * sqrt(volume)
- Constrained by room walls (x=0 and x=canvasWidth)
- The puddle forms at the point where the jet hits the floor

The jet hits the floor at some x > rightWall. Let me compute:
- Jet exits at (rightWall, crackY) with velocity vx
- Gravity curves it down
- It hits floor at y=floorY
- Time to fall: t = (floorY - crackY) / (vy + g*t)... actually, the jet starts with some vy=0 (horizontal), so:
  - y(t) = crackY + 0.5 * g * t² (since vy starts at 0)
  - floorY = crackY + 0.5 * g * t²
  - t = sqrt(2*(floorY-crackY)/g)
  - x at impact = rightWall + vx * t

With crackY=450, floorY=550, g=0.18:
- t = sqrt(2*100/0.18) = sqrt(1111) ≈ 33 frames
- If vx = 5 px/frame, impact at x = 600 + 5*33 = 765

So the puddle starts around x=765 and spreads outward.

For the puddle width: I'll make it grow with accumulated volume.
- puddleVolume increases when particles hit floor
- puddleRadius = sqrt(puddleVolume * someConstant)
- Constrain to room walls

Let me also think about objects carried by the puddle. The puddle water flows outward from the impact point, so objects in the puddle might be pushed. But this is secondary - let me focus on the main behaviors.

OK, I'm going to write the code now. Let me create a comprehensive implementation.

Let me think about the overall structure of the code:

```javascript
// === SETUP ===
// Canvas, config, state initialization

// === OBJECTS ===
// Create rocks, toy, plants, fish

// === INPUT ===
// Mouse events for crack dragging

// === PHYSICS ===
// Water level, jet, objects, fragments, puddle

// === RENDERING ===
// Tank, water, objects, jet, puddle, fragments, UI

// === MAIN LOOP ===
// Update and render
```

Let me write it all now. I'll make it detailed and well-commented.

One more thing - I need to think about the crack visualization. When in setup mode:
- Draw a visible crack/gap on the right wall
- The user can drag it vertically
- Show a visual indicator (highlight, line, etc.)

When dragging:
- The crack follows the mouse
- Constrained to the range [waterLevel+10, tankBottom-10]

Let me think about the crack rendering:
- Draw a vertical dark line/gap on the right wall
- Maybe some crack lines radiating from it
- Highlight the draggable area

For the breach transition:
- Panel shatters into fragments
- Particles spawn at crack position
- Water starts flowing out

Let me finalize and write the code.

Actually, let me think about one more thing: the "Breach" button behavior.
- In setup mode: button says "Breach" and is enabled when a crack is placed
- When clicked: switches to breaching mode, breaks the panel
- After breach: button says "Reset" (or Reset is a separate button)

I have two buttons: "Breach" and "Reset".
- Breach: triggers the breach
- Reset: restores initial state

Let me think about the modes:
1. 'setup' - crack can be dragged, Breach button enabled
2. 'breaching' - water flowing, objects moving, panel broken
3. 'settled' - water drained (or stopped), things resting
4. Reset: goes back to 'setup'

OK, let me write the full code now. I'll be thorough.

Let me think about one important detail: the water surface rendering. When water is in the tank, I need to show the water surface. As water drains, the surface drops. I should show:
- The water fill area (blue rectangle from floor to waterLevel)
- A surface line (wavy)
- Maybe some foam/movement at the surface

For the jet exiting the tank: the water at the crack position should show the jet. I'll draw particles emerging from the crack.

Let me also think about what happens when the water level drops below the crack. The outflow should stop. But there might be a little residual (water at the crack level flowing out). For simplicity, I'll stop the jet when waterLevel <= crackY.

Wait, actually, the water level drops toward the crack from above. When waterLevel reaches crackY, the flow should stop (no more water above the opening). But I also need to handle the case where the water level is above the crack but very close.

Let me code the water level update as:
```javascript
if (state.mode === 'breaching') {
  let h = state.waterLevel - state.crackY;
  if (h > 1) {  // at least a little water above crack
    let drainSpeed = 0.055 * Math.sqrt(h);
    state.waterLevel -= drainSpeed;
    // spawn jet particles
  }
  // When h <= 0, no more flow
}
```

OK, let me write the complete code now. I'm going to write it all at once.

Let me think about how to make the fish look good. I'll draw them as simple fish shapes:
- Ellipse body
- Triangle tail fin
- Small triangle mouth
- Maybe an eye dot

For different fish, different colors.

For rocks: irregular polygon shapes, gray/brown colors.

For plants: green wavy lines, segmented.

For the toy: a simple boat-like shape (triangle hull with rectangle mast).

For the tank: 
- Metal frame (silver)
- Glass walls (transparent, slightly blue tinted)
- The right wall is the breakable panel

For the room:
- Floor: gray concrete
- Walls: dark gray
- Maybe some room boundary lines

Let me think about the scene composition:

Tank:
- Position: x=280, y=100, w=320, h=450
- So tank spans from (280, 100) to (600, 550)
- Water fills from y=550 (bottom) to y=370 (surface)

Room:
- Floor at y=560 (slightly below tank bottom for a baseboard)
- Room extends from x=0 to x=1200

Objects inside tank:
- Rocks at the bottom (y near 530-540)
- Plants attached to bottom (base at y=540, growing up to y=380)
- Fish swimming around (y=380-520)
- Toy floating at y=365 (just below water surface)

Let me think about the plant rendering. Each plant:
- Base at bottom of tank (y≈540)
- Height: ~120-150 pixels
- Grows up to about y≈400
- Segments for wavy bending
- When current flows, bends toward the right

For plant bending:
- Each segment has an angle
- Current applies a torque
- The plant bends more near the top
- When not breaching, slight random movement

Let me think about how to render a plant:
- Draw a series of connected circles or a wavy line
- The base is fixed
- Each segment can bend
- Use sine wave for natural movement

Actually, for simplicity, I'll draw plants as wavy lines with several segments. Each segment can be displaced by the current.

Let me think about the physics for plants:
- Base is fixed at bottom
- Each segment above has a target position
- Current pushes segments
- Spring-like return to original position

```javascript
function updatePlants() {
  for (let plant of state.plants) {
    for (let i = 0; i < plant.segments.length; i++) {
      let seg = plant.segments[i];
      let current = computeCurrent(seg.x, seg.y);
      
      // Apply current force
      seg.bendX += current.x * 0.05;
      
      // Spring back
      seg.bendX *= 0.92;
      
      // Random gentle movement
      if (state.mode === 'setup') {
        seg.bendX += (Math.random() - 0.5) * 0.2;
      }
    }
  }
}
```

OK, I think I have enough detail. Let me write the complete code.

Let me also think about the "fish initially swim against the current before some are swept through the breach" behavior. This means:
1. When breach happens, fish detect the current
2. Fish swim against the current (toward the left side of tank)
3. Some fish near the breach get swept through

For fish AI:
```javascript
function updateFish(fish) {
  let current = computeCurrent(fish.x, fish.y);
  
  // Try to swim against current
  if (Math.abs(current.x) > 0.1) {
    fish.targetDir = -Math.sign(current.x);
  }
  
  // Check if current is too strong
  if (Math.abs(current.x) > fish.swimSpeed * 1.5) {
    // Swept by current
    fish.swept = true;
  }
  
  if (!fish.swept) {
    // Normal swimming
    fish.vx += fish.targetDir * fish.swimSpeed;
    fish.vx *= 0.95; // drag
  } else {
    // Being swept
    fish.vx += current.x * 0.5;
    fish.vx *= 0.92;
  }
  
  // Check if fish exits through breach
  if (fish.x > CONFIG.rightWall && state.mode === 'breaching') {
    fish.inTank = false;
  }
  
  // Update position
  fish.x += fish.vx;
  fish.y += fish.vy;
  
  // Boundary checking
  // ...
}
```

This is a simplified model but should capture the behavior.

Let me think about the "movable objects that fit the opening can be carried out by the flow" requirement. The opening is the crack. Objects that are small enough can be carried through. Larger objects can't.

I'll check:
- If object is within a certain x range of the breach
- If water level is above the object
- If the object is small enough to fit through
- Then apply strong current to carry it out

For the toy: it's large, might not fit through a small crack
For fish: they're small, can be carried through
For rocks: too heavy, can't be carried

Actually, the crack is the full height of the draggable range. The "opening" is the crack width (some thickness). Let me make the crack have a visual width of about 10-15 pixels.

Objects that fit through the opening: fish (small), small rocks? No, rocks are heavy. The toy is light but large.

Let me define:
- Opening width: ~12 pixels
- Objects that can fit: fish (size ~15), toy (size ~40, too large)
- So mainly fish get carried through

Actually, let me make the toy able to be carried through if it gets close enough to the breach. The toy is light (low density), so the current can push it. But it's large, so it might not physically fit through a narrow opening.

Let me make the opening reasonable: the crack goes through the full wall thickness, so the opening is the wall thickness (~8 pixels). Objects smaller than this can be carried through.

Hmm, that's too small. Let me make the crack have a visual gap of about 15-20 pixels through which objects can pass.

Actually, for gameplay purposes, let me make it so:
- Fish can be swept through
- Toy can be swept through if it's near the breach
- Rocks stay
- Plants bend but don't break free (unless the current is very strong)

Let me just make the opening wide enough for small objects. I'll set the "passable opening" to be about 15 pixels wide.

OK, I'm going to write the code now. Let me be comprehensive but not spend more time planning.

Let me also think about the initial setup. In the setup mode:
- Tank is intact (right wall is solid glass)
- Water is at initial level (370)
- Objects are in their initial positions
- Cracks can be dragged
- Breach button is enabled

When Breach is clicked:
- Mode changes to 'breaching'
- Right wall panel breaks into fragments
- Water starts flowing out
- Objects start responding to current
- Jet particles start spawning

When water level reaches crack or objects settle:
- Mode changes to 'settled'

When Reset is clicked:
- Everything goes back to initial state

Let me write this now. Here's my complete implementation:

Actually, let me think about one more thing. The problem says "drag a visible crack vertically on one side below the initial waterline." This means the crack is initially visible (maybe a default position) and can be dragged. When I say "crackY" in the setup, it should have a default position, say y=450.

Also, I should make sure the crack is always below the water line. The constraint is waterLevel < crackY < floorY. So crackY is between 370 and 550, constrained to be below 370.

Wait, "below the initial waterline" means the crack is below the water surface. Water surface is at y=370 (measured from top). Below means higher y values. So crackY should be > 370, and < 550 (bottom).

So crackY range: 380 to 530 (with some margin).

OK, let me write the code now. For real this time.

Let me think about the rendering of the tank and the breakable panel:

In setup mode:
- Draw the right wall as a solid piece of glass
- Draw a crack line/gap at crackY position (visible, draggable)

When breach happens:
- The right wall breaks
- Draw fragments instead of solid wall
- The crack becomes an opening

For the crack visualization in setup mode:
- Draw the right wall
- Draw a crack (zigzag line) at crackY
- Show a drag handle/grip

Let me think about how the user interacts:
1. User sees the tank with water and a visible crack on the right side
2. User clicks and drags the crack up/down
3. User clicks "Breach"
4. Simulation runs

The crack should be visually distinct - maybe a darker line with some cracks radiating.

For the drag interaction:
- Mouse down on the crack area → start dragging
- Mouse move → update crackY
- Mouse up → stop dragging
- Constrain crackY to [waterLevel+10, floorY-10]

Let me code this now. I'll write the complete HTML file.

Actually, one important thing: I need to handle the case where the user hasn't placed a crack when clicking Breach. I'll either:
- Disable Breach until a crack is placed
- Use a default crack position

I'll use a default crack position and always have one visible. The Breach button is always enabled.

Let me write the code. I'll aim for about 400-500 lines of JavaScript.

Let me think about the constants and make them work together:

Gravity: 0.18 px/frame²
- This means at 60 FPS, an object falls 0.18 * 3600 = 648 px/s²
- That's reasonable (a bit more than half Earth gravity)

Water drain rate:
- drainSpeed = 0.05 * sqrt(waterLevel - crackY)
- At h=120: drainSpeed ≈ 0.55 px/frame = 33 px/s
- To drain 120 pixels: ~220 frames ≈ 3.7 seconds
- That's a reasonable speed

Jet velocity:
- jetVel = 4 + 0.12 * sqrt(h)
- At h=120: jetVel ≈ 4 + 1.3 = 5.3 px/frame = 318 px/s
- Jet particles take about 30-40 frames to hit floor (100px drop)
- Horizontal distance: 5.3 * 35 ≈ 185 px
- So jet ends around x=600+185=785

Particle spawn rate:
- 3 particles per frame when actively draining
- Lifetime: 80 frames (about 1.3 seconds)
- At any time: ~240 particles

That should look good visually.

For the puddle:
- Volume accumulates from jet particles hitting floor
- Spread rate: proportional to sqrt(volume)
- Max spread constrained by room walls

Room: x=0 to x=1200
- Puddle starts at ~785 and spreads in both directions
- Left spread limited by tank (x=600)
- Right spread limited by room wall (x=1200)

Actually, the puddle would spread from the impact point. Since water is flowing out, it would pool around the impact point. Let me make it spread from impact point to the right (away from tank) primarily, with some spread to the left.

Let me simplify: puddle center at impact point, radius = sqrt(volume * constant). Constrained to [tankRight + 5, roomRight - 5].

OK, let me write the code now. I'm going to do it all at once.

Let me think about the overall flow of the code:

```javascript
// === CONFIGURATION ===
const CONFIG = { ... };

// === STATE ===
let state = { ... };

// === INITIALIZATION ===
function init() { ... }

// === OBJECT CREATION ===
function createRocks() { ... }
function createToy() { ... }
function createPlants() { ... }
function createFish() { ... }

// === INPUT HANDLING ===
function setupEventListeners() { ... }

// === PHYSICS UPDATE ===
function update(dt) { ... }
function updateWater() { ... }
function updateJetParticles() { ... }
function updateObjects() { ... }
function updatePlants() { ... }
function updateFragments() { ... }
function updatePuddle() { ... }

// === RENDERING ===
function render() { ... }
function renderRoom() { ... }
function renderTank() { ... }
function renderWater() { ... }
function renderObjects() { ... }
function renderPlants() { ... }
function renderPuddle() { ... }
function renderJet() { ... }
function renderFragments() { ... }
function renderUI() { ... }

// === MAIN LOOP ===
function loop() { ... }

// === EVENT HANDLERS ===
function onBreach() { ... }
function onReset() { ... }

// Start
init();
loop();
```

Let me now write the actual implementation. I'll be detailed and make sure all behaviors work.

Let me think about one more important detail: the fragments. When the panel breaks, I need to create fragments that:
1. Are positioned where the panel was (the right wall)
2. Fly outward (rightward)
3. Some rotate
4. Experience water resistance if in water (below water line)
5. Fall due to gravity
6. Hit the floor and settle

The panel is at the right wall of the tank (x=600, width=8). I'll break it into pieces centered around the crack position.

```javascript
function createFragments(crackY) {
  let wallX = CONFIG.rightWall;
  let wallY = CONFIG.tank.y; // top of tank
  let wallH = CONFIG.tank.h;  // height of tank
  
  // Create fragments around the crack
  for (let i = 0; i < 12; i++) {
    let fragY = crackY - 30 + Math.random() * 60;
    let fragX = wallX + Math.random() * 8;
    let angle = Math.random() * Math.PI * 2;
    let speed = 2 + Math.random() * 4;
    
    state.fragments.push({
      x: fragX,
      y: fragY,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      rotation: Math.random() * Math.PI * 2,
      rotationSpeed: (Math.random() - 0.5) * 0.15,
      size: 8 + Math.random() * 6,
      inWater: fragY < state.waterLevel,
    });
  }
}
```

The fragments should have irregular shapes. I'll draw them as small polygons.

For fragment physics:
- In water: high drag, some float/sink depending on density
- In air: gravity, low drag
- Floor collision

Let me think about fragment rendering. Each fragment is a small irregular polygon. I'll draw it as a rotated rectangle with some variance.

```javascript
function renderFragment(frag) {
  ctx.save();
  ctx.translate(frag.x, frag.y);
  ctx.rotate(frag.rotation);
  ctx.fillStyle = 'rgba(173, 216, 230, 0.7)'; // light blue, glass-like
  ctx.strokeStyle = 'rgba(200, 220, 255, 0.9)';
  ctx.lineWidth = 1;
  
  // Irregular shape
  ctx.beginPath();
  let r = frag.size / 2;
  ctx.moveTo(-r + (Math.random()-0.5)*2, -r + (Math.random()-0.5)*2);
  // ... draw polygon
  ctx.fill();
  ctx.stroke();
  ctx.restore();
}
```

Actually, for a cleaner look, I'll draw fragments as rotated rectangles with some random vertex offsets to make them look like broken glass.

OK, let me actually write the code now. I've been planning for too long. Let me create the file.

Let me think about one final thing: the toy. The toy should:
- Float on the water surface
- When water level drops, it floats down with the water
- When near breach, it might be pushed by current
- If it gets past the opening, it falls into the puddle/onto the floor

For the toy as a floating object:
```javascript
function updateToy(toy) {
  if (toy.inWater) {
    // Float at water surface
    toy.y = state.waterLevel - toy.size/2;
    // Apply current
    let current = computeCurrent(toy.x, toy.y);
    toy.vx += current.x * 0.5;
    toy.vx *= 0.9; // drag
  } else {
    // In air
    toy.vy += CONFIG.gravity;
    toy.vx *= 0.98;
  }
  
  toy.x += toy.vx;
  toy.y += toy.vy;
}
```

Actually, the toy floating at the surface is nice. As the water level drops, the toy drops with it. That's a good visual.

But the toy should also be able to be pushed by the current toward the breach. If it reaches the opening, it can be carried out.

For the toy to be carried out:
- It needs to reach the right wall at the crack position
- The current needs to push it through
- Since it floats at the surface, and the current is near the surface, it should be affected

Let me also think about the toy's size. If it's too big, it can't go through the opening. Let me make the opening large enough relative to the toy, or make the toy small enough.

Actually, the crack is a gap in the wall. The gap is at crackY and has some height (maybe 20-30 pixels). The toy is about 40x40 pixels. So the toy can fit through if the crack is tall enough.

Hmm, let me think about this. The crack is a vertical gap. Let me make it about 25 pixels tall. Objects shorter than 25 pixels can pass through. The toy at 40 pixels can't. Fish at ~15 pixels can.

But the problem says "movable objects that fit the opening can be carried out by the flow." So the toy might not fit, but fish do.

Wait, let me re-read: "Movable objects that fit the opening can be carried out by the flow." This implies that small objects can be carried out. The toy might be too large. But the toy is supposed to float. Let me make the toy float and possibly be carried if it reaches the breach, even if it's a tight fit.

Actually, let me make the crack height variable. The crack is a gap that the user drags. The height of the gap is... hmm, the crack is a point that the user drags. The opening is at that point. Let me make the opening height about 30 pixels to allow small objects but not the toy.

Or I could make it simpler: any object that reaches the breach opening gets carried out if the current is strong enough and the object is small enough.

Let me define:
- Opening height: 30 pixels (vertical range around crackY)
- Objects with size < 30 can be carried through
- Toy (size 40): can't fit, but might get close
- Fish (size 15): can be carried through
- Rocks (size 20): might be carried if very light, but rocks are heavy

So mainly: fish get carried through the breach. The toy floats and might get pushed around but stays in the tank (until water drains enough). The rocks stay at the bottom.

Actually, wait. Let me re-read the requirement: "fish initially swim against the current before some are swept through the breach." So yes, fish are the ones swept through.

And: "Movable objects that fit the opening can be carried out by the flow." This is a general statement - any object that fits can be carried. Rocks are heavy so they don't get carried. The toy is large so it might not fit. Fish are small and get carried.

Let me make the opening height 30 pixels and check object size against it.

Let me also think about what happens to the toy after the water drains. It would sink? No, it floats. It would float on the remaining water. When all water is gone from the tank, the toy would rest on the bottom or fall.

Actually, the toy floats on water. When water drains below the toy's position, the toy falls (gravity). It would fall to the bottom of the tank.

Wait, the toy is floating at the water surface. As water drains, the toy descends. When water level reaches the bottom, the toy falls to the bottom.

Hmm, but the toy floats, so it would stay on the water surface until the water is gone. Then it falls to the bottom (or to the floor if the tank is damaged).

Let me handle this: if the toy is in water and water level is above the tank bottom, it stays at the water surface. If water level drops to the bottom, the toy transitions to falling (gravity).

OK, I think I have enough understanding. Let me write the code now.

Let me think about one more thing: the overall animation timing. I want:
1. Setup: static scene, user can drag crack
2. Breach trigger: immediate panel break + fragments
3. Breach: water flows for 4-5 seconds, objects respond
4. Settle: water drained, objects at rest, puddle formed

The whole breach sequence should take about 8-10 seconds (water draining + settling).

Let me now actually write the code. I'll create the index.html file with everything inlined.

Let me structure the code clearly:

```javascript
// ===== CONFIGURATION =====
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width;   // 1200
const H = canvas.height;  // 800

const GRAVITY = 0.18;
const WATER_DENSITY = 1.0;

const TANK = {
  x: 280, y: 100, w: 320, h: 450,
  wall: 8,
};
const FLOOR_Y = TANK.y + TANK.h;  // 550
const ROOM_FLOOR = 560;  // slightly below tank

// ===== STATE =====
const state = {
  mode: 'setup',
  waterLevel: 370,
  initialWaterLevel: 370,
  crackY: 450,
  crackDragging: false,
  objects: [],  // rocks, toy, fish
  plants: [],
  jetParticles: [],
  fragments: [],
  puddleVolume: 0,
  puddleSpread: 0,
  puddleX: 0,  // center of puddle on floor
  time: 0,
};

// ===== INIT =====
function init() { ... }

// ===== OBJECTS =====
function createInitialObjects() { ... }

// ===== PHYSICS =====
function update(float dt) { ... }

// ===== RENDER =====
function render() { ... }

// ===== LOOP =====
function loop() { ... }

init();
loop();
```

OK, let me write the full code now. I'll be comprehensive.

Actually, I'm going to write the code directly into the file. Let me think through each section carefully.

**Configuration:**
- Canvas: 1200x800
- Tank: x=280, y=100, w=320, h=450, wall=8
- Floor: y=550
- Room floor: y=555 (just below tank for baseboard)
- Water level: y=370 (depth 180 from surface to bottom)
- Gravity: 0.18
- Crack range: y=390 to y=520 (below water line)

**Objects:**
Rocks (3):
- Positioned at bottom, different sizes
- Density: 2.5 (sinks)
- Mass proportional to size²

Toy (1):
- Floating at water surface
- Density: 0.3 (floats)
- Size: 36

Plants (4):
- Attached to bottom
- Height: 120-160
- Flexibility: bends with current

Fish (6):
- Different sizes, colors
- Swim speed: 0.6-0.8
- Active swimming

**Physics details:**

Water drain:
- h = waterLevel - crackY
- if h > 0: drain
- drainRate = 0.05 * sqrt(h)
- waterLevel -= drainRate
- spawn jet particles: count = 2 + floor(drainRate * 0.5), velocity = 3 + 0.12 * sqrt(h)

Current field:
- In water (y < waterLevel): horizontal flow toward breach
- magnitude = 0.8 * sqrt(h) * exp(-distFromBreach / 150)
- direction: rightward (toward breach on right wall)
- cap at 2.0

Object physics:
- In water: buoyancy + drag + current
- Out of water: gravity + air drag
- Floor collision
- Tank wall collision (except through breach)

Fish AI:
- Normal: swim in current direction, wander
- Near breach: swim away from breach
- If current > swim speed: swept
- When swept and near breach: carried through

Let me think about the current field more carefully. The water inside the tank flows toward the breach. But it's not a uniform flow - it's stronger near the breach and weaker elsewhere.

For a fish at position (fx, fy):
- distX = fx - (TANK.x + TANK.w)  // distance from right wall
- currentStrength = 0.8 * sqrt(h) * exp(-|distX| / 100)
- direction: rightward (toward breach)
- The fish swims against this

Wait, I need to be careful with signs. The breach is on the right wall. Fish to the left of the breach experience current pushing them right (toward breach). Fish to the right of the breach (outside) experience current pushing them away (the jet).

Inside the tank: current is rightward (toward breach)
Outside the tank: jet is rightward (away from tank, downward due to gravity)

Let me compute the current inside the tank:
```javascript
function computeCurrent(x, y) {
  // Inside tank, in water
  let insideTank = x >= TANK.x && x <= TANK.x + TANK.w;
  let inWater = y < state.waterLevel;
  
  if (!insideTank || !inWater) return { x: 0, y: 0 };
  
  let h = state.waterLevel - state.crackY;
  if (h <= 0) return { x: 0, y: 0 };
  
  let distFromBreach = (TANK.x + TANK.w) - x;
  if (distFromBreach < 0) distFromBreach = 0;
  
  let strength = 0.7 * Math.sqrt(h) * Math.exp(-distFromBreach / 80);
  return { x: strength, y: 0 };
}
```

Hmm, this makes the current strongest at the breach (right wall) and decaying to the left. That's physically reasonable.

But wait, the current should also be influenced by the fact that water flows toward the breach. Near the breach, the flow converges. Let me keep it simple: current is rightward, strongest near breach.

For the fish:
- Fish swim speed: 0.6 px/frame
- At h=120: current ≈ 0.7 * 11 * exp(-dist/80)
  - At breach (dist=0): current ≈ 7.7 - too strong!
  - At center (dist=160): current ≈ 7.7 * 0.135 ≈ 1.04
  - At left wall (dist=320): current ≈ 7.7 * 0.018 ≈ 0.14

Hmm, that's quite strong. Let me reduce the coefficient:
- strength = 0.15 * sqrt(h) * exp(-dist/80)
- At breach: 1.65
- At center: 0.22
- At left wall: 0.03

Fish swim speed: 0.6
- At center: current 0.22 < swim 0.6 → fish can swim against current
- At breach: current 1.65 > swim 0.6 → fish gets swept

That seems better. Some fish near the center can swim against the current, but fish near the breach get swept.

Actually, I want the fish to initially swim against the current, then some get swept. Let me adjust:
- Fish near the left side: current is weak, they can swim normally
- Fish near the right side: current is strong, they try to swim against it but get swept

Let me tune the coefficient so that:
- At 100px from breach: current ≈ 0.5 (fish can barely swim against)
- At 0px from breach: current ≈ 1.5 (fish gets swept)

With strength = 0.15 * sqrt(h) * exp(-dist/80):
- At dist=100: 0.15 * 11 * 0.287 ≈ 0.47 ✓
- At dist=0: 0.15 * 11 * 1.0 ≈ 1.65 ✓

But h decreases over time. At h=50 (late in breach):
- At dist=0: 0.15 * 7 * 1.0 ≈ 1.05
- At dist=100: 0.15 * 7 * 0.287 ≈ 0.30

So fish are swept early in the breach when current is strong, and can swim back later. That matches "fish initially swim against the current before some are swept through."

Wait, the order is reversed. Initially, the current is strongest (water level is highest). Fish try to swim against it. Some near the breach get swept. As water level drops, current weakens, and fish can swim more freely.

Actually, "initially swim against the current before some are swept through" means:
1. First, fish notice the current and swim against it (away from breach)
2. Then, some fish that are too close to the breach get swept through

So the sequence is:
1. Breach happens → current starts flowing
2. Fish detect current, turn to swim against it (away from breach)
3. Fish near the breach can't escape fast enough, get swept through
4. Remaining fish either escape or are in the tank with lower water

This is what my model does. Good.

Let me also think about what happens to fish that get swept through:
- They exit the tank through the breach
- They're now in the puddle/pool on the floor
- They swim in the puddle (which is shallow water on the floor)
- Or they flop on the floor (if puddle is too shallow)

For simplicity, I'll have swept fish swim in the puddle area.

OK, let me now write the code. I'll create the complete file.

Let me also think about the puddle. The puddle:
- Forms where the jet hits the floor
- Spreads over time
- Accumulates volume from jet particles
- Depth increases with volume
- Width increases with sqrt(volume)

I'll render the puddle as a blue ellipse on the floor:
- Center x: where jet typically hits (~780)
- But actually, the jet hits at different points depending on crackY and water level
- Let me track the "puddle center" as the average impact point

Actually, let me simplify. The puddle center is at the impact point of the jet. I'll compute it dynamically or just fix it at approximately where the jet hits.

The jet exits at (TANK.rightWall - TANK.wall, crackY) ≈ (592, crackY).
It curves down and hits the floor at some x > 592.

For crackY=450, floorY=550, gravity=0.18, vx≈5:
- Time to fall 100px: t = sqrt(2*100/0.18) ≈ 33 frames
- Horizontal travel: 5*33 ≈ 165
- Impact x ≈ 592 + 165 = 757

For crackY=400:
- Time to fall 150px: t = sqrt(2*150/0.18) ≈ 41 frames
- Horizontal travel: 5*41 ≈ 205
- Impact x ≈ 592 + 205 = 797

So impact x varies from ~750 to ~800. Let me just use the average, ~770, and spread from there.

Actually, I should compute it dynamically for each jet particle. When a particle hits the floor (y >= ROOM_FLOOR), I check its x position and add to the puddle at that x.

But that's more complex. Let me simplify: the puddle starts at a fixed position (around x=770) and spreads outward. Volume accumulates from jet particles hitting the floor.

Puddle rendering:
- Ellipse at (puddleX, ROOM_FLOOR) with width = 2 * puddleSpread
- Blue with some transparency
- Maybe some ripples

Let me compute puddleX based on the crack position:
```
puddleX = TANK.rightWall + 120 + (550 - crackY) * 0.5
```

For crackY=450: puddleX = 600 + 120 + 50 = 770 ✓
For crackY=400: puddleX = 600 + 120 + 75 = 795 ✓

That works.

Puddle spread:
- puddleSpread = sqrt(puddleVolume * 0.5)
- Constrain: [0, min(puddleX - TANK.rightWall, ROOM_WIDTH - puddleX)]

OK, I'm writing the code now. Let me create the complete file.

I need to be careful about the frame rate and make sure the simulation runs smoothly. I'll use a simple animation loop.

Let me also think about what to do after the breach settles. The water is drained, the puddle is formed, particles have settled. I'll keep the simulation running (so the user can see the final state) but stop active physics.

Actually, I'll keep the physics running but they'll naturally settle (no more jet particles, objects resting).

Let me write the code now. Here goes:

```javascript
(() => {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  
  // Physics constants
  const GRAVITY = 0.18;
  const AIR_DRAG = 0.98;
  const WATER_DRAG = 0.96;
  
  // Tank geometry
  const TANK = {
    x: 280, y: 100, w: 320, h: 450, wall: 8,
    get left() { return this.x; },
    get right() { return this.x + this.w; },
    get bottom() { return this.y + this.h; },
    get innerLeft() { return this.x + this.wall; },
    get innerRight() { return this.x + this.w - this.wall; },
    get innerTop() { return this.y + this.wall; },
    get innerBottom() { return this.y + this.h - this.wall; },
  };
  const FLOOR_Y = TANK.bottom;  // 550
  const ROOM_FLOOR = 555;
  
  // State
  const state = {
    mode: 'setup',
    waterLevel: 370,
    initialWaterLevel: 370,
    crackY: 450,
    crackDragging: false,
    objects: [],
    plants: [],
    jetParticles: [],
    fragments: [],
    puddleVolume: 0,
    puddleSpread: 0,
    puddleX: 770,
    puddleMaxSpread: 150,
    time: 0,
  };
  
  // Colors
  const COLORS = {
    water: '#2563eb',
    waterDark: '#1d4ed8',
    waterLight: '#60a5fa',
    glass: 'rgba(173, 216, 230, 0.3)',
    glassHighlight: 'rgba(200, 230, 255, 0.5)',
    tankFrame: '#475569',
    floor: '#374151',
    roomBg: '#1a1a2e',
    plant: '#22c55e',
    plantDark: '#16a34a',
    rock: '#6b7280',
    rockDark: '#4b5563',
    toy: '#f59e0b',
    fish1: '#ef4444',
    fish2: '#38bdfa',
    fish3: '#a855f7',
    fish4: '#22c55e',
    puddle: 'rgba(96, 165, 250, 0.5)',
    foam: '#f8fafc',
    crack: '#1e293b',
  };
  
  // ===== INITIALIZATION =====
  
  function createRocks() {
    return [
      { type: 'rock', x: TANK.innerLeft + 60, y: TANK.innerBottom - 15, vx: 0, vy: 0, size: 28, mass: 15, density: 2.5, color: '#647489', angle: 0.3 },
      { type: 'rock', x: TANK.innerLeft + 140, y: TANK.innerBottom - 22, vx: 0, vy: 0, size: 36, mass: 25, density: 2.5, color: '#475563', angle: -0.2 },
      { type: 'rock', x: TANK.innerRight - 80, y: TANK.innerBottom - 18, vx: 0, vy: 0, size: 32, mass: 20, density: 2.5, color: '#52606d', angle: 0.5 },
    ];
  }
  
  function createToy() {
    return { type: 'toy', x: TANK.x + TANK.w * 0.35, y: state.waterLevel - 20, vx: 0, vy: 0, size: 38, mass: 3, density: 0.3, bobbed: 0 };
  }
  
  function createPlants() {
    return [
      { baseX: TANK.innerLeft + 40, baseY: TANK.innerBottom, height: 140, segments: 8, flexibility: 0.6, color: '#22c55e' },
      { baseX: TANK.innerLeft + 120, baseY: TANK.innerBottom, height: 160, segments: 10, flexibility: 0.5, color: '#4ade80' },
      { baseX: TANK.innerRight - 60, baseY: TANK.innerBottom, height: 130, segments: 7, flexibility: 0.7, color: '#22c55e' },
      { baseX: TANK.innerRight - 130, baseY: TANK.innerBottom, height: 150, segments: 9, flexibility: 0.55, color: '#4ade80' },
    ];
  }
  
  function createFish() {
    const fishTypes = [
      { size: 16, speed: 0.7, color: '#ef4444', pattern: 'stripes' },
      { size: 14, speed: 0.8, color: '#38bdfa', pattern: 'spots' },
      { size: 18, speed: 0.6, color: '#a855f7', pattern: 'plain' },
      { size: 12, speed: 0.9, color: '#fb7185', pattern: 'stripes' },
      { size: 15, speed: 0.75, color: '#86efac', pattern: 'spots' },
      { size: 13, speed: 0.85, color: '#facc15', pattern: 'plain' },
    ];
    return fishTypes.map((type, i) => ({
      ...type,
      type: 'fish',
      x: TANK.innerLeft + 50 + i * 45,
      y: TANK.innerTop + 40 + (i % 2) * 60,
      vx: 0,
      vy: 0.05 + (Math.random() - 0.5) * 0.1,
      direction: 1,
      targetDir: 1,
      sway: Math.random() * Math.PI * 2,
      inTank: true,
      mass: 0.5,
      density: 1.0,
    }));
  }
  
  function initState() {
    state.mode = 'setup';
    state.waterLevel = state.initialWaterLevel;
    state.crackY = 450;
    state.crackDragging = false;
    state.objects = [...createRocks(), createToy(), ...createFish()];
    state.plants = createPlants();
    state.jetParticles = [];
    state.fragments = [];
    state.puddleVolume = 0;
    state.puddleSpread = 0;
    state.time = 0;
  }
  
  // ===== INPUT =====
  
  function setupInput() {
    const breachBtn = document.getElementById('breachBtn');
    const resetBtn = document.getElementById('resetBtn');
    breachBtn.addEventListener('click', () => {
      if (state.mode === 'setup') {
        triggerBreach();
      }
    });
    resetBtn.addEventListener('click', () => {
      initState();
    });
    
    canvas.addEventListener('mousedown', (e) => {
      if (state.mode !== 'setup') return;
      const rect = canvas.getBoundingClientRect();
      const mx = e.clientX - rect.left;
      const my = e.clientY - rect.top;
      const crackX = TANK.right - TANK.wall + 5;
      if (Math.abs(mx - crackX) < 25 && Math.abs(my - state.crackY) < 30) {
        state.crackDragging = true;
      }
    });
    
    canvas.addEventListener('mousemove', (e) => {
      if (!state.crackDragging || state.mode !== 'setup') return;
      const rect = canvas.getBoundingClientRect();
      const my = e.clientY - rect.top;
      state.crackY = Math.max(390, Math.min(520, my));
    });
    
    canvas.addEventListener('mouseup', () => {
      state.crackDragging = false;
    });
    
    canvas.addEventListener('mouseleave', () => {
      state.crackDragging = false;
    });
  }
  
  // ===== BREACH =====
  
  function triggerBreach() {
    state.mode = 'breaching';
    
    // Create glass fragments
    createGlassFragments();
    
    // Compute puddle position based on crack
    state.puddleX = TANK.right + 120 + (TANK.bottom - state.crackY) * 0.5;
  }
  
  function createGlassFragments() {
    const fragCount = 14;
    for (let i = 0; i < fragCount; i++) {
      const relativeY = state.crackY - (TANK.top + 20) + Math.random() * 80 - 40;
      const frag = {
        x: TANK.right - TANK.wall / 2 + (Math.random() - 0.5) * 10,
        y: TANK.top + 40 + relativeY + (Math.random() - 0.5) * 20,
        vx: 1 + Math.random() * 3,
        vy: -2 + Math.random() * 2,
        angle: Math.random() * Math.PI * 2,
        rotationSpeed: (Math.random() - 0.5) * 0.12,
        size: 8 + Math.random() * 8,
        inWater: true,
      };
      state.fragments.push(frag);
    }
  }
  
  // ===== PHYSICS =====
  
  function computeCurrent(x, y) {
    // Current inside tank, in water, flowing toward breach
    const insideTank = x >= TANK.innerLeft && x <= TANK.innerRight && y >= TANK.innerTop && y <= state.waterLevel;
    if (!insideTank) return { x: 0, y: 0 };
    
    const h = state.waterLevel - state.crackY;
    if (h <= 0) return { x: 0, y: 0 };
    
    const distFromBreach = TANK.innerRight - x;
    if (distFromBreach < 0) return { x: 0, y: 0 };
    
    // Current strength decreases with distance from breach
    const strength = 0.15 * Math.sqrt(h) * Math.exp(-distFromBreach / 80);
    return { x: Math.min(strength, 2.0), y: 0 };
  }
  
  function isInWater(obj) {
    return obj.y < state.waterLevel;
  }
  
  function updateObjects() {
    const current = 16.67; // ms (60 FPS)
    const dt = 1 / 60;
    
    for (const obj of state.objects) {
      if (obj.type === 'rock') {
        updateRock(obj, dt);
      } else if (obj.type === 'toy') {
        updateToy(obj, dt);
      } else if (obj.type === 'fish') {
        updateFish(obj, dt);
      }
    }
  }
  
  function updateRock(rock, dt) {
    if (isInWater(rock)) {
      const current = computeCurrent(rock.x, rock.y);
      
      // Sinks (density > water)
      rock.vy += GRAVITY * (rock.density - WATER_DENSITY) * 0.3;
      
      // Drag
      rock.vx -= (rock.vx - current.x) * 0.03;
      rock.vy -= (rock.vy - current.y) * 0.03;
      
      // Current pushes
      rock.vx += current.x * 0.3;
    } else {
      // In air
      rock.vy += GRAVITY;
      rock.vx *= 0.98;
      rock.vy *= 0.98;
    }
    
    // Tank wall collision
    if (rock.x - rock.size / 2 < TANK.innerLeft) {
      rock.x = TANK.innerLeft + rock.size / 2;
      rock.vx *= -0.5;
    }
    if (rock.x + rock.size / 2 > TANK.innerRight) {
      // Check if at breach
      if (state.mode === 'breaching' && Math.abs(rock.y - state.crackY) < 40) {
        // Rock is at breach but too heavy to carry out
        rock.x = TANK.innerRight - rock.size / 2;
        rock.vx *= -0.8;
      } else {
        rock.x = TANK.innerRight - rock.size / 2;
        rock.vx *= -0.5;
      }
    }
    
    // Floor collision
    if (rock.y + rock.size / 2 > FLOOR_Y) {
      rock.y = FLOOR_Y - rock.size / 2;
      rock.vy *= -0.3;
      rock.vx *= 0.7;
    }
    
    // Ceiling (shouldn't happen, but just in case)
    if (rock.y - rock.size / 2 < TANK.innerTop) {
      rock.y = TANK.innerTop + rock.size / 2;
      rock.vy *= -0.3;
    }
    
    rock.x += rock.vx;
    rock.y += rock.vy;
    rock.angle += rock.vx * 0.02;
  }
  
  function updateToy(toy, dt) {
    if (state.mode === 'setup') {
      // Float at water surface, gentle bobbing
      toy.bobbed += 0.03;
      toy.y = state.waterLevel - toy.size / 2 + Math.sin(toy.bobbed) * 1.5;
      toy.vx *= 0.95;
    } else if (state.mode === 'breaching') {
      if (isInWater(toy) && toy.inTank) {
        const current = computeCurrent(toy.x, toy.y);
        
        // Float at surface
        toy.y = state.waterLevel - toy.size / 2 + Math.sin(toy.bobbed) * 1.5;
        toy.bobbed += 0.03;
        
        // Current pushes
        toy.vx += current.x * 0.5;
        toy.vx *= 0.9;
      } else {
        // In air or outside tank
        toy.vy += GRAVITY * 0.8; // toy is light
        toy.vx *= 0.97;
        toy.vy *= 0.97;
      }
      
      // Check if toy exits through breach
      if (toy.inTank && toy.x + toy.size / 2 > TANK.innerRight - 2 && 
          Math.abs(toy.y - state.crackY) < 30 &&
          isInWater(toy)) {
        // Pushed through breach by current
        toy.inTank = false;
      }
      
      if (!toy.inTank) {
        // Outside tank, in air or puddle
        if (toy.y + toy.size / 2 > ROOM_FLOOR) {
          toy.y = ROOM_FLOOR - toy.size / 2;
          toy.vy *= -0.3;
          toy.vx *= 0.7;
        }
      }
    }
    
    toy.x += toy.vx;
    toy.y += toy.vy;
  }
  
  function updateFish(fish, dt) {
    if (!fish.inTank) {
      // Fish in puddle outside tank
      fish.vx += (Math.random() - 0.5) * 0.1;
      fish.vy += GRAVITY * 0.3;
      
      if (fish.y + fish.size / 2 > ROOM_FLOOR) {
        fish.y = ROOM_FLOOR - fish.size / 2;
        fish.vy *= -0.3;
        fish.vx *= 0.8;
      }
      
      // Check if in puddle water
      if (fish.y > ROOM_FLOOR - state.puddleSpread * 0.3) {
        fish.vy *= 0.95; // water resistance in puddle
      }
      
      fish.x += fish.vx;
      fish.y += fish.vy;
      fish.sway += 0.05;
      return;
    }
    
    const current = computeCurrent(fish.x, fish.y);
    const h = state.waterLevel - state.crackY;
    
    if (state.mode === 'breaching' && h > 0) {
      // Near breach: try to swim away
      const distToBreach = TANK.innerRight - fish.x;
      
      if (distToBreach < 60 && Math.abs(current.x) > fish.speed * 0.7) {
        // Current too strong, getting swept
        fish.targetDir = -1; // swim left
      }
      
      if (distToBreach < 20 && Math.abs(current.x) > fish.speed) {
        // Swept through breach
        fish.inTank = false;
        fish.vx = current.x * 0.8;
        fish.vy = -0.5 + Math.random() * 1;
      }
    }
    
    if (state.mode === 'setup') {
      // Normal swimming
      fish.vx += fish.targetDir * fish.speed * 0.3;
      fish.vx *= 0.92;
      fish.vy *= 0.95 + (Math.random() - 0.5) * 0.02;
    } else {
      // Swim against current
      if (Math.abs(current.x) > 0.1) {
        fish.targetDir = current.x < 0 ? 1 : -1;
      }
      fish.vx += fish.targetDir * fish.speed * 0.3;
      
      // Drag from current
      fish.vx -= (fish.vx - current.x) * 0.05;
      fish.vx *= 0.92;
      
      // Buoyancy (fish maintain position, slight up/down movement)
      fish.vy += (state.waterLevel / 2 - fish.y) * 0.002;
      fish.vy *= 0.97;
    }
    
    // Tank wall collision
    if (fish.x - fish.size / 2 < TANK.innerLeft) {
      fish.x = TANK.innerLeft + fish.size / 2;
      fish.direction = 1;
      fish.vx *= -0.3;
    }
    if (fish.x + fish.size / 2 > TANK.innerRight) {
      if (fish.inTank && state.mode === 'breaching' && Math.abs(fish.y - state.crackY) < 40) {
        fish.inTank = false;
        fish.vx = 2;
        fish.vy = -0.5;
      } else {
        fish.x = TANK.innerRight - fish.size / 2;
        fish.direction = -1;
        fish.vx *= -0.3;
      }
    }
    
    if (fish.y - fish.size / 2 < TANK.innerTop + 10) {
      fish.y = TANK.innerTop + 10 + fish.size / 2;
      fish.vy *= -0.3;
    }
    if (fish.y + fish.size / 2 > state.waterLevel) {
      fish.y = state.waterLevel - fish.size / 2;
      fish.vy *= -0.5;
    }
    
    // Update direction
    if (fish.vx > 0.02) fish.direction = 1;
    if (fish.vx < -0.02) fish.direction = -1;
    
    fish.sway += 0.05;
    fish.x += fish.vx;
    fish.y += fish.vy;
  }
  
  function updatePlants() {
    for (const plant of state.plants) {
      const current = computeCurrent(plant.baseX, plant.baseY);
      
      for (let i = 0; i < plant.segments; i++) {
        const t = i / plant.segments;
        const segY = plant.baseY - t * plant.height;
        const segCurrent = computeCurrent(plant.baseX, segY);
        
        // Bend due to current + random sway
        const sway = segCurrent.x * plant.flexibility * 3;
        plant.segments_data = plant.segments_data || [];
      }
    }
  }
  
  // Hmm, I need to rethink plant representation...
```

OK this is getting really long and complex. Let me restructure and write a cleaner version. Let me think about the plant data structure.

For plants, I'll use a simpler model:
- Each plant has a base (fixed) and a height
- The plant bends: I'll model it as a curved line
- The curve is determined by the current at each point
- I'll use a parametric curve: for each segment, compute the offset

```javascript
function createPlants() {
  return [
    {
      baseX: TANK.innerLeft + 50,
      baseY: TANK.innerBottom,
      height: 140,
      segCount: 10,
      flexibility: 0.4,
      color: '#22c55e',
    },
    // ...
  ];
}

function updatePlant(plant) {
  plant.sway = (plant.sway || 0) + 0.02;
  
  // Compute segment positions
  plant.segments = [];
  for (let i = 0; i <= plant.segCount; i++) {
    const t = i / plant.segCount;
    const segY = plant.baseY - t * plant.height;
    const current = computeCurrent(plant.baseX, segY);
    
    // Bend amount: more at top, less at base
    const bendFactor = t * t;
    const currentBend = current.x * plant.flexibility * bendFactor * 5;
    const randomSway = Math.sin(plant.sway + i * 0.5) * 1.5 * (1 - t);
    
    plant.segments.push({
      x: plant.baseX + currentBend + randomSway,
      y: segY,
    });
  }
}
```

This is cleaner. Each plant has segments that bend with the current.

OK, let me now write the complete code. I'll be more concise and get it all written.

Let me think about the water rendering. I want to show:
1. The water inside the tank (blue fill, from bottom to waterLevel)
2. The water surface (wavy line)
3. The jet (particles exiting the tank)
4. The puddle (on the floor)

For the water surface wave:
```javascript
function drawWaterSurface(ctx, y, width) {
  ctx.beginPath();
  ctx.moveTo(TANK.innerLeft, y);
  for (let x = TANK.innerLeft; x <= TANK.innerRight; x += 10) {
    ctx.lineTo(x, y + Math.sin(state.time * 0.1 + x * 0.02) * 2);
  }
  ctx.lineTo(TANK.innerRight, y);
  ctx.stroke(); // or fill
}
```

For the water fill:
```javascript
function drawWaterFill(ctx) {
  // Water gradient
  const grad = ctx.createLinearGradient(TANK.innerLeft, TANK.innerTop, TANK.innerLeft, state.waterLevel);
  grad.addColorStop(0, '#1e40af');
  grad.addColorStop(1, '#3b82f6');
  ctx.fillStyle = grad;
  ctx.fillRect(TANK.innerLeft, state.waterLevel, TANK.w - TANK.wall * 2, TANK.h - TANK.wall * 2 - (state.waterLevel - TANK.innerTop));
}
```

Hmm, let me think about this differently. The water fills from the bottom to waterLevel. So:

```javascript
const waterTop = state.waterLevel;
const waterBottom = TANK.innerBottom; // tank bottom inside
const waterHeight = waterBottom - waterTop;
```

If waterTop is 370 and waterBottom is 542 (TANK.innerBottom = 100 + 450 - 8 = 542):
waterHeight = 542 - 370 = 172

The water rectangle is:
- x: TANK.innerLeft (288)
- y: waterTop (370)
- width: TANK.w - TANK.wall*2 (304)
- height: waterBottom - waterTop = 172

Wait, but I want the water to fill the tank bottom to surface. Let me compute:
- Water top: waterLevel = 370
- Water bottom: TANK.innerBottom = 542
- So fill from y=370 to y=542, height = 172

ctx.fillRect(TANK.innerLeft, waterLevel, TANK.innerWidth, TANK.innerBottom - waterLevel)

That's correct. But I also need to handle the case where waterLevel is at or below the tank bottom (waterLevel >= TANK.innerBottom means tank is empty).

Actually wait, waterLevel is a y-coordinate where smaller = higher. So:
- waterLevel = 370 → water surface at y=370
- TANK.innerBottom = 542 → tank bottom at y=542
- Water fills from y=370 to y=542
- If waterLevel = 542, tank is empty
- If waterLevel = 100, tank is full (up to the top)

```javascript
function drawWater() {
  if (state.waterLevel >= TANK.innerBottom) return; // empty
  
  const waterHeight = TANK.innerBottom - state.waterLevel;
  ctx.fillStyle = '#2563eb';
  ctx.fillRect(TANK.innerLeft, state.waterLevel, TANK.innerWidth, waterHeight);
  
  // Surface line
  ctx.strokeStyle = '#93c5fd';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(TANK.innerLeft, state.waterLevel);
  for (let x = TANK.innerLeft; x <= TANK.innerRight; x += 8) {
    ctx.lineTo(x, state.waterLevel + Math.sin(state.time * 0.15 + x * 0.02) * 2);
  }
  ctx.lineTo(TANK.innerRight, state.waterLevel);
  ctx.stroke();
}
```

Good. Now let me think about rendering the tank:

```javascript
function drawTank() {
  // Tank frame
  ctx.fillStyle = TANK.frameColor;
  ctx.fillRect(TANK.x, TANK.y, TANK.wall, TANK.h); // left frame
  ctx.fillRect(TANK.x, TANK.y, TANK.w, TANK.wall);  // top frame
  ctx.fillRect(TANK.x + TANK.w - TANK.wall, TANK.y, TANK.wall, TANK.h); // right frame
  ctx.fillRect(TANK.x, TANK.y + TANK.h - TANK.wall, TANK.w, TANK.wall); // bottom frame
  
  // Glass walls (transparent)
  ctx.fillStyle = 'rgba(173, 216, 230, 0.15)';
  ctx.fillRect(TANK.x + TANK.wall, TANK.y + TANK.wall, TANK.w - TANK.wall * 2, TANK.h - TANK.wall * 2);
  
  // Substrate
  ctx.fillStyle = '#d97706';
  ctx.fillRect(TANK.innerLeft, TANK.innerBottom, TANK.innerWidth, TANK.wall * 2);
  
  // In setup mode, draw the crack on the right wall
  if (state.mode === 'setup') {
    drawCrack(ctx);
  }
}
```

For the crack in setup mode:
```javascript
function drawCrack() {
  const crackX = TANK.right - TANK.wall / 2;
  const crackY = state.crackY;
  
  // Draw crack as a gap in the wall
  ctx.strokeStyle = '#0f172a';
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(crackX, crackY - 15);
  ctx.lineTo(crackX, crackY + 15);
  ctx.stroke();
  
  // Crack lines radiating
  ctx.strokeStyle = '#334159';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(crackX, crackY);
  ctx.lineTo(crackX - 10, crackY - 20);
  ctx.lineTo(crackX + 10, crackY + 25);
  ctx.stroke();
  
  // Drag handle
  ctx.fillStyle = '#fbbf24';
  ctx.beginPath();
  ctx.arc(crackX, crackY, 12, 0, Math.PI * 2);
  ctx.fill();
  
  // Highlight when dragging
  if (state.crackDragging) {
    ctx.strokeStyle = '#f59e0b';
    ctx.lineWidth = 3;
    ctx.stroke();
  }
}
```

Hmm, I want the crack to look like a gap in the glass, not a line on the glass. Let me think about this differently.

In setup mode, the right wall is intact glass. The crack is a visual indication of where the breach will happen. I could:
1. Draw the crack as a dark line/gap in the glass
2. Show some crack spider-webs
3. Have a draggable handle

Let me draw it as a visible gap (slightly darker than glass) with crack lines, and a draggable handle.

Actually, let me reconsider the visual. I think the cleanest approach is:
- In setup mode, draw the right wall as glass with a visible crack (a darker vertical line with some branching)
- The crack is draggable
- A highlight shows the drag area

When breach is triggered:
- The right wall panel breaks
- Fragments fly out
- Water starts flowing

For the right wall in setup mode:
- Draw the wall as a solid piece of glass
- Draw the crack on it (visual crack lines)
- The crack position is at crackY

When breached:
- Don't draw the wall panel
- Draw fragments instead
- Water flows through the gap

OK, I think my approach is fine. Let me also think about rendering the jet particles.

Jet particles:
```javascript
function drawJet() {
  for (const p of state.jetParticles) {
    ctx.fillStyle = `rgba(96, 165, 250, ${p.life / p.maxLife})`;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fill();
  }
}
```

Puddle:
```javascript
function drawPuddle() {
  if (state.puddleSpread === 0) return;
  
  const puddleWidth = state.puddleSpread * 2;
  ctx.ellipse(state.puddleX, ROOM_FLOOR, puddleWidth / 2, 8, 0, 0, Math.PI * 2);
  ctx.fillStyle = 'rgba(96, 165, 250, 0.4)';
  ctx.fill();
  
  // Highlights
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
  ctx.lineWidth = 2;
  ctx.stroke();
}
```

OK, let me now put it all together and write the complete code. I'll write it in a clean, organized manner.

Let me think about the update loop:

```javascript
function update() {
  state.time++;
  const dt = 1 / 60;
  
  if (state.mode === 'breaching') {
    updateWater(dt);
    updateJet(dt);
    updateObjects(dt);
    updatePlants();
    updateFragments(dt);
    updatePuddle(dt);
    
    // Check if water level reached crack
    if (state.waterLevel >= state.crackY - 2) {
      state.mode = 'settled';
    }
  }
}

function updateWater(dt) {
  const h = state.waterLevel - state.crackY;
  if (h > 0) {
    const drainRate = 0.05 * Math.sqrt(h);
    state.waterLevel -= drainRate;
    
    // Spawn jet particles
    const jetVel = 3 + 0.12 * Math.sqrt(h);
    const particleCount = 2 + Math.floor(drainRate * 0.5);
    for (let i = 0; i < particleCount; i++) {
      state.jetParticles.push({
        x: TANK.right - TANK.wall + 2,
        y: state.crackY + (Math.random() - 0.5) * 10,
        vx: jetVel + (Math.random() - 0.5) * 1,
        vy: (Math.random() - 0.5) * 0.3,
        life: 60 + Math.random() * 40,
        maxLife: 100,
        size: 2 + Math.random() * 2,
      });
    }
  }
}
```

Let me think about the jet particle physics:
```javascript
function updateJet(dt) {
  for (let i = state.jetParticles.length - 1; i >= 0; i--) {
    const p = state.jetParticles[i];
    
    // Apply gravity
    p.vy += GRAVITY * 0.5;
    
    // Air drag
    p.vx *= 0.97;
    p.vy *= 0.97;
    
    p.x += p.vx;
    p.y += p.vy;
    p.life--;
    
    // Check floor hit
    if (p.y >= ROOM_FLOOR) {
      // Add to puddle volume
      state.puddleVolume += p.size * p.size * 0.5;
      state.jetParticles.splice(i, 1);
    }
    
    // Remove old particles (inside tank, they might linger)
    if (p.life <= 0) {
      state.jetParticles.splice(i, 1);
    }
  }
}
```

For fragments:
```javascript
function updateFragments(dt) {
  for (const f of state.fragments) {
    if (f.inWater && f.y < state.waterLevel) {
      // Water resistance
      f.vx *= 0.93;
      f.vy *= 0.95;
      f.vy += GRAVITY * 0.3; // slower fall in water
    } else {
      f.inWater = false;
      f.vy += GRAVITY;
      f.vx *= 0.97;
      f.vy *= 0.97;
    }
    
    f.x += f.vx;
    f.y += f.vy;
    f.angle += f.rotationSpeed;
    
    // Floor collision
    if (f.y > ROOM_FLOOR) {
      f.y = ROOM_FLOOR;
      f.vy *= -0.4;
      f.vx *= 0.6;
      f.rotationSpeed *= 0.9;
    }
    
    // Stop if resting
    if (f.y >= ROOM_FLOOR && Math.abs(f.vy) < 0.2 && Math.abs(f.vx) < 0.2) {
      f.vx = 0;
      f.vy = 0;
      f.rotationSpeed = 0;
    }
  }
}
```

For the puddle:
```javascript
function updatePuddle(dt) {
  // Puddle spreads with accumulated volume
  const targetSpread = Math.min(
    Math.sqrt(state.puddleVolume * 0.03),
    state.puddleMaxSpread
  );
  state.puddleSpread += (targetSpread - state.puddleSpread) * 0.05;
}
```

OK, I think I have all the pieces. Let me write the complete code now.

Let me also think about the rendering order:
1. Room background
2. Room floor
3. Tank (frame, glass, substrate) - but without right wall panel if breached
4. Water fill (inside tank)
5. Objects in water (behind water surface partially)
6. Plants
7. Jet particles (inside and outside tank)
8. Objects in air
9. Fragments
10. Right wall panel (if not breached) or fragments (if breached)
11. Water surface
12. Puddle
13. UI (crack, buttons)

Wait, the rendering order matters. Let me think about what should be drawn on top of what:
- Tank walls should be drawn first (background)
- Water inside tank
- Objects inside tank
- Jet particles (they emerge from the crack, so they're in front of water but might be behind the tank frame)
- Fragments (flying out, in front of tank)
- Puddle (on floor, in front of tank base)
- UI elements on top

Actually, for the tank walls:
- Left, top, bottom walls: always visible
- Right wall: in setup mode, visible; in breaching mode, broken (fragments instead)

Let me draw:
1. Room background + floor
2. Tank frame (left, top, bottom)
3. Tank glass front
4. Water fill
5. Substrate
6. Plants (behind objects)
7. Rocks
8. Fish
9. Toy
10. Water surface + waves
11. Right wall panel (if in setup mode, with crack)
12. Jet particles
13. Fragments (if breached)
14. Puddle
15. UI

Hmm, the right wall panel should be drawn before objects so that objects behind the wall (inside tank) are properly occluded. But when the panel is broken, there's a gap and the jet comes through.

Let me restructure:
1. Room background + floor
2. Tank frame/back walls (left, top, bottom)
3. Water fill (inside tank, occluded by walls)
4. Substrate
5. Plants, rocks, fish, toy (inside tank)
6. Water surface
7. Right wall panel (if setup mode) - drawn last in setup
8. In breaching mode: fragments + jet particles + objects exiting
9. Puddle
10. UI

Actually, I think the simplest approach is:
1. Draw room/floor
2. Draw tank frame (all sides)
3. Draw water inside tank
4. Draw objects inside tank
5. If breached: draw fragments, jet, objects outside
6. Draw puddle
7. Draw UI (crack in setup mode)

For the right wall:
- In setup mode: draw solid right wall with crack
- In breaching mode: don't draw right wall (it's broken), draw fragments instead

Let me finalize the rendering order:
1. Room background
2. Floor
3. Tank left, top, bottom walls
4. Tank glass (inside)
5. Water fill
6. Substrate
7. Plants
8. Rocks
9. Fish
10. Toy
11. Water surface waves
12. [If setup] Right wall with crack
13. [If breaching] Fragments
14. [If breaching] Jet particles
15. Objects outside tank (fish in puddle, toy outside, etc.)
16. Puddle
17. UI text

This should work. Let me write the complete code now.

Actually, let me reconsider. The right wall needs to be drawn as part of the tank. If I draw it after objects, it would cover objects on the right side of the tank. If I draw it before objects, objects would appear to be in front of the wall (which is wrong since they're inside the tank).

The correct approach:
- Draw the tank walls first (they're the boundaries)
- Draw water inside (occluded by walls)
- Draw objects inside (occluded by walls)
- If right wall is broken, there's an opening, and objects/jet can be at that position

For the right wall in setup mode:
- Draw it as part of the tank structure (before or with water)
- Draw the crack on it

For the right wall in breaching mode:
- Don't draw it (it's broken)
- The opening allows jet to exit

Wait, but the left, top, and bottom walls are always there. The right wall is the breakable panel. So:

In setup mode:
1. Draw left, top, bottom walls (glass)
2. Draw right wall (glass, with crack)
3. Draw water inside
4. Draw objects inside

In breaching mode:
1. Draw left, top, bottom walls (glass)
2. Don't draw right wall (broken)
3. Draw water inside (with opening on right)
4. Draw objects inside
5. Draw fragments (flying out of right side)
6. Draw jet particles (exiting through right side)
7. Draw objects outside (puddle, fish in puddle)

Hmm, but the walls should occlude objects inside. If I draw the wall first, the water and objects are behind it. If the wall is transparent, I can see through it.

Actually, since the tank walls are transparent (glass), I can draw everything in a simple order:
1. Tank frame (all sides) - drawn as solid frames
2. Water inside
3. Objects inside
4. If breached: fragments, jet, outside objects
5. Puddle
6. UI

But the right wall needs special handling. In setup mode, it's drawn as part of the frame. In breaching mode, it's not drawn (replaced by fragments).

Let me simplify:
- Draw left, top, bottom wall frames always
- Draw the right wall panel only in setup mode
- In breaching mode, the right wall is open (fragments flying out)

For the water:
- Draw water fill from bottom to waterLevel, inside the tank walls
- The water is occluded by the tank walls (frame)
- But the right side opening (when breached) lets water/jet through

I think the key issue is: in setup mode, objects inside the tank should appear behind the right wall. In breaching mode, objects near the right wall can be at the opening.

Let me handle this by:
1. Drawing the tank frame (all sides as thin rectangles)
2. Drawing water fill
3. Drawing objects
4. If breached: drawing fragments + jet + puddle
5. Drawing the right wall panel only in setup mode (over objects)

Actually, the tank walls are transparent. The frame is the metal edge. Objects inside the tank should be visible through the glass. So I can draw objects first, then the walls on top (for the right wall in setup mode, drawn on top to occlude).

Hmm, this is getting complicated. Let me simplify: since the walls are thin (8px), I'll draw them early and not worry about occluding objects. The visual impact of objects slightly overlapping the wall frame is minimal.

Actually, let me just draw:
1. Room background + floor
2. Tank frame (all sides, as metal edges)
3. Tank glass (inside, transparent)
4. Water fill
5. Substrate at bottom
6. Plants
7. Rocks
8. Fish
9. Toy
10. Water surface
11. Right wall panel (setup mode, drawn on top to show crack)
12. Jet particles
13. Fragments
14. Objects outside tank
15. Puddle
16. UI

This should work well enough. The right wall panel drawn on top in setup mode will cover any objects on the right edge of the tank, which is fine.

OK, I'm going to write the complete code now. No more planning. Let me just do it.

Let me write it as a self-contained file with all the code. I'll aim for clarity and correctness.

One more thought: I should make the fish swimming look natural. Fish should:
- Move in their direction (left or right)
- Have a gentle up/down sway
- Have a tail that oscillates
- Turn when changing direction

For rendering a fish:
```javascript
function drawFish(fish) {
  ctx.save();
  ctx.translate(fish.x, fish.y);
  ctx.scale(fish.direction, 1); // flip for direction
  
  // Body
  ctx.fillStyle = fish.color;
  ctx.beginPath();
  ctx.ellipse(0, 0, fish.size * 0.7, fish.size * 0.4, 0, 0, Math.PI * 2);
  ctx.fill();
  
  // Tail
  ctx.beginPath();
  ctx.moveTo(-fish.size * 0.7, 0);
  ctx.lineTo(-fish.size * 1.2, -fish.size * 0.5);
  ctx.lineTo(-fish.size * 1.2, fish.size * 0.5);
  ctx.closePath();
  ctx.fill();
  
  // Eye
  ctx.fillStyle = '#000';
  ctx.beginPath();
  ctx.arc(fish.size * 0.2, -fish.size * 0.1, 2, 0, Math.PI * 2);
  ctx.fill();
  
  ctx.restore();
}
```

Good. Let me also add a tail animation (swaying).

For the tail:
```javascript
const tailSway = Math.sin(state.time * 0.2 + fish.sway) * 0.3;
// Apply to tail fin points
```

OK, I'm writing the code now. Let me create the complete file.

Let me also think about edge cases:
- What if the user doesn't drag the crack? Default crackY = 450.
- What if waterLevel reaches crackY? Stop draining.
- What if objects overlap? They should push each other (simplified: just prevent overlap).
- What about performance? Keep particle count reasonable.

For collision between objects, I'll add simple separation:
```javascript
function handleObjectCollisions() {
  for (let i = 0; i < state.objects.length; i++) {
    for (let j = i + 1; j < state.objects.length; j++) {
      const a = state.objects[i];
      const b = state.objects[j];
      const dx = b.x - a.x;
      const dy = b.y - a.y;
      const dist = Math.sqrt(dx * dx + dy * dy);
      const minDist = a.size / 2 + b.size / 2;
      if (dist < minDist && dist > 0) {
        const overlap = minDist - dist;
        const nx = dx / dist;
        const ny = dy / dist;
        // Separate based on mass
        const totalMass = a.mass + b.mass;
        a.x -= nx * overlap * (b.mass / totalMass);
        a.y -= ny * overlap * (b.mass / totalMass);
        b.x += nx * overlap * (a.mass / totalMass);
        b.y += ny * overlap * (a.mass / totalMass);
        // Exchange velocity
        a.vx -= nx * overlap * 0.1;
        a.vy -= ny * overlap * 0.1;
        b.vx += nx * overlap * 0.1;
        b.vy += ny * overlap * 0.1;
      }
    }
  }
}
```

This is a simple collision response. Good enough.

OK, let me write the complete code now. I'll put it all together.

Let me also think about the background of the room. I want a dark, moody aquarium room:
- Dark blue/black background
- Maybe some tank stand or shelf
- Floor texture (concrete)

For the room:
- Background: dark gradient (#1a1a2e to #16213e)
- Floor: gray concrete (#374151) with some texture
- Maybe some room walls (side walls) in dark gray

Let me also add a subtle background pattern (like aquarium stand or room details).

OK, I'm going to write the complete code now. Let me do it.

Actually, let me also consider the overall visual quality. I want:
- Nice water rendering (gradient, surface waves)
- Smooth animations
- Good contrast between objects and background
- Visual feedback for interactions

Let me use these colors:
- Water: blue gradient (#3b82f6 to #1e40af)
- Water surface: lighter blue with foam
- Tank frame: dark gray with metallic sheen
- Glass: light blue transparent
- Rocks: dark gray/brown with highlights
- Plants: green with lighter highlights
- Fish: bright, varied colors
- Toy: amber/yellow (like a rubber duck or boat)
- Puddle: blue with reflection
- Fragments: light blue, transparent (glass)

For the toy, I'll make it look like a small boat or rubber duck:
- Yellow/orange hull
- Small mast or dome

Let me think about the toy shape:
```javascript
function drawToy(toy) {
  ctx.save();
  ctx.translate(toy.x, toy.y);
  
  // Hull (oval)
  ctx.fillStyle = '#f59e0b';
  ctx.beginPath();
  ctx.ellipse(0, 0, toy.size * 0.6, toy.size * 0.35, 0, 0, Math.PI * 2);
  ctx.fill();
  
  // Deck/mast
  ctx.fillStyle = '#fbbf24';
  ctx.fillRect(-5, -toy.size * 0.25, 10, toy.size * 0.3);
  ctx.beginPath();
  ctx.triangle(0, -toy.size * 0.5, -12, -toy.size * 0.25, 12, -toy.size * 0.25);
  ctx.fill();
  
  // Highlight
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(0, 0, toy.size * 0.3, 0, Math.PI);
  ctx.stroke();
  
  ctx.restore();
}
```

Actually, let me keep it simpler. A yellow circle with a small mast. Or a boat shape.

OK, I'm writing the code now. For real. Let me create the index.html file.

I realize I need to also think about how the water level affects the toy. The toy floats at the water surface. As water level drops, the toy follows. When the water level drops below the crack, the toy might be near the breach. If the current pushes it, it might get carried out.

But the toy is large (size 38) and the opening is small (the crack gap of ~30px). So the toy probably doesn't get carried out. It just floats on the remaining water until the tank is empty, then rests on the bottom.

Hmm, actually the requirement says "Movable objects that fit the opening can be carried out by the flow." If the toy doesn't fit, it's fine. It stays in the tank.

But wait - I should make the opening big enough. The crack is a user-dragged vertical position. The opening height could be... let me think. The crack is a line, and when the panel breaks, the opening is the crack width (through the wall). The wall is 8px thick. So the opening is about 8px wide. That's very small.

Maybe I should make the crack height (vertical size of the opening) larger. Like 30-40 pixels. Objects smaller than this can pass through.

Let me define:
- Crack position: crackY (vertical center)
- Crack opening height: 30 pixels (from crackY-15 to crackY+15)
- Objects within this vertical range and small enough can be carried through

For rocks (size 28-36): might fit vertically but too heavy
For toy (size 38): doesn't fit vertically
For fish (size 12-18): fits easily

OK, this works. Fish can be carried through, rocks and toy stay.

Let me finalize the code now. I'll write it all in one go.

Let me think about the structure one more time:

```
index.html
├── <style>
│   - body, canvas, #ui, #title, #instructions
│
├── <canvas id="canvas" width="1200" height="800">
├── <div id="ui">
│   ├── <button id="breachBtn">Breach</button>
│   └── <button id="resetBtn">Reset</button>
├── <script>
│   ├── Constants and Config
│   ├── State object
│   ├── Object creation functions
│   ├── Input handling
│   ├── Physics update functions
│   ├── Rendering functions
│   ├── Main loop
│   └── Initialization
```

Let me write it all now. I'll be thorough and make sure everything works together.

One more consideration: I should make the code use a consistent frame rate. I'll use requestAnimationFrame and compute dt from timestamps. But for simplicity, I might just use a fixed step.

For fixed step: assume 60 FPS, dt = 1/60 ≈ 0.01667. I'll just use step-based updates.

OK, writing now.

Actually, let me reconsider the physics constants to make sure the visual is good:

Gravity: 0.18 px/frame²
- Fall speed after 30 frames: 0.18 * 30 = 5.4 px/frame = 324 px/s
- That's reasonable for falling objects

Water drain: 0.05 * sqrt(h)
- At h=120 (typical): 0.55 px/frame = 33 px/s water level drop
- Tank drains in ~120/0.55 ≈ 220 frames ≈ 3.7 seconds

Jet velocity: 3 + 0.12 * sqrt(h)
- At h=120: 3 + 1.3 = 4.3 px/frame = 258 px/s
- Reasonable for water jet

Current: 0.15 * sqrt(h) * exp(-dist/80)
- At breach (dist=0), h=120: 0.15 * 10.95 = 1.64 px/frame
- At center (dist=160), h=120: 0.15 * 10.95 * 0.135 = 0.22 px/frame
- At left (dist=320), h=120: 0.15 * 10.95 * 0.018 = 0.03 px/frame

Fish speed: 0.6-0.9 px/frame
- At center: current 0.22 < fish speed 0.6 → fish can swim against current
- At breach: current 1.64 > fish speed 0.6 → fish gets swept

This looks good.

For the puddle:
- Each jet particle hitting floor adds ~2-3 volume
- After 200 frames with 3 particles/frame: ~1200 particles
- But not all hit the floor (some fade inside tank)
- Puddle spread = sqrt(volume * 0.03)
- At volume=600: spread = sqrt(18) = 4.25... that's too small

Let me adjust:
- puddleSpread = sqrt(volume * 0.3)
- At volume=600: spread = sqrt(180) = 13.4
- At volume=300: spread = sqrt(90) = 9.5

Hmm, still small. Let me use:
- puddleSpread = sqrt(volume * 0.5)
- At volume=600: spread = sqrt(300) = 17.3
- At volume=1000: spread = sqrt(500) = 22.4

Or even:
- puddleSpread = sqrt(volume * 1) / 2
- At volume=600: spread = 24.5 / 2 = 12.25

Hmm, I want the puddle to be visibly large (like 100-200 pixels wide). Let me use:
- puddleSpread = sqrt(volume * 5)
- At volume=600: spread = sqrt(3000) = 55 → diameter 110 pixels
- At volume=1000: spread = sqrt(5000) = 71 → diameter 142 pixels

But I need to know how much volume is generated. Each jet particle:
- size = 2-4, so area = π * r² ≈ 3-12
- I add size² * 0.5 to volume ≈ 2-8 per particle
- 3 particles/frame * 220 frames = 660 particles
- Total volume: 660 * 5 ≈ 3300 (if average 5 per particle)
- puddleSpread = sqrt(3300 * 5) = sqrt(16500) = 128 → diameter 256

That's too wide. Let me use:
- puddleSpread = sqrt(volume * 2)
- At volume=3300: spread = sqrt(6600) = 81 → diameter 162

Hmm, that might be OK. But let me also constrain it to puddleMaxSpread.

Let me set puddleMaxSpread = 150 (diameter 300). That constrains the puddle.

Actually, let me just tune this when I see it. Let me use:
- Volume per particle: 5
- drainRate: 0.05 * sqrt(h) → particles per frame: 2-3
- Total particles: ~600
- Total volume: ~3000
- spread = sqrt(volume * 1) = sqrt(3000) = 55

So puddle radius ≈ 55, diameter ≈ 110. That's a reasonable size.

Let me use `spread = sqrt(volume * 1)` and `puddleMaxSpread = 150`.

Actually, I realize I should also have the puddle spread gradually, not instantly. The puddle grows over time as water accumulates.

Let me also have the puddle "flow" - water spreading outward from the impact point. I'll model this as the puddle spreading at a rate proportional to the flow.

```javascript
function updatePuddle() {
  // Spread rate based on flow
  const spreadRate = state.puddleVolume * 0.001;
  state.puddleSpread += spreadRate;
  state.puddleSpread = Math.min(state.puddleSpread, Math.sqrt(state.puddleVolume), state.puddleMaxSpread);
}
```

Hmm, that's a bit circular. Let me simplify:
- puddleSpread grows towards sqrt(volume) each frame
- It spreads gradually

```javascript
function updatePuddle() {
  const targetSpread = Math.sqrt(state.puddleVolume);
  state.puddleSpread += (targetSpread - state.puddleSpread) * 0.03;
  state.puddleSpread = Math.min(state.puddleSpread, state.puddleMaxSpread);
}
```

This makes the puddle spread gradually. Good.

OK, I'm going to write the complete code now. Let me also think about the water particle lifetime inside the tank. Some jet particles might not exit the tank immediately. I'll give them a lifetime that's long enough to show the jet but short enough to not accumulate.

Actually, all jet particles should exit the tank (they have horizontal velocity). The gravity pulls them down. They should either hit the floor outside or exit through the opening.

Wait, the jet particles spawn at the crack position, which is on the right wall. They have horizontal velocity pushing them right (out of the tank). Gravity pulls them down. They should exit the tank immediately (they're spawned at the right edge) and then fall to the floor.

So jet particles are always outside the tank (x > TANK.right). They curve down and hit the floor. Good.

But what about water particles that are already inside the tank? When the water level drops, the water surface moves down. I don't need individual particles for that - I just lower the water fill rectangle.

The jet is a particle effect at the crack. The water level is a rectangle. The puddle is an ellipse. This simplification should work well.

Let me also think about the "foam" effect at the water surface. I can draw small white dots or a foam line.

OK, let me write the code now. I'm going to create the complete file.

Let me also handle the case where the water level drops below the bottom of the tank (waterLevel >= TANK.innerBottom). In this case, there's no water inside the tank, and the drain stops.

```javascript
if (h > 0 && state.waterLevel < TANK.innerBottom) {
  // drain
}
```

Also, I should update the waterLevel check:
```javascript
if (state.waterLevel >= state.crackY) {
  // Water level reached crack, stop draining
  state.mode = 'settled';
}
```

But waterLevel should approach crackY asymptotically (sqrt function), so it takes a long time to reach exactly crackY. I'll set a threshold:
```javascript
if (state.waterLevel >= state.crackY - 1) {
  state.waterLevel = state.crackY; // clamp
  state.mode = 'settled';
}
```

OK, let me write the code. I'll include all the pieces I've discussed.

Let me also think about how the toy behaves when the water level drops below it. The toy floats at the water surface (y = waterLevel - size/2). When waterLevel drops, the toy drops. When waterLevel reaches the tank bottom (y=TANK.innerBottom), the toy is no longer floating - it falls to the bottom.

```javascript
function updateToy(toy) {
  if (state.mode === 'setup') {
    toy.y = state.waterLevel - toy.size / 2 + Math.sin(state.time * 0.05) * 2;
  } else if (state.mode === 'breaching' || state.mode === 'settled') {
    if (toy.inTank) {
      const waterDepth = state.waterLevel - TANK.innerBottom;
      if (waterDepth > toy.size * 0.5) {
        // Still floating
        toy.y = state.waterLevel - toy.size / 2;
        // Current
        const current = computeCurrent(toy.x, toy.y);
        toy.vx += current.x * 0.5;
        toy.vx *= 0.9;
      } else {
        // Water gone, toy falls
        toy.vy += GRAVITY * 0.5;
        toy.vx *= 0.97;
      }
    } else {
      // Outside tank
      toy.vy += GRAVITY;
      toy.vx *= 0.97;
    }
  }
  
  // Floor collision
  if (toy.y + toy.size / 2 > ROOM_FLOOR) {
    toy.y = ROOM_FLOOR - toy.size / 2;
    toy.vy *= -0.3;
    toy.vx *= 0.7;
  }
  
  toy.x += toy.vx;
  toy.y += toy.vy;
}
```

This handles the toy properly.

OK, I'm writing the complete code now. Let me put it all together in the index.html file.

Let me also think about one more thing: the "objects leaving the water transition to gravity-driven motion." This means when an object exits the water (either through the breach or because the water level dropped), it transitions from water physics to air physics.

For a fish swept through the breach:
- In water (in tank): buoyancy, drag, current, swimming
- At breach: swept through
- In air (outside tank): gravity, air drag
- Hits floor: collision, may bounce

For the toy:
- In water: floats at surface, current
- If water drains: falls to bottom
- If pushed through breach: falls to floor outside

For rocks:
- In water: sink to bottom, rest on floor
- Always in water (they're at the bottom)
- When water drains: still at bottom (no change)

This is all handled by checking `isInWater(obj)` which compares obj.y to state.waterLevel.

OK, let me write the code. I'll also add some polish:
- Particle fade effects
- Smooth transitions
- Visual feedback for interactions
- Instructions/information text

Let me write it all now. Here's the complete implementation:

Actually, one more thing. I should make sure the fish's `direction` property is used for rendering (flipping the fish sprite). And the fish should smoothly change direction when turning.

For the fish, I'll track:
- `direction`: 1 (right) or -1 (left)
- `vx`: horizontal velocity
- When vx changes sign, direction changes

For rendering, I'll flip the fish horizontally based on direction.

Let me also add a tail animation for fish (oscillating tail fin).

OK, writing the code now. For real this time.

Let me think about the complete list of rendering functions I need:

1. `renderBackground()` - room background and floor
2. `renderTank()` - tank frame and glass
3. `renderWater()` - water fill and surface
4. `renderSubstrate()` - sand/gravel at bottom
5. `renderPlants()` - plant rendering
6. `renderRocks()` - rock rendering
7. `renderFish()` - fish rendering
8. `renderToy()` - toy rendering
9. `renderWaterSurface()` - surface waves and foam
10. `renderRightWall()` - right wall (setup mode) with crack
11. `renderJet()` - jet particles
12. `renderFragments()` - glass fragments
13. `renderPuddle()` - puddle on floor
14. `renderUI()` - instructions, crack handle

Let me combine some of these for efficiency:
1. `renderBackground()` - room
2. `renderTank()` - frame, glass, substrate
3. `renderWater()` - fill + surface
4. `renderObjects()` - plants, rocks, fish, toy
5. `renderEffect()` - jet, fragments, puddle
6. `renderUI()` - crack, instructions

Let me write it now.

Actually, I want to be really careful about the rendering order for a clean look. Here's the order:

1. Room background (gradient)
2. Room floor (dark gray)
3. Tank frame (left, top, bottom walls - metal)
4. Tank glass (transparent blue tint)
5. Water fill (blue gradient, from bottom to waterLevel)
6. Substrate (sand/gravel at bottom of tank)
7. Plants (bending with current)
8. Rocks (at bottom)
9. Fish (swimming)
10. Toy (floating)
11. Water surface waves (at waterLevel)
12. Right wall panel with crack (setup mode) OR glass fragments (breaching mode)
13. Jet particles (exiting through crack)
14. Objects outside tank (fish in puddle, toy outside)
15. Puddle (blue ellipse on floor)
16. UI (crack handle, instructions, buttons are HTML)

Wait, I should draw the right wall panel BEFORE the water and objects if I want objects to be occluded by the wall. But since the wall is transparent, objects are visible through it. The wall frame is on the edges.

Let me draw the right wall panel:
- In setup mode: draw a transparent blue rectangle on the right wall position, with a crack
- In breaching mode: don't draw the right wall panel

The right wall is at x = TANK.right - TANK.wall (600 - 8 = 592) to TANK.right (600).

In setup mode:
```
Draw: filled rect at (592, TANK.top, 8, TANK.height) with glass color
Draw: crack lines at crackY
Draw: drag handle
```

In breaching mode:
```
Don't draw the right wall
Draw: fragments flying out
Draw: jet particles
```

This way, objects inside the tank are visible through the left, top, and bottom walls, and in setup mode, also through the right wall (with a crack visible).

OK, I think I have a clear enough plan. Let me write the code.

Let me also think about what happens with the water when the right wall breaks. The water should show the opening - the water fill should stop at the right wall (inner right), but when the wall is broken, the water should appear to flow out.

Actually, the water fill is drawn inside the tank (from innerLeft to innerRight). The jet particles come from the crack position and exit to the right. So the water fill doesn't need to change when the wall breaks - it just shrinks as the level drops, and the jet comes through the crack.

But I should draw the water fill up to the inner right wall. The jet particles emerge from the crack at the inner right wall position. That should look right.

Let me finalize the water drawing:
```javascript
function renderWater() {
  if (state.waterLevel >= TANK.innerBottom) return;
  
  const waterTop = state.waterLevel;
  const waterHeight = TANK.innerBottom - waterTop;
  
  // Gradient
  const grad = ctx.createLinearGradient(TANK.innerLeft, waterTop, TANK.innerLeft, TANK.innerBottom);
  grad.addColorStop(0, '#60a5fa');
  grad.addColorStop(0.5, '#3b82f6');
  grad.addColorStop(1, '#1e40af');
  ctx.fillStyle = grad;
  ctx.fillRect(TANK.innerLeft, waterTop, TANK.innerWidth, waterHeight);
  
  // Foam on surface
  if (waterHeight > 5) {
    ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
    ctx.fillRect(TANK.innerLeft, waterTop, TANK.innerWidth, 3);
    
    // Foam waves
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(TANK.innerLeft, waterTop);
    for (let x = TANK.innerLeft; x <= TANK.innerRight; x += 6) {
      ctx.lineTo(x, waterTop + Math.sin(state.time * 0.1 + x * 0.03) * 3);
    }
    ctx.lineTo(TANK.innerRight, waterTop);
    ctx.stroke();
  }
}
```

Good. Now let me write the complete code.

I also want to add some visual effects:
- Light reflection on water
- Glass shine on tank walls
- Particle trails for jet
- Rotation for fragments

Let me keep it reasonable and not overdo the effects.

For the jet particles, I could add a trail effect by drawing them with a fading trail. But that would require keeping track of previous positions. Let me just use the particle size and alpha for a nice effect.

OK, here's my final plan for the code. Let me write it.

I realize I should also handle the case where the user clicks "Breach" without dragging the crack. The crack has a default position (450), so this is fine.

Let me also add a visual indicator for the "Breach" button state. When in setup mode: "Breach" is enabled. When breaching: "Breach" is disabled. When settled: "Breach" is disabled.

Same for "Reset": always enabled.

Let me also think about the instruction text. I'll show different instructions based on the mode:
- Setup: "Drag the crack on the right side, then click Breach"
- Breaching: "Water is draining..."
- Settled: "Click Reset to restart"

OK, let me write the complete code now. I'll aim for a comprehensive, well-structured implementation.

Let me think about one final thing: the water jet visibility. The jet should be clearly visible as a stream of water exiting the tank. I'll make the particles:
- Larger at the start (near crack)
- Smaller as they fall (due to spreading)
- Blue-white color with fading alpha
- Maybe a slight trail

For the jet to look like a continuous stream, I need enough particles. With 3 particles per frame and 60fps, that's 180 particles per second. With a lifetime of ~80 frames, there are ~240 particles at any time. That should look like a continuous stream.

Let me also add some mist/spray at the jet (small particles that disperse). I'll have two types of particles:
- Main jet particles (larger, follow ballistic trajectory)
- Spray particles (smaller, disperse quickly)

For simplicity, I'll just have one type of particle with varied sizes and lifetimes.

OK, writing the code now. Here it is:

Let me also think about performance. The main computational cost:
- Particle updates: ~240 particles * simple physics = cheap
- Object updates: ~15 objects * simple physics = cheap
- Plant updates: ~30 segments * simple physics = cheap
- Fragment updates: ~14 fragments = cheap
- Rendering: canvas 2D, all simple shapes = should be fine

Total: should run at 60 FPS on any modern browser.

Let me write the code now.

Actually, I want to also add some background elements to make the scene more interesting:
- A few pebbles on the floor outside the tank
- Maybe a tank stand
- Room boundary lines

Let me add a simple tank stand (brown rectangle under the tank) and some room details.

OK, I'll write the code now. Let me create the full file.

Let me think about the structure of the file one more time:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Aquarium Breach Simulation</title>
  <style>
    /* Full screen, no margin, dark background */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    body { background: #000; font-family: sans-serif; }
    canvas { display: block; }
    #ui { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 10; }
    button { ... }
    #title { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 22px; color: #38bdfa; text-shadow: 0 0 10px rgba(56,189,248,0.5); }
    #instructions { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 14px; color: #94a3b8; }
  </style>
</head>
<body>
  <div id="title">Aquarium Breach</div>
  <div id="instructions">Drag the crack on the right side, then click Breach</div>
  <canvas id="canvas" width="1200" height="800"></canvas>
  <div id="ui">
    <button id="breachBtn">Breach</button>
    <button id="resetBtn">Reset</button>
  </div>
  <script>
    // Complete JS code
  </script>
</body>
</html>
```

Now let me write the complete JavaScript. I'll be very thorough.

Let me think about the fish more. I want 6 fish of different colors and sizes. They should:
- Swim in their direction normally
- Have a gentle sway in their movement
- When breach happens, swim against current
- Some get swept through

For fish movement in setup mode:
- They swim back and forth within the tank
- Gentle up/down movement (sway)
- When they hit a wall, they turn around

For fish movement in breaching mode:
- They detect current and swim against it (leftward)
- If current is too strong (near breach), they get swept
- Fish that exit through breach are "swept"

Let me define fish properties:
- x, y: position
- direction: 1 (right) or -1 (left)
- speed: 0.5-0.9 px/frame
- size: 12-18
- color: various
- sway: oscillation parameter for movement

For the fish, I want them to look like they're swimming. I'll:
- Draw an elongated body (ellipse)
- Add a triangular tail
- Add an eye
- Animate the tail with oscillation

Let me think about the fish drawing function:

```javascript
function drawFish(fish) {
  ctx.save();
  ctx.translate(fish.x, fish.y);
  ctx.scale(fish.direction, 1); // flip for direction
  
  // Tail oscillation
  const tailFlap = Math.sin(state.time * 0.2 + fish.sway) * 0.3;
  
  // Body
  ctx.fillStyle = fish.color;
  ctx.beginPath();
  ctx.ellipse(0, 0, fish.size * 0.8, fish.size * 0.45, 0, 0, Math.PI * 2);
  ctx.fill();
  
  // Tail
  ctx.beginPath();
  ctx.moveTo(-fish.size * 0.7, 0);
  ctx.lineTo(-fish.size * 1.1, -fish.size * 0.6 + tailFlap * 3);
  ctx.lineTo(-fish.size * 1.1, fish.size * 0.6 - tailFlap * 3);
  ctx.closePath();
  ctx.fill();
  
  // Eye
  ctx.fillStyle = '#000';
  ctx.beginPath();
  ctx.arc(fish.size * 0.25, -fish.size * 0.1, 2, 0, Math.PI * 2);
  ctx.fill();
  
  // Belly highlight
  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
  ctx.beginPath();
  ctx.ellipse(fish.size * 0.1, fish.size * 0.1, fish.size * 0.2, fish.size * 0.1, 0, 0, Math.PI * 2);
  ctx.fill();
  
  ctx.restore();
}
```

Good. Now let me write the plant rendering:

```javascript
function drawPlant(plant) {
  if (!plant.segments || plant.segments.length === 0) return;
  
  ctx.strokeStyle = plant.color;
  ctx.lineWidth = 4;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(plant.segments[0].x, plant.segments[0].y);
  for (let i = 1; i < plant.segments.length; i++) {
    ctx.lineTo(plant.segments[i].x, plant.segments[i].y);
  }
  ctx.stroke();
  
  // Plant "leaves" - small ellipses along the stem
  ctx.fillStyle = plant.color;
  for (let i = 1; i < plant.segments.length; i += 2) {
    const seg = plant.segments[i];
    ctx.beginPath();
    ctx.ellipse(seg.x, seg.y, 3, 6, 0, 0, Math.PI * 2);
    ctx.fill();
  }
  
  // Base
  ctx.fillStyle = '#787169';
  ctx.beginPath();
  ctx.arc(plant.baseX, plant.baseY, 5, 0, Math.PI * 2);
  ctx.fill();
}
```

Good. Now rocks:

```javascript
function drawRock(rock) {
  ctx.save();
  ctx.translate(rock.x, rock.y);
  ctx.rotate(rock.angle);
  
  // Rock shape (irregular polygon)
  ctx.fillStyle = rock.color;
  ctx.beginPath();
  const size = rock.size;
  ctx.moveTo(-size * 0.5, -size * 0.3);
  ctx.lineTo(-size * 0.3, -size * 0.5);
  ctx.lineTo(size * 0.4, -size * 0.3);
  ctx.lineTo(size * 0.5, size * 0.2);
  ctx.lineTo(size * 0.2, size * 0.5);
  ctx.lineTo(-size * 0.4, size * 0.3);
  ctx.closePath();
  ctx.fill();
  
  // Rock highlight
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
  ctx.lineWidth = 1;
  ctx.stroke();
  
  ctx.restore();
}
```

Toy:

```javascript
function drawToy(toy) {
  ctx.save();
  ctx.translate(toy.x, toy.y);
  
  // Bobbing effect
  const bob = Math.sin(state.time * 0.05) * 2;
  ctx.translate(0, bob);
  
  // Hull (yellow oval)
  ctx.fillStyle = '#f59e0b';
  ctx.beginPath();
  ctx.ellipse(0, 0, toy.size * 0.6, toy.size * 0.35, 0, 0, Math.PI * 2);
  ctx.fill();
  
  // Mast
  ctx.fillStyle = '#fbbf24';
  ctx.fillRect(-3, -toy.size * 0.3, 6, toy.size * 0.35);
  
  // Flag/sail
  ctx.beginPath();
  ctx.triangle(3, -toy.size * 0.3, 12, -toy.size * 0.1, 3, toy.size * 0.1);
  ctx.fill();
  
  // Highlight
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(0, 0, toy.size * 0.3, 0, Math.PI);
  ctx.stroke();
  
  ctx.restore();
}
```

Wait, `ctx.triangle` is not a standard canvas method. I need to use `moveTo`/`lineTo`:

```javascript
ctx.beginPath();
ctx.moveTo(3, -toy.size * 0.3);
ctx.lineTo(12, -toy.size * 0.1);
ctx.lineTo(3, toy.size * 0.1);
ctx.closePath();
ctx.fill();
```

OK, let me now write the complete file. I'll combine all the pieces.

Let me also think about the substrate rendering. The substrate is at the bottom of the tank (TANK.innerBottom). I'll draw it as a dark rectangle with some pebbles.

```javascript
function renderSubstrate() {
  ctx.fillStyle = '#d97706';
  ctx.fillRect(TANK.innerLeft, TANK.innerBottom, TANK.innerWidth, TANK.wall);
  
  // Pebbles
  ctx.fillStyle = '#b45309';
  for (let i = 0; i < 30; i++) {
    const x = TANK.innerLeft + Math.sin(i * 0.5 + state.time * 0.01) * 5 + i * 10;
    const y = TANK.innerBottom + 2;
    const size = 2 + Math.sin(i) * 1.5;
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fill();
  }
}
```

OK, I think I have everything I need. Let me write the complete code now. I'll be thorough and make sure all the pieces work together.

Let me also think about the glass fragment rendering. Each fragment should look like a piece of broken glass:
- Irregular shape (polygon)
- Translucent (glass-like)
- Light reflection
- Rotation

```javascript
function drawFragment(frag) {
  ctx.save();
  ctx.translate(frag.x, frag.y);
  ctx.rotate(frag.angle);
  
  ctx.fillStyle = 'rgba(173, 216, 230, 0.5)';
  ctx.strokeStyle = 'rgba(200, 230, 255, 0.7)';
  ctx.lineWidth = 0.5;
  
  const s = frag.size / 2;
  ctx.beginPath();
  ctx.moveTo(-s + (Math.random() - 0.5) * 2, -s + (Math.random() - 0.5) * 2);
  ctx.lineTo(s + (Math.random() - 0.5) * 2, -s + (Math.random() - 0.5) * 2);
  ctx.lineTo(s + (Math.random() - 0.5) * 2, s + (Math.random() - 0.5) * 2);
  ctx.lineTo(-s + (Math.random() - 0.5) * 2, s + (Math.random() - 0.5) * 2);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  
  // White highlight
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(-s + 2, -s + 2);
  ctx.lineTo(s - 2, -s + 2);
  ctx.stroke();
  
  ctx.restore();
}
```

OK, I'm going to write the complete code now. Let me put it all together in one file.

Let me think about the overall flow one more time:

1. On page load: init state, setup event listeners
2. Main loop: update physics (if not setup mode), render
3. User drags crack: update crackY
4. User clicks Breach: triggerBreach() → mode = 'breaching', create fragments, start water drain
5. Physics runs: water drains, jet particles, objects respond, puddle forms
6. When water reaches crack: mode = 'settled'
7. User clicks Reset: initState() → back to setup mode

Let me also think about what happens during the transition from setup to breaching:
- The right wall panel disappears
- Fragments fly out
- Jet starts
- Water starts draining
- Objects start responding to current
- Plants start bending

All of this happens immediately when Breach is clicked.

For the right wall in breaching mode:
- Don't draw the right wall panel
- Draw fragments instead
- The opening is visible (right wall is gone)

Let me make sure the rendering handles this:
```javascript
function renderTank() {
  // Left, top, bottom walls
  ctx.fillStyle = TANK_FRAME_COLOR;
  ctx.fillRect(TANK.x, TANK.y, TANK.wall, TANK.h); // left
  ctx.fillRect(TANK.x, TANK.y, TANK.w, TANK.wall); // top
  ctx.fillRect(TANK.x, TANK.bottom - TANK.wall, TANK.w, TANK.wall); // bottom
  
  // Right wall (only in setup mode)
  if (state.mode === 'setup') {
    ctx.fillRect(TANK.right - TANK.wall, TANK.y, TANK.wall, TANK.h);
    // Draw crack on right wall
    drawCrack();
  }
  // In breaching mode, right wall is open (fragments drawn elsewhere)
}
```

OK, I'm writing the complete code now. Let me do it.

I need to be careful about the initial state of objects. Let me define them clearly:

Rocks (3):
1. x=340, y=527 (bottom), size=28, mass=15, angle=0.3
2. x=420, y=522, size=36, mass=25, angle=-0.2
3. x=540, y=524, size=32, mass=20, angle=0.5

Toy:
- x=428, y=370-19=351 (floating at water level 370), size=38, mass=3

Plants (4):
1. baseX=300, baseY=542, height=140
2. baseX=380, baseY=542, height=160
3. baseX=530, baseY=542, height=130
4. baseX=590, baseY=542, height=150

Wait, plants should be inside the tank. innerRight = 600 - 8 = 592. So plant at 590 is almost at the wall. Let me adjust:
1. baseX=310, height=140
2. baseX=380, height=160
3. baseX=470, height=130
4. baseX=540, height=150

Fish (6):
1. x=320, y=400, size=16, speed=0.7, color=red, dir=1
2. x=380, y=430, size=14, speed=0.8, color=blue, dir=-1
3. x=450, y=460, size=18, speed=0.6, color=purple, dir=1
4. x=520, y=410, size=12, speed=0.9, color=pink, dir=-1
5. x=400, y=380, size=15, speed=0.75, color=green, dir=1
6. x=480, y=440, size=13, speed=0.85, color=yellow, dir=-1

These positions should work well inside the tank (innerLeft=288, innerRight=592, innerTop=108, innerBottom=542).

OK, let me write the code now. I'll be comprehensive and make sure everything works.

Let me think about potential issues:
1. Fish might get stuck in walls - I need good boundary handling
2. Objects might escape the tank unexpectedly - need to check boundaries
3. Particles might accumulate - need lifetime limits
4. Performance might drop - need to limit particle count

Let me address these:
1. Fish boundary: when hitting wall, reverse direction
2. Objects: check tank boundaries, only exit through breach
3. Particles: lifetime 60-100 frames, removed when expired
4. Particles: max 500, remove oldest if too many

OK, writing now. Here's the complete code:

Hmm, let me also think about whether I need to handle the `devicePixelRatio` for high-DPI displays. For simplicity, I'll ignore it and just use the canvas at its native resolution. The canvas is 1200x800 which is already a good size.

Let me write the complete implementation now. I'll include all the features and make sure it's a polished, working simulation.

Here is my final code plan:

```javascript
// All code in an IIFE
(() => {
  // Canvas setup
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  // Constants
  const GRAVITY = 0.18;
  const TANK = { x: 280, y: 100, w: 320, h: 450, wall: 8 };
  const FLOOR_Y = TANK.y + TANK.h;
  const ROOM_FLOOR = 555;
  // ... more constants
  
  // State
  const state = { ... };
  
  // Initialization
  function init() { ... }
  
  // Object creation
  function createRocks() { ... }
  function createToy() { ... }
  function createPlants() { ... }
  function createFish() { ... }
  function createFragments() { ... }
  
  // Input
  function setupEvents() { ... }
  
  // Physics
  function update() { ... }
  function updateWater() { ... }
  function updateJet() { ... }
  function updateObjects() { ... }
  function updatePlants() { ... }
  function updateFragments() { ... }
  function updatePuddle() { ... }
  function computeCurrent(x, y) { ... }
  
  // Rendering
  function render() { ... }
  function renderBackground() { ... }
  function renderFloor() { ... }
  function renderTank() { ... }
  function renderWater() { ... }
  function renderPlants() { ... }
  function renderObjects() { ... }
  function renderToy() { ... }
  function renderRocks() { ... }
  function renderFish() { ... }
  function renderJet() { ... }
  function renderFragments() { ... }
  function renderPuddle() { ... }
  function renderCrack() { ... }
  
  // Actions
  function triggerBreach() { ... }
  function reset() { ... }
  
  // Main loop
  function loop() { ... }
  
  // Start
  init();
  setupEvents();
  loop();
})();
```

OK, this is my plan. Let me write the complete code now.

I want to make sure I handle the following key behaviors:
1. ✅ Intact tank with all elements
2. ✅ Draggable crack (below water line)
3. ✅ Breach button → panel breaks, water jets out
4. ✅ Gravity-curved jet
5. ✅ Water level falls continuously
6. ✅ Outflow weakens as water approaches opening
7. ✅ Stops when water doesn't reach opening
8. ✅ Puddle on floor (constrained)
9. ✅ Rocks sink
10. ✅ Toy floats
11. ✅ Plants bend/drift
12. ✅ Fish swim against current, some swept
13. ✅ Objects leaving water → gravity motion + floor collision
14. ✅ Glass fragments rotate, collide, water resistance
15. ✅ Reset restores initial state

Let me write it all now. I'll create the file and then test it.

Let me think about one more detail: when the water level is above the toy, the toy floats. When the water level drops below the toy, the toy falls. But the toy is floating at the water surface, so it moves down with the water. Eventually, when the water is very low (just above the tank bottom), the toy might be near the bottom. When the water drains completely, the toy rests on the bottom.

For the toy's behavior during breach:
- Toy floats at water surface (y = waterLevel - size/2)
- Current pushes it horizontally
- If it reaches the breach opening, it might be pushed through (if it fits)
- Since the toy is large (size 38) and the opening is ~30 pixels, the toy might not fit
- When water drains, toy rests on bottom

Actually, I think the toy should be able to be carried out if the current is strong enough and the water is high. Let me check:
- Toy size: 38 (diameter)
- Opening height: 30 (from crackY-15 to crackY+15)
- 38 > 30, so the toy doesn't fit vertically

So the toy stays in the tank. It floats on the remaining water, then rests on the bottom when water drains. That's fine.

For the fish, they're smaller (12-18) and can fit through the opening (30). So they can be swept through.

OK, let me write the code now. I'll be thorough.

Let me also think about the "plants bend or drift" requirement:
- Plants bend with the current (their segments offset)
- They might also drift slightly (base moves a tiny bit)
- When current is strong, they bend more

For plants, I already have the bending model. Let me also add slight base movement:

```javascript
function updatePlant(plant) {
  plant.sway = (plant.sway || 0) + 0.03;
  
  // Gentle sway when no current
  const baseSway = Math.sin(plant.sway) * 2;
  
  // Current effect
  const current = computeCurrent(plant.baseX, plant.baseY);
  const currentBend = current.x * plant.flexibility;
  
  plant.segments = [];
  for (let i = 0; i <= plant.segCount; i++) {
    const t = i / plant.segCount;
    const y = plant.baseY - t * plant.height;
    
    // Bend more at top, less at base
    const bend = t * t * (currentBend * 6 + baseSway);
    const x = plant.baseX + bend;
    
    plant.segments.push({ x, y });
  }
}
```

This makes plants bend with the current, more at the top.

Let me also think about the plant base. Should it move? I'll give it a slight movement when current is very strong:
```javascript
plant.baseOffset = (plant.baseOffset || 0) + current.x * 0.01;
plant.baseOffset *= 0.95; // spring back
```

This adds subtle drifting of the plant base.

OK, I'm going to write the complete code now. Let me focus on getting it right.

For the current, I want to also affect the water surface inside the tank. When the breach happens, the water near the breach should show some inward flow (water moving toward the breach). I can show this with the surface wave pattern.

Actually, the water surface should tilt slightly (lower near the breach as water flows out). But this is a minor visual detail. Let me just make the surface wave pattern dynamic.

OK, writing the code now. Here it is:

Actually, I want to also think about what happens to water that's inside the tank but above the jet. The water level drops uniformly (I'm tracking it as a single y-value). The jet is at the crack position. Water flows out through the crack.

The visual effect is:
1. Water fill rectangle shrinks from top
2. Jet particles emerge from crack
3. Water surface waves at the new level

This is all handled by tracking waterLevel as a single value and drawing the fill rectangle accordingly.

Let me also think about water "sloshing." When the breach happens, the water might slosh initially (oscillation). But for simplicity, I'll skip this and just have the water level drop smoothly.

OK, here's the complete code. Let me write it now.

I need to be really careful about a few things:
1. The crack must be below the water line
2. The Breach button must trigger the physics
3. The Reset button must restore everything
4. The jet must curve downward (gravity)
5. The water level must fall
6. Objects must respond to current
7. Puddle must spread

Let me make sure I handle all of these in the code.

For the water level check:
```javascript
// Clamp crackY to be below water level
const minCrackY = state.waterLevel + 15;
const maxCrackY = TANK.bottom - 20;
state.crackY = Math.max(minCrackY, Math.min(maxCrackY, state.crackY));
```

Wait, in setup mode, waterLevel is 370 (initialWaterLevel). The crack should be below 370, so crackY > 370. And below the bottom of the tank, so crackY < 542 (TANK.innerBottom).

Actually, TANK.innerBottom = TANK.y + TANK.h - TANK.wall = 100 + 450 - 8 = 542.

So crackY range: [385, 525] or so.

For the initial crack: 450 (middle of range).

OK, I need to also handle the drag constraints:
```javascript
// When dragging, constrain crackY
state.crackY = Math.max(
  state.initialWaterLevel + 20,  // below water line
  Math.min(TANK.innerBottom - 20, my)
);
```

This ensures the crack is always below the water line and above the tank bottom.

OK, let me write the complete code now. I'll put it all in the index.html file.

Let me think about the time I have. I need to write the code, save it, open it in the browser, check it, fix issues, and save again. That's about 15 minutes. Let me write the code efficiently.

Let me write the complete file now:

I'm going to write a comprehensive, well-structured implementation. Let me do it.

One thing I want to make sure: the jet particles should clearly show a parabolic trajectory (gravity curve). I need to make sure the gravity applies to the particles and they visibly curve.

Also, I want the water level to fall continuously and visibly. The drop rate should be perceptible but not too fast.

And the outflow should weaken as the water level approaches the crack. The sqrt(h) formula naturally does this.

Let me write the code now. I'll create the file and then test it.

For the overall visual style, I want a dark, moody aquarium room with a bright blue tank. The jet should be clearly visible as a white/blue stream. The puddle should be visible on the floor. The fragments should sparkle.

Let me also add some background elements:
- Room walls (dark)
- A shelf or tank stand
- Some shadows for depth

For shadows:
- The tank casts a shadow on the floor
- Objects inside cast shadows
- The puddle has a shadow/wet look

Let me add a subtle shadow under the tank:
```javascript
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
ctx.ellipse(TANK.x + TANK.w / 2, ROOM_FLOOR + 2, TANK.w * 0.5, 5, 0, 0, Math.PI * 2);
```

OK, let me write the complete code now. I'll aim for a polished, working simulation.

Let me also think about the water inside the tank. I want it to look realistic:
- Blue gradient (lighter at top, darker at bottom)
- Surface waves
- Some particles/sediment floating
- Refraction effects (maybe)

For simplicity, I'll use:
- Gradient fill for water
- Sinusoidal wave at surface
- No refraction (too complex)
- Maybe some air bubbles rising

Air bubbles:
```javascript
// Occasionally spawn air bubbles in water
if (Math.random() < 0.05 && state.waterLevel < TANK.innerBottom - 20) {
  state.bubbles.push({
    x: TANK.innerLeft + Math.random() * TANK.innerWidth,
    y: TANK.innerBottom,
    vx: (Math.random() - 0.5) * 0.3,
    vy: -0.5 - Math.random() * 0.5,
    size: 1 + Math.random() * 2,
    life: 60,
  });
}
```

This adds nice detail. Bubbles rise and pop.

OK, I'm going to write the complete code now. Let me do it in one big file.

Let me think about what the crack looks like in different modes:

Setup mode:
- Right wall is drawn as solid glass
- A visible crack (dark line + crack branches) at crackY
- A draggable handle (circular, yellow/gold) at crackY
- The crack looks like a stress fracture in the glass

Breaching mode:
- Right wall panel is gone (broken)
- Glass fragments flying out
- Jet of water exiting through the opening
- The opening is at crackY

For the setup mode crack, I want it to look like a real crack in glass:
- Thin dark line
- Some branching crack lines
- Slightly highlighted edges

Let me draw it:
```javascript
function renderCrack() {
  const cx = TANK.right - TANK.wall / 2;
  const cy = state.crackY;
  
  // Crack gap
  ctx.strokeStyle = '#0f172a';
  ctx.lineWidth = 4;
  ctx.beginPath();
  ctx.moveTo(cx, cy - 12);
  ctx.lineTo(cx, cy + 12);
  ctx.stroke();
  
  // Crack branches
  ctx.strokeStyle = '#334159';
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(cx, cy - 2);
  ctx.lineTo(cx - 6, cy - 10);
  ctx.moveTo(cx, cy + 2);
  ctx.lineTo(cx + 6, cy + 8);
  ctx.stroke();
  
  // Drag handle
  ctx.fillStyle = state.crackDragging ? '#fbbf24' : '#fbbf24';
  ctx.strokeStyle = '#f59e0b';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(cx, cy, 14, 0, Math.PI * 2);
  ctx.fill();
  ctx.stroke();
  
  // Handle icon
  ctx.strokeStyle = '#78350f';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(cx - 4, cy - 4);
  ctx.lineTo(cx + 4, cy - 4);
  ctx.moveTo(cx - 4, cy);
  ctx.lineTo(cx + 4, cy);
  ctx.moveTo(cx - 4, cy + 4);
  ctx.lineTo(cx + 4, cy + 4);
  ctx.stroke();
}
```

OK, I'm confident I have a good plan. Let me write the complete code now.

Let me structure the code in a way that's clear and maintainable, while being complete.

I'll write it all now. Here goes.

Actually, wait. Let me think about one more important detail. When the water level is above the toy, the toy floats at the surface. But what if the current pushes the toy toward the breach? The toy is at the water surface, and the current is strongest there. The toy could be pushed toward the breach.

If the toy reaches the breach opening (x ≈ TANK.right, y ≈ crackY ± 15), and the toy's size (38) is larger than the opening (30), the toy can't pass through. But the current would push it against the wall.

I should handle this: when the toy is at the breach, the current pushes it, but it's constrained by the wall. The toy would be pushed against the wall and might rock there.

If the toy is small enough (let me make it smaller, like 30), it might fit through a 30-pixel opening.

Actually, let me make the toy size 32 and the opening height 30. Close enough. The toy might just barely not fit. Or I could make the opening slightly larger.

Let me make the opening height = 32 pixels (from crackY-16 to crackY+16). Then:
- Toy (size 32): just fits
- Fish (size 12-18): easily fits
- Rocks (size 28-36): might fit but too heavy

Actually, let me make it so the toy doesn't fit (it's a nice contrast - the toy stays, fish leave). Toy size = 36, opening = 30.

OK, I'll go with:
- Opening height: 30 pixels (crackY ± 15)
- Toy size: 36 (doesn't fit through 30-pixel opening)
- Fish sizes: 12-18 (fit through easily)
- Rock sizes: 28-36 (don't fit or too heavy)

This means:
- Fish get swept through the breach ✓
- Toy stays in tank (floats until water drains) ✓
- Rocks stay at bottom ✓
- Plants bend ✓

Good. Let me write the code now.

Actually, let me reconsider. The requirement says "Movable objects that fit the opening can be carried out by the flow." This implies that objects that DON'T fit stay. The toy is movable but doesn't fit, so it stays. Fish are movable and fit, so they can be carried out. This matches my design.

Let me also think about what happens to the fish that are swept out. They exit the tank and:
- Land in the puddle (if shallow water)
- Or on the floor (if puddle is shallow)
- They continue to swim (if in water) or flap (if on floor)

For a nice visual, I'll have swept fish:
1. Exit through the breach
2. Fall through the air (gravity)
3. Land in the puddle
4. Swim in the puddle

Let me handle this:
```javascript
if (fish.inTank && fish.x > TANK.right && Math.abs(fish.y - state.crackY) < 15) {
  // Fish is at breach opening
  if (fish.size < 30) {  // fits through opening
    fish.inTank = false;
    // Fish falls through air
    fish.vx = current.x * 0.8;
    fish.vy = 0.5;
  }
}
```

Wait, I need to check the opening range. Let me define:
- Opening: from crackY-15 to crackY+15
- If fish.y is in this range and fish is at the breach, it gets swept

Let me also make the fish "flop" when on the floor (no water):
```javascript
if (!fish.inTank && fish.y >= ROOM_FLOOR - 5) {
  // On floor, flopping
  fish.vx *= 0.95;
  fish.vy = 0;
  // Gentle flop animation
  fish.flop = (fish.flop || 0) + 0.1;
  fish.y = ROOM_FLOOR - fish.size / 2 + Math.sin(fish.flop) * 2;
}
```

If the puddle is deep enough (water on floor), the fish swims normally in the puddle.

OK, I think I've planned enough. Let me write the complete code now. I'll make it work and then test/fix it.

Let me write a comprehensive, working implementation. Here is the complete index.html:

I'll write it in sections, making sure each part is correct.

Actually, I want to think about one more thing: the water resistance for fragments. The requirement says "Glass fragments rotate, collide, and experience resistance in water."

So fragments that are in water (below water level) should experience:
- Higher drag (resistance)
- Slower falling (buoyancy effect)
- The water resistance affects both horizontal and vertical motion

Fragments that are in air:
- Normal gravity
- Low drag

I'll check each fragment's y position against waterLevel to determine if it's in water.

For a fragment:
```javascript
if (fragment.y < state.waterLevel) {
  // In water: high drag, slower movement
  fragment.vx *= 0.92;
  fragment.vy *= 0.94;
  fragment.vy += GRAVITY * 0.3; // slower fall in water
} else {
  // In air: gravity, low drag
  fragment.vy += GRAVITY;
  fragment.vx *= 0.97;
  fragment.vy *= 0.97;
}
```

But wait, fragments are created at the crack position (inside water initially, since crack is below water level). They fly outward, and as they fall, they exit the water (when y > waterLevel). At that point, they experience air physics.

This is a nice detail: fragments start in water (slowed by resistance), then break through the surface and fall freely.

OK, I'm writing the complete code now. Let me do it.

Let me think about the structure of the code one more time and then write it.

Actually, I want to make sure the rendering is layered correctly for fragments. Fragments fly outward (to the right) from the right wall. They should be drawn:
- If in water (inside tank, below water level): behind the water surface
- If exiting water: at the water surface
- If in air: in front of the water

But for simplicity, I'll just draw all fragments in one pass, before the water surface. The fragments are small and the layering won't be too noticeable.

Actually, let me draw fragments after the water fill but before the water surface waves. That way:
1. Water fill (blue rectangle)
2. Fragments (flying through water/air)
3. Water surface (waves on top)

This should look reasonable.

Wait, fragments are created at the right wall, which is at the edge of the tank. They fly to the right (outside the tank). So they'll be:
- Initially at the right wall (at the edge of the water fill)
- Flying rightward (outside the tank)
- Falling downward

So the fragments are mostly outside the tank. I should draw them:
- After the tank (so they appear in front of the tank)
- After the water fill (so they appear in front of water, if any are inside)
- Before or after the puddle

Let me draw: jet particles, fragments, and outside objects after the tank and water, but before the puddle.

Rendering order:
1. Background
2. Floor
3. Tank frame (left, top, bottom)
4. Glass (inside)
5. Water fill
6. Substrate
7. Plants (inside water)
8. Rocks (inside, at bottom)
9. Fish (inside)
10. Toy (inside, at surface)
11. Right wall panel (setup mode) WITH crack
12. Jet particles (exiting through crack)
13. Fragments (flying out)
14. Objects outside tank (fish in puddle, toy outside)
15. Puddle on floor
16. Water surface waves (on water inside tank)
17. Breadcrumbs/bubbles in water

Hmm, this is getting complex. Let me simplify the rendering order:

Background pass:
1. Room background
2. Room floor
3. Tank frame + glass

Water pass:
4. Water fill (inside tank)
5. Water surface waves

Objects (inside tank):
6. Plants
7. Rocks
8. Fish
9. Toy

Setup mode UI:
10. Right wall panel with crack

Breach effects:
11. Jet particles
12. Fragments

Outside objects:
13. Objects outside tank (fish in puddle, toy outside)

Floor elements:
14. Puddle
15. Tank shadow

This should give a reasonable visual. Let me write the code.

Actually, for the water surface waves, I should draw them on top of the water fill but below the objects. Otherwise, the waves would cover the objects.

Let me revise:
1. Room background
2. Room floor
3. Tank frame + glass
4. Water fill (blue rectangle)
5. Plants, rocks, fish, toy (inside tank, partially submerged)
6. Right wall panel with crack (setup mode)
7. Jet particles (exiting)
8. Fragments
9. Objects outside tank
10. Puddle
11. Water surface waves (on top of water fill, on top of partially submerged objects)
12. UI

Hmm, but the water surface waves should be on the water surface, not covering objects. If an object is at the surface (like the toy), the waves should be around it, not over it.

For simplicity, let me draw the water surface waves as a thin wavy line at the water level, not a fill. This way, objects at the surface will partially overlap the wave line, which looks natural.

OK, let me finalize the rendering order:
1. Room background
2. Room floor
3. Tank frame (left, top, bottom walls) + glass
4. Water fill (blue rectangle)
5. Substrate (sand at bottom)
6. Plants
7. Rocks
8. Fish
9. Toy
10. Right wall panel with crack (setup mode only)
11. Jet particles
12. Fragments
13. Objects outside (fish in puddle, toy outside tank)
14. Puddle
15. Water surface waves (thin wavy line)
16. Bubbles (in water)
17. Tank shadow

This should work. Let me write the code now.

I also want to add some particle trails for the jet. Instead of just individual particles, I could draw lines between consecutive positions. But that would require storing previous positions. For simplicity, I'll just use alpha fading for the particles.

OK, here is the complete code. Let me write it now.

Wait, one more thing. I should make sure the code handles the case where the water level is at or below the tank bottom. In this case, there's no water inside the tank, and I shouldn't draw any water fill.

```javascript
if (state.waterLevel < TANK.innerBottom) {
  // Draw water fill
}
```

Also, I should make sure that when the water level is very low (close to the tank bottom), the drain slows down to zero.

OK, writing the code now. I'm going to create the complete file.

Let me also think about the "outflow weakens as the water level approaches the opening" requirement. The sqrt(h) formula naturally weakens the outflow as h approaches 0. This is already handled.

And "stops when water no longer reaches it" - when waterLevel >= crackY, h = 0, no more outflow. This is already handled.

Let me write the complete code. I'll be thorough and handle all edge cases.

One final thought: I want to add some visual feedback when the user hovers over the crack. I could change the cursor to a pointer or highlight the crack.

```javascript
canvas.addEventListener('mousemove', (e) => {
  if (state.mode !== 'setup') return;
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  const crackX = TANK.right - TANK.wall / 2;
  
  if (state.crackDragging) {
    state.crackY = Math.max(385, Math.min(525, my));
  }
  
  // Hover detection
  if (Math.abs(mx - crackX) < 30 && Math.abs(my - state.crackY) < 25) {
    canvas.style.cursor = 'pointer';
  } else {
    canvas.style.cursor = 'default';
  }
});
```

OK, I'm writing the complete code now. Here it is:

Let me think about the structure one more time to make sure I don't miss anything:

1. Constants and configuration
2. State object
3. Object creation functions (rocks, toy, plants, fish)
4. Input handling (mouse events, button events)
5. Physics update functions
6. Rendering functions
7. Main loop
8. Initialization

For the physics update, I need:
- updateWater(): water level, jet particle spawning
- updateJetParticles(): particle movement, floor hit, puddle contribution
- updateObjects(): rocks, toy, fish physics
- updatePlants(): plant bending
- updateFragments(): fragment physics
- updatePuddle(): puddle spreading
- computeCurrent(): current field calculation

For rendering, I need the functions I listed above.

Let me write the code now. I'll create the complete file and then test it.

I'm going to write it all at once, carefully.

Let me also add a "depth" effect to the water. Objects deeper in the water are slightly darker/more blurred. I can achieve this with a simple alpha or color adjustment based on depth.

Actually, let me keep it simple. I'll use the standard rendering without depth effects.

OK, here's my complete implementation. I'll write it now.

One more thing: I want to make sure the simulation is not too slow. Let me think about the number of operations per frame:
- Jet particles: ~200-300, each with simple physics + rendering
- Objects: ~15, each with buoyancy + drag + current + collision
- Plants: ~4, each with ~10 segments
- Fragments: ~14
- Puddle: 1 (simple ellipse)
- Bubbles: ~20-30

Total: ~400 simple operations per frame. At 60 FPS, that's ~24,000 operations per second. JavaScript can handle this easily.

OK, writing now. Here is the complete code:

Let me focus on making the code clean, correct, and complete. I'll write it in a single <script> tag.

Let me think about error handling. What if the user clicks Breach twice? What if they drag the crack during breach?
- Breach button: only works in 'setup' mode, disables after click
- Crack dragging: only works in 'setup' mode

I'll handle these in the event handlers.

OK, I'm writing the code now. Here it is. I'll create the file with all the code.

Let me make sure the Reset button properly resets everything. I need to reset:
- mode to 'setup'
- waterLevel to initialWaterLevel
- crackY to default
- objects to initial positions
- plants to initial state
- jetParticles to empty
- fragments to empty
- puddleVolume to 0
- puddleSpread to 0
- time to 0

For the toy, I need to reset its position to floating at the water surface. For fish, reset to initial positions and directions. For rocks, reset to bottom positions.

I'll create a `createInitialState()` function that creates all objects fresh, and call it on reset.

Actually, let me have a `reset()` function that calls `createInitialState()` and sets mode to 'setup'.

Wait, I need to be careful. The toy's y position depends on waterLevel. So when I reset, I need to set waterLevel first, then create the toy at the correct y.

Let me structure the initialization:
```javascript
function initState() {
  state.mode = 'setup';
  state.waterLevel = state.initialWaterLevel;
  state.crackY = 450;
  state.crackDragging = false;
  state.jetParticles = [];
  state.fragments = [];
  state.puddleVolume = 0;
  state.puddleSpread = 0;
  state.puddleX = 770;
  state.time = 0;
  state.bubbles = [];
  
  // Create objects
  state.objects = [...createRocks(), ...createFish()];
  
  // Create toy (floating at water surface)
  const toy = createToy();
  state.objects.push(toy);
  
  // Create plants
  state.plants = createPlants();
}
```

OK, let me write the complete code now. I'm going to create the file.

Let me think about whether I need to handle high-DPI displays. The canvas is set to 1200x800. On a high-DPI display, the canvas might look blurry. I could set the canvas width/height to 2400x1600 and scale down with CSS. But for simplicity, let me just use the canvas at its native size and not worry about high-DPI.

Actually, let me add devicePixelRatio support:
```javascript
const dpr = window.devicePixelRatio || 1;
canvas.width = 1200 * dpr;
canvas.height = 800 * dpr;
canvas.style.width = '1200px';
canvas.style.height = '800px';
ctx.scale(dpr, dpr);
```

This makes the canvas look sharp on high-DPI displays. Good.

But wait, this might cause issues with mouse coordinates. I need to account for the scaling:
```javascript
const rect = canvas.getBoundingClientRect();
const mx = (e.clientX - rect.left) * (canvas.width / rect.width);
const my = (e.clientY - rect.top) * (canvas.height / rect.height);
```

Hmm, actually since I'm using ctx.scale(dpr, dpr), the canvas coordinates are already scaled. Let me handle this properly.

Actually, let me just not bother with devicePixelRatio for simplicity. The canvas at 1200x800 should look fine.

OK, I'm writing the code now. Here it is:

Actually, I just realized I should also add some visual polish:
1. Background gradient for the room
2. Subtle lighting on the tank
3. Water caustics (light patterns) - maybe too complex, skip
4. Particle glow (jet particles could have a glow effect)
5. Smooth animations (use easing)

For the jet particle glow:
```javascript
// Draw jet particle with glow
ctx.shadowBlur = 8;
ctx.shadowColor = 'rgba(96, 165, 250, 0.8)';
ctx.fillStyle = `rgba(96, 165, 250, ${alpha})`;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
```

This adds a nice glow effect to the water particles.

OK, I'm going to write the complete code now. Let me stop overthinking and just write it.

Here's my plan for the complete code:

```javascript
(() => {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  // === CONSTANTS ===
  const GRAVITY = 0.18;
  const TANK = { x: 280, y: 100, w: 320, h: 450, wall: 8 };
  const FLOOR_Y = TANK.y + TANK.h;
  const ROOM_FLOOR = 555;
  const ROOM = { left: 0, right: 1200 };
  
  // === STATE ===
  const state = {
    mode: 'setup',
    waterLevel: 370,
    initialWaterLevel: 370,
    crackY: 450,
    crackDragging: false,
    objects: [],
    plants: [],
    jetParticles: [],
    fragments: [],
    bubbles: [],
    puddleVolume: 0,
    puddleSpread: 0,
    puddleX: 770,
    puddleMaxSpread: 130,
    time: 0,
  };
  
  // === OBJECT CREATION ===
  
  function createRocks() {
    return [
      { type: 'rock', x: 300, y: 527, vx: 0, vy: 0, size: 28, mass: 15, density: 2.5, angle: 0.3, color: '#647489' },
      { type: 'rock', x: 400, y: 522, vx: 0, vy: 0, size: 36, mass: 25, density: 2.5, angle: -0.2, color: '#475563' },
      { type: 'rock', x: 530, y: 524, vx: 0, vy: 0, size: 32, mass: 20, density: 2.5, angle: 0.5, color: '#52606d' },
    ];
  }
  
  function createFish() {
    const fishData = [
      { size: 16, speed: 0.7, color: '#ef4444', x: 320, y: 400, dir: 1 },
      { size: 14, speed: 0.8, color: '#38bdfa', x: 380, y: 430, dir: -1 },
      { size: 18, speed: 0.6, color: '#a855f7', x: 460, y: 460, dir: 1 },
      { size: 12, speed: 0.9, color: '#fb7185', x: 520, y: 410, dir: -1 },
      { size: 15, speed: 0.75, color: '#86efac', x: 390, y: 380, dir: 1 },
      { size: 13, speed: 0.85, color: '#facc15', x: 480, y: 440, dir: -1 },
    ];
    return fishData.map(f => ({
      type: 'fish',
      x: f.x, y: f.y,
      vx: 0, vy: (Math.random() - 0.5) * 0.05,
      size: f.size, speed: f.speed, color: f.color,
      direction: f.dir, targetDir: f.dir,
      sway: Math.random() * Math.PI * 2,
      inTank: true, mass: 0.5, density: 1.0,
    }));
  }
  
  function createToy() {
    return {
      type: 'toy', x: 420, y: 370 - 19, vx: 0, vy: 0,
      size: 36, mass: 3, density: 0.3, bob: 0, inTank: true,
    };
  }
  
  function createPlants() {
    return [
      { baseX: 310, baseY: 542, height: 140, segCount: 10, flexibility: 0.4, color: '#22c55e', sway: Math.random() * Math.PI * 2, baseOffset: 0 },
      { baseX: 380, baseY: 542, height: 160, segCount: 12, flexibility: 0.5, color: '#4ade80', sway: Math.random() * Math.PI * 2, baseOffset: 0 },
      { baseX: 470, baseY: 542, height: 130, segCount: 9, flexibility: 0.35, color: '#22c55e', sway: Math.random() * Math.PI * 2, baseOffset: 0 },
      { baseX: 540, baseY: 542, height: 150, segCount: 11, flexibility: 0.45, color: '#4ade80', sway: Math.random() * Math.PI * 2, baseOffset: 0 },
    ];
  }
  
  function createFragments(crackY) {
    const frags = [];
    for (let i = 0; i < 14; i++) {
      const angle = Math.random() * Math.PI * 2;
      const speed = 2 + Math.random() * 4;
      const fragY = crackY - 50 + Math.random() * 100;
      frags.push({
        x: TANK.right - TANK.wall / 2 + (Math.random() - 0.5) * 10,
        y: fragY,
        vx: Math.cos(angle) * speed * 0.5 + 1,
        vy: Math.sin(angle) * speed * 0.3 - 1,
        angle: Math.random() * Math.PI * 2,
        rotationSpeed: (Math.random() - 0.5) * 0.15,
        size: 8 + Math.random() * 8,
        inWater: fragY < state.waterLevel,
      });
    }
    return frags;
  }
  
  function initState() {
    state.mode = 'setup';
    state.waterLevel = state.initialWaterLevel;
    state.crackY = 450;
    state.crackDragging = false;
    state.objects = [...createRocks(), ...createFish(), createToy()];
    state.plants = createPlants();
    state.jetParticles = [];
    state.fragments = [];
    state.bubbles = [];
    state.puddleVolume = 0;
    state.puddleSpread = 0;
    state.puddleX = 770;
    state.time = 0;
  }
  
  // === INPUT ===
  
  function setupEvents() {
    document.getElementById('breachBtn').addEventListener('click', () => {
      if (state.mode === 'setup') triggerBreach();
    });
    document.getElementById('resetBtn').addEventListener('click', () => {
      initState();
    });
    
    canvas.addEventListener('mousedown', (e) => {
      if (state.mode !== 'setup') return;
      const rect = canvas.getBoundingClientRect();
      const mx = e.clientX - rect.left;
      const my = e.clientY - rect.top;
      const crackX = TANK.right - TANK.wall / 2;
      if (Math.abs(mx - crackX) < 25 && Math.abs(my - state.crackY) < 30) {
        state.crackDragging = true;
      }
    });
    
    canvas.addEventListener('mousemove', (e) => {
      const rect = canvas.getBoundingClientRect();
      const mx = e.clientX - rect.left;
      const my = e.clientY - rect.top;
      const crackX = TANK.right - TANK.wall / 2;
      
      if (state.crackDragging) {
        state.crackY = Math.max(385, Math.min(525, my));
      }
      
      // Cursor
      if (state.mode === 'setup' && Math.abs(mx - crackX) < 30 && Math.abs(my - state.crackY) < 25) {
        canvas.style.cursor = 'grab';
        if (state.crackDragging) canvas.style.cursor = 'grabbing';
      } else if (state.mode === 'setup') {
        canvas.style.cursor = 'default';
      }
    });
    
    canvas.addEventListener('mouseup', () => {
      state.crackDragging = false;
      canvas.style.cursor = 'default';
    });
    
    canvas.addEventListener('mouseleave', () => {
      state.crackDragging = false;
      canvas.style.cursor = 'default';
    });
  }
  
  // === BREACH ===
  
  function triggerBreach() {
    state.mode = 'breaching';
    state.fragments = createFragments(state.crackY);
    state.puddleX = TANK.right + 120 + (TANK.bottom - state.crackY) * 0.5;
    document.getElementById('breachBtn').disabled = true;
    document.getElementById('instructions').textContent = 'Water is draining...';
  }
  
  // === PHYSICS ===
  
  function computeCurrent(x, y) {
    const insideTank = x >= TANK.x + TANK.wall && x <= TANK.right - TANK.wall 
                      && y >= TANK.y + TANK.wall && y <= state.waterLevel;
    if (!insideTank) return { x: 0, y: 0 };
    
    const h = state.waterLevel - state.crackY;
    if (h <= 0) return { x: 0, y: 0 };
    
    const distFromBreach = (TANK.right - TANK.wall) - x;
    if (distFromBreach < 0) return { x: 0, y: 0 };
    
    const strength = 0.15 * Math.sqrt(h) * Math.exp(-distFromBreach / 70);
    return { x: Math.min(strength, 2.5), y: 0 };
  }
  
  function updateWater() {
    const h = state.waterLevel - state.crackY;
    if (h > 0.5 && state.waterLevel < TANK.y + TANK.h) {
      const drainSpeed = 0.05 * Math.sqrt(h);
      state.waterLevel += drainSpeed;  // water level moves DOWN (y increases)
      
      // Spawn jet particles
      const jetVel = 3 + 0.12 * Math.sqrt(h);
      const count = 2 + Math.floor(drainSpeed * 0.5);
      for (let i = 0; i < count; i++) {
        state.jetParticles.push({
          x: TANK.right - TANK.wall / 2,
          y: state.crackY + (Math.random() - 0.5) * 8,
          vx: jetVel + (Math.random() - 0.5) * 0.5,
          vy: (Math.random() - 0.5) * 0.3,
          life: 20 + Math.random() * 10,
          maxLife: 80,
          size: 2 + Math.random() * 2,
        });
      }
    }
  }
  
  function updateJet() {
    for (let i = state.jetParticles.length - 1; i >= 0; i--) {
      const p = state.jetParticles[i];
      
      p.vy += GRAVITY * 0.5;
      p.vx *= 0.97;
      p.vy *= 0.97;
      
      p.x += p.vx;
      p.y += p.vy;
      p.life--;
      p.maxLife--;
      
      if (p.y >= ROOM_FLOOR) {
        state.puddleVolume += p.size * 2;
        state.jetParticles.splice(i, 1);
        continue;
      }
      
      if (p.life <= 0 || p.maxLife <= 0) {
        state.jetParticles.splice(i, 1);
      }
    }
    
    // Spawn bubbles
    if (state.mode === 'breaching' && Math.random() < 0.3) {
      const h = state.waterLevel - state.crackY;
      if (h > 0) {
        state.bubbles.push({
          x: TANK.right - TANK.wall * 2 + (Math.random() - 0.5) * 20,
          y: state.waterLevel,
          vx: (Math.random() - 0.5) * 0.3,
          vy: -0.3 - Math.random() * 0.5,
          size: 1 + Math.random() * 2,
          life: 30 + Math.random() * 20,
        });
      }
    }
  }
  
  function updateBubbles() {
    for (let i = state.bubbles.length - 1; i >= 0; i--) {
      const b = state.bubbles[i];
      const current = computeCurrent(b.x, b.y);
      b.vx += current.x * 0.2;
      b.vx *= 0.95;
      b.vy -= 0.1; // rise
      b.x += b.vx;
      b.y += b.vy;
      b.life--;
      
      if (b.life <= 0 || b.y < state.waterLevel - 50) {
        state.bubbles.splice(i, 1);
      }
    }
  }
  
  function updateObjects() {
    for (const obj of state.objects) {
      if (obj.type === 'rock') updateRock(obj);
      else if (obj.type === 'toy') updateToy(obj);
      else if (obj.type === 'fish') updateFish(obj);
    }
  }
  
  function isInWater(obj) {
    return obj.y < state.waterLevel && obj.y > TANK.y;
  }
  
  function updateRock(rock) {
    if (isInWater(rock)) {
      const current = computeCurrent(rock.x, rock.y);
      rock.vy += GRAVITY * (rock.density - 0.8) * 0.3; // sinks slowly
      rock.vx -= (rock.vx - current.x) * 0.04;
      rock.vy -= (rock.vy - current.y) * 0.04;
      rock.vx += current.x * 0.3;
    } else {
      rock.vy += GRAVITY;
      rock.vx *= 0.98;
      rock.vy *= 0.98;
    }
    
    // Tank boundary
    if (rock.x - rock.size / 2 < TANK.x + TANK.wall) {
      rock.x = TANK.x + TANK.wall + rock.size / 2;
      rock.vx *= -0.5;
    }
    if (rock.x + rock.size / 2 > TANK.right - TANK.wall) {
      rock.x = TANK.right - TANK.wall - rock.size / 2;
      rock.vx *= -0.5;
    }
    
    // Floor
    if (rock.y + rock.size / 2 > FLOOR_Y) {
      rock.y = FLOOR_Y - rock.size / 2;
      rock.vy *= -0.2;
      rock.vx *= 0.7;
    }
    
    rock.x += rock.vx;
    rock.y += rock.vy;
    rock.angle += rock.vx * 0.015;
  }
  
  function updateToy(toy) {
    if (toy.inTank) {
      if (state.mode === 'setup') {
        // Float at water surface
        toy.bob += 0.03;
        toy.y = state.waterLevel - toy.size / 2 + Math.sin(toy.bob) * 2;
        toy.vx *= 0.92;
      } else {
        if (state.waterLevel < TANK.innerBottom) {
          // No water, toy falls
          toy.vy += GRAVITY * 0.5;
        } else {
          // Float at surface
          toy.bob += 0.03;
          toy.y = state.waterLevel - toy.size / 2 + Math.sin(toy.bob) * 1.5;
          const current = computeCurrent(toy.x, toy.y);
          toy.vx += current.x * 0.6;
          toy.vx *= 0.9;
        }
      }
    } else {
      // Outside tank
      toy.vy += GRAVITY * 0.8;
      toy.vx *= 0.97;
    }
    
    // Boundary check - can toy leave tank?
    if (toy.inTank) {
      if (toy.x - toy.size / 2 < TANK.x + TANK.wall) {
        toy.x = TANK.x + TANK.wall + toy.size / 2;
        toy.vx *= -0.5;
      }
      if (toy.x + toy.size / 2 > TANK.right - TANK.wall) {
        // Check breach
        if (state.mode === 'breaching' && Math.abs(toy.y - state.crackY) < 20) {
          // Too large to fit through opening (size > 30)
          toy.x = TANK.right - TANK.wall - toy.size / 2;
          toy.vx *= -0.7;
        } else {
          toy.x = TANK.right - TANK.wall - toy.size / 2;
          toy.vx *= -0.5;
        }
      }
    }
    
    // Floor collision (outside tank)
    if (!toy.inTank && toy.y + toy.size / 2 > ROOM_FLOOR) {
      toy.y = ROOM_FLOOR - toy.size / 2;
      toy.vy *= -0.3;
      toy.vx *= 0.7;
    }
    if (toy.inTank && toy.y + toy.size / 2 > FLOOR_Y) {
      toy.y = FLOOR_Y - toy.size / 2;
      toy.vy *= -0.3;
    }
    
    toy.x += toy.vx;
    toy.y += toy.vy;
  }
  
  // ... fish, plants, fragments, puddle (similar to what I planned)
  
  // === MAIN LOOP ===
  function loop() {
    state.time++;
    
    if (state.mode !== 'setup') {
      updateWater();
      updateJet();
      updateBubbles();
      updateObjects();
      updatePlants();
      updateFragments();
      updatePuddle();
      
      if (state.waterLevel >= state.crackY - 0.5) {
        state.mode = 'settled';
        state.waterLevel = state.crackY;
        document.getElementById('instructions').textContent = 'Breach complete. Click Reset to restart.';
      }
    }
    
    render();
    requestAnimationFrame(loop);
  }
  
  // Initialize
  initState();
  setupEvents();
  requestAnimationFrame(loop);
})();
```

OK, this is the rough structure. Let me now write the complete, polished code. I'll include all rendering functions and make sure everything is correct.

Let me write it all now. I'll create the file.

Let me also make sure I handle the fish exiting through the breach properly. When a fish is at the breach (near crackY, at the right wall), and the current is strong enough, it gets swept out.

For the fish:
```javascript
function updateFish(fish) {
  if (!fish.inTank) {
    // Fish outside tank (in puddle or on floor)
    fish.vy += GRAVITY * 0.3;
    fish.vx *= 0.95;
    
    // Check puddle
    const puddleDepth = state.puddleSpread * 0.3;
    const inPuddle = fish.y > ROOM_FLOOR - puddleDepth - 5;
    
    if (inPuddle) {
      fish.vy *= 0.95; // water resistance
      fish.vx += (Math.random() - 0.5) * 0.3; // random swimming
    } else {
      // Flopping on floor
      fish.vx *= 0.92;
    }
    
    if (fish.y + fish.size / 2 > ROOM_FLOOR) {
      fish.y = ROOM_FLOOR - fish.size / 2;
      fish.vy *= -0.2;
      fish.vx *= 0.8;
    }
    
    fish.sway += 0.05;
    fish.x += fish.vx;
    fish.y += fish.vy;
    return;
  }
  
  // Fish inside tank
  const current = computeCurrent(fish.x, fish.y);
  const h = state.waterLevel - state.crackY;
  
  if (state.mode === 'setup') {
    // Normal swimming
    fish.vx += fish.direction * fish.speed * 0.3;
    fish.vx *= 0.92;
    fish.vy *= 0.97;
    fish.vy += (state.waterLevel / 2 - fish.y) * 0.001; // stay at mid-depth
  } else {
    // Breaching: swim against current
    if (Math.abs(current.x) > 0.1) {
      fish.targetDir = current.x < 0 ? 1 : -1;
    }
    
    // Try to swim against current
    if (Math.abs(current.x) > fish.speed * 0.8) {
      // Current too strong, getting swept
      fish.targetDir = -1;
    }
    
    fish.vx += fish.targetDir * fish.speed * 0.3;
    fish.vx -= (fish.vx - current.x) * 0.05; // drag
    fish.vx *= 0.92;
    fish.vy += (state.waterLevel / 2 - fish.y) * 0.001;
    fish.vy *= 0.97;
  }
  
  // Update direction
  if (fish.vx > 0.02) fish.direction = 1;
  if (fish.vx < -0.02) fish.direction = -1;
  
  // Check if swept through breach
  if (state.mode === 'breaching' && h > 0) {
    const distToBreach = (TANK.right - TANK.wall) - fish.x;
    if (distToBreach < 15 && Math.abs(fish.y - state.crackY) < 20) {
      if (Math.abs(current.x) > fish.speed) {
        // Swept through!
        fish.inTank = false;
        fish.vx = 3 + current.x;
        fish.vy = -0.5 + Math.random();
      }
    }
  }
  
  // Tank boundary
  if (fish.x - fish.size / 2 < TANK.x + TANK.wall + 5) {
    fish.x = TANK.x + TANK.wall + 5 + fish.size / 2;
    fish.vx *= -0.5;
    fish.direction = 1;
  }
  if (fish.x + fish.size / 2 > TANK.right - TANK.wall - 5) {
    // Could be breached
    if (state.mode === 'setup' || Math.abs(fish.y - state.crackY) > 20 || !fish.inTank) {
      fish.x = TANK.right - TANK.wall - 5 - fish.size / 2;
      fish.vx *= -0.5;
      fish.direction = -1;
    }
  }
  
  // Water level boundary
  if (fish.y - fish.size / 2 < TANK.y + TANK.wall) {
    fish.y = TANK.y + TANK.wall + fish.size / 2;
    fish.vy *= -0.3;
  }
  if (fish.y + fish.size / 2 > state.waterLevel) {
    fish.y = state.waterLevel - fish.size / 2;
    fish.vy *= -0.5;
  }
  
  fish.sway += 0.05;
  fish.x += fish.vx;
  fish.y += fish.vy;
}
```

This should handle the fish behavior properly:
- In setup: normal swimming
- In breaching: swim against current, some get swept through
- Outside: gravity + puddle swimming

Let me also handle the plants:

```javascript
function updatePlants() {
  for (const plant of state.plants) {
    plant.sway += 0.02;
    plant.segments = [];
    
    for (let i = 0; i <= plant.segCount; i++) {
      const t = i / plant.segCount;
      const y = plant.baseY - t * plant.height;
      
      const current = computeCurrent(plant.baseX, y);
      const currentBend = current.x * plant.flexibility * bendFactor * 8;
      const randomSway = Math.sin(plant.sway + i * 0.7) * 1.5 * (1 - t * 0.5);
      
      // Base drift
      const baseDrift = plant.baseOffset;
      
      plant.segments.push({
        x: plant.baseX + currentBend + randomSway + baseDrift,
        y: y,
      });
    }
    
    // Base drift from current
    const baseCurrent = computeCurrent(plant.baseX, plant.baseY);
    plant.baseOffset += baseCurrent.x * 0.005;
    plant.baseOffset *= 0.93;
  }
}
```

OK, I think I have all the pieces. Let me write the complete, polished code now.

Let me think about the plant `bendFactor`. I want the plant to bend more at the top:
```javascript
const bendFactor = t * t; // bend increases with height (quadratic)
```

Or even:
```javascript
const bendFactor = Math.pow(t, 1.5); // less than quadratic but more than linear
```

Let me use t (linear) for simplicity, or t² for more bending at top.

Actually, a real plant bends like a cantilever: the deflection is proportional to t² (quadratic). So let me use t².

Wait, for a cantilever beam, the deflection is proportional to (distance from base)² * (length - distance). Actually, for a cantilever with end load:
δ(x) = (P * x² / (6EI)) * (3L - x)
which is 0 at x=0 and 0 at x=L, maximum somewhere in between.

For simplicity, let me use:
```javascript
const bendFactor = t * t * (1 - t * 0.7); // peaks around t=0.7
```

Or even simpler:
```javascript
const bendFactor = t; // linear
```

With t * t for more bend at top:
```javascript
const bendFactor = t * t * 2; // peaks at 2 at the top
```

Let me just use `t` for simplicity. The bending will be proportional to height. That's fine.

Actually, let me use `t * 1.5` to exaggerate the bending at the top:
```javascript
const bendFactor = t;
const currentBend = current.x * plant.flexibility * bendFactor * 10;
```

This should give a nice curved bend. OK, let me finalize the code.

Let me also think about the rendering of plants. I want:
- Thick, green stems that bend
- Some leaves or side shoots
- A base (root) at the bottom

```javascript
function renderPlant(plant) {
  if (!plant.segments || plant.segments.length === 0) return;
  
  // Draw stem
  ctx.lineCap = 'round';
  for (let i = 0; i < plant.segments.length - 1; i++) {
    const s1 = plant.segments[i];
    const s2 = plant.segments[i + 1];
    
    // Thicker at base, thinner at top
    const thickness = 3 - (i / plant.segments.length) * 1.5;
    ctx.lineWidth = thickness;
    
    // Color gradient (darker at base, lighter at top)
    const t = i / plant.segments.length;
    ctx.strokeStyle = t < 0.5 ? plant.color : '#4ade80';
    ctx.beginPath();
    ctx.moveTo(s1.x, s1.y);
    ctx.lineTo(s2.x, s2.y);
    ctx.stroke();
  }
  
  // Leaves
  ctx.fillStyle = plant.color;
  for (let i = 1; i < plant.segments.length; i += 2) {
    const seg = plant.segments[i];
    ctx.beginPath();
    ctx.ellipse(seg.x, seg.y, 3, 8, 0, 0, Math.PI * 2);
    ctx.fill();
  }
  
  // Base/roots
  ctx.fillStyle = '#787169';
  ctx.beginPath();
  ctx.arc(plant.baseX, plant.baseY, 6, 0, Math.PI * 2);
  ctx.fill();
}
```

Good. Now let me think about the overall rendering of the tank. I want it to look realistic:

```javascript
function renderTank() {
  // Tank frame (metal)
  ctx.fillStyle = '#334159';
  // Left frame
  ctx.fillRect(TANK.x, TANK.y, TANK.wall, TANK.h);
  // Top frame
  ctx.fillRect(TANK.x, TANK.y, TANK.w, TANK.wall);
  // Bottom frame
  ctx.fillRect(TANK.x, TANK.bottom - TANK.wall, TANK.w, TANK.wall);
  
  // Right wall (only in setup mode)
  if (state.mode === 'setup') {
    // Draw right wall with glass effect
    ctx.fillStyle = 'rgba(173, 216, 230, 0.3)';
    ctx.fillRect(TANK.right - TANK.wall, TANK.y, TANK.wall, TANK.h);
    // Highlight
    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
    ctx.fillRect(TANK.right - 2, TANK.y, 2, TANK.h);
    // Crack
    renderCrack();
  } else {
    // Right frame only (wall broken)
    ctx.fillStyle = '#334159';
    ctx.fillRect(TANK.right - TANK.wall, TANK.y, TANK.wall, TANK.wall); // top corner
    ctx.fillRect(TANK.right - TANK.wall, TANK.bottom - TANK.wall, TANK.wall, TANK.wall); // bottom corner
  }
  
  // Glass tint (inside tank)
  ctx.fillStyle = 'rgba(173, 216, 230, 0.05)';
  ctx.fillRect(TANK.x + TANK.wall, TANK.y + TANK.wall, TANK.w - TANK.wall * 2, TANK.h - TANK.wall * 2);
}
```

Hmm, let me think about this more. In setup mode, the right wall is intact glass. I should draw it as a transparent blue panel with a visible crack. In breaching mode, the right wall is broken - I just draw the frame corners.

Let me also add some reflections on the glass:
```javascript
// Glass reflection
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
ctx.fillRect(TANK.right - TANK.wall, TANK.y + 10, TANK.wall / 3, TANK.h / 3);
```

OK, I think I have a good enough plan. Let me write the complete code now.

For the complete rendering function:

```javascript
function render() {
  // Clear
  ctx.clearRect(0, 0, W, H);
  
  // 1. Background
  renderBackground();
  
  // 2. Floor
  renderFloor();
  
  // 3. Tank
  renderTank();
  
  // 4. Water
  renderWater();
  
  // 5. Substrate
  renderSubstrate();
  
  // 6. Plants
  renderPlants();
  
  // 7. Rocks
  renderRocks();
  
  // 8. Fish
  renderFish();
  
  // 9. Toy
  renderToy();
  
  // 10. Right wall with crack (setup mode)
  if (state.mode === 'setup') renderRightWallWithCrack();
  
  // 11. Jet particles
  renderJet();
  
  // 12. Fragments
  renderFragments();
  
  // 13. Objects outside tank
  renderOutsideObjects();
  
  // 14. Bubbles
  renderBubbles();
  
  // 15. Water surface
  renderWaterSurface();
  
  // 16. Puddle
  renderPuddle();
  
  // 17. Tank shadow
  renderTankShadow();
}
```

OK, I need to be more careful about the rendering. Let me simplify:

```javascript
function render() {
  ctx.clearRect(0, 0, W, H);
  
  renderBackground();
  renderFloor();
  renderTankFrame();
  
  // In setup mode, draw right wall
  if (state.mode === 'setup') {
    renderRightWall();
    renderCrack();
  }
  
  // Water inside tank
  renderWaterFill();
  renderSubstrate();
  
  // Objects inside tank
  renderPlants();
  renderRocks();
  renderFish();
  renderToy();
  
  // Water surface waves
  renderWaterSurface();
  
  // Bubbles in water
  renderBubbles();
  
  // Breach effects (jet, fragments)
  renderJet();
  renderFragments();
  
  // Objects outside tank
  renderOutsideObjects();
  
  // Puddle on floor
  renderPuddle();
  
  // Tank shadow
  renderTankShadow();
}
```

OK wait, I'm overcomplicating the rendering. Let me just write it in a straightforward way without too many separate functions. I'll inline things where it makes sense.

Let me just write the complete code now. I'll create the file and then test it.

I need to be efficient with my time. Let me write the complete code, save it, test it, fix issues, and finalize.

Here's the complete code I'm going to write:

Actually, let me think about one more thing. The water level is tracked as a single y-value. But the water inside the tank is a rectangle. When the water level drops, the rectangle shrinks. I also need to handle the case where water level is above the tank top (shouldn't happen) or below the tank bottom (tank is empty).

```javascript
function renderWaterFill() {
  const waterTop = Math.max(state.waterLevel, TANK.innerBottom);
  if (waterTop >= TANK.innerBottom) return; // no water
  
  const waterHeight = TANK.innerBottom - waterTop;
  
  // Gradient
  const grad = ctx.createLinearGradient(TANK.innerLeft, waterTop, TANK.innerLeft, TANK.innerBottom);
  grad.addColorStop(0, '#60a5fa');
  grad.addColorStop(0.7, '#3b82f6');
  grad.addColorStop(1, '#1e40af');
  ctx.fillStyle = grad;
  ctx.fillRect(TANK.innerLeft, waterTop, TANK.innerWidth, waterHeight);
  
  // Light rays
  ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
  for (let i = 0; i < 3; i++) {
    const width = 2;
    const x = TANK.innerLeft + i * 40 + 10;
    ctx.fillRect(x, waterTop, width, waterHeight);
  }
}
```

This adds some light ray effects for visual appeal.

OK, I'm going to write the complete code now. Let me create the file.

Let me think about the complete set of functions I need:

Init:
- initState()
- setupEvents()

Physics:
- computeCurrent(x, y)
- isInWater(obj)
- updateWater()
- updateJet()
- updateBubbles()
- updateObjects()
  - updateRock(rock)
  - updateToy(toy)
  - updateFish(fish)
- updatePlants()
- updateFragments()
- updatePuddle()
- handleObjectCollisions()

Rendering:
- render()
  - renderBackground()
  - renderFloor()
  - renderTankFrame()
  - renderRightWall() (setup mode)
  - renderCrack() (setup mode)
  - renderWaterFill()
  - renderSubstrate()
  - renderPlants()
  - renderRocks()
  - renderFish()
  - renderToy()
  - renderWaterSurface()
  - renderBubbles()
  - renderJet()
  - renderFragments()
  - renderPuddle()
  - renderTankShadow()

Actions:
- triggerBreach()
- reset()

Main loop:
- loop()

Let me write all of this now. I'll create the complete index.html file.

OK I realize I've been planning for way too long. Let me just write the code now. I'll make it work and iterate.

Here's the strategy:
1. Write the complete code
2. Save it
3. Open in browser
4. Check the behavior
5. Fix issues
6. Repeat

Let me write the code now.

One key thing I want to make sure: the water level should fall continuously and visibly. Let me make the drain rate a bit faster to ensure it's noticeable.

Also, I want the jet to be clearly visible. Let me make the particles a bit larger and add a glow.

And I want the puddle to spread noticeably. Let me make the spread rate fast enough to see it grow.

Let me also add some spray particles (small particles that disperse quickly) at the jet for visual appeal.

OK, writing the code now. Final version:

Let me think about one more important thing: the order in which objects are updated vs rendered. In the update phase, I update all physics. In the render phase, I draw everything. This is the standard game loop approach.

Let me also think about frame rate independence. I'll use a fixed timestep (1/60) for physics and just render as fast as possible. Since requestAnimationFrame is typically 60 FPS, this should work.

For the dt (delta time), I'll compute it from timestamps:
```javascript
let lastTime = 0;
function loop(timestamp) {
  const dt = (timestamp - lastTime) / 16.67; // normalized to 60 FPS
  lastTime = timestamp;
  
  update(dt);
  render();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
```

Actually, for simplicity, let me just use a fixed step:
```javascript
function loop() {
  update();
  render();
  requestAnimationFrame(loop);
}
```

And in update(), I use frame-based physics (no dt). This is simpler and works well for 60 FPS.

But if the frame rate drops, physics will slow down. That's acceptable for this simulation.

OK, writing the code now. I'll use frame-based physics.

Let me also think about what TANK.innerWidth is:
TANK.innerWidth = TANK.w - TANK.wall * 2 = 320 - 16 = 304

And TANK.innerBottom = TANK.y + TANK.h - TANK.wall = 100 + 450 - 8 = 542
TANK.innerTop = TANK.y + TANK.wall = 108
TANK.innerLeft = TANK.x + TANK.wall = 288
TANK.innerRight = TANK.x + TANK.w - TANK.wall = 592

OK, these values are correct.

Let me write the complete code now. I'm going to create the file.

Let me think about one final detail: the "Breach" button should be disabled after clicking, and the "Reset" button should be enabled. Both should always be clickable for Reset. When Reset is clicked, the Breach button is re-enabled.

```javascript
function triggerBreach() {
  state.mode = 'breaching';
  state.fragments = createFragments(state.crackY);
  state.puddleX = TANK.right + 120 + (TANK.bottom - state.crackY) * 0.5;
  document.getElementById('breachBtn').disabled = true;
  document.getElementById('breachBtn').textContent = 'Breached';
  document.getElementById('instructions').textContent = 'Water is draining...';
}

function reset() {
  initState();
  document.getElementById('breachBtn').disabled = false;
  document.getElementById('breachBtn').textContent = 'Breach';
  document.getElementById('instructions').textContent = 'Drag the crack on the right side, then click Breach';
}
```

OK, I'm writing the complete code now. Here it is:

Actually, let me reconsider the button text. The instructions say "Breach" and "Reset" buttons. Let me keep the button text as "Breach" and "Reset", just enable/disable appropriately.

```javascript
// Breach button
breachBtn.disabled = state.mode !== 'setup';

// Or:
breachBtn.disabled = (state.mode !== 'setup');
```

Let me update the button state in the render function or after mode changes.

OK, I'm going to write the code now. Let me create the file and then iterate.

Here's my complete implementation. I'll write it now.

Let me think about the rendering of the jet one more time. The jet particles emerge from the crack (at the right wall, crackY position). They fly rightward and downward (gravity). I want them to be clearly visible.

I'll render them as:
- Small circles (3-4px radius)
- Blue-white color with alpha based on life
- Optional glow (shadowBlur)
- Maybe a trail effect

Let me also add "mist" particles (smaller, fade quickly) for spray effect:
```javascript
// Mist particles (spawned at crack, disperse quickly)
state.jetParticles.push({
  x: ..., y: ...,
  vx: jetVel + (Math.random() - 0.5) * 1,
  vy: (Math.random() - 0.5) * 0.5,
  life: 15 + Math.random() * 10,
  maxLife: 30,
  size: 1 + Math.random() * 2,
  isMist: true,
});
```

Hmm, let me not overcomplicate. I'll just have regular particles with varying sizes and lifetimes.

OK, writing the code now. FINAL VERSION.

Let me also think about the fish exiting the tank. When a fish is swept through the breach:
1. It exits the tank (x > TANK.right)
2. It falls through the air (gravity)
3. It lands in the puddle (or on the floor)
4. It swims in the puddle (or flops on the floor)

For the transition:
```javascript
// When fish is at breach and gets swept
fish.inTank = false;
fish.vx = 3 + current.x;  // thrown outward
fish.vy = -0.5;  // initial downward or upward velocity
```

Then in the next frame, the fish is outside the tank and falls with gravity, eventually landing in the puddle.

The puddle is at ROOM_FLOOR (555). The fish falls from around y=450 (crackY) to y=555, which is 105 pixels. With gravity 0.18, time to fall = sqrt(2*105/0.18) ≈ 34 frames ≈ 0.57 seconds. That's a quick fall. Good.

After landing in the puddle, the fish swims around. The puddle is shallow (depth based on puddleSpread), so the fish might also flop on the floor.

OK, I think this is all fine. Let me write the complete code now.

Let me also handle the toy leaving the tank. If the toy is pushed against the breach opening:
- The toy checks if it fits through the opening (size < 30)
- If it doesn't fit (size 36 > 30), it's pushed back
- The toy floats at the water surface, so as water drains, it goes down
- When water level reaches the tank bottom, the toy falls

Actually, the toy floats at the water surface. As water drains:
1. Toy follows water surface down
2. When water level = crackY (drain stops), toy is at y = crackY - 18
3. If water level continues to drop (below crackY), the toy is still floating
4. When water level reaches tank bottom, toy falls to bottom

Wait, the drain stops when waterLevel reaches crackY. So the toy stops at y = crackY - 18 ≈ 432. Then the toy is just floating on a small puddle of water at the bottom of the tank.

Actually, the water level only drains to the crack, not all the way to the bottom. So there's still water in the tank below the crack. The toy would float at the new water level (which is at crackY).

Hmm, but the drain stops when waterLevel = crackY. So the final water level in the tank is at crackY (e.g., 450). The toy floats at y = 450 - 18 = 432. There's still water in the tank from y=450 to y=542 (tank bottom).

That makes sense. The tank still has water below the crack level. The toy floats at the surface.

But wait, I said the drain stops when waterLevel >= crackY. Let me reconsider. The water drains until the water level reaches the crack. At that point, no more water flows out (the water level is at the crack, not above it). The tank still has water below the crack level.

This is correct! The tank doesn't completely empty - it drains until the water level is at the crack height. The remaining water in the tank is below the crack.

So the toy floats at the remaining water level (waterLevel = crackY). Rocks are at the bottom, unaffected. Plants are partially submerged. Fish can still swim in the remaining water.

This is a nice behavior. The simulation shows:
1. Water jets out through the crack
2. Water level drops to the crack
3. Flow stops
4. Tank still has water below the crack
5. Puddle forms on the floor outside

Perfect. Let me write the code now.

One more thing: the water level should never go below the tank bottom (TANK.innerBottom = 542). The crack is at most at 525, so waterLevel will stop at 525 (crackY). 542 - 525 = 17 pixels of water remaining at the bottom. That's fine.

Actually wait, let me reconsider. If crackY = 450 and waterLevel starts at 370:
- h = 370 - 450 = -80 → h < 0, so no flow!

That's wrong! The crack is BELOW the water line, so water flows out. Let me check my sign convention.

waterLevel = 370 (y-coordinate, smaller = higher)
crackY = 450 (y-coordinate, larger = lower, below water)

h = waterLevel - crackY = 370 - 450 = -80

That's negative, which means no flow. But the crack IS below the water, so water SHOULD flow out!

I have a sign error. Let me fix it:
h should be the height of water above the crack = crackY - waterLevel = 450 - 370 = 80

Wait no. Let me think again.
- waterLevel = 370 → water surface at y=370
- crackY = 450 → crack at y=450
- Water is above the crack (water surface is higher, i.e., lower y)
- Height of water above crack = waterLevel - crackY? No...

Actually:
- y=0 is top of screen, y increases downward
- waterLevel = 370 → water surface
- crackY = 450 → crack position (below water surface, since 450 > 370)
- Water depth above crack = crackY - waterLevel = 450 - 370 = 80

So h = crackY - waterLevel. When the crack is below the water surface, h > 0.

But when the water level drops (waterLevel increases, since water level goes down):
- waterLevel increases from 370 to 450 (crack level)
- h = crackY - waterLevel = 450 - 450 = 0 → no flow

So h = crackY - waterLevel. When waterLevel < crackY, water is above crack, h > 0, flow occurs.
When waterLevel >= crackY, water is at or below crack, h <= 0, no flow.

This is correct! Let me fix my code:
```javascript
const h = state.crackY - state.waterLevel;
```

And for the current:
```javascript
const strength = 0.15 * Math.sqrt(h) * Math.exp(-distFromBreach / 70);
```

And for the water level update:
```javascript
if (h > 0.5) {
  const drainSpeed = 0.05 * Math.sqrt(h);
  state.waterLevel += drainSpeed;  // water level increases (drops down)
}
```

And the check for stopping:
```javascript
if (state.waterLevel >= state.crackY - 0.5) {
  state.mode = 'settled';
  state.waterLevel = state.crackY;
}
```

This is correct now. Let me make sure all the physics uses the right sign convention:
- y increases downward (standard canvas coordinates)
- waterLevel is the y-coordinate of the water surface
- As water drains, waterLevel increases (surface moves down)
- h = crackY - waterLevel = height of water above crack
- When h > 0, water flows out
- When h <= 0, no flow

OK, good. Let me also fix the isInWater check:
```javascript
function isInWater(obj) {
  return obj.y < state.waterLevel && obj.y > TANK.y;
}
```

This returns true when the object is below the water surface (y < waterLevel) and inside the tank (y > TANK.y). Correct.

And the current check:
```javascript
const insideTank = x >= TANK.innerLeft && x <= TANK.innerRight 
                  && y >= TANK.innerTop && y <= state.waterLevel;
```

Also correct - object must be in water (y < waterLevel) and inside tank horizontally.

OK, I'm confident in the physics now. Let me write the complete code.

Let me also think about the toy position. The toy floats at the water surface:
```javascript
toy.y = state.waterLevel - toy.size / 2;
```

As waterLevel increases (water drops), toy.y increases (toy drops). Correct.

For the fish boundary:
```javascript
if (fish.y + fish.size / 2 > state.waterLevel) {
  fish.y = state.waterLevel - fish.size / 2;
  fish.vy *= -0.5;
}
```

Fish can't go below the water surface. Correct.

OK, I'm going to write the complete code now. I'll create the file and then test it.

Let me also think about what happens when the toy is pushed toward the breach. The toy floats at the water surface. The current pushes it rightward. If it reaches the right wall near the crack:
- The toy is at y ≈ waterLevel - 18 (floating at surface)
- The crack is at crackY
- If |toy.y - crackY| < 15, the toy is at the opening
- But toy size (36) > opening (30), so it can't pass through
- The toy is pushed against the wall

The toy stays in the tank. As water drains, the toy follows the water level down. Eventually, when water level = crackY, the toy is at y = crackY - 18. If crackY = 450, toy is at y = 432. The remaining water in the tank is from y=450 to y=542.

The toy floats on this remaining water. Good.

OK, I'm writing the code now. Let me create the complete file. I'll be very careful with the physics and rendering.

Let me also make sure the Reset button works correctly. It should:
1. Reset waterLevel to initialWaterLevel (370)
2. Reset crackY to 450
3. Reset mode to 'setup'
4. Recreate all objects at initial positions
5. Clear all particles, fragments, puddle
6. Re-enable Breach button
7. Update instructions text

I'll implement this with the initState() function.

OK, here is the complete code. Let me write it now.

Hmm, actually I realize I should also handle the fish in the puddle. When fish are outside the tank (in the puddle), they should:
1. Fall from the breach (gravity)
2. Land in the puddle (or on the floor)
3. Swim in the puddle (if water deep enough)
4. Or flop on the floor (if no water)

The puddle depth is proportional to puddleVolume. Let me compute:
```javascript
const puddleDepth = Math.min(state.puddleSpread * 0.2, 15); // max 15 pixels deep
```

If puddleDepth > fish.size, the fish is swimming in water. Otherwise, it's flopping on the floor.

For fish in the puddle:
```javascript
if (fish.y > ROOM_FLOOR - puddleDepth - fish.size) {
  // In puddle water
  fish.vy *= 0.95; // water resistance
  // Swim randomly
  fish.vx += (Math.random() - 0.5) * 0.3;
} else {
  // On floor, flopping
  fish.vx *= 0.92;
}
```

OK, this is good enough. Let me write the complete code now.

I'm going to write the complete implementation and create the file. Let me do it now.

Let me also think about the rendering of objects outside the tank. These include:
- Fish that were swept through the breach
- Toy if it was carried out (unlikely with current design)
- Any other objects near the breach

I'll draw these after the tank and water:
```javascript
function renderOutsideObjects() {
  for (const obj of state.objects) {
    if (obj.type === 'fish' && !obj.inTank) {
      renderFish(obj);
    } else if (obj.type === 'toy' && !obj.inTank) {
      renderToy(obj);
    }
  }
}
```

OK, I'm going to write the complete code now. Let me create the file.

Here's the full implementation. I'll write it as a single HTML file with inline CSS and JavaScript.

I'll write it now, being careful about all the details I've discussed.

Let me also think about what happens when the mode changes to 'settled'. In settled mode:
- Water is at crackY level
- No more jet particles
- Water level doesn't change
- Objects are at rest (or still floating/swimming)
- Puddle is formed
- Fragments have settled
- Buttons: Breach disabled, Reset enabled

When the user clicks Reset, everything goes back to setup mode.

OK, writing the code now. Here it is:

Wait, I also need to handle the case where fragments are in water vs air. Fragments are created at the crack position (inside water, since crackY is below waterLevel initially). As they fly out and fall:
1. Initially in water: high drag, slow movement
2. Break through surface: transition to air
3. Fall with gravity + air drag
4. Hit floor: bounce and settle

For the fragment physics:
```javascript
function updateFragments() {
  for (const frag of state.fragments) {
    if (frag.y < state.waterLevel) {
      // In water: high resistance
      frag.vx *= 0.93;
      frag.vy *= 0.95;
      frag.vy += GRAVITY * 0.4; // slower fall in water
    } else {
      // In air
      frag.vy += GRAVITY;
      frag.vx *= 0.97;
      frag.vy *= 0.97;
    }
    
    frag.x += frag.vx;
    frag.y += frag.vy;
    frag.angle += frag.rotationSpeed;
    
    // Floor collision
    if (frag.y > ROOM_FLOOR)

Let me build an interactive 2D aquarium breach simulation. I need to create a single self-contained HTML file with inline CSS and JavaScript. Let me design the physics and rendering carefully.

Let me think about the key components:

1. **Glass tank** - a rectangular tank with water
2. **Water** - fills the tank to a level
3. **Objects** - fish, rocks, plants, toy, cracks
4. **Physics** - gravity, buoyancy, drag, current
5. **Breach** - crack that user selects, then panel breaks, water flows out

Let me write the code. I'll use a canvas for rendering and requestAnimationFrame for the simulation loop.

Key physics:
- Water has a waterline that falls as it flows out
- Outflow rate depends on water depth above the opening (Torricelli's law: v = sqrt(2gh))
- Jet curves downward due to gravity
- Puddle forms on the floor
- Objects respond to buoyancy (float/sink), drag, and current
- Fish swim against current, some get swept out
- Glass fragments rotate and collide

Let me write this now.

Let me load it in the browser and test it.

The console shows a warning but it loaded. Let me inspect the canvas to see how it renders. Let me take a screenshot.

The browser tool doesn't support images. Let me inspect the DOM and console to understand state. Let me check if there are any JS errors. The console only shows the warning. Let me try to interact - click on the canvas to place the crack.

Actually, the browser tool doesn't return images, only console and DOM. Let me interact with the canvas by clicking. The crack should be on the left wall below the waterline.

Let me position the crack. The tank left wall is at x=160. The water level is at tank.y + tank.h*0.6. Let me think about coordinates.

tank.x=160, tank.y=80, tank.w=W-320, tank.h=H-180. Water level at y=80 + (H-180)*0.6.

Let me click on the left wall. I need to drag the crack vertically. Let me click at around x=170, y at water level - some amount.

Let me just do interactions and check the console for errors. The key issue: the browser tool doesn't show screenshots, so I'll rely on console + DOM inspection.

Let me click to place the crack near the left wall below waterline. Let me try clicking around x=160, y=300 or so. But I don't know exact W,H. Let me just click somewhere on the left wall.

Actually let me reconsider. The browser tool coordinates: 1200x800 viewport. Let me click at x=160-ish, y somewhere between tank.y+20=100 and waterLevel.

Let me compute: H=800 (viewport), but actual window height might be 800. tank.h = 800-180=620. waterLevel = 80 + 620*0.6 = 80+372 = 452. So waterline at y≈452. Crack should be between y=100 and y=447 (waterLevel-5).

Let me click at x=165, y=380 to place the crack, then drag. Actually I need to drag, but placing is enough. Let me click at x=165, y=300.

Wait, the crack detection: mx>=tank.x-20 && mx<=tank.x+20 && my<waterLevel && my>tank.y+20 && my<waterLevel-5. tank.x=160, so mx between 140 and 180. my between 100 and 447.

Let me click at x=160, y=300.

Now let me drag the crack a bit to simulate dragging. Actually, placing is enough for a crack. Let me drag to a slightly different position then release, then press Breach.

Let me drag the crack down a bit.

Hmm, clicking at x=660, y=40 - that hit the Reset button! Because the center was at 50% width, and Reset is the second button. Let me re-find the Breach button. Actually the UI is centered at top: Breach then Reset. So Breach is left, Reset is right. The click at x=660, y=40 hit Reset. The instructions changed to "Reset complete" confirming it hit Reset.

So the Reset button is around x=600-700, y=20-60. I need to find Breach. Breach is to the left. Let me click the left button area. If Reset is at ~660, then Breach is at ~580. Let me click x=580, y=40.

Wait, but Reset restored the scene (it says "Reset complete"). That's fine - it confirms Reset works. Now I need to re-place the crack and press Breach (the left button). Let me re-place the crack and press Breach.

Actually wait — the reset happened, so now I need to re-place the crack. Let me re-place crack at x=160, y=320, then press Breach button (left button).

Let me first re-place the crack.

Crack placed again. Now click the Breach button (left button, around x=580, y=40).

Breach activated, instructions changed to "Breach in progress". The simulation is running. Let me wait a bit and inspect the DOM to see if there are any runtime errors in the console. Let me wait and re-inspect.