/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
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: СТИЛИ ДЛЯ СКОРОГОВОРОК
   ========================================= */

/* Главный контейнер для скороговорок */
.l28-t1-workspace {
    display: flex;                            /* Включаем флексбокс для вертикального выравнивания */
    flex-direction: column;                   /* Выстраиваем строки скороговорок друг под другом */
    gap: 10px;                                /* Расстояние в 10 пикселей между строчками */
    background: #ffffff;                      /* Белый фон подложки */
    padding: 20px;                            /* Внутренние отступы со всех сторон */
    border-radius: 15px;                      /* Закругляем углы подложки на 15 пикселей */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг блока */
}

/* Строка отдельной скороговорки */
.l28-t1-row {
    font-size: 1.2rem;                        /* Комфортный размер шрифта для чтения */
    color: #2c3e50;                           /* Темно-синий цвет текста */
    font-weight: bold;                        /* Делаем текст жирным для лучшей читаемости */
    padding: 8px 12px;                        /* Внутренние отступы плашки */
    background-color: #f7fbfe;                /* Очень светлый голубоватый фон для строки */
    border-radius: 8px;                       /* Скругляем углы плашки строки на 8 пикселей */
    border: 1px dashed #d0e8f2;               /* Легкая пунктирная рамка вокруг строки */
    text-align: left;                         /* Выравниваем текст по левому краю */
}

/* =========================================
   ЗАДАНИЕ 2: СТИЛИ ДЛЯ ВЫБОРА КАРТИНОК
   ========================================= */

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

/* Карточка отдельной картинки */
.l28-t2-card {
    background: #ffffff;                      /* Белый фон карточки */
    border: 3px solid #e0f0f8;                /* Базовая светло-синяя рамка по умолчанию */
    border-radius: 15px;                      /* Закругляем углы карточки на 15 пикселей */
    padding: 10px;                            /* Внутренние отступы вокруг картинки */
    cursor: pointer;                          /* Курсор мыши меняется на палец при наведении */
    display: flex;                            /* Включаем флексбокс для центрирования */
    justify-content: center;                  /* Центрируем содержимое по горизонтали */
    align-items: center;                      /* Центрируем содержимое по вертикали */
    aspect-ratio: 1 / 1;                      /* Делаем карточки строго квадратными */
    transition: all 0.2s ease;                /* Плавная анимация при наведении и кликах */
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);   /* Добавляем легкую тень для объема */
    box-sizing: border-box;                   /* Учитываем рамки и отступы в общей ширине */
}

/* Эффект при наведении мышки на карточку */
.l28-t2-card:hover {
    transform: scale(1.03);                   /* Слегка увеличиваем карточку при наведении */
    border-color: #3498db;                    /* Подсвечиваем рамку синим цветом */
}

/* Контейнер изображения внутри карточки */
.l28-t2-img {
    max-width: 90%;                           /* Ограничиваем максимальную ширину картинки */
    max-height: 90%;                          /* Ограничиваем максимальную высоту картинки */
    object-fit: contain;                      /* Аккуратно вписываем картинку без искажений пропорций */
    pointer-events: none;                     /* Отключаем клики по самой картинке, чтобы кликалась вся карточка */
}

/* Класс при выборе карточки ребенком (обводка периметра зеленым цветом по вашему требованию) */
.l28-t2-card.selected {
    border-color: #27ae60;                    /* Обводим периметр карточки зеленым цветом */
    background-color: #f1fdf5;                /* Заливаем фон карточки нежно-зеленым оттенком */
}

/* Адаптивность для планшетов (перевод сетки в 3 колонки) */
@media (max-width: 768px) {
    .l28-t2-grid {
        grid-template-columns: repeat(3, 1fr); /* На экранах до 768px делаем 3 столбца */
    }
}

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





/* =========================================
   ЗАДАНИЕ 3: СТИЛИ ДЛЯ КАРТИНОК И ПОДПИСЕЙ В 2 КОЛОНКИ
   ========================================= */

