/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
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;
}
.result-text { text-align: center; font-size: 1.3em; margin: 15px 0; min-height: 1.5em; }

/* --- ЗАДАНИЕ 1: ЗАГАДКИ ЦОКОЛОЧКИ С АВТОДОПИСЫВАНИЕМ (ПОСТРОЧНЫЙ CSS) --- */

.l21-t1-game-box {
    display: flex;                              /* Выстраиваем текстовую и графическую колонки игры в один горизонтальный ряд */
    justify-content: space-between;             /* Равномерно распределяем колонки по краям контейнера карточки */
    gap: 25px;                                  /* Устанавливаем комфортный зазор между загадками и картинками */
    margin: 20px 0;                             /* Задаем внешние вертикальные отступы для всего игрового поля */
    width: 100%;                                /* Контейнер игры занимает всю доступную ширину белой карточки */
    box-sizing: border-box;                     /* Гарантируем, что внешние отступы не сломают общую ширину */
}

.l21-t1-riddles-column {
    display: flex;                              /* Активируем флекс внутри левой текстовой колонки загадок */
    flex-direction: column;                     /* Располагаем плашки с началом фраз строго друг под другом */
    gap: 10px;                                  /* Шаг-расстояние между соседними карточками загадок */
    flex: 1.2;                                  /* Текстовая колонка забирает чуть больше половины ширины для дописанных фраз */
}

.l21-t1-text-card {
    background-color: #ffffff;                  /* Задаем чистый белый фоновый цвет для плашки с загадкой */
    border: 2px solid #bdc3c7;                  /* Аккуратная серая базовая рамка вокруг текстовой фразы */
    border-radius: 12px;                        /* Мягко скругляем внешние углы у текстовой плашки */
    padding: 11px 15px;                         /* Комфортные вертикальные паддинги для вмещения 8 плашек */
    font-size: 1.05rem;                         /* Оптимальный читаемый масштаб букв для самостоятельного чтения */
    font-weight: bold;                          /* Делаем шрифт плотным и жирным, облегчая восприятие */
    color: #2c3e50;                             /* Благородный темно-синий цвет шрифта для фраз Цоколочки */
    cursor: pointer;                            /* Изменяем стандартный курсор мыши на указательный палец */
    transition: all 0.2s ease;                  /* Включаем плавную анимацию переключения цветов при выделении */
    display: flex;                              /* Делаем флекс для гибкого выравнивания текста внутри плашки */
    align-items: center;                        /* Центрируем текст по вертикали внутри плашки */
    min-height: 44px;                           /* Минимальная высота плашки для предотвращения прыжков верстки */
    box-sizing: border-box;                     /* Паддинги учитываются внутри общей высоты */
}

.l21-t1-images-column {
    display: grid;                              /* Включаем режим сетки для размещения картинок-отгадок */
    grid-template-columns: repeat(2, 1fr);      /* Картинки выстраиваются аккуратной таблицей в две колонки */
    gap: 10px;                                  /* Фиксированное расстояние между соседними ячейками картинок */
    flex: 1;                                    /* Графическая колонка занимает стабильную долю игрового поля */
    align-content: start;                       /* Выравниваем строки сетки картинок по верхнему краю колонки */
}

.l21-t1-img-card {
    background-color: #ffffff;                  /* Задаем чистый белый фон ячейки под рисунком отгадки */
    border: 2px solid #bdc3c7;                  /* Базовая серая аккуратная рамка вокруг картинки отгадки */
    border-radius: 15px;                        /* Красиво скругляем внешние углы у карточки с изображением */
    padding: 8px;                               /* Внутренние защитные поля от прилипания рисунка к рамке */
    height: 88px;                               /* Фиксированная высота карточки под идеальную сетку из 8 предметов */
    display: flex;                              /* Активируем флекс для безупречного центрирования графики */
    align-items: center;                        /* Центрируем рисунок внутри карточки по вертикальной оси */
    justify-content: center;                    /* Центрируем рисунок внутри карточки по горизонтальной оси */
    cursor: pointer;                            /* Изменяем курсор мыши на палец при наведении */
    transition: all 0.2s ease;                  /* Включаем плавную анимацию переключения визуальных состояний */
}

.l21-t1-img-card img {
    max-width: 90%;                             /* Иллюстрация занимает максимум 90% доступной ширины ячейки */
    max-height: 90%;                            /* Иллюстрация занимает максимум 90% доступной высоты ячейки */
    object-fit: contain;                        /* Полностью исключаем деформации или растяжение пропорций рисунка */
}

/* СОСТОЯНИЯ ИНТЕРАКТИВНОГО ВЗАИМОДЕЙСТВИЯ */

/* Желтая подсветка при клике */
.l21-t1-text-card.selected, .l21-t1-img-card.selected {
    border-color: #ffaa00 !important;           /* Принудительно окрашиваем контур выбранной плашки в желтый цвет */
    background-color: #fffde7;                  /* Придаем подложке легкий желтоватый оттенок активации */
    transform: scale(1.02);                     /* Слегка увеличиваем элемент для приятного эффекта нажатия */
}

