/* === Подключение шрифта === */
/* Импорт шрифта Inter из Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap');

/* === Общие стили === */
/* Настройка базовых стилей для страницы */
body {
    overflow: hidden; /* Отключение прокрутки страницы */
    margin: 0; /* Убираем стандартные отступы */
    font-family: Arial, sans-serif; /* Шрифт по умолчанию с запасным вариантом */
    background-color: #000000; /* Черный фон */
    color: #fff; /* Белый цвет текста */
}

/* === Прелоадер === */
/* Стили для полноэкранного прелоадера */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #121212; /* Темный фон */
    color: white; /* Белый цвет текста */
    display: flex;
    flex-direction: column;
    align-items: center; /* Выравнивание по центру по горизонтали */
    justify-content: center; /* Выравнивание по центру по вертикали */
    z-index: 2000; /* Высокий приоритет для отображения поверх всего */
}

/* Стили для анимации спиннера в прелоадере */
.spinner {
    width: 40px;
    height: 40px;
    border-top: 4px solid rgb(255, 255, 255); /* Белая граница спиннера */
    border-radius: 50%; /* Круглая форма */
    animation: spin 0.8s linear infinite; /* Постоянное вращение */
    margin-bottom: 10px; /* Отступ снизу */
}

/* Ключевые кадры для анимации вращения спиннера */
@keyframes spin {
    to {
        transform: rotate(360deg); /* Полный поворот на 360 градусов */
    }
}

/* === Шапка (Header) === */
/* Стили для шапки страницы */
.header {
    display: flex;
    justify-content: space-between; /* Размещение элементов по краям */
    align-items: center; /* Вертикальное выравнивание */
    padding: 8px 12px; /* Внутренние отступы */
    background-color: #2a2a2a; /* Темно-серый фон */
    border-radius: 10px; /* Скругленные углы */
    margin: 10px; /* Внешние отступы */
}

/* Стили для профиля в шапке */
.profile {
    display: flex;
    align-items: center; /* Вертикальное выравнивание элементов */
    gap: 10px; /* Расстояние между аватаром и именем */
}

/* Стили для аватара */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px; /* Скругленные углы */
    object-fit: cover; /* Изображение заполняет контейнер без искажений */
}

/* Стили для имени в профиле */
.name {
    font-size: 18px; /* Размер шрифта имени */
}

/* Стили для отображения балансов */
.balances {
    display: flex;
    align-items: center; /* Вертикальное выравнивание */
    gap: 6px; /* Расстояние между элементами баланса */
}

/* Стили для кнопки добавления */
.add-btn {
    background-color: #3A64CD; /* Синий фон */
    color: white; /* Белый цвет текста */
    font-size: 20px; /* Размер шрифта */
    border: none; /* Без границы */
    border-radius: 50%; /* Круглая форма */
    width: 24px;
    height: 24px;
    cursor: pointer; /* Курсор указателя */
    display: flex;
    align-items: center; /* Центрирование содержимого по вертикали */
    justify-content: center; /* Центрирование содержимого по горизонтали */
    line-height: 1; /* Убираем смещение текста */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку при нажатии на мобильных */
    outline: none; /* Убираем обводку при фокусе */
}

/* Анимация для кнопки добавления при нажатии */
.add-btn:active {
    animation: pressEffect 0.3s ease; /* Применяем эффект нажатия */
}

/* Ключевые кадры для анимации нажатия кнопки */
@keyframes pressEffect {
    0% {
        transform: scale(1); /* Исходный размер */
        background-color: #3A64CD; /* Исходный цвет */
    }
    50% {
        transform: scale(0.85); /* Уменьшение размера */
        background-color: #2f4faf; /* Темно-синий цвет */
    }
    100% {
        transform: scale(1); /* Возврат к исходному размеру */
        background-color: #3A64CD; /* Исходный цвет */
    }
}

/* Стили для элемента баланса */
.balance {
    display: flex;
    align-items: center; /* Выравнивание иконки и текста */
    gap: 4px; /* Расстояние между иконкой и текстом */
    background-color: #3a3a3a; /* Темно-серый фон */
    padding: 4px 8px; /* Внутренние отступы */
    border-radius: 8px; /* Скругленные углы */
}

/* Стили для иконки баланса */
.balance img {
    width: 16px;
    height: 16px;
}

/* === Подвал (Footer) === */
/* Стили для нижней панели навигации */
.footer {
  
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #1e1e1e; /* Темный фон */
    display: flex;
    justify-content: space-around; /* Равномерное распределение элементов */
    align-items: center; /* Вертикальное выравнивание */
    border-top: 1px solid #333; /* Верхняя граница */
    z-index: 1000; /* Высокий приоритет отображения */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку при нажатии */
    outline: none; /* Убираем обводку при фокусе */
}

/* Стили для элементов подвала */
.footer-item {
    display: flex;
    flex-direction: column; /* Вертикальное расположение иконки и текста */
    align-items: center; /* Центрирование содержимого */
    font-size: 12px; /* Размер шрифта */
    color: #999; /* Серый цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
    gap: 3px; /* Расстояние между иконкой и текстом */
}

/* Анимация для элемента подвала при нажатии */
.footer-item:active {
    animation: footerPressEffect 0.3s ease; /* Применяем эффект нажатия */
}

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

/* Стили для иконок в подвале */
.footer-item img {
    width: 24px;
    height: 24px;
    opacity: 0.6; /* Полупрозрачность по умолчанию */
}

/* Стили для активного элемента подвала */
.footer-item.active span {
    color: #fff; /* Белый цвет текста */
    font-weight: 500; /* Полужирный шрифт */
}

/* Иконка активного элемента подвала */
.footer-item.active img {
    opacity: 1; /* Полная непрозрачность */
}

/* === Главный блок (Hero) === */
/* Стили для главного контейнера */
.hero-wrap {
    max-width: 100%; /* Не выходит за границы экрана */
    margin: 0 auto; /* Центрирование по горизонтали */
    text-align: center; /* Центрирование текста */
    color: #ffffff; /* Белый цвет текста */
    line-height: 1.5; /* Высота строки */
    margin-top: 90px; /* Отступ сверху */
}

/* Стили для заголовка */
.hero-title {
    margin: 0; /* Убираем отступы */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; /* Шрифт */
    font-weight: 700; /* Жирный шрифт */
    font-size: 45px; /* Размер шрифта */
    line-height: 1.2; /* Высота строки */
    hyphens: auto; /* Автоматический перенос слов */
}