/* Главная сетка: два аккуратных столбца */
.l28-t3-grid {
    display: grid;                            /* Включаем двухмерную сетку Grid */
    grid-template-columns: repeat(2, 1fr);    /* Создаем 2 равных столбца */
    gap: 15px;                                /* Расстояние в 15 пикселей между карточками */
    margin-top: 15px;                         /* Отступ сверху от инструкции */
}

/* Карточка отдельного задания (картинка сверху, подпись снизу) */
.l28-t3-card {
    background: #ffffff;                      /* Белый фон карточки */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг карточки */
    border-radius: 15px;                      /* Закругление углов карточки на 15 пикселей */
    padding: 15px;                            /* Внутренние отступы со всех сторон */
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Располагаем элементы вертикально (картинка сверху, подпись снизу) */
    align-items: center;                      /* Выравниваем элементы по центру по горизонтали */
    gap: 12px;                                /* Расстояние между картинкой и блоком ввода */
    box-shadow: 0 3px 5px rgba(0,0,0,0.02);   /* Добавляем легкую мягкую тень */
    box-sizing: border-box;                   /* Учитываем отступы и рамки в ширине */
}

/* Контейнер картинки */
.l28-t3-img {
    width: 90px;                              /* Фиксированная ширина картинки */
    height: 90px;                             /* Фиксированная высота картинки */
    object-fit: contain;                      /* Аккуратно вписываем картинку без искажений */
}

/* Внутренняя строка с текстом и полем ввода под картинкой */
.l28-t3-row {
    display: flex;                            /* Включаем флексбокс для строки */
    width: 100%;                              /* Строка занимает всю ширину карточки */
    align-items: center;                      /* Выравниваем текст и поле по вертикали */
    justify-content: space-between;           /* Распределяем: текст слева, инпут справа */
    gap: 8px;                                 /* Расстояние между текстом и полем */
    border-top: 1px dashed #e0f0f8;           /* Тонкая разделительная линия под картинкой */
    padding-top: 10px;                        /* Отступ текста от линии */
}

/* Текстовая метка со словом-признаком */
.l28-t3-label {
    font-size: 1rem;                          /* Комфортный размер шрифта для чтения */
    color: #2c3e50;                           /* Темно-синий цвет текста */
    font-weight: bold;                        /* Делаем текст жирным */
}

/* Поле ввода для слова из словаря */
.l28-t3-input {
    border: 2px solid #3498db;                /* Синяя рамка вокруг поля ввода */
    border-radius: 8px;                       /* Скругляем углы поля ввода на 8 пикселей */
    padding: 5px 8px;                         /* Внутренние отступы в поле ввода */
    font-family: 'Comic Sans MS', sans-serif; /* Применяем единый детский шрифт */
    font-size: 1rem;                          /* Размер вводимого текста */
    color: #2980b9;                           /* Цвет вводимого текста */
    outline: none;                            /* Убираем стандартную обводку браузера при фокусе */
    width: 110px;                             /* Фиксированная ширина поля ввода */
    text-align: center;                       /* Выравниваем текст строго по центру */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при фокусировке на поле ввода */
.l28-t3-input:focus {
    border-color: #2980b9;                    /* Затемняем рамку при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Добавляем легкое свечение */
}

/* Класс правильного ответа (зеленое оформление инпута после проверки) */
.l28-t3-input.correct {
    border-color: #27ae60;                    /* Меняем рамку инпута на зеленую */
    background-color: #d4edda;                /* Заливаем фон инпута нежно-зеленым цветом */
    color: #155724;                           /* Делаем текст темно-зеленым */
}

/* Класс ошибочного ответа (красное оформление инпута после проверки) */
.l28-t3-input.wrong {
    border-color: #e74c3c;                    /* Меняем рамку инпута на красную */
    background-color: #f8d7da;                /* Заливаем фон инпута розоватым цветом */
    color: #721c24;                           /* Делаем текст темно-красным */
}

/* Адаптивность для мобильных телефонов (перевод сетки в 1 колонку) */
@media (max-width: 600px) {
    .l28-t3-grid {
        grid-template-columns: 1fr;            /* На узких экранах выстраиваем карточки в 1 столбец */
    }
}

/* =========================================
   ЗАДАНИЕ 4: СХЕМЫ МЕСТА ЗВУКА В СЛОВЕ
   ========================================= */

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

/* Карточка отдельного предмета (картинка + схема под ней) */
.l28-t4-item {
    background: #ffffff;                      /* Белый фон для каждой карточки */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг карточки */
    border-radius: 15px;                      /* Закругляем углы карточки на 15 пикселей */
    padding: 15px;                            /* Внутренние отступы со всех сторон */
    display: flex;                            /* Включаем флексбокс для вертикального выравнивания */
    flex-direction: column;                   /* Располагаем картинку и схему друг под другом */
    align-items: center;                      /* Выравниваем содержимое строго по центру */
    gap: 12px;                                /* Отступ между картинкой и схемой */
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);   /* Добавляем легкую мягкую тень для объема */
    box-sizing: border-box;                   /* Учитываем рамки и отступы в ширине */
}