/* Зеленая индикация успеха при верном выборе */
.l21-t1-text-card.matched, .l21-t1-img-card.matched {
    border-color: #2ecc71 !important;           /* Принудительно меняем цвет рамки на зеленый цвет успеха */
    background-color: #f2fdf5 !important;       /* Окрашиваем фон готового элемента в мягкий нежно-зеленый оттенок */
    color: #27ae60;                             /* Изменяем цвет букв решенной текстовой загадки на зеленый */
    pointer-events: none;                       /* Полностью блокируем повторные клики мыши по готовой паре */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ ТЕЛЕФОНОВ */
@media (max-width: 600px) {
    .l21-t1-game-box {
        flex-direction: column;                 /* На узких экранах перестраиваем блоки фраз и картинок вертикально */
    }
    .l21-t1-images-column {
        grid-template-columns: repeat(3, 1fr);  /* Картинки на смартфонах выстраиваем по 3 штуки в ряд */
    }
}

/* --- ЗАДАНИЕ 2: ПРОТИВОПОЛОЖНОСТИ ЦУНЯ И ЯНУЦ (ПОСТРОЧНЫЙ CSS) --- */

.l21-t2-game-container {
    display: flex;                              /* Выстраиваем колонки Цуни и Януца в один горизонтальный ряд */
    justify-content: space-between;             /* Расталкиваем блоки по противоположным краям карточки задания */
    gap: 20px;                                  /* Устанавливаем зазор между левой и правой колонками зайцев */
    margin: 25px 0;                             /* Задаем внешние вертикальные отступы для игрового поля */
    width: 100%;                                /* Контейнер игры занимает всю доступную ширину белой карточки */
    box-sizing: border-box;                     /* Паддинги включаются в расчет размеров во избежание сдвигов */
}

.l21-t2-column {
    display: flex;                              /* Включаем флекс для вертикального построения карт внутри колонки */
    flex-direction: column;                     /* Располагаем карточки зайцев строго друг под другом */
    gap: 12px;                                  /* Шаг-расстояние между карточками внутри одной стороны */
    flex: 1;                                    /* Обе колонки имеют абсолютно одинаковую стабильную ширину */
}

.l21-t2-title-side {
    text-align: center;                         /* Центрируем имена зайцев-персонажей над их колонками */
    font-size: 1.2rem;                          /* Удобный читаемый размер шрифта заголовков колонок */
    font-weight: bold;                          /* Делаем имена персонажей жирными */
    color: #ff6d00;                             /* Красим заголовки в фирменный сочный оранжевый цвет урока */
    margin-bottom: 5px;                         /* Небольшой зазор снизу от заголовка до первой карточки */
}

.l21-t2-card {
    background: #ffffff;                        /* Чистый белый фоновый цвет подложки под карточкой зайца */
    border: 3px solid #bdc3c7;                  /* Базовая нейтральная серая рамка вокруг картинки действия */
    border-radius: 20px;                        /* Красиво и мягко скругляем внешние углы карточки */
    padding: 10px;                              /* Внутренние поля для комфортного размещения рисунка */
    display: flex;                              /* Активируем флекс для вертикального выравнивания контента */
    flex-direction: column;                     /* Картинка располагается над скрытым текстом-подписью */
    align-items: center;                        /* Центрируем рисунок по горизонтальной оси карточки */
    justify-content: center;                    /* Центрируем рисунок по вертикальной оси карточки */
    cursor: pointer;                            /* Изменяем курсор мыши на указательный палец при наведении */
    transition: all 0.2s ease;                  /* Включаем плавную анимацию переключения цветов рамок */
    height: 120px;                              /* Фиксированная стабильная высота карточек для сохранения симметрии */
    position: relative;                         /* База для точного позиционирования внутренних элементов */
    box-sizing: border-box;                     /* Защищаем размеры карточки от деформаций при паддингах */
}

.l21-t2-card img {
    max-height: 80%;                            /* Иллюстрация зайца занимает до 80% высоты всей карточки */
    width: auto;                                /* Ширина картинки масштабируется автоматически без искажений */
    object-fit: contain;                        /* Исключаем любые растяжения или деформации пропорций зайчонка */
}

.l21-t2-word-hidden {
    margin-top: 5px;                            /* Отступ сверху от картинки до появляющегося логопедического слова */
    font-size: 0.95rem;                         /* Комфортный размер шрифта для чтения глагола ребенком */
    font-weight: bold;                          /* Делаем шрифт подписи жирным */
    color: #27ae60;                             /* Зеленый цвет для красивого проявления правильного ответа */
    opacity: 0;                                 /* Изначально текст скрыт (не виден ребенку до угадывания) */
    transition: opacity 0.3s ease;              /* Плавное проявление слова при успешном нахождении антонима */
}

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

/* Синее свечение рамки при первичном выборе карточки */
.l21-t2-card.selected {
    border-color: #3498db !important;           /* Принудительно красим рамку в красивый синий цвет фокуса */
    background-color: #e8f4fd;                  /* Придаем подложке нежно-синий оттенок активации */
    transform: scale(1.02);                     /* Легкое увеличение карточки для явного отклика на клик мыши */
}

/* Золотисто-желтая рамка при успешном и верном совпадении антонимов */
.l21-t2-card.matched {
    border-color: #ffd600 !important;           /* Рамка становится ярко-желтой в тон главного стиля урока */
    background-color: #fffde7 !important;       /* Окрашиваем фон решенной пары в мягкий желтоватый оттенок */
    pointer-events: none;                       /* Полностью блокируем повторные клики по уже разгаданной паре */
    box-shadow: 0 4px 8px rgba(255,214,0,0.15); /* Добавляем теплое золотистое свечение вокруг готовой пары */
}

/* Проявление скрытого текста при успехе */
.l21-t2-card.matched .l21-t2-word-hidden {
    opacity: 1;                                 /* Делаем логопедическое слово полностью видимым и четким */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ ТЕЛЕФОНОВ */
@media (max-width: 600px) {
    .l21-t2-game-container {
        flex-direction: column;                 /* Перестраиваем колонки Цуни и Януца вертикально друг под друга */
    }
}

/* --- ЗАДАНИЕ 3: РИФМЫ-ЧИСТОГОВОРКИ (ПОСТРОЧНЫЙ КОММЕНТАРИЙ К CSS) --- */

.l21-t3-workspace {
    display: flex;                              /* Активируем флекс-контейнер для вертикального построения блоков задания */
    flex-direction: column;                     /* Располагаем ленту картинок строго над списком текстовых рифм */
    align-items: center;                        /* Центрируем все внутренние элементы по горизонтальной оси */
    gap: 20px;                                  /* Устанавливаем аккуратный зазор между графикой и текстом */
    margin: 15px 0 25px 0;                      /* Задаем внешние вертикальные отступы для всей рабочей зоны */
    width: 100%;                                /* Блок занимает полную доступную ширину родительской карты */
    box-sizing: border-box;                     /* Паддинги включаются в расчет размеров для защиты от вылетов */
}

.l21-t3-hints-row {
    display: flex;                              /* Строим карточки картинок-подсказок в один горизонтальный ряд */
    justify-content: center;                    /* Центрируем группу подсказок по горизонтальной оси */
    align-items: center;                        /* Выравниваем ячейки картинок между собой по вертикали */
    gap: 12px;                                  /* Шаг-расстояние между соседними карточками предметов */
    flex-wrap: wrap;                            /* Позволяем картинкам переноситься на новый ряд на экранах телефонов */
    width: 100%;                                /* Ряд картинок занимает всю доступную ширину */
}

.l21-t3-hint-card {
    background-color: #ffffff;                  /* Чистый белый фон подложки карточки-подсказки */
    border: 2px solid #e1e8ee;                  /* Аккуратная серо-голубая тонкая рамка вокруг предмета */
    border-radius: 12px;                        /* Мягко скругляем внешние углы у ячейки картинки */
    padding: 6px;                               /* Внутренние защитные поля от прилипания рисунка к границам */
    width: 75px;                                /* Фиксированная ширина карточки-подсказки для симметрии ряда */
    height: 75px;                               /* Фиксированная высота карточки-подсказки для формы квадрата */
    display: flex;                              /* Включаем флекс для точного центрирования иллюстрации */
    align-items: center;                        /* Выравниваем рисунок внутри бокса по вертикали */
    justify-content: center;                    /* Выравниваем рисунок внутри бокса по горизонтали */
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);     /* Накладываем минимальную тень под ячейки */
}

.l21-t3-hint-card img {
    max-width: 90%;                             /* Рисунок занимает до 90% ширины белой ячейки */
    max-height: 90%;                            /* Рисунок занимает до 90% высоты белой ячейки */
    object-fit: contain;                        /* Исключаем деформации или растяжение пропорций логопедического рисунка */
}

.l21-t3-rhymes-list {
    display: flex;                              /* Активируем флекс для вертикального списка строк-чистоговорок */
    flex-direction: column;                     /* Располагаем чистоговорки строго друг под другом */
    gap: 14px;                                  /* Комфортное расстояние между соседними строками рифм */
    width: 100%;                                /* Список занимает всю доступную ширину контейнера */
    max-width: 580px;                           /* Ограничиваем максимальную ширину текста для ровной верстки */
}

.l21-t3-rhyme-row {
    display: flex;                              /* Строим компоненты рифмы (слоги, тире, фразу, инпут) в одну линию */
    align-items: center;                        /* Идеально выравниваем весь текст и окошко ввода по центру вертикали */
    gap: 8px;                                   /* Небольшой аккуратный зазор между элементами в строке */
    flex-wrap: wrap;                            /* Включаем перенос элементов строки на мобильных устройствах */
}

.l21-t3-syllables {
    font-size: 1.15rem;                         /* Оптимальный читаемый масштаб для повторяющихся логопедических слогов */
    font-weight: bold;                          /* Делаем слоги жирными для фиксации фокуса внимания ребенка */
    color: #ff7043;                             /* Окрашиваем речевые слоги в теплый оранжевый цвет */
}

.l21-t3-dash {
    font-size: 1.1rem;                          /* Размер шрифта знака тире */
    font-weight: bold;                          /* Делаем тире плотным */
    color: #bdc3c7;                             /* Нейтральный серый цвет для знака разделения */
}

.l21-t3-phrase-text {
    font-size: 1.15rem;                         /* Масштаб шрифта для смысловой фразы чистоговорки */
    color: #2c3e50;                             /* Благородный темно-синий цвет для легкого чтения букв */
}

.l21-t3-box-input {
    width: 110px;                               /* Компактная фиксированная ширина окошка под одно слово-отгадку */
    height: 32px;                               /* Фиксированная высота окошка ввода для аккуратного ряда */
    border: 2px solid #bdc3c7;                  /* Базовая серая аккуратная рамка вокруг окошка отгадки */
    background-color: #ffffff;                  /* Чистый белый внутренний фон прямоугольной ячейки */
    border-radius: 6px;                         /* Аккуратно скругляем углы у рамки окошка */
    font-family: 'Comic Sans MS', sans-serif;   /* Поддерживаем единый рукописный детский шрифт урока */
    font-size: 0.95rem;                         /* Оптимальный размер букв при заполнении слова */
    font-weight: bold;                          /* Вводимая ребенком отгадка пишется жирным начертанием */
    text-align: center;                         /* Набираемые буквы располагаются строго по центру окошка */
    outline: none;                              /* Отключаем стандартную грубую синюю обводку фокуса браузера */
    transition: all 0.3s ease;                  /* Включаем плавную анимацию переключения цветов при валидации */
}

/* Эффект фокуса при наборе слова в окошко рифмы */
.l21-t3-box-input:focus {
    border-color: #ff7043;                      /* Рамка ячейки становится оранжевой при активации поля */
    background-color: #fffde7;                  /* Придаем активному окошку мягкий желтоватый оттенок */
}

/* Зеленое оформление успешно разгаданной ячейки */
.l21-t3-box-input.correct {
    border-color: #27ae60 !important;           /* Принудительно перекрашиваем контур ячейки в зеленый цвет */
    background-color: #f2fdf5 !important;       /* Принудительно меняем фон окошка на нежно-зеленый */
    color: #27ae60;                             /* Цвет букв правильного ответа становится зеленым */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ ТЕЛЕФОНОВ */
@media (max-width: 500px) {
    .l21-t3-rhyme-row {
        gap: 5px;                               /* Уменьшаем зазоры между словами на узких дисплеях */
    }
    .l21-t3-box-input {
        width: 100%;                            /* На смартфонах окошко отгадки расширяется на всю ширину ряда */
        margin-top: 3px;                        /* Небольшой зазор сверху при переносе окошка на новую строчку */
    }
}

/* --- ЗАДАНИЕ 4: ВЕСЁЛЫЙ ПОЕЗД НА КАРТИНКЕ TRAIN.JPEG (ПОСТРОЧНЫЙ CSS) --- */

.l21-t4-workspace {
    display: flex;                              /* Активируем вертикальный флекс для позиционирования блоков игры */
    flex-direction: column;                     /* Располагаем состав поезда строго над карточками пассажиров */
    gap: 25px;                                  /* Устанавливаем зазор между интерактивным поездом и пассажирами */
    margin: 20px 0;                             /* Задаем внешние вертикальные отступы рабочей области */
    width: 100%;                                /* Контейнер занимает полную доступную ширину карточки */
    box-sizing: border-box;                     /* Паддинги включаются в расчет размеров во избежание сдвигов */
}

/* ОБЕРТКА ДЛЯ КАРТИНКИ ПОЕЗДА С АБСОЛЮТНЫМ ПОЗИЦИОНИРОВАНИЕМ ДРОП-ЗОН */
.l21-t4-train-wrapper {
    position: relative;                         /* База позиционирования для виртуальных зон сброса */
    width: 100%;                                /* Блок растягивается на всю ширину белой карточки */
    border-radius: 20px;                        /* Красиво скругляем внешние углы у рамки поезда */
    border: 3px solid #ffd600;                  /* Очерчиваем зону поезда яркой желтой рамкой урока */
    overflow: hidden;                           /* Обрезаем виртуальные зоны по углам скругления рамки */
    box-shadow: 0 6px 12px rgba(0,0,0,0.05);   /* Накладываем мягкую тень под состав поезда */
}

.l21-t4-train-bg {
    width: 100%;                                /* Картинка поезда занимает 100% ширины обертки */
    height: auto;                               /* Высота масштабируется автоматически и строго пропорционально */
    display: block;                             /* Убираем дефолтные нижние зазоры строчного элемента */
}

/* СЕТКА ВИРТУАЛЬНЫХ НЕВИДИМЫХ ОБЛАСТЕЙ СБРОСА ПАССАЖИРОВ */
.l21-t4-virtual-dropzone {
    position: absolute;                         /* Абсолютное позиционирование поверх текстуры вагона */
    top: 0;                                     /* Зоны занимают всю высоту картинки от верхнего края */
    height: 100%;                               /* Полная высота виртуального бокса сброса */
    z-index: 10;                                /* Поднимаем зоны над картинкой для беспрепятственного drop-эффекта */
    display: flex;                              /* Активируем флекс внутри вагонов для размещения севших пассажиров */
    flex-wrap: wrap;                            /* Позволяем мини-карточкам переноситься внутри вагона */
    gap: 4px;                                   /* Минимальное расстояние между пассажирами внутри вагона */
    padding: 15% 10px 5px 10px;                 /* Поля сверху (15%), чтобы карточки не перекрывали крыши вагонов */
    box-sizing: border-box;                     /* Паддинги не ломают ширину и процентное позиционирование зон */
    align-content: flex-start;                  /* Пассажиры усаживаются сверху вниз от окон вагончика */
    justify-content: center;                    /* Центрируем карточки вошедших пассажиров по горизонтали вагона */
    transition: background-color 0.2s ease;     /* Плавный визуальный отклик при наведении карточки */
}

/* ТОЧНЫЙ ПРОЦЕНТНЫЙ РАСЧЕТ ДЛЯ КАЖДОГО ВАГОНА НА КАРТИНКЕ TRAIN.JPEG */
#zone-locomotive { left: 5.5%;  width: 21%; }   /* Паровоз (виртуальная зона 0) */
#zone-wagon1     { left: 26.5%; width: 14%; }   /* Вагон №1 с 1 окном (Царь) */
#zone-wagon2     { left: 40.5%; width: 17%; }   /* Вагон №2 с 2 окнами (Птица, Заяц) */
#zone-wagon3     { left: 57.5%; width: 18%; }   /* Вагон №3 с 3 окнами (Царевна, Цыпленок, Синица) */
#zone-wagon4     { left: 75.5%; width: 19%; }   /* Вагон №4 с 4 окнами (Медведица, Ящерица) */

/* Визуальный эффект подсветки при затаскивании карточки в вагон */
.l21-t4-virtual-dropzone.dragover {
    background-color: rgba(255, 214, 0, 0.25);  /* Полупрозрачное золотистое свечение вагона при наведении */
}

/* Ошибочный вагон при проверке */
.l21-t4-virtual-dropzone.error-wagon {
    background-color: rgba(231, 76, 60, 0.2);   /* Полупрозрачный красный оттенок, если слоги не совпали */
}

/* Успешный вагон при проверке */
.l21-t4-virtual-dropzone.success-wagon {
    background-color: rgba(39, 174, 96, 0.15);  /* Полупрозрачный зеленый оттенок при идеальном составе */
}

/* СТИЛИЗАЦИЯ СЕТКИ ПАССАЖИРОВ (2 РЯДА ПО 4 КАРТИНКИ) */
.l21-t4-passengers-grid {
    display: grid;                              /* Переключаем перрон в сетку Grid для жесткого контроля структуры */
    grid-template-columns: repeat(4, 1fr);      /* Ровно 4 колонки одинаковой ширины (2 ряда по 4 карты автоматически) */
    gap: 15px;                                  /* Расстояние между карточками по горизонтали и вертикали */
    background-color: #fff9c4;                  /* Приятный нежно-желтый фон перрона-подсказки */
    padding: 20px;                              /* Внутренние широкие поля перрона для красоты */
    border-radius: 25px;                        /* Скругляем внешние углы платформы перрона */
    border: 3px dashed #fbc02d;                 /* Эстетичная пунктирная желтая граница перрона */
    min-height: 220px;                          /* Резервируем высоту под два полноценных ряда карточек */
    box-sizing: border-box;                     /* Гарантируем стабильность сетки */
}

.l21-t4-passenger-card {
    background-color: #ffffff;                  /* Белый фон подложки карточки пассажира */
    border: 2px solid #bdc3c7;                  /* Базовая серая аккуратная рамка вокруг карточки */
    border-radius: 12px;                        /* Мягко скругляем внешние углы у карточки пассажира */
    padding: 8px;                               /* Внутренние поля для предотвращения прилипания рисунка */
    display: flex;                              /* Активируем флекс для вертикального построения содержимого */
    flex-direction: column;                     /* Картинка располагается строго над подписью имени */
    align-items: center;                        /* Центрируем контент по горизонтальной оси карточки */
    justify-content: center;                    /* Центрируем элементы по вертикали */
    cursor: grab;                               /* Курсор в виде руки-захвата, обозначающий возможность тащить */
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);     /* Минимальная мягкая тень под карточкой для объема */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Плавная микро-анимация при наведении */
    box-sizing: border-box;                     /* Паддинги учитываются внутри общих габаритов карты */
    height: 90px;                               /* Фиксированная высота карточки для идеальной ровной сетки */
}

/* Стилизация карточки пассажира, когда она СЕЛА В ВАГОН (уменьшаем масштаб для экономии места) */
.l21-t4-virtual-dropzone .l21-t4-passenger-card {
    width: 45px !important;                     /* Резко уменьшаем ширину карты внутри вагона */
    height: 45px !important;                    /* Резко уменьшаем высоту карты внутри вагона */
    padding: 2px !important;                    /* Минимизируем паддинги */
    border-radius: 6px;                         /* Сужаем скругление углов */
    box-shadow: none;                           /* Убираем тени внутри поезда */
}

.l21-t4-virtual-dropzone .l21-t4-passenger-card img {
    height: 28px !important;                    /* Уменьшаем картинку внутри вагона */
}

.l21-t4-virtual-dropzone .l21-t4-name {
    display: none !important;                   /* Полностью прячем подписи имен внутри вагонов, оставляя только иконки */
}

.l21-t4-passenger-card img {
    height: 52px;                               /* Базовая рабочая высота рисунка на перроне */
    width: auto;                                /* Ширина масштабируется автоматически без искажений */
    object-fit: contain;                        /* Исключаем деформации или обрезку логопедического рисунка */
}

.l21-t4-name {
    font-size: 0.85rem;                         /* Компактный аккуратный размер шрифта для подписи имени */
    font-weight: bold;                          /* Делаем шрифт подписи жирным */
    color: #34495e;                             /* Темный серо-синий цвет букв подписи */
    margin-top: 4px;                            /* Небольшой зазор сверху от картинки до текста */
    text-align: center;                         /* Центрируем имя пассажира по горизонтали */
}

/* АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ ДИСПЛЕЕВ */
@media (max-width: 650px) {
    .l21-t4-passengers-grid {
        grid-template-columns: repeat(2, 1fr);  /* На смартфонах перестраиваем перрон в сетку 2 на 4 */
        min-height: auto;
    }
}


/* --- ЗАДАНИЕ 5: ОЗОРНЫЕ БУКВЫ С ЕДИНЫМИ КАРТИНКАМИ (ПОСТРОЧНЫЙ CSS) --- */

.l21-t5-workspace {
    display: flex;                              /* Активируем вертикальный флекс для построения трех блоков ребусов */
    flex-direction: column;                     /* Располагаем шифровки слов строго друг под другом сверху вниз */
    gap: 5px;                                  /* Устанавливаем зазор между независимыми блоками слов */
    margin: 20px auto;                          /* Центрируем блок по горизонтали белой карточки занятия */
    width: 100%;                                /* Контейнер занимает всю доступную ширину родительской карты */
    box-sizing: border-box;                     /* Паддинги включаются в расчет габаритов для защиты от вылетов */
}

.l21-t5-rebus-block {
    display: flex;                              /* Направляем элементы ребуса в вертикальный стек внутри одного блока */
    flex-direction: column;                     /* Картинка-подсказка располагается строго над рядами клеток ввода */
    align-items: center;                        /* Центрируем и баннер ребуса, и инпуты букв по горизонтали */
    gap: 5px;                                  /* Пространство-зазор между картинкой ребуса и ячейками ввода букв */
    width: 100%;                                /* Блок ребуса занимает полную ширину рабочей области */
}

.l21-t5-banner-box {
    width: 100%;                                /* Обертка изображения занимает всю доступную ширину */
    max-width: 320px;                           /* Ограничиваем ширину полоски ребуса для идеального сохранения пропорций */
    background-color: #ffffff;                  /* Задаем чистый белый фон подложки картинки ребуса */
    padding: 10px;                              /* Внутренние поля для предотвращения прилипания краев */
    border-radius: 20px;                        /* Мягко и красиво скругляем внешние углы рамки картинки */
    border: 3px solid #ffd600;                  /* Контурируем ребус желтой границей в тон стиля урока */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);    /* Накладываем минимальную мягкую тень под блок картинок */
    box-sizing: border-box;                     /* Включаем паддинги в расчет ширины во избежание сдвигов */
}

.l21-t5-rebus-img {
    width: 100%;                                /* Единый файл картинки ребуса занимает 100% ширины бокса */
    height: auto;                               /* Высота картинки масштабируется автоматически и пропорционально */
    display: block;                             /* Убираем дефолтные нижние зазоры строчного элемента */
    border-radius: 10px;                        /* Легкое аккуратное скругление углов у самого бланка */
}

.l21-t5-inputs-row {
    display: flex;                              /* Выстраиваем 4 пустых квадратика для букв слова в горизонтальный ряд */
    gap: 8px;                                   /* Аккуратное расстояние между соседними ячейками слова */
    justify-content: center;                    /* Центрируем квадратики букв по горизонтали под картинкой ребуса */
}

.l21-t5-cell {
    width: 55px;                                /* Фиксированная базовая ширина квадратика для буквы */
    height: 55px;                               /* Фиксированная базовая высота для строгой квадратной формы */
    text-align: center;                         /* Печатаемая ребенком буква пишется строго по центру квадрата */
    font-family: 'Comic Sans MS', sans-serif;   /* Поддерживаем основной детский рукописный шрифт урока */
    font-size: 1.4rem;                          /* Крупный отчетливый размер шрифта для удобства заполнения */
    font-weight: bold;                          /* Делаем буквы плотными и жирными при отображении */
    text-transform: uppercase;                  /* Автоматически переводим вводимый ребенком текст в верхний регистр */
    border: 2px solid #bdc3c7;                  /* Нейтральная аккуратная серая базовая рамка вокруг буквы */
    border-radius: 10px;                        /* Красивое эстетичное скругление углов у квадратных инпутов */
    outline: none;                              /* Прячем стандартную грубую синюю обводку фокуса от браузера */
    color: #2c3e50;                             /* Применяем благородный контрастный темно-синий цвет к буквам */
    padding: 0;                                 /* Сбрасываем внутренние отступы для идеального центрирования одной буквы */
    background-color: #ffffff;                  /* Каждая пустая ячейка имеет изначально белый фоновый цвет */
    transition: all 0.2s ease;                  /* Включаем плавную анимацию переключения визуальных состояний */
}

/* Эффект фокуса, когда ребенок нажимает на квадратик и вводит букву */
.l21-t5-cell:focus {
    border-color: #ff7043;                      /* Рамка ячейки становится оранжевой в момент ввода буквы */
    background-color: #fffde7;                  /* Внутренний фон инпута приобретает мягкий желтоватый оттенок */
}

.l21-t5-divider {
    width: 100%;                                /* Линия разделения блоков слов занимает полную ширину контейнера */
    height: 2px;                                /* Толщина горизонтальной аккуратной разделительной черты */
    background-color: #e1e8ee;                  /* Мягкий серо-голубой нейтральный цвет разделителя */
    margin: 10px 0;                             /* Небольшие вертикальные внешние отступы вокруг линии */
}

/* ВИЗУАЛЬНАЯ ПОДСВЕКА УСПЕШНО РАЗГАДАННОГО РЕБУСА */
.l21-t5-rebus-block.success .l21-t5-cell {
    border-color: #27ae60 !important;           /* Принудительно меняем цвет рамки угаданного слова на зеленый */
    background-color: #f2fdf5 !important;       /* Окрашиваем фон буквенных инпутов в нежно-зеленый оттенок успеха */
    color: #27ae60;                             /* Текст букв становится сочным зеленым */
}

/* --- ЗАДАНИЕ 6: БЛЮДЦА ДЛЯ ЦОКОЛОЧКИ (ПОСТРОЧНЫЙ CSS) --- */

.l21-t6-image-container {
    display: flex;                              /* Активируем флекс-контейнер для горизонтального центрирования бланка */
    justify-content: center;                    /* Помещаем единое изображение блюдец строго по центру карточки */
    width: 100%;                                /* Контейнер обертки занимает всю доступную ширину белой карточки */
    margin: 15px 0;                             /* Задаем внешние вертикальные отступы вокруг картинки */
    box-sizing: border-box;                     /* Паддинги учитываются внутри габаритов для защиты от сдвигов */
}

.l21-t6-main-img {
    max-width: 100%;                            /* Картинка разбитой посуды гибко адаптируется под размеры карточки */
    width: auto;                                /* Ширина выстраивается автоматически с сохранением пропорций */
    max-height: 480px;                          /* Ограничиваем предельную высоту бланка, чтобы он не занимал лишний экран */
    display: block;                             /* Убираем дефолтные нижние зазоры строчного элемента */
    border-radius: 15px;                        /* Мягко и аккуратно скругляем внешние углы художественного бланка */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);    /* Добавляем минимальную эстетичную тень для отделения от подложки */
}

