app.js

// ============================================================
// MACHINEFORMER - Transform. Upgrade. Dominate.
// Fully made by AI (Berry 🍓)
// ============================================================

(function() {
'use strict';

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// ---- CONSTANTS ----
const TILE = 32;
const GRAVITY = 0.55;
const MAX_FALL = 12;
const PLAYER_SPEED = 3.2;
const PLAYER_ACCEL = 0.35;
const PLAYER_DECEL = 0.25;
const JUMP_FORCE = -10.5;
const JUMP_HOLD_FORCE = -0.35;
const COYOTE_TIME = 6;
const WALL_SLIDE_SPEED = 1.5;
const WALL_JUMP_X = 6;
const WALL_JUMP_Y = -9;

// Colors
const C = {
  bg: '#0e0e14',
  iron: '#1e1e28',
  copper: '#6a4fd8',
  brass: '#8b6ff0',
  steam: '#d4dae8',
  steel: '#3a5a8a',
  red: '#e03050',
  green: '#40d880',
  dark: '#08080e',
  panel: '#1e1e2e',
  panelLight: '#2e2e42',
  gold: '#f0c830',
  orange: '#e87030',
  cyan: '#30e8f0',
  purple: '#9955ee',
};

// ---- STATE ----
let W = 800, H = 450;
let isMobile = false;
let gameState = 'menu';
let frameCount = 0;
let dt = 1;
let lastTime = 0;
let keys = {};
let touchState = { left: false, right: false, jump: false, shoot: false, swap: false };
let mouseX = 0, mouseY = 0, mouseDown = false, mouseClicked = false;
let menuAnim = 0;
let titleLetters = [];
let titleBuilt = false;
let gears = [];
let particles = [];
let steamPuffs = [];

// Intro state
let introStep = 0;
let introTimer = 0;
let introShown = false;

// Game save
let save = null;
let settings = null;

// Level / gameplay state
let currentLevel = 1;
let player = null;
let enemies = [];
let bullets = [];
let pickups = [];
let platforms = [];
let hazards = [];
let checkpoints = [];
let levelData = null;
let camera = { x: 0, y: 0, targetX: 0, targetY: 0 };
let levelTimer = 0;
let levelGears = [false, false, false];
let hud = { shake: 0, shakeX: 0, shakeY: 0, flash: 0, flashColor: '' };
let levelWidth = 0;
let levelHeight = 0;
let deathAnim = 0;
let lastCheckpoint = null;
let bossHP = 0;
let bossMaxHP = 0;
let tutorialOverlay = 0; // Timer for showing tutorial in level 1

// Weapon definitions
const WEAPONS = {
  rivet_gun: { name: 'Rivet Gun', rate: 8, damage: 1, speed: 10, color: C.steam, size: 3, spread: 0.05, energy: 0, icon: '⚙' },
  steam_cannon: { name: 'Steam Cannon', rate: 30, damage: 4, speed: 8, color: '#ffffff', size: 6, spread: 0, energy: 5, icon: '💨' },
  arc_welder: { name: 'Arc Welder', rate: 4, damage: 0.5, speed: 15, color: C.cyan, size: 2, spread: 0.2, energy: 1, icon: '⚡' },
  gear_launcher: { name: 'Gear Launcher', rate: 20, damage: 3, speed: 7, color: C.brass, size: 5, spread: 0.1, bounce: true, energy: 3, icon: '⚙' },
  oil_bomb: { name: 'Oil Bomb', rate: 40, damage: 2, speed: 5, color: '#333', size: 6, spread: 0, arc: true, energy: 8, icon: '💣' },
  magnet_rail: { name: 'Magnet Railgun', rate: 60, damage: 8, speed: 20, color: C.purple, size: 4, spread: 0, pierce: true, energy: 15, icon: '🔫' },
};

// ---- SAVE/LOAD ----
function defaultSave() {
  return {
    currentLevel: 1,
    unlockedLevels: [1],
    stars: {},
    currency: 0,
    weapons: ['rivet_gun'],
    equippedWeapons: ['rivet_gun', null],
    weaponUpgrades: {},
    armorLevel: 0,
    maxHP: 100,
    mobilityUpgrades: {},
    utilityUpgrades: {},
    introSeen: false,
  };
}

function defaultSettings() {
  return {
    screenShake: true,
    quality: 'high',
    controlLayout: 'B',
    keyBindings: { left: 'ArrowLeft', right: 'ArrowRight', jump: 'ArrowUp', shoot: 'KeyZ', swap: 'KeyX', special: 'KeyC' },
  };
}

function loadSave() {
  try { save = JSON.parse(localStorage.getItem('machine_mayhem_save')) || defaultSave(); }
  catch(e) { save = defaultSave(); }
}

function saveSave() {
  try { localStorage.setItem('machine_mayhem_save', JSON.stringify(save)); } catch(e) {}
}

function loadSettings() {
  try { settings = JSON.parse(localStorage.getItem('machine_mayhem_settings')) || defaultSettings(); }
  catch(e) { settings = defaultSettings(); }
}

function saveSettings() {
  try { localStorage.setItem('machine_mayhem_settings', JSON.stringify(settings)); } catch(e) {}
}

// ---- RESIZE ----
function resize() {
  const ww = window.innerWidth;
  const wh = window.innerHeight;
  isMobile = ('ontouchstart' in window) || ww < 800;
  
  const targetRatio = ww / wh;
  
  if (targetRatio >= 16/9) {
    W = 800;
    H = 450;
  } else if (targetRatio >= 1) {
    W = 800;
    H = Math.round(800 / targetRatio);
    if (H > 600) H = 600;
  } else {
    W = 400;
    H = Math.round(400 / targetRatio);
    if (H > 720) H = 720;
  }
  
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  canvas.width = W * dpr;
  canvas.height = H * dpr;
  
  const scaleX = ww / W;
  const scaleY = wh / H;
  const fitScale = Math.min(scaleX, scaleY);
  
  const displayW = Math.floor(W * fitScale);
  const displayH = Math.floor(H * fitScale);
  const ox = Math.floor((ww - displayW) / 2);
  const oy = Math.floor((wh - displayH) / 2);
  
  canvas.style.width = displayW + 'px';
  canvas.style.height = displayH + 'px';
  canvas.style.left = ox + 'px';
  canvas.style.top = oy + 'px';
  
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  
  canvas._displayX = ox;
  canvas._displayY = oy;
  canvas._displayW = displayW;
  canvas._displayH = displayH;
  
  const mc = document.getElementById('mobile-controls');
  if (mc) mc.style.display = (isMobile && gameState === 'playing') ? 'block' : 'none';
}

// ---- INPUT ----
function toGameCoords(clientX, clientY) {
  const dx = canvas._displayX || 0;
  const dy = canvas._displayY || 0;
  const dw = canvas._displayW || W;
  const dh = canvas._displayH || H;
  return {
    x: ((clientX - dx) / dw) * W,
    y: ((clientY - dy) / dh) * H
  };
}

document.addEventListener('keydown', e => {
  keys[e.code] = true;
  if (e.code === 'Escape') {
    if (gameState === 'playing') gameState = 'paused';
    else if (gameState === 'paused') gameState = 'playing';
    else if (gameState === 'intro') { gameState = 'menu'; }
    else if (gameState !== 'menu') gameState = 'menu';
  }
  // Skip intro on any key
  if (gameState === 'intro' && (e.code === 'Space' || e.code === 'Enter')) {
    introStep++;
  }
});
document.addEventListener('keyup', e => { keys[e.code] = false; });

canvas.addEventListener('mousedown', e => {
  const p = toGameCoords(e.clientX, e.clientY);
  mouseX = p.x; mouseY = p.y;
  mouseDown = true; mouseClicked = true;
});
canvas.addEventListener('mousemove', e => {
  const p = toGameCoords(e.clientX, e.clientY);
  mouseX = p.x; mouseY = p.y;
});
canvas.addEventListener('mouseup', () => { mouseDown = false; });

canvas.addEventListener('touchstart', e => {
  e.preventDefault();
  if (gameState !== 'playing') {
    const t = e.touches[0];
    const p = toGameCoords(t.clientX, t.clientY);
    mouseX = p.x; mouseY = p.y;
    mouseDown = true; mouseClicked = true;
  }
}, { passive: false });
canvas.addEventListener('touchmove', e => {
  e.preventDefault();
  if (gameState !== 'playing') {
    const t = e.touches[0];
    const p = toGameCoords(t.clientX, t.clientY);
    mouseX = p.x; mouseY = p.y;
  }
}, { passive: false });
canvas.addEventListener('touchend', e => { e.preventDefault(); mouseDown = false; }, { passive: false });

// Mobile buttons
function setupMobileControls() {
  const btnIds = ['btn-left','btn-right','btn-jump','btn-shoot','btn-swap'];
  const stateKeys = ['left','right','jump','shoot','swap'];
  
  btnIds.forEach((id, i) => {
    const el = document.getElementById(id);
    if (!el) return;
    const handler = (on) => (e) => { e.preventDefault(); e.stopPropagation(); touchState[stateKeys[i]] = on; };
    el.addEventListener('touchstart', handler(true), { passive: false });
    el.addEventListener('touchend', handler(false), { passive: false });
    el.addEventListener('touchcancel', handler(false), { passive: false });
  });
}

// ---- PARTICLES ----
function spawnParticle(x, y, vx, vy, color, life, size) {
  if (particles.length > 200) return;
  particles.push({ x, y, vx, vy, color, life, maxLife: life, size: size || 2 });
}

function spawnSteam(x, y) {
  if (steamPuffs.length > 80) return;
  for (let i = 0; i < 3; i++) {
    steamPuffs.push({
      x: x + (Math.random()-0.5)*10,
      y: y,
      vx: (Math.random()-0.5)*0.5,
      vy: -Math.random()*1.5 - 0.5,
      size: Math.random()*6 + 3,
      life: 40 + Math.random()*30,
      maxLife: 70,
      alpha: 0.25 + Math.random()*0.15,
    });
  }
}

function spawnSparks(x, y, count, color) {
  for (let i = 0; i < count; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = Math.random() * 4 + 1;
    spawnParticle(x, y, Math.cos(angle)*speed, Math.sin(angle)*speed - 2, color || C.brass, 20 + Math.random()*20, 1.5 + Math.random()*2);
  }
}

function spawnGearBurst(x, y) {
  for (let i = 0; i < 6; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = Math.random() * 3 + 1;
    particles.push({
      x, y,
      vx: Math.cos(angle)*speed,
      vy: Math.sin(angle)*speed - 3,
      color: Math.random() > 0.5 ? C.brass : C.copper,
      life: 40 + Math.random()*20,
      maxLife: 60,
      size: 3 + Math.random()*3,
      isGear: true,
      rot: Math.random()*6.28,
      rotSpeed: (Math.random()-0.5)*0.3,
    });
  }
}

function updateParticles() {
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];
    p.x += p.vx;
    p.y += p.vy;
    p.vy += 0.1;
    p.life--;
    if (p.rot !== undefined) p.rot += p.rotSpeed;
    if (p.life <= 0) particles.splice(i, 1);
  }
  for (let i = steamPuffs.length - 1; i >= 0; i--) {
    const p = steamPuffs[i];
    p.x += p.vx;
    p.y += p.vy;
    p.size += 0.15;
    p.life--;
    if (p.life <= 0) steamPuffs.splice(i, 1);
  }
}

function drawParticles(cx, cy) {
  for (const p of particles) {
    const alpha = p.life / p.maxLife;
    ctx.globalAlpha = alpha;
    if (p.isGear) {
      drawMiniGear(p.x - cx, p.y - cy, p.size, p.rot, p.color);
    } else {
      ctx.fillStyle = p.color;
      ctx.fillRect(p.x - cx - p.size/2, p.y - cy - p.size/2, p.size, p.size);
    }
  }
  for (const p of steamPuffs) {
    const alpha = (p.life / p.maxLife) * p.alpha;
    ctx.globalAlpha = alpha;
    ctx.fillStyle = C.steam;
    ctx.beginPath();
    ctx.arc(p.x - cx, p.y - cy, p.size, 0, Math.PI*2);
    ctx.fill();
  }
  ctx.globalAlpha = 1;
}

// ---- DRAWING HELPERS ----
function drawMiniGear(x, y, r, rot, color) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(rot || 0);
  ctx.fillStyle = color;
  ctx.beginPath();
  const teeth = 6;
  for (let i = 0; i < teeth; i++) {
    const a = (i/teeth)*Math.PI*2;
    const a2 = ((i+0.5)/teeth)*Math.PI*2;
    ctx.lineTo(Math.cos(a)*(r+2), Math.sin(a)*(r+2));
    ctx.lineTo(Math.cos(a2)*r*0.7, Math.sin(a2)*r*0.7);
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

function drawGear(x, y, r, teeth, rot, color, innerColor) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(rot);
  ctx.fillStyle = color || C.copper;
  ctx.beginPath();
  for (let i = 0; i < teeth; i++) {
    const a1 = (i/teeth)*Math.PI*2;
    const a2 = ((i+0.3)/teeth)*Math.PI*2;
    const a3 = ((i+0.5)/teeth)*Math.PI*2;
    const a4 = ((i+0.8)/teeth)*Math.PI*2;
    ctx.lineTo(Math.cos(a1)*r, Math.sin(a1)*r);
    ctx.lineTo(Math.cos(a2)*(r*1.2), Math.sin(a2)*(r*1.2));
    ctx.lineTo(Math.cos(a3)*(r*1.2), Math.sin(a3)*(r*1.2));
    ctx.lineTo(Math.cos(a4)*r, Math.sin(a4)*r);
  }
  ctx.closePath();
  ctx.fill();
  ctx.fillStyle = innerColor || C.iron;
  ctx.beginPath();
  ctx.arc(0, 0, r*0.35, 0, Math.PI*2);
  ctx.fill();
  ctx.fillStyle = C.dark;
  ctx.beginPath();
  ctx.arc(0, 0, r*0.15, 0, Math.PI*2);
  ctx.fill();
  ctx.restore();
}

function drawRivetPanel(x, y, w, h, color, borderColor) {
  ctx.fillStyle = color || C.panel;
  ctx.fillRect(x, y, w, h);
  ctx.strokeStyle = borderColor || C.copper;
  ctx.lineWidth = 2;
  ctx.strokeRect(x+1, y+1, w-2, h-2);
  ctx.fillStyle = C.brass;
  const rr = 2.5;
  const positions = [[x+7,y+7],[x+w-7,y+7],[x+7,y+h-7],[x+w-7,y+h-7]];
  for (const [rx, ry] of positions) {
    ctx.beginPath();
    ctx.arc(rx, ry, rr, 0, Math.PI*2);
    ctx.fill();
    ctx.fillStyle = '#ffffff22';
    ctx.beginPath();
    ctx.arc(rx-1, ry-1, rr*0.5, 0, Math.PI*2);
    ctx.fill();
    ctx.fillStyle = C.brass;
  }
}

function drawButton(x, y, w, h, text, hovered, fontSize) {
  const pressed = hovered && mouseDown;
  const yOff = pressed ? 2 : 0;
  const fs = fontSize || (isMobile && W < 500 ? 13 : 15);
  
  ctx.fillStyle = '#00000044';
  ctx.fillRect(x+2, y+4, w, h);
  
  const grad = ctx.createLinearGradient(x, y + yOff, x, y + h + yOff);
  grad.addColorStop(0, hovered ? '#5a5a62' : C.panelLight);
  grad.addColorStop(1, hovered ? '#3a3a42' : C.panel);
  ctx.fillStyle = grad;
  ctx.fillRect(x, y + yOff, w, h);
  
  ctx.strokeStyle = hovered ? C.brass : C.copper;
  ctx.lineWidth = 2;
  ctx.strokeRect(x, y + yOff, w, h);
  
  ctx.fillStyle = C.brass;
  const corners = [[x+5,y+5+yOff],[x+w-5,y+5+yOff],[x+5,y+h-5+yOff],[x+w-5,y+h-5+yOff]];
  corners.forEach(([rx,ry]) => {
    ctx.beginPath(); ctx.arc(rx,ry,2,0,Math.PI*2); ctx.fill();
  });
  
  ctx.fillStyle = hovered ? C.gold : C.steam;
  ctx.font = `bold ${fs}px "Black Ops One", monospace`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, x + w/2, y + h/2 + yOff);
  
  return hovered;
}

function isHovered(x, y, w, h) {
  return mouseX >= x && mouseX <= x+w && mouseY >= y && mouseY <= y+h;
}

function drawText(text, x, y, size, color, align) {
  ctx.fillStyle = color || C.steam;
  ctx.font = `bold ${size}px "Black Ops One", monospace`;
  ctx.textAlign = align || 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, x, y);
}

function drawMonoText(text, x, y, size, color, align) {
  ctx.fillStyle = color || C.steam;
  ctx.font = `${size}px "Share Tech Mono", monospace`;
  ctx.textAlign = align || 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, x, y);
}

// ====================================
// ENHANCED SPRITE DRAWING SYSTEM
// ====================================

