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

/* Основные стили кнопки */
.farm-button {
    background-color: #1b7f1f; /* Исходный зелёный фон */
    border: 3px solid #f8a436; /* Оранжевая рамка */
    border-radius: 25px; /* Скруглённые углы для красоты */
    padding: 7px 0; /* Вертикальные отступы внутри кнопки */
    font-family: 'SmoothRelief', sans-serif; /* Используем подключенный шрифт */
    color: #f8a436; /* Оранжевый текст */
    display: flex; /* Flexbox для горизонтального расположения элементов */
    align-items: center; /* Вертикальное центрирование содержимого */
    justify-content: center; /* Горизонтальное центрирование содержимого */
    gap: 10px; /* Расстояние между текстом, иконкой и дополнительным текстом */
    cursor: pointer; /* Указатель при наведении */
    position: fixed; /* Заменяем на fixed для привязки к нижней части окна */
    left: 50%; /* Центрируем кнопку по горизонтали */
    transform: translateX(-50%); /* Сдвиг для точного центрирования по горизонтали */
    bottom: calc(var(--menu-height) + 28px); /* 45 пикселей высота меню + 20 пикселей отступ */ /* Расположение кнопки по вертикали */
    height: var(--farm-button-height); /* Высота кнопки */
    width: 94%; /* Практически на всю ширину экрана */
    max-width: 360px; /* Ограничиваем максимальную ширину кнопки */
    margin: 0 auto; /* Центрирование по горизонтали */
    box-shadow: 0 0 5px rgba(4, 75, 28, 0.979), 0 0 15px rgb(3, 73, 3); /* Тень для объёмности кнопки */
    transition: background-color 0.2s, transform 0.1s ease; /* Плавные переходы цветов и трансформаций */
    z-index: 1; /* Высокий z-index, чтобы снег был поверх всех элементов */
    transition: all 0.2s ease; /* Плавный переход для всех свойств */
    overflow: hidden; /* Важно для корректного позиционирования состояний */
}

/* Стили для обоих состояний кнопки */
.state-start,
.state-farming {
    position: absolute; /* Абсолютное позиционирование состояний */
    top: 0; /* Положение сверху */
    left: 0; /* Положение слева */
    width: 100%; /* Ширина на всю кнопку */
    height: 100%; /* Высота на всю кнопку */
    display: flex; /* Flexbox для размещения содержимого */
    align-items: center; /* Центрируем по вертикали */
    justify-content: center; /* Центрируем по горизонтали */
    gap: 10px; /* Пространство между элементами */
    opacity: 0; /* Начальная прозрачность (скрыто) */
    visibility: hidden; /* Начальная видимость (скрыто) */

    /* (Изменено) Чтобы при исчезновении был плавный fade-out, а visibility пряталось позже */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Плавный переход для видимости и прозрачности */
}

/* Активные состояния кнопки */
.state-start.active,
.state-farming.active {
    opacity: 1; /* Полная видимость для активного состояния */
    visibility: visible; /* Устанавливаем видимость при активации */

    /* (Изменено) При активации убираем задержку, чтобы сразу показать */
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* Стили текста и иконок */
.state-start span,
.farm-main-text {
    font-size: 25px; /* Размер основного текста */
    color: #f8a436; /* Оранжевый цвет текста */
    transform: translateY(2px); /* Сдвигаем текст вниз на 2 пикселя */
    margin: 0; /* Убираем отступы */
    text-align: center; /* Центрируем текст */
    white-space: nowrap; /* Запрещаем перенос строк */
}

/* Стили таймера */
.farm-time-text {
    font-size: 25px; /* Размер дополнительного текста */
    color: #d46a00; /* Цвет текста в состоянии disabled */
    transform: translateY(2px); /* Сдвигаем текст вниз на 2 пикселя */
    margin: 0; /* Убираем внешние отступы */
    width: 90px; /* Фиксированная ширина для текста времени */
    text-align: left; /* Центрируем текст */
    display: inline-block; /* Отображаем элемент как блок внутри строки */
}

/* Стили иконки SOL */
.farm-icon {
    width: 30px; /* Ширина иконки */
    height: 30px; /* Высота иконки */
    object-fit: contain; /* Обеспечиваем правильное отображение изображения в рамках */
}

/* Стили для отключенной кнопки */
.farm-button:disabled {
    /* opacity: 0.6; */ /* Уменьшенная непрозрачность (закомментировано) */
    border: 3px solid #f8a436af; /* Оранжевая рамка с уменьшенной альфа-каналом */
    background-color: #1b7f1e81; /* Исходный зелёный фон с уменьшенной альфа-каналом */
    cursor: not-allowed; /* Указатель при наведении, показывающий, что кнопка недоступна */
    /* filter: grayscale(0.8); */ /* Фильтр серого (закомментировано) */
}

/* Анимация при нажатии */
.farm-button:not(:disabled):active {
    transform: translateX(-50%) scale(0.95); /* Лёгкое уменьшение кнопки при нажатии */
    background-color: #0b500d; /* Более тёмный зелёный фон при нажатии */
}

/* Анимация с плавным появлением и затуханием тени */
@keyframes farmingBlink {
    0% {
        box-shadow: 0 0 0 rgba(248, 164, 54, 0), 0 0 0 rgba(248, 164, 54, 0);
    }
    25% {
        box-shadow: 0 0 2px rgba(248, 164, 54, 0.4), 0 0 4px rgba(248, 164, 54, 0.3);
    }
    50% {
        box-shadow: 0 0 6px rgba(248, 164, 54, 0.8), 0 0 12px rgba(248, 164, 54, 0.6);
    }
    75% {
        box-shadow: 0 0 2px rgba(248, 164, 54, 0.4), 0 0 4px rgba(248, 164, 54, 0.3);
    }
    100% {
        box-shadow: 0 0 0 rgba(248, 164, 54, 0), 0 0 0 rgba(248, 164, 54, 0);
    }
}

/* Применяем эффект мерцания к кнопке, когда фарм активен */
.farm-button.is-farming {
    animation: farmingBlink 3s infinite ease-in-out;
}