.mobile-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    position:fixed;

    top:22px;

    right:16px;

    width:42px;

    height:42px;

    border-radius:12px;

    background:
    rgba(10,18,35,.72);

    border:1px solid rgba(140,190,255,.08);

    backdrop-filter:blur(10px);

    color:#ffffff;

    font-size:26px;

    cursor:pointer;

    z-index:999999;

    transition:.25s;
}

.mobile-toggle:hover{

    background:
    rgba(20,35,60,.92);
}

/* MOBILE */

@media(max-width:768px){

    .mobile-toggle{

        display:block;

        position:absolute;

        right:20px;

        top:22px;

        z-index:100001;
    }

.menu {

    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:0;

    width:100vw;

    height:100vh;

    margin:0;

    padding:0;

    background:
    rgba(0,0,0,.985);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:22px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.3s;

    z-index:999998;
}

    .menu.active{

        left:0;
    }

.menu a{

    background:none;

    border:none;

    padding:0;

    color:#dce6f7;

    font-size:15px;

    font-weight:400;

    border-radius:0;

    transform:none;
}

    .login-btn{

        margin-top:15px;
    }
}

@media(max-width:768px){

    .login-btn{

        display:none;
    }
}

@media(max-width:768px){

    .mobile-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        position:fixed;

        top:20px;

        right:20px;

        width:48px;

        height:48px;

        font-size:34px;

        color:#ffffff;

        cursor:pointer;

        z-index:999999;

        user-select:none;
    }

    .menu{

        position:fixed;

        inset:0;

        width:100%;

        height:100vh;

        background:
        rgba(0,0,0,.985);

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        padding-top:5px;

        gap:20px;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:none;

        z-index:999998;
    }

    .menu.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;
    }

    .menu a{

        background:none;

        border:none;

        padding:0;

        color:#dce6f7;

        font-size:25px;

        font-weight:300;

        border-radius:0;

        transform:none;
    }

    .menu a:hover{

        background:none;

        transform:none;

        color:#ffffff;
    }

    .login-btn{

        display:none;
    }
}

    overflow-x:hidden;
}

@media(max-width:768px){

    *{

        max-width:100%;
    }
}

@media(max-width:768px){

    body{

        overflow-x:hidden;
    }

    .menu{

        width:100%;

        max-width:100%;

        overflow-x:hidden;
    }

    .rank-card,
    .main-card,
    .server-card,
    .news-card-main,
    .news-box{

        width:100%;

        max-width:100%;

        box-sizing:border-box;
    }

    .tg-float{

        max-width:calc(100% - 20px);
    }

    a,
    p,
    div,
    span{

        word-break:break-word;
    }
}

@media(max-width:768px){

    .buttons{

        flex-direction:row;

        gap:12px;
    }

    .btn{

        width:48%;

        padding:16px 10px;

        font-size:15px;

        text-align:center;

        white-space:nowrap;
    }

    @media(max-width:768px){

    .main-card h1{

        display:none;
    }
}

*{

    -webkit-tap-highlight-color: transparent;
}

.mobile-toggle{

    outline:none;

    -webkit-tap-highlight-color: transparent;
}

@media(max-width:768px){

    .lang-switch{

        margin-left:0;

        margin-top:12px;

        justify-content:center;
    }
}

@media(max-width:768px){

    .lang-switch{

        position:absolute;

right: 291px;

top: 43%;

        transform:translateY(-50%);

        margin:0;
    }

    .lang-btn{

        padding:6px 10px;

        font-size:12px;
    }
}

