/* === Комментарий: Общий заголовок секции — указывает, что стили базируются на оформлении lesson-8 === */
    /* Базовое оформление на основе lesson-8.css */

/* === Стили для всего body (основной контейнер страницы) === */
body {
    /* Убираем стандартные отступы браузера */
    margin: 0; padding: 0;
    /* Очень светлый голубой фон — создаёт ощущение неба, детская тема */
    background-color: #99dfff;
    /* Основной шрифт — Comic Sans MS (детский, дружелюбный), запасной — Arial */
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
}

/* === Контейнер основного контента — задаёт внутренние отступы страницы === */
.content-wrapper { 
    /* Отступы: 40px сверху/снизу и 20px слева/справа */
    padding: 20px 10px; 
}

/* === Заголовочная часть страницы (имя ребёнка + дата + бейдж занятия) === */
.main-header { 
    /* Центрируем весь блок заголовка */
    text-align: center; 
    /* Отступ снизу перед первой карточкой */
    margin-bottom: 30px; 
}

.lesson-badge {
    /* Делаем элемент блочно-строчным, чтобы можно было задавать padding и ширину */
    display: inline-block;
    /* Светло-жёлтый фон для бейджа */
    background: #fff9c4;
    /* Внутренние отступы — сверху/снизу меньше, слева/справа больше */
    padding: 10px 30px;
    /* Скруглённые углы — детский, мягкий стиль */
    border-radius: 10px;
    /* Яркий оранжевый цвет текста */
    color: #ff6d00;
    /* Жирный шрифт для акцента */
    font-weight: bold;
    /* Очень крупный шрифт для заголовка занятия */
    font-size: 2.0em;
    /* Белая обводка для контраста и объёма */
    border: 3px solid #fff;
}

.user-info { 
    /* Средний размер шрифта для строки с именем и датой */
    font-size: 1.5em; 
    /* Спокойный серо-синий цвет */
    color: #546e7a; 
    /* Небольшой отступ сверху от бейджа */
    margin-top: 10px; 
    /* Жирный начертание */
    font-weight: bold; 
}

/* === Основная карточка задания (белая с жёлтой рамкой) === */
.white-card {
    /* Очень светлый голубовато-белый фон */
    background: #f0faff;
    /* Толстая яркая жёлтая рамка — основной визуальный акцент */
    border: 8px solid #ffd600;
    /* Очень сильное скругление углов — мультяшный стиль */
    border-radius: 25px;
    /* Внутренние отступы внутри карточки */
    padding: 15px;
    /* Центрирование карточки + отступ снизу до следующей */
    margin: 0 auto 30px auto;
    /* Ограничение максимальной ширины для больших мониторов */
    max-width: 800px;
    /* Лёгкая тень для эффекта приподнятости */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    /* Важно: учитываем border и padding в общей ширине/высоте элемента */
    box-sizing: border-box;
}

/* === Заголовок внутри карточки (название задания) === */
.card-title { 
    /* Яркий оранжевый цвет */
    color: #ff7043; 
    /* Центрирование */
    text-align: center; 
    /* Очень крупный шрифт */
    font-size: 1.9em; 
    /* Убираем внешние отступы */
    margin: 0; 
}

/* === Жёлтая разделительная линия под заголовком === */
.yellow-divider { 
    /* Высота полоски */
    height: 5px; 
    /* Яркий жёлтый цвет */
    background: #ef6707; 
    /* Ширина 80% от родителя */
    width: 95%; 
    /* Центрирование + отступы сверху и снизу */
    margin: 7px auto 7px; 
}

/* === Текст инструкции к заданию === */
.card-instruction { 
    /* Крупный читаемый размер */
    font-size: 1.2em; 
    /* Тёмно-серый цвет текста */
    color: #37474f; 
    /* Выравнивание по левому краю (в отличие от lesson-8) */
    text-align: left; 
    /* Отступ снизу до контента задания */
    margin-bottom: 15px; 
    /* Улучшенная читаемость за счёт межстрочного интервала */
    line-height: 1.1; 
}
/* === Задание №1. === */
/* ==========================================================================
   Блок выбора изображений (сетка + карточки + кнопка подтверждения)
   ========================================================================== */