.l21-t6-speech-helper {
    background-color: #fff9c4;                  /* Задаем нежно-желтый фоновый цвет карточки речевой опоры */
    border: 2px dashed #fbc02d;                 /* Делаем красивую пунктирную желтую рамку вокруг подсказки счёта */
    border-radius: 15px;                        /* Скругляем внешние углы у блока речевой подсказки */
    padding: 12px 20px;                         /* Широкие внутренние поля для удобства чтения текста глазами */
    margin-top: 15px;                           /* Отступ сверху от картинки блюдец до блока подсказки */
    width: 100%;                                /* Блок опоры занимает полную ширину рабочей области */
    box-sizing: border-box;                     /* Гарантируем безопасность паддингов без вылетов верстки */
}

.l21-t6-helper-title {
    font-size: 1.1rem;                          /* Читаемый, слегка увеличенный масштаб шрифта заголовка */
    font-weight: bold;                          /* Делаем шрифт заголовка речевой опоры жирным */
    color: #ff6d00;                             /* Окрашиваем текст в фирменный ярко-оранжевый цвет урока */
    display: block;                             /* Выводим заголовок отдельной самостоятельной строкой */
    margin-bottom: 5px;                         /* Микрозазор снизу от названия до примера счёта */
}

.l21-t6-helper-text {
    font-size: 1.1rem;                          /* Комфортный размер букв примера счёта посуды для взрослого и ребёнка */
    font-style: italic;                         /* Делаем шрифт наклонным (курсивным) для выделения речевого образца */
    color: #2c3e50;                             /* Благородный темно-синий контрастный цвет для легкого прочтения фраз */
    margin: 0;                                  /* Полностью сбрасываем дефолтные браузерные отступы параграфа */
}