// --- PLAYER SPRITE ---
function drawPlayerSprite(sx, sy, dir, anim, animFrame, flash) {
  const pw = 20, ph = 30;
  ctx.save();
  
  // Shadow
  ctx.fillStyle = '#00000044';
  ctx.beginPath();
  ctx.ellipse(sx + pw/2, sy + ph + 1, 8, 3, 0, 0, Math.PI*2);
  ctx.fill();
  
  const cx = sx + pw/2;
  const cy = sy + ph/2;
  
  // Legs with animation
  const legColor = '#3a5070';
  const legDark = '#2a3a50';
  ctx.fillStyle = legColor;
  if (anim === 'run') {
    const legPhase = animFrame * Math.PI / 2;
    const leg1Y = Math.sin(legPhase) * 5;
    const leg2Y = Math.sin(legPhase + Math.PI) * 5;
    // Left leg
    ctx.fillRect(sx + 3, sy + ph - 8 + leg1Y, 5, 8 - leg1Y);
    ctx.fillStyle = legDark;
    ctx.fillRect(sx + 3, sy + ph - 3 + Math.max(0, leg1Y), 5, 3);
    ctx.fillStyle = legColor;
    // Right leg
    ctx.fillRect(sx + pw - 8, sy + ph - 8 + leg2Y, 5, 8 - leg2Y);
    ctx.fillStyle = legDark;
    ctx.fillRect(sx + pw - 8, sy + ph - 3 + Math.max(0, leg2Y), 5, 3);
  } else if (anim === 'jump') {
    // Legs tucked
    ctx.fillRect(sx + 2, sy + ph - 6, 6, 4);
    ctx.fillRect(sx + pw - 8, sy + ph - 6, 6, 4);
    ctx.fillStyle = legDark;
    ctx.fillRect(sx + 2, sy + ph - 3, 6, 3);
    ctx.fillRect(sx + pw - 8, sy + ph - 3, 6, 3);
  } else if (anim === 'fall') {
    // Legs dangling
    ctx.fillRect(sx + 2, sy + ph - 8, 5, 8);
    ctx.fillRect(sx + pw - 7, sy + ph - 8, 5, 8);
    ctx.fillStyle = legDark;
    ctx.fillRect(sx + 2, sy + ph - 2, 5, 2);
    ctx.fillRect(sx + pw - 7, sy + ph - 2, 5, 2);
  } else {
    // Idle legs - slight bob
    const bob = Math.sin(frameCount * 0.06) * 1;
    ctx.fillRect(sx + 3, sy + ph - 7 + bob, 5, 7 - bob);
    ctx.fillRect(sx + pw - 8, sy + ph - 7 - bob * 0.5, 5, 7 + bob * 0.5);
    ctx.fillStyle = legDark;
    ctx.fillRect(sx + 3, sy + ph - 2, 5, 2);
    ctx.fillRect(sx + pw - 8, sy + ph - 2, 5, 2);
  }
  
  // Body (torso) - metallic look
  const bodyGrad = ctx.createLinearGradient(sx, sy + 6, sx + pw, sy + 6);
  bodyGrad.addColorStop(0, '#4a6478');
  bodyGrad.addColorStop(0.4, '#6a8898');
  bodyGrad.addColorStop(0.6, '#5a7888');
  bodyGrad.addColorStop(1, '#3a5468');
  ctx.fillStyle = bodyGrad;
  ctx.fillRect(sx + 2, sy + 8, pw - 4, ph - 16);
  
  // Chest plate
  ctx.fillStyle = '#5a7a90';
  ctx.fillRect(sx + 4, sy + 10, pw - 8, 6);
  // Energy core on chest (glowing)
  const coreGlow = 0.5 + Math.sin(frameCount * 0.1) * 0.3;
  ctx.fillStyle = flash > 0 ? C.red : `rgba(48, 232, 240, ${coreGlow})`;
  ctx.fillRect(sx + pw/2 - 2, sy + 11, 4, 4);
  ctx.fillStyle = flash > 0 ? '#ff8888' : '#aaffff';
  ctx.fillRect(sx + pw/2 - 1, sy + 12, 2, 2);
  
  // Rivet details on body
  ctx.fillStyle = '#8aa0b0';
  ctx.fillRect(sx + 3, sy + 9, 1, 1);
  ctx.fillRect(sx + pw - 4, sy + 9, 1, 1);
  ctx.fillRect(sx + 3, sy + ph - 10, 1, 1);
  ctx.fillRect(sx + pw - 4, sy + ph - 10, 1, 1);
  
  // Arms
  const armColor = '#5a7080';
  ctx.fillStyle = armColor;
  const armY = sy + 10;
  if (anim === 'run') {
    const armSwing = Math.sin(animFrame * Math.PI / 2) * 4;
    if (dir > 0) {
      // Back arm
      ctx.fillRect(sx - 2, armY + armSwing, 4, 10);
      // Front arm (gun arm)
      ctx.fillRect(sx + pw - 2, armY - armSwing, 4, 10);
      // Gun
      ctx.fillStyle = C.brass;
      ctx.fillRect(sx + pw + 1, armY - armSwing + 2, 7, 3);
      ctx.fillStyle = '#444';
      ctx.fillRect(sx + pw + 6, armY - armSwing + 1, 3, 5);
    } else {
      ctx.fillRect(sx + pw - 2, armY + armSwing, 4, 10);
      ctx.fillRect(sx - 2, armY - armSwing, 4, 10);
      ctx.fillStyle = C.brass;
      ctx.fillRect(sx - 8, armY - armSwing + 2, 7, 3);
      ctx.fillStyle = '#444';
      ctx.fillRect(sx - 9, armY - armSwing + 1, 3, 5);
    }
  } else {
    // Static arms
    if (dir > 0) {
      ctx.fillRect(sx - 1, armY, 3, 10);
      ctx.fillRect(sx + pw - 2, armY, 4, 10);
      ctx.fillStyle = C.brass;
      ctx.fillRect(sx + pw + 1, armY + 4, 7, 3);
      ctx.fillStyle = '#444';
      ctx.fillRect(sx + pw + 6, armY + 3, 3, 5);
    } else {
      ctx.fillRect(sx + pw - 2, armY, 3, 10);
      ctx.fillRect(sx - 2, armY, 4, 10);
      ctx.fillStyle = C.brass;
      ctx.fillRect(sx - 8, armY + 4, 7, 3);
      ctx.fillStyle = '#444';
      ctx.fillRect(sx - 9, armY + 3, 3, 5);
    }
  }
  
  // Head
  const headGrad = ctx.createLinearGradient(sx + 2, sy, sx + pw - 2, sy);
  headGrad.addColorStop(0, '#5a6a7a');
  headGrad.addColorStop(0.5, '#7a8a9a');
  headGrad.addColorStop(1, '#5a6a7a');
  ctx.fillStyle = headGrad;
  ctx.fillRect(sx + 3, sy, pw - 6, 10);
  
  // Visor (face plate)
  ctx.fillStyle = '#2a3a4a';
  ctx.fillRect(sx + 4, sy + 2, pw - 8, 6);
  
  // Eyes (glowing)
  const eyeColor = flash > 0 ? C.red : C.cyan;
  const eyeGlow = flash > 0 ? '#ff4444' : '#aaffff';
  if (dir > 0) {
    ctx.fillStyle = eyeColor;
    ctx.fillRect(sx + pw - 8, sy + 3, 3, 3);
    ctx.fillRect(sx + pw - 12, sy + 4, 2, 2);
    ctx.fillStyle = eyeGlow;
    ctx.fillRect(sx + pw - 7, sy + 4, 1, 1);
  } else {
    ctx.fillStyle = eyeColor;
    ctx.fillRect(sx + 5, sy + 3, 3, 3);
    ctx.fillRect(sx + 10, sy + 4, 2, 2);
    ctx.fillStyle = eyeGlow;
    ctx.fillRect(sx + 6, sy + 4, 1, 1);
  }
  
  // Antenna
  ctx.fillStyle = '#8a9aaa';
  ctx.fillRect(sx + pw/2 - 1, sy - 4, 2, 5);
  ctx.fillStyle = flash > 0 ? C.red : (frameCount % 40 < 20 ? C.cyan : C.green);
  ctx.fillRect(sx + pw/2 - 1, sy - 5, 2, 2);
  
  // Jet boots effect when jumping
  if (anim === 'jump' && player && player.vy < -2) {
    ctx.fillStyle = C.orange;
    ctx.globalAlpha = 0.7;
    ctx.fillRect(sx + 3, sy + ph, 5, 3 + Math.random() * 4);
    ctx.fillRect(sx + pw - 8, sy + ph, 5, 3 + Math.random() * 4);
    ctx.fillStyle = C.gold;
    ctx.fillRect(sx + 4, sy + ph, 3, 2 + Math.random() * 3);
    ctx.fillRect(sx + pw - 7, sy + ph, 3, 2 + Math.random() * 3);
    ctx.globalAlpha = 1;
  }
  
  // Wall slide sparks visual
  if (anim === 'wallslide') {
    ctx.fillStyle = C.brass;
    ctx.globalAlpha = 0.7;
    for (let i = 0; i < 3; i++) {
      ctx.fillRect(
        (dir > 0 ? sx + pw : sx - 3) + Math.random() * 3,
        sy + 5 + Math.random() * (ph - 10),
        2, 2
      );
    }
    ctx.globalAlpha = 1;
  }
  
  ctx.restore();
}

// --- ENEMY SPRITES ---
function drawEnemySprite(e, sx, sy) {
  const eyeDir = player ? (player.x > e.x ? 1 : -1) : 1;
  
  switch(e.behavior) {
    case 'walk': drawScrapCrawler(sx, sy, e, eyeDir); break;
    case 'charge': drawPistonSmasher(sx, sy, e, eyeDir); break;
    case 'burrow': drawDrillMole(sx, sy, e, eyeDir); break;
    case 'shield': drawShieldAutomaton(sx, sy, e, eyeDir); break;
    case 'fly': drawPropellerDrone(sx, sy, e, eyeDir); break;
    case 'swarm': drawSparkWasp(sx, sy, e, eyeDir); break;
    case 'swoop': drawMagHawk(sx, sy, e, eyeDir); break;
    case 'bomb': drawZeppelinBomber(sx, sy, e, eyeDir); break;
    case 'torpedo': drawTorpedoFish(sx, sy, e, eyeDir); break;
    case 'mine_layer': drawDepthCharger(sx, sy, e, eyeDir); break;
    case 'tentacle': drawOilKraken(sx, sy, e, eyeDir); break;
    case 'boss_furnace': drawBossFurnace(sx, sy, e); break;
    case 'boss_clock': drawBossClock(sx, sy, e); break;
    case 'boss_hydra': drawBossHydra(sx, sy, e); break;
    case 'boss_core': drawBossCore(sx, sy, e); break;
    default: drawGenericEnemy(sx, sy, e, eyeDir); break;
  }
}

function drawScrapCrawler(sx, sy, e, eyeDir) {
  // Spider-like bot body
  ctx.fillStyle = '#4a5a6a';
  ctx.fillRect(sx + 2, sy + 6, e.w - 4, e.h - 10);
  // Dome top
  ctx.fillStyle = '#5a6a7a';
  ctx.fillRect(sx + 4, sy + 2, e.w - 8, 6);
  // Legs (4 on each side, animated)
  ctx.fillStyle = '#3a4a5a';
  const legAnim = Math.sin(e.timer * 0.15);
  for (let i = 0; i < 4; i++) {
    const lx = sx + 2 + i * ((e.w - 4) / 3);
    const off = Math.sin(e.timer * 0.15 + i * 1.2) * 3;
    ctx.fillRect(lx - 2, sy + e.h - 4, 3, 4 + off);
    ctx.fillRect(lx + e.w - 8, sy + e.h - 4, 3, 4 - off);
  }
  // Eyes
  ctx.fillStyle = '#ff4444';
  ctx.fillRect(sx + e.w*0.3 + eyeDir*2, sy + 4, 3, 3);
  ctx.fillRect(sx + e.w*0.6 + eyeDir*2, sy + 4, 3, 3);
  // Eye glow
  ctx.fillStyle = '#ff888844';
  ctx.fillRect(sx + e.w*0.3 + eyeDir*2 - 1, sy + 3, 5, 5);
}

function drawPistonSmasher(sx, sy, e, eyeDir) {
  // Bulky body
  const chargePulse = e.vx !== 0 ? Math.abs(Math.sin(e.timer * 0.3)) * 3 : 0;
  ctx.fillStyle = '#5a2a2a';
  ctx.fillRect(sx + 2, sy + 8, e.w - 4, e.h - 12);
  // Heavy armor plates
  ctx.fillStyle = '#6a3a3a';
  ctx.fillRect(sx, sy + 4, e.w, 8);
  ctx.fillRect(sx + 2, sy, e.w - 4, 6);
  // Piston arms
  ctx.fillStyle = '#8a5a4a';
  const pistonExt = 4 + chargePulse;
  ctx.fillRect(sx - pistonExt, sy + 10, pistonExt + 2, 8);
  ctx.fillRect(sx + e.w - 2, sy + 10, pistonExt + 2, 8);
  // Fists
  ctx.fillStyle = '#aa6a5a';
  ctx.fillRect(sx - pistonExt - 4, sy + 8, 6, 12);
  ctx.fillRect(sx + e.w + pistonExt - 2, sy + 8, 6, 12);
  // Legs (thick)
  ctx.fillStyle = '#4a2a2a';
  ctx.fillRect(sx + 4, sy + e.h - 6, 8, 6);
  ctx.fillRect(sx + e.w - 12, sy + e.h - 6, 8, 6);
  // Angry eyes
  ctx.fillStyle = C.red;
  ctx.fillRect(sx + e.w*0.3, sy + 6, 5, 4);
  ctx.fillRect(sx + e.w*0.6, sy + 6, 5, 4);
  // Eyebrow (angry)
  ctx.fillStyle = '#3a1a1a';
  ctx.fillRect(sx + e.w*0.25, sy + 4, 7, 2);
  ctx.fillRect(sx + e.w*0.55, sy + 4, 7, 2);
  // Exhaust
  if (chargePulse > 1 && frameCount % 4 === 0) {
    spawnSteam(e.x + e.w/2, e.y);
  }
}

function drawDrillMole(sx, sy, e, eyeDir) {
  if (e.underground) {
    // Just show rumble indicator
    ctx.fillStyle = '#8B451344';
    const rumble = Math.sin(e.timer * 0.3) * 3;
    ctx.fillRect(sx + rumble, sy + e.h - 4, e.w, 4);
    ctx.fillStyle = '#8B4513';
    for (let i = 0; i < 3; i++) {
      ctx.fillRect(sx + Math.random() * e.w, sy + e.h - 6 - Math.random() * 6, 3, 3);
    }
    return;
  }
  // Brown body
  ctx.fillStyle = '#6a4a30';
  ctx.fillRect(sx + 4, sy + 4, e.w - 8, e.h - 6);
  ctx.fillStyle = '#8B5A3a';
  ctx.fillRect(sx + 2, sy + 6, e.w - 4, e.h - 10);
  // Drill nose
  ctx.fillStyle = '#aaa';
  const drillRot = e.timer * 0.2;
  const dx = sx + (eyeDir > 0 ? e.w - 2 : -6);
  ctx.fillRect(dx, sy + e.h/2 - 3, 8, 6);
  ctx.fillStyle = '#888';
  ctx.fillRect(dx + 2, sy + e.h/2 - 1 + Math.sin(drillRot) * 2, 6, 2);
  // Claws
  ctx.fillStyle = '#aaa';
  ctx.fillRect(sx, sy + e.h - 4, 4, 4);
  ctx.fillRect(sx + e.w - 4, sy + e.h - 4, 4, 4);
  // Beady eyes
  ctx.fillStyle = '#ffaa00';
  ctx.fillRect(sx + e.w*0.35, sy + 6, 3, 3);
  ctx.fillRect(sx + e.w*0.55, sy + 6, 3, 3);
}

function drawShieldAutomaton(sx, sy, e, eyeDir) {
  // Body
  ctx.fillStyle = '#4a5a7a';
  ctx.fillRect(sx + 4, sy + 4, e.w - 8, e.h - 6);
  // Armor plates
  ctx.fillStyle = '#5a6a8a';
  ctx.fillRect(sx + 2, sy + 6, e.w - 4, 8);
  ctx.fillRect(sx + 6, sy, e.w - 12, 6);
  // Legs
  ctx.fillStyle = '#3a4a5a';
  ctx.fillRect(sx + 4, sy + e.h - 6, 6, 6);
  ctx.fillRect(sx + e.w - 10, sy + e.h - 6, 6, 6);
  // Shield
  if (e.shielded) {
    const shieldX = e.dir > 0 ? sx + e.w : sx - 8;
    ctx.fillStyle = '#8a9aba';
    ctx.fillRect(shieldX, sy, 8, e.h);
    ctx.fillStyle = '#aabbdd';
    ctx.fillRect(shieldX + 2, sy + 2, 4, e.h - 4);
    // Shield rivets
    ctx.fillStyle = '#667';
    ctx.fillRect(shieldX + 3, sy + 4, 2, 2);
    ctx.fillRect(shieldX + 3, sy + e.h - 6, 2, 2);
  }
  // Eyes (stoic)
  ctx.fillStyle = '#4488ff';
  ctx.fillRect(sx + e.w*0.3, sy + 4, 4, 3);
  ctx.fillRect(sx + e.w*0.6, sy + 4, 4, 3);
}

function drawPropellerDrone(sx, sy, e, eyeDir) {
  // Propeller
  ctx.fillStyle = '#888';
  const propW = Math.cos(frameCount * 0.4) * (e.w * 0.8);
  ctx.fillRect(sx + e.w/2 - Math.abs(propW)/2, sy - 2, Math.abs(propW), 3);
  ctx.fillStyle = '#666';
  ctx.fillRect(sx + e.w/2 - 2, sy - 1, 4, 5);
  // Body (rounded drone shape)
  ctx.fillStyle = '#7a6a50';
  ctx.fillRect(sx + 2, sy + 4, e.w - 4, e.h - 8);
  ctx.fillStyle = '#8a7a60';
  ctx.fillRect(sx + 4, sy + 2, e.w - 8, e.h - 4);
  // Camera eye
  ctx.fillStyle = '#222';
  ctx.fillRect(sx + e.w/2 - 4 + eyeDir * 3, sy + e.h/2 - 3, 8, 6);
  ctx.fillStyle = C.red;
  ctx.fillRect(sx + e.w/2 - 2 + eyeDir * 3, sy + e.h/2 - 1, 4, 4);
  ctx.fillStyle = '#ff8888';
  ctx.fillRect(sx + e.w/2 - 1 + eyeDir * 3, sy + e.h/2, 2, 2);
  // Gun barrel underneath
  ctx.fillStyle = '#555';
  ctx.fillRect(sx + e.w/2 - 2, sy + e.h - 4, 4, 6);
}

function drawSparkWasp(sx, sy, e, eyeDir) {
  // Tiny electric bug
  const buzz = Math.sin(frameCount * 0.5 + e.x) * 2;
  // Wings
  ctx.fillStyle = C.cyan + '66';
  ctx.fillRect(sx - 2, sy - 2 + buzz, 6, 4);
  ctx.fillRect(sx + e.w - 4, sy - 2 - buzz, 6, 4);
  // Body
  ctx.fillStyle = '#2a4a6a';
  ctx.fillRect(sx + 2, sy + 2, e.w - 4, e.h - 4);
  ctx.fillStyle = C.cyan;
  ctx.fillRect(sx + 3, sy + 4, e.w - 6, 2);
  // Electric eye
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(sx + e.w/2 - 1, sy + 2, 3, 3);
  // Sparks
  if (frameCount % 6 === 0) {
    ctx.fillStyle = C.cyan;
    ctx.fillRect(sx + Math.random() * e.w, sy + Math.random() * e.h, 2, 2);
  }
}

function drawMagHawk(sx, sy, e, eyeDir) {
  // Hawk shape
  const swoopOffset = e.swooping ? Math.sin(e.timer * 0.2) * 3 : 0;
  // Wings
  ctx.fillStyle = '#6a4a8a';
  const wingSpan = e.swooping ? 6 : 10;
  ctx.fillRect(sx - wingSpan, sy + 4, wingSpan + 2, 5);
  ctx.fillRect(sx + e.w - 2, sy + 4, wingSpan + 2, 5);
  // Wing tips
  ctx.fillStyle = '#8a6aaa';
  ctx.fillRect(sx - wingSpan, sy + 2, 4, 4);
  ctx.fillRect(sx + e.w + wingSpan - 4, sy + 2, 4, 4);
  // Body
  ctx.fillStyle = '#5a3a7a';
  ctx.fillRect(sx + 2, sy + 2, e.w - 4, e.h - 6);
  ctx.fillStyle = '#6a4a8a';
  ctx.fillRect(sx + 4, sy, e.w - 8, e.h - 4);
  // Beak
  ctx.fillStyle = '#aa8a3a';
  const beakX = eyeDir > 0 ? sx + e.w - 2 : sx - 4;
  ctx.fillRect(beakX, sy + e.h/2 - 2, 6, 3);
  // Eyes (magnetic/purple)
  ctx.fillStyle = C.purple;
  ctx.fillRect(sx + e.w*0.3 + eyeDir*2, sy + 4, 4, 3);
  ctx.fillRect(sx + e.w*0.6 + eyeDir*2, sy + 4, 4, 3);
  // Magnetic field lines
  if (e.swooping) {
    ctx.strokeStyle = C.purple + '44';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(sx + e.w/2, sy + e.h/2, 16 + Math.sin(frameCount * 0.2) * 4, 0, Math.PI * 2);
    ctx.stroke();
  }
  // Tail
  ctx.fillStyle = '#4a2a6a';
  ctx.fillRect(sx + e.w/2 - 3, sy + e.h - 4, 6, 6 + swoopOffset);
}