/* Контейнер самой картинки */
.l28-t4-img {
    width: 90px;                              /* Фиксированная ширина картинки */
    height: 90px;                             /* Фиксированная высота картинки */
    object-fit: contain;                      /* Аккуратно вписываем картинку без искажения пропорций */
}

/* Блок схемы (три кружочка под картинкой) */
.l28-t4-scheme {
    display: flex;                            /* Выстраиваем чекбоксы в горизонтальный ряд */
    gap: 8px;                                 /* Расстояние между кружочками */
    justify-content: center;                  /* Центрируем схему */
    align-items: center;                      /* Выравниваем по вертикали */
}

/* Кастомный чекбокс, стилизованный под круглую схему */
.l28-t4-cb {
    appearance: none;                         /* Сбрасываем стандартный системный дизайн чекбокса */
    -webkit-appearance: none;                 /* Сброс для старых версий Safari */
    width: 24px;                              /* Задаем ширину кружочка */
    height: 24px;                             /* Задаем высоту кружочка */
    border: 2px solid #3498db;                /* Синяя рамка кружка */
    border-radius: 50%;                       /* Делаем элемент абсолютно круглым */
    background-color: #ffffff;                /* Белый фон внутри кружка */
    cursor: pointer;                          /* Курсор мыши меняется на палец при наведении */
    outline: none;                            /* Убираем стандартную обводку браузера при клике */
    transition: all 0.2s ease;                /* Плавная анимация при изменении состояния */
}

/* Эффект при наведении мышки на кружок */
.l28-t4-cb:hover {
    border-color: #2980b9;                    /* Немного затемняем рамку при наведении */
    transform: scale(1.1);                    /* Слегка увеличиваем кружок для интерактивности */
}

/* Состояние выбранного (отмеченного) кружка */
.l28-t4-cb:checked {
    background-color: #3498db;                /* Заливаем кружок сплошным синим цветом */
    border-color: #2980b9;                    /* Делаем рамку более темной */
}

/* Класс правильного ответа (зеленая рамка схемы после проверки) */
.l28-t4-item.correct .l28-t4-cb:checked {
    background-color: #27ae60;                /* Меняем заливку выбранного кружка на зеленую */
    border-color: #219653;                    /* Темно-зеленая рамка */
}

/* Класс ошибочного ответа (красная рамка схемы после проверки) */
.l28-t4-item.wrong .l28-t4-cb:checked {
    background-color: #e74c3c;                /* Меняем заливку выбранного кружка на красную */
    border-color: #c0392b;                    /* Темно-красная рамка */
}

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

