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

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

.l18-t1-column {
    flex: 1; /* Позволяем каждой колонке занимать равную часть пространства */
    text-align: left; /* Выравниваем текст внутри колонки по левому краю */
}

.l17-t1-column p {
    margin: 10px 0; /* Задаем вертикальные интервалы между строками */
    font-size: 1.3em; /* Устанавливаем крупный размер шрифта для удобства чтения */
    line-height: 1.4; /* Увеличиваем межстрочный интервал */
    color: #2c3e50; /* Используем темный цвет текста для контраста */
}


/* --- ЗАДАНИЕ 2: РЯДЫ СЛОВ ДЛЯ ЗАПОМИНАНИЯ --- */

.l18-t2-rows {
    display: flex; /* Включаем flex-контейнер для управления строками */
    flex-direction: column; /* Выстраиваем строки строго одна под другой */
    align-items: center; /* Центрируем ряды слов по горизонтали */
    gap: 15px; /* Задаем вертикальное расстояние между рядами */
    margin: 25px 0; /* Устанавливаем внешние отступы для всего блока */
}

.l18-t2-text {
    font-size: 1.4em; /* Устанавливаем крупный размер шрифта для чтения */
    color: #2c3e50; /* Используем контрастный темно-синий цвет текста */
    font-weight: bold; /* Делаем текст жирным для лучшего запоминания */
    margin: 0; /* Убираем стандартные отступы параграфа */
    letter-spacing: 0.5px; /* Добавляем небольшое расстояние между буквами */
}

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

.l18-t3-container {
    display: flex; /* Включаем flexbox для структуры предложений */
    flex-direction: column; /* Предложения идут друг под другом */
    gap: 15px; /* Зазор между строками ввода */
    margin-bottom: 25px; /* Отступ перед картинкой */
}

.l18-t3-row {
    display: flex; /* Текст и поле в одну линию */
    align-items: center; /* Центрирование по вертикали */
    flex-wrap: wrap; /* Перенос на узких экранах */
    font-size: 1.25em; /* Размер шрифта для комфортного чтения[cite: 2] */
    color: #2c3e50; /* Темно-синий цвет текста[cite: 2] */
}

.l18-t3-input {
    width: 140px; /* Ширина поля ввода */
    margin: 5px 10px; /* Отступы вокруг поля */
    padding: 6px; /* Внутренний отступ */
    border: 2px solid #bdc3c7; /* Базовая рамка[cite: 2] */
    border-radius: 10px; /* Скругление углов[cite: 2] */
    text-align: center; /* Текст внутри поля по центру */
    font-family: 'Comic Sans MS', sans-serif; /* Единый стиль шрифта[cite: 2] */
    outline: none; /* Убираем контур фокуса */
}

/* Блок для изображения-подсказки */
.l18-t3-image-box {
    width: 100%; /* Занимает всю ширину карточки */
    display: flex; /* Центрирование изображения через flex */
    justify-content: center; /* Горизонтальное центрирование */
    margin: 20px 0; /* Отступы сверху и снизу от картинки */
}

.l18-t3-hint-img {
    max-width: 100%; /* Картинка не выходит за пределы экрана */
    height: auto; /* Сохранение пропорций */
    border-radius: 20px; /* Скругление углов картинки под стиль карточки[cite: 2] */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Мягкая тень для выделения картинки */
}

