/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
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 */
/* --- ЗАДАНИЕ 1: ПУТАНИЦА (ДВЕ КОЛОНКИ) --- */

.l19-t1-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

/* Создаем сетку: левая колонка подстраивается под текст, правая забирает максимум места */
.l19-t1-grid-row {
    display: grid;
    grid-template-columns: 280px 1fr; /* Фиксированная левая часть и широкая правая */
    align-items: center;
    gap: 15px;
}

.l19-t1-col-words {
    font-size: 1.1em;
    color: #34495e;
    text-align: right; /* Прижимаем слова к полю ввода для наглядности */
    font-weight: bold;
    line-height: 1.2;
}

.l19-t1-col-input {
    width: 100%;
}

.l19-t1-input {
    width: 100%; /* Растягивается на всю ширину правой колонки */
    box-sizing: border-box;
    padding: 10px 15px;
    border: 3px solid #90caf9;
    border-radius: 12px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

/* Фокус и валидация */
.l19-t1-input:focus { border-color: #ff7043; background-color: #fff; }
.l19-input-success { border-color: #2ecc71 !important; background-color: #f2fdf5; }
.l19-input-error { border-color: #e74c3c !important; background-color: #fdf2f2; }

/* Адаптив для узких экранов */
@media (max-width: 600px) {
    .l19-t1-grid-row {
        grid-template-columns: 1fr; /* На телефонах переходим в одну колонку */
    }
    .l19-t1-col-words { text-align: left; }
}

/* --- ЗАДАНИЕ 2: РАСКРАСЬ ПОЛОВИНКИ --- */

.l19-t2-grid {
    display: grid;                          /* Включаем сетку для расположения карточек */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Колонки подстраиваются под ширину экрана */
    gap: 20px;                              /* Устанавливаем расстояние между карточками */
    margin: 30px 0;                         /* Внешние отступы всего блока (сверху/снизу) */
}

.l18-t2-item {
    display: flex;                          /* Включаем флекс-контейнер для элементов внутри карточки */
    flex-direction: column;                 /* Располагаем элементы (картинку и подпись) вертикально */
    align-items: center;                    /* Центрируем содержимое по горизонтали */
}

.l19-t2-split-box {
    position: relative;                     /* База для абсолютного позиционирования зон клика */
    width: 140px;                           /* Фиксированная ширина контейнера картинки */
    height: 140px;                          /* Фиксированная высота контейнера картинки */
    background: #ffffff;                    /* Белый фон под картинкой */
    border-radius: 15px;                    /* Скругляем углы рамки */
    border: 2px solid #e1e8ee;              /* Тонкая серо-голубая рамка */
    overflow: hidden;                       /* Обрезаем всё, что выходит за границы скругления */
}

.l19-t2-split-box img {
    width: 100%;                            /* Растягиваем картинку на всю ширину блока */
    height: 100%;                           /* Растягиваем картинку на всю высоту блока */
    object-fit: contain;                    /* Масштабируем без искажений, вписывая в квадрат */
    position: absolute;                     /* Размещаем картинку слоем под зонами клика */
    z-index: 1;                             /* Устанавливаем нижний слой */
}

.l19-t2-half {
    position: absolute;                     /* Накладываем зоны выбора поверх картинки */
    top: 0;                                 /* Прижимаем зону к верхнему краю */
    width: 50%;                             /* Каждая зона занимает ровно половину ширины */
    height: 100%;                           /* Каждая зона занимает всю высоту */
    z-index: 2;                             /* Устанавливаем верхний слой для регистрации кликов */
    cursor: pointer;                        /* Меняем курсор на "палец" при наведении */
    transition: background 0.3s ease;       /* Плавная анимация изменения цвета при клике */
    opacity: 0.4;                           /* Полупрозрачность для эффекта наложения цвета */
}

.l19-t2-half.left {
    left: 0;                                /* Позиционируем левую зону в начало блока */
    border-right: 1px dashed #cccccc;       /* Разделительная линия между половинками */
}

.l19-t2-half.right {
    right: 0;                               /* Позиционируем правую зону в конец блока */
}

/* Эффект закрашивания при выборе */
.l19-t2-half.selected {
    background-color: #ffeb3b;              /* Жёлтый цвет, имитирующий закраску карандашом */
    opacity: 0.6;                           /* Делаем цвет чуть плотнее при активации */
}

.l19-t2-label {
    margin-top: 10px;                       /* Отступ подписи от картинки */
    font-weight: bold;                      /* Делаем название предмета жирным */
    color: #2c3e50;                         /* Тёмно-синий цвет текста */
    font-size: 1.1em;                       /* Слегка увеличиваем размер шрифта */
}

/* --- ЗАДАНИЕ 3: ТРИ СТОЛБЦА СЛОГОВ --- */

.l19-t3-container {
    display: flex;                          /* Включаем флекс-контейнер для создания колонок */
    justify-content: space-between;         /* Распределяем колонки равномерно по ширине карточки */
    align-items: flex-start;                /* Выравниваем содержимое колонок по верхнему краю */
    gap: 10px;                              /* Устанавливаем минимальный зазор между столбцами */
    margin: 20px 0;                         /* Внешние отступы всего блока (сверху/снизу) */
}

.l19-t3-column {
    flex: 1;                                /* Позволяем каждой колонке занимать равную часть места */
    text-align: center;                     /* Центрируем текст внутри каждой колонки */
}

.l19-t3-column p {
    margin: 12px 0;                         /* Задаем вертикальные интервалы между строками слогов */
    font-size: 1.3em;                       /* Устанавливаем крупный, удобный для чтения размер шрифта */
    line-height: 1.3;                       /* Устанавливаем оптимальный межстрочный интервал */
    color: #2c3e50;                         /* Используем контрастный темно-синий цвет для текста */
    letter-spacing: 1px;                    /* Немного увеличиваем расстояние между буквами в слогах */
}

/* --- ЗАДАНИЕ 4: РОДСТВЕННЫЕ СЛОВА --- */

.l19-t4-sentences {
    background: #ffffff;                    /* Белый фон для блока с предложениями */
    padding: 15px 20px;                     /* Внутренние отступы для текста */
    border-radius: 20px;                    /* Скругляем углы блока */
    border: 2px dashed #90caf9;             /* Пунктирная голубая рамка для выделения */
    margin-bottom: 25px;                    /* Отступ снизу перед списком слов */
}

.l19-t4-sentences p {
    margin: 8px 0;                          /* Интервалы между предложениями */
    font-size: 1.15em;                      /* Удобный размер шрифта */
    line-height: 1.4;                       /* Хороший межстрочный интервал */
    color: #2c3e50;                         /* Тёмно-синий цвет текста */
}

.l19-t4-sentences b {
    color: #e67e22;                         /* Выделяем родственные слова оранжевым цветом */
}

.l19-t4-grid {
    display: flex;                          /* Используем флекс для создания трёх колонок */
    justify-content: space-around;          /* Равномерно распределяем колонки по ширине */
    background: #fff9c4;                    /* Светло-жёлтый фон для блока со словами */
    padding: 15px;                          /* Внутренние отступы */
    border-radius: 15px;                    /* Скругляем углы */
}

.l19-t4-col {
    text-align: center;                     /* Центрируем слова внутри каждой колонки */
}

.l19-t4-col p {
    margin: 10px 0;                         /* Зазоры между словами в колонке */
    font-size: 1.3em;                       /* Крупный размер шрифта для чтения */
    font-weight: bold;                      /* Делаем слова жирными */
    color: #ff6d00;                         /* Ярко-оранжевый цвет для акцента на звук Ц */
}

/* --- ЗАДАНИЕ 5: ТЕАТР ТЕНЕЙ --- */

.l19-t5-grid {
    display: grid;                          /* Включаем сетку для карточек теней */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Автоматические колонки в зависимости от ширины */
    gap: 20px;                              /* Расстояние между карточками */
    margin: 25px 0;                         /* Внешние отступы блока */
}

.l19-t5-item {
    display: flex;                          /* Флекс-контейнер для тени и поля ввода */
    flex-direction: column;                 /* Располагаем элементы вертикально */
    align-items: center;                    /* Центрируем содержимое по горизонтали */
    background: #ffffff;                    /* Белый фон подложки карточки */
    padding: 15px;                          /* Внутренние отступы карточки */
    border-radius: 20px;                    /* Скругление углов */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Легкая тень для объема */
}

.l19-t5-shadow-box {
    width: 120px;                           /* Фиксированная ширина контейнера тени */
    height: 120px;                          /* Фиксированная высота контейнера тени */
    display: flex;                          /* Центрируем тень внутри квадрата */
    align-items: center;                    /* Центрирование по вертикали */
    justify-content: center;                /* Центрирование по горизонтали */
    margin-bottom: 12px;                    /* Отступ от картинки до поля ввода */
}

.l19-t5-shadow-box img {
    max-width: 100%;                        /* Тень не выходит за границы контейнера */
    max-height: 100%;                       /* Тень сохраняет пропорции по высоте */
    filter: grayscale(100%) brightness(0%); /* Принудительно делаем картинку абсолютно черной тенью */
}

.l19-t5-input {
    width: 100%;                            /* Инпут на всю ширину карточки */
    padding: 8px;                           /* Внутренние поля для текста */
    border: 2px solid #bdc3c7;              /* Стандартная серая рамка */
    border-radius: 10px;                    /* Скругление углов поля */
    text-align: center;                     /* Текст в центре инпута */
    font-family: 'Comic Sans MS', sans-serif; /* Единый детский шрифт */
    font-size: 1rem;                        /* Базовый размер шрифта */
    outline: none;                          /* Убираем обводку браузера */
}

/* Состояния валидации */
.l19-t5-input.correct { border-color: #27ae60; background-color: #f2fdf5; } /* Зеленый при успехе */
.l19-t5-input.wrong { border-color: #e74c3c; background-color: #fdf2f2; }   /* Красный при ошибке */

/* --- ЗАДАНИЕ 6: ЛАСКОВАЯ ЦОКОЛОЧКА --- */

.l19-t6-grid {
    display: grid;                          /* Включаем сетку для карточек */
    grid-template-columns: repeat(5, 1fr);  /* Создаем 5 равных колонок для 10 предметов */
    gap: 5px;                              /* Устанавливаем расстояние между карточками */
    margin: 5px 0;                         /* Внешние отступы блока сверху и снизу */
}

.l19-t6-item {
    display: flex;                          /* Флекс-контейнер для элементов внутри карточки */
    flex-direction: column;                 /* Располагаем картинку и инпут вертикально */
    align-items: center;                    /* Центрируем содержимое по горизонтали */
    background: #ffffff;                    /* Белый фон карточки */
    padding: 5px;                          /* Внутренние отступы внутри карточки */
    border-radius: 15px;                    /* Скругляем углы карточки */
    border: 2px solid #e1e8ee;              /* Светло-серая рамка границ */
}

.l19-t6-img-box {
    width: 112px;                            /* Ширина контейнера для изображения */
    height: 112px;                           /* Высота контейнера для изображения */
    display: flex;                          /* Центрируем картинку внутри бокса через флекс */
    align-items: center;                    /* Выравнивание по вертикали */
    justify-content: center;                /* Выравнивание по горизонтали */
    margin-bottom: 10px;                    /* Отступ от картинки до поля ввода */
}

.l19-t6-img-box img {
    max-width: 100%;                        /* Картинка не выходит за пределы ширины бокса */
    max-height: 100%;                       /* Картинка не выходит за пределы высоты бокса */
    object-fit: contain;                    /* Масштабируем картинку без искажений пропорций */
}

.l19-t6-input {
    width: 100%;                            /* Поле ввода занимает всю ширину карточки */
    padding: 6px;                           /* Внутренние отступы для комфортного ввода */
    border: 2px solid #bdc3c7;              /* Серая рамка поля ввода по умолчанию */
    border-radius: 8px;                     /* Скругление углов поля ввода */
    text-align: center;                     /* Текст внутри поля располагается по центру */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем основной шрифт урока */
    font-size: 0.9rem;                      /* Устанавливаем размер шрифта для ввода */
    outline: none;                          /* Убираем стандартную синюю обводку браузера */
    transition: all 0.3s ease;              /* Плавная анимация смены цветов при проверке */
}

/* Стилизация состояний валидации */
.l19-t6-input.correct {
    border-color: #27ae60;                  /* Зеленая рамка при правильном ответе */
    background-color: #f2fdf5;              /* Светло-зеленый фон для индикации успеха */
}

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

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

.l19-t7-grid {
    display: grid;                          /* Используем сетку для выравнивания карточек животных */
    grid-template-columns: repeat(4, 1fr);  /* Создаем 4 равные колонки для симметрии (12 = 4x3) */
    gap: 15px;                              /* Устанавливаем зазор между карточками */
    margin: 25px 0;                         /* Внешние отступы всего блока */
}

.l19-t7-item {
    display: flex;                          /* Включаем флекс для вертикальной сборки элементов */
    flex-direction: column;                 /* Располагаем картинку, текст и поле ввода друг под другом */
    align-items: center;                    /* Центрируем все содержимое по горизонтали */
    background: #ffffff;                    /* Устанавливаем белый фон для подложки карточки */
    padding: 12px;                          /* Внутренние отступы для свободного пространства */
    border-radius: 18px;                    /* Скругляем углы карточки */
    border: 2px solid #e1e8ee;              /* Добавляем светлую рамку для контура */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* Добавляем едва заметную тень для мягкости */
}

.l19-t7-img-box {
    width: 110px;                           /* Ширина области для картинки животного */
    height: 90px;                           /* Высота области для картинки животного */
    display: flex;                          /* Используем флекс для центрирования изображения */
    align-items: center;                    /* Центрируем картинку по вертикали */
    justify-content: center;                /* Центрируем картинку по горизонтали */
    margin-bottom: 8px;                     /* Отступ снизу до пояснительного текста */
}

.l19-t7-img-box img {
    max-width: 100%;                        /* Ограничиваем ширину картинки размером бокса */
    max-height: 100%;                       /* Ограничиваем высоту картинки размером бокса */
    object-fit: contain;                    /* Сохраняем пропорции животного при масштабировании */
}

.l19-t7-text {
    font-size: 0.95rem;                     /* Устанавливаем размер шрифта для фразы "У ... —" */
    margin-bottom: 5px;                     /* Зазор между текстом и полем ввода */
    color: #34495e;                         /* Используем серо-синий цвет для текста */
}

.l19-t7-input {
    width: 100%;                            /* Поле ввода растягивается на всю ширину карточки */
    padding: 7px;                           /* Внутренние отступы для удобства набора текста */
    border: 2px solid #bdc3c7;              /* Стандартная рамка инпута серого цвета */
    border-radius: 10px;                    /* Скругляем углы текстового поля */
    text-align: center;                     /* Центрируем вводимое название животного */
    font-family: 'Comic Sans MS', sans-serif; /* Поддерживаем детский стиль шрифта урока */
    font-size: 0.9rem;                      /* Устанавливаем размер шрифта для ввода */
    outline: none;                          /* Отключаем стандартное выделение браузера */
    transition: border-color 0.3s ease;     /* Плавная смена цвета рамки при проверке */
}

/* Стили для отображения результатов проверки */
.l19-t7-input.correct {
    border-color: #27ae60;                  /* Зеленая рамка для правильного ответа */
    background-color: #f2fdf5;              /* Бледно-зеленый фон для успеха */
}

.l19-t7-input.wrong {
    border-color: #e74c3c;                  /* Красная рамка для ошибочного ответа */
    background-color: #fdf2f2;              /* Бледно-красный фон для ошибки */
}

/* Адаптация под мобильные устройства */
@media (max-width: 700px) {
    .l19-t7-grid { grid-template-columns: repeat(2, 1fr); } /* По 2 карточки в ряд на телефонах */
}

/* --- ЗАДАНИЕ 8: ПОДБОР СЛОВ НА СЛОГИ --- */

.l19-t8-container {
    display: flex;                          /* Включаем флекс для разделения картинок и слогов */
    flex-direction: column;                 /* Располагаем блоки друг под другом */
    align-items: center;                    /* Центрируем содержимое по горизонтали */
    gap: 30px;                              /* Расстояние между сеткой картинок и кнопками слогов */
    margin: 20px 0;                         /* Внешние отступы блока */
}

.l19-t8-grid {
    display: grid;                          /* Включаем сетку для картинок предметов */
    grid-template-columns: repeat(5, 1fr);  /* Создаем 5 равных колонок */
    gap: 15px;                              /* Расстояние между картинками */
}

.l19-t8-img {
    width: 100px;                           /* Фиксированная ширина картинки */
    height: 100px;                          /* Фиксированная высота картинки */
    object-fit: contain;                    /* Масштабируем без искажения пропорций */
    padding: 10px;                          /* Внутренний отступ для рамки */
    background: #ffffff;                    /* Белый фон под картинкой */
    border: 3px solid #e1e8ee;              /* Светло-серая рамка по умолчанию */
    border-radius: 15px;                    /* Скругляем углы карточки */
    cursor: pointer;                        /* Указатель при наведении */
    transition: all 0.2s ease;              /* Плавная анимация при клике */
}

/* Эффект выделения картинки */
.l19-t8-img.selected {
    border-color: #ff7043;                  /* Оранжевый контур при выборе предмета */
    transform: scale(1.05);                 /* Легкое увеличение для акцента */
}

/* Эффект верного сопоставления */
.l19-t8-img.matched {
    border-color: #27ae60;                  /* Зеленая рамка при правильном слоге */
    opacity: 0.6;                           /* Затемняем решенные картинки */
    pointer-events: none;                   /* Блокируем клики по готовым картинкам */
}

.l19-t8-syllables {
    display: flex;                          /* Располагаем кнопки-слоги в ряд */
    gap: 20px;                              /* Расстояние между кнопками */
}

.l19-t8-syllable {
    padding: 15px 40px;                     /* Внутренние отступы для крупных кнопок */
    background: #3498db;                    /* Синий фон слога */
    color: #ffffff;                         /* Белый цвет текста */
    font-size: 1.8em;                       /* Крупный размер букв */
    font-weight: bold;                      /* Жирный шрифт */
    border-radius: 15px;                    /* Скругление углов кнопки */
    cursor: pointer;                        /* Указатель-палец */
    box-shadow: 0 4px 0 #2980b9;            /* Тень для объема кнопки */
    transition: all 0.1s;                   /* Быстрая анимация нажатия */
}

.l19-t8-syllable:active {
    transform: translateY(2px);             /* Эффект нажатия (кнопка уходит вниз) */
    box-shadow: 0 2px 0 #2980b9;            /* Уменьшение тени при клике */
}

/* --- ЗАДАНИЕ 9: ИСКАТЕЛИ (ВЫЧЕРКИВАНИЕ БУКВ) --- */

.l19-t9-container {
    display: flex;                          /* Включаем флекс для вертикального списка рядов */
    flex-direction: column;                 /* Располагаем ряды один под другим */
    gap: 25px;                              /* Расстояние между строками задания */
    margin: 20px 0;                         /* Внешние отступы блока */
}

.l19-t9-row {
    display: flex;                          /* Внутри ряда элементы в строку */
    flex-direction: column;                 /* Буквы сверху, поле ввода под ними */
    align-items: center;                    /* Центрируем содержимое ряда */
    gap: 10px;                              /* Расстояние между буквами и инпутом */
}

.l19-t9-letters {
    display: flex;                          /* Буквы выстраиваются в горизонтальную линию */
    flex-wrap: wrap;                        /* Разрешаем перенос букв на узких экранах */
    justify-content: center;                /* Центрируем буквы в ряду */
    gap: 5px;                               /* Зазор между плитками букв */
    background: #e3f2fd;                    /* Нежно-голубой фон подложки для букв */
    padding: 10px;                          /* Внутренние отступы подложки */
    border-radius: 15px;                    /* Скругление углов подложки */
}

.l19-t9-letters span {
    display: inline-block;                  /* Каждая буква — отдельный блок */
    width: 35px;                            /* Фиксированная ширина плитки буквы */
    height: 35px;                           /* Фиксированная высота плитки буквы */
    line-height: 35px;                      /* Центрируем символ по вертикали */
    text-align: center;                     /* Центрируем символ по горизонтали */
    background: #ffffff;                    /* Белый фон плитки буквы */
    border: 2px solid #3498db;              /* Синяя рамка вокруг буквы */
    border-radius: 8px;                     /* Легкое скругление углов плитки */
    font-weight: bold;                      /* Жирное начертание буквы */
    font-size: 1.2em;                       /* Крупный размер шрифта */
    cursor: pointer;                        /* Указатель при наведении */
    user-select: none;                      /* Запрещаем выделение текста при кликах */
    transition: all 0.2s ease;              /* Плавная анимация вычеркивания */
}

/* СТИЛЬ ВЫЧЕРКНУТОЙ БУКВЫ */
.l19-t9-letters span.crossed {
    opacity: 0.3;                           /* Делаем букву полупрозрачной */
    text-decoration: line-through;          /* Добавляем эффект перечеркивания */
    background: #bdc3c7;                    /* Меняем фон на серый */
    border-color: #95a5a6;                  /* Ослабляем цвет рамки */
}

.l19-t9-input {
    width: 250px;                           /* Фиксированная ширина поля для слова */
    padding: 8px 15px;                      /* Внутренние отступы в поле ввода */
    border: 2px solid #ffd600;              /* Желтая рамка в тон разделителям */
    border-radius: 10px;                    /* Скругление углов поля */
    text-align: center;                     /* Текст в центре инпута */
    font-family: 'Comic Sans MS', sans-serif; /* Наш основной шрифт */
    font-size: 1.1em;                       /* Читаемый размер шрифта */
    outline: none;                          /* Убираем стандартный контур фокуса */
}

/* Состояния проверки */
.l19-t9-input.correct { border-color: #27ae60; background-color: #f2fdf5; }
.l19-t9-input.wrong { border-color: #e74c3c; background-color: #fdf2f2; }



/* --- ЗАДАНИЕ 10: СЕТКА 2х2 --- */

.l19-t10-grid {
    display: grid;                          /* Включаем сетку для карточек */
    grid-template-columns: repeat(2, 1fr);  /* Делаем две колонки одинаковой ширины */
    gap: 20px;                              /* Устанавливаем зазор между карточками */
    margin: 20px 0;                         /* Внешние отступы всего блока */
}

.l19-t10-item {
    display: flex;                          /* Флекс-контейнер для элементов внутри карточки */
    flex-direction: column;                 /* Вертикальное расположение: картинка, затем инпут */
    align-items: center;                    /* Центрируем содержимое по горизонтали */
    background: #ffffff;                    /* Белый фон карточки */
    padding: 15px;                          /* Внутренние отступы */
    border-radius: 20px;                    /* Скругление углов карточки */
    border: 3px solid #e1e8ee;              /* Светло-серая рамка контура */
}

.l19-t10-img {
    width: 100%;                            /* Картинка растягивается по ширине карточки */
    height: auto;                           /* Сохраняем пропорции изображения */
    border-radius: 10px;                    /* Легкое скругление углов картинки */
    margin-bottom: 15px;                    /* Отступ снизу до поля ввода */
}

.l19-t10-input {
    width: 100%;                            /* Поле ввода занимает всю доступную ширину */
    padding: 10px;                          /* Внутренние поля для текста */
    border: 2px solid #bdc3c7;              /* Серая рамка инпута по умолчанию */
    border-radius: 10px;                    /* Скругление углов инпута */
    font-family: 'Comic Sans MS', sans-serif; /* Основной шрифт урока */
    text-align: center;                     /* Текст внутри поля по центру */
    outline: none;                          /* Убираем синюю обводку браузера */
}

/* Цвет рамки при наличии текста */
.l19-t10-input.filled {
    border-color: #27ae60;                  /* Зеленая рамка, если поле заполнено */
    background-color: #f2fdf5;              /* Светло-зеленый фон */
}