(function () {
  const canvas = document.getElementById('drag-ball');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const W = 200, H = 200;
  canvas.width = W;
  canvas.height = H;

  let ballX = W / 2, ballY = H / 2;
  let dragging = false;
  let offsetX = 0, offsetY = 0;

  function drawBall() {
    ctx.clearRect(0, 0, W, H);
    const r = 30;
    const grad = ctx.createRadialGradient(ballX, ballY, 0, ballX, ballY, r);
    grad.addColorStop(0, '#ffb300');
    grad.addColorStop(1, '#ff6f00');
    ctx.beginPath();
    ctx.arc(ballX, ballY, r, 0, Math.PI * 2);
    ctx.fillStyle = grad;
    ctx.fill();
    ctx.fillStyle = '#fff';
    ctx.font = '14px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('(¬‿¬)', ballX, ballY);
  }

  function getPos(e) {
    const rect = canvas.getBoundingClientRect();
    const scaleX = W / rect.width;
    const scaleY = H / rect.height;
    if (e.touches) {
      return {
        x: (e.touches[0].clientX - rect.left) * scaleX,
        y: (e.touches[0].clientY - rect.top) * scaleY
      };
    }
    return {
      x: (e.clientX - rect.left) * scaleX,
      y: (e.clientY - rect.top) * scaleY
    };
  }

  canvas.addEventListener('mousedown', (e) => {
    const pos = getPos(e);
    const dist = Math.hypot(pos.x - ballX, pos.y - ballY);
    if (dist < 30) { dragging = true; offsetX = pos.x - ballX; offsetY = pos.y - ballY; }
  });
  canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const pos = getPos(e);
    const dist = Math.hypot(pos.x - ballX, pos.y - ballY);
    if (dist < 30) { dragging = true; offsetX = pos.x - ballX; offsetY = pos.y - ballY; }
  }, { passive: false });

  window.addEventListener('mousemove', (e) => {
    if (!dragging) return;
    const pos = getPos(e);
    ballX = Math.max(30, Math.min(W - 30, pos.x - offsetX));
    ballY = Math.max(30, Math.min(H - 30, pos.y - offsetY));
    drawBall();
  });
  window.addEventListener('touchmove', (e) => {
    if (!dragging) return;
    const pos = getPos(e);
    ballX = Math.max(30, Math.min(W - 30, pos.x - offsetX));
    ballY = Math.max(30, Math.min(H - 30, pos.y - offsetY));
    drawBall();
  });

  window.addEventListener('mouseup', () => { dragging = false; });
  window.addEventListener('touchend', () => { dragging = false; });

  drawBall();
})();