From 7539436fe7e0786f914be1d2478054d3bef68220 Mon Sep 17 00:00:00 2001
From: dhruvathakur <128789248+DhruvaPratapSingh@users.noreply.github.com>
Date: Wed, 22 Oct 2025 12:43:00 +0530
Subject: [PATCH] refactor Racing component for improved styling and UI
 enhancements

---
 src/app/game/Racing.jsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/game/Racing.jsx b/src/app/game/Racing.jsx
index bdbbe2b..ad37289 100644
--- a/src/app/game/Racing.jsx
+++ b/src/app/game/Racing.jsx
@@ -9,7 +9,6 @@ export default function Racing() {
 
   const trackLengthDesktop = 600; // px for desktop
   const trackLengthMobile = 300; // px for small screens
-
   const [trackLength, setTrackLength] = useState(trackLengthDesktop);
 
   // Update track length on resize
@@ -53,16 +52,18 @@ export default function Racing() {
   };
 
   return (
-    <div className="bg-gradient-to-br from-gray-50 dark:from-gray-900 via-gray-100 dark:via-gray-800 to-gray-200 dark:to-black py-10 md:py-12 rounded-3xl shadow-2xl text-center text-gray-900 dark:text-white space-y-8 md:space-y-10 backdrop-blur-xl transition-all">
-      <h2 className="text-3xl md:text-4xl font-extrabold">🏁 Racing Track</h2>
+    <div className="bg-gradient-to-br from-white dark:from-gray-900 via-gray-200 dark:via-gray-400 to-gray-300 dark:to-black py-10 md:py-12 rounded-3xl shadow-2xl text-center text-gray-600 dark:text-gray-400 space-y-8 md:space-y-10 backdrop-blur-xl transition-colors">
+      <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white">
+        🏁 Ultimate Racing Track
+      </h2>
 
       {/* Track */}
-      <div className="relative w-full max-w-[700px] h-48 md:h-56 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-gray-400 dark:to-gray-900 rounded-2xl border border-gray-400 dark:border-gray-600 overflow-hidden mx-auto">
+      <div className="relative w-full max-w-[700px] h-48 md:h-56 bg-gradient-to-r from-gray-300 dark:from-gray-400 to-gray-500 dark:to-gray-900 rounded-2xl border border-gray-400 dark:border-gray-600 overflow-hidden mx-auto shadow-inner">
         {/* Road markings */}
-        <div className="absolute top-1/2 left-0 w-full h-[4px] bg-white/50 dark:bg-white/30 rounded-full"></div>
+        <div className="absolute top-1/2 left-0 w-full h-[4px] bg-white/70 dark:bg-white/40 rounded-full"></div>
 
         {/* Finish Line */}
-        <div className="absolute left-[2%] md:left-[20px] top-0 h-full w-[12px] bg-[repeating-linear-gradient(45deg,white,white_10px,black_10px,black_20px)] rounded-sm"></div>
+        <div className="absolute left-[2%] md:left-[20px] top-0 h-full w-[12px] bg-[repeating-linear-gradient(45deg,white,white_10px,black_10px,black_20px)] rounded-sm shadow-lg"></div>
 
         {/* Car 1 */}
         <div
@@ -82,13 +83,17 @@ export default function Racing() {
       </div>
 
       {/* Winner Display */}
-      {winner && <p className="text-xl md:text-2xl font-bold animate-bounce">{winner}</p>}
+      {winner && (
+        <p className="text-xl md:text-2xl font-bold animate-bounce text-indigo-600 dark:text-indigo-400">
+          {winner}
+        </p>
+      )}
 
       {/* Start Button */}
       <button
         onClick={startRace}
         disabled={running}
-        className={`bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold px-6 md:px-8 py-2 md:py-3 rounded-xl shadow-md transition-all hover:scale-105 ${
+        className={`bg-gradient-to-r from-blue-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800 text-white font-semibold px-6 md:px-8 py-2 md:py-3 rounded-xl shadow-md transition-all hover:scale-105 ${
           running ? "opacity-50 cursor-not-allowed" : ""
         }`}
       >