setActiveZone(null)} style={{ cursor: 'pointer', padding: '12px 0', display: 'flex', alignItems: 'center', gap: 8, fontSize: 16, color: '#8B6B7B', transition: baseTransition }}> ← back to map

{activeZone.emoji}

{activeZone.name}

{(zoneSparks || []).length} spark{(zoneSparks || []).length !== 1 ? 's' : ''} ✨

{(zoneSparks || []).map((spark, i) => { const s = spark ?? {}; return (

{s.text ?? ''}

— {s.author ?? 'Anonymous'}

{s.echo && (

💎

{s.echo}

~ your whimsical muse

)}

); })} {(zoneSparks || []).length === 0 && (

This zone is waiting for your first spark... ✨

)}

{showSpark ? (

setSparkText(e.target.value)}
              placeholder="drop a thought, a feeling, a beautiful mess..."
              style={{
                width: '100%', border: '2px solid #E0BBE4', borderRadius: 16,
                padding: 14, fontSize: 16, fontFamily: 'Georgia, serif',
                background: 'rgba(255,222,233,0.3)', color: '#4A3040',
                resize: 'none', height: 80, boxSizing: 'border-box',
                outline: 'none'
              }}
            />
            <div style={{ display: 'flex', gap: 10, marginTop: 10 }}>
              <div onClick={() => { setShowSpark(false); setSparkText(''); }} style={{
                flex: 1, padding: 14, borderRadius: 14, textAlign: 'center',
                background: 'rgba(205,180,219,0.3)', color: '#6B4A5E', cursor: 'pointer',
                fontSize: 16, fontFamily: 'Georgia, serif', transition: baseTransition
              }}>nevermind</div>
              <div onClick={addSpark} style={{
                flex: 1, padding: 14, borderRadius: 14, textAlign: 'center',
                background: 'linear-gradient(135deg, #FFB5E8, #E0BBE4)', color: '#fff',
                cursor: 'pointer', fontSize: 16, fontWeight: 700,
                fontFamily: 'Georgia, serif', transition: baseTransition,
                boxShadow: '0 4px 16px rgba(255,181,232,0.4)'
              }}>spark it ✨</div>
            </div>
          </div>
        ) : (
          <div onClick={() => setShowSpark(true)} style={{
            position: 'fixed', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)',
            right: 20, width: 60, height: 60, borderRadius: '50%',
            background: 'linear-gradient(135deg, #FFB5E8, #E0BBE4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 28, cursor: 'pointer', boxShadow: '0 8px 24px rgba(255,181,232,0.5)',
            transition: baseTransition, border: '2px solid rgba(255,255,255,0.6)'
          }}>✨</div>
        )}
      </div>
    );
  }

return (
    <div style={{
      minHeight: '100dvh', width: '100%', background: getMoodGradient(),
      paddingTop: 'env(safe-area-inset-top, 20px)', paddingBottom: 'env(safe-area-inset-bottom, 20px)',
      paddingLeft: 16, paddingRight: 16, boxSizing: 'border-box',
      fontFamily: "'Georgia', 'Times New Roman', serif",
      display: 'flex', flexDirection: 'column',
      transition: 'background 0.8s ease', position: 'relative', overflow: 'hidden'
    }}>
      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
        @keyframes pulse { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } }
        @keyframes sparkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes burstOut { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); } }
        @keyframes ribbonWave { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
        @keyframes hotTakeIn { 0% { opacity: 0; transform: scale(0.5) rotate(-10deg); } 50% { transform: scale(1.05) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
      `}</style>

{(burstParticles || []).map(p => (
        <div key={p.id} style={{
          position: 'fixed', left: p.x, top: p.y, fontSize: 20, pointerEvents: 'none',
          zIndex: 100, '--dx': p.dx + 'px', '--dy': p.dy + 'px',
          animation: 'burstOut 0.8s ease forwards'
        }}>{p.emoji}</div>
      ))}

<div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 12, opacity: mounted ? 1 : 0, transition: 'opacity 0.6s ease'
      }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 700, color: '#4A3040', fontStyle: 'italic' }}>
            🎀 Lace & Labyrinth
          </div>
          <div style={{ fontSize: 13, color: '#8B6B7B' }}>
            {user?.name ? `${user.name}'s inner world` : 'your inner world'}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {(memberList || []).map((m, i) => (
            <div key={m?.id ?? i} style={{
              width: 32, height: 32, borderRadius: '50%',
              background: m?.avatarUrl ? `url(${m.avatarUrl}) center/cover` : 'linear-gradient(135deg, #FFB5E8, #E0BBE4)',
              border: '2px solid rgba(255,255,255,0.8)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, boxShadow: '0 2px 8px rgba(205,180,219,0.3)'
            }}>
              {!m?.avatarUrl && (m?.displayName?.[0] ?? '?')}
            </div>
          ))}
        </div>
      </div>

