
html_content = '''<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Abuzar Racing</title>
<style>
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  overflow: hidden;
  background: #111;
  font-family: sans-serif;
  touch-action: none;
}

#score, #highscore, #coins, #coinScore {
  position: absolute;
  color: white;
  font-size: 24px;
  top: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
}

#score { left: 10px; }
#highscore { right: 10px; }
#coins { 
  left: 50%; 
  transform: translateX(-50%); 
  color: #ffd700; 
  font-weight: bold;
}
#coinScore {
  left: 10px;
  top: 45px;
  color: #ffff00;
  font-size: 18px;
  text-shadow: 0 0 10px #ffff00;
}

#play {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 100px;
  height: 50px;
  font-size: 20px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, #00ff00, #00aa00);
  color: #000;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0,255,0,0.4);
  z-index: 100;
  touch-action: manipulation;
}

#play:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0,255,0,0.4);
}

#stop {
  position: absolute;
  top: 80px;
  right: 10px;
  width: 100px;
  height: 50px;
  font-size: 20px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, #ff0000, #aa0000);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(255,0,0,0.4);
  z-index: 100;
  touch-action: manipulation;
}

#stop:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(255,0,0,0.4);
}

#shopBtn {
  position: absolute;
  top: 140px;
  right: 10px;
  width: 100px;
  height: 50px;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(255,215,0,0.4);
  z-index: 100;
  touch-action: manipulation;
}

#shopBtn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(255,215,0,0.4);
}

#controls {
  position: absolute;
  bottom: 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
  box-sizing: border-box;
  pointer-events: none;
}

.btn {
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 60px;
  text-align: center;
  line-height: 120px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
  pointer-events: auto;
  touch-action: manipulation;
  transition: all 0.1s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.btn:active, .btn.active {
  background: rgba(255,255,255,0.35);
  transform: scale(0.92);
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 2px 15px rgba(0,0,0,0.4);
}

#gameOver {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#gameOver h2 {
  color: #ff0000;
  font-size: 48px;
  margin-bottom: 20px;
  text-shadow: 0 0 20px #ff0000;
}

#gameOver p {
  color: white;
  font-size: 24px;
  margin: 10px 0;
}

#gameOver button {
  margin-top: 30px;
  padding: 15px 40px;
  font-size: 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #00ff00, #00aa00);
  color: #000;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}

#gameOver button:active {
  transform: scale(0.95);
}

#shopModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  z-index: 2000;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 0;
}

#shopModal h2 {
  color: #ffd700;
  font-size: 42px;
  margin-bottom: 10px;
  text-shadow: 0 0 20px #ffd700;
}

#shopCoins {
  color: #ffff00;
  font-size: 24px;
  margin-bottom: 20px;
}

.shop-section {
  width: 100%;
  max-width: 1200px;
  padding: 10px 20px;
}

.shop-section h3 {
  color: #00ff00;
  font-size: 24px;
  margin: 15px 0 10px 0;
  text-align: center;
  text-shadow: 0 0 10px #00ff00;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  padding: 10px;
  width: 100%;
}

.shop-item {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid #ffd700;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  transition: transform 0.2s;
}

.shop-item:hover {
  transform: scale(1.02);
}

.shop-item h3 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 8px;
  text-shadow: none;
}

.shop-item .price {
  color: #ffd700;
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0;
}

.shop-item .desc {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 10px;
}

.shop-item .feature {
  color: #00ff00;
  font-size: 12px;
  margin-bottom: 8px;
  font-style: italic;
}

.shop-item .owned-count {
  color: #00ffff;
  font-size: 14px;
  margin-bottom: 8px;
}

.shop-item button {
  padding: 10px 25px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #00ff00, #00aa00);
  color: #000;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}

.shop-item button:disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
}

.shop-item button:active:not(:disabled) {
  transform: scale(0.95);
}

.shop-item.owned {
  border-color: #00ff00;
  background: linear-gradient(135deg, #0d2b1d, #1a4d2e);
}

.shop-item.owned h3::after {
  content: " ✓";
  color: #00ff00;
}

.shop-item.equipped {
  border-color: #00ffff;
  background: linear-gradient(135deg, #0d2b2d, #1a4d4e);
  box-shadow: 0 0 20px rgba(0,255,255,0.3);
}

.shop-item.equipped h3::after {
  content: " 🚗 Equipped";
  color: #00ffff;
}

.shop-item.legendary {
  border-color: #ff00ff;
  background: linear-gradient(135deg, #2d1b4e, #4a148c);
}

.shop-item.legendary .price {
  color: #ff00ff;
  text-shadow: 0 0 10px #ff00ff;
}

#closeShop {
  margin: 20px 0;
  padding: 15px 40px;
  font-size: 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff4444, #cc0000);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

#closeShop:active {
  transform: scale(0.95);
}

#currentCar {
  position: absolute;
  top: 140px;
  left: 10px;
  color: #fff;
  font-size: 14px;
  background: rgba(0,0,0,0.5);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ffd700;
}

.inventory-display {
  background: rgba(0,0,0,0.7);
  border: 1px solid #ffd700;
  border-radius: 10px;
  padding: 10px;
  margin: 10px 0;
  color: #fff;
  font-size: 14px;
}

.inventory-display h4 {
  color: #ffd700;
  margin: 0 0 5px 0;
}
</style>
</head>
<body>
<div id="score">Score: 0</div>
<div id="highscore">High: 0</div>
<div id="coins">Coins: 0</div>
<div id="coinScore">Round Coins: 0</div>
<div id="currentCar">🚗 Current: Red Speedster</div>

<button id="play">▶ Play</button>
<button id="stop">⏹ Stop</button>
<button id="shopBtn">🛒 Shop</button>

<div id="controls">
  <div class="btn" id="left">◀</div>
  <div class="btn" id="right">▶</div>
</div>

<div id="gameOver">
  <h2>💥 CRASHED!</h2>
  <p id="finalScore">Score: 0</p>
  <p id="finalCoins">Coins: 0</p>
  <button onclick="restartGame()">🔄 Play Again</button>
</div>

<div id="shopModal">
  <h2>🛒 Car Shop</h2>
  <div id="shopCoins">Your Coins: 0</div>
  
  <div class="shop-section">
    <h3>🚗 Cars</h3>
    <div class="shop-grid">
      <div class="shop-item equipped" id="item-speedster">
        <h3>🔴 Red Speedster</h3>
        <div class="desc">Default car - Fast and reliable</div>
        <div class="feature">Speed: ★★★☆☆ | Coins: 1x</div>
        <div class="price">✓ Equipped</div>
        <button disabled>Equipped</button>
      </div>
      
      <div class="shop-item" id="item-blue">
        <h3>🔵 Blue Lightning</h3>
        <div class="desc">Cool blue finish</div>
        <div class="feature">Coins: 5x</div>
        <div class="price">50 🪙</div>
        <button onclick="buyCar('blue', 50)">Buy (50🪙)</button>
      </div>
      
      <div class="shop-item" id="item-green">
        <h3>🟢 Green Machine</h3>
        <div class="desc">Eco-friendly speed</div>
        <div class="feature">Coins: 1.5x</div>
        <div class="price">75 🪙</div>
        <button onclick="buyCar('green', 75)">Buy (75🪙)</button>
      </div>
      
      <div class="shop-item" id="item-purple">
        <h3>🟣 Purple Phantom</h3>
        <div class="desc">Mysterious and fast</div>
        <div class="feature">Coins: 2x</div>
        <div class="price">100 🪙</div>
        <button onclick="buyCar('purple', 100)">Buy (100🪙)</button>
      </div>
      
      <div class="shop-item" id="item-black">
        <h3>⚫ Black Knight</h3>
        <div class="desc">Stealth mode activated</div>
        <div class="feature">Coins: 2.5x</div>
        <div class="price">100 🪙</div>
        <button onclick="buyCar('black', 100)">Buy (100🪙)</button>
      </div>
      
      <div class="shop-item" id="item-white">
        <h3>⚪ White Storm</h3>
        <div class="desc">Clean and elegant</div>
        <div class="feature">Coins: 2x</div>
        <div class="price">100 🪙</div>
        <button onclick="buyCar('white', 100)">Buy (100🪙)</button>
      </div>
      
      <div class="shop-item" id="item-gold">
        <h3>🟡 Golden Racer</h3>
        <div class="desc">Luxury gold edition</div>
        <div class="feature">Coins: 4x</div>
        <div class="price">250 🪙</div>
        <button onclick="buyCar('gold', 250)">Buy (250🪙)</button>
      </div>
      
      <div class="shop-item" id="item-rainbow">
        <h3>🌈 Rainbow Unicorn</h3>
        <div class="desc">Magical color shifting!</div>
        <div class="feature">Coins: 3x | Rainbow Effect</div>
        <div class="price">500 🪙</div>
        <button onclick="buyCar('rainbow', 500)">Buy (500🪙)</button>
      </div>
      
      <div class="shop-item" id="item-ronaldo">
        <h3>⚽ Ronaldo OG</h3>
        <div class="desc">3x coin value + Red/Blue shift + Trail</div>
        <div class="feature">Style: ★★★★★ | Coins: 3x</div>
        <div class="price">5,000 🪙</div>
        <button onclick="buyCar('ronaldo', 5000)">Buy (5,000🪙)</button>
      </div>
      
      <div class="shop-item" id="item-messi">
        <h3>🐐 Messi OG</h3>
        <div class="desc">3x coin value + Red/Blue shift + Trail</div>
        <div class="feature">Style: ★★★★★ | Coins: 3x</div>
        <div class="price">5,000 🪙</div>
        <button onclick="buyCar('messi', 5000)">Buy (5,000🪙)</button>
      </div>
      
      <div class="shop-item legendary" id="item-venom">
        <h3>🐍 ABUZAR VENOM</h3>
        <div class="desc">LEGENDARY! 10000x COIN VALUE - Black & Red Beast</div>
        <div class="feature">GOD TIER | Coins: 10000x</div>
        <div class="price">500,000 🪙</div>
        <button onclick="buyCar('venom', 500000)">Buy (500,000🪙)</button>
      </div>
    </div>
  </div>
  
  <div class="shop-section">
    <h3>⚡ Power-ups (Buy Multiple!)</h3>
    <div class="shop-grid">
      <div class="shop-item" id="item-shield">
        <h3>🛡️ Shield</h3>
        <div class="desc">Blocks one crash</div>
        <div class="price">10 🪙 each</div>
        <div class="owned-count" id="count-shield">Have: 0</div>
        <button onclick="buyPowerup('shield', 10)">Buy (10🪙)</button>
      </div>
      
      <div class="shop-item" id="item-magnet">
        <h3>🧲 Coin Magnet</h3>
        <div class="desc">Attracts nearby coins</div>
        <div class="price">15 🪙 each</div>
        <div class="owned-count" id="count-magnet">Have: 0</div>
        <button onclick="buyPowerup('magnet', 15)">Buy (15🪙)</button>
      </div>
      
      <div class="shop-item" id="item-2x">
        <h3>💰 2x Coins</h3>
        <div class="desc">Double coins for 30s</div>
        <div class="price">15 🪙 each</div>
        <div class="owned-count" id="count-2x">Have: 0</div>
        <button onclick="buyPowerup('2x', 15)">Buy (15🪙)</button>
      </div>
      
      <div class="shop-item" id="item-timewarp">
        <h3>⏰ Time Warp</h3>
        <div class="desc">Slow down obstacles</div>
        <div class="price">10 🪙 each</div>
        <div class="owned-count" id="count-timewarp">Have: 0</div>
        <button onclick="buyPowerup('timewarp', 10)">Buy (10🪙)</button>
      </div>
    </div>
  </div>
  
  <div class="shop-section">
    <h3>🎨 Trails & Effects</h3>
    <div class="shop-grid">
      <div class="shop-item" id="item-trail-blue">
        <h3>🔵 Blue Trail</h3>
        <div class="desc">Cyan exhaust trail</div>
        <div class="price">25 🪙</div>
        <button onclick="buyTrail('blue', 25)">Buy (25🪙)</button>
      </div>
      
      <div class="shop-item" id="item-trail-red">
        <h3>🔴 Red Trail</h3>
        <div class="desc">Red exhaust trail</div>
        <div class="price">25 🪙</div>
        <button onclick="buyTrail('red', 25)">Buy (25🪙)</button>
      </div>
      
      <div class="shop-item" id="item-trail-gold">
        <h3>🟡 Gold Trail</h3>
        <div class="desc">Golden sparkles</div>
        <div class="price">75 🪙</div>
        <button onclick="buyTrail('gold', 75)">Buy (75🪙)</button>
      </div>
      
      <div class="shop-item" id="item-trail-rainbow">
        <h3>🌈 Rainbow Trail</h3>
        <div class="desc">Color changing magic</div>
        <div class="price">200 🪙</div>
        <button onclick="buyTrail('rainbow', 200)">Buy (200🪙)</button>
      </div>
    </div>
  </div>
  
  <button id="closeShop" onclick="closeShop()">Close Shop</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
<script>
document.addEventListener('gesturestart', function(e) { e.preventDefault(); });
document.addEventListener('gesturechange', function(e) { e.preventDefault(); });
document.addEventListener('gestureend', function(e) { e.preventDefault(); });

// ===== GAME VARIABLES =====
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x111111, 20, 120);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 200);
camera.position.set(0, 6, 10);
const renderer = new THREE.WebGLRenderer({antialias: true, alpha: false});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(10, 20, 10);
scene.add(dirLight);
scene.add(new THREE.AmbientLight(0xffffff, 0.3));

const roadGeo = new THREE.PlaneGeometry(12, 500);
const roadMat = new THREE.MeshPhongMaterial({color: 0x222222});
const road = new THREE.Mesh(roadGeo, roadMat);
road.rotation.x = -Math.PI/2;
scene.add(road);

const lines = [];
for(let i=0; i<50; i++){
  const geo = new THREE.BoxGeometry(0.2, 0.1, 2);
  const mat = new THREE.MeshBasicMaterial({color: 0xffffff});
  const line = new THREE.Mesh(geo, mat);
  line.position.z = -i*6;
  line.position.y = 0.05;
  scene.add(line);
  lines.push(line);
}

const buildings = [];
for(let i=0; i<40; i++){
  const geo = new THREE.BoxGeometry(3, Math.random()*10+5, 3);
  const mat = new THREE.MeshPhongMaterial({
    color: Math.random()>0.5 ? 0x00ffff : 0xff00ff,
    emissive: 0xff00ff,
    emissiveIntensity: 0.6
  });
  const b = new THREE.Mesh(geo, mat);
  b.position.x = Math.random()>0.5 ? 10 : -10;
  b.position.z = -i*12;
  b.position.y = geo.parameters.height/2;
  scene.add(b);
  buildings.push(b);
}

const lanes = [-3, 0, 3];
let lane = 1;

let carGroup = new THREE.Group();
let currentCarType = 'speedster';
let coinMultiplier = 1;
let currentTrail = null;

// Inventory system
let inventory = {
  cars: ['speedster'],
  powerups: { shield: 0, magnet: 0, '2x': 0, timewarp: 0 },
  trails: []
};

let coinBalance = 0;

// Car configurations
const carConfigs = {
  speedster: { color: 0xff0000, multiplier: 1, name: 'Red Speedster', desc: 'Default car' },
  blue: { color: 0x0088ff, multiplier: 5, name: 'Blue Lightning', desc: 'Cool blue finish' },
  green: { color: 0x00ff00, multiplier: 1.5, name: 'Green Machine', desc: 'Eco-friendly speed' },
  purple: { color: 0x8800ff, multiplier: 2, name: 'Purple Phantom', desc: 'Mysterious and fast' },
  black: { color: 0x111111, multiplier: 2.5, name: 'Black Knight', desc: 'Stealth mode activated' },
  white: { color: 0xffffff, multiplier: 2, name: 'White Storm', desc: 'Clean and elegant' },
  gold: { color: 0xffd700, multiplier: 4, name: 'Golden Racer', desc: 'Luxury gold edition' },
  rainbow: { color: 0xffffff, multiplier: 3, name: 'Rainbow Unicorn', desc: 'Magical color shifting!', rainbow: true },
  ronaldo: { color: 0xffffff, multiplier: 3, name: 'Ronaldo OG', desc: '3x coin value + Trail', rainbow: true, trail: true },
  messi: { color: 0xffffff, multiplier: 3, name: 'Messi OG', desc: '3x coin value + Trail', rainbow: true, trail: true },
  venom: { color: 0x000000, multiplier: 10000, name: 'ABUZAR VENOM', desc: 'LEGENDARY BEAST', venom: true }
};

// Trail system
let trailParticles = [];
let trailConfig = {
  blue: { color: 0x00ffff, size: 0.3 },
  red: { color: 0xff0000, size: 0.3 },
  gold: { color: 0xffd700, size: 0.4, sparkle: true },
  rainbow: { color: 0xffffff, size: 0.5, rainbow: true }
};

function getRainbowColor(time) {
  const hue = (time * 0.001) % 1;
  return new THREE.Color().setHSL(hue, 1, 0.5);
}

function createCar(type = 'speedster') {
  const group = new THREE.Group();
  const config = carConfigs[type] || carConfigs.speedster;
  
  let bodyColor = config.color;
  let bodyScale = [2.2, 0.8, 4.2];
  let cabinScale = [1.8, 0.7, 2.2];
  
  // Special body scales
  if (type === 'venom') {
    bodyScale = [2.5, 0.9, 4.8];
  } else if (type === 'gold') {
    bodyScale = [2.4, 0.9, 4.4];
  }
  
  const bodyGeo = new THREE.BoxGeometry(...bodyScale);
  const bodyMat = new THREE.MeshPhongMaterial({
    color: bodyColor,
    emissive: config.rainbow || config.venom ? 0xffffff : 0x000000,
    emissiveIntensity: config.rainbow || config.venom ? 0.3 : 0
  });
  
  if (config.rainbow || config.venom) {
    bodyMat.userData = { isSpecial: true, isVenom: config.venom, isRainbow: config.rainbow };
  }
  
  const body = new THREE.Mesh(bodyGeo, bodyMat);
  body.position.y = bodyScale[1] / 2 + 0.4;
  body.name = 'body';
  group.add(body);

  const cabinGeo = new THREE.BoxGeometry(...cabinScale);
  const cabinMat = new THREE.MeshPhongMaterial({
    color: bodyColor,
    emissive: config.rainbow || config.venom ? 0xffffff : 0x000000,
    emissiveIntensity: config.rainbow || config.venom ? 0.3 : 0
  });
  
  if (config.rainbow || config.venom) {
    cabinMat.userData = { isSpecial: true, isVenom: config.venom, isRainbow: config.rainbow };
  }
  
  const cabin = new THREE.Mesh(cabinGeo, cabinMat);
  cabin.position.y = body.position.y + bodyScale[1]/2 + cabinScale[1]/2;
  cabin.position.z = -0.2;
  cabin.name = 'cabin';
  group.add(cabin);

  const glassMat = new THREE.MeshPhongMaterial({color: 0x88ccff, transparent: true, opacity: 0.7});
  
  const windshieldGeo = new THREE.BoxGeometry(cabinScale[0] - 0.2, 0.5, 0.1);
  const windshield = new THREE.Mesh(windshieldGeo, glassMat);
  windshield.position.y = cabin.position.y;
  windshield.position.z = cabin.position.z + cabinScale[2]/2 + 0.05;
  windshield.rotation.x = -0.1;
  group.add(windshield);

  // Wheels
  const wheelGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.3, 16);
  const wheelMat = new THREE.MeshPhongMaterial({color: type === 'gold' ? 0xffd700 : 0x111111});
  const wheelY = 0.4;
  const wheelX = bodyScale[0]/2 + 0.15;
  const wheelZFront = bodyScale[2]/2 - 0.8;
  const wheelZBack = -bodyScale[2]/2 + 0.8;
  
  const wheelPositions = [
    [-wheelX, wheelY, wheelZFront], 
    [wheelX, wheelY, wheelZFront], 
    [-wheelX, wheelY, wheelZBack], 
    [wheelX, wheelY, wheelZBack]
  ];
  
  wheelPositions.forEach(pos => {
    const wheel = new THREE.Mesh(wheelGeo, wheelMat);
    wheel.rotation.z = Math.PI/2;
    wheel.position.set(...pos);
    group.add(wheel);
  });

  // Headlights
  const headlightColor = type === 'black' ? 0xff0000 : (type === 'venom' ? 0xff0000 : 0xffffaa);
  const headlightMat = new THREE.MeshPhongMaterial({
    color: headlightColor, 
    emissive: headlightColor, 
    emissiveIntensity: 0.8
  });
  const leftHeadlight = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.3, 0.1), headlightMat);
  leftHeadlight.position.set(-bodyScale[0]/3, body.position.y + 0.2, bodyScale[2]/2 + 0.05);
  group.add(leftHeadlight);
  const rightHeadlight = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.3, 0.1), headlightMat);
  rightHeadlight.position.set(bodyScale[0]/3, body.position.y + 0.2, bodyScale[2]/2 + 0.05);
  group.add(rightHeadlight);
  
  // Special features
  if (type === 'venom') {
    // Venom snake pattern
    const stripe = new THREE.Mesh(
      new THREE.BoxGeometry(bodyScale[0] + 0.1, 0.1, bodyScale[2] + 0.1),
      new THREE.MeshPhongMaterial({color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 0.5})
    );
    stripe.position.y = body.position.y;
    group.add(stripe);
    
    // Glowing eyes
    const eyeGeo = new THREE.SphereGeometry(0.15, 8, 8);
    const eyeMat = new THREE.MeshPhongMaterial({color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 1});
    const leftEye = new THREE.Mesh(eyeGeo, eyeMat);
    leftEye.position.set(-0.5, body.position.y + 0.3, bodyScale[2]/2 + 0.1);
    group.add(leftEye);
    const rightEye = new THREE.Mesh(eyeGeo, eyeMat);
    rightEye.position.set(0.5, body.position.y + 0.3, bodyScale[2]/2 + 0.1);
    group.add(rightEye);
  } else if (type === 'gold') {
    // Crown on top
    const crownGeo = new THREE.ConeGeometry(0.3, 0.5, 5);
    const crownMat = new THREE.MeshPhongMaterial({color: 0xffd700, emissive: 0xffd700, emissiveIntensity: 0.5});
    const crown = new THREE.Mesh(crownGeo, crownMat);
    crown.position.set(0, cabin.position.y + cabinScale[1]/2 + 0.25, 0);
    group.add(crown);
  } else if (type === 'ronaldo') {
    // Number 7
    const num7 = new THREE.Mesh(
      new THREE.PlaneGeometry(0.8, 0.8),
      new THREE.MeshBasicMaterial({color: 0xffffff})
    );
    num7.position.set(0, body.position.y + 0.5, bodyScale[2]/2 + 0.06);
    group.add(num7);
  } else if (type === 'messi') {
    // Number 10
    const num10 = new THREE.Mesh(
      new THREE.PlaneGeometry(0.8, 0.8),
      new THREE.MeshBasicMaterial({color: 0xffffff})
    );
    num10.position.set(0, body.position.y + 0.5, bodyScale[2]/2 + 0.06);
    group.add(num10);
  }

  return group;
}

scene.add(carGroup);
let car = carGroup;
updateCar();

function updateCar() {
  scene.remove(carGroup);
  carGroup = createCar(currentCarType);
  carGroup.position.x = lanes[lane];
  scene.add(carGroup);
  car = carGroup;
  
  const config = carConfigs[currentCarType];
  coinMultiplier = config.multiplier;
  document.getElementById('currentCar').innerHTML = '🚗 Current: ' + config.name;
}

function createTrailParticle() {
  if (!currentTrail || !running) return;
  
  const config = trailConfig[currentTrail];
  if (!config) return;
  
  const geo = new THREE.SphereGeometry(config.size, 8, 8);
  let color = config.color;
  if (config.rainbow) {
    color = getRainbowColor(Date.now());
  }
  
  const mat = new THREE.MeshBasicMaterial({
    color: color,
    transparent: true,
    opacity: 0.8
  });
  
  const particle = new THREE.Mesh(geo, mat);
  particle.position.copy(car.position);
  particle.position.z -= 2;
  particle.position.y = 0.5;
  particle.userData = { life: 1.0, sparkle: config.sparkle };
  
  scene.add(particle);
  trailParticles.push(particle);
}

function updateTrails() {
  for (let i = trailParticles.length - 1; i >= 0; i--) {
    const p = trailParticles[i];
    p.userData.life -= 0.05;
    p.material.opacity = p.userData.life;
    p.scale.setScalar(p.userData.life);
    
    if (p.userData.sparkle) {
      p.material.color.setHSL((Date.now() * 0.002) % 1, 1, 0.5);
    }
    
    if (p.userData.life <= 0) {
      scene.remove(p);
      trailParticles.splice(i, 1);
    }
  }
}

let obstacles = [];
function spawnObstacle(){
  if(!running) return;
  const geo = new THREE.BoxGeometry(2, 2, 2);
  const mat = new THREE.MeshPhongMaterial({color: 0xff0000});
  const obs = new THREE.Mesh(geo, mat);
  obs.position.x = lanes[Math.floor(Math.random()*3)];
  obs.position.z = -120;
  obs.position.y = 1;
  scene.add(obs);
  obstacles.push(obs);
}

let coins = [];
function spawnCoin(){
  if(!running) return;
  const geo = new THREE.CylinderGeometry(0.5, 0.5, 0.2, 20);
  const mat = new THREE.MeshPhongMaterial({color: 0xffff00, emissive: 0xffff00});
  const coin = new THREE.Mesh(geo, mat);
  coin.rotation.x = Math.PI/2;
  coin.position.x = lanes[Math.floor(Math.random()*3)];
  coin.position.z = -100;
  coin.position.y = 1;
  scene.add(coin);
  coins.push(coin);
}

let score = 0;
let highscore = 0;
let roundCoins = 0;

// Active powerups
let activePowerups = {
  shield: false,
  magnet: false,
  '2x': false,
  timewarp: false
};
let powerupTimers = {
  '2x': 0,
  timewarp: 0
};

document.getElementById("highscore").innerHTML = "High: " + highscore;
document.getElementById("coins").innerHTML = "Coins: " + coinBalance;
document.getElementById("coinScore").innerHTML = "Round Coins: 0";

const leftBtn = document.getElementById("left");
const rightBtn = document.getElementById("right");

function moveLeft() {
  if(running && lane > 0) {
    lane--;
    leftBtn.classList.add('active');
    setTimeout(() => leftBtn.classList.remove('active'), 150);
  }
}

function moveRight() {
  if(running && lane < 2) {
    lane++;
    rightBtn.classList.add('active');
    setTimeout(() => rightBtn.classList.remove('active'), 150);
  }
}

leftBtn.addEventListener('touchstart', (e) => { e.preventDefault(); moveLeft(); });
leftBtn.addEventListener('mousedown', (e) => { e.preventDefault(); moveLeft(); });

rightBtn.addEventListener('touchstart', (e) => { e.preventDefault(); moveRight(); });
rightBtn.addEventListener('mousedown', (e) => { e.preventDefault(); moveRight(); });

let touchStartY = 0;
let touchStartX = 0;
let speedMultiplier = 1;
let nitroTime = 0;

window.addEventListener('touchstart', (e) => {
  touchStartX = e.touches[0].clientX;
  touchStartY = e.touches[0].clientY;
}, {passive: false});

window.addEventListener('touchend', (e) => {
  if(!running) return;
  const dx = e.changedTouches[0].clientX - touchStartX;
  const dy = e.changedTouches[0].clientY - touchStartY;
  
  if(dy < -50 && Math.abs(dy) > Math.abs(dx)) {
    speedMultiplier = 2;
    nitroTime = 0;
  }
}, {passive: false});

document.addEventListener("keydown", (e) => {
  if(!running) return;
  if(e.key === "ArrowLeft" && lane > 0) lane--;
  if(e.key === "ArrowRight" && lane < 2) lane++;
  if(e.key === "ArrowUp") { 
    speedMultiplier = 2; 
    nitroTime = 0; 
  }
});

function showCoinPopup(amount) {
  const popup = document.createElement('div');
  popup.style.cssText = 'position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ffff00;font-size:32px;font-weight:bold;text-shadow:0 0 15px #ffff00;pointer-events:none;animation:coinPop 1s ease-out forwards;z-index:500;';
  popup.innerHTML = '+' + amount;
  document.body.appendChild(popup);
  setTimeout(() => popup.remove(), 1000);
}

const style = document.createElement('style');
style.innerHTML = '@keyframes coinPop{0%{transform:translate(-50%,-50%) scale(0.5);opacity:0;}50%{transform:translate(-50%,-150%) scale(1.3);opacity:1;}100%{transform:translate(-50%,-200%) scale(1);opacity:0;}}';
document.head.appendChild(style);

let running = false;
let speed = 0.8;
let difficulty = 0.001;
let gameTime = 0;
let trailSpawnTimer = 0;

function animate(){
  requestAnimationFrame(animate);
  
  const time = Date.now();
  
  // Update car colors for rainbow/venom effects
  if (carGroup) {
    carGroup.traverse((child) => {
      if (child.isMesh && child.material && child.material.userData) {
        if (child.material.userData.isSpecial) {
          if (child.material.userData.isVenom) {
            // Venom gets special green-red shifting
            const hue = (time * 0.002) % 1;
            child.material.color.setHSL(hue > 0.5 ? 0.0 : 0.33, 1, 0.3);
            child.material.emissive.setHSL(hue > 0.5 ? 0.0 : 0.33, 1, 0.2);
          } else if (child.material.userData.isRainbow) {
            child.material.color = getRainbowColor(time);
            child.material.emissive = getRainbowColor(time + 100);
          }
        }
      }
    });
  }
  
  if(!running) {
    renderer.render(scene, camera);
    return;
  }

  gameTime += 0.016;
  
  // Update powerup timers
  if (activePowerups['2x'] && powerupTimers['2x'] > 0) {
    powerupTimers['2x'] -= 0.016;
    if (powerupTimers['2x'] <= 0) {
      activePowerups['2x'] = false;
    }
  }
  if (activePowerups.timewarp && powerupTimers.timewarp > 0) {
    powerupTimers.timewarp -= 0.016;
    if (powerupTimers.timewarp <= 0) {
      activePowerups.timewarp = false;
    }
  }

  // Spawn trail particles
  if (currentTrail && (carConfigs[currentCarType].trail || inventory.trails.includes(currentTrail))) {
    trailSpawnTimer += 0.016;
    if (trailSpawnTimer > 0.1) {
      createTrailParticle();
      trailSpawnTimer = 0;
    }
  }
  updateTrails();

  car.position.x += (lanes[lane] - car.position.x) * 0.15;

  let currentSpeed = speed * speedMultiplier;
  if (activePowerups.timewarp) {
    currentSpeed *= 0.5; // Slow down
  }

  for(let l of lines){
    l.position.z += currentSpeed;
    if(l.position.z > 10) l.position.z = -200;
  }

  for(let b of buildings){
    b.position.z += currentSpeed;
    if(b.position.z > 20) b.position.z = -480;
  }

  for(let i = obstacles.length - 1; i >= 0; i--){
    obstacles[i].position.z += currentSpeed;
    let dx = Math.abs(obstacles[i].position.x - car.position.x);
    let dz = Math.abs(obstacles[i].position.z - car.position.z);
    
    if(dx < 1.5 && dz < 2){
      if (activePowerups.shield || inventory.powerups.shield > 0) {
        if (!activePowerups.shield) {
          inventory.powerups.shield--;
        }
        activePowerups.shield = false;
        scene.remove(obstacles[i]);
        obstacles.splice(i, 1);
        showCoinPopup("🛡️ SHIELD USED!");
        continue;
      }
      gameOver();
      return;
    }
    
    if(obstacles[i].position.z > 20) {
      scene.remove(obstacles[i]);
      obstacles.splice(i, 1);
    }
  }

  for(let i = coins.length - 1; i >= 0; i--){
    coins[i].position.z += currentSpeed;
    coins[i].rotation.z += 0.1;
    
    let dx = Math.abs(coins[i].position.x - car.position.x);
    let dz = Math.abs(coins[i].position.z - car.position.z);
    
    // Magnet effect
    let magnetRange = (activePowerups.magnet || inventory.powerups.magnet > 0) ? 5 : 0;
    if (activePowerups.magnet && Math.abs(coins[i].position.z - car.position.z) < magnetRange) {
      coins[i].position.x += (car.position.x - coins[i].position.x) * 0.1;
    }
    
    if(dx < 1.5 && dz < 2.5){
      const baseEarned = 5;
      let multiplier = coinMultiplier;
      if (activePowerups['2x'] || inventory.powerups['2x'] > 0) {
        multiplier *= 2;
      }
      const earned = Math.floor(baseEarned * multiplier);
      coinBalance += earned;
      roundCoins += earned;
      score += 50;
      showCoinPopup(earned);
      document.getElementById('coins').innerHTML = 'Coins: ' + coinBalance;
      document.getElementById('coinScore').innerHTML = 'Round Coins: ' + roundCoins;
      scene.remove(coins[i]);
      coins.splice(i, 1);
    } else if(coins[i].position.z > 20) {
      scene.remove(coins[i]);
      coins.splice(i, 1);
    }
  }

  score++;
  document.getElementById("score").innerHTML = "Score: " + score;

  if(speedMultiplier > 1){
    nitroTime += 0.02;
    if(nitroTime > 3){
      speedMultiplier = 1;
      nitroTime = 0;
    }
  }

  speed += difficulty;
  renderer.render(scene, camera);
}

let obsInterval, coinInterval;

function startGame(){
  if(running) return;
  running = true;
  gameTime = 0;
  roundCoins = 0;
  score = 0;
  speed = 0.8;
  speedMultiplier = 1;
  
  // Activate one of each powerup if available
  if (inventory.powerups.magnet > 0) {
    inventory.powerups.magnet--;
    activePowerups.magnet = true;
  }
  if (inventory.powerups['2x'] > 0) {
    inventory.powerups['2x']--;
    activePowerups['2x'] = true;
    powerupTimers['2x'] = 30;
  }
  if (inventory.powerups.timewarp > 0) {
    inventory.powerups.timewarp--;
    activePowerups.timewarp = true;
    powerupTimers.timewarp = 10;
  }
  
  document.getElementById('coinScore').innerHTML = 'Round Coins: 0';
  document.getElementById('score').innerHTML = 'Score: 0';
  document.getElementById('gameOver').style.display = 'none';
  
  obstacles.forEach(o => scene.remove(o));
  coins.forEach(c => scene.remove(c));
  obstacles = [];
  coins = [];
  
  obsInterval = setInterval(spawnObstacle, 1200);
  coinInterval = setInterval(spawnCoin, 2000);
  
  document.getElementById('play').innerHTML = '▶ Playing';
}

function stopGame(){
  running = false;
  clearInterval(obsInterval);
  clearInterval(coinInterval);
  document.getElementById('play').innerHTML = '▶ Play';
}

function gameOver(){
  running = false;
  clearInterval(obsInterval);
  clearInterval(coinInterval);
  
  if(score > highscore){
    highscore = score;
    document.getElementById("highscore").innerHTML = "High: " + highscore;
  }
  
  document.getElementById('finalScore').innerHTML = 'Score: ' + score;
  document.getElementById('finalCoins').innerHTML = 'Round Coins: ' + roundCoins + ' (Total: ' + coinBalance + ')';
  document.getElementById('gameOver').style.display = 'flex';
  document.getElementById('play').innerHTML = '▶ Play';
}

function restartGame(){
  lane = 1;
  updateCar();
  startGame();
}

document.getElementById("play").onclick = startGame;
document.getElementById("stop").onclick = stopGame;

function openShop() {
  document.getElementById('shopModal').style.display = 'flex';
  document.getElementById('shopCoins').innerHTML = 'Your Coins: ' + coinBalance;
  updateShopUI();
}

function closeShop() {
  document.getElementById('shopModal').style.display = 'none';
}

document.getElementById("shopBtn").onclick = openShop;

function updateShopUI() {
  // Update car buttons
  const cars = ['speedster', 'blue', 'green', 'purple', 'black', 'white', 'gold', 'rainbow', 'ronaldo', 'messi', 'venom'];
  cars.forEach(car => {
    const el = document.getElementById('item-' + car);
    if (!el) return;
    
    el.classList.remove('owned', 'equipped');
    const btn = el.querySelector('button');
    
    if (currentCarType === car) {
      el.classList.add('equipped');
      btn.innerHTML = 'Equipped';
      btn.disabled = true;
    } else if (inventory.cars.includes(car)) {
      el.classList.add('owned');
      btn.innerHTML = 'Select';
      btn.disabled = false;
      btn.onclick = () => selectCar(car);
    } else {
      const price = getCarPrice(car);
      btn.innerHTML = 'Buy (' + price + '🪙)';
      btn.disabled = coinBalance < price;
      btn.onclick = () => buyCar(car, price);
    }
  });
  
  // Update powerup counts
  document.getElementById('count-shield').innerHTML = 'Have: ' + inventory.powerups.shield;
  document.getElementById('count-magnet').innerHTML = 'Have: ' + inventory.powerups.magnet;
  document.getElementById('count-2x').innerHTML = 'Have: ' + inventory.powerups['2x'];
  document.getElementById('count-timewarp').innerHTML = 'Have: ' + inventory.powerups.timewarp;
  
  // Update powerup buttons
  const powerups = ['shield', 'magnet', '2x', 'timewarp'];
  powerups.forEach(p => {
    const el = document.getElementById('item-' + p);
    const btn = el.querySelector('button');
    const price = getPowerupPrice(p);
    btn.disabled = coinBalance < price;
  });
  
  // Update trail buttons
  const trails = ['blue', 'red', 'gold', 'rainbow'];
  trails.forEach(trail => {
    const el = document.getElementById('item-trail-' + trail);
    if (!el) return;
    
    el.classList.remove('owned');
    const btn = el.querySelector('button');
    
    if (inventory.trails.includes(trail)) {
      el.classList.add('owned');
      if (currentTrail === trail) {
        btn.innerHTML = 'Selected';
        btn.disabled = true;
      } else {
        btn.innerHTML = 'Select';
        btn.disabled = false;
        btn.onclick = () => selectTrail(trail);
      }
    } else {
      const price = getTrailPrice(trail);
      btn.innerHTML = 'Buy (' + price + '🪙)';
      btn.disabled = coinBalance < price;
      btn.onclick = () => buyTrail(trail, price);
    }
  });
}

function getCarPrice(car) {
  const prices = { 
    'speedster': 0,
    'blue': 50, 
    'green': 75, 
    'purple': 100,
    'black': 100,
    'white': 100,
    'gold': 250,
    'rainbow': 500,
    'ronaldo': 5000,
    'messi': 5000,
    'venom': 500000
  };
  return prices[car] || 0;
}

function getPowerupPrice(p) {
  const prices = { 'shield': 10, 'magnet': 15, '2x': 15, 'timewarp': 10 };
  return prices[p] || 10;
}

function getTrailPrice(trail) {
  const prices = { 'blue': 25, 'red': 25, 'gold': 75, 'rainbow': 200 };
  return prices[trail] || 25;
}

function buyCar(car, price) {
  if (coinBalance >= price && !inventory.cars.includes(car)) {
    coinBalance -= price;
    inventory.cars.push(car);
    currentCarType = car;
    updateCar();
    document.getElementById('coins').innerHTML = 'Coins: ' + coinBalance;
    document.getElementById('shopCoins').innerHTML = 'Your Coins: ' + coinBalance;
    updateShopUI();
    showCoinPopup('✓ Car Purchased!');
  }
}

function selectCar(car) {
  if (inventory.cars.includes(car)) {
    currentCarType = car;
    updateCar();
    updateShopUI();
    showCoinPopup('✓ Car Selected!');
  }
}

function buyPowerup(p, price) {
  if (coinBalance >= price) {
    coinBalance -= price;
    inventory.powerups[p]++;
    document.getElementById('coins').innerHTML = 'Coins: ' + coinBalance;
    document.getElementById('shopCoins').innerHTML = 'Your Coins: ' + coinBalance;
    updateShopUI();
    showCoinPopup('✓ Powerup Added!');
  }
}

function buyTrail(trail, price) {
  if (coinBalance >= price && !inventory.trails.includes(trail)) {
    coinBalance -= price;
    inventory.trails.push(trail);
    currentTrail = trail;
    document.getElementById('coins').innerHTML = 'Coins: ' + coinBalance;
    document.getElementById('shopCoins').innerHTML = 'Your Coins: ' + coinBalance;
    updateShopUI();
    showCoinPopup('✓ Trail Purchased!');
  }
}

function selectTrail(trail) {
  if (inventory.trails.includes(trail)) {
    currentTrail = trail;
    updateShopUI();
    showCoinPopup('✓ Trail Selected!');
  }
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

animate();
</script>
</body>
</html>'''

