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


/* НАЧАЛО ОСНОВНОГО БЛОКА CSS */

/* =========================================================
   ЗАДАНИЕ 1: ЧТЕНИЕ СЛОГОВ И СЛОВ СО ЗВУКОМ [Щ]
   ========================================================= */

/* Подзаголовки разделов внутри задания */
.l32-t1-subtitle {
    font-size: 1.25rem;                               /* Крупный размер для навигации */
    font-weight: bold;                                /* Жирное начертание заголовка подраздела */
    color: #ff6d00;                                   /* Насыщенный оранжевый цвет */
    margin: 15px 0 10px 0;                            /* Отступы сверху и снизу */
    display: flex;                                    /* Флексбокс */
    align-items: center;                              /* Выравнивание по центру */
}

/* Яркое выделение буквы Щ в тексте слогов */
.l32-t1-shch {
    color: #e67e22;                                   /* Оранжевый акцентный цвет звука [щ] */
}

/* Иконка-кружок отметки прочтения строки */
.l32-t1-check-icon {
    font-size: 1.15rem;                               /* Размер маркера */
    user-select: none;                                /* Запрет выделения мышью */
    margin-right: 4px;                                /* Отступ справа до текста */
    transition: transform 0.2s ease;                  /* Анимация при нажатии */
}

/* Сетка для парных слогов верхней части (2 колонки) */
.l32-t1-pairs-grid {
    display: grid;                                    /* Включаем сетку Grid */
    grid-template-columns: repeat(2, 1fr);            /* Две равные колонки */
    gap: 10px;                                        /* Промежуток между строками */
    margin-bottom: 15px;                              /* Отступ снизу до следующего блока */
}

/* Карточка слоговой цепочки */
.l32-t1-item {
    background: #ffffff;                              /* Белый фон карточки */
    border: 2px solid #b3e5fc;                        /* Светло-голубая окантовка */
    border-radius: 12px;                              /* Скругленные уголки */
    padding: 10px 14px;                               /* Внутренние отступы */
    font-size: 1.2rem;                                /* Крупный детский кегль */
    font-weight: bold;                                /* Жирный шрифт слогов */
    color: #2c3e50;                                   /* Тёмно-синий текст */
    display: flex;                                    /* Выравнивание во флекс-строку */
    align-items: center;                              /* Центрирование по вертикали */
    gap: 10px;                                        /* Расстояние между иконкой и текстом */
    cursor: pointer;                                  /* Курсор-указатель для нажатия */
    user-select: none;                                /* Запрет синего выделения текста */
    transition: all 0.2s ease;                        /* Плавное изменение цвета */
    box-sizing: border-box;                           /* Рамка учитывается в ширине */
}

/* Наведение на строку слогов */
.l32-t1-item:hover {
    background: #e1f5fe;                              /* Приятное голубое свечение */
    border-color: #2980b9;                            /* Более контрастная рамка */
}

/* СТИЛИ ДЛЯ ТРЁХ ВЕРТИКАЛЬНЫХ БЛОКОВ С УДАРЕНИЯМИ */
.l32-t1-columns-3 {
    display: grid;                                    /* Включаем Grid-раскладку */
    grid-template-columns: repeat(3, 1fr);            /* Ровно три одинаковые колонки */
    gap: 12px;                                        /* Расстояние между вертикальными блоками */
    margin-bottom: 20px;                              /* Отступ снизу */
}

/* Отдельная колонка-карточка */
.l32-t1-col-card {
    background: #ffffff;                              /* Белый фон колонки */
    border: 2px solid #b3e5fc;                        /* Светло-синяя рамка вокруг колонки */
    border-radius: 14px;                              /* Округлые края блока */
    padding: 12px 8px;                                /* Внутренние отступы */
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Элементы друг под другом */
    align-items: center;                              /* Центрирование содержимого */
    box-sizing: border-box;                           /* Рамка в габаритах */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);        /* Легкая тень */
}

/* Заголовок столбика */
.l32-t1-col-title {
    font-size: 1.15rem;                               /* Размер названия столбика */
    font-weight: bold;                                /* Жирный шрифт */
    color: #0288d1;                                   /* Акцентный синий цвет */
    margin-bottom: 10px;                              /* Отступ до списка строк */
    padding-bottom: 4px;                              /* Отступ до линии */
    border-bottom: 2px dashed #b3e5fc;                /* Пунктирный разделитель */
    width: 85%;                                       /* Ширина полосы разделителя */
    text-align: center;                               /* Выравнивание по центру */
}

/* Контейнер строк внутри столбика */
.l32-t1-col-list {
    width: 100%;                                      /* На всю ширину карточки */
    display: flex;                                    /* Флекс-контейнер */
    flex-direction: column;                           /* Строки вертикально */
    gap: 8px;                                         /* Отступ между строками */
}

/* Отдельная строка с ритмическим ударением */
.l32-t1-stress-row {
    background: #f0faff;                              /* Светлый голубой фон строки */
    border: 1.5px solid #d4edf9;                      /* Тонкая аккуратная рамка */
    border-radius: 8px;                               /* Скругление углов */
    padding: 8px 6px;                                 /* Внутренние отступы */
    font-size: 1.15rem;                               /* Крупный размер слогов */
    color: #2c3e50;                                   /* Цвет текста */
    display: flex;                                    /* Флексбокс */
    align-items: center;                              /* Центрирование по вертикали */
    justify-content: flex-start;                      /* Выравнивание от левого края */
    gap: 8px;                                         /* Отступ между иконкой и слогами */
    cursor: pointer;                                  /* Курсор клика */
    user-select: none;                                /* Запрет случайного выделения */
    transition: all 0.2s ease;                        /* Плавный переход стилей */
    box-sizing: border-box;                           /* Учитываем границы */
}

/* Наведение на строку с ударением */
.l32-t1-stress-row:hover {
    background: #e0f2fe;                              /* Подсветка строки */
    border-color: #2980b9;                            /* Усиление границы */
}

/* СЕТКА ДЛЯ СЛОВ ВНИЗУ (2 СТОЛБИКА) */
.l32-t1-words-grid {
    display: grid;                                    /* Включаем Grid-раскладку */
    grid-template-columns: repeat(2, 1fr);            /* Две колонки для слов */
    gap: 12px;                                        /* Промежуток между колонками */
    margin-bottom: 15px;                              /* Отступ снизу до кнопки */
}

/* Колонка слов */
.l32-t1-words-col {
    display: flex;                                    /* Флекс-контейнер */
    flex-direction: column;                           /* Строки вертикально */
    gap: 8px;                                         /* Промежуток между словами */
}

/* Строка со слогом и словом */
.l32-t1-word-row {
    background: #ffffff;                              /* Белый фон карточки слова */
    border: 2px solid #b3e5fc;                        /* Светло-голубая рамка */
    border-radius: 10px;                              /* Скругленные углы */
    padding: 9px 12px;                                /* Внутренние отступы */
    font-size: 1.15rem;                               /* Размер шрифта слова */
    color: #2c3e50;                                   /* Тёмный контрастный цвет */
    display: flex;                                    /* Флексбокс */
    align-items: center;                              /* Центрирование по вертикали */
    gap: 8px;                                         /* Отступ между иконкой и текстом */
    cursor: pointer;                                  /* Курсор-палец */
    user-select: none;                                /* Запрет выделения текста */
    transition: all 0.2s ease;                        /* Плавная анимация */
    box-sizing: border-box;                           /* Учитываем рамку */
}

/* Наведение на слово */
.l32-t1-word-row:hover {
    background: #e1f5fe;                              /* Подсветка */
    border-color: #2980b9;                            /* Акцентная рамка */
}

/* АКТИВНОЕ СОСТОЯНИЕ (ПРОЧИТАНО): общие стили для всех типов строк */
.l32-t1-item.read,
.l32-t1-stress-row.read,
.l32-t1-word-row.read {
    background-color: #d4edda !important;             /* Светло-зелёный фон успеха */
    border-color: #27ae60 !important;                 /* Зелёная рамка выполненного */
    color: #155724 !important;                        /* Тёмно-зелёный читаемый текст */
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.15);    /* Мягкая зелёная тень */
}

/* Адаптивность для средних экранов и планшетов */
@media (max-width: 768px) {
    .l32-t1-columns-3 {
        grid-template-columns: 1fr;                   /* 3 блока выстраиваются друг под другом */
        gap: 10px;                                    /* Отступ между блоками */
    }

    .l32-t1-pairs-grid,
    .l32-t1-words-grid {
        grid-template-columns: 1fr;                   /* Сетка в одну колонку на узких экранах */
    }
}

/* =========================================================
   ЗАДАНИЕ 2: СЕТКА 3 СТОЛБЦА В 4 РЯДА (ИГРА «НАЗОВИ КАРТИНКИ»)
   ========================================================= */

/* Контейнер сетки: ровно 3 равных столбца */
.l32-t2-grid {
    display: grid;                                    /* Включаем современную CSS Grid раскладку */
    grid-template-columns: repeat(3, 1fr);            /* Формируем ровно 3 одинаковых столбца */
    gap: 15px;                                        /* Одинаковые отступы между карточками по горизонтали и вертикали */
    margin-top: 15px;                                 /* Отступ сверху от текста инструкции */
    margin-bottom: 20px;                              /* Отступ снизу до кнопки проверки задания */
}

