{/* Animated light rays behind everything */}

{/* Floating confetti particles */} {(fireworks || []).map(p => { const rad = (p?.angle ?? 0) * Math.PI / 180; const dx = Math.cos(rad) * (p?.dist ?? 50); const dy = Math.sin(rad) * (p?.dist ?? 50); return (

); })} {/* Champagne bubbles */} {(bubbles || []).map(b => (

))} {/* ===== ZONE 1: THE GRAND MARQUEE ===== */}

{/* Art Deco decorative border */}

✦ UNSW PRESENTS ✦

{/* Corner ornaments */} {[[0,0],[1,0],[0,1],[1,1]].map(([r,c], i) => (

))}

✧ THE YEAR OF ✧

{userName}

TAP FOR CHAMPAGNE 🥂

🎆 {fireworkCount} celebration{fireworkCount !== 1 ? 's' : ''} {(memberList || []).length > 1 && ( 👥 {(memberList || []).length} guests )}

{/* ===== ZONE 2: GOLDEN ERA CAROUSEL ===== */}

◆ MY GOLDEN ERA ◆

{/* Card */} {activeCard ? (

setActiveCard(null)} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(10px)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 30, cursor: 'pointer', animation: 'fadeSlideUp 0.4s ease' }} >

{/* Deco pattern overlay */}

{activeCard?.icon ?? '⭐'}

{activeCard?.type === 'achievement' ? '★ ACHIEVEMENT UNLOCKED ★' : '◇ ASPIRATION ◇'}

{activeCard?.title ?? 'Amazing'}

{activeCard?.desc ?? ''}

TAP TO CLOSE

) : null}

{/* Nav arrows */}

handleSwipe(1)} style={{ position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)', width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFD700', fontSize: 24, cursor: 'pointer', zIndex: 5, opacity: 0.6, transition: 'opacity 0.2s' }} >◄

handleSwipe(-1)} style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFD700', fontSize: 24, cursor: 'pointer', zIndex: 5, opacity: 0.6, transition: 'opacity 0.2s' }} >►

{ setActiveCard(currentCard); spawnFirework(50, 40); }} style={{ width: '80%', maxWidth: 300, background: 'linear-gradient(145deg, rgba(26,21,40,0.95), rgba(13,10,24,0.95))', border: `2px solid ${isAchievement ? 'rgba(255,215,0,0.5)' : 'rgba(0,255,255,0.5)'}`, borderRadius: 12, padding: '28px 24px', textAlign: 'center', cursor: 'pointer', position: 'relative', overflow: 'hidden', transition: 'transform 0.2s, box-shadow 0.3s', boxShadow: `0 8px 32px ${isAchievement ? 'rgba(255,215,0,0.15)' : 'rgba(0,255,255,0.15)'}`, ...cardAnimStyle }} onMouseDown={e => e.currentTarget.style.transform = 'scale(0.96)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'} > {/* Corner art deco triangles */}

{currentCard?.icon ?? '⭐'}

{isAchievement ? '★ ACHIEVEMENT' : '◇ ASPIRATION'}

{currentCard?.title ?? 'Amazing'}

TAP TO SPOTLIGHT

{/* Card dots */}

{(cards || []).map((_, i) => (

setCardIndex(i)} style={{ width: i === cardIndex ? 24 : 8, height: 8, borderRadius: 4, cursor: 'pointer', background: i === cardIndex ? '#FFD700' : 'rgba(255,215,0,0.2)', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' }} /> ))}

{/* ===== ZONE 3: CELEBRATION WALL ===== */}

◆ GUESTBOOK ◆

e.currentTarget.style.transform = 'scale(0.93)'} onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'} >✨ CELEBRATE

{(celebrations || []).slice(0, 8).map((c, i) => (

{c?.emoji ?? '✨'}

{(c?.text ?? '').slice(0, 30)}

— {c?.name ?? 'Guest'}

))}

{/* Multiplayer guests */} {(memberList || []).length > 1 && (

GUESTS: {(memberList || []).slice(0, 6).map((m, i) => (

0 ? -8 : 0 }}>{m?.avatarUrl ? '' : (m?.displayName?.[0] ?? '?')}

))}

)}

); }