/* Подключаем шрифт */
@font-face {
    font-family: 'SourceSans3'; /* Даем корректное имя шрифту */
    src: url('../assets/fonts/SourceSans3-Semibold.woff2') format('woff2'),
         url('../assets/fonts/SourceSans3-Semibold.woff') format('woff');
    font-weight: 600; /* Semibold обычно соответствует 600 */
    font-style: normal;
    font-display: swap; /* Используем swap для улучшения загрузки */
}

/* Подключаем шрифт Bold для .centered-text-tasks */
@font-face {
    font-family: 'SourceSans3'; /* Используем то же имя, но с другим весом */
    src: url('../assets/fonts/SourceSans3-Bold.woff2') format('woff2'),
         url('../assets/fonts/SourceSans3-Bold.woff') format('woff');
    font-weight: 700; /* Bold обычно соответствует 700 */
    font-style: normal;
    font-display: swap; /* Используем swap для улучшения загрузки */
}

/* Стили для страницы tasks */
.tasks-page {
    font-family: 'SourceSans3', sans-serif; /* Основной шрифт */
    font-weight: 600; /* Явно указываем Semibold */
    background-color: #241c3a; /* Тёмный фон страницы */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы */
    /* НОВЫЙ БЛОК: Убираем фиксированную высоту 100vh, чтобы body подстраивался под контент */
    /* height: 100vh; */ 
    display: flex; /* НОВЫЙ БЛОК: Добавляем flex для центрирования .vertical-wrapper-tasks, если он меньше экрана */
    flex-direction: column; /* НОВЫЙ БЛОК */
    align-items: center; /* НОВЫЙ БЛОК */
    width: 100%; /* НОВЫЙ БЛОК: Гарантируем, что body занимает всю ширину */
}

/* Основной контейнер */
.vertical-wrapper-tasks {
    display: flex; /* Используем flex-контейнер */
    flex-direction: column; /* Элементы располагаются вертикально */
    align-items: center; /* Центрируем элементы по горизонтали */
    justify-content: flex-start; /* Элементы располагаются сверху */
    /* НОВЫЙ БЛОК: Убираем height: 100vh и position: fixed. Добавляем min-height и flex-grow */
    /* height: 100vh; */
    min-height: calc(100vh - var(--menu-height)); /* НОВЫЙ БЛОК: Минимальная высота за вычетом меню, если оно есть. Если меню нет, можно просто 100vh */
    width: 100%; /* НОВЫЙ БЛОК: Занимает всю доступную ширину */
    box-sizing: border-box; /* Включаем padding и border в размеры */
    position: relative; /* Относительное позиционирование */
    z-index: 1000; /* Приоритет отображения над другими элементами */
    padding-top: 40px; /* здесь регулируйте, насколько опустить блок вниз */
    padding-left: 10px; /* Отступ слева */
    padding-right: 10px; /* Отступ справа */
    padding-bottom: calc(var(--menu-height) + 20px); /* НОВЫЙ БЛОК: Отступ снизу, чтобы контент не перекрывался меню + небольшой запас */
    /* overflow-y: auto; */ /* НОВЫЙ БЛОК: Убираем прокрутку отсюда, она будет на .tasks-container */
    /* position: fixed; */ /* НОВЫЙ БЛОК: Убираем fixed */
    /* top: 0; */
    /* left: 0; */
}

/* Контейнер всей страницы (внутри .vertical-wrapper-tasks) */
#tasks-page {
    width: 92%; /* Уменьшаем отступы слева/справа */
    max-width: 600px; /* Ограничиваем максимальную ширину */
    margin: 0 auto; /* Центрируем по горизонтали */
    position: relative; /* Относительное позиционирование */
    /* top: 3vh; */ /* НОВЫЙ БЛОК: Удаляем смещение top, так как vertical-wrapper-tasks уже имеет padding-top */
    padding-top: 20px; /* Отступ сверху для отделения от main-separator */
    padding-bottom: 30px; /* Добавляем отступ снизу для тени (можно уменьшить, если padding-bottom у vertical-wrapper-tasks достаточен) */
    display: flex; /* НОВЫЙ БЛОК: Используем flex для управления высотой дочерних элементов */
    flex-direction: column; /* НОВЫЙ БЛОК */
    flex-grow: 1; /* НОВЫЙ БЛОК: Позволяет этому блоку занимать доступное пространство в .vertical-wrapper-tasks */
}

