{Array.from({ length: 80 }).map((_, i) => (

{['🎉', '✨', '⭐', '❤️', '🌟', '💫'][Math.floor(Math.random() * 6)]}

))}

); // 🎯 NEW CROSSWORD HANDLER const handleNewCrossword = () => { // Clear guesses and puzzle data - this will force a completely new puzzle // with a new sessionId, which will shuffle names differently const newSessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; saveData({ ...appData, guesses: {}, puzzleData: null, placedMemberIds: [], memberOrder: [], // Clear member order so names get reshuffled sessionId: newSessionId }); // Reset state setSelectedCell(null); setShowConfetti(false); setHasWon(false); setCompletedWords(new Set()); setLocalGuesses({}); // Force puzzle regeneration setPuzzleVersion(prev => prev + 1); }; // 🔄 REACTIVE UPDATE: Watch for member changes and update puzzle useEffect(() => { // This effect ensures the puzzle updates when members change // The puzzle useMemo will handle the actual update if (memberNames && (memberNames || []).length > 0) { // Force a re-render by updating a dependency // The puzzle useMemo will detect member changes and update accordingly } }, [memberNames]); // Render completion message overlay const renderCompletionMessage = () => { if (!showConfetti || !puzzle || !hasWon) return null; return (

🎊

Congrats! 🎉

You solved all {(puzzle.words || []).length} {(puzzle.words || []).length === 1 ? 'name' : 'names'}!

); }; // Show submission form if user hasn't submitted yet if (!hasUserSubmitted) { return (

🧩

Join the Crossword!

Enter your name and a fun fact about yourself. Your name will appear in the crossword and your fun fact will be the hint!

Your Name setUserSubmissionName(e.target.value)} placeholder="Enter your first name" maxLength={20} style={{ width: '100%', padding: '14px 16px', fontSize: 16, border: `2px solid ${THEME.primary}20`, borderRadius: 12, outline: 'none', fontFamily: 'inherit', transition: 'all 0.2s', boxSizing: 'border-box' }} onFocus={(e) => { e.target.style.borderColor = THEME.primary; e.target.style.boxShadow = `0 0 0 3px ${THEME.primary}15`; }} onBlur={(e) => { e.target.style.borderColor = `${THEME.primary}20`; e.target.style.boxShadow = 'none'; }} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); document.getElementById('funFactInput')?.focus(); } }} />

Fun Fact About You

setUserSubmissionFunFact(e.target.value)}
              placeholder="e.g., I can solve a Rubik's cube in under 2 minutes"
              maxLength={150}
              rows={3}
              style={{
                width: '100%',
                padding: '14px 16px',
                fontSize: 16,
                border: `2px solid ${THEME.primary}20`,
                borderRadius: 12,
                outline: 'none',
                fontFamily: 'inherit',
                resize: 'vertical',
                transition: 'all 0.2s',
                boxSizing: 'border-box',
                lineHeight: 1.5
              }}
              onFocus={(e) => {
                e.target.style.borderColor = THEME.primary;
                e.target.style.boxShadow = `0 0 0 3px ${THEME.primary}15`;
              }}
              onBlur={(e) => {
                e.target.style.borderColor = `${THEME.primary}20`;
                e.target.style.boxShadow = 'none';
              }}
              onKeyDown={(e) => {
                if (e.key === 'Enter' && e.ctrlKey) {
                  e.preventDefault();
                  handleUserSubmission();
                }
              }}
            />
            <div style={{
              fontSize: 12,
              color: THEME.textLight,
              marginTop: 4,
              textAlign: 'right'
            }}>
              {(userSubmissionFunFact || []).length}/150
            </div>
          </div>
          
          <button
            onClick={handleUserSubmission}
            disabled={isSubmitting || userSubmissionName.trim().length < 2 || userSubmissionFunFact.trim().length < 3}
            style={{
              width: '100%',
              padding: '16px 32px',
              background: (isSubmitting || userSubmissionName.trim().length < 2 || userSubmissionFunFact.trim().length < 3)
                ? `${THEME.primary}40`
                : THEME.primaryGradient,
              color: 'white',
              border: 'none',
              borderRadius: 24,
              fontSize: 16,
              fontWeight: 700,
              cursor: (isSubmitting || userSubmissionName.trim().length < 2 || userSubmissionFunFact.trim().length < 3) ? 'not-allowed' : 'pointer',
              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
              boxShadow: (isSubmitting || userSubmissionName.trim().length < 2 || userSubmissionFunFact.trim().length < 3) ? 'none' : THEME.shadowLarge,
              letterSpacing: '0.5px',
              textTransform: 'uppercase',
              opacity: (isSubmitting || userSubmissionName.trim().length < 2 || userSubmissionFunFact.trim().length < 3) ? 0.6 : 1
            }}
            onMouseOver={(e) => {
              if (!isSubmitting && userSubmissionName.trim().length >= 2 && userSubmissionFunFact.trim().length >= 3) {
                e.currentTarget.style.transform = 'scale(1.02)';
                e.currentTarget.style.boxShadow = '0 8px 24px rgba(108, 92, 231, 0.4)';
              }
            }}
            onMouseOut={(e) => {
              if (!isSubmitting && userSubmissionName.trim().length >= 2 && userSubmissionFunFact.trim().length >= 3) {
                e.currentTarget.style.transform = 'scale(1)';
                e.currentTarget.style.boxShadow = THEME.shadowLarge;
              }
            }}
          >
            {isSubmitting ? 'Adding to Puzzle...' : 'Add Me to the Puzzle!'}
          </button>
        </div>
      </div>
    );
  }

