@devrongx/games 0.4.42 → 0.4.44

package/package.json

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

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

@@ -4,8 +4,9 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import Image from "next/image";
 import { motion, AnimatePresence } from "framer-motion";
-import { Coins, Trophy, Pause, Rewind, FastForward, RotateCcw } from "lucide-react";
+import { Trophy, Pause, Rewind, FastForward, RotateCcw } from "lucide-react";
 import { IChallengeConfig } from "./config";
+import { MARKET_ICONS, PointsIcon } from "./constants";
 
 const OUTFIT = { fontFamily: "Outfit, sans-serif" };
 
@@ -216,64 +217,85 @@ const PointsSlide = ({ config }: SlideProps) => (
     </motion.div>
 );
 
-// ── Slide 3: Markets demo ──
+// ── Shared helper: derive demo data for MarketsSlide + MultiplierSlide ──
+const deriveDemoData = (config: IChallengeConfig) => {
+    const markets = config.markets;
+    const len = markets.length;
+
+    let idxA: number, idxB: number, idxC: number;
+    if (len > 12) { idxA = 8; idxB = 12; idxC = 4; }
+    else if (len >= 3) { idxA = len - 3; idxB = len - 2; idxC = len - 1; }
+    else if (len >= 2) { idxA = 0; idxB = 1; idxC = 0; }
+    else { idxA = 0; idxB = 0; idxC = 0; }
+
+    const marketA = markets[idxA];
+    const marketB = markets[idxB];
+    const marketC = markets[idxC]; // unselected third question
+
+    const optIdxA = Math.min(1, marketA.options.length - 1);
+    const optIdxB = Math.min(2, marketB.options.length - 1);
+    const optionA = marketA.options[optIdxA];
+    const optionB = marketB.options[optIdxB];
+
+    const inc = config.parlayConfig.stakeIncrements;
+    const betA = inc * 2;
+    const betB = inc * 3;
+    const chips = [inc, inc * 2, inc * 3, inc * 4];
+
+    const rewardA = Math.round(betA * optionA.odds);
+    const rewardB = Math.round(betB * optionB.odds);
+
+    const combinedStake = betA + betB;
+    const combinedOdds = optionA.odds * optionB.odds;
+    const combinedReward = Math.round(combinedStake * combinedOdds);
+
+    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 ──
 const MarketsSlide = ({ config }: SlideProps) => {
+    const demo = useMemo(() => deriveDemoData(config), [config]);
     const [demoStep, setDemoStep] = useState(0);
 
     useEffect(() => {
         const timers = [
-            setTimeout(() => setDemoStep(1), 2800),
-            setTimeout(() => setDemoStep(2), 4200),
+            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
         ];
         return () => timers.forEach(clearTimeout);
     }, []);
 
-    return (
-        <motion.div
-            className="flex flex-col items-center gap-5 w-full max-w-[300px]"
-            initial="initial"
-            animate="animate"
-            exit="exit"
-        >
-            <motion.p
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.2 }}
-                className="text-[14px] text-white font-medium text-center"
-                style={OUTFIT}
-            >
-                {config.markets.length} markets to predict
-            </motion.p>
+    const { marketA, marketB, marketC, 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];
 
-            <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 1.2 }}
-                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-2.5">
-                    <Coins size={14} className="text-[#22E3E8]/50 flex-shrink-0" />
-                    <span className="text-[13px] text-white font-semibold" style={OUTFIT}>
-                        Who wins the toss?
-                    </span>
-                </div>
-                <div className="grid grid-cols-2 gap-2">
+    const card1Compressed = demoStep >= 5;
+
+    // Shared option renderer for a full options grid
+    const renderOptionsGrid = (market: typeof marketA, selectedOptIdx: number | null) => (
+        <div className="grid grid-cols-2 gap-1.5">
+            {market.options.map((opt, j) => {
+                const isSelected = selectedOptIdx !== null && j === selectedOptIdx;
+                return (
                     <div
-                        className="flex items-center justify-between px-2.5 py-2 rounded-sm transition-all duration-500"
+                        key={j}
+                        className="flex items-center justify-between px-2 py-1.5 rounded-sm transition-all duration-500"
                         style={{
-                            background: demoStep >= 1 ? "linear-gradient(135deg, #22E3E8, #9945FF)" : "transparent",
-                            borderLeft: demoStep >= 1 ? "1px solid transparent" : "1px solid rgba(255,255,255,0.12)",
-                            borderBottom: demoStep >= 1 ? "1px solid transparent" : "1px solid rgba(255,255,255,0.06)",
+                            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.5">
-                            {demoStep >= 1 && (
+                        <div className="flex items-center gap-1.5 min-w-0 flex-shrink">
+                            {isSelected && (
                                 <motion.svg
                                     initial={{ scale: 0 }}
                                     animate={{ scale: 1 }}
@@ -284,131 +306,345 @@ const MarketsSlide = ({ config }: SlideProps) => {
                                     <path d="M5 8l2 2 4-4" stroke="#9945FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                 </motion.svg>
                             )}
-                            <span className="text-[11px] text-white font-semibold" style={OUTFIT}>{config.teamA.name}</span>
+                            <span className="text-[10px] text-white font-semibold truncate" style={OUTFIT}>{opt.label}</span>
                         </div>
-                        <span className={`text-[10px] font-bold ${demoStep >= 1 ? "text-white" : "text-[#22E3E8]"}`} style={OUTFIT}>
-                            1.4x
-                        </span>
+                        <span className={`text-[10px] font-bold flex-shrink-0 ${isSelected ? "text-white" : "text-[#22E3E8]"}`} style={OUTFIT}>{opt.odds}x</span>
                     </div>
-                    <div
-                        className="flex items-center justify-between px-2.5 py-2 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",
+                );
+            })}
+        </div>
+    );
+
+    // Shared chip carousel renderer
+    const renderChips = (selectedAmt: number) => (
+        <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3 }}
+            className="flex items-center gap-1.5 overflow-hidden mt-2"
+        >
+            <span className="text-[8px] text-white/60 font-semibold flex-shrink-0" style={OUTFIT}>Bet:</span>
+            {chips.map((amt, i) => {
+                const isChipSelected = amt === selectedAmt;
+                return (
+                    <motion.div
+                        key={amt}
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ delay: i * 0.08 }}
+                        className="flex items-center gap-0.5 px-2 py-[3px] rounded relative overflow-hidden"
+                        style={isChipSelected ? {
+                            background: "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)",
+                        } : {
+                            background: "rgba(34,227,232,0.08)",
+                            border: "1px solid rgba(34,227,232,0.2)",
                         }}
                     >
-                        <span className="text-[11px] text-white font-semibold" style={OUTFIT}>{config.teamB.name}</span>
-                        <span className="text-[10px] font-bold text-[#22E3E8]" style={OUTFIT}>1.4x</span>
-                    </div>
-                </div>
-                <AnimatePresence>
-                    {demoStep >= 2 && (
-                        <motion.div
-                            initial={{ opacity: 0, height: 0 }}
-                            animate={{ opacity: 1, height: "auto" }}
-                            exit={{ opacity: 0, height: 0 }}
-                            transition={{ duration: 0.3 }}
-                            className="mt-2 flex items-center gap-1.5 overflow-hidden"
-                        >
-                            <span className="text-[8px] text-white/60 font-semibold flex-shrink-0" style={OUTFIT}>Bet:</span>
-                            {[50, 100, 150, 200].map((amt, i) => (
-                                <motion.div
-                                    key={amt}
-                                    initial={{ opacity: 0, scale: 0.8 }}
-                                    animate={{ opacity: 1, scale: 1 }}
-                                    transition={{ delay: i * 0.08 }}
-                                    className="flex items-center gap-0.5 px-2 py-[3px] rounded relative overflow-hidden"
-                                    style={amt === 100 ? {
-                                        background: "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)",
-                                    } : {
-                                        background: "rgba(34,227,232,0.08)",
-                                        border: "1px solid rgba(34,227,232,0.2)",
-                                    }}
-                                >
-                                    <Image src="/iamgame_square_logo.jpg" alt="" width={7} height={7} className="rounded-[1px] relative z-[1]" />
-                                    <span
-                                        className={`text-[9px] font-bold relative z-[1] ${amt === 100 ? "text-black" : "text-[#22E3E8]"}`}
-                                        style={OUTFIT}
-                                    >
-                                        {amt}
-                                    </span>
-                                </motion.div>
-                            ))}
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-            </motion.div>
+                        <PointsIcon size={7} />
+                        <span className={`text-[9px] font-bold relative z-[1] ${isChipSelected ? "text-black" : "text-[#22E3E8]"}`} style={OUTFIT}>{amt}</span>
+                    </motion.div>
+                );
+            })}
+        </motion.div>
+    );
 
+    // Shared outcome line renderer
+    const renderOutcome = (bet: number, odds: number, reward: number) => (
+        <motion.div
+            initial={{ opacity: 0, y: 4 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3 }}
+            className="flex items-center gap-[3px] mt-1.5"
+        >
+            <PointsIcon size={7} />
+            <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>
+            <PointsIcon size={7} />
+            <span className="text-[9px] text-[#22E3E8] font-bold" style={OUTFIT}>{reward}</span>
+        </motion.div>
+    );
+
+    return (
+        <motion.div
+            className="flex flex-col items-center gap-2.5 w-full max-w-[300px]"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+        >
+            {/* Header */}
             <motion.p
-                initial={{ opacity: 0, y: 16 }}
+                initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 5.0 }}
-                className="text-[12px] text-white/40 font-medium text-center"
+                transition={{ duration: 0.5 }}
+                className="text-[14px] text-white font-medium text-center"
                 style={OUTFIT}
             >
-                Toss, winner, top scorers, boundaries, wickets & more
+                {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"
+                        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">
+                            {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}>
+                                {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>
+                        )}
+
+                        {demoStep >= 4 && renderOutcome(betA, optionA.odds, rewardA)}
+                    </div>
+
+                    {/* Card 2 */}
+                    <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)",
+                        }}
+                    >
+                        <div className="flex items-center gap-2 mb-1.5">
+                            {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)}
+
+                        <AnimatePresence>
+                            {demoStep >= 6 && renderChips(betB)}
+                        </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>
+            )}
         </motion.div>
     );
 };
 