/* Стили для подзаголовка в заголовке */
.hero-title span {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 500; /* Средний вес шрифта */
    font-size: 40px; /* Чуть меньший размер */
    line-height: 1.2;
    hyphens: auto;
}

/* Стили для параграфа в главном блоке */
.hero-wrap p {
    margin-top: 0; /* Убираем верхний отступ */
    display: block;
    color: #757575; /* Серый цвет текста */
    font-size: 18px; /* Размер шрифта */
    font-weight: 400; /* Обычный вес шрифта */
}

/* === Блок ссылок === */
/* Стили для контейнера ссылок */
.link-copy {
    display: flex;
    gap: 20px; /* Расстояние между элементами */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    cursor: pointer; /* Курсор указателя */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку при нажатии */
    outline: none; /* Убираем обводку при фокусе */
}

/* Стили для кнопки ссылки */
.link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 363px; /* Ширина кнопки */
    height: 67.5px; /* Высота кнопки */
    background: #3A64CD; /* Синий фон */
    border-radius: 13.5px; /* Скругленные углы */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Стили для кнопки копирования */
.copy {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 67.5px; /* Ширина кнопки */
    height: 67.5px; /* Высота кнопки */
    background: #3A64CD; /* Синий фон */
    border-radius: 13.5px; /* Скругленные углы */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Стили для кнопки ботов */
.bots {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(363px + 67.5px + 20px); /* Ширина = link + copy + gap */
    height: 67.5px; /* Высота кнопки */
    background: #3A64CD; /* Синий фон */
    border-radius: 13.5px; /* Скругленные углы */
    cursor: pointer;
    margin-top: 90px; /* Отступ сверху */
    margin-left: auto;
    margin-right: auto;
    border: none;
    color: white;
    font-size: 16px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Анимация для кнопок link, copy и bots при нажатии */
.link:active,
.copy:active,
.bots:active {
    animation: pressLinkEffect 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Эффект нажатия */
}

/* Ключевые кадры для анимации нажатия кнопок */
@keyframes pressLinkEffect {
    0% {
        transform: scale(1); /* Исходный размер */
    }
    30% {
        transform: scale(0.95); /* Уменьшение */
    }
    60% {
        transform: scale(1.05); /* Легкое увеличение */
    }
    100% {
        transform: scale(1); /* Возврат к исходному */
    }
}

/* === Модальное окно === */
/* Фон модалки */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Показ модалки */
.modal.show {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
}
/* Скрытие (уход вниз + затухание) */
.modal.hide {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Контейнер контента */
.modal-contents {
    background: rgb(24, 24, 24);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 24px 20px;
    width: 100%;
    max-width: 100%;
    height: 60vh;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    animation: modalPopup 0.6s ease-out;
}

/* Заголовок */
.modal-contents h1 {
    font-size: clamp(28px, 6vw, 50px); /* минимум 28px, максимум 50px */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
}


/* Подзаголовок */
.modal-contents p {
    color: #707070;
    font-size: 16px;
    margin-bottom: 24px;  /* Отступ до блока кнопок */
    line-height: 1.4;
}

/* Кнопки с картинками */
.join-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
    width: 100%;
    max-width: 320px;
    margin-bottom: 12px; /* Равномерный отступ между кнопками */
    transition: transform 0.15s ease;
}

.join-btn img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Кнопка проверки */
.proverka-btn {
    background: none;
    border: none;
    color: #6495ed;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 18px;   /* Отступ после кнопок */
    transition: transform 0.15s ease;
}

.join-btn:active {
    transform: scale(0.95);
}

.proverka-btn:active {
    transform: scale(0.95);
}

/* Адаптив */
@media (max-width: 480px) {
    .modal-contents {
        height: 65vh;
        padding: 20px 16px;
    }
    .modal-contents h1 {
        font-size: 34px;
    }
}

/* Анимация появления модального окна */
@keyframes modalPopup {
    0% {
        opacity: 0;
        transform: translateY(50%) scale(0.8); /* Начало сверху */
    }
    60% {
        opacity: 1;
        transform: translateY(-10%) scale(1.05); /* Легкое увеличение */
    }
    80% {
        transform: translateY(5%) scale(0.95); /* Легкое уменьшение */
    }
    100% {
        transform: translateY(0) scale(1); /* Конечное состояние */
    }
}

/* === Контейнер рулетки === */
/* Стили для контейнера рулетки */
.roulette-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование по горизонтали */
    gap: 4px; /* Расстояние между элементами */
    height: 100vh; /* Полная высота экрана */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку */
    outline: none; /* Убираем обводку */
}

/* === Блок рулетки "Free" === */
/* Стили для бесплатной рулетки */
.roulette-free {
    position: relative;
    border: none; /* Без границ */
    -webkit-tap-highlight-color: transparent;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Выравнивание по левому краю */
    justify-content: flex-start; /* Прижатие к верхнему краю */
    width: 95%; /* Ширина 95% */
    height: 20vh; /* Высота 20% экрана */
    background: linear-gradient(90deg, #121212, #1e1e1e); /* Градиент фона */
    border-radius: 6px; /* Скругленные углы */
    padding-top: 14px; /* Отступ сверху */
    padding-left: 10px; /* Отступ слева */
}

/* Заголовок в блоке рулетки */
.roulette-free h1 {
    font-size: 34px;
    font-weight: 100; /* Легкий шрифт */
    color: #ffffff; /* Белый цвет текста */
    margin: 0 0 10px 0; /* Отступ снизу */
}

/* Параграф в блоке рулетки */
.roulette-free p {
    font-size: 16px;
    color: #ffffff;
    font-weight: 100;
    margin: 0; /* Убираем отступы */
    text-align: left; /* Выравнивание текста по левому краю */
}

/* === Блок рулетки "Budget" === */
/* Стили для бюджетной рулетки */
.roulette-Budget {
    position: relative;
    border: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 95%;
    height: 20vh;
    background: linear-gradient(90deg, #47A2B4, #59BAA9); /* Градиент фона */
    border-radius: 6px;
    padding-top: 14px;
    padding-left: 10px;
}

/* Заголовок в блоке Budget */
.roulette-Budget h1 {
    font-size: 34px;
    font-weight: 100;
    color: #ffffff;
    margin: 0 0 10px 0;
}

/* Параграф в блоке Budget */
.roulette-Budget p {
    font-size: 16px;
    color: #ffffff;
    font-weight: 100;
    margin: 0;
    text-align: left;
}

/* === Блок рулетки "Economy" === */
/* Стили для экономичной рулетки */
.roulette-Economy {
    position: relative;
    border: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 95%;
    height: 20vh;
    background: linear-gradient(90deg, #4648A6, #645BB6); /* Градиент фона */
    border-radius: 6px;
    padding-top: 14px;
    padding-left: 10px;
}

/* Заголовок в блоке Economy */
.roulette-Economy h1 {
    font-size: 34px;
    font-weight: 100;
    color: #ffffff;
    margin: 0 0 10px 0;
}

/* Параграф в блоке Economy */
.roulette-Economy p {
    font-size: 16px;
    color: #ffffff;
    font-weight: 100;
    margin: 0;
    text-align: left;
}

/* === Блок рулетки "Available" === */
/* Стили для доступной рулетки */
.roulette-Available {
    position: relative;
    border: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 95%;
    height: 20vh;
    background: linear-gradient(90deg, #9762D4, #B069CC); /* Градиент фона */
    border-radius: 6px;
    padding-top: 14px;
    padding-left: 10px;
}

/* Заголовок в блоке Available */
.roulette-Available h1 {
    font-size: 34px;
    font-weight: 100;
    color: #ffffff;
    margin: 0 0 10px 0;
}

/* Параграф в блоке Available */
.roulette-Available p {
    font-size: 16px;
    color: #ffffff;
    font-weight: 100;
    margin: 0;
    text-align: left;
}

/* Стили для отображения цены */
.price {
    position: absolute;
    display: flex;
    align-items: center; /* Выравнивание иконки и текста */
    gap: 4px; /* Расстояние между иконкой и числом */
    padding: 2px 6px; /* Внутренние отступы */
    background-color: white; /* Белый фон */
    border-radius: 8px; /* Скругленные углы */
    font-size: 14px;
    font-weight: 500; /* Полужирный шрифт */
    color: black; /* Черный цвет текста */
    bottom: 10px; /* Отступ снизу */
    right: 10px; /* Отступ справа */
    user-select: none; /* Запрет выделения текста */
}

/* Иконка в блоке цены */
.price img {
    width: 16px;
    height: 16px;
    display: block;
    margin: auto;
}

.roulette-free.clicked,
.roulette-Budget.clicked,
.roulette-Economy.clicked,
.roulette-Available.clicked {
    transform: translateY(2px); /* лёгкое “погружение” вниз */
    background-color: #cccccc; /* чуть темнее */
    filter: brightness(85%);    /* затемнение */
    transition: filter 0.2s ease, background-color 0.2s ease;
}
/* === Модальное окно подтверждения вращения === */
/* Стили для модального окна подтверждения (скрыто по умолчанию) */
#modal-confirm-roll {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    z-index: 9999; /* Высокий приоритет */
}

/* Показ модального окна */
#modal-confirm-roll.show {
    display: flex;
}

/* Стили для содержимого модального окна подтверждения */
.modal-roll {
    width: 300px;
    height: 190px;
    background: #121212; /* Темный фон */
    padding: 20px; /* Внутренние отступы */
    border-radius: 21px; /* Скругленные углы */
    color: #fff; /* Белый цвет текста */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрирование по вертикали */
    gap: 15px; /* Расстояние между элементами */
    position: relative;
}

/* Заголовок в модальном окне подтверждения */
.modal-roll h1 {
    font-weight: 200; /* Легкий шрифт */
    font-size: 24px; /* Размер шрифта */
    margin: 0;
    position: relative;
    top: -5px; /* Сдвиг вверх */
    line-height: 1.2; /* Высота строки */
}

/* Текст в модальном окне */
.modal-roll span {
    font-weight: 500; /* Полужирный шрифт */
    font-size: 24px; /* Размер шрифта */
}

/* Контейнер для кнопок в модальном окне */
.modal-buttons {
    display: flex;
    flex-direction: column; /* Вертикальное расположение */
    gap: 15px; /* Расстояние между кнопками */
    margin-top: 5px; /* Отступ сверху */
    align-items: center; /* Центрирование по горизонтали */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Стили для кнопки "Да" */
.yes-btn {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    width: 197px; /* Ширина кнопки */
    height: 42px; /* Высота кнопки */
    background: #3A64CD; /* Синий фон */
    border-radius: 8px; /* Скругленные углы */
    color: #ffffff; /* Белый цвет текста */
    font-family: Inter, sans-serif;
    font-weight: 600; /* Жирный шрифт */
    font-size: 15px; /* Размер шрифта */
    border: none;
    cursor: pointer;
}

/* Стили для кнопки "Нет" */
.close-btn {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: none;
    border: none;
    color: #9A9A9A; /* Серый цвет текста */
    font-family: Inter, sans-serif;
    font-weight: 300; /* Легкий шрифт */
    font-size: 15.66px; /* Размер шрифта */
    cursor: pointer;
    padding: 0; /* Убираем отступы */
}

/* Анимация появления модального окна */
@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(100%) scaleY(0.7); /* Начальное состояние */
    }
    40% {
        opacity: 1;
        transform: translateY(-20px) scaleY(1.1); /* Подъем и увеличение */
    }
    60% {
        transform: translateY(10px) scaleY(0.95); /* Легкое уменьшение */
    }
    80% {
        transform: translateY(-5px) scaleY(1.02); /* Финальная корректировка */
    }
    100% {
        transform: translateY(0) scaleY(1); /* Конечное состояние */
    }
}

/* Применение анимации появления */
.modal-roll.animated {
    animation: bounceInUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* Анимация закрытия модального окна */
@keyframes bounceOutDown {
    0% {
        opacity: 1;
        transform: translateY(0) scaleY(1); /* Начальное состояние */
    }
    20% {
        transform: translateY(-10px) scaleY(1.1); /* Легкий подъем */
    }
    100% {
        opacity: 0;
        transform: translateY(100%) scaleY(0.7); /* Исчезновение вниз */
    }
}

/* Применение анимации закрытия */
.modal-roll.animated-out {
    animation: bounceOutDown 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* === Модальное окно вращения рулетки === */
/* Стили для модального окна с анимацией рулетки (скрыто по умолчанию) */
#modal-rolling {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный фон */
    z-index: 10000; /* Высокий приоритет */
    justify-content: center;
    align-items: center;
}

/* Показ модального окна */
#modal-rolling.show {
    display: flex;
}

/* Стили для содержимого модального окна рулетки */
.modal-content {
    position: relative;
    width: 800px; /* Ширина окна */
    height: 300px; /* Высота окна */
    background: linear-gradient(135deg, #1a1a1a, #2c2c2c); /* Градиент фона */
    border-radius: 12px; /* Скругленные углы */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Тень */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Стили для линии выигрыша */
.win-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Центрирование по горизонтали */
    height: 100%;
    width: 1px;
    background-color: rgba(179, 179, 179, 0.74); /* Полупрозрачная линия */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15; /* Поверх элементов рулетки */
    pointer-events: none; /* Отключение взаимодействия */
}

/* Изображение в линии выигрыша */
.win-line img {
    max-height: 310px;
    max-width: 65px;
    object-fit: contain; /* Сохранение пропорций */
    user-select: none; /* Запрет выделения */
    pointer-events: none;
    display: block;
}

/* Контейнер для анимации рулетки */
.modal-roll-animation {
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

/* Список элементов рулетки */
.roulette-items {
    display: flex;
    flex-direction: row;
    list-style: none; /* Убираем маркеры списка */
    padding: 0;
    margin: 0;
    transition: transform 4s cubic-bezier(.15,.58,.69,.85); /* Плавная анимация движения */
    will-change: transform; /* Оптимизация анимации */
}

/* Стили для отдельного элемента рулетки */
.roulette-item {
    flex: 0 0 auto;
    width: 100px; /* Фиксированная ширина */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 6px; /* Отступы между элементами */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Плавные переходы */
    border-radius: 10px; /* Скругленные углы */
}

/* Четные элементы рулетки (шахматный порядок) */
.roulette-item:nth-child(2n) {
    background: rgba(0, 0, 0, 0.2); /* Темный фон */
    border-radius: 10px;
}

/* Нечетные элементы рулетки */
.roulette-item:nth-child(2n+1) {
    background: rgba(51, 51, 51, 0.2); /* Чуть светлее фон */
    border-radius: 10px;
}

/* Изображение в элементе рулетки */
.roulette-item img {
    max-width: auto;
    max-height: 190px;
    object-fit: contain; /* Сохранение пропорций */
    transition: transform 0.3s ease; /* Плавное масштабирование */
    display: block;
}

/* Эффект при наведении на элемент рулетки */
.roulette-item:hover img {
    transform: scale(1.1); /* Увеличение изображения */
}

/* Стили для кнопки получения предмета */
#claim-item-btn {
    position: absolute;
    bottom: 30px; /* Отступ снизу */
    padding: 16px 32px; /* Внутренние отступы */
    background-color: #007bff; /* Синий фон */
    color: white;
    border: none;
    border-radius: 6px; /* Скругленные углы */
    font-size: 18px;
    font-weight: bold; /* Жирный шрифт */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавные переходы */
}

/* Эффект при наведении на кнопку получения */
#claim-item-btn:hover {
    background-color: #0056b3; /* Темно-синий фон */
    transform: translateY(-2px); /* Легкий подъем */
}

/* Эффект при нажатии на кнопку получения */
#claim-item-btn:active {
    transform: translateY(0); /* Возврат в исходное положение */
}

/* === Адаптация главного блока (Hero) для маленьких устройств === */
@media (max-width: 480px) {
    /* Контейнер hero-wrap */
    .hero-wrap {
        margin-top: 60px; /* Уменьшаем отступ сверху для компактности */
        padding: 0 16px; /* Добавляем боковые отступы для узких экранов */
        line-height: 1.3; /* Уменьшаем высоту строки для плотности */
    }

    /* Заголовок hero-title */
    .hero-title {
        font-size: 32px; /* Уменьшаем размер шрифта для мобильных */
        line-height: 1.1; /* Уменьшаем высоту строки */
    }

    /* Подзаголовок внутри hero-title */
    .hero-title span {
        font-size: 28px; /* Уменьшаем размер подзаголовка */
    }

    /* Описание в hero-wrap */
    .hero-description {
        font-size: 16px; /* Уменьшаем размер шрифта */
        margin-top: 8px; /* Небольшой отступ сверху */
    }
}
/* === Адаптация блока ссылок (link-copy) для маленьких устройств === */
@media (max-width: 480px) {
    /* Контейнер link-copy */
    .link-copy {
        gap: 12px; /* Уменьшаем расстояние между элементами */
        padding: 0 16px; /* Боковые отступы для выравнивания */
    }

    /* Кнопка link */
    .link {
        width: 100%; /* Растягиваем на всю доступную ширину */
        max-width: 280px; /* Ограничиваем максимальную ширину */
        height: 50px; /* Уменьшаем высоту */
        border-radius: 10px; /* Уменьшаем скругление углов */
        font-size: 14px; /* Уменьшаем размер шрифта */
    }

    /* Кнопка copy */
    .copy {
        width: 50px; /* Уменьшаем ширину */
        height: 50px; /* Уменьшаем высоту */
        border-radius: 10px; /* Уменьшаем скругление углов */
    }

    /* Иконка внутри copy */
    .copy img {
        width: 24px; /* Уменьшаем размер иконки */
        height: 24px;
    }
}
/* === Адаптация кнопки ботов для маленьких устройств === */
@media (max-width: 480px) {
    /* Кнопка bots */
    .bots {
        width: 100%; /* Растягиваем на всю ширину */
        max-width: 340px; /* Ограничиваем максимальную ширину */
        height: 50px; /* Уменьшаем высоту */
        border-radius: 10px; /* Уменьшаем скругление углов */
        font-size: 14px; /* Уменьшаем размер шрифта */
        margin-top: 60px; /* Уменьшаем отступ сверху */
    }
}

/* ======================================================
   Контейнер с информацией пользователя в профиле
   ====================================================== */
.info-container {
    display: flex;
    align-items: center;  /* вертикальное центрирование аватара и текста */
    gap: 12px;            /* отступ между аватаром и текстом */
    margin-top: 15px;     /* отступ сверху от предыдущего блока */
    margin-left: 10px;    /* отступ слева */
}
/* ======================================================
   Аватар пользователя
   ====================================================== */
#ava {
    width: 80px;
    height: 80px;
    border-radius: 8px;   /* скругление углов */
    object-fit: cover;    /* чтобы картинка не деформировалась */
    background: #929292;  /* фон, если аватар отсутствует */
}
/* ======================================================
   Контейнер с текстовой информацией пользователя
   ====================================================== */