/* Отдельная карточка предмета (картинка + поле ввода снизу) */
.l32-t2-card {
    background: #ffffff;                              /* Чистый белый фон для контраста с картинкой */
    border: 2px solid #b3e5fc;                        /* Светло-голубая детская окантовка карточки */
    border-radius: 14px;                              /* Мягкое скругление углов */
    padding: 10px;                                    /* Внутренние поля карточки со всех сторон */
    display: flex;                                    /* Включаем Flexbox контейнер */
    flex-direction: column;                           /* Размещаем картинку строго над полем ввода */
    align-items: center;                              /* Выравниваем содержимое строго по горизонтальному центру */
    gap: 8px;                                         /* Расстояние между контейнером картинки и полем ввода */
    box-sizing: border-box;                           /* Рамка и отступы включаются в общие размеры карточки */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);        /* Легкая тень для визуального объема карточки */
    transition: transform 0.2s ease, border-color 0.2s ease; /* Плавная анимация при взаимодействии */
}

/* Эффект легкого приподнятия при наведении курсора */
.l32-t2-card:hover {
    transform: translateY(-2px);                      /* Карточка слегка приподнимается вверх */
    border-color: #2980b9;                            /* Рамка становится более четкой и насыщенной */
}

/* Фиксированный контейнер для изображения (гарантирует одинаковую высоту во всех рядах) */
.l32-t2-img-box {
    width: 100%;                                      /* Контейнер занимает всю доступную ширину карточки */
    height: 120px;                                    /* Фиксированная высота блока для идеального выравнивания рядов */
    display: flex;                                    /* Flexbox для позиционирования изображения */
    align-items: center;                              /* Центрирование изображения по вертикали */
    justify-content: center;                          /* Центрирование изображения по горизонтали */
    background: #fbfdff;                              /* Минимальный светлый подслой под картинку */
    border-radius: 10px;                              /* Скругление углов подложки картинки */
    overflow: hidden;                                 /* Прячем любые выступающие части за пределы блока */
}

/* Само изображение предмета */
.l32-t2-img {
    max-width: 100%;                                  /* Запрещаем картинке выходить за пределы блока по ширине */
    max-height: 100%;                                 /* Запрещаем картинке превышать установленную высоту 120px */
    object-fit: contain;                              /* Сохраняем исходные пропорции рисунка без деформаций */
    display: block;                                   /* Убираем лишние строчные отступы снизу */
}

/* Поле для ввода названия предмета под картинкой */
.l32-t2-input {
    width: 100%;                                      /* Поле ввода растягивается на всю ширину карточки */
    border: 2px solid #3498db;                        /* Аккуратная синяя рамка инпута */
    border-radius: 8px;                               /* Скругление краев поля ввода */
    padding: 6px 8px;                                 /* Комфортные внутренние отступы для текста */
    font-family: 'Comic Sans MS', sans-serif;         /* Единый детский шрифт проекта */
    font-size: 1.1rem;                                /* Четкий, легко читаемый размер букв */
    font-weight: bold;                                /* Полужирное начертание для удобства ребенка */
    color: #2980b9;                                   /* Насыщенный темно-синий цвет введенного текста */
    outline: none;                                    /* Убираем грубую браузерную рамку фокуса */
    text-align: center;                               /* Вводимое слово располагается строго по центру */
    box-sizing: border-box;                           /* Толщина рамки учитывается в общей ширине */
    transition: all 0.2s ease;                        /* Плавный переход стилей при фокусе и проверке */
}

/* Состояние поля ввода при активном наборе текста */
.l32-t2-input:focus {
    border-color: #2980b9;                            /* Граница окрашивается в глубокий синий оттенок */
    box-shadow: 0 0 6px rgba(52, 152, 219, 0.35);     /* Мягкое неоновое свечение вокруг инпута */
    background-color: #f0f9ff;                        /* Нежный голубоватый фон активного поля */
}

/* Стили поля при верном ответе (зеленая индикация успеха) */
.l32-t2-input.correct {
    border-color: #27ae60 !important;                 /* Яркая зеленая рамка правильного ответа */
    background-color: #d4edda !important;             /* Светло-зеленый приятный фон */
    color: #155724 !important;                        /* Глубокий темно-зеленый цвет текста */
}

/* Стили поля при ошибке или пропуске (красная индикация) */
.l32-t2-input.wrong {
    border-color: #e74c3c !important;                 /* Насыщенная красная рамка ошибки */
    background-color: #f8d7da !important;             /* Светло-красный предупреждающий фон */
    color: #721c24 !important;                        /* Темно-красный цвет текста ошибки */
}

/* Адаптивность для планшетов и экранов средней ширины (переход в 2 колонки) */
@media (max-width: 720px) {
    .l32-t2-grid {
        grid-template-columns: repeat(2, 1fr);        /* Перестраиваем сетку в 2 колонки */
        gap: 12px;                                    /* Небольшое уменьшение зазоров */
    }

    .l32-t2-img-box {
        height: 110px;                                /* Слегка уменьшаем высоту картинок на планшете */
    }
}

/* Адаптивность для смартфонов (1 колонка) */
@media (max-width: 480px) {
    .l32-t2-grid {
        grid-template-columns: 1fr;                   /* На узких смартфонах выстраиваем карточки в 1 столбик */
        gap: 10px;                                    /* Компактный зазор между элементами */
    }

    .l32-t2-img-box {
        height: 130px;                                /* Оптимальная высота превью на мобильных */
    }
}

/* =========================================================
   ЗАДАНИЕ 3: СТИЛИ ДЛЯ ИГРЫ «ЭХО» (СЛОВА-ПРИЗНАКИ)
   ========================================================= */

/* Общий вертикальный контейнер для всех строк задания */
.l32-t3-container {
    display: flex;                                    /* Включаем Flexbox раскладку */
    flex-direction: column;                           /* Строки выстраиваются вертикально друг под другом */
    gap: 14px;                                        /* Отступ между отдельными блоками слов */
    margin-top: 15px;                                 /* Отступ сверху от текста инструкции */
    margin-bottom: 20px;                              /* Отступ снизу до кнопки проверки */
}

/* Отдельная плашка ряда со словом-предметом и тройкой признаков */
.l32-t3-row {
    background: #ffffff;                              /* Чистый белый фон для читаемости */
    border: 2px solid #b3e5fc;                        /* Светло-голубая фирменная рамка */
    border-radius: 14px;                              /* Мягкое скругление углов блока */
    padding: 12px 16px;                               /* Внутренние поля со всех сторон */
    display: flex;                                    /* Flexbox для горизонтального ряда */
    align-items: center;                              /* Выравнивание элементов по центру вертикали */
    gap: 16px;                                        /* Промежуток между исходным словом и блоком ввода */
    box-sizing: border-box;                           /* Рамка учитывается в общей ширине */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);        /* Легкая тень карточки */
}

/* Исходное слово-предмет слева (например, "немощь —") */
.l32-t3-source-word {
    font-family: 'Comic Sans MS', sans-serif;         /* Единый детский шрифт */
    font-size: 1.25rem;                               /* Крупный размер для наглядности */
    font-weight: bold;                                /* Жирное начертание */
    color: #ff6d00;                                   /* Яркий оранжевый акцент */
    min-width: 105px;                                 /* Фиксированная ширина для ровного выравнивания колонок */
    white-space: nowrap;                              /* Запрет переноса слова на другую строку */
}

/* Контейнер для трех пар "слово-признак + существительное" */
.l32-t3-triad {
    display: grid;                                    /* Сетка Grid для трёх равных колонок */
    grid-template-columns: repeat(3, 1fr);            /* Ровно три одинаковых столбца */
    gap: 12px;                                        /* Промежуток между парами */
    flex: 1;                                          /* Занимает всю оставшуюся ширину ряда */
}

/* Пара: поле ввода + существительное в скобках */
.l32-t3-field-pair {
    display: flex;                                    /* Флекс-контейнер строки */
    align-items: center;                              /* Вертикальное выравнивание по центру */
    gap: 6px;                                         /* Отступ между инпутом и скобками */
}

/* Поле ввода слова-признака */
.l32-t3-input {
    flex: 1;                                          /* Поле гибко растягивается в доступном пространстве */
    min-width: 90px;                                  /* Минимальная ширина поля ввода */
    border: 2px solid #3498db;                        /* Синяя рамка инпута */
    border-radius: 8px;                               /* Скругление краев */
    padding: 6px 8px;                                 /* Внутренние поля для комфортного ввода */
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт */
    font-size: 1.05rem;                               /* Читаемый размер текста */
    font-weight: bold;                                /* Жирное начертание введенных букв */
    color: #2980b9;                                   /* Синий цвет вводимого текста */
    outline: none;                                    /* Убираем браузерный контур фокуса */
    text-align: center;                               /* Текст выравнивается по центру поля */
    box-sizing: border-box;                           /* Рамка учитывается в размерах */
    transition: all 0.2s ease;                        /* Плавное изменение цвета */
}

/* Поле ввода при фокусе (наборе текста) */
.l32-t3-input:focus {
    border-color: #2980b9;                            /* Более глубокий синий оттенок границы */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.35);     /* Легкое неоновое свечение */
    background-color: #f0f9ff;                        /* Нежно-голубой фон поля */
}

/* Правильно введенное слово-признак (зелёный цвет успеха) */
.l32-t3-input.correct {
    border-color: #27ae60 !important;                 /* Зеленая рамка */
    background-color: #d4edda !important;             /* Светло-зеленый фон */
    color: #155724 !important;                        /* Темно-зеленый текст */
}

