/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
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;           /* Межстрочный интервал для удобства чтения */
}

/* ЗАДАНИЕ №1 */
.mystery-img-container {
    display: flex;              /* Используем flexbox для центрирования картинки */
    justify-content: center;    /* Центрирование по горизонтали */
    margin: 10px 0 10px 0;      /* Отступы сверху и снизу от картинки */
}

.mystery-img {
    width: 750px;               /* Фиксированная желаемая ширина картинки */
    max-width: 99%;             /* Адаптивность на мобильных устройствах */
    height: auto;               /* Сохранение пропорций изображения */
    border-radius: 20px;        /* Скругление углов картинки */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* Мягкая тень для объёма картинки */
}

.result-text {
    min-height: 40px;           /* Минимальная высота блока результата */
    margin: 10px 0 5px 0;      /* Отступы сверху и снизу */
    font-size: 1.6em;           /* Большой размер текста результата */
    font-weight: bold;          /* Жирное начертание */
    text-align: center;         /* Центрирование текста */
}

.btn-box {
    display: flex;              /* Используем flex для центрирования кнопки */
    justify-content: center;    /* Центрирование кнопки по горизонтали */
    width: 100%;                /* Кнопка занимает всю ширину контейнера */
    margin-top: 10px;           /* Отступ сверху от кнопки */
}

.orange-check-btn {
    background-color: #ff6d00;  /* Основной оранжевый цвет кнопки */
    color: white;               /* Белый цвет текста на кнопке */
    border: none;               /* Убираем стандартную рамку */
    padding: 12px 50px;         /* Внутренние отступы кнопки */
    font-size: 1.35em;          /* Размер шрифта на кнопке */
    font-weight: bold;          /* Жирное начертание текста кнопки */
    border-radius: 30px;        /* Скругление углов кнопки */
    cursor: pointer;            /* Курсор-рука при наведении */
    box-shadow: 0 6px 0 #d35400; /* Тень под кнопкой */
    transition: all 0.2s;       /* Плавный эффект нажатия */
}

.orange-check-btn:active {
    transform: translateY(3px); /* Эффект нажатия кнопки */
    box-shadow: 0 3px 0 #d35400; /* Уменьшение тени при нажатии */
}

/* ЗАДАНИЕ 3. СЕТКА ДЛЯ ЗАДАНИЯ №3 (3 КОЛОНКИ НА 4 РЯДА) */
.grid-3x4 {
    display: grid;                                              /* Включаем режим Grid Layout */
    grid-template-columns: repeat(4, 1fr);                      /* Создаем 3 колонки равной ширины */
    gap: 15px;                                                  /* Устанавливаем расстояние между ячейками */
    max-width: 720px;                                           /* Ограничиваем ширину сетки для центрирования */
    margin: 0 auto 15px auto;                                   /* Центрируем блок по горизонтали и задаем отступ снизу */
}

/* СТИЛИ ДЛЯ ИЗОБРАЖЕНИЙ В СЕТКЕ (ИЗ ВАШЕГО КОДА) */
.grid-item img {
    width: 100%;                                                /* Картинка на всю ширину ячейки */
    height: auto;                                               /* Пропорциональная высота */
    border: 4px solid #1d63c0;                                  /* Изначально белая рамка */
    border-radius: 20px;                                        /* Скругление углов */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);                      /* Легкая тень */
    cursor: pointer;                                            /* Указатель при наведении */
    transition: border-color 0.2s;                              /* Плавное переключение цвета рамки */
}

/* КЛАСС ДЛЯ ВЫДЕЛЕНИЯ КАРТИНКИ В СЕТКЕ */
/* Этот класс добавляется через JS при клике на изображение */
.grid-item img.selected {
    border-color: #e74c3c !important;                          /* Принудительно меняем цвет рамки на красный */
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);                /* Добавляем красное свечение для акцента */
    transform: scale(0.98);                                     /* Легкое уменьшение при нажатии для эффекта кнопки */
}

/* ЗАДАНИЕ 4. ОБЩИЙ КОНТЕЙНЕР ДЛЯ ДВУХ КОЛОНОК */
.task-4-container {
    display: grid;                                              /* Сетка для разделения на две части */
    grid-template-columns: 1fr 1fr;                             /* Две равные колонки */
    gap: 25px;                                                  /* Расстояние между колонками */
    align-items: start;                                         /* Выравнивание по верхнему краю */
    margin-bottom: 20px;                                        /* Отступ до кнопки */
}

