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>

render.js

@@ -71,7 +71,11 @@ function pageBackground(out) {
   const t = SAFE.topCss;
   const css = `linear-gradient(#10141c 0px, #10141c ${t}px, ${out} ${t}px, ${out} 100%)`;
   if (css === bgLast) return;                 // only touch the DOM when it actually changed
-  bgLast = css; document.body.style.background = css;
+  bgLast = css;
+  // documentElement, NOT body: the ROOT element's background is what paints the viewport canvas.
+  // index.html gives html a background, so body's never propagates — setting it there painted only
+  // body's own box, which has no height (the canvas is position: fixed) and so painted nothing.
+  document.documentElement.style.background = css;
 }
 
 export function fitViewport() { // landscape 480x270; portrait 270 wide and as TALL as the phone is
@@ -129,7 +133,7 @@ export function proj(x, y, z) {
 
 // ---------------------------------------------------------------- sprites ----
 // assets/<name>.png; game falls back to code-drawn figures until sprites load.
-const SPRV = 49; // asset cache-buster — bump with main.js?v=N (see the img.src note below)
+const SPRV = 50; // asset cache-buster — bump with main.js?v=N (see the img.src note below)
 const SPR = {};
 for (const n of ['p_idle1','p_idle2','p_bounce','p_bounce2','p_toss','p_smash','p_run1','p_run2','p_swing1','p_swing2',
                  'o_idle1','o_idle2','o_bounce','o_bounce2','o_toss','o_smash','o_run1','o_run2','o_swing1','o_swing2',
@@ -662,7 +666,10 @@ export function render() {
 
   // ground + court (Super Tennis lawn); everything outside the doubles court is OUT
   const dw = COURT.dblW / 2;
-  quadXZ(-14, -6, 14, 60, pal.out);                                // out area (past the bottom on any aspect)
+  quadXZ(-14, -6, 14, 30, pal.out);                                // out area. NEVER let z approach
+  // TUNE.camZ (48): proj() divides by (camZ - z), so at z >= camZ the scale blows up and then goes
+  // NEGATIVE, and the quad's far edge folds back above the screen as an inverted triangle. The
+  // full-frame clear above is what covers the bottom of the screen; this quad does not need to.
   quadXZ(-dw - 0.15, -0.15, dw + 0.15, COURT.L + 0.15, '#e8e8dc'); // perimeter border line
   quadXZ(-dw, 0, dw, COURT.L, pal.lawn);                           // lawn (doubles court)
   for (let z = 0; z < COURT.L; z += 2.97) quadXZ(-dw, z, dw, Math.min(z + 1.49, COURT.L), pal.stripe); // mow stripes