/* =========================================
   ЗАДАНИЕ 5: СТИЛИ ДЛЯ ТАБЛИЦЫ СЛОВ
   ========================================= */

/* Главная таблица с 4 колонками */
.l28-t5-table {
    display: grid;                            /* Включаем двухмерную сетку Grid */
    grid-template-columns: repeat(4, 1fr);    /* Создаем 4 равных столбца под каждую категорию */
    gap: 10px;                                /* Расстояние в 10 пикселей между ячейками */
    background: #ffffff;                      /* Белый фон подложки таблицы */
    padding: 20px;                            /* Внутренние отступы со всех сторон */
    border-radius: 15px;                      /* Закругляем углы подложки на 15 пикселей */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг таблицы */
    box-sizing: border-box;                   /* Учитываем отступы и рамки в ширине */
}

/* Ячейка шапки таблицы (заголовки колонок) */
.l28-t5-header {
    background-color: #e1f5fe;                /* Нежно-голубой фон шапки таблицы */
    color: #2980b9;                           /* Синий цвет текста заголовков */
    font-weight: bold;                        /* Жирное начертание текста */
    font-size: 1.05rem;                       /* Комфортный размер шрифта */
    text-align: center;                       /* Выравнивание текста по центру */
    padding: 10px 5px;                        /* Внутренние отступы шапки */
    border-radius: 8px;                       /* Скругление углов шапки */
    border: 1px solid #b3e5fc;                /* Светло-синяя граница */
}

/* Ячейка обычной строки таблицы */
.l28-t5-cell {
    display: flex;                            /* Включаем флексбокс для центрирования инпута */
    justify-content: center;                  /* Центрируем инпут по горизонтали */
    align-items: center;                      /* Центрируем инпут по вертикали */
}

/* Поле ввода слова в таблице */
.l28-t5-input {
    border: 2px solid #cbd5e1;                /* Серовато-синяя рамка по умолчанию */
    border-radius: 8px;                       /* Скругление углов поля на 8 пикселей */
    padding: 6px 10px;                        /* Внутренние отступы в инпуте */
    font-family: 'Comic Sans MS', sans-serif; /* Единый детский шрифт */
    font-size: 1rem;                          /* Размер вводимого текста */
    color: #2c3e50;                           /* Цвет текста */
    outline: none;                            /* Убираем стандартную обводку */
    width: 100%;                              /* Инпут занимает всю ширину ячейки */
    text-align: center;                       /* Текст строго по центру */
    box-sizing: border-box;                   /* Учитываем отступы в ширине */
    transition: all 0.2s ease;                /* Плавная анимация */
}

/* Стиль для инпутов-образцов (которые уже заполнены и заблокированы) */
.l28-t5-input:disabled {
    background-color: #f8fafc;                /* Очень светлый серый фон */
    color: #64748b;                           /* Приглушенный цвет текста образца */
    border-color: #e2e8f0;                    /* Светлая рамка */
    font-weight: bold;                        /* Жирный шрифт для образцов */
}

/* Эффект при фокусе на интерактивном поле ввода */
.l28-t5-input.interactive:focus {
    border-color: #3498db;                    /* Ярко-синяя рамка при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Легкое свечение */
}

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

/* Класс ошибочного ответа (красное оформление после проверки) */
.l28-t5-input.wrong {
    border-color: #e74c3c !important;         /* Красная рамка */
    background-color: #f8d7da !important;     /* Розоватый фон */
    color: #721c24 !important;                /* Темно-красный текст */
}

/* Адаптивность для планшетов и телефонов (перевод таблицы в 2 колонки или 1 при узком экране) */
@media (max-width: 768px) {
    .l28-t5-table {
        grid-template-columns: repeat(2, 1fr); /* На планшетах делаем 2 столбца */
    }
}
@media (max-width: 480px) {
    .l28-t5-table {
        grid-template-columns: 1fr;            /* На смартфонах выстраиваем в 1 столбец */
    }
}

