From 64539a18deb4bcbd316185b44fe35daa8ca87149 Mon Sep 17 00:00:00 2001 From: SK8-infi Date: Sat, 23 Aug 2025 05:05:10 +0530 Subject: [PATCH] add --- public/word scramble/README.md | 196 +++++++++++++ public/word scramble/index.html | 106 +++++++ public/word scramble/script.js | 287 +++++++++++++++++++ public/word scramble/styles.css | 480 ++++++++++++++++++++++++++++++++ 4 files changed, 1069 insertions(+) create mode 100644 public/word scramble/README.md create mode 100644 public/word scramble/index.html create mode 100644 public/word scramble/script.js create mode 100644 public/word scramble/styles.css diff --git a/public/word scramble/README.md b/public/word scramble/README.md new file mode 100644 index 00000000..55fc6ccf --- /dev/null +++ b/public/word scramble/README.md @@ -0,0 +1,196 @@ +# 🔤 Word Wizard – Scramble & Solve + +A fun and engaging word scramble game where players unscramble words based on helpful hints. Built with modern web technologies and featuring a beautiful, responsive design. + +## ✨ Features + +### 🎮 Core Gameplay +- **Random Word Selection**: Words are randomly chosen from a curated database +- **Word Scrambling**: Advanced algorithm that ensures scrambled words are different from originals +- **Hint System**: Helpful clues guide players to the correct answer +- **User Input**: Clean, accessible input system with keyboard support + +### 🏆 Scoring & Progress +- **Scoring System**: +1 point for each correct answer +- **Streak Tracker**: Count consecutive correct answers +- **Timer Mode**: 60-second countdown adds excitement +- **Words Solved Counter**: Track total words completed + +### 🎨 User Experience +- **Dark Mode**: Toggle between light and dark themes +- **Responsive Design**: Works perfectly on desktop, tablet, and mobile +- **Smooth Animations**: Engaging visual feedback and transitions +- **Confetti Effect**: Celebratory animation for correct answers +- **Game Over Modal**: Beautiful end-game summary + +### 🎯 Game Flow +1. Click "Start Game" to begin +2. View the scrambled word and hint +3. Type your answer and press Enter or click Submit +4. Get immediate feedback and see your score/stats +5. Continue until the timer runs out +6. Review your final performance + +## 🛠️ Tech Stack + +- **Frontend**: HTML5, CSS3, Vanilla JavaScript +- **Styling**: Modern CSS with CSS Variables and Flexbox/Grid +- **Fonts**: Google Fonts (Poppins) +- **Icons**: Font Awesome 6 +- **Animations**: CSS Keyframes and JavaScript +- **Storage**: Local Storage for theme preferences + +## 📁 Project Structure + +``` +word-scramble/ +├── index.html # Main HTML structure +├── styles.css # Complete styling with dark mode +├── script.js # Game logic and functionality +└── README.md # Project documentation +``` + +## 🚀 Getting Started + +### Prerequisites +- A modern web browser (Chrome, Firefox, Safari, Edge) +- No additional dependencies required! + +### Installation +1. Clone or download the project files +2. Open `index.html` in your web browser +3. Start playing immediately! + +### Local Development +If you want to run it locally with a server: +```bash +# Using Python 3 +python -m http.server 8000 + +# Using Node.js (if you have http-server installed) +npx http-server + +# Using PHP +php -S localhost:8000 +``` + +Then visit `http://localhost:8000` in your browser. + +## 🎮 How to Play + +1. **Start the Game**: Click the "Start Game" button +2. **Read the Hint**: Look at the hint below the scrambled word +3. **Unscramble**: Figure out what the original word is +4. **Submit Answer**: Type your answer and press Enter or click Submit +5. **Build Streaks**: Get consecutive correct answers for higher scores +6. **Beat the Clock**: Try to solve as many words as possible in 60 seconds! + +## 📊 Word Database + +The game includes 30 carefully selected words with helpful hints: + +- **Animals**: elephant, butterfly, dolphin, penguin +- **Nature**: mountain, rainbow, volcano, waterfall, snowflake +- **Technology**: computer, telescope, skyscraper +- **Food**: pizza, chocolate, watermelon +- **Objects**: guitar, umbrella, bicycle, diamond +- **Places**: library, lighthouse, carnival, rainforest +- **And many more!** + +## 🎨 Customization + +### Adding New Words +To add new words, edit the `wordDatabase` array in `script.js`: + +```javascript +const wordDatabase = [ + { word: "yourword", hint: "Your hint here" }, + // ... existing words +]; +``` + +### Modifying Game Settings +Adjust game parameters in the `gameState` object: + +```javascript +let gameState = { + timer: 60, // Change timer duration + // ... other settings +}; +``` + +### Styling Customization +The CSS uses CSS variables for easy theming. Modify the `:root` section in `styles.css`: + +```css +:root { + --primary-color: #6366f1; /* Main brand color */ + --secondary-color: #10b981; /* Success/action color */ + /* ... other variables */ +} +``` + +## 🌟 Features in Detail + +### Word Scrambling Algorithm +- Uses Fisher-Yates shuffle for true randomness +- Ensures scrambled word is never the same as original +- Handles edge cases and repeated letters + +### Timer System +- 60-second countdown timer +- Visual feedback as time runs low +- Automatic game end when timer reaches zero + +### Dark Mode +- Persistent theme preference (saved in localStorage) +- Smooth transitions between themes +- Optimized colors for both light and dark modes + +### Responsive Design +- Mobile-first approach +- Flexible grid layouts +- Touch-friendly buttons and inputs +- Optimized typography for all screen sizes + +### Accessibility +- Keyboard navigation support +- High contrast color schemes +- Clear visual feedback +- Screen reader friendly + +## 🎯 Future Enhancements + +Potential features for future versions: +- **Difficulty Levels**: Easy, Medium, Hard word categories +- **Sound Effects**: Audio feedback for correct/incorrect answers +- **Leaderboards**: Local or online high score tracking +- **Word Categories**: Themed word sets (animals, food, etc.) +- **Multiplayer Mode**: Competitive play with friends +- **Custom Word Lists**: Import your own word collections +- **Statistics**: Detailed performance analytics +- **Achievements**: Unlockable badges and milestones + +## 🤝 Contributing + +This project is part of the SSoC (Summer of Open Source Code) initiative. Feel free to: +- Report bugs or issues +- Suggest new features +- Submit pull requests +- Improve documentation + +## 📄 License + +This project is open source and available under the [MIT License](LICENSE). + +## 🙏 Acknowledgments + +- **Font Awesome** for the beautiful icons +- **Google Fonts** for the Poppins font family +- **SSoC** for the project inspiration and framework + +--- + +**Happy Scrambling! 🎉** + +*Built with ❤️ for word game enthusiasts everywhere* diff --git a/public/word scramble/index.html b/public/word scramble/index.html new file mode 100644 index 00000000..fabd76ae --- /dev/null +++ b/public/word scramble/index.html @@ -0,0 +1,106 @@ + + + + + + Word Wizard – Scramble & Solve + + + + + +
+ +
+

