\n {/* Message - Positioned higher with increased z-index */}\n

\n {message}\n

\n \n {/* Difficulty Selection for Desktop - Now more prominent */}\n

SELECT DIFFICULTY

\n \n \n \n \n \n

\n \n {/* Game Mode and Timer Indicator */}\n

\n Streak: {streak} | Best: {bestStreak}
Player: @{xHandle}\n

\n \n {gameStatus === \"playing\" &&

\n \n {formatTime(timeLeft)}s\n

}\n

\n \n {/* Game Grid */}\n

\n {Array.from({\n length: 5\n }).map((_, rowIndex) =>

\n {Array.from({\n length: gameMode\n }).map((_, colIndex) => {\n const guessLetter = guesses[rowIndex]?.[colIndex] || \"\";\n const currentRowIsActive = rowIndex === guesses.length;\n const currentColIsActive = currentRowIsActive && colIndex < currentGuess.length;\n const letterStatus = guesses[rowIndex] ? checkGuess(guesses[rowIndex])[colIndex] : \"\";\n let cellClasses = \"w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center text-base font-bold border-2 transition-all duration-300\";\n if (guessLetter) {\n if (letterStatus === \"correct\") {\n cellClasses += \" bg-green-700 border-green-500 text-white shadow-[0_0_6px_rgba(0,255,0,0.6)]\";\n } else if (letterStatus === \"present\") {\n cellClasses += \" bg-yellow-700 border-yellow-500 text-white\";\n } else if (letterStatus === \"absent\") {\n cellClasses += \" bg-gray-800 border-gray-700 text-white\";\n }\n } else if (currentRowIsActive && colIndex === currentGuess.length) {\n cellClasses += \" border-orange-400 animate-pulse\";\n } else {\n cellClasses += \" border-gray-700\";\n }\n\n // Add bounce animation for correct letters in the winning guess\n if (gameStatus === \"won\" && rowIndex === guesses.length - 1 && letterStatus === \"correct\" && bounce) {\n cellClasses += ` animate-bounce-${colIndex}`;\n }\n return

\n {currentRowIsActive && colIndex === currentGuess.length ? | : guessLetter || (currentColIsActive ? currentGuess[colIndex] : \"\")}\n

;\n })}\n

)}\n

\n \n {/* Virtual Keyboard */}\n

\n {keyboard.map((row, rowIndex) =>

\n {row.map(key => {\n let keyClasses = \"px-1 py-3 text-xs sm:text-sm font-medium transition-colors border-2\";\n if (key === \"Enter\") {\n keyClasses += \" px-2 bg-orange-700 hover:bg-orange-800 border-orange-500 shadow-[0_0_6px_rgba(255,165,0,0.4)]\";\n } else if (key === \"Backspace\") {\n keyClasses += \" px-2 bg-red-700 hover:bg-red-800 border-red-500\";\n } else {\n const status = keyboardStatus[key];\n if (status === \"correct\") {\n keyClasses += \" bg-green-700 hover:bg-green-800 border-green-500 text-white shadow-[0_0_6px_rgba(0,255,0,0.4)]\";\n } else if (status === \"present\") {\n keyClasses += \" bg-yellow-700 hover:bg-yellow-800 border-yellow-500 text-white\";\n } else if (status === \"absent\") {\n keyClasses += \" bg-gray-800 hover:bg-gray-700 border-gray-700 text-white\";\n } else {\n keyClasses += \" bg-gray-700 hover:bg-gray-600 border-gray-600\";\n }\n }\n return ;\n })}\n

)}\n

\n #\n	\n Player\n	\n Score\n
\n {index + 1}\n	\n @{entry.handle}\n	\n {entry.score + 1}\n

\n #\n

\n Player\n

\n Score\n

\n {index + 1}\n

\n @{entry.handle}\n

\n {entry.score + 1}\n

\n {gameStatus === \"won\" ? \"CRYPTO GENIUS!\" : \"GAME OVER\"}\n

\n {gameStatus === \"won\" ? `You found the word in ${guesses.length} ${guesses.length === 1 ? 'try' : 'tries'}!` : gameStatus === \"lost\" && timeLeft === 0 ? \"Time's up!\" : \"Better luck next time.\"}\n

\n The word was: {targetWord}\n

{streak}

Current Streak

{bestStreak}

Best Streak

\n A new crypto word awaits you!\n

ENTER YOUR X HANDLE

\n Your X handle is required to track your scores on the global leaderboard.\n

CRYPTLE

SELECT DIFFICULTY

SELECT DIFFICULTY

LEADERBOARD

How to Play

Settings

Difficulty

\n {gameStatus === \"won\" ? \"CRYPTO GENIUS!\" : \"GAME OVER\"}\n

ENTER YOUR X HANDLE

say something