@devrongx/games 0.4.44 → 0.4.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.4.44",
+  "version": "0.4.46",
   "description": "Game UI components for sports prediction markets",
   "license": "MIT",
   "main": "./src/index.ts",

package/src/games/prematch-bets/PreMatchIntro.tsx

@@ -252,34 +252,34 @@ const deriveDemoData = (config: IChallengeConfig) => {
     return { marketA, marketB, marketC, optIdxA, optIdxB, optionA, optionB, betA, betB, chips, rewardA, rewardB, combinedStake, combinedOdds, combinedReward };
 };
 
-// ── Slide 3: Markets demo — 3 questions, 2 selected one by one ──
+// ── Slide 3: Markets demo — two questions with full bet flow ──
 const MarketsSlide = ({ config }: SlideProps) => {
     const demo = useMemo(() => deriveDemoData(config), [config]);
     const [demoStep, setDemoStep] = useState(0);
 
     useEffect(() => {
         const timers = [
-            setTimeout(() => setDemoStep(1), 600),    // All 3 cards appear
-            setTimeout(() => setDemoStep(2), 2000),   // Card 1 option selected
-            setTimeout(() => setDemoStep(3), 3000),   // Card 1 chips + auto-select
-            setTimeout(() => setDemoStep(4), 3800),   // Card 1 outcome line
-            setTimeout(() => setDemoStep(5), 5000),   // Card 1 compresses, Card 2 option selected
-            setTimeout(() => setDemoStep(6), 6000),   // Card 2 chips + auto-select
-            setTimeout(() => setDemoStep(7), 6800),   // Card 2 outcome line
+            setTimeout(() => setDemoStep(1), 800),    // Card 1 appears
+            setTimeout(() => setDemoStep(2), 2200),   // Card 1 option selected
+            setTimeout(() => setDemoStep(3), 3200),   // Card 1 chips appear (none selected)
+            setTimeout(() => setDemoStep(4), 4400),   // Card 1 chip selected (1200ms gap)
+            setTimeout(() => setDemoStep(5), 5200),   // Card 1 outcome, chips collapse
+            setTimeout(() => setDemoStep(6), 6200),   // Card 2 appears
+            setTimeout(() => setDemoStep(7), 7400),   // Card 2 option selected
+            setTimeout(() => setDemoStep(8), 8400),   // Card 2 chips appear (none selected)
+            setTimeout(() => setDemoStep(9), 9600),   // Card 2 chip selected (1200ms gap)
+            setTimeout(() => setDemoStep(10), 10400),  // Card 2 outcome, chips collapse
         ];
         return () => timers.forEach(clearTimeout);
     }, []);
 
-    const { marketA, marketB, marketC, optIdxA, optIdxB, optionA, optionB, betA, betB, chips, rewardA, rewardB } = demo;
+    const { marketA, marketB, optIdxA, optIdxB, optionA, optionB, betA, betB, chips, rewardA, rewardB } = demo;
     const IconA = MARKET_ICONS[marketA.icon];
     const IconB = MARKET_ICONS[marketB.icon];
-    const IconC = MARKET_ICONS[marketC.icon];
-
-    const card1Compressed = demoStep >= 5;
 
-    // Shared option renderer for a full options grid
+    // Shared option renderer
     const renderOptionsGrid = (market: typeof marketA, selectedOptIdx: number | null) => (
-        <div className="grid grid-cols-2 gap-1.5">
+        <div className="grid grid-cols-2 gap-2">
             {market.options.map((opt, j) => {
                 const isSelected = selectedOptIdx !== null && j === selectedOptIdx;
                 return (
@@ -315,7 +315,7 @@ const MarketsSlide = ({ config }: SlideProps) => {
         </div>
     );
 
-    // Shared chip carousel renderer
+    // Chip carousel — selectedAmt of -1 means none selected
     const renderChips = (selectedAmt: number) => (
         <motion.div
             initial={{ opacity: 0, height: 0 }}
@@ -326,7 +326,7 @@ const MarketsSlide = ({ config }: SlideProps) => {
         >
             <span className="text-[8px] text-white/60 font-semibold flex-shrink-0" style={OUTFIT}>Bet:</span>
             {chips.map((amt, i) => {
-                const isChipSelected = amt === selectedAmt;
+                const isChipSelected = selectedAmt > 0 && amt === selectedAmt;
                 return (
                     <motion.div
                         key={amt}
@@ -349,7 +349,7 @@ const MarketsSlide = ({ config }: SlideProps) => {
         </motion.div>
     );
 
-    // Shared outcome line renderer
+    // Outcome line
     const renderOutcome = (bet: number, odds: number, reward: number) => (
         <motion.div
             initial={{ opacity: 0, y: 4 }}
@@ -361,7 +361,7 @@ const MarketsSlide = ({ config }: SlideProps) => {
             <span className="text-[9px] text-white font-semibold" style={OUTFIT}>{bet}</span>
             <span className="text-[8px] text-white" style={OUTFIT}>&times;</span>
             <span className="text-[9px] text-white/60 font-semibold" style={OUTFIT}>{odds}</span>
-            <span className="text-[8px] text-white/40" style={OUTFIT}>{"\u2192"}</span>
+            <span className="text-[8px] text-white/50" style={OUTFIT}>{"\u2192"}</span>
             <PointsIcon size={7} />
             <span className="text-[9px] text-[#22E3E8] font-bold" style={OUTFIT}>{reward}</span>
         </motion.div>
@@ -369,7 +369,7 @@ const MarketsSlide = ({ config }: SlideProps) => {
 
     return (
         <motion.div
-            className="flex flex-col items-center gap-2.5 w-full max-w-[300px]"
+            className="flex flex-col items-center gap-3 w-full max-w-[300px]"
             initial="initial"
             animate="animate"
             exit="exit"
@@ -385,149 +385,101 @@ const MarketsSlide = ({ config }: SlideProps) => {
                 {config.markets.length} questions to predict
             </motion.p>
 
-            {/* All 3 cards appear together */}
-            {demoStep >= 1 && (
-                <motion.div
-                    initial={{ opacity: 0, y: 16 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5 }}
-                    className="w-full flex flex-col gap-2"
-                >
-                    {/* Card 1 */}
-                    <div
-                        className="w-full rounded-lg px-3 py-2.5"
+            {/* Card 1 — always expanded */}
+            <AnimatePresence>
+                {demoStep >= 1 && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5 }}
+                        className="w-full rounded-lg px-3 py-3"
                         style={{
                             background: "rgba(255,255,255,0.03)",
                             border: "1px solid rgba(255,255,255,0.08)",
                         }}
                     >
-                        <div className="flex items-center gap-2 mb-1.5">
+                        <div className="flex items-center gap-2 mb-2">
                             {IconA && <IconA size={14} style={{ color: marketA.accent }} className="flex-shrink-0" />}
-                            <span className={`text-white font-semibold leading-tight ${card1Compressed ? "text-[11px]" : "text-[13px]"}`} style={OUTFIT}>
+                            <span className="text-[13px] text-white font-semibold leading-tight" style={OUTFIT}>
                                 {marketA.question}
                             </span>
                         </div>
 
-                        {!card1Compressed ? (
-                            <>
-                                {renderOptionsGrid(marketA, demoStep >= 2 ? optIdxA : null)}
-                                <AnimatePresence>
-                                    {demoStep >= 3 && demoStep < 5 && renderChips(betA)}
-                                </AnimatePresence>
-                            </>
-                        ) : (
-                            <div className="flex items-center gap-1.5">
-                                <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
-                                    <circle cx="8" cy="8" r="8" fill="white" />
-                                    <path d="M5 8l2 2 4-4" stroke="#9945FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                                </svg>
-                                <span className="text-[10px] text-white font-semibold" style={OUTFIT}>{optionA.label}</span>
-                                <span className="text-[9px] text-white/40 font-semibold" style={OUTFIT}>{optionA.odds}x</span>
-                            </div>
-                        )}
+                        {renderOptionsGrid(marketA, demoStep >= 2 ? optIdxA : null)}
 
-                        {demoStep >= 4 && renderOutcome(betA, optionA.odds, rewardA)}
-                    </div>
+                        <AnimatePresence>
+                            {demoStep >= 3 && demoStep < 5 && renderChips(demoStep >= 4 ? betA : -1)}
+                        </AnimatePresence>
 
-                    {/* Card 2 */}
-                    <div
-                        className="w-full rounded-lg px-3 py-2.5"
+                        {demoStep >= 5 && renderOutcome(betA, optionA.odds, rewardA)}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {/* Card 2 — always expanded */}
+            <AnimatePresence>
+                {demoStep >= 6 && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.5 }}
+                        className="w-full rounded-lg px-3 py-3"
                         style={{
                             background: "rgba(255,255,255,0.03)",
                             border: "1px solid rgba(255,255,255,0.08)",
                         }}
                     >
-                        <div className="flex items-center gap-2 mb-1.5">
+                        <div className="flex items-center gap-2 mb-2">
                             {IconB && <IconB size={14} style={{ color: marketB.accent }} className="flex-shrink-0" />}
                             <span className="text-[13px] text-white font-semibold leading-tight" style={OUTFIT}>
                                 {marketB.question}
                             </span>
                         </div>
 
-                        {renderOptionsGrid(marketB, demoStep >= 5 ? optIdxB : null)}
+                        {renderOptionsGrid(marketB, demoStep >= 7 ? optIdxB : null)}
 
                         <AnimatePresence>
-                            {demoStep >= 6 && renderChips(betB)}
+                            {demoStep >= 8 && demoStep < 10 && renderChips(demoStep >= 9 ? betB : -1)}
                         </AnimatePresence>
 
-                        {demoStep >= 7 && renderOutcome(betB, optionB.odds, rewardB)}
-                    </div>
-
-                    {/* Card 3 — always unselected */}
-                    <div
-                        className="w-full rounded-lg px-3 py-2.5"
-                        style={{
-                            background: "rgba(255,255,255,0.03)",
-                            border: "1px solid rgba(255,255,255,0.08)",
-                            opacity: demoStep >= 2 ? 0.5 : 1,
-                            transition: "opacity 0.5s",
-                        }}
-                    >
-                        <div className="flex items-center gap-2 mb-1.5">
-                            {IconC && <IconC size={14} style={{ color: marketC.accent }} className="flex-shrink-0" />}
-                            <span className="text-[13px] text-white font-semibold leading-tight" style={OUTFIT}>
-                                {marketC.question}
-                            </span>
-                        </div>
-                        {renderOptionsGrid(marketC, null)}
-                    </div>
-                </motion.div>
-            )}
+                        {demoStep >= 10 && renderOutcome(betB, optionB.odds, rewardB)}
+                    </motion.div>
+                )}
+            </AnimatePresence>
         </motion.div>
     );
 };
 
-// ── Slide 4: Compound bet demo ──
+// ── Slide 4: Compound bet demo — 3 full cards, 2 combined ──
 const MultiplierSlide = ({ config }: SlideProps) => {
     const demo = useMemo(() => deriveDemoData(config), [config]);
     const [step, setStep] = useState(0);
 
     useEffect(() => {
         const timers = [
-            setTimeout(() => setStep(1), 300),
-            setTimeout(() => setStep(2), 1200),
-            setTimeout(() => setStep(3), 3000),
-            setTimeout(() => setStep(4), 4200),
-            setTimeout(() => setStep(5), 5200),
-            setTimeout(() => setStep(6), 6500),
+            setTimeout(() => setStep(1), 300),    // Headline
+            setTimeout(() => setStep(2), 1200),   // 3 full cards appear
+            setTimeout(() => setStep(3), 3000),   // Card 1 highlights, outcome fades out
+            setTimeout(() => setStep(4), 4200),   // Card 2 highlights, outcome fades out
+            setTimeout(() => setStep(5), 5200),   // Combined outcome line
+            setTimeout(() => setStep(6), 6500),   // Payoff text
         ];
         return () => timers.forEach(clearTimeout);
     }, []);
 
-    const { marketA, marketB, optionA, optionB, betA, betB, rewardA, rewardB, combinedStake, combinedOdds, combinedReward } = demo;
+    const { marketA, marketB, marketC, optionA, optionB, betA, betB, rewardA, rewardB, combinedStake, combinedReward } = demo;
     const IconA = MARKET_ICONS[marketA.icon];
     const IconB = MARKET_ICONS[marketB.icon];
+    const IconC = MARKET_ICONS[marketC.icon];
 
-    // Shared outcome line — identical style for individual and combined
-    const renderOutcomeLine = (bet: number, odds: string, reward: number, pulse?: boolean) => (
-        <div className="flex items-center gap-[5px]">
-            <PointsIcon size={10} />
-            <span className="text-[12px] text-white font-semibold" style={OUTFIT}>{bet}</span>
-            <span className="text-[11px] text-white font-medium" style={OUTFIT}>&times;</span>
-            {pulse ? (
-                <motion.span
-                    className="text-[12px] text-white font-bold"
-                    style={OUTFIT}
-                    animate={{ scale: [1, 1.25, 1] }}
-                    transition={{ duration: 0.5, delay: 0.2 }}
-                >
-                    {odds}
-                </motion.span>
-            ) : (
-                <span className="text-[12px] text-white font-bold" style={OUTFIT}>{odds}</span>
-            )}
-            <span className="text-[11px] text-white/50" style={OUTFIT}>{"\u2192"}</span>
-            <PointsIcon size={10} />
-            <span className="text-[12px] text-[#22E3E8] font-bold" style={OUTFIT}>{reward}</span>
-        </div>
-    );
-
-    const renderCompactCard = (
+    // Full expanded card with options grid — selected option highlighted
+    const renderFullCard = (
         market: typeof marketA,
         Icon: typeof IconA,
-        option: typeof optionA,
-        betAmount: number,
-        reward: number,
+        selectedOptIdx: number | null,
+        betAmount: number | null,
+        odds: number | null,
+        reward: number | null,
         highlighted: boolean,
         hideOutcome: boolean,
     ) => (
@@ -543,32 +495,60 @@ const MultiplierSlide = ({ config }: SlideProps) => {
                 border: "1px solid rgba(255,255,255,0.08)",
             }}
         >
-            <div className="flex items-center gap-1.5 mb-1.5">
-                {Icon && <Icon size={12} style={{ color: market.accent }} className="flex-shrink-0" />}
-                <span className="text-[11px] text-white font-semibold leading-tight truncate" style={OUTFIT}>{market.question}</span>
+            <div className="flex items-center gap-2 mb-1.5">
+                {Icon && <Icon size={14} style={{ color: market.accent }} className="flex-shrink-0" />}
+                <span className="text-[12px] text-white font-semibold leading-tight" style={OUTFIT}>{market.question}</span>
             </div>
-            <div className="flex items-center gap-1.5 mb-1.5">
-                <div
-                    className="flex items-center gap-1 px-2 py-[2px] rounded-sm"
-                    style={{ background: "linear-gradient(135deg, #22E3E8, #9945FF)" }}
-                >
-                    <span className="text-[9px] text-white font-semibold" style={OUTFIT}>{option.label}</span>
-                </div>
-                <span className="text-[9px] text-white/50 font-semibold" style={OUTFIT}>at {option.odds}x</span>
+            <div className="grid grid-cols-2 gap-1.5">
+                {market.options.map((opt, j) => {
+                    const isSelected = selectedOptIdx !== null && j === selectedOptIdx;
+                    return (
+                        <div
+                            key={j}
+                            className="flex items-center justify-between px-2 py-1 rounded-sm"
+                            style={{
+                                background: isSelected ? "linear-gradient(135deg, #22E3E8, #9945FF)" : "transparent",
+                                borderLeft: isSelected ? "1px solid transparent" : "1px solid rgba(255,255,255,0.12)",
+                                borderBottom: isSelected ? "1px solid transparent" : "1px solid rgba(255,255,255,0.06)",
+                                borderTop: "1px solid transparent",
+                                borderRight: "1px solid transparent",
+                            }}
+                        >
+                            <div className="flex items-center gap-1 min-w-0 flex-shrink">
+                                {isSelected && (
+                                    <svg width="8" height="8" viewBox="0 0 16 16" fill="none">
+                                        <circle cx="8" cy="8" r="8" fill="white" />
+                                        <path d="M5 8l2 2 4-4" stroke="#9945FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                                    </svg>
+                                )}
+                                <span className="text-[9px] text-white font-semibold truncate" style={OUTFIT}>{opt.label}</span>
+                            </div>
+                            <span className={`text-[9px] font-bold flex-shrink-0 ${isSelected ? "text-white" : "text-[#22E3E8]"}`} style={OUTFIT}>{opt.odds}x</span>
+                        </div>
+                    );
+                })}
             </div>
-            <motion.div
-                className="overflow-hidden"
-                animate={{ opacity: hideOutcome ? 0 : 1, height: hideOutcome ? 0 : "auto" }}
-                transition={{ duration: 0.3 }}
-            >
-                {renderOutcomeLine(betAmount, String(option.odds), reward)}
-            </motion.div>
+            {betAmount !== null && odds !== null && reward !== null && (
+                <motion.div
+                    className="flex items-center gap-[4px] mt-1.5 overflow-hidden"
+                    animate={{ opacity: hideOutcome ? 0 : 1, height: hideOutcome ? 0 : "auto" }}
+                    transition={{ duration: 0.3 }}
+                >
+                    <PointsIcon size={8} />
+                    <span className="text-[10px] text-white font-semibold" style={OUTFIT}>{betAmount}</span>
+                    <span className="text-[9px] text-white" style={OUTFIT}>&times;</span>
+                    <span className="text-[10px] text-white font-bold" style={OUTFIT}>{odds}</span>
+                    <span className="text-[9px] text-white/50" style={OUTFIT}>{"\u2192"}</span>
+                    <PointsIcon size={8} />
+                    <span className="text-[10px] text-[#22E3E8] font-bold" style={OUTFIT}>{reward}</span>
+                </motion.div>
+            )}
         </motion.div>
     );
 
     return (
         <motion.div
-            className="flex flex-col items-center gap-3 w-full max-w-[300px]"
+            className="flex flex-col items-center gap-2.5 w-full max-w-[300px]"
             initial="initial"
             animate="animate"
             exit="exit"
@@ -586,7 +566,7 @@ const MultiplierSlide = ({ config }: SlideProps) => {
                 </motion.p>
             )}
 
-            {/* Two compact result cards */}
+            {/* 3 full expanded cards */}
             {step >= 2 && (
                 <motion.div
                     initial={{ opacity: 0, y: 16 }}
@@ -594,8 +574,39 @@ const MultiplierSlide = ({ config }: SlideProps) => {
                     transition={{ duration: 0.5 }}
                     className="w-full flex flex-col gap-2"
                 >
-                    {renderCompactCard(marketA, IconA, optionA, betA, rewardA, step >= 3, step >= 3)}
-                    {renderCompactCard(marketB, IconB, optionB, betB, rewardB, step >= 4, step >= 4)}
+                    {renderFullCard(marketA, IconA, demo.optIdxA, betA, optionA.odds, rewardA, step >= 3, step >= 3)}
+                    {renderFullCard(marketB, IconB, demo.optIdxB, betB, optionB.odds, rewardB, step >= 4, step >= 4)}
+                    {/* Card 3 — unselected, no bet */}
+                    <div
+                        className="w-full rounded-lg px-3 py-2.5"
+                        style={{
+                            background: "rgba(255,255,255,0.03)",
+                            border: "1px solid rgba(255,255,255,0.08)",
+                            opacity: 0.5,
+                        }}
+                    >
+                        <div className="flex items-center gap-2 mb-1.5">
+                            {IconC && <IconC size={14} style={{ color: marketC.accent }} className="flex-shrink-0" />}
+                            <span className="text-[12px] text-white font-semibold leading-tight" style={OUTFIT}>{marketC.question}</span>
+                        </div>
+                        <div className="grid grid-cols-2 gap-1.5">
+                            {marketC.options.map((opt, j) => (
+                                <div
+                                    key={j}
+                                    className="flex items-center justify-between px-2 py-1 rounded-sm"
+                                    style={{
+                                        borderLeft: "1px solid rgba(255,255,255,0.12)",
+                                        borderBottom: "1px solid rgba(255,255,255,0.06)",
+                                        borderTop: "1px solid transparent",
+                                        borderRight: "1px solid transparent",
+                                    }}
+                                >
+                                    <span className="text-[9px] text-white font-semibold truncate" style={OUTFIT}>{opt.label}</span>
+                                    <span className="text-[9px] font-bold text-[#22E3E8] flex-shrink-0" style={OUTFIT}>{opt.odds}x</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
                 </motion.div>
             )}
 
@@ -647,10 +658,18 @@ const MultiplierSlide = ({ config }: SlideProps) => {
 };
 
 // Free leaderboard payouts: ranks 1-10, $25 down to $2.5 in $2.5 steps
-const FREE_PAYOUTS = Array.from({ length: 10 }, (_, i) => ({
-    rank: i + 1,
-    usdc: 25 - i * 2.5,
-}));
+const FREE_PAYOUTS = [
+    { rank: 1, points: 4850, usdc: 25 },
+    { rank: 2, points: 4200, usdc: 22.5 },
+    { rank: 3, points: 3900, usdc: 20 },
+    { rank: 4, points: 3400, usdc: 17.5 },
+    { rank: 5, points: 2950, usdc: 15 },
+    { rank: 6, points: 2600, usdc: 12.5 },
+    { rank: 7, points: 2100, usdc: 10 },
+    { rank: 8, points: 1750, usdc: 7.5 },
+    { rank: 9, points: 1300, usdc: 5 },
+    { rank: 10, points: 900, usdc: 2.5 },
+];
 
 // ── Slide 5: Win USDC ──
 const WinSlide = ({ config, onComplete }: SlideProps) => {
@@ -693,9 +712,13 @@ const WinSlide = ({ config, onComplete }: SlideProps) => {
                     style={{ border: "1px solid rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.02)" }}
                 >
                     {/* Table header */}
-                    <div className="flex items-center justify-between px-3 py-1.5" style={{ borderBottom: "1px solid rgba(255,255,255,0.06)", background: "rgba(255,255,255,0.03)" }}>
+                    <div className="grid grid-cols-3 items-center px-3 py-1.5" style={{ borderBottom: "1px solid rgba(255,255,255,0.06)", background: "rgba(255,255,255,0.03)" }}>
                         <span className="text-[9px] font-bold text-white/50 uppercase tracking-widest" style={OUTFIT}>Rank</span>
-                        <div className="flex items-center gap-1">
+                        <div className="flex items-center gap-1 justify-center">
+                            <PointsIcon size={9} />
+                            <span className="text-[9px] font-bold text-white/50 uppercase tracking-widest" style={OUTFIT}>Points</span>
+                        </div>
+                        <div className="flex items-center gap-1 justify-end">
                             <Image src="/icons/ic_usdc_hd.png" alt="USDC" width={11} height={11} className="rounded-full" />
                             <span className="text-[9px] font-bold text-white/50 uppercase tracking-widest" style={OUTFIT}>Reward</span>
                         </div>
@@ -707,7 +730,7 @@ const WinSlide = ({ config, onComplete }: SlideProps) => {
                             initial={{ opacity: 0, x: -8 }}
                             animate={{ opacity: 1, x: 0 }}
                             transition={{ delay: 1.6 + idx * 0.06, duration: 0.2 }}
-                            className="flex items-center justify-between px-3 py-1.5"
+                            className="grid grid-cols-3 items-center px-3 py-1.5"
                             style={{
                                 borderBottom: idx < FREE_PAYOUTS.length - 1 ? "1px solid rgba(255,255,255,0.04)" : "none",
                                 background: idx === 0 ? "rgba(255,215,0,0.04)" : idx < 3 ? "rgba(255,255,255,0.015)" : "transparent",
@@ -727,8 +750,14 @@ const WinSlide = ({ config, onComplete }: SlideProps) => {
                                 )}
                             </div>
                             <span
-                                className="text-[11px] font-bold"
-                                style={{ ...OUTFIT, color: idx === 0 ? "#FFD700" : idx < 3 ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.6)" }}
+                                className="text-[10px] font-semibold text-center"
+                                style={{ ...OUTFIT, color: idx === 0 ? "#22E3E8" : idx < 3 ? "rgba(255,255,255,0.75)" : "rgba(255,255,255,0.5)" }}
+                            >
+                                {row.points.toLocaleString()}
+                            </span>
+                            <span
+                                className="text-[11px] font-bold text-right select-none"
+                                style={{ ...OUTFIT, color: idx === 0 ? "#FFD700" : idx < 3 ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.6)", filter: "blur(5px)" }}
                             >
                                 ${row.usdc.toFixed(2)}
                             </span>