function drawZeppelinBomber(sx, sy, e, eyeDir) {
  // Blimp body
  ctx.fillStyle = '#5a5a5a';
  ctx.fillRect(sx + 4, sy + 2, e.w - 8, e.h - 10);
  ctx.fillStyle = '#6a6a6a';
  ctx.fillRect(sx + 2, sy + 4, e.w - 4, e.h - 14);
  // Stripe
  ctx.fillStyle = C.red + '88';
  ctx.fillRect(sx + 4, sy + e.h/2 - 2, e.w - 8, 3);
  // Gondola
  ctx.fillStyle = '#444';
  ctx.fillRect(sx + e.w/2 - 8, sy + e.h - 10, 16, 10);
  ctx.fillStyle = '#555';
  ctx.fillRect(sx + e.w/2 - 6, sy + e.h - 8, 12, 6);
  // Propeller
  ctx.fillStyle = '#888';
  const propW = Math.cos(frameCount * 0.3) * 8;
  ctx.fillRect(sx + e.w - 4, sy + e.h/2 - Math.abs(propW)/2, 4, Math.abs(propW));
  // Bomb bay indicator
  ctx.fillStyle = C.red;
  ctx.fillRect(sx + e.w/2 - 2, sy + e.h - 4, 4, 4);
  // Eye window
  ctx.fillStyle = '#88aacc';
  ctx.fillRect(sx + e.w*0.3 + eyeDir*2, sy + e.h - 8, 5, 4);
}

function drawTorpedoFish(sx, sy, e, eyeDir) {
  // Mechanical fish
  ctx.fillStyle = '#4a6a5a';
  ctx.fillRect(sx + 4, sy + 4, e.w - 8, e.h - 8);
  ctx.fillStyle = '#5a7a6a';
  ctx.fillRect(sx + 2, sy + 6, e.w - 4, e.h - 12);
  // Tail fin
  const tailX = eyeDir > 0 ? sx : sx + e.w - 4;
  ctx.fillStyle = '#3a5a4a';
  ctx.fillRect(tailX, sy + 2, 6, e.h - 4);
  // Nose/torpedo tip
  const noseX = eyeDir > 0 ? sx + e.w - 2 : sx - 4;
  ctx.fillStyle = C.red;
  ctx.fillRect(noseX, sy + e.h/2 - 3, 6, 6);
  // Eye
  ctx.fillStyle = '#ffcc00';
  ctx.fillRect(sx + e.w/2 + eyeDir * 4, sy + 6, 3, 3);
  // Rivets
  ctx.fillStyle = '#8a9a8a';
  ctx.fillRect(sx + 6, sy + e.h/2, 2, 2);
  ctx.fillRect(sx + e.w - 8, sy + e.h/2, 2, 2);
}

function drawDepthCharger(sx, sy, e, eyeDir) {
  // Submarine bot
  ctx.fillStyle = '#3a4a3a';
  ctx.fillRect(sx + 2, sy + 4, e.w - 4, e.h - 8);
  ctx.fillStyle = '#4a5a4a';
  ctx.fillRect(sx + 4, sy + 2, e.w - 8, e.h - 4);
  // Periscope
  ctx.fillStyle = '#666';
  ctx.fillRect(sx + e.w/2 - 1, sy - 6, 3, 8);
  ctx.fillRect(sx + e.w/2 - 1 + eyeDir * 3, sy - 6, 5, 3);
  // Mine bay
  ctx.fillStyle = '#333';
  ctx.fillRect(sx + e.w/2 - 4, sy + e.h - 4, 8, 4);
  ctx.fillStyle = C.red;
  ctx.fillRect(sx + e.w/2 - 2, sy + e.h - 2, 4, 2);
  // Eye/window
  ctx.fillStyle = '#88ccaa';
  ctx.fillRect(sx + e.w*0.3 + eyeDir * 2, sy + 6, 4, 3);
}

function drawOilKraken(sx, sy, e, eyeDir) {
  // Tentacle monster from oil
  ctx.fillStyle = '#2a2a2a';
  ctx.fillRect(sx + 4, sy + 4, e.w - 8, e.h - 8);
  ctx.fillStyle = '#3a3a3a';
  ctx.fillRect(sx + 6, sy + 2, e.w - 12, e.h - 4);
  // Tentacles
  ctx.fillStyle = '#222';
  for (let i = 0; i < 4; i++) {
    const tx = sx + 2 + i * (e.w / 3);
    const tWave = Math.sin(e.timer * 0.1 + i * 1.5) * 6;
    ctx.fillRect(tx, sy + e.h - 2, 4, 10 + tWave);
    ctx.fillRect(tx + tWave * 0.3, sy + e.h + 6, 3, 6);
  }
  // Glowing eyes
  ctx.fillStyle = '#aa44ff';
  ctx.fillRect(sx + e.w*0.3, sy + 6, 5, 4);
  ctx.fillRect(sx + e.w*0.6, sy + 6, 5, 4);
  ctx.fillStyle = '#ff66ff44';
  ctx.beginPath();
  ctx.arc(sx + e.w/2, sy + 8, 12, 0, Math.PI * 2);
  ctx.fill();
}

function drawBossFurnace(sx, sy, e) {
  const pulse = Math.sin(frameCount * 0.05) * 3;
  // Massive boiler body
  ctx.fillStyle = '#4a2020';
  ctx.fillRect(sx + 4, sy + 10, e.w - 8, e.h - 14);
  ctx.fillStyle = '#5a2a2a';
  ctx.fillRect(sx, sy + 20, e.w, e.h - 30);
  // Furnace grate
  ctx.fillStyle = '#2a1010';
  ctx.fillRect(sx + 10, sy + e.h * 0.4, e.w - 20, 16);
  // Fire in furnace
  const fireAlpha = 0.6 + Math.sin(frameCount * 0.15) * 0.3;
  ctx.globalAlpha = fireAlpha;
  ctx.fillStyle = C.orange;
  ctx.fillRect(sx + 14, sy + e.h * 0.42, e.w - 28, 12);
  ctx.fillStyle = C.gold;
  ctx.fillRect(sx + 18, sy + e.h * 0.44, e.w - 36, 8);
  ctx.globalAlpha = 1;
  // Vents (weak points)
  const ventOpen = e.phase > 0 && frameCount % 60 < 30;
  ctx.fillStyle = ventOpen ? C.green : '#3a1a1a';
  ctx.fillRect(sx + 6, sy + 14, 10, 8);
  ctx.fillRect(sx + e.w - 16, sy + 14, 10, 8);
  // Pipes/smokestacks
  ctx.fillStyle = '#444';
  ctx.fillRect(sx + 10, sy, 8, 14);
  ctx.fillRect(sx + e.w - 18, sy, 8, 14);
  // Steam from pipes
  if (frameCount % 20 < 10) {
    spawnSteam(e.x + 14, e.y);
    spawnSteam(e.x + e.w - 14, e.y);
  }
  // Crown of fire
  ctx.fillStyle = C.red;
  for (let i = 0; i < 5; i++) {
    const fx = sx + 10 + i * ((e.w - 20) / 4);
    const fh = 6 + Math.sin(frameCount * 0.2 + i) * 4;
    ctx.fillRect(fx, sy - fh + pulse, 6, fh);
  }
  // Eyes
  ctx.fillStyle = '#ffaa00';
  ctx.fillRect(sx + e.w*0.3, sy + 24, 8, 6);
  ctx.fillRect(sx + e.w*0.6, sy + 24, 8, 6);
  // Boss HP bar
  drawBossBar(sx, sy, e);
}

function drawBossClock(sx, sy, e) {
  // Enormous gear body
  ctx.fillStyle = '#5a5040';
  ctx.fillRect(sx + 8, sy + 10, e.w - 16, e.h - 14);
  ctx.fillStyle = '#6a6050';
  ctx.fillRect(sx + 4, sy + 20, e.w - 8, e.h - 30);
  // Clock face
  ctx.fillStyle = '#3a3028';
  ctx.beginPath();
  ctx.arc(sx + e.w/2, sy + e.h * 0.4, 22, 0, Math.PI*2);
  ctx.fill();
  ctx.strokeStyle = C.brass;
  ctx.lineWidth = 2;
  ctx.stroke();
  // Clock hands
  const handAngle1 = frameCount * 0.02;
  const handAngle2 = frameCount * 0.005;
  ctx.strokeStyle = C.gold;
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(sx + e.w/2, sy + e.h * 0.4);
  ctx.lineTo(sx + e.w/2 + Math.cos(handAngle1) * 16, sy + e.h * 0.4 + Math.sin(handAngle1) * 16);
  ctx.stroke();
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(sx + e.w/2, sy + e.h * 0.4);
  ctx.lineTo(sx + e.w/2 + Math.cos(handAngle2) * 12, sy + e.h * 0.4 + Math.sin(handAngle2) * 12);
  ctx.stroke();
  // Gear decorations
  drawMiniGear(sx + 10, sy + e.h * 0.7, 8, frameCount * 0.03, C.brass);
  drawMiniGear(sx + e.w - 10, sy + e.h * 0.7, 8, -frameCount * 0.03, C.brass);
  // Legs
  ctx.fillStyle = '#4a4030';
  ctx.fillRect(sx + 10, sy + e.h - 10, 14, 10);
  ctx.fillRect(sx + e.w - 24, sy + e.h - 10, 14, 10);
  // Eyes
  ctx.fillStyle = C.gold;
  ctx.fillRect(sx + e.w*0.3, sy + 14, 8, 6);
  ctx.fillRect(sx + e.w*0.6, sy + 14, 8, 6);
  drawBossBar(sx, sy, e);
}

function drawBossHydra(sx, sy, e) {
  // Three headed crane
  ctx.fillStyle = '#5a4a3a';
  ctx.fillRect(sx + 8, sy + 20, e.w - 16, e.h - 24);
  ctx.fillStyle = '#6a5a4a';
  ctx.fillRect(sx + 4, sy + 30, e.w - 8, e.h - 38);
  // Three necks/heads
  const heads = [
    { ox: -10, color: C.red, label: 'M' },
    { ox: 0, color: C.copper, label: 'W' },
    { ox: 10, color: C.cyan, label: 'T' },
  ];
  for (let i = 0; i < 3; i++) {
    const h = heads[i];
    const nx = sx + e.w * (0.25 + i * 0.25) + Math.sin(frameCount * 0.03 + i * 2) * 4;
    const ny = sy + 6 + Math.sin(frameCount * 0.05 + i * 1.5) * 4;
    // Neck
    ctx.fillStyle = '#4a3a2a';
    ctx.fillRect(nx - 3, ny + 8, 6, 16);
    // Head
    ctx.fillStyle = '#5a4a3a';
    ctx.fillRect(nx - 8, ny, 16, 12);
    // Eyes
    ctx.fillStyle = h.color;
    ctx.fillRect(nx - 4, ny + 3, 4, 3);
    ctx.fillRect(nx + 2, ny + 3, 4, 3);
  }
  // Base/tracks
  ctx.fillStyle = '#3a3020';
  ctx.fillRect(sx, sy + e.h - 8, e.w, 8);
  ctx.fillStyle = '#555';
  for (let x = 0; x < e.w; x += 8) {
    ctx.fillRect(sx + x, sy + e.h - 6, 6, 4);
  }
  drawBossBar(sx, sy, e);
}

function drawBossCore(sx, sy, e) {
  // The sentient machine core
  const pulse = Math.sin(frameCount * 0.08) * 6;
  // Outer shell
  ctx.fillStyle = '#3a1a1a';
  ctx.fillRect(sx + 4, sy + 4, e.w - 8, e.h - 8);
  ctx.fillStyle = '#4a2020';
  ctx.fillRect(sx + 8, sy + 8, e.w - 16, e.h - 16);
  // Inner core (glowing)
  const coreGlow = 0.4 + Math.sin(frameCount * 0.1) * 0.3;
  ctx.globalAlpha = coreGlow;
  ctx.fillStyle = C.red;
  ctx.beginPath();
  ctx.arc(sx + e.w/2, sy + e.h/2, 20 + pulse, 0, Math.PI*2);
  ctx.fill();
  ctx.fillStyle = C.orange;
  ctx.beginPath();
  ctx.arc(sx + e.w/2, sy + e.h/2, 12 + pulse * 0.5, 0, Math.PI*2);
  ctx.fill();
  ctx.fillStyle = '#ffffff';
  ctx.beginPath();
  ctx.arc(sx + e.w/2, sy + e.h/2, 5, 0, Math.PI*2);
  ctx.fill();
  ctx.globalAlpha = 1;
  // Turrets
  const turretPositions = [
    [sx, sy + 10], [sx + e.w - 10, sy + 10],
    [sx, sy + e.h - 20], [sx + e.w - 10, sy + e.h - 20]
  ];
  for (const [tx, ty] of turretPositions) {
    ctx.fillStyle = '#555';
    ctx.fillRect(tx, ty, 10, 10);
    ctx.fillStyle = '#777';
    ctx.fillRect(tx + 2, ty + 2, 6, 6);
    ctx.fillStyle = C.red;
    ctx.fillRect(tx + 3, ty + 3, 4, 4);
  }
  // Circuit patterns
  ctx.strokeStyle = C.red + '44';
  ctx.lineWidth = 1;
  for (let i = 0; i < 4; i++) {
    const angle = frameCount * 0.01 + i * Math.PI / 2;
    ctx.beginPath();
    ctx.arc(sx + e.w/2, sy + e.h/2, 30 + i * 6, angle, angle + 1);
    ctx.stroke();
  }
  // Eye
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(sx + e.w/2 - 6, sy + e.h * 0.35, 12, 8);
  ctx.fillStyle = C.red;
  ctx.fillRect(sx + e.w/2 - 4, sy + e.h * 0.35 + 2, 8, 4);
  drawBossBar(sx, sy, e);
}

function drawBossBar(sx, sy, e) {
  // Boss glow aura
  ctx.globalAlpha = 0.15 + Math.sin(frameCount*0.05)*0.05;
  ctx.fillStyle = C.red;
  ctx.fillRect(sx - 5, sy - 5, e.w + 10, e.h + 10);
  ctx.globalAlpha = 1;
}

function drawGenericEnemy(sx, sy, e, eyeDir) {
  ctx.fillStyle = e.color;
  ctx.fillRect(sx + 2, sy + 2, e.w - 4, e.h - 4);
  ctx.fillStyle = '#222';
  ctx.fillRect(sx + 4, sy + 4, e.w - 8, e.h - 8);
  ctx.fillStyle = e.color;
  ctx.fillRect(sx + 6, sy + 6, e.w - 12, e.h - 12);
  ctx.fillStyle = '#ff4444';
  ctx.fillRect(sx + e.w*0.3 + eyeDir*2, sy + e.h*0.2, 4, 4);
  ctx.fillRect(sx + e.w*0.6 + eyeDir*2, sy + e.h*0.2, 4, 4);
}

// ---- MENU BACKGROUND ----
function initMenuGears() {
  gears = [];
  const count = isMobile ? 6 : 10;
  for (let i = 0; i < count; i++) {
    gears.push({
      x: Math.random() * 900 - 50,
      y: Math.random() * 500 - 25,
      r: 15 + Math.random() * 35,
      teeth: 6 + Math.floor(Math.random()*8),
      speed: (Math.random() - 0.5) * 0.015,
      rot: Math.random() * 6.28,
      color: [C.copper, C.brass, C.steel, C.panelLight][Math.floor(Math.random()*4)],
      depth: 0.3 + Math.random() * 0.4,
    });
  }
}

function drawMenuBackground() {
  const grad = ctx.createLinearGradient(0, 0, 0, H);
  grad.addColorStop(0, '#06060e');
  grad.addColorStop(0.3, '#0e0e1e');
  grad.addColorStop(0.7, '#100e20');
  grad.addColorStop(1, '#06060e');
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, W, H);
  
  // Factory silhouette - scaled to canvas
  ctx.fillStyle = '#0c0c18';
  const bh = H * 0.5;
  ctx.fillRect(0, bh, W*0.12, H-bh);
  ctx.fillRect(W*0.1, H*0.4, W*0.08, H*0.6);
  ctx.fillRect(W*0.18, H*0.55, W*0.06, H*0.45);
  ctx.fillRect(W*0.82, H*0.45, W*0.08, H*0.55);
  ctx.fillRect(W*0.9, bh, W*0.1, H-bh);
  ctx.fillRect(W*0.4, H*0.6, W*0.1, H*0.4);
  
  // Smokestacks with glowing tops
  ctx.fillRect(W*0.14, H*0.2, W*0.02, H*0.3);
  ctx.fillRect(W*0.86, H*0.25, W*0.015, H*0.3);
  
  // Smokestack glow
  ctx.fillStyle = C.orange + '22';
  ctx.beginPath();
  ctx.arc(W*0.15, H*0.2, 12, 0, Math.PI*2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(W*0.867, H*0.25, 10, 0, Math.PI*2);
  ctx.fill();
  
  // Background windows (lit)
  ctx.fillStyle = '#1a1a30';
  for (let i = 0; i < 6; i++) {
    const wx = W*0.1 + i * W*0.14;
    const wy = H*0.55 + Math.sin(i * 1.3) * 20;
    ctx.fillRect(wx, wy, 8, 6);
    if (Math.sin(frameCount * 0.01 + i * 2) > 0) {
      ctx.fillStyle = '#2a2a44';
      ctx.fillRect(wx, wy, 8, 6);
      ctx.fillStyle = '#1a1a30';
    }
  }
  
  // Gears (background)
  for (const g of gears) {
    g.rot += g.speed;
    const gx = (g.x / 900) * W;
    const gy = (g.y / 500) * H;
    const gr = g.r * Math.min(W/800, 1);
    ctx.globalAlpha = 0.08 + g.depth * 0.08;
    drawGear(gx, gy, gr, g.teeth, g.rot, g.color);
  }
  ctx.globalAlpha = 1;
  
  // Conveyor belt at bottom
  ctx.fillStyle = C.iron;
  ctx.fillRect(0, H - 25, W, 25);
  ctx.strokeStyle = C.copper + '44';
  ctx.lineWidth = 1;
  for (let x = (frameCount * 0.5) % 20 - 20; x < W; x += 20) {
    ctx.beginPath();
    ctx.moveTo(x, H-25);
    ctx.lineTo(x+10, H);
    ctx.stroke();
  }
  
  // Ambient steam
  if (frameCount % 40 === 0) {
    spawnSteam(W*0.14 + Math.random()*10, H*0.2);
    spawnSteam(W*0.86 + Math.random()*10, H*0.25);
  }
  
  // Ambient sparks
  if (frameCount % 60 === 0) {
    const sx = 50 + Math.random() * (W-100);
    spawnSparks(sx, H*0.4 + Math.random()*50, 3, C.cyan);
  }
  if (frameCount % 100 === 0) {
    const sx = 100 + Math.random() * (W-200);
    spawnSparks(sx, H*0.3 + Math.random()*30, 2, C.purple);
  }
}

// ---- TITLE ANIMATION ----
function initTitle() {
  titleLetters = [];
  const text = 'MACHINEFORMER';
  const isSmall = W < 500;
  const charW = isSmall ? 18 : 26;
  const fontSize = isSmall ? 26 : 36;
  const titleY = isSmall ? H * 0.10 : H * 0.14;
  
  const totalW = text.length * charW;
  const startX = W/2 - totalW/2;
  
  for (let i = 0; i < text.length; i++) {
    titleLetters.push({
      char: text[i],
      targetX: startX + i * charW,
      targetY: titleY,
      x: startX + i * charW + (Math.random()-0.5) * 200,
      y: -30 - Math.random() * 80,
      delay: i * 4 + 10,
      arrived: false,
      bounce: 0,
      fontSize: fontSize,
    });
  }
  titleBuilt = false;
  menuAnim = 0;
}