/* СТИЛЬ КОЛОНКИ ПЕРСОНАЖА */
.character-column {
    display: flex;                                              /* Флекс для вертикального расположения */
    flex-direction: column;                                     /* Элементы друг под другом */
    gap: 15px;                                                  /* Зазор между картинкой и инпутами */
}

/* БЛОК С КАРТИНКОЙ */
.hint-block {
    background: #fff;                                           /* Белый фон */
    border: 4px solid #fff;                                     /* Рамка */
    border-radius: 20px;                                        /* Скругление */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);                    /* Тень */
    overflow: hidden;                                           /* Чтобы картинка не вылезала за скругления */
}

.hint-img {
    width: 100%;                                                /* Растягиваем на ширину колонки */
    display: block;                                             /* Убираем нижний зазор */
}

/* СТИЛИ СТРОКИ ВВОДА */
.input-row {
    display: flex;                                              /* Имя и поле в одну строку */
    align-items: center;                                        /* Центрируем по вертикали */
    margin-bottom: 8px;                                         /* Отступ между полями */
}

.input-row span {
    font-weight: bold;                                          /* Жирный шрифт для имен */
    color: #2c3e50;                                             /* Цвет текста */
    margin-right: 10px;                                         /* Отступ от имени до поля */
    min-width: 55px;                                            /* Одинаковая ширина для имен */
}

.sentence-input {
    flex-grow: 1;                                               /* Поле занимает все оставшееся место */
    padding: 8px;                                               /* Внутренние отступы */
    border: 2px solid #99dfff;                                  /* Голубая рамка */
    border-radius: 10px;                                        /* Скругление */
    font-family: 'Comic Sans MS', sans-serif;                   /* Шрифт */
}

/* СТИЛИ ДЛЯ ЗАДАНИЯ №6 */
/* ЖЕСТКАЯ ШИРИНА ДЛЯ ВЕРХНЕЙ КАРТИНКИ */
.mystery-img.fixed-700 {
    width: 750px;                                               /* Устанавливаем ширину строго 700px, как вы требовали */
    height: auto;                                               /* Сохраняем пропорции изображения */
    max-width: 100%;                                            /* Чтобы не вылезала на узких экранах */
}

/* ГЛАВНАЯ СЕТКА НИЖНЕГО БЛОКА */
.task-6-bottom-layout {
    display: grid;                                              /* Включаем сетку для выравнивания */
    grid-template-columns: 1fr 300px;                           /* Левая колонка гибкая, правая (картинка) - 300px */
    gap: 40px;                                                  /* Расстояние между полями и картинкой */
    align-items: end;                                           /* Прижимаем элементы к нижнему краю сетки */
    margin: 10px 0 10px 0;                                      /* Отступы сверху и снизу от блока */
    width: 100%;                                                /* Растягиваем сетку на всю ширину карточки */
}

/* СТОПКА ПОЛЕЙ ВВОДА СЛЕВА */
.sentence-inputs-stack {
    display: flex;                                              /* Элементы друг под другом */
    flex-direction: column;
    gap: 4px;                                                  /* Расстояние между строками ввода */
    width: 100%;                                                /* Занимает всю ширину левой колонки */
}

/* СТИЛИЗАЦИЯ ПОЛЯ ВВОДА (ВЫНЕСЕНО ДЛЯ РЕДАКТИРОВАНИЯ) */
.custom-sentence-input {
    width: 100%;                                                /* Поле занимает всю ширину колонки */
    padding: 12px;                                              /* Внутренние отступы для текста */
    border: 3px solid #ffd600;                                  /* Толстая жёлтая рамка в стиль урока */
    border-radius: 12px;                                        /* Скругление углов поля */
    font-family: 'Comic Sans MS', sans-serif;                   /* Шрифт урока */
    font-size: 1.1em;                                          /* Размер текста внутри поля */
    outline: none;                                              /* Убираем стандартный контур */
    background: #ffffff;                                        /* Белый фон поля */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);                /* Внутренняя тень для объема */
}

/* Изменение рамки при фокусе (нажатии) */
.custom-sentence-input:focus {
    border-color: #ff6d00;                                      /* Оранжевая рамка при вводе */
}

/* КОНТЕЙНЕР ДЛЯ КАРТИНКИ СЗАЙЧАТАМИ */
.side-img-box {
    width: 300px;                                               /* Жесткая ширина для картинки */
    flex-shrink: 0;                                             /* Запрещаем картинке сжиматься */
}