/* Ошибка или пустое поле (красный предупреждающий цвет) */
.l32-t3-input.wrong {
    border-color: #e74c3c !important;                 /* Красная рамка */
    background-color: #f8d7da !important;             /* Светло-красный фон */
    color: #721c24 !important;                        /* Темно-красный текст */
}

/* Поясняющее существительное в скобках (дедушка), (лиса) и т.д. */
.l32-t3-noun {
    font-family: 'Comic Sans MS', sans-serif;         /* Общий шрифт */
    font-size: 1.05rem;                               /* Соразмерный тексту инпута кегль */
    font-weight: bold;                                /* Жирное начертание существительного */
    color: #2c3e50;                                   /* Темно-синий спокойный цвет */
    white-space: nowrap;                              /* Запрет переноса скобок */
}

/* Адаптивность для планшетов (переход в вертикальное расположение полей в карточке) */
@media (max-width: 820px) {
    .l32-t3-row {
        flex-direction: column;                       /* Исходное слово сверху, пары снизу */
        align-items: flex-start;                      /* Выравнивание по левому краю */
        gap: 10px;                                    /* Отступ между словом и полями */
    }

    .l32-t3-triad {
        width: 100%;                                  /* Блок троек занимает 100% ширины */
    }
}

/* Адаптивность для мобильных телефонов */
@media (max-width: 560px) {
    .l32-t3-triad {
        grid-template-columns: 1fr;                   /* Каждая пара встает на отдельную строку */
        gap: 8px;                                     /* Компактный зазор между строками */
    }

    .l32-t3-field-pair {
        width: 100%;                                  /* Пара на всю ширину блока */
    }

    .l32-t3-input {
        width: 60%;                                   /* Инпут занимает большую часть строки */
    }
}

/* =========================================================
   ЗАДАНИЕ 3: СТИЛИ ДЛЯ ИГРЫ «ЭХО» (СЛОВА-ПРИЗНАКИ)
   ========================================================= */

/* Общий вертикальный контейнер для всех строк задания */
.l32-t3-container {
    display: flex;                                    /* Включаем Flexbox раскладку */
    flex-direction: column;                           /* Строки выстраиваются вертикально друг под другом */
    gap: 12px;                                        /* Оптимальный отступ между строками */
    margin-top: 15px;                                 /* Отступ сверху от текста инструкции */
    margin-bottom: 20px;                              /* Отступ снизу до кнопки проверки */
    width: 100%;                                      /* Строго 100% ширины белой карточки */
    box-sizing: border-box;                           /* Учитываем все границы */
}

/* Отдельная плашка ряда со словом-предметом и тройкой признаков */
.l32-t3-row {
    background: #ffffff;                              /* Чистый белый фон для читаемости */
    border: 2px solid #b3e5fc;                        /* Светло-голубая фирменная рамка */
    border-radius: 14px;                              /* Мягкое скругление углов блока */
    padding: 10px 12px;                               /* Внутренние компактные поля */
    display: flex;                                    /* Flexbox для ряда */
    align-items: center;                              /* Выравнивание элементов по центру вертикали */
    gap: 10px;                                        /* Зазор между исходным словом и тройкой полей */
    box-sizing: border-box;                           /* Рамка учитывается в общей ширине */
    width: 100%;                                      /* Полоса занимает ровно ширину контейнера */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);        /* Легкая тень карточки */
}

/* Исходное слово-предмет слева (например, "немощь —") */
.l32-t3-source-word {
    font-family: 'Comic Sans MS', sans-serif;         /* Единый детский шрифт */
    font-size: 1.15rem;                               /* Четкий размер шрифта */
    font-weight: bold;                                /* Жирное начертание */
    color: #ff6d00;                                   /* Яркий оранжевый акцент */
    flex-shrink: 0;                                   /* Запрещаем сжатие слова слева */
    width: 95px;                                      /* Фиксированная ширина для ровной колонки */
    white-space: nowrap;                              /* Запрет переноса слова */
}

/* Контейнер для трех пар "слово-признак + существительное" */
.l32-t3-triad {
    display: grid;                                    /* Сетка Grid для трёх равных колонок */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0, 1fr) запрещает колонкам распирать блок */
    gap: 8px;                                         /* Промежуток между парами */
    flex: 1;                                          /* Занимает всю оставшуюся ширину ряда */
    min-width: 0;                                     /* Позволяет флекс-элементу сжиматься внутри строки */
}

/* Пара: поле ввода + существительное в скобках */
.l32-t3-field-pair {
    display: flex;                                    /* Флекс-контейнер строки */
    align-items: center;                              /* Вертикальное выравнивание по центру */
    gap: 4px;                                         /* Минимальный аккуратный зазор между инпутом и словом */
    min-width: 0;                                     /* Запрещаем паре распирать свою ячейку сетки */
}

/* Поле ввода слова-признака */
.l32-t3-input {
    flex: 1;                                          /* Инпут занимает всё свободное место в своей ячейке */
    min-width: 0;                                     /* Критично: снимает браузерное ограничение на ширину инпута */
    width: 100%;                                      /* Ширина на всю доступную область */
    border: 2px solid #3498db;                        /* Синяя рамка инпута */
    border-radius: 8px;                               /* Скругление краев поля */
    padding: 6px 4px;                                 /* Компактные внутренние поля */
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт */
    font-size: 1rem;                                  /* Читаемый размер шрифта */
    font-weight: bold;                                /* Жирный текст */
    color: #2980b9;                                   /* Синий цвет букв */
    outline: none;                                    /* Убираем браузерный контур фокуса */
    text-align: center;                               /* Текст строго по центру */
    box-sizing: border-box;                           /* Рамка учитывается в ширине */
    transition: all 0.2s ease;                        /* Плавная анимация */
}

/* Поле ввода при фокусе (наборе текста) */
.l32-t3-input:focus {
    border-color: #2980b9;                            /* Более глубокий синий оттенок границы */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.35);     /* Легкое неоновое свечение */
    background-color: #f0f9ff;                        /* Нежно-голубой фон поля */
}

/* Правильно введенное слово-признак (зелёный цвет успеха) */
.l32-t3-input.correct {
    border-color: #27ae60 !important;                 /* Зеленая рамка */
    background-color: #d4edda !important;             /* Светло-зеленый фон */
    color: #155724 !important;                        /* Темно-зеленый текст */
}

/* Ошибка или пустое поле (красный предупреждающий цвет) */
.l32-t3-input.wrong {
    border-color: #e74c3c !important;                 /* Красная рамка */
    background-color: #f8d7da !important;             /* Светло-красный фон */
    color: #721c24 !important;                        /* Темно-красный текст */
}

/* Поясняющее существительное в скобках (дедушка), (лиса) и т.д. */
.l32-t3-noun {
    font-family: 'Comic Sans MS', sans-serif;         /* Общий детский шрифт */
    font-size: 0.92rem;                               /* Компактный размер, чтобы помещаться без переносов */
    font-weight: bold;                                /* Жирное начертание существительного */
    color: #2c3e50;                                   /* Темно-синий спокойный цвет */
    white-space: nowrap;                              /* Запрет переноса скобок */
    flex-shrink: 0;                                   /* Слово в скобках никогда не обрезается */
}

/* Адаптивность для планшетов */
@media (max-width: 768px) {
    .l32-t3-row {
        flex-direction: column;                       /* Исходное слово сверху, пары снизу */
        align-items: flex-start;                      /* Выравнивание по левому краю */
        gap: 8px;                                     /* Отступ между словом и полями */
    }

    .l32-t3-source-word {
        width: 100%;                                  /* Занимает всю ширину в строке */
    }

    .l32-t3-triad {
        width: 100%;                                  /* Блок троек занимает 100% ширины */
    }
}

/* Адаптивность для мобильных телефонов */
@media (max-width: 520px) {
    .l32-t3-triad {
        grid-template-columns: 1fr;                   /* Каждая пара встает на отдельную строку */
        gap: 6px;                                     /* Компактный зазор между строками */
    }

    .l32-t3-field-pair {
        width: 100%;                                  /* Пара на всю ширину блока */
    }
}
/* Контейнер для центрирования кнопки */
.btn-box {
    display: flex;                                              /* Включаем флексбокс */
    justify-content: center;                                    /* Выравнивание кнопки по центру */
    margin-top: 10px;                                           /* Отступ сверху от строк задания */
    margin-bottom: 5px;                                         /* Отступ снизу до края белой карточки */
}