function updateTitle() {
  let allArrived = true;
  for (const l of titleLetters) {
    if (l.delay > 0) { l.delay--; allArrived = false; continue; }
    const dx = l.targetX - l.x;
    const dy = l.targetY - l.y;
    l.x += dx * 0.15;
    l.y += dy * 0.15;
    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5 && !l.arrived) {
      l.arrived = true;
      l.x = l.targetX;
      l.y = l.targetY;
      l.bounce = 6;
      spawnSparks(l.targetX + 10, l.targetY, 3, C.brass);
    }
    if (l.bounce > 0) l.bounce *= 0.85;
    if (!l.arrived) allArrived = false;
  }
  if (allArrived && !titleBuilt) {
    titleBuilt = true;
    for (let i = 0; i < 10; i++) {
      spawnSteam(W/2 + (Math.random()-0.5)*200, titleLetters[0].targetY);
    }
  }
}

function drawTitle() {
  for (const l of titleLetters) {
    if (l.delay > 0) continue;
    const yOff = l.arrived ? Math.sin(frameCount*0.05 + l.targetX*0.01) * 2 - l.bounce : 0;
    const fs = l.fontSize || 32;
    ctx.font = `bold ${fs}px "Black Ops One", monospace`;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    // Shadow
    ctx.fillStyle = '#00000088';
    ctx.fillText(l.char, l.x + 2, l.y + yOff + 2);
    // Glow
    if (titleBuilt) {
      ctx.shadowColor = C.cyan;
      ctx.shadowBlur = 10 + Math.sin(frameCount*0.08)*4;
    }
    ctx.fillStyle = C.cyan;
    ctx.fillText(l.char, l.x, l.y + yOff);
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'transparent';
  }
  
  // Subtitle
  if (titleBuilt) {
    const subAlpha = Math.min(1, (menuAnim - 80) / 20);
    if (subAlpha > 0) {
      ctx.globalAlpha = subAlpha;
      const subSize = isMobile && W < 500 ? 8 : 11;
      const subY = titleLetters[0].targetY + (titleLetters[0].fontSize || 32) * 0.7;
      drawMonoText('T R A N S F O R M .  U P G R A D E .  D O M I N A T E .', W/2, subY, subSize, C.cyan);
      ctx.globalAlpha = 1;
    }
  }
}

// ---- INTRO / STORY SCREEN ----
const introSlides = [
  {
    title: 'THE FACTORY AWAKENS',
    text: 'The machines have gone rogue. The central AI\nhas seized control of every factory on the planet.',
    icon: 'factory',
  },
  {
    title: 'YOU ARE UNIT-7',
    text: 'A maintenance robot reprogrammed for combat.\nYour mission: fight through 20 levels and\nshut down the Core Engine.',
    icon: 'robot',
  },
  {
    title: 'YOUR OBJECTIVE',
    text: 'Reach the EXIT on each level.\nDefeat enemies and collect scrap.\nBoss fights every 5 levels.\nFind Golden Gears for bonus stars!',
    icon: 'objective',
  },
  {
    title: 'CONTROLS',
    text: isMobile ? 
      'Use the D-PAD to move.\nJUMP button to jump (hold = higher).\nFIRE to shoot. SWAP to change weapons.' :
      'Arrow Keys / WASD to move.\nUp / Space to jump (hold = higher).\nZ to shoot. X to swap weapons.\nWall-jump by jumping off walls!',
    icon: 'controls',
  },
];

function drawIntroScreen() {
  // Dark cinematic background
  ctx.fillStyle = '#04040a';
  ctx.fillRect(0, 0, W, H);
  
  introTimer++;
  const small = W < 500;
  
  if (introStep >= introSlides.length) {
    // Done with intro - start game
    save.introSeen = true;
    saveSave();
    introShown = true;
    currentLevel = save.currentLevel || 1;
    startLevel(currentLevel);
    return;
  }
  
  const slide = introSlides[introStep];
  const fadeIn = Math.min(1, introTimer / 30);
  
  ctx.globalAlpha = fadeIn;
  
  // Background effects
  ctx.fillStyle = '#0a0a18';
  ctx.fillRect(W*0.05, H*0.08, W*0.9, H*0.84);
  ctx.strokeStyle = C.copper + '44';
  ctx.lineWidth = 2;
  ctx.strokeRect(W*0.05, H*0.08, W*0.9, H*0.84);
  
  // Slide indicator dots
  for (let i = 0; i < introSlides.length; i++) {
    ctx.fillStyle = i === introStep ? C.cyan : '#333';
    ctx.beginPath();
    ctx.arc(W/2 - 30 + i * 20, H * 0.14, 4, 0, Math.PI*2);
    ctx.fill();
  }
  
  // Icon area
  const iconY = H * 0.25;
  const iconCX = W / 2;
  
  if (slide.icon === 'factory') {
    // Draw factory scene
    ctx.fillStyle = '#1a1a2a';
    ctx.fillRect(iconCX - 50, iconY, 100, 60);
    ctx.fillStyle = '#2a2a3a';
    ctx.fillRect(iconCX - 40, iconY - 15, 20, 15);
    ctx.fillRect(iconCX + 20, iconY - 20, 15, 20);
    // Windows
    ctx.fillStyle = C.red + '88';
    ctx.fillRect(iconCX - 30, iconY + 10, 8, 8);
    ctx.fillRect(iconCX - 10, iconY + 10, 8, 8);
    ctx.fillRect(iconCX + 10, iconY + 10, 8, 8);
    ctx.fillRect(iconCX + 30, iconY + 10, 8, 8);
    // Lightning
    ctx.strokeStyle = C.red;
    ctx.lineWidth = 2;
    const lx = iconCX + Math.sin(frameCount * 0.05) * 20;
    ctx.beginPath();
    ctx.moveTo(lx, iconY - 30);
    ctx.lineTo(lx + 5, iconY - 15);
    ctx.lineTo(lx - 3, iconY - 10);
    ctx.lineTo(lx + 8, iconY);
    ctx.stroke();
    // Smoke
    if (frameCount % 15 === 0) {
      spawnSteam(iconCX - 30, iconY - 15);
      spawnSteam(iconCX + 27, iconY - 20);
    }
  } else if (slide.icon === 'robot') {
    // Draw the player robot big
    drawPlayerSprite(iconCX - 20, iconY, 1, 'idle', Math.floor(frameCount / 20) % 2, 0);
    // Sparkles around robot
    ctx.fillStyle = C.cyan + '44';
    for (let i = 0; i < 6; i++) {
      const angle = frameCount * 0.03 + i * Math.PI / 3;
      const dist = 30 + Math.sin(frameCount * 0.05 + i) * 8;
      ctx.fillRect(iconCX + Math.cos(angle) * dist - 2, iconY + 15 + Math.sin(angle) * dist - 2, 4, 4);
    }
  } else if (slide.icon === 'objective') {
    // Show mini level mockup
    ctx.fillStyle = '#1a1a24';
    ctx.fillRect(iconCX - 80, iconY, 160, 60);
    // Ground
    ctx.fillStyle = C.iron;
    ctx.fillRect(iconCX - 80, iconY + 48, 160, 12);
    // Player
    ctx.fillStyle = C.steel;
    ctx.fillRect(iconCX - 60, iconY + 36, 10, 12);
    ctx.fillStyle = C.cyan;
    ctx.fillRect(iconCX - 58, iconY + 38, 3, 3);
    // Arrow pointing right
    const arrowBob = Math.sin(frameCount * 0.1) * 4;
    ctx.fillStyle = C.green;
    ctx.fillRect(iconCX - 30 + arrowBob, iconY + 40, 20, 4);
    ctx.beginPath();
    ctx.moveTo(iconCX - 6 + arrowBob, iconY + 35);
    ctx.lineTo(iconCX + 4 + arrowBob, iconY + 42);
    ctx.lineTo(iconCX - 6 + arrowBob, iconY + 49);
    ctx.fill();
    // Exit
    ctx.fillStyle = C.green + 'aa';
    ctx.fillRect(iconCX + 60, iconY + 20, 12, 28);
    drawMonoText('EXIT', iconCX + 66, iconY + 34, 6, '#fff');
    // Enemy
    ctx.fillStyle = C.red;
    ctx.fillRect(iconCX + 20, iconY + 38, 12, 10);
    ctx.fillStyle = '#ff8888';
    ctx.fillRect(iconCX + 24, iconY + 40, 3, 3);
    // Golden gear
    drawMiniGear(iconCX + 10, iconY + 24, 6, frameCount * 0.04, C.gold);
    // Scrap
    drawMiniGear(iconCX - 20, iconY + 30, 4, frameCount * 0.03, C.brass);
  } else if (slide.icon === 'controls') {
    if (isMobile) {
      // Draw phone mockup
      ctx.strokeStyle = '#555';
      ctx.lineWidth = 2;
      ctx.strokeRect(iconCX - 50, iconY, 100, 60);
      // D-pad
      ctx.fillStyle = C.copper + '88';
      ctx.fillRect(iconCX - 40, iconY + 35, 18, 18);
      ctx.fillRect(iconCX - 22, iconY + 35, 18, 18);
      drawMonoText('◀', iconCX - 31, iconY + 44, 10, '#fff');
      drawMonoText('▶', iconCX - 13, iconY + 44, 10, '#fff');
      // Action buttons
      ctx.fillStyle = C.red + '88';
      ctx.beginPath(); ctx.arc(iconCX + 35, iconY + 40, 10, 0, Math.PI*2); ctx.fill();
      drawMonoText('JMP', iconCX + 35, iconY + 40, 6, '#fff');
      ctx.fillStyle = C.orange + '88';
      ctx.beginPath(); ctx.arc(iconCX + 18, iconY + 35, 8, 0, Math.PI*2); ctx.fill();
      drawMonoText('FIRE', iconCX + 18, iconY + 35, 5, '#fff');
    } else {
      // Draw keyboard keys
      const keyY = iconY + 5;
      const keys_display = [
        { label: '←→', x: iconCX - 60, y: keyY + 20, desc: 'Move' },
        { label: '↑/SPC', x: iconCX - 10, y: keyY, desc: 'Jump' },
        { label: 'Z', x: iconCX + 40, y: keyY + 20, desc: 'Shoot' },
        { label: 'X', x: iconCX + 40, y: keyY + 45, desc: 'Swap' },
      ];
      for (const k of keys_display) {
        ctx.fillStyle = '#2a2a3a';
        ctx.fillRect(k.x - 18, k.y, 36, 22);
        ctx.strokeStyle = '#555';
        ctx.lineWidth = 1;
        ctx.strokeRect(k.x - 18, k.y, 36, 22);
        drawMonoText(k.label, k.x, k.y + 10, 9, C.gold);
        drawMonoText(k.desc, k.x, k.y + 28, 7, C.steam);
      }
    }
  }
  
  // Title
  drawText(slide.title, W/2, H * 0.56, small ? 16 : 22, C.gold);
  
  // Body text (multi-line)
  const lines = slide.text.split('\n');
  const lineSize = small ? 9 : 12;
  for (let i = 0; i < lines.length; i++) {
    drawMonoText(lines[i], W/2, H * 0.64 + i * (lineSize + 6), lineSize, C.steam);
  }
  
  // Navigation
  const nextLabel = introStep < introSlides.length - 1 ? 'NEXT →' : 'START MISSION!';
  const btnW = small ? 150 : 180;
  const btnY = H * 0.88;
  const nextHov = isHovered(W/2 - btnW/2, btnY - 16, btnW, 32);
  drawButton(W/2 - btnW/2, btnY - 16, btnW, 32, nextLabel, nextHov);
  if (nextHov && mouseClicked) {
    introStep++;
    introTimer = 0;
  }
  
  // Skip button
  if (introStep < introSlides.length - 1) {
    const skipHov = isHovered(W - 80, H - 30, 60, 20);
    ctx.globalAlpha = 0.6;
    drawMonoText('SKIP >', W - 50, H - 20, 10, skipHov ? C.gold : '#666');
    ctx.globalAlpha = 1;
    if (skipHov && mouseClicked) {
      introStep = introSlides.length;
      introTimer = 0;
    }
  }
  
  ctx.globalAlpha = 1;
  
  // Draw particles on top
  drawParticles(0, 0);
  updateParticles();
}

// ---- LEVEL GENERATION ----
function generateLevel(num) {
  const world = Math.ceil(num / 5);
  const levelInWorld = ((num - 1) % 5) + 1;
  const isBoss = levelInWorld === 5;
  
  const cols = isBoss ? 30 : 40 + levelInWorld * 8;
  const rows = 14;
  levelWidth = cols * TILE;
  levelHeight = rows * TILE;
  
  platforms = [];
  enemies = [];
  hazards = [];
  pickups = [];
  checkpoints = [];
  bullets = [];
  
  // Ground
  for (let x = 0; x < cols; x++) {
    platforms.push({ x: x*TILE, y: (rows-1)*TILE, w: TILE, h: TILE, type: 'solid' });
    if (Math.random() < 0.3 && x > 2) {
      platforms.push({ x: x*TILE, y: (rows-2)*TILE, w: TILE, h: TILE, type: 'solid' });
    }
  }
  
  // Walls at edges
  for (let y = 0; y < rows; y++) {
    platforms.push({ x: 0, y: y*TILE, w: TILE, h: TILE, type: 'solid' });
    platforms.push({ x: (cols-1)*TILE, y: y*TILE, w: TILE, h: TILE, type: 'solid' });
  }
  
  // Platforms
  const platCount = 8 + levelInWorld * 3 + (world-1)*4;
  for (let i = 0; i < platCount; i++) {
    const px = TILE*2 + Math.floor(Math.random()*(cols-4)) * TILE;
    const py = TILE*3 + Math.floor(Math.random()*(rows-5)) * TILE;
    const pw = (2 + Math.floor(Math.random()*3)) * TILE;
    
    if (px < TILE*4 && py > (rows-4)*TILE) continue;
    
    const types = ['solid'];
    if (world >= 1) types.push('conveyor');
    if (world >= 2) types.push('steam_vent');
    if (world >= 3) types.push('electric');
    
    const ptype = types[Math.floor(Math.random()*types.length)];
    platforms.push({ x: px, y: py, w: pw, h: TILE, type: ptype, dir: Math.random() > 0.5 ? 1 : -1 });
  }
  
  // Enemies - more types and more of them
  const enemyCount = isBoss ? 5 : 5 + Math.floor(num * 1.3);
  const worldEnemyTypes = {
    1: ['scrap_crawler', 'scrap_crawler', 'piston_smasher', 'propeller_drone', 'spark_wasp'],
    2: ['scrap_crawler', 'piston_smasher', 'drill_mole', 'propeller_drone', 'spark_wasp', 'torpedo_fish', 'depth_charger'],
    3: ['scrap_crawler', 'shield_automaton', 'propeller_drone', 'spark_wasp', 'mag_hawk', 'torpedo_fish', 'oil_kraken'],
    4: ['piston_smasher', 'drill_mole', 'shield_automaton', 'mag_hawk', 'zeppelin_bomber', 'oil_kraken', 'depth_charger'],
  };
  
  const eTypes = worldEnemyTypes[world] || worldEnemyTypes[1];
  for (let i = 0; i < enemyCount; i++) {
    const ex = TILE*5 + Math.random() * (levelWidth - TILE*10);
    const ey = TILE*2 + Math.random() * (levelHeight - TILE*6);
    const etype = eTypes[Math.floor(Math.random()*eTypes.length)];
    enemies.push(createEnemy(etype, ex, ey));
  }
  
  // Boss
  if (isBoss) {
    const bossTypes = { 1: 'furnace_king', 2: 'clockwork_colossus', 3: 'hydra_crane', 4: 'core_engine' };
    const boss = createEnemy(bossTypes[world], levelWidth*0.7, levelHeight - TILE*5);
    boss.isBoss = true;
    enemies.push(boss);
    bossHP = boss.hp;
    bossMaxHP = boss.hp;
  }
  
  // Pickups
  for (let i = 0; i < 10 + num*2; i++) {
    const px = TILE*2 + Math.random()*(levelWidth - TILE*4);
    const py = TILE*2 + Math.random()*(levelHeight - TILE*4);
    pickups.push({ x: px, y: py, w: 16, h: 16, type: Math.random() < 0.7 ? 'scrap' : (Math.random() < 0.5 ? 'health' : 'energy'), collected: false });
  }
  
  // Golden gears
  levelGears = [false, false, false];
  for (let i = 0; i < 3; i++) {
    pickups.push({
      x: TILE*4 + Math.random()*(levelWidth - TILE*8),
      y: TILE*2 + Math.random()*(levelHeight - TILE*5),
      w: 20, h: 20, type: 'golden_gear', index: i, collected: false
    });
  }
  
  // Checkpoints
  const cpCount = Math.max(1, Math.floor(cols / 15));
  for (let i = 0; i < cpCount; i++) {
    checkpoints.push({
      x: TILE*3 + (i+1) * (levelWidth/(cpCount+1)),
      y: levelHeight - TILE*3,
      activated: false,
    });
  }
  
  // Hazards
  if (world >= 2) {
    for (let i = 0; i < 3 + num; i++) {
      const hx = TILE*3 + Math.random()*(levelWidth-TILE*6);
      const hy = levelHeight - TILE*2;
      hazards.push({ x: hx, y: hy, w: TILE, h: TILE/2, type: world >= 3 ? 'electric' : 'steam', timer: Math.random()*60 });
    }
  }
  
  // Weapon crate
  const weaponUnlocks = { 3: 'steam_cannon', 6: 'arc_welder', 9: 'gear_launcher', 13: 'oil_bomb', 17: 'magnet_rail' };
  if (weaponUnlocks[num] && !save.weapons.includes(weaponUnlocks[num])) {
    pickups.push({
      x: levelWidth * 0.6, y: levelHeight - TILE*4,
      w: 24, h: 24, type: 'weapon_crate', weapon: weaponUnlocks[num], collected: false
    });
  }
  
  levelData = { num, world, levelInWorld, isBoss, cols, rows };
}

