/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
body {
    margin: 0;                  /* Убираем внешние отступы */
    padding: 0;                 /* Убираем внутренние отступы по умолчанию */
    background-color: #99dfff;  /* Основной светло-голубой фон страницы */
    font-family: 'Comic Sans MS', sans-serif; /* Детский шрифт, используемый во всех уроках */
}

.content-wrapper { 
    padding: 15px 10px;         /* Отступы вокруг всего контента */
}

.main-header { 
    text-align: center;         /* Центрирование шапки урока */
}

.lesson-badge {
    display: inline-block;      /* Плашка отображается как блочный элемент в строке */
    background: #fff9c4;        /* Светло-жёлтый фон плашки заголовка урока */
    padding: 8px 30px;          /* Внутренние отступы плашки */
    border-radius: 15px;        /* Скругление углов плашки */
    color: #ff6d00;             /* Ярко-оранжевый цвет текста */
    font-weight: bold;          /* Жирное начертание текста */
    font-size: 1.6em;           /* Размер шрифта заголовка урока */
    margin-bottom: 15px;        /* Отступ снизу от плашки */
    box-shadow: 0 4px 0 #ffd600; /* Тень под плашкой для объёма */
}

.white-card {
    background: #f0faff;        /* Светлый голубовато-белый фон карточки задания */
    border: 6px solid #ffd600;  /* Толстая жёлтая рамка вокруг карточки */
    border-radius: 30px;        /* Большое скругление углов карточки */
    padding: 15px 25px;         /* Внутренние отступы внутри карточки */
    max-width: 750px;           /* Максимальная ширина карточки */
    margin: 0 auto 20px;        /* Центрирование и отступ между карточками */
    box-shadow: 0 10px 0 rgba(0,0,0,0.05); /* Лёгкая тень под карточкой */
}

.card-title {
    color: #ff7043;             /* Оранжевый цвет заголовка задания */
    text-align: center;         /* Центрирование заголовка */
    font-size: 1.8em;           /* Размер шрифта заголовка */
    margin: 0 0 10px 0;         /* Отступы вокруг заголовка */
}

.yellow-divider {
    height: 4px;                /* Высота разделительной линии */
    background-color: #ffd600;  /* Жёлтый цвет разделителя */
    margin-bottom: 20px;        /* Отступ снизу от линии */
}

.card-instruction {
    font-size: 1.25rem;         /* Размер текста инструкции */
    color: #2c3e50;             /* Тёмно-синий цвет текста инструкции */
    text-align: left;         /* Центрирование инструкции */
    margin: 15px 0 25px 0;      /* Отступы сверху и снизу */
    line-height: 1.2;           /* Межстрочный интервал для удобства чтения */
}

/* СТИЛИ ДЛЯ ЦЕНТРИРОВАНИЯ И ОФОРМЛЕНИЯ КНОПКИ ПРОВЕРКИ */

.btn-box {
    display: flex;                                              /* Включаем флекс-контейнер для кнопки */
    justify-content: center;                                    /* Центрируем кнопку строго по горизонтали */
    margin-top: 0px;                                           /* Добавляем отступ сверху от задания до кнопки */
}