+ + Word Wizard +

+
+ +
+
+ + +
+
+ + Score: 0 +
+
+ + Streak: 0 +
+
+ + Time: 60s +
+
+ + +
+
+

Ready to start?

+
+ +
+ +

Click "Start Game" to begin!

+
+ +
+ + +
+ +
+ + +
+
+ + +
+ + + + + +
+

How to Play

+
    +
  • Unscramble the word based on the hint provided
    • +
  • Type your answer and click Submit
    • +
  • Get points for correct answers and build your streak!
    • +
  • Beat the timer for an extra challenge
    • +
+
+
+ + + + diff --git a/public/word scramble/script.js b/public/word scramble/script.js new file mode 100644 index 00000000..6a0aac51 --- /dev/null +++ b/public/word scramble/script.js @@ -0,0 +1,287 @@ +// Game state +let gameState = { + score: 0, + streak: 0, + currentWord: null, + scrambledWord: '', + timer: 60, + timerInterval: null, + gameActive: false, + wordsSolved: 0 +}; + +// Word database with hints +const wordDatabase = [ + { word: "elephant", hint: "The largest land animal" }, + { word: "astronaut", hint: "They travel to space" }, + { word: "butterfly", hint: "A colorful flying insect" }, + { word: "mountain", hint: "A tall natural elevation" }, + { word: "computer", hint: "An electronic device for processing data" }, + { word: "rainbow", hint: "A colorful arc in the sky after rain" }, + { word: "dinosaur", hint: "Extinct prehistoric reptiles" }, + { word: "basketball", hint: "A sport played with an orange ball" }, + { word: "pizza", hint: "A popular Italian dish with cheese" }, + { word: "volcano", hint: "A mountain that can erupt with lava" }, + { word: "guitar", hint: "A stringed musical instrument" }, + { word: "dolphin", hint: "An intelligent marine mammal" }, + { word: "library", hint: "A place filled with books" }, + { word: "sunflower", hint: "A tall yellow flower that follows the sun" }, + { word: "bicycle", hint: "A two-wheeled vehicle you pedal" }, + { word: "diamond", hint: "A precious gemstone" }, + { word: "fireworks", hint: "Colorful explosions in the sky" }, + { word: "telescope", hint: "A device to see distant objects" }, + { word: "chocolate", hint: "A sweet treat made from cocoa" }, + { word: "waterfall", hint: "Water falling from a height" }, + { word: "penguin", hint: "A flightless bird that lives in cold places" }, + { word: "umbrella", hint: "Protection from rain" }, + { word: "lighthouse", hint: "A tower that guides ships at sea" }, + { word: "carnival", hint: "A festive celebration with rides" }, + { word: "treasure", hint: "Hidden valuable items" }, + { word: "snowflake", hint: "A unique ice crystal" }, + { word: "rainforest", hint: "A dense tropical forest" }, + { word: "skyscraper", hint: "A very tall building" }, + { word: "watermelon", hint: "A large green fruit with red inside" } +]; + +// DOM elements +const elements = { + score: document.getElementById('score'), + streak: document.getElementById('streak'), + timer: document.getElementById('timer'), + scrambledWord: document.getElementById('scrambledWord'), + hintText: document.getElementById('hintText'), + userInput: document.getElementById('userInput'), + submitBtn: document.getElementById('submitBtn'), + startBtn: document.getElementById('startBtn'), + newWordBtn: document.getElementById('newWordBtn'), + resultMessage: document.getElementById('resultMessage'), + gameOverModal: document.getElementById('gameOverModal'), + finalScore: document.getElementById('finalScore'), + finalStreak: document.getElementById('finalStreak'), + wordsSolved: document.getElementById('wordsSolved'), + playAgainBtn: document.getElementById('playAgainBtn'), + themeToggle: document.getElementById('themeToggle') +}; + +// Initialize the game +function init() { + loadTheme(); + setupEventListeners(); + updateDisplay(); +} + +// Setup event listeners +function setupEventListeners() { + elements.startBtn.addEventListener('click', startGame); + elements.newWordBtn.addEventListener('click', getNewWord); + elements.submitBtn.addEventListener('click', checkAnswer); + elements.userInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') checkAnswer(); + }); + elements.playAgainBtn.addEventListener('click', resetGame); + elements.themeToggle.addEventListener('click', toggleTheme); +} + +// Theme management +function loadTheme() { + const savedTheme = localStorage.getItem('theme') || 'light'; + document.documentElement.setAttribute('data-theme', savedTheme); + updateThemeIcon(savedTheme); +} + +function toggleTheme() { + const currentTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + + document.documentElement.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + updateThemeIcon(newTheme); +} + +function updateThemeIcon(theme) { + const icon = elements.themeToggle.querySelector('i'); + icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon'; +} + +// Game functions +function startGame() { + gameState.gameActive = true; + gameState.score = 0; + gameState.streak = 0; + gameState.wordsSolved = 0; + gameState.timer = 60; + + elements.startBtn.style.display = 'none'; + elements.newWordBtn.style.display = 'inline-flex'; + elements.userInput.disabled = false; + elements.submitBtn.disabled = false; + + getNewWord(); + startTimer(); + updateDisplay(); +} + +function getNewWord() { + const randomIndex = Math.floor(Math.random() * wordDatabase.length); + gameState.currentWord = wordDatabase[randomIndex]; + gameState.scrambledWord = scrambleWord(gameState.currentWord.word); + + elements.scrambledWord.textContent = gameState.scrambledWord; + elements.hintText.textContent = gameState.currentWord.hint; + elements.userInput.value = ''; + elements.userInput.focus(); + + hideResultMessage(); +} + +function scrambleWord(word) { + const letters = word.split(''); + let scrambled = ''; + + // Fisher-Yates shuffle + for (let i = letters.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [letters[i], letters[j]] = [letters[j], letters[i]]; + } + + scrambled = letters.join(''); + + // Make sure the scrambled word is different from the original + return scrambled === word ? scrambleWord(word) : scrambled; +} + +function checkAnswer() { + if (!gameState.gameActive) return; + + const userAnswer = elements.userInput.value.trim().toLowerCase(); + const correctAnswer = gameState.currentWord.word.toLowerCase(); + + if (userAnswer === correctAnswer) { + handleCorrectAnswer(); + } else { + handleIncorrectAnswer(); + } +} + +function handleCorrectAnswer() { + gameState.score++; + gameState.streak++; + gameState.wordsSolved++; + + showResultMessage('Correct! 🎉', 'correct'); + updateDisplay(); + addConfetti(); + + // Add some delay before showing next word + setTimeout(() => { + getNewWord(); + }, 1500); +} + +function handleIncorrectAnswer() { + gameState.streak = 0; + + showResultMessage(`Incorrect! The word was "${gameState.currentWord.word}"`, 'incorrect'); + + // Add some delay before showing next word + setTimeout(() => { + getNewWord(); + }, 2000); +} + +function showResultMessage(message, type) { + elements.resultMessage.textContent = message; + elements.resultMessage.className = `result-message show ${type}`; +} + +function hideResultMessage() { + elements.resultMessage.className = 'result-message'; +} + +function startTimer() { + gameState.timerInterval = setInterval(() => { + gameState.timer--; + updateDisplay(); + + if (gameState.timer <= 0) { + endGame(); + } + }, 1000); +} + +function endGame() { + gameState.gameActive = false; + clearInterval(gameState.timerInterval); + + elements.userInput.disabled = true; + elements.submitBtn.disabled = true; + elements.newWordBtn.style.display = 'none'; + elements.startBtn.style.display = 'inline-flex'; + + showGameOverModal(); +} + +function showGameOverModal() { + elements.finalScore.textContent = gameState.score; + elements.finalStreak.textContent = gameState.streak; + elements.wordsSolved.textContent = gameState.wordsSolved; + + elements.gameOverModal.classList.add('show'); +} + +function resetGame() { + elements.gameOverModal.classList.remove('show'); + gameState.timer = 60; + updateDisplay(); +} + +function updateDisplay() { + elements.score.textContent = gameState.score; + elements.streak.textContent = gameState.streak; + elements.timer.textContent = gameState.timer; +} + +// Initialize the game when the page loads +document.addEventListener('DOMContentLoaded', init); + +// Add some fun animations and effects +function addConfetti() { + // Simple confetti effect for correct answers + const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57']; + + for (let i = 0; i < 50; i++) { + setTimeout(() => { + const confetti = document.createElement('div'); + confetti.style.position = 'fixed'; + confetti.style.left = Math.random() * 100 + 'vw'; + confetti.style.top = '-10px'; + confetti.style.width = '10px'; + confetti.style.height = '10px'; + confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; + confetti.style.borderRadius = '50%'; + confetti.style.pointerEvents = 'none'; + confetti.style.zIndex = '9999'; + confetti.style.animation = 'fall 3s linear forwards'; + + document.body.appendChild(confetti); + + setTimeout(() => { + confetti.remove(); + }, 3000); + }, i * 50); + } +} + +// Add confetti animation to CSS +const style = document.createElement('style'); +style.textContent = ` + @keyframes fall { + to { + transform: translateY(100vh) rotate(360deg); + opacity: 0; + } + } +`; +document.head.appendChild(style); + + diff --git a/public/word scramble/styles.css b/public/word scramble/styles.css new file mode 100644 index 00000000..1cd63267 --- /dev/null +++ b/public/word scramble/styles.css @@ -0,0 +1,480 @@ +/* CSS Variables for theming */ +:root { + --primary-color: #6366f1; + --primary-hover: #4f46e5; + --secondary-color: #10b981; + --secondary-hover: #059669; + --background: #ffffff; + --surface: #f8fafc; + --text-primary: #1e293b; + --text-secondary: #64748b; + --border: #e2e8f0; + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +/* Dark mode variables */ +[data-theme="dark"] { + --background: #0f172a; + --surface: #1e293b; + --text-primary: #f1f5f9; + --text-secondary: #94a3b8; + --border: #334155; + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Poppins', sans-serif; + background: var(--background); + color: var(--text-primary); + transition: all 0.3s ease; + min-height: 100vh; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Header */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; + padding: 20px 0; + border-bottom: 2px solid var(--border); +} + +.title { + font-size: 2.5rem; + font-weight: 700; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + display: flex; + align-items: center; + gap: 15px; +} + +.title i { + font-size: 2rem; + color: var(--primary-color); +} + +.theme-btn { + background: var(--surface); + border: 2px solid var(--border); + color: var(--text-primary); + padding: 12px; + border-radius: 50%; + cursor: pointer; + transition: all 0.3s ease; + font-size: 1.2rem; +} + +.theme-btn:hover { + background: var(--primary-color); + color: white; + transform: scale(1.1); +} + +/* Stats */ +.stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + margin-bottom: 40px; +} + +.stat-item { + background: var(--surface); + padding: 20px; + border-radius: 15px; + text-align: center; + box-shadow: var(--shadow); + border: 1px solid var(--border); + transition: transform 0.3s ease; +} + +.stat-item:hover { + transform: translateY(-5px); +} + +.stat-item i { + font-size: 1.5rem; + color: var(--primary-color); + margin-bottom: 10px; + display: block; +} + +.stat-item span { + font-weight: 600; + color: var(--text-primary); +} + +/* Game Area */ +.game-area { + background: var(--surface); + padding: 40px; + border-radius: 20px; + box-shadow: var(--shadow-lg); + border: 1px solid var(--border); + margin-bottom: 30px; + text-align: center; +} + +.word-display { + margin-bottom: 30px; +} + +.scrambled-word { + font-size: 3rem; + font-weight: 700; + color: var(--primary-color); + letter-spacing: 3px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +.hint-section { + background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); + padding: 20px; + border-radius: 15px; + margin-bottom: 30px; + border-left: 5px solid #f59e0b; +} + +[data-theme="dark"] .hint-section { + background: linear-gradient(135deg, #1e293b 0%, #334155 100%); + border-left-color: #f59e0b; +} + +.hint-section i { + color: #f59e0b; + font-size: 1.2rem; + margin-right: 10px; +} + +.hint-text { + font-size: 1.1rem; + color: var(--text-primary); + font-weight: 500; +} + +.input-section { + display: flex; + gap: 15px; + margin-bottom: 30px; + justify-content: center; + flex-wrap: wrap; +} + +#userInput { + flex: 1; + min-width: 250px; + padding: 15px 20px; + border: 2px solid var(--border); + border-radius: 10px; + font-size: 1.1rem; + background: var(--background); + color: var(--text-primary); + transition: all 0.3s ease; +} + +#userInput:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +#userInput:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.submit-btn { + padding: 15px 30px; + background: var(--secondary-color); + color: white; + border: none; + border-radius: 10px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 8px; +} + +.submit-btn:hover:not(:disabled) { + background: var(--secondary-hover); + transform: translateY(-2px); +} + +.submit-btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +/* Game Controls */ +.game-controls { + display: flex; + gap: 15px; + justify-content: center; + flex-wrap: wrap; +} + +.start-btn, .new-word-btn { + padding: 15px 30px; + background: var(--primary-color); + color: white; + border: none; + border-radius: 10px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 8px; +} + +.start-btn:hover, .new-word-btn:hover { + background: var(--primary-hover); + transform: translateY(-2px); +} + +/* Result Messages */ +.result-message { + padding: 15px 20px; + border-radius: 10px; + margin-bottom: 20px; + font-weight: 600; + text-align: center; + opacity: 0; + transform: translateY(-20px); + transition: all 0.3s ease; +} + +.result-message.show { + opacity: 1; + transform: translateY(0); +} + +.result-message.correct { + background: #dcfce7; + color: #166534; + border: 1px solid #bbf7d0; +} + +.result-message.incorrect { + background: #fef2f2; + color: #dc2626; + border: 1px solid #fecaca; +} + +/* Modal */ +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 1000; + backdrop-filter: blur(5px); +} + +.modal.show { + display: flex; + align-items: center; + justify-content: center; +} + +.modal-content { + background: var(--surface); + padding: 40px; + border-radius: 20px; + text-align: center; + box-shadow: var(--shadow-lg); + border: 1px solid var(--border); + max-width: 400px; + width: 90%; + animation: modalSlideIn 0.3s ease; +} + +@keyframes modalSlideIn { + from { + opacity: 0; + transform: translateY(-50px) scale(0.9); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.modal-content h2 { + color: var(--primary-color); + margin-bottom: 20px; + font-size: 2rem; +} + +.final-stats { + margin-bottom: 30px; +} + +.final-stats p { + margin: 10px 0; + font-size: 1.1rem; + color: var(--text-primary); +} + +.final-stats span { + font-weight: 700; + color: var(--primary-color); +} + +.play-again-btn { + padding: 15px 30px; + background: var(--primary-color); + color: white; + border: none; + border-radius: 10px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 8px; + margin: 0 auto; +} + +.play-again-btn:hover { + background: var(--primary-hover); + transform: translateY(-2px); +} + +/* Instructions */ +.instructions { + background: var(--surface); + padding: 25px; + border-radius: 15px; + box-shadow: var(--shadow); + border: 1px solid var(--border); +} + +.instructions h3 { + color: var(--primary-color); + margin-bottom: 15px; + display: flex; + align-items: center; + gap: 10px; +} + +.instructions ul { + list-style: none; + padding-left: 0; +} + +.instructions li { + padding: 8px 0; + color: var(--text-secondary); + position: relative; + padding-left: 25px; +} + +.instructions li::before { + content: "•"; + color: var(--primary-color); + font-weight: bold; + position: absolute; + left: 0; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .container { + padding: 15px; + } + + .title { + font-size: 2rem; + } + + .scrambled-word { + font-size: 2rem; + letter-spacing: 2px; + } + + .game-area { + padding: 25px; + } + + .input-section { + flex-direction: column; + align-items: center; + } + + #userInput { + min-width: 200px; + width: 100%; + } + + .stats { + grid-template-columns: 1fr; + } +} + +/* Animations */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.game-area { + animation: fadeIn 0.5s ease; +} + +/* Loading animation */ +.loading { + display: inline-block; + width: 20px; + height: 20px; + border: 3px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top-color: #fff; + animation: spin 1s ease-in-out infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +}