.notebook {
position: relative;
width: 90%;
max-width: 600px;
min-height: 400px;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
background-size: 100% 1.2em;
line-height: 1.2em;
text-align: center;
font-family: 'Gochi Hand', cursive;
}

.game-container {
margin: 20px;
}

h1 {
color: #333;
margin-bottom: 30px;
text-decoration: underline;
text-decoration-color: #f1c40f;
}

.question-container {
margin-bottom: 20px;
}

#target-letter {
font-size: 1.5em;
font-weight: bold;
color: #e74c3c;
text-decoration: underline;
}

.timer-container {
width: 100%;
height: 20px;
background-color: #ecf0f1;
border-radius: 10px;
margin: 10px 0;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.timer-bar {
height: 100%;
width: 100%;
background: linear-gradient(to right, #2ecc71, #f1c40f);
transition: width 0.1s linear;
}

.letters-container {
display: flex;
justify-content: space-around;
margin: 30px 0;
flex-wrap: wrap;
gap: 15px;
}

.letter {
font-size: 3em;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(145deg, #3498db, #2980b9);
color: white;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255,255,255,0.3);
}

.letter:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.letter.correct {
background: linear-gradient(145deg, #2ecc71, #27ae60);
animation: bounce 0.5s;
}

.letter.incorrect {
background: linear-gradient(145deg, #e74c3c, #c0392b);
animation: shake 0.5s;
}

.letter.missed {
background: linear-gradient(145deg, #f1c40f, #f39c12);
animation: pulse 0.5s;
}

.progress {
margin-top: 30px;
font-size: 1.2em;
}

.result-container {
text-align: center;
animation: fadeIn 0.5s;
}

#score {
font-size: 2.5em;
color: #e74c3c;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

#play-again {
margin-top: 20px;
padding: 12px 25px;
font-size: 1.2em;
background: linear-gradient(to right, #2ecc71, #27ae60);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-family: 'Gochi Hand', cursive;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#play-again:hover {
transform: scale(1.05);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
background: linear-gradient(to right, #27ae60, #219653);
}

.celebration {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100;
display: none;
}

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}

@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
opacity: 0;
}

document.addEventListener('DOMContentLoaded', function() {
// Game variables
let currentQuestion = 0;
let score = 0;
let timer;
let timeLeft = 10;
const totalQuestions = 10;

// DOM elements
const lettersContainer = document.getElementById('letters-container');
const targetLetterElement = document.getElementById('target-letter');
const questionElement = document.getElementById('question');
const timeLeftElement = document.getElementById('time-left');
const timerBarElement = document.getElementById('timer-bar');
const currentQuestionElement = document.getElementById('current-question');
const resultContainer = document.getElementById('result-container');
const gameContainer = document.querySelector('.game-container');
const scoreElement = document.getElementById('score');
const playAgainButton = document.getElementById('play-again');
const feedbackMessage = document.getElementById('feedback-message');
const celebration = document.getElementById('celebration');

// Letters to use in the game (focusing on commonly confused letters)
const letters = 'ABCDEFGHJKLMNPQRSTUVWXYZ';

// Start the game
startGame();

function startGame() {
currentQuestion = 0;
score = 0;
showQuestion();
}

function showQuestion() {
// Reset timer
timeLeft = 10;
timeLeftElement.textContent = timeLeft;
timerBarElement.style.width = '100%';
timerBarElement.style.background = 'linear-gradient(to right, #2ecc71, #f1c40f)';

// Clear previous timer if exists
if (timer) {
clearInterval(timer);
}

// Update progress
currentQuestionElement.textContent = currentQuestion + 1;

// Generate random letters (ensuring they're different)
const lettersArray = [];
while (lettersArray.length {
const letterElement = document.createElement('div');
letterElement.className = 'letter';
letterElement.textContent = letter;
letterElement.addEventListener('click', () => checkAnswer(letter, targetLetter, letterElement));
lettersContainer.appendChild(letterElement);
});

// Start timer
timer = setInterval(updateTimer, 100);
}

function updateTimer() {
timeLeft -= 0.1;
timeLeftElement.textContent = Math.ceil(timeLeft);
timerBarElement.style.width = `${(timeLeft / 10) * 100}%`;

// Change timer color when time is running out
if (timeLeft < 3) {
timerBarElement.style.background = 'linear-gradient(to right, #f1c40f, #e74c3c)';
}

if (timeLeft {
if (el.textContent === targetLetter) {
el.classList.add('missed');
}
el.style.pointerEvents = 'none';
});

// Move to next question after a delay
setTimeout(nextQuestion, 1500);
}
}

function checkAnswer(selectedLetter, targetLetter, letterElement) {
clearInterval(timer);

// Disable all letters
const letterElements = document.querySelectorAll('.letter');
letterElements.forEach(el => {
el.style.pointerEvents = 'none';
});

// Mark selected letter as correct/incorrect
if (selectedLetter === targetLetter) {
letterElement.classList.add('correct');
score++;

// Small celebration for correct answer
if (score === totalQuestions) {
createConfetti();
}
} else {
letterElement.classList.add('incorrect');

// Highlight the correct answer
letterElements.forEach(el => {
if (el.textContent === targetLetter) {
el.classList.add('missed');
}
});
}

// Move to next question after a delay
setTimeout(nextQuestion, 1500);
}

function nextQuestion() {
currentQuestion++;

if (currentQuestion < totalQuestions) {
showQuestion();
} else {
showResults();
}
}

function showResults() {
gameContainer.style.display = 'none';
resultContainer.style.display = 'block';
scoreElement.textContent = score;

// Add feedback message based on score
if (score === totalQuestions) {
feedbackMessage.innerHTML = 'Perfect! You got them all right! 🎉
You're a letter expert!';
createConfetti();
} else if (score >= totalQuestions * 0.8) {
feedbackMessage.textContent = 'Great job! You almost got them all!';
} else if (score >= totalQuestions * 0.5) {
feedbackMessage.textContent = 'Good effort! Keep practicing!';
} else {
feedbackMessage.textContent = 'Nice try! You'll do better next time!';
}
}

function getRandomLetter() {
return letters[Math.floor(Math.random() * letters.length)];
}

// Play again button
playAgainButton.addEventListener('click', function() {
gameContainer.style.display = 'block';
resultContainer.style.display = 'none';
celebration.style.display = 'none';
celebration.innerHTML = '';
startGame();
});

// Create confetti effect
function createConfetti() {
celebration.style.display = 'block';
const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722'];

for (let i = 0; i 0.5 ? '50%' : '0';
celebration.appendChild(confetti);

const animationDuration = Math.random() * 3 + 2;

confetti.animate([
{ top: '-10px', opacity: 0, transform: 'rotate(0deg)' },
{ opacity: 1 },
{ top: '100vh', opacity: 0, transform: 'rotate(' + Math.random() * 360 + 'deg)' }
], {
duration: animationDuration * 1000,
easing: 'cubic-bezier(0.1, 0.8, 0.9, 1)'
});

setTimeout(() => {
confetti.remove();
}, animationDuration * 1000);
}
}
});

Find the correct letter from 3 options before the time runs out! Answer 10 questions to complete the game.

How to Play:

1. Read the Question: The game will ask you to "Find the letter: [X]" (e.g., "Find the letter: A").
2. Click the Correct Letter: Three letters will appear'click the one that matches the target letter.
3. Timer: You have??10 seconds??per question. The bar turns red when time is running low!
4. Feedback:

   • ??Correct: Letter turns green and bounces.
   • ??Incorrect: Letter turns red and shakes; the correct one highlights in yellow.
   • ??Time's Up: The correct letter pulses in yellow.

5. Results: After 10 questions, see your score and a fun message!

   • Perfect score? Enjoy confetti!??

6. Play Again: Click the button to restart.

Tips:

• Be quick but accurate!
• Watch the timer bar'it changes color as time runs out.
• Look carefully'letters are randomized each round.

Have fun learning letters!