.user-info {
    display: flex;
    flex-direction: column; /* текст располагается в столбик */
    justify-content: center; /* вертикальное выравнивание текста */
}
/* ======================================================
   Юзернейм
   ====================================================== */
#username {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
/* ======================================================
   ID пользователя
   ====================================================== */
#user-id {
    font-size: 14px;
    color: #888;
}



/* ======================================================
   Навигационное меню (кнопки Инвентарь, История, Промо, Админ)
   ====================================================== */
.navigation_menu {
    height: 200px;
    display: flex;
    flex-direction: column; /* вертикальные блоки */
    gap: 0; /* убрать зазор, чтобы линии совпадали */
    padding: 0;
    background-color: #1C1C1C;
    border-radius: 6px;
    margin: 10px;
    overflow: hidden; /* скругления работают корректно */
    -webkit-tap-highlight-color: transparent; /* для мобильных */
    outline: none;
}

/* Каждая секция меню */
.navigation_menu div {
    flex: 1; /* каждая секция занимает равную часть */
    display: flex;
    align-items: center;
    color: white;
    border-bottom: 1px solid #333; /* линия-разделитель */
}

/* Убираем линию у последнего элемента */
.navigation_menu div:last-child {
    border-bottom: none;
}

/* Стили иконок внутри меню */
.navigation_menu div img {
    width: 22px;
    height: 22px;
    margin: 10px;
}