# Save the file
output_path = '/mnt/kimi/output/abuzar_racing_updated.html'
with open(output_path, 'w', encoding='utf-8') as f:
    f.write(html_content)

print(f"✅ Game saved to: {output_path}")
print("\n🎮 CHANGES MADE:")
print("=" * 50)
print("\n✓ Removed music system and title")
print("\n🚗 NEW CARS:")
print("- 🔴 Red Speedster (Default) - Equipped")
print("- 🔵 Blue Lightning (50🪙) - 5x coins")
print("- 🟢 Green Machine (75🪙) - 1.5x coins")
print("- 🟣 Purple Phantom (100🪙) - 2x coins")
print("- ⚫ Black Knight (100🪙) - 2.5x coins")
print("- ⚪ White Storm (100🪙) - 2x coins")
print("- 🟡 Golden Racer (250🪙) - 4x coins")
print("- 🌈 Rainbow Unicorn (500🪙) - 3x coins + rainbow effect")
print("- ⚽ Ronaldo OG (5,000🪙) - 3x coins + trail")
print("- 🐐 Messi OG (5,000🪙) - 3x coins + trail")
print("- 🐍 ABUZAR VENOM (500,000🪙) - 10000x coins")
print("\n⚡ POWER-UPS (Buy Multiple):")
print("- 🛡️ Shield (10🪙 each)")
print("- 🧲 Coin Magnet (15🪙 each)")
print("- 💰 2x Coins (15🪙 each) - 30s duration")
print("- ⏰ Time Warp (10🪙 each)")
print("\n🎨 TRAILS:")
print("- 🔵 Blue Trail (25🪙)")
print("- 🔴 Red Trail (25🪙)")
print("- 🟡 Gold Trail (75🪙)")
print("- 🌈 Rainbow Trail (200🪙)")
print("\n💰 Starting coins: 0")
print("🚗 Starting car: Red Speedster (only owned car)")