/* Стили индикации проверки остаются прежними[cite: 1] */
.l18-t3-input.correct { border-color: #27ae60; background-color: #f2fdf5; }
.l18-t3-input.wrong { border-color: #e74c3c; background-color: #fdf2f2; }

/* --- ЗАДАНИЕ 5: ШЕСТЬ ЗАЙЦЕВ В РЯД --- */

.l18-t5-row {
    display: flex; /* Выстраиваем ровно 6 картинок в один горизонтальный ряд[cite: 2] */
    justify-content: center; /* Центрируем группу изображений внутри карточки[cite: 2] */
    gap: 20px; /* Устанавливаем фиксированный зазор между зайцами без рамок[cite: 2] */
    margin: 30px 0; /* Внешние отступы блока сверху и снизу[cite: 2] */
    padding: 10px; /* Внутреннее поле для корректного отображения свечения[cite: 2] */
}

.l18-t5-img {
    width: 100px; /* Увеличил ширину, так как картинок стало меньше[cite: 2] */
    height: auto; /* Сохраняем пропорции рисунков[cite: 2] */
    cursor: pointer; /* Указатель при наведении на кликабельную картинку[cite: 2] */
    border: none; /* Рамки отсутствуют согласно требованию[cite: 2] */
    transition: filter 0.3s ease; /* Плавная анимация эффектов свечения[cite: 2] */
}

/* Зеленое свечение при выборе любой картинки[cite: 2] */
.l18-t5-img.selected {
    filter: drop-shadow(0 0 12px #27ae60); /* Создаем зеленый ореол[cite: 2] */
}

/* Синее свечение при правильном выборе 1-й и 5-й картинок[cite: 2] */
.l18-t5-img.correct-match {
    filter: drop-shadow(0 0 18px #3498db); /* Меняем цвет ореола на синий[cite: 2] */
    pointer-events: none; /* Блокируем дальнейшие клики по найденной паре[cite: 2] */
}

/* --- ЗАДАНИЕ 6: САНЯ И СОНЯ (СУФФИКС -ИЦ-) --- */

.l18-t6-main-container {
    display: flex; /* Используем flexbox для расположения героев по бокам[cite: 2] */
    align-items: center; /* Центрируем контент по вертикали[cite: 2] */
    justify-content: space-between; /* Распределяем элементы по краям карточки[cite: 2] */
    gap: 15px; /* Зазор между текстом и картинками[cite: 2] */
    margin: 20px 0; /* Внешние отступы блока */
}

.l18-t6-char {
    flex: 0 0 120px; /* Фиксируем ширину контейнеров для героев */
}

.l18-t6-img {
    width: 100%; /* Картинка занимает всю ширину своего контейнера */
    height: auto; /* Сохраняем пропорции лиц персонажей[cite: 2] */
}

.l18-t6-list {
    flex: 1; /* Список занимает всё свободное пространство в центре */
    display: flex; /* Текст выстраиваем в колонку[cite: 2] */
    flex-direction: column; /* Вертикальное направление[cite: 2] */
    gap: 10px; /* Расстояние между строками упражнения[cite: 2] */
}

.l18-t6-row {
    font-size: 1.15em; /* Удобный размер шрифта для чтения[cite: 2] */
    color: #2c3e50; /* Темно-синий основной текст[cite: 2] */
    display: flex; /* Выравниваем текст и поле в строку[cite: 2] */
    flex-wrap: wrap; /* Перенос на новую строку при нехватке места[cite: 2] */
    align-items: center; /* Центрируем по вертикали внутри строки[cite: 2] */
}

.l18-t6-input {
    width: 140px; /* Ширина поля для ввода слова[cite: 2] */
    margin-left: 8px; /* Отступ от текста[cite: 2] */
    padding: 5px 8px; /* Внутренние поля для ввода[cite: 2] */
    border: 2px solid #bdc3c7; /* Базовая рамка[cite: 2] */
    border-radius: 8px; /* Скругление углов[cite: 2] */
    font-family: 'Comic Sans MS', sans-serif; /* Единый стиль шрифта[cite: 2] */
    text-align: center; /* Текст в центре поля[cite: 2] */
    outline: none; /* Убираем стандартный контур фокуса[cite: 2] */
    transition: all 0.3s ease; /* Плавная анимация проверки[cite: 2] */
}

/* Стили успеха и ошибки */
.l18-t6-input.correct { border-color: #27ae60 !important; background-color: #f2fdf5; }
.l18-t6-input.wrong { border-color: #e74c3c !important; background-color: #fdf2f2; }


/* --- ЗАДАНИЕ 7: ПОИСК ПРЕДМЕТОВ НА ЕДИНОМ ФАЙЛЕ --- */

.l18-t7-click-zone {
    display: inline-block; /* Блок подстраивается под точный размер изображения[cite: 2] */
    cursor: crosshair; /* Устанавливаем курсор-прицел для обозначения режима поиска[cite: 2] */
    position: relative; /* Создаем основу для позиционирования внутри карточки[cite: 2] */
    margin: 20px 0; /* Внешние отступы сверху и снизу от картинки[cite: 2] */
}

.l18-t7-main-img {
    display: block; /* Убираем лишние зазоры под изображением[cite: 2] */
    max-width: 100%; /* Ограничиваем ширину картинки по размеру родительского контейнера[cite: 2] */
    height: auto; /* Автоматически сохраняем пропорции при масштабировании[cite: 2] */
    -webkit-user-drag: none; /* Запрещаем случайное перетаскивание картинки мышкой[cite: 2] */
    user-select: none; /* Блокируем выделение изображения при частых кликах[cite: 2] */
}

#res-18-7 {
    margin-top: 15px; /* Отступ для сообщения о результате под картинкой[cite: 2] */
    font-size: 1.2rem; /* Увеличиваем размер текста для наглядности[cite: 2] */
    min-height: 1.5em; /* Резервируем место, чтобы текст не смещал кнопку[cite: 2] */
}

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

.l18-t8-group {
    display: flex; /* Выстраиваем текст и плитки в ряд[cite: 2] */
    flex-direction: column; /* Группируем элементы вертикально внутри блока[cite: 2] */
    gap: 20px; /* Зазор между текстом и плитками[cite: 2] */
    margin-bottom: 40px; /* Отступ между двумя группами упражнения[cite: 2] */
}

.l18-t8-texts {
    display: flex; /* Располагаем фразы одну под другой[cite: 2] */
    flex-direction: column; /* Вертикальный список чистоговорок[cite: 2] */
    gap: 10px; /* Расстояние между строками текста[cite: 2] */
}

.l18-t8-phrase {
    padding: 10px; /* Внутренние отступы для удобства клика[cite: 2] */
    background: #ffffff; /* Белый фон для текстового блока[cite: 2] */
    border: 2px solid #bdc3c7; /* Тонкая серая рамка[cite: 2] */
    border-radius: 10px; /* Скругление углов блока[cite: 2] */
    cursor: pointer; /* Указатель при наведении[cite: 2] */
    font-size: 1.2rem; /* Размер шрифта для чистоговорок[cite: 2] */
    transition: all 0.3s; /* Плавная анимация смены цвета[cite: 2] */
}

/* Стили плиток-картинок */
.l18-t8-tiles {
    display: flex; /* Плитки выстраиваются в горизонтальный ряд[cite: 2] */
    justify-content: center; /* Центрируем плитки по горизонтали[cite: 2] */
    gap: 15px; /* Зазор между отдельными плитками[cite: 2] */
}

.l18-t8-tile {
    width: 150px; /* Фиксированная ширина плитки[cite: 2] */
    height: 150px; /* Фиксированная высота плитки[cite: 2] */
    object-fit: contain; /* Картинка вписывается в плитку без искажений[cite: 2] */
    background: #ffffff; /* Белый фон плитки[cite: 2] */
    border: 3px solid #e1e8ee; /* Светло-серая рамка[cite: 2] */
    border-radius: 15px; /* Закругление углов плитки[cite: 2] */
    cursor: pointer; /* Указатель при наведении[cite: 2] */
    padding: 10px; /* Внутренний отступ картинки от краев[cite: 2] */
    transition: all 0.3s; /* Плавная анимация выделения[cite: 2] */
}

/* Эффекты выделения при клике */
.l18-t8-phrase.selected, .l18-t8-tile.selected {
    border-color: #3498db; /* Синяя рамка при выборе[cite: 2] */
    background-color: #ecf0f1; /* Светлая заливка фона[cite: 2] */
}

/* Состояние после правильного сопоставления */
.l18-t8-phrase.matched, .l18-t8-tile.matched {
    border-color: #27ae60 !important; /* Зеленая рамка при успехе[cite: 2] */
    background-color: #f2fdf5 !important; /* Зеленоватый фон[cite: 2] */
    pointer-events: none; /* Блокируем дальнейшие клики[cite: 2] */
}

/* --- ЗАДАНИЕ 9: МЕСТО ЗВУКА В СЛОВЕ --- */

.l18-t9-container {
    display: flex; /* Включаем гибкую верстку для управления блоками[cite: 2] */
    flex-direction: column; /* Располагаем схемы над картинками[cite: 2] */
    align-items: center; /* Центрируем все элементы по горизонтали[cite: 2] */
    gap: 30px; /* Устанавливаем зазор между блоком схем и сеткой картинок[cite: 2] */
}

/* Стилизация блока со схемами */
.l18-t9-schemes {
    display: flex; /* Схемы выстраиваются в один ряд[cite: 2] */
    gap: 20px; /* Расстояние между тремя схемами[cite: 2] */
}

.l18-t9-scheme {
    display: flex; /* Элементы внутри схемы (квадраты и текст) выравниваются в ряд[cite: 2] */
    flex-wrap: wrap; /* Разрешаем перенос текста под квадраты[cite: 2] */
    justify-content: center; /* Центрируем содержимое схемы[cite: 2] */
    width: 100px; /* Фиксированная ширина схемы[cite: 2] */
    cursor: pointer; /* Указатель при наведении[cite: 2] */
    padding: 10px; /* Внутренние отступы для удобства клика[cite: 2] */
    border: 2px solid transparent; /* Резервируем место под рамку при выборе[cite: 2] */
    border-radius: 10px; /* Скругление углов области схемы[cite: 2] */
}

.scheme-box {
    width: 25px; /* Ширина одного сегмента схемы[cite: 2] */
    height: 25px; /* Высота одного сегмента схемы[cite: 2] */
    border: 2px solid #2c3e50; /* Темный контур квадрата[cite: 2] */
    background: #ffffff; /* По умолчанию квадрат белый[cite: 2] */
}

.scheme-box.filled {
    background: #3498db; /* Синий цвет для обозначения позиции звука[cite: 2] */
}

.l18-t9-scheme span {
    width: 100%; /* Текст занимает всю ширину под квадратами[cite: 2] */
    text-align: center; /* Центрирование подписи схемы[cite: 2] */
    margin-top: 5px; /* Отступ текста от графики[cite: 2] */
    font-size: 0.9em; /* Слегка уменьшенный шрифт подписи[cite: 2] */
}

/* Сетка картинок предметов */
.l18-t9-grid {
    display: grid; /* Включаем режим сетки[cite: 2] */
    grid-template-columns: repeat(4, 120px); /* Четыре колонки фиксированной ширины[cite: 2] */
    gap: 15px; /* Равномерные отступы между картинками[cite: 2] */
    justify-content: center; /* Центрируем всю сетку[cite: 2] */
}

.l18-t9-img {
    width: 100%; /* Картинка занимает всю ячейку сетки[cite: 2] */
    height: 110px; /* Фиксированная высота для ровности рядов[cite: 2] */
    object-fit: contain; /* Картинка не искажается[cite: 2] */
    padding: 5px; /* Внутренний отступ[cite: 2] */
    background: #ffffff; /* Белый фон под картинкой[cite: 2] */
    border: 2px solid #e1e8ee; /* Светлая рамка[cite: 2] */
    border-radius: 15px; /* Скругление углов карточки предмета[cite: 2] */
    cursor: pointer; /* Указатель при наведении[cite: 2] */
    transition: all 0.2s; /* Плавная анимация при клике[cite: 2] */
}

/* Эффекты выделения */
.l18-t9-img.selected, .l18-t9-scheme.selected {
    border-color: #f39c12; /* Оранжевый контур при активном выборе[cite: 2] */
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.3); /* Мягкое свечение[cite: 2] */
}

.l18-t9-img.matched {
    border-color: #27ae60; /* Зеленая рамка при правильном соотнесении[cite: 2] */
    opacity: 0.7; /* Затемняем уже найденную картинку[cite: 2] */
    pointer-events: none; /* Блокируем клики по уже соотнесенному предмету[cite: 2] */
}