script.js

'use strict';
// ============================================================
// CONSTANTS & MATH
// ============================================================
const PI = Math.PI;
const PI2 = Math.PI * 2;
const HP = Math.PI / 2;
const IS_TOUCH = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
const REDUCED_MOTION = typeof window.matchMedia === 'function' &&
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; }
function lerp(a, b, t) { return a + (b - a) * t; }
function damp(a, b, lambda, dt) { return lerp(a, b, 1 - Math.exp(-lambda * dt)); }
function dist(ax, ay, bx, by) { const dx = ax - bx, dy = ay - by; return Math.sqrt(dx*dx + dy*dy); }
function rng(lo, hi) { return lo + Math.random() * (hi - lo); }
function normalizeAngle(a) { while (a > PI) a -= PI2; while (a < -PI) a += PI2; return a; }
function angleDiff(a, b) { return normalizeAngle(b - a); }
function formatTime(ms) {
  const m = Math.floor(ms / 60000);
  const s = Math.floor((ms % 60000) / 1000);
  const t = Math.floor((ms % 1000) / 100);
  return m + ':' + String(s).padStart(2,'0') + '.' + t;
}
function catmullRom(p0, p1, p2, p3, t) {
  const t2 = t * t, t3 = t2 * t;
  return 0.5 * ((2*p1) + (-p0+p2)*t + (2*p0-5*p1+4*p2-p3)*t2 + (-p0+3*p1-3*p2+p3)*t3);
}

// roundRect only landed in browsers in 2022 — tiny fallback for older ones
if (typeof CanvasRenderingContext2D !== 'undefined' && !CanvasRenderingContext2D.prototype.roundRect) {
  CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
    r = Math.min(Math.abs(typeof r === 'number' ? r : 4), Math.abs(w)/2, Math.abs(h)/2);
    this.moveTo(x + r, y);
    this.arcTo(x + w, y,     x + w, y + h, r);
    this.arcTo(x + w, y + h, x,     y + h, r);
    this.arcTo(x,     y + h, x,     y,     r);
    this.arcTo(x,     y,     x + w, y,     r);
    this.closePath();
    return this;
  };
}

// ============================================================
// CONFIG
// ============================================================
const CARS = [
  { name:'Speedster', topSpeed:180, accel:0.28, brake:0.35, grip:0.88, nitroMax:100 },
  { name:'Thunder',   topSpeed:170, accel:0.32, brake:0.32, grip:0.85, nitroMax:110 },
  { name:'Phantom',   topSpeed:195, accel:0.24, brake:0.38, grip:0.92, nitroMax:90  },
  { name:'Titan',     topSpeed:150, accel:0.36, brake:0.42, grip:0.80, nitroMax:120 }
];
const COLORS = ['#e83030','#3080ff','#20c060','#f0c030','#cc40cc','#ff8020','#20cccc','#ffffff'];
const COLOR_NAMES = ['Red','Blue','Green','Yellow','Magenta','Orange','Cyan','White'];
const TRACKS = [
  {
    name:'Grand Circuit',
    center:[3200,2800],
    points:[
      {r:1200,a:0},{r:1240,a:0.22},{r:1160,a:0.45},{r:1050,a:0.68},
      {r:940,a:0.92},{r:880,a:1.18},{r:960,a:1.45},{r:1080,a:1.68},
      {r:1180,a:1.90},{r:1280,a:2.15},{r:1300,a:2.42},{r:1250,a:2.70},
      {r:1120,a:2.98},{r:980,a:3.22},{r:860,a:3.48},{r:760,a:3.75},
      {r:800,a:4.02},{r:920,a:4.28},{r:1040,a:4.55},{r:1140,a:4.82},
      {r:1200,a:5.10},{r:1240,a:5.35},{r:1260,a:5.60},{r:1240,a:5.85},
      {r:1220,a:6.10},{r:1200,a:6.28}
    ]
  },
  {
    name:'Tight Twister',
    center:[3000,2600],
    points:[
      {r:820,a:0},{r:780,a:0.35},{r:650,a:0.72},{r:520,a:1.08},
      {r:460,a:1.42},{r:520,a:1.78},{r:680,a:2.12},{r:820,a:2.48},
      {r:940,a:2.82},{r:980,a:3.14},{r:940,a:3.50},{r:820,a:3.86},
      {r:660,a:4.22},{r:520,a:4.58},{r:480,a:4.92},{r:540,a:5.28},
      {r:680,a:5.62},{r:780,a:5.96},{r:820,a:6.28}
    ]
  },
  {
    name:'Oval Speedway',
    center:[3200,2800],
    points:[
      {r:1100,a:0},{r:1060,a:0.30},{r:700,a:0.65},{r:640,a:1.00},
      {r:620,a:1.57},{r:640,a:2.14},{r:700,a:2.49},{r:1060,a:2.84},
      {r:1100,a:3.14},{r:1060,a:3.44},{r:700,a:3.79},{r:640,a:4.14},
      {r:620,a:4.71},{r:640,a:5.28},{r:700,a:5.63},{r:1060,a:5.98},
      {r:1100,a:6.28}
    ]
  },
  {
    name:'Mountain Pass',
    center:[3400,3000],
    points:[
      {r:1400,a:0},{r:1350,a:0.18},{r:1200,a:0.38},{r:1020,a:0.60},
      {r:860,a:0.82},{r:720,a:1.05},{r:650,a:1.30},{r:680,a:1.58},
      {r:780,a:1.82},{r:920,a:2.06},{r:1100,a:2.28},{r:1280,a:2.50},
      {r:1380,a:2.72},{r:1420,a:2.96},{r:1350,a:3.20},{r:1180,a:3.45},
      {r:980,a:3.70},{r:800,a:3.95},{r:680,a:4.22},{r:640,a:4.52},
      {r:700,a:4.82},{r:860,a:5.10},{r:1040,a:5.36},{r:1220,a:5.60},
      {r:1360,a:5.82},{r:1400,a:6.05},{r:1400,a:6.28}
    ]
  },
  {
    name:'Desert Sprint',
    center:[3000,2600],
    points:[
      {r:900,a:0},{r:1050,a:0.25},{r:1200,a:0.55},{r:1300,a:0.88},
      {r:1280,a:1.20},{r:1150,a:1.50},{r:920,a:1.72},{r:760,a:1.95},
      {r:700,a:2.20},{r:740,a:2.50},{r:860,a:2.78},{r:1020,a:3.05},
      {r:1180,a:3.30},{r:1300,a:3.55},{r:1320,a:3.82},{r:1250,a:4.10},
      {r:1080,a:4.38},{r:900,a:4.65},{r:740,a:4.92},{r:680,a:5.22},
      {r:720,a:5.52},{r:820,a:5.78},{r:900,a:6.05},{r:900,a:6.28}
    ]
  }
];
const DIFFICULTIES = [
  {name:'Easy',   skill:0.60},
  {name:'Medium', skill:0.75},
  {name:'Hard',   skill:0.88},
  {name:'Expert', skill:1.00}
];
const WEATHERS = ['Clear','Rain','Storm','Night','Dynamic'];
const ITEM_TYPES = ['shield','boost','missile','oil','magnet','repair','nitro_refill','mine','lightning','ghost_mode'];
const ITEM_EMOJI = {shield:'🛡',boost:'🔥',missile:'🚀',oil:'🛢',magnet:'🧲',repair:'🔧',nitro_refill:'💧',mine:'💣',lightning:'⚡',ghost_mode:'👻'};
const AI_NAMES = ['Blaze','Nova','Ghost','Viper','Storm','Titan','Raven','Spike','Cruz','Neon','Axel','Drift'];
const AI_COLORS = ['#ff4444','#44aaff','#44ff88','#ffcc00','#ff44ff','#ff8800','#00ffcc','#8888ff','#ff6666','#66ff66'];
// Unique personality traits per named AI (aggression, caution, itemStrategy, consistency)
const AI_PERSONALITIES = {
  'Blaze':  { aggression: 0.90, caution: 0.30, itemStrategy: 0.70, consistency: 0.80 },
  'Nova':   { aggression: 0.60, caution: 0.60, itemStrategy: 0.80, consistency: 0.90 },
  'Ghost':  { aggression: 0.40, caution: 0.90, itemStrategy: 0.90, consistency: 0.95 },
  'Viper':  { aggression: 0.75, caution: 0.65, itemStrategy: 1.00, consistency: 0.85 },
  'Storm':  { aggression: 0.85, caution: 0.40, itemStrategy: 0.60, consistency: 0.70 },
  'Titan':  { aggression: 0.50, caution: 0.80, itemStrategy: 0.70, consistency: 0.90 },
  'Raven':  { aggression: 0.75, caution: 0.55, itemStrategy: 0.85, consistency: 0.80 },
  'Spike':  { aggression: 0.95, caution: 0.20, itemStrategy: 0.50, consistency: 0.60 },
  'Cruz':   { aggression: 0.60, caution: 0.70, itemStrategy: 0.75, consistency: 0.85 },
  'Neon':   { aggression: 0.70, caution: 0.55, itemStrategy: 0.80, consistency: 0.75 },
  'Axel':   { aggression: 0.80, caution: 0.45, itemStrategy: 0.65, consistency: 0.70 },
  'Drift':  { aggression: 0.70, caution: 0.60, itemStrategy: 0.70, consistency: 0.65 }
};
const TOTAL_LAPS = 5;
const ROAD_WIDTH = 220;
const WALL_HIT_COOLDOWN_MS = 300;
const PLAYER_WALL_RESTITUTION = 0.35;
const PLAYER_WALL_SPEED_FACTOR = 0.5;
const AI_WALL_RESTITUTION = 0.2;
const AI_WALL_SPEED_FACTOR = 0.6;
const AI_BASE_GRIP_MULTIPLIER = 0.9;   // AI grip is slightly softer than ideal to simulate realistic handling
const RUBBER_BAND_THRESHOLD = 600;     // gap in px (along track) before rubber-banding kicks in
const RUBBER_BAND_CATCH_UP = 4000;     // divisor for catch-up factor (larger = gentler)
const RUBBER_BAND_SLOW_DOWN = 5000;    // divisor for slow-down factor
const RUBBER_BAND_MAX_BOOST = 0.12;    // max rubber-band speed multiplier (catch-up)
const RUBBER_BAND_MAX_SLOW = 0.08;     // max rubber-band speed reduction (slow-down)
const CAMERA_DAMPING = 5;             // camera follow damping lambda
const CAMERA_LOOKAHEAD_FWD = 80;      // camera lookahead distance (forward)
const CAMERA_LOOKAHEAD_REV = 110;     // camera lookahead distance (rear view)
// Physics scales. Speed is stored in "px per frame @60fps" (the HUD shows it
// as km/h for flavor). Positions advance by speed * dt * PHYS.MOVE.
const PHYS = {
  ACCEL: 0.004,       // throttle force scale (per ms)
  MOVE: 0.06,         // world movement scale = 60/1000 (px per speed-unit per ms)
  TURN: 0.03,         // heading change scale = 30/1000 (rad per angularVel-unit per ms)
  SIDE_FORCE: 0.06,   // how strongly turning at speed builds lateral slide
  SLIDE_FLOOR: 0.06,  // minimum slide even at full grip (makes drifting possible)
  LATERAL_MAX: 60     // cap on lateral speed so drifts stay controllable
};

// ============================================================
// AUDIO ENGINE
// ============================================================
class AudioEngine {
  constructor() {
    this.enabled = true;
    this.ctx = null;
    this.osc1 = null; this.osc2 = null; this.drone = null;
    this.gainNode = null; this.filterNode = null;
    this._started = false;
  }
  _init() {
    if (this._started) return;
    this._started = true;
    try {
      this.ctx = new (window.AudioContext || window.webkitAudioContext)();
      this.gainNode = this.ctx.createGain();
      this.gainNode.gain.value = 0.18;
      this.filterNode = this.ctx.createBiquadFilter();
      this.filterNode.type = 'lowpass';
      this.filterNode.frequency.value = 800;
      const wave = this.ctx.createWaveShaper();
      const n = 256, curve = new Float32Array(n);
      for (let i = 0; i < n; i++) { const x = (i*2/n)-1; curve[i] = (3+20)*x*20*PI/180/(PI*(3+Math.abs(20*x))); }
      wave.curve = curve;
      this.osc1 = this.ctx.createOscillator();
      this.osc1.type = 'sawtooth';
      this.osc1.frequency.value = 80;
      this.osc2 = this.ctx.createOscillator();
      this.osc2.type = 'square';
      this.osc2.frequency.value = 40;
      this.drone = this.ctx.createOscillator();
      this.drone.type = 'sine';
      this.drone.frequency.value = 55;
      const g1 = this.ctx.createGain(); g1.gain.value = 0.6;
      const g2 = this.ctx.createGain(); g2.gain.value = 0.3;
      const g3 = this.ctx.createGain(); g3.gain.value = 0.2;
      this.osc1.connect(g1); g1.connect(wave);
      this.osc2.connect(g2); g2.connect(wave);
      this.drone.connect(g3); g3.connect(wave);
      wave.connect(this.filterNode);
      this.filterNode.connect(this.gainNode);
      this.gainNode.connect(this.ctx.destination);
      this.osc1.start(); this.osc2.start(); this.drone.start();
    } catch(e) { this.enabled = false; }
  }
  start() { this._init(); }
  setEngine(rpm, speed) {
    if (!this.enabled || !this.ctx) return;
    const t = this.ctx.currentTime;
    const freq = 60 + rpm * 0.06;
    const filt = 400 + speed * 4;
    this.osc1.frequency.setTargetAtTime(freq, t, 0.05);
    this.osc2.frequency.setTargetAtTime(freq * 0.5, t, 0.05);
    this.filterNode.frequency.setTargetAtTime(clamp(filt, 200, 3000), t, 0.05);
    this.gainNode.gain.setTargetAtTime(this.enabled ? 0.18 : 0, t, 0.05);
  }
  playEffect(type) {
    if (!this.enabled || !this.ctx) return;
    const ac = this.ctx;
    const t = ac.currentTime;
    const g = ac.createGain();
    g.connect(ac.destination);
    const o = ac.createOscillator();
    o.connect(g);
    switch(type) {
      case 'screech': o.type='sawtooth'; o.frequency.value=300; g.gain.setValueAtTime(0.3,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.4); o.start(t); o.stop(t+0.4); break;
      case 'impact':  o.type='square';   o.frequency.setValueAtTime(200,t); o.frequency.exponentialRampToValueAtTime(50,t+0.2); g.gain.setValueAtTime(0.4,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.2); o.start(t); o.stop(t+0.2); break;
      case 'chime':   o.type='sine';     o.frequency.setValueAtTime(880,t); o.frequency.exponentialRampToValueAtTime(440,t+0.3); g.gain.setValueAtTime(0.2,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.3); o.start(t); o.stop(t+0.3); break;
      case 'pickup':  o.type='sine';     o.frequency.setValueAtTime(440,t); o.frequency.setValueAtTime(660,t+0.05); g.gain.setValueAtTime(0.15,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.2); o.start(t); o.stop(t+0.2); break;
      case 'powerup': o.type='sine';     o.frequency.setValueAtTime(330,t); o.frequency.exponentialRampToValueAtTime(990,t+0.4); g.gain.setValueAtTime(0.2,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.4); o.start(t); o.stop(t+0.4); break;
      case 'thunder': o.type='sawtooth'; o.frequency.setValueAtTime(60,t); o.frequency.exponentialRampToValueAtTime(20,t+0.6); g.gain.setValueAtTime(0.5,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.6); o.start(t); o.stop(t+0.6); break;
      case 'missile': o.type='sawtooth'; o.frequency.setValueAtTime(400,t); o.frequency.exponentialRampToValueAtTime(150,t+0.3); g.gain.setValueAtTime(0.25,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.3); o.start(t); o.stop(t+0.3); break;
      case 'countdown': o.type='square'; o.frequency.value=440; g.gain.setValueAtTime(0.3,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.15); o.start(t); o.stop(t+0.15); break;
      case 'go':      o.type='square';   o.frequency.value=880; g.gain.setValueAtTime(0.35,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.3); o.start(t); o.stop(t+0.3); break;
      case 'horn':    o.type='sine';     o.frequency.setValueAtTime(440,t); o.frequency.setValueAtTime(550,t+0.12); o.frequency.setValueAtTime(440,t+0.24); g.gain.setValueAtTime(0.28,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.45); o.start(t); o.stop(t+0.45); break;
    }
  }
  setIdle() {
    // Fade the engine drone out (menu / pause / finish screen).
    // setEngine() ramps it back up automatically once racing resumes.
    if (this.ctx && this.gainNode)
      this.gainNode.gain.setTargetAtTime(0, this.ctx.currentTime, 0.15);
  }
  toggle() {
    this.enabled = !this.enabled;
    if (this.gainNode) this.gainNode.gain.value = this.enabled ? 0.18 : 0;
    return this.enabled;
  }
}