/* Оранжевая кнопка проверки */
.orange-check-btn {
    background: linear-gradient(to bottom, #ff9244, #f57c00);   /* Градиент кнопки */
    color: #ffffff;                                             /* Белый цвет текста */
    font-family: 'Comic Sans MS', sans-serif;                   /* Шрифт */
    font-size: 1.4em;                                           /* Читаемый размер шрифта */
    font-weight: bold;                                          /* Жирное начертание */
    padding: 10px 50px;                                         /* Внутренние поля */
    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.2em;                                           /* Размер шрифта подсказки */
    margin: 10px 0;                                             /* Вертикальные отступы */
    min-height: 1.4em;                                          /* Резервирование высоты */
}

/* =========================================================
   ЗАДАНИЕ 4: СТИЛИ ДЛЯ ИЗМЕНЕНИЯ СЛОВОСОЧЕТАНИЙ ПО ЛИЦАМ
   ========================================================= */

/* Общий контейнер таблицы задания */
.l32-t4-table {
    display: flex;                                    /* Включаем Flexbox контейнер */
    flex-direction: column;                           /* Строки располагаются строго вертикально */
    gap: 10px;                                        /* Расстояние между строками */
    margin-top: 15px;                                 /* Отступ сверху от текста инструкции */
    margin-bottom: 20px;                              /* Отступ снизу до кнопки проверки */
    width: 100%;                                      /* Таблица занимает 100% ширины белой карточки */
    box-sizing: border-box;                           /* Рамка учитывается в общей ширине */
}

/* Строка заголовков колонок */
.l32-t4-header-row {
    display: grid;                                    /* Сетка Grid для шапки */
    grid-template-columns: 55px 1fr 1fr;              /* Узкая колонка под местоимения и две равные под фразы */
    gap: 10px;                                        /* Зазор между колонками */
    align-items: center;                              /* Выравнивание по центру */
}

/* Пустая ячейка над местоимениями */
.l32-t4-pronoun-col {
    width: 55px;                                      /* Фиксированная ширина колонки */
}

/* Заголовок словосочетания */
.l32-t4-phrase-header {
    background: #fff9c4;                              /* Нежный светло-жёлтый фон заголовка */
    border: 2px solid #ffd600;                        /* Жёлтая контрастная окантовка */
    border-radius: 10px;                              /* Скругление краев плашки */
    padding: 8px 10px;                                /* Внутренние отступы */
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт */
    font-size: 1.15rem;                               /* Крупный размер шрифта */
    font-weight: bold;                                /* Жирное начертание заголовка */
    color: #ff6d00;                                   /* Насыщенный оранжевый цвет */
    text-align: center;                               /* Текст по центру */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);        /* Легкая тень */
}

/* Отдельная строка с местоимением и двумя полями ввода */
.l32-t4-row {
    display: grid;                                    /* Сетка Grid */
    grid-template-columns: 55px minmax(0, 1fr) minmax(0, 1fr); /* Запрещаем полям распирать таблицу вправо */
    gap: 10px;                                        /* Расстояние между ячейками */
    align-items: center;                              /* Центрирование по высоте */
    background: #ffffff;                              /* Белый фон карточки ряда */
    border: 2px solid #b3e5fc;                        /* Голубая аккуратная рамка */
    border-radius: 12px;                              /* Скругление углов */
    padding: 8px 10px;                                /* Внутренние поля */
    box-sizing: border-box;                           /* Учитываем границы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);        /* Минимальная тень */
}

/* Местоимение в левой колонке (я, ты, он...) */
.l32-t4-pronoun {
    font-family: 'Comic Sans MS', sans-serif;         /* Шрифт урока */
    font-size: 1.25rem;                               /* Крупный читаемый кегль */
    font-weight: bold;                                /* Жирный акцент */
    color: #2c3e50;                                   /* Темно-синий тон */
    text-align: center;                               /* По центру колонки */
    user-select: none;                                /* Запрет случайного выделения */
}

/* Ячейка с полем ввода и подсказкой */
.l32-t4-cell {
    display: flex;                                    /* Флексбокс */
    align-items: center;                              /* Выравнивание по центру вертикали */
    gap: 6px;                                         /* Отступ между подсказкой и инпутом */
    min-width: 0;                                     /* Позволяет сжиматься без вылезания */
}

/* Начальное слово-подсказка в строке «я» (тащу, чищу) */
.l32-t4-verb-prefix {
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт */
    font-size: 1.1rem;                                /* Размер подсказки */
    font-weight: bold;                                /* Жирный текст */
    color: #0288d1;                                   /* Синий цвет подсказки */
    white-space: nowrap;                              /* Запрет переноса слова */
    flex-shrink: 0;                                   /* Не сжимать префикс */
}

/* Поле ввода предложения */
.l32-t4-input {
    flex: 1;                                          /* Занимает всю ширину ячейки */
    min-width: 0;                                     /* Снимает встроенное ограничение ширины браузера */
    border: 2px solid #3498db;                        /* Синяя рамка инпута */
    border-radius: 8px;                               /* Скругление краев */
    padding: 6px 10px;                                /* Удобные поля для набора */
    font-family: 'Comic Sans MS', sans-serif;         /* Единый шрифт */
    font-size: 1.05rem;                               /* Читаемый размер текста */
    font-weight: bold;                                /* Полужирное начертание */
    color: #2980b9;                                   /* Синий оттенок введенных букв */
    outline: none;                                    /* Убираем стандартную обводку */
    box-sizing: border-box;                           /* Рамка учитывается в размерах */
    transition: all 0.2s ease;                        /* Плавная анимация */
}

/* Фокус на поле ввода */
.l32-t4-input:focus {
    border-color: #2980b9;                            /* Тёмно-синяя рамка при вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.35);     /* Легкое неоновое свечение */
    background-color: #f0f9ff;                        /* Нежно-голубой фон */
}

/* Правильный ответ (зеленая рамка и фон) */
.l32-t4-input.correct {
    border-color: #27ae60 !important;                 /* Зеленая рамка */
    background-color: #d4edda !important;             /* Светло-зеленый фон успеха */
    color: #155724 !important;                        /* Тёмно-зеленый цвет текста */
}

/* Неправильный ответ или незаполненное поле */
.l32-t4-input.wrong {
    border-color: #e74c3c !important;                 /* Красная рамка */
    background-color: #f8d7da !important;             /* Светло-красный предупреждающий фон */
    color: #721c24 !important;                        /* Тёмно-красный цвет текста */
}

/* Адаптивность для экранов планшетов и мобильных устройств */
@media (max-width: 700px) {
    .l32-t4-header-row {
        grid-template-columns: 1fr;                   /* Шапки фраз перестраиваются вертикально */
        display: none;                                /* Скрываем верхнюю шапку на узких экранах */
    }

    .l32-t4-row {
        grid-template-columns: 1fr;                   /* Выстраиваем элементы ряда в один столбик */
        gap: 6px;                                     /* Компактный зазор */
        padding: 10px;                                /* Увеличенные внутренние отступы */
    }

    .l32-t4-pronoun {
        text-align: left;                             /* Выравниваем местоимение слева */
        padding-left: 4px;                            /* Небольшой отступ */
        color: #ff6d00;                               /* Акцентный цвет местоимения в мобильной версии */
    }
}

/* =========================================================
   ЗАДАНИЕ 5: СТИЛИ ДЛЯ УПРАЖНЕНИЯ «ВЕСЁЛЫЙ ПОЕЗД»
   ========================================================= */

/* Горизонтальный контейнер с прокруткой для поезда */
.l32-t5-train-wrapper {
    width: 100%;                                      /* На всю ширину карточки */
    overflow-x: auto;                                 /* Горизонтальная прокрутка при необходимости */
    padding-bottom: 6px;                              /* Отступ снизу под колесами */
    margin-top: 15px;                                 /* Отступ сверху от инструкции */
    box-sizing: border-box;                           /* Учитываем границы */
}

/* Состав: паровоз + 4 вагона в один ряд */
.l32-t5-train {
    display: inline-flex;                             /* Включаем ряд flex-элементов */
    align-items: flex-end;                            /* Выравнивание по нижнему краю (по рельсам) */
    gap: 8px;                                         /* Сцепка между вагонами */
    min-width: 680px;                                 /* Минимальная ширина для комфортного вида состава */
    padding: 10px 4px 0 4px;                          /* Внутренние отступы */
}

/* Паровоз (локомотив) */
.l32-t5-locomotive {
    background: #ff7043;                              /* Оранжево-красный цвет локомотива */
    border: 3px solid #d84315;                        /* Контрастная темная рамка */
    border-radius: 14px 10px 6px 6px;                 /* Закругление кабины */
    width: 110px;                                     /* Ширина локомотива */
    height: 105px;                                    /* Высота кабины паровоза */
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Элементы вертикально */
    align-items: center;                              /* Центрирование */
    justify-content: space-between;                   /* Распределение сверху вниз */
    padding: 4px;                                     /* Внутренние отступы */
    box-sizing: border-box;                           /* Рамка учитывается */
    position: relative;                               /* Относительное позиционирование для трубы */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);        /* Тень локомотива */
}

/* Труба паровоза с дымом */
.l32-t5-pipe {
    position: absolute;                               /* Абсолютное позиционирование трубы */
    top: -14px;                                       /* Вынос трубы над крышей */
    left: 14px;                                       /* Смещение влево */
    width: 18px;                                      /* Ширина трубы */
    height: 14px;                                     /* Высота трубы */
    background: #d84315;                              /* Цвет трубы */
    border-radius: 4px 4px 0 0;                       /* Скругление края трубы */
}

/* Окошко машиниста */
.l32-t5-cab-win {
    font-size: 1.4rem;                                /* Размер смайлика-машиниста */
    background: #ffffff;                              /* Белый фон окна кабины */
    border: 2px solid #ffd600;                        /* Желтая рамка окна */
    border-radius: 6px;                               /* Скругление */
    padding: 0 6px;                                   /* Отступы */
}

/* Котел локомотива */
.l32-t5-boiler {
    font-size: 1.6rem;                                /* Иконка поезда */
}

/* Общие стили колес локомотива и вагонов */
.l32-t5-wheels {
    display: flex;                                    /* Флексбокс для колес */
    justify-content: space-around;                    /* Распределение колес по бокам */
    width: 90%;                                       /* Ширина колесной базы */
    font-size: 1.1rem;                                /* Размер значков колес */
    margin-bottom: -4px;                              /* Небольшое смещение к рельсам */
}