.side-img {
    width: 100%;                                                /* Картинка на всю ширину контейнера */
    height: auto;                                               /* Пропорции */
    border-radius: 20px;                                        /* Скругление */
    border: 4px solid #fff;                                     /* Белая рамка */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);                      /* Тень */
    display: block;                                             /* Убираем нижний зазор */
}


/* СТИЛИ ДЛЯ ЗАДАНИЯ №7: РИФМЫ */

/* Контейнер для строк с текстом и полями ввода */
.rhymes-container {
    margin-bottom: 30px;                                        /* Отступ снизу до блока с картинками */
    font-size: 1.3em;                                           /* Размер шрифта для удобного чтения */
    line-height: 2.2;                                           /* Увеличенный интервал для размещения инпутов */
}

/* Стилизация отдельной строки (текст + инпут) */
.rhyme-line {
    display: flex;                                              /* Флекс-контейнер для выравнивания в ряд */
    align-items: center;                                        /* Центрируем текст и поле по вертикали */
    justify-content: space-between;                             /* Текст слева, поле ввода — строго справа */
    border-bottom: 1px dashed #ffd600;                          /* Пунктирная линия-разделитель между фразами */
    padding: 5px 0;                                             /* Внутренние отступы строки */
}

/* Поля ввода для завершения рифм */
.rhyme-input {
    width: 180px;                                               /* Базовая ширина поля (легко изменить здесь) */
    padding: 5px 10px;                                          /* Отступы внутри поля для текста */
    border: 2px solid #99dfff;                                  /* Голубая рамка в основном стиле урока */
    border-radius: 10px;                                        /* Скругление углов поля */
    font-family: 'Comic Sans MS', sans-serif;                   /* Единый шрифт урока */
    font-size: 0.9em;                                           /* Размер текста внутри инпута */
    outline: none;                                              /* Убираем стандартную синюю обводку браузера */
    transition: border-color 0.2s;                              /* Плавная смена цвета рамки */
}

/* Состояние поля при нажатии (фокусе) */
.rhyme-input:focus {
    border-color: #ff6d00;                                      /* Оранжевая рамка при вводе текста */
}

/* Ряд с картинками-подсказками внизу */
.hints-row {
    display: flex;                                              /* Картинки выстраиваются в один ряд */
    justify-content: center;                                    /* Центрируем весь ряд по горизонтали */
    gap: 15px;                                                  /* Расстояние между карточками подсказок */
    margin-bottom: 25px;                                        /* Отступ до кнопки проверки */
}

/* Карточка для каждой картинки-подсказки */
.hint-card {
    background: #ffffff;                                        /* Чистый белый фон для выделения картинки */
    padding: 10px;                                              /* Поля вокруг изображения */
    border-radius: 15px;                                        /* Скругленные углы карточки */
    width: 120px;                                               /* Фиксированная ширина карточки */
    height: 120px;                                              /* Фиксированная высота для ровной сетки */
    display: flex;                                              /* Центрируем содержимое внутри */
    align-items: center;                                        /* Вертикальное центрирование */
    justify-content: center;                                    /* Горизонтальное центрирование */
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);                     /* Легкая тень для эффекта объема */
}

/* Сама картинка внутри карточки */
.hint-card img {
    max-width: 100%;                                            /* Ограничиваем по ширине карточки */
    max-height: 100%;                                           /* Ограничиваем по высоте карточки */
    border-radius: 10px;                                        /* Легкое скругление углов самой картинки */
}

/* КЛАССЫ ДЛЯ ЛОГИКИ ПРОВЕРКИ (ДОБАВИТЬ В КОНЕЦ ФАЙЛА) */

/* Стиль при правильном ответе */
.input-correct { 
    border-color: #27ae60 !important;                           /* Зеленая рамка */
    background-color: #e8f5e9;                                  /* Светло-зеленый фон поля */
}

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

/* СТИЛИ ДЛЯ ЗАДАНИЯ №8: ЗАГАДОЧНЫЕ СЛОВА */

/* Ряд для полей ввода (центрирование и отступы) */
.sea-inputs-row {
    display: flex;                                              /* Выстраиваем инпуты в ряд */
    justify-content: center;                                    /* Центрируем их по горизонтали */
    gap: 20px;                                                  /* Расстояние между полями */
    margin: 25px 0;                                             /* Отступы сверху и снизу от картинок/кнопок */
}