// ============================================================
// PARTICLES
// ============================================================
class Particles {
  constructor() {
    this.pool = [];
    this._freeStack = [];
    this.active = [];
    for (let i = 0; i < 1200; i++) {
      this.pool.push({alive:false, _poolIdx:i});
      this._freeStack.push(i);
    }
  }
  _get() {
    if (this._freeStack.length > 0) return this.pool[this._freeStack.pop()];
    return {alive:false, _poolIdx:-1};
  }
  emit(x, y, opts={}) {
    const p = this._get();
    p.alive = true;
    p.x = x; p.y = y;
    p.vx = opts.vx || 0; p.vy = opts.vy || 0;
    p.life = opts.life || 800;
    p.maxLife = p.life;
    p.size = opts.size || 4;
    p.color = opts.color || '#fff';
    p.drag = opts.drag !== undefined ? opts.drag : 0.97;
    p.gravity = opts.gravity || 0;
    this.active.push(p);
  }
  burst(x, y, count, opts={}) {
    for (let i = 0; i < count; i++) {
      const a = rng(0, PI2);
      const spd = rng(opts.minSpd || 30, opts.maxSpd || 100);
      this.emit(x, y, Object.assign({}, opts, { vx: Math.cos(a)*spd, vy: Math.sin(a)*spd }));
    }
  }
  update(dt) {
    for (let i = this.active.length - 1; i >= 0; i--) {
      const p = this.active[i];
      p.life -= dt;
      if (p.life <= 0) { p.alive = false; if (p._poolIdx >= 0) this._freeStack.push(p._poolIdx); this.active.splice(i,1); continue; }
      p.vx *= p.drag; p.vy *= p.drag;
      p.vy += p.gravity * dt * 0.001;
      p.x += p.vx * dt * 0.001;
      p.y += p.vy * dt * 0.001;
    }
  }
  draw(ctx, cx, cy, W, H) {
    // Cull particles outside visible area (world-space culling using camera
    // bounds; the caller passes W/zoom and H/zoom so zoom-out is covered)
    const halfW = W / 2, halfH = H / 2;
    const margin = 60;
    for (const p of this.active) {
      const offX = p.x - cx, offY = p.y - cy;
      if (offX < -(halfW + margin) || offX > halfW + margin ||
          offY < -(halfH + margin) || offY > halfH + margin) continue;
      const alpha = clamp(p.life / p.maxLife, 0, 1);
      ctx.globalAlpha = alpha;
      ctx.fillStyle = p.color;
      ctx.beginPath();
      // Draw at world coordinates; canvas transform maps to screen
      ctx.arc(p.x, p.y, p.size * alpha, 0, PI2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
  }
}

// ============================================================
// TIRE MARKS
// ============================================================
class TireMarks {
  constructor() {
    this.marks = [];
    this.MAX = 2000;
  }
  add(x, y, heading) {
    if (this.marks.length >= this.MAX) this.marks.shift();
    const px = -Math.sin(heading) * 12, py = Math.cos(heading) * 12;
    this.marks.push({ x1:x+px, y1:y+py, x2:x-px, y2:y-py, age:0, maxAge:15000 });
  }
  update(dt) {
    for (const m of this.marks) m.age += dt;
  }
  prune() {
    let write = 0;
    for (let i = 0; i < this.marks.length; i++) {
      if (this.marks[i].age < this.marks[i].maxAge) this.marks[write++] = this.marks[i];
    }
    this.marks.length = write;
  }
  draw(ctx, cx, cy, halfW, halfH) {
    for (const m of this.marks) {
      // Skip marks outside the visible area (up to 2000 strokes saved/frame)
      if (Math.abs(m.x1 - cx) > halfW || Math.abs(m.y1 - cy) > halfH) continue;
      const a = clamp(1 - m.age/m.maxAge, 0, 1) * 0.5;
      ctx.strokeStyle = `rgba(20,15,10,${a})`;
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(m.x1, m.y1);
      ctx.lineTo(m.x2, m.y2);
      ctx.stroke();
    }
  }
}

// ============================================================
// WEATHER
// ============================================================
class Weather {
  constructor() {
    this.state = 'CLEAR';
    this.dynamic = false;
    this.cycleTimer = 0;
    this.cycleInterval = rng(20000, 38000);
    this.drops = [];
    this.lightningAlpha = 0;
    this.lightningTimer = 0;
    this.nightAlpha = 0;
    this.GRIPS = { CLEAR:1.0, RAIN:0.82, STORM:0.68, NIGHT:0.95 };
    this.STATES = ['CLEAR','RAIN','STORM','NIGHT'];
    for (let i = 0; i < 400; i++) {
      this.drops.push({ x: rng(0,800), y: rng(0,600), vx: rng(-1,1), vy: rng(8,16) });
    }
  }
  setWeather(type) {
    if (type === 'Dynamic') { this.dynamic = true; this.state = 'CLEAR'; }
    else { this.dynamic = false; this.state = type.toUpperCase(); }
    this.nightAlpha = this.state === 'NIGHT' ? 0.5 : 0;
  }
  getGrip() { return this.GRIPS[this.state] || 1.0; }
  update(dt, W = 800, H = 600) {
    if (this.dynamic) {
      this.cycleTimer += dt;
      if (this.cycleTimer >= this.cycleInterval) {
        this.cycleTimer = 0;
        this.cycleInterval = rng(20000,38000);
        const idx = (this.STATES.indexOf(this.state) + 1) % this.STATES.length;
        this.state = this.STATES[idx];
      }
    }
    if (this.state === 'NIGHT') this.nightAlpha = damp(this.nightAlpha, 0.55, 3, dt*0.001);
    else this.nightAlpha = damp(this.nightAlpha, 0, 3, dt*0.001);
    if (this.state === 'STORM') {
      this.lightningTimer -= dt;
      if (this.lightningTimer <= 0) {
        this.lightningAlpha = 0.7;
        this.lightningTimer = rng(3000,8000);
      }
      // 0.92/frame @60fps ≈ keep 0.0067/s — dt-based so it decays the same at any FPS
      this.lightningAlpha *= Math.pow(0.0067, dt * 0.001);
    } else { this.lightningAlpha = 0; }
    // Move rain drops here (model update), not in draw — dt-based so rain
    // falls at the same speed on 60Hz and 144Hz screens
    if (this.state === 'RAIN' || this.state === 'STORM') {
      const f = dt * 0.06; // normalized to 60fps steps
      for (const d of this.drops) {
        d.x += d.vx * f; d.y += d.vy * f;
        if (d.x > W) d.x -= W; if (d.x < 0) d.x += W;
        if (d.y > H) { d.y -= H; d.x = rng(0, W); }
      }
    }
  }
  // NOTE: draw() is called in screen space (after the world transform is
  // restored). We must NOT call setTransform(1,0,0,1,0,0) here: that would
  // also wipe the devicePixelRatio scale and the overlays would only cover
  // the top-left quarter of the screen on retina/mobile displays.
  draw(ctx, W, H, px, py, heading) {
    if (this.nightAlpha > 0.01) {
      ctx.save();
      ctx.fillStyle = `rgba(0,0,20,${this.nightAlpha})`;
      ctx.fillRect(0,0,W,H);
      // headlight cones — two beams fanned forward from the car
      const cx2 = W/2, cy2 = H/2;
      // Ambient glow around car
      const ambGrad = ctx.createRadialGradient(cx2,cy2,0,cx2,cy2,120);
      ambGrad.addColorStop(0,'rgba(255,250,200,0.10)');
      ambGrad.addColorStop(1,'rgba(0,0,0,0)');
      ctx.fillStyle = ambGrad;
      ctx.beginPath(); ctx.arc(cx2,cy2,120,0,PI2); ctx.fill();
      // Left headlight beam
      const offL = 0.22; // angular offset to left
      const ha = heading;
      for (const beamOff of [-offL, offL]) {
        const bCx = cx2 + Math.cos(ha + beamOff - PI/2) * 12;
        const bCy = cy2 + Math.sin(ha + beamOff - PI/2) * 12;
        const bGrad = ctx.createRadialGradient(bCx,bCy,4,bCx,bCy,300);
        bGrad.addColorStop(0,'rgba(255,252,220,0.22)');
        bGrad.addColorStop(0.5,'rgba(255,248,200,0.08)');
        bGrad.addColorStop(1,'rgba(0,0,0,0)');
        ctx.fillStyle = bGrad;
        ctx.beginPath();
        ctx.moveTo(bCx,bCy);
        ctx.arc(bCx,bCy,300,ha-0.45,ha+0.45);
        ctx.closePath();
        ctx.fill();
      }
      ctx.restore();
    }
    if (this.lightningAlpha > 0.01) {
      ctx.save();
      ctx.fillStyle = `rgba(200,220,255,${this.lightningAlpha})`;
      ctx.fillRect(0,0,W,H);
      ctx.restore();
    }
    if (this.state === 'RAIN' || this.state === 'STORM') {
      const count = this.state === 'STORM' ? 400 : 220;
      ctx.save();
      for (let i = 0; i < count; i++) {
        const d = this.drops[i];
        // Vary each drop slightly for natural look
        const alpha = 0.25 + (i % 5) * 0.08;
        const len = 1.5 + (i % 3) * 0.8;
        ctx.strokeStyle = `rgba(180,210,255,${alpha})`;
        ctx.lineWidth = 0.6 + (i % 4) * 0.25;
        ctx.beginPath();
        ctx.moveTo(d.x, d.y);
        ctx.lineTo(d.x + d.vx * len, d.y + d.vy * len);
        ctx.stroke();
      }
      ctx.restore();
    }
  }
  getIndicatorText() {
    const icons = {CLEAR:'☀️',RAIN:'🌧️',STORM:'⛈️',NIGHT:'🌙'};
    return (icons[this.state]||'🌤') + ' ' + this.state;
  }
}

// ============================================================
// ITEM BOX
// ============================================================
class ItemBox {
  constructor(x, y) {
    this.x = x; this.y = y;
    this.bobTimer = Math.random() * PI2;
    this.active = true;
    this.respawnTimer = 0;
  }
  update(dt) {
    this.bobTimer += 0.003 * dt;
    if (!this.active) {
      this.respawnTimer -= dt;
      if (this.respawnTimer <= 0) this.active = true;
    }
  }
  collect(player) {
    if (!this.active) return false;
    const item = ITEM_TYPES[Math.floor(Math.random()*ITEM_TYPES.length)];
    player.addItem(item);
    this.active = false;
    this.respawnTimer = rng(7000,14000);
    return true;
  }
  draw(ctx) {
    if (!this.active) return;
    const bob = Math.sin(this.bobTimer) * 4;
    ctx.save();
    ctx.translate(this.x, this.y + bob);
    const grad = ctx.createRadialGradient(0,0,4,0,0,18);
    grad.addColorStop(0,'rgba(255,240,80,0.9)');
    grad.addColorStop(1,'rgba(255,180,0,0.2)');
    ctx.fillStyle = grad;
    ctx.beginPath(); ctx.arc(0,0,18,0,PI2); ctx.fill();
    ctx.strokeStyle='rgba(255,220,60,0.8)'; ctx.lineWidth=2;
    ctx.beginPath(); ctx.arc(0,0,16,0,PI2); ctx.stroke();
    ctx.fillStyle='#fff'; ctx.font='14px Arial'; ctx.textAlign='center'; ctx.textBaseline='middle';
    ctx.fillText('?',0,0);
    ctx.restore();
  }
}

// ============================================================
// OIL SLICK
// ============================================================
class OilSlick {
  constructor(x, y) {
    this.x = x; this.y = y;
    this.rotation = Math.random()*PI2;
    this.radiusX = 55; this.radiusY = 35;
    this.lifetime = 14000; this.maxLife = 14000;
    this.active = true;
  }
  update(dt) {
    if (!this.active) return;
    this.lifetime -= dt;
    if (this.lifetime <= 0) this.active = false;
  }
  draw(ctx) {
    if (!this.active) return;
    const a = clamp(this.lifetime/this.maxLife,0,1)*0.6;
    ctx.save();
    ctx.translate(this.x,this.y);
    ctx.rotate(this.rotation);
    ctx.globalAlpha = a;
    ctx.fillStyle='rgba(20,15,5,0.85)';
    ctx.beginPath();
    ctx.ellipse(0,0,this.radiusX,this.radiusY,0,0,PI2);
    ctx.fill();
    ctx.globalAlpha=1;
    ctx.restore();
  }
}

// ============================================================
// MINE — the 💣 item used to be just a re-skinned oil slick; now it
// arms after ~1s and explodes on contact (spin + damage + stun)
// ============================================================
class Mine {
  constructor(x, y, owner) {
    this.x = x; this.y = y;
    this.owner = owner;
    this.armTimer = 900;       // arms ~1s after being dropped
    this.ownerImmunity = 2000; // grace period so the dropper can clear the blast
    this.lifetime = 20000;
    this.active = true;
  }
  update(dt, cars, particles, audio) {
    if (!this.active) return;
    this.lifetime -= dt;
    if (this.lifetime <= 0) { this.active = false; return; }
    if (this.ownerImmunity > 0) this.ownerImmunity -= dt;
    if (this.armTimer > 0) { this.armTimer -= dt; return; }
    for (const car of cars) {
      if (car === this.owner && this.ownerImmunity > 0) continue;
      if (dist(this.x, this.y, car.x, car.y) >= 30) continue;
      const fx = car.activeEffects || {};
      if ((fx.ghost_mode || 0) > 0) continue;           // ghost passes right through
      this.active = false;
      if ((fx.shield || 0) > 0) {                       // shield absorbs the blast
        if (particles) particles.burst(this.x, this.y, 8, {color:'#44aaff', minSpd:60, maxSpd:140, life:400});
        return;
      }
      car.speed *= 0.25;
      car.angularVel += (Math.random() - 0.5) * 1.6;
      if (car.hp !== undefined) car.hp = Math.max(0, car.hp - 12);
      if (car.stunTimer !== undefined) car.stunTimer = 500;
      car.pendingShake = (car.pendingShake || 0) + 12;
      if (particles) {
        particles.burst(this.x, this.y, 16, {color:'#ff5500', minSpd:90, maxSpd:240, life:600, size:5});
        particles.burst(this.x, this.y, 10, {color:'#ffcc00', minSpd:70, maxSpd:190, life:450, size:4});
      }
      if (audio) audio.playEffect('impact');
      return;
    }
  }
  draw(ctx) {
    if (!this.active) return;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.fillStyle = '#23232a';
    ctx.beginPath(); ctx.arc(0, 0, 9, 0, PI2); ctx.fill();
    ctx.strokeStyle = '#55555f'; ctx.lineWidth = 2;
    ctx.beginPath(); ctx.arc(0, 0, 9, 0, PI2); ctx.stroke();
    // blinking red light once armed
    const blink = this.armTimer <= 0 && Math.floor(Date.now() / 250) % 2 === 0;
    ctx.fillStyle = blink ? '#ff3030' : '#701010';
    ctx.beginPath(); ctx.arc(0, 0, 3, 0, PI2); ctx.fill();
    ctx.restore();
  }
}

// ============================================================
// MISSILE
// ============================================================
class Missile {
  constructor(x, y, heading, particles) {
    this.x = x; this.y = y;
    this.heading = heading;
    this.speed = 700;
    this.lifetime = 3000;
    this.active = true;
    this.particles = particles;
    this.owner = null; // set after creation to identify who fired it
  }
  update(dt, cars) {
    if (!this.active) return;
    this.lifetime -= dt;
    if (this.lifetime <= 0) { this.active = false; return; }
    const s = dt * 0.001;
    this.x += Math.cos(this.heading) * this.speed * s;
    this.y += Math.sin(this.heading) * this.speed * s;
    // trail
    if (this.particles) this.particles.emit(this.x, this.y, { color:'#ff8030', size:5, life:300, vx:rng(-20,20), vy:rng(-20,20), drag:0.9 });
    // hit detection
    for (const car of cars) {
      if (car === this.owner) continue; // never hit the car that fired this missile
      if (dist(this.x, this.y, car.x, car.y) < 30) {
        // Ghost mode: missile passes through
        if (car.activeEffects && car.activeEffects.ghost_mode > 0) continue;
        // Shield: deflect missile without harming car
        if (car.activeEffects && car.activeEffects.shield > 0) {
          this.active = false;
          if (this.particles) this.particles.burst(this.x,this.y,8,{color:'#44aaff',minSpd:60,maxSpd:140,life:400});
          return;
        }
        car.angularVel = (Math.random()-0.5)*2;
        car.speed *= 0.3;
        if (car.hp !== undefined) car.hp = Math.max(0, car.hp - 12);
        // Stun AI cars briefly after missile impact
        if (car.stunTimer !== undefined) car.stunTimer = 600;
        this.active = false;
        if (this.particles) {
          this.particles.burst(this.x,this.y,14,{color:'#ff4400',minSpd:80,maxSpd:220,life:550,size:5});
          this.particles.burst(this.x,this.y,8, {color:'#ffcc00',minSpd:60,maxSpd:180,life:450,size:4});
          this.particles.burst(this.x,this.y,5, {color:'#ffffff',minSpd:120,maxSpd:260,life:350,size:3});
        }
        return;
      }
    }
  }
  draw(ctx) {
    if (!this.active) return;
    ctx.save();
    ctx.translate(this.x,this.y);
    ctx.rotate(this.heading);
    ctx.fillStyle='#ffcc00';
    ctx.beginPath(); ctx.ellipse(0,0,5,12,0,0,PI2); ctx.fill();
    ctx.fillStyle='#ff4400';
    ctx.beginPath(); ctx.ellipse(0,8,4,8,0,0,PI2); ctx.fill();
    ctx.restore();
  }
}

// ============================================================
// GHOST
// ============================================================
class Ghost {
  constructor() {
    this.frames = [];
    this.bestLap = null;
    this.bestLapTime = null;
    this.playing = false;
    this.playIdx = 0;
  }
  record(x, y, heading) { this.frames.push({x,y,heading}); }
  saveLap(lapTime) {
    if (!this.bestLapTime || lapTime < this.bestLapTime) {
      this.bestLapTime = lapTime;
      this.bestLap = this.frames.slice();
    }
    this.frames = [];
  }
  startPlayback() { if (this.bestLap) { this.playing = true; this.playIdx = 0; } }
  getFrame() {
    if (!this.playing || !this.bestLap) return null;
    const f = this.bestLap[this.playIdx % this.bestLap.length];
    this.playIdx++;
    return f;
  }
  reset(keepBest = false) {
    this.frames = []; this.playing = false; this.playIdx = 0;
    if (!keepBest) { this.bestLap = null; this.bestLapTime = null; }
  }
  draw(ctx, frame) {
    if (!frame) return;
    ctx.save();
    ctx.translate(frame.x, frame.y);
    ctx.rotate(frame.heading + PI/2);
    ctx.globalAlpha = 0.32;
    // Match aerodynamic body shape
    ctx.strokeStyle = 'rgba(160,220,255,0.9)';
    ctx.fillStyle = 'rgba(80,160,255,0.12)';
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(-7, -29);
    ctx.bezierCurveTo(16, -22, 17, -10, 17, 0);
    ctx.lineTo(17, 15);
    ctx.bezierCurveTo(17, 24, 12, 27, 8, 27);
    ctx.lineTo(-8, 27);
    ctx.bezierCurveTo(-12, 27, -17, 24, -17, 15);
    ctx.lineTo(-17, 0);
    ctx.bezierCurveTo(-17, -10, -16, -22, -7, -29);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.globalAlpha = 1;
    ctx.restore();
  }
}

// ============================================================
// TRACK
// ============================================================
class Track {
  constructor(config) {
    this.config = config;
    this.center = config.center;
    this.roadWidth = ROAD_WIDTH;
    this.spline = [];
    this.normals = [];
    this.cumLen = [];
    this.totalLen = 0;
    this.itemBoxes = [];
    this.trees = [];
    this.grandstands = [];
    this._buildSpline();
    this._placeTrees();
    this._placeGrandstands();
    this._placeItems();
    this._bakeStatic();
  }
  _bakeStatic() {
    // Pre-render ALL static scenery once into an offscreen canvas.
    // The old per-frame draw issued thousands of path/text operations
    // (8 full-spline strokes, ~700 dots, trees, grandstands, banners...);
    // now each frame costs a single drawImage blit.
    let minX=Infinity, minY=Infinity, maxX=-Infinity, maxY=-Infinity;
    for (const p of this.spline) {
      if (p.x < minX) minX = p.x; if (p.x > maxX) maxX = p.x;
      if (p.y < minY) minY = p.y; if (p.y > maxY) maxY = p.y;
    }
    const MARGIN = 320; // room for trees, grandstands and banners beside the road
    this._bakeX = minX - MARGIN;
    this._bakeY = minY - MARGIN;
    this._bakeW = (maxX - minX) + MARGIN * 2;
    this._bakeH = (maxY - minY) + MARGIN * 2;
    const SCALE = 0.75; // slightly reduced resolution: big memory savings, barely visible
    const off = document.createElement('canvas');
    off.width  = Math.ceil(this._bakeW * SCALE);
    off.height = Math.ceil(this._bakeH * SCALE);
    const octx = off.getContext('2d');
    octx.scale(SCALE, SCALE);
    octx.translate(-this._bakeX, -this._bakeY);
    this._drawStatic(octx);
    this._baked = off;
  }
  draw(ctx) {
    ctx.drawImage(this._baked, this._bakeX, this._bakeY, this._bakeW, this._bakeH);
  }
  _buildSpline() {
    const pts = this.config.points;
    const raw = pts.map(p => ({
      x: this.center[0] + p.r * Math.cos(p.a),
      y: this.center[1] + p.r * Math.sin(p.a)
    }));
    const N = raw.length;
    const segs = 16;
    for (let i = 0; i < N; i++) {
      const p0 = raw[(i-1+N)%N], p1 = raw[i], p2 = raw[(i+1)%N], p3 = raw[(i+2)%N];
      for (let s = 0; s < segs; s++) {
        const t = s / segs;
        const x = catmullRom(p0.x,p1.x,p2.x,p3.x,t);
        const y = catmullRom(p0.y,p1.y,p2.y,p3.y,t);
        this.spline.push({x,y});
      }
    }
    // normals and arc lengths
    const SN = this.spline.length;
    this.cumLen = [0];
    for (let i = 0; i < SN; i++) {
      const a = this.spline[i], b = this.spline[(i+1)%SN];
      const dx = b.x-a.x, dy = b.y-a.y;
      const len = Math.sqrt(dx*dx+dy*dy);
      const nx = -dy/len, ny = dx/len;
      this.normals.push({nx,ny});
      this.cumLen.push(this.cumLen[i]+len);
    }
    this.totalLen = this.cumLen[SN];
    // Precompute per-point turn angles for bendAhead() — how much the track
    // direction changes at each spline point, in radians
    this.segAngle = [];
    for (let i = 0; i < SN; i++) {
      const a = this.spline[(i-1+SN)%SN], b = this.spline[i], c = this.spline[(i+1)%SN];
      this.segAngle.push(Math.abs(angleDiff(
        Math.atan2(b.y-a.y, b.x-a.x),
        Math.atan2(c.y-b.y, c.x-b.x))));
    }
    // Build spatial grid for O(1) nearest lookup
    this._buildGrid();
    // Precompute grass texture dots (decorative) with wildflowers
    this._grassDots = [];
    const flowerColors = ['#ffdd22','#ffffff','#cc44cc','#ff8844','#44aaff'];
    for (let i = 0; i < SN; i += 3) {
      const sp = this.spline[i];
      const nx = this.normals[i].nx, ny = this.normals[i].ny;
      for (let side = -1; side <= 1; side += 2) {
        const off = rng(ROAD_WIDTH/2 + 16, ROAD_WIDTH/2 + 160);
        const isFlower = Math.random() < 0.12;
        this._grassDots.push({
          x: sp.x + nx * off * side + rng(-12, 12),
          y: sp.y + ny * off * side + rng(-12, 12),
          r: isFlower ? rng(2, 3.5) : rng(1, 3.5),
          dark: Math.random() > 0.55,
          flower: isFlower,
          flowerColor: flowerColors[Math.floor(Math.random()*flowerColors.length)]
        });
      }
    }
    // Precompute gravel dots (between shoulder and road)
    this._gravelDots = [];
    for (let i = 0; i < SN; i += 2) {
      const sp = this.spline[i];
      const nx = this.normals[i].nx, ny = this.normals[i].ny;
      for (let side = -1; side <= 1; side += 2) {
        const off = rng(ROAD_WIDTH/2 + 2, ROAD_WIDTH/2 + 28);
        this._gravelDots.push({
          x: sp.x + nx * off * side + rng(-4, 4),
          y: sp.y + ny * off * side + rng(-4, 4),
          r: rng(1.5, 3.5)
        });
      }
    }
    // Precompute asphalt surface patches (subtle road variation)
    this._asphaltPatches = [];
    for (let i = 0; i < SN; i += 5) {
      if (Math.random() > 0.45) continue;
      const sp = this.spline[i];
      const nx = this.normals[i].nx, ny = this.normals[i].ny;
      const off = rng(-(ROAD_WIDTH/2 - 28), ROAD_WIDTH/2 - 28);
      this._asphaltPatches.push({
        x: sp.x + nx * off, y: sp.y + ny * off,
        w: rng(14, 52), h: rng(7, 22), a: Math.random() * PI2
      });
    }
    // Precompute advertising banners (placed at regular intervals beside track)
    this._banners = [];
    const bannerData = [
      {bg:'#e83030',fg:'#ffffff',text:'TURBO'},
      {bg:'#2255cc',fg:'#ffff00',text:'SPEED'},
      {bg:'#228822',fg:'#ffffff',text:'RACE'},
      {bg:'#ff8800',fg:'#111111',text:'NITRO'},
      {bg:'#8822aa',fg:'#ffffff',text:'APEX'},
      {bg:'#111111',fg:'#ff3333',text:'DRIFT'}
    ];
    const bannerStep = Math.max(1, Math.floor(SN / 18));
    for (let i = 0; i < SN; i += bannerStep) {
      const sp = this.spline[i];
      const nn = this.normals[i];
      for (let side = -1; side <= 1; side += 2) {
        if (Math.random() < 0.45) continue;
        const off = ROAD_WIDTH/2 + 38;
        const bd = bannerData[Math.floor(Math.random()*bannerData.length)];
        this._banners.push({
          x: sp.x + nn.nx*off*side,
          y: sp.y + nn.ny*off*side,
          angle: Math.atan2(nn.ny, nn.nx) + PI/2,
          w: rng(52, 80), h: rng(14, 20),
          bg: bd.bg, fg: bd.fg, text: bd.text
        });
      }
    }
  }
  _buildGrid() {
    const CELL = 200;
    this._gridCell = CELL;
    this._grid = {};
    for (let i = 0; i < this.spline.length; i++) {
      const sp = this.spline[i];
      const cx = Math.floor(sp.x / CELL);
      const cy = Math.floor(sp.y / CELL);
      const key = cx + ',' + cy;
      if (!this._grid[key]) this._grid[key] = [];
      this._grid[key].push(i);
    }
  }
  nearest(x, y) {
    const SN = this.spline.length;
    const CELL = this._gridCell;
    const cx = Math.floor(x / CELL);
    const cy = Math.floor(y / CELL);
    let bestDist = Infinity, bestIdx = 0;
    // Check 5x5 grid cells (radius 2) around the car position
    for (let dcx = -2; dcx <= 2; dcx++) {
      for (let dcy = -2; dcy <= 2; dcy++) {
        const key = (cx + dcx) + ',' + (cy + dcy);
        const cell = this._grid[key];
        if (!cell) continue;
        for (const i of cell) {
          const sp = this.spline[i];
          const dx = x - sp.x, dy = y - sp.y;
          const d = Math.sqrt(dx*dx + dy*dy);
          if (d < bestDist) { bestDist = d; bestIdx = i; }
        }
      }
    }
    // Fallback: if grid missed (car far off track), scan all points
    if (bestDist === Infinity) {
      for (let i = 0; i < SN; i++) {
        const sp = this.spline[i];
        const d = dist(x,y,sp.x,sp.y);
        if (d < bestDist) { bestDist = d; bestIdx = i; }
      }
    }
    return { idx: bestIdx, dist: bestDist, nx: this.normals[bestIdx].nx, ny: this.normals[bestIdx].ny };
  }
  onRoad(x, y) { return this.nearest(x,y).dist < this.roadWidth/2 + 20; }
  // Total turn angle (radians) over the next n spline points.
  // ~0 = straight; 0.5+ = strong corner. Replaces the old curvatureAt():
  // its dot-product output lived in the 0.998–1.0 range, so the AI
  // thresholds (0.05 / 0.25 / 0.8) effectively never triggered and the
  // predictive braking / racing-line features were silently disabled.
  bendAhead(idx, n = 10) {
    const SN = this.segAngle.length;
    let sum = 0;
    for (let i = 0; i < n; i++) sum += this.segAngle[(idx + i) % SN];
    return sum;
  }
  _placeItems() {
    const SN = this.spline.length;
    const step = Math.floor(SN / 12);
    for (let i = 0; i < 12; i++) {
      const sp = this.spline[(i * step + Math.floor(step/2)) % SN];
      this.itemBoxes.push(new ItemBox(sp.x, sp.y));
    }
  }
  _placeTrees() {
    const SN = this.spline.length;
    for (let i = 0; i < 80; i++) {
      const idx = Math.floor(Math.random()*SN);
      const sp = this.spline[idx];
      const side = Math.random() > 0.5 ? 1 : -1;
      const offset = rng(ROAD_WIDTH/2+30, ROAD_WIDTH/2+160);
      const nx = this.normals[idx].nx, ny = this.normals[idx].ny;
      this.trees.push({ x: sp.x + nx*offset*side, y: sp.y + ny*offset*side, r: rng(12,26) });
    }
  }
  _placeGrandstands() {
    const SN = this.spline.length;
    const step = Math.floor(SN/6);
    for (let i = 0; i < 6; i++) {
      const idx = (i*step + 10)%SN;
      const sp = this.spline[idx];
      const nx = this.normals[idx].nx, ny = this.normals[idx].ny;
      const angle = Math.atan2(ny,nx);
      this.grandstands.push({ x: sp.x+nx*180, y: sp.y+ny*180, w:120, h:40, angle });
    }
  }
  _drawStatic(ctx) {
    const SN = this.spline.length;
    // Grass background is drawn by the game loop
    // Wildflower dots (colored) mixed with grass texture
    for (const d of this._grassDots) {
      if (d.flower) {
        ctx.fillStyle = d.flowerColor;
        ctx.beginPath(); ctx.arc(d.x, d.y, d.r * 1.4, 0, PI2); ctx.fill();
      } else {
        ctx.fillStyle = d.dark ? '#2a5c18' : '#3d7a28';
        ctx.beginPath(); ctx.arc(d.x, d.y, d.r, 0, PI2); ctx.fill();
      }
    }
    // Gravel trap (tan strip between shoulder and road)
    ctx.strokeStyle='#d4b88a'; ctx.lineWidth=ROAD_WIDTH+52;
    ctx.lineCap='round'; ctx.lineJoin='round';
    ctx.beginPath();
    ctx.moveTo(this.spline[0].x,this.spline[0].y);
    for (let i=1;i<SN;i++) ctx.lineTo(this.spline[i].x,this.spline[i].y);
    ctx.closePath(); ctx.stroke();
    // Gravel texture (subtle dots over gravel strip)
    ctx.fillStyle='rgba(160,130,90,0.18)';
    for (const p of this._gravelDots||[]) {
      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, PI2); ctx.fill();
    }
    // Rumble strips — kerb alternating red/white blocks
    ctx.strokeStyle='#ffffff'; ctx.lineWidth=ROAD_WIDTH+14;
    ctx.setLineDash([32,32]); ctx.lineDashOffset=0;
    ctx.beginPath();
    ctx.moveTo(this.spline[0].x,this.spline[0].y);
    for (let i=1;i<SN;i++) ctx.lineTo(this.spline[i].x,this.spline[i].y);
    ctx.closePath(); ctx.stroke();
    ctx.strokeStyle='#cc1111'; ctx.lineDashOffset=32;
    ctx.beginPath();
    ctx.moveTo(this.spline[0].x,this.spline[0].y);
    for (let i=1;i<SN;i++) ctx.lineTo(this.spline[i].x,this.spline[i].y);
    ctx.closePath(); ctx.stroke();
    ctx.setLineDash([]); ctx.lineDashOffset=0;
    // Road shadow (subtle dark edge under road)
    ctx.strokeStyle='rgba(0,0,0,0.18)'; ctx.lineWidth=ROAD_WIDTH+6;
    ctx.beginPath();
    ctx.moveTo(this.spline[0].x,this.spline[0].y);
    for (let i=1;i<SN;i++) ctx.lineTo(this.spline[i].x,this.spline[i].y);
    ctx.closePath(); ctx.stroke();
    // Asphalt road surface
    ctx.strokeStyle='#2e2e34'; ctx.lineWidth=ROAD_WIDTH;
    ctx.beginPath();
    ctx.moveTo(this.spline[0].x,this.spline[0].y);
    for (let i=1;i<SN;i++) ctx.lineTo(this.spline[i].x,this.spline[i].y);
    ctx.closePath(); ctx.stroke();
    // Road crown — slightly lighter center strip for 3D road feel
    ctx.strokeStyle='rgba(60,60,70,0.35)'; ctx.lineWidth=ROAD_WIDTH*0.45;
    ctx.beginPath();
    ctx.moveTo(this.spline[0].x,this.spline[0].y);
    for (let i=1;i<SN;i++) ctx.lineTo(this.spline[i].x,this.spline[i].y);
    ctx.closePath(); ctx.stroke();
    // Asphalt surface patches (subtle dark variation)
    ctx.fillStyle='rgba(0,0,0,0.07)';
    for (const p of this._asphaltPatches) {
      ctx.save();
      ctx.translate(p.x, p.y); ctx.rotate(p.a);
      ctx.fillRect(-p.w/2, -p.h/2, p.w, p.h);
      ctx.restore();
    }
    // Lane markings — white dashes at 1/3 and 2/3 track width
    ctx.strokeStyle='rgba(255,255,255,0.28)'; ctx.lineWidth=2; ctx.setLineDash([30,26]);
    for (const side of [-1, 1]) {
      ctx.beginPath();
      const off = side * ROAD_WIDTH * 0.30;
      const s0 = this.spline[0], n0 = this.normals[0];
      ctx.moveTo(s0.x + n0.nx*off, s0.y + n0.ny*off);
      for (let i=1;i<SN;i++) {
        const sp = this.spline[i], nn = this.normals[i];
        ctx.lineTo(sp.x + nn.nx*off, sp.y + nn.ny*off);
      }
      ctx.closePath(); ctx.stroke();
    }
    // Center dashed line
    ctx.strokeStyle='rgba(255,224,96,0.60)'; ctx.lineWidth=3.5; ctx.setLineDash([28,22]);
    ctx.beginPath();
    ctx.moveTo(this.spline[0].x,this.spline[0].y);
    for (let i=1;i<SN;i++) ctx.lineTo(this.spline[i].x,this.spline[i].y);
    ctx.closePath(); ctx.stroke();
    ctx.setLineDash([]);
    // Advertising banners alongside the track
    for (const b of this._banners||[]) {
      ctx.save();
      ctx.translate(b.x, b.y); ctx.rotate(b.angle);
      ctx.fillStyle = b.bg;
      ctx.fillRect(-b.w/2, -b.h/2, b.w, b.h);
      ctx.fillStyle = b.fg;
      ctx.font = `bold ${Math.round(b.h*0.55)}px Arial`;
      ctx.textAlign='center'; ctx.textBaseline='middle';
      ctx.fillText(b.text, 0, 0);
      ctx.strokeStyle='rgba(0,0,0,0.4)'; ctx.lineWidth=1;
      ctx.strokeRect(-b.w/2,-b.h/2,b.w,b.h);
      ctx.restore();
    }
    // Checkered start/finish line
    const sf = this.spline[0];
    const sfn = this.normals[0];
    const sq = 14;
    const numSq = Math.ceil(ROAD_WIDTH / sq) + 1;
    const lineAngle = Math.atan2(sfn.ny, sfn.nx);
    ctx.save();
    ctx.translate(sf.x, sf.y);
    ctx.rotate(lineAngle);
    for (let i = 0; i < numSq; i++) {
      for (let row = 0; row < 2; row++) {
        ctx.fillStyle = ((i + row) % 2 === 0) ? '#ffffff' : '#111111';
        ctx.fillRect(-ROAD_WIDTH/2 + i * sq, -sq + row * sq, sq, sq);
      }
    }
    ctx.restore();
    // Trees — more detailed with trunk and highlight
    for (const t of this.trees) {
      // Trunk
      ctx.fillStyle='#5c3d1a';
      ctx.beginPath(); ctx.ellipse(t.x, t.y+t.r*0.4, t.r*0.18, t.r*0.35, 0, 0, PI2); ctx.fill();
      // Outer canopy shadow
      ctx.fillStyle='#1e5012';
      ctx.beginPath(); ctx.arc(t.x+t.r*0.12, t.y+t.r*0.1, t.r, 0, PI2); ctx.fill();
      // Main canopy
      ctx.fillStyle='#2d6e20';
      ctx.beginPath(); ctx.arc(t.x, t.y, t.r, 0, PI2); ctx.fill();
      // Highlight
      ctx.fillStyle='#4a9a32';
      ctx.beginPath(); ctx.arc(t.x-t.r*0.22, t.y-t.r*0.22, t.r*0.62, 0, PI2); ctx.fill();
      // Top glint
      ctx.fillStyle='rgba(120,220,80,0.3)';
      ctx.beginPath(); ctx.arc(t.x-t.r*0.3, t.y-t.r*0.3, t.r*0.3, 0, PI2); ctx.fill();
    }
    // Grandstands — multi-row with roof and flag
    for (const g of this.grandstands) {
      ctx.save(); ctx.translate(g.x, g.y); ctx.rotate(g.angle);
      // Stand base
      ctx.fillStyle='#6a6a7a';
      ctx.fillRect(-g.w/2,-g.h/2,g.w,g.h);
      // Row lines
      const rows = 5;
      ctx.strokeStyle='#9090a8'; ctx.lineWidth=1.2;
      for (let r=1;r<rows;r++) {
        const ry = -g.h/2 + r*(g.h/rows);
        ctx.beginPath(); ctx.moveTo(-g.w/2, ry); ctx.lineTo(g.w/2, ry); ctx.stroke();
      }
      // Spectator dots
      const specColors = ['#e04040','#4080ee','#40cc60','#f0c030','#cc44cc','#ff8844'];
      const rowH = g.h / rows;
      const cols = Math.floor(g.w / 8);
      for (let r = 0; r < rows; r++) {
        const ry = -g.h/2 + r * rowH + rowH * 0.5;
        for (let c = 0; c < cols; c++) {
          const cx2 = -g.w/2 + c * 8 + 4;
          const si = (r * 13 + c * 7) % specColors.length;
          ctx.fillStyle = specColors[si];
          ctx.beginPath(); ctx.arc(cx2, ry, 2, 0, PI2); ctx.fill();
        }
      }
      // Roof
      ctx.fillStyle='#c0c0d0';
      ctx.fillRect(-g.w/2, -g.h/2-8, g.w, 8);
      // Flag on top
      ctx.fillStyle='#e83030';
      ctx.fillRect(-g.w/2, -g.h/2-22, 12, 10);
      ctx.strokeStyle='rgba(0,0,0,0.4)'; ctx.lineWidth=1;
      ctx.strokeRect(-g.w/2,-g.h/2,g.w,g.h);
      ctx.restore();
    }
  }
  drawMinimap(ctx, scale, ox, oy) {
    const SN = this.spline.length;
    ctx.strokeStyle='rgba(100,140,200,0.7)';
    ctx.lineWidth = Math.max(3, ROAD_WIDTH * scale);
    ctx.beginPath();
    const s0 = this.spline[0];
    ctx.moveTo(ox + s0.x*scale, oy + s0.y*scale);
    for (let i=1;i<SN;i++) ctx.lineTo(ox+this.spline[i].x*scale, oy+this.spline[i].y*scale);
    ctx.closePath(); ctx.stroke();
  }
}

// ============================================================
// CAR BASE
// ============================================================
class Car {
  constructor(x, y, heading, color, name) {
    this.x = x; this.y = y;
    this.heading = heading;
    this.color = color;
    this.name = name;
    this.speed = 0;
    this.lateralSpeed = 0;
    this.angularVel = 0;
    this.steerAngle = 0;
    this.wheelbase = 46;
    this.lapCount = 0;
    this.lapProgress = 0;
    this.halfCheck = false;
    this.finished = false;
    this.totalDist = 0;
    this.carConfig = CARS[0];
  }
  // Shared by Player and AI (both keep a 3-slot inventory)
  addItem(type) {
    for (let i=0;i<3;i++) { if (!this.inventory[i]) { this.inventory[i]=type; return; } }
  }
  // Shared wall collision: snap the car back inside the track and reflect the
  // outward velocity component. Returns true when a wall hit actually happened.
  _resolveWall(track, nearest, restitution, speedFactor) {
    const wallDist = ROAD_WIDTH / 2;
    if (nearest.dist <= wallDist) return false;
    const sp = track.spline[nearest.idx];
    const dx = this.x - sp.x, dy = this.y - sp.y;
    const d = Math.sqrt(dx * dx + dy * dy);
    if (d <= 0.1) return false;
    // Outward normal (from track center toward car)
    const nx = dx / d, ny = dy / d;
    // Soft push-back: cap snap per frame to avoid teleporting
    const snap = Math.min(nearest.dist - wallDist, 15);
    this.x -= nx * snap;
    this.y -= ny * snap;
    // World-space velocity
    const vx = Math.cos(this.heading) * this.speed - Math.sin(this.heading) * this.lateralSpeed;
    const vy = Math.sin(this.heading) * this.speed + Math.cos(this.heading) * this.lateralSpeed;
    // Reflect outward velocity component with restitution
    const dot = vx * nx + vy * ny;
    if (dot <= 0) return false;
    const rvx = vx - (1 + restitution) * dot * nx;
    const rvy = vy - (1 + restitution) * dot * ny;
    this.speed        = ( Math.cos(this.heading) * rvx + Math.sin(this.heading) * rvy) * speedFactor;
    this.lateralSpeed = (-Math.sin(this.heading) * rvx + Math.cos(this.heading) * rvy) * speedFactor;
    return true;
  }
  updateLap(track, nearest) {
    const res = nearest || track.nearest(this.x, this.y);
    const newProg = res.idx / track.spline.length;
    // Only arm the half-lap flag when the car actually drives through the middle
    // of the track. Spawning behind the line (AI grid) or reversing across the
    // start line lands at progress ~0.95+ and must NOT count as "passed halfway".
    if (newProg > 0.45 && newProg < 0.55) this.halfCheck = true;
    if (this.halfCheck && newProg < 0.1 && this.lapProgress > 0.85) {
      this.lapCount++;
      this.halfCheck = false;
      if (this.lapCount >= TOTAL_LAPS) this.finished = true;
      return true; // lap completed
    }
    this.lapProgress = newProg;
    // Both terms in pixels (cumLen), so gaps between cars are real distances
    this.totalDist = this.lapCount * track.totalLen + track.cumLen[res.idx];
    return false;
  }
  draw(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.heading + PI/2);
    // Shadow
    ctx.globalAlpha = 0.22;
    ctx.fillStyle = '#000';
    ctx.beginPath(); ctx.ellipse(4, 5, 16, 28, 0, 0, PI2); ctx.fill();
    ctx.globalAlpha = 1;