/* Вагон (целевая зона сброса drag-and-drop) */
.l32-t5-wagon {
    flex: 1;                                          /* Вагоны делят свободное место */
    min-width: 125px;                                 /* Минимальная ширина вагона */
    background: #fff9c4;                              /* Светло-жёлтый праздничный фон вагона */
    border: 3px dashed #fbc02d;                       /* Жёлтая пунктирная рамка дроп-зоны */
    border-radius: 12px;                              /* Скругленные углы */
    padding: 6px 4px 4px 4px;                         /* Внутренние отступы */
    box-sizing: border-box;                           /* Рамка учитывается в размерах */
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Вертикальное размещение элементов */
    align-items: center;                              /* Центрирование содержимого */
    cursor: pointer;                                  /* Курсор-указатель */
    transition: all 0.2s ease;                        /* Плавная анимация */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);        /* Легкая тень вагончика */
}

/* Подсветка вагона при наведении перетаскиваемого пассажира */
.l32-t5-wagon.drag-over {
    background: #d4edda !important;                   /* Зеленоватый фон готовности принять пассажира */
    border-color: #27ae60 !important;                 /* Зеленая сплошная рамка */
    transform: scale(1.04);                           /* Легкое увеличение вагона */
}

/* Крыша вагончика */
.l32-t5-wagon-roof {
    width: 100%;                                      /* Крыша на всю ширину */
    height: 6px;                                      /* Высота крыши */
    background: #ffb300;                              /* Янтарный цвет крыши */
    border-radius: 6px 6px 0 0;                       /* Скругление сверху */
    margin-bottom: 4px;                               /* Отступ до надписи */
}

/* Корпус вагончика */
.l32-t5-wagon-body {
    width: 100%;                                      /* Корпус на всю ширину */
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Элементы вертикально */
    align-items: center;                              /* Центрирование */
    gap: 4px;                                         /* Зазор между элементами */
}

/* Название вагона */
.l32-t5-wagon-title {
    font-family: 'Comic Sans MS', sans-serif;         /* Шрифт */
    font-size: 0.95rem;                               /* Четкий размер */
    font-weight: bold;                                /* Жирный текст */
    color: #d84315;                                   /* Темно-оранжевый цвет */
}

/* Контейнер окошек вагона */
.l32-t5-windows {
    display: flex;                                    /* Ряд окошек */
    justify-content: center;                          /* Центрирование окон */
    align-items: center;                              /* По вертикали */
    gap: 3px;                                         /* Отступ между окнами */
    background: #ffffff;                              /* Белая подложка под окна */
    padding: 3px 6px;                                 /* Отступы */
    border-radius: 8px;                               /* Скругление */
    border: 1.5px solid #ffd600;                      /* Рамка вокруг ряда окон */
    min-height: 28px;                                 /* Фиксированная высота ряда */
}

/* Одно окошко вагона */
.l32-t5-window {
    font-size: 1.1rem;                                /* Размер значка окна */
    line-height: 1;                                   /* Плотная посадка */
}

/* Подсказка количества слогов под вагоном */
.l32-t5-wagon-hint {
    font-family: 'Comic Sans MS', sans-serif;         /* Шрифт */
    font-size: 0.78rem;                               /* Мелкий поясняющий размер */
    font-weight: bold;                                /* Жирный текст */
    color: #0288d1;                                   /* Синий цвет */
    text-align: center;                               /* По центру */
}

