{phases[phaseIndex]}

{completionPct === 100 ? 'FULL MOON HARMONY' : 'WAXING CRESCENT'}

); }; return (

{/* ─── SKY LAYER (Background) ─── */}

{/* Stars */} {[...Array(20)].map((_, i) => (

✨

))} {/* Floating Lanterns from ALL users */} {(allLanterns || []).map((l, i) => (

🏮

{l.displayName}

))}

{/* ─── CONTENT LAYER ─── */}

{/* Header */}

Goof Night Moon

{isMultiplayer && (

👥 {(memberList || []).length}

)}

{/* Rituals List Card */}

Night Rituals

{new Date().toLocaleDateString(undefined, { weekday: 'long' })}

{(rituals || []).map(ritual => { const isDone = (myProgress.completed || []).includes(ritual.id); if (ritual.type === 'reflection') { return (

!isDone && setOpenEnvelopeId(ritual.id)}> {/* Envelope Flap Visual */}

{ritual.icon} {ritual.text}

{isDone ? '✨ Sealed' : '🧧 Open'}

{isDone && (

"{myProgress.reflections[ritual.id]}"

)}

); } return (

toggleRitual(ritual.id)} style={{ padding: 16, borderRadius: 16, background: '#fff', border: `1px solid ${isDone ? THEME.gold : '#eee'}`, boxShadow: isDone ? `0 0 15px ${THEME.gold}40` : '0 2px 8px rgba(0,0,0,0.05)', display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer', transition: 'all 0.2s' }} >

{isDone && '✓'}

{ritual.text}

{isDone ? '🏮' : ritual.icon}

); })}

{/* Empty State / Add Action (Visual Only for MVP) */}

😴 Sweet dreams

{/* ─── REFLECTION MODAL (RED ENVELOPE) ─── */} {openEnvelopeId && (

🧧

{(rituals || []).find(r => r.id === openEnvelopeId)?.text}

setReflectionText(e.target.value)}
              placeholder="Write your thought here..."
              style={{
                width: '100%', height: 120, borderRadius: 12, border: 'none',
                padding: 16, fontSize: 16, fontFamily: 'sans-serif',
                marginBottom: 20, resize: 'none', background: '#fff'
              }}
            />
            
            <div style={{ display: 'flex', gap: 12 }}>
              <button 
                onClick={() => setOpenEnvelopeId(null)}
                style={{ flex: 1, padding: 14, borderRadius: 12, border: '1px solid rgba(255,255,255,0.3)', background: 'transparent', color: '#fff', fontSize: 16 }}
              >
                Cancel
              </button>
              <button 
                onClick={() => saveReflection(openEnvelopeId)}
                disabled={!reflectionText.trim()}
                style={{ flex: 1, padding: 14, borderRadius: 12, border: 'none', background: THEME.gold, color: '#8B0000', fontWeight: 'bold', fontSize: 16 }}
              >
                Seal Envelope
              </button>
            </div>
          </div>
        </div>
      )}

{/* ─── CELEBRATION OVERLAY ─── */}
      {showFirework && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 200, pointerEvents: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(0,0,0,0.6)'
        }}>
          <div style={{ textAlign: 'center', animation: 'scaleUp 0.5s ease-out' }}>
            <div style={{ fontSize: 80 }}>🎆</div>
            <h1 style={{ color: THEME.gold, fontFamily: 'serif', textShadow: '0 0 20px black', marginTop: 0 }}>Good Night!</h1>
          </div>
        </div>
      )}

{/* ─── GLOBAL STYLES (Animations) ─── */}
      <style>{`
        @keyframes floatUp {
          0% { transform: translateY(100vh) rotate(-5deg); opacity: 0; }
          10% { opacity: 1; }
          100% { transform: translateY(-20vh) rotate(5deg); opacity: 0; }
        }
        @keyframes popIn {
          from { transform: scale(0.8); opacity: 0; }
          to { transform: scale(1); opacity: 1; }
        }
        @keyframes twinkle {
          0%, 100% { opacity: 0.3; transform: scale(0.8); }
          50% { opacity: 1; transform: scale(1.2); }
        }
      `}</style>
    </div>
  );
}</article></body></html>