From a1b6759c37dabbfab56b771bcf8171c1ac6ecac6 Mon Sep 17 00:00:00 2001 From: SK8-infi Date: Sat, 23 Aug 2025 04:37:21 +0530 Subject: [PATCH] add --- public/CSS_Math_Duel/README.md | 199 +++++++++ public/CSS_Math_Duel/index.html | 87 ++++ public/CSS_Math_Duel/script.js | 352 +++++++++++++++ public/CSS_Math_Duel/style.css | 748 ++++++++++++++++++++++++++++++++ 4 files changed, 1386 insertions(+) create mode 100644 public/CSS_Math_Duel/README.md create mode 100644 public/CSS_Math_Duel/index.html create mode 100644 public/CSS_Math_Duel/script.js create mode 100644 public/CSS_Math_Duel/style.css diff --git a/public/CSS_Math_Duel/README.md b/public/CSS_Math_Duel/README.md new file mode 100644 index 00000000..a0fc579b --- /dev/null +++ b/public/CSS_Math_Duel/README.md @@ -0,0 +1,199 @@ +# ๐Ÿงฎ CSS Math Duel - Two-Player Speed Math Race + +A fast-paced, competitive math game where two players race to solve math problems and reach the finish line first! Built with HTML5, CSS3, and JavaScript. + +## ๐ŸŽฏ Project Overview + +CSS Math Duel is an educational game that combines learning with real-time competitive fun. Players solve math problems as quickly as possible, with each correct answer moving their avatar forward along a CSS-powered race track. + +## ๐Ÿš€ Features + +### ๐ŸŽฎ Gameplay Features +- **2-Player Split-Screen Mode**: Play on the same device with side-by-side racing +- **Random Math Problems**: Addition, subtraction, and multiplication questions +- **Real-Time Racing**: Avatars move forward with each correct answer +- **Speed-Based Progress**: Faster responses = quicker progress +- **Visual Race Track**: CSS Flexbox-powered track with progress indicators +- **Win Detection**: Automatic winner detection with celebration animations +- **Easy Restart**: Quick game reset functionality + +### ๐ŸŽจ Visual Features +- **Modern UI Design**: Clean, responsive interface with gradient backgrounds +- **Smooth Animations**: CSS keyframes for avatar movement and effects +- **Confetti Celebration**: Animated confetti when a player wins +- **Progress Tracking**: Visual progress bars and avatar positioning +- **Responsive Design**: Works on desktop, tablet, and mobile devices + +### ๐ŸŽฏ Educational Features +- **Math Practice**: Addition, subtraction, and multiplication problems +- **Speed Training**: Improves mental math speed and accuracy +- **Competitive Learning**: Motivates players through friendly competition +- **Immediate Feedback**: Instant feedback on correct/incorrect answers + +## ๐Ÿ› ๏ธ Tech Stack + +- **HTML5**: Semantic markup and game structure +- **CSS3**: Flexbox, Grid, Keyframes, Transitions, and Animations +- **JavaScript**: ES6+ Classes, DOM manipulation, and game logic +- **Font Awesome**: Icons for enhanced UI +- **Google Fonts**: Inter font family for modern typography + +## ๐ŸŽฎ How to Play + +1. **Start the Game**: Click "Start Game" to begin +2. **Solve Math Problems**: Each player gets their own math question +3. **Type Your Answer**: Enter the correct answer in your input box +4. **Race to the Finish**: Correct answers move your avatar forward +5. **Win the Race**: First player to reach 100% wins! + +### ๐ŸŽฏ Game Rules +- **Correct Answer**: Move forward 10% and get a new question +- **Wrong Answer**: Move backward 2% as a penalty +- **Win Condition**: Reach 100% progress to win +- **Scoring**: Track total correct answers for each player + +## ๐Ÿ“ Project Structure + +``` +Games/CSS_Math_Duel/ +โ”œโ”€โ”€ index.html # Main game HTML file +โ”œโ”€โ”€ style.css # CSS styles and animations +โ”œโ”€โ”€ script.js # JavaScript game logic +โ””โ”€โ”€ README.md # Project documentation +``` + +## ๐Ÿš€ Getting Started + +### Prerequisites +- Modern web browser (Chrome, Firefox, Safari, Edge) +- No additional dependencies required + +### Installation +1. Clone or download the project +2. Navigate to `Games/CSS_Math_Duel/` +3. Open `index.html` in your web browser +4. Start playing! + +### Development Setup +1. Open the project in your code editor +2. Make changes to HTML, CSS, or JavaScript files +3. Refresh the browser to see changes +4. No build process required - pure HTML/CSS/JS + +## ๐ŸŽจ Customization + +### Adding New Math Operations +```javascript +// In script.js, modify the generateQuestion() method +const operations = [ + { symbol: '+', func: (a, b) => a + b }, + { symbol: '-', func: (a, b) => a - b }, + { symbol: 'ร—', func: (a, b) => a * b }, + { symbol: 'รท', func: (a, b) => Math.floor(a / b) } // Add division +]; +``` + +### Changing Game Difficulty +```javascript +// Modify number ranges in generateQuestion() +const a = Math.floor(Math.random() * 20) + 1; // 1-20 instead of 1-12 +const b = Math.floor(Math.random() * 20) + 1; +``` + +### Customizing Visuals +```css +/* In style.css, modify colors and animations */ +.btn-primary { + background: linear-gradient(45deg, #your-color1, #your-color2); +} + +.avatar { + font-size: 2.5rem; /* Change avatar size */ +} +``` + +## ๐ŸŽฏ Game Logic + +### Question Generation +```javascript +function generateQuestion() { + const operations = [ + { symbol: '+', func: (a, b) => a + b }, + { symbol: '-', func: (a, b) => a - b }, + { symbol: 'ร—', func: (a, b) => a * b } + ]; + + const operation = operations[Math.floor(Math.random() * operations.length)]; + const a = Math.floor(Math.random() * 12) + 1; + const b = Math.floor(Math.random() * 12) + 1; + + return { + question: `${a} ${operation.symbol} ${b}`, + answer: operation.func(a, b) + }; +} +``` + +### Avatar Movement +```javascript +function updateAvatarPosition(player, percentage) { + const avatar = this.avatars[player]; + const maxDistance = trackWidth - 60; + const distance = (percentage / 100) * maxDistance; + + avatar.style.transform = `translateY(-50%) translateX(${distance}px)`; +} +``` + +## ๐ŸŽจ CSS Features + +### Keyframe Animations +```css +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { transform: translateY(-50%) scale(1); } + 40% { transform: translateY(-50%) scale(1.2); } + 60% { transform: translateY(-50%) scale(1.1); } +} + +@keyframes confettiFall { + 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } + 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } +} +``` + +### Responsive Design +```css +@media (max-width: 768px) { + .player-section { + grid-template-columns: 1fr; + gap: 15px; + } + + .question { + font-size: 1.5rem; + } +} +``` + +## ๐Ÿš€ Future Enhancements + +### Potential Features +- **Multiple Difficulty Levels**: Easy, Medium, Hard modes +- **More Math Operations**: Division, exponents, fractions +- **Sound Effects**: Audio feedback for correct/incorrect answers +- **Timer Mode**: Race against the clock +- **Multiplayer Online**: Play with friends over the internet +- **Leaderboards**: Track high scores and fastest times +- **Custom Avatars**: Choose different character emojis +- **Power-ups**: Special abilities that affect gameplay + +### Technical Improvements +- **Local Storage**: Save game statistics +- **Progressive Web App**: Install as a mobile app +- **Service Worker**: Offline functionality +- **WebSocket**: Real-time multiplayer +- **Canvas Graphics**: More advanced visual effects + +--- + +**Happy Math Racing! ๐Ÿ๐Ÿงฎ** \ No newline at end of file diff --git a/public/CSS_Math_Duel/index.html b/public/CSS_Math_Duel/index.html new file mode 100644 index 00000000..b1b86b2b --- /dev/null +++ b/public/CSS_Math_Duel/index.html @@ -0,0 +1,87 @@ + + + + + + CSS Math Duel - Two-Player Speed Math Race + + + + +
+
+

