/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
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: ЛАСКОВЫЕ МАМОЧКИ (12 КАРТИНОК)
   ======================================== */

.l26-t1-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4 колонки */
    gap: 20px;
    margin-top: 15px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.l26-t1-card {
    background: #ffffff;
    border: 3px solid #bdc3c7;
    border-radius: 15px;
    padding: 10px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: border-color 0.3s;
}

.l26-t1-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    display: block;
    transition: opacity 0.4s ease;
}

/* Скрываем картинку при проверке */
.l26-t1-card.checked .l26-t1-img {
    opacity: 0;
}

/* Показываем подпись вместо картинки */
.l26-t1-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;              /* скрыта по умолчанию */
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #7f8c8d;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    border-radius: 15px;
    padding: 10px;
    margin: 0;
}

/* При проверке – показываем подпись */
.l26-t1-card.checked .l26-t1-label {
    display: flex !important;
}

/* Адаптивность */
@media (max-width: 768px) {
    .l26-t1-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    .l26-t1-label {
        font-size: 1.2rem;
    }
}
@media (max-width: 480px) {
    .l26-t1-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .l26-t1-label {
        font-size: 1rem;
    }
}

/* ========================================
   ЗАДАНИЕ 2: ЧУДО-ПЕЧКА
   ======================================== */

.l26-t2-image-wrapper {
    text-align: center;
    margin: 10px 0 20px;
}

.l26-t2-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.l26-t2-answers {
    background: #f9f9f9;
    border: 2px solid #bdc3c7;
    border-radius: 15px;
    padding: 15px 25px;
    margin: 15px 0 5px;
}

.l26-t2-answers-title {
    text-align: center;
    color: #2c3e50;
    font-size: 1.3rem;
    margin: 0 0 10px 0;
}

.l26-t2-answers-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
    color: #2c3e50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}

.l26-t2-answers-list li {
    padding: 5px 8px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.l26-t2-answers-list li b {
    color: #e67e22;
}

/* Адаптивность */
@media (max-width: 600px) {
    .l26-t2-answers-list {
        grid-template-columns: 1fr;
        font-size: 1rem;
    }
}

/* ========================================
   ЗАДАНИЕ 3: ДАЧИ ДЛЯ ЗВЕРЯТ
   ======================================== */

.l26-t3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 20px;
    margin-top: 15px;
}

.l26-t3-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.l26-t3-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    border: 2px solid #bdc3c7;
    background: #ffffff;
}

.l26-t3-input {
    width: 100%;
    max-width: 200px;
    border: 2px solid #bdc3c7;
    border-radius: 8px;
    padding: 10px 8px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.1rem;
    text-align: center;
    outline: none;
    transition: border-color 0.3s, background-color 0.3s;
    box-sizing: border-box;
}

.l26-t3-input:focus {
    border-color: #3498db;
}

.l26-t3-input.correct {
    border-color: #27ae60;
    background-color: #d4edda;
}

.l26-t3-input.wrong {
    border-color: #e74c3c;
    background-color: #f8d7da;
}

/* Адаптивность */
@media (max-width: 768px) {
    .l26-t3-grid {
        gap: 20px 15px;
    }
}
@media (max-width: 500px) {
    .l26-t3-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .l26-t3-img {
        max-width: 150px;
    }
    .l26-t3-input {
        max-width: 150px;
        font-size: 1rem;
        padding: 8px 6px;
    }
}

/* ========================================
   ЗАДАНИЕ 4: ЗАГАДКИ Ч (3×3 СЕТКА)
   ======================================== */

.l26-t4-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.l26-t4-card {
    background: #ffffff;
    border: 3px solid #bdc3c7;
    border-radius: 15px;
    padding: 10px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: border-color 0.3s;
}

.l26-t4-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    display: block;
    transition: opacity 0.4s ease;
}

/* Скрываем картинку при проверке */
.l26-t4-card.checked .l26-t4-img {
    opacity: 0;
}

/* Показываем подпись (глагол) вместо картинки */
.l26-t4-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;              /* скрыта по умолчанию */
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #7f8c8d;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    border-radius: 15px;
    padding: 10px;
    margin: 0;
}

/* При проверке – показываем подпись */
.l26-t4-card.checked .l26-t4-label {
    display: flex !important;
}

/* Адаптивность */
@media (max-width: 600px) {
    .l26-t4-grid {
        gap: 12px;
        max-width: 400px;
    }
    .l26-t4-label {
        font-size: 1.2rem;
    }
}

/* ========================================
   ЗАДАНИЕ 5: ЗАГАДОЧНЫЕ КАРТИНКИ
   ======================================== */

.l26-t5-image-wrapper {
    text-align: center;
    margin: 10px 0 20px;
}

.l26-t5-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.l26-t5-textarea-wrapper {
    margin: 15px 0 10px;
}

.l26-t5-label {
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 8px;
}

.l26-t5-textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 2px solid #bdc3c7;
    border-radius: 12px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.1rem;
    color: #2c3e50;
    resize: vertical;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.l26-t5-textarea:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52,152,219,0.2);
}