/* Контейнер всей сетки изображений */
.image-selection-grid {
    display: grid;                      /* Используем CSS Grid для размещения элементов */
    grid-template-columns: repeat(5, 1fr);  /* 5 одинаковых колонок, занимающих всё доступное пространство */
    gap: 15px;                          /* Отступ между карточками по всем направлениям */
    margin-bottom: 30px;                /* Отступ снизу для отделения от элементов, идущих ниже */
}

/* Каждая отдельная карточка с изображением */
.selectable-item {
    background: #fff;                   /* Белый фон карточки */
    border: 3px solid #e0e0e0;          /* Светло-серая рамка в обычном состоянии */
    border-radius: 25px;                /* Скруглённые углы — современный карточный стиль */
    padding: 10px;                      /* Внутренние отступы внутри карточки */
    text-align: center;                 /* Центрирование содержимого (картинка + подпись) */
    cursor: pointer;                    /* Курсор указывает, что элемент кликабелен */
    transition: all 0.2s;               /* Плавная анимация при изменении состояний (0.2 секунды) */
}

/* Состояние выбранной карточки */
.selectable-item.selected {
    border: 6px solid #e74c3c !important;      /* Ярко-красная толстая рамка при выборе */
    box-shadow: inset 0 0 15px rgba(231, 76, 60, 0.3);  /* Внутренняя мягкая подсветка красным */
    /* !important используется, чтобы переопределить возможные более специфичные правила */
}

/* Изображение внутри карточки */
.selectable-item img {
    width: 100%;                        /* Картинка занимает всю ширину карточки */
    height: 110px;                      /* Фиксированная высота для единообразия карточек */
    object-fit: contain;                /* Изображение масштабируется с сохранением пропорций */
}

/* Текстовая подпись под изображением */
.img-label {
    display: block;                     /* Переводим в блочный элемент для корректных отступов */
    margin-top: 5px;                    /* Небольшой отступ сверху от картинки */
    font-weight: bold;                  /* Полужирное начертание */
    color: #1a237e;                     /* Тёмно-синий (indigo) цвет текста */
}

/* Контейнер для кнопки (обычно внизу формы) */
.btn-box {
    text-align: center;                 /* Центрирование кнопки по горизонтали */
}

/* Основная кнопка подтверждения (зелёная) */
.green-check-btn-final {
    background-color: #2ecc71;          /* Ярко-зелёный фон */
    color: white;                       /* Белый текст */
    border: none;                       /* Убираем стандартную рамку браузера */
    padding: 15px 45px;                 /* Достаточно крупные внутренние отступы */
    font-size: 1.4rem;                  /* Увеличенный размер шрифта */
    font-weight: bold;                  /* Жирный текст */
    border-radius: 15px;                /* Скруглённые углы кнопки */
    cursor: pointer;                    /* Курсор указывает на кликабельность */
    box-shadow: 0 6px 0 #27ae60;        /* Имитация объёма — тень снизу */
}

/* Состояние нажатой кнопки */
.green-check-btn-final:active {
    transform: translateY(4px);         /* Сдвиг кнопки вниз при нажатии */
    box-shadow: 0 2px 0 #1e8449;        /* Уменьшаем и темнеем тень при нажатии */
}

/* Текст с результатом (появляется после подтверждения) */
.result-text {
    text-align: center;                 /* Центрирование текста */
    font-size: 1.5rem;                  /* Крупный шрифт для акцента */
    font-weight: bold;                  /* Жирное начертание */
    margin-top: 20px;                   /* Отступ сверху от предыдущего блока */
}
/* === Задание №2. === */

/* Основной контейнер всего блока задания №2 */
.task-2-layout {
    display: flex;                    /* Используем flexbox для вертикального расположения секций */
    flex-direction: column;           /* Направление — сверху вниз (основные блоки друг под другом) */
    gap: 10px;                        /* Отступ между основными дочерними блоками */
    margin: 10px 0;                   /* Отступы сверху и снизу от всего задания */
}