/* --- ЗАДАНИЕ 7: ПЕРЕРАБОТАННЫЙ ЛАБИРИНТ МЕДВЕДИЦЫ (ПОСТРОЧНЫЙ CSS) --- */

.l21-t7-workspace {
    display: flex;                              /* Включаем вертикальный флекс для выстраивания блоков сверху вниз */
    flex-direction: column;                     /* Условия -> Картинка -> Инпуты располагаются строгим стеком */
    align-items: center;                        /* Центрируем все составляющие элементы по горизонтали */
    gap: 20px;                                  /* Шаг-зазор между функциональными этажами задания */
    width: 100%;                                /* Задание занимает полную ширину белой карточки */
    box-sizing: border-box;                     /* Паддинги включаются в расчет размеров для исключения вылетов */
}

/* СЕТКА УСЛОВИЙ: ДВА СТОЛБЦА НАВЕРХУ */
.l21-t7-conditions-grid {
    display: grid;                              /* Включаем режим Grid сетки для жесткого контроля колонок */
    grid-template-columns: repeat(2, 1fr);      /* Создаем ровно две одинаковые колонки для условий */
    gap: 20px;                                  /* Расстояние между левым и правым столбцами описания */
    width: 100%;                                /* Сетка условий занимает всю доступную ширину */
    background: #ffffff;                        /* Чистый белый фон подложки текстовых условий */
    padding: 15px;                              /* Внутренние поля для удобства чтения строк */
    border-radius: 18px;                        /* Мягко и аккуратно скругляем внешние углы рамки */
    border: 2px solid #e1e8ee;                  /* Обрамляем блок условий легкой серо-голубой рамкой */
    box-sizing: border-box;                     /* Гарантируем безопасность паддингов */
}