    // ── Aerodynamic tapered body shape ──
    // Front (negative Y) is the nose, rear (positive Y) is the tail
    ctx.beginPath();
    ctx.moveTo(-7, -29);          // front-left nose tip
    ctx.lineTo( 7, -29);          // front-right nose tip
    ctx.bezierCurveTo(16, -22, 17, -10, 17, 0);   // right side front
    ctx.lineTo(17, 15);           // right side rear
    ctx.bezierCurveTo(17, 24, 12, 27, 8, 27);     // rear-right curve
    ctx.lineTo(-8, 27);           // rear straight
    ctx.bezierCurveTo(-12, 27, -17, 24, -17, 15); // rear-left curve
    ctx.lineTo(-17, 0);           // left side rear
    ctx.bezierCurveTo(-17, -10, -16, -22, -7, -29); // left side front
    ctx.closePath();
    // Body gradient
    const bodyGrad = ctx.createLinearGradient(-17,0,17,0);
    bodyGrad.addColorStop(0,   this._shadeColor(this.color, -40));
    bodyGrad.addColorStop(0.2, this._shadeColor(this.color,  15));
    bodyGrad.addColorStop(0.5, this._shadeColor(this.color,  40));
    bodyGrad.addColorStop(0.8, this._shadeColor(this.color,  15));
    bodyGrad.addColorStop(1,   this._shadeColor(this.color, -40));
    ctx.fillStyle = bodyGrad;
    ctx.fill();
    // Body outline for crispness
    ctx.strokeStyle = 'rgba(0,0,0,0.35)';
    ctx.lineWidth = 1;
    ctx.stroke();