-// ── Slide 4: Compound multiplier ──
-const MultiplierSlide = ({ config }: SlideProps) => (
-    <motion.div
-        className="flex flex-col items-center gap-4"
-        initial="initial"
-        animate="animate"
-        exit="exit"
-    >
-        <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-            className="text-[15px] text-white font-semibold"
-            style={OUTFIT}
-        >
-            Stack predictions.
-        </motion.p>
-        <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 1.0 }}
-            className="text-[15px] text-white/70 font-medium"
-            style={OUTFIT}
-        >
-            Multiply your odds.
-        </motion.p>
+// ── Slide 4: Compound bet demo ──
+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),
+        ];
+        return () => timers.forEach(clearTimeout);
+    }, []);
+
+    const { marketA, marketB, optionA, optionB, betA, betB, rewardA, rewardB, combinedStake, combinedOdds, combinedReward } = demo;
+    const IconA = MARKET_ICONS[marketA.icon];
+    const IconB = MARKET_ICONS[marketB.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 = (
+        market: typeof marketA,
+        Icon: typeof IconA,
+        option: typeof optionA,
+        betAmount: number,
+        reward: number,
+        highlighted: boolean,
+        hideOutcome: boolean,
+    ) => (
         <motion.div
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.7, delay: 2.0, ease: "easeOut" }}
+            className="w-full rounded-lg px-3 py-2.5"
+            animate={{
+                borderColor: highlighted ? "rgba(34,227,232,0.4)" : "rgba(255,255,255,0.08)",
+                boxShadow: highlighted ? "0 0 12px rgba(34,227,232,0.15)" : "0 0 0px transparent",
+            }}
+            transition={{ duration: 0.4 }}
+            style={{
+                background: "rgba(255,255,255,0.03)",
+                border: "1px solid rgba(255,255,255,0.08)",
+            }}
         >