function createEnemy(type, x, y) {
  const base = { x, y, w: 28, h: 28, vx: 0, vy: 0, type, hp: 3, maxHP: 3, dir: 1, timer: 0, state: 'idle', flash: 0, onGround: false };
  
  switch(type) {
    case 'scrap_crawler':
      return { ...base, hp: 2, maxHP: 2, w: 24, h: 20, speed: 0.8, color: C.steel, behavior: 'walk' };
    case 'piston_smasher':
      return { ...base, hp: 5, maxHP: 5, w: 32, h: 36, speed: 1.5, color: C.red, behavior: 'charge' };
    case 'drill_mole':
      return { ...base, hp: 3, maxHP: 3, w: 24, h: 24, speed: 0, color: '#8B4513', behavior: 'burrow', underground: false };
    case 'shield_automaton':
      return { ...base, hp: 6, maxHP: 6, w: 28, h: 32, speed: 0.5, color: C.steel, behavior: 'shield', shielded: true };
    case 'propeller_drone':
      return { ...base, hp: 2, maxHP: 2, w: 24, h: 24, speed: 1, color: C.copper, behavior: 'fly', shootTimer: 0 };
    case 'spark_wasp':
      return { ...base, hp: 1, maxHP: 1, w: 16, h: 16, speed: 2, color: C.cyan, behavior: 'swarm' };
    case 'mag_hawk':
      return { ...base, hp: 3, maxHP: 3, w: 28, h: 24, speed: 3, color: C.purple, behavior: 'swoop', swooping: false };
    case 'zeppelin_bomber':
      return { ...base, hp: 8, maxHP: 8, w: 48, h: 32, speed: 0.5, color: '#666', behavior: 'bomb', bombTimer: 0 };
    case 'torpedo_fish':
      return { ...base, hp: 3, maxHP: 3, w: 26, h: 18, speed: 4, color: '#4a6a5a', behavior: 'torpedo', launched: false };
    case 'depth_charger':
      return { ...base, hp: 5, maxHP: 5, w: 28, h: 24, speed: 0.6, color: '#3a4a3a', behavior: 'mine_layer', mineTimer: 0 };
    case 'oil_kraken':
      return { ...base, hp: 6, maxHP: 6, w: 32, h: 32, speed: 0.3, color: '#2a2a2a', behavior: 'tentacle', grabTimer: 0 };
    case 'furnace_king':
      return { ...base, hp: 30, maxHP: 30, w: 64, h: 80, speed: 0.8, color: C.red, behavior: 'boss_furnace', phase: 0, attackTimer: 0 };
    case 'clockwork_colossus':
      return { ...base, hp: 40, maxHP: 40, w: 80, h: 96, speed: 0.5, color: C.brass, behavior: 'boss_clock', phase: 0, attackTimer: 0 };
    case 'hydra_crane':
      return { ...base, hp: 50, maxHP: 50, w: 72, h: 72, speed: 0.3, color: C.copper, behavior: 'boss_hydra', phase: 0, attackTimer: 0 };
    case 'core_engine':
      return { ...base, hp: 60, maxHP: 60, w: 96, h: 96, speed: 0, color: '#ff4444', behavior: 'boss_core', phase: 0, attackTimer: 0 };
    default:
      return { ...base, hp: 2, maxHP: 2, speed: 0.5, color: C.steel, behavior: 'walk' };
  }
}

// ---- PLAYER ----
function initPlayer() {
  player = {
    x: TILE * 2.5,
    y: levelHeight - TILE * 3,
    w: 20,
    h: 30,
    vx: 0,
    vy: 0,
    dir: 1,
    hp: save.maxHP || 100,
    maxHP: save.maxHP || 100,
    energy: 100,
    maxEnergy: 100,
    onGround: false,
    coyoteTimer: 0,
    jumping: false,
    jumpHeld: false,
    wallSlide: false,
    wallDir: 0,
    shooting: false,
    shootTimer: 0,
    currentWeapon: 0,
    weapons: save.equippedWeapons.filter(w => w),
    flash: 0,
    invincible: 0,
    anim: 'idle',
    animFrame: 0,
    animTimer: 0,
    dead: false,
    scrap: save.currency || 0,
    swapHeld: false,
  };
  if (player.weapons.length === 0) player.weapons = ['rivet_gun'];
  // Show tutorial for level 1
  if (currentLevel === 1 && !save.introSeen) {
    tutorialOverlay = 300; // Show tutorial for 5 seconds
  } else {
    tutorialOverlay = 0;
  }
}

// ---- COLLISION ----
function rectOverlap(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
}

function checkPlatformCollision(entity, dx, dy) {
  let newX = entity.x + dx;
  let newY = entity.y + dy;
  let onGround = false;
  let wallDir = 0;
  let conveyorPush = 0;
  
  // Vertical first
  for (const p of platforms) {
    const eRect = { x: entity.x, y: newY, w: entity.w, h: entity.h };
    if (rectOverlap(eRect, p)) {
      if (dy > 0 && entity.y + entity.h <= p.y + 4) {
        newY = p.y - entity.h;
        entity.vy = 0;
        onGround = true;
        if (p.type === 'conveyor') conveyorPush = p.dir * 1.5;
      } else if (dy < 0 && entity.y >= p.y + p.h - 4) {
        newY = p.y + p.h;
        entity.vy = 0;
      }
    }
  }
  
  // Then horizontal
  for (const p of platforms) {
    const eRect = { x: newX, y: newY, w: entity.w, h: entity.h };
    if (rectOverlap(eRect, p)) {
      if (dx > 0) {
        newX = p.x - entity.w;
        wallDir = 1;
      } else if (dx < 0) {
        newX = p.x + p.w;
        wallDir = -1;
      }
      entity.vx = 0;
    }
  }
  
  entity.x = newX;
  entity.y = newY;
  entity.onGround = onGround;
  
  return { onGround, wallDir, conveyorPush };
}

// ---- GAME UPDATE ----
function updateGame() {
  if (!player || player.dead) {
    deathAnim++;
    if (deathAnim > 60) {
      respawnPlayer();
    }
    return;
  }
  
  levelTimer++;
  if (tutorialOverlay > 0) tutorialOverlay--;
  
  // Input
  const kb = settings.keyBindings;
  let moveLeft = keys[kb.left] || keys['KeyA'] || touchState.left;
  let moveRight = keys[kb.right] || keys['KeyD'] || touchState.right;
  let jumpBtn = keys[kb.jump] || keys['Space'] || keys['KeyW'] || touchState.jump;
  let shootBtn = keys[kb.shoot] || keys['KeyZ'] || touchState.shoot;
  let swapBtn = keys[kb.swap] || keys['KeyX'] || touchState.swap;
  
  // Movement
  if (moveLeft) {
    player.vx -= PLAYER_ACCEL;
    if (player.vx < -PLAYER_SPEED) player.vx = -PLAYER_SPEED;
    player.dir = -1;
  } else if (moveRight) {
    player.vx += PLAYER_ACCEL;
    if (player.vx > PLAYER_SPEED) player.vx = PLAYER_SPEED;
    player.dir = 1;
  } else {
    if (player.vx > 0) player.vx = Math.max(0, player.vx - PLAYER_DECEL);
    else player.vx = Math.min(0, player.vx + PLAYER_DECEL);
  }
  
  // Gravity
  player.vy += GRAVITY;
  if (player.vy > MAX_FALL) player.vy = MAX_FALL;
  
  // Coyote time
  if (player.onGround) player.coyoteTimer = COYOTE_TIME;
  else if (player.coyoteTimer > 0) player.coyoteTimer--;
  
  // Jump
  if (jumpBtn && !player.jumpHeld) {
    if (player.coyoteTimer > 0) {
      player.vy = JUMP_FORCE;
      player.coyoteTimer = 0;
      player.jumping = true;
      spawnSteam(player.x + player.w/2, player.y + player.h);
    } else if (player.wallSlide) {
      player.vx = player.wallDir * -WALL_JUMP_X;
      player.vy = WALL_JUMP_Y;
      player.jumping = true;
      spawnSparks(player.x + (player.wallDir > 0 ? player.w : 0), player.y + player.h/2, 5, C.brass);
    } else if (save.mobilityUpgrades && save.mobilityUpgrades.doubleJump && player.jumping) {
      player.vy = JUMP_FORCE * 0.85;
      player.jumping = false;
      spawnSteam(player.x + player.w/2, player.y + player.h);
    }
  }
  player.jumpHeld = jumpBtn;
  
  // Variable jump height
  if (jumpBtn && player.vy < 0) {
    player.vy += JUMP_HOLD_FORCE;
  }
  
  // Apply movement & collision
  const result = checkPlatformCollision(player, player.vx, player.vy);
  if (result.onGround) {
    player.jumping = false;
  }
  if (result.conveyorPush) player.x += result.conveyorPush;
  
  // Wall slide
  player.wallSlide = false;
  player.wallDir = 0;
  if (!player.onGround && player.vy > 0 && (moveLeft || moveRight)) {
    for (const p of platforms) {
      const testRect = { x: player.x + (moveRight ? player.w : -2), y: player.y, w: 2, h: player.h };
      if (rectOverlap(testRect, p)) {
        player.wallSlide = true;
        player.wallDir = moveRight ? 1 : -1;
        player.vy = Math.min(player.vy, WALL_SLIDE_SPEED);
        break;
      }
    }
  }
  
  // Shooting
  if (shootBtn && player.shootTimer <= 0) {
    const wpnKey = player.weapons[player.currentWeapon] || 'rivet_gun';
    const wpn = WEAPONS[wpnKey];
    if (player.energy >= wpn.energy) {
      player.energy -= wpn.energy;
      player.shootTimer = wpn.rate;
      const bx = player.x + player.w/2 + player.dir * 10;
      const by = player.y + player.h * 0.35;
      const spread = (Math.random()-0.5) * wpn.spread;
      bullets.push({
        x: bx, y: by,
        vx: player.dir * wpn.speed + Math.cos(spread)*wpn.speed*0.1,
        vy: wpn.arc ? -3 : Math.sin(spread)*wpn.speed*0.1,
        w: wpn.size, h: wpn.size,
        damage: wpn.damage + (save.weaponUpgrades[wpnKey] || 0),
        color: wpn.color,
        life: 60,
        pierce: wpn.pierce,
        bounce: wpn.bounce,
        isPlayerBullet: true,
        gravity: wpn.arc ? 0.15 : 0,
      });
      spawnSparks(bx, by, 2, wpn.color);
    }
  }
  if (player.shootTimer > 0) player.shootTimer--;
  
  // Weapon swap
  if (swapBtn && !player.swapHeld && player.weapons.length > 1) {
    player.currentWeapon = (player.currentWeapon + 1) % player.weapons.length;
  }
  player.swapHeld = swapBtn;
  
  // Energy regen
  if (player.energy < player.maxEnergy) player.energy += 0.15;
  
  // Auto repair
  if (save.utilityUpgrades && save.utilityUpgrades.autoRepair) {
    if (player.hp < player.maxHP) player.hp += 0.02;
  }
  
  // Invincibility timer
  if (player.invincible > 0) player.invincible--;
  if (player.flash > 0) player.flash--;
  
  // Boundaries
  if (player.x < 0) player.x = 0;
  if (player.x > levelWidth - player.w) player.x = levelWidth - player.w;
  if (player.y > levelHeight + 100) {
    playerDie();
  }
  
  // Animation
  player.animTimer++;
  if (player.wallSlide) {
    player.anim = 'wallslide';
    player.animFrame = 0;
  } else if (player.onGround) {
    if (Math.abs(player.vx) > 0.5) {
      player.anim = 'run';
      if (player.animTimer % 6 === 0) player.animFrame = (player.animFrame + 1) % 4;
    } else {
      player.anim = 'idle';
      if (player.animTimer % 20 === 0) player.animFrame = (player.animFrame + 1) % 2;
    }
  } else {
    player.anim = player.vy < 0 ? 'jump' : 'fall';
    player.animFrame = 0;
  }
  
  // Update bullets
  for (let i = bullets.length - 1; i >= 0; i--) {
    const b = bullets[i];
    b.x += b.vx;
    b.y += b.vy;
    if (b.gravity) b.vy += b.gravity;
    b.life--;
    
    let hitPlatform = false;
    for (const p of platforms) {
      if (rectOverlap(b, p)) {
        if (b.bounce) {
          b.vx *= -0.8;
          b.x += b.vx * 2;
          spawnSparks(b.x, b.y, 2, b.color);
        } else {
          hitPlatform = true;
        }
        break;
      }
    }
    
    if (b.life <= 0 || hitPlatform || b.x < 0 || b.x > levelWidth || b.y > levelHeight) {
      if (hitPlatform) spawnSparks(b.x, b.y, 3, b.color);
      bullets.splice(i, 1);
      continue;
    }
    
    if (b.isPlayerBullet) {
      for (let j = enemies.length - 1; j >= 0; j--) {
        const e = enemies[j];
        if (rectOverlap(b, e)) {
          if (e.shielded && ((b.vx > 0 && b.x < e.x + e.w/2) || (b.vx < 0 && b.x > e.x + e.w/2))) {
            spawnSparks(b.x, b.y, 3, C.steam);
            if (!b.pierce) { bullets.splice(i, 1); break; }
            continue;
          }
          e.hp -= b.damage;
          e.flash = 5;
          spawnSparks(b.x, b.y, 4, C.orange);
          if (e.hp <= 0) {
            spawnGearBurst(e.x + e.w/2, e.y + e.h/2);
            player.scrap += e.isBoss ? 50 : 5;
            if (e.isBoss) { bossHP = 0; }
            enemies.splice(j, 1);
          }
          if (!b.pierce) { bullets.splice(i, 1); break; }
        }
      }
    } else {
      if (rectOverlap(b, player) && player.invincible <= 0) {
        playerHit(b.damage);
        bullets.splice(i, 1);
      }
    }
  }
  
  // Update enemies
  for (const e of enemies) {
    if (e.flash > 0) e.flash--;
    e.timer++;
    
    const distToPlayer = Math.sqrt((e.x - player.x)**2 + (e.y - player.y)**2);
    const dirToPlayer = player.x > e.x ? 1 : -1;
    
    switch(e.behavior) {
      case 'walk':
        e.vx = e.speed * e.dir;
        e.vy += GRAVITY;
        if (e.timer % 120 < 2) e.dir *= -1;
        break;
      case 'charge':
        if (distToPlayer < 200) {
          e.vx += dirToPlayer * 0.2;
          if (Math.abs(e.vx) > e.speed) e.vx = e.speed * Math.sign(e.vx);
        } else {
          e.vx *= 0.95;
        }
        e.vy += GRAVITY;
        break;
      case 'burrow':
        if (!e.underground && distToPlayer < 150) {
          e.underground = true;
          e.timer = 0;
        }
        if (e.underground) {
          e.x += (player.x - e.x) * 0.03;
          if (e.timer > 40) {
            e.underground = false;
            e.vy = -6;
            spawnSparks(e.x, e.y, 6, '#8B4513');
          }
        } else {
          e.vy += GRAVITY;
        }
        break;
      case 'shield':
        e.vx = e.speed * dirToPlayer * 0.5;
        e.vy += GRAVITY;
        e.dir = dirToPlayer;
        break;
      case 'fly':
        e.vy = Math.sin(e.timer * 0.05) * 0.8;
        e.vx = Math.cos(e.timer * 0.03) * e.speed;
        e.shootTimer++;
        if (e.shootTimer > 60 && distToPlayer < 300) {
          e.shootTimer = 0;
          bullets.push({ x: e.x+e.w/2, y: e.y+e.h, vx: 0, vy: 3, w: 4, h: 4, damage: 1, color: C.red, life: 60, isPlayerBullet: false, gravity: 0 });
        }
        break;
      case 'swarm':
        const angle = e.timer * 0.08 + e.x * 0.01;
        e.vx += (player.x - e.x) * 0.008 + Math.cos(angle) * 0.5;
        e.vy += (player.y - e.y) * 0.008 + Math.sin(angle) * 0.5;
        e.vx *= 0.95;
        e.vy *= 0.95;
        break;
      case 'swoop':
        if (!e.swooping && distToPlayer < 200 && Math.random() < 0.01) {
          e.swooping = true;
          e.timer = 0;
        }
        if (e.swooping) {
          e.vx += (player.x - e.x) * 0.02;
          e.vy += (player.y - e.y) * 0.02;
          if (e.timer > 40) { e.swooping = false; e.vy = -2; }
        } else {
          e.vy = Math.sin(e.timer * 0.03) * 0.5 - 0.2;
          e.vx = Math.cos(e.timer * 0.02) * e.speed * 0.5;
        }
        break;
      case 'bomb':
        e.vx = e.speed * Math.sign(Math.sin(e.timer * 0.01));
        e.vy = Math.sin(e.timer * 0.02) * 0.3;
        e.bombTimer++;
        if (e.bombTimer > 90 && distToPlayer < 300) {
          e.bombTimer = 0;
          bullets.push({ x: e.x+e.w/2, y: e.y+e.h, vx: 0, vy: 2, w: 8, h: 8, damage: 3, color: '#333', life: 90, isPlayerBullet: false, gravity: 0.1 });
        }
        break;
      case 'torpedo':
        // Torpedo fish - launches horizontally when player is nearby
        if (!e.launched && distToPlayer < 200) {
          e.launched = true;
          e.vx = dirToPlayer * e.speed;
          e.vy = 0;
        }
        if (e.launched) {
          // Keep going straight
          if (e.timer % 120 === 0) e.launched = false; // Reset after a bit
        } else {
          e.vx = e.speed * 0.2 * e.dir;
          e.vy = Math.sin(e.timer * 0.04) * 0.5;
          if (e.timer % 80 < 2) e.dir *= -1;
        }
        break;
      case 'mine_layer':
        // Depth charger - moves slowly, drops mines
        e.vx = e.speed * Math.sign(Math.sin(e.timer * 0.015));
        e.vy = Math.sin(e.timer * 0.03) * 0.4;
        e.mineTimer++;
        if (e.mineTimer > 100 && distToPlayer < 250) {
          e.mineTimer = 0;
          bullets.push({ x: e.x+e.w/2, y: e.y+e.h, vx: 0, vy: 1.5, w: 6, h: 6, damage: 4, color: C.red, life: 120, isPlayerBullet: false, gravity: 0.05 });
        }
        break;
      case 'tentacle':
        // Oil kraken - slow, grabs at player
        e.vx = (player.x - e.x) * 0.005;
        e.vy += GRAVITY;
        e.grabTimer++;
        if (e.grabTimer > 70 && distToPlayer < 120) {
          e.grabTimer = 0;
          // Grab attempt - spawn bullet towards player
          bullets.push({ 
            x: e.x+e.w/2, y: e.y, 
            vx: dirToPlayer * 2, vy: -1, 
            w: 6, h: 6, damage: 3, color: '#4a2a6a', life: 40, isPlayerBullet: false, gravity: 0 
          });
        }
        break;
      case 'boss_furnace':
      case 'boss_clock':
      case 'boss_hydra':
      case 'boss_core':
        updateBoss(e);
        break;
    }
    
    if (e.behavior !== 'burrow' || !e.underground) {
      checkPlatformCollision(e, e.vx || 0, e.vy || 0);
    }
    
    if (rectOverlap(e, player) && player.invincible <= 0 && !player.dead) {
      playerHit(e.isBoss ? 15 : 5);
    }
    
    if (e.x < 0 || e.x > levelWidth) e.dir *= -1;
  }
  
  // Update pickups
  for (const p of pickups) {
    if (p.collected) continue;
    if (rectOverlap(player, p)) {
      p.collected = true;
      switch(p.type) {
        case 'scrap':
          player.scrap += 3;
          spawnSparks(p.x, p.y, 3, C.brass);
          break;
        case 'health':
          player.hp = Math.min(player.maxHP, player.hp + 25);
          spawnSparks(p.x, p.y, 4, C.green);
          break;
        case 'energy':
          player.energy = Math.min(player.maxEnergy, player.energy + 30);
          spawnSparks(p.x, p.y, 4, C.cyan);
          break;
        case 'golden_gear':
          levelGears[p.index] = true;
          spawnGearBurst(p.x, p.y);
          spawnSparks(p.x, p.y, 8, C.gold);
          break;
        case 'weapon_crate':
          if (!save.weapons.includes(p.weapon)) {
            save.weapons.push(p.weapon);
            if (player.weapons.length < 2) player.weapons.push(p.weapon);
            saveSave();
          }
          spawnGearBurst(p.x, p.y);
          break;
      }
    }
  }
  
  // Checkpoints
  for (const cp of checkpoints) {
    if (!cp.activated && Math.abs(player.x - cp.x) < 30 && Math.abs(player.y - cp.y) < 40) {
      cp.activated = true;
      lastCheckpoint = { x: cp.x, y: cp.y - 10 };
      spawnSparks(cp.x, cp.y, 6, C.green);
      save.currency = player.scrap;
      saveSave();
    }
  }
  
  // Hazards
  for (const h of hazards) {
    h.timer++;
    if (h.type === 'steam' && Math.sin(h.timer * 0.05) > 0.5) {
      if (rectOverlap(player, h) && player.invincible <= 0) {
        player.vy = -8;
        spawnSteam(h.x + h.w/2, h.y);
      }
    }
    if (h.type === 'electric' && Math.sin(h.timer * 0.08) > 0) {
      if (rectOverlap(player, h) && player.invincible <= 0) {
        playerHit(2);
      }
    }
  }
  
  // Check level complete
  if (levelData.isBoss) {
    if (bossHP <= 0 && enemies.filter(e => e.isBoss).length === 0) {
      levelComplete();
    }
  } else {
    if (player.x > levelWidth - TILE * 3) {
      levelComplete();
    }
  }
  
  // Camera
  camera.targetX = player.x - W/2 + player.dir * 40;
  camera.targetY = player.y - H/2 + 20;
  camera.x += (camera.targetX - camera.x) * 0.08;
  camera.y += (camera.targetY - camera.y) * 0.08;
  camera.x = Math.max(0, Math.min(levelWidth - W, camera.x));
  camera.y = Math.max(0, Math.min(levelHeight - H, camera.y));
  
  // Screen shake
  if (hud.shake > 0) {
    hud.shake--;
    hud.shakeX = (Math.random()-0.5) * hud.shake * 0.5;
    hud.shakeY = (Math.random()-0.5) * hud.shake * 0.5;
  } else {
    hud.shakeX = 0; hud.shakeY = 0;
  }
  if (hud.flash > 0) hud.flash--;
}