/* Стили текста внутри меню */
.navigation_menu div span {
    color: #D9D9D9;
}

/* Активная кнопка в меню */
.navigation_menu div.active span {
    color: #ffffff;
    font-weight: 500;
}

/* ======================================================
   Блок кошелька (Wallet)
   ====================================================== */
.Wallet {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    grid-template-rows: repeat(2, 1fr);    /* 2 строки */
    gap: 10px; /* отступы между строками и колонками */
    align-items: center;
    border-radius: 8px;
    margin: 10px;
}

/* Элементы кошелька */
.wallet-item {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 8px; /* расстояние между иконкой и текстом */
    color: #0A0A0A;
    border-radius: 6px;
    border: 1px solid #3A64CD;
    font-size: 15px;
}

/* Текст внутри элемента кошелька */
.wallet-item span {
    flex: 1; /* занимает оставшееся пространство */
    text-align: center;
    color: #ffffff;
    font-weight: 300;
    font-size: 20px;
}











/* ======================================================
   Общие стили для меню контента (История, Инвентарь)
   ====================================================== */
.menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background-color: #121212;
    border-radius: 5px;
    height: 425px;
    margin: 10px;
    overflow-y: auto;
    box-sizing: border-box;
    align-items: center;
    scroll-behavior: smooth;
    position: relative;
}