/* Рельсы под поездом */
.l32-t5-rails {
    width: 100%;                                      /* На всю ширину */
    height: 8px;                                      /* Высота рельсов */
    background: repeating-linear-gradient(90deg, #78909c 0px, #78909c 8px, #b0bec5 8px, #b0bec5 18px); /* Имитация шпал */
    border-radius: 4px;                               /* Скругление */
    margin-bottom: 16px;                              /* Отступ до платформы с пассажирами */
}

/* Подзаголовок сетки с пассажирами */
.l32-t5-grid-title {
    font-family: 'Comic Sans MS', sans-serif;         /* Шрифт */
    font-size: 1.05rem;                               /* Размер шрифта */
    font-weight: bold;                                /* Жирный текст */
    color: #2c3e50;                                   /* Темно-синий цвет */
    margin-bottom: 10px;                              /* Отступ до сетки 3х3 */
}

/* СЕТКА 3х3 С КАРТИНКАМИ ПАССАЖИРОВ */
.l32-t5-passengers-grid {
    display: grid;                                    /* Grid раскладка */
    grid-template-columns: repeat(3, 1fr);            /* Ровно 3 колонки */
    gap: 12px;                                        /* Зазоры между ячейками */
    margin-bottom: 15px;                              /* Отступ до кнопки проверки */
}

/* Ячейка платформы (слот под карточку или номер вагона) */
.l32-t5-slot {
    background: #ffffff;                              /* Белый фон ячейки */
    border: 2px solid #b3e5fc;                        /* Голубая рамка */
    border-radius: 12px;                              /* Скругление */
    min-height: 130px;                                /* Фиксированная минимальная высота ячейки */
    display: flex;                                    /* Флексбокс */
    align-items: center;                              /* Центрирование по вертикали */
    justify-content: center;                          /* Центрирование по горизонтали */
    padding: 8px;                                     /* Внутренние поля */
    box-sizing: border-box;                           /* Рамка в габаритах */
    position: relative;                               /* Для абсолютных меток */
    transition: all 0.2s ease;                        /* Плавный переход */
}

/* Карточка пассажира (перетаскиваемый элемент) */
.l32-t5-passenger {
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Картинка сверху, подпись снизу */
    align-items: center;                              /* Центрирование */
    gap: 6px;                                         /* Отступ между картинкой и текстом */
    cursor: grab;                                     /* Курсор захвата рукой */
    user-select: none;                                /* Запрет выделения текста */
    width: 100%;                                      /* На всю ширину ячейки */
}

/* Активное состояние перетаскивания */
.l32-t5-passenger:active {
    cursor: grabbing;                                 /* Курсор сжатой руки */
    opacity: 0.6;                                     /* Полупрозрачность при переносе */
}

/* Картинка пассажира */
.l32-t5-p-img {
    width: 90px;                                      /* Фиксированная ширина */
    height: 80px;                                     /* Фиксированная высота */
    object-fit: contain;                              /* Сохранение пропорций */
    display: block;                                   /* Убираем строчные отступы */
}

/* Подпись имени пассажира со слогами */
.l32-t5-p-name {
    font-family: 'Comic Sans MS', sans-serif;         /* Шрифт */
    font-size: 1.05rem;                               /* Читаемый кегль */
    font-weight: bold;                                /* Жирный текст */
    color: #2c3e50;                                   /* Темно-синий тон */
    text-align: center;                               /* По центру */
}

/* Карточка вагона, появляющаяся в слоте ВМЕСТО пассажира после посадки */
.l32-t5-seated-badge {
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Вертикально */
    align-items: center;                              /* Центрирование */
    justify-content: center;                          /* По центру */
    gap: 6px;                                         /* Отступ */
    cursor: pointer;                                  /* Курсор возврата */
    animation: popIn 0.25s ease;                      /* Анимация появления */
}

/* Анимация плавного появления посадочного талона */
@keyframes popIn {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Изображение вагона внутри слота (vagon_1.png и т.д.) */
.l32-t5-wagon-img {
    width: 80px;                                      /* Фиксированная ширина иконки вагона */
    height: 70px;                                     /* Фиксированная высота */
    object-fit: contain;                              /* Сохранение пропорций */
}

/* Текстовая подпись номера вагона в слоте */
.l32-t5-wagon-num-text {
    font-family: 'Comic Sans MS', sans-serif;         /* Шрифт */
    font-size: 0.95rem;                               /* Размер надписи */
    font-weight: bold;                                /* Жирный текст */
    color: #d84315;                                   /* Оранжевый цвет */
    background: #fff9c4;                              /* Желтый фон бейджа */
    padding: 2px 8px;                                 /* Отступы */
    border-radius: 8px;                               /* Скругление */
    border: 1px solid #fbc02d;                        /* Рамка */
}

/* Статус правильного распределения при проверке */
.l32-t5-slot.correct {
    border-color: #27ae60 !important;                 /* Зеленая рамка */
    background-color: #d4edda !important;             /* Зеленый фон */
}

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

/* Адаптивность для мобильных телефонов */
@media (max-width: 600px) {
    .l32-t5-passengers-grid {
        grid-template-columns: repeat(2, 1fr);        /* 2 колонки на экранах до 600px */
    }
}

/* =========================================================
   ЗАДАНИЕ 6: СТИЛИ ДЛЯ ИГРЫ «ПУТАНИЦА» (БУКВЫ В СЛОВА)
   ========================================================= */

/* Контейнер сетки: 2 колонки, как в образце */
.l32-t6-grid {
    display: grid;                                    /* Включаем Grid раскладку */
    grid-template-columns: repeat(2, 1fr);            /* Ровно 2 колонки */
    gap: 18px 24px;                                   /* Вертикальные и горизонтальные зазоры */
    margin-top: 15px;                                 /* Отступ сверху от инструкции */
    margin-bottom: 20px;                              /* Отступ снизу до кнопки проверки */
    width: 100%;                                      /* На всю ширину карточки */
    box-sizing: border-box;                           /* Рамка входит в габариты */
}

/* Отдельная карточка со словом (запутанные буквы + ряд клеточек) */
.l32-t6-card {
    background: #ffffff;                              /* Белый фон карточки */
    border: 2px solid #b3e5fc;                        /* Светло-голубая окантовка */
    border-radius: 14px;                              /* Мягкие скругленные углы */
    padding: 14px 10px;                               /* Внутренние поля */
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Элементы вертикально друг под другом */
    align-items: center;                              /* Центрирование по горизонтали */
    justify-content: center;                          /* Центрирование по вертикали */
    gap: 10px;                                        /* Зазор между буквами и клеточками */
    box-sizing: border-box;                           /* Рамка учитывается */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);        /* Легкая тень карточки */
    transition: transform 0.2s ease;                  /* Плавная реакция на курсор */
}

/* Приподнимание карточки при наведении */
.l32-t6-card:hover {
    transform: translateY(-2px);                      /* Микро-подъем карточки */
    border-color: #2980b9;                            /* Акцентная синяя рамка */
}

/* Запутанные буквы сверху (крупные, темно-синие, с широким интервалом) */
.l32-t6-scramble {
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт */
    font-size: 1.55rem;                               /* Крупный размер букв-подсказок */
    font-weight: bold;                                /* Жирный выразительный шрифт */
    color: #1a365d;                                   /* Глубокий темно-синий цвет, как в макете */
    letter-spacing: 10px;                             /* Широкий зазор между буквами путаницы */
    text-align: center;                               /* Выравнивание по центру */
    padding-left: 10px;                               /* Компенсация правого letter-spacing */
    user-select: none;                                /* Запрет случайного выделения текста */
}

/* Ряд клеточек для букв ответа */
.l32-t6-boxes {
    display: flex;                                    /* Горизонтальный ряд клеточек */
    align-items: center;                              /* Выравнивание по центру */
    justify-content: center;                          /* Центрирование клеточек */
    border: 2px solid #2c3e50;                        /* Общая темная рамка вокруг всех клеточек */
    border-radius: 6px;                               /* Небольшое скругление общей рамки */
    overflow: hidden;                                 /* Прячем углы внутренних полей */
    background: #ffffff;                              /* Белый фон подложки */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);        /* Тень для объема клеточек */
}

/* Отдельная клеточка ввода для одной буквы */
.l32-t6-input {
    width: 36px;                                      /* Фиксированная ширина клеточки */
    height: 38px;                                     /* Фиксированная высота клеточки */
    border: none;                                     /* Убираем рамку инпута */
    border-right: 2px solid #2c3e50;                  /* Вертикальная перегородка между клеточками */
    outline: none;                                    /* Убираем стандартный браузерный контур */
    font-family: 'Comic Sans MS', sans-serif;         /* Единый детский шрифт */
    font-size: 1.25rem;                               /* Крупный кегль для буквы */
    font-weight: bold;                                /* Жирное начертание буквы */
    color: #2c3e50;                                   /* Темный цвет введенной буквы */
    text-align: center;                               /* Буква строго по центру клеточки */
    text-transform: uppercase;                        /* Все буквы автоматически заглавные */
    padding: 0;                                       /* Без внутренних отступов */
    margin: 0;                                        /* Без внешних отступов */
    box-sizing: border-box;                           /* Точный расчет габаритов */
    background: #ffffff;                              /* Белый фон клеточки */
    transition: background-color 0.2s ease;           /* Плавная смена подсветки */
}

/* У последней клеточки в ряду убираем правую перегородку */
.l32-t6-input:last-child {
    border-right: none;                               /* Без правой границы у крайней клеточки */
}

/* Фокус на активной клеточке */
.l32-t6-input:focus {
    background-color: #e3f2fd;                        /* Нежно-голубая подсветка активной клетки */
}

/* Правильно введенная буква (зеленая индикация успеха) */
.l32-t6-input.correct {
    background-color: #d4edda !important;             /* Светло-зеленый фон */
    color: #155724 !important;                        /* Темно-зеленая буква */
}

/* Ошибка или пустая клетка (красная индикация) */
.l32-t6-input.wrong {
    background-color: #f8d7da !important;             /* Светло-красный фон ошибки */
    color: #721c24 !important;                        /* Темно-красная буква */
}

/* Адаптивность для мобильных экранов (переход в одну колонку) */
@media (max-width: 650px) {
    .l32-t6-grid {
        grid-template-columns: 1fr;                   /* Карточки выстраиваются в один столбик */
        gap: 14px;                                    /* Компактный зазор */
    }

    .l32-t6-input {
        width: 32px;                                  /* Чуть более компактные клеточки на смартфонах */
        height: 34px;                                 /* Высота клетки */
        font-size: 1.15rem;                           /* Размер шрифта буквы */
    }

    .l32-t6-scramble {
        font-size: 1.35rem;                           /* Соразмерный шрифт подсказки */
        letter-spacing: 7px;                          /* Чуть меньший зазор между буквами */
    }
}

/* =========================================================
   ЗАДАНИЕ 7: СТИЛИ ДЛЯ ЛАБИРИНТА КОЩЕЯ («СОБЕРИ СЛОВО»)
   ========================================================= */

/* Верхний контейнер с правилами и клеточками для двух слов */
.l32-t7-top-container {
    display: grid;                                    /* Включаем Grid сетку */
    grid-template-columns: repeat(2, 1fr);            /* Две равные колонки под каждое слово */
    gap: 16px;                                        /* Зазор между блоками слов */
    margin-top: 15px;                                 /* Отступ сверху от инструкции */
    margin-bottom: 20px;                              /* Отступ снизу до лабиринта */
    width: 100%;                                      /* На всю ширину карточки */
    box-sizing: border-box;                           /* Рамка входит в габариты */
}

/* Карточка одного слова с правилами и клеточками */
.l32-t7-word-block {
    background: #ffffff;                              /* Белый фон карточки */
    border: 2px solid #b3e5fc;                        /* Светло-голубая окантовка */
    border-radius: 14px;                              /* Мягкие скругленные углы */
    padding: 12px 14px;                               /* Внутренние поля */
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Элементы вертикально */
    justify-content: space-between;                   /* Распределение сверху вниз */
    gap: 12px;                                        /* Отступ между списком и клеточками */
    box-sizing: border-box;                           /* Учитываем границы */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);        /* Легкая тень */
}

/* Заголовок блока шагов */
.l32-t7-rule-title {
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт */
    font-size: 1.15rem;                               /* Крупный размер */
    font-weight: bold;                                /* Жирный шрифт */
    margin-bottom: 6px;                               /* Отступ до списка */
}

/* Красная звёздочка */
.red-star {
    color: #e53935;                                   /* Ярко-красный цвет */
}

/* Зелёная звёздочка */
.green-star {
    color: #43a047;                                   /* Насыщенный зелёный цвет */
}

/* Список шагов по лабиринту */
.l32-t7-steps-list {
    margin: 0;                                        /* Убираем внешние отступы */
    padding-left: 18px;                               /* Отступ под маркеры списка */
    font-size: 0.96rem;                               /* Компактный размер шрифта шагов */
    color: #2c3e50;                                   /* Тёмно-синий читаемый текст */
    line-height: 1.45;                                /* Межстрочный интервал */
}

/* Ряд клеточек для разгаданного слова */
.l32-t7-answer-boxes {
    display: flex;                                    /* Горизонтальный ряд клеток */
    align-items: center;                              /* Выравнивание по центру */
    justify-content: center;                          /* Центрирование ряда */
    border: 2px solid #2c3e50;                        /* Общая темная рамка вокруг всех клеточек */
    border-radius: 6px;                               /* Скругление углов общей рамки */
    overflow: hidden;                                 /* Прячем края внутренних полей */
    background: #ffffff;                              /* Белый фон */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);        /* Тень клеточек */
}

/* Клеточка для ввода буквы ответа */
.l32-t7-letter-input {
    width: 38px;                                      /* Фиксированная ширина клеточки */
    height: 40px;                                     /* Фиксированная высота клеточки */
    border: none;                                     /* Без браузерной рамки */
    border-right: 2px solid #2c3e50;                  /* Перегородка между клеточками */
    outline: none;                                    /* Убираем контур фокуса */
    font-family: 'Comic Sans MS', sans-serif;         /* Единый шрифт */
    font-size: 1.3rem;                                /* Крупный размер буквы */
    font-weight: bold;                                /* Жирное начертание буквы */
    color: #2c3e50;                                   /* Тёмный цвет буквы */
    text-align: center;                               /* По центру клетки */
    text-transform: uppercase;                        /* Заглавные буквы */
    padding: 0;                                       /* Без отступов */
    margin: 0;                                        /* Без внешних отступов */
    box-sizing: border-box;                           /* Точный размер */
    background: #ffffff;                              /* Белый фон клетки */
    transition: background-color 0.2s ease;           /* Плавный переход */
}

/* У крайней правой клеточки убираем правую перегородку */
.l32-t7-letter-input:last-child {
    border-right: none;                               /* Без правой границы у последней клетки */
}

/* Фокус на активной клетке */
.l32-t7-letter-input:focus {
    background-color: #e3f2fd;                        /* Нежно-голубая подсветка клетки при вводе */
}

/* Правильно введённая буква (зелёная подсветка) */
.l32-t7-letter-input.correct {
    background-color: #d4edda !important;             /* Светло-зелёный фон успеха */
    color: #155724 !important;                        /* Тёмно-зелёная буква */
}

