Phase 7

src/components/ui/loyalty-card.tsx

@@ -58,7 +58,10 @@ export function LoyaltyCard({
           <div className="grid grid-cols-5 gap-2">
             {Array.from({ length: stampsRequired }, (_, i) => {
               const earned = i < stampsEarned;
-              const isRewardSlot = i === stampsRequired - 1;
+              // Only the final slot gets reward styling, and only once it's
+              // actually been earned — otherwise an in-progress card (e.g.
+              // 3/10 stamps) would show the reward label on slot 10 already.
+              const isRewardSlot = earned && i === stampsRequired - 1;
               return (
                 <div
                   key={i}