v2: добавил 4 новые игры + больше контента

index.html

@@ -37,6 +37,26 @@
           <span class="card-title">Составь историю</span>
           <span class="card-desc">Собираем рассказ из картинок</span>
         </button>
+        <button class="game-card" data-game="find">
+          <span class="card-icon">🔍</span>
+          <span class="card-title">Найди лишнее</span>
+          <span class="card-desc">Ищем предмет, который не подходит</span>
+        </button>
+        <button class="game-card" data-game="match">
+          <span class="card-icon">🎯</span>
+          <span class="card-title">Найди пару</span>
+          <span class="card-desc">Игра на память и внимание</span>
+        </button>
+        <button class="game-card" data-game="firstletter">
+          <span class="card-icon">🔤</span>
+          <span class="card-title">Первая буква</span>
+          <span class="card-desc">Учим первые буквы слов</span>
+        </button>
+        <button class="game-card" data-game="syllables">
+          <span class="card-icon">📝</span>
+          <span class="card-title">Слоги</span>
+          <span class="card-desc">Составляем слова из слогов</span>
+        </button>
       </div>
     </section>
 
@@ -120,6 +140,64 @@
       </div>
       <div class="feedback" id="story-feedback"></div>
     </section>
+
+    <!-- Игра 5: Найди лишнее -->
+    <section id="game-find" class="game-section hidden">
+      <button class="back-btn" onclick="showMenu()">← Назад в меню</button>
+      <h2>Найди лишнее</h2>
+      <p class="instruction">Какой предмет здесь лишний? Нажми на него!</p>
+      <div class="find-container">
+        <div class="find-items" id="find-items"></div>
+      </div>
+      <div class="feedback" id="find-feedback"></div>
+      <button class="control-btn primary hidden" id="next-find-btn" onclick="nextFindQuestion()">Следующее задание →</button>
+    </section>
+
+    <!-- Игра 6: Найди пару -->
+    <section id="game-match" class="game-section hidden">
+      <button class="back-btn" onclick="showMenu()">← Назад в меню</button>
+      <h2>Найди пару</h2>
+      <p class="instruction">Найди все пары одинаковых картинок!</p>
+      <div class="match-stats">
+        <span>Ходы: <b id="match-moves">0</b></span>
+        <span>Пары: <b id="match-pairs">0/6</b></span>
+      </div>
+      <div class="match-grid" id="match-grid"></div>
+      <div class="controls">
+        <button class="control-btn" onclick="initMatch()">🔄 Начать заново</button>
+      </div>
+      <div class="feedback" id="match-feedback"></div>
+    </section>
+
+    <!-- Игра 7: Первая буква -->
+    <section id="game-firstletter" class="game-section hidden">
+      <button class="back-btn" onclick="showMenu()">← Назад в меню</button>
+      <h2>Первая буква</h2>
+      <p class="instruction">Какая первая буква у этого слова?</p>
+      <div class="firstletter-container">
+        <div class="word-display" id="word-display"></div>
+        <div class="letter-options" id="letter-options"></div>
+      </div>
+      <div class="feedback" id="firstletter-feedback"></div>
+      <button class="control-btn primary hidden" id="next-firstletter-btn" onclick="nextFirstLetterQuestion()">Следующее слово →</button>
+    </section>
+
+    <!-- Игра 8: Слоги -->
+    <section id="game-syllables" class="game-section hidden">
+      <button class="back-btn" onclick="showMenu()">← Назад в меню</button>
+      <h2>Слоги</h2>
+      <p class="instruction">Собери слово из слогов!</p>
+      <div class="syllable-container">
+        <div class="syllable-target" id="syllable-target"></div>
+        <div class="syllable-pieces" id="syllable-pieces"></div>
+        <div class="syllable-slots" id="syllable-slots"></div>
+      </div>
+      <div class="controls">
+        <button class="control-btn" onclick="resetSyllable()">🔄 Начать заново</button>
+        <button class="control-btn primary" onclick="checkSyllable()">✓ Проверить</button>
+      </div>
+      <div class="feedback" id="syllable-feedback"></div>
+    </section>
   </main>
 
   <footer class="footer">

