From dc32e1c7abfef0f4af7f11a3918aab95747533cc Mon Sep 17 00:00:00 2001
From: Sterling Archer <SterlingArcher2026@icloud.com>
Date: Wed, 27 May 2026 14:03:32 -0700
Subject: [PATCH] Fix grass mirroring: use dedicated flipped keyframe animation
 instead of inline transform that was overridden by grassSway

---
 game.js   | 2 +-
 style.css | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/game.js b/game.js
index 0a8b77d..968f0b9 100644
--- a/game.js
+++ b/game.js
@@ -1445,7 +1445,7 @@ class Game {
       span.style.top               = y + 'px';
       span.style.animationDelay    = (Math.random() * 4).toFixed(2) + 's';
       span.style.animationDuration = (2 + Math.random() * 2).toFixed(1) + 's';
-      if (Math.random() > 0.5) span.style.transform = 'scaleX(-1)';
+      if (Math.random() > 0.5) span.classList.add('tall-grass-flip');
       container.appendChild(span);
     }
     this._rocks = [];
diff --git a/style.css b/style.css
index 40e8b06..a132ded 100644
--- a/style.css
+++ b/style.css
@@ -511,6 +511,14 @@ html, body {
   50%  { transform: rotate(2deg) scaleY(1.05); }
   100% { transform: rotate(-3deg) scaleY(1); }
 }
+.tall-grass-flip {
+  animation: grassSwayFlip 2s ease-in-out infinite alternate;
+}
+@keyframes grassSwayFlip {
+  0%   { transform: scaleX(-1) rotate(-3deg) scaleY(1); }
+  50%  { transform: scaleX(-1) rotate(2deg) scaleY(1.05); }
+  100% { transform: scaleX(-1) rotate(-3deg) scaleY(1); }
+}
 /* Directional nudge arrow */
 .map-dir-arrow {
   position: absolute;