/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
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: СТИЛИ ДЛЯ ЧТЕНИЯ СЛОГОВ
   ========================================= */

/* Общий контейнер, делящий текст на две аккуратные колонки */
.l27-t1-workspace {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #e0f0f8;
}

/* Одна строчка со слогами */
.l27-t1-row {
    font-size: 1.25rem;
    color: #2c3e50;
    padding: 8px 10px;
    border-bottom: 1px dashed #d0e8f2; /* Легкое подчеркивание для разделения строк */
    font-weight: bold;
}

/* Убираем линию у последней строчки в колонке для красоты */
.l27-t1-col .l27-t1-row:last-child {
    border-bottom: none;
}

/* Адаптивность для мобильных экранов */
@media (max-width: 600px) {
    .l27-t1-workspace {
        grid-template-columns: 1fr; /* На узких экранах сдвигаем в одну колонку */
    }
}

/* =========================================
   ЗАДАНИЕ 2: СХЕМЫ МЕСТА ЗВУКА В СЛОВЕ
   ========================================= */

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

/* Карточка отдельного предмета (картинка + схема под ней) */
.l27-t2-item {
    background: #ffffff;                      /* Белый фон для каждой карточки */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг карточки */
    border-radius: 15px;                      /* Закругляем углы карточки на 15 пикселей */
    padding: 15px;                            /* Внутренние отступы со всех сторон */
    display: flex;                            /* Включаем флексбокс для вертикального выравнивания */
    flex-direction: column;                   /* Располагаем картинку и схему друг под другом */
    align-items: center;                      /* Выравниваем содержимое строго по центру */
    gap: 12px;                                /* Отступ между картинкой и схемой */
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);   /* Добавляем легкую мягкую тень для объема */
}

/* Контейнер самой картинки */
.l27-t2-img {
    width: 100px;                             /* Фиксированная ширина картинки */
    height: 100px;                            /* Фиксированная высота картинки */
    object-fit: contain;                      /* Аккуратно вписываем картинку без искажений пропорций */
}

/* Блок схемы (три кружочка под картинкой) */
.l27-t2-scheme {
    display: flex;                            /* Выстраиваем чекбоксы в горизонтальный ряд */
    gap: 8px;                                 /* Расстояние между кружочками */
    justify-content: center;                  /* Центрируем схему */
    align-items: center;                      /* Выравниваем по вертикали */
}