-            <span
-                className="text-[72px] font-bold leading-none"
-                style={{
-                    ...OUTFIT,
-                    background: "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)",
-                    WebkitBackgroundClip: "text",
-                    WebkitTextFillColor: "transparent",
-                    backgroundClip: "text",
-                }}
+            <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>
+            <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>
+            <motion.div
+                className="overflow-hidden"
+                animate={{ opacity: hideOutcome ? 0 : 1, height: hideOutcome ? 0 : "auto" }}
+                transition={{ duration: 0.3 }}
             >
-                {config.compoundMultipliers[config.compoundMultipliers.length - 1]}x
-            </span>
+                {renderOutcomeLine(betAmount, String(option.odds), reward)}
+            </motion.div>
         </motion.div>
-        <motion.p
-            initial={{ opacity: 0, y: 16 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, delay: 3.0 }}
-            className="text-[12px] text-white/40 font-medium"
-            style={OUTFIT}
+    );
+
+    return (
+        <motion.div
+            className="flex flex-col items-center gap-3 w-full max-w-[300px]"
+            initial="initial"
+            animate="animate"
+            exit="exit"
         >
-            max compound multiplier
-        </motion.p>
-    </motion.div>
-);
+            {/* Headline */}
+            {step >= 1 && (
+                <motion.p
+                    initial={{ opacity: 0, y: 16 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4 }}
+                    className="text-[15px] text-white font-semibold"
+                    style={OUTFIT}
+                >
+                    Stack predictions. Multiply returns.
+                </motion.p>
+            )}
+
+            {/* Two compact result cards */}
+            {step >= 2 && (
+                <motion.div
+                    initial={{ opacity: 0, y: 16 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    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)}
+                </motion.div>
+            )}
+
+            {/* Combined outcome */}
+            {step >= 5 && (
+                <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4 }}
+                    className="w-full flex flex-col items-center gap-2 pt-2"
+                >
+                    <span className="text-[10px] text-white/40 uppercase tracking-widest font-semibold" style={OUTFIT}>Combined multiplier</span>
+                    <div className="flex items-center gap-[6px]">
+                        <PointsIcon size={12} />
+                        <span className="text-[15px] text-white font-semibold" style={OUTFIT}>{combinedStake}</span>
+                        <span className="text-[13px] text-white font-medium" style={OUTFIT}>&times;</span>
+                        <motion.span
+                            className="text-[15px] text-white font-bold"
+                            style={OUTFIT}
+                            animate={{ scale: [1, 1.25, 1] }}
+                            transition={{ duration: 0.5, delay: 0.2 }}
+                        >
+                            {optionA.odds}
+                        </motion.span>
+                        <span className="text-[13px] text-white font-medium" style={OUTFIT}>&times;</span>
+                        <span className="text-[15px] text-white font-bold" style={OUTFIT}>{optionB.odds}</span>
+                        <span className="text-[13px] text-white/50" style={OUTFIT}>{"\u2192"}</span>
+                        <PointsIcon size={12} />
+                        <span className="text-[15px] text-[#22E3E8] font-bold" style={OUTFIT}>{combinedReward}</span>
+                    </div>
+                </motion.div>
+            )}
+
+            {/* Payoff text */}
+            {step >= 6 && (
+                <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.4 }}
+                    className="pt-1"
+                >
+                    <p className="text-[14px] text-white/70 font-medium text-center" style={OUTFIT}>
+                        Combine more predictions. Multiply further.
+                    </p>
+                </motion.div>
+            )}
+        </motion.div>
+    );
+};
 
 // Free leaderboard payouts: ranks 1-10, $25 down to $2.5 in $2.5 steps
 const FREE_PAYOUTS = Array.from({ length: 10 }, (_, i) => ({
@@ -543,8 +779,8 @@ export const PreMatchIntro = ({ config, onComplete }: { config: IChallengeConfig
             { component: LogoSlide,       duration: 5500 },
             { component: EntrySlide,      duration: 5000 },
             { component: PointsSlide,     duration: 5500 },
-            { component: MarketsSlide,    duration: 7000 },
-            { component: MultiplierSlide, duration: 5500 },
+            { component: MarketsSlide,    duration: 12000 },
+            { component: MultiplierSlide, duration: 10000 },
             { component: WinSlide,        duration: 5500 },
         ];
         return config.entryFee === 0 ? all.filter((_, i) => i !== 1) : all;