{/* Floating Y2K decorative orbs */} {[0,1,2,3,4].map(i => (

))} {/* Expanded Card Overlay */} {currentExpanded && (

expandCard(currentExpanded.id)}>

e.stopPropagation()}>

{currentExpanded?.emoji ?? '✨'}

{currentExpanded?.title ?? 'Skill'}

{currentExpanded?.desc ?? ''}

{/* Level Bar */}

PROFICIENCY LEVEL {currentExpanded?.level ?? 0}/100

{/* Detail Stats */} {(currentExpanded?.details ?? []).map((d, i) => (

{d.split(':')[0] ?? d} {d.split(':')[1] ?? ''}

))} {/* React Button */}

)} {/* ZONE 1: GamerTag Hero */}

{/* UNSW Badge */}

🎓 UNSW ELITE

{isMultiplayer && (memberList || []).length > 1 && (

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

0 ? -8 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, overflow: 'hidden' }}> {m?.avatarUrl ?

: (m?.displayName?.[0] ?? '?')}

))} {(memberList || []).length > 4 && +{(memberList || []).length - 4}}

)}

{/* GamerTag */}

{ triggerPowerUp(); handleTap('tag'); }} style={{ cursor: 'pointer', position: 'relative', textAlign: 'center', padding: '20px 0 12px', transform: tapScale?.tag ? 'scale(0.96)' : (powerUpActive ? 'scale(1.03)' : 'scale(1)'), transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)' }} > {powerUpActive && (

)}

{state?.gamerTag ?? 'APEX_USER'}

⚡ {state?.superpower ?? 'Quantum Athlete'} ⚡

{powerUpActive && (

✨💥🌟💥✨

)}

{/* Stats Grid */}

{(stats || []).map((s, i) => { const animVal = Math.min(100, Math.max(0, (s?.value ?? 0) + Math.sin((pulsePhase + i * 30) * 0.08) * 3)); return (

{s?.emoji ?? '⭐'} {s?.name ?? 'STAT'} {Math.round(animVal)}

); })}

{/* ZONE 2: Skill Stream Label */}

⚡ SKILL STREAM

{/* ZONE 3: Horizontal Swipeable Cards */}

setScrollX(e.target?.scrollLeft ?? 0)} style={{ display: 'flex', gap: 14, overflowX: 'auto', overflowY: 'hidden', padding: '4px 20px 20px', scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch', position: 'relative', zIndex: 1, flex: 1, alignItems: 'flex-start', msOverflowStyle: 'none', scrollbarWidth: 'none' }} > {(cards || []).map((card, i) => { const g0 = card?.gradient?.[0] ?? '#FF00FF'; const g1 = card?.gradient?.[1] ?? '#00FFFF'; return (

{ expandCard(card?.id); handleTap(`card-${card?.id}`); }} style={{ minWidth: 200, maxWidth: 200, borderRadius: 20, padding: 20, background: `linear-gradient(160deg, ${g0}18, ${g1}18)`, border: `1.5px solid ${g0}44`, boxShadow: `0 4px 24px ${g0}22`, scrollSnapAlign: 'start', cursor: 'pointer', flexShrink: 0, transform: tapScale?.[`card-${card?.id}`] ? 'scale(0.95)' : (mounted ? 'translateY(0) scale(1)' : 'translateY(30px) scale(0.95)'), opacity: mounted ? 1 : 0, transition: `all 0.5s cubic-bezier(0.4, 0, 0.2, 1) ${0.3 + i * 0.08}s`, position: 'relative', overflow: 'hidden' }} > {/* Shimmer effect */}

{card?.emoji ?? '✨'}

{card?.category ?? 'SKILL'}

{card?.title ?? 'Skill'}

{card?.level ?? 0}

{(card?.desc ?? '').slice(0, 60)}...

{getReactionCount(card?.id) > 0 && (

🔥 {getReactionCount(card?.id)}

)}

); })} {/* End spacer */}

{/* Bottom Accent */}

TAP TAG TO POWER UP · SWIPE CARDS · TAP TO EXPAND

); }