    // Side panel depth shading
    ctx.fillStyle = 'rgba(0,0,0,0.22)';
    ctx.fillRect(-18,-18, 5, 42);
    ctx.fillRect( 13,-18, 5, 42);

    // Racing stripe down the center
    const stripeGrad = ctx.createLinearGradient(0,-29,0,27);
    stripeGrad.addColorStop(0,'rgba(255,255,255,0.38)');
    stripeGrad.addColorStop(0.5,'rgba(255,255,255,0.18)');
    stripeGrad.addColorStop(1,'rgba(255,255,255,0.08)');
    ctx.fillStyle = stripeGrad;
    ctx.fillRect(-4,-27,8,52);

    // Rear spoiler / diffuser
    ctx.fillStyle = this._shadeColor(this.color, -55);
    ctx.fillRect(-16, 23, 32, 5);
    ctx.fillRect(-3, 19, 6, 9);

    // Engine intake scoop on hood
    ctx.fillStyle = 'rgba(0,0,0,0.45)';
    ctx.beginPath(); ctx.roundRect(-3,-27,6,8,2); ctx.fill();

    // Windshield with gradient (reflective look)
    const wGrad = ctx.createLinearGradient(-11,-20,11,-6);
    wGrad.addColorStop(0,'rgba(160,225,255,0.90)');
    wGrad.addColorStop(0.4,'rgba(120,200,255,0.58)');
    wGrad.addColorStop(1,'rgba(80,160,220,0.30)');
    ctx.fillStyle = wGrad;
    ctx.beginPath(); ctx.roundRect(-10,-20,20,13,2); ctx.fill();
    // Windshield glare
    ctx.fillStyle='rgba(255,255,255,0.38)';
    ctx.beginPath(); ctx.roundRect(-8,-19,7,4,1); ctx.fill();

    // Rear window
    const rwGrad = ctx.createLinearGradient(-9,8,9,17);
    rwGrad.addColorStop(0,'rgba(80,160,220,0.45)');
    rwGrad.addColorStop(1,'rgba(60,130,190,0.25)');
    ctx.fillStyle = rwGrad;
    ctx.beginPath(); ctx.roundRect(-9,8,18,9,2); ctx.fill();

    // Wheels — front wheels show steer angle, all with rim highlights
    const wheelDefs = [
      {cx:-18, cy:-18, front:true},
      {cx: 11, cy:-18, front:true},
      {cx:-18, cy: 10, front:false},
      {cx: 11, cy: 10, front:false}
    ];
    for (const wd of wheelDefs) {
      ctx.save();
      ctx.translate(wd.cx + 3.5, wd.cy + 8);
      if (wd.front) ctx.rotate(this.steerAngle * 0.65);
      // Tire
      ctx.fillStyle='#111';
      ctx.beginPath(); ctx.roundRect(-4,-8,8,16,2.5); ctx.fill();
      // Rim
      ctx.fillStyle='rgba(210,210,210,0.70)';
      ctx.beginPath(); ctx.arc(0,0,3,0,PI2); ctx.fill();
      ctx.fillStyle='rgba(255,255,255,0.40)';
      ctx.beginPath(); ctx.arc(-0.8,-0.8,1.4,0,PI2); ctx.fill();
      ctx.restore();
    }
    // Headlights at front — glow effect
    ctx.shadowColor='rgba(255,255,180,0.95)';
    ctx.shadowBlur=10;
    ctx.fillStyle='rgba(255,255,200,0.98)';
    ctx.beginPath(); ctx.arc(-8,-27,3.5,0,PI2); ctx.fill();
    ctx.beginPath(); ctx.arc( 8,-27,3.5,0,PI2); ctx.fill();
    ctx.shadowBlur=0;
    // Tail lights at rear — red glow
    ctx.shadowColor='rgba(220,20,20,0.85)';
    ctx.shadowBlur=7;
    ctx.fillStyle='#ee1111';
    ctx.beginPath(); ctx.roundRect(-12,22,8,5,1); ctx.fill();
    ctx.beginPath(); ctx.roundRect( 4,22,8,5,1); ctx.fill();
    ctx.shadowBlur=0;
    ctx.restore();
    // Name tag
    ctx.fillStyle='rgba(0,0,0,0.55)';
    ctx.beginPath(); ctx.roundRect(this.x-22,this.y-44,44,14,3); ctx.fill();
    ctx.fillStyle='#fff';
    ctx.font='bold 9px Arial';
    ctx.textAlign='center';
    ctx.fillText(this.name, this.x, this.y-33);
  }
  _shadeColor(hex, amount) {
    // Lighten/darken a hex color by amount (-255 to 255). Supports #rrggbb and rgb()/rgba().
    let r=0,g=0,b=0;
    if (typeof hex === 'string' && hex.charAt(0) === '#' && hex.length === 7) {
      r=parseInt(hex.slice(1,3),16); g=parseInt(hex.slice(3,5),16); b=parseInt(hex.slice(5,7),16);
    } else if (typeof hex === 'string' && (hex.startsWith('rgb'))) {
      const m=hex.match(/[\d.]+/g);
      if(m && m.length >= 3){r=+m[0];g=+m[1];b=+m[2];}
      else { return hex; }
    } else { return hex; }
    r=clamp(r+amount,0,255); g=clamp(g+amount,0,255); b=clamp(b+amount,0,255);
    return '#'+[r,g,b].map(v=>v.toString(16).padStart(2,'0')).join('');
  }
}

