*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    height:100%;
    font-family:'Segoe UI', sans-serif;
    background:#07070d;
    color:white;
    overflow:hidden;
}

/* 🔥 ФОН */
body::before{
    content:"";
    position:fixed;
    width:200%;
    height:200%;
    background:
        radial-gradient(circle at 30% 40%, #5f00ff33, transparent 40%),
        radial-gradient(circle at 70% 60%, #8b2cff33, transparent 40%);
    animation:bgMove 15s infinite alternate ease-in-out;
    z-index:-1;
}

@keyframes bgMove{
    0%{ transform:translate(-10%, -10%) scale(1); }
    100%{ transform:translate(-20%, -20%) scale(1.2); }
}

/* ======================= */
/* ===== ГЛАВНАЯ ===== */
/* ======================= */

.top-bar{
    position:absolute;
    top:5vh;
    width:100%;
    text-align:center;
}

.title{
    font-size:22px;
    letter-spacing:4px;
    color:#8b2cff;
    margin-bottom:15px;
}

.counter{
    font-size:60px;
    color:#b266ff;
    text-shadow:0 0 25px #5f00ff;
}

/* Центр */
.center-area{
    position:absolute;
    top:60%;
    left:50%;
    transform:translate(-50%,-50%);
    width:400px;
    height:400px;
}

/* Canvas поверх кнопки */
#voidFlame{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
    pointer-events:none; /* Чтобы кнопка была кликабельной */
    z-index:2;
}

.aura-circle{
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle,#5f00ff 0%,#1a0026 70%);
    box-shadow:0 0 120px #8b2cff, inset 0 0 50px #000;
    cursor:pointer;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:3; /* Над canvas */
}

/* Canvas */
canvas{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* ======================= */
/* ===== AUTH ===== */
/* ======================= */

.auth-container{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.auth-box{
    background:rgba(20,0,40,0.6);
    backdrop-filter:blur(20px);
    padding:40px;
    border-radius:20px;
    width:100%;
    max-width:420px;
    box-shadow:0 0 40px #5f00ff55;
}

.auth-title{
    text-align:center;
    font-size:26px;
    letter-spacing:3px;
    color:#8b2cff;
    margin-bottom:30px;
}

.auth-box input{
    width:100%;
    padding:16px;
    margin-bottom:20px;
    border:none;
    border-radius:12px;
    background:#140024;
    color:white;
    font-size:16px;
    outline:none;
}

.auth-box button{
    width:100%;
    padding:16px;
    border:none;
    border-radius:12px;
    background:linear-gradient(90deg,#5f00ff,#8b2cff);
    color:white;
    font-weight:bold;
    font-size:17px;
    cursor:pointer;
}

/* ======================= */
/* 📱 МОБИЛЬНАЯ ВЕРСИЯ */
/* ======================= */

@media(max-width:768px){

    .counter{
        font-size:42px;
    }

    .center-area{
        width:300px;
        height:300px;
        top:55%;
    }

    .aura-circle{
        width:200px;
        height:200px;
    }

    #voidFlame{
        width:100%;
        height:100%;
    }

    .title{
        font-size:18px;
    }

    .auth-box{
        max-width:100%;
        padding:30px;
    }

    .auth-box input{
        font-size:18px;
        padding:18px;
    }

    .auth-box button{
        font-size:18px;
        padding:18px;
    }
}

/* ⚙ Кнопка настроек */
.settings-btn{
    position:fixed;
    top:20px;
    left:20px;
    font-size:26px;
    background:#5f00ff;
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 0 25px #8b2cff;
    z-index:1000;
    transition:0.3s;
}
.settings-btn:hover{
    transform:rotate(90deg) scale(1.1);
}

/* Модальное окно */
.settings-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.8);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:2000;
}

.settings-box{
    background:#0d001a;
    padding:30px;
    width:320px;
    border-radius:20px;
    box-shadow:0 0 40px #8b2cff;
    color:white;
}

.settings-title{
    font-size:20px;
    margin-bottom:25px;
    text-align:center;
    color:#8b2cff;
}

.setting-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

/* Переключатель */
.switch{
    position:relative;
    display:inline-block;
    width:50px;
    height:26px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
}

.slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background:#333;
    border-radius:26px;
    transition:.4s;
}

.slider:before{
    position:absolute;
    content:"";
    height:20px;
    width:20px;
    left:3px;
    bottom:3px;
    background:white;
    border-radius:50%;
    transition:.4s;
}

input:checked + .slider{
    background:#5f00ff;
}

input:checked + .slider:before{
    transform:translateX(24px);
}

.close-settings{
    width:100%;
    padding:10px;
    background:#5f00ff;
    border:none;
    border-radius:10px;
    color:white;
    cursor:pointer;
}

.expandable {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.expand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.expand-header .arrow {
    transition: transform 0.3s ease;
}

.expand-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}