* {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Возвращаем внутренние отступы кнопкам, чтобы текст не прилипал к краям */
.card, .knopka {
    padding: 10px 15px !important; 
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(25, 12, 42);

    /* 2. Накладываем два мягких радиальных «пятна» света */
    background-image: 
        radial-gradient(circle at 20% 30%, rgb(100, 55, 136) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgb(70, 30, 110) 0%, transparent 60%);

    /* 3. Увеличиваем размер фона, чтобы движениям было где «развернуться» */
    background-size: 140% 140%;

    /* 4. Медленная и очень плавная анимация (10 секунд) */
    animation: smoothGlow 50s ease-in-out infinite alternate;

    height: 100vh;
    width: 100%;
    
    font-family: "Unbounded", sans-serif;
    gap: 10px;
}

/* 5. Плавное движение и расширение световых пятен */
@keyframes smoothGlow {
    0% {
        background-position: 0% 0%;
        filter: hue-rotate(0deg);
    }
    50% {
        background-position: 100% 50%;
        filter: hue-rotate(15deg); /* Лёгкий, едва заметный сдвиг оттенка */
    }
    100% {
        background-position: 50% 100%;
        filter: hue-rotate(0deg);
    }
}

.karta {
    width: auto;
    height: auto;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    
}

.card {
    background-color: rgb(34, 33, 33);
     width: 300px; 
     height: 50px; 
     
     border: none;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     animation: vilet 2s
}

.card:hover {
    cursor: pointer;
}

.kruzhok {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border: 2px solid rgb(59, 59, 59);
    
    /* Добавляем сам outline в обычном состоянии */
    outline: 2px solid transparent; 
    outline-offset: 2px;
    
    transition: all 0.2s ease; /* Плавный переход */
    margin-right: 5px;
}

.kruzhok.active {
    /* 1. Цвет центральной точки */
    background-color: rgb(88, 52, 134); 
    border-color: rgb(88, 52, 134);

    /* 2. Внешняя рамка и зазор к ней */
    outline: 2px solid rgb(88, 52, 134); /* Задаем цвет внешней линии */
    outline-offset: 2px;                  /* Точное числовое значение зазора */
}


@keyframes vilet {
    
    0% {
        opacity: 0;
         transform:  translateY(25px);
    }
    100% {
        opacity: 1;
         transform:  translateY(0);
    }

    
}

.knopka {
    display: none;
    width: auto;
    height: auto;
    border-radius: 25px;
    border: none;
    padding: 10px;
    animation-name: vilet;
    animation-duration: 3s;
    background-color: rgb(34, 33, 33);
    color: whitesmoke;
    
}

.knopka.active {
    display : flex;
}

.knopka:hover {
    cursor: pointer;
}

@keyframes ischez {

    0% {
        opacity: 0%;

    }
    100% {
        opacity: 100%;
        
    }
    
}

.loader-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #121019 !important; 
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999 !important;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Крутящийся индикатор загрузки */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #8b5cf6; /* Фиолетовый акцент */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Класс для плавного исчезновения */
.loader-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
}