// ============================================================
// PLAYER
// ============================================================
class Player extends Car {
  constructor(x, y, heading, color, name, carConfig) {
    super(x,y,heading,color,name);
    this.carConfig = carConfig;
    this.hp = 100; this.fuel = 100; this.nitro = 0; this.tires = 100;
    this.score = 0; this.driftScore = 0;
    this.rpm = 800; this.gear = 1;
    this.inventory = [null,null,null];
    this.activeEffects = {};
    this.exhaustTimer = 0;
    this.lapTimes = [];
    this.lapTimer = 0;   // accumulates dt only while racing, so pauses don't inflate lap times
    this.bestLap = null;
    this.lastLapTime = null;
    this.drifting = false;
    this._nitroOn = false;
  }
  useItem(oilSlicks, mines, missiles, particles, audio, allCars) {
    if (!this.inventory[0]) return;
    const type = this.inventory[0];
    this.inventory.shift(); this.inventory.push(null);
    if (audio) audio.playEffect('powerup');
    switch(type) {
      case 'shield': this.activeEffects.shield = 5000; break;
      case 'boost':  this.activeEffects.boost = 3000; break;
      case 'missile':
        if (missiles) {
          // Target the nearest car AHEAD of us — the old version could lock
          // onto a car behind and fire the missile backwards
          let target = null, best = 500;
          for (const c of allCars) {
            const d2 = dist(this.x,this.y,c.x,c.y);
            if (d2 < best && d2 > 10) {
              const aToT = Math.atan2(c.y-this.y, c.x-this.x);
              if (Math.abs(angleDiff(this.heading, aToT)) < PI / 2.5) { best=d2; target=c; }
            }
          }
          const h = target ? Math.atan2(target.y-this.y,target.x-this.x) : this.heading;
          const m = new Missile(this.x,this.y,h,particles);
          m.owner = this;
          missiles.push(m);
          if (audio) audio.playEffect('missile');
        }
        break;
      case 'oil': if (oilSlicks) oilSlicks.push(new OilSlick(this.x,this.y)); break;
      case 'magnet': this.activeEffects.magnet = 4000; break;
      case 'repair':
        this.hp   = Math.min(100, this.hp+40);
        this.fuel = Math.min(100, this.fuel+40);
        break;
      case 'nitro_refill': this.nitro = this.carConfig.nitroMax; break;
      case 'mine':
        if (mines) mines.push(new Mine(this.x - Math.cos(this.heading)*40,
                                       this.y - Math.sin(this.heading)*40, this));
        break;
      case 'lightning': for (const c of allCars) { c.speed*=0.2; c.angularVel+=(Math.random()-0.5)*1; } if (audio) audio.playEffect('thunder'); break;
      case 'ghost_mode': this.activeEffects.ghost_mode = 4000; break;
    }
  }
  draw(ctx) {
    // Boost / nitro flame behind car (y>0 = rear of car)
    if (this.activeEffects.boost || this._nitroOn) {
      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.heading + PI/2);
      const flameLen = this.activeEffects.boost ? 50 + rng(0,15) : 32 + rng(0,10);
      const isNitro = this._nitroOn && !this.activeEffects.boost;
      // Outer flame
      const grd = ctx.createLinearGradient(0, 27, 0, 27 + flameLen);
      if (isNitro) {
        grd.addColorStop(0,   'rgba(120,220,255,0.98)');
        grd.addColorStop(0.35,'rgba(40,140,255,0.75)');
        grd.addColorStop(0.7, 'rgba(0,80,220,0.40)');
        grd.addColorStop(1,   'rgba(0,40,180,0)');
      } else {
        grd.addColorStop(0,   'rgba(255,210,50,0.98)');
        grd.addColorStop(0.35,'rgba(255,100,0,0.75)');
        grd.addColorStop(0.7, 'rgba(200,20,0,0.40)');
        grd.addColorStop(1,   'rgba(160,0,0,0)');
      }
      ctx.fillStyle = grd;
      ctx.beginPath();
      ctx.moveTo(-8, 27); ctx.lineTo(8, 27);
      ctx.bezierCurveTo(6, 27+flameLen*0.5, 3, 27+flameLen*0.85, 0, 27+flameLen);
      ctx.bezierCurveTo(-3, 27+flameLen*0.85, -6, 27+flameLen*0.5, -8, 27);
      ctx.closePath(); ctx.fill();
      // Inner bright core
      const core = ctx.createLinearGradient(0, 27, 0, 27 + flameLen*0.55);
      if (isNitro) {
        core.addColorStop(0,'rgba(255,255,255,0.9)');
        core.addColorStop(1,'rgba(80,200,255,0)');
      } else {
        core.addColorStop(0,'rgba(255,255,200,0.9)');
        core.addColorStop(1,'rgba(255,180,0,0)');
      }
      ctx.fillStyle = core;
      ctx.beginPath();
      ctx.moveTo(-4, 27); ctx.lineTo(4, 27);
      ctx.lineTo(0, 27 + flameLen*0.55);
      ctx.closePath(); ctx.fill();
      ctx.restore();
    }
    // Ghost mode – draw semi-transparent with shimmer
    if (this.activeEffects.ghost_mode) {
      const shimmer = 0.30 + 0.15 * Math.sin(Date.now() * 0.005);
      ctx.save(); ctx.globalAlpha = shimmer;
      super.draw(ctx);
      // Blue shimmer outline
      ctx.translate(this.x, this.y);
      ctx.rotate(this.heading + PI/2);
      ctx.strokeStyle = 'rgba(100,200,255,0.6)';
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.moveTo(-7,-29); ctx.bezierCurveTo(16,-22,17,-10,17,0);
      ctx.lineTo(17,15); ctx.bezierCurveTo(17,24,12,27,8,27);
      ctx.lineTo(-8,27); ctx.bezierCurveTo(-12,27,-17,24,-17,15);
      ctx.lineTo(-17,0); ctx.bezierCurveTo(-17,-10,-16,-22,-7,-29);
      ctx.closePath(); ctx.stroke();
      ctx.restore();
      return;
    }
    // Normal draw
    super.draw(ctx);
    // Shield bubble — pulsing hexagonal energy shield
    if (this.activeEffects.shield) {
      const prog = clamp(this.activeEffects.shield / 5000, 0, 1);
      const pulse = 0.5 + 0.5 * Math.sin(Date.now() * 0.006);
      ctx.save();
      // Outer glow fill
      const shGrad = ctx.createRadialGradient(this.x,this.y,20,this.x,this.y,46);
      shGrad.addColorStop(0,'rgba(80,160,255,0)');
      shGrad.addColorStop(0.7,'rgba(80,160,255,0.08)');
      shGrad.addColorStop(1,`rgba(120,200,255,${0.12 + pulse*0.08})`);
      ctx.fillStyle = shGrad;
      ctx.beginPath(); ctx.arc(this.x, this.y, 46, 0, PI2); ctx.fill();
      // Animated ring
      ctx.globalAlpha = 0.5 + prog * 0.3 + pulse * 0.15;
      ctx.strokeStyle = `hsl(${200 + pulse*20},90%,${60+pulse*20}%)`;
      ctx.lineWidth = 2 + pulse * 1.5;
      ctx.shadowColor = '#80ccff';
      ctx.shadowBlur = 8 + pulse * 6;
      ctx.beginPath(); ctx.arc(this.x, this.y, 40 + pulse * 3, 0, PI2); ctx.stroke();
      // Second inner ring
      ctx.globalAlpha = 0.25 + pulse * 0.15;
      ctx.lineWidth = 1;
      ctx.beginPath(); ctx.arc(this.x, this.y, 30, 0, PI2); ctx.stroke();
      ctx.shadowBlur = 0;
      ctx.restore();
    }
  }
  update(dt, input, track, weather, itemBoxes, oilSlicks, missiles, particles, audio, ghost, allCars) {
    const cfg = this.carConfig;
    this.lapTimer += dt;
    const baseGrip = weather.getGrip() * (this.tires/100*0.4+0.6);
    // Handbrake locks the rear wheels: effective grip drops, the car slides
    // (drift!) and bleeds speed. The old code did the opposite — it KILLED
    // lateral speed, so pulling the handbrake glued the car to the road.
    const grip = baseGrip * (input.handbrake ? 0.5 : 1.0);
    // Update effects
    for (const k of Object.keys(this.activeEffects)) {
      this.activeEffects[k] -= dt;
      if (this.activeEffects[k] <= 0) delete this.activeEffects[k];
    }
    // Steering
    const steerRate = 3.6 * dt * 0.001;
    if (input.steer !== 0) {
      this.steerAngle = clamp(this.steerAngle + input.steer * steerRate, -0.7, 0.7);
    } else {
      this.steerAngle = damp(this.steerAngle, 0, 12, dt * 0.001);
    }
    // Gas / Brake — out of fuel → engine sputters; HP at 0 → engine damaged.
    // Both are fixed by the 🔧 repair item, so the gauges have real stakes.
    const engineMul = (this.fuel <= 0 ? 0.25 : 1) * (this.hp <= 0 ? 0.5 : 1);
    const boostMul = this.activeEffects.boost ? rng(1.45,1.50) : 1.0;
    if (input.gas) this.speed += cfg.accel * boostMul * engineMul * (dt*PHYS.ACCEL);
    else this.speed *= Math.pow(0.4, dt * 0.001);
    if (input.brake) {
      if (this.speed > 1) {
        // Multiplicative braking scaled by the car's BRAKE stat. The old
        // linear "speed -= brake*dt*0.004" removed ~1.4 speed/s — weaker
        // than simply lifting off the gas, so the stat was almost cosmetic.
        const keep = lerp(0.20, 0.08, clamp((cfg.brake - 0.32) / 0.10, 0, 1));
        this.speed *= Math.pow(keep, dt * 0.001);
      } else {
        this.speed -= cfg.brake * (dt * PHYS.ACCEL * 2.5); // reverse gear
      }
    }
    this.speed = clamp(this.speed, -15, cfg.topSpeed * boostMul);
    // Nitro (needs fuel to burn)
    if (input.nitro && this.nitro > 0 && this.fuel > 0) {
      this.speed += 0.4 * (dt*PHYS.ACCEL);
      this.nitro -= 18 * dt * 0.001;
      this._nitroOn = true;
      // Blue/cyan nitro flame particles
      if (particles && Math.random() > 0.35) {
        const ex = this.x - Math.cos(this.heading)*32, ey = this.y - Math.sin(this.heading)*32;
        particles.emit(ex, ey, {
          color: Math.random() > 0.5 ? '#40aaff' : '#00ddff',
          size: rng(3,7), life: 240,
          vx: rng(-40,40), vy: rng(-40,40), drag: 0.88
        });
      }
    } else {
      this.nitro = Math.min(cfg.nitroMax, this.nitro + 6 * dt * 0.001);
      this._nitroOn = false;
    }
    this.nitro = clamp(this.nitro,0,cfg.nitroMax);
    // Handbrake scrubs off forward speed (the slide itself comes from the
    // reduced grip feeding sideForce below)
    if (input.handbrake) this.speed *= Math.pow(0.45, dt * 0.001);
    // Angular velocity
    if (Math.abs(this.speed) > 0.5) {
      const turnRate = (this.speed / this.wheelbase) * Math.tan(this.steerAngle) * grip;
      this.angularVel = damp(this.angularVel, turnRate, 8, dt * 0.001);
    } else {
      // ≈ *0.7/frame @60fps, but dt-based so it feels the same at any FPS
      this.angularVel = damp(this.angularVel, 0, 21, dt * 0.001);
    }
    this.heading += this.angularVel * dt * PHYS.TURN;
    this.angularVel = damp(this.angularVel, 0, 5, dt * 0.001);
    this.angularVel = clamp(this.angularVel, -3, 3);
    // Lateral speed (drift) — with the handbrake the slide persists LONGER
    const latFriction = Math.pow(input.handbrake ? 0.25 : 0.15, dt * 0.001);
    this.lateralSpeed *= latFriction;
    if (Math.abs(this.speed) > 1) {
      // SLIDE_FLOOR guarantees a little slide even at grip=1 (clear weather);
      // without it, drifting was mathematically impossible outside storms
      const slide = Math.max(1 - grip, PHYS.SLIDE_FLOOR);
      this.lateralSpeed += this.angularVel * this.speed * PHYS.SIDE_FORCE * slide;
    }
    this.lateralSpeed = clamp(this.lateralSpeed, -PHYS.LATERAL_MAX, PHYS.LATERAL_MAX);
    // Move
    this.x += (Math.cos(this.heading)*this.speed - Math.sin(this.heading)*this.lateralSpeed) * dt*PHYS.MOVE;
    this.y += (Math.sin(this.heading)*this.speed + Math.cos(this.heading)*this.lateralSpeed) * dt*PHYS.MOVE;
    // Hard wall collision at track boundary (shared logic in Car._resolveWall)
    const nearest = track.nearest(this.x, this.y);
    this._lastNearest = nearest; // reused by HUD helpers (wrong-way indicator)
    if (this._resolveWall(track, nearest, PLAYER_WALL_RESTITUTION, PLAYER_WALL_SPEED_FACTOR)) {
      // Effects with cooldown to avoid triggering every frame
      const now = Date.now();
      if (!this.wallHitTime || now - this.wallHitTime > WALL_HIT_COOLDOWN_MS) {
        this.wallHitTime = now;
        this.hp -= 3;
        this.angularVel += (Math.random() - 0.5) * 0.8;
        if (particles) particles.burst(this.x, this.y, 10, {color:'#ffdd44', minSpd:60, maxSpd:180, life:400, size:3});
        if (audio) audio.playEffect('impact');
        this.pendingShake = (this.pendingShake || 0) + 10;
      }
    }
    // Oil slick — one skid per pass (cooldown). Applying the effect every
    // frame caused violent random jitter instead of a believable slide.
    if (oilSlicks) {
      const nowMs = Date.now();
      for (const o of oilSlicks) {
        if (o.active && dist(this.x,this.y,o.x,o.y) < 50 &&
            (!this._oilHitTime || nowMs - this._oilHitTime > 1200)) {
          this._oilHitTime = nowMs;
          this.lateralSpeed += rng(-45,45);
          this.angularVel += rng(-0.8,0.8);
        }
      }
    }
    // Item pickup
    if (itemBoxes) {
      const pickupR = this.activeEffects.magnet ? 180 : 50;
      for (const ib of itemBoxes) {
        if (ib.active && dist(this.x,this.y,ib.x,ib.y) < pickupR) {
          if (ib.collect(this)) { if (audio) audio.playEffect('pickup'); }
        }
      }
    }
    // Drift detection
    const abslat = Math.abs(this.lateralSpeed);
    if (abslat > 25 && Math.abs(this.speed) > 30) {
      this.drifting = true;
      const ds = abslat * dt * 0.001;
      this.score += ds * 2;
      this.driftScore += ds * 2;
      // Varied tire smoke for drifting — two puffs from rear wheels
      if (particles && Math.random() > 0.45) {
        const ex = this.x - Math.cos(this.heading)*28, ey = this.y - Math.sin(this.heading)*28;
        const side = Math.sin(this.heading);
        const sideX = Math.cos(this.heading + PI/2) * 8;
        const sideY = Math.sin(this.heading + PI/2) * 8;
        const grayVal = Math.floor(rng(155, 200));
        const alpha = rng(0.50, 0.75);
        for (const s of [-1, 1]) {
          particles.emit(ex+sideX*s, ey+sideY*s, {
            color:`rgba(${grayVal},${grayVal},${grayVal},${alpha})`,
            size: rng(6,12), life: rng(500,750),
            vx: rng(-25,25), vy: rng(-25,25), drag: 0.90
          });
        }
      }
    } else { this.drifting = false; }
    // Exhaust smoke
    this.exhaustTimer += dt;
    if (this.exhaustTimer > 70 && input.gas && particles) {
      this.exhaustTimer = 0;
      const ex = this.x - Math.cos(this.heading)*32, ey = this.y - Math.sin(this.heading)*32;
      const g = Math.floor(rng(90,120));
      particles.emit(ex,ey,{color:`rgba(${g},${g},${g},0.38)`,size:rng(4,7),life:rng(350,500),vx:rng(-18,18),vy:rng(-18,18),drag:0.93});
    }
    // Dust when driving on gravel / off-road
    if (particles) {
      const nearDist = nearest.dist; // reuse — no need to query the track again
      if (nearDist > ROAD_WIDTH * 0.45 && Math.abs(this.speed) > 10 && Math.random() > 0.55) {
        particles.emit(this.x, this.y, {
          color: `rgba(${Math.floor(rng(160,200))},${Math.floor(rng(130,160))},${Math.floor(rng(80,110))},${rng(0.3,0.55)})`,
          size: rng(5,9), life: rng(400,700), vx: rng(-20,20), vy: rng(-20,20), drag: 0.91
        });
      }
    }
    // RPM and gear
    const speedRatio = Math.abs(this.speed)/cfg.topSpeed;
    this.rpm = clamp(speedRatio*7000+800, 800, 8000);
    this.gear = Math.max(1, Math.min(6, Math.ceil(speedRatio*6)));
    if (Math.abs(this.speed) < 5) this.gear = 0;
    // Engine audio
    if (audio) audio.setEngine(this.rpm, this.speed);
    // Ghost recording
    if (ghost) ghost.record(this.x, this.y, this.heading);
    // Tires wear with use (drifting chews them up); fuel burns with throttle
    // and nitro. The old rates (0.01/0.04 per second) meant neither gauge
    // could ever matter within a race.
    this.tires -= (0.05 + (this.drifting ? 0.8 : 0)) * dt * 0.001;
    this.fuel  -= ((input.gas ? 0.22 : 0.05) + (this._nitroOn ? 0.30 : 0)) * dt * 0.001;
    this.tires = clamp(this.tires,0,100);
    this.fuel  = clamp(this.fuel,0,100);
    this.hp    = clamp(this.hp,0,100);
    // Lap — record EVERY completed lap, including the first one
    const lapDone = this.updateLap(track, nearest);
    if (lapDone) {
      const lt = this.lapTimer;
      this.lapTimes.push(lt);
      this.lastLapTime = lt;
      if (!this.bestLap || lt < this.bestLap) this.bestLap = lt;
      if (ghost) ghost.saveLap(lt);
      this.lapTimer = 0;
    }
  }
}

// ============================================================
// AI
// ============================================================
class AI extends Car {
  constructor(x, y, heading, color, name, carConfig, skill) {
    super(x,y,heading,color,name);
    this.carConfig = carConfig;
    this.skill = skill;
    this.waypointIdx = 0;
    this.lookahead = Math.round(lerp(8, 18, skill));
    this.inventory = [null,null,null];
    this.hp = 100;
    this.stunTimer = 0;
    this.activeEffects = { shield: 0, ghost_mode: 0, boost: 0, magnet: 0 };
    // Personality traits
    const p = AI_PERSONALITIES[name] || { aggression: 0.65, caution: 0.65, itemStrategy: 0.70, consistency: 0.80 };
    this.aggression   = p.aggression;
    this.caution      = p.caution;
    this.itemStrategy = p.itemStrategy;
    this.consistency  = p.consistency;
    // Internal state
    this._recoveryTimer      = 0;
    this._overtakeTimer      = 0;
    this._overtakeSide       = 0;
    this._targetRacingOffset = 0;
    this._offTrackTimer      = 0;  // how long AI has been stuck/off-track
    this._wrongWayTimer      = 0;  // how long AI has been going wrong way
    this._itemDecisionTimer  = rng(0, 250); // staggers item decisions across AIs
  }

  _getRacePosition(allCars) {
    let pos = 0;
    for (const c of allCars) { if (c !== this && c.totalDist > this.totalDist) pos++; }
    return pos;
  }

  _applyItem(type, allCars, oilSlicks, mines, missiles, particles) {
    switch (type) {
      case 'boost':
        this.speed = Math.min(this.speed * 1.40, this.carConfig.topSpeed);
        this.activeEffects.boost = 3000;
        break;
      case 'nitro_refill':
        this.speed = Math.min(this.speed * 1.35, this.carConfig.topSpeed);
        break;
      case 'repair':
        this.hp = Math.min(100, this.hp + 40);
        break;
      case 'shield':
        this.activeEffects.shield = 5000;
        break;
      case 'ghost_mode':
        this.activeEffects.ghost_mode = 4000;
        break;
      case 'magnet':
        this.activeEffects.magnet = 4000;
        break;
      case 'missile':
        if (missiles && particles) {
          // Target the nearest car ahead of us
          let bestTarget = null, bestDist = 400;
          for (const c of allCars) {
            if (c === this) continue;
            const d = dist(this.x, this.y, c.x, c.y);
            if (d < bestDist && c.totalDist > this.totalDist) {
              const aToT = Math.atan2(c.y - this.y, c.x - this.x);
              if (Math.abs(angleDiff(this.heading, aToT)) < PI * 0.6) {
                bestTarget = c; bestDist = d;
              }
            }
          }
          const mHeading = bestTarget
            ? Math.atan2(bestTarget.y - this.y, bestTarget.x - this.x)
            : this.heading;
          const m = new Missile(this.x, this.y, mHeading, particles);
          m.owner = this;
          missiles.push(m);
        }
        break;
      case 'oil':
        if (oilSlicks) oilSlicks.push(new OilSlick(this.x, this.y));
        break;
      case 'mine':
        if (mines) mines.push(new Mine(this.x - Math.cos(this.heading)*40,
                                       this.y - Math.sin(this.heading)*40, this));
        break;
      case 'lightning':
        for (const c of allCars) {
          if (c !== this) { c.speed *= 0.2; c.angularVel += (Math.random()-0.5)*1; }
        }
        break;
    }
  }

  _useItemStrategic(allCars, oilSlicks, mines, missiles, particles, track, targetIdx) {
    if (!this.inventory[0]) return;
    const type = this.inventory[0];
    const myPos = this._getRacePosition(allCars);
    const numCars = allCars.length;
    const SN = track.spline.length;
    let shouldUse = false;

    switch (type) {
      case 'repair':
        shouldUse = this.hp < 50;
        break;
      case 'shield': {
        // Use when a missile is incoming
        if (missiles) {
          for (const m of missiles) {
            if (m.owner !== this && dist(this.x, this.y, m.x, m.y) < 200) { shouldUse = true; break; }
          }
        }
        // Or when surrounded by 2+ close cars
        if (!shouldUse) {
          let n = 0;
          for (const c of allCars) { if (c !== this && dist(this.x, this.y, c.x, c.y) < 100) n++; }
          if (n >= 2) shouldUse = true;
        }
        break;
      }
      case 'boost':
      case 'nitro_refill': {
        // Use on clear straights (1 = straight, 0 = sharp corner ahead)
        const straightness = 1 - clamp(track.bendAhead(targetIdx, 20) / 0.5, 0, 1);
        shouldUse = straightness > lerp(0.80, 0.65, this.aggression);
        break;
      }
      case 'missile': {
        if (missiles && particles) {
          for (const c of allCars) {
            if (c === this) continue;
            const d = dist(this.x, this.y, c.x, c.y);
            if (d < 300 && c.totalDist > this.totalDist) {
              const aToT = Math.atan2(c.y - this.y, c.x - this.x);
              if (Math.abs(angleDiff(this.heading, aToT)) < PI / 2.5) { shouldUse = true; break; }
            }
          }
        }
        break;
      }
      case 'oil':
      case 'mine': {
        // Drop behind when being closely followed
        for (const c of allCars) {
          if (c === this) continue;
          const d = dist(this.x, this.y, c.x, c.y);
          if (d < 130 && c.totalDist < this.totalDist) {
            const angBehind = Math.atan2(c.y - this.y, c.x - this.x);
            if (Math.abs(angleDiff(this.heading + PI, angBehind)) < PI / 3) { shouldUse = true; break; }
          }
        }
        break;
      }
      case 'lightning':
        shouldUse = myPos >= numCars - 2;
        break;
      case 'ghost_mode': {
        let n = 0;
        for (const c of allCars) { if (c !== this && dist(this.x, this.y, c.x, c.y) < 120) n++; }
        shouldUse = n >= 2;
        break;
      }
      case 'magnet':
        shouldUse = true; // always useful for item collection
        break;
    }

    if (shouldUse && Math.random() < this.itemStrategy) {
      const usedType = this.inventory[0];
      this.inventory.shift();
      this.inventory.push(null);
      this._applyItem(usedType, allCars, oilSlicks, mines, missiles, particles);
    }
  }