.orange-check-btn {
    background: linear-gradient(to bottom, #ff9244, #f57c00);   /* Создаем оранжевый градиент как на макете */
    color: #ffffff;                                             /* Устанавливаем белый цвет текста */
    font-family: 'Comic Sans MS', sans-serif;                   /* Поддерживаем единый детский шрифт */
    font-size: 1.5em;                                           /* Устанавливаем крупный, читаемый размер шрифта */
    font-weight: bold;                                          /* Делаем текст жирным */
    padding: 12px 60px;                                         /* Задаем внутренние отступы для вытянутой формы */
    border: none;                                               /* Убираем стандартную браузерную рамку */
    border-radius: 40px;                                        /* Делаем края сильно скругленными (овальными) */
    box-shadow: 0 6px 0 #d84315;                                /* Добавляем темный "объем" под кнопкой */
    cursor: pointer;                                            /* Меняем курсор на палец при наведении */
    transition: all 0.2s ease;                                  /* Плавная анимация при нажатии */
}

.orange-check-btn:hover {
    transform: translateY(-2px);                                /* Легкое приподнятие кнопки при наведении */
    box-shadow: 0 8px 0 #d84315;                                /* Увеличение тени для эффекта парения */
}

.orange-check-btn:active {
    transform: translateY(4px);                                 /* Кнопка "вдавливается" при клике */
    box-shadow: 0 2px 0 #d84315;                                /* Тень уменьшается при нажатии */
}

.result-text {
    text-align: center;                                         /* Центрируем текст результата над кнопкой */
    font-size: 1.3em;                                           /* Размер шрифта сообщения об успехе */
    margin: 15px 0;                                             /* Вертикальные отступы для текста */
    min-height: 1.5em;                                          /* Резервируем место, чтобы контент не прыгал */
}

/* КНОПКИ */
.btn-box { display: flex; justify-content: center; }
.orange-check-btn {
    background: linear-gradient(to bottom, #ff9244, #f57c00);
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    padding: 12px 60px;
    border: none;
    border-radius: 40px;
    box-shadow: 0 6px 0 #d84315;
    cursor: pointer;
}


/* НАЧАЛО ОСНОВНОГО БЛОКА CSS */

/* =========================================
   ЗАДАНИЕ 1: ПРОГОВОРИ СЛОГИ И СЛОВА
   ========================================= */

/* Контейнер-сетка для карточек со словами */
.l24-t1-grid {
    display: grid;                            /* Включаем CSS Grid для ровного распределения элементов */
    grid-template-columns: repeat(3, 1fr);    /* Создаем ровно 3 колонки одинаковой ширины (как на картинке) */
    gap: 15px;                                /* Задаем расстояние 15 пикселей между карточками */
    margin-top: 20px;                         /* Отступ сверху от инструкции до карточек */
}

/* Стили для каждой отдельной карточки-кнопки */
.l24-t1-card {
    background: #ffffff;                      /* Белый фон карточки по умолчанию */
    border: 2px solid #3498db;                /* Синяя рамка вокруг карточки */
    border-radius: 12px;                      /* Скругленные на 12 пикселей углы */
    padding: 15px 10px;                       /* Внутренние отступы для текста (сверху-снизу 15px, по бокам 10px) */
    text-align: center;                       /* Выравниваем текст со слогами строго по центру */
    font-size: 1.3rem;                        /* Крупный, удобный для чтения шрифт */
    font-weight: bold;                        /* Делаем текст жирным */
    color: #2c3e50;                           /* Темно-синий, контрастный цвет текста */
    cursor: pointer;                          /* Курсор превращается в "палец", показывая, что можно кликать */
    transition: all 0.2s ease;                /* Плавная анимация при наведении и клике */
    box-shadow: 0 4px 0 #2980b9;              /* Тень снизу для создания эффекта "кнопки" (3D-эффект) */
}

/* Эффект при наведении мышки на карточку */
.l24-t1-card:hover {
    transform: translateY(-2px);              /* Карточка слегка "приподнимается" вверх */
    box-shadow: 0 6px 0 #2980b9;              /* Тень увеличивается, усиливая эффект парения */
}

/* Эффект при нажатии (клике) на карточку */
.l24-t1-card:active {
    transform: translateY(2px);               /* Карточка "вдавливается" вниз */
    box-shadow: 0 2px 0 #2980b9;              /* Тень уменьшается */
}

/* Класс, который добавляется через JavaScript, когда ребенок нажал на карточку */
.l24-t1-card.read {
    background: #d4edda;                      /* Меняем фон на приятный светло-зеленый (означает успех) */
    border-color: #27ae60;                    /* Меняем цвет рамки на зеленый */
    color: #155724;                           /* Делаем цвет текста темно-зеленым */
    box-shadow: 0 4px 0 #218838;              /* Меняем цвет тени на зеленый под стиль кнопки */
}

/* =========================================
   ЗАДАНИЕ 2: ОТЧЕСТВА (ВВОД СЛОВ)
   ========================================= */

/* Контейнер-сетка для расположения вопросов в 3 колонки */
.l24-t2-grid {
    display: grid;                            /* Включаем режим сетки */
    grid-template-columns: repeat(3, 1fr);    /* Создаем 3 равные колонки */
    gap: 20px 15px;                           /* Отступы: 20px по вертикали, 15px по горизонтали */
    margin-top: 20px;                         /* Отступ сверху от инструкции */
}

/* Блок отдельного вопроса (текст + поле ввода) */
.l24-t2-item {
    font-size: 1.2rem;                        /* Комфортный размер шрифта для чтения */
    color: #2c3e50;                           /* Темно-синий цвет текста */
    display: flex;                            /* Используем флекс для выравнивания */
    flex-direction: column;                   /* Текст над полем ввода (чтобы красиво смотрелось на любых экранах) */
    gap: 8px;                                 /* Небольшой отступ между текстом и полем */
}

/* Стили для поля ввода отчества */
.l24-t2-input {
    border: 2px solid #3498db;                /* Синяя рамка */
    border-radius: 8px;                       /* Скругленные углы */
    padding: 8px 12px;                        /* Внутренние отступы для комфортного ввода */
    font-family: 'Comic Sans MS', sans-serif; /* Единый детский шрифт */
    font-size: 1.1rem;                        /* Размер вводимого текста */
    color: #2c3e50;                           /* Цвет текста */
    outline: none;                            /* Убираем стандартную обводку браузера при фокусе */
    transition: all 0.2s ease;                /* Плавное изменение цвета рамки при проверке */
    width: 100%;                              /* Инпут занимает всю ширину своей колонки */
    box-sizing: border-box;                   /* Учитываем отступы в ширине */
}

/* Подсветка инпута, если ответ правильный */
.l24-t2-input.correct {
    border-color: #27ae60;                    /* Меняем рамку на зеленую */
    background-color: #d4edda;                /* Заливаем фон нежно-зеленым */
    color: #155724;                           /* Делаем текст темно-зеленым */
}

/* Подсветка инпута, если допущена ошибка */
.l24-t2-input.wrong {
    border-color: #e74c3c;                    /* Меняем рамку на красную */
    background-color: #f8d7da;                /* Заливаем фон розоватым */
    color: #721c24;                           /* Делаем текст темно-красным */
}

/* Адаптивность: на узких экранах выстраиваем в 1 или 2 колонки */
@media (max-width: 650px) {
    .l24-t2-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на средних экранах */
    }
}
@media (max-width: 450px) {
    .l24-t2-grid {
        grid-template-columns: 1fr;            /* 1 колонка на смартфонах */
    }
}

/* =========================================
   ЗАДАНИЕ 3: РАСШИФРУЙ СЛОВА (РЕБУСЫ)
   ========================================= */

/* Главный контейнер (Картинка + Поля ввода) */
.l24-t3-workspace {
    display: flex;                            /* Включаем Flexbox */
    flex-direction: row;                      /* Располагаем картинку и поля слева направо */
    gap: 30px;                                /* Отступ между картинкой и блоком с инпутами */
    align-items: center;                      /* Выравниваем по центру вертикали */
    flex-wrap: wrap;                          /* Разрешаем перенос на узких экранах (мобильных) */
}

/* Контейнер для картинки */
.l24-t3-image-box {
    flex: 1 1 300px;                          /* Гибкий блок, базовая ширина 300px */
    max-width: 500px;                         /* Максимальная ширина картинки */
}

/* Сама картинка */
.l24-t3-img {
    width: 100%;                              /* Занимает всю ширину своего контейнера */
    height: auto;                             /* Сохраняет пропорции */
    
}

/* Контейнер для всех рядов с инпутами */
.l24-t3-inputs-container {
    flex: 1 1 250px;                          /* Гибкий блок для инпутов */
    display: flex;                            
    flex-direction: column;                   /* Выстраиваем слова в столбик */
    gap: 20px;                                /* Отступ между рядами слов */
}

/* Группа: Цифра + клеточки для одного слова */
.l24-t3-word-group {
    display: flex;                            /* Выстраиваем цифру и клеточки в ряд */
    align-items: center;                      /* Центрируем по вертикали */
    gap: 8px;                                 /* Отступ между клеточками */
}

/* Цифра перед словом (1., 2. и т.д.) */
.l24-t3-num {
    font-size: 1.4rem;                        /* Крупный шрифт */
    font-weight: bold;                        /* Жирный шрифт */
    color: #ff7043;                           /* Оранжевый цвет */
    margin-right: 5px;                        /* Отступ справа от цифры до первой клетки */
}

/* Клеточка для ввода одной буквы */
.l24-t3-cell {
    width: 35px;                              /* Фиксированная ширина */
    height: 35px;                             /* Фиксированная высота */
    border: 2px solid #3498db;                /* Синяя рамка */
    border-radius: 6px;                       /* Слегка закругленные углы */
    font-size: 1.2rem;                        /* Размер вводимой буквы */
    font-weight: bold;                        /* Жирный текст */
    text-align: center;                       /* Буква по центру клеточки */
    text-transform: uppercase;                /* Все буквы автоматически ЗАГЛАВНЫЕ */
    outline: none;                            /* Убираем черную рамку браузера при фокусе */
    transition: all 0.2s;                     /* Плавная анимация цвета */
}

/* Правильно введенная буква */
.l24-t3-cell.correct {
    background-color: #27ae60;                /* Зеленый фон */
    color: white;                             /* Белая буква */
    border-color: #2ecc71;                    /* Светло-зеленая рамка */
}

/* Ошибка в букве */
.l24-t3-cell.wrong {
    background-color: #e74c3c;                /* Красный фон */
    color: white;                             /* Белая буква */
    border-color: #c0392b;                    /* Темно-красная рамка */
}


/* =========================================
   ЗАДАНИЕ 4: ВЫБОР КАРТИНОК (ЗВУК В КОНЦЕ)
   ========================================= */

/* Контейнер-сетка для картинок */
.l24-t4-grid {
    display: grid;                            /* Включаем режим сетки */
    grid-template-columns: repeat(4, 1fr);    /* Делаем 4 колонки одинаковой ширины */
    gap: 10px;                                /* Отступ между карточками 15 пикселей */
    margin-top: 10px;                         /* Отступ сверху от инструкции */
}

/* Карточка с картинкой */
.l24-t4-card {
    background: #ffffff;                      /* Белый фон карточки */
    border: 3px solid #bdc3c7;                /* Нейтральная серая рамка по умолчанию */
    border-radius: 15px;                      /* Закругленные углы карточки */
    padding: 10px;                            /* Внутренний отступ до картинки */
    cursor: pointer;                          /* Курсор-пальчик при наведении */
    display: flex;                            /* Флекс для центрирования картинки внутри */
    justify-content: center;                  /* Центрирование по горизонтали */
    align-items: center;                      /* Центрирование по вертикали */
    aspect-ratio: 1 / 1;                      /* ДЕЛАЕМ КАРТОЧКИ СТРОГО КВАДРАТНЫМИ */
    transition: all 0.2s ease;                /* Плавная анимация при кликах и наведении */
}

/* Эффект при наведении на карточку */
.l24-t4-card:hover {
    transform: scale(1.05);                   /* Слегка увеличиваем карточку */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);   /* Добавляем мягкую тень */
}