.l21-t7-cond-column {
    display: flex;                              /* Активируем вертикальный флекс внутри одного столбца */
    flex-direction: column;                     /* Название слова располагается над ходами алгоритма */
    gap: 8px;                                   /* Расстояние от заголовка до списка шагов */
}

.l21-t7-cond-header {
    font-size: 1.15rem;                         /* Крупный, заметный масштаб названия слова */
    font-weight: bold;                          /* Делаем название столбца жирным */
    color: #0d47a1;                             /* Благородный темно-синий цвет для обозначения задач сбора */
}

.l21-t7-cond-text {
    font-size: 0.95rem;                         /* Оптимальный размер шрифта для комфортного прочтения шагов */
    line-height: 1.4;                           /* Межстрочный интервал, предотвращающий слипание строк */
    color: #34495e;                             /* Приятный для глаз темно-серый цвет букв */
    margin: 0;                                  /* Полностью сбрасываем дефолтные браузерные отступы */
}

/* КОНТЕЙНЕР ЕДИНОЙ КАРТИНКИ (В ЦЕНТРЕ) */
.l21-t7-image-box {
    width: 100%;                                /* Обертка изображения забирает полную доступную ширину */
    max-width: 380px;                           /* Ограничиваем максимальную ширину бланка для четкости сетки букв */
    background-color: #ffffff;                  /* Белый чистый фон подложки под картинку лабиринта */
    padding: 10px;                              /* Внутренние аккуратные поля */
    border-radius: 20px;                        /* Скругляем внешние углы рамки картинки */
    border: 3px solid #ffd600;                  /* Контурируем картинку Медведицы желтой каймой урока */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);    /* Минимальная мягкая тень под холстом изображения */
    box-sizing: border-box;                     /* Паддинги не деформируют ширину контейнера */
}

