/* Основной стиль для claim-button */
.claim-button {
    width: 94%; /* Ширина кнопки - почти вся ширина контейнера */
    height: 60px; /* Фиксированная высота кнопки */
    cursor: pointer; /* Изменение курсора на указатель при наведении */
    background: transparent; /* Прозрачный фон */
    border: 1px solid #464646; /* Тонкая серая рамка */
    position: fixed; /* Фиксированное позиционирование */
    top: 0.5%; /* Отступ сверху */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Смещение для точного центрирования */
    overflow: hidden; /* Скрытие всего, что выходит за пределы кнопки */
    z-index: 1000; /* Высокий z-index для наложения поверх других элементов */
    transition: background 1s ease-in-out; /* Плавная смена фона */
    display: flex; /* Flexbox для выравнивания содержимого */
    justify-content: flex-end; /* Выравнивание элементов вправо */
    align-items: center; /* Вертикальное центрирование элементов */
    padding: 0 5%; /* Внутренние отступы по горизонтали */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.979), 0 0 30px rgb(19, 18, 18); /* Тень вокруг кнопки */
}

/* Стили для анимации рамки claim-button */
.claim-button svg {
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Смещение влево */
    top: 0; /* Смещение вверх */
    width: 100%; /* Ширина рамки - по ширине кнопки */
    height: 100%; /* Высота рамки - по высоте кнопки */
    fill: none; /* Убираем заливку */
}

/* Линия рамки */
.claim-button .hl-line {
    stroke: #fff; /* Цвет линии рамки - белый */
    stroke-width: 0.5; /* Толщина линии */
    stroke-dasharray: 150 480; /* Длина штрихов */
    stroke-dashoffset: 150; /* Смещение штрихов */
    transition: stroke-dashoffset 1s ease-in-out; /* Плавное смещение штрихов */
}

/* Эффект при наведении на claim-button */
.claim-button:hover {
    background: #050505fd; /* Фон меняется на почти черный при наведении */
}

/* Анимация рамки при наведении */
.claim-button:hover .hl-line {
    stroke-dashoffset: -480; /* Изменение смещения штрихов при наведении */
}



