From 28e09a1e2854542295d73fbb375e30266baa81de 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 11:37:18 +0000
Subject: [PATCH] Add numbers below circles

Add small-sized black font numbers below the circles in the Subtraction Game.
---
 src/components/SubtractionGame.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/SubtractionGame.tsx b/src/components/SubtractionGame.tsx
index 18783fa..4887d3e 100644
--- a/src/components/SubtractionGame.tsx
+++ b/src/components/SubtractionGame.tsx
@@ -212,14 +212,18 @@ const SubtractionGame: React.FC<SubtractionGameProps> = ({ showSocialShare = tru
             <div className="bg-card rounded-lg p-8 shadow-lg">
               <div className="flex flex-wrap justify-center gap-3">
                 {circles.map((_, index) => (
-                  <div
-                    key={index}
-                    className={getCircleClass(index)}
-                    onClick={() => handleCircleClick(index)}
-                    onMouseEnter={() => (highlightedIndices.includes(index) && !removedCircles.has(index)) ? setHoveredIndex(index) : null}
-                    onMouseLeave={() => setHoveredIndex(null)}
-                    title={highlightedIndices.includes(index) ? 'Click to select' : 'Not selectable'}
-                  />
+                  <div key={index} className="flex flex-col items-center">
+                    <div
+                      className={getCircleClass(index)}
+                      onClick={() => handleCircleClick(index)}
+                      onMouseEnter={() => (highlightedIndices.includes(index) && !removedCircles.has(index)) ? setHoveredIndex(index) : null}
+                      onMouseLeave={() => setHoveredIndex(null)}
+                      title={highlightedIndices.includes(index) ? 'Click to select' : 'Not selectable'}
+                    />
+                    <span className="text-xs text-black dark:text-white mt-1 font-medium">
+                      {index + 1}
+                    </span>
+                  </div>
                 ))}
               </div>