Create a complete, fully functional, multiplayer Tic-Tac-Toe game in a single HTML file.
Core Technologies:
Structure: A single `index.html` file containing all HTML, CSS, and JavaScript.
Backend: Use Firebase Realtime Database for all real-time communication, game state management, and chat.
Important: Do not use Firebase Authentication or Firebase Storage. All operations must be free-tier compatible.
Detailed Feature Requirements:
1. Matchmaking and Game Logic:
Automatic Matchmaking: When a user clicks "Start Game", the script should automatically match them with another waiting player.
Lobby System: Use a `waitingPlayers` node in the Firebase Realtime Database.
If a player is the first to enter the lobby, they should wait.
If a second player enters, they should be matched with the waiting player, a new game room should be created under a `games` node, and both players should be removed from the `waitingPlayers` lobby.
Disconnection Handling: Use Firebase's `onDisconnect()` feature. If a player is in the `waitingPlayers` lobby and closes their browser, they should be automatically removed from the lobby to prevent "ghost" players.
Real-time Updates: The game board, turn status, and all actions must update in real-time for both players using Firebase listeners.
2. Visual Design & UI (Neon/Sci-Fi Theme):
Overall Theme: The game should have a dark, sci-fi, neon-glow theme. Use a futuristic font like 'Orbitron' from Google Fonts.
Colors: The primary colors should be a glowing cyan for Player 'X' and a glowing magenta/pink for Player 'O'. The background should be a very dark purple/blue.
Player Display: At the top, display two boxes: one for Player 'O' (pink glow) and one for Player 'X' (cyan glow), showing their respective symbols.
Game Board: The 3x3 grid lines should have a purple neon glow.
Symbols (X and O): When placed on the board, the 'X' and 'O' symbols must have their respective cyan and pink neon text-shadow glow.
Winning Line: When a player wins, a line must be drawn through the winning combination. This line must also have a multi-layered neon glow effect that matches the winner's color.
3. Animations:
Symbol Animation: When a player makes a move, the 'X' or 'O' symbol should appear on the grid with a "pop-in" or "scale-up" animation.
Rematch Button Animation: When one player requests a rematch, the "Play Again" button on the opponent's screen should get a "glowing pulse" animation to grab their attention.
4. Gameplay Flow & Controls:
Start Screen: A single, central "Start Game" button.
Game Screen: Contains the player display, a status text area ("Your Turn", "Opponent Wins", etc.), the game board, and the chat system.
Post-Game Controls: After a game ends (win, loss, or draw), two buttons must appear:
Play Again: This initiates the rematch sequence.
End Game: This deletes the game from Firebase and returns both players to the start screen.
Rematch System:
If one player clicks "Play Again", their button should show a "Waiting..." state. The opponent's "Play Again" button should become animated.
If the second player also clicks "Play Again", the game should restart immediately for the same two players with a cleared board.
In-Game Chat System:
At the bottom of the game screen, include a chat interface.
It should have a scrollable message display box and an input field with a "Send" button.
Messages sent by the user should be styled differently (e.g., align right, pink background) from messages received from the opponent (e.g., align left, cyan background).
Chat messages should be stored under the current game's ID in a `chat` node in Firebase and appear in real-time.
5. Code Structure:
Provide all code within a single `index.html` file.
Use modern JavaScript (ES6+).
Structure the code with clear comments.
Crucially, in the JavaScript section, provide a clearly marked placeholder for the user to paste their own Firebase configuration object.
Here is the placeholder for the Firebase config that you must include in the final code:
```javascript
// <<< PASTE YOUR FIREBASE CONFIGURATION OBJECT HERE >>>
const firebaseConfig = {
// apiKey: "...",
// authDomain: "...",
// databaseURL: "...",
// projectId: "...",
// storageBucket: "...",
// messagingSenderId: "...",
// appId: "..."
};
```
The final output should be a single, copy-pasteable HTML file that is fully functional once the user adds their Firebase configuration.