/* Стили для кнопки Claim Onchain с анимацией градиента */
.claim-onchain-button {
    --black: #000000; /* Переменные для цветов */
    --ch-black: #141414;
    --eer-black: #1b1b1b;
    --night-rider: #2e2e2e;
    --white: #ffffff;
    --af-white: #f3f3f3;
    --ch-white: #e1e1e1;
    
    position: absolute; /* Абсолютное позиционирование */
    left: 7%; /* Смещение от левого края */
    top: 17%; /* Смещение от верхнего края */
    padding: 5px; /* Внутренние отступы */
    display: flex; /* Flexbox для выравнивания */
    align-items: center; /* Вертикальное центрирование */
    border-radius: 13px; /* Округлённые углы кнопки */
    box-sizing: border-box; /* Включаем padding в расчёт ширины/высоты */
    width: 200px; /* Ширина кнопки */
    height: 40px; /* Высота кнопки */
    justify-content: flex-end; /* Выравнивание содержимого справа */
    border: 0; /* Без границы */
    color: #fff; /* Цвет текста */
    font-family: 'Lato', sans-serif; /* Шрифт Lato */
    font-weight: 700; /* Жирный текст */
    font-size: 16px; /* Размер шрифта */
    cursor: pointer; /* Курсор при наведении */
    transition-duration: .2s; /* Плавный переход */
    background-color: var(--ch-black); /* Цвет фона */
    background-image: radial-gradient(100% 60% at 70% 0, #929292 0, #000000 100%); /* Градиент */
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; /* Плавные переходы */
    box-shadow: rgba(105, 105, 105, 0.4) 0 2px 4px, rgba(61, 61, 61, 0.3) 0 7px 13px -3px, rgba(0, 0, 0, 0.5) 0 -1px 0 inset; /* Тени */
}

/* Анимация контура кнопки */
.claim-onchain-button:before, .claim-onchain-button:after {
    content: ''; /* Пустое содержимое псевдоэлементов */
    position: absolute; /* Абсолютное позиционирование */
    left: -2px; /* Смещение влево */
    top: -2px; /* Смещение вверх */
    border-radius: 14px; /* Округлённые углы */
    background: linear-gradient(45deg, 
    var(--ch-black), var(--eer-black),
    var(--night-rider), var(--ch-white), var(--night-rider), 
      var(--eer-black), var(--ch-black),var(--ch-black)); /* Градиент */
    background-size: 400%; /* Размер фона для анимации */
    width: calc(100% + 4px); /* Ширина псевдоэлемента */
    height: calc(100% + 4px); /* Высота псевдоэлемента */
    z-index: -1; /* Псевдоэлементы находятся позади кнопки */
    animation: steam 20s linear infinite; /* Анимация движения градиента */
}

/* Эффект при нажатии */
.claim-onchain-button:active {
    box-shadow: #000000 0 3px 7px inset; /* Внутренняя тень при нажатии */
}

/* Эффект смещения текста и иконки вниз на 1 пиксель при нажатии, а также затемнение текста */
.claim-onchain-button:active .claim-onchain-text,
.claim-onchain-button:active .onchain-icon {
    transform: translateY(1px); /* Смещение вниз */
    transition: transform 0.1s ease; /* Одинаковая длительность перехода для текста и иконки */

    background: linear-gradient(to top, #3f3f3f, #fcfcfc); /* Градиент для текста */
    background-clip: text; /* Клипирование фона в тексте */
    -webkit-background-clip: text; /* Клипирование для WebKit */
    -webkit-text-fill-color: transparent; /* Прозрачный текст */
    text-shadow: 1px 1px 6px rgb(65, 65, 65); /* Тень для текста */
}

/* Эффект смещения и затемнения иконки при клике */
.move-down {
    transform: translateY(1px); /* Смещение иконки вниз */
    transition: transform 0.1s ease; /* Плавный переход смещения */
}

.darken {
    filter: brightness(0.6); /* Легкое затемнение */
    transition: filter 0.1s ease; /* Плавное затемнение */
}

/* Анимация вращения иконки через класс spin */
.spin {
    animation: spin 2s linear; /* Вращение на 360 градусов за 2 секунды */
}

/* Ключевые кадры для вращения иконки */
@keyframes spin {
    from {
        transform: rotate(0deg); /* Начало вращения */
    }
    to {
        transform: rotate(1440deg); /* Окончание вращения (4 оборота) */
    }
}

/* Стили для иконки в кнопке Claim Onchain */
.claim-onchain-button .onchain-icon {
    width: 20px; /* Ширина иконки */
    height: 20px; /* Высота иконки */
    margin-right: 5px; /* Отступ справа */
    margin-left: 12px; /* Отступ слева */
    transition: transform 0.1s ease, filter 0.1s ease; /* Переходы для смещения и затемнения */
}

/* Стили для текста в кнопке Claim Onchain */
.claim-onchain-text {
    font-size: 19px; /* Размер текста */
    font-weight: 700; /* Жирность текста */
    margin-left: 8px; /* Отступ слева */
    margin-right: 19px; /* Отступ справа */
    background: linear-gradient(to top, #bebebe, #fcfcfc); /* Градиент для текста */
    background-clip: text; /* Обтравка фона для текста */
    -webkit-background-clip: text; /* Клипирование фона для WebKit */
    -webkit-text-fill-color: transparent; /* Прозрачный текст */
    text-shadow: 1px 1px 6px rgb(65, 65, 65); /* Тень для текста */
    transition: transform 0.1s ease; /* Плавное смещение текста */
}

/* Ключевые кадры для анимации градиента контура */
@keyframes steam {
    0% {
      background-position: 0 0; /* Начальное положение фона */
    }
    50% {
      background-position: 400% 0; /* Положение в середине анимации */
    }
    100% {
      background-position: 0 0; /* Конечное положение фона */
    }
}

/* Эффект размытия для градиента */
.claim-onchain-button:after {
    filter: blur(50px); /* Размытие фона */
}


/* Стили для модального окна */
.modal {
    position: fixed; /* Фиксированное позиционирование на экране */
    top: 0; /* Отступ сверху */
    left: 0; /* Отступ слева */
    width: 100%; /* Полная ширина экрана */
    height: 100%; /* Полная высота экрана */
    background-color: rgba(0, 0, 0, 0.7); /* Чёрное полупрозрачное фоновое окно */
    display: flex; /* Flexbox для выравнивания содержимого */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    z-index: 1001; /* Высокий z-index для наложения поверх всех элементов */
    opacity: 0; /* Начальная прозрачность для плавного появления */
    visibility: hidden; /* Начальное состояние: окно скрыто */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавный переход для появления/исчезновения */
}

/* Видимое состояние модального окна */
.modal.show {
    opacity: 1; /* Полная видимость */
    visibility: visible; /* Модальное окно становится видимым */
}

/* Стили для второго модального окна */
.second-modal .modal-content {
    width: 270px;
    height: 100px; /* Высота второго модального окна */
    background-color: rgba(44, 44, 44, 0.95);
    border-radius: 18px;
    display: flex;
    font-weight: normal; /* Нормальный шрифт */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.2);
}


/* Стили для содержимого модального окна */
.modal-content {
    background: linear-gradient(145deg, rgba(34, 34, 34, 0.95), rgba(44, 44, 44, 0.85)); /* Градиентный фон */
    position: relative; /* Относительное позиционирование для дочерних элементов */
    padding: 20px; /* Внутренние отступы */
    border-radius: 18px; /* Скруглённые углы */
    text-align: center; /* Центрирование текста */
    width: 250px; /* Ширина окна */
    height: 130px; /* Высота окна */
    max-width: 90%; /* Ограничение ширины окна в процентах от экрана */
    max-height: 90%; /* Ограничение высоты окна в процентах от экрана */
    border: 2px solid rgb(73, 73, 73); /* Рамка вокруг модального окна */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.2); /* Глубокая тень и лёгкая подсветка */
    transform: scale(0.7); /* Начальное уменьшенное состояние */
    transition: transform 0.3s ease; /* Плавная анимация увеличения */
    will-change: transform, opacity; /* Оптимизация изменений */
}

/* Увеличиваем окно до нормального размера */
.modal.show .modal-content {
    transform: scale(1); /* Полный масштаб */
}

/* Стили для текста внутри модального окна */
.modal-content p {
    color: rgb(205, 205, 205); /* Светлый цвет текста */
    /* font-weight: normal; /* Нормальный шрифют */
    font-weight: bold; /* Жирный шрифт */
    font-size: 16px; /* Размер текста */
    margin-bottom: 20px; /* Отступ внизу для разделения текста и кнопок */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* Лёгкая подсветка текста */
}

/* Стили для иконки закрытия */
.close-icon {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Стили для кнопок внутри модального окна */
.modal-button {
    margin: 10px; /* Отступы кнопок */
    padding: 10px; /* Внутренние отступы кнопок */
    background-color: #666666; /* Серые кнопки */
    color: #fff; /* Белый текст */
    border: none; /* Без границы */
    border-radius: 14px; /* Скруглённые углы */
    cursor: pointer; /* Указатель при наведении */
    font-size: 16px; /* Размер текста */
    width: 100px; /* Фиксированная ширина для всех кнопок */
    text-align: center; /* Центрирование текста внутри кнопок */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); /* Тень под кнопками */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавные переходы для эффекта при наведении */
}

/* Эффект при наведении на кнопку */
.modal-button:hover {
    background-color: #505050; /* Тёмно-серый цвет при наведении */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6); /* Увеличенная тень при наведении */
    transform: translateY(-3px); /* Лёгкое приподнятие кнопки */
}

/* Эффект при нажатии на кнопку */
.modal-button:active {
    transform: translateY(1px); /* Лёгкое смещение кнопки вниз при нажатии */
}

/* Стили для иконки внутри модального окна */
.modal-icon {
    position: absolute; /* Абсолютное позиционирование для размещения в правом верхнем углу */
    top: 10px; /* Отступ сверху */
    right: 10px; /* Отступ справа */
    width: 40px; /* Ширина иконки */
    height: 40px; /* Высота иконки */
    border-radius: 50%; /* Округление иконки для создания круглой формы */
    object-fit: cover; /* Обрезка изображения по размеру */
    cursor: pointer; /* Указатель при наведении на иконку */
    transition: transform 0.2s; /* Плавный переход для эффекта при наведении */
    animation: pulse 1.5s infinite; /* Пульсирующая анимация для иконки */
}

/* Увеличение иконки при наведении */
.modal-icon:hover {
    transform: scale(1.1); /* Лёгкое увеличение иконки */
}

/* Прозрачный круг для клика */
.modal-circle {
    position: absolute; /* Абсолютное позиционирование */
    top: 8px; /* Отступ от верха */
    right: 8px; /* Отступ справа */
    width: 25px; /* Ширина круга */
    height: 25px; /* Высота круга */
    border-radius: 50%; /* Круглая форма */
    background-color: transparent; /* Прозрачный фон */
    cursor: pointer; /* Указатель при наведении */
}

/* Ключевые кадры для пульсирующей анимации */
@keyframes pulse {
    0% {
        transform: scale(1); /* Исходный размер */
    }
    50% {
        transform: scale(0.9); /* Уменьшение на 10% */
    }
    100% {
        transform: scale(1); /* Возвращение к исходному размеру */
    }
}