/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
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: КОЛЛАЖИ И 10 ПОЛЕЙ ДЛЯ ПРЕДЛОЖЕНИЙ --- */

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

.l20-t1-collage-img {
    max-width: 100%;                            /* Коллаж гибко сжимается под размеры родительской карточки */
    height: auto;                               /* Высота картинки масштабируется пропорционально ширине */
    border-radius: 15px;                        /* Аккуратно скругляем углы у изображения коллажа */
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);    /* Добавляем мягкую тень для эстетичного отделения от фон */
}

.l20-t1-sentences-wrapper {
    display: flex;                              /* Включаем флекс для построения вертикального списка */
    flex-direction: column;                     /* Выстраиваем строки предложений строго друг под другом */
    gap: 12px;                                  /* Устанавливаем фиксированный зазор между инпутами */
    margin: 15px 0 30px 0;                      /* Задаем отступы (снизу зазор больше перед вторым коллажем) */
    width: 100%;                                /* Обертка полей занимает всю ширину рабочей области */
    box-sizing: border-box;                     /* Защищаем контейнер от вылетов за границы карточки */
}

.l20-t1-row {
    display: flex;                              /* Элементы строки (номер и поле) встают в одну линию */
    align-items: center;                        /* Центрируем цифру и инпут по вертикальной оси */
    gap: 12px;                                  /* Устанавливаем расстояние от цифры до начала поля */
    width: 100%;                                /* Строка занимает 100% ширины родительского Wrapper */
    box-sizing: border-box;                     /* Гарантируем, что строка не выйдет за рамки карточки */
}

.l20-t1-row-num {
    font-size: 1.2em;                           /* Делаем цифру номера крупной и приметной для ребенка */
    font-weight: bold;                          /* Устанавливаем жирное начертание для номеров строк */
    color: #ff7043;                             /* Применяем приятный теплый оранжевый цвет к номерам */
    min-width: 30px;                            /* Задаем минимальную ширину, чтобы все инпуты стояли ровно */
}

.l20-t1-input {
    flex: 1;                                    /* Текстовое поле автоматически забирает все место в строке */
    box-sizing: border-box;                     /* Внутренние паддинги инпута не расширяют его наружу */
    padding: 10px 15px;                         /* Широкие поля внутри инпута для удобства набора предложений */
    border: 2px solid #90caf9;                  /* Задаем красивую базовую небесно-голубую рамку поля */
    border-radius: 12px;                        /* Мягко скругляем углы у текстового поля ввода */
    font-family: 'Comic Sans MS', sans-serif;   /* Применяем основной шрифт урока для текста ребенка */
    font-size: 1rem;                            /* Оптимальный размер шрифта для вводимых букв */
    outline: none;                              /* Прячем стандартный грубый контур фокуса от браузера */
    transition: all 0.3s ease;                  /* Включаем плавное изменение цветов при проверке */
}

/* Эффект при клике на текстовое поле */
.l20-t1-input:focus {
    border-color: #ff7043;                      /* Рамка становится теплой оранжевой при активации поля */
}

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

/* --- ЗАДАНИЕ 2: ЦОКОЛОЧКА-ХУДОЖНИЦА (ПОСТРОЧНЫЙ КОММЕНТАРИЕМ С СЕТКОЙ 3Х4) --- */

.l20-t2-art-grid {
    display: grid;                              /* Активируем технологию Grid для создания таблицы */
    grid-template-columns: repeat(4, 1fr);      /* Создаем ровно 4 равные колонки в каждом ряду */
    grid-template-rows: repeat(3, auto);        /* Фиксируем 3 горизонтальных ряда для карточек */
    gap: 10px 5px;                             /* Задаем вертикальный шаг 20px, горизонтальный 15px */
    margin: 25px 0;                             /* Задаем внешние отступы всего игрового поля */
    width: 100%;                                /* Сетка растягивается на 100% ширины белой карточки */
    box-sizing: border-box;                     /* Защищаем сетку от вылетов, включая паддинги в расчет ширины */
}

