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

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

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

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

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

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

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

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

/* СТИЛИ ДЛЯ СЕТКИ ЗАДАНИЯ 1 */
.items-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);                      /* Сетка 4 колонки */
    gap: 15px;                                                  /* Расстояние между ячейками */
    margin: 20px 0;                                             /* Отступы сверху и снизу */
}

.grid-item {
    background: #ffffff;                                        /* Белый фон ячейки */
    border: 2px solid #ffd600;                                  /* Тонкая желтая рамка для картинок */
    border-radius: 15px;                                        /* Скругление */
    padding: 10px;                                              /* Внутренний отступ */
    display: flex;                                              /* Центрирование контента */
    justify-content: center;
    align-items: center;
}

.grid-item img {
    max-width: 100%;                                            /* Адаптивность картинки */
    height: auto;
    border-radius: 10px;
}

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

.orange-check-btn:active {
    transform: translateY(3px); /* Эффект нажатия кнопки */
    box-shadow: 0 3px 0 #d35400; /* Уменьшение тени при нажатии */
}
/* ИСПРАВЛЕННЫЙ БЛОК КНОПКИ */
.orange-check-btn:active {
    transform: translateY(3px);                                 /* Эффект нажатия */
    box-shadow: 0 3px 0 #d35400;                                /* Уменьшение тени */
}

/* СТИЛИ ДЛЯ ЗАДАНИЯ 2 */
.syllable-img-box {
    margin-top: 20px;                                           /* Отступ сверху */
    text-align: center;                                         /* Центрирование картинки */
    width: 100%;                                                /* Контейнер на всю ширину карточки */
}

.syllable-img {
    display: block;                                             /* Убираем лишние зазоры */
    max-width: 100%;                                            /* Картинка строго вписывается в блок */
    height: auto;                                               /* Пропорции сохраняются */
    margin: 0 auto;                                             /* Центрирование внутри бокса */
    border: 4px solid #ffd600;                                  /* Жирная желтая рамка */
    border-radius: 20px;                                        /* Скругление углов */
    box-sizing: border-box;                                     /* Рамка входит в 100% ширины */
}

.word-grid {
    display: grid;                                              /* Сетка */
    grid-template-columns: repeat(3, 1fr);                      /* Ровно 3 колонки */
    gap: 20px;                                                  /* Расстояние между полями */
    margin: 30px 0;                                             /* Отступы сетки */
    width: 100%;                                                /* Вписываем в карточку */
}

.word-field {
    width: 100%;                                                /* Поле на всю ширину ячейки */
    padding: 15px 5px;                                          /* Крупные поля для ребенка */
    border: 3px solid #ffd600;                                  /* Желтая рамка */
    border-radius: 15px;                                        /* Скругление */
    font-family: 'Comic Sans MS', sans-serif;                   /* Шрифт урока */
    font-size: 1.4em;                                           /* Крупный шрифт ввода */
    font-weight: bold;                                          /* Жирный текст */
    text-align: center;                                         /* Текст по центру */
    text-transform: uppercase;                                  /* ВСЕГДА ВЕРХНИЙ РЕГИСТР */
    box-sizing: border-box;                                     /* Рамка не раздувает поле */
    background: #ffffff;                                        /* Белый фон */
    outline: none;                                              /* Убираем стандартную обводку */
}

.word-field:focus {
    border-color: #ff7043;                                      /* Оранжевый фокус */
}

.word-field.correct {
    border-color: #27ae60 !important;                           /* Зеленый при успехе */
    background-color: #e8f5e9 !important;
}

.word-field.error {
    border-color: #e74c3c !important;                           /* Красный при ошибке */
    background-color: #ffebee !important;
}

/* ЗАДАНИЕ №3. ИНДИВИДУАЛЬНЫЕ СТИЛИ ДЛЯ ИЗОЛЯЦИИ */

