{/* Clean Header */}

THE DEAL 21

{wins}W – {losses}L • STACK: ${bankroll}

{/* DEALER HAND */}

DEALER HAND {phase === 'playing' ? `${dealerHand[0]?.rank} + ?` : dTotal}

{(dealerHand || []).map((c, idx) => { const hidden = phase === 'playing' && idx === 1; return ( ); })}

{/* Book Advice / Outcome Banner */}

{outcomeText || `💡 BOOK SAYS: ${bookAdvice}`}

{/* PLAYER HAND */}

YOUR HAND {pTotal}

{(playerHand || []).map((c, idx) => (

{c.rank} {c.suit}

))}

{/* Action Controls — Safely above 112px bottom overlay! */}

CHIP LEVEL:

{[25, 50, 100, 250].map((amt) => ( ))}

{phase === 'playing' ? (

) : ( )}

{/* Leaderboard Modal */} {showRanks && (

setShowRanks(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(15, 23, 42, 0.72)', zIndex: 70, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px', }} >

e.stopPropagation()} style={{ width: '100%', maxWidth: '340px', background: '#FFFFFF', border: '2px solid #0F172A', borderRadius: '20px', padding: '16px', display: 'flex', flexDirection: 'column', gap: '8px', }} >

👑 High Rollers

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

Win a hand to post your stack to the room!

) : ( (leaderboard || []).map((e, i) => (

#{i + 1} {e.name} ${e.score}

)) )}

)}

); }