/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
body {
    margin: 0;                  /* Убираем внешние отступы */
    padding: 0;                 /* Убираем внутренние отступы по умолчанию */
    background-color: #99dfff;  /* Основной светло-голубой фон страницы */
    font-family: 'Comic Sans MS', sans-serif; /* Детский шрифт, используемый во всех уроках */
}

.content-wrapper { 
    padding: 15px 10px;         /* Отступы вокруг всего контента */
}

.main-header { 
    text-align: center;         /* Центрирование шапки урока */
}

.lesson-badge {
    display: inline-block;      /* Плашка отображается как блочный элемент в строке */
    background: #fff9c4;        /* Светло-жёлтый фон плашки заголовка урока */
    padding: 8px 30px;          /* Внутренние отступы плашки */
    border-radius: 15px;        /* Скругление углов плашки */
    color: #ff6d00;             /* Ярко-оранжевый цвет текста */
    font-weight: bold;          /* Жирное начертание текста */
    font-size: 1.6em;           /* Размер шрифта заголовка урока */
    margin-bottom: 15px;        /* Отступ снизу от плашки */
    box-shadow: 0 4px 0 #ffd600; /* Тень под плашкой для объёма */
}

.white-card {
    background: #f0faff;        /* Светлый голубовато-белый фон карточки задания */
    border: 6px solid #ffd600;  /* Толстая жёлтая рамка вокруг карточки */
    border-radius: 30px;        /* Большое скругление углов карточки */
    padding: 15px 25px;         /* Внутренние отступы внутри карточки */
    max-width: 750px;           /* Максимальная ширина карточки */
    margin: 0 auto 20px;        /* Центрирование и отступ между карточками */
    box-shadow: 0 10px 0 rgba(0,0,0,0.05); /* Лёгкая тень под карточкой */
}

.card-title {
    color: #ff7043;             /* Оранжевый цвет заголовка задания */
    text-align: center;         /* Центрирование заголовка */
    font-size: 1.8em;           /* Размер шрифта заголовка */
    margin: 0 0 10px 0;         /* Отступы вокруг заголовка */
}

.yellow-divider {
    height: 4px;                /* Высота разделительной линии */
    background-color: #ffd600;  /* Жёлтый цвет разделителя */
    margin-bottom: 20px;        /* Отступ снизу от линии */
}

.card-instruction {
    font-size: 1.25rem;         /* Размер текста инструкции */
    color: #2c3e50;             /* Тёмно-синий цвет текста инструкции */
    text-align: left;         /* Центрирование инструкции */
    margin: 15px 0 25px 0;      /* Отступы сверху и снизу */
    line-height: 1.2;           /* Межстрочный интервал для удобства чтения */
}

/* СТИЛИ ДЛЯ ЦЕНТРИРОВАНИЯ И ОФОРМЛЕНИЯ КНОПКИ ПРОВЕРКИ */

.btn-box {
    display: flex;                                              /* Включаем флекс-контейнер для кнопки */
    justify-content: center;                                    /* Центрируем кнопку строго по горизонтали */
    margin-top: 0px;                                           /* Добавляем отступ сверху от задания до кнопки */
}