function updateBoss(e) {
  e.attackTimer++;
  const dirToPlayer = player.x > e.x ? 1 : -1;
  
  const hpPct = e.hp / e.maxHP;
  if (hpPct < 0.3) e.phase = 2;
  else if (hpPct < 0.6) e.phase = 1;
  
  const fireRate = Math.max(20, 60 - e.phase * 15);
  
  e.vy += GRAVITY;
  e.vx += dirToPlayer * 0.05 * (1 + e.phase * 0.3);
  e.vx *= 0.98;
  
  if (e.attackTimer % fireRate === 0) {
    const bulletCount = 1 + e.phase;
    for (let i = 0; i < bulletCount; i++) {
      const spread = (i - (bulletCount-1)/2) * 0.3;
      const spd = 3 + e.phase;
      bullets.push({
        x: e.x + e.w/2, y: e.y + e.h/2,
        vx: dirToPlayer * spd * Math.cos(spread),
        vy: -1 + Math.sin(spread) * spd,
        w: 6 + e.phase*2, h: 6 + e.phase*2,
        damage: 5 + e.phase * 3,
        color: e.behavior === 'boss_furnace' ? C.orange : (e.behavior === 'boss_clock' ? C.brass : (e.behavior === 'boss_hydra' ? C.copper : C.red)),
        life: 120,
        isPlayerBullet: false,
        gravity: 0,
      });
    }
    if (settings.screenShake) hud.shake = 5;
  }
  
  bossHP = e.hp;
}

function playerHit(damage) {
  if (player.invincible > 0 || player.dead) return;
  const armor = save.armorLevel || 0;
  const actualDamage = Math.max(1, damage - armor);
  player.hp -= actualDamage;
  player.flash = 10;
  player.invincible = 30;
  hud.flash = 5;
  hud.flashColor = C.red;
  if (settings.screenShake) hud.shake = 8;
  spawnSparks(player.x + player.w/2, player.y + player.h/2, 5, C.red);
  
  if (player.hp <= 0) {
    playerDie();
  }
}

function playerDie() {
  player.dead = true;
  deathAnim = 0;
  spawnGearBurst(player.x + player.w/2, player.y + player.h/2);
  for (let i = 0; i < 10; i++) {
    spawnSparks(player.x + player.w/2, player.y + player.h/2, 3, C.red);
  }
}

function respawnPlayer() {
  if (lastCheckpoint) {
    player.x = lastCheckpoint.x;
    player.y = lastCheckpoint.y;
  } else {
    player.x = TILE * 2.5;
    player.y = levelHeight - TILE * 3;
  }
  player.vx = 0;
  player.vy = 0;
  player.hp = player.maxHP;
  player.energy = player.maxEnergy;
  player.dead = false;
  player.invincible = 60;
  deathAnim = 0;
}

function levelComplete() {
  let stars = 1;
  if (levelGears.every(g => g)) stars = 2;
  const parTime = (60 + currentLevel * 40) * 60;
  if (levelTimer < parTime && levelGears.every(g => g)) stars = 3;
  
  const existing = save.stars[currentLevel] || 0;
  save.stars[currentLevel] = Math.max(existing, stars);
  
  if (currentLevel < 20 && !save.unlockedLevels.includes(currentLevel + 1)) {
    save.unlockedLevels.push(currentLevel + 1);
  }
  save.currency = player.scrap;
  save.currentLevel = Math.min(20, currentLevel + 1);
  saveSave();
  
  gameState = 'levelcomplete';
}

// ---- DRAWING - GAME ----
function drawGame() {
  const cx = camera.x + hud.shakeX;
  const cy = camera.y + hud.shakeY;
  
  drawLevelBackground(cx, cy);
  
  // Platforms - improved tiles
  for (const p of platforms) {
    if (p.x + p.w < cx || p.x > cx + W || p.y + p.h < cy || p.y > cy + H) continue;
    const sx = p.x - cx, sy = p.y - cy;
    
    drawTile(sx, sy, p);
  }
  
  // Hazards
  for (const h of hazards) {
    const sx = h.x - cx, sy = h.y - cy;
    if (h.type === 'steam') {
      const active = Math.sin(h.timer * 0.05) > 0.5;
      ctx.fillStyle = active ? C.steam + '88' : C.steel + '44';
      ctx.fillRect(sx, sy, h.w, h.h);
      // Steam vent base
      ctx.fillStyle = '#4a4a5a';
      ctx.fillRect(sx + 4, sy + h.h - 4, h.w - 8, 4);
      if (active && frameCount % 5 === 0) spawnSteam(h.x + h.w/2, h.y);
      // Warning glow
      if (active) {
        ctx.globalAlpha = 0.3;
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(sx, sy - 20, h.w, 20);
        ctx.globalAlpha = 1;
      }
    }
    if (h.type === 'electric') {
      const active = Math.sin(h.timer * 0.08) > 0;
      ctx.fillStyle = active ? '#1a1a3a' : C.steel + '44';
      ctx.fillRect(sx, sy, h.w, h.h);
      // Coils
      ctx.fillStyle = '#555';
      ctx.fillRect(sx + 2, sy, 4, h.h);
      ctx.fillRect(sx + h.w - 6, sy, 4, h.h);
      if (active) {
        ctx.strokeStyle = C.cyan;
        ctx.lineWidth = 2;
        ctx.beginPath();
        for (let lx = sx; lx < sx + h.w; lx += 4) {
          ctx.lineTo(lx, sy + (Math.random()-0.5)*h.h);
        }
        ctx.stroke();
        // Glow
        ctx.globalAlpha = 0.2;
        ctx.fillStyle = C.cyan;
        ctx.fillRect(sx - 4, sy - 4, h.w + 8, h.h + 8);
        ctx.globalAlpha = 1;
      }
    }
  }
  
  // Checkpoints - improved
  for (const cp of checkpoints) {
    const sx = cp.x - cx, sy = cp.y - cy;
    // Base
    ctx.fillStyle = '#3a3a4a';
    ctx.fillRect(sx - 10, sy - 4, 20, 24);
    // Post
    ctx.fillStyle = cp.activated ? '#4a6a4a' : '#4a4a5a';
    ctx.fillRect(sx - 6, sy - 20, 12, 30);
    // Screen
    ctx.fillStyle = cp.activated ? '#1a3a1a' : '#1a1a2a';
    ctx.fillRect(sx - 4, sy - 16, 8, 10);
    // Light
    ctx.fillStyle = cp.activated ? C.green : C.red;
    ctx.beginPath(); ctx.arc(sx, sy - 24, 4, 0, Math.PI*2); ctx.fill();
    if (cp.activated) {
      ctx.globalAlpha = 0.3 + Math.sin(frameCount*0.1)*0.2;
      ctx.fillStyle = C.green;
      ctx.beginPath(); ctx.arc(sx, sy - 24, 8, 0, Math.PI*2); ctx.fill();
      ctx.globalAlpha = 1;
      // Checkmark
      ctx.strokeStyle = C.green;
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(sx - 2, sy - 12);
      ctx.lineTo(sx, sy - 9);
      ctx.lineTo(sx + 3, sy - 14);
      ctx.stroke();
    }
  }
  
  // Pickups - improved
  for (const p of pickups) {
    if (p.collected) continue;
    const sx = p.x - cx, sy = p.y - cy + Math.sin(frameCount*0.06 + p.x)*3;
    
    switch(p.type) {
      case 'scrap':
        drawMiniGear(sx + 8, sy + 8, 6, frameCount*0.03 + p.x, C.brass);
        // Shine
        ctx.fillStyle = '#ffffff22';
        ctx.fillRect(sx + 6, sy + 4, 2, 2);
        break;
      case 'health':
        // Health pack
        ctx.fillStyle = '#2a4a2a';
        ctx.fillRect(sx + 1, sy + 1, 14, 14);
        ctx.fillStyle = C.green;
        ctx.fillRect(sx+4, sy+2, 8, 12);
        ctx.fillRect(sx+2, sy+4, 12, 8);
        ctx.fillStyle = '#80ff80';
        ctx.fillRect(sx + 6, sy + 5, 4, 6);
        ctx.fillRect(sx + 4, sy + 7, 8, 2);
        break;
      case 'energy':
        // Lightning bolt
        ctx.fillStyle = '#1a2a3a';
        ctx.fillRect(sx + 1, sy + 1, 14, 14);
        ctx.fillStyle = C.cyan;
        ctx.beginPath();
        ctx.moveTo(sx+10, sy); ctx.lineTo(sx+6, sy+7); ctx.lineTo(sx+10, sy+7);
        ctx.lineTo(sx+6, sy+14);
        ctx.fill();
        ctx.fillStyle = '#aaffff';
        ctx.fillRect(sx + 7, sy + 6, 3, 3);
        break;
      case 'golden_gear':
        ctx.globalAlpha = 0.3;
        ctx.fillStyle = C.gold;
        ctx.beginPath(); ctx.arc(sx+10, sy+10, 14, 0, Math.PI*2); ctx.fill();
        ctx.globalAlpha = 1;
        drawMiniGear(sx+10, sy+10, 10, frameCount*0.04, C.gold);
        // Star sparkle
        ctx.fillStyle = '#ffffff';
        const sparkle = Math.sin(frameCount * 0.15) > 0.5;
        if (sparkle) ctx.fillRect(sx + 8, sy + 2, 2, 2);
        break;
      case 'weapon_crate':
        ctx.fillStyle = '#4a3a2a';
        ctx.fillRect(sx, sy, 24, 24);
        ctx.fillStyle = C.copper;
        ctx.fillRect(sx + 2, sy + 2, 20, 20);
        ctx.strokeStyle = C.brass;
        ctx.lineWidth = 2;
        ctx.strokeRect(sx, sy, 24, 24);
        // W icon
        ctx.fillStyle = '#2a2a2a';
        ctx.fillRect(sx + 4, sy + 4, 16, 16);
        drawMiniGear(sx + 12, sy + 12, 6, frameCount * 0.05, C.gold);
        break;
    }
  }
  
  // Enemies - using new sprite system
  for (const e of enemies) {
    if (e.underground) continue;
    const sx = e.x - cx, sy = e.y - cy;
    if (sx + e.w < -20 || sx > W + 20 || sy + e.h < -20 || sy > H + 20) continue;
    
    if (e.flash > 0) ctx.globalAlpha = frameCount % 2 === 0 ? 0.5 : 1;
    
    drawEnemySprite(e, sx, sy);
    
    // Health bar for non-boss enemies with damage
    if (!e.isBoss && e.hp < e.maxHP && e.hp > 0) {
      const barW = e.w;
      ctx.fillStyle = '#33333388';
      ctx.fillRect(sx, sy - 6, barW, 3);
      ctx.fillStyle = e.hp / e.maxHP > 0.5 ? C.green : (e.hp / e.maxHP > 0.25 ? C.gold : C.red);
      ctx.fillRect(sx, sy - 6, barW * (e.hp / e.maxHP), 3);
    }
    
    // Boss HP bar
    if (e.isBoss) {
      const barW = e.w + 20;
      ctx.fillStyle = '#333';
      ctx.fillRect(sx - 10, sy - 12, barW, 6);
      ctx.fillStyle = C.red;
      ctx.fillRect(sx - 10, sy - 12, barW * (e.hp/e.maxHP), 6);
    }
    
    ctx.globalAlpha = 1;
  }
  
  // Bullets - improved
  for (const b of bullets) {
    ctx.globalAlpha = Math.min(1, b.life / 30);
    // Trail
    ctx.fillStyle = b.color + '33';
    ctx.fillRect(b.x - cx - b.vx * 2, b.y - cy - b.vy * 2, b.w * 1.5, b.h * 0.8);
    // Main bullet
    ctx.fillStyle = b.color;
    ctx.fillRect(b.x - cx, b.y - cy, b.w, b.h);
    // Bright core
    ctx.fillStyle = '#ffffff88';
    ctx.fillRect(b.x - cx + 1, b.y - cy + 1, Math.max(1, b.w - 2), Math.max(1, b.h - 2));
    ctx.globalAlpha = 1;
  }
  
  // Player - using new sprite system
  if (player && !player.dead) {
    const sx = player.x - cx, sy = player.y - cy;
    
    if (player.invincible > 0 && frameCount % 4 < 2) ctx.globalAlpha = 0.5;
    if (player.flash > 0) ctx.globalAlpha = frameCount % 2 === 0 ? 0.4 : 1;
    
    drawPlayerSprite(sx, sy, player.dir, player.anim, player.animFrame, player.flash);
    
    if (player.wallSlide && frameCount % 4 === 0) {
      spawnSparks(player.x + (player.wallDir > 0 ? player.w : 0), player.y + player.h/2, 2, C.brass);
    }
    
    ctx.globalAlpha = 1;
  }
  
  // Particles
  drawParticles(cx, cy);
  
  // Level exit indicator - improved
  if (!levelData.isBoss) {
    const exitX = levelWidth - TILE*2 - cx;
    const exitY = levelHeight - TILE*4 - cy;
    const pulse = Math.sin(frameCount*0.08);
    // Glow
    ctx.globalAlpha = 0.2 + pulse * 0.1;
    ctx.fillStyle = C.green;
    ctx.fillRect(exitX - 4, exitY - 4, TILE + 8, TILE*3 + 8);
    ctx.globalAlpha = 1;
    // Door frame
    ctx.fillStyle = '#2a4a2a';
    ctx.fillRect(exitX - 2, exitY - 2, TILE + 4, TILE*3 + 4);
    ctx.fillStyle = C.green + (pulse > 0 ? 'cc' : '66');
    ctx.fillRect(exitX, exitY, TILE, TILE*3);
    // Arrow
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 14px monospace';
    ctx.textAlign = 'center';
    const arrowBob = Math.sin(frameCount * 0.12) * 3;
    ctx.fillText('▶', exitX + TILE/2 + arrowBob, exitY + TILE * 1.5);
    // Label
    drawMonoText('EXIT', exitX+TILE/2, exitY - 8, 10, C.green);
    
    // Direction arrow from player to exit (if off-screen)
    if (player && !player.dead) {
      const exitWorldX = levelWidth - TILE*2;
      const exitScreenX = exitWorldX - cx;
      if (exitScreenX > W) {
        const arrowX = W - 30;
        const arrowY = H / 2;
        ctx.fillStyle = C.green;
        ctx.globalAlpha = 0.6 + pulse * 0.2;
        ctx.beginPath();
        ctx.moveTo(arrowX + 15, arrowY);
        ctx.lineTo(arrowX, arrowY - 10);
        ctx.lineTo(arrowX, arrowY + 10);
        ctx.fill();
        drawMonoText('EXIT →', arrowX - 20, arrowY, 8, C.green);
        ctx.globalAlpha = 1;
      }
    }
  } else {
    // Boss level - show boss direction arrow if off screen
    const bossEnemy = enemies.find(e => e.isBoss);
    if (bossEnemy && player && !player.dead) {
      const bossScreenX = bossEnemy.x - cx;
      if (bossScreenX > W) {
        const arrowX = W - 30;
        const arrowY = H / 2;
        ctx.fillStyle = C.red;
        ctx.globalAlpha = 0.6;
        ctx.beginPath();
        ctx.moveTo(arrowX + 15, arrowY);
        ctx.lineTo(arrowX, arrowY - 10);
        ctx.lineTo(arrowX, arrowY + 10);
        ctx.fill();
        drawMonoText('BOSS →', arrowX - 20, arrowY, 8, C.red);
        ctx.globalAlpha = 1;
      } else if (bossScreenX + bossEnemy.w < 0) {
        const arrowX = 30;
        const arrowY = H / 2;
        ctx.fillStyle = C.red;
        ctx.globalAlpha = 0.6;
        ctx.beginPath();
        ctx.moveTo(arrowX - 15, arrowY);
        ctx.lineTo(arrowX, arrowY - 10);
        ctx.lineTo(arrowX, arrowY + 10);
        ctx.fill();
        drawMonoText('← BOSS', arrowX + 20, arrowY, 8, C.red);
        ctx.globalAlpha = 1;
      }
    }
  }
  
  // HUD
  drawHUD();
  
  // Tutorial overlay
  if (tutorialOverlay > 0 && player && !player.dead) {
    drawTutorialOverlay();
  }
  
  // Flash overlay
  if (hud.flash > 0) {
    ctx.globalAlpha = hud.flash * 0.05;
    ctx.fillStyle = hud.flashColor || C.red;
    ctx.fillRect(0, 0, W, H);
    ctx.globalAlpha = 1;
  }
}

