{easterEgg && (

🤫

"Silence is golden... and so are you. The universe noticed you paused."

✨ secret unlocked ✨

)} {tapFeedback && (

{moodEmojis[tapFeedback] ?? '🎆'}

)}

🏮 Come Hang 🏮

{randomCopy}

{view === 'dial' && (

🐉

🏮

🌸

🧨

{moodEmojis[mood] ?? '🎆'}

{mood}

tap the dial to spin

{(moods || []).map(m => ( ))}

{(memberList || []).length > 0 && (

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

0 ? -10 : 0, boxShadow: `0 2px 10px rgba(0,0,0,0.3)`, overflow: 'hidden' }}> {m?.avatarUrl ?

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

))}

{(memberList || []).length === 1 ? 'just you, vibing' : `${memberList.length} hanging`}

)}

)} {view === 'lanterns' && (

{!activeLantern && !showScroll && (lanterns || []).map((l, i) => (

handleLanternTap(l)} style={{ position: 'absolute', left: `${l?.x ?? 30}%`, top: `${(l?.y ?? 20) + 5}%`, width: 72, height: 90, cursor: 'pointer', animation: `floatLantern 3s ease-in-out ${l?.delay ?? 0}s infinite alternate`, transition: 'transform 0.2s ease', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>

🏮

))} {activeLantern && (

🏮

{activeLantern?.prompt ?? 'Reflect on something...'}

setLanternInput(e.target.value)}
                placeholder="pour your thoughts here..."
                style={{
                  width: '100%', minHeight: 100, padding: 16, borderRadius: 16,
                  background: 'rgba(255,255,255,0.08)', border: `1px solid ${c.accent}40`,
                  color: c.text, fontSize: 16, fontFamily: 'inherit',
                  resize: 'none', outline: 'none', boxSizing: 'border-box'
                }}
              />
              <div style={{ display: 'flex', gap: 12 }}>
                <button onClick={() => setActiveLantern(null)} style={{
                  flex: 1, padding: 14, borderRadius: 16, border: `1px solid ${c.accent}40`,
                  background: 'transparent', color: c.accent, fontSize: 15, fontWeight: 600,
                  cursor: 'pointer', fontFamily: 'inherit'
                }}>Cancel</button>
                <button onClick={submitLanternResponse} style={{
                  flex: 1, padding: 14, borderRadius: 16, border: 'none',
                  background: c.accent, color: c.bg1, fontSize: 15, fontWeight: 700,
                  cursor: 'pointer', fontFamily: 'inherit',
                  boxShadow: `0 4px 20px ${c.accent}50`
                }}>✨ Release</button>
              </div>
            </div>
          )}

{!activeLantern && (
            <button onClick={() => setShowScroll(!showScroll)} style={{
              position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)',
              padding: '14px 28px', borderRadius: 20,
              background: showScroll ? c.accent : `${c.accent}30`,
              color: showScroll ? c.bg1 : c.accent,
              border: `2px solid ${c.accent}`, fontSize: 15, fontWeight: 700,
              cursor: 'pointer', fontFamily: 'inherit',
              boxShadow: `0 4px 20px ${c.accent}30`
            }}>
              📜 {showScroll ? 'Hide' : 'View'} Reflection Scroll ({(reflections || []).length})
            </button>
          )}

{showScroll && !activeLantern && (
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, bottom: 60,
              overflowY: 'auto', padding: '8px 4px',
              display: 'flex', flexDirection: 'column', gap: 12
            }}>
              {(reflections || []).length === 0 && (
                <div style={{ textAlign: 'center', opacity: 0.5, marginTop: 60, fontSize: 16 }}>
                  No reflections yet... tap a lantern to begin ✨
                </div>
              )}
              {[...reflections].reverse().map((r, i) => (
                <div key={r?.id ?? i} style={{
                  background: `linear-gradient(135deg, rgba(0,0,0,0.6), ${moodColors[r?.mood ?? 'feral']?.bg1 ?? '#333'}80)`,
                  border: `1px solid ${c.accent}30`,
                  borderRadius: 20, padding: 18,
                  animation: `slideUp 0.3s ease ${i * 0.1}s both`
                }}>
                  <div style={{ fontSize: 12, opacity: 0.5, marginBottom: 6 }}>
                    {moodEmojis[r?.mood ?? 'feral']} {formatTime(r?.timestamp ?? Date.now())}
                  </div>
                  <div style={{ fontSize: 14, color: c.accent, fontStyle: 'italic', marginBottom: 8 }}>
                    "{r?.lanternPrompt ?? 'unknown prompt'}"
                  </div>
                  <div style={{ fontSize: 16, lineHeight: 1.5 }}>
                    {r?.response ?? ''}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

{view === 'wall' && (
        <div style={{ flex: 1, width: '100%', zIndex: 10, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 20, paddingBottom: 20 }}>
          <div style={{ textAlign: 'center', fontSize: 16, opacity: 0.7, fontStyle: 'italic', marginBottom: 4 }}>
            🧧 Unhinged but Honest 🧧
          </div>
          {(prompts || []).map((p, pi) => (
            <div key={p?.id ?? pi} style={{
              background: 'rgba(0,0,0,0.4)',
              border: `1px solid ${c.accent}30`,
              borderRadius: 24, padding: 20,
              animation: `slideUp 0.4s ease ${pi * 0.15}s both`
            }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: c.accent, marginBottom: 14, lineHeight: 1.4 }}>
                {p?.text ?? 'Prompt'}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {(p?.responses ?? []).map((r, ri) => (
                  <div key={r?.id ?? ri} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 10,
                    background: 'rgba(255,255,255,0.06)', borderRadius: 16, padding: 14
                  }}>
                    <div style={{ flex: 1, fontSize: 15, lineHeight: 1.4 }}>
                      {r?.text ?? ''}
                    </div>
                    <button onClick={() => pinResponse(p?.id, r?.id)} style={{
                      background: 'none', border: 'none', cursor: 'pointer',
                      fontSize: 14, color: c.accent, padding: '4px 8px',
                      borderRadius: 12, display: 'flex', alignItems: 'center', gap: 4,
                      transition: 'transform 0.2s ease', minWidth: 48
                    }}>
                      📌 {r?.pins ?? 0}
                    </button>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                <input
                  value={promptInput}
                  onChange={(e) => { setPromptInput(e.target.value); resetSilence(); }}
                  placeholder="drop your truth anonymously..."
                  style={{
                    flex: 1, padding: '12px 16px', borderRadius: 16,
                    background: 'rgba(255,255,255,0.08)', border: `1px solid ${c.accent}30`,
                    color: c.text, fontSize: 15, outline: 'none', fontFamily: 'inherit'
                  }}
                />
                <button onClick={() => submitPromptResponse(p?.id)} style={{
                  padding: '12px 18px', borderRadius: 16, border: 'none',
                  background: c.accent, color: c.bg1, fontSize: 15, fontWeight: 700,
                  cursor: 'pointer', fontFamily: 'inherit'
                }}>🧧</button>
              </div>
            </div>
          ))}
        </div>
      )}