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

/* Контейнер игры: выстраиваем элементы в колонку с отступами */
.l17-t1-game-box {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 20px;
}

/* Группы слогов: центрируем и разрешаем перенос на новую строку */
.l17-t1-starts, .l17-t1-ends {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* Общий стиль для всех блоков слогов */
.l17-t1-block {
    padding: 10px 18px;
    border: 2px solid #ccc;
    border-radius: 12px;
    background: #fff;
    font-weight: bold;
    font-size: 1.4em;
    cursor: grab;
    transition: transform 0.2s, background 0.2s;
    user-select: none; /* Чтобы текст не выделялся при перетаскивании */
}

/* Стиль слога, который можно тянуть */
.start-block {
    border-color: #ff9800;
    color: #e65100;
}

/* Стиль мишени (окончания) */
.end-block {
    border-color: #90caf9;
    background: #e3f2fd;
}

/* Визуальный эффект при наведении перетаскиваемого элемента */
.end-block.drag-over {
    background: #fff59d;
    transform: scale(1.1);
    border-style: dashed;
}

/* Стиль для правильно собранного слова (скрываем блок после успеха) */
.end-block.matched {
    opacity: 0.5;
    background: #c8e6c9;
    cursor: default;
    pointer-events: none;
}

/* ЗАДАНИЕ 2 */
.l17-t2-container { display: flex; justify-content: center; gap: 100px; margin-bottom: 20px; }
.l17-t2-column p { margin: 5px 0; font-size: 1.35em; }
.l17-t2-spacer { height: 25px; }
.l17-t2-footer {
    text-align: center;
    font-size: 1.4em;
    color: #ff6d00;
    margin-bottom: 20px;
}

/* --- СТИЛИ ДЛЯ ЗАДАНИЯ №3 (ПУТАНИЦА) --- */

/* Общий контейнер для списка предложений */
.l17-t3-container {
    display: flex;
    flex-direction: column;
    gap: 15px;                  /* Компактный отступ между рядами для 5 элементов */
    margin-bottom: 20px;
}

/* Оформление строки с перемешанными словами */
.l17-t3-words {
    font-size: 1.25em;          /* Размер текста для легкого чтения ребенком */
    color: #34495e;             /* Спокойный темно-синий цвет */
    margin-bottom: 6px;         /* Отступ перед полем ввода */
    font-weight: normal;
}

/* Стилизация интерактивного поля ввода */
.l17-t3-input {
    width: 100%;                /* Растягиваем на всю ширину карточки */
    box-sizing: border-box;     /* Учитываем внутренние отступы в ширине */
    padding: 12px 15px;         /* Внутренние отступы для текста */
    font-family: 'Comic Sans MS', sans-serif; /* Поддержка общего стиля урока */
    font-size: 1.2em;           /* Крупный шрифт ввода */
    border: 3px solid #90caf9;  /* Голубая рамка в тон фона */
    border-radius: 15px;        /* Скругленные углы инпута */
    outline: none;              /* Убираем стандартную обводку */
    transition: all 0.3s ease;  /* Плавный переход цветов при проверке */
}

/* Состояние поля при активном вводе */
.l17-t3-input:focus {
    border-color: #ff7043;      /* Оранжевая подсветка при фокусе */
    background-color: #ffffff;  /* Белый фон при вводе */
}

/* Визуальная индикация ошибки в предложении */
.l17-input-error {
    border-color: #e74c3c !important; /* Красная рамка */
    background-color: #fdf2f2;        /* Нежно-красный фон */
}

/* Визуальная индикация правильного ответа */
.l17-input-success {
    border-color: #2ecc71 !important; /* Зеленая рамка */
    background-color: #f2fdf5;        /* Нежно-зеленый фон */
}

/* --- ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ ЗАДАНИЯ №4 (ОДНА КОЛОНКА) --- */

/* Контейнер для вертикального списка */
.l17-t4-single-column {
    display: flex;
    flex-direction: column;     /* Строго в один столбец */
    align-items: center;        /* Центрируем все строки по горизонтали */
    gap: 18px;                  /* Равномерный отступ между строками */
    margin-bottom: 25px;
}

/* Оформление строки: текст и инпут */
.l17-t4-row {
    font-size: 1.3em;           /* Крупный шрифт для удобства */
    color: #34495e;
    display: flex;
    align-items: center;
    width: 100%;                /* Для корректного выравнивания внутри */
    justify-content: center;    /* Центрируем контент внутри строки */
}

/* Стилизация компактного поля ввода */
.l17-t4-input {
    width: 160px;               /* Оптимальная ширина для слов-признаков */
    margin: 0 10px;
    padding: 8px 12px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 0.95em;
    border: 3px solid #90caf9;
    border-radius: 12px;
    outline: none;
    text-align: center;
    transition: all 0.3s ease;
}

/* Подсветка при наборе текста */
.l17-t4-input:focus {
    border-color: #ff7043;
}

/* Состояния валидации (используем существующие классы проекта) */
.l17-t4-input.l17-input-error { border-color: #e74c3c !important; background-color: #fdf2f2; }
.l17-t4-input.l17-input-success { border-color: #2ecc71 !important; background-color: #f2fdf5; }

/* --- ЗАДАНИЕ 5: ВЕРТИКАЛЬНЫЕ ИЗОБРАЖЕНИЯ В РЯД --- */

.l17-t5-row-container {
    display: flex;                          /* Используем flexbox для расположения изображений в одну строку */
    justify-content: center;                /* Центрируем весь ряд по горизонтали внутри карточки */
    gap: 0px;                               /* Отступ между элементами (пока 0, можно увеличить при необходимости) */
    margin-bottom: 5px;                    /* Отступ снизу от ряда до следующего элемента (результата или кнопки) */
    overflow-x: auto;                       /* Включаем горизонтальную прокрутку на мобильных устройствах */
    padding: 0px 0;                        /* Добавляем вертикальные отступы внутри контейнера */
}

.l17-t5-item-vert {
    width: 120px;                           /* Фиксированная ширина каждой вертикальной картинки */
    height: 220px;                          /* Увеличенная высота для вертикальных изображений (обезьянок) */
    cursor: pointer;                        /* Курсор в виде руки при наведении, показывая, что элемент кликабельный */
    background-size: contain;               /* Изображение масштабируется полностью, сохраняя пропорции */
    background-repeat: no-repeat;           /* Изображение не повторяется */
    background-position: center;            /* Изображение центрируется внутри блока */
    border: none;                           /* Убираем все рамки (как требовалось в дизайне) */
    transition: transform 0.3s ease,        /* Плавная анимация изменения размера и прозрачности */
                opacity 0.3s ease;
    flex-shrink: 0;                         /* Запрещаем элементам сжиматься при недостатке места */
}

/* Визуальный отклик вместо рамки - увеличение и небольшое свечение */
.l17-t5-item-vert.selected {
   
    filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.8)); /* Добавляем мягкое зелёное свечение вокруг выбранной обезьянки */
}

/* Состояние после правильного ответа */
.l17-t5-item-vert.colored {
    pointer-events: none;                   /* Отключаем дальнейшие клики по уже выбранным элементам */
    transform: scale(1);                    /* Возвращаем нормальный размер */
    filter: none;                           /* Убираем свечение после завершения выбора */
}

/* --- СТИЛИ ДЛЯ ЗАДАНИЯ №6 (КРОССВОРД) --- */
/* --- ЗАДАНИЕ 6: КРОССВОРД (СТРОГАЯ ВЕРТИКАЛЬНАЯ СЕТКА) --- */

.l17-t6-main-wrap {
    display: flex; /* Используем гибкую верстку для расположения элементов */
    justify-content: space-around; /* Распределяем кроссворд и подсказки по краям */
    align-items: center; /* Центрируем содержимое по вертикальной оси */
    flex-wrap: wrap; /* Разрешаем перенос блоков при нехватке ширины экрана */
    margin: 20px 0; /* Устанавливаем внешние отступы сверху и снизу */
    gap: 20px; /* Задаем безопасное расстояние между сеткой и текстом */
}

.l17-t6-grid-container {
    display: flex; /* Включаем flex-контейнер для управления строками */
    flex-direction: column; /* Выстраиваем дочерние элементы строго в колонку */
    gap: 4px; /* Устанавливаем шаг между горизонтальными рядами */
}

.l17-t6-row {
    display: flex; /* Каждая строка кроссворда становится flex-рядом */
    align-items: center; /* Выравниваем цифры и ячейки по центру строки */
    gap: 4px; /* Задаем фиксированный отступ между клетками в ряду */
}

.l17-t6-num {
    width: 25px; /* Резервируем фиксированное место под номер вопроса */
    font-weight: bold; /* Делаем цифру жирной для акцента */
    color: #ff7043; /* Устанавливаем оранжевый цвет согласно стилю урока */
    font-size: 1.1em; /* Слегка увеличиваем размер шрифта цифры */
    text-align: right; /* Прижимаем число вплотную к первой ячейке */
    margin-right: 5px; /* Добавляем небольшой зазор перед сеткой */
}

.l17-t6-cell, .l17-t6-cell-empty {
    width: 40px; /* Устанавливаем эталонную ширину для всех типов ячеек */
    height: 40px; /* Устанавливаем высоту, чтобы ячейка была квадратной */
    box-sizing: border-box; /* Учитываем рамку в общих габаритах ячейки */
}

.l17-t6-cell {
    border: 2px solid #7f8c8d; /* Рисуем серую контурную рамку для клетки */
    border-radius: 8px; /* Скругляем углы ячейки для мягкого дизайна */
    text-align: center; /* Центрируем вводимый символ по горизонтали */
    font-size: 1.3em; /* Устанавливаем крупный размер шрифта для буквы */
    font-weight: bold; /* Делаем вводимый текст хорошо заметным */
    text-transform: uppercase; /* Принудительно делаем все буквы заглавными */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем основной шрифт урока */
    outline: none; /* Убираем стандартную синюю обводку браузера */
    background-color: #ffffff; /* Устанавливаем чистый белый фон ячейки */
}

.key-cell {
    border-color: #ff9244; /* Подсвечиваем рамку ключевого слова оранжевым */
    background-color: #fff3e0; /* Заливаем фон буквы "ЗИМА" пастельным тоном */
    color: #e65100; /* Устанавливаем контрастный цвет для ключевых букв */
}

.l17-t6-cell-empty {
    border: none; /* Скрываем границы у пустых ячеек-заполнителей */
    background: transparent; /* Делаем фон пустых мест прозрачным */
}

.l17-t6-hints {
    border: 2px dashed #ffd600; /* Создаем пунктирную рамку для блока вопросов */
    border-radius: 20px; /* Сильно закругляем углы блока подсказок */
    padding: 15px 20px; /* Создаем внутренние поля для текста подсказок */
    background-color: #ffffff; /* Устанавливаем белый фон под текстом вопросов */
    max-width: 300px; /* Ограничиваем максимальную ширину блока текста */
}

.l17-t6-hints p {
    margin: 10px 0; /* Задаем вертикальные интервалы между вопросами */
    font-size: 1.1em; /* Увеличиваем читабельность текста вопросов */
    color: #2c3e50; /* Устанавливаем темный цвет для текста подсказок */
}

.cell-correct { 
    border-color: #2ecc71 !important; /* Принудительно красим рамку в зеленый */
    background-color: #f2fdf5; /* Добавляем нежно-зеленую заливку ячейки */
}

.cell-wrong { 
    border-color: #e74c3c !important; /* Принудительно красим рамку в красный */
    background-color: #fdf2f2; /* Добавляем бледно-красную заливку ячейки */
}

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

/* Основная сетка для размещения 12 карточек заданий */
.l17-t7-grid {
    display: grid; /* Включаем режим сетки для упорядочивания элементов */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Автоматическое распределение колонок по ширине */
    gap: 10px; /* Устанавливаем равные отступы между карточками по вертикали и горизонтали */
    margin: 10px 0; /* Внешние отступы сверху и снизу для всего блока */
}

/* Контейнер отдельной карточки (картинка + инпут) */
.l17-t7-item {
    display: flex; /* Используем flex для вертикального позиционирования содержимого */
    flex-direction: column; /* Располагаем элементы внутри карточки один под другим */
    align-items: center; /* Центрируем содержимое карточки по горизонтальной оси */
    gap: 10px; /* Расстояние между белым квадратом и полем ввода */
}

/* Белый квадрат с закругленными углами для изображения */
.img-wrapper {
    width: 155px; /* Фиксированная ширина контейнера для единообразия сетки */
    height: 155px; /* Фиксированная высота контейнера */
    background-color: #ffffff; /* Установка белого фона согласно инструкции */
    border: 2px solid #e1e8ee; /* Тонкая серо-голубая рамка для выделения границ */
    border-radius: 20px; /* Закругление углов квадрата */
    display: flex; /* Центрируем картинку внутри квадрата через flex */
    align-items: center; /* Выравнивание картинки по центру вертикально */
    justify-content: center; /* Выравнивание картинки по центру горизонтально */
    padding: 15px; /* Внутренние поля, чтобы картинка не прилипала к краям */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Мягкая тень для эффекта объема */
}

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

/* Единое текстовое поле ввода под картинкой */
.l17-t7-input {
    width: 100%; /* Заполнение всей доступной ширины (ограничено max-width) */
    max-width: 150px; /* Максимальная ширина поля для аккуратного вида */
    padding: 8px 12px; /* Внутренние отступы для удобства набора текста */
    border: 2px solid #bdc3c7; /* Базовая серая рамка поля ввода */
    border-radius: 10px; /* Закругление углов поля ввода */
    text-align: center; /* Центрирование вводимого текста внутри поля */
    font-size: 1rem; /* Стандартный размер шрифта */
    font-weight: bold; /* Жирное начертание шрифта для четкости */
    outline: none; /* Удаление стандартного синего контура браузера при клике */
    transition: all 0.3s ease; /* Плавная анимация при изменении состояния (фокус, проверка) */
}

/* Визуальный отклик при активации поля пользователем */
.l17-t7-input:focus {
    border-color: #3498db; /* Изменение цвета рамки на синий при фокусе */
}

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

/* Стиль для слова с ошибкой */
.input-error {
    border-color: #e74c3c !important; /* Принудительная установка красной рамки */
    background-color: #fdf2f2; /* Светло-красный фон для индикации ошибки */
}

/* Контейнер, который делает всё изображение кликабельным */
.l17-t8-click-zone {
    display: inline-block; /* Позволяет блоку принять точный размер картинки */
    cursor: crosshair; /* Меняем курсор на перекрестие, чтобы обозначить поиск */
    position: relative; /* Создаем основу для правильного позиционирования */
    margin: 20px 0; /* Добавляем внешние отступы для отделения от текста */
}

/* Стили самого изображения */
.l17-t8-simple-img {
    display: block; /* Убираем пустые зазоры под картинкой */
    max-width: 100%; /* Ограничиваем ширину картинки по размеру экрана */
    height: auto; /* Сохраняем пропорции изображения */
    -webkit-user-drag: none; /* Запрещаем пользователю случайно перетаскивать картинку */
    user-select: none; /* Запрещаем выделение изображения при кликах */
}

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