/* Важно: используем display:block, а не flex-контекст */
.menu::after {
    content: "";
    display: block;       /* теперь участвует в расчёте высоты */
    height: 150px;        /* даёт возможность прокрутить на 100px */
    flex-shrink: 0;       /* чтобы не схлопывался в flex */
}


/* Скрытие блоков по умолчанию */
#histore,
#inventory {
    display: none;
}





/* ======================================================
   Стили для инвентаря
   ====================================================== */

/* Контейнер карточек */
.inventory-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* всегда 2 карточки */
    gap: 16px;
    justify-items: center;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    padding-bottom: 100px; /* чтобы можно было листать ниже последнего предмета */
}

/* Карточка предмета */
.item-card {
    width: 95%;
    max-width: 220px;
    background-color: #1c1c1c;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

/* Контейнер содержимого карточки */
.item-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* Количество предметов */
.quantity {
    font-size: 14px;
    color: #aaa;
}

/* Изображение предмета */
.item-image {
    width: 150px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
    padding: 6px;
    transition: transform 0.2s ease;
}

.item-image:hover {
    transform: scale(1.05);
}

/* Общий стиль кнопок */
.item-card button {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

/* Кнопка "Продать" */
.sell-button {
    background-color: #3A64CD;
}

.sell-button:hover {
    background-color: #2f53b3;
    transform: translateY(-1px);
}

/* Кнопка "Вывести" */
.out-button {
    background-color: #28a745;
}

.out-button:hover {
    background-color: #1f8a39;
    transform: translateY(-1px);
}

/* Иконка звезды */
.star-icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
}

/* Блок пустого инвентаря */
.empty-inventory-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #999;
}

.empty-inventory-title {
    font-size: 20px;
    margin: 0;
    color: #fff;
}

.empty-inventory-subtitle {
    font-size: 14px;
    color: #ccc;
    margin-top: 6px;
}

/* ======================================================
   Адаптив
   ====================================================== */

/* на маленьких экранах сохраняем 2 карточки, но уменьшаем размеры */
@media (max-width: 600px) {
    .inventory-items {
        gap: 12px;
    }

    .item-card {
        width: 90%;
        max-width: none;
        padding: 10px;
    }

    .item-image {
        width: 120px;
    }

    .item-card button {
        height: 40px;
        font-size: 13px;
    }
}


/* ======================================================
   Мобильная адаптация (баланс между меню и инвентарём)
   ====================================================== */
@media (max-width: 600px) {
    /* Контейнер навигации — меньше, но не исчезает */
    .navigation_menu {
        height: 120px;          /* было 200px — компактнее */
        margin: 6px 8px;
        border-radius: 6px;
    }

    /* Кнопки в меню — ниже и плотнее */
    .navigation_menu div {
        font-size: 13px;
        padding: 4px 0;
        height: 30px;           /* ограничиваем высоту */
    }

    /* Иконки — меньше, чтобы уместились */
    .navigation_menu div img {
        width: 18px;
        height: 18px;
        margin: 6px;
    }

    /* Кошелёк — компактный */
    .Wallet {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        margin: 8px;
        gap: 6px;
    }

    .wallet-item {
        height: 42px;
        font-size: 13px;
    }

    /* Основная зона контента (инвентарь / история) */
    .menu {
        height: calc(100vh - 230px); /* оставляем место под шапку + меню */
        margin: 8px;
        background-color: #121212;
        border-radius: 8px;
        overflow-y: auto;
        padding: 8px;
        padding-bottom: 100px;
    }

    /* Контейнер карточек — плотный, но 2 в ряд */
    .inventory-items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 6px;
        justify-items: center;
        text-align: center;
    }

    /* Карточки предметов чуть меньше, но читаемы */
    .item-card {
        width: 90%;
        max-width: 180px;
        padding: 10px;
    }

    .item-image {
        width: 110px;
        max-height: 160px;
    }

    .item-card button {
        height: 38px;
        font-size: 13px;
    }
}




/* ======================================================
   Стили для истории
   ====================================================== */
