@seatlayer/core 0.28.4 → 0.30.0

package/dist/index.cjs

@@ -411,6 +411,7 @@ function transformSectionOutlinePath(path, transform, radiusScale = 1, reflected
     })
   };
 }
+var SAGITTA_TO_CONTROL = 4 / 3;
 
 // src/core/labeling.ts
 var FULL_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
@@ -503,6 +504,345 @@ function sectionGeometry(section, context = {}) {
   return { height, rake };
 }
 
+// src/core/venueStructure.ts
+var BLOCK_LINK_RATIO = 1.8;
+function probesOf(pts) {
+  const n = pts.length;
+  if (n <= 3) return [...pts];
+  return [pts[Math.floor(n * 0.25)], pts[Math.floor(n * 0.5)], pts[Math.floor(n * 0.75)]];
+}
+function distanceToPolyline(pts, x, y) {
+  if (!pts.length) return Infinity;
+  if (pts.length === 1) return Math.hypot(x - pts[0].x, y - pts[0].y);
+  let best = Infinity;
+  for (let i = 0; i + 1 < pts.length; i++) {
+    const a = pts[i], b = pts[i + 1];
+    const vx = b.x - a.x, vy = b.y - a.y;
+    const len2 = vx * vx + vy * vy;
+    let t2 = len2 > 1e-12 ? ((x - a.x) * vx + (y - a.y) * vy) / len2 : 0;
+    if (t2 < 0) t2 = 0;
+    else if (t2 > 1) t2 = 1;
+    const d = Math.hypot(x - (a.x + t2 * vx), y - (a.y + t2 * vy));
+    if (d < best) best = d;
+  }
+  return best;
+}
+function boundOf(pts) {
+  let cx = 0, cy = 0;
+  for (const p of pts) {
+    cx += p.x;
+    cy += p.y;
+  }
+  const n = pts.length || 1;
+  cx /= n;
+  cy /= n;
+  let r = 0;
+  for (const p of pts) {
+    const d = Math.hypot(p.x - cx, p.y - cy);
+    if (d > r) r = d;
+  }
+  return { cx, cy, r };
+}
+function boundGap(a, b) {
+  return Math.hypot(a.cx - b.cx, a.cy - b.cy) - a.r - b.r;
+}
+function rowGap(a, b) {
+  let best = Infinity;
+  for (const p of probesOf(a)) {
+    const d = distanceToPolyline(b, p.x, p.y);
+    if (d < best) best = d;
+  }
+  for (const p of probesOf(b)) {
+    const d = distanceToPolyline(a, p.x, p.y);
+    if (d < best) best = d;
+  }
+  return best;
+}
+function orderAlongRow(pts, indices) {
+  if (pts.length < 3) return { pts, seatIndices: indices };
+  let cx = 0, cy = 0;
+  for (const p of pts) {
+    cx += p.x;
+    cy += p.y;
+  }
+  cx /= pts.length;
+  cy /= pts.length;
+  let far = -1, ax = pts[0];
+  for (const p of pts) {
+    const d = Math.hypot(p.x - cx, p.y - cy);
+    if (d > far) {
+      far = d;
+      ax = p;
+    }
+  }
+  let dx = ax.x - cx, dy = ax.y - cy;
+  const len = Math.hypot(dx, dy);
+  if (len > 1e-9) {
+    dx /= len;
+    dy /= len;
+  } else {
+    dx = 1;
+    dy = 0;
+  }
+  const order = pts.map((p, i) => ({ p, i, t: (p.x - cx) * dx + (p.y - cy) * dy })).sort((u, v) => u.t - v.t);
+  return { pts: order.map((o) => o.p), seatIndices: order.map((o) => indices[o.i]) };
+}
+function fitCircle(pts) {
+  const n = pts.length;
+  if (n < 3) return null;
+  let mx = 0, my = 0;
+  for (const p of pts) {
+    mx += p.x;
+    my += p.y;
+  }
+  mx /= n;
+  my /= n;
+  let suu = 0, suv = 0, svv = 0, suuu = 0, svvv = 0, suvv = 0, svuu = 0;
+  for (const p of pts) {
+    const u = p.x - mx, v = p.y - my;
+    suu += u * u;
+    svv += v * v;
+    suv += u * v;
+    suuu += u * u * u;
+    svvv += v * v * v;
+    suvv += u * v * v;
+    svuu += v * u * u;
+  }
+  const det = suu * svv - suv * suv;
+  if (Math.abs(det) < 1e-9) return null;
+  const b1 = (suuu + suvv) / 2;
+  const b2 = (svvv + svuu) / 2;
+  const uc = (b1 * svv - b2 * suv) / det;
+  const vc = (b2 * suu - b1 * suv) / det;
+  const cx = uc + mx, cy = vc + my;
+  if (!Number.isFinite(cx) || !Number.isFinite(cy)) return null;
+  return { cx, cy };
+}
+var CIRCLE_ROW_SPREAD_LIMIT = 0.15;
+function fitBlockAxis(group) {
+  if (group.length < 2) return null;
+  const cents = group.map((r) => {
+    let x = 0, y = 0;
+    for (const p of r.pts) {
+      x += p.x;
+      y += p.y;
+    }
+    return { x: x / r.pts.length, y: y / r.pts.length };
+  });
+  let ox = 0, oy = 0;
+  for (const c of cents) {
+    ox += c.x;
+    oy += c.y;
+  }
+  ox /= cents.length;
+  oy /= cents.length;
+  let sxx = 0, sxy = 0, syy = 0;
+  for (const c of cents) {
+    const dx = c.x - ox, dy = c.y - oy;
+    sxx += dx * dx;
+    sxy += dx * dy;
+    syy += dy * dy;
+  }
+  const tr = sxx + syy;
+  const det = sxx * syy - sxy * sxy;
+  const lambda = tr / 2 + Math.sqrt(Math.max(0, tr * tr / 4 - det));
+  let ax, ay;
+  if (Math.abs(sxy) > 1e-12) {
+    ax = lambda - syy;
+    ay = sxy;
+  } else if (sxx >= syy) {
+    ax = 1;
+    ay = 0;
+  } else {
+    ax = 0;
+    ay = 1;
+  }
+  const len = Math.hypot(ax, ay);
+  if (!(len > 1e-12)) return null;
+  ax /= len;
+  ay /= len;
+  let lo = Infinity, hi = -Infinity;
+  const widths = [];
+  for (const r of group) {
+    let rlo = Infinity, rhi = -Infinity;
+    for (const p of r.pts) {
+      const t2 = p.x * ax + p.y * ay;
+      if (t2 < rlo) rlo = t2;
+      if (t2 > rhi) rhi = t2;
+      if (t2 < lo) lo = t2;
+      if (t2 > hi) hi = t2;
+    }
+    widths.push(rhi - rlo);
+  }
+  const range = hi - lo;
+  if (!(range > 1e-9)) return null;
+  widths.sort((a, b) => a - b);
+  const p90 = widths[Math.min(widths.length - 1, Math.floor(widths.length * 0.9))];
+  return p90 / range <= AXIS_ROW_WIDTH_LIMIT ? { x: ax, y: ay } : null;
+}
+var AXIS_ROW_WIDTH_LIMIT = 0.35;
+function resolveSection(sectionId, seats, seatIndices, focal) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const i of seatIndices) {
+    const s = seats[i];
+    const key = s.rowId || `__seat-${i}`;
+    let g = groups.get(key);
+    if (!g) {
+      g = { pts: [], idx: [] };
+      groups.set(key, g);
+    }
+    g.pts.push({ x: s.x, y: s.y });
+    g.idx.push(i);
+  }
+  if (!groups.size) return { sectionId, rows: [], blockCount: 0 };
+  const rows = [];
+  for (const [id, g] of groups) {
+    const ordered = orderAlongRow(g.pts, g.idx);
+    let sum = 0;
+    for (const p of ordered.pts) sum += Math.hypot(p.x - focal.x, p.y - focal.y);
+    rows.push({
+      id,
+      pts: ordered.pts,
+      seatIndices: ordered.seatIndices,
+      blockId: -1,
+      ordinal: 0,
+      blockDepth: 0,
+      focalDistance: sum / ordered.pts.length
+    });
+  }
+  const bounds2 = rows.map((r) => boundOf(r.pts));
+  const nearest = [];
+  for (let i = 0; i < rows.length; i++) {
+    let best = Infinity;
+    for (let j = 0; j < rows.length; j++) {
+      if (i === j) continue;
+      if (boundGap(bounds2[i], bounds2[j]) >= best) continue;
+      const d = rowGap(rows[i].pts, rows[j].pts);
+      if (d < best) best = d;
+    }
+    if (Number.isFinite(best)) nearest.push(best);
+  }
+  nearest.sort((a, b) => a - b);
+  const typicalGap = nearest.length ? nearest[Math.floor(nearest.length / 2)] : 1;
+  const linkDistance = Math.max(typicalGap * BLOCK_LINK_RATIO, 1e-6);
+  const adjacency = rows.map(() => []);
+  for (let i = 0; i < rows.length; i++) {
+    for (let j = i + 1; j < rows.length; j++) {
+      if (boundGap(bounds2[i], bounds2[j]) > linkDistance) continue;
+      if (rowGap(rows[i].pts, rows[j].pts) <= linkDistance) {
+        adjacency[i].push(j);
+        adjacency[j].push(i);
+      }
+    }
+  }
+  let blockCount = 0;
+  for (let i = 0; i < rows.length; i++) {
+    if (rows[i].blockId !== -1) continue;
+    const id = blockCount++;
+    const stack = [i];
+    rows[i].blockId = id;
+    while (stack.length) {
+      const k = stack.pop();
+      for (const n of adjacency[k]) {
+        if (rows[n].blockId !== -1) continue;
+        rows[n].blockId = id;
+        stack.push(n);
+      }
+    }
+  }
+  const byBlock = /* @__PURE__ */ new Map();
+  for (const r of rows) {
+    const a = byBlock.get(r.blockId) ?? [];
+    a.push(r);
+    byBlock.set(r.blockId, a);
+  }
+  const centres = [];
+  for (const r of rows) {
+    if (r.pts.length < 4) continue;
+    const c = fitCircle(r.pts);
+    if (!c) continue;
+    if (!Number.isFinite(c.cx) || !Number.isFinite(c.cy)) continue;
+    centres.push({ x: c.cx, y: c.cy });
+  }
+  const centre = centres.length >= 2 ? (() => {
+    const xs = centres.map((c) => c.x).sort((a, b) => a - b);
+    const ys = centres.map((c) => c.y).sort((a, b) => a - b);
+    const mid = Math.floor(centres.length / 2);
+    return { cx: xs[mid], cy: ys[mid] };
+  })() : null;
+  if (centre) {
+    const radiusOf = (p) => Math.hypot(p.x - centre.cx, p.y - centre.cy);
+    let lo = Infinity, hi = -Infinity;
+    const spreads = [];
+    for (const r of rows) {
+      let rlo = Infinity, rhi = -Infinity;
+      for (const p of r.pts) {
+        const d = radiusOf(p);
+        if (d < rlo) rlo = d;
+        if (d > rhi) rhi = d;
+      }
+      spreads.push(rhi - rlo);
+      if (rlo < lo) lo = rlo;
+      if (rhi > hi) hi = rhi;
+    }
+    const range = hi - lo;
+    spreads.sort((a, b) => a - b);
+    const p90 = spreads[Math.min(spreads.length - 1, Math.floor(spreads.length * 0.9))];
+    if (range > 1e-9 && p90 / range <= CIRCLE_ROW_SPREAD_LIMIT) {
+      const withRadius = rows.map((r) => {
+        let sum = 0;
+        for (const p of r.pts) sum += radiusOf(p);
+        return { row: r, radius: sum / r.pts.length };
+      });
+      let minR = Infinity;
+      for (const w of withRadius) if (w.radius < minR) minR = w.radius;
+      withRadius.sort((a, b) => a.radius - b.radius);
+      let ordinal = -1, lastRadius = -Infinity;
+      const tolerance = range / Math.max(1, withRadius.length) * 0.5;
+      const ordered = [];
+      for (const w of withRadius) {
+        if (w.radius - lastRadius > tolerance) {
+          ordinal++;
+          lastRadius = w.radius;
+        }
+        w.row.ordinal = ordinal;
+        w.row.blockDepth = w.radius - minR;
+        ordered.push(w.row);
+      }
+      return { sectionId, rows: ordered, blockCount };
+    }
+  }
+  const out = [];
+  for (const [, group] of byBlock) {
+    const axis = fitBlockAxis(group);
+    if (axis) {
+      const key = (r) => {
+        let sum = 0;
+        for (const p of r.pts) sum += p.x * axis.x + p.y * axis.y;
+        return sum / r.pts.length;
+      };
+      group.sort((a, b) => key(a) - key(b));
+      let depth = 0;
+      for (let i = 0; i < group.length; i++) {
+        if (i > 0) depth += rowGap(group[i - 1].pts, group[i].pts);
+        group[i].ordinal = i;
+        group[i].blockDepth = depth;
+        out.push(group[i]);
+      }
+    } else {
+      let front = Infinity;
+      for (const r of group) if (r.focalDistance < front) front = r.focalDistance;
+      group.sort((a, b) => a.focalDistance - b.focalDistance);
+      for (let i = 0; i < group.length; i++) {
+        group[i].ordinal = i;
+        group[i].blockDepth = Math.max(0, group[i].focalDistance - front);
+        out.push(group[i]);
+      }
+    }
+  }
+  return { sectionId, rows: out, blockCount };
+}
+
 // src/core/layout.ts
 function overrideAccessibility(o) {
   if (!o) return [];
@@ -948,7 +1288,7 @@ function stackFloors(doc, spread = 900) {
   });
   return { ...doc, objects, floors: void 0 };
 }