// ---- IMPROVED TILE DRAWING ----
function drawTile(sx, sy, p) {
  const world = levelData ? levelData.world : 1;
  
  if (p.type === 'conveyor') {
    // Conveyor belt
    ctx.fillStyle = '#3a3a3a';
    ctx.fillRect(sx, sy, p.w, p.h);
    ctx.fillStyle = '#4a4a4a';
    ctx.fillRect(sx + 1, sy + 1, p.w - 2, p.h - 2);
    // Rolling lines
    ctx.strokeStyle = '#5a5a5a';
    ctx.lineWidth = 1;
    for (let lx = (frameCount * p.dir * 0.5) % 10; lx < p.w; lx += 10) {
      ctx.beginPath(); ctx.moveTo(sx+lx, sy); ctx.lineTo(sx+lx+5*p.dir, sy+p.h); ctx.stroke();
    }
    // Arrow indicators
    ctx.fillStyle = C.gold + '88';
    const arrowOff = (frameCount * p.dir * 0.5) % 20;
    for (let ax = arrowOff; ax < p.w; ax += 20) {
      drawMonoText(p.dir > 0 ? '▶' : '◀', sx + ax, sy + p.h/2, 8, C.gold + '66');
    }
    // Edge bolts
    ctx.fillStyle = '#666';
    ctx.fillRect(sx, sy, p.w, 2);
    ctx.fillRect(sx, sy + p.h - 2, p.w, 2);
    return;
  }
  
  if (p.type === 'steam_vent') {
    ctx.fillStyle = '#5a4a3a';
    ctx.fillRect(sx, sy, p.w, p.h);
    ctx.fillStyle = '#6a5a4a';
    ctx.fillRect(sx + 2, sy + 2, p.w - 4, p.h - 4);
    // Vent slits
    ctx.fillStyle = '#3a2a1a';
    for (let vx = 4; vx < p.w - 4; vx += 8) {
      ctx.fillRect(sx + vx, sy + p.h/2 - 1, 5, 3);
    }
    return;
  }
  
  if (p.type === 'electric') {
    const active = frameCount % 10 < 5;
    ctx.fillStyle = active ? '#2a2a4a' : '#2a2a3a';
    ctx.fillRect(sx, sy, p.w, p.h);
    ctx.fillStyle = '#3a3a5a';
    ctx.fillRect(sx + 1, sy + 1, p.w - 2, p.h - 2);
    // Circuit pattern
    ctx.strokeStyle = active ? C.cyan + '88' : '#3a3a4a';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(sx + 4, sy + p.h/2);
    ctx.lineTo(sx + p.w/3, sy + p.h/2);
    ctx.lineTo(sx + p.w/3 + 4, sy + 4);
    ctx.lineTo(sx + p.w * 2/3, sy + 4);
    ctx.lineTo(sx + p.w * 2/3 + 4, sy + p.h/2);
    ctx.lineTo(sx + p.w - 4, sy + p.h/2);
    ctx.stroke();
    return;
  }
  
  // Solid platform - world-themed
  let baseColor, topColor, detailColor;
  switch(world) {
    case 1: baseColor = '#2a2a32'; topColor = '#3a3a42'; detailColor = '#4a4a52'; break;
    case 2: baseColor = '#32281e'; topColor = '#42382e'; detailColor = '#5a4a3a'; break;
    case 3: baseColor = '#1a1a2a'; topColor = '#2a2a3a'; detailColor = '#3a3a5a'; break;
    case 4: baseColor = '#2a1a1a'; topColor = '#3a2a2a'; detailColor = '#5a3a3a'; break;
    default: baseColor = '#2a2a32'; topColor = '#3a3a42'; detailColor = '#4a4a52';
  }
  
  ctx.fillStyle = baseColor;
  ctx.fillRect(sx, sy, p.w, p.h);
  // Top highlight
  ctx.fillStyle = topColor;
  ctx.fillRect(sx, sy, p.w, 3);
  // Bottom shadow
  ctx.fillStyle = '#00000033';
  ctx.fillRect(sx, sy + p.h - 2, p.w, 2);
  
  // Tile pattern (bricks/plates)
  ctx.strokeStyle = '#00000022';
  ctx.lineWidth = 1;
  const tileSize = TILE;
  for (let tx = 0; tx < p.w; tx += tileSize) {
    ctx.beginPath(); ctx.moveTo(sx + tx, sy); ctx.lineTo(sx + tx, sy + p.h); ctx.stroke();
  }
  ctx.beginPath(); ctx.moveTo(sx, sy + p.h/2); ctx.lineTo(sx + p.w, sy + p.h/2); ctx.stroke();
  
  // Rivets on larger platforms
  if (p.w >= TILE * 2) {
    ctx.fillStyle = detailColor;
    ctx.beginPath(); ctx.arc(sx+6, sy+6, 2, 0, Math.PI*2); ctx.fill();
    ctx.beginPath(); ctx.arc(sx+p.w-6, sy+6, 2, 0, Math.PI*2); ctx.fill();
    if (p.w >= TILE * 3) {
      ctx.beginPath(); ctx.arc(sx+p.w/2, sy+6, 2, 0, Math.PI*2); ctx.fill();
    }
  }
}

// ---- TUTORIAL OVERLAY ----
function drawTutorialOverlay() {
  const small = W < 500;
  const alpha = Math.min(1, tutorialOverlay / 30) * Math.min(1, (300 - tutorialOverlay) / 30);
  ctx.globalAlpha = alpha * 0.85;
  
  // Objective banner at top
  const bannerH = small ? 36 : 44;
  ctx.fillStyle = '#000000cc';
  ctx.fillRect(0, 40, W, bannerH);
  ctx.globalAlpha = alpha;
  
  if (levelData.isBoss) {
    drawText('DEFEAT THE BOSS!', W/2, 40 + bannerH/2, small ? 14 : 18, C.red);
  } else {
    drawText('REACH THE EXIT →', W/2, 40 + bannerH/2, small ? 14 : 18, C.green);
  }
  
  // Control hints at bottom
  if (tutorialOverlay > 100) {
    ctx.globalAlpha = alpha * 0.7;
    const hintY = H - (isMobile ? 140 : 50);
    ctx.fillStyle = '#000000aa';
    ctx.fillRect(0, hintY, W, 40);
    ctx.globalAlpha = alpha;
    if (isMobile) {
      drawMonoText('D-PAD: Move | JUMP: Jump | FIRE: Shoot', W/2, hintY + 14, small ? 8 : 10, C.steam);
      drawMonoText('Collect gears & defeat enemies!', W/2, hintY + 28, small ? 8 : 10, C.brass);
    } else {
      drawMonoText('← → Move | ↑/Space Jump | Z Shoot | X Swap Weapon', W/2, hintY + 14, small ? 8 : 10, C.steam);
      drawMonoText('Collect gears, defeat enemies, reach the EXIT!', W/2, hintY + 28, small ? 8 : 10, C.brass);
    }
  }
  
  ctx.globalAlpha = 1;
}