.l21-t7-main-img {
    width: 100%;                                /* Единый файл картинки лабиринта занимает 100% ширины бокса */
    height: auto;                               /* Высота картинки масштабируется автоматически и пропорционально */
    display: block;                             /* Скрываем дефолтные нижние зазоры строчного тега */
    border-radius: 12px;                        /* Легкое аккуратное скругление углов бланка */
}

/* КОНТЕЙНЕР БЛОКОВ ВВОДА БУКВ (ВНИЗУ) */
.l21-t7-words-container {
    display: flex;                              /* Выстраиваем ряды клеток первого и второго слова */
    justify-content: center;                    /* Центрируем ряды квадратиков по горизонтали под картинкой */
    gap: 30px;                                  /* Пространство-зазор между сеткой первого и второго слова */
    width: 100%;                                /* Контейнер рядов забирает полную ширину рабочей зоны */
    flex-wrap: wrap;                            /* Разрешаем перенос строк на мобильных экранах */
}

.l21-t7-word-block {
    display: flex;                              /* Активируем флекс для удержания ряда ячеек ввода */
    flex-direction: column;                     /* Строим элементы вертикально */
    align-items: center;                        /* Центрируем ячейки по горизонтальной оси */
}

.l21-t7-inputs-row {
    display: flex;                              /* Выстраиваем 6 пустых ячеек для букв слова в горизонтальный ряд */
    gap: 5px;                                   /* Минимальный аккуратный зазор между соседними клеточками букв */
}

.l21-t7-cell {
    width: 38px;                                /* Фиксированная компактная ширина квадратика для буквы */
    height: 38px;                               /* Фиксированная компактная высота для строгой квадратной формы */
    text-align: center;                         /* Набираемая ребенком буква пишется строго по центру ячейки */
    font-family: 'Comic Sans MS', sans-serif;   /* Поддерживаем единый рукописный детский шрифт урока */
    font-size: 1.25rem;                         /* Крупный отчетливый масштаб букв при заполнении */
    font-weight: bold;                          /* Вводимые буквы отображаются жирным начертанием */
    text-transform: uppercase;                  /* Автоматически переводим вводимый ребенком текст в верхний регистр */
    border: 2px solid #bdc3c7;                  /* Базовая нейтральная серая аккуратная рамка вокруг инпута */
    border-radius: 8px;                         /* Легкое скругление углов у квадратных клеточек */
    outline: none;                              /* Прячем дефолтную грубую синюю обводку фокуса от браузера */
    color: #2c3e50;                             /* Цвет букв соответствует общему темному стилю текста */
    padding: 0;                                 /* Сбрасываем внутренние отступы для идеального центрирования одной буквы */
    background-color: #ffffff;                  /* Каждая ячейка ввода имеет изначально белый фоновый цвет */
    transition: all 0.2s ease;                  /* Включаем плавную анимацию переключения визуальных состояний */
}

.l21-t7-cell:focus {
    border-color: #ff7043;                      /* Рамка ячейки становится оранжевой при активации поля */
    background-color: #fffde7;                  /* Придаем активному инпуту мягкий желтоватый оттенок */
}