/* Сама картинка внутри карточки */
.l24-t4-img {
    max-width: 90%;                           /* Ограничиваем ширину картинки (не больше 90% от квадрата) */
    max-height: 90%;                          /* Ограничиваем высоту картинки (не больше 90% от квадрата) */
    width: auto;                              /* Ширина подстраивается автоматически */
    height: auto;                             /* Высота подстраивается автоматически */
    object-fit: contain;                      /* Аккуратно вписываем картинку без искажений пропорций */
    pointer-events: none;                     /* Чтобы клик ловился карточкой, а не картинкой */
}

/* Класс, когда ребенок ВЫБРАЛ карточку (кликнул по ней) */
.l24-t4-card.selected {
    border-color: #3498db;                    /* Синяя рамка (показывает, что выбрано) */
    background-color: #e1f5fe;                /* Светло-голубой фон */
}

/* Класс, когда после проверки ответ оказался ПРАВИЛЬНЫМ */
.l24-t4-card.correct {
    border-color: #27ae60;                    /* Зеленая рамка */
    background-color: #d4edda;                /* Светло-зеленый фон */
}

/* Класс, когда после проверки ответ оказался ОШИБОЧНЫМ (выбрал лишнее) */
.l24-t4-card.wrong {
    border-color: #e74c3c;                    /* Красная рамка */
    background-color: #f8d7da;                /* Розоватый фон */
}