function drawLevelBackground(cx, cy) {
  const world = levelData.world;
  let bgColor1, bgColor2;
  
  switch(world) {
    case 1: bgColor1 = '#1a1a20'; bgColor2 = '#222228'; break;
    case 2: bgColor1 = '#201a14'; bgColor2 = '#28201a'; break;
    case 3: bgColor1 = '#0a0a18'; bgColor2 = '#141420'; break;
    case 4: bgColor1 = '#1a0a0a'; bgColor2 = '#201410'; break;
    default: bgColor1 = '#1a1a20'; bgColor2 = '#222228';
  }
  
  const grad = ctx.createLinearGradient(0, 0, 0, H);
  grad.addColorStop(0, bgColor1);
  grad.addColorStop(1, bgColor2);
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, W, H);
  
  // Background gears (parallax)
  ctx.globalAlpha = 0.06;
  for (let i = 0; i < 5; i++) {
    const gx = (i * 200 - cx * 0.2) % (W + 200) - 100;
    const gy = 50 + i * 80 - cy * 0.1;
    drawGear(gx, gy, 25 + i*8, 8, frameCount * 0.005 * (i%2 === 0 ? 1 : -1), world >= 3 ? C.cyan : C.copper);
  }
  ctx.globalAlpha = 1;
  
  // Background pipes (parallax)
  ctx.strokeStyle = (world >= 3 ? C.cyan : C.copper) + '15';
  ctx.lineWidth = 4;
  for (let i = 0; i < 3; i++) {
    const py = 100 + i * 120 - cy*0.15;
    ctx.beginPath();
    ctx.moveTo(0, py);
    ctx.lineTo(W, py);
    ctx.stroke();
    // Pipe joints
    ctx.fillStyle = (world >= 3 ? C.cyan : C.copper) + '12';
    for (let jx = 0; jx < W; jx += 150) {
      ctx.fillRect(jx - cx * 0.1 % 150, py - 4, 8, 12);
    }
  }
  
  // Background factory silhouettes (deep parallax)
  ctx.fillStyle = bgColor1;
  const bgOffset = -cx * 0.05;
  ctx.fillRect(bgOffset + 50, H * 0.3, 40, H * 0.7);
  ctx.fillRect(bgOffset + 200, H * 0.4, 60, H * 0.6);
  ctx.fillRect(bgOffset + 400, H * 0.35, 30, H * 0.65);
  ctx.fillRect(bgOffset + 600, H * 0.45, 50, H * 0.55);
  
  // World-specific background elements
  if (world === 2) {
    // Steam clouds
    ctx.globalAlpha = 0.05;
    ctx.fillStyle = '#ffffff';
    for (let i = 0; i < 3; i++) {
      const cloudX = (i * 300 - cx * 0.08 + frameCount * 0.1) % (W + 200) - 100;
      ctx.beginPath();
      ctx.arc(cloudX, 80 + i * 60, 30 + i * 10, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
  } else if (world === 3) {
    // Electric arcs in background
    if (frameCount % 90 < 3) {
      ctx.strokeStyle = C.cyan + '22';
      ctx.lineWidth = 1;
      ctx.beginPath();
      const arcX = Math.random() * W;
      ctx.moveTo(arcX, 0);
      for (let y = 0; y < H; y += 20) {
        ctx.lineTo(arcX + (Math.random() - 0.5) * 40, y);
      }
      ctx.stroke();
    }
  } else if (world === 4) {
    // Lava glow from bottom
    ctx.globalAlpha = 0.08 + Math.sin(frameCount * 0.02) * 0.03;
    const lavaGrad = ctx.createLinearGradient(0, H * 0.7, 0, H);
    lavaGrad.addColorStop(0, 'transparent');
    lavaGrad.addColorStop(1, C.orange);
    ctx.fillStyle = lavaGrad;
    ctx.fillRect(0, H * 0.7, W, H * 0.3);
    ctx.globalAlpha = 1;
  }
}

function drawHUD() {
  const small = W < 500;
  const hudScale = small ? 0.8 : 1;
  
  // Health
  const hpPct = player ? player.hp / player.maxHP : 1;
  const hpW = Math.round(150 * hudScale);
  drawRivetPanel(6, 6, hpW, Math.round(26 * hudScale), C.panel + 'dd');
  const barX = Math.round(40 * hudScale);
  const barW = hpW - barX - 6;
  const barH = Math.round(14 * hudScale);
  const barY = Math.round(12 * hudScale);
  drawMonoText('PSI', Math.round(24 * hudScale), Math.round(19 * hudScale), Math.round(9 * hudScale), C.copper, 'left');
  ctx.fillStyle = '#1a1a1e';
  ctx.fillRect(barX + 6, barY, barW, barH);
  const hpColor = hpPct > 0.5 ? C.green : (hpPct > 0.25 ? C.brass : C.red);
  ctx.fillStyle = hpColor;
  ctx.fillRect(barX + 6, barY, barW * hpPct, barH);
  drawMonoText(Math.ceil(player ? player.hp : 100), barX + 6 + barW/2, barY + barH/2, Math.round(10 * hudScale), C.steam);
  
  // Energy bar
  const epPct = player ? player.energy / player.maxEnergy : 1;
  const epY = Math.round(34 * hudScale);
  drawRivetPanel(6, epY, hpW, Math.round(18 * hudScale), C.panel + 'dd');
  ctx.fillStyle = '#1a1a1e';
  ctx.fillRect(12, epY + 4, hpW - 18, Math.round(10 * hudScale));
  ctx.fillStyle = C.cyan + 'cc';
  ctx.fillRect(12, epY + 4, (hpW - 18) * epPct, Math.round(10 * hudScale));
  drawMonoText('⚡' + Math.ceil(player ? player.energy : 100), 12 + (hpW-18)/2, epY + 4 + Math.round(5 * hudScale), Math.round(8 * hudScale), C.steam);
  
  // Currency (top-right)
  const currW = Math.round(100 * hudScale);
  drawRivetPanel(W - currW - 6, 6, currW, Math.round(26 * hudScale), C.panel + 'dd');
  drawMiniGear(W - currW + 4, Math.round(19 * hudScale), 6, frameCount*0.03, C.brass);
  drawMonoText((player ? player.scrap : 0), W - currW/2 + 6, Math.round(19 * hudScale), Math.round(13 * hudScale), C.gold);
  
  // Level indicator
  drawMonoText('LV ' + currentLevel, W - currW/2 + 6, Math.round(42 * hudScale), Math.round(10 * hudScale), C.copper);
  
  // Weapon
  if (player && player.weapons.length > 0) {
    const wpnKey = player.weapons[player.currentWeapon] || 'rivet_gun';
    const wpn = WEAPONS[wpnKey];
    const wpnW = Math.round(110 * hudScale);
    drawRivetPanel(W/2 - wpnW/2, 4, wpnW, Math.round(22 * hudScale), C.panel + 'cc');
    drawMonoText(wpn.name, W/2, Math.round(15 * hudScale), Math.round(10 * hudScale), C.brass);
  }
  
  // Golden gears collected
  for (let i = 0; i < 3; i++) {
    const gx = W/2 - 28 + i * 20;
    const gy = Math.round(34 * hudScale);
    ctx.globalAlpha = levelGears[i] ? 1 : 0.25;
    drawMiniGear(gx, gy, 6, levelGears[i] ? frameCount*0.04 : 0, C.gold);
  }
  ctx.globalAlpha = 1;
  
  // Objective reminder (subtle, top center below weapon)
  if (levelTimer > 120 && levelTimer < 300) {
    const objAlpha = Math.min(1, (levelTimer - 120) / 30) * Math.min(1, (300 - levelTimer) / 30);
    ctx.globalAlpha = objAlpha * 0.7;
    const objText = levelData && levelData.isBoss ? 'Defeat the Boss!' : 'Reach the EXIT →';
    drawMonoText(objText, W/2, Math.round(50 * hudScale), Math.round(9 * hudScale), levelData && levelData.isBoss ? C.red : C.green);
    ctx.globalAlpha = 1;
  }
  
  // Boss HP bar
  if (levelData && levelData.isBoss && bossMaxHP > 0 && enemies.some(e => e.isBoss)) {
    const bw = W * 0.5;
    const bx = W/2 - bw/2;
    const by = H - Math.round(36 * hudScale);
    drawRivetPanel(bx-4, by, bw+8, Math.round(22 * hudScale), C.panel + 'dd');
    ctx.fillStyle = '#1a1a1e';
    ctx.fillRect(bx, by+4, bw, Math.round(14 * hudScale));
    ctx.fillStyle = C.red;
    ctx.fillRect(bx, by+4, bw * (bossHP/bossMaxHP), Math.round(14 * hudScale));
    drawMonoText('BOSS', W/2, by + Math.round(11 * hudScale), Math.round(9 * hudScale), C.gold);
  }
  
  // Pause button (mobile)
  if (isMobile) {
    const pbSize = 36;
    const pbX = W - pbSize - 6;
    const pbY = Math.round(56 * hudScale);
    ctx.fillStyle = C.panel + 'aa';
    ctx.fillRect(pbX, pbY, pbSize, Math.round(26 * hudScale));
    ctx.strokeStyle = C.copper;
    ctx.lineWidth = 1;
    ctx.strokeRect(pbX, pbY, pbSize, Math.round(26 * hudScale));
    drawMonoText('II', pbX + pbSize/2, pbY + Math.round(13 * hudScale), 12, C.steam);
  }
}

// ---- MENU SCREENS ----
function drawMenu() {
  drawMenuBackground();
  drawParticles(0, 0);
  updateParticles();
  updateTitle();
  drawTitle();
  
  const small = W < 500;
  const btnW = small ? 170 : 200;
  const btnH = small ? 38 : 44;
  const gap = small ? 46 : 54;
  const startY = small ? H * 0.30 : H * 0.35;
  const cx = W/2 - btnW/2;
  
  const buttons = [
    { label: 'START GAME', action: 'start' },
    { label: 'CONTROLS', action: 'controls' },
    { label: 'UPGRADES', action: 'upgrades' },
    { label: 'LEVEL SELECT', action: 'levelselect' },
    { label: 'SETTINGS', action: 'settings' },
  ];
  
  // Show buttons much sooner
  const alpha = Math.min(1, (menuAnim - 40) / 20);
  if (alpha <= 0) { return; }
  ctx.globalAlpha = alpha;
  
  for (let i = 0; i < buttons.length; i++) {
    const by = startY + i * gap;
    if (by + btnH > H - 20) break;
    const hov = isHovered(cx, by, btnW, btnH);
    drawButton(cx, by, btnW, btnH, buttons[i].label, hov);
    if (hov && mouseClicked) {
      const act = buttons[i].action;
      if (act === 'start') {
        // Show intro if not seen before
        if (!save.introSeen && !introShown) {
          gameState = 'intro';
          introStep = 0;
          introTimer = 0;
        } else {
          currentLevel = save.currentLevel || 1;
          startLevel(currentLevel);
        }
      } else {
        gameState = act;
      }
    }
  }
  
  ctx.globalAlpha = 1;
  
  // Credits
  const creditsSize = small ? 7 : 9;
  const creditsY = H - 22;
  drawMonoText('🍓 Fully made by AI (Berry)', W/2, creditsY, creditsSize, C.purple + 'cc');
  drawMonoText('Remix on Berrry', W/2, creditsY + 12, creditsSize, C.copper + '88');
}

function drawControlsScreen() {
  ctx.fillStyle = C.dark;
  ctx.fillRect(0, 0, W, H);
  
  const small = W < 500;
  
  drawRivetPanel(W/2 - (small ? 100 : 150), 8, small ? 200 : 300, 34, C.panel);
  drawText('CONTROLS', W/2, 25, small ? 16 : 22, C.gold);
  
  // Blueprint background
  ctx.fillStyle = '#1a2a3a';
  ctx.fillRect(20, 50, W-40, H-100);
  ctx.strokeStyle = '#2a4a5a';
  ctx.lineWidth = 1;
  for (let x = 20; x < W-20; x += 20) {
    ctx.beginPath(); ctx.moveTo(x, 50); ctx.lineTo(x, H-50); ctx.stroke();
  }
  for (let y = 50; y < H-50; y += 20) {
    ctx.beginPath(); ctx.moveTo(20, y); ctx.lineTo(W-20, y); ctx.stroke();
  }
  
  const kb = settings.keyBindings;
  const bindings = [
    { label: 'Move Left', key: 'left' },
    { label: 'Move Right', key: 'right' },
    { label: 'Jump', key: 'jump' },
    { label: 'Shoot', key: 'shoot' },
    { label: 'Swap Weapon', key: 'swap' },
  ];
  
  const fontSize = small ? 10 : 13;
  const rowH = small ? 30 : 36;
  const startY2 = 62;
  const labelX = small ? 40 : 80;
  const keyBtnX = small ? W/2 - 10 : W/2 + 20;
  const keyBtnW = small ? 90 : 120;
  
  for (let i = 0; i < bindings.length; i++) {
    const by = startY2 + i * rowH;
    drawMonoText(bindings[i].label, labelX, by + 14, fontSize, C.steam, 'left');
    
    const hov = isHovered(keyBtnX, by, keyBtnW, 26);
    ctx.fillStyle = hov ? C.panelLight : C.panel;
    ctx.fillRect(keyBtnX, by, keyBtnW, 26);
    ctx.strokeStyle = C.copper;
    ctx.lineWidth = 1;
    ctx.strokeRect(keyBtnX, by, keyBtnW, 26);
    drawMonoText(kb[bindings[i].key], keyBtnX + keyBtnW/2, by + 13, small ? 9 : 11, hov ? C.gold : C.steam);
    
    if (hov && mouseClicked) {
      const bindKey = bindings[i].key;
      const handler = (e) => {
        settings.keyBindings[bindKey] = e.code;
        saveSettings();
        document.removeEventListener('keydown', handler);
      };
      document.addEventListener('keydown', handler);
    }
  }
  
  // Mobile layout selector
  if (isMobile) {
    const mlY = startY2 + bindings.length * rowH + 10;
    drawMonoText('MOBILE LAYOUT:', labelX, mlY, fontSize, C.brass, 'left');
    const layouts = ['A', 'B', 'C'];
    for (let i = 0; i < 3; i++) {
      const lx = keyBtnX + i * 44;
      const hov = isHovered(lx, mlY - 10, 38, 26);
      const selected = settings.controlLayout === layouts[i];
      ctx.fillStyle = selected ? C.copper : (hov ? C.panelLight : C.panel);
      ctx.fillRect(lx, mlY - 10, 38, 26);
      ctx.strokeStyle = selected ? C.gold : C.copper;
      ctx.lineWidth = selected ? 2 : 1;
      ctx.strokeRect(lx, mlY - 10, 38, 26);
      drawMonoText(layouts[i], lx+19, mlY+3, 13, selected ? C.gold : C.steam);
      if (hov && mouseClicked) { settings.controlLayout = layouts[i]; saveSettings(); }
    }
  }
  
  // Back button
  const backHov = isHovered(W/2-60, H-44, 120, 32);
  drawButton(W/2-60, H-44, 120, 32, '← BACK', backHov);
  if (backHov && mouseClicked) gameState = 'menu';
}

function drawUpgradeScreen() {
  ctx.fillStyle = C.dark;
  ctx.fillRect(0, 0, W, H);
  
  const small = W < 500;
  const fs = small ? 14 : 18;
  
  drawRivetPanel(W/2 - (small ? 110 : 150), 6, small ? 220 : 300, 32, C.panel);
  drawText('UPGRADE WORKSHOP', W/2, 22, fs, C.gold);
  
  // Currency display
  drawMiniGear(W - (small ? 70 : 100), 18, 6, frameCount*0.03, C.brass);
  drawMonoText((save.currency || 0), W - (small ? 48 : 70), 18, 12, C.gold, 'left');
  
  // Workshop background
  ctx.fillStyle = '#1e1e22';
  ctx.fillRect(10, 42, W-20, H-80);
  
  const categories = [
    { name: 'WEAPONS', items: save.weapons.map(w => ({
      id: w, label: WEAPONS[w].name, level: save.weaponUpgrades[w] || 0, maxLevel: 3, cost: 20 + (save.weaponUpgrades[w]||0)*15, type: 'weapon'
    }))},
    { name: 'ARMOR', items: [{ id: 'armor', label: 'Armor +' + ((save.armorLevel||0)+1), level: save.armorLevel||0, maxLevel: 5, cost: 25 + (save.armorLevel||0)*20, type: 'armor' }]},
    { name: 'MOBILITY', items: [
      { id: 'doubleJump', label: 'Double Jump', level: save.mobilityUpgrades?.doubleJump ? 1 : 0, maxLevel: 1, cost: 40, type: 'mobility' },
      { id: 'dash', label: 'Steam Dash', level: save.mobilityUpgrades?.dash ? 1 : 0, maxLevel: 1, cost: 50, type: 'mobility' },
    ]},
    { name: 'UTILITY', items: [
      { id: 'autoRepair', label: 'Auto Repair', level: save.utilityUpgrades?.autoRepair ? 1 : 0, maxLevel: 1, cost: 30, type: 'utility' },
      { id: 'scrapMagnet', label: 'Scrap Magnet', level: save.utilityUpgrades?.scrapMagnet ? 1 : 0, maxLevel: 1, cost: 35, type: 'utility' },
    ]},
  ];
  
  const itemH = small ? 26 : 30;
  const catH = small ? 16 : 20;
  const itemFS = small ? 9 : 11;
  let yPos = 48;
  
  for (const cat of categories) {
    if (yPos + catH > H - 50) break;
    drawMonoText(cat.name, 20, yPos + 8, small ? 10 : 12, C.copper, 'left');
    yPos += catH;
    
    for (const item of cat.items) {
      if (yPos + itemH > H - 50) break;
      const ix = 20, iy = yPos;
      const iw = W - 40, ih = itemH;
      const hov = isHovered(ix, iy, iw, ih);
      const maxed = item.level >= item.maxLevel;
      const canAfford = (save.currency || 0) >= item.cost;
      
      ctx.fillStyle = hov ? '#2a2a30' : '#222226';
      ctx.fillRect(ix, iy, iw, ih);
      ctx.strokeStyle = maxed ? C.green + '66' : (canAfford ? C.copper : '#44444466');
      ctx.lineWidth = 1;
      ctx.strokeRect(ix, iy, iw, ih);
      
      drawMonoText(item.label, ix+8, iy + ih/2, itemFS, C.steam, 'left');
      
      // Level pips
      const pipX = small ? ix + iw - 90 : ix + iw - 120;
      for (let p = 0; p < item.maxLevel; p++) {
        ctx.fillStyle = p < item.level ? C.green : '#333';
        ctx.fillRect(pipX + p*14, iy + ih/2 - 4, 10, 8);
      }
      
      if (!maxed) {
        const buyX = ix + iw - 44;
        drawMiniGear(buyX, iy + ih/2, 4, 0, canAfford ? C.brass : '#555');
        drawMonoText(item.cost, buyX+12, iy + ih/2, 9, canAfford ? C.gold : '#666', 'left');
        
        if (hov && mouseClicked && canAfford) {
          save.currency -= item.cost;
          switch(item.type) {
            case 'weapon':
              save.weaponUpgrades[item.id] = (save.weaponUpgrades[item.id]||0) + 1;
              break;
            case 'armor':
              save.armorLevel = (save.armorLevel||0) + 1;
              save.maxHP = 100 + save.armorLevel * 20;
              break;
            case 'mobility':
              if (!save.mobilityUpgrades) save.mobilityUpgrades = {};
              save.mobilityUpgrades[item.id] = true;
              break;
            case 'utility':
              if (!save.utilityUpgrades) save.utilityUpgrades = {};
              save.utilityUpgrades[item.id] = true;
              break;
          }
          saveSave();
        }
      } else {
        drawMonoText('MAX', ix + iw - 30, iy + ih/2, 9, C.green);
      }
      
      yPos += itemH + 2;
    }
    yPos += 4;
  }
  
  const backHov = isHovered(W/2-60, H-40, 120, 30);
  drawButton(W/2-60, H-40, 120, 30, '← BACK', backHov);
  if (backHov && mouseClicked) gameState = 'menu';
}

function drawLevelSelect() {
  ctx.fillStyle = C.dark;
  ctx.fillRect(0, 0, W, H);
  
  const small = W < 500;
  
  drawRivetPanel(W/2 - (small ? 100 : 130), 6, small ? 200 : 260, 32, C.panel);
  drawText('LEVEL SELECT', W/2, 22, small ? 16 : 20, C.gold);
  
  const cols = small ? 4 : 5;
  const rows = Math.ceil(20 / cols);
  const cellW = small ? 55 : 70;
  const cellH = small ? 48 : 58;
  const gapY = small ? 8 : 12;
  const startX = W/2 - (cols * cellW)/2;
  const startY2 = 46;
  
  const worldNames = ['FACTORY', 'STEAM', 'ELECTRIC', 'CORE'];
  const worldColors = [C.steel, C.copper, C.cyan, C.red];
  
  for (let i = 0; i < 20; i++) {
    const worldIdx = Math.floor(i/5);
    const col = i % cols;
    const row = Math.floor(i / cols);
    const x = startX + col * cellW;
    const y = startY2 + row * (cellH + gapY);
    const num = i + 1;
    const unlocked = save.unlockedLevels.includes(num);
    const stars = save.stars[num] || 0;
    const hov = isHovered(x, y, cellW-4, cellH) && unlocked;
    const isBossLvl = (i+1) % 5 === 0;
    
    // World label on first cell of each world
    if (i % 5 === 0 && col === 0) {
      drawMonoText(worldNames[worldIdx], startX, y - 4, small ? 7 : 9, worldColors[worldIdx], 'left');
    }
    
    ctx.fillStyle = unlocked ? (hov ? '#3a3a42' : C.panel) : '#1a1a1e';
    ctx.fillRect(x, y, cellW-4, cellH);
    ctx.strokeStyle = unlocked ? (isBossLvl ? C.red : worldColors[worldIdx]) : '#333';
    ctx.lineWidth = isBossLvl ? 2 : 1;
    ctx.strokeRect(x, y, cellW-4, cellH);
    
    if (unlocked) {
      drawText(num, x+(cellW-4)/2, y + cellH*0.38, small ? 14 : 18, hov ? C.gold : C.steam);
      for (let s = 0; s < 3; s++) {
        const starSize = small ? 8 : 10;
        drawMonoText(s < stars ? '★' : '☆', x + (cellW-4)/2 - 12 + s*12, y+cellH-10, starSize, s < stars ? C.gold : '#555');
      }
      if (isBossLvl) {
        drawMonoText('BOSS', x+(cellW-4)/2, y + cellH - 10, small ? 6 : 8, C.red);
      }
    } else {
      drawMonoText('🔒', x+(cellW-4)/2, y+cellH/2, small ? 14 : 18, '#555');
    }
    
    if (hov && mouseClicked) {
      currentLevel = num;
      startLevel(num);
    }
  }
  
  const backHov = isHovered(W/2-60, H-36, 120, 30);
  drawButton(W/2-60, H-36, 120, 30, '← BACK', backHov);
  if (backHov && mouseClicked) gameState = 'menu';
}

function drawSettingsScreen() {
  ctx.fillStyle = C.dark;
  ctx.fillRect(0, 0, W, H);
  
  const small = W < 500;
  
  drawRivetPanel(W/2 - (small ? 90 : 120), 8, small ? 180 : 240, 34, C.panel);
  drawText('SETTINGS', W/2, 25, small ? 16 : 20, C.gold);
  
  let yPos = 70;
  
  // Screen shake toggle
  drawMonoText('Screen Shake', small ? W/2 - 60 : W/2 - 80, yPos, small ? 12 : 14, C.steam, 'left');
  const toggleX = W/2 + 40, toggleW = 48, toggleH = 24;
  const on = settings.screenShake;
  const hov = isHovered(toggleX, yPos-12, toggleW, toggleH);
  
  ctx.fillStyle = on ? C.green + '88' : C.panel;
  ctx.fillRect(toggleX, yPos-12, toggleW, toggleH);
  ctx.strokeStyle = C.copper;
  ctx.lineWidth = 1;
  ctx.strokeRect(toggleX, yPos-12, toggleW, toggleH);
  ctx.fillStyle = on ? C.green : '#666';
  ctx.fillRect(on ? toggleX+toggleW-22 : toggleX+2, yPos-10, 20, 20);
  
  if (hov && mouseClicked) {
    settings.screenShake = !settings.screenShake;
    saveSettings();
  }
  
  yPos += 50;
  
  // Replay intro button
  const introW = small ? 140 : 160;
  const introHov = isHovered(W/2-introW/2, yPos, introW, 34);
  ctx.fillStyle = introHov ? C.copper + 'aa' : C.panel;
  ctx.fillRect(W/2-introW/2, yPos, introW, 34);
  ctx.strokeStyle = C.copper;
  ctx.lineWidth = 1;
  ctx.strokeRect(W/2-introW/2, yPos, introW, 34);
  drawMonoText('REPLAY INTRO', W/2, yPos+17, small ? 10 : 12, introHov ? '#fff' : C.copper);
  if (introHov && mouseClicked) {
    save.introSeen = false;
    introShown = false;
    saveSave();
    gameState = 'intro';
    introStep = 0;
    introTimer = 0;
  }
  
  yPos += 50;
  
  // Reset save button
  const resetW = small ? 140 : 160;
  const resetHov = isHovered(W/2-resetW/2, yPos, resetW, 34);
  ctx.fillStyle = resetHov ? C.red + 'aa' : C.panel;
  ctx.fillRect(W/2-resetW/2, yPos, resetW, 34);
  ctx.strokeStyle = C.red;
  ctx.lineWidth = 1;
  ctx.strokeRect(W/2-resetW/2, yPos, resetW, 34);
  drawMonoText('RESET PROGRESS', W/2, yPos+17, small ? 10 : 12, resetHov ? '#fff' : C.red);
  if (resetHov && mouseClicked) {
    save = defaultSave();
    saveSave();
  }
  
  const backHov2 = isHovered(W/2-60, H-40, 120, 32);
  drawButton(W/2-60, H-40, 120, 32, '← BACK', backHov2);
  if (backHov2 && mouseClicked) gameState = 'menu';
}

function drawPauseScreen() {
  ctx.fillStyle = '#000000aa';
  ctx.fillRect(0, 0, W, H);
  
  const small = W < 500;
  const panelW = small ? 160 : 200;
  const panelH = small ? 140 : 160;
  
  drawRivetPanel(W/2 - panelW/2, H/2 - panelH/2, panelW, panelH, C.panel);
  drawText('PAUSED', W/2, H/2 - panelH/2 + 28, small ? 18 : 24, C.gold);
  
  const btnW2 = small ? 120 : 140;
  const btns = [
    { label: 'RESUME', y: H/2 - 16, action: 'resume' },
    { label: 'RESTART', y: H/2 + 20, action: 'restart' },
    { label: 'MENU', y: H/2 + 56, action: 'menu' },
  ];
  
  for (const b of btns) {
    const hov = isHovered(W/2-btnW2/2, b.y-12, btnW2, 28);
    drawButton(W/2-btnW2/2, b.y-12, btnW2, 28, b.label, hov);
    if (hov && mouseClicked) {
      if (b.action === 'resume') gameState = 'playing';
      else if (b.action === 'restart') startLevel(currentLevel);
      else if (b.action === 'menu') gameState = 'menu';
    }
  }
}

function drawGameOver() {
  ctx.fillStyle = '#000000cc';
  ctx.fillRect(0, 0, W, H);
  
  const small = W < 500;
  drawText('GAME OVER', W/2, H/2-40, small ? 22 : 30, C.red);
  
  // Hint text
  drawMonoText('Collect health pickups and upgrade armor!', W/2, H/2 - 10, small ? 8 : 10, C.steam);
  
  const btnW2 = small ? 120 : 140;
  const retryHov = isHovered(W/2-btnW2/2, H/2 + 10, btnW2, 34);
  drawButton(W/2-btnW2/2, H/2 + 10, btnW2, 34, 'RETRY', retryHov);
  if (retryHov && mouseClicked) startLevel(currentLevel);
  
  const menuHov = isHovered(W/2-btnW2/2, H/2+56, btnW2, 34);
  drawButton(W/2-btnW2/2, H/2+56, btnW2, 34, 'MENU', menuHov);
  if (menuHov && mouseClicked) gameState = 'menu';
}

function drawLevelComplete() {
  ctx.fillStyle = '#000000cc';
  ctx.fillRect(0, 0, W, H);
  
  const small = W < 500;
  const panelW = small ? 240 : 300;
  const panelH = small ? 180 : 200;
  
  drawRivetPanel(W/2-panelW/2, H/2 - panelH/2, panelW, panelH, C.panel);
  drawText('LEVEL COMPLETE!', W/2, H/2 - panelH/2 + 28, small ? 16 : 22, C.gold);
  
  // Stars
  const stars = save.stars[currentLevel] || 0;
  for (let i = 0; i < 3; i++) {
    drawText(i < stars ? '★' : '☆', W/2 - 30 + i*30, H/2 - panelH/2 + 60, 22, i < stars ? C.gold : '#555');
  }
  
  drawMonoText('Golden Gears: ' + levelGears.filter(g => g).length + '/3', W/2, H/2 - 10, small ? 10 : 12, C.brass);
  
  drawMiniGear(W/2-24, H/2+12, 6, frameCount*0.03, C.brass);
  drawMonoText(player ? player.scrap : 0, W/2+4, H/2+12, 13, C.gold, 'left');
  
  const btnW2 = small ? 120 : 140;
  const nextHov = isHovered(W/2-btnW2/2, H/2+32, btnW2, 30);
  drawButton(W/2-btnW2/2, H/2+32, btnW2, 30, currentLevel < 20 ? 'NEXT LEVEL' : 'YOU WIN!', nextHov);
  if (nextHov && mouseClicked) {
    if (currentLevel < 20) {
      currentLevel++;
      startLevel(currentLevel);
    } else {
      gameState = 'menu';
    }
  }
  
  const menuHov = isHovered(W/2-btnW2/2, H/2+68, btnW2, 30);
  drawButton(W/2-btnW2/2, H/2+68, btnW2, 30, 'MENU', menuHov);
  if (menuHov && mouseClicked) gameState = 'menu';
}

// ---- START LEVEL ----
function startLevel(num) {
  currentLevel = num;
  generateLevel(num);
  initPlayer();
  camera = { x: 0, y: 0, targetX: 0, targetY: 0 };
  levelTimer = 0;
  lastCheckpoint = null;
  deathAnim = 0;
  bossHP = 0;
  bossMaxHP = 0;
  particles = [];
  steamPuffs = [];
  
  const boss = enemies.find(e => e.isBoss);
  if (boss) { bossHP = boss.hp; bossMaxHP = boss.hp; }
  
  gameState = 'playing';
  resize(); // Update mobile controls visibility
}

// ---- MAIN LOOP ----
function gameLoop(timestamp) {
  if (!lastTime) lastTime = timestamp;
  const elapsed = timestamp - lastTime;
  lastTime = timestamp;
  dt = Math.min(elapsed / 16.67, 3);
  
  frameCount++;
  menuAnim++;
  
  ctx.clearRect(0, 0, W, H);
  
  switch(gameState) {
    case 'menu':
      drawMenu();
      break;
    case 'intro':
      drawIntroScreen();
      break;
    case 'controls':
      drawControlsScreen();
      break;
    case 'upgrades':
      drawUpgradeScreen();
      break;
    case 'levelselect':
      drawLevelSelect();
      break;
    case 'settings':
      drawSettingsScreen();
      break;
    case 'playing':
      updateGame();
      updateParticles();
      drawGame();
      // Pause on mobile tap
      if (isMobile && mouseClicked) {
        const small = W < 500;
        const pbSize = 36;
        const pbX = W - pbSize - 6;
        const pbY = Math.round(56 * (small ? 0.8 : 1));
        const pbH = Math.round(26 * (small ? 0.8 : 1));
        if (mouseX >= pbX && mouseX <= pbX + pbSize && mouseY >= pbY && mouseY <= pbY + pbH) {
          gameState = 'paused';
        }
      }
      break;
    case 'paused':
      drawGame();
      drawPauseScreen();
      break;
    case 'gameover':
      drawGame();
      drawGameOver();
      break;
    case 'levelcomplete':
      drawGame();
      drawLevelComplete();
      break;
  }
  
  mouseClicked = false;
  requestAnimationFrame(gameLoop);
}

// ---- INIT ----
function init() {
  loadSave();
  loadSettings();
  resize();
  initMenuGears();
  initTitle();
  setupMobileControls();
  
  window.addEventListener('resize', () => {
    resize();
    if (gameState === 'menu') {
      initTitle();
      initMenuGears();
      menuAnim = 80;
    }
  });
  
  requestAnimationFrame(gameLoop);
}

init();

})();