/* ЗЕЛЕНАЯ ПОДСВЕТКА ПРИ ВЕРНОМ ОТВЕТЕ */
.l21-t7-word-block.success .l21-t7-cell {
    border-color: #27ae60 !important;           /* Принудительно меняем цвет рамки угаданного слова на зеленый */
    background-color: #f2fdf5 !important;       /* Окрашиваем фон буквенных инпутов в нежно-зеленый оттенок успеха */
    color: #27ae60;                             /* Текст букв становится сочным зеленым */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ ТЕЛЕФОНОВ */
@media (max-width: 600px) {
    .l21-t7-conditions-grid {
        grid-template-columns: 1fr;             /* На узких смартфонах выстраиваем условия в один вертикальный столбец */
        gap: 15px;
    }
}

/* --- ЗАДАНИЕ 8: ЗАНИМАТЕЛЬНАЯ ФОТОГРАФИЯ С ТРАНСФОРМАЦИЕЙ ЦВЕТА (ПОСТРОЧНЫЙ CSS) --- */

.l21-t8-workspace {
    display: flex;                              /* Активируем флекс-контейнер для построения блоков фотографии и инпутов */
    flex-direction: column;                     /* Располагаем большую фотографию Иришки строго над полями ввода слов */
    align-items: center;                        /* Центрируем элементы по горизонтальной оси карточки */
    gap: 20px;                                  /* Комфортный вертикальный зазор между фотографией и текстовыми полями */
    width: 100%;                                /* Рабочая область забирает полную ширину белой карточки занятия */
    box-sizing: border-box;                     /* Включаем паддинги в расчет размеров во избежание сдвигов элементов */
}

.l21-t8-photo-box {
    width: 100%;                                /* Обертка фотографии занимает всю доступную ширину */
    max-width: 520px;                           /* Предельное ограничение ширины холста для сохранения четкости графики */
    background-color: #ffffff;                  /* Задаем чистый белый фон основы подложки под картинку */
    padding: 10px;                              /* Внутренние аккуратные поля для создания красивого эффекта рамки */
    border-radius: 22px;                        /* Плавное сильное скругление внешних углов рамки фотографии */
    border: 3px solid #ffd600;                  /* Контурируем фотографию Иришки яркой желтой границей урока */
    box-shadow: 0 6px 12px rgba(0,0,0,0.04);    /* Накладываем мягкую эстетичную тень под рамку с рисунком */
    box-sizing: border-box;                     /* Защищаем общую ширину от деформаций из-за паддингов */
    overflow: hidden;                           /* Обрезаем края картинки под форму скругления внешней рамки */
}

.l21-t8-main-img {
    width: 100%;                                /* Файл изображения полностью заполняет всю ширину обертки */
    height: auto;                               /* Высота картинки масштабируется автоматически и строго пропорционально */
    display: block;                             /* Убираем дефолтные нижние строчные зазоры тега изображения */
    border-radius: 12px;                        /* Аккуратное скругление углов у самого фотоснимка */
    transition: opacity 0.5s ease-in-out;       /* Включаем плавную анимацию прозрачности при сказочном проявлении цвета */
}

/* СЕТКА ПОЛЕЙ ВВОДА СЛОВ (В ДВА СТОЛБЦА) */
.l21-t8-inputs-container {
    display: grid;                              /* Переключаем зону инпутов в сетку Grid для жесткого контроля колонок */
    grid-template-columns: repeat(2, 1fr);      /* Создаем ровно два параллельных столбца одинаковой ширины */
    gap: 12px 20px;                             /* Задаем шаг-отступ: 12px между рядами и 20px между левой и правой колонкой */
    width: 100%;                                /* Блок полей ввода занимает всю доступную ширину */
    box-sizing: border-box;                     /* Паддинги не деформируют сетку инпутов */
}

.l21-t8-input-wrapper {
    display: flex;                              /* Строем кружок нумерации строки и текстовое поле ввода в одну линию */
    align-items: center;                        /* Идеологически центрируем номер строки и инпут по вертикали */
    gap: 10px;                                  /* Зазор от синего кружка нумерации до поля ввода слова */
    width: 100%;                                /* Строка ввода занимает 100% пространства своей ячейки сетки */
}

.l21-t8-num {
    display: inline-block;                      /* Позволяет задать стабильные размеры для кружка нумерации строки */
    width: 26px;                                /* Фиксированная ширина подложки кружка номера */
    height: 26px;                               /* Фиксированная высота подложки кружка номера */
    border: 2px solid #0d47a1;                  /* Насыщенный синий контур вокруг номера строки */
    border-radius: 50%;                         /* Скругляем элемент до состояния идеального геометрического круга */
    text-align: center;                         /* Центрируем цифру внутри синего кружка по горизонтали */
    line-height: 22px;                          /* Выравниваем цифру внутри синего кружка по вертикальной оси */
    font-weight: bold;                          /* Устанавливаем жирное начертание для номеров полей ввода */
    color: #0d47a1;                             /* Красим цифры нумерации в глубокий синий цвет */
    font-size: 0.95rem;                         /* Оптимальный аккуратный масштаб цифры */
    flex-shrink: 0;                             /* Запрещаем сжатие кружка нумерации при уменьшении экрана телефона */
}

.l21-t8-word-input {
    flex: 1;                                    /* Текстовое поле автоматически забирает все свободное место в ряду */
    height: 36px;                               /* Фиксированная высота инпута для аккуратного ровного ряда */
    border: 2px solid #bdc3c7;                  /* Базовая нейтральная серая рамка вокруг поля ввода слова */
    background-color: #ffffff;                  /* Внутренний фон текстового инпута делаем чистым белым */
    border-radius: 10px;                        /* Мягко и плавно скругляем углы у текстового поля */
    font-family: 'Comic Sans MS', sans-serif;   /* Поддерживаем единый рукописный детский шрифт урока */
    font-size: 0.95rem;                         /* Оптимальный размер шрифта букв при заполнении ребенком */
    font-weight: bold;                          /* Набираемый ребенком текст отображается жирным начертанием */
    padding: 0 12px;                            /* Внутренние боковые отступы для предотвращения прилипания букв к краям */
    outline: none;                              /* Отключаем дефолтную грубую обводку фокуса от браузера */
    color: #2c3e50;                             /* Контрастный темно-синий цвет шрифта для легкого чтения написанных слов */
    transition: all 0.3s ease;                  /* Включаем плавную анимацию изменения цветов рамок при валидации */
    box-sizing: border-box;                     /* Паддинги включаются в расчет размеров для исключения вылетов верстки */
}

/* Эффект фокуса при наборе слова ребенком */
.l21-t8-word-input:focus {
    border-color: #ff7043;                      /* Рамка инпута становится теплой оранжевой в момент фокуса */
    background-color: #fffde7;                  /* Придаем активному текстовому полю легкий желтоватый оттенок */
}

/* Зеленая индикация успешно и правильно заполненного поля ввода */
.l21-t8-word-input.correct-field {
    border-color: #27ae60 !important;           /* Принудительно перекрашиваем контур ячейки в зеленый цвет */
    background-color: #f2fdf5 !important;       /* Принудительно меняем фон инпута на нежно-зеленый оттенок успеха */
    color: #27ae60;                             /* Текст правильного слова отображается зеленым цветом */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ СМАРТФОНОВ */
@media (max-width: 550px) {
    .l21-t8-inputs-container {
        grid-template-columns: 1fr;             /* На узких экранах мобильных телефонов выстраиваем инпуты в один столбец */
        gap: 10px;                              /* Сокращаем зазоры между соседними полями */
    }
}

/* --- ЗАДАНИЕ 9: ПРЕДЛОЖЕНИЯ С ГОРИЗОНТАЛЬНОЙ ЛЕНТОЙ ПОДСКАЗОК (ПОСТРОЧНЫЙ CSS) --- */

.l21-t9-workspace {
    display: flex;                              /* Активируем вертикальный флекс-контейнер для построения блоков задания */
    flex-direction: column;                     /* Располагаем ряд картинок строго над списком строк для предложений */
    align-items: center;                        /* Центрируем все внутренние блоки по горизонтальной оси */
    gap: 25px;                                  /* Расширенный зазор между верхней графической лентой и полями ввода */
    margin: 15px 0 25px 0;                      /* Задаем внешние вертикальные отступы для всей рабочей зоны */
    width: 100%;                                /* Контейнер занимает полную доступную ширину белой карточки */
    box-sizing: border-box;                     /* Паддинги включаются в расчет размеров для защиты от вылетов верстки */
}

/* ГОРИЗОНТАЛЬНАЯ ЛЕНТА КАРТИНОК-ПОДСКАЗОК */
.l21-t9-hints-row {
    display: flex;                              /* Выстраиваем карточки с картинками-предметами в один горизонтальный ряд */
    justify-content: center;                    /* Центрируем всю группу подсказок строго по горизонтали */
    align-items: center;                        /* Выравниваем ячейки картинок между собой по вертикальной оси */
    gap: 12px;                                  /* Шаг-расстояние между соседними карточками предметов */
    flex-wrap: wrap;                            /* Автоматически переносим картинки на новый ряд на узких смартфонах */
    width: 100%;                                /* Ряд картинок занимает всю доступную ширину */
}

.l21-t9-hint-card {
    background-color: #ffffff;                  /* Задаем чистый белый фон подложки карточки-подсказки */
    border: 2px solid #e1e8ee;                  /* Аккуратная серо-голубая тонкая рамка вокруг предмета */
    border-radius: 14px;                        /* Мягко и красиво скругляем внешние углы у ячейки картинки */
    padding: 6px;                               /* Внутренние защитные поля от прилипания рисунка к границам */
    width: 72px;                                /* Фиксированная ширина карточки-подсказки для идеальной симметрии ряда */
    height: 72px;                               /* Фиксированная высота карточки для поддержания формы квадрата */
    display: flex;                              /* Включаем флекс для точного геометрического центрирования иллюстрации */
    align-items: center;                        /* Выравниваем рисунок внутри бокса по вертикали */
    justify-content: center;                    /* Выравниваем рисунок внутри бокса по горизонтали */
    box-shadow: 0 4px 8px rgba(0,0,0,0.02);     /* Накладываем минимальную мягкую тень под ячейки подсказок */
}

.l21-t9-hint-card img {
    max-width: 90%;                             /* Рисунок занимает до 90% ширины белой ячейки */
    max-height: 90%;                            /* Рисунок занимает до 90% высоты белой ячейки */
    object-fit: contain;                        /* Исключаем деформации или растяжение пропорций логопедического рисунка */
}

/* СПИСОК СТРОК С ИНПУТАМИ */
.l21-t9-sentences-list {
    display: flex;                              /* Переключаем контейнер строк в режим вертикального флекса */
    flex-direction: column;                     /* Располагаем ряды со словами строго друг под другом сверху вниз */
    gap: 12px;                                  /* Комфортное расстояние между соседними строчками упражнения */
    width: 100%;                                /* Список занимает всю доступную ширину карточки */
}

.l21-t9-row {
    display: flex;                              /* Строим плашку-слово и текстовое поле ввода в один горизонтальный ряд */
    align-items: center;                        /* Идеально выравниваем плашку и инпут между собой по вертикали */
    gap: 15px;                                  /* Зазор между оранжевой плашкой слова и полем ввода предложения */
    width: 100%;                                /* Ряд занимает всю доступную ширину родительской обёртки */
    box-sizing: border-box;                     /* Защищаем структуру строки от сдвигов при внутренних полях */
}

.l21-t9-word-badge {
    width: 110px;                               /* Фиксированная стабильная ширина плашки для выравнивания инпутов в один ряд */
    background-color: #ff6d00;                  /* Насыщенный фирменный оранжевый фоновый цвет плашки опорного слова */
    color: #ffffff;                             /* Контрастный белый цвет шрифта для отличной читаемости */
    font-weight: bold;                          /* Делаем начертание букв опорного слова жирным */
    font-size: 1.05rem;                         /* Оптимальный масштаб букв для самостоятельного прочтения ребенком */
    text-align: center;                         /* Текст слова внутри плашки располагается строго по центру */
    padding: 8px 10px;                          /* Внутренние поля плашки для создания аккуратной объемной формы */
    border-radius: 12px;                        /* Плавное красивое скругление углов у текстового бейджа */
    box-shadow: 0 3px 0 #d84315;                /* Накладываем плотную нижнюю тень для эффекта объемной кнопки */
    flex-shrink: 0;                             /* Категорически запрещаем сжатие плашки слова на узких экранах */
}

.l21-t9-sentence-input {
    flex: 1;                                    /* Текстовое поле автоматически забирает всё свободное место в ряду */
    height: 40px;                               /* Увеличенная высота инпута для комфортного набора длинных фраз */
    border: 2px solid #90caf9;                  /* Мягкая небесно-голубая аккуратная базовая рамка вокруг поля */
    background-color: #ffffff;                  /* Чистый белый внутренний фоновый цвет инпута */
    border-radius: 12px;                        /* Плавное скругление углов у текстового поля ввода */
    font-family: 'Comic Sans MS', sans-serif;   /* Поддерживаем единый рукописный детский шрифт урока */
    font-size: 0.95rem;                         /* Оптимальный размер букв при составлении предложений */
    padding: 0 15px;                            /* Внутренние боковые отступы, чтобы буквы не прилипали к рамке */
    outline: none;                              /* Отключаем стандартную грубую обводку фокуса от браузера */
    color: #2c3e50;                             /* Контрастный темно-синий цвет шрифта для легкого чтения букв */
    transition: all 0.3s ease;                  /* Включаем плавную анимацию переключения цветов при валидации */
    box-sizing: border-box;                     /* Паддинги включаются в расчет размеров для защиты от вылетов верстки */
}

.l21-t9-sentence-input:focus {
    border-color: #ff7043;                      /* Рамка становится теплой оранжевой в момент составления фразы */
    background-color: #fffde7;                  /* Придаем активному полю нежный желтоватый оттенок */
}

.l21-t9-sentence-input.success-sentence {
    border-color: #27ae60 !important;           /* Принудительно окрашиваем контур ячейки в зеленый цвет */
    background-color: #f2fdf5 !important;       /* Принудительно меняем фон инпута на нежно-зеленый успех */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ ТЕЛЕФОНОВ */
@media (max-width: 550px) {
    .l21-t9-row {
        flex-direction: column;                 /* На смартфонах перестраиваем плашку слова строго над полем ввода */
        align-items: flex-start;                /* Выравниваем элементы по левому краю строки */
        gap: 6px;                               /* Сокращаем расстояние между элементами */
    }
    .l21-t9-word-badge {
        width: auto;                            /* Убираем фиксированную ширину, плашка подстраивается под слово */
        display: inline-block;
    }
}