/* Контейнер карточек истории */
.history-items {
    display: flex;
    flex-direction: column;
    gap: 10px;      /* расстояние между карточками */
    padding: 0 10px; /* отступы слева и справа */
    box-sizing: border-box;
    width: 100%;
}
/* Общий стиль карточки истории */
.history-item {
    display: flex;
    justify-content: space-between;
    height: 50px;
    border-radius: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #1C1C1C; /* Тёмный фон */
    color: #fff;
    font-size: 14px;
}



/* ======================================================
   Стили для рулеток (в истории)
   ====================================================== */
/* Основной контейнер рулетки */
.roul-item {
    display: flex;
    justify-content: space-between; /* Равномерное распределение элементов */
    align-items: center; /* Вертикальное выравнивание по центру */
    background-color: #2A2A2A;
    padding: 10px;
    border-radius: 10px;
    gap: 10px; /* Расстояние между элементами */
    color: #fff;
    width: 100%; /* Чтобы элементы растягивались на всю ширину */
}

/* ID рулетки */
.roul-id {
    font-size: 15px;
    text-align: left; /* По левому краю */
    flex: 1; /* Равномерное распределение пространства */
    display: flex;
    flex-direction: column;
}

.roul-id span:first-child {
    font-weight: 400; /* "Рулетка" обычным шрифтом */
}

.roul-id span:last-child {
    font-weight: 700; /* "#248" жирным */
}

/* Тип рулетки */
.type {
    text-align: center;
    font-size: 15px;
    line-height: 1.2;
    flex: 1; /* Равномерное распределение пространства */
    display: flex;
    flex-direction: column;
}

.type span:first-child {
    font-weight: 300; /* "Тип:" тонким */
}

.type span:last-child {
    font-weight: 700; /* Сам текст типа жирным */
}

/* Информация о покупке */
.purchase-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    line-height: 1.2;
    flex: 1; /* Равномерное распределение пространства */
}

.purchase-label {
    font-weight: 300; /* "Куплено за:" тонким */
    color: rgba(200, 200, 200, 0.8); /* Серый, чуть прозрачный */
}

.purchase-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 300; /* Число и картинка тонким */
    color: rgba(200, 200, 200, 0.8);
}

.currency {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

/* Информация о выигрыше */
.won {
    text-align: center;
    font-size: 15px;
    line-height: 1.2;
    flex: 1; /* Равномерное распределение пространства */
    display: flex;
    flex-direction: column;
}

.won span:first-child {
    font-weight: 700; /* "Выиграно:" жирным */
    color: rgba(236, 236, 236, 0.8); /* Светло-серый, чуть прозрачный */
}

.won span:last-child {
    font-weight: 700; /* Сам выигрыш жирным */
    color: #9b59b6; /* Фиолетовый */
}

/* Дата */
.date {
    display: inline-block;
    text-align: center;
    color: rgba(236, 236, 236, 0.8); /* Светло-серый, чуть прозрачный */
    font-weight: 100; /* Обычный вес шрифта */
    font-size: 15px;
    line-height: 1.2;
    flex: 1; /* Равномерное распределение пространства */
}

/* ======================================================
   Стили для спинов (в истории)
   ====================================================== */
/* Основной контейнер спина */
.slot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #2A2A2A; /* Тёмный фон */
}

/* Левая информация спина */
.slot-item .info-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Контейнер для барабанов */
.slot-item .reels {
    display: flex;
    gap: 5px;
    background-color: #3A3A3A; /* Светлее, чем фон карточки */
    padding: 5px;
    border-radius: 10px;
    margin: 10px;
}

.reel-image {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Адаптивный дизайн */
@media (min-width: 600px) {
    .history-item {
        height: 60px;
    }
    .reel-image {
        width: 40px;
        height: 40px;
    }
}

/* Общие стили для текста в спинах */
.slot-item span span {
    font-size: 15px;
    font-weight: 700; /* Обычный вес шрифта */
}

/* Стиль для цены */
.slot-item span span#prc {
    font-size: 15px;
    font-weight: 300;
    color: #bebebe;
    line-height: 12px; /* Уменьшенное расстояние между строками */
}

/* Стиль для информации о выигрыше */
.slot-item span span#won {
    display: inline-block;
    text-align: center;
    color: rgba(236, 236, 236, 0.8); /* Светло-серый, чуть прозрачный */
}

/* Стиль для "Да" (выиграл) */
.slot-item span span#yes_or_no.won {
    color: #4CAF50; /* Зелёный */
    font-weight: 600;
}

/* Стиль для "Нет" (не выиграл) */
.slot-item span span#yes_or_no.lost {
    color: #F44336; /* Красный */
    font-weight: 600;
}

/* Стиль для даты */
.slot-item span span.date {
    display: inline-block;
    text-align: center;
    color: rgba(236, 236, 236, 0.8); /* Светло-серый, чуть прозрачный */
    font-weight: 100; /* Обычный вес шрифта */
}

/* Контейнер для цены */
#prc-container {
    display: flex;
    flex-direction: column; /* Колонки: первая строка, вторая строка */
}

.price-value {
    display: inline-flex; /* Число и картинка на одной линии */
    align-items: center;  /* Вертикальное выравнивание */
    gap: 2px;             /* Небольшой зазор между числом и картинкой */
}

/* Стиль для текста цены */
#prc {
    font-weight: 500;
    color: #bebebe;
}

/* Иконка валюты */
.currency-icon {
    width: 11px;
    height: 11px;
    object-fit: contain;
    position: relative;
    top: -1px; /* Отрицательное значение поднимает вверх */
}

/* ======================================================
   Админ-панель
   ====================================================== */
/* Скрытие кнопки админ-панели для обычных пользователей */
#admin-bth.hidden {
    display: none;
}














.promocode {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}
.promocode.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.promocode.active .promocode-container {
  transform: scale(1);
}
.promocode-container {
  background: #1c1c1c;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  width: 320px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.promocode-container h1 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
}
.input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.input-wrapper input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 42px 12px 14px;
  border-radius: 12px;
  border: none;
  outline: none;
  background: #2b2b2b;
  color: #fff;
  font-size: 14px;
}
.input-wrapper img {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.7;
  pointer-events: none;
}
.apply-promocode {
     -webkit-tap-highlight-color: transparent;
    outline: none; 
  width: 100%;
  padding: 12px;
  background: #3b6eff;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.apply-promocode:hover {
  background: #345de0;
}
.promo-info {
  font-size: 14px;
  color: #aaa;
  margin-top: 12px;
}
#promo-bth span:active {
  transform: scale(0.95); /* Лёгкое нажатие */
}


@keyframes slideOut {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -120%);
        opacity: 0;
    }
}





