From b8ccd12279767fd610325bc3c2cac7d4b22e511e Mon Sep 17 00:00:00 2001
From: Sterling Archer <SterlingArcher2026@icloud.com>
Date: Wed, 27 May 2026 14:28:26 -0700
Subject: [PATCH] Fix pokeball throw animation: use offset-path curve to
 reliably hit the Pokemon

---
 game.js   | 12 ++----------
 style.css | 11 +++++------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/game.js b/game.js
index 4e756e4..dd5af65 100644
--- a/game.js
+++ b/game.js
@@ -1337,19 +1337,11 @@ class Game {
     ball.className = 'pokeball-throw';
     catchScreen.appendChild(ball);
 
-    const pokemonRect = pokemonEl.getBoundingClientRect();
-    const screenRect = catchScreen.getBoundingClientRect();
-    const targetX = pokemonRect.left - screenRect.left + pokemonRect.width / 2 - 16;
-    const targetY = pokemonRect.top - screenRect.top + pokemonRect.height / 2 - 16;
-
-    ball.style.setProperty('--target-x', targetX + 'px');
-    ball.style.setProperty('--target-y', targetY + 'px');
-
     setTimeout(() => {
       const burst = document.createElement('div');
       burst.className = 'pokeball-burst';
-      burst.style.left = targetX + 'px';
-      burst.style.top = targetY + 'px';
+      burst.style.left = '50%';
+      burst.style.top = '25%';
       catchScreen.appendChild(burst);
 
       ball.remove();
diff --git a/style.css b/style.css
index d80c3a5..2d8f00e 100644
--- a/style.css
+++ b/style.css
@@ -1272,17 +1272,16 @@ html, body {
   position:absolute;
   width:32px;
   height:32px;
-  bottom:10%;
-  right:10%;
+  bottom:15%;
+  right:8%;
   z-index:200;
   image-rendering:pixelated;
+  offset-path:path('M 0 0 C -60 -120, -120 -220, -140 -300');
   animation:pokeThrow .7s cubic-bezier(.2,.8,.3,1) forwards;
 }
 @keyframes pokeThrow {
-  0%   { transform:translate(0, 0) rotate(0deg) scale(1); opacity:1; }
-  30%  { transform:translate(calc(var(--target-x) * 0.3 - 80px), calc(var(--target-y) * 0.5 - 180px)) rotate(-180deg) scale(1.2); }
-  60%  { transform:translate(calc(var(--target-x) * 0.7 - 40px), calc(var(--target-y) * 0.8 - 100px)) rotate(-360deg) scale(1); }
-  100% { transform:translate(calc(var(--target-x) - 100%), calc(var(--target-y) - 90%)) rotate(-540deg) scale(0.8); opacity:1; }
+  0%   { offset-distance:0%; transform:rotate(0deg) scale(1); opacity:1; }
+  100% { offset-distance:100%; transform:rotate(-540deg) scale(0.7); opacity:1; }
 }
 
 .pokeball-burst {