/* Кастомный чекбокс, стилизованный под круглую схему из учебника */
.l27-t2-cb {
    appearance: none;                         /* Сбрасываем стандартный системный дизайн чекбокса */
    -webkit-appearance: none;                 /* Сброс для старых версий Safari */
    width: 24px;                              /* Задаем ширину кружочка */
    height: 24px;                             /* Задаем высоту кружочка */
    border: 2px solid #3498db;                /* Синяя рамка кружка */
    border-radius: 50%;                       /* Делаем элемент абсолютно круглым */
    background-color: #ffffff;                /* Белый фон внутри кружка */
    cursor: pointer;                          /* Курсор мыши меняется на палец при наведении */
    outline: none;                            /* Убираем стандартную обводку браузера при клике */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при наведении мышки на кружок */
.l27-t2-cb:hover {
    border-color: #2980b9;                    /* Немного затемняем рамку при наведении */
    transform: scale(1.1);                    /* Слегка увеличиваем кружок для интерактивности */
}

/* Состояние выбранного (отмеченного) кружка */
.l27-t2-cb:checked {
    background-color: #3498db;                /* Заливаем кружок сплошным синим цветом */
    border-color: #2980b9;                    /* Делаем рамку более темной */
}

/* Класс правильного ответа (зеленая рамка схемы после проверки) */
.l27-t2-item.correct .l27-t2-cb:checked {
    background-color: #27ae60;                /* Меняем заливку выбранного кружка на зеленую */
    border-color: #219653;                    /* Темно-зеленая рамка */
}

/* Класс ошибочного ответа (красная рамка схемы после проверки) */
.l27-t2-item.wrong .l27-t2-cb:checked {
    background-color: #e74c3c;                /* Меняем заливку выбранного кружка на красную */
    border-color: #c0392b;                    /* Темно-красная рамка */
}

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

/* =========================================
   ЗАДАНИЕ 3: ИГРА "НАЗОВИ ЛАСКОВО"
   ========================================= */

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

/* Отдельный элемент-строка (исходное слово + поле ввода) */
.l27-t3-item {
    background: #ffffff;                      /* Белый фон для карточки пары слов */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг карточки */
    border-radius: 12px;                      /* Закругление углов карточки на 12 пикселей */
    padding: 10px 12px;                       /* Внутренние отступы (сверху-снизу 10px, по бокам 12px) */
    display: flex;                            /* Включаем флексбокс для выравнивания в строку */
    align-items: center;                      /* Выравниваем текст и поле по вертикали по центру */
    justify-content: space-between;           /* Распределяем элементы: слово слева, поле справа */
    box-shadow: 0 3px 5px rgba(0,0,0,0.02);   /* Добавляем очень легкую мягкую тень */
}

/* Текстовая метка исходного слова (например, "мяч —") */
.l27-t3-word {
    font-size: 1.15rem;                       /* Устанавливаем комфортный размер шрифта */
    font-weight: bold;                        /* Делаем текст исходного слова жирным */
    color: #2c3e50;                           /* Задаем темно-синий цвет текста */
}

/* Поле ввода для ласкового слова */
.l27-t3-input {
    border: 2px solid #3498db;                /* Синяя рамка вокруг инпута */
    border-radius: 8px;                       /* Скругляем углы поля ввода на 8 пикселей */
    padding: 6px 10px;                        /* Внутренние отступы в поле ввода */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем единый детский шрифт */
    font-size: 1.1rem;                        /* Размер текста, который вводит ребенок */
    color: #2980b9;                           /* Цвет вводимого текста */
    outline: none;                            /* Убираем стандартную обводку браузера при фокусе */
    width: 110px;                             /* Фиксированная ширина поля ввода */
    text-align: center;                       /* Выравниваем вводимый текст строго по центру */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при наведении мышкой или клике на поле ввода */
.l27-t3-input:focus {
    border-color: #2980b9;                    /* Затемняем рамку при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Добавляем легкое свечение */
}

/* Класс правильного ответа (зеленое оформление инпута после проверки) */
.l27-t3-input.correct {
    border-color: #27ae60;                    /* Меняем рамку инпута на зеленую */
    background-color: #d4edda;                /* Заливаем фон инпута нежно-зеленым цветом */
    color: #155724;                           /* Делаем текст темно-зеленым */
}

/* Класс ошибочного ответа (красное оформление инпута после проверки) */
.l27-t3-input.wrong {
    border-color: #e74c3c;                    /* Меняем рамку инпута на красную */
    background-color: #f8d7da;                /* Заливаем фон инпута розоватым цветом */
    color: #721c24;                           /* Делаем текст темно-красным */
}

/* Адаптивность для планшетов (перевод в 2 колонки) */
@media (max-width: 700px) {
    .l27-t3-grid {
        grid-template-columns: repeat(2, 1fr); /* На экранах до 700px делаем 2 столбца */
    }
}

/* Адаптивность для мобильных телефонов (перевод в 1 колонку) */
@media (max-width: 480px) {
    .l27-t3-grid {
        grid-template-columns: 1fr;            /* На смартфонах выстраиваем все пары в 1 столбец */
    }
}

/* =========================================
   ЗАДАНИЕ 4: СТИЛИ ДЛЯ ИГРЫ "БЛИЗНЕЦЫ"
   ========================================= */

/* Главная сетка для карточек с мальчиками (3 столбца, 2 строки) */
.l27-t4-grid {
    display: grid;                            /* Включаем двухмерную сетку Grid */
    grid-template-columns: repeat(3, 1fr);    /* Создаем 3 одинаковых столбца */
    gap: 15px;                                /* Устанавливаем отступ в 15 пикселей между карточками */
    margin-top: 15px;                         /* Отступ сверху от текстовой инструкции */
}

/* Карточка отдельного мальчика */
.l27-t4-card {
    background: #ffffff;                      /* Белый фон карточки */
    border: 3px solid #e0f0f8;                /* Базовая светло-синяя рамка по умолчанию */
    border-radius: 15px;                      /* Закругляем углы карточки на 15 пикселей */
    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.03);   /* Добавляем легкую тень для объема */
}

/* Эффект при наведении мышкой на карточку */
.l27-t4-card:hover {
    transform: scale(1.03);                   /* Слегка увеличиваем карточку при наведении */
    border-color: #3498db;                    /* Подсвечиваем рамку синим цветом */
}

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

/* Класс при выборе карточки пользователем (до клика на проверку) */
.l27-t4-card.selected {
    border-color: #3498db;                    /* Меняем рамку на ярко-синюю при выборе */
    background-color: #e1f5fe;                /* Заливаем фон карточки нежно-голубым цветом */
}

/* Класс правильного выбора после нажатия кнопки "Проверить" */
.l27-t4-card.correct {
    border-color: #27ae60;                    /* Меняем рамку на зеленую (успех) */
    background-color: #d4edda;                /* Заливаем фон карточки светло-зеленым */
}

/* Класс ошибочного выбора после нажатия кнопки "Проверить" */
.l27-t4-card.wrong {
    border-color: #e74c3c;                    /* Меняем рамку на красную (ошибка) */
    background-color: #f8d7da;                /* Заливаем фон карточки розовато-красным */
}

/* Адаптивность для планшетов (перевод сетки в 2 столбца) */
@media (max-width: 650px) {
    .l27-t4-grid {
        grid-template-columns: repeat(2, 1fr); /* На экранах уже 650px делаем 2 столбца */
    }
}

/* Адаптивность для мобильных телефонов (перевод в 1 столбец) */
@media (max-width: 420px) {
    .l27-t4-grid {
        grid-template-columns: 1fr;            /* На смартфонах выстраиваем все карточки в 1 столбец */
    }
}

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

/* Контейнер для картинки-иллюстрации перед текстом */
.l27-t5-img-box {
    width: 100%;                              /* Блок занимает всю доступную ширину карточки */
    display: flex;                            /* Включаем флексбокс для центрирования */
    justify-content: center;                  /* Центрируем картинку по горизонтали */
    margin-bottom: 20px;                      /* Отступ снизу от картинки до текстовых предложений */
}

/* Сама иллюстрация */
.l27-t5-img {
    width: 100%;                              /* Картинка адаптивна по ширине контейнера */
    max-width: 600px;                         /* Ограничиваем максимальную ширину изображения */
    height: auto;                             /* Сохраняем исходные пропорции картинки */
    border-radius: 15px;                      /* Закругляем углы картинки на 15 пикселей */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);  /* Добавляем мягкую тень для объема */
}

