{/* Top Header */}

🌸

MEMORY GARDEN

Match blooming pairs • Build combo streaks

{/* Mode Selector + Stats Strip */}

{(MODES || []).map((m) => { const active = modeId === m.id; return ( ); })}

PAIRS

{pairsFound}/{currentMode.pairs}

MOVES

{moves}

STREAK

{streak}×

SCORE

{score}

{/* Card Grid */}

{(cards || []).map((card, index) => { const isFlipped = isPeeking || (flipped || []).includes(index) || (matched || []).includes(card.uniqueId); const isMatched = (matched || []).includes(card.uniqueId); return ( ); })}

{/* Bottom Controls Bar */}

{/* Win Modal */} {isWon && (

🎊

GARDEN IN FULL BLOOM!

Cleared in {moves} moves • {score} pts {bestMoves > 0 ? `(Best: ${bestMoves} moves)` : ''}

)} {/* Room Leaderboard Modal */} {showLeaderboard && (

setShowLeaderboard(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(59, 7, 100, 0.55)', zIndex: 110, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px' }} >

e.stopPropagation()} style={{ width: '100%', maxWidth: '360px', background: '#FFFFFF', borderRadius: '20px', padding: '16px', border: '2px solid #E9D5FF' }} >

🏆 MEMORY GARDEN RANKS

{(leaderboard || []).length === 0 ? (

Clear a garden board to post the first score!

) : (

{(leaderboard || []).map((entry, idx) => (

#{idx + 1} {entry.name} {entry.moves ? `(${entry.moves}m)` : ''} {entry.score} pts

))}

)}

); }