<div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
          {['✨', '💫', '🌸', '🎀', '💎'].map((e, i) => (
            <div key={i} style={{
              position: 'absolute',
              top: [15, 45, 75, 30, 65][i] + '%',
              left: [48, 2, 85, 92, 45][i] + '%',
              fontSize: [12, 10, 14, 11, 10][i],
              animation: `sparkle ${2 + i * 0.5}s ease infinite ${i * 0.3}s`,
              pointerEvents: 'none', zIndex: 0
            }}>{e}</div>
          ))}

{(zones || []).map((zone, i) => {
            const pos = zonePositions[i] ?? { top: '10%', left: '10%', width: '40%', height: '20%' };
            const sparkCount = (zone?.sparks ?? []).length;
            return (
              <div
                key={zone?.id ?? i}
                onClick={(e) => handleZoneTap(zone, e)}
                style={{
                  position: 'absolute', ...pos,
                  background: (zone?.color ?? '#E0BBE4') + '50',
                  borderRadius: 20,
                  border: '2px solid ' + (zone?.color ?? '#E0BBE4') + '60',
                  padding: 14, cursor: 'pointer',
                  backdropFilter: 'blur(8px)',
                  display: 'flex', flexDirection: 'column',
                  justifyContent: 'center', alignItems: 'center',
                  animation: `pulse ${3 + (zone?.pulsePhase ?? 0) * 0.5}s ease infinite ${(zone?.pulsePhase ?? 0) * 0.4}s`,
                  transition: baseTransition,
                  boxShadow: '0 4px 20px ' + (zone?.color ?? '#E0BBE4') + '25',
                  zIndex: 1,
                  opacity: mounted ? 1 : 0,
                  animationDelay: `${i * 0.15}s`
                }}
                onPointerDown={(e) => { e.currentTarget.style.transform = 'scale(0.93)'; }}
                onPointerUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
                onPointerLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
              >
                <div style={{ fontSize: 28, marginBottom: 4, animation: `float ${3 + i * 0.3}s ease infinite` }}>
                  {zone?.emoji ?? '✨'}
                </div>
                <div style={{
                  fontSize: 14, fontWeight: 600, color: '#4A3040',
                  textAlign: 'center', fontStyle: 'italic', lineHeight: 1.2
                }}>
                  {zone?.name ?? 'Zone'}
                </div>
                {sparkCount > 0 && (
                  <div style={{
                    marginTop: 4, fontSize: 11, color: '#8B6B7B',
                    background: 'rgba(255,255,255,0.6)', borderRadius: 10,
                    padding: '2px 8px'
                  }}>
                    {sparkCount} spark{sparkCount !== 1 ? 's' : ''}
                  </div>
                )}
              </div>
            );
          })}

<div style={{
            position: 'absolute', top: '78%', left: '50%', transform: 'translateX(-50%)',
            display: 'flex', alignItems: 'center', gap: 6,
            animation: 'ribbonWave 4s ease infinite', zIndex: 1
          }}>
            <span style={{ fontSize: 16, color: '#A08090' }}>~ chaotic-cozy since always ~</span>
          </div>
        </div>
      </div>