/* Неправильная буква или пропуск (красная подсветка) */
.l32-t7-letter-input.wrong {
    background-color: #f8d7da !important;             /* Светло-красный фон ошибки */
    color: #721c24 !important;                        /* Тёмно-красная буква */
}

/* Обёртка таблицы-лабиринта */
.l32-t7-maze-wrapper {
    width: 100%;                                      /* На всю ширину */
    display: flex;                                    /* Флексбокс */
    justify-content: center;                          /* Центрирование таблицы */
    margin-bottom: 20px;                              /* Отступ до строк с предложениями */
    overflow-x: auto;                                 /* Горизонтальная прокрутка при необходимости */
}

/* Сама таблица-лабиринт 6х5 */
.l32-t7-maze-table {
    border-collapse: collapse;                        /* Слипание границ таблицы */
    border: 3px solid #2c3e50;                        /* Толстая темная граница лабиринта */
    background: #ffffff;                              /* Белый фон лабиринта */
    table-layout: fixed;                              /* Фиксированная сетка */
}

/* Обычная ячейка с буквой лабиринта */
.l32-t7-cell {
    width: 58px;                                      /* Фиксированная ширина ячейки */
    height: 58px;                                     /* Фиксированная высота ячейки */
    border: 2px solid #2c3e50;                        /* Четкая темная перегородка лабиринта */
    text-align: center;                               /* Выравнивание по центру горизонтали */
    vertical-align: middle;                           /* Выравнивание по центру вертикали */
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт */
    font-size: 1.85rem;                               /* Очень крупная яркая буква */
    font-weight: bold;                                /* Жирное начертание буквы */
    user-select: none;                                /* Запрет случайного выделения букв */
    position: relative;                               /* Относительное позиционирование для звёздочек */
    box-sizing: border-box;                           /* Учитываем границы */
}