  update(dt, track, allCars, itemBoxes, oilSlicks, mines, weather, missiles, particles) {
    // Update active effect timers
    for (const k in this.activeEffects) { if (this.activeEffects[k] > 0) this.activeEffects[k] -= dt; }

    // --- Stun: slow down and skip AI logic ---
    if (this.stunTimer > 0) {
      this.stunTimer -= dt;
      this.speed *= Math.pow(0.046, dt * 0.001); // ≈ *0.95/frame @60fps
      if (this.stunTimer <= 0) this._recoveryTimer = 1500; // gradual rebuild after stun
      return;
    }

    const SN = track.spline.length;
    const nearest = track.nearest(this.x, this.y);
    this.waypointIdx = nearest.idx;

    // === 1. MULTI-POINT LOOKAHEAD PATH PLANNING ===
    // Gauge upcoming curve tightness (0=straight, 1=hairpin) to adapt lookahead
    const upcomingCurv = clamp(track.bendAhead((this.waypointIdx + 2) % SN, 16) / 0.6, 0, 1);
    const baseLookahead = Math.round(lerp(8, 18, this.skill));
    // Longer lookahead on straights, shorter through tight sections
    const adaptiveLookahead = Math.round(lerp(baseLookahead * 1.5, baseLookahead * 0.6, upcomingCurv));
    const targetIdx = (this.waypointIdx + adaptiveLookahead) % SN;

    // Weighted average of multiple lookahead points for smoother steering
    let tX = 0, tY = 0, wSum = 0;
    for (let i = 1; i <= 4; i++) {
      const idx = (this.waypointIdx + Math.round(adaptiveLookahead * i / 4)) % SN;
      const w = i;
      tX += track.spline[idx].x * w;
      tY += track.spline[idx].y * w;
      wSum += w;
    }
    tX /= wSum;
    tY /= wSum;

    // === 10. RACING LINE OPTIMIZATION ===
    // Offset the target toward the inside of upcoming curves
    const turnTightness = clamp(track.bendAhead(targetIdx, 8) / 0.4, 0, 1); // 0=straight, 1=sharp
    if (turnTightness > 0.05) {
      const normal = track.normals[targetIdx];
      const pA = track.spline[(targetIdx - 4 + SN) % SN];
      const pB = track.spline[targetIdx];
      const pC = track.spline[(targetIdx + 4) % SN];
      const t1x = pB.x - pA.x, t1y = pB.y - pA.y;
      const t2x = pC.x - pB.x, t2y = pC.y - pB.y;
      // Z-component of cross product: positive = left turn, negative = right turn
      const cross = t1x * t2y - t1y * t2x;
      const insideSide = cross > 0 ? 1 : -1;
      const racingOffset = turnTightness * ROAD_WIDTH * 0.22 * insideSide * this.skill;
      this._targetRacingOffset = damp(this._targetRacingOffset, racingOffset, 3, dt * 0.001);
      tX += normal.nx * this._targetRacingOffset;
      tY += normal.ny * this._targetRacingOffset;
    } else {
      this._targetRacingOffset = damp(this._targetRacingOffset, 0, 3, dt * 0.001);
    }

    // Steer toward computed target — use damped steering for smoother response
    const desiredH = Math.atan2(tY - this.y, tX - this.x);
    const diff = angleDiff(this.heading, desiredH);
    const targetSteer = clamp(diff * lerp(1.0, 1.4, this.skill), -0.6, 0.6);
    this.steerAngle = damp(this.steerAngle, targetSteer, lerp(6, 9, this.skill), dt * 0.001);

    // === 2. PREDICTIVE BRAKING ===
    // Scan windows further and further ahead; distant corners count less
    // (discounted), so the AI brakes earlier for the closer ones
    let maxFutureTightness = 0;
    const brakeWindows = Math.round(lerp(2, 5, this.skill)); // higher skill sees further
    for (let w = 0; w < brakeWindows; w++) {
      const t = clamp(track.bendAhead((this.waypointIdx + 4 + w * 10) % SN, 10) / 0.5, 0, 1)
              * (1 - w / (brakeWindows + 1));
      if (t > maxFutureTightness) maxFutureTightness = t;
    }
    const immediateTightness = clamp(track.bendAhead(targetIdx, 10) / 0.5, 0, 1);
    const brakeStrength = Math.max(immediateTightness, maxFutureTightness * 0.85);

    // === 7. WEATHER-AWARE GRIP ===
    const weatherGrip = weather ? weather.getGrip() : 1.0;
    const weatherSpeedScale = lerp(0.80, 1.0, weatherGrip);

    // === 4. DRAFTING / SLIPSTREAM ===
    let draftBonus = 0;
    for (const c of allCars) {
      if (c === this) continue;
      const d = dist(this.x, this.y, c.x, c.y);
      if (d < 120 && d > 20) {
        const aToC = Math.atan2(c.y - this.y, c.x - this.x);
        if (Math.abs(angleDiff(this.heading, aToC)) < 0.3 && c.totalDist > this.totalDist) {
          draftBonus = Math.max(draftBonus, lerp(0, 0.08, 1 - d / 120));
        }
      }
    }

    // Target speed: factor in caution, curvature, weather, and drafting
    const cautionScale = lerp(1.0, lerp(0.72, 0.55, this.caution), brakeStrength);
    const maxSpd = this.carConfig.topSpeed * this.skill * cautionScale * weatherSpeedScale * (1 + draftBonus);

    // Acceleration / braking (decays dt-based: same behavior at 60Hz or 144Hz)
    if (this.speed < maxSpd) {
      const recovMult = this._recoveryTimer > 0 ? lerp(0.3, 1.0, 1 - this._recoveryTimer / 1500) : 1.0;
      const hpMul = this.hp <= 0 ? 0.5 : 1; // wrecked engine until it uses a repair
      this.speed += this.carConfig.accel * this.skill * dt * PHYS.ACCEL * recovMult * hpMul;
    } else if (brakeStrength > 0.25) {
      this.speed *= Math.pow(lerp(0.66, 0.12, brakeStrength), dt * 0.001);
    } else {
      this.speed *= Math.pow(0.66, dt * 0.001);
    }
    if (this._recoveryTimer > 0) this._recoveryTimer -= dt;
    this.speed = clamp(this.speed, 0, this.carConfig.topSpeed);

    // === 11. IMPROVED CAR-TO-CAR AVOIDANCE ===
    for (const c of allCars) {
      if (c === this) continue;
      const d2 = dist(this.x, this.y, c.x, c.y);
      if (d2 < 90 && d2 > 0.1) {
        const aToC = Math.atan2(c.y - this.y, c.x - this.x);
        const hDiff = angleDiff(this.heading, aToC);
        // Allow side-by-side racing: skip avoidance when car is beside us at similar speed
        const isBeside = Math.abs(hDiff) > 0.8 && Math.abs(hDiff) < 2.3;
        if (!isBeside) {
          // Steer away via steerAngle (physics-consistent, avoids jerky heading jumps)
          const avoidDir = angleDiff(this.heading, aToC + PI);
          this.steerAngle = clamp(this.steerAngle + avoidDir * ((90 - d2) / 90) * 0.22, -0.6, 0.6);
          // Brake when approaching a slower car from behind
          if (Math.abs(hDiff) < 0.4 && this.speed > c.speed + 15) {
            this.speed = damp(this.speed, c.speed + 10, 3, dt * 0.001);
          }
        }
      }
    }

    // === 5. AGGRESSIVE OVERTAKING ===
    if (this._overtakeTimer <= 0) {
      for (const c of allCars) {
        if (c === this) continue;
        const d = dist(this.x, this.y, c.x, c.y);
        if (d < 110 && d > 30) {
          const aToC = Math.atan2(c.y - this.y, c.x - this.x);
          const hDiff = angleDiff(this.heading, aToC);
          if (Math.abs(hDiff) < 0.45 && c.totalDist > this.totalDist && c.speed <= this.speed * 1.1) {
            if (Math.random() < this.aggression * 0.008 * dt) {
              this._overtakeTimer = 1200;
              this._overtakeSide = hDiff >= 0 ? -1 : 1;
            }
          }
        }
      }
    } else {
      this._overtakeTimer -= dt;
      this.steerAngle = clamp(this.steerAngle + this._overtakeSide * 0.18 * this.aggression, -0.6, 0.6);
    }

    // === 6. DEFENSIVE DRIVING ===
    // When leading or in 2nd, subtly block the racing line
    if (this._getRacePosition(allCars) <= 1 && this._overtakeTimer <= 0) {
      for (const c of allCars) {
        if (c === this) continue;
        const d = dist(this.x, this.y, c.x, c.y);
        if (d < 130) {
          const aToC = Math.atan2(c.y - this.y, c.x - this.x);
          const hDiff = angleDiff(this.heading, aToC + PI);
          if (Math.abs(hDiff) < 0.55 && c.totalDist < this.totalDist) {
            this.steerAngle = clamp(this.steerAngle - hDiff * 0.12 * this.aggression, -0.6, 0.6);
          }
        }
      }
    }

    // === OIL/MINE AVOIDANCE (earlier detection, caution-scaled) ===
    const hazards = [];
    if (oilSlicks) for (const o of oilSlicks) { if (o.active) hazards.push(o); }
    if (mines) for (const mn of mines) { if (mn.active && mn.armTimer <= 0 && mn.owner !== this) hazards.push(mn); }
    if (hazards.length) {
      const nowMs = Date.now();
      for (const o of hazards) {
        const od = dist(this.x, this.y, o.x, o.y);
        const avoidR = lerp(90, 145, this.caution);
        if (od < avoidR) {
          const avoidA = Math.atan2(this.y - o.y, this.x - o.x);
          const str = lerp(0.25, 0.55, this.caution) * (1 - od / avoidR);
          this.steerAngle = clamp(this.steerAngle + angleDiff(this.heading, avoidA) * str, -0.6, 0.6);
          if (od < 60) this.speed *= Math.pow(lerp(0.94, 0.79, this.caution), dt * 0.001);
          // Oil makes the AI skid too — same physics as the player, once per pass
          if (o instanceof OilSlick && od < 45 && (!this._oilHitTime || nowMs - this._oilHitTime > 1200)) {
            this._oilHitTime = nowMs;
            this.lateralSpeed += rng(-35, 35);
            this.angularVel += rng(-0.6, 0.6);
          }
        }
      }
    }

    // Hard wall collision for AI (shared logic in Car._resolveWall)
    if (this._resolveWall(track, nearest, AI_WALL_RESTITUTION, AI_WALL_SPEED_FACTOR)) {
      // === 9. RECOVERY after wall hit: gradual speed rebuild ===
      this._recoveryTimer = 1000;
      // AI takes wall damage too — makes its repair item meaningful
      this.hp = Math.max(0, this.hp - 2);
    }

    // Item pickup (extend range when magnet is active)
    if (itemBoxes) {
      const pickupR = this.activeEffects.magnet > 0 ? 180 : 40;
      for (const ib of itemBoxes) {
        if (ib.active && dist(this.x, this.y, ib.x, ib.y) < pickupR) ib.collect(this);
      }
    }

    // === 3. STRATEGIC ITEM USAGE === (~4 decisions/s; evaluating every frame
    // made the "Math.random() < itemStrategy" gate fire almost instantly)
    this._itemDecisionTimer -= dt;
    if (this._itemDecisionTimer <= 0) {
      this._itemDecisionTimer = 250;
      this._useItemStrategic(allCars, oilSlicks, mines, missiles, particles, track, targetIdx);
    }

    // === 9. SPIN RECOVERY: reduce steering input when spinning ===
    if (Math.abs(this.angularVel) > 1.5) {
      this.steerAngle = damp(this.steerAngle, 0, 110, dt * 0.001);
      this.speed *= Math.pow(0.16, dt * 0.001);
    }

    // === 8. PERSONALITY CONSISTENCY: add subtle noise for erratic AIs ===
    if (this.consistency < 0.95) {
      this.steerAngle += (Math.random() - 0.5) * lerp(0.06, 0, this.consistency);
    }

    // Physics — damp angularVel like player for smoother turning
    const grip = weatherGrip * AI_BASE_GRIP_MULTIPLIER;
    if (Math.abs(this.speed) > 0.5) {
      const targetAngVel = (this.speed/this.wheelbase)*Math.tan(this.steerAngle)*grip;
      this.angularVel = damp(this.angularVel, targetAngVel, 8, dt * 0.001);
    }
    this.heading += this.angularVel * dt * PHYS.TURN;
    this.angularVel = damp(this.angularVel, 0, 5, dt * 0.001);
    this.angularVel = clamp(this.angularVel, -3, 3);
    this.lateralSpeed *= Math.pow(0.15, dt * 0.001);
    this.x += (Math.cos(this.heading)*this.speed - Math.sin(this.heading)*this.lateralSpeed)*dt*PHYS.MOVE;
    this.y += (Math.sin(this.heading)*this.speed + Math.cos(this.heading)*this.lateralSpeed)*dt*PHYS.MOVE;
    // Exhaust smoke (emit from rear of car)
    if (particles && this.speed > 5 && Math.random() > 0.65) {
      const ex = this.x - Math.cos(this.heading)*30, ey = this.y - Math.sin(this.heading)*30;
      particles.emit(ex, ey, {color:'rgba(120,120,120,0.35)',size:4,life:320,vx:rng(-12,12),vy:rng(-12,12),drag:0.94});
    }
    this.updateLap(track, nearest);

    // === OFF-TRACK RECOVERY: teleport AI back if stuck off-track too long ===
    if (nearest.dist > ROAD_WIDTH * 0.6) {
      this._offTrackTimer += dt;
    } else {
      this._offTrackTimer = Math.max(0, this._offTrackTimer - dt * 2);
    }
    if (this._offTrackTimer > 3500) {
      // Respawn on nearest track point, facing the correct direction
      const sp = track.spline[nearest.idx];
      const nextSp = track.spline[(nearest.idx + 3) % track.spline.length];
      this.x = sp.x;
      this.y = sp.y;
      this.heading = Math.atan2(nextSp.y - sp.y, nextSp.x - sp.x);
      this.speed = 10;
      this.lateralSpeed = 0;
      this.angularVel = 0;
      this._offTrackTimer = 0;
      this._recoveryTimer = 2000;
    }

    // === WRONG-WAY DETECTION: reverse heading if going consistently backwards ===
    const forwardDot = Math.cos(this.heading) * Math.cos(desiredH) + Math.sin(this.heading) * Math.sin(desiredH);
    if (forwardDot < -0.5 && this.speed > 5) {
      this._wrongWayTimer += dt;
      if (this._wrongWayTimer > 1800) {
        // Gradually steer toward correct direction
        this.heading = desiredH;
        this.speed *= 0.4;
        this.angularVel = 0;
        this._wrongWayTimer = 0;
      }
    } else {
      this._wrongWayTimer = Math.max(0, this._wrongWayTimer - dt);
    }
  }
}

// ============================================================
// TACHOMETER
// ============================================================
function drawTachometer(ctx, rpm, maxRpm, gear, speed) {
  const W = 135, CX = W/2, CY = W/2, R = 54;
  ctx.clearRect(0,0,W,W);
  // Background
  ctx.fillStyle='rgba(8,10,18,0.85)';
  ctx.beginPath(); ctx.arc(CX,CY,R+8,0,PI2); ctx.fill();
  // Color arcs
  const startA = 0.75*PI, endA = 2.25*PI, sweep = endA-startA;
  const rpmRatio = clamp(rpm/maxRpm,0,1);
  const zones = [[0,0.6,'#20c040'],[0.6,0.8,'#f0c030'],[0.8,1.0,'#e83030']];
  for (const [lo,hi,col] of zones) {
    ctx.strokeStyle=col; ctx.lineWidth=6;
    ctx.beginPath();
    ctx.arc(CX,CY,R,startA+sweep*lo,startA+sweep*Math.min(hi,rpmRatio));
    ctx.stroke();
  }
  // Tick marks
  for (let i=0;i<=8;i++) {
    const a = startA + sweep*(i/8);
    const inner = R-10, outer = R+2;
    ctx.strokeStyle='#aaa'; ctx.lineWidth=2;
    ctx.beginPath();
    ctx.moveTo(CX+Math.cos(a)*inner,CY+Math.sin(a)*inner);
    ctx.lineTo(CX+Math.cos(a)*outer,CY+Math.sin(a)*outer);
    ctx.stroke();
  }
  // Needle
  const needleA = startA + sweep*rpmRatio;
  ctx.strokeStyle='#ff2222'; ctx.lineWidth=2;
  ctx.beginPath();
  ctx.moveTo(CX,CY);
  ctx.lineTo(CX+Math.cos(needleA)*(R-4),CY+Math.sin(needleA)*(R-4));
  ctx.stroke();
  // Center cap
  ctx.fillStyle='#333';
  ctx.beginPath(); ctx.arc(CX,CY,6,0,PI2); ctx.fill();
  // Gear & speed text
  ctx.fillStyle='#fff'; ctx.font='bold 16px Arial'; ctx.textAlign='center';
  ctx.fillText(gear || 'N', CX, CY+6);
  ctx.font='10px Arial'; ctx.fillStyle='#aaa';
  ctx.fillText(Math.round(speed)+'km/h', CX, CY+22);
}

// ============================================================
// SPEED LINES
// ============================================================
function drawSpeedLines(ctx, W, H, speedRatio) {
  if (speedRatio < 0.7) return;
  const alpha = (speedRatio-0.7)/0.3;
  const cx = W/2, cy = H/2;
  const count = 14;
  ctx.save();
  ctx.strokeStyle=`rgba(255,255,255,${alpha*0.35})`;
  ctx.lineWidth=1.5;
  for (let i=0;i<count;i++) {
    const a = (i/count)*PI2 + Date.now()*0.0003;
    ctx.beginPath();
    ctx.moveTo(cx+Math.cos(a)*30, cy+Math.sin(a)*30);
    ctx.lineTo(cx+Math.cos(a)*160, cy+Math.sin(a)*160);
    ctx.stroke();
  }
  ctx.restore();
}

// ============================================================
// NOTIFICATIONS
// ============================================================
class Notifications {
  constructor() { this.items = []; }
  add(text, color='#fff', duration=2000) {
    this.items.push({text, color, life:duration, maxLife:duration, scale:0, y:0});
  }
  update(dt) {
    for (let i=this.items.length-1;i>=0;i--) {
      const n = this.items[i];
      n.life -= dt;
      if (n.life <= 0) { this.items.splice(i,1); continue; }
      const t = n.life/n.maxLife;
      n.scale = t < 0.9 ? (t > 0.1 ? 1 : t/0.1) : (1-t)/0.1;
      n.scale = clamp(n.scale,0,1);
    }
  }
  draw(ctx, W, H) {
    const cx = W/2, cy = H/2;
    this.items.forEach((n,i) => {
      ctx.save();
      ctx.translate(cx, cy-20-i*32);
      ctx.scale(n.scale, n.scale);
      ctx.globalAlpha = n.scale;
      ctx.font='bold 22px Arial';
      ctx.textAlign='center';
      ctx.strokeStyle='rgba(0,0,0,0.7)'; ctx.lineWidth=4;
      ctx.strokeText(n.text,0,0);
      ctx.fillStyle=n.color;
      ctx.fillText(n.text,0,0);
      ctx.restore();
    });
    ctx.globalAlpha=1;
  }
}

