@seatlayer/core 0.28.3 → 0.29.0

package/dist/index.cjs

@@ -4638,7 +4638,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);
@@ -7685,8 +7685,12 @@ var PickerController = class {
     this.emitSelectionChange();
     return true;
   }
-  /** Atomically replace an active variable-table hold with a new guest count. */
-  async replaceTableQuantity(label, quantity) {
+  /**
+   * Atomically replace an active variable-table hold with a new guest count.
+   * `ttlMs` keeps the host's checkout window across the replacement — without it
+   * a guest-count change silently re-based the countdown on the server default.
+   */
+  async replaceTableQuantity(label, quantity, ttlMs) {
     const table = this.groupedTablesByLabel.get(label);
     const hold = this.hold_;
     if (!table || table.mode !== "variable" || !hold?.labels.includes(label)) return null;
@@ -7703,7 +7707,7 @@ var PickerController = class {
       quantity: item.label === label ? q : item.quantity
     }));
     if (!selections.some((item) => item.label === label)) return null;
-    const result = await this.api.hold(this.key, selections, void 0, hold.holdId);
+    const result = await this.api.hold(this.key, selections, ttlMs, hold.holdId);
     this.tableQuantities.set(label, q);
     this.setHold({
       holdId: result.holdId,
@@ -7987,6 +7991,10 @@ var PickerController = class {
    * failure. With `preferPremium`, first tries to hold the best PREMIUM block
    * locally; when none matches the requested quantity it falls back to the
    * normal server pick (the widget surfaces a subtle note on that fallback).
+   *
+   * `ttlMs` is the host's checkout window and MUST reach both branches: a hold
+   * born here is the same buyer commitment as one made by clicking seats, so
+   * omitting it silently handed the buyer the server default instead.
    */
   async bestAvailable(qty, categoryKey, opts = {}) {
     const r = this.renderer;
@@ -8001,7 +8009,7 @@ var PickerController = class {
             const resolved = seat ? this.toSeat(seat) : null;
             return { label, ...resolved?.tierId ? { tierId: resolved.tierId } : {} };
           });
-          const result = await this.api.hold(this.key, selection);
+          const result = await this.api.hold(this.key, selection, opts.ttlMs);
           r.clearSelection();
           const ids = this.idsForLabels(block);
           if (ids.length) r.setStatus(ids, "held");
@@ -8020,7 +8028,7 @@ var PickerController = class {
     }
     if (this.hold_ && !await this.release()) return null;
     try {
-      const result = await this.api.bestAvailable(this.key, qty, categoryKey, opts.zoneId);
+      const result = await this.api.bestAvailable(this.key, qty, categoryKey, opts.zoneId, opts.ttlMs);
       r.clearSelection();
       const ids = this.idsForLabels(result.labels);
       if (ids.length) r.setStatus(ids, "held");
@@ -8041,8 +8049,10 @@ var PickerController = class {
    * cart can hold best-available seats that aren't in the renderer selection);
    * defaults to the renderer selection. Reuses an existing exact-match hold, else
    * holds first. Returns the labels booked, or null on failure (conflicts painted).
+   * `ttlMs` only matters on the hold-first path: if the book call then fails, the
+   * seats sit held for the host's window rather than the longer server default.
    */
-  async book(bookingRef, labelsArg) {
+  async book(bookingRef, labelsArg, ttlMs) {
     const r = this.renderer;
     if (!r) return null;
     if (!this.api.book) throw new Error("picker: transport has no book() \u2014 hold-only mode");
@@ -8065,7 +8075,7 @@ var PickerController = class {
               ...this.tableQuantityRequest(resolved)
             };
           }),
-          void 0,
+          ttlMs,
           replaceHoldId
         );
         holdId = h.holdId;
@@ -8778,8 +8788,428 @@ 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);
+  ctx.fillStyle = clo;
+  ctx.beginPath();
+  ctx.moveTo(-neckHalf, neckTopY);
+  ctx.quadraticCurveTo(-neckHalf * 1.18, shoulderY - r * 0.6, -shHalf, shoulderY);
+  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);
+  ctx.quadraticCurveTo(neckHalf * 1.18, shoulderY - 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.fillStyle = skin;
+  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.9, hy + r * 4);
+  ctx.quadraticCurveTo(hx - r * 1.95, hy + r * 1.2, hx - r * 0.5, hy + r * 0.9);
+  ctx.quadraticCurveTo(hx, hy + r * 0.4, hx + r * 0.5, hy + r * 0.9);
+  ctx.quadraticCurveTo(hx + r * 1.95, hy + r * 1.2, hx + r * 1.9, 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.92, 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;
@@ -8789,102 +9219,428 @@ 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;
-    ctx.beginPath();
-    ctx.arc(px, py - performerH * 0.82, performerH * 0.16, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.fillRect(px - performerH * 0.14, py - performerH * 0.68, performerH * 0.28, performerH * 0.68);
+  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 deckTop = ctx.createLinearGradient(0, topCy - topRy, 0, topCy + topRy);
+  deckTop.addColorStop(0, "#2b3350");
+  deckTop.addColorStop(1, "#161b2c");
+  ctx.fillStyle = deckTop;
+  ctx.beginPath();
+  ctx.ellipse(cx, topCy, halfW, topRy, 0, 0, TAU2);
+  ctx.fill();
+  const deckGlow = ctx.createRadialGradient(cx, topCy, 2, cx, topCy, halfW);
+  deckGlow.addColorStop(0, `rgba(255,214,160,${(0.28 * 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 perfCount = 2 + Math.floor(rand() * 3);
+  const perfH = Math.max(24, (yBase - yFarTop) * 1.3);
+  for (let i = 0; i < perfCount; i++) {
+    const t2 = perfCount === 1 ? 0.5 : i / (perfCount - 1);
+    const px = cx + (t2 - 0.5) * 2 * halfW * 0.66;
+    const footY = topCy + topRy * 0.5 * Math.cos((t2 - 0.5) * Math.PI) - topRy * 0.1;
+    drawPerformer(ctx, px, footY, perfH * (0.85 + rand() * 0.3), {
+      tone: [10, 12, 20],
+      alpha: 0.92,
+      pose: Math.floor(rand() * 4),
+      rim: hslToRgb(40, 0.6, 0.72),
+      rimStrength: 0.8
+    });
   }
-  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.14 * (0.7 + nearGlow * 0.4));
+    }
+    drawFixture(ctx, fxX, fxY, 2.2, rigTintStr);
+  }
+}
+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 > 17) 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 < 2) continue;
+    figs.push({ hx: yawToX(yaw), hy: pitchToY(headPitch), r, d, hash: hh });
+  }
+  figs.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 f of figs) {
+    const alpha = f.d < 12 ? 0.95 : Math.max(0.66, 0.95 - (f.d - 12) / 18);
+    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
+      });
+    } 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;
@@ -8900,12 +9656,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;
@@ -8919,58 +9679,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) };
 }