/* =========================================
   ЗАДАНИЕ 6. ИГРА "ПРОФЕССИИ И ИНСТРУМЕНТЫ"
   ========================================= */

/* Подзаголовки секций */
.l28-t6-subtitle {
    font-size: 1.15rem;                       /* Размер шрифта подзаголовка */
    color: #2c3e50;                         /* Тёмно-синий цвет текста */
    margin: 10px 0 8px 0;                     /* Отступы вокруг подзаголовка */
    font-weight: bold;                        /* Жирное начертание */
}

/* Сетка для профессий (вверху, вертикальные карточки пропорции примерно 4:1 по высоте) */
.l28-t6-prof-grid {
    display: grid;                            /* Включаем Grid-сетку */
    grid-template-columns: repeat(7, 1fr);    /* 7 колонок для профессий в один ряд */
    gap: 5px;                                /* Отступы между карточками */
}

/* Сетка для предметов (внизу, квадратные карточки 1:1) */
.l28-t6-item-grid {
    display: grid;                            /* Включаем Grid-сетку */
    grid-template-columns: repeat(7, 1fr);    /* 7 колонок для предметов в один ряд */
    gap: 5px;                                /* Отступы между карточками */
}

/* Общий стиль карточки */
.l28-t6-card {
    background: #ffffff;                      /* Белый фон карточки */
    border: 3px solid #cbd5e1;                /* Нейтральная серо-синяя рамка по умолчанию */
    border-radius: 10px;                      /* Закругление углов */
    padding: 1px;                             /* Внутренние отступы */
    cursor: pointer;                          /* Курсор в виде указателя */
    display: flex;                            /* Флексбокс для выравнивания */
    flex-direction: column;                   /* Элементы друг под другом */
    align-items: center;                      /* Центрирование по горизонтали */
    justify-content: center;                  /* Центрирование по вертикали */
    transition: all 0.2s ease;                /* Плавная анимация */
    box-sizing: border-box;                   /* Учитываем рамки в размерах */
}

/* Вертикальные карточки профессий (соотношение сторон вытянутое вверх) */
.prof-card {
    aspect-ratio: 1 / 2.2;                    /* Вертикальный формат */
}

/* Квадратные карточки предметов (соотношение 1:1) */
.item-card {
    aspect-ratio: 1 / 1;                      /* Строго квадратный формат */
}

/* Эффект при наведении мыши */
.l28-t6-card:hover {
    border-color: #94a3b8;                    /* Затемнение рамки при наведении */
    transform: translateY(-2px);              /* Легкий подъем карточки */
}

/* Стили изображений внутри карточек */
.l28-t6-img {
    width: 105%;                              /* Занимает всю ширину */
    object-fit: contain;                      /* Сохраняет пропорции без искажения */
    pointer-events: none;                     /* Клик проходит сквозь картинку на карточку */
}

/* Высота для вертикальных картинок */
.l28-t6-img.vertical {
    max-height: 95%;                          /* Ограничение высоты */
}

/* Высота для квадратных картинок */
.l28-t6-img.square {
    max-height: 95%;                          /* Ограничение высоты */
}

/* Подпись названия профессии под картинкой */
.l28-t6-label {
    font-size: 0.75rem;                       /* Мелкий читаемый шрифт */
    color: #475569;                           /* Серо-синий цвет текста */
    font-weight: bold;                        /* Жирный шрифт */
    text-align: center;                       /* По центру */
    margin-top: 4px;                          /* Отступ сверху */
}

/* Адаптивность для мобильных и планшетов (перевод в несколько рядов) */
@media (max-width: 900px) {
    .l28-t6-prof-grid, .l28-t6-item-grid {
        grid-template-columns: repeat(4, 1fr); /* По 4 карточки в ряд на средних экранах */
    }
}
@media (max-width: 500px) {
    .l28-t6-prof-grid, .l28-t6-item-grid {
        grid-template-columns: repeat(2, 1fr); /* По 2 карточки в ряд на смартфонах */
    }
}