// ============================================================
// TOUCH CONTROLS
// ============================================================
class TouchControls {
  constructor() {
    this.active = IS_TOUCH;
    this.steer = 0; this.gas = false; this.brake = false; this.nitro = false; this.useItem = false;
    this.joyBase = {x:0,y:0}; this.joyThumb = {x:0,y:0}; this.joyId = null;
    this.btnIds = {gas:null,brk:null,nit:null,itm:null};
    this.btnState = {gas:false,brk:false,nit:false,itm:false};
    if (IS_TOUCH) this._bind();
  }
  _bind() {
    window.addEventListener('touchstart', e => this._onStart(e), {passive:false});
    window.addEventListener('touchmove',  e => this._onMove(e), {passive:false});
    window.addEventListener('touchend',   e => this._onEnd(e), {passive:false});
  }
  _btnRect(W,H,idx) {
    const bx = W-170, by = H-170;
    const bw=70, bh=70, gap=8;
    const col=idx%2, row=Math.floor(idx/2);
    return {x:bx+col*(bw+gap),y:by+row*(bh+gap),w:bw,h:bh};
  }
  _onStart(e) {
    e.preventDefault();
    const W=window.innerWidth, H=window.innerHeight;
    for (const t of e.changedTouches) {
      const tx=t.clientX,ty=t.clientY;
      if (tx<W/2) {
        this.joyId=t.identifier;
        this.joyBase={x:tx,y:ty};
        this.joyThumb={x:tx,y:ty};
      } else {
        for (let i=0;i<4;i++) {
          const r=this._btnRect(W,H,i);
          if (tx>=r.x&&tx<=r.x+r.w&&ty>=r.y&&ty<=r.y+r.h) {
            const k=['gas','brk','nit','itm'][i];
            this.btnIds[k]=t.identifier; this.btnState[k]=true;
          }
        }
      }
    }
  }
  _onMove(e) {
    e.preventDefault();
    for (const t of e.changedTouches) {
      if (t.identifier===this.joyId) {
        this.joyThumb={x:t.clientX,y:t.clientY};
        const dx=this.joyThumb.x-this.joyBase.x;
        this.steer=clamp(dx/50,-1,1);
      }
    }
  }
  _onEnd(e) {
    e.preventDefault();
    for (const t of e.changedTouches) {
      if (t.identifier===this.joyId) { this.joyId=null; this.steer=0; }
      for (const k of ['gas','brk','nit','itm']) {
        if (this.btnIds[k]===t.identifier) { this.btnIds[k]=null; this.btnState[k]=false; }
      }
    }
  }
  getInput() {
    return { steer:this.steer, gas:this.btnState.gas, brake:this.btnState.brk, nitro:this.btnState.nit, useItem:this.btnState.itm };
  }
  draw(ctx, W, H) {
    if (!this.active) return;
    ctx.save();
    // Joystick
    ctx.globalAlpha=0.35;
    ctx.fillStyle='#aaa';
    ctx.beginPath(); ctx.arc(this.joyBase.x||120, this.joyBase.y||(H-120), 50,0,PI2); ctx.fill();
    ctx.fillStyle='#fff';
    ctx.beginPath(); ctx.arc(this.joyThumb.x||(this.joyBase.x||120), this.joyThumb.y||(this.joyBase.y||(H-120)), 24,0,PI2); ctx.fill();
    // Buttons
    const labels=['GAS','BRK','NIT','ITM'];
    const colors=['#20c040','#e83030','#9040cc','#f0c030'];
    for (let i=0;i<4;i++) {
      const r=this._btnRect(W,H,i);
      ctx.globalAlpha=0.45;
      ctx.fillStyle=colors[i];
      ctx.beginPath(); ctx.roundRect(r.x,r.y,r.w,r.h,8); ctx.fill();
      ctx.globalAlpha=0.9;
      ctx.fillStyle='#fff'; ctx.font='bold 14px Arial'; ctx.textAlign='center';
      ctx.fillText(labels[i],r.x+r.w/2,r.y+r.h/2+5);
    }
    ctx.globalAlpha=1;
    ctx.restore();
  }
}

// ============================================================
// MENU SYSTEM
// ============================================================
class MenuSystem {
  constructor() {
    this.sel = {car:0,color:0,track:0,diff:1,weather:0};
    this._load();
    this._buildUI();
    this._bindEvents();
  }
  _load() {
    try { const d=JSON.parse(localStorage.getItem('racingPrefs')); if(d) Object.assign(this.sel,d); } catch(e){}
    // Clamp stored indices — prefs saved by an older version with different
    // list sizes would otherwise produce CARS[x] === undefined and crash
    this.sel.car     = clamp(this.sel.car     | 0, 0, CARS.length - 1);
    this.sel.color   = clamp(this.sel.color   | 0, 0, COLORS.length - 1);
    this.sel.track   = clamp(this.sel.track   | 0, 0, TRACKS.length - 1);
    this.sel.diff    = clamp(this.sel.diff    | 0, 0, DIFFICULTIES.length - 1);
    this.sel.weather = clamp(this.sel.weather | 0, 0, WEATHERS.length - 1);
  }
  _save() {
    try { localStorage.setItem('racingPrefs',JSON.stringify(this.sel)); } catch(e){}
  }
  _buildUI() {
    this._buildSel('carSel', CARS.map(c=>c.name), 'car');
    this._buildColors();
    this._buildSel('trkSel', TRACKS.map(t=>t.name), 'track');
    this._buildSel('difSel', DIFFICULTIES.map(d=>d.name), 'diff');
    this._buildSel('wxSel', WEATHERS, 'weather');
    this._updateStats();
  }
  _buildSel(id, items, key) {
    const el = document.getElementById(id);
    if (!el) return;
    if (key === 'track') {
      el.innerHTML = items.map((name,i) => {
        let bestLabel = '';
        try {
          const stored = localStorage.getItem('bestLap_' + name);
          if (stored) bestLabel = ` <span style="font-size:0.6rem;color:#88cc88">⏱${formatTime(parseInt(stored))}</span>`;
        } catch(e) {}
        return `<button class="menu-btn${this.sel[key]===i?' selected':''}" data-key="${key}" data-idx="${i}">${name}${bestLabel}</button>`;
      }).join('');
    } else {
      el.innerHTML = items.map((name,i) =>
        `<button class="menu-btn${this.sel[key]===i?' selected':''}" data-key="${key}" data-idx="${i}">${name}</button>`
      ).join('');
    }
  }
  _buildColors() {
    const el = document.getElementById('colSel');
    if (!el) return;
    // Real <button>s: focusable via keyboard and announced by screen readers
    el.innerHTML = COLORS.map((c,i) =>
      `<button type="button" class="color-btn${this.sel.color===i?' selected':''}" data-key="color" data-idx="${i}" style="background:${c}" aria-label="Car color: ${COLOR_NAMES[i] || 'color ' + (i+1)}"></button>`
    ).join('');
  }
  _updateStats() {
    const cfg = CARS[this.sel.car];
    // Normalize by the best value among the cars, so the strongest stat
    // shows a full bar (dividing by arbitrary 300/0.4/0.5 capped at ~65%)
    const maxTop = Math.max(...CARS.map(c=>c.topSpeed));
    const maxAcc = Math.max(...CARS.map(c=>c.accel));
    const maxBrk = Math.max(...CARS.map(c=>c.brake));
    const maxGrp = Math.max(...CARS.map(c=>c.grip));
    const fields = {stSpeed:cfg.topSpeed/maxTop,stAccel:cfg.accel/maxAcc,stBrake:cfg.brake/maxBrk,stGrip:cfg.grip/maxGrp};
    for (const [id,val] of Object.entries(fields)) {
      const el=document.getElementById(id);
      if(el) el.style.width=Math.round(val*100)+'%';
    }
  }
  _bindEvents() {
    const inner=document.getElementById('menuInner');
    if (!inner) return;
    inner.addEventListener('click', e => {
      const el=e.target.closest('[data-key]');
      if (!el) return;
      const key=el.dataset.key, idx=+el.dataset.idx;
      this.sel[key]=idx; this._save();
      // Refresh buttons
      ['carSel','trkSel','difSel','wxSel'].forEach(sid => {
        const cont=document.getElementById(sid);
        if (!cont) return;
        cont.querySelectorAll('.menu-btn').forEach((b,i) => b.classList.toggle('selected', i===this.sel[b.dataset.key]));
      });
      document.querySelectorAll('.color-btn').forEach((b,i)=>b.classList.toggle('selected',i===this.sel.color));
      this._updateStats();
    });
  }
  getConfig() {
    return {
      carConfig: CARS[this.sel.car],
      color: COLORS[this.sel.color],
      track: TRACKS[this.sel.track],
      difficulty: DIFFICULTIES[this.sel.diff],
      weather: WEATHERS[this.sel.weather]
    };
  }
}