.l15-t3-sentences {
    display: flex;                                              /* Включаем флекс-контейнер для списка */
    flex-direction: column;                                     /* Выстраиваем блоки строго вертикально */
    gap: 12px;                                                  /* Вертикальный зазор между блоками */
    margin-bottom: 25px;                                        /* Отступ снизу до зоны с картинками */
}

.l15-t3-item {
    background: #ffffff;                                        /* Белый фон блока предложения */
    border: 3px solid #ccc;                                     /* Базовая серая рамка */
    border-radius: 15px;                                        /* Скругление углов */
    padding: 15px;                                              /* Внутренние отступы для текста */
    font-size: 1.3em;                                           /* Размер шрифта для чтения */
    transition: all 0.2s ease;                                  /* Плавная анимация всех изменений */
    box-sizing: border-box;                                     /* Учитываем рамки в общей ширине блока */
}

/* ЦВЕТА РАМОК ДЛЯ ЗАДАНИЯ 3 */
.l15-t3-item:nth-child(1) { border-color: #9b59b6; }            /* Фиолетовая рамка */
.l15-t3-item:nth-child(2) { border-color: #95a5a6; }            /* Серая рамка */
.l15-t3-item:nth-child(3) { border-color: #2ecc71; }            /* Зеленая рамка */
.l15-t3-item:nth-child(4) { border-color: #e67e22; }            /* Оранжевая рамка */
.l15-t3-item:nth-child(5) { border-color: #e74c3c; }            /* Красная рамка */

.l15-t3-drop {
    font-weight: bold;                                          /* Жирный шрифт для вставки */
    color: #ff6d00;                                             /* Оранжевый акцентный цвет */
    border-bottom: 2px dashed #ff6d00;                          /* Пунктир под местом вставки */
}

.l15-t3-item.drag-over {
    background-color: #fff9c4 !important;                       /* Желтый фон при наведении картинки */
}

.l15-t3-drag-zone {
    display: flex;                                              /* Включаем флекс для ряда картинок */
    justify-content: center;                                    /* Центрируем картинки горизонтально */
    align-items: center;                                        /* Центрируем картинки вертикально */
    flex-wrap: wrap;                                            /* Разрешаем перенос, если не влезают */
    gap: 10px;                                                  /* Расстояние между картинками */
    padding: 15px;                                              /* Внутренние отступы синей зоны */
    background: #f0faff;                                        /* Голубой фон зоны хранения */
    border: 3px dashed #ffd600;                                 /* Желтый пунктир зоны */
    border-radius: 20px;                                        /* Скругление углов зоны */
    margin-bottom: 20px;                                        /* Отступ до кнопки */
    box-sizing: border-box;                                     /* Расчет размеров с учетом рамок */
}

.l15-t3-pic {
    width: 135px !important;                                    /* ЧЁТКАЯ ФИКСАЦИЯ ШИРИНЫ 100PX */
    height: 135px !important;                                   /* ЧЁТКАЯ ФИКСАЦИЯ ВЫСОТЫ 100PX */
    cursor: grab;                                               /* Курсор захвата */
    object-fit: contain;                                        /* Вписываем картинку без искажений */
    background: #fff;                                           /* Белый фон под картинкой */
    border-radius: 10px;                                        /* Скругление углов картинки */
    border: 1px solid #ddd;                                     /* Тонкая рамка вокруг картинки */
    box-sizing: border-box;                                     /* Внутренние рамки не раздувают 100px */
}

.l15-t3-pic:active {
    cursor: grabbing;                                           /* Курсор кулака при переносе */
}

/* ЗАДАНИЕ №4. СОСТАВЬ СЛОВА (ИЗОЛИРОВАННЫЕ СТИЛИ) */

.l15-t4-container {
    display: flex;                                              /* Флекс для вертикального выравнивания рядов */
    flex-direction: column;                                     /* Ряды идут один под другим */
    gap: 15px;                                                  /* Расстояние между строчками задания */
    max-width: 500px;                                           /* Ограничиваем ширину контейнера для центровки */
    margin: 0 auto 20px;                                        /* Центрируем блок на странице */
}

.l15-t4-row {
    display: flex;                                              /* Флекс для строки: буквы и инпут */
    align-items: center;                                        /* Выравниваем буквы и поле ввода по центру */
    justify-content: space-between;                             /* Раздвигаем буквы влево, поле вправо */
}

.l15-t4-letters {
    font-size: 1.2em;                                           /* Размер шрифта для набора букв */
    font-weight: bold;                                          /* Жирный шрифт для акцента */
    color: #2c3e50;                                             /* Цвет текста — темно-серый */
    flex: 1;                                                    /* Буквы занимают всё свободное место слева */
}

.l15-t4-input {
    width: 180px;                                               /* Фиксированная ширина поля ввода */
    padding: 8px;                                               /* Внутренний отступ для текста */
    border: 2px solid #ffd600;                                  /* Желтая рамка в стиле урока */
    border-radius: 10px;                                        /* Скругление углов поля */
    font-family: 'Comic Sans MS', sans-serif;                   /* Основной шрифт урока */
    font-size: 1.1em;                                           /* Оптимальный размер вводимого текста */
    text-transform: uppercase;                                  /* Автоматический перевод текста в верхний регистр */
    text-align: center;                                         /* Текст вводится по центру */
    background: #fff;                                           /* Белый фон поля */
    box-sizing: border-box;                                     /* Границы не увеличивают размер поля */
    outline: none;                                              /* Убираем стандартную синюю рамку браузера */
}

.l15-t4-input:focus {
    border-color: #ff7043;                                      /* Смена цвета на оранжевый при клике */
    box-shadow: 0 0 5px rgba(255, 112, 67, 0.4);                /* Легкая тень при активном вводе */
}

/* СТИЛИ ПРОВЕРКИ (ИНДИВИДУАЛЬНО ДЛЯ T4) */
.l15-t4-input.correct {
    border-color: #27ae60 !important;                           /* Зеленая рамка при успехе */
    background-color: #e8f5e9;                                  /* Светло-зеленый фон */
}

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

/* ЗАДАНИЕ №5. СОСТАВЬ СЛОВО (ПОЛНАЯ ИЗОЛЯЦИЯ И ПОСТРОЧНЫЕ КОММЕНТАРИИ) */

.l15-t5-main-container {
    display: flex;                                              /* Включаем гибкий контейнер для всех рядов задания */
    flex-direction: column;                                     /* Располагаем блоки слов строго друг под другом */
    gap: 25px;                                                  /* Устанавливаем вертикальный отступ между группами слов */
    margin-bottom: 20px;                                        /* Задаем внешний отступ снизу до кнопки проверки */
}

.l15-t5-row {
    display: flex;                                              /* Включаем флекс для позиционирования элементов внутри ряда */
    flex-direction: column;                                     /* Картинки и поля ввода выстраиваем в колонку внутри ряда */
    align-items: center;                                        /* Центрируем содержимое ряда по горизонтали */
    gap: 10px;                                                  /* Устанавливаем зазор между картинками и ячейками ввода */
    padding: 12px;                                              /* Внутренний отступ от края рамки до контента */
    background: #ffffff;                                        /* Устанавливаем чистый белый фон для блока */
    border: 2px solid #ffd600;                                  /* Задаем желтую рамку в 2 пикселя (стиль урока) */
    border-radius: 20px;                                        /* Скругляем углы блока для детского интерфейса */
    box-sizing: border-box;                                     /* Гарантируем, что рамка не расширяет заданную ширину */
}

.l15-t5-images {
    display: flex;                                              /* Включаем флекс для горизонтального ряда картинок */
    justify-content: center;                                    /* Центрируем картинки-подсказки по горизонтали */
    gap: 5px;                                                   /* Устанавливаем расстояние между картинками */
    flex-wrap: wrap;                                            /* Позволяем картинкам переноситься, если не влезают в ряд */
}

.l15-t5-images img {
    width: 75px;                                                /* Фиксируем ширину каждой картинки-подсказки */
    height: 75px;                                               /* Фиксируем высоту каждой картинки-подсказки */
    object-fit: contain;                                        /* Вписываем изображение в квадрат без искажения пропорций */
    border: 1px solid #eee;                                     /* Тонкая серая рамка для отделения картинки от фона */
    border-radius: 8px;                                         /* Легкое скругление углов изображения */
    padding: 3px;                                               /* Внутренний зазор между картинкой и её рамкой */
    background: #fff;                                           /* Белый фон под картинкой (на случай прозрачности) */
}

.l15-t5-inputs {
    display: flex;                                              /* Включаем флекс для ряда ячеек ввода букв */
    gap: 4px;                                                   /* Устанавливаем минимальный зазор между буквами */
}

.l15-t5-letter {
    width: 83px;                                                /* Устанавливаем фиксированную ширину ячейки (клеточки) */
    height: 75px;                                               /* Устанавливаем фиксированную высоту ячейки (клеточки) */
    border: 2px solid #ffd600;                                  /* Желтая рамка для каждой отдельной буквы */
    border-radius: 6px;                                         /* Слегка скругляем углы ячейки */
    text-align: center;                                         /* Центрируем вводимую букву внутри ячейки */
    font-size: 1.5em;                                           /* Устанавливаем крупный шрифт для разборчивости */
    font-weight: bold;                                          /* Делаем начертание буквы жирным */
    text-transform: uppercase;                                  /* Автоматически переводим ввод в верхний регистр */
    font-family: 'Comic Sans MS', sans-serif;                   /* Используем основной шрифт текущего урока */
    outline: none;                                              /* Убираем стандартную синюю обводку браузера при фокусе */
    background: #fff;                                           /* Белый фон внутри ячейки */
    box-sizing: border-box;                                     /* Параметры рамки включены в общие размеры 38x38 */
    transition: all 0.2s;                                       /* Плавная анимация при изменении состояния (фокус/проверка) */
}

.l15-t5-letter:focus {
    border-color: #ff7043;                                      /* Оранжевая рамка при активации ячейки (фокусе) */
    background-color: #fffde7;                                  /* Легкий желтоватый фон для активной ячейки */
}

/* СТИЛИ РЕЗУЛЬТАТОВ ПРОВЕРКИ */
.l15-t5-letter.correct {
    border-color: #27ae60 !important;                           /* Принудительный зеленый цвет рамки при успехе */
    background-color: #e8f5e9 !important;                       /* Принудительный светло-зеленый фон при успехе */
}

.l15-t5-letter.error {
    border-color: #e74c3c !important;                           /* Принудительный красный цвет рамки при ошибке */
    background-color: #ffebee !important;                       /* Принудительный светло-красный фон при ошибке */
}


/* ЗАДАНИЕ №6. КТО ЕСТЬ КТО (ИЗОЛЯЦИЯ И ПОСТРОЧНЫЕ КОММЕНТАРИИ) */

.l15-t6-wrapper {
    display: flex;                                              /* Создаем гибкий контейнер для всего задания */
    flex-direction: column;                                     /* Располагаем блоки (мой, склад, моя) вертикально */
    gap: 10px;                                                  /* Устанавливаем отступы между основными блоками */
    align-items: center;                                        /* Центрируем блоки по горизонтальной оси */
}

.l15-t6-zone {
    width: 100%;                                                /* Зоны занимают всю доступную ширину карточки */
    min-height: 140px;                                          /* Задаем минимальную высоту для пустых зон */
    border-radius: 20px;                                        /* Скругляем углы для соответствия стилю урока */
    display: flex;                                              /* Включаем флекс для внутренних элементов зоны */
    flex-direction: column;                                     /* Заголовок и область сброса идут друг под другом */
    overflow: hidden;                                           /* Обрезаем контент, выходящий за границы зоны */
}

.l15-t6-male {
    background-color: #bbdefb;                                  /* Устанавливаем светло-голубой фон для мужского рода */
    border: 3px solid #1e88e5;                                  /* Синяя рамка для зоны "МОЙ" */
}

.l15-t6-female {
    background-color: #ffcdd2;                                  /* Устанавливаем светло-розовый фон для женского рода */
    border: 3px solid #e53935;                                  /* Красная рамка для зоны "МОЯ" */
}

.l15-t6-zone-label {
    text-align: center;                                         /* Центрируем текст "МОЙ"/"МОЯ" */
    font-weight: bold;                                          /* Делаем текст заголовка жирным */
    font-size: 1.4em;                                           /* Увеличиваем размер шрифта для читаемости */
    padding: 5px;                                               /* Добавляем внутренний отступ для заголовка */
    color: #fff;                                                /* Белый цвет текста заголовка */
    text-transform: uppercase;                                  /* Приводим заголовок к верхнему регистру */
    background: rgba(0,0,0,0.1);                                /* Легкое затемнение фона под текстом заголовка */
}

.l15-t6-drop-area {
    flex-grow: 1;                                               /* Область сброса занимает все оставшееся место в зоне */
    padding: 10px;                                              /* Отступ внутри области, чтобы картинки не жались к краям */
    display: flex;                                              /* Включаем флекс для выстраивания картинок в ряд */
    flex-wrap: wrap;                                            /* Позволяем картинкам переноситься на новые строки */
    gap: 10px;                                                  /* Расстояние между картинками внутри зоны */
    min-height: 100px;                                           /* Высота, чтобы зона не схлопывалась без картинок */
}

.l15-t6-items-source {
    display: flex;                                              /* Сетка для исходных картинок (средний блок) */
    flex-wrap: wrap;                                            /* Перенос картинок на следующую строку */
    justify-content: center;                                    /* Центрируем склад картинок по горизонтали */
    gap: 12px;                                                  /* Расстояние между картинками на складе */
    padding: 15px;                                              /* Внутренний отступ складского блока */
    background: #fff;                                           /* Чисто белый фон для отделения от зон */
    border: 2px dashed #ffd600;                                 /* Пунктирная желтая рамка (стиль "вырежи и приклей") */
    border-radius: 15px;                                        /* Скругление углов складского блока */
}

.l15-t6-drag-item {
    width: 120px;                                                /* Фиксируем ширину перетаскиваемой картинки */
    height: 120px;                                               /* Фиксируем высоту перетаскиваемой картинки */
    object-fit: contain;                                        /* Сохраняем пропорции при подгонке под размер */
    cursor: grab;                                               /* Меняем курсор на "руку" для обозначения возможности тянуть */
    background: #fff;                                           /* Белый фон под картинкой */
    border: 1px solid #ddd;                                     /* Тонкая рамка вокруг каждой картинки */
    border-radius: 10px;                                        /* Скругление углов рамки картинки */
    padding: 5px;                                               /* Внутренний отступ картинки от рамки */
    transition: transform 0.2s, opacity 0.2s;                   /* Плавная анимация при наведении и переносе */
}

.l15-t6-drag-item:active {
    cursor: grabbing;                                           /* Меняем курсор на "захват" при нажатии */
}

.l15-t6-drag-item.dragged-out {
    opacity: 0.3;                                               /* Делаем картинку бледной на складе после переноса */
    filter: grayscale(1);                                       /* Обесцвечиваем картинку для визуального контроля */
    pointer-events: none;                                       /* Запрещаем повторное взаимодействие с бледной копией */
}

/* ЗАДАНИЕ №7. КРОССВОРД (ИЗОЛЯЦИЯ И ПОСТРОЧНЫЕ КОММЕНТАРИИ) */

.l15-t7-container {
    display: flex;                                              /* Включаем флекс для расположения сетки и подсказки */
    flex-direction: column;                                     /* Располагаем элементы вертикально */
    gap: 10px;                                                  /* Устанавливаем зазор между кроссвордом и картинкой */
    align-items: center;                                        /* Центрируем содержимое по горизонтали */
}

.l15-t7-grid {
    display: flex;                                              /* Включаем флекс для контейнера строк кроссворда */
    flex-direction: column;                                     /* Выстраиваем строки строго друг под другом */
    gap: 8px;                                                   /* Устанавливаем вертикальный отступ между словами */
    width: 100%;                                                /* Контейнер занимает всю ширину родителя */
}

.l15-t7-row {
    display: flex;                                              /* Включаем флекс для элементов внутри одной строки */
    align-items: center;                                        /* Выравниваем номер и ячейки по центру строки */
    gap: 15px;                                                  /* Отступ между номером задания и ячейками ввода */
}

.l15-t7-number {
    width: 50px;                                                /* Фиксируем ширину кружка с номером */
    height: 50px;                                               /* Фиксируем высоту кружка с номером */
    border: 2px solid #1e88e5;                                  /* Синяя рамка для кружка с номером */
    border-radius: 50%;                                         /* Делаем блок идеально круглым */
    display: flex;                                              /* Включаем флекс для центровки цифры */
    justify-content: center;                                    /* Центрируем цифру по горизонтали */
    align-items: center;                                        /* Центрируем цифру по вертикали */
    font-weight: bold;                                          /* Делаем номер жирным */
    color: #1e88e5;                                             /* Цвет текста номера совпадает с рамкой */
    background: #e3f2fd;                                        /* Светло-голубой фон для номера */
    flex-shrink: 0;                                             /* Запрещаем кружку сжиматься при узком экране */
}

.l15-t7-cells {
    display: flex;                                              /* Включаем флекс для горизонтального ряда ячеек букв */
    gap: 4px;                                                   /* Устанавливаем минимальный зазор между ячейками */
}

.l15-t7-letter {
    width: 65px;                                                /* Ширина одной ячейки (клеточки кроссворда) */
    height: 55px;                                               /* Высота одной ячейки (клеточки кроссворда) */
   /* border: 2px solid #ffd600;                                  /* Желтая рамка каждой ячейки */
    border-radius: 4px;                                         /* Легкое скругление углов ячейки */
    text-align: center;                                         /* Текст вводится строго по центру ячейки */
    font-size: 1.3em;                                           /* Размер шрифта для удобного чтения */
    font-weight: bold;                                          /* Жирное начертание вводимых букв */
    text-transform: uppercase;                                  /* Автоматическое преобразование в заглавные буквы */
    font-family: 'Comic Sans MS', sans-serif;                   /* Шрифт урока */
    outline: none;                                              /* Убираем стандартное выделение браузера */
    box-sizing: border-box;                                     /* Включаем рамку в общие размеры ячейки */
    background: #fff;                                           /* Белый фон ячейки */
}

.l15-t7-letter:focus {
    border-color: #ff7043;                                      /* Оранжевая рамка при активации ячейки */
    background-color: #fffde7;                                  /* Подсветка фона текущей ячейки */
}

.l15-t7-hint-box {
    width: 100%;                                                /* Бокс подсказки занимает всю ширину */
    text-align: center;                                         /* Центрируем картинку-подсказку */
}

.l15-t7-hint-img {
    max-width: 100%;                                            /* Адаптивность: картинка не шире экрана */
    height: auto;                                               /* Сохранение пропорций */
    border-radius: 15px;                                        /* Скругление углов картинки */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);                     /* Легкая тень для выделения картинки */
}

/* СОСТОЯНИЯ ПРОВЕРКИ */
.l15-t7-letter.correct {
    border-color: #27ae60 !important;                           /* Зеленая рамка при верной букве */
    background-color: #e8f5e9 !important;                       /* Зеленый фон при успехе */
}

.l15-t7-letter.error {
    border-color: #e74c3c !important;                           /* Красная рамка при ошибке */
    background-color: #ffebee !important;                       /* Красный фон при ошибке */
}

/* ЗАДАНИЕ №8. СЫЩИК (ИЗОЛЯЦИЯ И ПОСТРОЧНЫЕ КОММЕНТАРИИ) */

.l15-t8-container {
    display: flex;                                              /* Создаем гибкий контейнер для задания */
    flex-direction: column;                                     /* Располагаем элементы вертикально */
    gap: 20px;                                                  /* Расстояние между игровым полем и счетчиками */
    align-items: center;                                        /* Центрируем содержимое */
}

.l15-t8-puzzle-box {
    width: 100%;                                                /* Бокс занимает всю ширину карточки */
    border: 4px solid #fff;                                     /* Белая рамка для выделения поля */
    border-radius: 20px;                                        /* Скругление углов поля поиска */
    overflow: hidden;                                           /* Скрываем всё, что выходит за рамки */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);                     /* Тень для объема картинки-пазла */
}

.l15-t8-main-img {
    display: block;                                             /* Убираем лишние отступы снизу картинки */
    width: 100%;                                                /* Растягиваем картинку на всю ширину */
    height: auto;                                               /* Сохраняем пропорции изображения */
}

.l15-t8-counter-grid {
    display: grid;                                              /* Сетка для миниатюр и полей ввода */
    grid-template-columns: repeat(5, 1fr);                      /* 5 колонок для компактного размещения 10 элементов */
    gap: 10px;                                                  /* Отступы между ячейками счетчиков */
    width: 100%;                                                /* Сетка по всей ширине */
}

.l15-t8-counter-item {
    display: flex;                                              /* Флекс-контейнер внутри каждой ячейки */
    flex-direction: column;                                     /* Картинка сверху, поле ввода под ней */
    align-items: center;                                        /* Центрируем элементы внутри ячейки */
    background: #fff;                                           /* Белый фон подложки для каждой иконки */
    padding: 8px;                                               /* Внутренний отступ ячейки */
    border-radius: 12px;                                        /* Скругление углов ячейки */
    border: 2px solid #ffd600;                                  /* Желтая рамка под стиль урока */
}

.l15-t8-counter-item img {
    width: 65px;                                                /* Фиксированная ширина миниатюры */
    height: 65px;                                               /* Фиксированная высота миниатюры */
    object-fit: contain;                                        /* Вписываем картинку без обрезки */
    margin-bottom: 5px;                                         /* Отступ между картинкой и инпутом */
}

.l15-t8-input {
    width: 100%;                                                /* Поле ввода занимает всю ширину ячейки */
    border: 1px solid #ccc;                                     /* Тонкая рамка для поля ввода */
    border-radius: 5px;                                         /* Скругление углов инпута */
    text-align: center;                                         /* Центрируем вводимое число */
    font-weight: bold;                                          /* Жирный шрифт для цифр */
    font-family: 'Comic Sans MS', sans-serif;                   /* Шрифт урока */
    outline: none;                                              /* Убираем стандартную обводку */
}

.l15-t8-input:focus {
    border-color: #ff7043;                                      /* Оранжевый акцент при вводе */
}

/* СТИЛИ ПРОВЕРКИ */
.l15-t8-counter-item.correct {
    background-color: #e8f5e9;                                  /* Светло-зеленый фон при успехе */
    border-color: #27ae60;                                      /* Зеленая рамка при успехе */
}

.l15-t8-counter-item.error {
    background-color: #ffebee;                                  /* Светло-красный фон при ошибке */
    border-color: #e74c3c;                                      /* Красная рамка при ошибке */
}