/* Цвета букв в лабиринте в точности как на картинке */
.c-blue   { color: #1e3a8a; }                         /* Темно-синий */
.c-orange { color: #f59e0b; }                         /* Оранжевый */
.c-cyan   { color: #0284c7; }                         /* Голубой */
.c-red    { color: #dc2626; }                         /* Красный */
.c-green  { color: #16a34a; }                         /* Зеленый */
.c-brown  { color: #7f1d1d; }                         /* Бордовый/коричневый */
.c-purple { color: #7c3aed; }                         /* Фиолетовый */
.c-pink   { color: #db2777; }                         /* Розовый */

/* Звёздочка внутри ячейки (красная или зелёная) */
.l32-t7-star {
    position: absolute;                               /* Абсолютное позиционирование значка */
    top: 4px;                                         /* Прижим к верху */
    left: 4px;                                        /* Прижим к левому краю */
    font-size: 1.05rem;                               /* Размер звёздочки */
    line-height: 1;                                   /* Плотная посадка */
}

/* Центральная ячейка с рисунком Кощея */
.l32-t7-koschey-cell {
    border: 2px solid #2c3e50;                        /* Темная рамка вокруг блока Кощея */
    background: #ffffff;                              /* Белый фон под рисунком */
    padding: 4px;                                     /* Минимальные поля */
    text-align: center;                               /* Центрирование */
    vertical-align: middle;                           /* Центрирование по вертикали */
    box-sizing: border-box;                           /* Рамка учитывается */
}

/* Изображение Кощея внутри лабиринта */
.l32-t7-koschey-img {
    max-width: 100%;                                  /* Вписываем по ширине */
    max-height: 165px;                                /* Ограничиваем высоту по высоте 3 ячеек */
    object-fit: contain;                              /* Сохраняем пропорции рисунка */
    display: inline-block;                            /* Блочно-строчный элемент */
}

/* БЛОК СОСТАВЛЕНИЯ ПРЕДЛОЖЕНИЙ ВНИЗУ */
.l32-t7-sentences-box {
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Строки вертикально */
    gap: 12px;                                        /* Отступ между строками */
    margin-bottom: 20px;                              /* Отступ до кнопки проверки */
    background: #ffffff;                              /* Белый фон */
    border: 2px solid #b3e5fc;                        /* Светло-голубая окантовка */
    border-radius: 14px;                              /* Скругление */
    padding: 14px 16px;                               /* Внутренние отступы */
    box-sizing: border-box;                           /* Учитываем границы */
}

/* Строка составления предложения */
.l32-t7-sentence-row {
    display: flex;                                    /* Флексбокс */
    flex-direction: column;                           /* Подпись сверху, поле снизу */
    gap: 6px;                                         /* Отступ */
}

/* Текст подписи над полем */
.l32-t7-sentence-label {
    font-family: 'Comic Sans MS', sans-serif;         /* Шрифт */
    font-size: 1.05rem;                               /* Читаемый размер */
    font-weight: bold;                                /* Жирный текст */
    color: #ff6d00;                                   /* Оранжевый акцент */
}

/* Поле ввода составленного предложения */
.l32-t7-sentence-input {
    width: 100%;                                      /* На всю ширину */
    border: 2px solid #3498db;                        /* Синяя рамка инпута */
    border-radius: 8px;                               /* Скругление */
    padding: 8px 12px;                                /* Удобные отступы */
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт */
    font-size: 1.05rem;                               /* Размер текста */
    font-weight: bold;                                /* Жирный текст */
    color: #2980b9;                                   /* Синий цвет букв */
    outline: none;                                    /* Без браузерной рамки */
    box-sizing: border-box;                           /* Учитываем рамку */
    transition: all 0.2s ease;                        /* Плавный переход */
}

/* Фокус на поле ввода предложения */
.l32-t7-sentence-input:focus {
    border-color: #2980b9;                            /* Тёмно-синяя рамка */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.35);     /* Свечение при вводе */
    background-color: #f0f9ff;                        /* Нежно-голубой фон */
}

/* Подсветка заполненного предложения */
.l32-t7-sentence-input.filled {
    border-color: #27ae60 !important;                 /* Зеленая рамка */
    background-color: #d4edda !important;             /* Светло-зеленый фон */
    color: #155724 !important;                        /* Темно-зеленый текст */
}

/* Подсветка пустого поля предложения */
.l32-t7-sentence-input.empty {
    border-color: #e74c3c !important;                 /* Красная рамка */
    background-color: #f8d7da !important;             /* Светло-красный фон */
}

/* Адаптивность для средних экранов и мобильных телефонов */
@media (max-width: 720px) {
    .l32-t7-top-container {
        grid-template-columns: 1fr;                   /* Блоки слов выстраиваются вертикально */
    }

    .l32-t7-cell {
        width: 48px;                                  /* Чуть меньшая ширина клетки на планшетах */
        height: 48px;                                 /* Высота клетки */
        font-size: 1.5rem;                            /* Кегль буквы */
    }

    .l32-t7-koschey-img {
        max-height: 135px;                            /* Высота Кощея */
    }
}

@media (max-width: 460px) {
    .l32-t7-cell {
        width: 42px;                                  /* Компактный размер клетки на узких экранах */
        height: 42px;                                 /* Высота клетки */
        font-size: 1.3rem;                            /* Кегль буквы */
    }

    .l32-t7-letter-input {
        width: 32px;                                  /* Компактная ширина буквы ответа */
        height: 36px;                                 /* Высота */
        font-size: 1.15rem;                           /* Шрифт буквы */
    }
}

/* =========================================================
   ЗАДАНИЕ 8: СТИЛИ ДЛЯ РЕБУСОВ «СОБЕРИ СЛОВО»
   ========================================================= */

/* Вертикальный контейнер для всех 4 ребусов */
.l32-t8-container {
    display: flex;                                    /* Включаем Flexbox контейнер */
    flex-direction: column;                           /* Ряды слов располагаются сверху вниз */
    gap: 16px;                                        /* Отступ между отдельными словами-ребусами */
    margin-top: 15px;                                 /* Отступ сверху от текста инструкции */
    margin-bottom: 20px;                              /* Отступ снизу до кнопки проверки */
    width: 100%;                                      /* Занимает всю ширину белой карточки */
    box-sizing: border-box;                           /* Рамка учитывается в размерах */
}

/* Карточка одного слова-ребуса */
.l32-t8-word-row {
    background: #ffffff;                              /* Чистый белый фон карточки */
    border: 2px solid #b3e5fc;                        /* Светло-голубая окантовка карточки */
    border-radius: 14px;                              /* Закругление углов карточки */
    padding: 12px 10px;                               /* Внутренние отступы */
    display: flex;                                    /* Flexbox */
    justify-content: center;                          /* Центрирование ряда букв */
    align-items: center;                              /* Вертикальное выравнивание */
    box-sizing: border-box;                           /* Учитываем границы */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);        /* Легкая тень карточки */
    overflow-x: auto;                                 /* Горизонтальный скролл при нехватке места */
}

/* Группа колонок (картинка + клеточка под ней) */
.l32-t8-letters-group {
    display: inline-flex;                             /* Горизонтальный ряд колонок */
    align-items: flex-end;                            /* Выравнивание по нижнему краю */
    justify-content: center;                          /* Центрирование колонок */
    gap: 8px;                                         /* Одинаковый зазор между соседними буквами */
}

/* Колонка одной буквы: картинка сверху, клеточка ввода снизу */
.l32-t8-item {
    display: flex;                                    /* Flexbox */
    flex-direction: column;                           /* Картинка над клеточкой */
    align-items: center;                              /* Центрирование по вертикальной оси */
    gap: 6px;                                         /* Расстояние между картинкой и полем ввода */
    box-sizing: border-box;                           /* Точный расчет размеров */
}

/* Ограничивающий контейнер картинки-подсказки */
.l32-t8-img-wrap {
    width: 58px;                                      /* Фиксированная ширина контейнера картинки */
    height: 54px;                                     /* Фиксированная высота контейнера картинки */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Центрирование по вертикали */
    justify-content: center;                          /* Центрирование по горизонтали */
    background: #fbfdff;                              /* Минимальная светлая подложка под рисунок */
    border-radius: 8px;                               /* Закругление краев подложки */
    overflow: hidden;                                 /* Прячем края изображения */
}

/* Сама картинка-подсказка */
.l32-t8-img {
    max-width: 100%;                                  /* Запрет выхода за пределы контейнера по ширине */
    max-height: 100%;                                 /* Запрет выхода по высоте */
    object-fit: contain;                              /* Сохранение исходных пропорций рисунка */
    display: block;                                   /* Убираем строчные отступы снизу */
}

/* Клеточка для ввода буквы ответа */
.l32-t8-input {
    width: 44px;                                      /* Ширина клеточки буквы */
    height: 44px;                                     /* Высота клеточки буквы */
    border: 2px solid #2c3e50;                        /* Чёткая тёмная рамка, как на образце */
    border-radius: 6px;                               /* Легкое скругление углов клеточки */
    background: #ffffff;                              /* Белый фон клеточки */
    outline: none;                                    /* Убираем браузерный контур фокуса */
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт урока */
    font-size: 1.55rem;                               /* Крупный размер буквы */
    font-weight: bold;                                /* Жирное начертание буквы */
    color: #1a365d;                                   /* Насыщенный синий цвет буквы */
    text-align: center;                               /* Буква строго по центру */
    text-transform: uppercase;                        /* Все буквы автоматически заглавные */
    padding: 0;                                       /* Без внутренних отступов */
    margin: 0;                                        /* Без внешних отступов */
    box-sizing: border-box;                           /* Рамка учитывается в размерах */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);        /* Легкая тень клеточки */
    transition: all 0.2s ease;                        /* Плавное изменение цвета */
}

/* Подсветка активной клетки при наборе */
.l32-t8-input:focus {
    background-color: #e3f2fd;                        /* Нежно-голубой фон активного ввода */
    border-color: #2980b9;                            /* Акцентная синяя рамка */
}

/* Правильно отгаданная буква (зелёная подсветка) */
.l32-t8-input.correct {
    border-color: #27ae60 !important;                 /* Зелёная рамка правильного ответа */
    background-color: #d4edda !important;             /* Светло-зелёный фон успеха */
    color: #155724 !important;                        /* Тёмно-зелёный цвет буквы */
}

/* Ошибка или пустая клетка при проверке (красная подсветка) */
.l32-t8-input.wrong {
    border-color: #e74c3c !important;                 /* Красная рамка ошибки */
    background-color: #f8d7da !important;             /* Светло-красный фон предупреждения */
    color: #721c24 !important;                        /* Тёмно-красный цвет буквы */
}

/* Адаптивность для планшетов и смартфонов */
@media (max-width: 600px) {
    .l32-t8-letters-group {
        gap: 5px;                                     /* Меньший зазор между буквами */
    }

    .l32-t8-img-wrap {
        width: 44px;                                  /* Компактный размер превью на смартфонах */
        height: 42px;                                 /* Высота превью */
    }

    .l32-t8-input {
        width: 38px;                                  /* Компактный размер клеточки */
        height: 38px;                                 /* Высота клетки */
        font-size: 1.35rem;                           /* Соразмерный шрифт буквы */
    }
}

@media (max-width: 420px) {
    .l32-t8-img-wrap {
        width: 38px;                                  /* Минимальный размер превью */
        height: 36px;                                 /* Высота */
    }

    .l32-t8-input {
        width: 32px;                                  /* Минимальная ширина клетки */
        height: 34px;                                 /* Высота */
        font-size: 1.2rem;                            /* Шрифт буквы */
    }
}

/* =========================================================
   ЗАДАНИЕ 9: СТИЛИ ДЛЯ УПРАЖНЕНИЯ «ВОЛШЕБНАЯ ДОРОЖКА»
   ========================================================= */

/* Контейнер для центрирования единой картинки задания */
.l32-t9-img-box {
    width: 100%;                                      /* Занимает всю ширину белой карточки */
    display: flex;                                    /* Flexbox контейнер */
    justify-content: center;                          /* Центрирование иллюстрации по горизонтали */
    margin-bottom: 10px;                              /* Отступ снизу до полей ввода предложений */
}

/* Сама единая картинка задания с ящерицей и дорожкой */
.l32-t9-main-img {
    width: 100%;                                      /* Адаптивная ширина на 100% */
    max-width: 650px;                                 /* Оптимальный максимальный размер иллюстрации */
    height: auto;                                     /* Пропорциональная высота без искажений */
    border-radius: 16px;                              /* Красивое скругление углов рисунка */
    border: 2px solid #b3e5fc;                        /* Светло-голубая аккуратная рамка */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);       /* Мягкая детская тень картинки */
    box-sizing: border-box;                           /* Рамка учитывается в размерах */
}

/* Контейнер для 5 строк с предложениями */
.l32-t9-sentences-container {
    display: flex;                                    /* Включаем Flexbox */
    flex-direction: column;                           /* Ряды выстраиваются строго вертикально */
    gap: 12px;                                        /* Одинаковый отступ между полями ввода */
    margin-bottom: 20px;                              /* Отступ снизу до блока с результатом и кнопкой */
    width: 100%;                                      /* Занимает 100% ширины белой карточки */
    box-sizing: border-box;                           /* Учитываем границы */
}

/* Отдельная строка: цифра слева, поле ввода справа */
.l32-t9-sentence-row {
    background: #ffffff;                              /* Чистый белый фон строки */
    border: 2px solid #b3e5fc;                        /* Светло-голубая рамка строки */
    border-radius: 12px;                              /* Скругленные углы строки */
    padding: 8px 12px;                                /* Внутренние поля */
    display: flex;                                    /* Флексбокс */
    align-items: center;                              /* Выравнивание по центру вертикали */
    gap: 10px;                                        /* Зазор между номером и полем ввода */
    box-sizing: border-box;                           /* Рамка входит в ширину */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);        /* Минимальная тень */
    transition: border-color 0.2s ease;               /* Плавная реакция на взаимодействие */
}

/* Подсветка строки при наведении */
.l32-t9-sentence-row:hover {
    border-color: #2980b9;                            /* Акцентная синяя рамка */
}

/* Номер предложения (1., 2., 3...) */
.l32-t9-sentence-num {
    font-family: 'Comic Sans MS', sans-serif;         /* Детский шрифт урока */
    font-size: 1.25rem;                               /* Крупная цифра */
    font-weight: bold;                                /* Жирный выразительный номер */
    color: #ff6d00;                                   /* Яркий оранжевый акцент номера */
    user-select: none;                                /* Запрет случайного выделения мышью */
    flex-shrink: 0;                                   /* Запрет сжатия цифры */
    width: 24px;                                      /* Фиксированная ширина под номер */
}

/* Поле для ввода составленного предложения */
.l32-t9-sentence-input {
    flex: 1;                                          /* Занимает всю оставшуюся ширину строки */
    min-width: 0;                                     /* Защита от распирания строки вправо */
    border: 2px solid #3498db;                        /* Аккуратная синяя рамка инпута */
    border-radius: 8px;                               /* Скругление краев инпута */
    padding: 8px 12px;                                /* Комфортные поля для набора текста */
    font-family: 'Comic Sans MS', sans-serif;         /* Единый шрифт */
    font-size: 1.05rem;                               /* Читаемый размер текста */
    font-weight: bold;                                /* Полужирное начертание введенных слов */
    color: #2980b9;                                   /* Синий цвет введенного предложения */
    outline: none;                                    /* Убираем стандартную обводку браузера */
    box-sizing: border-box;                           /* Рамка учитывается в размерах */
    transition: all 0.2s ease;                        /* Плавная анимация подсветки */
}

/* Фокус на поле ввода при наборе */
.l32-t9-sentence-input:focus {
    border-color: #2980b9;                            /* Тёмно-синяя рамка фокуса */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.35);     /* Легкое неоновое свечение */
    background-color: #f0f9ff;                        /* Нежно-голубой фон активного поля */
}

/* Заполненное предложение при проверке (зеленая индикация успеха) */
.l32-t9-sentence-input.filled {
    border-color: #27ae60 !important;                 /* Зеленая рамка правильного ответа */
    background-color: #d4edda !important;             /* Светло-зеленый фон успеха */
    color: #155724 !important;                        /* Темно-зеленый цвет текста */
}

/* Пустое или слишком короткое поле (красная индикация) */
.l32-t9-sentence-input.empty {
    border-color: #e74c3c !important;                 /* Красная рамка ошибки */
    background-color: #f8d7da !important;             /* Светло-красный предупреждающий фон */
    color: #721c24 !important;                        /* Темно-красный цвет текста */
}

/* Адаптивность для мобильных телефонов */
@media (max-width: 540px) {
    .l32-t9-sentence-row {
        padding: 6px 8px;                             /* Компактные отступы на смартфонах */
        gap: 6px;                                     /* Меньший зазор */
    }

    .l32-t9-sentence-input {
        font-size: 0.95rem;                           /* Соразмерный шрифт для узких экранов */
        padding: 6px 8px;                             /* Внутренние отступы */
    }
}