// ============================================================
// INPUT STATE
// ============================================================
class InputState {
  constructor() {
    this.keys = {};
    this.steer=0; this.gas=false; this.brake=false; this.handbrake=false;
    this.nitro=false; this.useItem=false; this.rearView=false;
    // Set by Game each frame. Game keys (Tab/Space/arrows) are only hijacked
    // while racing — otherwise Tab/Space couldn't navigate the menu buttons.
    this.captureGameKeys = false;
    window.addEventListener('keydown', e => {
      this.keys[e.code]=true;
      if (e.code==='KeyE') this.useItem=true;
      if (e.code==='Tab' && this.captureGameKeys) this.rearView=true;
      if (this.captureGameKeys &&
          ['Space','Tab','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.code)) {
        e.preventDefault();
      }
    });
    window.addEventListener('keyup', e => {
      this.keys[e.code]=false;
      if (e.code==='KeyE') this.useItem=false;
      if (e.code==='Tab')  this.rearView=false;
    });
  }
  poll(touchInput) {
    const k=this.keys;
    let steer=0;
    if (k['ArrowLeft']||k['KeyA']) steer=-1;
    if (k['ArrowRight']||k['KeyD']) steer=1;
    if (touchInput) steer = steer || touchInput.steer;
    this.steer=steer;
    this.gas      = !!(k['ArrowUp']||k['KeyW']||(touchInput&&touchInput.gas));
    this.brake    = !!(k['ArrowDown']||k['KeyS']||(touchInput&&touchInput.brake));
    this.handbrake= !!(k['Space']);
    this.nitro    = !!(k['ShiftLeft']||k['ShiftRight']||(touchInput&&touchInput.nitro));
    // Edge detection: trigger only on the press, not while held — otherwise
    // holding the touch button dumped all 3 items in 3 frames
    if (touchInput) {
      if (touchInput.useItem && !this._prevTouchItem) this.useItem = true;
      this._prevTouchItem = touchInput.useItem;
    }
  }
}

// ============================================================
// GAME
// ============================================================
class Game {
  constructor() {
    this.canvas = document.getElementById('game');
    this.ctx = this.canvas.getContext('2d');
    this.W = 0; this.H = 0;
    this.dpr = window.devicePixelRatio || 1;
    this.state = 'menu'; // menu|countdown|racing|paused|finished
    this.audio   = new AudioEngine();
    this.particles= new Particles();
    this.tireMarks= new TireMarks();
    this.weather  = new Weather();
    this.ghost    = new Ghost();
    this.notifs   = new Notifications();
    this.touch    = new TouchControls();
    this.menu     = new MenuSystem();
    this.input    = new InputState();
    this.track    = null;
    this.player   = null;
    this.ais      = [];
    this.oilSlicks= [];
    this.mines    = [];
    this.missiles = [];
    this.shake    = 0;
    this.cameraX  = 3200; this.cameraY = 2800;
    this.raceTime = 0;
    this.fps      = 60;
    this._fpsArr  = [];
    this._lastTime= 0;
    this._raf     = null;
    this._useItemFlag = false;
    this._hornCooldown = 0;
    this._resize();
    window.addEventListener('resize', () => this._resize());
    window.addEventListener('blur',   () => { if (this.state==='racing') this._pause(); });
    if (IS_TOUCH) document.body.classList.add('touch-device');
    // Start button
    const startBtn = document.getElementById('startBtn');
    if (startBtn) startBtn.addEventListener('click', () => this._startRace());
    // Finish button
    const finBtn = document.getElementById('finBtn');
    if (finBtn) finBtn.addEventListener('click', () => this._toMenu());
    // Play Again button
    const playAgainBtn = document.getElementById('playAgainBtn');
    if (playAgainBtn) playAgainBtn.addEventListener('click', () => {
      document.getElementById('finishScreen').classList.add('hide');
      this._initRace(this.menu.getConfig());
    });
    // Sound button
    const sndBtn = document.getElementById('soundBtn');
    if (sndBtn) sndBtn.addEventListener('click', () => this._toggleSound());
    // Keyboard shortcuts
    window.addEventListener('keydown', e => {
      if (e.code==='KeyP') {
        if (this.state==='racing') this._pause();
        else if (this.state==='paused') this._resume();
      }
      if (e.code==='KeyM') this._toggleSound();
      if (e.code==='KeyE' && this.state==='racing') this._useItemFlag=true;
    });
    this._loop(0);
  }
  _resize() {
    this.W = window.innerWidth;
    this.H = window.innerHeight;
    this.canvas.width  = this.W * this.dpr;
    this.canvas.height = this.H * this.dpr;
    this.canvas.style.width  = this.W + 'px';
    this.canvas.style.height = this.H + 'px';
    this.ctx.scale(this.dpr, this.dpr);
  }
  _toggleSound() {
    const on = this.audio.toggle();
    const btn = document.getElementById('soundBtn');
    if (btn) { btn.textContent = on ? '🔊' : '🔇'; btn.setAttribute('aria-pressed', String(on)); }
  }
  _startRace() {
    const cfg = this.menu.getConfig();
    this.audio.start();
    this.audio.setIdle();   // keep the engine quiet during the countdown
    // Drop focus from the START button so Space/Enter can't re-trigger it mid-race
    if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
    this._initRace(cfg);
  }
  _initRace(cfg) {
    if (this.state === 'countdown') return; // ignore double-clicks on START / PLAY AGAIN
    document.getElementById('menuScreen').classList.add('hide');
    document.getElementById('finishScreen').classList.add('hide');
    this.track = new Track(cfg.track);
    this.weather = new Weather(); // fresh state — no leftover storm/cycle timers
    this.weather.setWeather(cfg.weather);
    const start = this.track.spline[0];
    const startH = Math.atan2(this.track.spline[1].y-start.y, this.track.spline[1].x-start.x);
    this.player = new Player(start.x, start.y + 60, startH, cfg.color, 'You', cfg.carConfig);
    this.ais = [];
    const numAI = 5;
    for (let i=0;i<numAI;i++) {
      const aiName = AI_NAMES[i % AI_NAMES.length];
      const aiColor = AI_COLORS[i % AI_COLORS.length];
      const aiCfg = CARS[i % CARS.length];
      const offset = (i+1) * 55;
      const ax = start.x - Math.cos(startH)*offset;
      const ay = start.y - Math.sin(startH)*offset;
      const ai = new AI(ax, ay+rng(-15,15), startH, aiColor, aiName, aiCfg, cfg.difficulty.skill);
      this.ais.push(ai);
    }
    this.oilSlicks = [];
    this.mines     = [];
    this.missiles  = [];
    this.particles  = new Particles();
    this.tireMarks  = new TireMarks();
    // Keep the ghost only when re-racing the same track — a ghost recorded
    // on another track would replay straight through the grass
    this.ghost.reset(this._lastTrackName === cfg.track.name);
    this._lastTrackName = cfg.track.name;
    this.ghost.startPlayback();
    this.raceTime = 0;
    this.shake    = 0;
    this._fuelWarned = false;
    this._hpWarned   = false;
    this._colCooldowns = {};
    this._pbSig = null;
    this.state    = 'countdown';
    this._countdown();
  }
  _countdown() {
    const el   = document.getElementById('countdownScreen');
    const num  = document.getElementById('cntNum');
    el.classList.remove('hide');
    let count = 3;
    const COLORS_CD = {3:'#ff4040', 2:'#f0c030', 1:'#ff8020', 0:'#60ff60'};
    const tick = () => {
      num.textContent = count > 0 ? count : 'GO!';
      num.style.color = COLORS_CD[count] || '#ffe060';
      num.style.textShadow = `0 0 40px ${COLORS_CD[count]}aa, 0 4px 0 rgba(0,0,0,0.4)`;
      num.style.animation = 'none';
      void num.offsetWidth;
      num.style.animation = 'cntPulse 0.4s ease-out';
      if (count > 0) this.audio.playEffect('countdown');
      else this.audio.playEffect('go');
      if (count > 0) { count--; setTimeout(tick, 1000); }
      else { setTimeout(() => { el.classList.add('hide'); this.state='racing'; }, 700); }
    };
    tick();
  }
  _pause() {
    this.state='paused';
    this.audio.setIdle();
    document.getElementById('pauseScreen').classList.remove('hide');
  }
  _resume() {
    this.state='racing';
    document.getElementById('pauseScreen').classList.add('hide');
  }
  _toMenu() {
    document.getElementById('finishScreen').classList.add('hide');
    document.getElementById('menuScreen').classList.remove('hide');
    this.state='menu';
    this.audio.setIdle();
    this.player=null; this.ais=[]; this.track=null;
  }
  _update(dt) {
    // Keep updating particles even after finish for confetti effect
    if (this.state === 'finished') { this.particles.update(dt); this.notifs.update(dt); return; }
    if (this.state !== 'racing') return;
    this.raceTime += dt;
    // Input
    const ti = this.touch.active ? this.touch.getInput() : null;
    this.input.poll(ti);
    if (this._useItemFlag || this.input.useItem) {
      this.player.useItem(this.oilSlicks, this.mines, this.missiles, this.particles, this.audio, this.ais);
      this._useItemFlag=false;
      this.input.useItem=false;
    }
    // Horn sound (H key)
    if (this.input.keys['KeyH']) {
      if (!this._hornCooldown) {
        this.audio.playEffect('horn');
        this._hornCooldown = 600;
      }
    }
    if (this._hornCooldown) this._hornCooldown = Math.max(0, this._hornCooldown - dt);
    // Weather
    this.weather.update(dt, this.W, this.H);
    // Player
    this.player.update(dt, this.input, this.track, this.weather, this.track.itemBoxes, this.oilSlicks, this.missiles, this.particles, this.audio, this.ghost, this.ais);
    // Apply wall-hit shake accumulated in player update
    if (this.player.pendingShake) { this.shake += this.player.pendingShake; this.player.pendingShake = 0; }
    // Warn once when fuel/HP hit zero (both now have real consequences)
    if (this.player.fuel <= 0) {
      if (!this._fuelWarned) { this._fuelWarned = true; this.notifs.add('⛽ OUT OF FUEL — grab a 🔧 repair!', '#ff9040', 3000); }
    } else this._fuelWarned = false;
    if (this.player.hp <= 0) {
      if (!this._hpWarned) { this._hpWarned = true; this.notifs.add('💥 ENGINE DAMAGED — grab a 🔧 repair!', '#ff5050', 3000); }
    } else this._hpWarned = false;
    // Add tire marks if drifting
    if (this.player.drifting) this.tireMarks.add(this.player.x, this.player.y, this.player.heading);
    // AIs
    const allCars = [this.player, ...this.ais];
    for (const ai of this.ais) {
      ai.update(dt, this.track, allCars, this.track.itemBoxes, this.oilSlicks, this.mines, this.weather, this.missiles, this.particles);
      // Rubber-banding: AI far behind gets a small speed boost; far ahead slows
      // slightly. Skipped in the opening seconds: AIs spawn behind the start
      // line, so their totalDist is briefly ~a lap "ahead" until they cross it.
      if (this.raceTime > 5000) {
        const gap = this.player.totalDist - ai.totalDist;
        if (gap > RUBBER_BAND_THRESHOLD) ai.speed *= (1 + clamp((gap - RUBBER_BAND_THRESHOLD) / RUBBER_BAND_CATCH_UP, 0, RUBBER_BAND_MAX_BOOST));
        else if (gap < -RUBBER_BAND_THRESHOLD) ai.speed *= (1 - clamp((-gap - RUBBER_BAND_THRESHOLD) / RUBBER_BAND_SLOW_DOWN, 0, RUBBER_BAND_MAX_SLOW));
      }
    }
    // Item boxes update
    for (const ib of this.track.itemBoxes) ib.update(dt);
    // Oil slicks
    for (const o of this.oilSlicks) o.update(dt);
    this.oilSlicks = this.oilSlicks.filter(o=>o.active);
    // Mines
    for (const mn of this.mines) mn.update(dt, allCars, this.particles, this.audio);
    this.mines = this.mines.filter(m=>m.active);
    // Missiles (each missile already ignores its owner internally)
    for (const m of this.missiles) m.update(dt, allCars);
    this.missiles = this.missiles.filter(m=>m.active);
    // Collisions — cooldown per pair to prevent frame-by-frame chaos
    const now = Date.now();
    if (!this._colCooldowns) this._colCooldowns = {};
    for (let i=0;i<allCars.length;i++) {
      for (let j=i+1;j<allCars.length;j++) {
        const a=allCars[i], b=allCars[j];
        const d=dist(a.x,a.y,b.x,b.y);
        const collisionR = 46;
        if (d < collisionR && d > 0.1) {
          const key = i + ':' + j;
          const lastHit = this._colCooldowns[key] || 0;
          const nx=(a.x-b.x)/d, ny=(a.y-b.y)/d;
          // Soft separation: push only 40% of overlap per frame
          const sep = (collisionR - d) * 0.4;
          a.x += nx*sep; a.y += ny*sep;
          b.x -= nx*sep; b.y -= ny*sep;
          if (now - lastHit > 300) {
            this._colCooldowns[key] = now;
            // Impulse-based speed response using relative velocity along normal
            const avx = Math.cos(a.heading)*a.speed - Math.sin(a.heading)*a.lateralSpeed;
            const avy = Math.sin(a.heading)*a.speed + Math.cos(a.heading)*a.lateralSpeed;
            const bvx = Math.cos(b.heading)*b.speed - Math.sin(b.heading)*b.lateralSpeed;
            const bvy = Math.sin(b.heading)*b.speed + Math.cos(b.heading)*b.lateralSpeed;
            const relVn = (avx-bvx)*nx + (avy-bvy)*ny;
            if (relVn > 0) {
              const imp = relVn * 0.55;
              const aSpeed = (Math.cos(a.heading)*(avx - imp*nx) + Math.sin(a.heading)*(avy - imp*ny));
              const bSpeed = (Math.cos(b.heading)*(bvx + imp*nx) + Math.sin(b.heading)*(bvy + imp*ny));
              a.speed = aSpeed * 0.88;
              b.speed = bSpeed * 0.88;
              // Gentle deflection based on impact angle — no random spin
              const impactAngle = Math.atan2(ny, nx);
              a.angularVel += angleDiff(a.heading, impactAngle) * 0.08;
              b.angularVel -= angleDiff(b.heading, impactAngle) * 0.08;
            }
            const mx=(a.x+b.x)/2, my=(a.y+b.y)/2;
            // More varied collision sparks — mix of yellow, orange, white
            this.particles.burst(mx,my,6,{color:'#ffff80',minSpd:80,maxSpd:180,life:380,size:4});
            this.particles.burst(mx,my,4,{color:'#ff8800',minSpd:60,maxSpd:140,life:300,size:3});
            this.particles.burst(mx,my,3,{color:'#ffffff',minSpd:100,maxSpd:220,life:250,size:2});
            // Both cars take damage unless protected — symmetric with the
            // player, and it makes the AI's repair item meaningful
            for (const car of [a, b]) {
              const fx = car.activeEffects || {};
              if ((fx.shield || 0) > 0 || (fx.ghost_mode || 0) > 0) continue;
              if (car.hp !== undefined) car.hp = Math.max(0, car.hp - 3);
            }
            if (a===this.player||b===this.player) {
              if (!this.player.activeEffects.shield && !this.player.activeEffects.ghost_mode) {
                this.shake+=8;
                this.audio.playEffect('impact');
              }
            }
          }
        }
      }
    }
    // Ghost
    const gf=this.ghost.getFrame();
    this._ghostFrame=gf;
    // Particles & tire marks
    this.particles.update(dt);
    this.tireMarks.update(dt);
    if (Math.random()<0.01) this.tireMarks.prune();
    this.notifs.update(dt);
    // Smooth camera with velocity lookahead
    const rv = this.input.rearView;
    const dir = rv ? -1 : 1;
    const lookahead = rv ? CAMERA_LOOKAHEAD_REV : CAMERA_LOOKAHEAD_FWD;
    const targetCamX = this.player.x + dir * Math.cos(this.player.heading) * lookahead;
    const targetCamY = this.player.y + dir * Math.sin(this.player.heading) * lookahead;
    this.cameraX = damp(this.cameraX, targetCamX, CAMERA_DAMPING, dt * 0.001);
    this.cameraY = damp(this.cameraY, targetCamY, CAMERA_DAMPING, dt * 0.001);
    // Speed-dependent camera zoom: zoom out slightly at high speed
    const speedRatio = clamp(Math.abs(this.player.speed) / this.player.carConfig.topSpeed, 0, 1);
    const targetZoom = lerp(1.0, 0.82, speedRatio * speedRatio);
    this._cameraZoom = damp(this._cameraZoom || 1.0, targetZoom, 3, dt * 0.001);
    this.shake *= Math.pow(0.0005, dt * 0.001); // ≈ *0.88/frame @60fps, FPS-independent
    // HUD — throttled to ~15 updates/s; touching the DOM every frame is wasted work
    this._hudTimer = (this._hudTimer || 0) + dt;
    if (this._hudTimer >= 66) {
      this._hudTimer = 0;
      this._updateHUD();
      this._updatePosBoard(allCars);
    }
    // Check finish
    if (this.player.finished && this.state==='racing') {
      const pos = allCars.filter(c=>c.finished).length;
      this._end(pos);
    }
  }
  _updateHUD() {
    const p=this.player;
    const setText=(id,v)=>{const e=document.getElementById(id);if(e)e.textContent=v;};
    const setWidth=(id,w)=>{const e=document.getElementById(id);if(e)e.style.width=clamp(w,0,100)+'%';};
    setText('vSpd',Math.round(Math.abs(p.speed))+' km/h');
    setText('vRpm',Math.round(p.rpm));
    setText('vGear',p.gear||'N');
    setText('vTire',Math.round(p.tires)+'%');
    const fx=Object.keys(p.activeEffects).join(' ')||'—';
    setText('vAct',fx);
    setWidth('bF',p.fuel);
    setWidth('bH',p.hp);
    setWidth('bN',p.nitro/p.carConfig.nitroMax*100);
    const allCars=[this.player,...this.ais];
    const sorted=[...allCars].sort((a,b)=>b.totalDist-a.totalDist);
    const pos=sorted.indexOf(this.player)+1;
    setText('vPos',pos+'/'+allCars.length);
    setText('vLap',Math.min(p.lapCount+1,TOTAL_LAPS)+'/'+TOTAL_LAPS);
    setText('vTime',formatTime(this.raceTime));
    setText('vLT',p.lastLapTime?formatTime(p.lastLapTime):'—');
    setText('vBest',p.bestLap?formatTime(p.bestLap):'—');
    setText('vScr',Math.round(p.score));
    setText('vDrf',Math.round(p.driftScore));
    setText('vFps',Math.round(this.fps));
    for (let i=0;i<3;i++) {
      const e=document.getElementById('sl'+i);
      if(e) e.textContent = p.inventory[i] ? (ITEM_EMOJI[p.inventory[i]]||'?') : '';
      if(e) e.classList.toggle('active', i===0&&!!p.inventory[0]);
    }
    const wi=document.getElementById('weatherInd');
    if(wi) wi.textContent=this.weather.getIndicatorText();
  }
  _updatePosBoard(allCars) {
    const sorted=[...allCars].sort((a,b)=>b.totalDist-a.totalDist);
    const pbRows=document.getElementById('pbRows');
    if (!pbRows) return;
    // Rebuilding innerHTML 60x/s forces layout work every frame — only
    // rebuild when something visible actually changed (order or laps)
    const sig = sorted.map(c => c.name + ':' + c.lapCount).join('|');
    if (sig === this._pbSig) return;
    this._pbSig = sig;
    pbRows.innerHTML=sorted.map((c,i)=>{
      const isYou=c===this.player;
      return `<div class="pb-row${isYou?' pb-you':''}">
        <span class="pb-pos">${i+1}</span>
        <span class="pb-dot" style="background:${c.color}"></span>
        <span class="pb-name">${c.name}</span>
        <span class="pb-lap">L${Math.min(c.lapCount+1,TOTAL_LAPS)}</span>
      </div>`;
    }).join('');
  }
  _draw() {
    const ctx=this.ctx, W=this.W, H=this.H;
    ctx.save();
    // Screen shake (skipped for users who prefer reduced motion)
    if (!REDUCED_MOTION && this.shake>0.5) ctx.translate(rng(-this.shake,this.shake)*0.5, rng(-this.shake,this.shake)*0.5);
    // Clear with gradient background for nicer grass
    const bgGrad = ctx.createRadialGradient(W/2,H/2,0,W/2,H/2,Math.max(W,H)*0.75);
    bgGrad.addColorStop(0,'#4a8f35');
    bgGrad.addColorStop(0.5,'#3c7a2a');
    bgGrad.addColorStop(1,'#2e5e1e');
    ctx.fillStyle = bgGrad;
    ctx.fillRect(0,0,W,H);
    if (!this.track || !this.player) { ctx.restore(); return; }
    // World transform with zoom (zoom is updated in _update())
    const zoom = this._cameraZoom || 1.0;
    ctx.save();
    ctx.translate(W/2, H/2);
    ctx.scale(zoom, zoom);
    ctx.translate(-this.cameraX, -this.cameraY);
    // Track (pre-baked offscreen canvas — a single blit)
    this.track.draw(ctx);
    // Tire marks (culled to the visible area)
    this.tireMarks.draw(ctx, this.cameraX, this.cameraY, (W/2)/zoom + 80, (H/2)/zoom + 80);
    // Oil slicks
    for (const o of this.oilSlicks) o.draw(ctx);
    // Mines
    for (const mn of this.mines) mn.draw(ctx);
    // Item boxes
    for (const ib of this.track.itemBoxes) ib.draw(ctx);
    // Missiles
    for (const m of this.missiles) m.draw(ctx);
    // Ghost
    this.ghost.draw(ctx, this._ghostFrame);
    // Particles (below) — pass zoom-corrected view size so culling stays correct
    this.particles.draw(ctx, this.cameraX, this.cameraY, W/zoom, H/zoom);
    // Cars sorted by Y
    const allCars=[this.player,...this.ais];
    allCars.sort((a,b)=>a.y-b.y);
    for (const c of allCars) c.draw(ctx);
    ctx.restore();
    // Weather effects (screen space)
    this.weather.draw(ctx, W, H, this.player.x, this.player.y, this.player.heading);
    // Speed lines
    drawSpeedLines(ctx, W, H, Math.abs(this.player.speed)/this.player.carConfig.topSpeed);
    // Rear view indicator
    if (this.input.rearView) {
      ctx.save();
      ctx.fillStyle='rgba(255,200,50,0.85)';
      ctx.font='bold 18px Arial'; ctx.textAlign='center';
      ctx.fillText('◄ REAR VIEW ►', W/2, 38);
      ctx.restore();
    }
    // Wrong-way indicator
    this._drawWrongWayIndicator(ctx, W, H);
    // Notifications
    this.notifs.draw(ctx, W, H);
    // Touch controls
    this.touch.draw(ctx, W, H);
    ctx.restore();
    // Minimap (screen space, no world transform)
    this._drawMinimap();
    // Tachometer
    this._drawTacho();
  }
  _drawWrongWayIndicator(ctx, W, H) {
    if (!this.player || !this.track) return;
    // Compare player's movement direction to track direction at current position
    const nearest = this.player._lastNearest || this.track.nearest(this.player.x, this.player.y);
    const SN = this.track.spline.length;
    const nextIdx = (nearest.idx + 4) % SN;
    const sp = this.track.spline[nearest.idx];
    const sp2 = this.track.spline[nextIdx];
    const trackDirX = sp2.x - sp.x;
    const trackDirY = sp2.y - sp.y;
    const carDirX = Math.cos(this.player.heading);
    const carDirY = Math.sin(this.player.heading);
    const dot = carDirX * trackDirX + carDirY * trackDirY;
    const wrongWay = dot < 0 && Math.abs(this.player.speed) > 15;
    if (!wrongWay) { this._wrongWayAlpha = (this._wrongWayAlpha || 0) * 0.85; }
    else { this._wrongWayAlpha = Math.min(1, (this._wrongWayAlpha || 0) + 0.07); }
    if ((this._wrongWayAlpha || 0) < 0.05) return;
    const pulse = 0.65 + 0.35 * Math.sin(Date.now() * 0.008);
    ctx.save();
    ctx.globalAlpha = (this._wrongWayAlpha || 0) * pulse;
    ctx.fillStyle = '#ff2222';
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = 3;
    const bx = W/2, by = 90, bw = 200, bh = 38;
    ctx.beginPath(); ctx.roundRect(bx - bw/2, by - bh/2, bw, bh, 8); ctx.fill();
    ctx.stroke();
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 22px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('⚠ WRONG WAY ⚠', bx, by);
    ctx.textBaseline = 'alphabetic';
    ctx.restore();
  }
  _drawMinimap() {
    if (!this.track || !this.player) return;
    const mCanvas=document.getElementById('mini');
    if (!mCanvas) return;
    const mc=mCanvas.getContext('2d');
    const MW=155, MH=155;
    // Scale/offset and the track shape only change when the track changes —
    // bake them once per race instead of recomputing + restroking every frame
    if (this._miniTrack !== this.track) {
      this._miniTrack = this.track;
      const cx=this.track.center[0], cy=this.track.center[1];
      let maxR = 0;
      for (const sp of this.track.spline) {
        const r = dist(sp.x, sp.y, cx, cy);
        if (r > maxR) maxR = r;
      }
      const padding = 12;
      this._miniScale = maxR > 0 ? (MW/2 - padding) / maxR : 0.033;
      this._miniOx = MW/2 - cx*this._miniScale;
      this._miniOy = MH/2 - cy*this._miniScale;
      const off = document.createElement('canvas');
      off.width = MW; off.height = MH;
      const octx = off.getContext('2d');
      octx.fillStyle='rgba(8,10,18,0.7)';
      octx.fillRect(0,0,MW,MH);
      this.track.drawMinimap(octx, this._miniScale, this._miniOx, this._miniOy);
      this._miniBg = off;
    }
    const scale = this._miniScale, ox = this._miniOx, oy = this._miniOy;
    mc.clearRect(0,0,MW,MH);
    mc.drawImage(this._miniBg, 0, 0);
    // Cars with direction arrows
    const allCars=[this.player,...this.ais];
    for (const c of allCars) {
      const mx=c.x*scale+ox, my=c.y*scale+oy;
      const isPlayer = c===this.player;
      const r = isPlayer ? 4.5 : 3;
      mc.save();
      mc.translate(mx, my);
      mc.rotate(c.heading);
      // Arrow pointing forward
      mc.fillStyle = isPlayer ? '#ffffff' : c.color;
      mc.beginPath();
      mc.moveTo(0, -r*1.6);    // front tip
      mc.lineTo(-r*0.8, r*0.8); // rear left
      mc.lineTo(r*0.8, r*0.8);  // rear right
      mc.closePath();
      mc.fill();
      if (isPlayer) {
        mc.strokeStyle = '#ffff80';
        mc.lineWidth = 1;
        mc.stroke();
      }
      mc.restore();
    }
  }
  _drawTacho() {
    if (!this.player) return;
    const tc=document.getElementById('tacho');
    if (!tc) return;
    const tctx=tc.getContext('2d');
    drawTachometer(tctx, this.player.rpm, 8000, this.player.gear||'N', Math.abs(this.player.speed));
  }
  _end(position) {
    this.state='finished';
    this.audio.setIdle();
    const p=this.player;
    // Position-based points (F1-style)
    const POS_PTS = [25,18,15,12,10,8,6,4,2,1];
    const racePoints = POS_PTS[Math.max(0, position-1)] || 0;
    p.score += racePoints * 100;
    // Track record (best lap per track)
    let newRecord = false;
    if (p.bestLap) {
      try {
        const key = 'bestLap_' + this.track.config.name;
        const stored = parseInt(localStorage.getItem(key)) || Infinity;
        if (p.bestLap < stored) {
          localStorage.setItem(key, p.bestLap);
          newRecord = true;
        }
      } catch(e) {}
    }
    if (newRecord) {
      this.notifs.add('🏆 NEW TRACK RECORD!', '#f0c040', 4000);
    }
    // Confetti burst
    const confettiColors = ['#ff4444','#44aaff','#44ff88','#ffcc00','#ff44ff','#ff8800','#00ffcc','#ff6666'];
    for (let i = 0; i < 55; i++) {
      const a = rng(0, PI2), spd = rng(100, 320);
      this.particles.emit(this.player.x, this.player.y, {
        vx: Math.cos(a)*spd, vy: Math.sin(a)*spd,
        color: confettiColors[Math.floor(Math.random()*confettiColors.length)],
        size: rng(3,8), life: rng(2500,4500), drag: 0.96, gravity: 0.06
      });
    }
    const ordinals=['','1st','2nd','3rd','4th','5th','6th'];
    document.getElementById('finTitle').textContent=`You finished ${ordinals[position]||position+'th'}!`;
    const statsEl=document.getElementById('finStats');
    const trackKey = 'bestLap_' + this.track.config.name;
    let trackRecord = '—';
    try { const s = localStorage.getItem(trackKey); if (s) trackRecord = formatTime(parseInt(s)); } catch(e) {}
    const rows=[
      ['Position', ordinals[position]||position+'th'],
      ['Total Time', formatTime(this.raceTime)],
      ['Best Lap', p.bestLap?formatTime(p.bestLap):'—'],
      ['Track Record', trackRecord + (newRecord ? ' 🏆' : '')],
      ['Race Points', '+' + racePoints + ' pts'],
      ['Score', Math.round(p.score)],
      ['Drift Score', Math.round(p.driftScore)],
      ['Laps', TOTAL_LAPS+'/'+TOTAL_LAPS]
    ];
    statsEl.innerHTML=rows.map(([l,v])=>`<div class="fin-row"><span class="fin-label">${l}</span><span class="fin-val">${v}</span></div>`).join('');
    document.getElementById('finishScreen').classList.remove('hide');
  }
  _loop(ts) {
    // _boundLoop is created once — avoids allocating a new closure every frame
    if (!this._boundLoop) this._boundLoop = (t) => this._loop(t);
    if (this._lastTime === 0) { this._lastTime = ts; requestAnimationFrame(this._boundLoop); return; }
    const dt = Math.min(ts - this._lastTime, 33);
    this._lastTime = ts;
    // FPS
    this._fpsArr.push(1000/Math.max(dt,1));
    if (this._fpsArr.length>30) this._fpsArr.shift();
    this.fps = this._fpsArr.reduce((a,b)=>a+b,0)/this._fpsArr.length;
    this.input.captureGameKeys = this.state === 'racing' || this.state === 'countdown';
    this._update(dt);
    this._draw();
    this._raf = requestAnimationFrame(this._boundLoop);
  }
}

// ============================================================
// BOOT
// ============================================================
window.addEventListener('DOMContentLoaded', () => {
  new Game();
});