/* ========================================
   ЗАДАНИЕ 6: НА ДАЧЕ (ТЕКСТ И ВОПРОСЫ)
   ======================================== */

.l26-t6-text {
    background: #f9f9f9;
    border: 2px solid #bdc3c7;
    border-radius: 15px;
    padding: 15px 20px;
    margin: 10px 0 20px;
}

.l26-t6-story {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #2c3e50;
}

.l26-t6-story p {
    margin: 5px 0;
}

.l26-t6-questions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.l26-t6-question-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.l26-t6-question {
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
    min-width: 200px;
}

.l26-t6-input {
    flex: 1;
    min-width: 200px;
    border: 2px solid #bdc3c7;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1rem;
    color: #2c3e50;
    outline: none;
    transition: border-color 0.3s, background-color 0.3s;
}

.l26-t6-input:focus {
    border-color: #3498db;
}

.l26-t6-input.correct {
    border-color: #27ae60;
    background-color: #d4edda;
}

.l26-t6-input.wrong {
    border-color: #e74c3c;
    background-color: #f8d7da;
}

/* Адаптивность */
@media (max-width: 600px) {
    .l26-t6-question-row {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }
    .l26-t6-question {
        min-width: auto;
        font-size: 1rem;
    }
    .l26-t6-input {
        min-width: auto;
    }
}

/* ========================================
   ЗАДАНИЕ 7: НАЗОВИ ЛАСКОВО (СЕТКА СЛОВ)
   ======================================== */
/* ========================================
   ЗАДАНИЕ 7: НАЗОВИ ЛАСКОВО (исправленное)
   ======================================== */

.l26-t7-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 15px;
}

.l26-t7-card {
    background: #ffffff;
    border: 2px solid #bdc3c7;
    border-radius: 12px;
    padding: 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
    min-height: 50px;
    text-align: center;
    transition: all 0.3s;
}

/* При проверке меняем цвет и фон (опционально) */
.l26-t7-card.checked {
    background: #f0faff;
    border-color: #27ae60;
    color: #7f8c8d;
}

/* Адаптивность */
@media (max-width: 768px) {
    .l26-t7-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .l26-t7-card {
        font-size: 1rem;
        padding: 6px 4px;
        min-height: 45px;
    }
}
@media (max-width: 500px) {
    .l26-t7-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   ЗАДАНИЕ 8: ПУТАНИЦА
   ======================================== */

.l26-t8-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.l26-t8-item {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 12px 15px;
    border-left: 4px solid #ffd600;
}

.l26-t8-words {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 6px;
    font-weight: bold;
}

.l26-t8-input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #bdc3c7;
    border-radius: 8px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s, background-color 0.3s;
    box-sizing: border-box;
}

.l26-t8-input:focus {
    border-color: #3498db;
}

.l26-t8-answer {
    margin-top: 8px;
    font-size: 1rem;
    color: #7f8c8d;
    background: #ecf0f1;
    padding: 6px 12px;
    border-radius: 6px;
    display: none; /* скрыто по умолчанию, показывается при проверке */
}

/* При проверке показываем правильный ответ */
.l26-t8-item.checked .l26-t8-answer {
    display: block;
}

.l26-t8-input.correct {
    border-color: #27ae60;
    background-color: #d4edda;
}

.l26-t8-input.wrong {
    border-color: #e74c3c;
    background-color: #f8d7da;
}

/* ========================================
   ЗАДАНИЕ 9: ПОДБЕРИ ОБЩЕЕ НАЧАЛО
   ======================================== */

.l26-t9-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 15px;
}

.l26-t9-column {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.l26-t9-col-title {
    text-align: center;
    color: #2c3e50;
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

.l26-t9-words-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c3e50;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.l26-t9-words-list li {
    padding: 6px 10px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #ecf0f1;
    text-align: center;
}

.l26-t9-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.l26-t9-input-wrapper label {
    font-weight: bold;
    font-size: 1rem;
    color: #2c3e50;
}

.l26-t9-input {
    border: 2px solid #bdc3c7;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.2rem;
    text-align: center;
    outline: none;
    transition: border-color 0.3s, background-color 0.3s;
}

.l26-t9-input:focus {
    border-color: #3498db;
}

.l26-t9-input.correct {
    border-color: #27ae60;
    background-color: #d4edda;
}

.l26-t9-input.wrong {
    border-color: #e74c3c;
    background-color: #f8d7da;
}

.l26-t9-result {
    margin-top: 15px;
    padding: 10px;
    background: #ecf0f1;
    border-radius: 8px;
}

.l26-t9-result p {
    margin: 0 0 5px 0;
    font-weight: bold;
    color: #2c3e50;
}

.l26-t9-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: center;
}

.l26-t9-result-list li {
    background: #ffffff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 1rem;
    color: #2c3e50;
    border: 1px solid #bdc3c7;
}

/* Адаптивность */
@media (max-width: 600px) {
    .l26-t9-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}