/* Строка, содержащая пару изображений (визуальная часть пары) */
.pairs-row {
    display: flex;                    /* Flex-контейнер для размещения пары элементов в ряд */
    justify-content: space-around;    /* Равномерное распределение свободного пространства вокруг элементов */
    gap: 20px;                        /* Отступ между левым и правым элементом пары */
}

/* Обёртка каждой отдельной части пары (левой или правой) */
.pair-item-wrapper {
    flex: 1;                          /* Каждая обёртка занимает равную долю доступного пространства */
    display: flex;                    /* Внутренний flex для центрирования содержимого */
    justify-content: center;          /* Горизонтальное центрирование визуального блока внутри обёртки */
}

/* Визуальный блок пары (белая карточка с двумя картинками) */
.pair-visual {
    display: flex;                    /* Flex для горизонтального размещения двух изображений */
    gap: 5px;                        /* Отступ между картинками внутри карточки */
    background: #fff;                 /* Белый фон карточки */
    padding: 5px;                    /* Внутренние отступы внутри карточки */
    border-radius: 20px;              /* Скругление углов карточки */
    border: 2px solid #e1f5fe;        /* Тонкая светло-голубая рамка */
}

/* Изображения внутри визуального блока пары */
.pair-visual img {
    width: 175px;                     /* Фиксированная ширина каждого изображения */
    height: 150px;                    /* Фиксированная высота для единообразия */
    object-fit: contain;              /* Сохранение пропорций, изображение полностью помещается */
}

/* Строка с полями ввода (обычно два инпута для ввода предложений) */
.input-row {
    display: flex;                    /* Горизонтальное расположение полей ввода */
    gap: 10px;                        /* Отступ между полями ввода */
    margin-bottom: 10px;              /* Отступ снизу перед следующим контентом (если есть) */
}

/* Стилизация поля ввода предложения */
.sentence-input {
    flex: 1;                          /* Поле занимает всё доступное пространство в строке */
    padding: 10px 12px;               /* Внутренние отступы (вертикальные чуть меньше горизонтальных) */
    border: 3px solid #ffd600;        /* Жёлтая рамка в обычном состоянии */
    border-radius: 15px;              /* Скруглённые углы поля ввода */
    font-family: 'Comic Sans MS', sans-serif;  /* Детский, игровой шрифт (часто используется в заданиях для детей) */
    font-size: 1rem;                  /* Размер шрифта, сопоставимый с обычным текстом */
    outline: none;                    /* Убираем стандартную обводку браузера при фокусе */
}

/* Состояние поля при получении фокуса (пользователь кликнул или начал печатать) */
.sentence-input:focus {
    border-color: #ff6d00;            /* Смена цвета рамки на оранжевый при фокусе */
    background-color: #fffde7;        /* Очень светлый жёлто-оранжевый фон для акцента */
}

/* === Задание №3: Счётная лесенка. Комментарий: задание 3 === */

/* Основной контейнер задания — сетка из двух колонок */
.task-3-grid {
    display: grid;                    /* Используется CSS Grid для размещения карточек */
    grid-template-columns: 1fr 1fr;   /* Две равные по ширине колонки */
    gap: 5px;                        /* Отступ между карточками по горизонтали и вертикали */
    margin: 25px 0;                   /* Вертикальные отступы от окружающего контента */
}

/* Карточка с изображением и рядом чисел (одна из двух в сетке) */
.count-card {
    background: #fff;                 /* Белый фон карточки */
    border: 2px solid #e1f5fe;        /* Тонкая светло-голубая рамка */
    border-radius: 30px;              /* Сильно скруглённые углы для мягкого, дружелюбного вида */
    padding: 5px;                    /* Внутренние отступы внутри карточки */
    display: flex;                    /* Flexbox для вертикального размещения содержимого */
    flex-direction: column;           /* Элементы располагаются сверху вниз */
    align-items: center;              /* Горизонтальное центрирование всех дочерних элементов */
}