/* Адаптивность для узких экранов (планшеты и телефоны) */
@media (max-width: 768px) {
    .l24-t4-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки на планшетах */
    }
}
@media (max-width: 480px) {
    .l24-t4-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на телефонах */
    }
}

/* =========================================
   ЗАДАНИЕ 5: ПРИДУМАЙ ПРЕДЛОЖЕНИЯ (С КАРТИНКАМИ)
   ========================================= */

/* Рабочая область: выстраиваем карточки в ОДИН столбец */
.l24-t5-workspace {
    display: flex;                            /* Используем флексбокс */
    flex-direction: column;                   /* Выстраиваем элементы строго сверху вниз */
    gap: 7px;                                /* Расстояние между карточками */
    align-items: center;                      /* Центрируем карточки по горизонтали */
}

/* Карточка для одной пары слов */
.l24-t5-pair-card {
    background: #ffffff;                      /* Белый фон карточки */
    border: 2px solid #ecf0f1;                /* Светло-серая рамка */
    border-radius: 15px;                      /* Закругленные углы */
    padding: 10px 15px;                       /* Внутренние отступы (чуть больше по бокам) */
    display: flex;                            /* Флексбокс для управления содержимым */
    flex-direction: column;                   /* Выстраиваем элементы сверху вниз */
    align-items: center;                      /* Центрируем всё по горизонтали */
    gap: 15px;                                /* Отступ между картинками, текстом и инпутом */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);   /* Легкая тень для визуального объема */
    width: 100%;                              /* Карточка занимает доступную ширину */
    max-width: 700px;                         /* Но не растягивается слишком сильно, чтобы было удобно писать длинные предложения */
    box-sizing: border-box;                   /* Учитываем отступы в ширине */
}