<div style={{
        display: 'flex', gap: 12, marginTop: 12,
        opacity: mounted ? 1 : 0, transition: 'opacity 0.8s ease 0.5s'
      }}>
        <div style={{
          flex: 1, display: 'flex', alignItems: 'center', gap: 10,
          background: 'rgba(255,255,255,0.5)', borderRadius: 20, padding: '10px 14px',
          border: '1px solid rgba(205,180,219,0.3)', backdropFilter: 'blur(8px)'
        }}>
          <div style={{ fontSize: 13, color: '#8B6B7B', fontStyle: 'italic', whiteSpace: 'nowrap' }}>
            mood
          </div>
          <div
            ref={moodRef}
            style={{
              flex: 1, height: 28, background: 'rgba(205,180,219,0.3)',
              borderRadius: 14, position: 'relative', cursor: 'pointer',
              overflow: 'hidden'
            }}
            onMouseDown={(e) => { setMoodDragging(true); handleMoodChange(e); }}
            onMouseMove={(e) => { if (moodDragging) handleMoodChange(e); }}
            onMouseUp={handleMoodEnd}
            onMouseLeave={() => { if (moodDragging) handleMoodEnd(); }}
            onTouchStart={(e) => { setMoodDragging(true); handleMoodChange(e); }}
            onTouchMove={(e) => { if (moodDragging) handleMoodChange(e); }}
            onTouchEnd={handleMoodEnd}
          >
            <div style={{
              position: 'absolute', bottom: 0, left: 0, right: 0,
              height: moodLevel + '%',
              background: 'linear-gradient(to top, #FFB5E8, #E0BBE4)',
              borderRadius: 14, transition: moodDragging ? 'none' : 'height 0.3s ease'
            }} />
            <div style={{
              position: 'absolute', width: '100%', textAlign: 'center',
              top: '50%', transform: 'translateY(-50%)',
              fontSize: 16, zIndex: 2
            }}>
              {getMoodEmoji()}
            </div>
          </div>
        </div>

<div
          onClick={spinHotTake}
          style={{
            background: 'linear-gradient(135deg, #FFB5E8, #FF9CE3)',
            borderRadius: 20, padding: '10px 18px',
            display: 'flex', alignItems: 'center', gap: 6,
            cursor: 'pointer', border: '1px solid rgba(255,255,255,0.4)',
            boxShadow: '0 4px 16px rgba(255,156,227,0.3)',
            transition: baseTransition, fontSize: 14, color: '#fff',
            fontWeight: 600, fontStyle: 'italic', whiteSpace: 'nowrap'
          }}
          onPointerDown={(e) => { e.currentTarget.style.transform = 'scale(0.92)'; }}
          onPointerUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
          onPointerLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
        >
          🔥 hot take
        </div>

{deepCutUnlocked && (
          <div style={{
            background: 'linear-gradient(135deg, #4A3040, #6B4A5E)',
            borderRadius: 20, padding: '10px 14px',
            display: 'flex', alignItems: 'center', gap: 4,
            fontSize: 14, color: '#FFB5E8', fontStyle: 'italic',
            border: '1px solid rgba(255,181,232,0.3)',
            animation: 'pulse 3s ease infinite'
          }}>
            🌙 2am
          </div>
        )}
      </div>

{hotTakeActive && (
        <div style={{
          position: 'fixed', top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(20px)',
          borderRadius: 28, padding: 28, maxWidth: '85%', width: 320,
          textAlign: 'center', zIndex: 50,
          border: '2px solid #FFB5E8',
          boxShadow: '0 16px 48px rgba(205,180,219,0.4)',
          animation: 'hotTakeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1)'
        }}>
          <div style={{ fontSize: 40, marginBottom: 12 }}>🔥</div>
          <div style={{
            fontSize: 18, color: '#4A3040', fontStyle: 'italic',
            lineHeight: 1.5, fontWeight: 600
          }}>
            "{hotTakeActive}"
          </div>
          <div style={{ fontSize: 12, color: '#A08090', marginTop: 12 }}>
            tap anywhere to dismiss
          </div>
        </div>
      )}
      {hotTakeActive && (
        <div onClick={() => setHotTakeActive(null)} style={{
          position: 'fixed', inset: 0, background: 'rgba(74,48,64,0.2)',
          zIndex: 49, backdropFilter: 'blur(4px)'
        }} />
      )}
    </div>
  );
}</article></body></html>