/* Изображение внутри карточки */
.count-card img {
    width: 200px;                     /* Фиксированная ширина изображения */
    height: 180px;                    /* Фиксированная высота для единообразия всех карточек */
    object-fit: contain;              /* Изображение помещается целиком с сохранением пропорций */
    margin-bottom: 5px;              /* Отступ снизу перед строкой с числами */
}

/* Горизонтальная строка с кругами-числами */
.number-row {
    display: flex;                    /* Flex-контейнер для горизонтального размещения кругов */
    gap: 8px;                         /* Небольшой отступ между соседними кругами */
}

/* Круг с числом — интерактивный элемент выбора/отметки */
.num-circle {
    width: 45px;                      /* Фиксированный размер круга */
    height: 45px;                     /* Квадратная основа перед скруглением */
    border-radius: 50%;               /* Превращает квадрат в идеальный круг */
    border: 3px solid;                /* Толстая рамка (цвет задаётся позже через классы темы) */
    display: flex;                    /* Flex для центрирования цифры внутри круга */
    align-items: center;              /* Вертикальное центрирование текста */
    justify-content: center;          /* Горизонтальное центрирование текста */
    font-weight: bold;                /* Полужирное начертание цифры */
    font-size: 1.4rem;                /* Увеличенный размер шрифта для читаемости */
    cursor: pointer;                  /* Курсор указывает на интерактивность элемента */
    transition: background-color 0.2s; /* Плавное изменение фона при активации */
    user-select: none;                /* Запрещаем выделение текста внутри круга */
}

/* ──────────────────────────────────────────────
   Блок цветовых тем для кругов
   Каждая тема задаёт свой цвет рамки и активного состояния
   ────────────────────────────────────────────── */

/* Жёлтая тема */
.yellow-theme .num-circle {
    border-color: #ffd600;            /* Ярко-жёлтая рамка */
    color: #000;                      /* Чёрный цвет цифры для контраста */
}
.yellow-theme .num-circle.active {
    background-color: #fff9c4;        /* Светло-жёлтый фон при активации */
}

/* Красная тема */
.red-theme .num-circle {
    border-color: #ff5252;            /* Ярко-красная рамка */
    color: #000;                      /* Чёрный цвет цифры */
}
.red-theme .num-circle.active {
    background-color: #ffcdd2;        /* Светло-розовый фон при активации */
}

/* Синяя тема */
.blue-theme .num-circle {
    border-color: #448aff;            /* Ярко-синяя рамка */
    color: #000;                      /* Чёрный цвет цифры */
}
.blue-theme .num-circle.active {
    background-color: #bbdefb;        /* Очень светло-голубой фон при активации */
}

/* Зелёная тема */
.green-theme .num-circle {
    border-color: #4caf50;            /* Зелёная рамка (Material Design green) */
    color: #000;                      /* Чёрный цвет цифры */
}
.green-theme .num-circle.active {
    background-color: #c8e6c9;        /* Светло-зелёный фон при активации */
}

/* === Задание №4: Игра Эхо. Комментарий: задание 4 === */
.echo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 30px 0;
    padding: 0 20px;
}

.echo-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.echo-headers {
    display: flex;
    width: 100%;
}

.echo-headers .spacer {
    width: 110px; /* Должен совпадать с шириной echo-label */
}

.header-item {
    flex: 1;
    text-align: center;
    font-family: 'Comic Sans MS', sans-serif;
    font-style: italic;
    color: #666;
    font-size: 0.9rem;
}

.echo-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.echo-label {
    width: 110px;
    font-weight: bold;
    font-size: 1.1rem;
    padding-bottom: 5px;
    white-space: nowrap;
}

.echo-input-container {
    flex-grow: 1;
    position: relative;
}

.echo-line-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.1rem;
    padding: 5px 0;
    outline: none;
    letter-spacing: 1px;
}

.echo-underline {
    height: 2px;
    background-color: #ffd600;
    width: 100%;
}

#task-4 .card-title {
    color: #ff6d00;
}

/* === Задание №5: Скороговорки. Комментарий: задание 5 === */
.tongue-twister-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.twister-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.twister-item {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 15px;
    border: 2px solid #e1f5fe;
    cursor: pointer;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.1rem;
    transition: 0.3s;
}

