diff --git a/web/world/index.html b/web/world/index.html
index a4479b7..27808d9 100644
--- a/web/world/index.html
+++ b/web/world/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>SHADES — yard (M0)</title>
+<title>SHADES — rig it, then survive the night</title>
 <style>
   html, body { margin: 0; height: 100%; overflow: hidden; background: #9fc4dd; }
   canvas { display: block; width: 100%; height: 100%; }
@@ -28,7 +28,6 @@
   <canvas id="c"></canvas>
   <div id="banner"></div>
   <div id="dev">booting…</div>
-  <div id="help">WASD move · shift run · RMB drag orbit · wheel zoom · Enter next phase</div>
 
   <script type="importmap">
     { "imports": { "three": "./vendor/three.module.js",
diff --git a/web/world/js/hud.js b/web/world/js/hud.js
new file mode 100644
index 0000000..0fd1b67
--- /dev/null
+++ b/web/world/js/hud.js
@@ -0,0 +1,392 @@
+/**
+ * SHADES — the face. Lane A owns this file.
+ *
+ * Everything the game already simulates is invisible to a stranger without this:
+ * loads, the gust warning, whether the garden is actually getting hit. So the
+ * rule here is that the HUD only ever READS. It takes no decisions, owns no
+ * state worth keeping, and if you deleted it the sim would run identically —
+ * which is also why it can be this chatty without anything drifting.
+ *
+ * Two things earn their place as world-anchored rather than screen-anchored:
+ * the corner load bars (a number in a corner of the screen can't tell you WHICH
+ * shackle is about to go, and that's the whole "…the shackle, I knew about the
+ * shackle" moment) and the repair prompt, which Lane D already owns.
+ */
+
+import * as THREE from '../vendor/three.module.js';
+import { STORM_LEN } from './contracts.js';
+
+const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v);
+const kmh = (ms) => ms * 3.6;
+
+// Load bar colours: green → amber → red. The amber band is deliberately wide;
+// a corner at 60% in a lull is one gust from 100% and the player should feel
+// that before the bar turns red on them.
+const BAR_OK = 0x6ee06e, BAR_WARN = 0xffc24a, BAR_HOT = 0xff5b4a, BAR_DEAD = 0x7a2f2f;
+
+const CSS = `
+#hud { position:fixed; inset:0; pointer-events:none; z-index:10;
+  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:#dde5ea;
+  text-shadow:0 1px 3px #000a; user-select:none; }
+#hud .panel { position:absolute; background:#0d1418d9; border:1px solid #2c3a44;
+  border-radius:6px; padding:8px 10px; }
+#hud-top { top:10px; left:50%; transform:translateX(-50%); text-align:center; min-width:280px; }
+#hud-wind { font-size:15px; font-weight:700; letter-spacing:.04em; }
+#hud-clock { color:#8ba0ad; }
+#hud-gust { position:absolute; top:78px; left:50%; transform:translateX(-50%);
+  font:700 20px/1 ui-monospace,Menlo,monospace; letter-spacing:.16em; color:#ffd27a;
+  background:#3a2a0ce0; border:1px solid #7a5a1a; border-radius:5px; padding:8px 16px;
+  opacity:0; transition:opacity .12s; }
+#hud-gust.on { opacity:1; }
+#hud-garden { bottom:12px; left:12px; min-width:210px; }
+#hud-bar { height:9px; background:#00000066; border-radius:5px; overflow:hidden; margin-top:5px; }
+#hud-bar i { display:block; height:100%; width:100%; background:#6ee06e; transition:width .2s,background .3s; }
+#hud-carry { bottom:12px; right:12px; text-align:right; }
+#hud-events { position:absolute; bottom:70px; left:12px; max-width:420px; }
+#hud-events div { color:#ffd27a; margin-top:2px; }
+#hud-help { position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
+  color:#93a6b2; opacity:.85; white-space:nowrap; }
+
+#hud-card { position:fixed; inset:0; z-index:30; display:none; place-items:center;
+  background:#060a0dc4; backdrop-filter:blur(3px);
+  font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; color:#dde5ea; }
+#hud-card.on { display:grid; }
+#hud-card .card { background:#0d1418; border:1px solid #2f3f4a; border-radius:9px;
+  padding:22px 26px; min-width:440px; max-width:620px; pointer-events:auto; }
+#hud-card h1 { margin:0 0 2px; font-size:19px; letter-spacing:.16em; color:#fff; }
+#hud-card h2 { margin:0 0 16px; font-size:12px; font-weight:400; color:#8ba0ad; letter-spacing:.04em; }
+#hud-card .row { display:flex; justify-content:space-between; gap:18px; padding:3px 0;
+  border-bottom:1px solid #1c262d; }
+#hud-card .row b { font-weight:700; color:#fff; }
+#hud-card .storm { display:block; width:100%; text-align:left; margin:7px 0; padding:10px 12px;
+  background:#121c23; border:1px solid #2f3f4a; border-radius:6px; color:#dde5ea; cursor:pointer;
+  font:inherit; transition:border-color .15s,background .15s; }
+#hud-card .storm:hover { border-color:#7ee0ff; background:#16242c; }
+#hud-card .storm .name { font-weight:700; color:#fff; letter-spacing:.08em; }
+#hud-card .storm .stat { color:#8ba0ad; }
+#hud-card .go { margin-top:16px; padding:9px 18px; background:#1d3d2a; border:1px solid #3f7a52;
+  border-radius:6px; color:#a8f0b8; cursor:pointer; font:inherit; font-weight:700; letter-spacing:.1em; }
+#hud-card .go:hover { background:#255033; }
+#hud-card .verdict { margin:14px 0 0; padding:10px 12px; border-radius:6px; font-weight:700;
+  letter-spacing:.05em; }
+#hud-card .verdict.win { background:#12321c; border:1px solid #2c6b3c; color:#7fce6a; }
+#hud-card .verdict.lose { background:#3a1618; border:1px solid #7d2b2b; color:#ff8f86; }
+`;
+
+/**
+ * @param {object} d
+ * @param {THREE.Scene} d.scene
+ * @param {THREE.Camera} d.camera
+ * @param {object} d.game     the phase machine
+ * @param {object} d.world
+ * @param {object} d.wind     the router
+ * @param {object} d.player
+ * @param {object} d.rig      SailRig
+ * @param {object} d.garden   {hp}
+ * @param {() => object} d.getSky      skyfx is rebuilt per storm, so read it late
+ * @param {() => number} d.getWindTime
+ * @param {{text:string,t:number}[]} d.events
+ */
+export function createHud(d) {
+  const style = document.createElement('style');
+  style.textContent = CSS;
+  document.head.appendChild(style);
+
+  const root = document.createElement('div');
+  root.id = 'hud';
+  root.innerHTML = `
+    <div class="panel" id="hud-top">
+      <div id="hud-wind">--</div>
+      <div id="hud-clock">--</div>
+    </div>
+    <div id="hud-gust">GUST INCOMING</div>
+    <div class="panel" id="hud-garden">
+      <div><span id="hud-garden-label">GARDEN</span> <b id="hud-garden-pct">100%</b></div>
+      <div id="hud-bar"><i></i></div>
+      <div id="hud-shade" style="color:#8ba0ad"></div>
+    </div>
+    <div class="panel" id="hud-carry" style="display:none"></div>
+    <div id="hud-events"></div>
+    <div id="hud-help"></div>
+  `;
+  document.body.appendChild(root);
+
+  const card = document.createElement('div');
+  card.id = 'hud-card';
+  document.body.appendChild(card);
+
+  const $ = (id) => root.querySelector(id);
+  const elWind = $('#hud-wind'), elClock = $('#hud-clock'), elGust = $('#hud-gust');
+  const elPct = $('#hud-garden-pct'), elBar = $('#hud-bar i'), elShade = $('#hud-shade');
+  const elGardenLabel = $('#hud-garden-label');
+  const elCarry = $('#hud-carry'), elEvents = $('#hud-events'), elHelp = $('#hud-help');
+
+  // --- world-anchored corner load bars ------------------------------------
+  // A bar per corner, floating at the corner it describes. Geometry rather than
+  // a redrawn canvas: the fill is a scaled quad, so animating it is free and a
+  // flogging corner's bar can track it at 60 Hz without touching a texture.
+  const barGroup = new THREE.Group();
+  barGroup.visible = false;
+  d.scene.add(barGroup);
+
+  const quad = new THREE.PlaneGeometry(1, 1);
+  quad.translate(0.5, 0, 0);              // pivot on the left edge, so scale.x grows rightward
+  const BAR_W = 0.9, BAR_H = 0.1;
+
+  const bars = [];
+  function ensureBars(n) {
+    while (bars.length < n) {
+      const holder = new THREE.Group();
+      const bg = new THREE.Mesh(quad, new THREE.MeshBasicMaterial({
+        color: 0x0a1016, transparent: true, opacity: 0.75, depthTest: false,
+      }));
+      bg.scale.set(BAR_W, BAR_H, 1);
+      bg.position.x = -BAR_W / 2;
+      const fill = new THREE.Mesh(quad, new THREE.MeshBasicMaterial({
+        color: BAR_OK, depthTest: false,
+      }));
+      fill.position.x = -BAR_W / 2;
+      fill.scale.set(0.001, BAR_H * 0.72, 1);
+      const label = makeLabel();
+      label.position.y = 0.19;
+      holder.add(bg, fill, label);
+      holder.renderOrder = 999;
+      barGroup.add(holder);
+      bars.push({ holder, fill, label, lastText: '' });
+    }
+    for (let i = 0; i < bars.length; i++) bars[i].holder.visible = i < n;
+  }
+
+  function makeLabel() {
+    const c = document.createElement('canvas');
+    c.width = 256; c.height = 64;
+    const tex = new THREE.CanvasTexture(c);
+    const sp = new THREE.Sprite(new THREE.SpriteMaterial({ map: tex, depthTest: false, transparent: true }));
+    sp.scale.set(1.5, 0.375, 1);
+    sp.userData.ctx = c.getContext('2d');
+    sp.userData.tex = tex;
+    return sp;
+  }
+
+  function drawLabel(sprite, text, color) {
+    const g = sprite.userData.ctx;
+    g.clearRect(0, 0, 256, 64);
+    g.font = 'bold 30px ui-monospace, Menlo, monospace';
+    g.textAlign = 'center';
+    g.textBaseline = 'middle';
+    g.lineWidth = 6;
+    g.strokeStyle = '#0a1016';
+    g.strokeText(text, 128, 32);
+    g.fillStyle = color;
+    g.fillText(text, 128, 32);
+    sprite.userData.tex.needsUpdate = true;
+  }
+
+  // Labels are the only per-frame texture cost here, so they redraw on a slow
+  // tick and only when the shown value actually changes.
+  let labelT = 0;
+
+  const _p = new THREE.Vector3();
+  const _q = new THREE.Quaternion();
+  const _cam = new THREE.Vector3();
+
+  // --- helpers ------------------------------------------------------------
+  const barColor = (frac, broken) => (broken ? BAR_DEAD : frac > 0.85 ? BAR_HOT : frac > 0.55 ? BAR_WARN : BAR_OK);
+
+  function cornerPos(i) {
+    if (d.rig.cornerPos) return d.rig.cornerPos(i);
+    const c = d.rig.corners[i];
+    return c?.anchor?.pos ?? null;
+  }
+
+  const hud = {
+    /** Set false while a card is up — the storm HUD shouldn't peer through it. */
+    setVisible(on) { root.style.display = on ? '' : 'none'; },
+
+    setHelp(text) { elHelp.textContent = text; },
+
+    /**
+     * @param {number} dt
+     * @param {number} t  wind/storm time
+     */
+    update(dt, t) {
+      const phase = d.game.phase;
+      const storm = phase === 'storm';
+
+      // --- wind + clock ---
+      const speed = d.wind.speedAt(d.player.pos, t);
+      elWind.textContent = `${speed.toFixed(1)} m/s   ${kmh(speed).toFixed(0)} km/h`;
+      elWind.style.color = speed > 25 ? '#ff8f86' : speed > 15 ? '#ffc24a' : '#dde5ea';
+      elClock.textContent = storm
+        ? `STORM   ${Math.max(0, STORM_LEN - d.game.phaseT).toFixed(0)}s left`
+        : phase.toUpperCase();
+
+      // --- gust telegraph ---
+      // The contract promises >=1.2 s of warning; this is where the player
+      // actually gets to spend it.
+      const tel = storm ? d.wind.gustTelegraph(t) : null;
+      elGust.classList.toggle('on', !!tel);
+      if (tel) elGust.textContent = `GUST INCOMING  ${tel.eta.toFixed(1)}s  ·  ${kmh(tel.power).toFixed(0)} km/h`;
+
+      // --- garden ---
+      const hp = d.garden.hp;
+      elPct.textContent = `${hp.toFixed(0)}%`;
+      elBar.style.width = `${clamp01(hp / 100) * 100}%`;
+      elBar.style.background = hp > 66 ? '#6ee06e' : hp > 33 ? '#ffc24a' : '#ff5b4a';
+      // Decision 7: rain shadow is what matters at night, sun coverage by day.
+      // Showing whichever is load-bearing right now stops the number being a
+      // fact about nothing.
+      const sky = d.getSky?.();
+      if (storm && sky?.rainShadowOver) {
+        const dry = sky.rainShadowOver(d.world.gardenBed);
+        elGardenLabel.textContent = 'GARDEN';
+        elShade.textContent = `${(dry * 100).toFixed(0)}% kept dry by the sail`;
+      } else {
+        const shade = d.rig.rigged ? d.rig.coverageOver(d.world.gardenBed, d.world.sunDir, d.world.heightAt) : 0;
+        elGardenLabel.textContent = 'GARDEN';
+        elShade.textContent = d.rig.rigged ? `${(shade * 100).toFixed(0)}% in shade` : 'no sail rigged';
+      }
+
+      // --- carried item ---
+      const carrying = d.player.carrying;
+      elCarry.style.display = carrying ? '' : 'none';
+      if (carrying) elCarry.textContent = `carrying: ${carrying}`;
+
+      // --- event ticker ---
+      const live = d.events.filter((e) => t - e.t < 6 || e.t > t);
+      elEvents.innerHTML = live.slice(-4).map((e) => `<div>${e.text}</div>`).join('');
+
+      // --- corner bars ---
+      barGroup.visible = d.rig.rigged && (storm || phase === 'prep');
+      if (!barGroup.visible) return;
+
+      ensureBars(d.rig.corners.length);
+      labelT += dt;
+      const redraw = labelT >= 0.12;
+      if (redraw) labelT = 0;
+      d.camera.getWorldQuaternion(_q);
+      d.camera.getWorldPosition(_cam);
+
+      for (let i = 0; i < d.rig.corners.length; i++) {
+        const c = d.rig.corners[i];
+        const b = bars[i];
+        const p = cornerPos(i);
+        if (!p) { b.holder.visible = false; continue; }
+
+        _p.set(p.x, p.y, p.z);
+        b.holder.position.copy(_p);
+        b.holder.position.y += 0.45;
+        b.holder.quaternion.copy(_q);
+
+        // Hold roughly constant screen size. A house corner is ~18 m away when
+        // you're standing at the posts, and at that range a world-sized bar is
+        // a few unreadable pixels — which defeats the entire point of putting it
+        // out there rather than in a corner of the screen. Clamped so it doesn't
+        // balloon when you walk right up to a corner to repair it.
+        const dist = _p.distanceTo(_cam);
+        b.holder.scale.setScalar(Math.max(0.75, Math.min(3.2, dist / 7)));
+
+        const frac = clamp01((c.load || 0) / c.hw.rating);
+        b.fill.scale.x = Math.max(0.001, (c.broken ? 1 : frac) * BAR_W);
+        b.fill.material.color.setHex(barColor(frac, c.broken));
+
+        if (redraw) {
+          const text = c.broken
+            ? `${c.anchorId.toUpperCase()} BLOWN`
+            : `${c.anchorId.toUpperCase()} ${((c.load || 0) / 1000).toFixed(1)}/${(c.hw.rating / 1000).toFixed(1)}kN`;
+          if (text !== b.lastText) {
+            b.lastText = text;
+            drawLabel(b.label, text, c.broken ? '#ff8f86' : frac > 0.85 ? '#ffb1ab' : '#dde5ea');
+          }
+        }
+      }
+    },
+
+    // --- cards ------------------------------------------------------------
+
+    /**
+     * The forecast. Its job is to sell the dread and, incidentally, to be the
+     * difficulty select for free — three authored storms already bracket the
+     * range, so letting the player pick one IS the choice.
+     *
+     * @param {{key:string, def:object}[]} storms
+     * @param {(key:string) => void} onPick
+     */
+    showForecast(storms, onPick) {
+      const rows = storms.map(({ key, def }) => {
+        const peak = Math.max(...def.baseCurve.map((p) => p[1]));
+        const gustPeak = peak + (def.gusts?.powBase ?? 0) + (def.gusts?.powRamp ?? 0);
+        const rainPeak = Math.max(...(def.rain?.curve ?? [[0, 0]]).map((p) => p[1]));
+        const change = (def.events ?? []).find((e) => e.type === 'windchange');
+        const night = (def.sky?.darkness ?? 0) > 0.6;
+        return `<button class="storm" data-key="${key}">
+          <div class="name">${(def.name ?? key).replace(/_/g, ' ').toUpperCase()}${night ? '  ·  NIGHT' : ''}</div>
+          <div class="stat">sustained to ${peak.toFixed(0)} m/s (${kmh(peak).toFixed(0)} km/h)
+            · gusts to ~${kmh(gustPeak).toFixed(0)} km/h</div>
+          <div class="stat">rain ${rainPeak >= 0.8 ? 'heavy' : rainPeak >= 0.4 ? 'steady' : 'light'}
+            ${change ? `· southerly change at ${change.t}s` : '· no change forecast'}</div>
+        </button>`;
+      }).join('');
+
+      card.innerHTML = `<div class="card">
+        <h1>FORECAST</h1>
+        <h2>90 seconds of storm. Pick your night, then rig for it.</h2>
+        ${rows}
+        <div class="stat" style="color:#8ba0ad;margin-top:12px">
+          A change means the corners that were slack all storm are the loaded ones after it.
+        </div>
+      </div>`;
+      card.classList.add('on');
+      hud.setVisible(false);
+      for (const b of card.querySelectorAll('.storm')) {
+        b.addEventListener('click', () => { hud.hideCard(); onPick(b.dataset.key); });
+      }
+    },
+
+    /**
+     * @param {object} r  {hp, cornersLost, cornersTotal, bill, collateral, budgetLeft, win}
+     * @param {() => void} onAgain
+     */
+    showAftermath(r, onAgain) {
+      const rows = [
+        ['garden', `${r.hp.toFixed(0)}%`],
+        ['corners intact', `${r.cornersTotal - r.cornersLost}/${r.cornersTotal}`],
+        ['hardware lost', r.bill ? `$${r.bill}` : 'none'],
+        ['collateral', r.collateral.length ? r.collateral.map((c) => `${c.what} ($${c.cost})`).join(', ') : 'none'],
+        ['budget left', `$${r.budgetLeft}`],
+      ].map(([k, v]) => `<div class="row"><span>${k}</span><b>${v}</b></div>`).join('');
+
+      card.innerHTML = `<div class="card">
+        <h1>AFTERMATH</h1>
+        <h2>${r.subtitle}</h2>
+        ${rows}
+        <div class="verdict ${r.win ? 'win' : 'lose'}">${r.verdict}</div>
+        <button class="go">PLAY AGAIN</button>
+      </div>`;
+      card.classList.add('on');
+      hud.setVisible(false);
+      card.querySelector('.go').addEventListener('click', () => { hud.hideCard(); onAgain(); });
+    },
+
+    hideCard() {
+      card.classList.remove('on');
+      card.innerHTML = '';
+      hud.setVisible(true);
+    },
+
+    get cardOpen() { return card.classList.contains('on'); },
+
+    dispose() {
+      root.remove(); card.remove(); style.remove();
+      d.scene.remove(barGroup);
+      quad.dispose();
+      for (const b of bars) {
+        b.fill.material.dispose();
+        b.label.material.map?.dispose();
+        b.label.material.dispose();
+      }
+    },
+  };
+
+  return hud;
+}
diff --git a/web/world/js/main.js b/web/world/js/main.js
index f988397..65fa316 100644
--- a/web/world/js/main.js
+++ b/web/world/js/main.js
@@ -23,10 +23,56 @@ import { createPlayer } from './player.js';
 import { Interact, wireYardActions } from './interact.js';
 import { createDebris } from './debris.js';
 import { createSkyFx } from './skyfx.js';
+import { createRiggingUI } from './rigging.js';
+import { createHud } from './hud.js';
 
-/** Which storm each phase runs under (SPRINT2 §Lane A.1). */
+/** The calm day the forecast and prep phases run under. */
 const CALM_STORM = 'storm_01_gentle';
-const WILD_STORM = 'storm_02_wildnight';
+
+/** The storms you can pick from the forecast card — this is the difficulty select. */
+const STORMS = ['storm_01_gentle', 'storm_03_southerly', 'storm_02_wildnight'];
+
+/**
+ * How fast an unprotected garden dies, in HP per second at full rain.
+ *
+ * Decision 7: drain is rain × (1 − rain shadow), NOT sun coverage. At night the
+ * sun shadow is a number about nothing, and storm_02 is a wildnight.
+ *
+ * ⚠️ This number is doing less work than it looks like it is, and the reason is
+ * worth reading before retuning it. Measured over storm_02 with a rig that holds
+ * 4/4 corners all night: sun coverage over the bed stays ~50%, but the RAIN
+ * shadow decays 0.38 → 0.04 as the wind builds, averaging 0.23. Driving rain
+ * blows under the sail and the shadow walks off the bed — which is Lane C's
+ * model being right about weather, not a bug.
+ *
+ * The consequence is that a perfectly rigged bed only ever sits ~23% drier than
+ * a bare one, so NO value here separates good rigging from none; at 1.6 both
+ * ended dead, and the spread stays ~20 points at any setting. 0.9 is chosen to
+ * put a good rig around 60% (a win) and a bare bed just under 50% (a loss), so
+ * the loop is playable and scores something — but the lever that actually needs
+ * moving is the shadow geometry, not this. Flagged for Lane C in THREADS.
+ */
+const GARDEN_DRAIN = 0.9;
+
+/**
+ * The garden: the thing you are actually protecting, and the only score that
+ * matters. Deliberately not inside hud.js — the HUD reads, it doesn't decide.
+ */
+function createGarden(world) {
+  let hp = 100;
+  let state = 'full';
+  return {
+    get hp() { return hp; },
+    get state() { return state; },
+    reset() { hp = 100; state = 'full'; world.setPlants('full'); },
+    /** @param {number} rain 0..1 @param {number} dry 0..1 fraction kept dry by the sail */
+    step(dt, rain, dry) {
+      if (rain > 0) hp = Math.max(0, hp - GARDEN_DRAIN * rain * (1 - dry) * dt);
+      const next = hp > 66 ? 'full' : hp > 33 ? 'tattered' : 'dead';
+      if (next !== state) { state = next; world.setPlants(next); }
+    },
+  };
+}
 
 // ---------------------------------------------------------------------------
 // Phase machine
@@ -180,12 +226,15 @@ export async function boot(opts = {}) {
   const scene = new THREE.Scene();
 
   // --- 1. weather ---------------------------------------------------------
-  // Both storms load up front: the forecast card needs to read storm_02's shape
-  // before the player has agreed to face it.
-  const [calmDef, wildDef] = await Promise.all([loadStorm(CALM_STORM), loadStorm(WILD_STORM)]);
-  const calmWind = createWind(calmDef);
-  const wildWind = createWind(wildDef);
-  const wind = createWindRouter([calmWind, wildWind]);
+  // Every storm loads up front: the forecast card has to read their shapes to
+  // sell them before the player has agreed to face one.
+  const defs = Object.fromEntries(
+    await Promise.all(STORMS.map(async (k) => [k, await loadStorm(k)])),
+  );
+  const winds = Object.fromEntries(Object.entries(defs).map(([k, def]) => [k, createWind(def)]));
+  const calmWind = winds[CALM_STORM];
+  let stormKey = 'storm_02_wildnight';
+  const wind = createWindRouter(Object.values(winds));
 
   // --- world & camera -----------------------------------------------------
   const world = createWorld(scene, { wind });
@@ -239,9 +288,8 @@ export async function boot(opts = {}) {
   // repair. Deliberately the prototype's AUTO loadout — one dodgy carabiner
   // corner. It also spans most of the yard, which is the 70–192 m² problem
   // decision 2 fixes in step 6, not a fault in the cloth.
-  await rigSail(['h1', 'h3', 'p2', 'p1'], [HARDWARE[2], HARDWARE[1], HARDWARE[1], HARDWARE[0]]);
-
   const game = createGame();
+  const garden = createGarden(world);
 
   // --- clocks -------------------------------------------------------------
   // Two of them, and the distinction matters. `simT` is wall-clock seconds since
@@ -311,25 +359,134 @@ export async function boot(opts = {}) {
   addEventListener('pointerdown', unlock);
   addEventListener('keydown', unlock);
 
-  // --- dev overlay (temporary — hud.js replaces it in step 7) -------------
-  const hud = document.getElementById('dev');
+  // --- 5. the face --------------------------------------------------------
   const banner = document.getElementById('banner');
-  addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') game.advance();
+  const hud = createHud({
+    scene, camera: cameraRig.object, game, world, wind, player, rig, garden, events,
+    getSky: () => sky,
   });
 
+  // Lane B's picking adapter. `panel:false` — their built-in panel is a fine
+  // bench, but hud.js owns the screen now, so the two shouldn't both draw.
+  const rigging = await createRiggingUI({
+    scene,
+    camera: cameraRig.object,
+    domElement: canvas,
+    world,
+    onCommit: (ids, hw, tension) => { void rigSail(ids, hw, tension); },
+    onMessage: pushEvent,
+    panel: true,
+  });
+
+  /**
+   * Clear last round's rig so "play again" is a new job, not a continuation.
+   *
+   * Without this you inherit the previous round's corners AND its spent budget —
+   * a second round starts at $35 with three corners already hung, and the four
+   * anchors you click get silently ignored because the session is already full.
+   * That is not a subtle failure; it makes the second round unplayable.
+   *
+   * Done through the session's own public moves rather than by reaching into its
+   * fields: unrig() refunds the corner's CURRENT hardware and setSpares(0)
+   * refunds the spare, so the budget walks back to $80 on its own and the
+   * economy stays the single source of truth. (Lane B: a `session.reset()` would
+   * say this better than five lines of mine — asked in THREADS.)
+   */
+  function resetRig() {
+    const s = rigging.session;
+    for (const p of [...s.picks]) s.unrig(p.anchorId);
+    s.setSpares(0);
+    s.setTension(1.0);
+  }
+
+  /** What the storm cost, assembled at the moment it ends. */
+  function scoreRun() {
+    const lost = rig.corners.filter((c) => c.broken);
+    const bill = lost.reduce((s, c) => s + c.hw.cost, 0);
+    const collateral = [];
+    // The gnome is collateral if the sail came down over it. DESIGN.md: the
+    // worst debris in any storm is your own failed work.
+    if (lost.length >= 2) collateral.push({ what: 'garden gnome', cost: world.gnome.collateralValue });
+    const s = rigging.summary;
+    const hp = garden.hp;
+    const win = hp >= 50 && lost.length < 2;
+    return {
+      hp,
+      cornersLost: lost.length,
+      cornersTotal: rig.corners.length || 4,
+      bill,
+      collateral,
+      budgetLeft: Math.max(0, s.budget - bill - collateral.reduce((a, c) => a + c.cost, 0)),
+      win,
+      subtitle: lost.length
+        ? `${lost.map((c) => `${c.hw.name} at ${c.anchorId.toUpperCase()}`).join(', ')} let go.`
+        : 'Every corner held.',
+      verdict: hp >= 85 && !lost.length ? 'THE GARDEN MADE IT — not a leaf out of place.'
+        : win ? 'THE GARDEN MADE IT. Mostly.'
+        : hp < 50 ? 'THE GARDEN IS GONE. The rain found what you skimped on.'
+        : 'THE SAIL LOST. Warranty callout in the rain for you.',
+    };
+  }
+
   // --- phases -------------------------------------------------------------
   game.on('phaseChange', ({ to }) => {
-    wind.use(to === 'storm' ? wildWind : calmWind);
+    // Prep and forecast happen on the calm day; the storm you picked only
+    // arrives when you say go.
+    wind.use(to === 'storm' ? winds[stormKey] : calmWind);
     makeSky();
     events.length = 0;
-    if (banner) {
+    rigging.setActive(to === 'prep');
+
+    if (to === 'forecast') {
+      garden.reset();
+      resetRig();
+      player.sim.carrying = null;
+      hud.showForecast(
+        STORMS.map((key) => ({ key, def: defs[key] })),
+        (key) => { stormKey = key; game.setPhase('prep'); },
+      );
+    }
+    // The card belongs to the phase, not to the button that happened to open it.
+    // Tying its lifetime to the forecast button meant any other route into prep
+    // (a debug jump, a future timer, "play again" landing somewhere new) left a
+    // card floating over a live game, swallowing input.
+    if (to === 'prep' || to === 'storm') hud.hideCard();
+
+    if (to === 'prep') {
+      hud.setHelp('click an anchor to rig · click again to cycle hardware · shift-click to remove · [ ] tension · S spare · ENTER when you have four');
+    }
+    if (to === 'storm') {
+      hud.setHelp('WASD move · shift run · E repair/pickup · C brace · RMB orbit');
+    }
+    if (to === 'aftermath') {
+      hud.showAftermath(scoreRun(), () => game.setPhase('forecast'));
+    }
+
+    if (banner && to !== 'forecast' && to !== 'aftermath') {
       banner.textContent = to.toUpperCase();
       banner.style.opacity = '1';
       setTimeout(() => { banner.style.opacity = '0'; }, 1400);
     }
   });
 
+  addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' || hud.cardOpen) return;
+    // Leaving prep means committing the rig — Lane B's session refuses if it
+    // isn't four corners, and says so in the ticker.
+    if (game.phase === 'prep') {
+      if (!rigging.commit()) return;
+      player.sim.carrying = null;
+      if (rigging.summary.spares > 0) pushEvent(`spare shackle on the shed table — grab it before you need it`);
+    }
+    game.advance();
+  });
+
+  // Straight into the forecast: the card is the game's front door.
+  hud.showForecast(
+    STORMS.map((key) => ({ key, def: defs[key] })),
+    (key) => { stormKey = key; game.setPhase('prep'); },
+  );
+
   // --- resize -------------------------------------------------------------
   function resize() {
     const w = canvas.clientWidth || innerWidth;
@@ -342,6 +499,7 @@ export async function boot(opts = {}) {
 
   // --- loop ---------------------------------------------------------------
   const clock = new THREE.Clock();
+  const dev = document.getElementById('dev');
   let frames = 0, fpsT = 0, fps = 0;
 
   function step(dt) {
@@ -353,6 +511,15 @@ export async function boot(opts = {}) {
     rig.step(dt, wind, windT, debris);
     debris.step(dt, windT, { player: player.sim, sail: rig });
     sky?.step(dt, windT, { sail: rig });
+    rigging.update(dt, windT);
+
+    // Decision 7: what kills the garden is rain that the sail didn't stop.
+    // Only during the storm — the calm day's drizzle is scenery.
+    if (game.phase === 'storm') {
+      const rain = wind.rainAt(windT);
+      const dry = sky?.rainShadowOver ? sky.rainShadowOver(world.gardenBed) : 0;
+      garden.step(dt, rain, dry);
+    }
   }
 
   function frame() {
@@ -370,19 +537,11 @@ export async function boot(opts = {}) {
     sailView?.update();
     renderer.render(scene, cameraRig.object);
 
+    hud.update(raw, windT);
+
     frames++; fpsT += raw;
     if (fpsT >= 0.5) { fps = frames / fpsT; frames = 0; fpsT = 0; }
-    if (hud) {
-      const wt = windT;
-      const speed = wind.speedAt(player.pos, wt);
-      const tel = wind.gustTelegraph(wt);
-      const worst = rig.corners.reduce((m, c) => Math.max(m, c.load || 0), 0);
-      hud.textContent =
-        `${fps.toFixed(0)} fps | ${game.phase} ${game.phaseT.toFixed(1)}s | ` +
-        `wind ${speed.toFixed(1)} m/s${tel ? ` | GUST in ${tel.eta.toFixed(1)}s` : ''} | ` +
-        `worst corner ${worst.toFixed(1)} | debris ${debris.pieces.length}` +
-        `${events.length ? ` | ${events[events.length - 1].text}` : ''}`;
-    }
+    if (dev) dev.textContent = `${fps.toFixed(0)} fps · ${game.phase} ${game.phaseT.toFixed(1)}s · t ${simT.toFixed(0)}s · debris ${debris.pieces.length}`;
     requestAnimationFrame(frame);
   }
   requestAnimationFrame(frame);
@@ -392,11 +551,14 @@ export async function boot(opts = {}) {
   const api = {
     renderer, scene, world, cameraRig, player, game, wind, rig, rigSail,
     get sailView() { return sailView; },
-    debris, interact, events,
+    debris, interact, events, hud, rigging, garden, defs, winds,
+    get stormKey() { return stormKey; },
+    set stormKey(k) { stormKey = k; },
+    scoreRun,
     get sky() { return sky; },
     get simT() { return simT; },
     windTime,
-    calmWind, wildWind,
+    calmWind,
 
     /**
      * Drive the sim by hand at fixed dt, and draw on demand. rAF is throttled to
diff --git a/web/world/js/world.js b/web/world/js/world.js
index ea750f3..ab6acdf 100644
--- a/web/world/js/world.js
+++ b/web/world/js/world.js
@@ -45,6 +45,11 @@ const SHED_TABLE = { x: 9, z: 6, rotY: -Math.PI / 2 };
 // the same line the graybox taught everyone to expect.
 const HOUSE = { x: 0, z: -10.5 };
 
+// The gnome stands just off the bed's south-east corner — inside the footprint
+// of most rigs, so a sail that lets go has something of the client's to land on.
+// DESIGN.md: your own failure is the worst debris of all.
+const GNOME = { x: 4.3, z: 4.4, rotY: -2.2, collateralValue: 25 };
+
 // Sun: mid-afternoon, high and off the north-west shoulder. Elevation 55°.
 // Stored as the direction from the GROUND toward the SUN (see contracts.js).
 const SUN_ELEV = (55 * Math.PI) / 180;
@@ -95,7 +100,13 @@ export function createWorld(scene, opts = {}) {
   /** @type {{group: THREE.Object3D, phase: number, base: THREE.Euler}[]} */
   const canopies = [];
   /** Graybox stand-ins, kept so dress() can retire them once E's GLBs load. */
-  const graybox = { house: null, trees: new Map() };
+  const graybox = { house: null, trees: new Map(), bed: null };
+  /**
+   * E's three wilt states, siblings in one GLB — toggled by visibility rather
+   * than reloaded, which is why they all ship together.
+   * @type {{full: THREE.Object3D, tattered: THREE.Object3D, dead: THREE.Object3D}|null}
+   */
+  let plants = null;
 
   // --- sky & light -------------------------------------------------------
   // Calm-day only. Lane C's skyfx.js takes over the sky and this becomes the
@@ -329,6 +340,7 @@ export function createWorld(scene, opts = {}) {
     }
   }
   root.add(bed);
+  graybox.bed = bed;
 
   // --- boundary fence ----------------------------------------------------
   // East, south and west only: the house is the north boundary.
@@ -379,6 +391,18 @@ export function createWorld(scene, opts = {}) {
     pos: new THREE.Vector3(SHED_TABLE.x, heightAt(SHED_TABLE.x, SHED_TABLE.z) + 0.9, SHED_TABLE.z),
   };
 
+  /**
+   * Show one of E's three wilt states. No-op against the graybox bed, so the
+   * HUD can call it unconditionally.
+   * @param {'full'|'tattered'|'dead'} which
+   */
+  function setPlants(which) {
+    if (!plants) return;
+    for (const [k, node] of Object.entries(plants)) {
+      if (node) node.visible = k === which;
+    }
+  }
+
   /**
    * Swap Lane E's GLBs in over the graybox. Async and separate from
    * createWorld() on purpose: the selftest builds a yard with no server, and a
@@ -432,11 +456,34 @@ export function createWorld(scene, opts = {}) {
       }
     };
 
-    const [shed, table, houseGlb, tree1, tree2] = await Promise.all([
+    const [shed, table, houseGlb, tree1, tree2, bedGlb, gnome] = await Promise.all([
       load('shed_01_v1'), load('shed_table_v1'), load('house_yardside_v1'),
-      load('tree_gum_01_v1'), load('tree_gum_02_v1'),
+      load('tree_gum_01_v1'), load('tree_gum_02_v1'), load('garden_bed_v1'),
+      load('garden_gnome_01_v1'),
     ]);
 
+    // --- garden bed ------------------------------------------------------
+    if (bedGlb) {
+      retire(graybox.bed);
+      bedGlb.name = 'garden_bed';
+      bedGlb.position.set(GARDEN_BED.x, heightAt(GARDEN_BED.x, GARDEN_BED.z), GARDEN_BED.z);
+      root.add(bedGlb);
+      const pick = (n) => bedGlb.getObjectByName(n) ?? null;
+      plants = { full: pick('plants_full'), tattered: pick('plants_tattered'), dead: pick('plants_dead') };
+      setPlants('full');
+    }
+
+    // --- gnome (aftermath collateral bait) -------------------------------
+    // Placed under the sail's likely footprint on purpose: DESIGN.md wants your
+    // own failures to be the worst debris, and something breakable has to be
+    // standing there for that to land.
+    if (gnome) {
+      gnome.name = 'garden_gnome_01';
+      gnome.position.set(GNOME.x, heightAt(GNOME.x, GNOME.z), GNOME.z);
+      gnome.rotation.y = GNOME.rotY;
+      root.add(gnome);
+    }
+
     // --- house (decision 6: no re-cut, the GLB's data wins) ---------------
     // E's fascia sits at 2.80 m and their anchors span x=-3..3, where my
     // graybox guessed 2.6 m and -5..5. Reading them narrows the house span by
@@ -532,6 +579,10 @@ export function createWorld(scene, opts = {}) {
      */
     shedTable,
     dress,
+    /** @param {'full'|'tattered'|'dead'} which */
+    setPlants,
+    /** Where the breakable client property stands, and what breaking it costs. */
+    gnome: GNOME,
     // Lane C's skyfx MODULATES these as the storm builds and hands them back
     // untouched on dispose() — it doesn't own them. That's why the yard exposes
     // its lights rather than keeping them private.