/* Основной текст */
.centered-text-tasks {
    font-family: 'SourceSans3', sans-serif; /* Явно указываем шрифт */
    font-weight: 700; /* Bold для этого элемента */
    font-size: 28px; /* Уменьшенный размер шрифта */
    background: linear-gradient(to right, #ffc74e 0%, #fff 100%); /* Градиентная заливка текста */
    -webkit-background-clip: text; /* Обрезка текста по градиенту (для WebKit) */
    background-clip: text; /* Обрезка текста по градиенту */
    -webkit-text-fill-color: transparent; /* Делаем текст прозрачным */
    filter: drop-shadow(1px 1px 3px rgba(0, 20, 0, 0.5)); /* Добавляем тень к тексту */
    text-align: center; /* Выравнивание текста по центру */
    margin: 0 auto 10px auto; /* Отступы сверху и снизу */
    line-height: 1.2; /* Уменьшаем межстрочное расстояние */
    flex-shrink: 0; /* НОВЫЙ БЛОК: Предотвращаем сжатие этого элемента, если контент в .tasks-container большой */
}

/* Главный разделитель (между основным текстом и блоком задач) */
.main-separator {
    height: 2px;  /* Увеличиваем толщину до 4px */
    width: 100%;
    background: linear-gradient( /* Делаем светлее */
        to right,
        rgba(107, 107, 107, 0) 0%,  /* Более светлый и прозрачный зеленый */
        #424242 20%,            /* Более светлый зеленый */
        #7a7a7a 50%,            /* Более светлый зеленый */
        #5f5f5f 80%,            /* Более светлый зеленый */
        rgba(44, 94, 70, 0) 100%  /* Более светлый и прозрачный зеленый */
    );
    margin: 0 auto; /* Центрируем */
    margin-bottom: 15px; /* Добавляем нижний отступ */
    flex-shrink: 0; /* НОВЫЙ БЛОК: Предотвращаем сжатие */
}

/* Контейнер для задач и подложки */
.tasks-container {
    position: relative; /* Создаем контекст наложения */
    width: 100%;
    padding: 15px 10px 30px 10px; /* Увеличиваем нижний отступ для тени */
    box-sizing: border-box; /* Чтобы padding не увеличивал ширину */
    overflow-y: auto; /* НОВЫЙ БЛОК: Прокрутка будет здесь, если контент не помещается */
    flex-grow: 1; /* НОВЫЙ БЛОК: Позволяет этому контейнеру растягиваться и занимать доступное место */
    /* max-height вычисляется относительно родителя, который теперь flex-item */
    /* Для примера, если tasks-page имеет отступы и другие элементы, нужно это учесть */
    /* Если tasks-container должен занимать всё оставшееся место в #tasks-page: */
    max-height: 100%; /* НОВЫЙ БЛОК: Занимает всю доступную высоту внутри #tasks-page (которая flex-column) */
}

/* Заголовок Tasks: */
.tasks-title {
    font-family: 'SourceSans3', sans-serif; /* Явно указываем шрифт */
    font-weight: 600; /* Semibold */
    color: rgb(252, 211, 101); /* Желтоватый цвет */
    font-size: 18px; /* Размер шрифта */
    margin: 0 0 20px 0; /* Отступ снизу *внутри* контейнера */
    text-align: left; /* Выравнивание текста влево */
    z-index: 3; /* Чтобы текст был поверх подложки */
    position: relative; /* Чтобы работало z-index */
    filter: drop-shadow(1px 1px 3px rgba(0, 20, 0, 0.3)); /* Добавляем тень к тексту */
    flex-shrink: 0; /* НОВЫЙ БЛОК: Предотвращаем сжатие */
}

/* Полупрозрачная подложка для заданий */
.tasks-background {
    position: absolute; /* Абсолютное позиционирование *внутри* контейнера */
    top: 0;
    left: 0;
    width: 100%;
    /* height: 95%; */ /* НОВЫЙ БЛОК: Высота подложки теперь 100%, чтобы покрыть всю область .tasks-container */
    height: 100%; 
    z-index: 1; /* Устанавливаем ниже задач и заголовка */
    border-radius: 20px;
    background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(102, 102, 102, 0) 100%);
    
    /* НОВЫЙ БЛОК: Замена box-shadow на filter: drop-shadow.
       Это решает проблему с появлением "чёрного уголка" внизу.
       В отличие от box-shadow, который создаёт тень от всей прямоугольной рамки элемента,
       filter: drop-shadow создаёт тень от фактического видимого содержимого (включая прозрачность градиента),
       что позволяет тени плавно исчезать вместе с фоном. */
    /* box-shadow: 10px 1px 20px rgba(0, 0, 0, 0.3); */ /* Старая тень, вызывающая проблему */
    filter: drop-shadow(10px 1px 20px rgba(0, 0, 0, 0.3)); /* Новая "умная" тень */
}