-function expandFloorObjects(objects, zones, fallbackFocal) {
+function expandFloorObjects(objects, zones, fallbackFocal, viewFallback) {
   const out = [];
   const segmented = /* @__PURE__ */ new Map();
   const grouped = /* @__PURE__ */ new Map();
@@ -1018,6 +1358,7 @@ function expandFloorObjects(objects, zones, fallbackFocal) {
     const resolvedFocal = zone?.focalPoint ?? fallbackFocal;
     for (const seat of seats) {
       if (inheritedView) seat.viewUrl ??= inheritedView;
+      if (viewFallback) seat.viewUrl ??= viewFallback;
       if (owner) seat.sectionId = owner.logicalSectionId ?? owner.id;
       if (owner?.zone) seat.zoneId = owner.zone;
       if (resolvedFocal) seat.focalPoint = { ...resolvedFocal };
@@ -1031,13 +1372,14 @@ function expandChart(doc, options = {}) {
     const out2 = [];
     for (const floor of doc.floors) {
       const floorFocal = floor.focalPoint ?? doc.focalPoint;
-      const seats = expandFloorObjects(floor.objects, doc.zones, floorFocal);
+      const floorView = floor.viewFromSeatUrl ?? doc.viewFromSeatUrl;
+      const seats = expandFloorObjects(floor.objects, doc.zones, floorFocal, floorView);
       assignEyeHeights(floor.objects, floor.focalPoint ?? doc.focalPoint, floor.baseHeightM ?? 0, seats);
       out2.push(...seats);
     }
     return out2;
   }
-  const out = expandFloorObjects(doc.objects, doc.zones, doc.focalPoint);
+  const out = expandFloorObjects(doc.objects, doc.zones, doc.focalPoint, doc.viewFromSeatUrl);
   assignEyeHeights(doc.objects, doc.focalPoint, options.floorBaseHeightM ?? 0, out);
   return out;
 }
@@ -1050,17 +1392,28 @@ function assignEyeHeights(objects, focal, floorBaseHeightM, seats) {
   }
   const owner = new Array(seats.length);
   const geo = /* @__PURE__ */ new Map();
-  const frontDistU = /* @__PURE__ */ new Map();
+  const seatsBySection = /* @__PURE__ */ new Map();
   for (let i = 0; i < seats.length; i++) {
     const seat = seats[i];
     const sec = sections.find((s) => pointInPolygonWithHoles({ x: seat.x, y: seat.y }, s.outline, s.holes)) ?? null;
     owner[i] = sec;
     if (!sec) continue;
     if (!geo.has(sec.id)) geo.set(sec.id, sectionGeometry(sec, { floorBaseHeightM }));
-    const seatFocal = seat.focalPoint ?? focal;
-    const d = Math.hypot(seat.x - seatFocal.x, seat.y - seatFocal.y);
-    const cur = frontDistU.get(sec.id);
-    if (cur === void 0 || d < cur) frontDistU.set(sec.id, d);
+    const list = seatsBySection.get(sec.id);
+    if (list) list.push(i);
+    else seatsBySection.set(sec.id, [i]);
+  }
+  const seatLevel = new Array(seats.length).fill(void 0);
+  for (const [secId, indices] of seatsBySection) {
+    const g = geo.get(secId);
+    if (!g) continue;
+    const rakeTan = g.rake > 0 ? Math.tan(g.rake * Math.PI / 180) : 0;
+    const structure = resolveSection(secId, seats, indices, focal);
+    for (const row of structure.rows) {
+      const riseM = row.blockDepth * METRES_PER_CHART_UNIT * rakeTan;
+      const level = g.height + riseM;
+      for (const si of row.seatIndices) seatLevel[si] = level;
+    }
   }
   for (let i = 0; i < seats.length; i++) {
     const seat = seats[i];
@@ -1070,14 +1423,7 @@ function assignEyeHeights(objects, focal, floorBaseHeightM, seats) {
       continue;
     }
     const g = geo.get(sec.id);
-    let riseM = 0;
-    if (g.rake > 0) {
-      const seatFocal = seat.focalPoint ?? focal;
-      const d = Math.hypot(seat.x - seatFocal.x, seat.y - seatFocal.y);
-      const depthU = Math.max(0, d - (frontDistU.get(sec.id) ?? d));
-      riseM = depthU * METRES_PER_CHART_UNIT * Math.tan(g.rake * Math.PI / 180);
-    }
-    seat.eyeHeightM = g.height + riseM + SEATED_EYE_HEIGHT_M;
+    seat.eyeHeightM = (seatLevel[i] ?? g.height) + SEATED_EYE_HEIGHT_M;
   }
 }
 var PAD = 40;
@@ -4638,7 +4984,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
           this.accessRingById.set(seat.id, ring);
           target.add(ring);
         }
-        if (accessGlyphPath(seat.accessibility ?? [])) {
+        if (seat.accessibility?.includes("wheelchair") && accessGlyphPath(seat.accessibility)) {
           const glyph = this.buildAccessGlyph(seat, typeof c.fill() === "string" ? c.fill() : "");
           this.accessGlyphById.set(seat.id, glyph);
           target.add(glyph);
@@ -8788,8 +9134,450 @@ function stageSightlinePitch(eyeHeightM, distM) {
 var W = 2048;
 var H = 1024;
 var UNIT = METRES_PER_CHART_UNIT;
+var TAU2 = Math.PI * 2;
+var PX_PER_DEG = H / 180;
 var yawToX = (yawDeg) => (yawDeg + 180) / 360 * W;
 var pitchToY = (pitchDeg) => (90 - pitchDeg) / 180 * H;
+function fnv1a(str) {
+  let h = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function rng(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a |= 0;
+    a = a + 1831565813 | 0;
+    let t2 = Math.imul(a ^ a >>> 15, 1 | a);
+    t2 = t2 + Math.imul(t2 ^ t2 >>> 7, 61 | t2) ^ t2;
+    return ((t2 ^ t2 >>> 14) >>> 0) / 4294967296;
+  };
+}
+var NBINS = 96;
+var BIN_DEG = 360 / NBINS;
+var FLAT_DELTA_M = 0.6;
+var HAZE_SKY = [17, 23, 42];
+function blendToSky(base, t2, a = 1) {
+  const k = Math.max(0, Math.min(0.58, t2));
+  const r = Math.round(base[0] + (HAZE_SKY[0] - base[0]) * k);
+  const g = Math.round(base[1] + (HAZE_SKY[1] - base[1]) * k);
+  const b = Math.round(base[2] + (HAZE_SKY[2] - base[2]) * k);
+  return `rgba(${r},${g},${b},${a})`;
+}
+function mixRgb(a, b, t2) {
+  return [
+    Math.round(a[0] + (b[0] - a[0]) * t2),
+    Math.round(a[1] + (b[1] - a[1]) * t2),
+    Math.round(a[2] + (b[2] - a[2]) * t2)
+  ];
+}
+function hslToRgb(h, s, l) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const hp = (h % 360 + 360) % 360 / 60;
+  const x = c * (1 - Math.abs(hp % 2 - 1));
+  let r = 0, g = 0, b = 0;
+  if (hp < 1) [r, g, b] = [c, x, 0];
+  else if (hp < 2) [r, g, b] = [x, c, 0];
+  else if (hp < 3) [r, g, b] = [0, c, x];
+  else if (hp < 4) [r, g, b] = [0, x, c];
+  else if (hp < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = l - c / 2;
+  return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+}
+var tintCache = /* @__PURE__ */ new Map();
+function tintFromKey(key) {
+  if (!key) return null;
+  const cached = tintCache.get(key);
+  if (cached) return cached;
+  let h = 2166136261;
+  for (let i = 0; i < key.length; i++) {
+    h ^= key.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  const hue = (h >>> 0) % 360;
+  const rgb2 = hslToRgb(hue, 0.3, 0.42);
+  tintCache.set(key, rgb2);
+  return rgb2;
+}
+function buildStands(seat, neighborSeats, stageBearing, myEyeM) {
+  const bins = new Array(NBINS).fill(null);
+  let maxDelta = 0;
+  const own = seat.sectionId;
+  for (const other of neighborSeats) {
+    if (other.id === seat.id) continue;
+    const os = other.sectionId;
+    if (!os || own && os === own) continue;
+    const ox = other.x - seat.x;
+    const oy = other.y - seat.y;
+    const dM = Math.hypot(ox, oy) * UNIT;
+    if (dM < 1.5 || dM > 95) continue;
+    const otherEye = other.eyeHeightM ?? SEATED_EYE_HEIGHT_M;
+    const dTop = otherEye - myEyeM;
+    if (Math.abs(dTop) > maxDelta) maxDelta = Math.abs(dTop);
+    const top = Math.atan2(dTop, dM) * 180 / Math.PI;
+    const base = Math.atan2(otherEye - SEATED_EYE_HEIGHT_M - myEyeM, dM) * 180 / Math.PI;
+    const bearing = Math.atan2(ox, -oy) - stageBearing;
+    const yaw = (bearing * 180 / Math.PI + 540) % 360 - 180;
+    const idx = Math.min(NBINS - 1, Math.max(0, Math.floor((yaw + 180) / BIN_DEG)));
+    const overhead = top > 34 && dM < 16;
+    const cur = bins[idx];
+    if (!cur) bins[idx] = { top, base, nearM: dM, overhead, tint: tintFromKey(other.categoryKey) };
+    else {
+      if (top > cur.top) cur.top = top;
+      if (base < cur.base) cur.base = base;
+      if (dM < cur.nearM) {
+        cur.nearM = dM;
+        cur.tint = tintFromKey(other.categoryKey);
+      }
+      cur.overhead = cur.overhead || overhead;
+    }
+  }
+  return { bins, maxDelta };
+}
+function drawStands(ctx, bins, toX, toY) {
+  for (let i = 0; i < NBINS; i++) {
+    const b = bins[i];
+    if (!b) continue;
+    const yaw0 = -180 + i * BIN_DEG;
+    const x0 = toX(yaw0);
+    const x1 = toX(yaw0 + BIN_DEG);
+    if (!(x1 > x0)) continue;
+    const top = Math.min(72, b.top);
+    const bottom = Math.min(b.base, -4);
+    const yTop = toY(top);
+    const yBot = toY(bottom);
+    if (yBot <= yTop) continue;
+    const haze = b.nearM / 95;
+    const tint = b.tint;
+    const crest = tint ? mixRgb([44, 54, 80], tint, 0.34) : [44, 54, 80];
+    const seating = tint ? mixRgb([24, 30, 48], tint, 0.28) : [24, 30, 48];
+    const grad = ctx.createLinearGradient(0, yTop, 0, yBot);
+    grad.addColorStop(0, blendToSky(crest, haze));
+    grad.addColorStop(0.24, blendToSky(seating, haze));
+    grad.addColorStop(1, blendToSky([10, 13, 22], haze));
+    ctx.fillStyle = grad;
+    ctx.fillRect(x0, yTop, x1 - x0 + 1, yBot - yTop);
+    ctx.fillStyle = `rgba(150,165,205,${0.35 * (1 - haze * 0.55)})`;
+    ctx.fillRect(x0, yTop, x1 - x0 + 1, 1.5);
+    const bandBottom = Math.min(yBot, toY(0));
+    const bandSpan = bandBottom - yTop;
+    if (bandSpan > 8) {
+      const bands = 6;
+      const contrast = 1 - haze * 0.4;
+      for (let r = 1; r < bands; r++) {
+        const y = yTop + bandSpan * r / bands;
+        ctx.fillStyle = `rgba(0,0,0,${0.16 * contrast})`;
+        ctx.fillRect(x0, y, x1 - x0 + 1, 1.5);
+        ctx.fillStyle = `rgba(120,134,170,${0.1 * contrast})`;
+        ctx.fillRect(x0, y + 1.5, x1 - x0 + 1, 1.2);
+      }
+    }
+    if (b.overhead) {
+      const lipY = toY(Math.min(86, top + 12));
+      const g2 = ctx.createLinearGradient(0, lipY, 0, yTop);
+      g2.addColorStop(0, "rgba(3,4,8,0.9)");
+      g2.addColorStop(1, "rgba(3,4,8,0)");
+      ctx.fillStyle = g2;
+      ctx.fillRect(x0, lipY, x1 - x0 + 1, yTop - lipY);
+      ctx.fillStyle = "rgba(120,130,160,0.14)";
+      ctx.fillRect(x0, yTop - 1.5, x1 - x0 + 1, 1.5);
+    }
+  }
+}
+function classifyScene(_seat, focal, neighbors) {
+  const NB = 72;
+  const occ = new Array(NB).fill(false);
+  const innerM = new Array(NB).fill(Infinity);
+  const secSet = /* @__PURE__ */ new Set();
+  let n = 0;
+  for (const s of neighbors) {
+    n++;
+    if (s.sectionId) secSet.add(s.sectionId);
+    const dx = s.x - focal.x;
+    const dy = s.y - focal.y;
+    const dM = Math.hypot(dx, dy) * UNIT;
+    if (dM < 0.5) continue;
+    const bearing = Math.atan2(dx, -dy);
+    let idx = Math.floor((bearing + Math.PI) / TAU2 * NB);
+    if (idx < 0) idx = 0;
+    else if (idx >= NB) idx = NB - 1;
+    occ[idx] = true;
+    if (dM < innerM[idx]) innerM[idx] = dM;
+  }
+  let occN = 0;
+  const inner = [];
+  for (let i = 0; i < NB; i++) if (occ[i]) {
+    occN++;
+    inner.push(innerM[i]);
+  }
+  const coverage = occN / NB * 360;
+  inner.sort((a, b) => a - b);
+  const median = inner.length ? inner[inner.length >> 1] : 0;
+  const lo = inner.length ? inner[Math.floor(inner.length * 0.15)] ?? median : 0;
+  const hi = inner.length ? inner[Math.floor(inner.length * 0.85)] ?? median : 0;
+  const aspect = lo > 0.5 ? hi / lo : 1;
+  const seed = fnv1a(`${n}|${[...secSet].sort().join(",")}|${Math.round(focal.x)},${Math.round(focal.y)}`);
+  let mode;
+  if (coverage >= 300 && median > 11 && aspect > 1.35) mode = "sport";
+  else if (coverage >= 285) mode = "arena";
+  else mode = "proscenium";
+  return { mode, seed, voidRadiusM: median, aspect };
+}
+var HAIR_KINDS = 5;
+function drawHair(ctx, r, kind) {
+  switch (kind) {
+    case 1:
+      ctx.beginPath();
+      ctx.ellipse(0, -r * 0.14, r * 1.16, r * 1.16, 0, 0, TAU2);
+      ctx.fill();
+      break;
+    case 2:
+      ctx.beginPath();
+      ctx.ellipse(0, -r * 1.02, r * 0.42, r * 0.42, 0, 0, TAU2);
+      ctx.fill();
+      ctx.beginPath();
+      ctx.ellipse(0, -r * 0.2, r * 0.98, r * 1.02, 0, 0, TAU2);
+      ctx.fill();
+      break;
+    case 3:
+      ctx.beginPath();
+      ctx.ellipse(0, -r * 0.36, r * 1.04, r * 0.6, 0, Math.PI, TAU2);
+      ctx.fill();
+      ctx.beginPath();
+      ctx.ellipse(0, -r * 0.52, r * 1.22, r * 0.24, 0, 0, TAU2);
+      ctx.fill();
+      break;
+    case 4:
+      ctx.beginPath();
+      ctx.ellipse(-r * 0.66, r * 0.5, r * 0.5, r * 1.35, 0, 0, TAU2);
+      ctx.fill();
+      ctx.beginPath();
+      ctx.ellipse(r * 0.66, r * 0.5, r * 0.5, r * 1.35, 0, 0, TAU2);
+      ctx.fill();
+      ctx.beginPath();
+      ctx.ellipse(0, -r * 0.08, r * 1.06, r * 1.08, 0, 0, TAU2);
+      ctx.fill();
+      break;
+    default:
+      break;
+  }
+}
+function drawSeated(ctx, hx, hy, r, o) {
+  const neckHalf = r * 0.44;
+  const shHalf = r * o.shoulderK;
+  const neckTopY = r * 0.66;
+  const shoulderY = r * 1.68;
+  const botY = r * 5.4;
+  const clo = `rgba(${o.clothing[0]},${o.clothing[1]},${o.clothing[2]},${o.alpha})`;
+  const skin = `rgba(${o.tone[0]},${o.tone[1]},${o.tone[2]},${o.alpha})`;
+  ctx.save();
+  ctx.translate(hx, hy);
+  const leanPx = o.lean * r;
+  ctx.fillStyle = clo;
+  ctx.beginPath();
+  ctx.moveTo(-neckHalf, neckTopY);
+  ctx.quadraticCurveTo(-neckHalf * 1.18, shoulderY - leanPx - r * 0.6, -shHalf, shoulderY - leanPx);
+  ctx.quadraticCurveTo(-shHalf * 1.05, shoulderY + r * 1.2, -shHalf * 0.94, botY);
+  ctx.lineTo(shHalf * 0.94, botY);
+  ctx.quadraticCurveTo(shHalf * 1.05, shoulderY + r * 1.2, shHalf, shoulderY + leanPx);
+  ctx.quadraticCurveTo(neckHalf * 1.18, shoulderY + leanPx - r * 0.6, neckHalf, neckTopY);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillStyle = skin;
+  ctx.fillRect(-neckHalf * 0.82, r * 0.5, neckHalf * 1.64, r * 0.9);
+  ctx.save();
+  ctx.rotate(o.tilt);
+  ctx.translate(o.turn * r, 0);
+  ctx.fillStyle = skin;
+  if (r >= 18) {
+    ctx.beginPath();
+    ctx.moveTo(-r * 0.9, -r * 0.15);
+    ctx.quadraticCurveTo(-r * 0.96, -r * 1.12, 0, -r * 1.06);
+    ctx.quadraticCurveTo(r * 0.96, -r * 1.12, r * 0.9, -r * 0.15);
+    ctx.quadraticCurveTo(r * 0.86, r * 0.55, r * 0.36, r * 0.98);
+    ctx.quadraticCurveTo(0, r * 1.14, -r * 0.36, r * 0.98);
+    ctx.quadraticCurveTo(-r * 0.86, r * 0.55, -r * 0.9, -r * 0.15);
+    ctx.closePath();
+    ctx.fill();
+    if (r >= 22) {
+      ctx.beginPath();
+      ctx.ellipse(-r * 0.9, r * 0.18, r * 0.13, r * 0.22, 0, 0, TAU2);
+      ctx.ellipse(r * 0.9, r * 0.18, r * 0.13, r * 0.22, 0, 0, TAU2);
+      ctx.fill();
+    }
+  } else {
+    ctx.beginPath();
+    ctx.ellipse(0, 0, r * 0.9, r * 1.06, 0, 0, TAU2);
+    ctx.fill();
+  }
+  drawHair(ctx, r, o.hair);
+  if (o.rim > 0.01) {
+    ctx.strokeStyle = `rgba(245,205,150,${(0.5 * o.rim).toFixed(3)})`;
+    ctx.lineWidth = Math.max(1, r * 0.14);
+    ctx.beginPath();
+    ctx.ellipse(0, -r * 0.06, r * 0.86, r * 1, 0, Math.PI * 1.12, Math.PI * 1.9);
+    ctx.stroke();
+  }
+  ctx.restore();
+  if (o.rim > 0.01) {
+    ctx.strokeStyle = `rgba(240,200,150,${(0.28 * o.rim).toFixed(3)})`;
+    ctx.lineWidth = Math.max(1, r * 0.12);
+    ctx.beginPath();
+    ctx.moveTo(-shHalf * 0.8, shoulderY - r * 0.05);
+    ctx.quadraticCurveTo(-neckHalf, shoulderY - r * 0.75, 0, shoulderY - r * 0.82);
+    ctx.quadraticCurveTo(neckHalf, shoulderY - r * 0.75, shHalf * 0.8, shoulderY - r * 0.05);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function drawSeatedMid(ctx, hx, hy, r, clothing, tone, alpha) {
+  ctx.fillStyle = `rgba(${clothing[0]},${clothing[1]},${clothing[2]},${alpha})`;
+  ctx.beginPath();
+  ctx.moveTo(hx - r * 1.72, hy + r * 4);
+  ctx.quadraticCurveTo(hx - r * 1.78, hy + r * 1.55, hx - r * 0.46, hy + r * 1.02);
+  ctx.lineTo(hx - r * 0.4, hy + r * 0.62);
+  ctx.lineTo(hx + r * 0.4, hy + r * 0.62);
+  ctx.lineTo(hx + r * 0.46, hy + r * 1.02);
+  ctx.quadraticCurveTo(hx + r * 1.78, hy + r * 1.55, hx + r * 1.72, hy + r * 4);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillStyle = `rgba(${tone[0]},${tone[1]},${tone[2]},${alpha})`;
+  ctx.beginPath();
+  ctx.ellipse(hx, hy, r * 0.9, r * 1.05, 0, 0, TAU2);
+  ctx.fill();
+}
+function drawPerformer(ctx, x, footY, h, o) {
+  const headR = h * 0.1;
+  const headCy = footY - h * 0.9;
+  const shoulderY = footY - h * 0.74;
+  const hipY = footY - h * 0.46;
+  const shHalf = h * 0.13;
+  const hipHalf = h * 0.09;
+  const skin = `rgba(${o.tone[0]},${o.tone[1]},${o.tone[2]},${o.alpha})`;
+  const sh = ctx.createRadialGradient(x, footY, 1, x, footY, h * 0.24);
+  sh.addColorStop(0, "rgba(0,0,0,0.4)");
+  sh.addColorStop(1, "rgba(0,0,0,0)");
+  ctx.save();
+  ctx.scale(1, 0.28);
+  ctx.fillStyle = sh;
+  ctx.beginPath();
+  ctx.ellipse(x, footY / 0.28, h * 0.24, h * 0.24, 0, 0, TAU2);
+  ctx.fill();
+  ctx.restore();
+  ctx.fillStyle = skin;
+  ctx.beginPath();
+  ctx.moveTo(x - hipHalf, hipY);
+  ctx.lineTo(x - hipHalf * 0.7, footY);
+  ctx.lineTo(x - hipHalf * 0.1, footY);
+  ctx.lineTo(x - hipHalf * 0.1, hipY + h * 0.02);
+  ctx.lineTo(x + hipHalf * 0.1, hipY + h * 0.02);
+  ctx.lineTo(x + hipHalf * 0.1, footY);
+  ctx.lineTo(x + hipHalf * 0.7, footY);
+  ctx.lineTo(x + hipHalf, hipY);
+  ctx.closePath();
+  ctx.fill();
+  ctx.beginPath();
+  ctx.moveTo(x - shHalf, shoulderY);
+  ctx.quadraticCurveTo(x - shHalf * 0.9, hipY - h * 0.12, x - hipHalf, hipY);
+  ctx.lineTo(x + hipHalf, hipY);
+  ctx.quadraticCurveTo(x + shHalf * 0.9, hipY - h * 0.12, x + shHalf, shoulderY);
+  ctx.quadraticCurveTo(x, shoulderY - h * 0.05, x - shHalf, shoulderY);
+  ctx.closePath();
+  ctx.fill();
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = skin;
+  ctx.lineWidth = h * 0.055;
+  const armY = shoulderY + h * 0.02;
+  if (o.pose === 1) {
+    ctx.beginPath();
+    ctx.moveTo(x - shHalf * 0.8, armY);
+    ctx.lineTo(x - shHalf * 1.5, footY - h * 1.02);
+    ctx.moveTo(x + shHalf * 0.8, armY);
+    ctx.lineTo(x + shHalf * 1.5, footY - h * 1.02);
+    ctx.stroke();
+  } else if (o.pose === 2) {
+    ctx.beginPath();
+    ctx.moveTo(x - shHalf * 0.8, armY);
+    ctx.lineTo(x + hipHalf * 1.4, hipY - h * 0.02);
+    ctx.moveTo(x + shHalf * 0.8, armY);
+    ctx.lineTo(x - hipHalf * 0.4, hipY - h * 0.06);
+    ctx.stroke();
+    ctx.fillStyle = skin;
+    ctx.beginPath();
+    ctx.ellipse(x + hipHalf * 1.5, hipY - h * 0.04, h * 0.07, h * 0.09, -0.5, 0, TAU2);
+    ctx.fill();
+  } else if (o.pose === 3) {
+    ctx.beginPath();
+    ctx.moveTo(x - shHalf * 0.8, armY);
+    ctx.lineTo(x - shHalf * 0.2, headCy + headR * 0.6);
+    ctx.moveTo(x + shHalf * 0.8, armY);
+    ctx.lineTo(x + shHalf * 1.1, hipY);
+    ctx.stroke();
+    ctx.lineWidth = h * 0.02;
+    ctx.beginPath();
+    ctx.moveTo(x - shHalf * 0.2, headCy + headR * 0.9);
+    ctx.lineTo(x - shHalf * 0.2, footY - h * 0.02);
+    ctx.stroke();
+  } else {
+    ctx.beginPath();
+    ctx.moveTo(x - shHalf * 0.85, armY);
+    ctx.lineTo(x - shHalf * 0.95, hipY + h * 0.02);
+    ctx.moveTo(x + shHalf * 0.85, armY);
+    ctx.lineTo(x + shHalf * 0.95, hipY + h * 0.02);
+    ctx.stroke();
+  }
+  ctx.fillStyle = skin;
+  ctx.fillRect(x - headR * 0.34, headCy + headR * 0.6, headR * 0.68, headR * 0.9);
+  ctx.beginPath();
+  ctx.ellipse(x, headCy, headR * 0.86, headR * 1.05, 0, 0, TAU2);
+  ctx.fill();
+  if (o.rimStrength > 0.01) {
+    ctx.strokeStyle = `rgba(${o.rim[0]},${o.rim[1]},${o.rim[2]},${(0.6 * o.rimStrength).toFixed(3)})`;
+    ctx.lineWidth = Math.max(1, h * 0.02);
+    ctx.beginPath();
+    ctx.moveTo(x - shHalf, shoulderY);
+    ctx.lineTo(x - headR * 0.6, headCy + headR * 0.4);
+    ctx.moveTo(x - headR * 0.7, headCy);
+    ctx.ellipse(x, headCy, headR * 0.84, headR * 1.02, 0, Math.PI * 1.05, Math.PI * 1.55);
+    ctx.stroke();
+  }
+}
+function drawBeam(ctx, x0, y0, x1, y1, halfTop, halfBot, tint, strength) {
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  const g = ctx.createLinearGradient(0, y0, 0, y1);
+  g.addColorStop(0, `rgba(${tint},${strength})`);
+  g.addColorStop(0.5, `rgba(${tint},${(strength * 0.4).toFixed(3)})`);
+  g.addColorStop(1, `rgba(${tint},0)`);
+  ctx.fillStyle = g;
+  ctx.beginPath();
+  ctx.moveTo(x0 - halfTop, y0);
+  ctx.lineTo(x1 - halfBot, y1);
+  ctx.lineTo(x1 + halfBot, y1);
+  ctx.lineTo(x0 + halfTop, y0);
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+function drawFixture(ctx, x, y, r, tint) {
+  const g = ctx.createRadialGradient(x, y, 0, x, y, r * 3);
+  g.addColorStop(0, `rgba(${tint},0.9)`);
+  g.addColorStop(0.4, `rgba(${tint},0.35)`);
+  g.addColorStop(1, `rgba(${tint},0)`);
+  ctx.fillStyle = g;
+  ctx.beginPath();
+  ctx.arc(x, y, r * 3, 0, TAU2);
+  ctx.fill();
+  ctx.fillStyle = `rgba(${tint},1)`;
+  ctx.beginPath();
+  ctx.arc(x, y, r, 0, TAU2);
+  ctx.fill();
+}
 function generateSeatPanorama(seat, focalPoint, neighborSeats) {
   const canvas = document.createElement("canvas");
   canvas.width = W;
@@ -8799,102 +9587,557 @@ function generateSeatPanorama(seat, focalPoint, neighborSeats) {
   const dy = focalPoint.y - seat.y;
   const distU = Math.hypot(dx, dy);
   const distM = Math.max(2, distU * UNIT);
+  const eyeM = seat.eyeHeightM ?? SEATED_EYE_HEIGHT_M;
+  const scene = classifyScene(seat, focalPoint, neighborSeats);
+  const rand = rng(scene.seed);
+  const baseHue = 210 + rand() * 150;
+  const rigTint = hslToRgb(220 + (rand() - 0.5) * 60, 0.55, 0.82);
+  const rigTintStr = `${rigTint[0]},${rigTint[1]},${rigTint[2]}`;
   const sky = ctx.createLinearGradient(0, 0, 0, H);
-  sky.addColorStop(0, "#05070c");
-  sky.addColorStop(0.42, "#11172a");
-  sky.addColorStop(0.5, "#1a2238");
-  sky.addColorStop(0.56, "#10141f");
-  sky.addColorStop(1, "#07090f");
+  sky.addColorStop(0, "#080b12");
+  sky.addColorStop(0.42, "#12182c");
+  sky.addColorStop(0.5, "#1c2440");
+  sky.addColorStop(0.56, "#151b2c");
+  sky.addColorStop(0.78, "#171e30");
+  sky.addColorStop(1, "#131829");
   ctx.fillStyle = sky;
   ctx.fillRect(0, 0, W, H);
-  const eyeM = seat.eyeHeightM ?? SEATED_EYE_HEIGHT_M;
-  const stageHalfYaw = Math.min(80, Math.atan2(4, distM) * 180 / Math.PI);
+  const floorAmb = ctx.createLinearGradient(0, pitchToY(-6), 0, H);
+  floorAmb.addColorStop(0, "rgba(30, 37, 56, 0)");
+  floorAmb.addColorStop(0.55, "rgba(30, 37, 56, 0.22)");
+  floorAmb.addColorStop(1, "rgba(22, 28, 44, 0.12)");
+  ctx.fillStyle = floorAmb;
+  ctx.fillRect(0, pitchToY(-6), W, H - pitchToY(-6));
+  const stageBearing = Math.atan2(dx, -dy);
+  const stands = buildStands(seat, neighborSeats, stageBearing, eyeM);
+  const hasRelief = stands.maxDelta >= FLAT_DELTA_M;
+  if (hasRelief) drawStands(ctx, stands.bins, yawToX, pitchToY);
+  const nearGlow = Math.max(0.3, Math.min(1, 1 - (distM - 6) / 60));
   const sightline = stageSightlinePitch(eyeM, distM);
+  const stageHalfYaw = Math.min(80, Math.atan2(4, distM) * 180 / Math.PI);
   const stageTopPitch = Math.min(45, sightline.topPitch);
   const stageBasePitch = sightline.basePitch;
+  if (scene.mode === "sport") {
+    drawSportScene(ctx, distM, eyeM, scene, nearGlow, baseHue, rigTintStr, rand);
+  } else if (scene.mode === "arena") {
+    drawArenaScene(ctx, distM, eyeM, scene, nearGlow, rigTintStr, rand);
+  } else {
+    drawProsceniumScene(ctx, stageHalfYaw, stageTopPitch, stageBasePitch, nearGlow, baseHue, rigTintStr, rand);
+  }
+  const rigCount = scene.mode === "sport" ? 34 : 24 + Math.floor(rand() * 8);
+  ctx.fillStyle = `rgba(${rigTintStr},0.8)`;
+  for (let i = 0; i < rigCount; i++) {
+    const x = (i + 0.5) / rigCount * W;
+    const y = pitchToY(scene.mode === "sport" ? 58 : 54 + i * 7 % 3 * 6);
+    ctx.beginPath();
+    ctx.arc(x, y, scene.mode === "sport" ? 2.6 : 3.2, 0, TAU2);
+    ctx.fill();
+  }
+  drawAudience(ctx, seat, neighborSeats, focalPoint, stageBearing, eyeM, dx, dy, hasRelief, scene);
+  const poleFade = ctx.createLinearGradient(0, 0, 0, H);
+  poleFade.addColorStop(0, "rgba(0,0,0,0.85)");
+  poleFade.addColorStop(0.12, "rgba(0,0,0,0)");
+  poleFade.addColorStop(0.9, "rgba(0,0,0,0)");
+  poleFade.addColorStop(1, "rgba(0,0,0,0.55)");
+  ctx.fillStyle = poleFade;
+  ctx.fillRect(0, 0, W, H);
+  return { url: canvas.toDataURL("image/jpeg", 0.82), distanceM: Math.round(distM) };
+}
+function drawProsceniumScene(ctx, stageHalfYaw, stageTopPitch, stageBasePitch, nearGlow, baseHue, rigTintStr, rand) {
   const sx0 = yawToX(-stageHalfYaw);
   const sx1 = yawToX(stageHalfYaw);
   const sy0 = pitchToY(stageTopPitch);
   const sy1 = pitchToY(stageBasePitch);
-  const glow = ctx.createRadialGradient(W / 2, (sy0 + sy1) / 2, 10, W / 2, (sy0 + sy1) / 2, (sx1 - sx0) * 1.1);
-  glow.addColorStop(0, "rgba(129, 140, 248, 0.5)");
-  glow.addColorStop(0.5, "rgba(99, 102, 241, 0.16)");
+  const sw = sx1 - sx0;
+  const sh = sy1 - sy0;
+  const archTop = pitchToY(Math.min(50, stageTopPitch + 10));
+  const glowR = sw * (1.1 + (1 - nearGlow) * 0.5);
+  const glow = ctx.createRadialGradient(W / 2, (sy0 + sy1) / 2, 8, W / 2, (sy0 + sy1) / 2, glowR);
+  glow.addColorStop(0, "rgba(255, 214, 150, 0.34)");
+  glow.addColorStop(0.28, "rgba(150, 150, 230, 0.3)");
+  glow.addColorStop(0.6, "rgba(99, 102, 241, 0.12)");
   glow.addColorStop(1, "rgba(99, 102, 241, 0)");
   ctx.fillStyle = glow;
-  ctx.fillRect(sx0 - (sx1 - sx0) * 0.6, sy0 - (sy1 - sy0) * 1.2, (sx1 - sx0) * 2.2, (sy1 - sy0) * 3.4);
-  ctx.fillStyle = "#242c44";
-  ctx.fillRect(sx0, sy0, sx1 - sx0, sy1 - sy0);
+  ctx.fillRect(sx0 - sw * 0.6, sy0 - sh * 1.2, sw * 2.2, sh * 3.4);
+  const topCol = hslToRgb(baseHue, 0.62, 0.55);
+  const midCol = hslToRgb(baseHue + 40, 0.7, 0.5);
+  const botCol = hslToRgb(baseHue + 70, 0.78, 0.52);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(sx0, sy0, sw, sh);
+  ctx.clip();
   const backdrop = ctx.createLinearGradient(0, sy0, 0, sy1);
-  backdrop.addColorStop(0, "#7c5cff");
-  backdrop.addColorStop(0.5, "#e1447a");
-  backdrop.addColorStop(1, "#f59e0b");
-  ctx.globalAlpha = 0.75;
+  backdrop.addColorStop(0, `rgb(${topCol[0]},${topCol[1]},${topCol[2]})`);
+  backdrop.addColorStop(0.5, `rgb(${midCol[0]},${midCol[1]},${midCol[2]})`);
+  backdrop.addColorStop(1, `rgb(${botCol[0]},${botCol[1]},${botCol[2]})`);
+  ctx.globalAlpha = 0.8;
   ctx.fillStyle = backdrop;
-  const inset = (sx1 - sx0) * 0.06;
-  ctx.fillRect(sx0 + inset, sy0 + (sy1 - sy0) * 0.12, sx1 - sx0 - inset * 2, (sy1 - sy0) * 0.62);
+  ctx.fillRect(sx0, sy0, sw, sh);
   ctx.globalAlpha = 1;
-  ctx.fillStyle = "#0d1119";
-  ctx.fillRect(sx0, sy1 - (sy1 - sy0) * 0.1, sx1 - sx0, (sy1 - sy0) * 0.1);
-  const performerH = (sy1 - sy0) * 0.45;
-  ctx.fillStyle = "rgba(8, 10, 16, 0.85)";
-  for (const fx of [0.35, 0.5, 0.65]) {
-    const px = sx0 + (sx1 - sx0) * fx;
-    const py = sy1 - (sy1 - sy0) * 0.12;
+  const fall = ctx.createRadialGradient(W / 2, (sy0 + sy1) / 2, sw * 0.12, W / 2, (sy0 + sy1) / 2, sw * 0.62);
+  fall.addColorStop(0, "rgba(6,8,14,0)");
+  fall.addColorStop(0.7, "rgba(6,8,14,0.15)");
+  fall.addColorStop(1, "rgba(5,6,11,0.92)");
+  ctx.fillStyle = fall;
+  ctx.fillRect(sx0, sy0, sw, sh);
+  ctx.restore();
+  const perfCount = 3 + Math.floor(rand() * 3);
+  const perfH = sh * 0.46;
+  const floorY = sy1 - sh * 0.08;
+  for (let i = 0; i < perfCount; i++) {
+    const t2 = (i + 1) / (perfCount + 1);
+    const px = sx0 + sw * (0.22 + t2 * 0.56 + (rand() - 0.5) * 0.06);
+    drawPerformer(ctx, px, floorY, perfH * (0.9 + rand() * 0.24), {
+      tone: [8, 10, 16],
+      alpha: 0.9,
+      pose: Math.floor(rand() * 4),
+      rim: hslToRgb(baseHue + 20, 0.5, 0.7),
+      rimStrength: 0.7
+    });
+  }
+  ctx.fillStyle = "#05070d";
+  ctx.fillRect(sx0 - sw * 0.5, archTop, sw * 0.5, sy1 - archTop);
+  ctx.fillRect(sx1, archTop, sw * 0.5, sy1 - archTop);
+  const legBot = sw * 0.055 + 3;
+  const legTop = legBot * 1.35;
+  ctx.fillStyle = "#03050a";
+  ctx.beginPath();
+  ctx.moveTo(sx0, sy1);
+  ctx.lineTo(sx0 - legBot, sy1);
+  ctx.lineTo(sx0 - legTop, archTop);
+  ctx.lineTo(sx0 + sw * 0.012, archTop);
+  ctx.closePath();
+  ctx.fill();
+  ctx.beginPath();
+  ctx.moveTo(sx1, sy1);
+  ctx.lineTo(sx1 + legBot, sy1);
+  ctx.lineTo(sx1 + legTop, archTop);
+  ctx.lineTo(sx1 - sw * 0.012, archTop);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillRect(sx0 - legTop, archTop, sw + legTop * 2, (sy1 - archTop) * 0.12);
+  const valH = sh * 0.14;
+  const valY = archTop + (sy1 - archTop) * 0.12;
+  ctx.fillStyle = "rgba(4,6,12,0.96)";
+  const scallops = 7;
+  ctx.beginPath();
+  ctx.moveTo(sx0 - legTop, valY);
+  for (let i = 0; i <= scallops; i++) {
+    const xx = sx0 - legTop + (sw + legTop * 2) * i / scallops;
+    ctx.quadraticCurveTo(xx - (sw + legTop * 2) / scallops / 2, valY + valH, xx, valY);
+  }
+  ctx.lineTo(sx1 + legTop, valY);
+  ctx.lineTo(sx1 + legTop, archTop);
+  ctx.lineTo(sx0 - legTop, archTop);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillStyle = `rgba(${rigTintStr},0.12)`;
+  ctx.fillRect(sx0 - 1.5, valY, 1.5, sy1 - valY);
+  ctx.fillRect(sx1, valY, 1.5, sy1 - valY);
+  ctx.fillStyle = "#0b0f18";
+  ctx.fillRect(sx0 - legBot, sy1 - sh * 0.05, sw + legBot * 2, sh * 0.05 + 3);
+  const foot = ctx.createLinearGradient(0, sy1 - sh * 0.05, 0, sy1 + sh * 0.12);
+  foot.addColorStop(0, `rgba(255,206,140,${(0.5 * nearGlow).toFixed(3)})`);
+  foot.addColorStop(1, "rgba(255,206,140,0)");
+  ctx.fillStyle = foot;
+  ctx.fillRect(sx0 - legBot, sy1 - sh * 0.05, sw + legBot * 2, sh * 0.2);
+  const beams = 3 + Math.floor(rand() * 2);
+  for (let i = 0; i < beams; i++) {
+    const t2 = (i + 1) / (beams + 1);
+    const fx = sx0 + sw * (t2 + (rand() - 0.5) * 0.08);
+    const fy = pitchToY(Math.min(62, stageTopPitch + 26));
+    const skew = (rand() - 0.5) * sw * 0.16;
+    drawBeam(ctx, fx, fy, fx + skew, sy1, 4, sw * 0.09, rigTintStr, 0.16 * (0.7 + nearGlow * 0.5));
+    drawFixture(ctx, fx, fy, 2.4, rigTintStr);
+  }
+}
+function drawArenaScene(ctx, distM, eyeM, scene, nearGlow, rigTintStr, rand) {
+  const stageR = Math.min(distM * 0.6, Math.max(3, scene.voidRadiusM));
+  const halfYaw = Math.min(55, Math.atan2(stageR, distM) * 180 / Math.PI);
+  const cx = W / 2;
+  const deckRiserM = 1.2;
+  const nearDist = Math.max(distM * 0.45, distM - stageR);
+  const farDist = distM + stageR;
+  const nearTopPitch = Math.atan2(deckRiserM - eyeM, nearDist) * 180 / Math.PI;
+  const farTopPitch = Math.atan2(deckRiserM - eyeM, farDist) * 180 / Math.PI;
+  const nearBasePitch = Math.atan2(-eyeM, nearDist) * 180 / Math.PI;
+  const yNearTop = pitchToY(nearTopPitch);
+  const yFarTop = pitchToY(farTopPitch);
+  const yBase = pitchToY(nearBasePitch);
+  const halfW = yawToX(halfYaw) - cx;
+  const topRy = Math.max(6, (yNearTop - yFarTop) / 2);
+  const topCy = (yNearTop + yFarTop) / 2;
+  const pool = ctx.createRadialGradient(cx, yBase, 4, cx, yBase, halfW * 2.6);
+  pool.addColorStop(0, `rgba(255,206,150,${(0.2 * nearGlow).toFixed(3)})`);
+  pool.addColorStop(0.5, "rgba(150,140,190,0.08)");
+  pool.addColorStop(1, "rgba(40,44,60,0)");
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  ctx.fillStyle = pool;
+  ctx.fillRect(cx - halfW * 2.6, yFarTop - topRy, halfW * 5.2, yBase - yFarTop + topRy + 40);
+  ctx.restore();
+  ctx.fillStyle = "#0c1019";
+  ctx.beginPath();
+  ctx.moveTo(cx - halfW, topCy);
+  ctx.ellipse(cx, topCy, halfW, topRy, 0, Math.PI, 0, false);
+  ctx.lineTo(cx + halfW, yBase);
+  ctx.ellipse(cx, yBase, halfW, topRy, 0, 0, Math.PI, false);
+  ctx.closePath();
+  ctx.fill();
+  const riser = ctx.createLinearGradient(0, topCy, 0, yBase);
+  riser.addColorStop(0, `rgba(${rigTintStr},0.14)`);
+  riser.addColorStop(1, "rgba(0,0,0,0)");
+  ctx.fillStyle = riser;
+  ctx.fillRect(cx - halfW, topCy, halfW * 2, yBase - topCy);
+  const FORMATIONS = [
+    // frontman + guitarist + one at the back
+    [{ u: -0.24, v: 0.4, lead: true, pose: 3 }, { u: 0.34, v: -0.04, pose: 2 }, { u: -0.52, v: -0.38, pose: 0 }],
+    // duo — singer forward, instrument behind the shoulder
+    [{ u: 0.2, v: 0.34, lead: true, pose: 3 }, { u: -0.3, v: -0.08, pose: 2 }],
+    // 4-piece — lead just off-centre, band staggered around the far half
+    [{ u: -0.1, v: 0.28, lead: true, pose: 1 }, { u: 0.44, v: -0.2, pose: 2 }, { u: -0.46, v: -0.14, pose: 2 }, { u: 0.08, v: -0.46, pose: 0 }]
+  ];
+  const form = FORMATIONS[Math.floor(rand() * FORMATIONS.length)];
+  const mirror = rand() < 0.5 ? -1 : 1;
+  const spotX = (p) => cx + p.u * mirror * halfW * 0.84;
+  const spotY = (p) => topCy + p.v * topRy * 0.8;
+  const lead = form.find((p) => p.lead) ?? form[0];
+  const leadX = spotX(lead);
+  const deckTop = ctx.createLinearGradient(0, topCy - topRy, 0, topCy + topRy);
+  deckTop.addColorStop(0, "#3d4a72");
+  deckTop.addColorStop(1, "#232b47");
+  ctx.fillStyle = deckTop;
+  ctx.beginPath();
+  ctx.ellipse(cx, topCy, halfW, topRy, 0, 0, TAU2);
+  ctx.fill();
+  const deckGlow = ctx.createRadialGradient(leadX, topCy, 2, leadX, topCy, halfW);
+  deckGlow.addColorStop(0, `rgba(255,214,160,${(0.5 * nearGlow).toFixed(3)})`);
+  deckGlow.addColorStop(1, "rgba(255,214,160,0)");
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  ctx.fillStyle = deckGlow;
+  ctx.beginPath();
+  ctx.ellipse(cx, topCy, halfW, topRy, 0, 0, TAU2);
+  ctx.fill();
+  ctx.restore();
+  ctx.strokeStyle = `rgba(${rigTintStr},0.7)`;
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.ellipse(cx, topCy, halfW, topRy, 0, 0, TAU2);
+  ctx.stroke();
+  const perfH = Math.max(24, (yBase - yFarTop) * 1.3);
+  const gearN = form.length >= 3 ? 3 : 2;
+  for (let i = 0; i < gearN; i++) {
+    const gu = (-0.62 + i * 0.52 + (rand() - 0.5) * 0.12) * -mirror;
+    const gx = cx + gu * halfW * 0.7;
+    const gy = topCy - topRy * (0.45 + rand() * 0.18);
+    const gw = halfW * (0.07 + rand() * 0.04);
+    const gh = perfH * (0.26 + rand() * 0.12);
+    ctx.fillStyle = "#0a0e18";
+    ctx.fillRect(gx - gw / 2, gy - gh, gw, gh);
+    ctx.fillStyle = `rgba(${rigTintStr},0.3)`;
+    ctx.fillRect(gx - gw / 2, gy - gh, gw, 1.5);
+  }
+  if (form.length >= 3) {
+    const drumX = cx - lead.u * mirror * halfW * 0.4;
+    ctx.fillStyle = "#0b0f1a";
     ctx.beginPath();
-    ctx.arc(px, py - performerH * 0.82, performerH * 0.16, 0, Math.PI * 2);
+    ctx.ellipse(drumX, topCy - topRy * 0.34, halfW * 0.08, topRy * 0.1, 0, 0, TAU2);
     ctx.fill();
-    ctx.fillRect(px - performerH * 0.14, py - performerH * 0.68, performerH * 0.28, performerH * 0.68);
+    ctx.strokeStyle = `rgba(${rigTintStr},0.35)`;
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }
+  for (const p of [...form].sort((a, b) => a.v - b.v)) {
+    const depthScale = 0.82 + (p.v + 1) * 0.14;
+    drawPerformer(ctx, spotX(p), spotY(p), perfH * depthScale * (p.lead ? 1.06 : 0.92), {
+      tone: [18, 21, 34],
+      alpha: 0.95,
+      pose: p.pose,
+      rim: hslToRgb(40, 0.72, 0.8),
+      rimStrength: p.lead ? 1.4 : 0.9
+    });
   }
-  ctx.globalAlpha = 0.14;
-  ctx.fillStyle = "#c7d2fe";
-  for (const fx of [0.3, 0.5, 0.7]) {
-    const bx = sx0 + (sx1 - sx0) * fx;
+  const trussY = pitchToY(Math.min(60, farTopPitch + 34));
+  const trussRy = topRy * 1.1 + 6;
+  ctx.strokeStyle = "rgba(60,68,92,0.85)";
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  ctx.ellipse(cx, trussY, halfW * 1.15, trussRy, 0, 0, TAU2);
+  ctx.stroke();
+  const fixtures = 4 + Math.floor(rand() * 3);
+  for (let i = 0; i < fixtures; i++) {
+    const a = i / fixtures * TAU2;
+    const fxX = cx + Math.cos(a) * halfW * 1.15;
+    const fxY = trussY + Math.sin(a) * trussRy;
+    if (Math.sin(a) > -0.2) {
+      const tx = cx + (rand() - 0.5) * halfW * 0.8;
+      drawBeam(ctx, fxX, fxY, tx, topCy, 3, halfW * 0.32, rigTintStr, 0.2 * (0.7 + nearGlow * 0.4));
+    }
+    drawFixture(ctx, fxX, fxY, 3, rigTintStr);
+  }
+  const scoreY = pitchToY(Math.min(52, farTopPitch + 24));
+  const scoreW = Math.max(60, halfW * 0.4);
+  const scoreH = Math.max(24, scoreW * 0.34);
+  ctx.strokeStyle = "rgba(70,78,102,0.6)";
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  ctx.moveTo(cx - scoreW * 0.3, scoreY - scoreH / 2);
+  ctx.lineTo(cx - scoreW * 0.16, scoreY - scoreH * 2.2);
+  ctx.moveTo(cx + scoreW * 0.3, scoreY - scoreH / 2);
+  ctx.lineTo(cx + scoreW * 0.16, scoreY - scoreH * 2.2);
+  ctx.stroke();
+  ctx.fillStyle = "#0d1220";
+  ctx.fillRect(cx - scoreW / 2, scoreY - scoreH / 2, scoreW, scoreH);
+  const screen = ctx.createLinearGradient(0, scoreY - scoreH * 0.3, 0, scoreY + scoreH * 0.42);
+  screen.addColorStop(0, `rgba(${rigTintStr},0.5)`);
+  screen.addColorStop(1, "rgba(255,214,160,0.32)");
+  ctx.fillStyle = screen;
+  ctx.fillRect(cx - scoreW * 0.42, scoreY - scoreH * 0.3, scoreW * 0.84, scoreH * 0.72);
+  ctx.fillStyle = "rgba(255,214,160,0.55)";
+  ctx.fillRect(cx - scoreW / 2, scoreY + scoreH / 2 - 2, scoreW, 2);
+  const scoreGlow = ctx.createRadialGradient(cx, scoreY, 4, cx, scoreY, scoreW * 1.1);
+  scoreGlow.addColorStop(0, `rgba(${rigTintStr},0.2)`);
+  scoreGlow.addColorStop(1, "rgba(0,0,0,0)");
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  ctx.fillStyle = scoreGlow;
+  ctx.fillRect(cx - scoreW * 1.1, scoreY - scoreW * 0.8, scoreW * 2.2, scoreW * 1.6);
+  const airGlow = ctx.createRadialGradient(cx, (trussY + topCy) / 2, 6, cx, (trussY + topCy) / 2, halfW * 1.5);
+  airGlow.addColorStop(0, `rgba(${rigTintStr},${(0.1 * (0.6 + nearGlow * 0.5)).toFixed(3)})`);
+  airGlow.addColorStop(1, "rgba(0,0,0,0)");
+  ctx.fillStyle = airGlow;
+  ctx.fillRect(cx - halfW * 1.5, trussY - 40, halfW * 3, topCy - trussY + 80);
+  ctx.restore();
+  const keyX = cx + Math.sign(leadX - cx || 1) * halfW * 0.5;
+  drawBeam(ctx, keyX, trussY - trussRy * 0.4, leadX, spotY(lead), 2.5, halfW * 0.16, "255,224,178", 0.42 * (0.7 + nearGlow * 0.4));
+  const pool2 = ctx.createRadialGradient(leadX, spotY(lead), 1, leadX, spotY(lead), halfW * 0.2);
+  pool2.addColorStop(0, `rgba(255,228,185,${(0.4 * nearGlow).toFixed(3)})`);
+  pool2.addColorStop(1, "rgba(255,228,185,0)");
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  ctx.fillStyle = pool2;
+  ctx.beginPath();
+  ctx.ellipse(leadX, spotY(lead), halfW * 0.2, topRy * 0.24, 0, 0, TAU2);
+  ctx.fill();
+  ctx.restore();
+}
+function drawSportScene(ctx, distM, eyeM, scene, _nearGlow, baseHue, rigTintStr, rand) {
+  const cx = W / 2;
+  const surfR = Math.max(10, scene.voidRadiusM);
+  const nearEdge = Math.max(2, distM - surfR);
+  const farEdge = distM + surfR;
+  const halfYaw = Math.min(78, Math.atan2(surfR * 1.15, distM) * 180 / Math.PI);
+  const nearPitch = Math.atan2(-eyeM, nearEdge) * 180 / Math.PI;
+  const farPitch = Math.atan2(-eyeM, farEdge) * 180 / Math.PI;
+  const yNear = pitchToY(nearPitch);
+  const yFar = pitchToY(farPitch);
+  const halfW = yawToX(halfYaw) - cx;
+  const cy = (yNear + yFar) / 2;
+  const ry = Math.max(10, (yNear - yFar) / 2);
+  const surfCol = ctx.createRadialGradient(cx, cy, 4, cx, cy, halfW);
+  surfCol.addColorStop(0, "#e8f0fb");
+  surfCol.addColorStop(0.7, "#b9c9e2");
+  surfCol.addColorStop(1, "#8fa3c4");
+  ctx.save();
+  ctx.beginPath();
+  ctx.ellipse(cx, cy, halfW, ry, 0, 0, TAU2);
+  ctx.clip();
+  ctx.fillStyle = surfCol;
+  ctx.fillRect(cx - halfW, cy - ry, halfW * 2, ry * 2);
+  ctx.strokeStyle = "rgba(90,120,170,0.5)";
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  ctx.moveTo(cx, cy - ry);
+  ctx.lineTo(cx, cy + ry);
+  ctx.moveTo(cx - halfW * 0.5, cy - ry);
+  ctx.lineTo(cx - halfW * 0.5, cy + ry);
+  ctx.moveTo(cx + halfW * 0.5, cy - ry);
+  ctx.lineTo(cx + halfW * 0.5, cy + ry);
+  ctx.stroke();
+  ctx.strokeStyle = "rgba(180,90,110,0.45)";
+  ctx.beginPath();
+  ctx.ellipse(cx, cy, ry * 0.9, ry * 0.5, 0, 0, TAU2);
+  ctx.stroke();
+  ctx.restore();
+  ctx.strokeStyle = "rgba(210,225,245,0.6)";
+  ctx.lineWidth = 2.5;
+  ctx.beginPath();
+  ctx.ellipse(cx, cy, halfW, ry, 0, 0, TAU2);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(20,26,40,0.8)";
+  for (let i = 0; i < 5; i++) {
+    const px = cx + (rand() - 0.5) * halfW * 1.4;
+    const py = cy + (rand() - 0.5) * ry * 1.1;
+    const s = Math.max(2, ry * 0.06);
     ctx.beginPath();
-    ctx.moveTo(bx - 8, pitchToY(Math.min(60, stageTopPitch + 25)));
-    ctx.lineTo(bx - (sx1 - sx0) * 0.09, sy1);
-    ctx.lineTo(bx + (sx1 - sx0) * 0.09, sy1);
-    ctx.lineTo(bx + 8, pitchToY(Math.min(60, stageTopPitch + 25)));
-    ctx.closePath();
+    ctx.ellipse(px, py, s * 0.6, s, 0, 0, TAU2);
     ctx.fill();
   }
-  ctx.globalAlpha = 1;
-  ctx.fillStyle = "rgba(199, 210, 254, 0.8)";
-  for (let i = 0; i < 26; i++) {
-    const x = i / 26 * W;
-    const y = pitchToY(55 + i % 3 * 6);
+  const wash = ctx.createRadialGradient(cx, cy, 4, cx, cy, halfW * 1.4);
+  wash.addColorStop(0, "rgba(200,220,255,0.12)");
+  wash.addColorStop(1, "rgba(200,220,255,0)");
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  ctx.fillStyle = wash;
+  ctx.fillRect(cx - halfW * 1.4, yFar - ry, halfW * 2.8, yNear - yFar + ry * 2);
+  ctx.restore();
+  const sbY = pitchToY(Math.min(66, farPitch + 60));
+  const sbW = Math.max(80, halfW * 0.7);
+  const sbH = sbW * 0.5;
+  const sbGlow = ctx.createRadialGradient(cx, sbY, 4, cx, sbY, sbW * 1.6);
+  sbGlow.addColorStop(0, `rgba(${rigTintStr},0.3)`);
+  sbGlow.addColorStop(1, `rgba(${rigTintStr},0)`);
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  ctx.fillStyle = sbGlow;
+  ctx.fillRect(cx - sbW * 1.6, sbY - sbW * 1.2, sbW * 3.2, sbW * 2.4);
+  ctx.restore();
+  ctx.fillStyle = "#080b12";
+  ctx.beginPath();
+  ctx.moveTo(cx - sbW / 2, sbY - sbH / 2);
+  ctx.lineTo(cx + sbW / 2, sbY - sbH / 2);
+  ctx.lineTo(cx + sbW * 0.6, sbY);
+  ctx.lineTo(cx + sbW / 2, sbY + sbH / 2);
+  ctx.lineTo(cx - sbW / 2, sbY + sbH / 2);
+  ctx.lineTo(cx - sbW * 0.6, sbY);
+  ctx.closePath();
+  ctx.fill();
+  const screenHue = baseHue;
+  for (let i = 0; i < 3; i++) {
+    const scol = hslToRgb(screenHue + i * 30, 0.5, 0.5);
+    ctx.fillStyle = `rgba(${scol[0]},${scol[1]},${scol[2]},0.75)`;
+    const swid = sbW * 0.26;
+    ctx.fillRect(cx - sbW * 0.42 + i * (swid + sbW * 0.06), sbY - sbH * 0.32, swid, sbH * 0.64);
+  }
+  ctx.fillStyle = `rgba(${rigTintStr},0.9)`;
+  for (let i = 0; i < 8; i++) {
+    const lx = cx - sbW * 0.6 + sbW * 1.2 * i / 7;
     ctx.beginPath();
-    ctx.arc(x, y, 3.2, 0, Math.PI * 2);
+    ctx.arc(lx, sbY + sbH * 0.62, 2.4, 0, TAU2);
     ctx.fill();
   }
-  const stageBearing = Math.atan2(dx, -dy);
-  ctx.fillStyle = "rgba(16, 20, 30, 0.95)";
+}
+function drawAudience(ctx, seat, neighborSeats, _focalPoint, stageBearing, eyeM, dx, dy, hasRelief, scene) {
+  const own = seat.sectionId;
+  let seatAhead = false;
+  const figs = [];
   for (const other of neighborSeats) {
     if (other.id === seat.id) continue;
     const ox = other.x - seat.x;
     const oy = other.y - seat.y;
     const d = Math.hypot(ox, oy) * UNIT;
-    if (d < 0.3 || d > 14) continue;
+    if (own && other.sectionId === own && d < 3 && ox * dx + oy * dy > 0) seatAhead = true;
+    if (d < 0.3 || d > 32) continue;
     const bearing = Math.atan2(ox, -oy) - stageBearing;
     const yaw = (bearing * 180 / Math.PI + 540) % 360 - 180;
-    const headPitch = -Math.atan2(0.35, d) * 180 / Math.PI;
-    const headR = Math.min(46, 260 / (d / UNIT / 24 + 1.2) / 4);
-    const hx = yawToX(yaw);
-    const hy = pitchToY(headPitch);
-    ctx.beginPath();
-    ctx.arc(hx, hy, headR, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.beginPath();
-    ctx.ellipse(hx, hy + headR * 1.4, headR * 1.7, headR * 0.9, 0, Math.PI, 0, true);
-    ctx.fill();
+    const rise = hasRelief ? (other.eyeHeightM ?? SEATED_EYE_HEIGHT_M) - eyeM : 0;
+    const headPitch = Math.atan2(rise - 0.28, d) * 180 / Math.PI;
+    if (headPitch > 10 && d > 5) continue;
+    let hh = 0;
+    for (let k = 0; k < other.id.length; k++) hh = hh * 31 + other.id.charCodeAt(k) & 65535;
+    const jitter = 0.9 + (hh & 15) / 40;
+    const r = Math.min(78, Math.atan2(0.16, d) * 180 / Math.PI * PX_PER_DEG * jitter);
+    if (r < 1.2) continue;
+    figs.push({ hx: yawToX(yaw), hy: pitchToY(headPitch), r, d, hash: hh });
+  }
+  figs.sort((a, b) => b.d - a.d);
+  const figRows = [];
+  {
+    const byY = [...figs].sort((a, b) => a.hy - b.hy);
+    let cur = [];
+    const flush = () => {
+      if (!cur.length) return;
+      const d = cur.reduce((s, f) => s + f.d, 0) / cur.length;
+      const hy = cur.reduce((s, f) => s + f.hy, 0) / cur.length;
+      const r = cur.reduce((s, f) => s + f.r, 0) / cur.length;
+      figRows.push({ figs: cur.sort((a, b) => b.d - a.d), d, hy, r });
+      cur = [];
+    };
+    for (const f of byY) {
+      const last = cur[cur.length - 1];
+      if (last && Math.abs(f.hy - last.hy) > Math.max(5, (last.r + f.r) / 2 * 1.7)) flush();
+      cur.push(f);
+    }
+    flush();
+  }
+  figRows.sort((a, b) => b.d - a.d);
+  const CLOTHES = [[22, 26, 40], [28, 27, 42], [24, 31, 46], [31, 30, 47], [20, 24, 36]];
+  for (const row of figRows) {
+    if (row.figs.length >= 3 && row.r >= 1.6 && row.r < 26) {
+      const runs = [];
+      const byX = [...row.figs].sort((a, b) => a.hx - b.hx);
+      let run = [];
+      for (const f of byX) {
+        const last = run[run.length - 1];
+        if (last && f.hx - last.hx > Math.max(14, f.r * 7)) {
+          if (run.length >= 3) runs.push(run);
+          run = [];
+        }
+        run.push(f);
+      }
+      if (run.length >= 3) runs.push(run);
+      const stripAlpha = Math.min(0.42, 0.5 * (1 - row.d / 42));
+      if (stripAlpha > 0.05) {
+        ctx.fillStyle = `rgba(15, 19, 31, ${stripAlpha.toFixed(3)})`;
+        for (const seg of runs) {
+          const x0 = seg[0].hx - row.r * 1.6;
+          const x1 = seg[seg.length - 1].hx + row.r * 1.6;
+          ctx.beginPath();
+          ctx.roundRect(x0, row.hy + row.r * 0.8, x1 - x0, row.r * 2.4, row.r * 0.8);
+          ctx.fill();
+        }
+      }
+    }
+    for (const f of row.figs) {
+      const alpha = f.d < 12 ? 0.95 : f.d < 17 ? Math.max(0.66, 0.95 - (f.d - 12) / 18) : Math.max(0.3, 0.68 - (f.d - 17) / 34);
+      const lift = Math.round((1 - Math.min(1, f.d / 16)) * 10);
+      const headTone = [14 + (f.hash >> 4 & 6) + lift, 17 + (f.hash >> 4 & 6) + lift, 25 + (f.hash >> 4 & 6) + lift];
+      const clo0 = CLOTHES[f.hash % CLOTHES.length];
+      const clothing = [clo0[0] + lift, clo0[1] + lift, clo0[2] + lift];
+      if (f.r >= 13) {
+        const rim = f.d < 9 ? 0.16 * (1 - f.d / 9) + (scene.mode === "proscenium" ? 0.06 : 0) : 0;
+        drawSeated(ctx, f.hx, f.hy, f.r, {
+          tone: headTone,
+          clothing,
+          alpha,
+          tilt: ((f.hash >> 2 & 7) - 3.5) * 0.018,
+          // ±~7°
+          shoulderK: 1.72 + (f.hash >> 5 & 7) / 22,
+          // ~1.72..2.04
+          hair: f.hash % HAIR_KINDS,
+          rim,
+          turn: ((f.hash >> 8 & 7) - 3.5) * 0.034,
+          // ±~0.12 head-radii sideways
+          lean: ((f.hash >> 10 & 3) - 1.5) * 0.09
+          // one shoulder rides higher
+        });
+      } else if (f.r >= 5.5) {
+        drawSeatedMid(ctx, f.hx, f.hy, f.r, clothing, headTone, alpha);
+      } else {
+        ctx.fillStyle = `rgba(${headTone[0]},${headTone[1]},${headTone[2]},${alpha.toFixed(3)})`;
+        ctx.beginPath();
+        ctx.arc(f.hx, f.hy, f.r, 0, TAU2);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.ellipse(f.hx, f.hy + f.r * 1.4, f.r * 1.85, f.r * 0.95, 0, Math.PI, 0, true);
+        ctx.fill();
+      }
+    }
+  }
+  if (seatAhead) {
+    const railTop = pitchToY(-34);
+    ctx.fillStyle = "rgba(6, 8, 14, 0.92)";
+    ctx.fillRect(0, railTop, W, H - railTop);
+    ctx.fillStyle = "rgba(24, 30, 46, 0.9)";
+    const humps = 16;
+    for (let i = 0; i < humps; i++) {
+      const cx = (i + 0.5) / humps * W;
+      ctx.beginPath();
+      ctx.ellipse(cx, railTop + 6, W / humps * 0.42, 22, 0, Math.PI, 0, true);
+      ctx.fill();
+    }
   }
-  const poleFade = ctx.createLinearGradient(0, 0, 0, H);
-  poleFade.addColorStop(0, "rgba(0,0,0,0.85)");
-  poleFade.addColorStop(0.12, "rgba(0,0,0,0)");
-  poleFade.addColorStop(0.88, "rgba(0,0,0,0)");
-  poleFade.addColorStop(1, "rgba(0,0,0,0.85)");
-  ctx.fillStyle = poleFade;
-  ctx.fillRect(0, 0, W, H);
-  return { url: canvas.toDataURL("image/jpeg", 0.82), distanceM: Math.round(distM) };
 }
 var TW = 480;
 var TH = 270;
@@ -8910,12 +10153,16 @@ function generateSeatThumb(seat, focalPoint, _neighborSeats) {
   const dx = focalPoint.x - seat.x;
   const dy = focalPoint.y - seat.y;
   const distM = Math.max(2, Math.hypot(dx, dy) * UNIT);
+  const rand = rng(fnv1a(`${seat.id}|${Math.round(focalPoint.x)},${Math.round(focalPoint.y)}`));
+  const baseHue = 210 + rand() * 150;
+  const rigTint = hslToRgb(220 + (rand() - 0.5) * 60, 0.55, 0.82);
+  const rigTintStr = `${rigTint[0]},${rigTint[1]},${rigTint[2]}`;
   const sky = ctx.createLinearGradient(0, 0, 0, TH);
-  sky.addColorStop(0, "#05070c");
-  sky.addColorStop(0.44, "#141b30");
-  sky.addColorStop(0.5, "#1b2440");
-  sky.addColorStop(0.58, "#10141f");
-  sky.addColorStop(1, "#070910");
+  sky.addColorStop(0, "#080b12");
+  sky.addColorStop(0.44, "#151c32");
+  sky.addColorStop(0.5, "#1d2644");
+  sky.addColorStop(0.58, "#161c2e");
+  sky.addColorStop(1, "#131829");
   ctx.fillStyle = sky;
   ctx.fillRect(0, 0, TW, TH);
   const eyeM = seat.eyeHeightM ?? SEATED_EYE_HEIGHT_M;
@@ -8929,58 +10176,102 @@ function generateSeatThumb(seat, focalPoint, _neighborSeats) {
   const sy1 = pitchToTY(stageBasePitch);
   const sw = sx1 - sx0;
   const sh = sy1 - sy0;
-  const glow = ctx.createRadialGradient(TW / 2, (sy0 + sy1) / 2, 4, TW / 2, (sy0 + sy1) / 2, sw * 1.1);
-  glow.addColorStop(0, "rgba(129,140,248,0.5)");
-  glow.addColorStop(0.5, "rgba(99,102,241,0.15)");
+  const nearGlow = Math.max(0.35, Math.min(1, 1 - (distM - 6) / 60));
+  const archTop = pitchToTY(Math.min(HALF_VFOV - 1, stageTopPitch + 8));
+  const glow = ctx.createRadialGradient(TW / 2, (sy0 + sy1) / 2, 4, TW / 2, (sy0 + sy1) / 2, sw * 1.15);
+  glow.addColorStop(0, "rgba(255,214,150,0.34)");
+  glow.addColorStop(0.28, "rgba(150,150,230,0.3)");
+  glow.addColorStop(0.6, "rgba(99,102,241,0.12)");
   glow.addColorStop(1, "rgba(99,102,241,0)");
   ctx.fillStyle = glow;
   ctx.fillRect(sx0 - sw * 0.6, sy0 - sh * 1.2, sw * 2.2, sh * 3.4);
-  ctx.fillStyle = "#242c44";
-  ctx.fillRect(sx0, sy0, sw, sh);
+  const topCol = hslToRgb(baseHue, 0.62, 0.55);
+  const midCol = hslToRgb(baseHue + 40, 0.7, 0.5);
+  const botCol = hslToRgb(baseHue + 70, 0.78, 0.52);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(sx0, sy0, sw, sh);
+  ctx.clip();
   const backdrop = ctx.createLinearGradient(0, sy0, 0, sy1);
-  backdrop.addColorStop(0, "#7c5cff");
-  backdrop.addColorStop(0.5, "#e1447a");
-  backdrop.addColorStop(1, "#f59e0b");
-  ctx.globalAlpha = 0.78;
+  backdrop.addColorStop(0, `rgb(${topCol[0]},${topCol[1]},${topCol[2]})`);
+  backdrop.addColorStop(0.5, `rgb(${midCol[0]},${midCol[1]},${midCol[2]})`);
+  backdrop.addColorStop(1, `rgb(${botCol[0]},${botCol[1]},${botCol[2]})`);
+  ctx.globalAlpha = 0.8;
   ctx.fillStyle = backdrop;
-  const inset = sw * 0.06;
-  ctx.fillRect(sx0 + inset, sy0 + sh * 0.12, sw - inset * 2, sh * 0.62);
+  ctx.fillRect(sx0, sy0, sw, sh);
   ctx.globalAlpha = 1;
-  ctx.fillStyle = "#0d1119";
-  ctx.fillRect(sx0, sy1 - sh * 0.1, sw, sh * 0.1);
-  const ph = sh * 0.45;
-  ctx.fillStyle = "rgba(8,10,16,0.85)";
-  for (const fx of [0.35, 0.5, 0.65]) {
-    const px = sx0 + sw * fx;
-    const py = sy1 - sh * 0.12;
-    ctx.beginPath();
-    ctx.arc(px, py - ph * 0.82, ph * 0.16, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.fillRect(px - ph * 0.14, py - ph * 0.68, ph * 0.28, ph * 0.68);
-  }
-  ctx.globalAlpha = 0.15;
-  ctx.fillStyle = "#c7d2fe";
-  for (const fx of [0.3, 0.5, 0.7]) {
-    const bx = sx0 + sw * fx;
-    ctx.beginPath();
-    ctx.moveTo(bx - 5, pitchToTY(Math.min(HALF_VFOV, stageTopPitch + 18)));
-    ctx.lineTo(bx - sw * 0.09, sy1);
-    ctx.lineTo(bx + sw * 0.09, sy1);
-    ctx.lineTo(bx + 5, pitchToTY(Math.min(HALF_VFOV, stageTopPitch + 18)));
-    ctx.closePath();
-    ctx.fill();
+  const fall = ctx.createRadialGradient(TW / 2, (sy0 + sy1) / 2, sw * 0.12, TW / 2, (sy0 + sy1) / 2, sw * 0.6);
+  fall.addColorStop(0, "rgba(6,8,14,0)");
+  fall.addColorStop(0.7, "rgba(6,8,14,0.15)");
+  fall.addColorStop(1, "rgba(5,6,11,0.9)");
+  ctx.fillStyle = fall;
+  ctx.fillRect(sx0, sy0, sw, sh);
+  ctx.restore();
+  const perfCount = 3;
+  const floorY = sy1 - sh * 0.08;
+  for (let i = 0; i < perfCount; i++) {
+    const t2 = (i + 1) / (perfCount + 1);
+    drawPerformer(ctx, sx0 + sw * (0.24 + t2 * 0.52), floorY, sh * 0.46 * (0.9 + rand() * 0.24), {
+      tone: [8, 10, 16],
+      alpha: 0.9,
+      pose: Math.floor(rand() * 4),
+      rim: hslToRgb(baseHue + 20, 0.5, 0.7),
+      rimStrength: 0.7
+    });
   }
-  ctx.globalAlpha = 1;
-  ctx.fillStyle = "rgba(199,210,254,0.75)";
+  ctx.fillStyle = "#05070d";
+  ctx.fillRect(sx0 - sw * 0.5, archTop, sw * 0.5, sy1 - archTop);
+  ctx.fillRect(sx1, archTop, sw * 0.5, sy1 - archTop);
+  const legBot = sw * 0.05 + 2;
+  const legTop = legBot * 1.35;
+  ctx.fillStyle = "#03050a";
+  ctx.beginPath();
+  ctx.moveTo(sx0, sy1);
+  ctx.lineTo(sx0 - legBot, sy1);
+  ctx.lineTo(sx0 - legTop, archTop);
+  ctx.lineTo(sx0 + sw * 0.012, archTop);
+  ctx.closePath();
+  ctx.fill();
+  ctx.beginPath();
+  ctx.moveTo(sx1, sy1);
+  ctx.lineTo(sx1 + legBot, sy1);
+  ctx.lineTo(sx1 + legTop, archTop);
+  ctx.lineTo(sx1 - sw * 0.012, archTop);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillRect(sx0 - legTop, archTop, sw + legTop * 2, (sy1 - archTop) * 0.13);
+  ctx.fillStyle = `rgba(${rigTintStr},0.12)`;
+  ctx.fillRect(sx0 - 1.2, archTop, 1.2, sy1 - archTop);
+  ctx.fillRect(sx1, archTop, 1.2, sy1 - archTop);
+  ctx.fillStyle = "#0b0f18";
+  ctx.fillRect(sx0 - legBot, sy1 - sh * 0.05, sw + legBot * 2, sh * 0.05 + 2);
+  const foot = ctx.createLinearGradient(0, sy1 - sh * 0.05, 0, sy1 + sh * 0.14);
+  foot.addColorStop(0, `rgba(255,206,140,${(0.5 * nearGlow).toFixed(3)})`);
+  foot.addColorStop(1, "rgba(255,206,140,0)");
+  ctx.fillStyle = foot;
+  ctx.fillRect(sx0 - legBot, sy1 - sh * 0.05, sw + legBot * 2, sh * 0.22);
+  for (let i = 0; i < 3; i++) {
+    const t2 = (i + 1) / 4;
+    const fx = sx0 + sw * t2;
+    const fy = pitchToTY(Math.min(HALF_VFOV - 1, stageTopPitch + 20));
+    drawBeam(ctx, fx, fy, fx + (rand() - 0.5) * sw * 0.14, sy1, 3, sw * 0.09, rigTintStr, 0.17 * nearGlow);
+    drawFixture(ctx, fx, fy, 1.8, rigTintStr);
+  }
+  ctx.fillStyle = `rgba(${rigTintStr},0.75)`;
   for (let i = 0; i < 8; i++) {
     ctx.beginPath();
-    ctx.arc((i + 0.5) / 8 * TW, pitchToTY(HALF_VFOV - 4 - i % 2 * 3), 2.2, 0, Math.PI * 2);
+    ctx.arc((i + 0.5) / 8 * TW, pitchToTY(HALF_VFOV - 4 - i % 2 * 3), 2.2, 0, TAU2);
     ctx.fill();
   }
   ctx.fillStyle = "rgba(10,13,20,0.9)";
   ctx.fillRect(0, TH - 26, TW, 26);
   ctx.fillStyle = "rgba(30,37,54,0.9)";
-  for (let i = 0; i < 9; i++) ctx.fillRect(i * (TW / 9) + 6, TH - 22, TW / 9 - 12, 14);
+  for (let i = 0; i < 9; i++) {
+    const bx = i * (TW / 9) + TW / 18;
+    ctx.beginPath();
+    ctx.ellipse(bx, TH - 22, TW / 9 * 0.4, 15, 0, Math.PI, 0, true);
+    ctx.fill();
+  }
   return { url: canvas.toDataURL("image/jpeg", 0.8), distanceM: Math.round(distM) };
 }