.twister-item.selected { border-color: #ff6d00; background: #fff3e0; }
.twister-item.matched { border-color: #27ae60; background: #e8f5e9; cursor: default; }

.twister-images {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}

.img-card {
    background: #fff;
    border: 2px solid #e1f5fe;
    border-radius: 15px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-card img { width: 100%; height: auto; border-radius: 10px; }
.img-card.selected { border-color: #ff6d00; box-shadow: 0 0 10px rgba(255, 109, 0, 0.3); }
.img-card.matched { border-color: #27ae60; opacity: 0.8; cursor: default; }

#task-5 .card-title { color: #ff6d00; }

/* === Задание №6: Место звука. Комментарий: задание 6 === */

/* Основной контейнер сетки для всех элементов задания */
.sound-place-grid {
    display: grid;                        /* Используется CSS Grid для равномерного размещения карточек */
    grid-template-columns: repeat(3, 1fr); /* Три равные по ширине колонки */
    gap: 5px;                            /* Отступ между карточками по горизонтали и вертикали */
    margin: 5px 0;                       /* Вертикальные отступы от окружающего контента */
}

/* Отдельная карточка с изображением и ячейками для выбора места звука */
.sound-item {
    display: flex;                        /* Flexbox для вертикального расположения содержимого */
    flex-direction: column;               /* Элементы располагаются сверху вниз */
    align-items: center;                  /* Горизонтальное центрирование всех дочерних элементов */
    gap: 5px;                            /* Отступ между изображением и блоком ячеек */
    background: #fff;                     /* Белый фон карточки */
    padding: 15px;                        /* Внутренние отступы внутри карточки */
    border-radius: 20px;                  /* Скруглённые углы карточки */
    border: 1px solid #e1f5fe;            /* Тонкая светло-голубая рамка */
}

/* Изображение внутри карточки (обычно животное или предмет, издающий звук) */
.sound-item img {
    height: 90px;                        /* Фиксированная высота для единообразия карточек */
    width: auto;                          /* Ширина подстраивается под пропорции изображения */
    object-fit: contain;                  /* Изображение полностью помещается без обрезки */
}

/* Контейнер горизонтального ряда ячеек (для выбора места звука: слева / центр / справа) */
.cells {
    display: flex;                        /* Flex-контейнер для горизонтального размещения ячеек */
    gap: 2px;                             /* Минимальный отступ между ячейками */
}

/* Каждая отдельная ячейка (квадрат для клика) */
.cells div {
    width: 35px;                          /* Фиксированная ширина ячейки */
    height: 35px;                         /* Квадратная форма */
    border: 2px solid #555;               /* Тёмно-серая рамка в обычном состоянии */
    cursor: pointer;                      /* Курсор указывает на возможность клика */
    transition: background 0.2s;          /* Плавное изменение цвета фона при активации */
}

/* Состояние выбранной (активной) ячейки */
.cells div.active {
    background-color: #448aff;            /* Синий фон при выборе */
    border-color: #448aff;                /* Рамка становится того же синего цвета */
    /* Примечание: используется синий цвет для обозначения "мягкого" / правильного звука */
}

/* Заголовок карточки внутри контейнера с id="task-6" */
#task-6 .card-title {
    color: #ff6d00;                       /* Ярко-оранжевый цвет заголовка для визуального акцента */
}




/* === Задание №7. Комментарий: задание 7 === */

/* Заголовок карточки задания №7 */
#task-7 .card-title {
    color: #ff6d00;                       /* Ярко-оранжевый цвет для визуального выделения заголовка */
}

/* Контейнер, содержащий область с животными и сарай */
.barn-container {
    display: flex;                        /* Flexbox для горизонтального размещения двух основных зон */
    justify-content: space-around;        /* Равномерное распределение пространства между зонами */
    align-items: center;                  /* Вертикальное выравнивание по центру */
    gap: 20px;                            /* Отступ между областью животных и сараем */
    margin-top: 20px;                     /* Отступ сверху от заголовка или предыдущего контента */
}

/* Область с перетаскиваемыми животными (пул объектов) */
.animals-pool {
    display: grid;                        /* Сетка для аккуратного размещения изображений животных */
    grid-template-columns: repeat(3, 1fr); /* Три равные колонки */
    gap: 5px;                            /* Отступ между карточками животных */
    padding: 10px;                        /* Внутренние отступы внутри контейнера */
    background: #fdfdfd;                  /* Очень светлый серо-белый фон */
    border: 2px dashed #e1f5fe;           /* Пунктирная светло-голубая рамка — визуальный намёк на зону перетаскивания */
    border-radius: 30px;                  /* Сильно скруглённые углы для мягкого вида */
    flex: 1;                              /* Занимает всё доступное пространство в flex-контейнере */
}

/* Каждое перетаскиваемое изображение животного */
.drag-animal {
    width: 158px;                         /* Фиксированная ширина изображения */
    height: 100px;                        /* Квадратная область отображения */
    object-fit: contain;                  /* Изображение помещается целиком с сохранением пропорций */
    cursor: grab;                         /* Курсор «захват» в обычном состоянии → намёк на drag-and-drop */
    transition: transform 0.2s, opacity 0.3s; /* Плавное изменение масштаба и прозрачности при взаимодействии */
}

/* Состояние при нажатии на элемент (пользователь начал перетаскивание) */
.drag-animal:active {
    cursor: grabbing;                     /* Курсор «захват в процессе» */
}

/* Контейнер зоны сарая (целевая область для сброса) */
.barn-zone {
    flex: 1;                              /* Занимает равную долю пространства рядом с animals-pool */
    position: relative;                   /* Необходим для абсолютного позиционирования оверлея */
    display: flex;                        /* Flex для центрирования изображения сарая */
    justify-content: center;              /* Горизонтальное центрирование изображения */
}

/* Основное изображение сарая */
.barn-img {
    width: 100%;                          /* Занимает всю ширину контейнера barn-zone */
    max-width: 400px;                     /* Ограничение максимальной ширины для читаемости на больших экранах */
    border-radius: 20px;                  /* Скругление углов изображения */
}

/* Оверлей, реагирующий на перетаскивание над зоной сарая */
.barn-overlay {
    position: absolute;                   /* Абсолютное позиционирование относительно barn-zone */
    top: 0; left: 0;                      /* Покрывает всю область родителя */
    width: 100%; height: 100%;            /* Полное перекрытие контейнера */
    z-index: 5;                           /* Находится поверх изображения сарая, но под перетаскиваемым элементом */
}

/* Состояние, когда над зоной находится перетаскиваемый объект */
.barn-overlay.drag-over {
    background: rgba(76, 175, 80, 0.1);   /* Очень светлый зелёный фон — индикация допустимой зоны сброса */
    border: 4px dashed #4caf50;           /* Зелёная пунктирная рамка при наведении */
    border-radius: 20px;                  /* Соответствует скруглению изображения сарая */
}

/* === Задание №8. Комментарий: задание 8 === */
.word-builder-container {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

.letter-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.letter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.letter-box img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: #fff;
    border-radius: 15px;
    padding: 5px;
    border: 1px solid #b3e5fc;
}

.letter-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #448aff;
    border-radius: 10px;
    color: #0d47a1;
    outline: none;
}

.letter-input:focus {
    background-color: #e3f2fd;
    box-shadow: 0 0 8px rgba(68, 138, 255, 0.5);
}

.letter-input.success { border-color: #27ae60; background-color: #e8f5e9; }
.letter-input.error { border-color: #f44336; background-color: #ffebee; }

/* === Задание №9. Комментарий: задание 9 === */

/* Основной контейнер всего задания — вертикальная компоновка */
.task-9-content {
    display: flex;                        /* Flexbox для последовательного расположения блоков */
    flex-direction: column;               /* Вертикальное направление: предложения → картинки → творческий блок */
    gap: 5px;                            /* Отступ между основными секциями задания */
}

/* ==================== Блок с перетаскиваемыми предложениями (вверху) ==================== */
.sentences-pool {
    display: flex;                        /* Flex-контейнер для вертикального списка предложений */
    flex-direction: column;               /* Предложения располагаются друг под другом */
    gap: 4px;                            /* Отступ между отдельными предложениями */
    align-items: flex-start;              /* Выравнивание по левому краю (для естественного чтения) */
}

/* Каждое перетаскиваемое предложение */
.drag-sentence {
    padding: 5px 5px;                    /* Внутренние отступы для комфортного чтения */
    background: #fff;                     /* Белый фон */
    border: 2px solid #81c784;            /* Зелёная рамка — позитивный, «правильный» акцент */
    border-radius: 10px;                  /* Мягкое скругление углов */
    cursor: grab;                         /* Курсор указывает на возможность перетаскивания */
    font-size: 1rem;                      /* Читаемый размер шрифта */
}

/* ==================== Средний блок: картинки-мишени в один ряд ==================== */
.images-targets-row {
    display: grid;                        /* Сетка для строгого размещения в 4 колонки */
    grid-template-columns: repeat(4, 1fr); /* Ровно 4 равные колонки */
    gap: 5px;                            /* Небольшие отступы между ячейками */
}

/* Зона сброса под каждой картинкой */
.target-box {
    border: 2px dashed #ccc;              /* Пунктирная серая рамка — визуальный намёк на drop-зону */
    border-radius: 12px;                  /* Скругление углов */
    padding: 10px;                        /* Внутренние отступы */
    text-align: center;                   /* Центрирование содержимого */
    background: #fff;                     /* Белый фон */
}

/* Изображение внутри зоны сброса */
.target-box img {
    width: 100%;                          /* Растягивается на всю ширину ячейки */
    height: 140px;                         /* Фиксированная высота для единообразия */
    object-fit: contain;                  /* Сохранение пропорций без обрезки */
}

/* Текстовое поле, куда попадает перетащенное предложение */
.drop-zone-text {
    min-height: 40px;                     /* Минимальная высота, чтобы зона не «прыгала» при пустом состоянии */
    margin-top: 5px;                     /* Отступ от картинки */
    background: #f5f5f5;                  /* Очень светло-серый фон */
    border-radius: 6px;                   /* Небольшое скругление */
    font-size: 0.85rem;                   /* Чуть меньший шрифт для вставленного текста */
    padding: 3px;                         /* Внутренние отступы */
}

/* ==================== Нижний творческий блок во всю ширину ==================== */
.creative-full-width {
    width: 100%;                          /* Занимает всю доступную ширину */
    background: #fff9c4;                  /* Очень светлый жёлтый фон — выделяет творческую часть */
    border: 2px solid #fbc02d;            /* Ярко-жёлтая рамка для акцента */
    border-radius: 20px;                  /* Большее скругление — дружелюбный, «творческий» вид */
    padding: 5px;                        /* Комфортные внутренние отступы */
}

/* Внутренний контейнер творческого блока */
.creative-box-inner {
    display: flex;                        /* Горизонтальное расположение картинки и поля ввода */
    align-items: center;                  /* Вертикальное центрирование элементов */
    gap: 10px;                            /* Большой отступ между картинкой и текстовым блоком */
}

/* Большая иллюстрация в творческом блоке */
.creative-img-large {
    max-width: 250px;                     /* Ограничение ширины для сохранения пропорций на разных экранах */
    border-radius: 15px;                  /* Скругление углов изображения */
}

/* Группа элементов ввода (подпись + поле) */
.creative-input-group {
    flex-grow: 1;                         /* Занимает всё оставшееся пространство */
    display: flex;                        /* Вертикальная компоновка элементов */
    flex-direction: column;               /* Подпись над полем ввода */
    gap: 10px;                            /* Отступ между подписью и инпутом */
}

/* Поле для творческого ответа пользователя */
#creative-input {
    padding: 12px;                        /* Комфортные отступы внутри поля */
    border: 2px solid #ffa000;            /* Ярко-оранжевая рамка — привлекает внимание */
    border-radius: 10px;                  /* Скруглённые углы */
    font-size: 1.1rem;                    /* Чуть увеличенный шрифт для удобства письма */
}