class StarshipVisualizer {
  constructor(audioManager, warpSynth) {
    this.am = audioManager;
    this.warpSynth = warpSynth;

    this.spectrumCanvas = null;
    this.spectrumCtx = null;
    this.warpCoreCanvas = null;
    this.warpCoreCtx = null;

    this.animationFrameId = null;
    this.pulseEnergy = 0.2;
    this.warpParticles = [];
    this.mode = 'warp-core'; // 'warp-core' or 'time-rotor'
    this.rotorPhase = 0;
    this.coreTime = 0;
    this.coreLoad = 0.6;
    this.lastFrameTime = null;

    // Hook into warp core pulse callback
    if (this.warpSynth) {
      this.warpSynth.onPulse = (phase, duration) => {
        this.pulseEnergy = 1.0;
        this.spawnWarpPulses();
      };
    }
  }

  setMode(mode) {
    this.mode = mode || 'warp-core';
  }

  init(spectrumCanvasId, warpCoreCanvasId) {
    this.spectrumCanvas = document.getElementById(spectrumCanvasId);
    if (this.spectrumCanvas) {
      this.spectrumCtx = this.spectrumCanvas.getContext('2d');
    }

    this.warpCoreCanvas = document.getElementById(warpCoreCanvasId);
    if (this.warpCoreCanvas) {
      this.warpCoreCtx = this.warpCoreCanvas.getContext('2d');
      this.initWarpParticles();
    }

    window.addEventListener('resize', () => this.resizeCanvases());
    this.resizeCanvases();
    this.startRenderLoop();
  }

  resizeCanvases() {
    if (this.spectrumCanvas) {
      const rect = this.spectrumCanvas.parentElement.getBoundingClientRect();
      this.spectrumCanvas.width = rect.width * window.devicePixelRatio;
      this.spectrumCanvas.height = (rect.height || 160) * window.devicePixelRatio;
      this.spectrumCtx.scale(window.devicePixelRatio, window.devicePixelRatio);
    }
    if (this.warpCoreCanvas) {
      const rect = this.warpCoreCanvas.parentElement.getBoundingClientRect();
      this.warpCoreCanvas.width = rect.width * window.devicePixelRatio;
      this.warpCoreCanvas.height = (rect.height || 260) * window.devicePixelRatio;
      this.warpCoreCtx.scale(window.devicePixelRatio, window.devicePixelRatio);
    }
  }

  initWarpParticles() {
    this.warpParticles = [];
    for (let i = 0; i < 36; i++) {
      this.warpParticles.push({
        y: Math.random(),
        speed: (Math.random() * 0.008 + 0.004) * (Math.random() > 0.5 ? 1 : -1),
        size: Math.random() * 4 + 2,
        opacity: Math.random() * 0.7 + 0.3
      });
    }
  }

  spawnWarpPulses() {
    // The new machines render their own flow; only legacy particle modes need a pool.
    if (this.mode !== 'warp-core' && this.mode !== 'time-rotor') return;
    for (let i = 0; i < 6; i++) {
      this.warpParticles.push({
        y: 0.5, // Center matter/antimatter reaction plane
        speed: (Math.random() * 0.018 + 0.01) * (i % 2 === 0 ? 1 : -1),
        size: Math.random() * 6 + 3,
        opacity: 1.0
      });
    }
  }

  startRenderLoop() {
    this.lastFrameTime = null;
    const render = (now) => {
      const elapsed = this.lastFrameTime === null ? 0 : Math.min((now - this.lastFrameTime) / 1000, 0.05);
      this.lastFrameTime = now;
      const volume = this.warpSynth && !this.warpSynth.isMuted ? this.warpSynth.params.volume : 0;
      const targetLoad = Math.max(0, Math.min(1, volume * (0.65 + this.pulseEnergy * 0.35)));
      this.coreLoad += (targetLoad - this.coreLoad) * (1 - Math.exp(-elapsed * 6));
      this.coreTime += elapsed * (this.mode === 'tactical-flywheel' ? 0.6 + this.coreLoad * 0.8 : 1);
      this.renderSpectrum();
      if (window.CoreAnimations && CoreAnimations.has(this.mode)) {
        if (this.warpCoreCanvas && this.warpCoreCtx) {
          CoreAnimations.render(this.warpCoreCtx, this.mode,
            this.warpCoreCanvas.width / window.devicePixelRatio,
            this.warpCoreCanvas.height / window.devicePixelRatio,
            this.coreTime, this.coreLoad);
        }
      } else {
        switch (this.mode) {
          case 'time-rotor':
            this.renderTimeRotor();
            break;
          case 'industrial-reactor':
            this.renderIndustrialReactor();
            break;
          case 'bio-heart':
            this.renderBioHeart();
            break;
          case 'retro-oscilloscope':
            this.renderRetroOscilloscope();
            break;
          case 'singularity-core':
            this.renderSingularityCore();
            break;
          case 'warp-core':
          default:
            this.renderWarpCore();
            break;
        }
      }

      // Decay pulse energy smoothly
      this.pulseEnergy = Math.max(0.15, this.pulseEnergy * Math.pow(0.94, elapsed * 60));

      this.animationFrameId = requestAnimationFrame(render);
    };

    if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
    this.animationFrameId = requestAnimationFrame(render);
  }