/* =========================================
   ЗАДАНИЕ 7: СТИЛИ ДЛЯ ИГРЫ "ВОВОЧКА-ЧУДАК"
   ========================================= */

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

/* Сам рисунок-коллаж */
.l28-t7-collage {
    width: 100%;                              /* Адаптивная ширина */
    max-width: 750px;                         /* Ограничение максимальной ширины для аккуратности */
    height: auto;                             /* Сохранение пропорций */
    border-radius: 15px;                      /* Скругление углов */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);  /* Мягкая объемная тень */
}

/* Нижняя рабочая область: контейнер для предложений */
.l28-t7-workspace {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Выстраиваем строки друг под другом */
    gap: 5px;                                /* Расстояние между строками */
    background: #ffffff;                      /* Белый фон подложки */
    padding: 10px;                            /* Внутренние отступы */
    border-radius: 15px;                      /* Закругление углов */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка */
}

/* Строка с заданием: делим на 2 части (слева неверное предложение, справа инпут) */
.l28-t7-row {
    display: grid;                            /* Используем Grid для четкого разделения на 2 колонки */
    grid-template-columns: 1fr 1fr;           /* Левая и правая колонка ровно по 50% ширины */
    gap: 15px;                                /* Отступ между левой и правой колонкой */
    align-items: center;                      /* Выравнивание по вертикали по центру */
    border-bottom: 1px dashed #e0f0f8;        /* Пунктирный разделитель между строками */
    padding-bottom: 10px;                     /* Отступ от разделителя */
}

/* Текст неверного предложения от Вовочки (слева) */
.l28-t7-wrong {
    font-size: 1.05rem;                       /* Комфортный размер шрифта */
    color: #c0392b;                           /* Красный оттенок для демонстрации ошибки */
    font-weight: bold;                        /* Жирное начертание */
}

/* Поле ввода для правильного предложения (справа) */
.l28-t7-input {
    border: 2px solid #3498db;                /* Синяя рамка */
    border-radius: 8px;                       /* Скругление углов */
    padding: 7px 10px;                        /* Внутренние отступы */
    font-family: 'Comic Sans MS', sans-serif; /* Детский шрифт */
    font-size: 1rem;                          /* Размер шрифта вводимого текста */
    color: #2980b9;                           /* Цвет текста */
    outline: none;                            /* Убираем стандартный обвод браузера */
    width: 100%;                              /* Заполняет всю правую колонку */
    box-sizing: border-box;                   /* Учитываем отступы и рамки в ширине */
    text-align: center;                       /* Текст строго по центру */
    transition: all 0.2s ease;                /* Плавная анимация */
}

/* Эффект при фокусировке на поле ввода */
.l28-t7-input:focus {
    border-color: #2980b9;                    /* Затемнение рамки */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Легкое свечение */
}

/* Класс правильного ответа (зеленое оформление после проверки) */
.l28-t7-input.correct {
    border-color: #27ae60;                    /* Зеленая рамка */
    background-color: #d4edda;                /* Светло-зеленый фон */
    color: #155724;                           /* Темно-зеленый текст */
}

/* Класс ошибочного ответа (красное оформление после проверки) */
.l28-t7-input.wrong {
    border-color: #e74c3c;                    /* Красная рамка */
    background-color: #f8d7da;                /* Розоватый фон */
    color: #721c24;                           /* Темно-красный текст */
}

/* Адаптивность для узких экранов (перевод двух колонок в одну друг под другом) */
@media (max-width: 650px) {
    .l28-t7-row {
        grid-template-columns: 1fr;           /* На мобильных текст и инпут располагаются друг под другом */
        gap: 6px;
    }
}