/* Блок, где стоят две картинки рядом */
.l24-t5-images {
    display: flex;                            /* Ставим картинки в ряд */
    gap: 40px;                                /* Увеличили расстояние между картинками в паре */
    justify-content: center;                  /* Центрируем их */
    align-items: center;                      /* Выравниваем по высоте */
    height: 180px;                            /* Увеличили высоту для наглядности */
}

/* Сама картинка */
.l24-t5-pic {
    height: 100%;                             /* Картинка занимает всю доступную высоту (100px) */
    max-width: 130px;                         /* Ограничитель ширины */
    object-fit: contain;                      /* Вписываем без искажений пропорций */
}

/* Подпись пары (например: "печка — кулич") */
.l24-t5-label {
    font-size: 1.3rem;                        /* Слегка увеличили шрифт */
    font-weight: bold;                        /* Жирный шрифт */
    color: #e67e22;                           /* Оранжевый цвет */
}

/* Поле для ввода предложения */
.l24-t5-input {
    width: 100%;                              /* Инпут занимает всю ширину карточки */
    border: 2px solid #bdc3c7;                /* Серая рамка инпута */
    border-radius: 8px;                       /* Скругление углов */
    padding: 12px;                            /* Внутренний отступ для текста */
    font-family: 'Comic Sans MS', sans-serif; /* Детский шрифт */
    font-size: 1.2rem;                        /* Увеличили размер вводимого текста */
    color: #2c3e50;                           /* Темно-синий цвет введенного текста */
    outline: none;                            /* Убираем стандартную рамку при клике */
    box-sizing: border-box;                   /* Рамки не увеличивают ширину инпута */
    transition: border-color 0.3s;            /* Плавное изменение цвета рамки при проверке */
    text-align: center;                       /* Текст вводится по центру */
}

/* Цвета при проверке */
.l24-t5-input.correct {
    border-color: #27ae60;                    /* Зеленая рамка при успехе */
    background-color: #f1fdf5;                /* Светло-зеленый фон */
}

.l24-t5-input.wrong {
    border-color: #e74c3c;                    /* Красная рамка при ошибке */
    background-color: #fdf1f1;                /* Светло-красный фон */
}

/* =========================================
   ЗАДАНИЕ 6: ДОСКАЖИ СЛОВЕЧКО (ВВОД ТЕКСТА)
   ========================================= */

/* Ряд с отдельными картинками-подсказками */
.l24-t6-images-row {
    display: flex;                            /* Выстраиваем картинки в один ряд */
    justify-content: center;                  /* Центрируем ряд по горизонтали */
    gap: 30px;                                /* Расстояние между картинками */
    flex-wrap: wrap;                          /* Разрешаем перенос картинок на узких экранах */
    margin-bottom: 20px;                      /* Отступ снизу от картинок до предложений */
}

/* Отдельная картинка */
.l24-t6-pic {
    height: 140px;                            /* Фиксируем высоту всех картинок для красоты */
    width: auto;                              /* Ширина подстраивается автоматически */
    object-fit: contain;                      /* Вписываем картинку без искажений */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); /* Легкая тень у самих объектов */
}