  renderSpectrum() {
    if (!this.spectrumCanvas || !this.spectrumCtx || !this.am.analyser) return;

    const ctx = this.spectrumCtx;
    const w = this.spectrumCanvas.width / window.devicePixelRatio;
    const h = this.spectrumCanvas.height / window.devicePixelRatio;

    const bufferLength = this.am.analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    this.am.analyser.getByteFrequencyData(dataArray);

    ctx.clearRect(0, 0, w, h);

    // Dynamic grid color per visualizer mode
    let gridCol = 'rgba(255, 153, 0, 0.12)';
    if (this.mode === 'time-rotor' || this.mode === 'singularity-core') gridCol = 'rgba(0, 229, 255, 0.12)';
    else if (this.mode === 'bio-heart') gridCol = 'rgba(16, 185, 129, 0.12)';
    else if (this.mode === 'retro-oscilloscope') gridCol = 'rgba(34, 197, 94, 0.15)';
    else if (this.mode === 'industrial-reactor' || this.mode === 'compression-furnace' || this.mode === 'station-hub') gridCol = 'rgba(245, 158, 11, 0.15)';

    ctx.strokeStyle = gridCol;
    ctx.lineWidth = 1;
    for (let y = 20; y < h; y += 30) {
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);
      ctx.stroke();
    }

    // Draw segmented frequency bars
    const numBars = 32;
    const barWidth = (w / numBars) - 3;