.orange-check-btn {
    background: linear-gradient(to bottom, #ff9244, #f57c00);   /* Создаем оранжевый градиент как на макете */
    color: #ffffff;                                             /* Устанавливаем белый цвет текста */
    font-family: 'Comic Sans MS', sans-serif;                   /* Поддерживаем единый детский шрифт */
    font-size: 1.5em;                                           /* Устанавливаем крупный, читаемый размер шрифта */
    font-weight: bold;                                          /* Делаем текст жирным */
    padding: 12px 60px;                                         /* Задаем внутренние отступы для вытянутой формы */
    border: none;                                               /* Убираем стандартную браузерную рамку */
    border-radius: 40px;                                        /* Делаем края сильно скругленными (овальными) */
    box-shadow: 0 6px 0 #d84315;                                /* Добавляем темный "объем" под кнопкой */
    cursor: pointer;                                            /* Меняем курсор на палец при наведении */
    transition: all 0.2s ease;                                  /* Плавная анимация при нажатии */
}

.orange-check-btn:hover {
    transform: translateY(-2px);                                /* Легкое приподнятие кнопки при наведении */
    box-shadow: 0 8px 0 #d84315;                                /* Увеличение тени для эффекта парения */
}

.orange-check-btn:active {
    transform: translateY(4px);                                 /* Кнопка "вдавливается" при клике */
    box-shadow: 0 2px 0 #d84315;                                /* Тень уменьшается при нажатии */
}

.result-text {
    text-align: center;                                         /* Центрируем текст результата над кнопкой */
    font-size: 1.3em;                                           /* Размер шрифта сообщения об успехе */
    margin: 15px 0;                                             /* Вертикальные отступы для текста */
    min-height: 1.5em;                                          /* Резервируем место, чтобы контент не прыгал */
}

/* КНОПКИ */
.btn-box { display: flex; justify-content: center; }
.orange-check-btn {
    background: linear-gradient(to bottom, #ff9244, #f57c00);
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    padding: 12px 60px;
    border: none;
    border-radius: 40px;
    box-shadow: 0 6px 0 #d84315;
    cursor: pointer;
}
.result-text { text-align: center; font-size: 1.3em; margin: 15px 0; min-height: 1.5em; }

/* --- СТИЛИ ДЛЯ УПРАЖНЕНИЯ 1: ЧИСТОГОВОРКИ (ПОСТРОЧНЫЙ CSS) --- */

.l22-t1-workspace {
    display: flex;                              /* Строим текстовую зону и пул картинок в один горизонтальный ряд */
    justify-content: space-between;             /* Равномерно разносим колонки по краям контейнера белой карты */
    gap: 20px;                                  /* Фиксированный зазор между фразами и блоком картинок */
    margin: 20px 0;                             /* Внешние вертикальные отступы игрового поля */
    width: 100%;                                /* Контейнер игры занимает всю доступную ширину */
    box-sizing: border-box;                     /* Паддинги учитываются внутри габаритов элементов */
}

.l22-t1-riddles-column {
    display: flex;                              /* Активируем флекс для вертикального списка чистоговорок */
    flex-direction: column;                     /* Располагаем текстовые плашки строго друг под другом */
    gap: 12px;                                  /* Шаг-расстояние между плашками чистоговорок */
    flex: 1.4;                                  /* Текстовая колонка занимает большую часть пространства */
}

.l22-t1-text-card {
    background-color: #ffffff;                  /* Чистый белый базовый фон карточки чистоговорки */
    border: 3px solid #bdc3c7;                  /* Нейтральная серая аккуратная рамка вокруг текста */
    border-radius: 16px;                        /* Мягко и гармонично скругляем внешние углы плашки */
    padding: 10px 15px;                         /* Комфортные внутренние поля для текстовых строк */
    display: flex;                              /* Включаем флекс для горизонтального удержания текста и слота сброса */
    justify-content: space-between;             /* Текст прижимается влево, окошко для картинки — вправо */
    align-items: center;                        /* Центрируем элементы внутри плашки по вертикальной оси */
    min-height: 70px;                           /* Стабильная минимальная высота */
    box-sizing: border-box;                     /* Гарантируем стабильность размеров плашки */
    transition: all 0.3s ease;                  /* Включаем плавную анимацию переключения цветов рамок */
}

.l22-t1-text {
    font-size: 1.2rem;                         /* Оптимальный читаемый размер шрифта чистоговорки */
    font-weight: bold;                          /* Плотное жирное начертание текста для легкого восприятия */
    color: #2c3e50;                             /* Благородный темно-синий цвет букв фраз */
    padding-right: 10px;                        /* Защитный зазор справа, чтобы текст не слипался со слотом картинки */
}

.l22-t1-drop-slot {
    width: 60px;                                /* Компактная фиксированная ширина ячейки приёма отгадки */
    height: 65px;                               /* Компактная фиксированная высота ячейки приёма отгадки */
    border: 2px dashed #90caf9;                 /* Пунктирный голубой контур, намекающий на зону сброса */
    border-radius: 10px;                        /* Легкое аккуратное скругление углов окошка сброса */
    background-color: #f8fdff;                  /* Светлая нежная заливка подложки слота */
    display: flex;                              /* Активируем флекс для точного центрирования упавшей картинки */
    align-items: center;                        /* Центрируем картинку по вертикали */
    justify-content: center;                    /* Центрируем картинку по горизонтали */
    flex-shrink: 0;                             /* Категорически запрещаем сжатие окошка сброса */
}

/* ИСПРАВЛЕНО: ПУЛ КАРТИНОК СТРОГО В ОДИН СТОЛБЕЦ */
.l22-t1-images-pool {
    display: flex;                              /* Переключаем пул картинок в вертикальный флекс-блок */
    flex-direction: column;                     /* Выстраиваем элементы строго в ОДИН СТОЛБЕЦ */
    gap: 12px;                                  /* Шаг-расстояние между карточками по вертикали */
    width: 200px;                               /* Ограничиваем ширину пула под один ровный ряд карточек */
    background: #fff9c4;                        /* Нежно-желтая подложка перрона картинок */
    padding: 12px;                              /* Внутренние поля перрона */
    border-radius: 20px;                        /* Скругляем внешние углы у базы хранения картинок */
    border: 2px dashed #fbc02d;                 /* Красивый пунктирный оранжево-желтый контур перрона */
    box-sizing: border-box;                     /* Паддинги не ломают ширину столбца */
}

.l22-t1-img-card {
    background-color: #ffffff;                  /* Белый фон карточки под рисунком отгадки */
    border: 2px solid #bdc3c7;                  /* Базовая серая аккуратная рамка вокруг картинки */
    border-radius: 12px;                        /* Мягко скругляем внешние углы ячейки */
    width: 100%;                                /* Карточка занимает всю доступную ширину столбца */
    height: 90px;                               /* Фиксированная высота карточки для сохранения симметрии */
    display: flex;                              /* Активируем флекс для центрирования графики */
    align-items: center;                        /* Центрируем рисунок внутри карточки по вертикали */
    justify-content: center;                    /* Центрируем рисунок внутри карточки по горизонтали */
    cursor: grab;                               /* Курсор в виде руки-захвата, обозначающий возможность тащить */
    box-shrink: 0;                              /* Защищаем карточки от деформации */
    box-sizing: border-box;                     /* Стабильность геометрии */
}

.l22-t1-img-card img {
    max-width: 95%;                             /* Иллюстрация занимает максимум 85% доступной ширины */
    max-height: 95%;                            /* Иллюстрация занимает максимум 85% доступной высоты */
    object-fit: contain;                        /* Полностью исключаем любые деформации рисунка */
}

/* СТИЛИЗАЦИЯ КАРТИНКИ ВНУТРИ СЛОТА СБРОСА */
.l22-t1-drop-slot .l22-t1-img-card {
    border: none !important;                    /* Убираем внешние рамки ячейки внутри маленького слота */
    background: transparent !important;         /* Делаем фон полностью прозрачным */
    width: 100% !important;                     /* Растягиваем карточку на всю ширину слота сброса */
    height: 100% !important;                    /* Растягиваем карточку на всю высоту слота сброса */
    box-shadow: none !important;                /* Сбрасываем тени */
    cursor: default;                            /* Возвращаем стандартный курсор стрелки */
}

/* СОСТОЯНИЕ УСПЕШНОГО СОВПАДЕНИЯ (ЗЕЛЁНЫЙ КОНТУР) */
.l22-t1-text-card.matched {
    border-color: #27ae60 !important;           /* Принудительно окрашиваем рамку всей плашки в сочный зеленый цвет */
    background-color: #f2fdf5 !important;       /* Окрашиваем фон решенной чистоговорки в нежно-зеленый оттенок */
    pointer-events: none;                       /* Полностью блокируем повторные Drag-and-Drop события на плашке */
}

.l22-t1-text-card.matched .l22-t1-drop-slot {
    border-color: #27ae60 !important;           /* Пунктир окошка сброса также становится зеленым */
    background-color: #e8f8f0 !important;       /* Внутренний фон окошка приобретает мягкий зеленый оттенок */
}


/* --- СТИЛИ ДЛЯ УПРАЖНЕНИЯ 2: ДОСКАЖИ СЛОВЕЧКО (ПОСТРОЧНЫЙ CSS) --- */

.l22-t2-workspace {
    width: 100%;                                /* Контейнер занимает всю доступную ширину белой карточки */
    box-sizing: border-box;                     /* Паддинги учитываются внутри общих размеров во избежание сдвигов */
    margin: 15px 0 25px 0;                      /* Вертикальные внешние отступы рабочей области */
}

.l22-t2-riddles-list {
    display: flex;                              /* Активируем вертикальный флекс для построения списка стихотворений */
    flex-direction: column;                     /* Располагаем блоки загадок строго друг под другом */
    gap: 16px;                                  /* Шаг-расстояние между соседними загадками */
    width: 100%;                                /* Список занимает полную ширину контейнера */
}

.l22-t2-row {
    display: flex;                              /* Выстраиваем текст стихотворения и поле ввода в одну горизонтальную линию */
    justify-content: space-between;             /* Текст прижимается к левому краю, окошко ввода — к правому */
    align-items: center;                        /* Идеально выравниваем текстовые строки и инпут по вертикальной оси */
    background-color: #ffffff;                  /* Белый фон подложки для каждой отдельной загадки */
    border: 2px solid #e1e8ee;                  /* Аккуратная тонкая серо-голубая базовая рамка вокруг строки */
    border-radius: 16px;                        /* Мягко скругляем внешние углы плашки загадки */
    padding: 12px 20px;                         /* Комфортные внутренние поля для удобства чтения строк */
    gap: 20px;                                  /* Защитный зазор между текстовым блоком и полем ввода */
    box-sizing: border-box;                     /* Гарантируем стабильность геометрических размеров */
}

.l22-t2-text-block {
    font-size: 1.05rem;                         /* Оптимальный читаемый масштаб шрифта стихотворения */
    line-height: 1.4;                           /* Комфортный межстрочный интервал для легкого чтения ребенком */
    color: #2c3e50;                             /* Благородный темно-синий контрастный цвет букв */
    font-weight: 500;                           /* Средняя плотность шрифта для опрятного вида */
    flex: 1;                                    /* Текст занимает все доступное пространство слева */
}

.l22-t2-input {
    width: 130px;                               /* Фиксированная базовая ширина окошка под одно слово-отгадку */
    height: 38px;                               /* Оптимальная высота инпута для аккуратного ряда */
    border: 2px solid #bdc3c7;                  /* Базовая нейтральная серая рамка вокруг поля ввода */
    background-color: #ffffff;                  /* Чистый белый внутренний фон прямоугольной ячейки */
    border-radius: 10px;                        /* Аккуратно скругляем углы у рамки окошка */
    font-family: 'Comic Sans MS', sans-serif;   /* Поддерживаем единый рукописный детский шрифт урока */
    font-size: 1rem;                            /* Оптимальный масштаб букв при заполнении отгадки */
    font-weight: bold;                          /* Набираемый ребенком текст пишется жирным начертанием */
    text-align: center;                         /* Набираемые буквы располагаются строго по центру окошка */
    outline: none;                              /* Отключаем стандартную грубую синюю обводку фокуса от браузера */
    transition: all 0.3s ease;                  /* Включаем плавную анимацию переключения цветов при проверке */
    box-sizing: border-box;                     /* Паддинги учитываются внутри общих размеров инпута */
}

/* Эффект фокуса при наборе слова */
.l22-t2-input:focus {
    border-color: #ff7043;                      /* Рамка ячейки становится теплой оранжевой при активации поля */
    background-color: #fffde7;                  /* Придаем активному окошку легкий желтоватый оттенок */
}

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

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ ТЕЛЕФОНОВ */
@media (max-width: 600px) {
    .l22-t2-row {
        flex-direction: column;                 /* На узких дисплеях выстраиваем окошко ввода под текстом загадки */
        align-items: flex-start;                /* Выравниваем контент по левому краю */
        gap: 10px;                              /* Уменьшаем зазор */
    }
    .l22-t2-input {
        width: 100%;                            /* Окошко отгадки расширяется на всю ширину мобильного экрана */
    }
}

/* --- СТИЛИ ДЛЯ УПРАЖНЕНИЯ 3: КОЛЬЦА НА РУКАХ (ПОСТРОЧНЫЙ CSS) --- */

.l22-t3-workspace {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 15px 0;
    width: 100%;
    box-sizing: border-box;
}

.l22-t3-tool-panel {
    display: flex;
    justify-content: center;
    width: 100%;
}

.l22-t3-ring-selector {
    background-color: #ffffff;
    border: 3px solid #bdc3c7;
    border-radius: 20px;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.l22-t3-ring-selector img {
    height: 40px;
    width: auto;
}

.l22-t3-ring-label {
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
}

.l22-t3-ring-selector.active-tool {
    border-color: #ffaa00 !important;
    background-color: #fffde7 !important;
    transform: scale(1.04);
    box-shadow: 0 0 10px rgba(255,170,0,0.25);
}

.l22-t3-hands-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

.l22-t3-hand-card {
    background-color: #ffffff;
    border: 2px solid #e1e8ee;
    border-radius: 16px;
    padding: 8px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.l22-t3-hand-card:hover {
    border-color: #90caf9;
    background-color: #f8fdff;
}

.l22-t3-hand-card img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}

.l22-t3-hand-card.has-ring {
    border-color: #27ae60 !important;
    background-color: #f2fdf5 !important;
}

.l22-t3-speech-box {
    background-color: #fff9c4;
    border: 2px dashed #fbc02d;
    border-radius: 15px;
    padding: 12px 20px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

.l22-t3-speech-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ff6d00;
    display: block;
    margin-bottom: 4px;
}

.l22-t3-speech-text {
    font-size: 1.1rem;
    font-style: italic;
    color: #2c3e50;
    margin: 0;
}

@media (max-width: 650px) {
    .l22-t3-hands-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 450px) {
    .l22-t3-hands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- СТИЛИ ДЛЯ УПРАЖНЕНИЯ 4: СКЛЕЙ БЛЮДЦА (БЕЗ ОШИБОК) --- */

.l22-t4-workspace {
    display: flex;                              /* Строим вертикальный рабочий стек элементов */
    flex-direction: column;                     /* Располагаем разбитые блюдца строго над контейнером осколков */
    gap: 25px;                                  /* Комфортное расстояние между тарелками и осколками */
    margin: 15px 0;                             /* Вертикальные внешние отступы рабочей зоны */
    width: 100%;                                /* Контейнер занимает полную ширину карточки */
    box-sizing: border-box;                     /* Паддинги не деформируют верстку */
}

/* СЕТКА ТАРЕЛОК */
.l22-t4-plates-grid {
    display: grid;                              /* Переключаем тарелки в режим Grid-матрицы */
    grid-template-columns: repeat(4, 1fr);      /* Выстраиваем по 4 тарелки в горизонтальный ряд (всего 2 ряда для 8 штук) */
    gap: 15px;                                  /* Расстояние между соседними карточками тарелок */
    width: 100%;                                /* Сетка занимает всю доступную ширину */
    box-sizing: border-box;
}

.l22-t4-plate-card {
    background-color: #ffffff;                  /* Белый фон ячейки под тарелкой */
    border: 3px solid #bdc3c7;                  /* Базовая аккуратная серая рамка вокруг тарелки */
    border-radius: 20px;                        /* Мягко скругляем внешние углы ячейки */
    padding: 10px;                              /* Внутренние паддинги от прилипания рисунка */
    height: 140px;                              /* Стабильная фиксированная высота карточки */
    display: flex;                              /* Флекс для идеального центрирования картинок */
    align-items: center;                        /* Центрируем картинку по вертикали */
    justify-content: center;                    /* Центрируем картинку по горизонтали */
    cursor: pointer;                            /* Указательный палец при наведении */
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);     /* Мягкая тень под карточкой */
    transition: all 0.2s ease;                  /* Плавная анимация переключения стилей */
    box-sizing: border-box;
}

.l22-t4-plate-card img {
    max-width: 99%;                             /* Рисунок тарелки занимает до 95% ширины ячейки */
    max-height: 99%;                            /* Рисунок тарелки занимает до 95% высоты ячейки */
    object-fit: contain;                        /* Исключаем искажения пропорций узоров тарелки */
}

/* Состояние тарелки, когда её успешно СКЛЕИЛИ */
.l22-t4-plate-card.is-healed {
    border-color: #27ae60 !important;           /* Рамка становится ярко-зеленой в знак успеха */
    background-color: #f2fdf5 !important;       /* Внутренний фон окрашивается в нежно-зеленый цвет */
    pointer-events: none;                       /* Запрещаем кликать по уже собранной целой тарелке */
}

/* ЖЕЛТЫЙ ПУЛ ХРАНЕНИЯ ОСКОЛКОВ */
.l22-t4-shards-pool {
    display: flex;                              /* Карточки осколков выстраиваются флекс-лентой */
    flex-wrap: wrap;                            /* Разрешаем автоматический перенос осколков на новые строки */
    justify-content: center;                    /* Центрируем осколки по горизонтали */
    gap: 12px;                                  /* Расстояние между соседними осколками */
    background-color: #fff9c4;                  /* Нежно-желтый приятный фон пула хранения */
    padding: 5px;                              /* Внутренние поля */
    border-radius: 22px;                        /* Скругляем углы у контейнера осколков */
    border: 2px dashed #fbc02d;                 /* Красивый пунктирный оранжево-желтый контур */
    width: 100%;                                /* Контейнер занимает всю ширину */
    box-sizing: border-box;
}

.l22-t4-shard-card {
    background-color: #ffffff;                  /* Белый чистый фон карточки осколка */
    border: 2px solid #bdc3c7;                  /* Нейтральная серая рамка вокруг осколка */
    border-radius: 12px;                        /* Скругляем углы ячейки */
    width: 110px;                                /* Фиксированная компактная ширина карточки осколка */
    height: 110px;                               /* Фиксированная компактная высота карточки осколка */
    display: flex;                              /* Флекс для центрирования графики */
    align-items: center;                        /* Центрируем по вертикали */
    justify-content: center;                    /* Центрируем по горизонтали */
    cursor: pointer;                            /* Указательный палец при наведении */
    transition: all 0.2s ease;                  /* Анимация переключений */
    box-sizing: border-box;
}

.l22-t4-shard-card img {
    max-width: 85%;                             /* Рисунок осколка занимает до 85% бокса ячейки */
    max-height: 85%;                            /* Рисунок осколка занимает до 85% бокса ячейки */
    object-fit: contain;                        /* Исключаем растяжения или деформации осколков */
}

/* Состояние осколка, когда на него НАЖАЛИ */
.l22-t4-shard-card.selected-shard {
    border-color: #ffaa00 !important;           /* Рамка становится золотисто-желтой */
    background-color: #fffde7 !important;       /* Внутренний фон окрашивается в нежно-желтый цвет */
    transform: scale(1.05);                     /* Легкое увеличение для визуального отклика */
}

/* Прячем угаданный осколок, который успешно подошел к тарелке */
.l22-t4-shard-card.hidden-shard {
    display: none !important;                   /* Полностью исключаем угаданный элемент из верстки страницы */
}

/* БЛОК РЕЧЕВОЙ ПОДСКАЗКИ СЧЁТА СРЕДНЕГО РОДА */
.l22-t4-speech-helper {
    background-color: #fff9c4;
    border: 2px dashed #fbc02d;
    border-radius: 15px;
    padding: 12px 20px;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

.l22-t4-helper-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ff6d00;
    display: block;
    margin-bottom: 4px;
}

.l22-t4-helper-text {
    font-size: 1.1rem;
    font-style: italic;
    color: #2c3e50;
    margin: 0;
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ ТЕЛЕФОНОВ */
@media (max-width: 650px) {
    .l22-t4-plates-grid {
        grid-template-columns: repeat(2, 1fr);  /* На смартфонах строим тарелки по 2 штуки в ряд */
    }
}

/* --- СТИЛИ ДЛЯ УПРАЖНЕНИЯ 5: ГОРИЗОНТАЛЬНЫЕ РЯДЫ (ПОСТРОЧНЫЕ КОММЕНТАРИИ) --- */

.l22-t5-workspace {
    display: flex;                              /* Активируем гибкий вертикальный контейнер для двух ярусов */
    flex-direction: column;                     /* Выстраиваем ряд профессий строго над рядом предметов */
    gap: 15px;                                  /* Комфортное расстояние между верхним и нижним рядами */
    margin: 10px 0;                             /* Вертикальные внешние отступы всего игрового поля */
    width: 100%;                                /* Контейнер занимает полную доступную ширину */
    box-sizing: border-box;                     /* Границы и паддинги не ломают ширину блоков */
}

/* ВЕРХНИЙ ЯРУС: РЯД ПРОФЕССИЙ */
.l22-t5-professions-row {
    display: grid;                              /* Переключаем верхний ярус в режим Grid-матрицы */
    grid-template-columns: repeat(5, 1fr);      /* Выстраиваем ровно 5 одинаковых вертикальных колонок в ряд */
    gap: 10px;                                  /* Фиксированное расстояние между карточками профессий */
    width: 100%;                                /* Ряд занимает всю ширину белой карточки */
    box-sizing: border-box;                     /* Гарантируем стабильность геометрических расчётов */
}

.l22-t5-prof-card {
    background-color: #ffffff;                  /* Чистый белый базовый фон карточки профессии */
    border: 3px solid #bdc3c7;                  /* Нейтральная серая аккуратная рамка вокруг блока */
    border-radius: 20px;                        /* Красивое мягкое скругление углов карточки */
    padding: 4px 4px;                          /* Внутренние поля для удобного размещения элементов */
    display: flex;                              /* Переключаем карточку в вертикальный флекс-стек */
    flex-direction: column;                     /* Элементы выстраиваются строго друг под другом */
    align-items: center;                        /* Центрируем картинку, текст и слот по горизонтали */
    gap: 4px;                                   /* Равномерный шаг-отступ между элементами карточки */
    min-height: 250px;                          /* Стабильная минимальная высота для симметрии ряда */
    box-sizing: border-box;                     /* Паддинги учитываются внутри габаритов бокса */
    transition: all 0.3s ease;                  /* Включаем плавную анимацию переключения цветов */
}

.l22-t5-prof-img {
    height: 110px;                               /* Фиксированная рабочая высота картинки человека */
    width: auto;                                /* Ширина масштабируется пропорционально пропорциям */
    object-fit: contain;                        /* Полностью исключаем любые деформации графики */
    border-radius: 8px;                         /* Аккуратное легкое скругление углов фотографии */
}

.l22-t5-prof-name {
    font-size: 1.05rem;                         /* Оптимальный читаемый масштаб шрифта названия */
    font-weight: bold;                          /* Плотное жирное начертание для легкого восприятия */
    color: #2c3e50;                             /* Благородный темно-синий цвет букв */
    text-align: center;                         /* Центрируем текст надписи профессии */
}

/* ОКОШКО СБРОСА ПРЕДМЕТА */
.l22-t5-drop-slot {
    width: 75px;                                /* Компактная фиксированная ширина ячейки приёма */
    height: 75px;                               /* Компактная фиксированная высота ячейки приёма */
    border: 2px dashed #90caf9;                 /* Пунктирный голубой контур зоны сброса */
    border-radius: 12px;                        /* Легкое аккуратное скругление углов окошка */
    background-color: #f8fdff;                  /* Светлая нежная заливка подложки слота */
    display: flex;                              /* Активируем флекс для точного центрирования предмета */
    align-items: center;                        /* Центрируем упавший предмет по вертикали */
    justify-content: center;                    /* Центрируем упавший предмет по горизонтали */
    margin-top: auto;                           /* Прижимаем окошко сброса к нижней части карточки */
    flex-shrink: 0;                             /* Категорически запрещаем сжатие окошка сброса */
}

/* РЕЧЕВАЯ ПОДСКАЗКА ДЛЯ УСТНОЙ ОТРАБОТКИ */
.l22-t5-speech-hint {
    display: none;                              /* Изначально речевая подсказка полностью скрыта */
    font-size: 0.85rem;                         /* Компактный размер текста подсказки */
    font-style: italic;                         /* Наклонный шрифт (курсив) для выделения фразы */
    color: #27ae60;                             /* Сочный зелёный цвет для устного образца */
    font-weight: bold;                          /* Жирное начертание текста */
    text-align: center;                         /* Центрирование букв по ширине карточки */
    line-height: 1.2;                           /* Уплотненный межстрочный интервал */
    margin-top: 4px;                            /* Небольшой отступ сверху от слота */
}

/* НИЖНИЙ ЯРУС: ГОРИЗОНТАЛЬНЫЙ ПУЛ ПРЕДМЕТОВ */
.l22-t5-items-horiz-pool {
    display: flex;                              /* Переключаем пул картинок в горизонтальный флекс-ряд */
    flex-direction: row;                        /* Выстраиваем элементы строго в ОДИН ГОРИЗОНТАЛЬНЫЙ РЯД */
    justify-content: center;                    /* Центрируем все предметы ровно по центру желтого поля */
    align-items: center;                        /* Выравниваем все карточки предметов по вертикальной оси */
    gap: 15px;                                  /* Шаг-расстояние между карточками по горизонтали */
    width: 100%;                                /* Желтый перрон занимает полную ширину контейнера */
    background: #fff9c4;                        /* Нежно-желтая подложка игрового поля предметов */
    padding: 15px;                              /* Внутренние поля перрона для отступов от краев */
    border-radius: 20px;                        /* Скругляем внешние углы у базы хранения предметов */
    border: 2px dashed #fbc02d;                 /* Красивый пунктирный оранжево-желтый контур перрона */
    box-sizing: border-box;                     /* Паддинги не ломают общую ширину столбца */
}

.l22-t5-item-card {
    background-color: #ffffff;                  /* Белый фон карточки под рисунком предмета */
    border: 2px solid #bdc3c7;                  /* Базовая серая аккуратная рамка вокруг картинки */
    border-radius: 14px;                        /* Мягко скругляем внешние углы ячейки */
    width: 90px;                                /* Фиксированная рабочая ширина карточки предмета */
    height: 90px;                               /* Фиксированная рабочая высота карточки предмета */
    display: flex;                              /* Активируем флекс для центрирования графики */
    align-items: center;                        /* Центрируем рисунок внутри карточки по вертикали */
    justify-content: center;                    /* Центрируем рисунок внутри карточки по горизонтали */
    cursor: grab;                               /* Курсор в виде руки-захвата, обозначающий возможность тащить */
    box-sizing: border-box;                     /* Стабильность геометрии при расчете границ */
    transition: transform 0.2s ease;            /* Плавная анимация при взаимодействии */
}

.l22-t5-item-card img {
    max-width: 85%;                             /* Иллюстрация занимает максимум 85% доступной ширины */
    max-height: 85%;                            /* Иллюстрация занимает максимум 85% доступной высоты */
    object-fit: contain;                        /* Полностью исключаем любые деформации рисунка */
}

/* СТИЛИЗАЦИЯ КАРТИНКИ ВНУТРИ СЛОТА СБРОСА */
.l22-t5-drop-slot .l22-t5-item-card {
    border: none !important;                    /* Убираем внешние рамки ячейки внутри маленького слота */
    background: transparent !important;         /* Делаем фон полностью прозрачным */
    width: 100% !important;                     /* Растягиваем карточку на всю ширину слота сброса */
    height: 100% !important;                    /* Растягиваем карточку на всю высоту слота сброса */
    box-shadow: none !important;                /* Сбрасываем тени */
    cursor: default;                            /* Возвращаем стандартный курсор стрелки */
}

/* СОСТОЯНИЕ УСПЕШНОГО СОВПАДЕНИЯ (ЗЕЛЁНЫЙ КОНТУР) */
.l22-t5-prof-card.matched {
    border-color: #27ae60 !important;           /* Принудительно окрашиваем рамку всей плашки в сочный зеленый цвет */
    background-color: #f2fdf5 !important;       /* Окрашиваем фон решенной профессии в нежно-зеленый оттенок */
}

.l22-t5-prof-card.matched .l22-t5-drop-slot {
    border-color: #27ae60 !important;           /* Пунктир окошка сброса также становится зеленым */
    background-color: #e8f8f0 !important;       /* Внутренний фон окошка приобретает мягкий зеленый оттенок */
}

.l22-t5-prof-card.matched .l22-t5-speech-hint {
    display: block;                             /* Делаем подсказку видимой для чтения ребенком фраз со звуком Ц */
}

/* АДАПТИВНОСТЬ ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ СМАРТФОНОВ */
@media (max-width: 680px) {
    .l22-t5-professions-row {
        grid-template-columns: repeat(2, 1fr);  /* Перестраиваем профессии по 2 штуки в ряд на телефонах */
    }
    .l22-t5-items-horiz-pool {
        flex-wrap: wrap;                        /* Разрешаем предметам переноситься на новые строки внизу */
    }
}


/* --- СТИЛИ ДЛЯ УПРАЖНЕНИЯ 6: РАСШИФРУЙ СЛОВА (ПОСТРОЧНЫЕ КОММЕНТАРИИ) --- */

.l22-t6-workspace {
    display: flex;                              /* Активируем вертикальный контейнер для блоков слов */
    flex-direction: column;                     /* Выстраиваем строки слов строго друг под другом */
    gap: 30px;                                  /* Большой зазор между зашифрованными словами на странице */
    margin: 10px 0;                             /* Вертикальные внешние отступы рабочей зоны задания */
    width: 100%;                                /* Контейнер занимает полную доступную ширину белой карты */
    box-sizing: border-box;                     /* Границы и внутренние поля не ломают ширину блоков */
}

.l22-t6-word-block {
    background-color: #ffffff;                  /* Белый фоновый цвет для общей подложки под строку слова */
    border: 2px solid #e1e8ee;                  /* Нежная, аккуратная серо-голубая рамка вокруг блока слова */
    border-radius: 20px;                        /* Опрятное мягкое скругление углов контейнера */
    padding: 20px;                              /* Просторные внутренние поля для удобства работы ребенка */
    width: 100%;                                /* Блок занимает всю доступную ширину */
    box-sizing: border-box;                     /* Стабильность геометрических размеров подложки */
}

.l22-t6-letters-row {
    display: flex;                              /* Картинки и инпуты выстраиваются горизонтальной лентой */
    flex-direction: row;                        /* Направление элементов строго слева направо */
    justify-content: center;                    /* Центрируем все буквы слова ровно по середине подложки */
    gap: 15px;                                  /* Шаг-расстояние между соседними буквами в слове */
    width: 100%;                                /* Лента занимает всю доступную ширину */
}

.l22-t6-cell {
    display: flex;                              /* Переключаем ячейку буквы в вертикальный стек */
    flex-direction: column;                     /* Располагаем картинку строго над окошком ввода */
    align-items: center;                        /* Центрируем изображение и инпут по горизонтали */
    gap: 10px;                                  /* Шаг-расстояние между картинкой и полем ввода под ней */
}

.l22-t6-cell img {
    height: 130px;                               /* Стабильная фиксированная рабочая высота для всех картинок */
    width: 100px;                                /* Стабильная фиксированная рабочая ширина для всех картинок */
    object-fit: contain;                        /* Исключаем искажения или деформации предметных рисунков */
    border-radius: 8px;                         /* Легкое аккуратное скругление углов у иллюстраций */
}

.l22-t6-input {
    width: 50px;                                /* Компактная фиксированная ширина строго под одну букву */
    height: 50px;                               /* Компактная фиксированная высота строго под одну букву */
    border: 3px solid #bdc3c7;                  /* Нейтральная серая аккуратная рамка вокруг поля ввода */
    background-color: #ffffff;                  /* Чистый белый внутренний фон квадратного окошка */
    border-radius: 10px;                        /* Мягкое скругление углов у рамок полей ввода */
    font-family: 'Comic Sans MS', sans-serif;   /* Единый рукописный детский шрифт для всех уроков курса */
    font-size: 1.5rem;                          /* Крупный, контрастный размер вписываемых ребенком букв */
    font-weight: bold;                          /* Жирное начертание набираемых букв для легкого чтения */
    text-align: center;                         /* Набираемая ребенком буква пишется строго по центру окошка */
    text-transform: uppercase;                  /* Автоматически переводим вводимые буквы в верхний регистр */
    outline: none;                              /* Отключаем грубую системную обводку фокуса от браузера */
    box-sizing: border-box;                     /* Паддинги не деформируют стабильные габариты квадрата */
    transition: all 0.2s ease;                  /* Плавная анимация переключения цветовых состояний */
}

/* Состояние фокуса при наборе буквы ребенком */
.l22-t6-input:focus {
    border-color: #ff7043;                      /* Рамка становится теплой оранжевой при активации поля */
    background-color: #fffde7;                  /* Подложка приобретает легкий приятный желтоватый оттенок */
}

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

/* АДАПТИВНОСТЬ ДЛЯ МАЛЕНЬКИХ ДИСПЛЕЕВ ТЕЛЕФОНОВ */
@media (max-width: 600px) {
    .l22-t6-letters-row {
        flex-wrap: wrap;                        /* Разрешаем длинным словам переноситься на новую строчку */
        gap: 10px;                              /* Немного уменьшаем зазоры на мобильных устройствах */
    }
    .l22-t6-cell img {
        height: 60px;                           /* Слегка уменьшаем высоту картинок для экономии места */
        width: 60px;                            /* Слегка уменьшаем ширину картинок для экономии места */
    }
    .l22-t6-input {
        width: 38px;                            /* Делаем инпут компактнее на экранах смартфонов */
        height: 38px;                           /* Делаем инпут компактнее на экранах смартфонов */
        font-size: 1.2rem;                      /* Соответственно масштабируем размер шрифта буквы */
    }
}

/* --- СТИЛИ ДЛЯ УПРАЖНЕНИЯ 7: КРОССВОРД-ЛЕСТНИЦА (ПОСТРОЧНЫЕ КОММЕНТАРИИ) --- */

.l22-t7-workspace {
    display: flex;                              /* Строим рабочую зону кроссворда и картинок в горизонтальный ряд */
    justify-content: space-between;             /* Равномерно разносим сетку букв влево, а галерею вправо */
    align-items: center;                        /* Выравниваем элементы по центру вертикальной оси */
    gap: 30px;                                  /* Оптимальный зазор между кроссвордом и картинками */
    margin: 20px 0;                             /* Внешние вертикальные отступы игрового поля задания */
    width: 100%;                                /* Контейнер занимает полную доступную ширину белой карты */
    box-sizing: border-box;                     /* Паддинги и границы учитываются внутри общих размеров */
}

.l22-t7-crossword {
    display: flex;                              /* Переключаем сетку кроссворда в вертикальный флекс-стек */
    flex-direction: column;                     /* Располагаем ряды кроссворда строго друг под другом */
    gap: 8px;                                   /* Шаг-расстояние между строками «лестницы» */
    flex: 1.5;                                  /* Сетка кроссворда занимает приоритетную ширину пространства */
}

.l22-t7-row {
    display: flex;                              /* Клетки внутри одной строки строятся горизонтальной лентой */
    flex-direction: row;                        /* Направление ячеек строго слева направо */
    align-items: center;                        /* Выравниваем номер строки и инпуты по центру вертикали */
    gap: 4px;                                   /* Минимальный аккуратный зазор между соседними клетками букв */
}

.l22-t7-row-number {
    font-size: 1.4rem;                          /* Достаточно крупный размер шрифта для номеров строк */
    font-weight: bold;                          /* Плотное жирное начертание цифр кроссворда */
    color: #ff7043;                             /* Фирменный оранжевый цвет для нумерации рядов */
    width: 25px;                                /* Фиксированная ширина зоны номера для ровного выравнивания */
    text-align: center;                         /* Центрируем цифру внутри её символьного пространства */
    margin-right: 5px;                          /* Небольшой защитный отступ справа перед первой ячейкой */
}

.l22-t7-input {
    width: 50px;                                /* Стабильная фиксированная ширина ячейки под одну букву */
    height: 50px;                               /* Стабильная фиксированная высота ячейки под одну букву */
    border: 2px solid #bdc3c7;                  /* Нейтральная серая аккуратная рамка вокруг клетки */
    background-color: #ffffff;                  /* Чистый белый внутренний фон игровой ячейки */
    font-family: 'Comic Sans MS', sans-serif;   /* Поддерживаем единый рукописный детский шрифт урока */
    font-size: 1.4rem;                          /* Крупный читаемый размер шрифта вписываемых ребенком букв */
    font-weight: bold;                          /* Жирное начертание букв для легкого визуального восприятия */
    text-align: center;                         /* Текст пишется и позиционируется строго по центру ячейки */
    text-transform: uppercase;                  /* Автоматически переводим вводимые символы в верхний регистр */
    outline: none;                              /* Отключаем грубую системную обводку фокуса от браузера */
    box-sizing: border-box;                     /* Паддинги не деформируют габариты квадратной клетки */
    transition: all 0.2s ease;                  /* Плавная анимация переключения цветовых состояний */
}

/* Эффект фокуса при наборе буквы ребенком */
.l22-t7-input:focus {
    border-color: #ff7043;                      /* Рамка становится теплой оранжевой при активации поля */
    background-color: #fffde7;                  /* Подложка приобретает легкий приятный желтоватый оттенок */
}

/* Оформление жестко зафиксированных букв-подсказок (Буква Ц на бланке) */
.l22-t7-input.static-letter {
    background-color: #e1e8ee;                  /* Серо-голубой контрастный фон для подсказок */
    border-color: #7f8c8d;                      /* Более плотная темная рамка вокруг фиксированной буквы */
    color: #2c3e50;                             /* Темно-синий цвет для буквы-ориентира */
    cursor: not-allowed;                        /* Курсор запрета при наведении мыши */
}

/* Зеленое оформление ячеек при полностью правильном слове */
.l22-t7-row.correct-row .l22-t7-input:not(.static-letter) {
    border-color: #27ae60 !important;           /* Принудительно красим контур ячеек в зеленый цвет успеха */
    background-color: #f2fdf5 !important;       /* Принудительно меняем фон полей на мягкий нежно-зеленый */
    color: #27ae60;                             /* Цвет угаданных букв становится зеленым */
}

/* ГАЛЕРЕЯ КАРТИНОК СПРАВА */
.l22-t7-gallery {
    display: grid;                              /* Переключаем галерею подсказок в режим Grid-матрицы */
    grid-template-columns: repeat(2, 1fr);      /* Выстраиваем картинки аккуратной сеткой 2 на 2 */
    gap: 12px;                                  /* Расстояние между карточками иллюстраций */
    flex: 1;                                    /* Колонка подсказок занимает оставшуюся часть пространства */
}

.l22-t7-img-wrapper {
    background-color: #ffffff;                  /* Белый фон карточки под иллюстрацией */
    border: 2px solid #e1e8ee;                  /* Аккуратная тонкая серая рамка вокруг картинки */
    border-radius: 14px;                        /* Мягко скругляем внешние углы ячейки */
    padding: 6px;                               /* Внутренние защитные отступы */
    height: 120px;                               /* Фиксированная высота карточки для сохранения симметрии */
    display: flex;                              /* Активируем флекс для центрирования графики */
    align-items: center;                        /* Центрируем рисунок внутри карточки по вертикали */
    justify-content: center;                    /* Центрируем рисунок внутри карточки по горизонтали */
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);     /* Микро-тень для придания легкого объема */
}

.l22-t7-img-wrapper img {
    max-width: 99%;                             /* Иллюстрация занимает максимум ширины */
    max-height: 99%;                            /* Иллюстрация занимает максимум высоты */
    object-fit: contain;                        /* Исключаем деформации или растяжения предметных рисунков */
}



/* --- СТИЛИ ДЛЯ УПРАЖНЕНИЯ 8: КРУПНЫЕ КАРТИНКИ И КЛОНИРОВАНИЕ (ПОСТРОЧНЫЕ КОММЕНТАРИИ) --- */

.l22-t8-workspace {
    display: flex;                              /* Активируем гибкий вертикальный контейнер для структуры задания */
    flex-direction: column;                     /* Располагаем текстовый блок строго над полем с картинками */
    gap: 20px;                                  /* Шаг-расстояние между текстовым полем и пулом картинок */
    margin: 15px 0;                             /* Вертикальные внешние отступы всего игрового поля задания */
    width: 100%;                                /* Контейнер занимает полную доступную ширину белой карты */
    box-sizing: border-box;                     /* Границы и внутренние поля не ломают ширину блоков */
}

.l22-t8-story-box {
    background-color: #ffffff;                  /* Чистый белый фоновый цвет подложки под текст рассказа */
    border: 2px solid #e1e8ee;                  /* Аккуратная легкая серо-голубая рамка вокруг текста */
    border-radius: 20px;                        /* Мягкое и гармоничное скругление внешних углов подложки */
    padding: 20px 25px;                         /* Комфортные широкие внутренние поля для удобства чтения текста */
    box-sizing: border-box;                     /* Стабильность геометрии текстового контейнера */
}

.l22-t8-story-text {
    font-size: 1.2rem;                          /* Крупный читаемый масштаб шрифта для детского восприятия */
    line-height: 2.4;                           /* Увеличенный межстрочный интервал, чтобы слоты не наезжали на строки */
    color: #2c3e50;                             /* Контрастный благородный темно-синий цвет букв рассказа */
    margin: 0;                                  /* Сбрасываем дефолтные внешние отступы параграфа */
    text-align: justify;                        /* Выравниваем текст рассказа по всей ширине контейнера */
}

/* ИНТЕРАКТИВНОЕ ОКОШКО СБРОСА ВНУТРИ СТРОКИ */
.l22-t8-drop-slot {
    display: inline-flex;                       /* Встраиваем слот непосредственно внутрь текстовой строки */
    width: 45px;                                /* Компактная фиксированная ширина под маленькую иконку в тексте */
    height: 45px;                               /* Компактная фиксированная высота под маленькую иконку в тексте */
    border: 2px dashed #90caf9;                 /* Нежный пунктирный голубой контур интерактивной зоны */
    border-radius: 10px;                        /* Аккуратное скругление углов окошка сброса */
    background-color: #f8fdff;                  /* Светлая нежная заливка подложки слота внутри строки */
    align-items: center;                        /* Центрируем упавшую иконку по вертикали */
    justify-content: center;                    /* Центрируем упавшую иконку по горизонтали */
    vertical-align: middle;                     /* Идеально выравниваем окошко по базовой линии текста */
    margin: 0 4px;                              /* Небольшие боковые отступы, чтобы текст не слипался с рамкой */
    color: #90caf9;                             /* Нежно-голубой цвет для исходных цифр внутри слотов */
    font-weight: bold;                          /* Жирное начертание цифр подсказок */
    font-size: 1.1rem;                          /* Удобный масштаб цифр */
    box-sizing: border-box;                     /* Размеры остаются стабильными при паддингах */
    transition: all 0.3s ease;                  /* Плавная анимация переключения цветовых состояний */
}

/* ЖЕЛТЫЙ ПУЛ ХРАНЕНИЯ КАРТИНОК В ОДИН РЯД */
.l22-t8-images-pool {
    display: flex;                              /* Карточки картинок выстраиваются горизонтальной лентой */
    flex-direction: row;                        /* Строго в ОДИН ГОРИЗОНТАЛЬНЫЙ РЯД по условиям макета */
    justify-content: center;                    /* Центрируем все картинки ровно по середине желтого поля */
    align-items: center;                        /* Выравниваем все карточки по вертикальной оси контейнера */
    gap: 15px;                                  /* Расстояние между соседними картинками по горизонтали */
    background-color: #fff9c4;                  /* Приятный нежно-желтый фон подложки пула картинок */
    padding: 15px;                              /* Внутренние поля для отступов элементов от краев рамки */
    border-radius: 25px;                        /* Скругляем внешние углы у базы хранения картинок */
    border: 2px dashed #fbc02d;                 /* Пунктирный оранжево-желтый контур перрона */
    width: 100%;                                /* Контейнер пула занимает полную ширину */
    box-sizing: border-box;                     /* Паддинги не ломают ширину общего блока */
}

/* ИСПРАВЛЕНО: КРУПНЫЕ КАРТОЧКИ ПО 150PX ПО ТРЕБОВАНИЮ */
.l22-t8-img-card {
    background-color: #ffffff;                  /* Белый фон карточки под рисунком подсказки */
    border: 2px solid #bdc3c7;                  /* Базовая серая аккуратная рамка вокруг картинки */
    border-radius: 16px;                        /* Красивое скругление внешних углов ячейки */
    width: 150px;                               /* Фиксированная КРУПНАЯ ширина карточки строго по ТЗ */
    height: 150px;                              /* Фиксированная КРУПНАЯ высота карточки строго по ТЗ */
    display: flex;                              /* Активируем флекс для центрирования графики */
    align-items: center;                        /* Центрируем рисунок внутри карточки по вертикали */
    justify-content: center;                    /* Центрируем рисунок внутри карточки по горизонтали */
    cursor: grab;                               /* Курсор в виде руки-захвата, обозначающий возможность тащить */
    box-sizing: border-box;                     /* Стабильность геометрии при расчете границ */
    transition: transform 0.2s ease;            /* Плавный отклик при наведении мыши */
}

.l22-t8-img-card:hover {
    transform: scale(1.03);                     /* Легкое увеличение при наведении для интерактивности */
}

.l22-t8-img-card img {
    max-width: 90%;                             /* Рисунок занимает максимум 90% доступной ширины карточки */
    max-height: 90%;                            /* Рисунок занимает максимум 90% доступной высоты карточки */
    object-fit: contain;                        /* Полностью исключаем любые деформации графики */
}

/* Зеленое оформление заполненного слота при успешной проверке */
.l22-t8-drop-slot.matched {
    border-color: #27ae60 !important;           /* Контур встроенного окошка становится зеленым в знак успеха */
    background-color: #e8f8f0 !important;       /* Внутренний фон слота приобретает мягкий зеленый оттенок */
    padding: 2px;                               /* Защитный микро-паддинг для вложенной картинки */
}

/* БЛОК ВОПРОСОВ ВНИЗУ КАРТОЧКИ */
.l22-t8-questions-box {
    background-color: #f0faff;                  /* Нежный голубоватый фон подложки вопросов */
    border: 2px solid #b3e5fc;                  /* Серо-голубая аккуратная рамка вокруг блока вопросов */
    border-radius: 16px;                        /* Скругляем углы у контейнера беседы */
    padding: 15px 20px;                         /* Комфортные внутренние поля */
    margin-top: 15px;                           /* Отступ сверху от игрового поля до вопросов */
    width: 100%;                                /* Блок занимает полную ширину */
    box-sizing: border-box;                     /* Безопасность размеров при паддингах */
}

.l22-t8-q-title {
    font-size: 1.1rem;                          /* Увеличенный масштаб шрифта для заголовка вопросов */
    font-weight: bold;                          /* Делаем текст заголовка жирным */
    color: #ff7043;                             /* Фирменный сочный оранжевый цвет надписи */
    display: block;                             /* Выводим заголовок самостоятельной строкой */
    margin-bottom: 10px;                        /* Шаг-зазор до сетки с вопросами */
}

.l22-t8-q-grid {
    display: grid;                              /* Переключаем вопросы в режим сетки Grid для двух колонок */
    grid-template-columns: repeat(2, 1fr);      /* Ровно две одинаковые колонки вопросов в ряд */
    gap: 8px 20px;                              /* Вертикальный шаг 8px, горизонтальный зазор между колонками 20px */
}

.l22-t8-q-item {
    font-size: 1rem;                            /* Комфортный размер букв для чтения взрослым */
    color: #34495e;                             /* Темный контрастный цвет текста вопросов */
    margin: 0;                                  /* Сбрасываем дефолтные отступы параграфов */
    font-weight: 500;                           /* Средняя приятная плотность шрифта */
}

/* АДАПТИВНОСТЬ ДЛЯ ЭКРАНОВ СМАРТФОНОВ */
@media (max-width: 650px) {
    .l22-t8-images-pool {
        flex-wrap: wrap;                        /* Разрешаем картинкам переноситься на новые строки на телефонах */
        gap: 10px;                              /* Слегка уменьшаем зазоры */
    }
    .l22-t8-img-card {
        width: 90px;                            /* Масштабируем до 90px на мобильных экранах, чтобы влезали в ряд */
        height: 90px;                           /* Масштабируем высоту */
    }
    .l22-t8-q-grid {
        grid-template-columns: 1fr;             /* На узких дисплеях выстраиваем вопросы в одну колонку */
        gap: 6px;                               /* Шаг между строками */
    }
}