/* =========================================
   ЗАДАНИЕ 8: СТИЛИ ДЛЯ ПОИСКА 12 ПРЕДМЕТОВ
   ========================================= */

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

/* Изображение раскраски */
.l28-t8-img {
    width: 100%;                              /* Адаптивная ширина */
    max-width: 750px;                         /* Максимальное ограничение размера для аккуратности */
    height: auto;                             /* Сохранение пропорций изображения */
    border-radius: 15px;                      /* Скругление углов картинки */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);  /* Мягкая объемная тень */
    transition: all 0.3s ease;                /* Плавная анимация при смене на цветную картинку */
}

/* Сетка для ввода 12 слов: ровно 3 колонки */
.l28-t8-grid {
    display: grid;                            /* Включаем Grid-сетку */
    grid-template-columns: repeat(3, 1fr);    /* Создаем 3 равных столбца */
    gap: 15px;                                /* Отступы между колонками */
    background: #ffffff;                      /* Белый фон подложки таблицы */
    padding: 20px;                            /* Внутренние отступы со всех сторон */
    border-radius: 15px;                      /* Скругление углов подложки */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка вокруг блока */
}

/* Отдельная колонка (содержит 4 инпута друг под другом) */
.l28-t8-col {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Вертикальное расположение полей */
    gap: 10px;                                /* Расстояние между полями ввода */
}

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

/* Эффект при фокусе на поле ввода */
.l28-t8-input:focus {
    border-color: #2980b9;                    /* Затемнение рамки при активном вводе */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Легкое свечение */
}

/* Класс правильного ответа (зеленое оформление после проверки) */
.l28-t8-input.correct {
    border-color: #27ae60;                    /* Зеленая рамка */
    background-color: #d4edda;                /* Светло-зеленый фон */
    color: #155724;                           /* Темно-зеленый текст */
}

/* Класс ошибочного ответа (красное оформление после проверки) */
.l28-t8-input.wrong {
    border-color: #e74c3c;                    /* Красная рамка */
    background-color: #f8d7da;                /* Розоватый фон */
    color: #721c24;                           /* Темно-красный текст */
}

/* Адаптивность для планшетов и мобильных телефонов */
@media (max-width: 768px) {
    .l28-t8-grid {
        grid-template-columns: repeat(2, 1fr); /* На планшетах делаем 2 колонки */
    }
}
@media (max-width: 480px) {
    .l28-t8-grid {
        grid-template-columns: 1fr;            /* На смартфонах выстраиваем в 1 колонку */
    }
}

/* =========================================
   ЗАДАНИЕ 9: СТИЛИ ДЛЯ ИГРЫ "СЫЩИК"
   ========================================= */

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

/* Большое изображение коллажа */
.l28-t9-collage {
    width: 100%;                              /* Адаптивная ширина */
    max-width: 750px;                         /* Ограничение максимального размера */
    height: auto;                             /* Сохранение пропорций */
    border-radius: 15px;                      /* Скругление углов */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);  /* Мягкая объемная тень */
}

/* Сетка таблицы сыщика: компактные колонки под каждый предмет */
.l28-t9-table {
    display: grid;                            /* Включаем Grid-сетку */
    grid-template-columns: repeat(12, 1fr);   /* 12 колонок для каждого предмета в один ряд */
    gap: 6px;                                 /* Маленький отступ между колонками */
    background: #ffffff;                      /* Белый фон подложки */
    padding: 15px 10px;                       /* Внутренние отступы */
    border-radius: 15px;                      /* Скругление углов */
    border: 2px solid #e0f0f8;                /* Светло-синяя рамка */
    overflow-x: auto;                         /* Прокрутка на случай узких экранов телефонов */
}

/* Колонка отдельного элемента (иконка сверху, поле ввода снизу) */
.l28-t9-col {
    display: flex;                            /* Включаем флексбокс */
    flex-direction: column;                   /* Расположение друг под другом */
    align-items: center;                      /* Центрирование по горизонтали */
    gap: 6px;                                 /* Отступ между иконкой и полем */
}

