// ═══ renderer.js ═══
// ============================================================
//  RENDERER — draw order orchestration
// ============================================================

// ── MAIN RENDER ───────────────────────────────────────────────
function render() {
  const W = canvas.width, H = canvas.height;
  const cx = ARENA_CX, cy = ARENA_CY;

  // Rebuild bg cache if size changed
  if (!_bgCanvas || _bgW !== W || _bgH !== H) buildBackground(W, H);

  // Blit cached background — O(1)
  ctx.drawImage(_bgCanvas, 0, 0);

  drawArenaRangeLine(cx, cy);   // faint dashed ring at tower range
  drawPortals();
  drawAoeZones();
  drawEnemyTrails();
  drawEnemies();
  drawProjectiles();
  drawChainArcs();
  drawBeams();
  drawFog(cx, cy);              // dim beyond tower range
  drawTower(cx, cy);
  drawShield(cx, cy);
  drawParticles();
  drawFloaters();
  drawArenaMask(W, H, cx, cy); // solid dark outside arena circle
  drawArenaRing(cx, cy);        // glowing border ring
  drawStreak(cx, cy);
  clearHitRegions();
  _mountDropZones.length = 0;
  _bagDropZones.length   = 0;
  _dragRegions.length    = 0;
  drawHUD();
  drawBrokeWarning();
  drawSidePanel();
  drawInventoryOverlay();
  drawShopOverlay();
  if (G.gameOver) drawGameOverPanel();
  drawPauseOverlay();
  drawMountInteraction(cx, cy);
  drawDragGhost();
}