.buy-stars-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);

  display: flex;               /* модалка всегда в DOM */
  align-items: center;
  justify-content: center;

  opacity: 0;                  /* скрыта */
  visibility: hidden;          /* убираем клики */
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}
.buy-stars-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.buy-stars-container {
  background: #1c1c1c;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  width: 320px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.buy-stars-modal.active .buy-stars-container {
  transform: scale(1);
}
.buy-stars-container h1 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
}
.buy-stars-input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.buy-stars-input-wrapper input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 42px 12px 14px;
  border-radius: 12px;
  border: none;
  outline: none;
  background: #2b2b2b;
  color: #fff;
  font-size: 14px;
}
.buy-stars-input-wrapper img {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.7;
  pointer-events: none;
}
.buy-stars-button {
     -webkit-tap-highlight-color: transparent;
    outline: none;
  width: 100%;
  padding: 12px;
  background: #3b6eff;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.buy-stars-info {
  font-size: 14px;
  color: #aaa;
  margin-top: 12px;
}


/* --- Модальное окно для вывода звёзд --- */
.withdraw-stars-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}
.withdraw-stars-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.withdraw-stars-container {
  background: #1c1c1c;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  width: 320px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}
.withdraw-stars-modal.active .withdraw-stars-container {
  transform: scale(1);
}
.withdraw-stars-container h1 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 20px;
}
.withdraw-stars-input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.withdraw-stars-input-wrapper input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 42px 12px 14px;
  border-radius: 12px;
  border: none;
  outline: none;
  background: #2b2b2b;
  color: #fff;
  font-size: 14px;
}
.withdraw-stars-input-wrapper img {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.7;
  pointer-events: none;
}
.withdraw-stars-button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  width: 100%;
  padding: 12px;
  background: #3b6eff;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.withdraw-stars-info {
  font-size: 14px;
  color: #aaa;
  margin-top: 12px;
}








/* Обёртка для отступов от экрана */
.scam-wrapper {
    width: 100%;
    padding: 0 15px;       /* отступ от краёв экрана */
    box-sizing: border-box;
}

/* Основной блок SCAM */
.SCAM {
    display: flex;
    flex-direction: column; /* текст и полоска сверху, элементы ниже */
    width: calc(100% - 20px); /* уменьшаем ширину на 20px */
    height: 160px;
    background-color: #191919;
    position: relative;
    overflow: hidden;      /* запрещаем выход элементов за SCAM */
    border-radius: 10px;
    gap: 10px;
    scroll-behavior: smooth;
    box-sizing: border-box;
    margin: 0 auto;        /* чтобы точно не прилипала */
    padding: 0 10px;       /* небольшой внутренний отступ для элементов */
}

/* Заголовок */
.SCAM .scam-header {
    display: flex;
    flex-direction: column;
    gap: 5px;            
    margin-top: 10px;
    align-items: center;   /* центрируем текст и полоску */
}

.SCAM .scam-header p {
    color: #777777;
    font-size: 14px;
    margin: 0;
    text-align: center;
    font-weight: 300;
}

/* Полоска */
.SCAM .scam-header .line-top {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

/* Контейнер с предметами */
.SCAM .scam-items {
    display: flex;
    width: 100%;
    height: 100px;
    overflow: hidden;       /* скрываем выходящие элементы */
    position: relative;
}

/* Внутренний контейнер для бегущей строки */
.SCAM .scam-items .scam-inner {
    display: flex;
    gap: 10px;
    animation: scrollX 10s linear infinite; /* движение слева направо */
}

/* Анимация движения по X (туда-сюда) */
@keyframes scrollX {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-45%); /* подстрой под количество предметов */
    }
    100% {
        transform: translateX(0);
    }
}

/* Элементы с картинками */
.SCAM .scam-items .item {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Картинки внутри элементов */
.SCAM .scam-items .item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* не выходит за границы блока */
    display: block;
}













.spin-container {
    width: calc(100% - 20px);
    height: 180px; /* уменьшено с 180px */
    margin: 10px auto;
    display: flex;
    background-color: #191919;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.slot-column {
    width: 100%;
    height: 100%;
    flex: 1;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5px; /* чуть меньше, чем было */
}


.slot-inner {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 6s cubic-bezier(0.25, 0.1, 0.25, 1); /* Синхронизировано с JS */
    will-change: transform;
}

.slot-inner li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    border-radius: 10px;
    background: transparent;
    scroll-behavior: smooth;
}

.slot-inner li img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
}

.divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #2A2A2A;
}

.divider-left {
    left: 33.33%;
}

.divider-right {
    left: 66.66%;
}



/* Overlay для приза */
.spin-reward-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 99999;

    pointer-events: none;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 200ms ease, transform 200ms ease; /* Укоротили transition для быстрее отклика */

    display: block;
}

/* Когда показываем */
.spin-reward-overlay.show {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
}

/* Картинка приза — сверху, по центру */
.spin-reward-overlay img {
    position: absolute;
    top: 15%;               
    left: 50%;
    transform: translateX(-50%);
    max-width: 70%;
    max-height: 40%;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(30,30,30,0.9), rgba(60,60,60,0.9)); /* Оставили градиент, но без inset shadow */
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); /* Уменьшили shadow для производительности */
    transition: transform 300ms ease; /* Упростили transition, убрали cubic-bezier */
}

/* Анимация появления */
.spin-reward-overlay.show img {
    animation: prizePop 300ms ease both; /* Укоротили анимацию и упростили */
}
@keyframes prizePop {
    0%   { transform: translateX(-50%) scale(0.85) translateY(-6px); opacity: 0; }
    100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; } /* Убрали промежуточный шаг для проще расчётов */
}