    for (let i = 0; i < numBars; i++) {
      const binIdx = Math.floor(Math.pow(i / numBars, 1.8) * (bufferLength * 0.6));
      const val = dataArray[binIdx] || 0;
      const barHeight = Math.max(4, (val / 255) * (h - 20));

      const x = i * (barWidth + 3);
      const y = h - barHeight;

      let col;
      if (this.mode === 'time-rotor') {
        if (i < 8) col = '#00e5ff';
        else if (i < 20) col = '#38bdf8';
        else if (i < 28) col = '#d4af37';
        else col = '#ffffff';
      } else if (this.mode === 'bio-heart') {
        if (i < 8) col = '#10b981';
        else if (i < 20) col = '#34d399';
        else if (i < 28) col = '#a855f7';
        else col = '#c084fc';
      } else if (this.mode === 'retro-oscilloscope') {
        col = i < 28 ? '#22c55e' : '#86efac';
      } else if (this.mode === 'industrial-reactor' || this.mode === 'compression-furnace' || this.mode === 'station-hub') {
        if (i < 8) col = '#d97706';
        else if (i < 20) col = '#f59e0b';
        else if (i < 28) col = '#fbbf24';
        else col = '#fef08a';
      } else if (this.mode === 'singularity-core') {
        if (i < 8) col = '#4f46e5';
        else if (i < 20) col = '#6366f1';
        else if (i < 28) col = '#38bdf8';
        else col = '#ffffff';
      } else {
        // Starfleet / Classic LCARS
        if (i < 8) col = '#ff6600';
        else if (i < 20) col = '#ff9933';
        else if (i < 28) col = '#cc99cc';
        else col = '#99ccff';
      }

      ctx.fillStyle = col;
      ctx.shadowColor = col;
      ctx.shadowBlur = val > 120 ? 8 : 0;
      ctx.fillRect(x, y, barWidth, barHeight);

      ctx.fillStyle = '#ffffff';
      ctx.fillRect(x, y - 2, barWidth, 2);
    }
    ctx.shadowBlur = 0;
  }

  renderWarpCore() {
    if (!this.warpCoreCanvas || !this.warpCoreCtx) return;

    const ctx = this.warpCoreCtx;
    const w = this.warpCoreCanvas.width / window.devicePixelRatio;
    const h = this.warpCoreCanvas.height / window.devicePixelRatio;

    ctx.clearRect(0, 0, w, h);

    const centerX = w / 2;
    const chamberWidth = Math.min(70, w * 0.4);

    // 1. Draw outer intermix chamber housing
    ctx.fillStyle = '#111625';
    ctx.fillRect(centerX - chamberWidth / 2 - 8, 0, chamberWidth + 16, h);

    // Chamber glass gradient
    const glassGrad = ctx.createLinearGradient(centerX - chamberWidth / 2, 0, centerX + chamberWidth / 2, 0);
    glassGrad.addColorStop(0, 'rgba(0, 50, 100, 0.4)');
    glassGrad.addColorStop(0.5, 'rgba(0, 180, 255, 0.15)');
    glassGrad.addColorStop(1, 'rgba(0, 50, 100, 0.4)');
    ctx.fillStyle = glassGrad;
    ctx.fillRect(centerX - chamberWidth / 2, 0, chamberWidth, h);

    // 2. Matter / Antimatter injectors (Top and Bottom)
    ctx.fillStyle = '#ff9900';
    ctx.fillRect(centerX - chamberWidth / 2 - 4, 0, chamberWidth + 8, 12);
    ctx.fillRect(centerX - chamberWidth / 2 - 4, h - 12, chamberWidth + 8, 12);

    // 3. Central Reaction Intermix Chamber (Center glowing disc)
    const centerY = h / 2;
    const glowRadius = 24 + this.pulseEnergy * 28;
    const coreGlow = ctx.createRadialGradient(centerX, centerY, 2, centerX, centerY, glowRadius);
    coreGlow.addColorStop(0, '#ffffff');
    coreGlow.addColorStop(0.3, `rgba(0, 210, 255, ${0.7 + this.pulseEnergy * 0.3})`);
    coreGlow.addColorStop(0.7, `rgba(0, 100, 255, ${0.4 + this.pulseEnergy * 0.4})`);
    coreGlow.addColorStop(1, 'rgba(0, 0, 0, 0)');

    ctx.fillStyle = coreGlow;
    ctx.beginPath();
    ctx.arc(centerX, centerY, glowRadius, 0, Math.PI * 2);
    ctx.fill();

    // 4. Segmented Magnetic Constriction Coils (horizontal pulsing rings)
    const numCoils = 14;
    for (let i = 0; i < numCoils; i++) {
      const coilY = (i / (numCoils - 1)) * (h - 30) + 15;
      const distFromCenter = Math.abs(coilY - centerY) / (h / 2);
      const coilIntensity = Math.max(0.2, (1.0 - distFromCenter * 0.6) * (0.4 + this.pulseEnergy * 0.6));

      ctx.fillStyle = `rgba(0, 230, 255, ${coilIntensity})`;
      ctx.shadowColor = '#00e6ff';
      ctx.shadowBlur = this.pulseEnergy > 0.6 ? 12 : 3;

      // Draw coil bar
      ctx.fillRect(centerX - chamberWidth / 2 + 4, coilY - 2, chamberWidth - 8, 4);
    }
    ctx.shadowBlur = 0;

    // 5. Plasma stream particles
    for (let i = this.warpParticles.length - 1; i >= 0; i--) {
      const p = this.warpParticles[i];
      p.y += p.speed;

      if (p.y < 0 || p.y > 1) {
        if (this.warpParticles.length > 36) {
          this.warpParticles.splice(i, 1);
          continue;
        } else {
          p.y = p.speed > 0 ? 0 : 1;
        }
      }

      const py = p.y * h;
      const px = centerX + (Math.sin(p.y * 12) * (chamberWidth * 0.25));

      ctx.fillStyle = `rgba(180, 240, 255, ${p.opacity * (0.4 + this.pulseEnergy * 0.6)})`;
      ctx.beginPath();
      ctx.arc(px, py, p.size * (0.8 + this.pulseEnergy * 0.4), 0, Math.PI * 2);
      ctx.fill();
    }
  }

  /**
   * Renders the canonical TARDIS Central Time Rotor
   * A glass cylinder containing an interior mechanical column physically rising and falling
   * in sync with the pulse cycle, illuminated with glowing Gallifreyan cyan/emerald light.
   */
  renderTimeRotor() {
    if (!this.warpCoreCanvas || !this.warpCoreCtx) return;

    const ctx = this.warpCoreCtx;
    const w = this.warpCoreCanvas.width / window.devicePixelRatio;
    const h = this.warpCoreCanvas.height / window.devicePixelRatio;

    ctx.clearRect(0, 0, w, h);

    const centerX = w / 2;
    const columnWidth = Math.min(84, w * 0.45);

    // 1. TARDIS Console Plinth & Ceiling Collar (Victorian Brass / Gallifreyan Bronze)
    const collarGrad = ctx.createLinearGradient(centerX - columnWidth / 2, 0, centerX + columnWidth / 2, 0);
    collarGrad.addColorStop(0, '#593e10');
    collarGrad.addColorStop(0.3, '#d4af37');
    collarGrad.addColorStop(0.7, '#fef08a');
    collarGrad.addColorStop(1, '#593e10');

    ctx.fillStyle = collarGrad;
    ctx.fillRect(centerX - columnWidth / 2 - 8, 0, columnWidth + 16, 14);
    ctx.fillRect(centerX - columnWidth / 2 - 8, h - 14, columnWidth + 16, 14);

    // 2. Outer Glass Column Tube
    const glassGrad = ctx.createLinearGradient(centerX - columnWidth / 2, 0, centerX + columnWidth / 2, 0);
    glassGrad.addColorStop(0, 'rgba(0, 40, 80, 0.45)');
    glassGrad.addColorStop(0.15, 'rgba(0, 229, 255, 0.25)');
    glassGrad.addColorStop(0.5, 'rgba(255, 255, 255, 0.12)');
    glassGrad.addColorStop(0.85, 'rgba(0, 229, 255, 0.25)');
    glassGrad.addColorStop(1, 'rgba(0, 40, 80, 0.45)');

    ctx.fillStyle = glassGrad;
    ctx.fillRect(centerX - columnWidth / 2, 14, columnWidth, h - 28);

    // Glass edge highlights
    ctx.strokeStyle = 'rgba(0, 229, 255, 0.6)';
    ctx.lineWidth = 1.5;
    ctx.strokeRect(centerX - columnWidth / 2, 14, columnWidth, h - 28);

    // 3. Central Bobbing Time Rotor Column
    // Physical oscillation: rises and falls smoothly
    this.rotorPhase += 0.038;
    const maxTravel = (h - 90) * 0.35;
    const rotorOffset = Math.sin(this.rotorPhase) * maxTravel;
    const rotorCenterY = (h / 2) + rotorOffset;
    const rotorHeight = (h - 28) * 0.48;

    // Moving Inner Rotor Rod & Glass Tubes
    const innerWidth = columnWidth * 0.58;

    // Glowing core glow
    const coreGlow = ctx.createRadialGradient(centerX, rotorCenterY, 4, centerX, rotorCenterY, 36 + this.pulseEnergy * 30);
    coreGlow.addColorStop(0, '#ffffff');
    coreGlow.addColorStop(0.4, `rgba(0, 229, 255, ${0.7 + this.pulseEnergy * 0.3})`);
    coreGlow.addColorStop(0.8, `rgba(0, 100, 200, ${0.3 + this.pulseEnergy * 0.4})`);
    coreGlow.addColorStop(1, 'rgba(0, 0, 0, 0)');

    ctx.fillStyle = coreGlow;
    ctx.beginPath();
    ctx.arc(centerX, rotorCenterY, 36 + this.pulseEnergy * 30, 0, Math.PI * 2);
    ctx.fill();

    // Inner mechanical tubes
    ctx.fillStyle = '#00e5ff';
    ctx.shadowColor = '#00e5ff';
    ctx.shadowBlur = 10 + this.pulseEnergy * 10;
    ctx.fillRect(centerX - 4, rotorCenterY - rotorHeight / 2, 8, rotorHeight);

    // Left and right secondary crystal tubes
    ctx.fillStyle = 'rgba(180, 240, 255, 0.85)';
    ctx.fillRect(centerX - innerWidth / 2 + 2, rotorCenterY - rotorHeight / 2 + 10, 5, rotorHeight - 20);
    ctx.fillRect(centerX + innerWidth / 2 - 7, rotorCenterY - rotorHeight / 2 + 10, 5, rotorHeight - 20);

    // Gallifreyan Circular Rotor Rings
    for (let r = 0; r < 4; r++) {
      const ringY = rotorCenterY - rotorHeight / 2 + (r * (rotorHeight / 3));
      ctx.strokeStyle = '#d4af37';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.ellipse(centerX, ringY, innerWidth / 2 + 2, 5, 0, 0, Math.PI * 2);
      ctx.stroke();
    }
    ctx.shadowBlur = 0;

    // 4. Sparkling Vortex Time Energy Particles
    for (let i = this.warpParticles.length - 1; i >= 0; i--) {
      const p = this.warpParticles[i];
      p.y += p.speed * 0.8;

      if (p.y < 0.05 || p.y > 0.95) {
        if (this.warpParticles.length > 36) {
          this.warpParticles.splice(i, 1);
          continue;
        } else {
          p.y = p.speed > 0 ? 0.05 : 0.95;
        }
      }

      const py = p.y * h;
      const px = centerX + (Math.sin(p.y * 16 + this.rotorPhase) * (columnWidth * 0.32));

      ctx.fillStyle = `rgba(0, 229, 255, ${p.opacity * (0.5 + this.pulseEnergy * 0.5)})`;
      ctx.shadowColor = '#00e5ff';
      ctx.shadowBlur = 6;
      ctx.beginPath();
      ctx.arc(px, py, p.size * (0.7 + this.pulseEnergy * 0.5), 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.shadowBlur = 0;
  }

  /**
   * Industrial Fusion Reactor (Nostromo, Serenity, Rocinante)
   * Heavy containment walls, incandescent glowing amber plasma core, heat radiating coils
   */
  renderIndustrialReactor() {
    if (!this.warpCoreCanvas || !this.warpCoreCtx) return;
    const ctx = this.warpCoreCtx;
    const w = this.warpCoreCanvas.width / window.devicePixelRatio;
    const h = this.warpCoreCanvas.height / window.devicePixelRatio;
    ctx.clearRect(0, 0, w, h);

    const centerX = w / 2;
    const centerY = h / 2;
    const chamberW = Math.min(80, w * 0.42);

    // Cast iron frame
    ctx.fillStyle = '#1c150c';
    ctx.fillRect(centerX - chamberW / 2 - 10, 0, chamberW + 20, h);

    // Hazard warning bands at top and bottom
    for (let x = centerX - chamberW / 2 - 10; x < centerX + chamberW / 2 + 10; x += 12) {
      ctx.fillStyle = (x % 24 === 0) ? '#d97706' : '#1a1106';
      ctx.fillRect(x, 0, 12, 10);
      ctx.fillRect(x, h - 10, 12, 10);
    }

    // Incandescent molten amber core
    const radius = 22 + this.pulseEnergy * 32;
    const glow = ctx.createRadialGradient(centerX, centerY, 2, centerX, centerY, radius);
    glow.addColorStop(0, '#ffffff');
    glow.addColorStop(0.2, '#fef08a');
    glow.addColorStop(0.5, `rgba(245, 158, 11, ${0.7 + this.pulseEnergy * 0.3})`);
    glow.addColorStop(1, 'rgba(180, 83, 9, 0)');

    ctx.fillStyle = glow;
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.fill();

    // Heat induction coil clamps
    for (let i = 0; i < 9; i++) {
      const cy = 20 + i * ((h - 40) / 8);
      ctx.fillStyle = (i % 2 === 0) ? '#f59e0b' : '#78350f';
      ctx.shadowColor = '#f59e0b';
      ctx.shadowBlur = this.pulseEnergy > 0.6 ? 10 : 2;
      ctx.fillRect(centerX - chamberW / 2, cy - 3, chamberW, 6);
    }
    ctx.shadowBlur = 0;
  }

  /**
   * Living Leviathan Bio-Heart (Moya, Lexx, Species 8472)
   * Pulsing vascular heart sac with bioluminescent emerald/violet energy and neural veins
   */
  renderBioHeart() {
    if (!this.warpCoreCanvas || !this.warpCoreCtx) return;
    const ctx = this.warpCoreCtx;
    const w = this.warpCoreCanvas.width / window.devicePixelRatio;
    const h = this.warpCoreCanvas.height / window.devicePixelRatio;
    ctx.clearRect(0, 0, w, h);

    const centerX = w / 2;
    const centerY = h / 2;

    // Organic vascular expansion
    const bioScale = 1.0 + Math.sin(this.rotorPhase * 1.2) * 0.12 + this.pulseEnergy * 0.18;
    const baseR = 35 * bioScale;

    // Outer bioluminescent aura
    const aura = ctx.createRadialGradient(centerX, centerY, 4, centerX, centerY, baseR * 1.8);
    aura.addColorStop(0, '#a7f3d0');
    aura.addColorStop(0.3, `rgba(16, 185, 129, ${0.7 + this.pulseEnergy * 0.3})`);
    aura.addColorStop(0.7, `rgba(139, 92, 246, ${0.3 + this.pulseEnergy * 0.3})`);
    aura.addColorStop(1, 'rgba(0, 0, 0, 0)');

    ctx.fillStyle = aura;
    ctx.beginPath();
    ctx.arc(centerX, centerY, baseR * 1.8, 0, Math.PI * 2);
    ctx.fill();

    // Pulsing neural veins
    ctx.strokeStyle = '#34d399';
    ctx.lineWidth = 2.5;
    ctx.shadowColor = '#10b981';
    ctx.shadowBlur = 8;
    for (let v = 0; v < 6; v++) {
      const angle = (v / 6) * Math.PI * 2 + this.rotorPhase * 0.2;
      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      const cpX = centerX + Math.cos(angle + 0.5) * (baseR * 0.8);
      const cpY = centerY + Math.sin(angle + 0.5) * (baseR * 0.8);
      const endX = centerX + Math.cos(angle) * (baseR * 1.5);
      const endY = centerY + Math.sin(angle) * (baseR * 1.5);
      ctx.quadraticCurveTo(cpX, cpY, endX, endY);
      ctx.stroke();
    }
    ctx.shadowBlur = 0;
  }

  /**
   * Retro Oscilloscope & Analog Astrogator (Jupiter 2, Discovery One)
   * 1950s/60s green phosphor CRT screen with glowing Lissajous audio wave rings
   */
  renderRetroOscilloscope() {
    if (!this.warpCoreCanvas || !this.warpCoreCtx) return;
    const ctx = this.warpCoreCtx;
    const w = this.warpCoreCanvas.width / window.devicePixelRatio;
    const h = this.warpCoreCanvas.height / window.devicePixelRatio;
    ctx.clearRect(0, 0, w, h);

    const centerX = w / 2;
    const centerY = h / 2;
    const crtRadius = Math.min(w, h) * 0.42;

    // Circular CRT bezel
    ctx.fillStyle = '#052e16';
    ctx.beginPath();
    ctx.arc(centerX, centerY, crtRadius, 0, Math.PI * 2);
    ctx.fill();
    ctx.strokeStyle = '#22c55e';
    ctx.lineWidth = 2;
    ctx.stroke();

    // Crosshairs
    ctx.strokeStyle = 'rgba(34, 197, 94, 0.25)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(centerX - crtRadius, centerY);
    ctx.lineTo(centerX + crtRadius, centerY);
    ctx.moveTo(centerX, centerY - crtRadius);
    ctx.lineTo(centerX, centerY + crtRadius);
    ctx.stroke();

    // Draw a neutral trace before audio initialization, replacing the previous theme.
    const analyser = this.am.analyser;
    const bufferLength = analyser ? analyser.fftSize : 128;
    const dataArray = new Uint8Array(bufferLength);
    if (analyser) analyser.getByteTimeDomainData(dataArray);
    else dataArray.fill(128);

    ctx.strokeStyle = '#86efac';
    ctx.shadowColor = '#22c55e';
    ctx.shadowBlur = 8;
    ctx.lineWidth = 2;
    ctx.beginPath();

    const points = 48;
    for (let i = 0; i < points; i++) {
      const idx = Math.floor((i / points) * (bufferLength / 2));
      const v = (dataArray[idx] / 128.0) - 1.0;
      const angle = (i / points) * Math.PI * 2 + this.coreTime;
      const r = (crtRadius * 0.65) + (v * 28 * (0.8 + this.pulseEnergy));
      const x = centerX + Math.cos(angle) * r;
      const y = centerY + Math.sin(angle) * r;
      if (i === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.stroke();
    // A sweep marker makes rotation legible even when the audio trace is silent.
    const sweepRadius = (crtRadius * 0.65) + ((dataArray[0] / 128.0) - 1.0) * 28 * (0.8 + this.pulseEnergy);
    ctx.fillStyle = '#d1fae5';
    ctx.beginPath();
    ctx.arc(centerX + Math.cos(this.coreTime) * sweepRadius,
      centerY + Math.sin(this.coreTime) * sweepRadius, 2.5, 0, Math.PI * 2);
    ctx.fill();
    ctx.shadowBlur = 0;
  }

  /**
   * Gravity Singularity Core (Event Horizon, Deep Space)
   * Black hole event horizon with warping gravitational accretion disk
   */
  renderSingularityCore() {
    if (!this.warpCoreCanvas || !this.warpCoreCtx) return;
    const ctx = this.warpCoreCtx;
    const w = this.warpCoreCanvas.width / window.devicePixelRatio;
    const h = this.warpCoreCanvas.height / window.devicePixelRatio;
    ctx.clearRect(0, 0, w, h);

    const centerX = w / 2;
    const centerY = h / 2;
    const diskR = Math.min(w, h) * 0.44;

    // Glowing gravitational accretion disk
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate(this.rotorPhase * 0.6);

    const grad = ctx.createRadialGradient(0, 0, 12, 0, 0, diskR);
    grad.addColorStop(0, '#000000');
    grad.addColorStop(0.35, '#000000');
    grad.addColorStop(0.45, `rgba(99, 102, 241, ${0.8 + this.pulseEnergy * 0.2})`);
    grad.addColorStop(0.7, `rgba(56, 189, 248, ${0.4 + this.pulseEnergy * 0.3})`);
    grad.addColorStop(1, 'rgba(0, 0, 0, 0)');

    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.ellipse(0, 0, diskR, diskR * 0.35, 0, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();

    // Pure black event horizon sphere at center
    ctx.fillStyle = '#000000';
    ctx.strokeStyle = 'rgba(99, 102, 241, 0.8)';
    ctx.lineWidth = 2;
    ctx.shadowColor = '#6366f1';
    ctx.shadowBlur = 12 + this.pulseEnergy * 10;
    ctx.beginPath();
    ctx.arc(centerX, centerY, 18, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
    ctx.shadowBlur = 0;
  }
}

window.StarshipVisualizer = StarshipVisualizer;

// Helper: Hex color to RGBA
function hexToRgba(hex, alpha = 1) {
  if (!hex || hex.charAt(0) !== '#') return `rgba(56, 189, 248, ${alpha})`;
  let c = hex.substring(1);
  if (c.length === 3) c = c.split('').map(x => x + x).join('');
  const num = parseInt(c, 16);
  return `rgba(${(num >> 16) & 255}, ${(num >> 8) & 255}, ${num & 255}, ${alpha})`;
}

/**
 * ============================================================================
 * CINEMATIC OBSERVATION LOUNGE ENGINE (v9g)
 * ============================================================================
 * Features:
 * - 60fps DPI-Aware Deep Celestial Canvas (Parallax 3D Starfield & Warp Tunnel)
 * - Relativistic Warp Flight vs. Orbital Cruise Impulse Modes
 * - Procedural Celestial Bodies (Class-M Planet with Atmospheric Glow, Time Vortex, Gas Giants)
 * - Living Traffic & Encounters (Shuttles, Cruisers, Decloaking Klingon BOP, TARDIS, Freighters)
 * - Viewport Window Framing Architecture per Universe (Starfleet, Industrial, Station, Whoniverse, Military)
 * - Emergency Alert Synchronization (Red/Yellow Alert Klaxon Strobes & Shield Grids)
 * - Subspace Audio Harmonics Waveform Sill
 * - Auto-Hiding Interactive Glass Control Dock
 */
// =========================================================================
// OBSERVATION CANVAS MANIFEST  (v3co)
// =========================================================================
// Each universe declares exactly which canvas layers it draws. Default-deny:
// anything not listed is OFF. A universe missing from this table gets no canvas at all.
// This table is the contract that keeps each theme's OBSERVATION its own experience --
// do not add a layer here to "fill space"; give the theme its own bespoke content instead.
//
// `starfield` entries may carry a per-universe profile so that two universes drawing stars
// are still drawing THEIR OWN stars (density, palette, scale), not one shared layer.