// Safety check - ensure puzzle is valid
  if (!puzzle || !puzzle.grid || !puzzle.words || (puzzle.words || []).length === 0) {
    const hasMembers = memberNames && (memberNames || []).length > 0;
  return (
    <div style={{
      minHeight: '100dvh',
      display: 'flex',
      flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: THEME.bgSolid,
        color: THEME.text,
        fontFamily: '"Playfair Display", serif',
        padding: 20
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>🧩</div>
          <h2 style={{ margin: '0 0 8px 0', fontSize: 20, fontWeight: 600 }}>
            {hasMembers ? 'Loading puzzle...' : 'Waiting for others...'}
          </h2>
          <p style={{ margin: 0, fontSize: 14, color: '#666' }}>
            {hasMembers 
              ? 'Please wait while we generate your crossword' 
              : 'Waiting for others to join and add their names'}
          </p>
        </div>
      </div>
    );
  }

return (
    <div style={{
      minHeight: '100dvh',
      display: 'flex',
      flexDirection: 'column',
        background: THEME.bgSolid,
      backgroundColor: THEME.bgSolid,
      color: THEME.text,
        fontFamily: '"Playfair Display", "Georgia", serif',
      paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)',
      paddingBottom: 'env(safe-area-inset-bottom, 20px)',
      maxWidth: 480,
      width: '100%',
      margin: '0 auto',
      WebkitTouchCallout: 'none',
      WebkitUserSelect: 'none',
      userSelect: 'none',
      touchAction: 'pan-y',
      position: 'relative',
      overflowX: 'hidden',
      overflowY: 'auto',
        WebkitOverflowScrolling: 'touch',
        boxSizing: 'border-box',
        transform: 'translateZ(0)',
        willChange: 'scroll-position'
    }}>
      {/* Mobile viewport and compatibility fixes */}
      <style>{`
        @supports (background: linear-gradient(135deg, #000, #fff)) {
          div[style*="background:"] {
            background: ${THEME.bg} !important;
          }
        }
        /* Prevent text selection on mobile */
        * {
          -webkit-tap-highlight-color: transparent;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          user-select: none;
        }
        /* Ensure input doesn't cause zoom on iOS */
        input, textarea, select {
          font-size: 16px !important;
          -webkit-appearance: none;
          appearance: none;
        }
        /* Fix for mobile browsers */
        html, body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          overflow-x: hidden;
          -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
        /* Fix for iOS Safari */
        @supports (-webkit-touch-callout: none) {
          input {
            font-size: 16px !important;
          }
        }
        /* Prevent double-tap zoom */
        * {
          touch-action: manipulation;
        }
      `}</style>
      {/* 🎊 WIN STATE OVERLAY */}
      {showConfetti && renderConfetti()}
      {renderCompletionMessage()}
      
      {/* HEADER - Enhanced */}
      <header style={{ 
        padding: '24px 24px 20px', 
        textAlign: 'center',
        position: 'relative',
        background: 'linear-gradient(135deg, rgba(108, 92, 231, 0.03) 0%, rgba(162, 155, 254, 0.03) 100%)',
        borderBottom: '1px solid rgba(108, 92, 231, 0.1)'
      }}>
        <div style={{ 
          fontSize: 11, 
          letterSpacing: '3px', 
          fontWeight: 700, 
          background: THEME.primaryGradient,
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          backgroundClip: 'text',
          marginBottom: 12, 
          textTransform: 'uppercase',
          opacity: 0.8
        }}>
          Name Crossword
        </div>
        <h1 style={{ 
          margin: 0, 
          fontSize: 36, 
          fontWeight: 800,
          background: THEME.primaryGradient,
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          backgroundClip: 'text',
          letterSpacing: '-0.5px',
          lineHeight: 1.2
        }}>
          Name<br/><span style={{ fontStyle: 'italic', fontWeight: 700 }}>Crossword</span>
        </h1>
        {isMultiplayer && memberNames && (memberNames || []).length > 0 && (
            <p style={{ margin: '8px 0 0 0', fontSize: 13, color: '#666', fontWeight: 500 }}>
            {puzzle?.words?.length || 0} {puzzle?.words?.length === 1 ? 'name' : 'names'} in puzzle
          </p>
        )}
      </header>

{/* CLUE BAR - Enhanced */}
      <div style={{
        margin: '0 20px 20px',
        padding: '20px 24px',
        background: 'linear-gradient(135deg, #FFFFFF 0%, #F8F6FF 100%)',
        borderRadius: 20,
        boxShadow: THEME.shadow,
        minHeight: 70,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        border: `2px solid ${THEME.primary}15`,
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '3px',
          background: THEME.primaryGradient,
          opacity: 0.6
        }} />
        <span style={{ 
          fontSize: 16, 
          fontWeight: 600, 
          color: activeWordIndex !== -1 ? THEME.text : THEME.textLight,
          lineHeight: 1.5,
          position: 'relative',
          zIndex: 1
        }}>
          {activeWordIndex !== -1 && puzzle?.words[activeWordIndex] && (
            <span style={{ 
              marginRight: 10, 
              fontWeight: 800, 
              background: THEME.primaryGradient,
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
              fontSize: 18
            }}>
              {puzzle.words[activeWordIndex].num}.
            </span>
          )}
          {currentClue}
        </span>
      </div>

{/* GRID CONTAINER */}
      <div style={{
        flex: 1,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flex-start',
        overflow: 'auto',
        padding: '0 16px',
        position: 'relative'
      }}>
        <div 
          style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${puzzle.width}, 1fr)`,
            gridAutoRows: '1fr',
            gap: 3,
            padding: 12,
            background: 'linear-gradient(135deg, #FFFFFF 0%, #F8F6FF 100%)',
            borderRadius: 16,
          width: '100%',
            aspectRatio: `${puzzle.width}/${puzzle.height}`,
            maxWidth: 360,
            minWidth: 280,
            boxShadow: THEME.shadowLarge,
            border: `2px solid ${THEME.primary}10`,
            transform: 'translateZ(0)',
            willChange: 'contents',
            contain: 'layout style paint'
          }}
        >
          {(puzzle.grid || []).map((row, r) => (row || []).map((cell, c) => {
            const isActive = selectedCell?.r === r && selectedCell?.c === c;
            const isRelated = activeWordIndex !== -1 && cell?.words.some(w => w.index === activeWordIndex);
            const cellKey = `${r}-${c}`;
            const value = guesses[cellKey] || '';
            const isCorrect = cell && value === cell.char;
            const isWrong = cell && value && !isCorrect;
            const isInCompletedWord = cell?.words.some(w => completedWords.has(w.index));

return (
              <div 
                key={cellKey}
                onClick={() => handleCellClick(r, c)}
                onTouchStart={(e) => {
                  // Prevent double-tap zoom on mobile
                  e.stopPropagation();
                  const touch = e.touches[0];
                  if (touch) {
                  handleCellClick(r, c);
                  }
                }}
                onTouchEnd={(e) => {
                  e.preventDefault();
                }}
                style={{
                  background: cell 
                    ? (isActive 
                        ? 'linear-gradient(135deg, rgba(108, 92, 231, 0.25) 0%, rgba(162, 155, 254, 0.25) 100%)'
                        : isRelated
                          ? 'linear-gradient(135deg, rgba(108, 92, 231, 0.08) 0%, rgba(162, 155, 254, 0.08) 100%)'
                        : isCorrect 
                            ? 'linear-gradient(135deg, rgba(85, 239, 196, 0.15) 0%, rgba(0, 206, 201, 0.15) 100%)'
                          : THEME.grid) 
                    : 'transparent',
                  position: 'relative',
                  cursor: cell ? 'pointer' : 'default',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 19,
                  fontWeight: 700,
                  color: isWrong 
                    ? THEME.error 
                    : (isCorrect 
                        ? THEME.primary 
                        : THEME.text),
                  userSelect: 'none',
                  WebkitUserSelect: 'none',
                  touchAction: 'manipulation',
                  WebkitTapHighlightColor: 'transparent',
                  aspectRatio: '1/1',
                  width: '100%',
                  height: '100%',
                  minHeight: 0,
                  minWidth: 0,
                  maxHeight: '100%',
                  maxWidth: '100%',
                  overflow: 'hidden',
                  boxSizing: 'border-box',
                  borderRadius: 4,
                  border: isActive 
                    ? '3px solid #6C5CE7'
                    : isRelated
                      ? '2px solid rgba(108, 92, 231, 0.3)'
                      : cell
                        ? '2px solid rgba(0, 0, 0, 0.1)'
                        : 'none',
                  boxShadow: isActive 
                    ? '0 4px 12px rgba(108, 92, 231, 0.4), inset 0 0 0 1px rgba(108, 92, 231, 0.2)' 
                    : isCorrect 
                      ? '0 2px 6px rgba(85, 239, 196, 0.4), inset 0 0 0 1px rgba(85, 239, 196, 0.2)' 
                      : cell
                        ? '0 2px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.05)'
                        : 'none',
                  transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
                  transform: isActive ? 'scale(1.05) translateZ(0)' : 'scale(1) translateZ(0)',
                  willChange: isActive ? 'transform' : 'auto',
                  backfaceVisibility: 'hidden',
                  WebkitBackfaceVisibility: 'hidden',
                  zIndex: isActive ? 10 : (isRelated ? 5 : 1)
                }}
              >
                {cell && (
                  <>
                    {cell.num && (
                      <span style={{
                        position: 'absolute',
                        top: 3, left: 4,
                        fontSize: 9,
                        fontWeight: 800,
                        color: THEME.primary,
                        lineHeight: 1,
                        opacity: 0.7
                      }}>{cell.num}</span>
                    )}
                    {value}
                  </>
                )}
              </div>
            );
          }))}
        </div>
      </div>

{/* INPUT FOR TYPING - Mobile-friendly */}
      <input
        ref={inputRef}
        type="text"
        style={{
          position: 'fixed',
          top: '-9999px',
          left: '-9999px',
          width: '1px',
          height: '1px',
          padding: 0,
          margin: 0,
          border: 'none',
          outline: 'none',
          background: 'transparent',
          color: 'transparent',
          fontSize: '16px', // Prevent iOS zoom
          caretColor: 'transparent',
          pointerEvents: selectedCell ? 'auto' : 'none',
          opacity: 0,
          zIndex: 9999,
          WebkitAppearance: 'none',
          appearance: 'none',
          transform: 'translateZ(0)',
          willChange: 'transform'
        }}
        onChange={handleInput}
        onKeyDown={handleKeyDown}
        onBlur={(e) => {
          // Refocus if cell is selected (for mobile)
          if (selectedCell) {
            setTimeout(() => {
              if (inputRef.current) {
                inputRef.current.focus();
              }
            }, 100);
          }
        }}
        value=""
        autoComplete="off"
        autoCorrect="off"
        autoCapitalize="characters"
        inputMode="text"
        enterKeyHint="next"
      />

{/* KEYBOARD HINT (Mobile) - Enhanced */}
      <div style={{ 
        padding: '16px 20px', 
        textAlign: 'center', 
        opacity: 0.7, 
        fontSize: 13,
        fontWeight: 500,
        color: THEME.textLight,
        paddingBottom: 'max(env(safe-area-inset-bottom, 20px), 20px)',
        background: 'linear-gradient(180deg, transparent 0%, rgba(108, 92, 231, 0.02) 100%)'
      }}>
        {selectedCell ? (
          <span>
            <span style={{ color: THEME.primary, fontWeight: 600 }}>Type</span> to fill • <span style={{ color: THEME.primary, fontWeight: 600 }}>Backspace</span> to clear
          </span>
        ) : (
          <span>Tap a <span style={{ color: THEME.primary, fontWeight: 600 }}>numbered square</span> to start</span>
        )}
      </div>

{/* FLOATING ACTION BUTTON - SHARE */}
      {showConfetti && (
        <div style={{
          position: 'absolute',
          bottom: 100,
          left: 0, right: 0,
          display: 'flex',
          justifyContent: 'center',
          animation: 'popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
        }}>
          <button onClick={share} style={{
            background: THEME.primaryGradient,
            color: 'white',
            border: 'none',
            padding: '14px 28px',
            borderRadius: 24,
            fontSize: 16,
            fontWeight: 700,
            boxShadow: THEME.shadowLarge,
            display: 'flex',
            alignItems: 'center',
            gap: 10,
            letterSpacing: '0.3px',
            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
            cursor: 'pointer'
          }}
          onMouseOver={(e) => {
            e.currentTarget.style.transform = 'scale(1.05)';
            e.currentTarget.style.boxShadow = '0 8px 24px rgba(108, 92, 231, 0.4)';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.transform = 'scale(1)';
            e.currentTarget.style.boxShadow = THEME.shadowLarge;
          }}
          >
            <span style={{ fontSize: 18 }}>📤</span> Share Victory
          </button>
        </div>
      )}