Undo the bad quad, and paint the page background where it shows

The triangle was mine. Extending the out-area quad to z=60 put it past camZ
(48), and proj() divides by (camZ - z) — so the scale explodes at the camera
plane and goes negative beyond it, folding the quad's far edge back above the
screen. The quad goes back to z=30; the full-frame clear is what covers the
screen, so it never needed extending in the first place.

The bottom still not being green was a second bug, in the previous commit. The
gradient was set on body, but the ROOT element's background is what paints the
viewport, and index.html gives html a background too — so body's never
propagated and painted only its own box, which has no height because the canvas
is position:fixed. It goes on documentElement now, and html gets an explicit
height, because a gradient is laid out in the root's own box and that box
collapses for the same reason.

Verified with the canvas deliberately ending 40px short: root box fills the
viewport, gradient's lower stop is rgb(41,92,45), the canvas's bottom row is
the same, and the seam is invisible.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

HANDOFF.md

@@ -193,6 +193,15 @@ zombie (now an occasional opponent, `TUNE.racketEvery`, not the every-game fixtu
   perspective floor reaches the bottom on any aspect ratio. If you ever add a new orientation or
   stretch the canvas further, check the bottom rows are opaque — sample `getImageData` alpha, the
   colour alone will not tell you, because the page behind is deliberately the same green.
+  **Do NOT try to cover the bottom by extending the out-area quad instead.** `proj()` divides by
+  `(camZ - z)`, so as z approaches `TUNE.camZ` (48) the scale explodes and past it goes NEGATIVE —
+  a quad taken to z=60 folded its far edge back above the screen as an inverted triangle. The clear
+  is what covers the screen; the quad only has to cover the court.
+- **The page gradient goes on `document.documentElement`, and `html` needs a real height.** Two
+  separate CSS traps, both hit: the ROOT element's background is what paints the viewport, so setting
+  it on `body` while `html` also has a background painted nothing; and a GRADIENT is laid out in the
+  root's own box, which collapses to zero when the canvas is `position: fixed`, so `html { height:
+  100dvh }` is load-bearing rather than cosmetic.
 - **The page background behind the canvas tracks the live court apron** (`pageBackground` in
   render.js). It is visible in exactly two places: the strip above the canvas under the status bar,
   and the slivers a phone's ROUNDED DISPLAY CORNERS clip out of the canvas — a flat dark body drew a