/* Контейнер для строк с предложениями */
.l24-t6-workspace {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Выстраиваем строки в столбик */
    gap: 15px;                                /* Отступ между предложениями */
    font-size: 1.3rem;                        /* Крупный размер шрифта для детей */
    color: #2c3e50;                           /* Темно-синий цвет текста */
    padding: 0 10px;                          /* Небольшие отступы по бокам */
}

/* Отдельная строка предложения */
.l24-t6-row {
    display: flex;                            /* Флексбокс для выравнивания текста и инпута */
    flex-wrap: wrap;                          /* Разрешаем перенос на узких экранах (телефонах) */
    align-items: center;                      /* Выравниваем элементы по базовой линии */
    gap: 10px;                                /* Расстояние между словами и полем ввода */
    line-height: 1.6;                         /* Увеличенный межстрочный интервал */
}

/* Поле для ввода пропущенного слова */
.l24-t6-input {
    border: none;                             /* Убираем стандартную рамку */
    border-bottom: 2px solid #3498db;         /* Оставляем только синюю линию снизу (как в тетради) */
    background: transparent;                  /* Прозрачный фон */
    font-family: 'Comic Sans MS', sans-serif; /* Детский шрифт */
    font-size: 1.3rem;                        /* Размер вводимого текста равен размеру предложения */
    color: #2980b9;                           /* Цвет введенного текста (чуть ярче основного) */
    text-align: center;                       /* Выравниваем текст по центру линии */
    width: 160px;                             /* Ширина линии ввода */
    outline: none;                            /* Убираем обводку при клике */
    transition: all 0.3s ease;                /* Плавная смена цвета при проверке */
    padding: 0 5px;                           /* Отступы от краев линии */
}

/* Класс при правильном ответе */
.l24-t6-input.correct {
    border-bottom-color: #27ae60;             /* Линия становится зеленой */
    color: #27ae60;                           /* Текст становится зеленым */
}

/* Класс при ошибке */
.l24-t6-input.wrong {
    border-bottom-color: #e74c3c;             /* Линия становится красной */
    color: #e74c3c;                           /* Текст становится красным */
}

/* =========================================
   ЗАДАНИЕ 7: НАЙДИ ЛИШНЮЮ КАРТИНКУ
   ========================================= */

/* Общий контейнер задания */
.l24-t7-workspace {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Выстраиваем ряды сверху вниз */
    gap: 20px;                                /* Отступ между рядами */
}

/* Один ряд картинок (полоса) */
.l24-t7-row {
    display: grid;                            /* Используем сетку внутри ряда */
    grid-template-columns: repeat(4, 1fr);    /* Ровно 4 колонки одинаковой ширины */
    gap: 15px;                                /* Расстояние между картинками в ряду */
    background: #fdfdfd;                      /* Очень светлый фон ряда */
    padding: 15px;                            /* Внутренние отступы */
    border-radius: 15px;                      /* Закругление углов ряда */
    border: 2px dashed #bdc3c7;               /* Пунктирная разделительная рамка для каждого ряда */
}

/* Карточка с картинкой (квадратная, как вы просили ранее) */
.l24-t7-card {
    background: #ffffff;                      /* Белый фон карточки */
    border: 3px solid transparent;            /* Прозрачная рамка по умолчанию (чтобы не дергалась при выборе) */
    border-radius: 12px;                      /* Закругленные углы */
    padding: 10px;                            /* Отступ до картинки */
    cursor: pointer;                          /* Курсор-пальчик */
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;                      /* ДЕЛАЕМ КАРТОЧКИ КВАДРАТНЫМИ */
    transition: all 0.2s ease;                /* Плавная анимация */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);   /* Легкая тень */
}

/* Эффект при наведении */
.l24-t7-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* Сама картинка */
.l24-t7-img {
    max-width: 90%;                           /* Не больше 90% от ширины квадрата */
    max-height: 90%;                          /* Не больше 90% от высоты квадрата */
    object-fit: contain;                      /* Вписываем без искажений */
    pointer-events: none;                     /* Клик ловит карточка, а не сама картинка */
}

/* Стили при выборе картинки ребенком */
.l24-t7-card.selected {
    border-color: #3498db;                    /* Синяя рамка (выбрано) */
    background-color: #e1f5fe;                /* Голубой фон */
}

/* Стили для правильного ответа после проверки */
.l24-t7-card.correct {
    border-color: #27ae60;
    background-color: #d4edda;
}