.l20-t2-art-item {
    display: flex;                              /* Делаем карточку предмета гибким флекс-контейнером */
    flex-direction: column;                     /* Располагаем холст с картинкой над текстовой подписью */
    align-items: center;                        /* Центрируем рисунок и подпись строго по горизонтали */
    background: #ffffff;                        /* Задаем чистый белый фон для подложки карточки */
    padding: 12px 10px;                         /* Добавляем внутренние защитные поля со всех сторон */
    border-radius: 20px;                        /* Красиво скругляем углы у подложки каждого предмета */
    border: 2px solid #e1e8ee;                  /* Очерчиваем карточку аккуратной серо-голубой рамкой */
    cursor: pointer;                            /* Изменяем курсор мыши на палец при наведении */
    transition: all 0.3s ease;                  /* Включаем плавную анимацию для любых визуальных изменений */
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);     /* Накладываем едва заметную мягкую тень для объема */
}

/* Эффект легкого приподнятия карточки при наведении мышки */
.l20-t2-art-item:hover {
    transform: translateY(-3px);                /* Смещаем карточку на 3 пикселя вверх */
    border-color: #90caf9;                      /* Окрашиваем рамку карточки в нежно-голубой цвет */
}

.l20-t2-canvas-box {
    width: 100%;                                /* Контейнер холста занимает полную ширину карты */
    height: 110px;                              /* Фиксируем высоту холста для ровного размещения картинок */
    display: flex;                              /* Активируем флекс для идеального центрирования */
    align-items: center;                        /* Центрируем рисунок внутри холста по вертикали */
    justify-content: center;                    /* Центрируем рисунок внутри холста по горизонтали */
    position: relative;                         /* База для контроля слоев и позиционирования */
    overflow: hidden;                           /* Обрезаем любые случайные вылеты за рамки холста */
}

.l20-t2-art-img {
    max-width: 99%;                             /* Рисунок занимает максимум 95% ширины холста */
    max-height: 99%;                            /* Рисунок занимает максимум 95% высоты холста */
    object-fit: contain;                        /* Картинка масштабируется без искажений пропорций */
    transition: clip-path 0.5s ease-out;        /* Плавная анимация проявления второй части через clip-path */
    /* ЭФФЕКТ СКРЫТИЯ: Обрезаем правую половину картинки (показываем только левую от 0% до 50% ширины) */
    clip-path: inset(0 50% 0 0); 
}

/* КЛАСС-ТРИГГЕР: Добавляется через JS при клике. Снимает ограничение, проявляя картинку целиком! */
.l20-t2-art-item.completed .l20-t2-art-img {
    clip-path: inset(0 0 0 0);                  /* Сбрасываем обрезку, полностью проявляя рисунок */
}

/* Изменение стиля карточки, когда предмет успешно "дорисован" ребенком */
.l20-t2-art-item.completed {
    border-color: #2ecc71;                      /* Перекрашиваем рамку готовой карточки в зеленый цвет */
    background-color: #ffffff;                  /* Даем карточке мягкий приятный зеленоватый оттенок */
}

.l20-t2-art-label {
    margin-top: 10px;                           /* Отступаем сверху от холста до текстовой подписи */
    font-size: 0.95rem;                         /* Задаем оптимальный размер шрифта для названия предмета */
    font-weight: bold;                          /* Делаем название предмета жирным для легкого чтения */
    color: #34495e;                             /* Применяем контрастный благородный серо-синий цвет */
    opacity: 0;                                 /* Изначально прячем название, пока картинка не дорисована */
    transition: opacity 0.4s ease;              /* Плавное проявление названия вместе со второй половинкой */
}