/* Стилизация морских полей ввода */
.sea-input {
    width: 200px;                                               /* Ширина поля для слова */
    padding: 12px;                                              /* Внутренние отступы */
    border: 3px solid #3498db;                                  /* Голубая рамка в цвет морской темы */
    border-radius: 15px;                                        /* Скругление углов */
    font-family: 'Comic Sans MS', sans-serif;                   /* Шрифт урока */
    font-size: 1.1em;                                           /* Размер текста */
    text-align: center;                                         /* Текст вводится по центру */
    outline: none;                                              /* Убираем стандартный контур */
    transition: all 0.3s;                                       /* Плавная анимация эффектов */
}

/* Эффект при клике на поле */
.sea-input:focus {
    border-color: #ff6d00;                                      /* Оранжевая рамка при активации */
    box-shadow: 0 0 10px rgba(255, 109, 0, 0.2);                /* Легкое свечение */
}

/* Индивидуальные стили для результатов валидации */
.input-sea-correct { border-color: #27ae60 !important; background-color: #e8f5e9; }
.input-sea-wrong { border-color: #e74c3c !important; background-color: #ffebee; }


/* СТИЛИ ДЛЯ ЗАДАНИЯ №9: КЛЕТОЧКИ И ИНСТРУКЦИИ */

/* Блок текстовой инструкции */
.znayka-instructions {
    background: #fdfdfd;                                        /* Почти белый фон */
    border-left: 5px solid #3498db;                             /* Синяя полоса акцента */
    padding: 10px 20px;                                         /* Отступы внутри */
    margin-bottom: 20px;                                        /* Отступ до клеток */
    font-size: 1.1em;                                           /* Размер шрифта */
}

/* Контейнер для групп клеток */
.word-cells-container {
    display: flex;                                              /* Выравнивание групп в ряд */
    justify-content: center;                                    /* Центрирование по горизонтали */
    gap: 40px;                                                  /* Зазор между двумя словами */
    margin-bottom: 25px;                                        /* Отступ до картинки */
}

/* Группа клеток для одного слова */
.word-group {
    display: flex;                                              /* Буквы в ряд */
    gap: 5px;                                                   /* Зазор между клетками */
}

/* Стилизация отдельной клетки-буквы */
.letter-cell {
    width: 45px;                                                /* Ширина клетки */
    height: 45px;                                               /* Высота клетки */
    border: 2px solid #3498db;                                  /* Синяя рамка */
    border-radius: 5px;                                         /* Легкое скругление */
    text-align: center;                                         /* Буква по центру */
    font-size: 1.5em;                                           /* Крупный шрифт */
    font-family: 'Comic Sans MS', sans-serif;                   /* Шрифт урока */
    font-weight: bold;                                          /* Жирное начертание */
    text-transform: uppercase;                                  /* Всегда заглавные буквы */
    outline: none;                                              /* Убираем стандартный контур */
    transition: all 0.2s;                                       /* Плавная смена стилей */
}

/* Фокус на клетке */
.letter-cell:focus {
    border-color: #ff6d00;                                      /* Оранжевая рамка при вводе */
    background-color: #fff9f0;                                  /* Легкий теплый фон */
}

/* Классы для валидации (доцент, используй готовые из задания 7 или эти) */
.cell-correct { border-color: #27ae60 !important; background-color: #e8f5e9; }
.cell-wrong { border-color: #e74c3c !important; background-color: #ffebee; }

/* СТИЛИ ДЛЯ ЗАДАНИЯ №10: РАССКАЗ */

/* Блок с текстом рассказа */
.story-text-block {
    color: #006400;                                             /* Темно-зеленый цвет текста по заданию */
    font-size: 1.25em;                                          /* Комфортный размер для чтения ребенком */
    line-height: 1.6;                                           /* Межстрочный интервал для разборчивости */
    font-weight: bold;                                          /* Жирное начертание как на образце */
    text-align: left;                                           /* Выравнивание по левому краю */
    margin: 20px 0;                                             /* Отступы от картинки и до кнопки */
    padding: 0 10px;                                            /* Боковые отступы внутри блока */
    font-family: 'Comic Sans MS', sans-serif;                   /* Основной шрифт урока */
}

/* Настройка изображения для вокзала */
.mystery-img-container .mystery-img {
    max-width: 745px;                                           /* Ограничение ширины для баланса на странице */
    width: 100%;                                                /* Адаптивность под контейнер */
    height: auto;                                               /* Сохранение пропорций */
    border-radius: 15px;                                        /* Скругление углов картинки */
    border: 4px solid #fff;                                     /* Белая рамка */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);                      /* Тень для объема */
}