/* Стили для ошибки после проверки */
.l24-t7-card.wrong {
    border-color: #e74c3c;
    background-color: #f8d7da;
}
.btn-box {
    display: flex !important;         /* Включаем flex-контейнер */
    justify-content: center !important; /* Центрируем содержимое (кнопку) по горизонтали */
    width: 100% !important;           /* Растягиваем контейнер на всю ширину карточки */
    margin-top: 20px !important;      /* Добавляем отступ сверху */
}

/* Адаптивность для узких экранов */
@media (max-width: 600px) {
    .l24-t7-row {
        grid-template-columns: repeat(2, 1fr); /* На телефоне делаем 2х2 вместо 4 в ряд */
        gap: 10px;
    }
}

/* =========================================
   ЗАДАНИЕ 9: ЛАБИРИНТ И ИГРА УГАДАЙ
   ========================================= */

/* Картинка лабиринта */
.l24-t9-main-img {
    width: 100%;                              /* Занимает всю ширину */
    max-width: 700px;                         /* Но не больше 700px */
    display: block;                           /* Делаем блочным элементом */
    margin: 0 auto 20px;                      /* Выравниваем по центру */
    border-radius: 15px;                      /* Закругляем углы */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);   /* Добавляем тень для красоты */
}

/* Сетка для вопросов-ответов */
.l24-t9-workspace {
    display: grid;                            /* Двумерная сетка */
    grid-template-columns: repeat(2, 1fr);    /* Выстраиваем в 2 колонки */
    gap: 15px 40px;                           /* Отступы: 15px по вертикали, 40px по горизонтали */
    font-size: 1.3rem;                        /* Крупный, читаемый шрифт */
    color: #2c3e50;                           /* Темно-синий текст */
    padding: 0 15px;                          /* Отступы по бокам */
    margin-bottom: 25px;                      /* Отступ снизу перед кнопкой */
}

/* Строка с вопросом и полем ввода */
.l24-t9-row {
    display: flex;                            /* Флексбокс */
    justify-content: space-between;           /* Текст слева, инпут справа */
    align-items: center;                      /* Выравнивание по центру вертикали */
    border-bottom: 2px dashed #bdc3c7;        /* Пунктирная линия внизу (как в прописях) */
    padding-bottom: 8px;                      /* Отступ текста от линии */
}

/* Поле ввода */
.l24-t9-input {
    border: none;                             /* Убираем рамку браузера */
    background: transparent;                  /* Прозрачный фон */
    font-family: 'Comic Sans MS', sans-serif; /* Детский шрифт */
    font-size: 1.3rem;                        /* Размер шрифта как у основного текста */
    color: #2980b9;                           /* Синий цвет вводимого слова */
    text-align: right;                        /* Текст прижимается вправо */
    width: 130px;                             /* Ширина поля ввода */
    outline: none;                            /* Убираем свечение при клике */
    transition: color 0.3s;                   /* Плавная смена цвета при ошибке/успехе */
}

/* Меняем цвет placeholder'а (подсказки "что?" / "кто?") */
.l24-t9-input::placeholder {
    color: #95a5a6;
    font-style: italic;
}

/* Стили при правильном ответе */
.l24-t9-input.correct {
    color: #27ae60;                           /* Зеленый цвет текста */
    font-weight: bold;                        /* Делаем жирным */
}

/* Стили при ошибке */
.l24-t9-input.wrong {
    color: #e74c3c;                           /* Красный цвет текста */
    font-weight: bold;                        /* Делаем жирным */
}

/* Адаптивность для узких экранов (смартфонов) */
@media (max-width: 600px) {
    .l24-t9-workspace {
        grid-template-columns: 1fr;           /* Выстраиваем вопросы в одну колонку */
        gap: 15px;                            /* Уменьшаем отступы */
    }
}

.l24-t10-img { width: 100%; max-width: 600px; display: block; margin: 0 auto 20px; border-radius: 15px; }

/* Мы обернем слова в специальные div-ы (или добавим им data-аттрибуты), 
   но для простоты в рамках данного решения вы можете добавить 
   соответствующий класс прямо в верстку лабиринта, если захотите 
   сделать каждое слово кликабельным объектом поверх картинки. 
   Пока сделаем стилизацию для выделения: */

.l24-word-active { border: 3px solid #27ae60; background: rgba(39, 174, 96, 0.3); border-radius: 8px; cursor: pointer; }