script.js

@@ -8,7 +8,15 @@ const cardData = {
     { emoji: '🐸', word: 'Лягушка' },
     { emoji: '🐵', word: 'Обезьяна' },
     { emoji: '🦁', word: 'Лев' },
-    { emoji: '🐘', word: 'Слон' }
+    { emoji: '🐘', word: 'Слон' },
+    { emoji: '🐰', word: 'Заяц' },
+    { emoji: '🦊', word: 'Лиса' },
+    { emoji: '🐻', word: 'Медведь' },
+    { emoji: '🐼', word: 'Панда' },
+    { emoji: '🐨', word: 'Коала' },
+    { emoji: '🐯', word: 'Тигр' },
+    { emoji: '🦓', word: 'Зебра' },
+    { emoji: '🦒', word: 'Жираф' }
   ],
   fruits: [
     { emoji: '🍎', word: 'Яблоко' },
@@ -18,7 +26,13 @@ const cardData = {
     { emoji: '🍓', word: 'Клубника' },
     { emoji: '🍉', word: 'Арбуз' },
     { emoji: '🍑', word: 'Персик' },
-    { emoji: '🍒', word: 'Вишня' }
+    { emoji: '🍒', word: 'Вишня' },
+    { emoji: '🍐', word: 'Груша' },
+    { emoji: '🍍', word: 'Ананас' },
+    { emoji: '🥝', word: 'Киви' },
+    { emoji: '🍋', word: 'Лимон' },
+    { emoji: '🥭', word: 'Манго' },
+    { emoji: '🍈', word: 'Дыня' }
   ],
   transport: [
     { emoji: '🚗', word: 'Машина' },
@@ -28,7 +42,13 @@ const cardData = {
     { emoji: '🚂', word: 'Поезд' },
     { emoji: '✈️', word: 'Самолёт' },
     { emoji: '🚁', word: 'Вертолёт' },
-    { emoji: '🚢', word: 'Корабль' }
+    { emoji: '🚢', word: 'Корабль' },
+    { emoji: '🚲', word: 'Велосипед' },
+    { emoji: '🛴', word: 'Самокат' },
+    { emoji: '🚑', word: 'Скорая' },
+    { emoji: '🚒', word: 'Пожарная' },
+    { emoji: '🚓', word: 'Полиция' },
+    { emoji: '🚀', word: 'Ракета' }
   ],
   colors: [
     { emoji: '🔴', word: 'Красный' },
@@ -38,11 +58,37 @@ const cardData = {
     { emoji: '🟠', word: 'Оранжевый' },
     { emoji: '🟣', word: 'Фиолетовый' },
     { emoji: '⚫', word: 'Чёрный' },
-    { emoji: '⚪', word: 'Белый' }
+    { emoji: '⚪', word: 'Белый' },
+    { emoji: '🟤', word: 'Коричневый' },
+    { emoji: '🩷', word: 'Розовый' },
+    { emoji: '🩵', word: 'Голубой' },
+    { emoji: '🩶', word: 'Серый' }
+  ],
+  vegetables: [
+    { emoji: '🥕', word: 'Морковь' },
+    { emoji: '🥔', word: 'Картофель' },
+    { emoji: '🥒', word: 'Огурец' },
+    { emoji: '🍅', word: 'Помидор' },
+    { emoji: '🥬', word: 'Капуста' },
+    { emoji: '🍆', word: 'Баклажан' },
+    { emoji: '🫑', word: 'Перец' },
+    { emoji: '🧅', word: 'Лук' },
+    { emoji: '🧄', word: 'Чеснок' },
+    { emoji: '🥦', word: 'Брокколи' }
+  ],
+  family: [
+    { emoji: '👨', word: 'Папа' },
+    { emoji: '👩', word: 'Мама' },
+    { emoji: '👦', word: 'Сын' },
+    { emoji: '👧', word: 'Дочка' },
+    { emoji: '👴', word: 'Дедушка' },
+    { emoji: '👵', word: 'Бабушка' },
+    { emoji: '👶', word: 'Малыш' },
+    { emoji: '🐕', word: 'Щенок' }
   ]
 };
 
-const sounds = ['А', 'О', 'У', 'Ы', 'Э', 'М', 'П', 'Б', 'Т', 'Д'];
+const sounds = ['А', 'О', 'У', 'Ы', 'Э', 'М', 'П', 'Б', 'Т', 'Д', 'К', 'Г', 'Х', 'В', 'Ф', 'С', 'З', 'Ш', 'Ж', 'Ч', 'Щ', 'Л', 'Р', 'Н', 'Й', 'Ц'];
 
 const animalSounds = [
   { name: 'Кот', emoji: '🐱', sound: 'Мяу-мяу!' },
@@ -50,7 +96,13 @@ const animalSounds = [
   { name: 'Корова', emoji: '🐮', sound: 'Му-у-у!' },
   { name: 'Лягушка', emoji: '🐸', sound: 'Ква-ква!' },
   { name: 'Овца', emoji: '🐑', sound: 'Бее-ее!' },
-  { name: 'Петух', emoji: '🐓', sound: 'Ку-ка-ре-ку!' }
+  { name: 'Петух', emoji: '🐓', sound: 'Ку-ка-ре-ку!' },
+  { name: 'Свинья', emoji: '🐷', sound: 'Хрю-хрю!' },
+  { name: 'Утка', emoji: '🦆', sound: 'Кря-кря!' },
+  { name: 'Ворона', emoji: '🐦', sound: 'Кар-кар!' },
+  { name: 'Комар', emoji: '🦟', sound: 'З-з-з!' },
+  { name: 'Пчела', emoji: '🐝', sound: 'Ж-ж-ж!' },
+  { name: 'Змея', emoji: '🐍', sound: 'Ш-ш-ш!' }
 ];
 
 const stories = [
@@ -68,6 +120,31 @@ const stories = [
     name: 'День',
     correctOrder: ['🌅', '☀️', '🌙'],
     pieces: ['🌙', '🌅', '☀️']
+  },
+  {
+    name: 'Дождик',
+    correctOrder: ['☁️', '🌧️', '🌈'],
+    pieces: ['🌈', '☁️', '🌧️']
+  },
+  {
+    name: 'Дерево',
+    correctOrder: ['🌰', '🌱', '🌳'],
+    pieces: ['🌳', '🌰', '🌱']
+  },
+  {
+    name: 'Зима',
+    correctOrder: ['☁️', '❄️', '⛄'],
+    pieces: ['⛄', '☁️', '❄️']
+  },
+  {
+    name: 'Бабочка',
+    correctOrder: ['🥚', '🐛', '🦋'],
+    pieces: ['🦋', '🥚', '🐛']
+  },
+  {
+    name: 'Пирог',
+    correctOrder: ['🥚', '🥛', '🥧'],
+    pieces: ['🥧', '🥛', '🥚']
   }
 ];
 
@@ -79,6 +156,14 @@ let currentQuestion = null;
 let currentStory = null;
 let selectedPiece = null;
 let storyState = [];
+let currentFindItem = null;
+let matchCards = [];
+let matchFlipped = [];
+let matchPairs = 0;
+let matchMoves = 0;
+let currentFirstLetter = null;
+let currentSyllable = null;
+let syllableState = [];
 
 // Навигация
 function showMenu() {
@@ -99,6 +184,10 @@ function showGame(gameId) {
   if (gameId === 'sounds') initSounds();
   if (gameId === 'animals') initAnimalQuiz();
   if (gameId === 'story') initStory();
+  if (gameId === 'find') initFind();
+  if (gameId === 'match') initMatch();
+  if (gameId === 'firstletter') initFirstLetter();
+  if (gameId === 'syllables') initSyllable();
 }
 
 // Клик по карточкам игр
@@ -334,6 +423,337 @@ function checkStory() {
   }
 }
 
+// ===== ИГРА 5: Найди лишнее =====
+const findCategories = [
+  { items: ['🍎', '🍌', '🍇', '🚗'], answer: 3, name: 'Транспорт среди фруктов' },
+  { items: ['🐱', '🐶', '🐮', '🍎'], answer: 3, name: 'Фрукт среди животных' },
+  { items: ['🔴', '🔵', '🟢', '🐱'], answer: 3, name: 'Животное среди цветов' },
+  { items: ['🚗', '🚌', '🚂', '🍌'], answer: 3, name: 'Фрукт среди транспорта' },
+  { items: ['👨', '👩', '👦', '🍎'], answer: 3, name: 'Фрукт среди людей' },
+  { items: ['🥕', '🥔', '🥒', '🍌'], answer: 3, name: 'Фрукт среди овощей' },
+  { items: ['✈️', '🚁', '🚂', '🐶'], answer: 3, name: 'Животное среди транспорта' },
+  { items: ['🌅', '☀️', '🌙', '🍎'], answer: 3, name: 'Фрукт про времена суток' }
+];
+
+function initFind() {
+  nextFindQuestion();
+}
+
+function nextFindQuestion() {
+  currentFindItem = findCategories[Math.floor(Math.random() * findCategories.length)];
+  document.getElementById('find-feedback').textContent = '';
+  document.getElementById('find-feedback').className = 'feedback';
+  document.getElementById('next-find-btn').classList.add('hidden');
+  
+  const container = document.getElementById('find-items');
+  container.innerHTML = '';
+  
+  currentFindItem.items.forEach((emoji, index) => {
+    const item = document.createElement('div');
+    item.className = 'find-item';
+    item.innerHTML = '<span class="emoji">' + emoji + '</span><span class="label">Предмет ' + (index + 1) + '</span>';
+    item.onclick = () => checkFind(index, item);
+    container.appendChild(item);
+  });
+}
+
+function checkFind(selectedIndex, item) {
+  if (selectedIndex === currentFindItem.answer) {
+    item.classList.add('correct');
+    document.getElementById('find-feedback').textContent = '🎉 Правильно! Молодец!';
+    document.getElementById('find-feedback').className = 'feedback success';
+    speak('Правильно! Это лишнее!');
+    document.getElementById('next-find-btn').classList.remove('hidden');
+    
+    document.querySelectorAll('.find-item').forEach(i => i.style.pointerEvents = 'none');
+  } else {
+    item.classList.add('wrong');
+    document.getElementById('find-feedback').textContent = 'Подумай ещё!';
+    document.getElementById('find-feedback').className = 'feedback error';
+    speak('Попробуй ещё раз');
+    
+    setTimeout(() => {
+      item.classList.remove('wrong');
+      document.getElementById('find-feedback').textContent = '';
+    }, 1000);
+  }
+}
+
+// ===== ИГРА 6: Найди пару =====
+const matchEmojis = ['🐱', '🐶', '🐮', '🐸', '🍎', '🍌', '🚗', '🚌', '🔴', '🔵', '🟢', '🟡'];
+
+function initMatch() {
+  matchFlipped = [];
+  matchPairs = 0;
+  matchMoves = 0;
+  document.getElementById('match-moves').textContent = '0';
+  document.getElementById('match-pairs').textContent = '0/6';
+  document.getElementById('match-feedback').textContent = '';
+  document.getElementById('match-feedback').className = 'feedback';
+  
+  const selected = matchEmojis.slice(0, 6);
+  const cards = [...selected, ...selected];
+  
+  cards.sort(() => Math.random() - 0.5);
+  
+  const grid = document.getElementById('match-grid');
+  grid.innerHTML = '';
+  
+  cards.forEach((emoji, index) => {
+    const card = document.createElement('div');
+    card.className = 'match-card';
+    card.dataset.emoji = emoji;
+    card.dataset.index = index;
+    card.innerHTML = '<span style="visibility: hidden;">' + emoji + '</span>';
+    card.onclick = () => flipCard(card);
+    grid.appendChild(card);
+  });
+}
+
+function flipCard(card) {
+  if (matchFlipped.length >= 2 || card.classList.contains('flipped') || card.classList.contains('matched')) {
+    return;
+  }
+  
+  card.classList.add('flipped');
+  card.querySelector('span').style.visibility = 'visible';
+  matchFlipped.push(card);
+  
+  if (matchFlipped.length === 2) {
+    matchMoves++;
+    document.getElementById('match-moves').textContent = matchMoves;
+    
+    const [card1, card2] = matchFlipped;
+    
+    if (card1.dataset.emoji === card2.dataset.emoji) {
+      card1.classList.add('matched');
+      card2.classList.add('matched');
+      matchPairs++;
+      document.getElementById('match-pairs').textContent = matchPairs + '/6';
+      matchFlipped = [];
+      
+      if (matchPairs === 6) {
+        document.getElementById('match-feedback').textContent = '🌟 Отлично! Все пары найдены!';
+        document.getElementById('match-feedback').className = 'feedback success';
+        speak('Молодец! Все пары найдены!');
+      }
+    } else {
+      setTimeout(() => {
+        card1.classList.remove('flipped');
+        card2.classList.remove('flipped');
+        card1.querySelector('span').style.visibility = 'hidden';
+        card2.querySelector('span').style.visibility = 'hidden';
+        matchFlipped = [];
+      }, 1000);
+    }
+  }
+}
+
+// ===== ИГРА 7: Первая буква =====
+const firstLetterWords = [
+  { word: 'Аист', emoji: '🦢', letter: 'А' },
+  { word: 'Банан', emoji: '🍌', letter: 'Б' },
+  { word: 'Виноград', emoji: '🍇', letter: 'В' },
+  { word: 'Груша', emoji: '🍐', letter: 'Г' },
+  { word: 'Дом', emoji: '🏠', letter: 'Д' },
+  { word: 'Енот', emoji: '🦝', letter: 'Е' },
+  { word: 'Жираф', emoji: '🦒', letter: 'Ж' },
+  { word: 'Зонт', emoji: '☂️', letter: 'З' },
+  { word: 'Игла', emoji: '🪡', letter: 'И' },
+  { word: 'Йогурт', emoji: '🥛', letter: 'Й' },
+  { word: 'Кот', emoji: '🐱', letter: 'К' },
+  { word: 'Лев', emoji: '🦁', letter: 'Л' },
+  { word: 'Машина', emoji: '🚗', letter: 'М' },
+  { word: 'Ножницы', emoji: '✂️', letter: 'Н' },
+  { word: 'Облако', emoji: '☁️', letter: 'О' },
+  { word: 'Поезд', emoji: '🚂', letter: 'П' },
+  { word: 'Рыба', emoji: '🐟', letter: 'Р' },
+  { word: 'Солнце', emoji: '☀️', letter: 'С' },
+  { word: 'Торт', emoji: '🎂', letter: 'Т' },
+  { word: 'Утка', emoji: '🦆', letter: 'У' },
+  { word: 'Флаг', emoji: '🚩', letter: 'Ф' },
+  { word: 'Хлеб', emoji: '🍞', letter: 'Х' },
+  { word: 'Цветок', emoji: '🌸', letter: 'Ц' },
+  { word: 'Часы', emoji: '⏰', letter: 'Ч' },
+  { word: 'Шар', emoji: '🎈', letter: 'Ш' },
+  { word: 'Щётка', emoji: '🪥', letter: 'Щ' },
+  { word: 'Экскаватор', emoji: '🚜', letter: 'Э' },
+  { word: 'Юла', emoji: '🌀', letter: 'Ю' },
+  { word: 'Яблоко', emoji: '🍎', letter: 'Я' }
+];
+
+function initFirstLetter() {
+  nextFirstLetterQuestion();
+}
+
+function nextFirstLetterQuestion() {
+  currentFirstLetter = firstLetterWords[Math.floor(Math.random() * firstLetterWords.length)];
+  document.getElementById('firstletter-feedback').textContent = '';
+  document.getElementById('firstletter-feedback').className = 'feedback';
+  document.getElementById('next-firstletter-btn').classList.add('hidden');
+  
+  document.getElementById('word-display').innerHTML = 
+    '<span class="emoji">' + currentFirstLetter.emoji + '</span><span>' + currentFirstLetter.word + '</span>';
+  
+  const letters = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ж', 'З', 'И', 'Й', 'К', 'Л', 'М', 'Н', 'О', 'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я'];
+  const options = [currentFirstLetter.letter];
+  
+  while (options.length < 6) {
+    const random = letters[Math.floor(Math.random() * letters.length)];
+    if (!options.includes(random)) {
+      options.push(random);
+    }
+  }
+  
+  options.sort(() => Math.random() - 0.5);
+  
+  const container = document.getElementById('letter-options');
+  container.innerHTML = '';
+  
+  options.forEach(letter => {
+    const btn = document.createElement('button');
+    btn.className = 'letter-option';
+    btn.textContent = letter;
+    btn.onclick = () => checkFirstLetter(letter, btn);
+    container.appendChild(btn);
+  });
+}
+
+function checkFirstLetter(selected, button) {
+  const buttons = document.querySelectorAll('.letter-option');
+  buttons.forEach(btn => btn.disabled = true);
+  
+  if (selected === currentFirstLetter.letter) {
+    button.classList.add('correct');
+    document.getElementById('firstletter-feedback').textContent = '🎉 Правильно! Это буква ' + selected;
+    document.getElementById('firstletter-feedback').className = 'feedback success';
+    speak('Правильно! Первая буква ' + selected);
+    document.getElementById('next-firstletter-btn').classList.remove('hidden');
+  } else {
+    button.classList.add('wrong');
+    document.getElementById('firstletter-feedback').textContent = 'Попробуй ещё раз!';
+    document.getElementById('firstletter-feedback').className = 'feedback error';
+    speak('Попробуй ещё раз');
+    
+    setTimeout(() => {
+      buttons.forEach(btn => {
+        btn.disabled = false;
+        btn.classList.remove('wrong');
+      });
+      document.getElementById('firstletter-feedback').textContent = '';
+    }, 1500);
+  }
+}
+
+// ===== ИГРА 8: Слоги =====
+const syllableWords = [
+  { word: 'МА-ШИ-НА', syllables: ['МА', 'ШИ', 'НА'], scrambled: ['НА', 'МА', 'ШИ'] },
+  { word: 'МО-ЛО-КО', syllables: ['МО', 'ЛО', 'КО'], scrambled: ['КО', 'МО', 'ЛО'] },
+  { word: 'СО-БА-КА', syllables: ['СО', 'БА', 'КА'], scrambled: ['КА', 'СО', 'БА'] },
+  { word: 'ЯБ-ЛО-КО', syllables: ['ЯБ', 'ЛО', 'КО'], scrambled: ['КО', 'ЯБ', 'ЛО'] },
+  { word: 'ДЕ-РЕ-ВО', syllables: ['ДЕ', 'РЕ', 'ВО'], scrambled: ['ВО', 'ДЕ', 'РЕ'] },
+  { word: 'МО-РО-ЖЕ-НОЕ', syllables: ['МО', 'РО', 'ЖЕ', 'НОЕ'], scrambled: ['НОЕ', 'МО', 'ЖЕ', 'РО'] },
+  { word: 'ВЕ-ЛО-СИ-ПЕД', syllables: ['ВЕ', 'ЛО', 'СИ', 'ПЕД'], scrambled: ['ПЕД', 'ВЕ', 'СИ', 'ЛО'] },
+  { word: 'ТЕ-ЛЕ-ФОН', syllables: ['ТЕ', 'ЛЕ', 'ФОН'], scrambled: ['ФОН', 'ТЕ', 'ЛЕ'] },
+  { word: 'КА-РАН-ДАШ', syllables: ['КА', 'РАН', 'ДАШ'], scrambled: ['ДАШ', 'КА', 'РАН'] },
+  { word: 'МО-ЛО-ТOK', syllables: ['МО', 'ЛО', 'ТОК'], scrambled: ['ТОК', 'МО', 'ЛО'] }
+];
+
+function initSyllable() {
+  resetSyllable();
+}
+
+function resetSyllable() {
+  currentSyllable = syllableWords[Math.floor(Math.random() * syllableWords.length)];
+  syllableState = [];
+  document.getElementById('syllable-feedback').textContent = '';
+  document.getElementById('syllable-feedback').className = 'feedback';
+  
+  document.getElementById('syllable-target').textContent = currentSyllable.word;
+  
+  const piecesContainer = document.getElementById('syllable-pieces');
+  piecesContainer.innerHTML = '';
+  
+  currentSyllable.scrambled.forEach((syllable, index) => {
+    const piece = document.createElement('div');
+    piece.className = 'syllable-piece';
+    piece.textContent = syllable;
+    piece.dataset.index = index;
+    piece.onclick = () => selectSyllablePiece(index, piece);
+    piecesContainer.appendChild(piece);
+  });
+  
+  const slotsContainer = document.getElementById('syllable-slots');
+  slotsContainer.innerHTML = '';
+  
+  for (let i = 0; i < currentSyllable.syllables.length; i++) {
+    const slot = document.createElement('div');
+    slot.className = 'syllable-slot';
+    slot.dataset.slot = i;
+    slot.textContent = '...';
+    slot.onclick = () => placeSyllableInSlot(i);
+    slotsContainer.appendChild(slot);
+  }
+}
+
+let selectedSyllablePiece = null;
+
+function selectSyllablePiece(index, element) {
+  document.querySelectorAll('.syllable-piece').forEach(p => p.classList.remove('selected'));
+  element.classList.add('selected');
+  selectedSyllablePiece = { index, element, value: currentSyllable.scrambled[index] };
+}
+
+function placeSyllableInSlot(slotIndex) {
+  if (!selectedSyllablePiece) return;
+  
+  const slots = document.querySelectorAll('.syllable-slot');
+  const slot = slots[slotIndex];
+  
+  if (slot.classList.contains('filled')) {
+    const oldSyllable = slot.textContent;
+    const piecesContainer = document.getElementById('syllable-pieces');
+    const oldPiece = document.createElement('div');
+    oldPiece.className = 'syllable-piece';
+    oldPiece.textContent = oldSyllable;
+    oldPiece.onclick = () => selectSyllablePiece(-1, oldPiece);
+    piecesContainer.appendChild(oldPiece);
+  }
+  
+  slot.textContent = selectedSyllablePiece.value;
+  slot.classList.add('filled');
+  syllableState[slotIndex] = selectedSyllablePiece.value;
+  
+  if (selectedSyllablePiece.element.parentNode.id === 'syllable-pieces') {
+    selectedSyllablePiece.element.remove();
+  }
+  
+  selectedSyllablePiece = null;
+  document.querySelectorAll('.syllable-piece').forEach(p => p.classList.remove('selected'));
+}
+
+function checkSyllable() {
+  const filledSlots = syllableState.filter(s => s !== undefined);
+  if (filledSlots.length < currentSyllable.syllables.length) {
+    document.getElementById('syllable-feedback').textContent = 'Заполни все ячейки!';
+    document.getElementById('syllable-feedback').className = 'feedback error';
+    speak('Заполни все ячейки');
+    return;
+  }
+  
+  const isCorrect = JSON.stringify(syllableState) === JSON.stringify(currentSyllable.syllables);
+  
+  if (isCorrect) {
+    document.getElementById('syllable-feedback').textContent = '🌟 Отлично! Слово собрано правильно!';
+    document.getElementById('syllable-feedback').className = 'feedback success';
+    speak('Молодец! Всё правильно!');
+  } else {
+    document.getElementById('syllable-feedback').textContent = 'Попробуй ещё раз!';
+    document.getElementById('syllable-feedback').className = 'feedback error';
+    speak('Попробуй ещё раз');
+  }
+}
+
 // ===== Утилита: Синтез речи =====
 function speak(text) {
   if ('speechSynthesis' in window) {

style.css

@@ -444,6 +444,247 @@ body {
   box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
 }
 
+/* Найди лишнее */
+.find-container {
+  padding: 20px;
+}
+
+.find-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.find-item {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  border-radius: 20px;
+  padding: 30px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+}
+
+.find-item:hover {
+  transform: scale(1.1);
+  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
+}
+
+.find-item.wrong {
+  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
+  animation: shake 0.5s ease;
+}
+
+.find-item.correct {
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  animation: celebrate 0.5s ease;
+}
+
+.find-item .emoji {
+  font-size: clamp(50px, 10vw, 80px);
+  display: block;
+  margin-bottom: 10px;
+}
+
+.find-item .label {
+  font-size: clamp(14px, 3vw, 18px);
+  color: #fff;
+  font-weight: bold;
+}
+
+/* Найди пару */
+.match-stats {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-bottom: 20px;
+  font-size: clamp(16px, 3vw, 20px);
+  color: #667eea;
+}
+
+.match-stats b {
+  font-size: 1.3em;
+}
+
+.match-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
+  margin-bottom: 20px;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.match-card {
+  aspect-ratio: 1;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 15px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: clamp(30px, 6vw, 50px);
+  transition: all 0.3s ease;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+  transform-style: preserve-3d;
+  position: relative;
+}
+
+.match-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+.match-card.flipped {
+  background: #fff;
+  border: 3px solid #667eea;
+  cursor: default;
+}
+
+.match-card.matched {
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  animation: celebrate 0.5s ease;
+}
+
+/* Первая буква */
+.firstletter-container {
+  padding: 30px;
+  text-align: center;
+}
+
+.word-display {
+  font-size: clamp(40px, 8vw, 72px);
+  font-weight: bold;
+  color: #667eea;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.word-display .emoji {
+  display: block;
+  font-size: clamp(80px, 15vw, 120px);
+  margin-bottom: 20px;
+}
+
+.letter-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+  gap: 15px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.letter-option {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  border: none;
+  border-radius: 15px;
+  padding: 20px;
+  font-size: clamp(24px, 5vw, 36px);
+  font-weight: bold;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+}
+
+.letter-option:hover {
+  transform: scale(1.1);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+.letter-option.correct {
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  animation: celebrate 0.5s ease;
+}
+
+.letter-option.wrong {
+  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
+  animation: shake 0.5s ease;
+}
+
+/* Слоги */
+.syllable-container {
+  padding: 30px;
+  text-align: center;
+}
+
+.syllable-target {
+  font-size: clamp(50px, 10vw, 80px);
+  margin-bottom: 30px;
+}
+
+.syllable-pieces {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 15px;
+}
+
+.syllable-piece {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border-radius: 15px;
+  padding: 15px 25px;
+  font-size: clamp(20px, 4vw, 28px);
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+}
+
+.syllable-piece:hover {
+  transform: scale(1.1);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+}
+
+.syllable-piece.selected {
+  background: #f5576c;
+  transform: scale(1.15);
+  box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
+}
+
+.syllable-slots {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-height: 80px;
+  padding: 20px;
+  background: #f0f4ff;
+  border-radius: 15px;
+  border: 3px dashed #667eea;
+}
+
+.syllable-slot {
+  background: #fff;
+  border: 2px solid #667eea;
+  border-radius: 10px;
+  padding: 15px 25px;
+  font-size: clamp(20px, 4vw, 28px);
+  font-weight: bold;
+  color: #667eea;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.syllable-slot.filled {
+  background: #667eea;
+  color: #fff;
+  border-color: #667eea;
+}
+
+@media (max-width: 600px) {
+  .match-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 .instruction {
   font-size: clamp(16px, 3vw, 20px);
   text-align: center;