/* Проявление названия предмета при успешном клике */
.l20-t2-art-item.completed .l20-t2-art-label {
    opacity: 1;                                 /* Делаем текст названия полностью видимым */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ ТЕЛЕФОНОВ */
@media (max-width: 650px) {
    .l20-t2-art-grid {
        grid-template-columns: repeat(2, 1fr);  /* Перестраиваем таблицу в 2 колонки на узких дисплеях */
    }
}

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

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

.l20-t3-side {
    display: grid;                              /* Включаем сетку внутри каждой стороны галереи */
    grid-template-columns: repeat(2, 1fr);      /* Создаем ровно 2 колонки на каждой стороне (итого 4 колонки) */
    gap: 15px;                                  /* Расстояние между соседними рамками портретов */
    flex: 1;                                    /* Обе стороны занимают одинаковое свободное пространство */
}

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

.l20-t3-card img {
    max-width: 100%;                            /* Портрет аккуратно сжимается по ширине рамки */
    max-height: 100%;                           /* Портрет аккуратно сжимается по высоте рамки */
    object-fit: contain;                        /* Исключаем любые деформации или обрезку рисунка человека */
    border-radius: 8px;                         /* Легкое скругление углов у самих портретов внутри рамки */
}

/* Эффект выделения карточки, когда ребенок на нее нажал (выбор справа) */
.l20-t3-card.selected {
    border-color: #ffaa00;                      /* Окрашиваем рамку выбранной карты в ярко-желтый цвет */
    transform: scale(1.03);                     /* Слегка увеличиваем выбранный портрет для акцента внимания */
    box-shadow: 0 4px 10px rgba(255,170,0,0.2); /* Накладываем мягкое золотистое свечение вокруг рамки */
}

/* Блокировка кликов по уже собранным парам портретов */
.l20-t3-card.matched {
    pointer-events: none;                       /* Запрещаем любые повторные клики мыши по готовым картам */
}

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

/* Царь и царица - красный контур */
.l20-t3-card.match-rulers {
    border-color: #e74c3c !important;           /* Принудительно устанавливаем сочный красный цвет границ */
    box-shadow: 0 0 8px rgba(231,76,60,0.3);    /* Добавляем легкое красное свечение вокруг рамок */
}

/* Принц и принцесса - синий контур */
.l20-t3-card.match-royals {
    border-color: #3498db !important;           /* Принудительно устанавливаем красивый синий цвет границ */
    box-shadow: 0 0 8px rgba(52,152,219,0.3);   /* Добавляем легкое синее свечение вокруг рамок */
}

/* Певец и певица - розовый контур */
.l20-t3-card.match-singers {
    border-color: #f48fb1 !important;           /* Принудительно устанавливаем нежный розовый цвет границ */
    box-shadow: 0 0 8px rgba(244,143,177,0.3);  /* Добавляем легкое розовое свечение вокруг рамок */
}

/* Цыган и цыганка - зеленый контур */
.l20-t3-card.match-gypsies {
    border-color: #2ecc71 !important;           /* Принудительно устанавливаем насыщенный зеленый цвет границ */
    box-shadow: 0 0 8px rgba(46,204,113,0.3);   /* Добавляем легкое зеленое свечение вокруг рамок */
}

/* Канатоходец и укротительница - фиолетовый контур */
.l20-t3-card.match-circus {
    border-color: #9b59b6 !important;           /* Принудительно устанавливаем глубокий фиолетовый цвет границ */
    box-shadow: 0 0 8px rgba(155,89,182,0.3);   /* Добавляем легкое фиолетовое свечение вокруг рамок */
}

/* Кузнец и молочница - оранжевый контур */
.l20-t3-card.match-workers {
    border-color: #e67e22 !important;           /* Принудительно устанавливаем яркий оранжевый цвет границ */
    box-shadow: 0 0 8px rgba(230,126,34,0.3);   /* Добавляем легкое оранжевое свечение вокруг рамок */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ СМАРТФОНОВ */
@media (max-width: 700px) {
    .l20-t3-gallery-wrapper {
        flex-direction: column;                 /* Перестраиваем блоки сторон вертикально друг под друга */
    }
}

/* --- ЗАДАНИЕ 4: ДОМИКИ "ГОСТИ" (СЕТКА 2Х2 С КОММЕНТАРИЯМИ) --- */

.l20-t4-houses-grid {
    display: grid;                              /* Активируем технологию Grid для построения таблицы домиков */
    grid-template-columns: repeat(2, 1fr);      /* Создаем строго две колонки одинаковой ширины */
    gap: 25px;                                  /* Устанавливаем комфортные зазоры между домиками */
    margin: 20px 0;                             /* Задаем внешние вертикальные отступы для всего блока */
    width: 100%;                                /* Сетка занимает полную ширину родительской карточки */
    box-sizing: border-box;                     /* Включаем внутренние поля в расчет общих размеров */
}

.l20-t4-house-item {
    display: flex;                              /* Делаем блок домика вертикальным флекс-контейнером */
    flex-direction: column;                     /* Располагаем рисунок домика строго над полем ввода слов */
    align-items: center;                        /* Центрируем картинку и инпут по горизонтальной оси */
    background: #ffffff;                        /* Устанавливаем чистый белый фон для подложки домика */
    padding: 15px;                              /* Задаем внутренние отступы рабочей зоны карточки */
    border-radius: 20px;                        /* Красиво скругляем внешние углы карточки домика */
    border: 2px solid #e1e8ee;                  /* Очерчиваем домик аккуратной серо-голубой рамкой */
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);     /* Накладываем легкую мягкую тень под карточку */
}

.l20-t4-img-box {
    width: 100%;                                /* Контейнер картинки занимает полную доступную ширину */
    height: 260px;                              /* Фиксируем высоту для ровного отображения чертежей домиков */
    display: flex;                              /* Активируем флекс для центрирования сканов домиков */
    align-items: center;                        /* Выравниваем картинку внутри бокса по центру вертикали */
    justify-content: center;                    /* Выравниваем картинку внутри бокса по центру горизонтали */
    margin-bottom: 15px;                        /* Зазор снизу от картинки до начала поля ввода слов */
}

.l20-t4-img-box img {
    max-width: 100%;                            /* Рисунок домика аккуратно сжимается по ширине бокса */
    max-height: 100%;                           /* Рисунок домика аккуратно сжимается по высоте бокса */
    object-fit: contain;                        /* Исключаем любые деформации или обрезку штрихов рисунка */
}

.l20-t4-input {
    width: 100%;                                /* Текстовое поле занимает полную ширину карточки домика */
    box-sizing: border-box;                     /* Паддинги инпута учитываются внутри его общей ширины */
    padding: 10px 12px;                         /* Удобные внутренние поля инпута для комфортного набора текста */
    border: 2px solid #bdc3c7;                  /* Задаем базовую нейтральную серую рамку поля ввода */
    border-radius: 12px;                        /* Аккуратно скругляем углы у поля ввода предложений */
    font-family: 'Comic Sans MS', sans-serif;   /* Используем основной детский рукописный шрифт урока */
    font-size: 0.95rem;                         /* Оптимальный читаемый размер букв при заполнении ребенком */
    text-align: center;                         /* Вводимый текст пишется строго по центру инпута */
    outline: none;                              /* Отключаем стандартный грубый синий контур фокуса браузера */
    transition: all 0.3s ease;                  /* Включаем плавную анимацию переключения цветов рамок */
}

/* Эффект при клике на текстовое поле домика */
.l20-t4-input:focus {
    border-color: #ff7043;                      /* Рамка становится теплой оранжевой при активации поля */
}

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

/* Стилизация блока словаря справок */
.l20-t4-vocabulary {
    margin-top: 20px;                           /* Отступаем сверху от сетки домиков до словаря */
    padding: 12px 15px;                         /* Внутренние поля для аккуратного обособления текста */
    background: #fff9c4;                        /* Нежно-желтый приятный фон плашки словаря подсказок */
    border-radius: 12px;                        /* Скругляем углы у рамки плашки словаря */
    border: 1px dashed #fbc02d;                 /* Делаем пунктирную желтую границу вокруг подсказок */
    font-size: 0.95rem;                         /* Комфортный размер шрифта для чтения слов ребенком */
    color: #34495e;                             /* Серо-синий спокойный цвет букв словаря */
    line-height: 1.4;                           /* Комфортный межстрочный интервал для легкого чтения */
}

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

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

.l20-t5-maze-container {
    display: flex;                              /* Активируем флекс-контейнер для управления позиционированием */
    justify-content: center;                    /* Центрируем картинку лабиринта строго по горизонтали */
    align-items: center;                        /* Центрируем картинку лабиринта по вертикали внутри области */
    background-color: #ffffff;                  /* Задаем чистый белый фон в качестве подложки под картинку */
    padding: 15px;                              /* Внутренние поля-отступы для защиты краев лабиринта от слипания */
    border-radius: 20px;                        /* Мягко скругляем внешние углы общей подложки лабиринта */
    border: 2px solid #e1e8ee;                  /* Контурируем зону лабиринта тонкой серо-голубой рамкой */
    margin-bottom: 20px;                        /* Зазоры снизу от лабиринта до начала плашки словаря */
    width: 100%;                                /* Контейнер обертки занимает всю ширину белой карточки */
    box-sizing: border-box;                     /* Включаем паддинги в расчет размеров во избежание вылетов */
}

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

.l20-t5-vocabulary-box {
    padding: 12px 18px;                         /* Внутренние комфортные поля для красивого обособления текста */
    background-color: #fff9c4;                  /* Нежно-желтый сказочный фон плашки слов-подсказок */
    border-radius: 15px;                        /* Округляем углы у рамки плашки словаря подсказок */
    border: 2px dashed #fbc02d;                 /* Создаем эстетичную пунктирную границу вокруг слов */
    font-size: 1.05rem;                         /* Оптимальный, удобный для чтения ребенком размер шрифта */
    color: #2c3e50;                             /* Контрастный темно-синий благородный цвет букв словаря */
    line-height: 1.4;                           /* Комфортный межстрочный интервал для легкого восприятия */
    margin-bottom: 10px;                        /* Внешний отступ снизу от плашки до области вывода результата */
}

.l20-t5-vocabulary-box b {
    color: #ff6d00;                             /* Выделяем вводную фразу словаря сочным оранжевым цветом */
}

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

.l20-t6-maze-wrapper {
    display: flex;                              /* Активируем флекс-контейнер для центрирования изображения лабиринта */
    justify-content: center;                    /* Центрируем карту лабиринта строго по горизонтали */
    align-items: center;                        /* Центрируем карту лабиринта по вертикальной оси */
    background-color: #ffffff;                  /* Задаем чистый белый фон в качестве основы подложки лабиринта */
    padding: 15px;                              /* Внутренние поля для защиты сетки лабиринта от зажатия краями */
    border-radius: 20px;                        /* Мягко скругляем внешние углы общей подложки лабиринта */
    border: 2px solid #e1e8ee;                  /* Контурируем зону лабиринта аккуратной серо-голубой рамкой */
    margin-bottom: 20px;                        /* Задаем внешний отступ снизу до начала панели упражнений */
    width: 100%;                                /* Контейнер обертки забирает всю ширину родительской белой карточки */
    box-sizing: border-box;                     /* Включаем внутренние паддинги в расчет ширины для защиты от вылетов */
}

.l20-t6-maze-img {
    max-width: 100%;                            /* Лабиринт пропорционально и гибко сжимается под размеры карточки */
    height: auto;                               /* Высота картинки лабиринта рассчитывается автоматически */
    display: block;                             /* Превращаем картинку в блок, убирая нижние строчные зазоры */
    border-radius: 12px;                        /* Легкое эстетичное скругление углов самого бланка лабиринта */
}

.l20-t6-exercises-panel {
    display: flex;                              /* Активируем флекс для построения списка упражнений */
    flex-direction: column;                     /* Направляем строки речевых упражнений сверху вниз */
    gap: 12px;                                  /* Устанавливаем аккуратный зазор между абзацами заданий */
    padding: 15px;                              /* Внутренние поля для аккуратного обособления текстового контента */
    background-color: #fff9c4;                  /* Нежно-желтый фоновый цвет плашки речевых упражнений */
    border-radius: 15px;                        /* Скругляем углы у границ плашки текстовых заданий */
    border: 2px dashed #fbc02d;                 /* Создаем красивую пунктирную желтую границу вокруг текста */
    font-size: 1rem;                            /* Задаем оптимальный, удобный для чтения размер шрифта */
    color: #2c3e50;                             /* Контрастный темно-синий цвет для легкого чтения букв ребенком */
    line-height: 1.3;                           /* Оптимальный межстрочный интервал для предотвращения слипания текста */
    margin-bottom: 10px;                        /* Внешний отступ снизу до строки вывода сообщения результата */
}

.l20-t6-ex-row b {
    color: #ff6d00;                             /* Выделяем названия логопедических упражнений сочным оранжевым цветом */
}

.l20-t6-example {
    display: block;                             /* Выносим текст образцов выполнения упражнений на отдельную строчку */
    font-style: italic;                         /* Делаем начертание шрифта примеров курсивным */
    color: #7f8c8d;                             /* Применяем мягкий нейтральный серый цвет к примерам */
    margin-top: 3px;                            /* Небольшой зазор сверху от основного правила до примера */
}

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

.l20-t7-maze-wrapper {
    display: flex;                              /* Активируем флекс-контейнер для центрирования изображения лабиринта */
    justify-content: center;                    /* Центрируем карту лабиринта строго по горизонтали */
    align-items: center;                        /* Центрируем карту лабиринта по вертикальной оси */
    background-color: #ffffff;                  /* Задаем чистый белый фон в качестве основы подложки лабиринта */
    padding: 15px;                              /* Внутренние поля для защиты сетки лабиринта от зажатия краями */
    border-radius: 20px;                        /* Мягко скругляем внешние углы общей подложки лабиринта */
    border: 2px solid #e1e8ee;                  /* Контурируем зону лабиринта аккуратной серо-голубой рамкой */
    margin-bottom: 20px;                        /* Задаем внешний отступ снизу до начала панели упражнения */
    width: 100%;                                /* Контейнер обертки забирает всю ширину родительской белой карточки */
    box-sizing: border-box;                     /* Включаем внутренние паддинги в расчет ширины для защиты от вылетов */
}

.l20-t7-maze-img {
    max-width: 100%;                            /* Лабиринт пропорционально и гибко сжимается под размеры карточки */
    height: auto;                               /* Высота картинки лабиринта рассчитывается автоматически */
    display: block;                             /* Превращаем картинку в блок, убирая нижние дефолтные зазоры */
    border-radius: 12px;                        /* Легкое эстетичное скругление углов самого бланка лабиринта */
}

.l20-t7-exercise-panel {
    padding: 15px;                              /* Внутренние поля для аккуратного обособления текстового контента */
    background-color: #fff9c4;                  /* Нежно-желтый фоновый цвет плашки речевого упражнения */
    border-radius: 15px;                        /* Скругляем углы у границ плашки текстового задания */
    border: 2px dashed #fbc02d;                 /* Создаем красивую пунктирную желтую границу вокруг текста */
    font-size: 1rem;                            /* Задаем оптимальный, удобный для чтения размер шрифта */
    color: #2c3e50;                             /* Контрастный темно-синий цвет для легкого чтения букв ребенком */
    line-height: 1.4;                           /* Оптимальный межстрочный интервал для предотвращения слипания текста */
    margin-bottom: 10px;                        /* Внешний отступ снизу до строки вывода сообщения результата */
}

.l20-t7-exercise-panel b {
    color: #ff6d00;                             /* Выделяем вводную фразу правила сочным оранжевым цветом */
}

.l20-t7-example {
    display: block;                             /* Выносим текст образцов выполнения упражнений на отдельную строчку */
    font-style: italic;                         /* Делаем начертание шрифта примеров курсивным */
    color: #7f8c8d;                             /* Применяем мягкий нейтральный серый цвет к примерам */
    margin-top: 5px;                            /* Небольшой зазор сверху от основного правила до примера */
}

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

.l20-t8-transformation-banner {
    display: flex;                              /* Активируем флекс-контейнер для точного центрирования сказки */
    justify-content: center;                    /* Помещаем картину Ивана-царевича строго по центру карточки */
    align-items: center;                        /* Центрируем изображение по вертикальной оси */
    background-color: #ffffff;                  /* Задаем белый чистый фон в качестве основы подложки картины */
    padding: 10px;                              /* Внутренние небольшие поля для аккуратной рамки вокруг холста */
    border-radius: 25px;                        /* Красиво и сильно скругляем внешние углы подложки картинки */
    border: 3px solid #e1e8ee;                  /* Контурируем зону сказки аккуратной серо-голубой рамкой */
    margin: 15px auto 25px auto;                /* Задаем внешние отступы (снизу больше, чтобы отодвинуть игру) */
    max-width: 100%;                            /* Ограничиваем максимальную ширину контейнера рамками карточки */
    box-sizing: border-box;                     /* Гарантируем безопасность паддингов без вылета за границы */
    overflow: hidden;                           /* Скрываем любые элементы, случайно выходящие за рамки скругления */
}

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

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

.l20-t8-words-side {
    display: flex;                              /* Активируем флекс внутри левой текстовой колонки */
    flex-direction: column;                     /* Располагаем плашки слов строго друг под другом вертикально */
    gap: 10px;                                  /* Шаг-расстояние между соседними кнопками прилагательных */
    flex: 1;                                    /* Колонка со словами гибко занимает половину пространства доски */
}

.l20-t8-word-card {
    background-color: #ffffff;                  /* Базовый чистый белый фон плашки со словом */
    border: 2px solid #bdc3c7;                  /* Нейтральная серая аккуратная рамка вокруг слова */
    border-radius: 12px;                        /* Мягко скругляем углы у текстовой плашки */
    padding: 10px;                              /* Внутренние поля плашки для удобного клика пальцем */
    text-align: center;                         /* Текст внутри плашки располагается строго по центру */
    font-weight: bold;                          /* Устанавливаем жирное начертание для легкого прочтения слова */
    font-size: 1.1rem;                          /* Читаемый, слегка увеличенный масштаб букв */
    color: #2c3e50;                             /* Благородный темно-синий цвет шрифта прилагательных */
    cursor: pointer;                            /* Изменяем курсор мыши на палец при наведении */
    transition: all 0.2s ease;                  /* Плавная анимация переключения цветов при выделении и ответе */
}

.l20-t8-images-side {
    display: grid;                              /* Включаем сетку для карточек рисунков предметов */
    grid-template-columns: repeat(2, 1fr);      /* Картинки располагаются аккуратной таблицей 2 на 4 */
    gap: 10px;                                  /* Фиксированный зазор между соседними ячейками картинок */
    flex: 1;                                    /* Графическая сторона занимает равную со словами долю ширины */
}

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

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

/* СОСТОЯНИЯ ВЫБОРКИ И ВАЛИДАЦИИ */

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

/* Зеленая рамка при успешном и верном сопоставлении пары */
.l20-t8-word-card.matched, .l20-t8-img-card.matched {
    border-color: #2ecc71 !important;           /* Принудительно меняем цвет рамки на зеленый цвет успеха */
  
    color: #27ae60;                             /* Меняем цвет букв решенного слова на темно-зеленый */
    pointer-events: none;                       /* Полностью блокируем повторные клики по решенной паре */
    box-shadow: none;                           /* Сбрасываем любые тени для фиксации стабильного состояния */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ СМАРТФОНОВ */
@media (max-width: 600px) {
    .l20-t8-game-container {
        flex-direction: column;                 /* Перестраиваем блоки слов и картинок вертикально в один ряд */
    }
}

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

.l20-t9-crossword-container {
    display: flex;                              /* Строим вертикальный список строк кроссворда */
    flex-direction: column;                     /* Направляем элементы сверху вниз */
    gap: 6px;                                   /* Устанавливаем аккуратный зазор между рядами букв */
    margin: 20px auto;                          /* Центрируем кроссворд по горизонтали и задаем внешние отступы */
    max-width: 440px;                           /* Ограничиваем предельную ширину сетки для ровных пропорций */
    width: 100%;                                /* Сетка растягивается на всю доступную ширину внутри карты */
    box-sizing: border-box;                     /* Паддинги учитываются внутри общих размеров во избежание вылетов */
}

.l20-t9-row {
    display: flex;                              /* Выстраиваем номер строки и квадратики букв в одну линию */
    align-items: center;                        /* Идеально центрируем элементы строки по вертикали */
    gap: 4px;                                   /* Минимальный зазор между соседними клеточками букв */
    width: 100%;                                /* Строка занимает всю доступную ширину контейнера */
}

.l20-t9-num {
    display: inline-block;                      /* Даем возможность задать четкие размеры для круга нумерации */
    width: 28px;                                /* Фиксированная ширина синего кружка номера */
    height: 28px;                               /* Фиксированная высота синего кружка номера */
    border: 2px solid #0d47a1;                  /* Насыщенная синяя рамка вокруг цифры */
    border-radius: 50%;                         /* Скругляем элемент до состояния идеального круга */
    text-align: center;                         /* Выравниваем текст цифры строго по центру горизонтали */
    line-height: 24px;                          /* Выравниваем текст цифры по вертикальной оси внутри круга */
    font-weight: bold;                          /* Делаем шрифт цифр жирным и заметным */
    color: #0d47a1;                             /* Применяем фирменный синий цвет к номерам строк */
    font-size: 1.1em;                           /* Оптимально увеличиваем размер шрифта цифр */
    margin-right: 5px;                          /* Зазор справа от кружка до первой рабочей ячейки */
    flex-shrink: 0;                             /* Запрещаем сжатие круга при изменении размеров экрана */
}

.l20-t9-cell {
    width: 38px;                                /* Задаем ячейке фиксированную базовую ширину */
    height: 38px;                               /* Задаем ячейке фиксированную базовую высоту для формы квадрата */
    text-align: center;                         /* Печатаемая ребенком буква пишется строго по центру ячейки */
    font-family: 'Comic Sans MS', sans-serif;   /* Используем основной детский рукописный шрифт урока */
    font-size: 1.3rem;                          /* Устанавливаем крупный, комфортный для глаз размер букв */
    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;                  /* Включаем плавную анимацию изменения цвета рамок */
}

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

/* Визуальная подсветка всей строки при правильном заполнении слова */
.l20-t9-row.success .l20-t9-cell {
    border-color: #27ae60;                      /* Окрашиваем рамки букв угаданного слова в зеленый цвет */
    background-color: #f2fdf5;                  /* Даем клеткам слова нежный светло-зеленый фон успеха */
    color: #27ae60;                             /* Делаем сами буквы темно-зелеными */
}

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

.l20-t9-hints-img {
    max-width: 100%;                            /* Коллаж подсказок гибко сжимается под ширину карточки */
    height: auto;                               /* Высота картинки масштабируется пропорционально ширине */
    border-radius: 15px;                        /* Мягко скругляем внешние углы общего бланка подсказок */
}