From 1adc590312b42156e4b7efc08d71c16cdd57cf7e Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 22 Aug 2025 06:35:04 +0000
Subject: [PATCH] Fix hover effect on grey circles

Ensure grey circles do not change color on hover.
---
 src/components/SubtractionGame.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SubtractionGame.tsx b/src/components/SubtractionGame.tsx
index 822b4cd..d26cef4 100644
--- a/src/components/SubtractionGame.tsx
+++ b/src/components/SubtractionGame.tsx
@@ -79,9 +79,9 @@ const SubtractionGame = () => {
   };
 
   const getCircleClass = (index: number) => {
-    const baseClass = 'w-8 h-8 rounded-full border-2 border-black cursor-pointer transition-colors';
     const isHighlighted = highlightedIndices.includes(index);
-    const fillClass = isHighlighted ? 'bg-yellow-200 hover:bg-yellow-300' : 'bg-gray-300 hover:bg-gray-400';
+    const baseClass = `w-8 h-8 rounded-full border-2 border-black transition-colors ${isHighlighted ? 'cursor-pointer' : ''}`;
+    const fillClass = isHighlighted ? 'bg-yellow-200 hover:bg-yellow-300' : 'bg-gray-300';
     return `${baseClass} ${fillClass}`;
   };