// Add this to your game.js file or create a new cursor.js file

document.addEventListener('DOMContentLoaded', () => {
  const cursor = document.createElement('div');
  cursor.classList.add('custom-cursor');
  cursor.innerHTML = '<div class="cursor-dot"></div><div class="cursor-outline"></div>';
  document.body.appendChild(cursor);

  document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });

  document.addEventListener('mousedown', () => {
    cursor.classList.add('clicking');
  });

  document.addEventListener('mouseup', () => {
    cursor.classList.remove('clicking');
  });

  // Optional: Add a subtle trailing effect
  let trailDot = null;
  setInterval(() => {
    if (trailDot) {
      trailDot.remove();
    }
    trailDot = cursor.querySelector('.cursor-dot').cloneNode(true);
    trailDot.style.transition = 'all 0.15s linear';
    trailDot.style.opacity = '0.5';
    cursor.appendChild(trailDot);
    setTimeout(() => {
      if (trailDot) {
        trailDot.style.opacity = '0';
      }
    }, 50);
  }, 100);
});