/* Квадратный контейнер для иконки предмета */
.l28-t9-icon-box {
    width: 100%;                              /* На всю ширину колонки */
    aspect-ratio: 1 / 1;                      /* Квадратная форма ячейки */
    background: #f8fafc;                      /* Нежный светло-серый фон */
    border: 1px solid #cbd5e1;                /* Аккуратная рамка */
    border-radius: 8px;                       /* Скругление углов */
    display: flex;                            /* Флексбокс для центрирования картинки */
    align-items: center;                      
    justify-content: center;
    padding: 3px;
    box-sizing: border-box;
}

/* Картинка иконки внутри блока */
.l28-t9-icon {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;                      /* Без искажения пропорций */
    pointer-events: none;
}

/* Поле ввода цифры (маленькое и аккуратное под иконкой) */
.l28-t9-input {
    border: 2px solid #3498db;                /* Синяя рамка */
    border-radius: 6px;                       /* Скругление углов */
    padding: 4px 2px;                         /* Внутренние отступы */
    font-family: 'Comic Sans MS', sans-serif; /* Детский шрифт */
    font-size: 0.95rem;                       /* Размер текста */
    color: #2980b9;                           /* Цвет цифры */
    outline: none;                            /* Убираем стандартную обводку */
    width: 100%;                              /* На всю ширину колонки */
    box-sizing: border-box;                   /* Учитываем рамки */
    text-align: center;                       /* Цифра строго по центру */
    transition: all 0.2s ease;                /* Плавная анимация */
}

/* Эффект фокуса */
.l28-t9-input:focus {
    border-color: #2980b9;                    
    box-shadow: 0 0 4px rgba(52, 152, 219, 0.3);
}

/* Класс правильного ответа (зеленое оформление) */
.l28-t9-input.correct {
    border-color: #27ae60 !important;
    background-color: #d4edda !important;
    color: #155724 !important;
}

/* Класс ошибочного ответа (красное оформление) */
.l28-t9-input.wrong {
    border-color: #e74c3c !important;
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

/* Адаптивность для планшетов (перевод в 6 колонок) */
@media (max-width: 900px) {
    .l28-t9-table {
        grid-template-columns: repeat(6, 1fr); 
    }
}

/* Адаптивность для телефонов (перевод в 4 колонки) */
@media (max-width: 500px) {
    .l28-t9-table {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Квадратный контейнер для иконки предмета */
.l28-t9-icon-box {
    width: 100%;                              /* Блок занимает всю ширину колонки */
    height: 55px;                             /* Жестко фиксируем высоту контейнера иконки */
    background: #f8fafc;                      /* Нежный светло-серый фон ячейки */
    border: 1px solid #cbd5e1;                /* Аккуратная тонкая рамка */
    border-radius: 8px;                       /* Скругление углов ячейки на 8 пикселей */
    display: flex;                            /* Включаем флексбокс для центрирования */
    align-items: center;                      /* Выравнивание иконки по вертикали по центру */
    justify-content: center;                  /* Выравнивание иконки по горизонтали по центру */
    padding: 4px;                             /* Внутренние отступы внутри блока */
    box-sizing: border-box;                   /* Учитываем рамки и отступы в общих размерах */
}

/* Картинка иконки внутри блока с единой фиксированной высотой */
.l28-t9-icon {
    height: 40px;                             /* Устанавливаем единую фиксированную высоту для всех иконок */
    width: auto;                              /* Ширина подстраивается автоматически с сохранением пропорций */
    max-width: 100%;                          /* Ограничиваем максимальную ширину границами контейнера */
    object-fit: contain;                      /* Защита от искажения пропорций картинки */
    pointer-events: none;                     /* Отключаем события мыши на изображении */
}