/* Рабочая область с предложениями */
.l27-t5-workspace {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Выстраиваем предложения друг под другом в столбик */
    gap: 15px;                                /* Расстояние в 15 пикселей между предложениями */
    background: #ffffff;                      /* Белый фон подложки для текста */
    padding: 20px;                            /* Внутренние отступы со всех сторон */
    border-radius: 15px;                      /* Закругляем углы подложки на 15 пикселей */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг текстового блока */
}

/* Отдельная строка предложения (текст + поле ввода) */
.l27-t5-row {
    display: flex;                            /* Включаем флексбокс для выравнивания в строку */
    flex-wrap: wrap;                          /* Разрешаем перенос элементов на узких экранах */
    align-items: center;                      /* Выравниваем текст и поле по вертикали по центру */
    gap: 8px;                                 /* Небольшой отступ между словами текста и инпутами */
    font-size: 1.2rem;                        /* Комфортный размер шрифта для чтения ребенком */
    color: #2c3e50;                           /* Темно-синий цвет текста предложений */
    line-height: 1.5;                         /* Межстрочный интервал для удобства */
}

/* Поле ввода пропущенного слова */
.l27-t5-input {
    border: 2px solid #3498db;                /* Синяя рамка вокруг поля ввода */
    border-radius: 8px;                       /* Скругляем углы поля ввода на 8 пикселей */
    padding: 6px 10px;                        /* Внутренние отступы в поле ввода */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем единый детский шрифт */
    font-size: 1.1rem;                        /* Размер текста, который вводит ребенок */
    color: #2980b9;                           /* Цвет вводимого текста */
    outline: none;                            /* Убираем стандартную обводку браузера при фокусе */
    width: 140px;                             /* Фиксированная ширина поля ввода для удобства */
    text-align: center;                       /* Выравниваем вводимый текст по центру */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при фокусировке на поле ввода */
.l27-t5-input:focus {
    border-color: #2980b9;                    /* Затемняем рамку при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Добавляем легкое свечение */
}

/* Класс правильного ответа (зеленое оформление инпута после проверки) */
.l27-t5-input.correct {
    border-color: #27ae60;                    /* Меняем рамку инпута на зеленую */
    background-color: #d4edda;                /* Заливаем фон инпута нежно-зеленым цветом */
    color: #155724;                           /* Делаем текст темно-зеленым */
}

/* Класс ошибочного ответа (красное оформление инпута после проверки) */
.l27-t5-input.wrong {
    border-color: #e74c3c;                    /* Меняем рамку инпута на красную */
    background-color: #f8d7da;                /* Заливаем фон инпута розоватым цветом */
    color: #721c24;                           /* Делаем текст темно-красным */
}

/* =========================================
   ЗАДАНИЕ 6: СТИЛИ ДЛЯ РЯДОВ СЛОГОВ
   ========================================= */

/* Главный контейнер-сетка, разделяющий слоги на 3 аккуратные колонки */
.l27-t6-workspace {
    display: grid;                            /* Включаем двухмерную сетку Grid */
    grid-template-columns: repeat(3, 1fr);    /* Создаем 3 равных столбца для блоков */
    gap: 15px;                                /* Расстояние в 15 пикселей между колонками */
    background: #ffffff;                      /* Белый фон подложки для рядов слогов */
    padding: 15px 20px;                       /* Внутренние отступы со всех сторон */
    border-radius: 15px;                      /* Закругляем углы подложки на 15 пикселей */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг блока */
}

/* Одна отдельная колонка внутри общего блока */
.l27-t6-col {
    display: flex;                            /* Включаем флексбокс для вертикального выравнивания строк */
    flex-direction: column;                   /* Располагаем ряды слогов друг под другом */
    gap: 6px;                                 /* Небольшой отступ между строчками слогов */
}

/* Одна строка со слогами */
.l27-t6-row {
    font-size: 1.1rem;                        /* Комфортный размер шрифта для чтения ребенком */
    color: #2c3e50;                           /* Темно-синий цвет текста слогов */
    font-weight: bold;                        /* Делаем слоги жирными для лучшей видимости */
    padding: 4px 8px;                         /* Внутренние отступы для каждой строчки */
    background-color: #f7fbfe;                /* Очень светлый голубоватый фон для отдельной строки */
    border-radius: 6px;                       /* Скругляем углы плашки строки на 6 пикселей */
    border: 1px dashed #d0e8f2;               /* Легкая пунктирная грамматика вокруг строки */
    text-align: center;                       /* Выравниваем слоги строго по центру плашки */
}

/* Адаптивность для планшетов (перевод в 2 колонки) */
@media (max-width: 768px) {
    .l27-t6-workspace {
        grid-template-columns: repeat(2, 1fr); /* На экранах до 768px делаем 2 столбца */
    }
}

/* Адаптивность для мобильных телефонов (перевод в 1 колонку) */
@media (max-width: 480px) {
    .l27-t6-workspace {
        grid-template-columns: 1fr;            /* На узких смартфонах выстраиваем все в 1 столбец */
    }
}

/* =========================================
   ЗАДАНИЕ 7: СТИЛИ ДЛЯ ИГРЫ "ЭХО" (В ОДИН СТОЛБЕЦ)
   ========================================= */

/* Главная сетка: переводим в 1 колонку */
.l27-t7-grid {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Выстраиваем элементы строго в один столбец друг под другом */
    gap: 12px;                                /* Отступ в 12 пикселей между строчками */
    margin-top: 15px;                         /* Отступ сверху от текста инструкции */
}

/* Карточка отдельной пары слов */
.l27-t7-item {
    background: #ffffff;                      /* Белый фон подложки для пары слов */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг карточки */
    border-radius: 12px;                      /* Закругление углов карточки на 12 пикселей */
    padding: 12px 18px;                       /* Комфортные внутренние отступы со всех сторон */
    display: flex;                            /* Включаем флексбокс для выравнивания в строку */
    align-items: center;                      /* Выравниваем текст, инпут и подсказку по вертикали */
    gap: 15px;                                /* Расстояние между элементами внутри строки */
    box-shadow: 0 3px 5px rgba(0,0,0,0.02);   /* Добавляем очень легкую мягкую тень */
    box-sizing: border-box;                   /* Учитываем рамки и отступы в общей ширине */
    width: 100%;                              /* Карточка занимает всю доступную ширину */
}

/* Текстовая часть исходного слова (например, "рука —") */
.l27-t7-text {
    font-size: 1.15rem;                       /* Удобный для чтения размер шрифта */
    font-weight: bold;                        /* Делаем текст исходного слова жирным */
    color: #2c3e50;                           /* Задаем темно-синий цвет текста */
    min-width: 110px;                         /* Фиксированная ширина для идеального выравнивания полей */
    white-space: nowrap;                      /* Запрещаем слову переноситься */
}

/* Поле ввода для образованного слова-признака */
.l27-t7-input {
    border: 2px solid #3498db;                /* Синяя рамка вокруг поля ввода */
    border-radius: 8px;                       /* Скругляем углы поля ввода на 8 пикселей */
    padding: 8px 12px;                        /* Внутренние отступы в поле ввода */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем единый детский шрифт */
    font-size: 1.1rem;                        /* Размер текста, который вводит ребенок */
    color: #2980b9;                           /* Цвет вводимого текста */
    outline: none;                            /* Убираем стандартную обводку браузера при фокусе */
    flex: 1;                                  /* Поле гибко растягивается в оставшемся пространстве */
    text-align: center;                       /* Выравниваем вводимый текст строго по центру */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при фокусировке на поле ввода */
.l27-t7-input:focus {
    border-color: #2980b9;                    /* Затемняем рамку при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Добавляем легкое свечение */
}

/* Подсказка в скобках (например, "(остановка автобуса)") */
.l27-t7-hint {
    font-size: 1rem;                          /* Комфортный размер для текста подсказки */
    color: #7f8c8d;                           /* Серый спокойный цвет подсказки */
    font-style: italic;                       /* Делаем текст подсказки курсивом */
    min-width: 180px;                         /* Достаточная ширина, чтобы длинная подсказка поместилась целиком */
    white-space: nowrap;                      /* Запрещаем тексту подсказки переноситься на новую строку */
}

/* Класс правильного ответа (зеленое оформление инпута после проверки) */
.l27-t7-input.correct {
    border-color: #27ae60;                    /* Меняем рамку инпута на зеленую */
    background-color: #d4edda;                /* Заливаем фон инпута нежно-зеленым цветом */
    color: #155724;                           /* Делаем текст темно-зеленым */
}

/* Класс ошибочного ответа (красное оформление инпута после проверки) */
.l27-t7-input.wrong {
    border-color: #e74c3c;                    /* Меняем рамку инпута на красную */
    background-color: #f8d7da;                /* Заливаем фон инпута розоватым цветом */
    color: #721c24;                           /* Делаем текст темно-красным */
}

/* =========================================
   ЗАДАНИЕ 8: СТИЛИ ДЛЯ СОСТАВЛЕНИЯ ПРЕДЛОЖЕНИЙ
   ========================================= */

/* Контейнер для единой картинки-подсказки задания */
.l27-t8-img-box {
    width: 100%;                              /* Блок занимает всю доступную ширину карточки */
    display: flex;                            /* Включаем флексбокс для центрирования */
    justify-content: center;                  /* Центрируем картинку по горизонтали */
    margin-bottom: 20px;                      /* Отступ снизу от картинки до полей ввода */
}

/* Сама общая иллюстрация */
.l27-t8-img {
    width: 100%;                              /* Картинка адаптивна по ширине */
    max-width: 650px;                         /* Ограничиваем максимальную ширину изображения */
    height: auto;                             /* Сохраняем исходные пропорции */
    border-radius: 15px;                      /* Закругляем углы картинки на 15 пикселей */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);  /* Добавляем мягкую тень для объема */
}

/* Главная рабочая область, разделяющая предложения на группы */
.l27-t8-workspace {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Выстраиваем группы друг под другом */
    gap: 20px;                                /* Отступ в 20 пикселей между группами */
    background: #ffffff;                      /* Белый фон подложки */
    padding: 20px;                            /* Внутренние отступы со всех сторон */
    border-radius: 15px;                      /* Закругляем углы подложки на 15 пикселей */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг блока */
}

/* Подгруппа для персонажа (например, "Про Ванечку:") */
.l27-t8-subtitle {
    font-size: 1.25rem;                       /* Размер подзаголовка */
    color: #ff7043;                           /* Оранжевый фирменный цвет заголовков */
    margin: 0 0 10px 0;                       /* Отступы вокруг подзаголовка */
    border-bottom: 2px solid #fff9c4;         /* Желтая подчеркивающая линия */
    padding-bottom: 5px;                      /* Отступ текста от линии */
}

/* Отдельная строка с заданием и полем ввода */
.l27-t8-row {
    display: flex;                            /* Включаем флексбокс для выравнивания в строку */
    flex-wrap: wrap;                          /* Разрешаем перенос элементов на узких экранах */
    align-items: center;                      /* Выравниваем текст и поле по вертикали по центру */
    justify-content: space-between;           /* Распределяем элементы: условие слева, поле справа */
    gap: 10px;                                /* Расстояние между текстом условия и полем ввода */
    margin-bottom: 10px;                      /* Отступ снизу для каждой строки */
    font-size: 1.1rem;                        /* Комфортный размер шрифта */
    color: #2c3e50;                           /* Темно-синий цвет текста */
}

/* Поле ввода предложения */
.l27-t8-input {
    border: 2px solid #3498db;                /* Синяя рамка вокруг поля ввода */
    border-radius: 8px;                       /* Скругляем углы поля ввода на 8 пикселей */
    padding: 8px 12px;                        /* Внутренние отступы в поле ввода */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем единый детский шрифт */
    font-size: 1.05rem;                       /* Размер текста, который вводит ребенок */
    color: #2980b9;                           /* Цвет вводимого текста */
    outline: none;                            /* Убираем стандартную обводку браузера при фокусе */
    flex: 1;                                  /* Поле гибко заполняет оставшееся пространство */
    min-width: 220px;                         /* Минимальная ширина поля для комфортного ввода предложений */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при фокусировке на поле ввода */
.l27-t8-input:focus {
    border-color: #2980b9;                    /* Затемняем рамку при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Добавляем легкое свечение */
}

/* Класс правильного ответа (зеленое оформление инпута после проверки) */
.l27-t8-input.correct {
    border-color: #27ae60;                    /* Меняем рамку инпута на зеленую */
    background-color: #d4edda;                /* Заливаем фон инпута нежно-зеленым цветом */
    color: #155724;                           /* Делаем текст темно-зеленым */
}

/* Класс ошибочного ответа (красное оформление инпута после проверки) */
.l27-t8-input.wrong {
    border-color: #e74c3c;                    /* Меняем рамку инпута на красную */
    background-color: #f8d7da;                /* Заливаем фон инпута розоватым цветом */
    color: #721c24;                           /* Делаем текст темно-красным */
}

/* =========================================
   ЗАДАНИЕ 8: СТИЛИ ДЛЯ СОСТАВЛЕНИЯ ПРЕДЛОЖЕНИЙ
   ========================================= */

/* Контейнер для единой картинки-подсказки задания */
.l27-t8-img-box {
    width: 100%;                              /* Блок занимает всю доступную ширину карточки */
    display: flex;                            /* Включаем флексбокс для центрирования */
    justify-content: center;                  /* Центрируем картинку по горизонтали */
    margin-bottom: 20px;                      /* Отступ снизу от картинки до полей ввода */
}

/* Сама общая иллюстрация */
.l27-t8-img {
    width: 100%;                              /* Картинка адаптивна по ширине */
    max-width: 650px;                         /* Ограничиваем максимальную ширину изображения */
    height: auto;                             /* Сохраняем исходные пропорции */
    border-radius: 15px;                      /* Закругляем углы картинки на 15 пикселей */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);  /* Добавляем мягкую тень для объема */
}

/* Главная рабочая область, разделяющая предложения на группы */
.l27-t8-workspace {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Выстраиваем группы друг под другом */
    gap: 20px;                                /* Отступ в 20 пикселей между группами */
    background: #ffffff;                      /* Белый фон подложки */
    padding: 20px;                            /* Внутренние отступы со всех сторон */
    border-radius: 15px;                      /* Закругляем углы подложки на 15 пикселей */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг блока */
}

/* Подгруппа для персонажа (например, "Про Ванечку:") */
.l27-t8-subtitle {
    font-size: 1.25rem;                       /* Размер подзаголовка */
    color: #ff7043;                           /* Оранжевый фирменный цвет заголовков */
    margin: 0 0 10px 0;                       /* Отступы вокруг подзаголовка */
    border-bottom: 2px solid #fff9c4;         /* Желтая подчеркивающая линия */
    padding-bottom: 5px;                      /* Отступ текста от линии */
}

/* Отдельная строка с заданием и полем ввода */
.l27-t8-row {
    display: flex;                            /* Включаем флексбокс для выравнивания в строку */
    flex-wrap: wrap;                          /* Разрешаем перенос элементов на узких экранах */
    align-items: center;                      /* Выравниваем текст и поле по вертикали по центру */
    justify-content: space-between;           /* Распределяем элементы: условие слева, поле справа */
    gap: 10px;                                /* Расстояние между текстом условия и полем ввода */
    margin-bottom: 10px;                      /* Отступ снизу для каждой строки */
    font-size: 1.1rem;                        /* Комфортный размер шрифта */
    color: #2c3e50;                           /* Темно-синий цвет текста */
}

/* Поле ввода предложения */
.l27-t8-input {
    border: 2px solid #3498db;                /* Синяя рамка вокруг поля ввода */
    border-radius: 8px;                       /* Скругляем углы поля ввода на 8 пикселей */
    padding: 8px 12px;                        /* Внутренние отступы в поле ввода */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем единый детский шрифт */
    font-size: 1.05rem;                       /* Размер текста, который вводит ребенок */
    color: #2980b9;                           /* Цвет вводимого текста */
    outline: none;                            /* Убираем стандартную обводку браузера при фокусе */
    flex: 1;                                  /* Поле гибко заполняет оставшееся пространство */
    min-width: 220px;                         /* Минимальная ширина поля для комфортного ввода предложений */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при фокусировке на поле ввода */
.l27-t8-input:focus {
    border-color: #2980b9;                    /* Затемняем рамку при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Добавляем легкое свечение */
}

/* Класс успешного заполнения (зеленая рамка, если поле не пустое) */
.l27-t8-input.filled {
    border-color: #27ae60;                    /* Меняем рамку инпута на зеленую */
    background-color: #f1fdf5;                /* Заливаем фон инпута очень светлым зеленым цветом */
}

/* Класс ошибки (красная рамка, если поле осталось пустым) */
.l27-t8-input.empty {
    border-color: #e74c3c;                    /* Меняем рамку инпута на красную */
    background-color: #fdf1f1;                /* Заливаем фон инпута розоватым цветом */
}

/* =========================================
   ЗАДАНИЕ 9: СТИЛИ ДЛЯ ИГРЫ "СКАЖИ, КТО ЭТО?"
   ========================================= */

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

/* Отдельная колонка с элементами */
.l27-t9-col {
    display: flex;                            /* Включаем флексбокс для вертикального стека */
    flex-direction: column;                   /* Располагаем элементы друг под другом */
    gap: 10px;                                /* Отступ в 10 пикселей между строчками в колонке */
}

/* Карточка отдельной пары (действие + поле ввода) */
.l27-t9-item {
    background: #ffffff;                      /* Белый фон подложки */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг карточки */
    border-radius: 12px;                      /* Закругление углов карточки на 12 пикселей */
    padding: 10px 12px;                       /* Внутренние отступы со всех сторон */
    display: flex;                            /* Включаем флексбокс для выравнивания */
    flex-direction: column;                   /* Текст сверху, поле ввода под ним для компактности */
    gap: 6px;                                 /* Небольшой отступ между текстом действия и полем */
    box-shadow: 0 3px 5px rgba(0,0,0,0.02);   /* Добавляем очень легкую мягкую тень */
    box-sizing: border-box;                   /* Учитываем рамки и отступы в ширине */
}

/* Текстовая часть действия (например, "учится на двойки —") */
.l27-t9-text {
    font-size: 1rem;                          /* Комфортный размер шрифта для текста */
    font-weight: bold;                        /* Делаем текст жирным */
    color: #2c3e50;                           /* Задаем темно-синий цвет текста */
}

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

/* Эффект при фокусировке на поле ввода */
.l27-t9-input:focus {
    border-color: #2980b9;                    /* Затемняем рамку при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Добавляем легкое свечение */
}

/* Класс правильного ответа (зеленое оформление инпута после проверки) */
.l27-t9-input.correct {
    border-color: #27ae60;                    /* Меняем рамку инпута на зеленую */
    background-color: #d4edda;                /* Заливаем фон инпута нежно-зеленым цветом */
    color: #155724;                           /* Делаем текст темно-зеленым */
}

/* Класс ошибочного ответа (красное оформление инпута после проверки) */
.l27-t9-input.wrong {
    border-color: #e74c3c;                    /* Меняем рамку инпута на красную */
    background-color: #f8d7da;                /* Заливаем фон инпута розоватым цветом */
    color: #721c24;                           /* Делаем текст темно-красным */
}

/* Адаптивность для планшетов (перевод сетки в 2 колонки) */
@media (max-width: 768px) {
    .l27-t9-grid {
        grid-template-columns: repeat(2, 1fr); /* На экранах до 768px делаем 2 столбца */
    }
}

/* Адаптивность для мобильных телефонов (перевод в 1 колонку) */
@media (max-width: 480px) {
    .l27-t9-grid {
        grid-template-columns: 1fr;            /* На узких смартфонах выстраиваем всё в 1 столбец */
    }
}

/* =========================================
   ЗАДАНИЕ 10: СТИЛИ ДЛЯ КАРТИНКИ И ПОЛЕЙ ВВОДА
   ========================================= */

/* Контейнер для картинки-иллюстрации десятого задания */
.l27-t10-img-box {
    width: 100%;                              /* Блок занимает всю доступную ширину карточки */
    display: flex;                            /* Включаем флексбокс для центрирования */
    justify-content: center;                  /* Центрируем картинку по горизонтали */
    margin-bottom: 20px;                      /* Отступ снизу от картинки до полей ввода предложений */
}

/* Сама иллюстрация к заданию */
.l27-t10-img {
    width: 100%;                              /* Картинка адаптивна по ширине */
    max-width: 650px;                         /* Ограничиваем максимальную ширину изображения */
    height: auto;                             /* Сохраняем исходные пропорции */
    border-radius: 15px;                      /* Закругляем углы картинки на 15 пикселей */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);  /* Добавляем мягкую тень для объема */
}

/* Главный контейнер рабочей области задания */
.l27-t10-workspace {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Выстраиваем строки друг под другом в столбик */
    gap: 15px;                                /* Расстояние в 15 пикселей между предложениями */
    background: #ffffff;                      /* Белый фон подложки */
    padding: 20px;                            /* Внутренние отступы со всех сторон */
    border-radius: 15px;                      /* Закругляем углы подложки на 15 пикселей */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг блока */
}

/* Отдельная строка с ошибочным предложением и полем для ввода */
.l27-t10-row {
    display: flex;                            /* Включаем флексбокс для выравнивания в строку */
    flex-wrap: wrap;                          /* Разрешаем перенос элементов на узких экранах */
    align-items: center;                      /* Выравниваем текст и поле по вертикали по центру */
    justify-content: space-between;           /* Распределяем элементы: ошибочный текст слева, инпут справа */
    gap: 10px;                                /* Расстояние между текстом и полем ввода */
    border-bottom: 1px dashed #e0f0f8;        /* Пунктирная линия-разделитель между строками */
    padding-bottom: 10px;                     /* Отступ текста от разделительной линии */
}

/* Текст предложения с ошибкой от черепашонка */
.l27-t10-wrong {
    font-size: 1.1rem;                        /* Комфортный размер шрифта для чтения */
    color: #c0392b;                           /* Темно-красный цвет, подчеркивающий "ошибочность" */
    font-weight: bold;                        /* Делаем текст жирным */
}

/* Поле ввода для правильного варианта предложения */
.l27-t10-input {
    border: 2px solid #3498db;                /* Синяя рамка вокруг поля ввода */
    border-radius: 8px;                       /* Скругляем углы поля ввода на 8 пикселей */
    padding: 8px 12px;                        /* Внутренние отступы в поле ввода */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем единый детский шрифт */
    font-size: 1.05rem;                       /* Размер текста, который вводит ребенок */
    color: #2980b9;                           /* Цвет вводимого текста */
    outline: none;                            /* Убираем стандартную обводку браузера при фокусе */
    flex: 1;                                  /* Поле гибко заполняет оставшееся пространство */
    min-width: 250px;                         /* Минимальная ширина поля для удобного ввода */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при фокусировке на поле ввода */
.l27-t10-input:focus {
    border-color: #2980b9;                    /* Затемняем рамку при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Добавляем легкое свечение */
}

/* Класс правильного ответа (зеленое оформление инпута после проверки) */
.l27-t10-input.correct {
    border-color: #27ae60;                    /* Меняем рамку инпута на зеленую */
    background-color: #d4edda;                /* Заливаем фон инпута нежно-зеленым цветом */
    color: #155724;                           /* Делаем текст темно-зеленым */
}

/* Класс ошибочного ответа (красное оформление инпута после проверки) */
.l27-t10-input.wrong {
    border-color: #e74c3c;                    /* Меняем рамку инпута на красную */
    background-color: #f8d7da;                /* Заливаем фон инпута розоватым цветом */
    color: #721c24;                           /* Делаем текст темно-красным */
}