๐Ÿงฎ CSS Math Duel

+

Two-Player Speed Math Race

+
+
+
+
+
+
+ +
+ + +
+ Ready to race! +
+
+ +
+
+
๐Ÿ
+ + +
+
+

Player 1 ๐Ÿงโ€โ™‚๏ธ

+
Score: 0
+
+ +
+
๐Ÿงโ€โ™‚๏ธ
+
+
+ +
+
?
+ + +
+
+ + +
+
+

Player 2 ๐Ÿงโ€โ™€๏ธ

+
Score: 0
+
+ +
+
๐Ÿงโ€โ™€๏ธ
+
+
+ +
+
?
+ + +
+
+
+
+ +
+
+

๐ŸŽ‰ Winner!

+

+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/public/CSS_Math_Duel/script.js b/public/CSS_Math_Duel/script.js new file mode 100644 index 00000000..d5b99060 --- /dev/null +++ b/public/CSS_Math_Duel/script.js @@ -0,0 +1,352 @@ +class MathDuelGame { + constructor() { + this.gameActive = false; + this.currentQuestions = { player1: null, player2: null }; + this.scores = { player1: 0, player2: 0 }; + this.positions = { player1: 0, player2: 0 }; + this.maxPosition = 100; // Percentage to win + this.winner = null; + + this.initializeElements(); + this.bindEvents(); + } + + initializeElements() { + // Game controls + this.startBtn = document.getElementById('startBtn'); + this.restartBtn = document.getElementById('restartBtn'); + this.gameStatus = document.getElementById('gameStatus'); + + // Player elements + this.avatars = { + player1: document.getElementById('avatar1'), + player2: document.getElementById('avatar2') + }; + + this.trackProgress = { + player1: document.querySelector('#player1-section .track-progress'), + player2: document.querySelector('#player2-section .track-progress') + }; + + this.questions = { + player1: document.getElementById('question1'), + player2: document.getElementById('question2') + }; + + this.answers = { + player1: document.getElementById('answer1'), + player2: document.getElementById('answer2') + }; + + this.feedback = { + player1: document.getElementById('feedback1'), + player2: document.getElementById('feedback2') + }; + + this.scores = { + player1: document.getElementById('score1'), + player2: document.getElementById('score2') + }; + + // Modal + this.winnerModal = document.getElementById('winnerModal'); + this.winnerText = document.getElementById('winnerText'); + this.winnerDetails = document.getElementById('winnerDetails'); + this.playAgainBtn = document.getElementById('playAgainBtn'); + + // Confetti + this.confettiContainer = document.getElementById('confettiContainer'); + } + + bindEvents() { + this.startBtn.addEventListener('click', () => this.startGame()); + this.restartBtn.addEventListener('click', () => this.restartGame()); + this.playAgainBtn.addEventListener('click', () => this.restartGame()); + + // Answer input events + this.answers.player1.addEventListener('keypress', (e) => { + if (e.key === 'Enter') this.checkAnswer('player1'); + }); + + this.answers.player2.addEventListener('keypress', (e) => { + if (e.key === 'Enter') this.checkAnswer('player2'); + }); + } + + startGame() { + this.gameActive = true; + this.winner = null; + this.positions = { player1: 0, player2: 0 }; + this.scores = { player1: 0, player2: 0 }; + + // Update UI + this.startBtn.style.display = 'none'; + this.restartBtn.style.display = 'inline-block'; + this.gameStatus.textContent = 'Game in progress!'; + document.body.classList.add('game-active'); + + // Enable inputs + this.answers.player1.disabled = false; + this.answers.player2.disabled = false; + this.answers.player1.focus(); + + // Generate initial questions + this.generateNewQuestions(); + + // Update scores display + this.updateScoreDisplay(); + } + + restartGame() { + this.gameActive = false; + this.winner = null; + this.positions = { player1: 0, player2: 0 }; + this.scores = { player1: 0, player2: 0 }; + + // Reset UI + this.startBtn.style.display = 'inline-block'; + this.restartBtn.style.display = 'none'; + this.gameStatus.textContent = 'Ready to race!'; + document.body.classList.remove('game-active'); + + // Disable inputs + this.answers.player1.disabled = true; + this.answers.player2.disabled = true; + this.answers.player1.value = ''; + this.answers.player2.value = ''; + + // Reset avatars and tracks + this.updateAvatarPosition('player1', 0); + this.updateAvatarPosition('player2', 0); + + // Clear questions and feedback + this.questions.player1.textContent = '?'; + this.questions.player2.textContent = '?'; + this.feedback.player1.textContent = ''; + this.feedback.player2.textContent = ''; + this.feedback.player1.className = 'feedback'; + this.feedback.player2.className = 'feedback'; + + // Hide modal + this.winnerModal.style.display = 'none'; + + // Update scores display + this.updateScoreDisplay(); + } + + generateQuestion() { + const operations = [ + { symbol: '+', func: (a, b) => a + b }, + { symbol: '-', func: (a, b) => a - b }, + { symbol: 'ร—', func: (a, b) => a * b } + ]; + + const operation = operations[Math.floor(Math.random() * operations.length)]; + const a = Math.floor(Math.random() * 12) + 1; + const b = Math.floor(Math.random() * 12) + 1; + + // Ensure positive results for subtraction + const num1 = operation.symbol === '-' ? Math.max(a, b) : a; + const num2 = operation.symbol === '-' ? Math.min(a, b) : b; + + return { + question: `${num1} ${operation.symbol} ${num2}`, + answer: operation.func(num1, num2) + }; + } + + generateNewQuestions() { + this.currentQuestions.player1 = this.generateQuestion(); + this.currentQuestions.player2 = this.generateQuestion(); + + this.questions.player1.textContent = this.currentQuestions.player1.question; + this.questions.player2.textContent = this.currentQuestions.player2.question; + + // Clear previous answers and feedback + this.answers.player1.value = ''; + this.answers.player2.value = ''; + this.feedback.player1.textContent = ''; + this.feedback.player2.textContent = ''; + this.feedback.player1.className = 'feedback'; + this.feedback.player2.className = 'feedback'; + } + + checkAnswer(player) { + if (!this.gameActive) return; + + const answer = parseInt(this.answers[player].value); + const correctAnswer = this.currentQuestions[player].answer; + + if (answer === correctAnswer) { + // Correct answer + this.feedback[player].textContent = 'โœ… Correct!'; + this.feedback[player].className = 'feedback correct'; + + // Update score and position + this.scores[player]++; + this.positions[player] += 10; // Move 10% forward + + // Update displays + this.updateScoreDisplay(); + this.updateAvatarPosition(player, this.positions[player]); + + // Check for winner + if (this.positions[player] >= this.maxPosition) { + this.endGame(player); + return; + } + + // Generate new question for this player + this.currentQuestions[player] = this.generateQuestion(); + this.questions[player].textContent = this.currentQuestions[player].question; + this.answers[player].value = ''; + + } else { + // Incorrect answer + this.feedback[player].textContent = `โŒ Wrong! Answer was ${correctAnswer}`; + this.feedback[player].className = 'feedback incorrect'; + + // Small penalty for wrong answer + this.positions[player] = Math.max(0, this.positions[player] - 2); + this.updateAvatarPosition(player, this.positions[player]); + } + + // Clear feedback after 2 seconds + setTimeout(() => { + this.feedback[player].textContent = ''; + this.feedback[player].className = 'feedback'; + }, 2000); + } + + updateAvatarPosition(player, percentage) { + const avatar = this.avatars[player]; + const trackProgress = this.trackProgress[player]; + const trackWidth = avatar.parentElement.offsetWidth; + + // Calculate position (leave some space for avatar) + const maxDistance = trackWidth - 60; // 60px for avatar width + const distance = (percentage / 100) * maxDistance; + + // Update avatar position + avatar.style.transform = `translateY(-50%) translateX(${distance}px)`; + + // Update progress bar + trackProgress.style.width = `${percentage}%`; + } + + updateScoreDisplay() { + document.getElementById('score1').textContent = this.scores.player1; + document.getElementById('score2').textContent = this.scores.player2; + } + + endGame(winner) { + this.gameActive = false; + this.winner = winner; + + // Disable inputs + this.answers.player1.disabled = true; + this.answers.player2.disabled = true; + + // Update UI + this.startBtn.style.display = 'none'; + this.restartBtn.style.display = 'inline-block'; + this.gameStatus.textContent = `${winner === 'player1' ? 'Player 1' : 'Player 2'} wins!`; + document.body.classList.remove('game-active'); + + // Add winner animation + this.avatars[winner].classList.add('winner'); + + // Show winner modal + this.showWinnerModal(winner); + + // Create confetti + this.createConfetti(); + } + + showWinnerModal(winner) { + const playerName = winner === 'player1' ? 'Player 1 ๐Ÿงโ€โ™‚๏ธ' : 'Player 2 ๐Ÿงโ€โ™€๏ธ'; + const playerScore = this.scores[winner]; + + this.winnerText.textContent = `๐ŸŽ‰ ${playerName} Wins!`; + this.winnerDetails.textContent = `Final Score: ${playerScore} correct answers`; + + this.winnerModal.style.display = 'flex'; + } + + createConfetti() { + const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#a29bfe', '#fd79a8']; + + for (let i = 0; i < 150; i++) { + setTimeout(() => { + const confetti = document.createElement('div'); + confetti.className = 'confetti'; + confetti.style.left = Math.random() * 100 + '%'; + confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; + confetti.style.animationDelay = Math.random() * 3 + 's'; + confetti.style.animationDuration = (Math.random() * 2 + 3) + 's'; + + this.confettiContainer.appendChild(confetti); + + // Remove confetti after animation + setTimeout(() => { + if (confetti.parentNode) { + confetti.parentNode.removeChild(confetti); + } + }, 6000); + }, i * 30); + } + + // Add sparkle effect + this.createSparkles(); + } + + createSparkles() { + for (let i = 0; i < 20; i++) { + setTimeout(() => { + const sparkle = document.createElement('div'); + sparkle.style.position = 'fixed'; + sparkle.style.width = '4px'; + sparkle.style.height = '4px'; + sparkle.style.background = '#fff'; + sparkle.style.borderRadius = '50%'; + sparkle.style.left = Math.random() * 100 + '%'; + sparkle.style.top = Math.random() * 100 + '%'; + sparkle.style.animation = 'sparkle 2s ease-out forwards'; + sparkle.style.zIndex = '1001'; + + document.body.appendChild(sparkle); + + setTimeout(() => { + if (sparkle.parentNode) { + sparkle.parentNode.removeChild(sparkle); + } + }, 2000); + }, i * 100); + } + } +} + +// Initialize game when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + const game = new MathDuelGame(); + + // Add some visual polish + const avatars = document.querySelectorAll('.avatar'); + avatars.forEach(avatar => { + avatar.addEventListener('mouseenter', () => { + avatar.style.transform += ' scale(1.1)'; + }); + + avatar.addEventListener('mouseleave', () => { + avatar.style.transform = avatar.style.transform.replace(' scale(1.1)', ''); + }); + }); + + // Add keyboard shortcuts + document.addEventListener('keydown', (e) => { + if (e.key === ' ' && !game.gameActive) { + e.preventDefault(); + game.startGame(); + } + }); +}); \ No newline at end of file diff --git a/public/CSS_Math_Duel/style.css b/public/CSS_Math_Duel/style.css new file mode 100644 index 00000000..3a455ed2 --- /dev/null +++ b/public/CSS_Math_Duel/style.css @@ -0,0 +1,748 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + color: #333; + overflow-x: hidden; + position: relative; +} + +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%); + pointer-events: none; + z-index: -1; +} + +.game-container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + min-height: 100vh; + display: flex; + flex-direction: column; + position: relative; + z-index: 1; +} + +/* Header Styles */ +.game-header { + text-align: center; + margin-bottom: 30px; + color: white; +} + +.game-header h1 { + font-size: 3.5rem; + font-weight: 800; + margin-bottom: 15px; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); + background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); + background-size: 300% 300%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradientShift 3s ease-in-out infinite; +} + +@keyframes gradientShift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +.game-header p { + font-size: 1.3rem; + opacity: 0.95; + font-weight: 500; + text-shadow: 1px 1px 2px rgba(0,0,0,0.2); + margin-bottom: 20px; +} + +.header-decoration { + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + margin-top: 20px; +} + +.decoration-line { + width: 60px; + height: 3px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); + border-radius: 2px; + animation: decorationPulse 2s ease-in-out infinite; +} + +.decoration-dot { + width: 8px; + height: 8px; + background: rgba(255, 255, 255, 0.9); + border-radius: 50%; + animation: decorationGlow 2s ease-in-out infinite; +} + +@keyframes decorationPulse { + 0%, 100% { opacity: 0.6; transform: scaleX(1); } + 50% { opacity: 1; transform: scaleX(1.2); } +} + +@keyframes decorationGlow { + 0%, 100% { + opacity: 0.8; + transform: scale(1); + box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); + } + 50% { + opacity: 1; + transform: scale(1.3); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); + } +} + +/* Game Controls */ +.game-controls { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + margin-bottom: 30px; + flex-wrap: wrap; +} + +.btn { + padding: 15px 30px; + border: none; + border-radius: 12px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + font-family: 'Inter', sans-serif; + position: relative; + overflow: hidden; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s; +} + +.btn:hover::before { + left: 100%; +} + +.btn-primary { + background: linear-gradient(45deg, #ff6b6b, #ee5a24, #ff8a80); + background-size: 200% 200%; + color: white; + box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4); + animation: gradientMove 3s ease infinite; +} + +.btn-primary:hover { + transform: translateY(-3px) scale(1.05); + box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6); + background-position: right center; +} + +.btn-secondary { + background: linear-gradient(45deg, #74b9ff, #0984e3, #a29bfe); + background-size: 200% 200%; + color: white; + box-shadow: 0 8px 25px rgba(116, 185, 255, 0.4); + animation: gradientMove 3s ease infinite reverse; +} + +.btn-secondary:hover { + transform: translateY(-3px) scale(1.05); + box-shadow: 0 12px 35px rgba(116, 185, 255, 0.6); + background-position: right center; +} + +@keyframes gradientMove { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +.game-status { + background: rgba(255, 255, 255, 0.15); + padding: 12px 25px; + border-radius: 30px; + color: white; + font-weight: 600; + backdrop-filter: blur(15px); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.game-status:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); +} + +/* Race Track Container */ +.race-track-container { + flex: 1; + background: rgba(255, 255, 255, 0.12); + border-radius: 25px; + padding: 35px; + backdrop-filter: blur(20px); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.2); + position: relative; + overflow: hidden; +} + +.race-track-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); +} + +.race-track { + position: relative; + display: flex; + flex-direction: column; + gap: 40px; +} + +.finish-line { + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + font-size: 3.5rem; + z-index: 10; + animation: finishLineGlow 2s ease-in-out infinite; + filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); +} + +@keyframes finishLineGlow { + 0%, 100% { + transform: translateY(-50%) scale(1); + filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); + } + 50% { + transform: translateY(-50%) scale(1.2); + filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)); + } +} + +/* Player Sections */ +.player-section { + display: grid; + grid-template-columns: 200px 1fr 300px; + gap: 25px; + align-items: center; + background: rgba(255, 255, 255, 0.95); + border-radius: 20px; + padding: 25px; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.1), + 0 2px 8px rgba(0, 0, 0, 0.05); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + border: 1px solid rgba(255, 255, 255, 0.3); + position: relative; + overflow: hidden; +} + +.player-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); + background-size: 200% 200%; + animation: gradientMove 3s ease infinite; +} + +.player-section:hover { + transform: translateY(-4px) scale(1.02); + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.15), + 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.player-info h3 { + font-size: 1.4rem; + font-weight: 700; + margin-bottom: 12px; + color: #2d3436; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); + position: relative; +} + +.player-info h3::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 30px; + height: 3px; + background: linear-gradient(90deg, #ff6b6b, #4ecdc4); + border-radius: 2px; +} + +.score { + font-size: 1.2rem; + font-weight: 700; + color: #0984e3; + background: linear-gradient(45deg, #0984e3, #00b894); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-shadow: none; +} + +/* Player Track */ +.player-track { + position: relative; + height: 70px; + background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%); + border-radius: 35px; + overflow: hidden; + box-shadow: + inset 0 2px 10px rgba(0, 0, 0, 0.1), + 0 4px 15px rgba(0, 0, 0, 0.1); + border: 2px solid rgba(255, 255, 255, 0.8); + position: relative; +} + +.player-track::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, + transparent 0%, + rgba(255, 255, 255, 0.3) 50%, + transparent 100%); + animation: shimmer 2s ease-in-out infinite; +} + +@keyframes shimmer { + 0%, 100% { transform: translateX(-100%); } + 50% { transform: translateX(100%); } +} + +.track-progress { + position: absolute; + top: 0; + left: 0; + height: 100%; + background: linear-gradient(90deg, #00b894, #00cec9, #00d2a7); + background-size: 200% 200%; + border-radius: 35px; + transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); + width: 0%; + animation: gradientMove 2s ease infinite; + box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.avatar { + position: absolute; + top: 50%; + left: 25px; + transform: translateY(-50%); + font-size: 2.5rem; + z-index: 5; + transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); + filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4)); + animation: avatarFloat 3s ease-in-out infinite; +} + +@keyframes avatarFloat { + 0%, 100% { transform: translateY(-50%) translateY(0px); } + 50% { transform: translateY(-50%) translateY(-5px); } +} + +.avatar.winner { + animation: winnerCelebration 1s ease-in-out; + filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); +} + +@keyframes winnerCelebration { + 0% { transform: translateY(-50%) scale(1) rotate(0deg); } + 25% { transform: translateY(-50%) scale(1.3) rotate(-10deg); } + 50% { transform: translateY(-50%) scale(1.4) rotate(10deg); } + 75% { transform: translateY(-50%) scale(1.3) rotate(-5deg); } + 100% { transform: translateY(-50%) scale(1.2) rotate(0deg); } +} + +/* Question Section */ +.question-section { + display: flex; + flex-direction: column; + gap: 10px; +} + +.question { + font-size: 2.2rem; + font-weight: 800; + text-align: center; + color: white; + background: linear-gradient(45deg, #ff7675, #fd79a8, #fdcb6e); + background-size: 200% 200%; + padding: 20px; + border-radius: 15px; + box-shadow: + 0 8px 25px rgba(255, 118, 117, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3); + animation: gradientMove 3s ease infinite; + position: relative; + overflow: hidden; + border: 2px solid rgba(255, 255, 255, 0.3); +} + +.question::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + animation: questionShimmer 3s ease-in-out infinite; +} + +@keyframes questionShimmer { + 0%, 100% { left: -100%; } + 50% { left: 100%; } +} + +input[type="number"] { + padding: 15px 20px; + border: 2px solid #e9ecef; + border-radius: 12px; + font-size: 1.2rem; + font-weight: 600; + text-align: center; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + font-family: 'Inter', sans-serif; + background: rgba(255, 255, 255, 0.9); + box-shadow: + 0 4px 15px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + position: relative; +} + +input[type="number"]:focus { + outline: none; + border-color: #0984e3; + box-shadow: + 0 0 0 4px rgba(9, 132, 227, 0.15), + 0 8px 25px rgba(9, 132, 227, 0.2); + transform: translateY(-2px); + background: rgba(255, 255, 255, 1); +} + +input[type="number"]:disabled { + background-color: #f8f9fa; + color: #6c757d; + cursor: not-allowed; + opacity: 0.7; + transform: none; +} + +input[type="number"]::placeholder { + color: #adb5bd; + font-weight: 500; +} + +.feedback { + text-align: center; + font-weight: 700; + font-size: 1.1rem; + min-height: 25px; + padding: 8px 15px; + border-radius: 8px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.feedback.correct { + color: #00b894; + background: rgba(0, 184, 148, 0.1); + border: 1px solid rgba(0, 184, 148, 0.3); + animation: feedbackSlideIn 0.4s ease; + box-shadow: 0 4px 15px rgba(0, 184, 148, 0.2); +} + +.feedback.incorrect { + color: #d63031; + background: rgba(214, 48, 49, 0.1); + border: 1px solid rgba(214, 48, 49, 0.3); + animation: feedbackSlideIn 0.4s ease; + box-shadow: 0 4px 15px rgba(214, 48, 49, 0.2); +} + +@keyframes feedbackSlideIn { + from { + opacity: 0; + transform: translateY(-10px) scale(0.9); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Winner Modal */ +.winner-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.85); + display: none; + justify-content: center; + align-items: center; + z-index: 1000; + backdrop-filter: blur(10px); +} + +.modal-content { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9)); + padding: 50px; + border-radius: 25px; + text-align: center; + box-shadow: + 0 20px 60px rgba(0, 0, 0, 0.3), + 0 8px 32px rgba(0, 0, 0, 0.1); + animation: modalSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); + border: 1px solid rgba(255, 255, 255, 0.3); + position: relative; + overflow: hidden; + max-width: 500px; + width: 90%; +} + +.modal-content::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); + background-size: 200% 200%; + animation: gradientMove 3s ease infinite; +} + +@keyframes modalSlideIn { + from { + opacity: 0; + transform: translateY(-50px) scale(0.9); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.modal-content h2 { + font-size: 2.8rem; + margin-bottom: 25px; + color: #2d3436; + background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1); + background-size: 200% 200%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradientShift 3s ease-in-out infinite; + font-weight: 800; +} + +.modal-content p { + font-size: 1.3rem; + margin-bottom: 35px; + color: #636e72; + font-weight: 500; + line-height: 1.6; +} + +/* Confetti Animation */ +.confetti-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 999; +} + +.confetti { + position: absolute; + width: 12px; + height: 12px; + background: #ff6b6b; + animation: confettiFall 4s linear forwards; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.confetti:nth-child(odd) { + border-radius: 50%; +} + +.confetti:nth-child(3n) { + width: 8px; + height: 8px; +} + +.confetti:nth-child(4n) { + width: 15px; + height: 15px; + border-radius: 0; +} + +@keyframes confettiFall { + 0% { + transform: translateY(-100vh) rotate(0deg); + opacity: 1; + } + 100% { + transform: translateY(100vh) rotate(720deg); + opacity: 0; + } +} + +@keyframes sparkle { + 0% { + transform: scale(0) rotate(0deg); + opacity: 1; + } + 50% { + transform: scale(1) rotate(180deg); + opacity: 1; + } + 100% { + transform: scale(0) rotate(360deg); + opacity: 0; + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .game-container { + padding: 10px; + } + + .game-header h1 { + font-size: 2rem; + } + + .player-section { + grid-template-columns: 1fr; + gap: 15px; + } + + .player-info { + text-align: center; + } + + .question { + font-size: 1.5rem; + padding: 10px; + } + + .game-controls { + flex-direction: column; + gap: 15px; + } + + .race-track-container { + padding: 20px; + } +} + +@media (max-width: 480px) { + .game-header h1 { + font-size: 1.5rem; + } + + .question { + font-size: 1.2rem; + } + + .avatar { + font-size: 1.5rem; + } + + .modal-content { + padding: 20px; + margin: 20px; + } + + .modal-content h2 { + font-size: 2rem; + } +} + +/* Game States */ +.game-active .player-section { + border: 2px solid transparent; +} + +.game-active .player-section.active { + border-color: #00b894; + box-shadow: 0 0 20px rgba(0, 184, 148, 0.3); +} + +/* 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); } +} \ No newline at end of file