{/* 🐲 ANIMATION OVERLAYS */} {animation === 'dragon' && (

🐉

)} {animation === 'confetti' && (

🧨

✨

🏀

)} {/* 🏮 HEADER */}

🏮

Golden Dynasty

🍀 {localPoints + (appData?.points?.[user.id] || 0)}

{/* 📜 MAIN CONTENT AREA */}

{/* FEED TAB */} {activeTab === 'feed' && (

{/* Welcome Banner */}

Welcome, {user.name?.split(' ')[0] || 'Fan'}

"I can do all things..." 🏀

{(appData?.posts ?? []).map((post) => (

setExpandedPost(post)}> {/* Decorative Pattern Overlay */}

🐉

{post._user?.avatarUrl ? user

👤

}

{post._user?.displayName || 'Steph Fan'}

{new Date(post.timestamp).toLocaleDateString()}

{/* Post Type Icon */}

{post.type === 'highlight' ? '🎥' : post.type === 'stat' ? '📊' : '📸'}

{/* Content Area */} {post.type === 'stat' ? (

{post.content}

{post.title}

) : (

{/* Mock Video/Image Placeholder */} content

{post.type === 'highlight' &&

▶️

}

)}

{post.title}

{post.description}

))}

)} {/* MEMORIES TAB */} {activeTab === 'memories' && (

Golden Scroll 📜

{(appData?.memories?.length > 0) ? (

{(appData.memories || []).map((mem) => (

"{mem.text}"

— {mem._user?.displayName} {new Date(mem.timestamp).toLocaleDateString()}

))}

) : (

📭

The scroll is empty.
Add your first memory!

)}

)} {/* LEADERBOARD TAB */} {activeTab === 'clan' && (

Fan Clan 🐅

Who has the most Golden Luck?

{(leaderboard || []).map((member, index) => (

member.handle && openProfile(member.handle)}>

{index === 0 ? '👑' : index + 1}

{member.avatarUrl ?

: 👤}

{member.displayName}

{member.role === 'owner' ? 'Dynasty Founder' : 'Fan'}

{member.score} 🍀

))}

{isMultiplayer && ( )}

)}

{/* 🧧 RED ENVELOPE MODAL (Creation) */} {showEnvelope && (

e.target === e.currentTarget && setShowEnvelope(false)}>

🏀

Add to Golden Scroll

setNewMemory(e.target.value)}
                placeholder="Share a favorite Steph moment..."
                style={{ 
                  width: '100%', height: 100, padding: 12, borderRadius: 8, border: 'none', 
                  background: '#FFF8E7', color: '#570808', fontFamily: 'inherit', fontSize: 16,
                  marginBottom: 20, resize: 'none'
                }}
              />
              <button onClick={addMemory} style={{ 
                width: '100%', padding: 14, background: THEME.gold, border: 'none', 
                borderRadius: 8, color: THEME.darkRed, fontWeight: 'bold', fontSize: 16
              }}>
                Seal Envelope 🧧
              </button>
            </div>
          </div>
        </div>
      )}

{/* 🎥 EXPANDED CONTENT MODAL */}
      {expandedPost && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 60, background: '#000', display: 'flex', 
          flexDirection: 'column', alignItems: 'center', justifyContent: 'center'
        }}>
          <button onClick={() => setExpandedPost(null)} style={{ 
            position: 'absolute', top: 40, right: 20, background: 'rgba(255,255,255,0.2)', 
            border: 'none', color: '#fff', width: 40, height: 40, borderRadius: 20, fontSize: 20, zIndex: 61
          }}>✕</button>
          
          <div style={{ width: '100%', maxWidth: 500, padding: 20 }}>
            <div style={{ 
              width: '100%', aspectRatio: '16/9', background: '#222', marginBottom: 20,
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666'
            }}>
              {/* Simulated Video Player */}
              <img src={expandedPost.type === 'highlight' ? "https://media.giphy.com/media/l0HlHJGHe3yAMhdQY/giphy.gif" : "https://media.giphy.com/media/l41lUjugp61295WZa/giphy.gif"} 
                   style={{ width: '100%', height: '100%', objectFit: 'contain' }} alt="content" />
            </div>
            
            <h2 style={{ color: THEME.gold, marginBottom: 8 }}>{expandedPost.title}</h2>
            <p style={{ color: '#ccc', lineHeight: 1.5 }}>{expandedPost.description}</p>
            
            <div style={{ display: 'flex', gap: 16, marginTop: 32 }}>
              <button onClick={() => handleLike(expandedPost.id)} style={{ 
                flex: 1, padding: 16, borderRadius: 12, border: 'none', 
                background: THEME.red, color: '#fff', fontWeight: 'bold', fontSize: 18
              }}>
                🔥 Light the Beam
              </button>
            </div>
          </div>
        </div>
      )}

{/* 📱 BOTTOM NAV */}
      <nav style={{ 
        background: THEME.darkRed, paddingBottom: 'env(safe-area-inset-bottom, 20px)', 
        borderTop: `1px solid ${THEME.red}`, display: 'flex', justifyContent: 'space-around'
      }}>
        {[ 
          { id: 'feed', icon: '🏠', label: 'Dynasty' },
          { id: 'memories', icon: '📜', label: 'Scroll' },
          { id: 'clan', icon: '🐅', label: 'Fan Clan' }
        ].map(tab => (
          <button 
            key={tab.id} 
            onClick={() => setActiveTab(tab.id)}
            style={{ 
              flex: 1, padding: '12px 0', background: 'transparent', border: 'none', 
              color: activeTab === tab.id ? THEME.gold : 'rgba(255,255,255,0.5)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4
            }}
          >
            <span style={{ fontSize: 24, filter: activeTab === tab.id ? `drop-shadow(0 0 5px ${THEME.gold})` : 'none' }}>{tab.icon}</span>
            <span style={{ fontSize: 10, fontWeight: 'bold' }}>{tab.label}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}</article></body></html>