/* Разделительная линия (между задачами) */
.decorative-line {
    height: 1px; /* Высота линии */
    width: 100%; /* Линия занимает всю ширину */
    margin: 20px 0;  /* Отступы *внутри* контейнера */
    background: linear-gradient( /* Градиентная заливка с прозрачными краями */
        to right,
        rgba(44, 94, 70, 0) 0%,        /* Полностью прозрачный */
        rgba(85, 85, 85, 0.5) 20%,       /* Полупрозрачный */
        rgba(44, 94, 70, 0.5) 80%,       /* Полупрозрачный */
        rgba(44, 94, 70, 0) 100%       /* Полностью прозрачный */
    );
    z-index: 3; /* Чтобы линии были поверх подложки */
    position: relative; /* Чтобы работало z-index */
}

/* Одна строка задачи (иконка + текст из двух строк + кнопка) */
.task-row {
    display: flex; /* Используем flex-контейнер */
    align-items: center; /* Выравниваем элементы по центру вертикально */
    justify-content: flex-start; /* Выравнивание элементов слева */
    margin-bottom: 20px; /* Отступ между задачами */
    position: relative; /* Относительное позиционирование */
    z-index: 2;         /* Строки задач поверх подложки */
}

/* Иконка */
.task-icon {
    width: 34px; /* Ширина контейнера */
    height: 34px; /* Высота контейнера */
    border-radius: 5px; /* Округляем углы */
    margin-right: 12px; /* Отступ справа */
    display: flex; /* Центрируем картинку */
    align-items: center; /* Выравниваем по вертикали */
    justify-content: center; /* Выравниваем по горизонтали */
    overflow: hidden; /* Обрезаем изображение, если оно больше контейнера */
    box-shadow: 0px 2px 4px rgba(0, 12, 1, 0.3); /* Тень */
    z-index: 1000; /* Приоритет отображения над другими элементами */
}

/* Изображение для иконки */
.task-icon img {
    width: 100%; /* Уменьшаем изображение до размеров контейнера */
    height: 100%; /* Уменьшаем изображение до размеров контейнера */
    object-fit: cover; /* Подгоняем изображение, сохраняя пропорции */
    border-radius: 5px; /* Округляем углы у самой картинки */
}

/* Блок для двухстрочного текста */
.task-text-wrapper {
    display: flex; /* Используем flex-контейнер */
    flex-direction: column; /* Элементы располагаются в колонку */
    justify-content: space-between; /* Равномерное распределение элементов */
    margin-right: auto; /* Чтобы кнопка прижалась к правому краю */
    line-height: 1.1; /* Уменьшаем межстрочное расстояние */
}

/* Первая строка — название задания */
.task-text {
    font-family: 'SourceSans3', sans-serif; /* Явно указываем шрифт */
    font-weight: 600; /* Semibold — исправлено с 500 */
    color: rgb(220, 220, 220); /* Зеленоватый цвет текста */
    font-size: 16px; /* Размер шрифта */
    white-space: nowrap; /* Запрещаем перенос текста */
    overflow: hidden; /* Обрезаем текст, если он выходит за границы */
    text-overflow: ellipsis; /* Добавляем троеточие, если текст не помещается */
}