/* Кнопка — по центру ниже картинки */
.spin-reward-overlay button {
    position: absolute;
    top: 65%;             
    left: 50%;
    transform: translateX(-50%);
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(90deg,#ff9f1c,#ff6b6b);
    color: white;
    font-weight: 600;
    font-size: 18px;
    padding: 12px 28px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Уменьшили shadow */
    cursor: pointer;
    transition: transform 100ms ease, box-shadow 100ms ease, opacity 100ms ease; /* Укоротили transition */
}

/* Акцент при нажатии */
.spin-reward-overlay button:active { transform: translateX(-50%) translateY(2px) scale(0.995); }
.spin-reward-overlay button:focus { outline: none; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } /* Уменьшили shadow */

/* Скрытие по умолчанию */
#rewardOverlay { display: block; }

/* Медиа-запрос для мобильных: дополнительные оптимизации */
@media (max-width: 768px) {
    .spin-reward-overlay img {
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Ещё уменьшили shadow на мобилках */
        transition: none; /* Убрали transition для img на мобилках */
    }
    
    .spin-reward-overlay.show img {
        animation: none; /* Убрали анимацию на мобилках для снижения лагов */
    }
    
    .spin-reward-overlay button {
        box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Уменьшили shadow кнопки */
        transition: none; /* Убрали transition для кнопки */
    }
    
    .spin-reward-overlay button:focus {
        box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    }
}







/* Верхние кнопки */
.spin-buttons-container {
    width: calc(100% - 20px);
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.spin-btn {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    background-color: #191919; /* фон не меняется */
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, border 0.2s ease;
    border: 1px solid transparent; /* по умолчанию нет обводки */
    font-weight: 600;
    font-size: 20px;
}

.spin-btn:active {
    transform: scale(0.95);
}

/* Класс для выбранной кнопки */
.spin-btn.active {
    border: 1px solid #3A64CD; /* синяя обводка только для выбранной */
}

/* Нижняя кнопка */
.spin-crut {
    width: calc(100% - 20px);
    margin: 10px auto;
    text-align: center;
    padding: 14px 0;
    font-weight: 600;
    font-size: 24px;
    border: 1px solid #3A64CD;
    border-radius: 8px;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.spin-crut:active {
    transform: scale(0.95);
}

.spin-crut.inactive {
    border: 1px solid #252525;
    cursor: not-allowed;
    opacity: 0.7; /* Делаем чуть тусклее для индикации неактивности */
    pointer-events: auto; /* Разрешаем клики, чтобы обработать в JS */
}


/* Слот-лента */
.slot-inner {
    list-style: none;       /* убираем точки маркеров */
    padding: 0;             /* убираем внутренние отступы */
    margin: 0;              /* убираем внешние отступы */
    
    display: flex;
    flex-direction: column; /* вертикально */
    align-items: center;    /* центрируем по горизонтали */
    gap: 10px;              /* расстояние между картинками */
    
    transition: transform 2s cubic-bezier(.15,.58,.69,.85); /* плавная анимация */
    will-change: transform;
}

/* Элементы списка (ячейки барабана) */
.slot-inner li {
    list-style: none;       /* точно убираем точки */
    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    
    height: 180px;          /* высота ячейки */
    width: 100px;           /* ширина ячейки */
    border-radius: 10px;
    background: transparent; /* или цвет фона, если нужен */
}

/* Изображение в элементе рулетки */
.slot-inner li img {
    max-width: 100%;        /* вписываем изображение в ячейку */
    max-height: 100%;
    object-fit: contain;
    display: block;
}


#histore-spins {
    display: flex;
    height: 400px;               /* фиксированная высота */
    margin: 10px;                /* отступы со всех сторон */
    width: calc(100% - 20px);    /* ширина на весь контейнер минус левый и правый отступ */
    box-sizing: border-box;      /* чтобы padding и border не ломали ширину */
    overflow-y: auto;            /* Скроллинг при переполнении */
    justify-content: flex-start; /* элементы сверху при заполнении */
    align-items: stretch;        /* чтобы элементы растягивались по ширине */
}













/* Заголовок */
.h1-task{
  font-size: 24px;
  margin: 35px 20px 12px; /* top right/left bottom */
  font-weight: 700;
}

/* контейнер: делаем его flex-контейнером колонкой с ограниченной высотой */
.task-wind {
  margin: 0 20px 20px;
  /* вот тут важно — либо фиксированная высота, либо вычисляемая от вьюпорта */
  height: calc(100vh - 120px); /* пример: подгоняй под шапку/отступы */
  display: flex;
  flex-direction: column;
  background-color: #191919;
  border-radius: 8px;
  padding: 12px;
  overflow: hidden; /* содержимое .task-inner будет скроллиться */
}

/* внутренний блок: занимает всё доступное место и скроллится внутри */
.task-inner {
  flex: 1 1 auto;   /* займёт всё свободное пространство контейнера */
  min-height: 0;    /* Ключевой момент для работы overflow внутри flex-контейнера */
  overflow-y: auto; /* вот тут появляется скролл */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

/* Карточка задания */
.tack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #262626;   /* чуть светлее, чем фон контейнера */
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  min-height: 56px;
}

/* Левый блок с заголовком и подсказкой */
.task-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto; /* займёт доступное пространство */
  min-width: 0;   /* важно для text-overflow внутри flex */
}

.tack h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* обрезаем длинные названия как на скрине */
}

/* описание и награда */
.task-sub {
  margin: 0;
  font-size: 12px;
  color: #bdbdbd;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reward-icon {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: middle;
    margin-left: 3px; /* небольшой отступ от числа */
}

/* кнопка выполнить — синяя, скруглённая */
.task-btn-complete {
        -webkit-tap-highlight-color: transparent;
    outline: none;
  background: linear-gradient(#2f6df6, #1e5df0); /* красивый градиент */
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(31, 85, 255, 0.15);
  transition: transform .12s ease, opacity .12s ease;
  flex: 0 0 auto; /* чтобы кнопка не сжималась */
}

/* hover/active */
.task-btn-complete:hover { transform: translateY(-2px); }
.task-btn-complete:active { transform: translateY(0); opacity: 0.95; }










/* Пустой инвентарь */
.empty-inventory-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.empty-inventory-title {
    font-size: 28px;
    color: #fff;
    margin-bottom: 12px;
}

.empty-inventory-subtitle {
    font-size: 16px;
    color: #aaa;
    margin: 0;
}

/* Карточки предметов */
.inventory-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    box-sizing: border-box;
}

.item-card {
    background: #1e1e1e;
    border-radius: 10px;
    padding: 10px;
    width: 140px;
    flex: 1 1 120px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.quantity {
    font-size: 14px;
    color: #fff;
}


/* Адаптивность */
@media (max-width: 768px) {
    .empty-inventory-title {
        font-size: 24px;
    }
    .empty-inventory-subtitle {
        font-size: 14px;
    }
    .item-card {
        width: 110px;
    }
    .item-image {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) { /* iPhone SE и маленькие экраны */
    .empty-inventory-title {
        font-size: 20px;
    }
    .empty-inventory-subtitle {
        font-size: 12px;
    }
    .item-card {
        width: 90px;
        padding: 6px;
    }
    .item-image {
        width: 50px;
        height: 50px;
    }
    .sell-button, .out-button {
        font-size: 10px;
        padding: 3px 5px;
    }
}