Lucky Spin

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Rebuild a responsive, touch-friendly 2D arcade slot-machine game titled "Lucky Spin". Use a dark navy/purple visual style with a subtle radial gradient background, centered on a compact card layout. The top header shows the bold uppercase brand "LUCKY SPIN" with "SPIN" in gold, plus a rounded "PLAY MONEY ONLY" badge. Add a large rounded slot-machine panel with a blue-purple gradient, light translucent border, inner highlight, and deep shadow.

Inside the panel, show a centered status message initially reading "Line up three symbols to win." Include a jackpot section with the label "Jackpot · hit 7️⃣ 7️⃣ 7️⃣", a gold jackpot amount initially 250, and a horizontal progress meter initially filled to 25% against a dark track. Then show three large square-ish reels in a row inside a dark inset container. Each reel has rounded corners, a navy gradient tile, subtle inset shading, and a large centered emoji symbol. Start the reels as 🍒, 7️⃣, and 💎. The available symbols are 🍒 (multiplier 4), 🍋 (3), 🔔 (5), ⭐ (8), 7️⃣ (12), and 💎 (15). Use emoji directly as the visual symbols.

Below the reels, show a three-column paytable: 🍒 🍒 🍒 with "4× bet", ⭐ ⭐ ⭐ with "8× bet", and 💎 💎 💎 with "15× bet". Below that, show three stat cards labeled CREDITS, BET, and BEST WIN, initially displaying 100, 5, and 0 in gold. At the bottom of the main controls, place a minus button, a wide gold-to-orange gradient "SPIN" button, and a plus button. The minus/plus buttons adjust the bet by one, with a minimum bet of 1 and an initial/default maximum of 20. The spin button is disabled while spinning or when credits are below the current bet. Support pointer/touch clicks and also let Space or Enter trigger a spin.

Implement the exact slot mechanics: pressing Spin subtracts the current bet from credits, increases the jackpot meter by max(1, ceil(bet * (0.5 + jackpotUpgradeLevel * 0.25))), capped at 1000, and displays "Spinning…". Animate each reel by rapidly replacing its emoji with random symbols. The first reel runs until about 700ms, the second until about 940ms, and the third until about 1180ms; finish the overall animation at about 1450ms, then reveal three independently randomly selected target symbols. Highlight all three reel tiles with a gold outline and glow when a winning result is shown.

Resolve payouts as follows: three matching symbols pay bet × that symbol's multiplier, plus 2 × the Prize Boost upgrade level; any pair (exactly or at least two equal among the three) pays bet × (1 + Lucky Charm upgrade level); no match pays zero. If the result is exactly 7️⃣ 7️⃣ 7️⃣, treat it as the jackpot instead of the normal payout: award the current jackpot amount, update Best Win if it is higher, show "JACKPOT +[amount] credits" in gold, and reset the jackpot to 250. For any other winning result, add the payout, update Best Win, and show "WIN +[amount] credits" in gold. On a loss, remove the gold winning highlight and show "No match — try another spin." in red; if Cashback upgrades exist, add the cashback amount (the upgrade level itself) and instead show "No match · +[level] cashback". After completion, re-enable controls according to available credits.

Add a collapsible UPGRADES button below the main controls, with a chevron that rotates when open. When opened, reveal a responsive grid of five upgrade buttons: Lucky Charm — "Pairs pay more" — base cost 30 credits; Prize Boost — "Triples pay more" — base cost 60; High Roller — "Raise bet cap" — base cost 90; Jackpot Fuel — "Fills meter faster" — base cost 40; Cashback — "Refund losses" — base cost 50. Each upgrade has levels 0 through 5. The price for the next level is base cost × (current level + 1); buying subtracts that price and raises the level, and buttons are disabled while spinning, when unaffordable, or at level 5. Purchased upgrades get a mint/teal highlighted state and display their current level; maxed upgrades say "MAX LEVEL". High Roller raises the maximum bet to 20 + 10 × its level. Display an upgrade purchase message in gold such as "[Upgrade name] upgraded to level [level]".

Maintain the exact initial state: credits 100, bet 5, best win 0, jackpot 250, all upgrade levels 0, and initial reel result [🍒, 7️⃣, 💎]. Keep the game explicitly play-money only; add the footer text "A tiny arcade game with pretend credits — no real-money wagering." Use a clean system sans-serif font, uppercase small labels with letter spacing, gold for rewards and primary action, muted lavender text, mint for upgrade accents, and red for losses. Make the layout fit mobile and desktop widths, with the panel vertically adapting to shorter screens.