/* Вторая строка — +0,05 SOL */
.task-reward {
    font-family: 'SourceSans3', sans-serif; /* Явно указываем шрифт */
    font-weight: 600; /* Semibold */
    color: rgb(133, 133, 133); /* Светло-серый цвет текста */
    font-size: 12px; /* Размер шрифта */
    white-space: nowrap; /* Запрещаем перенос текста */
    position: relative; /* Относительное позиционирование */
    top: 5px; /* Опускаем текст на 5 пикселей */
}

/* Общие стили для всех кнопок */
.task-button {
    font-family: 'SourceSans3', sans-serif; /* Основной шрифт */
    font-weight: 400; /* Semibold — исправлено с 200 */
    color: #fff; /* Цвет текста */
    border: none; /* Убираем границу */
    padding: 7px 14px; /* Внутренние отступы */
    border-radius: 14px; /* Округляем углы кнопки */
    cursor: pointer; /* Указываем, что элемент кликабельный */
    font-size: 14px; /* Размер шрифта */
    transition: transform 0.2s ease, opacity 0.3s ease;  /* Плавная трансформация и прозрачность */
    outline: none; /* Убираем обводку */
    z-index: 2000; /* Высокий z-index для всех кнопок */
    display: flex; /* Используем flexbox для центрирования */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    position: relative; /* Относительное позиционирование */
    letter-spacing: 0.5px; /* Увеличиваем расстояние между символами */
    box-shadow: 0px 2px 4px rgba(0, 26, 2, 0.3); /* Тень */
}

/* Кнопка Go */
.task-button.go {
    background-color: #f8a100; /* Цвет фона кнопки Go */
    height: 30px; /* Пример: фиксированная высота */
}

/* Сдвиг текста вниз на 2 пикселя (для Go) */
.task-button.go span {
    position: relative;
    display: inline-block; /* Чтобы можно было применить top */
}

/* Изменение цвета при наведении на Go */
.task-button.go:hover {
    background-color: #ca8402; /* Темно-оранжевый цвет при наведении */
}

/* Анимация при нажатии на Go */
.task-button.go:active {
    transform: scale(0.84); /* Уменьшаем кнопку при нажатии */
}

/* Стили для оранжевой кнопки Claim (после 10 секунд) */
.task-button.claim {
    background-color: #f88d00;  /* Оранжевый цвет для Claim */
    width: 55px;  /* Фиксированная ширина кнопки */
    height: 30px; /* Пример: фиксированная высота */
}

/* Сдвиг текста вниз на 2 пикселя (для Claim) */
.task-button.claim span {
    position: relative;
    display: inline-block;
}

/* Убираем реакцию на наведение, НО ОСТАВЛЯЕМ АНИМАЦИЮ НАЖАТИЯ */
.task-button.claim:hover {
     background-color: #f88d00; /* Такой же цвет, как и без наведения */
}

/* Анимация нажатия для оранжевой Claim */
.task-button.claim:active {
    transform: scale(0.84);  /* Уменьшение при нажатии */
}

/* Стили для серой, некликабельной кнопки Claim (после клика на оранжевую Claim) */
.task-button.claimed {
    background-color: rgba(128, 128, 128, 0.6); /* Серый цвет */
    cursor: default; /* Меняем курсор */
    width: 55px;  /* Фиксированная ширина кнопки. Должна совпадать с .claim! */
    height: 30px; /* Пример: фиксированная высота. Должен совпадать с .claim! */
}

/* Сдвиг текста вниз на 2 пикселя (для Claimed) */
.task-button.claimed span {
    position: relative;
    display: inline-block;
}

/* Убираем реакцию на наведение и нажатие у серой Claim */
.task-button.claimed:hover,
.task-button.claimed:active {
    background-color: rgba(128, 128, 128, 0.6) !important;  /* Переопределяем, чтобы цвет не менялся */
    transform: none !important;     /* И масштаб тоже */
}