/* cyrillic-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
*{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.enter-name input {
    width: 270px;
    text-align: center;
    margin: 0 20px 0;
    font-weight: 900;
    height: 50px;
    font-size: 22px;
    background-color: #fafafa;
    border: 0;
    box-shadow: inset 0 8px 0 hsl(252deg 45% 4% / 10%);
    color: #080610;
    border-radius: 10px;
}

html body {
    font-family: 'Nunito', sans-serif;
	padding: 0;
    margin: 0;
    overflow: hidden;
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
    width: 100%;
    height: 100%;
    position: fixed;
    transition: linear 0.25s;
}

.toggle-box{
    position: sticky;
    top: 10vh;
    left: 0;
    width: fit-content;
}

.box-left {
    max-width: 18em;
    min-width: 18em;
    height: 100%;
    background-color: #2e313a;
}
.box-right {
    width: auto;
    height: 100%;
}

#view {
    font-family: 'Ubuntu';
    position: absolute;
    width: 100%;
    margin: 0;
    height: 100%;
    padding: 0;
    overflow: unset;
    outline: none;
}

#joystick {
    display: none;
    position:absolute;
    z-index: 1;
    pointer-events: none;
}

/*  leaderbord */

.top-right-box {
    position: absolute;
    top: 1vh;
    right: 1vh;
    scale: 0.9;
    width: 413px;
    transform-origin: top right;
}
#div_lb {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    width: 320px;
    text-align: center;
    float: right;
    padding: 1em;
    overflow: hidden;
    user-select: none;
    border-radius: 18px;
    will-change: auto;
}

#div_lb > .header {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    overflow: hidden;
    font-family: Ubuntu;
}

#div_lb div div{
    font-size:20px;
    font-weight:bold;
    white-space: nowrap;
}
#lb_detail {
    font-weight: bold;
    padding-bottom: 5px!important;
    text-align: left;
    padding-left: 5px;
    font-family: Ubuntu;
}
#div_lb,

#div_score {
    background-color: rgba(0, 0, 0, .4);
    cursor: default;
    -khtml-user-select: none;
}
.menubtn {
    display: block;
    font-size: 20px;
    position: absolute;
    background-color: #777;
    opacity: 0.5;
    border-radius: 18px;
    padding: 15px;
}
.menubtn:hover {
    background-color: rgb(125 125 125 / 60%);
}
.menubtn:active {
    scale:0.95;
}
.menubtn img, .teambtn img {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 0.2em;
}

/*  leaderbord end */

/* map */

.top-left-box {
    position: absolute;
    transform-origin: top left;
    top: 1vh;
    left: 1vh;
    scale: 1;
}
#map {
    position: relative;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255, 255, 255, .4);
    pointer-events: none;
    border-radius: 1em;
    pointer-events: none;
    margin-bottom: 15px;
}

#zoom-block {
    display: flex;
}
#zoom-block p {
    width: 72px;
    background-position: center;
    height: 72px;
    border-radius: 17px;
    background-color: #777;
    background-size: 2em;
    opacity: 0.5;
    background-size: 40px;
    margin-right: 1em;
    margin-bottom: 0;
    color: #000;
    cursor: pointer;
}
#minus:hover, #plus:hover, #macro-btn:hover {
    background-color: rgb(125 125 125 / 60%);
}
#macro-btn{
    display: none;
    background-image: url(https://cdn-icons-png.flaticon.com/512/709/709612.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
#minus{
    background-image: url(https://cdn-icons-png.flaticon.com/512/1665/1665663.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
#plus{
        background-image: url(https://cdn-icons-png.flaticon.com/512/1665/1665629.png);
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
}
/* map end */

/* control buttons */
.bottom-right-box {
    position: absolute;
    transform-origin: bottom right;
    bottom: 2vh;
    right: 1vh;
}
#touchCircle {
    width: 4vw;
    height: 4vw;
    border-radius: 2vw;
    background: #f00;
    opacity: 0.3;
    z-index: 3;
}
#splitBtn {
    background-image: url(./assets/img/split.png);
    background-repeat: no-repeat;
    cursor: unset;
    background-size: contain;
    margin: 0 0 40px 75px;
    cursor: pointer;
}
#ejectBtn {
    background-image: url(./assets/img/eject.png);
    background-repeat: no-repeat;
    cursor: unset;
    background-size: contain;
    margin: 0;
    cursor: pointer;
}
#impulseBtn {
    display: none;
    margin: -65px 0 30px -90px;
    width: 150px;
    height: 150px;
    border-radius: 10em;
    background-color: #777;
    opacity: 0.5;
    cursor: pointer;
    position: relative;
}
#impulseBtn::before {
    content: "⇄";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Ubuntu, sans-serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: #222;
}
#splitBtn, #ejectBtn {
    width: 200px;
    height: 200px;
    border-radius: 10em;
    background-color: #777;
    opacity: 0.5;
}
#splitBtn:hover, #ejectBtn:hover, #impulseBtn:hover {
    background-color: rgb(143, 143, 143);
}
/* control buttons */


/* chat */

.bottom-left-box {
    position: absolute;
    transform-origin: bottom left;
    bottom: 2vh;
    left: 1vh;
    scale: 1;
}



#chat-main {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .4);
    will-change: auto;
    font-weight: 600;
    background-color: rgb(0 0 0 / 40%);
}
#chat-block{
    width: 20em;
}
.chat-header p {
    text-align: center;
    color: white;
    border-radius: 10px;
    width: auto;
    padding: 16px 15px 12px;
    font-weight: 900;
    text-transform: uppercase;
}

#chat-items {
    padding: 0 10px 0 10px;
    font-size: 13px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 30em;
    width: 98%;
}
#chat-items::-webkit-scrollbar {
    width: 6px;
}
#chat-items::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 6px;
    margin: 1em;
}
#chat-items::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #D9D9DD;
}

#chat_textbox:focus {
    background: rgba(0, 0, 0, .5);
    color:#fff
}
#chat_textbox {
    transition: all .125s ease-in-out;
    background: rgba(0, 0, 0, .2);
    padding: 1em 0;
    text-align: center;
    text-indent: 12px;
    font-weight: 800;
    border: 0;
    box-shadow: 0 0 0 0;
    outline: none;
    color: rgb(255, 255, 255);
    border-radius: 0 0 0 20px;
}
#chat-send {
    border: 0;
    cursor: pointer;
    outline: none;
    border-radius: 0 0 20px 0;
    margin: 0;
    width: 60px;
    background-color: rgb(0 0 0 / 20%);
}
#chat-send img:active{
 scale:1.25;
}
#chat {
    max-width: 395px;
    padding: 1em 1em 0em 1em;
    
}

#chatboxArea2   {
    position: absolute;
    left: 0
}

#chatboxArea2 {
    margin-left: auto;
    margin-right: auto;
    left: 5px;
    width: 37%;
    bottom: 5px
}
#chatboxArea2 img {
    margin-left: 2px
}

#item-user {
    word-break: break-word;
    margin: 0 0 5px 0;
    border-radius: 10px;
    padding: 6px;
    width: 100%;
}
#item-desc {
    background-color: white;
    font-size: 16px;
    border-radius: 4px;
    margin: 0;
    font-weight: 800;
    padding: 1px 8px 0;
    color: #464646;
    white-space: nowrap;
    width: fit-content;
    min-height: 22px!important;
}
#item-message {
    color: #ffffff;
    border-radius: 6px;
    line-height: 1.2;
    font-size: 18px;
    margin: 2px 0 0 0;
    padding: 0 0 0 1px;
    font-weight: 800;
}
.vip-user-chat{
    background: linear-gradient(-45deg, rgb(244 67 54 / 100%), rgb(233 30 99 / 1), rgb(156 39 176 / 100%), rgb(103 58 182 / 100%), rgb(33 150 243 / 100%), rgb(3 169 244 / 100%), rgb(76 175 80 / 100%), rgb(205 220 57 / 100%), rgb(255 193 7 / 100%), rgb(255 152 0 / 100%), rgb(244 67 54 / 100%));
    /* background: linear-gradient(-45deg, rgb(244 67 54 / 90%), rgb(233 30 99 / 0.9), rgb(156 39 176 / 90%), rgb(103 58 182 / 90%),rgb(33 150 243 / 90%), rgb(3 169 244 / 90%),rgb(76 175 80 / 90%), rgb(205 220 57 / 90%), rgb(255 193 7 / 90%), rgb(255 152 0 / 90%),rgb(244 67 54 / 90%)); */
    word-break: break-all;
    padding: 0.5vh 1vh 0.5vh 0.5vh;
    border-radius: 1vh;
    background-size: 1000% 1000%;
    animation: gradient var(--chat-vip-duration, 150s) ease infinite;
    animation-delay: var(--chat-vip-delay, 0s);
    border: 1px solid rgb(255 255 255 / 20%);
    font-size: 1.2em;
    width: fit-content;
}
.vip-user-chat #item-desc {
    background-color: #fff;
    background-size: 1000% 1000%;
    animation: gradient var(--chat-vip-duration, 150s) ease infinite;
    animation-delay: var(--chat-vip-delay, 0s);
    width: 100%;
    text-align: center;
    font-size: 16px;
    border-radius: 0.5vh;
    color: black;
    text-shadow: 0 0 BLACK;
}
.vip-user-chat #item-message {
    text-shadow: 1px 0 rgb(0 0 0 / 75%);
    margin: 5px 0 0 0;
}
.server-user-chat {
    word-break: break-all;
    font-size: 1.2em;
    background: #646464;
    padding: 0.5vh 1vh 0.5vh 0.5vh;
    width: fit-content;
    border-radius: 1vh;
}
.server-user-chat #item-desc {
    font-size: 16px;
    background-color: #ffffff;
    border: 1px solid rgb(255 255 255 / 20%);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin: 5px 0 0 0;
    color: #ff3f3f;
    text-shadow: 0 0 BLACK;
}
.moderator-user-chat {
    word-break: break-all;
    font-size: 1.2em;
    background: #646464;
    padding: 0.5vh 1vh 0.5vh 0.5vh;
    width: fit-content;
    border-radius: 1vh;
}
.moderator-user-chat #item-desc {
    font-size: 16px;
    background-color: #ffffff;
    border: 1px solid rgb(255 255 255 / 20%);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin: 5px 0 0 0;
    color: #ff3f3f;
    text-shadow: 0 0 BLACK;
}

.chat-hidden-old {
    display: none !important;
}

.chat-load-more {
    display: none;
    width: calc(100% - 8px);
    margin: 0 4px 6px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    backdrop-filter: blur(2px);
}

.chat-load-more.is-visible {
    display: block;
}

.chat-load-more:hover {
    background: rgba(255, 255, 255, .12);
}


#chat-main input[type="text"]::placeholder { color: #ffffff; }




/* end chat */
/* touchCircle */
#touchpad {
    background: #000;
    opacity: 0.3;
    width: 20vw;
    height: 20vh;
    left: 0;
    bottom: 0;
}
#touchCircle {
    width: 4vw;
    height: 4vw;
    border-radius: 2vw;
    background: #f00;
    opacity: 0.3;
    z-index: 3;
}
#joystick {
    display: none;
    position:absolute;
    z-index: 999999;
    pointer-events: none;
  }
/* end touchCircle */

/* chat новый боковой чат ожидает решения для оптимизации */
/* 
#chat-main {
    will-change: auto;
    height: 100vh;
    padding-bottom: 10em!important;
    color: rgb(205, 208, 216);
}

.chat-header h4{
    font-weight: 800;
}


#chat-items {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
}

#item-user {
    word-break: break-word;
    margin: 0.5em 0;
    background-color: rgb(0 0 0 / 20%);
    border-radius: 1em;
    transform-origin: left;
}
#item-user:hover {
    background-color: rgb(0 0 0 / 40%);
}
.item-logo img{
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.item-logo div{
    width: 2em;
    background-color: rgb(0 0 0 / 20%);
    border-radius: 100%;
    height: 2em;
}

.item-text{

}

#item-desc {
    color: white;
    font-weight: 800;
    font-size: 18px;
}

#item-message {
    font-weight: 800;
    font-size: 14px;
}


.vip-user-chat {
    background: linear-gradient(360deg, #4058f4,#697dff);
    background-size: 100%;
    animation: gradient 150s ease infinite;
    box-shadow: 0 1px 4px 0 hsl(0deg 0% 0% / 20%);
    width: fit-content;
    color: white;
}
.vip-user-chat:hover {
    background: linear-gradient(360deg, #344ad8,#5769e0);
}


.chat-footer{
    position: absolute;
    bottom: 0;
}
.server-user-chat {
    background: linear-gradient(360deg, #f44040,#ff6969);
    background-size: 100%;
    animation: gradient 150s ease infinite;
    box-shadow: 0 1px 4px 0 hsl(0deg 0% 0% / 20%);
    width: fit-content;
    color: white;
}
.server-user-chat:hover {
    background: linear-gradient(360deg, #db3434,#e05656);
}
#chat_textbox {
    transition: all .25s ease-in-out;
    background: rgba(0, 0, 0, .2);
    padding: 0.5em;
    font-weight: 800;
    outline: none;
    border: 0;
    color: #fff;
}
#chat_textbox::placeholder{
    font-size: 14px;
}
#chat-send {
    cursor: pointer;
    background-color: rgb(255 255 255);
    border: 0;
    padding: 0 1em;
    z-index: 1;
}


#chat-send img{
    width: 15px;
    height: 15px;
}



#chat-items::-webkit-scrollbar {
    width: 6px;
    background-color:rgb(255 255 255 / 20%);
    border-radius:10em;
    display: none;
}

#chat-items::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 6px;
    margin: 1em;
}
#chat-items::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #D9D9DD;
} */

/* end chat */



#overlays {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    backdrop-filter: blur(3px);
    bottom: 0;
    display: none;
    z-index: 1;
    background-color: rgb(18 16 26 / 60%);
}

.panel {
    width: 450px;
    background-color: rgb(32 38 48 / 80%);
    height: auto;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid rgb(255 255 255 / 5%);
    margin: 0 0 10px 0;
}
.info {
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(41 49 61);
    font-size: 30px;
    font-weight: 900;
    padding: 4px 0;
    color: #eaecef;
    cursor: pointer;
}
.info:hover {
    scale: 1.1;
}
@keyframes combinedAttention {
    0%, 100% {
      transform: none;
    }
  
    3% { transform: translateX(-3px); }
    10% { transform: translateX(3px); }
    15% { transform: translateX(-3px); }
    20% { transform: translateX(3px); }
    30% { transform: none; }
  
    /* Остальное (от 16% до 100%) — покой */
  }
  
  .bounce-animated {
    display: inline-block;
    animation: combinedAttention 5s ease-in-out infinite;
  }
.enter-name input {
    width: 270px;
    text-align: center;
    margin: 0 20px 0;
    font-weight: 900;
    height: 50px;
    font-size: 22px;
    background-color: #fafafa;
    border: 0;
    box-shadow: inset 0 8px 0 rgb(31 33 43 / 15%);
    color: #141019;
    border-radius: 10px;
}
.enter-name input:active, .enter-name input:link {
    outline: none;
}
.enter-name input::placeholder{
    color: rgb(30 34 43 / 50%);
}
.enter-name input:focus {
    outline: none;
    background-color: #ffffff;
}
.settings {
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(41 49 61);
    font-size: 31px;
    font-weight: 900;
    cursor: pointer;
}
.settings img {
    width: 25px;
    height: 25px;
}

.settings:hover {
    scale: 1.1;
}

.user{
    font-weight: 900;
    color: #fafafa;
}
.logoutbtn{
    cursor: pointer;
}
.logoutbtn:hover{
    scale: 1.1;
}
.logoutbtn img{
    width: 30px;
    height: 30px;
}
.choose-skin {
    border-radius: 100px;
    margin: 0 15px 0 0;
    cursor: pointer;
}
.skin-input {
    width: 158px;
    border-radius: 100px;
    height: 158px;
    padding: 8px;
    border: 8px solid rgb(51 59 71);
}
.skin-input:hover{
    border: 8px solid rgb(41 49 61);
}
.score, .coin, .bots {
    background-color: rgb(51 59 71);
    width: 237px;
    padding: 8px 10px;
    font-size: 20px;
    border-radius: 10px;
    font-weight: 900;
    color: #eaecef;
}
.score:hover, .coin:hover, .bots:hover {
    background-color: rgb(41 49 61);
}
.score img,.coin img, .bots img{
    width: 30px;
    height: 30px;
}
.count{
    color: #fafafa;
    padding: 2px 0 0;
}











.login {
    width: 100%;
    text-align: center;
    border-radius: 4px;
    background-image: linear-gradient(0deg, #FFC107, #e8b66b);
    border: 0;
    font-size: 20px;
    padding: 8px 0;
    font-weight: 800;
    color: #3a322c;
    margin: 0 auto;
    transition: linear 0.15s;
    cursor: pointer;
}

.login:hover {
    scale:0.95;
}
.login:active {
    scale:0.925;
}
.login img {
    width: 25px;
    opacity: 0.2;
    height: 25px;
    margin-right: 5px;
    display: none;
}

.logout {
    width: 100%;
    text-align: center;
    border-radius: 4px;
    background-image: linear-gradient(0deg, #ff3939, #e86b6b);
    border: 0;
    font-size: 20px;
    padding: 8px 0;
    font-weight: 800;
    color: #fff;
    margin: 10px auto;
    transition: linear 0.15s;
    cursor: pointer;
}
.logout:hover {
    scale:0.95;
}
.logout:active {
    scale:0.925;
}
.logout img {
    width: 25px;
    opacity: 0.2;
    height: 25px;
    margin-right: 5px;
    display: none;
}

.play {
    width: 40%;
    text-align: center;
    border-radius: 6px;
    background: linear-gradient(0deg, #374e84, #4c80af);
    font-size: 30px;
    font-weight: 900;
    height: 42px;
    text-transform: uppercase;
    margin: 0 0 0 3%;
    color: #ffffff;
    transition: linear 0.15s;
    cursor: pointer;
}
.play:hover {
    scale:1.05;
}
.play:active {
    background-color: #93cc52;
    padding: 2px 0 0 0;
}

.play img {
    width: 25px;
    opacity: 0.2;
    height: 25px;
    margin: 0 10px 0 10px;
    display: none;
}
.spectate {
    width: 57%;
    text-align: center;
    border-radius: 6px;
    background: rgb(24 26 32);
    border: 0;
    font-size: 30px;
    font-weight: 900;
    height: 42px;
    color: rgb(71 77 87);
    text-transform: uppercase;
    transition: linear 0.15s;
    cursor: pointer;
}
.spectate:hover {
    background: rgb(0 0 0 / 30%);
    color: rgb(250 250 250 / 50%);
}
.spectate:active {
    scale:0.95;
}
.spectate img {
    width: 25px;
    opacity: 0.2;
    height: 25px;
    margin-right: 5px;
    display: none;
}
.center-box {
    position: relative;
}
.support-fab-dock {
    position: fixed;
    right: max(30px, env(safe-area-inset-right));
    top: max(30px, env(safe-area-inset-top));
    z-index: 25;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}
.support-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    background: #303a4d;
    box-shadow: 0 11px 28px rgba(6, 20, 70, 0.48), inset 0 -4px 10px rgba(0, 0, 0, 0.28);
    color: #ffffff;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    animation: supportFabFloat 2.8s ease-in-out infinite;
    transform: translateZ(0);
}
.support-fab::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 2px solid rgba(110, 227, 255, 0.72);
    opacity: 0.74;
    animation: supportFabPulse 2.2s ease-out infinite;
}
.support-fab::after {
    content: none;
}
.support-fab:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 14px 30px rgba(5, 18, 63, 0.56), inset 0 -4px 12px rgba(0, 0, 0, 0.26);
    filter: brightness(1.03);
}
.support-fab:active {
    transform: translateY(0) scale(0.98);
}
.support-fab:focus-visible {
    outline: 3px solid rgba(190, 245, 255, 0.95);
    outline-offset: 2px;
}
.support-fab-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
}
.support-fab-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.support-fab-hint {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: #ecf6ff;
    background: rgba(8, 19, 39, 0.78);
    border: 1px solid rgba(123, 231, 255, 0.44);
    border-radius: 999px;
    padding: 7px 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
    user-select: none;
    display: none;
}
.support-fab-dock:hover .support-fab-hint,
.support-fab:focus-visible + .support-fab-hint {
    opacity: 0;
    transform: translateX(8px);
}
@keyframes supportFabPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    70% {
        transform: scale(1.12);
        opacity: 0;
    }
    100% {
        transform: scale(1.12);
        opacity: 0;
    }
}
@keyframes supportFabFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}
@media (max-width: 900px) {
    .support-fab-dock {
        right: max(30px, env(safe-area-inset-right));
        top: max(30px, env(safe-area-inset-top));
    }
    .support-fab {
        width: 52px;
        height: 52px;
    }
    .support-fab-icon {
        width: 24px;
        height: 24px;
    }
    .support-fab-hint {
        display: none;
    }
}
#noadv {
    width: 57%;
    text-align: center;
    border-radius: 6px;
    background: rgb(0 0 0 / 20%);
    border: 0;
    font-size: 30px;
    font-weight: 900;
    height: 42px;
    color: rgb(71 77 87);
    text-transform: uppercase;
    transition: linear 0.15s;
    cursor: pointer;
}
#noadv:hover {
    background: rgb(0 0 0 / 30%);
    color: rgb(255 255 255 / 53%);
}
#noadv:active {
    scale:0.95;
}
#noadv img {
    width: 25px;
    opacity: 0.2;
    height: 25px;
    margin-right: 5px;
    display: none;
}
#withadv {
    width: 40%;
    text-align: center;
    border-radius: 6px;
    background: linear-gradient(0deg, #37843a, #4CAF50);
    font-size: 30px;
    font-weight: 900;
    height: 42px;
    text-transform: uppercase;
    margin: 0 0 0 3%;
    color: #ffffff;
    transition: linear 0.15s;
    cursor: pointer;
}
#withadv:hover {
    scale:1.05;
}
#withadv:active {
    background-color: #93cc52;
    padding: 2px 0 0 0;
}

#withadv img {
    width: 25px;
    opacity: 0.2;
    height: 25px;
    margin: 0 10px 0 10px;
    display: none;
}
.shop {
    width: 200px;
    height: 100px;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(67 59 128);
    box-shadow: 0 -6px 0 0 inset rgb(0 0 0 / 30%);
    border: 0;
    padding: 40px 0;
    font-size: 35px;
    background-repeat: no-repeat;
    background-position: center -18px;
    background-size: 150px;
    text-transform: uppercase;
    background-image: url(        https://cdn-icons-png.flaticon.com/512/3208/3208099.png  );
    font-weight: 900;
    color: #f3e7fb;
    transition: linear 0.15s;
    cursor: pointer;
    text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}
.shop:hover {
    scale:1.05;
}
.shop:active {
    background-size: 170px;
    box-shadow: 0 0 0 0 inset rgb(0 0 0 / 30%);
}
.shop img {
    width: 70px;
    opacity: 1;
    height: 70px;
    margin: 25px;
}


.leaders {
    width: 200px;
    height: 100px;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(160 68 158);
    box-shadow: 0 -6px 0 0 inset rgb(0 0 0 / 30%);
    border: 0;
    padding: 40px 0;
    font-size: 35px;
    background-repeat: no-repeat;
    background-position: center -5px;
    background-size: 150px;
    text-transform: uppercase;
    background-image: url(https://cdn-icons-png.flaticon.com/512/13025/13025088.png);
    font-weight: 900;
    color: #f3e7fb;
    transition: linear 0.15s;
    cursor: pointer;
    text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}
.leaders:hover {
    scale:1.05;
}
.leaders:active {
    background-size: 170px;
    box-shadow: 0 0 0 0 inset rgb(0 0 0 / 30%);
}



.disabledcoins {
    background-blend-mode: luminosity!important;
    background-color: #d3d3d3!important;
    box-shadow: 0 -6px 0 0 inset #7c7a79!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    transition: linear 0.15s!important;
    background-size: 125px!important;
    text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px!important;
}


.coinclaim {
    width: 200px;
    height: 100px;
    text-align: center;
    border-radius: 10px;
    background-color: #ffb307;
    box-shadow: 0 -6px 0 0 inset #d3970e;
    border: 0;
    padding: 11px 0;
    line-height: 1;
    background-image: url(https://cdn-icons-png.flaticon.com/512/1392/1392028.png);
    font-size: 18px;
    text-transform: uppercase;
    background-repeat: no-repeat;
    font-weight: 900;
    background-position: center;
    color: #fff8dc;
    cursor: pointer;
    transition: linear 0.15s;
    background-size: 125px;
    text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}
.coinclaim:hover {
    background-color: #eeac11;
    box-shadow: 0 -6px 0 0 inset #d4990e;

    scale:1.05;
}
.coinclaim:active {
    background-color: #ffb916;
    box-shadow: 0 0 0 0 inset #ecac15;
    padding: 11px 0;
    background-size: 130px;
}
.coinclaim img {
    width: 70px;
    opacity: 1;
    height: 70px;
    margin: 25px;
}


.offer {
    width: 200px;
    height: 100px;
    text-align: center;
    border-radius: 10px;
    background-color: #ffb307;
    box-shadow: 0 -6px 0 0 inset rgb(0 0 0 / 50%);
    border: 0;
    padding: 11px 0;
    line-height: 1;
    background-image: url(./assets/img/teen_heroes_button.png);
    font-size: 18px;
    text-transform: uppercase;
    background-repeat: no-repeat;
    font-weight: 900;
    background-position: center;
    color: #fff8dc;
    cursor: pointer;
    transition: linear 0.15s;
    background-size: 200px;
    text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}
.offer:hover {
    background-color: #eeac11;
    box-shadow: 0 -6px 0 0 inset rgb(0 0 0 / 50%);

    scale:1.05;
}
.offer:active, .offer:focus {
    background-color: #ffb916;
    box-shadow: 0 0 0 0 inset rgb(0 0 0 / 50%);
    padding: 11px 0;
    background-size: 205px;
}
.offer img {
    width: 70px;
    opacity: 1;
    height: 70px;
    margin: 25px;
}

/* Modal Settings */

.modal-settings .modal-dialog {
    width: 720px;
    max-width: 720px;
    padding: 0;
    margin: 0;
}
.modal-settings .modal-content {
    background-color: #202630;
    border: 6px solid #202630;
    border-radius: 20px;
    height: 520px;
    max-height: 520px;
}
.modal-settings .modal-header {
    background-color: #181a20;
    border: 0;
}
.modal-settings .modal-footer {
    background-color: #7c4320;
    border: 0;
}
.modal-settings .modal-title {
    font-weight: 900;
    text-transform: uppercase;
    color: #fafafa;
}

.option {
    width: 100%;

    height: 100%;
    overflow: auto;
}
.optionin{
    background-color: #181a20;
    width: 95%;
    padding: 10px;
    border-radius: 10px;
}

.option::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(16 19 24);
    border-radius:10em;
}

.option::-webkit-scrollbar-track {
    border-radius: 6px;
}
.option::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #333b47;
}


.option .form-check {
    width: 100%;
    font-size: 20px;
    margin: 0 0 10px 0;
}
.option .form-check-input{

}
.option .form-check-label {
    font-weight: 900;
    color: #707a8a;
    margin: 0 0 0 10px;
}
.option .form-check-input:checked {
    background-color: rgb(0 0 0 / 40%);
    border-color: transparent;
    outline: none;
}
.option .form-check-input{
    background-color: #fafafa;
}
.keys {
    width: 100%;

    height: 100%;
    overflow: auto;
}
.keysin{
    background-color: #181a20;
    width: 95%;
    padding: 10px;
    border-radius: 10px;
}
.keys::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(16 19 24);
    border-radius:10em;
}

.keys::-webkit-scrollbar-track {
    border-radius: 6px;
}
.keys::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #333b47;
}
.keys .macro {
    background: #202630;
    color: #fafafa;
    font-weight: 900;
    font-size: 20px;
    border: 0;
    margin: 0;
}
.keys .form-control  {
    background-color: #101318;
    color: #707a8a;
    font-weight: 900;
    font-size: 20px;
    border: 0;
    margin: 0;
}
.keysin div{
    margin: 0 0 10px 0;
}
.reset {
    width: 100%;
    text-align: center;
    border-radius: 10px;
    background-image: linear-gradient(0deg, #ff3939, #e86b6b);
    border: 6px solid #4a2813;
    font-size: 20px;
    padding: 8px 0;
    font-weight: 800;
    color: #fff;
    margin: 0 auto;
    transition: linear 0.15s;
    cursor: pointer;
}
.reset:hover{
    scale: 0.95;
}
.reset:active{
    scale: 0.925;
}


/* END Modal Settings */



/* Modal leaders */

.modal-leaders .modal-dialog {
    width: 720px;
    max-width: 720px;
    padding: 0;
    margin: 0;
}
.modal-leaders .modal-content {
    background-color: #202630;
    border: 6px solid #101318;
    border-radius: 20px;
    height: 520px;
    max-height: 520px;
}
.modal-leaders .modal-header {
    background-color: #181a20;
    border: 0;
}
.modal-leaders .modal-footer {
    background-color: #181a20;
    border: 0;
}
.modal-leaders .modal-title {
    font-weight: 900;
    text-transform: uppercase;
    color: #fafafa;
}
.leader {
    height: 360px;
    overflow: auto;
}
.leaderin{
    width: 98%;
    overflow: auto;
}

.leader::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(16 19 24);
    border-radius:10em;
}

.leader::-webkit-scrollbar-track {
    border-radius: 6px;
}
.leader::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #fafafa;
}
.modal-leaders table tr,
.modal-leaders table td,
.modal-leaders table th,
.modal-leaders table thead{
    border: 0;
}


.modal-leaders table{
    color: rgb(255 255 255 / 75%);
    --bs-table-hover-color: color: rgb(255 255 255 / 75%);
    --bs-table-striped-bg: rgb(0 0 0 / 10%);
}
.modal-leaders  .table-striped>tbody>tr:nth-of-type(odd)>* {
    color: rgb(255 255 255 / 75%);
}
.modal-leaders table th{
    color: rgb(250 250 250) !important;
}
.modal-leaders table tr:hover{
    color: rgb(255 255 255 / 100%);
}
/* END Modal leaders */

/* Modal Info */


.modal-info  .modal-dialog {
    width: 720px;
    max-width: 720px;
    padding: 0;
    margin: 0;
}
.modal-info  .modal-content {
    background-color: #202630;
    border: 6px solid #101318;
    border-radius: 20px;
    height: 520px;
    max-height: 520px;
}
.modal-info  .modal-header {
    background-color: #181a20;
    border: 0;
}
.modal-info .modal-footer {
    background-color: #7c4320;
    border: 0;
}
.modal-info  .modal-title {
    font-weight: 900;
    text-transform: uppercase;
    color: #fafafa;
}
.faq{
    height: 402px;
    overflow: auto;

}
.faq .accordion{
    width: 98%;
    --bs-accordion-bg: transparent;
}
.faq .accordion-button:not(.collapsed)::after {
    background-image: url(https://cdn-icons-png.flaticon.com/512/6941/6941680.png);
}
.faq .accordion-button::after {
    background-image: url(https://cdn-icons-png.flaticon.com/512/6941/6941680.png);
    transform: rotate(180deg);
}
.faq .accordion-button:not(.collapsed)::after {
    transform: rotate(360deg);
}
.faq  .accordion-body {
    color: #707a8a;
}
.faq::-webkit-scrollbar {
    width: 6px;
    background-color:rgb(124 67 32);
    border-radius:10em;
}

.faq::-webkit-scrollbar-track {
    border-radius: 6px;
}
.faq::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #ffe6c2;
}
.modal-info .accordion .accordion-button {
    background-color: #181a20;
    color: #707a8a;
    border-radius: 6px;
    font-weight: 800;
}

.modal-info .accordion-button:not(.collapsed) {
    color: #fafafa;
    background-color: #181a20;
    box-shadow: none;
    font-weight: 800;
}
.modal-info .accordion-button:focus {
    z-index: 3;
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}
.modal-info .accordion .accordion-item{
    border: 0;
    margin: 0 0 5px 0;
}

/* END Modal Info */

/* Modal Shop */




.modal-shop .modal-dialog {
    width: 795px;
    max-width: 795px;
    padding: 0;
    margin: 0;
}
.modal-shop .modal-content {
    background-color: #181a20;
    border: 6px solid #202630;
    border-radius: 20px;
    height: 572px;
    max-height: 572px;
}
.modal-shop .modal-header {
    background-color: rgb(24 26 32);
    border: 0;
    border-radius: 15px 15px 0 0;
    padding: 10px 20px;
}
.modal-shop .modal-footer {
    background-color: #7c4320;
    border: 0;
}
.modal-shop  .modal-title {
    font-weight: 900;
    text-transform: uppercase;
    color: #fafafa;
}
.shop-coin-box {
    background-color: rgb(32 38 48);
    color: #fafafa;
    font-size: 15px;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 800;
    margin: 0 0 0 20px;
    text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
}
.shop-coin-box img {
    margin: -3px 0 0 10px;
    width: 20px;
    height: 20px;
}


.shop-nav{
    background-color: #202630;
}

.shop-nav .nav{
    width: fit-content;
    margin: 0 auto;
}
.shop-nav .nav-link {
    font-weight: 800;
    color: #ffe6c2;
}
.shop-nav .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: transparent;
    border-bottom: 3px solid #fff;
}
.shop-nav .nav-pills .nav-link {
    border-radius: 0;
    width: 100px;
    text-transform: uppercase;
}


.skins .card-body {
    padding: 10px;
    background-color: #202630;
    text-align: center;
    width: 138px;
    display: inline-flex;
    margin: 0 10px 10px 0;
    border: 0;
    transition: linear 0.15s;
}
.skins .card-body:hover{
    scale:0.95;
}
.shop-menu-skins .nav-link {
    background: 0 0;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 14px;
    width: 120px;
    padding: 20px 10px;
    background-color: #202630;
    border-radius: 10px;
    color: #707a8a;
    border: 0;
    margin: 0 0 10px;
}
.shop-menu-skins .nav-link.active, .nav-pills .show>.nav-link {
    color: #fcfcfc;
    background-color: #333b47;
    scale: 0.95;
}
.skins .card-body h4{
    font-size: 13px;
    color: #fcfcfc;
    font-weight: 600;
}
.skins .card-body .skin {
    margin: 10px 0;
    width: 118px;
    height: 118px;
    border-radius: 100px;
    border: 4px solid rgb(255 255 255 / 20%);
}

.skins .card-body button {
    font-size: 12px;
    background-color: rgb(51 59 71);
    color: #fcfcfc;
    border: 0;
    padding: 5px 5px;
    border-radius: 4px;
    transition: linear 0.15s;
}
.skins .card-body button:hover{
    background-color: rgb(255 255 255 / 20%);
}
.price {
    margin: 0 5px 0 10px;
    font-weight: 900;
}
.buycoin img {
    width: 15px;
    height: 15px;
    position: relative;
    top: -2px;
}
.skins .tab-content{
    overflow: auto;
    height: 422px;
}
.skins .tab-content::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(16 19 24);
    border-radius:10em;
}

.skins .tab-content::-webkit-scrollbar-track {
    border-radius: 6px;
}
.skins .tab-content::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #333b47;
}
.unequipskin{
    background-color: #181a20 !important;
}

/* --------------- */


.shopin .minions{
    overflow: auto;
    height: 386px;
}
.minionsin{
    width: 98%;
}
.shopin .minions::-webkit-scrollbar {
    width: 6px;
    background-color:rgb(124 67 32);
    border-radius:10em;
}

.shopin .minions::-webkit-scrollbar-track {
    border-radius: 6px;
}
.shopin .minions::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #ffe6c2;
}

.minions .card-body {
    padding: 10px;
    background-color: #202630;
    text-align: center;
    width: 170px;
    display: inline-flex;
    margin: 0 10px 10px 0;
    border: 0;
    transition: linear 0.15s;
}
.minions .card-body:hover{
    scale:0.95;
}
.minions .card-body h4{
    color: #ffffff;
    font-weight: 900;
    font-size: 18px;
    margin: 0;
}
.minions .card-body p {
    margin: 0;
}
.minions .card-body p img {
    text-align: center;
    width: 70%;
    height: 70%;
    padding: 10px;
    border: 0;
}
.minions .card-body ul{
    padding: 0 0 0 20px;
    text-align: left;
    font-size: 14px;
    color: #707a8a;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.minions .card-body button {
    font-size: 12px;
    background-color: rgb(51 59 71);
    color: #fcfcfc;
    border: 0;
    padding: 5px 5px;
    border-radius: 4px;
    transition: linear 0.15s;
}

.minions .card-body button:hover{
    background-color: rgb(255 255 255 / 20%);
}

/* --------------- */


.shopin .boosts{
    overflow: auto;
    height: 424px;
}
.boostsin{
    width: 98%;
}
.shopin .boosts::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(16 19 24);
    border-radius:10em;
}

.shopin .boosts::-webkit-scrollbar-track {
    border-radius: 6px;
}
.shopin .boosts::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #333b47;
}

.boosts .card-body {
    padding: 10px;
    background-color: #202630;
    text-align: center;
    width: 169px;
    display: inline-flex;
    margin: 0 10px 10px 0;
    border: 0;
    transition: linear 0.15s;
}
.boosts .card-body:hover{
    scale:0.95;
}
.boosts .card-body h4{
    color: #fcfcfc;
    font-weight: 900;
    font-size: 18px;
    margin: 0;
}
.boosts .card-body p {
    margin: 0;
}
.boosts .card-body p img {
    /* background-color: #7c4320; */
    text-align: center;
    width: 70%;
    height: 70%;
    padding: 10px;
    border: 0;
}
.boosts .card-body ul{
    padding: 0 0 0 20px;
    text-align: left;
    font-size: 14px;
    color: #707a8a;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.boosts .card-body button {
    font-size: 12px;
    background-color: rgb(51 59 71);
    color: #fcfcfc;
    border: 0;
    padding: 5px 5px;
    border-radius: 4px;
    transition: linear 0.15s;
}

.boosts .card-body button:hover{
    background-color: rgb(255 255 255 / 20%);
}
/* --------------- */




.shopin .colors{
    overflow: auto;
    height: 424px;
}
.colorsin{
    width: 98%;
}
.shopin .colors::-webkit-scrollbar {
    width: 6px;
    background-color:rgb(16 19 24);
    border-radius:10em;
}

.shopin .colors::-webkit-scrollbar-track {
    border-radius: 6px;
}
.shopin .colors::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #333b47;
}

.colors .card-body {
    padding: 10px;
    background-color: #202630;
    text-align: center;
    width: 169px;
    display: inline-flex;
    margin: 0 10px 10px 0;
    border: 0;
    transition: linear 0.15s;
}
.colors .card-body:hover{
    scale:0.95;
}
.colors .card-body h4{
    color: #fcfcfc;
    font-weight: 900;
    font-size: 18px;
    margin: 0;
}
.colors .card-body p {
    margin: 0;
}
.colors .card-body .skins {
    width: 130px;
    height: 130px;
    background-color: rgb(0 0 0 / 20%);
    margin: 10px auto;
    border-radius: 100px;
    border: 8px solid rgb(0 0 0 / 30%);
}
.skins p{
    font-size: 25px;
    margin: -54px 0 0 0!important;
    width: 100%;
    font-weight: 800;
    color: #ffffff;
    text-shadow: rgb(0 0 0) 4px 0px 0px, rgb(0 0 0) 3.87565px 0.989616px 0px, rgb(0 0 0) 3.51033px 1.9177px 0px, rgb(0 0 0) 2.92676px 2.72656px 0px, rgb(0 0 0) 2.16121px 3.36588px 0px, rgb(0 0 0) 1.26129px 3.79594px 0px, rgb(0 0 0) 0.282949px 3.98998px 0px, rgb(0 0 0) -0.712984px 3.93594px 0px, rgb(0 0 0) -1.66459px 3.63719px 0px, rgb(0 0 0) -2.51269px 3.11229px 0px, rgb(0 0 0) -3.20457px 2.39389px 0px, rgb(0 0 0) -3.69721px 1.52664px 0px, rgb(0 0 0) -3.95997px 0.56448px 0px, rgb(0 0 0) -3.97652px -0.432781px 0px, rgb(0 0 0) -3.74583px -1.40313px 0px, rgb(0 0 0) -3.28224px -2.28625px 0px, rgb(0 0 0) -2.61457px -3.02721px 0px, rgb(0 0 0) -1.78435px -3.57996px 0px, rgb(0 0 0) -0.843183px -3.91012px 0px, rgb(0 0 0) 0.150409px -3.99717px 0px, rgb(0 0 0) 1.13465px -3.8357px 0px, rgb(0 0 0) 2.04834px -3.43574px 0px, rgb(0 0 0) 2.83468px -2.82216px 0px, rgb(0 0 0) 3.44477px -2.03312px 0px, rgb(0 0 0) 3.84068px -1.11766px 0px, rgb(0 0 0) 3.9978px -0.132717px 0px;
}
.colors .form-control {
    background-color: #333b47;
    border: 1px solid #ced4da00;
}
.colors .color-picker-block{
    margin: 0 auto 10px;
}
.colors .card-body ul{
    padding: 0 0 0 20px;
    text-align: left;
    font-size: 14px;
    color: #707a8a;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.colors .card-body button {
    font-size: 12px;
    background-color: rgb(51 59 71);
    color: #fcfcfc;
    border: 0;
    padding: 5px 5px;
    border-radius: 4px;
    transition: linear 0.15s;
}

.colors .card-body button:hover{
    background-color: rgb(255 255 255 / 20%);
}
/*  ---------------*/


.vip-box{
    overflow: auto;
    height: 424px;
}
.vip-boxsin{
    width: 98%;
}
.vip-box .modal-title h4{
    color: #202630;
    font-weight: 900;
    font-size: 18px;
    margin: 0;
}
.vip-box::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(16 19 24);
    border-radius:10em;
}

.vip-box::-webkit-scrollbar-track {
    border-radius: 6px;
}
.vip-box::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #333b47;
}
.vip-boxin .card-box{
    width: 140px;
    height: 180px;
    background-color: #181a20;
    border: 2px solid #ffe6c2;
    border-radius: 8px;
}

.vipbtn {
    width: 200px;
    height: 100px;
    text-align: center;
    z-index: 1;
    position: sticky;
    border-radius: 10px;
    background-color: #ffb307;
    box-shadow: 0 -6px 0 0 inset #d3970e;
    border: 0;
    padding: 25px 0;
    line-height: 1;
    background-image: url(https://cdn-icons-png.flaticon.com/512/1392/1392028.png);
    font-size: 50px;
    text-transform: uppercase;
    background-repeat: no-repeat;
    font-weight: 900;
    background-position: center;
    color: #fff8dc;
    cursor: pointer;
    transition: linear 0.15s;
    background-size: 125px;
    text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}
.vipbtngrey {
    width: 200px;
    height: 100px;
    background-blend-mode: luminosity;
    text-align: center;
    border-radius: 10px;
    background-color: #d3d3d3;
    box-shadow: 0 -6px 0 0 inset #7c7a79;
    border: 0;
    padding: 25px 0;
    line-height: 1;
    background-image: url(https://cdn-icons-png.flaticon.com/512/1392/1392028.png);
    font-size: 50px;
    text-transform: uppercase;
    background-repeat: no-repeat;
    font-weight: 900;
    background-position: center;
    color: #fff8dc;
    cursor: pointer;
    transition: linear 0.15s;
    background-size: 125px;
    text-shadow: rgb(58, 50, 44) 4px 0px 0px, rgb(58, 50, 44) 3.87565px 0.989616px 0px, rgb(58, 50, 44) 3.51033px 1.9177px 0px, rgb(58, 50, 44) 2.92676px 2.72656px 0px, rgb(58, 50, 44) 2.16121px 3.36588px 0px, rgb(58, 50, 44) 1.26129px 3.79594px 0px, rgb(58, 50, 44) 0.282949px 3.98998px 0px, rgb(58, 50, 44) -0.712984px 3.93594px 0px, rgb(58, 50, 44) -1.66459px 3.63719px 0px, rgb(58, 50, 44) -2.51269px 3.11229px 0px, rgb(58, 50, 44) -3.20457px 2.39389px 0px, rgb(58, 50, 44) -3.69721px 1.52664px 0px, rgb(58, 50, 44) -3.95997px 0.56448px 0px, rgb(58, 50, 44) -3.97652px -0.432781px 0px, rgb(58, 50, 44) -3.74583px -1.40313px 0px, rgb(58, 50, 44) -3.28224px -2.28625px 0px, rgb(58, 50, 44) -2.61457px -3.02721px 0px, rgb(58, 50, 44) -1.78435px -3.57996px 0px, rgb(58, 50, 44) -0.843183px -3.91012px 0px, rgb(58, 50, 44) 0.150409px -3.99717px 0px, rgb(58, 50, 44) 1.13465px -3.8357px 0px, rgb(58, 50, 44) 2.04834px -3.43574px 0px, rgb(58, 50, 44) 2.83468px -2.82216px 0px, rgb(58, 50, 44) 3.44477px -2.03312px 0px, rgb(58, 50, 44) 3.84068px -1.11766px 0px, rgb(58, 50, 44) 3.9978px -0.132717px 0px;
}
.vipbtn:hover {
    background-color: #eeac11;
    box-shadow: 0 -6px 0 0 inset #d4990e;

    scale:0.95;
}
.vipbtn:active {
    background-color: #ffb916;
    box-shadow: 0 0 0 0 inset #ecac15;
    padding: 20px 0;
    background-size: 130px;
}
.vipbtn img {
    width: 70px;
    opacity: 1;
    height: 70px;
    margin: 25px;
}


.vip-box .carousel-caption{
    position: initial;
}

.vip-box  .carousel-item h5{
    font-weight: 900;
    color: #ffe6c2;
}
.vip-box  .carousel-item p {
    color: #ffe6c2;
    font-weight: 600;
    line-height: 1.2;
    margin: 20px 0 40px;
}


.vip-box  .carousel-item img {
    height: 260px;
    width: 420px!important;
    margin: 0 auto;
    border-radius: 10px;
}
.vip-card{
    height: auto;
    background-color: rgb(32 38 48);
    width: 95%;
    max-width: 95%;
    border-radius: 20px;
    margin: 0 0 20px 0;
    padding: 10px;
}

/* END Modal Shop */

#stats-block span{

}
#fps-block {
    font-family: Ubuntu;
    color: #ffffff;
    pointer-events: none;
    will-change: auto;
    font-weight: 800;
    padding: 10px;
    font-size: 18px;
    line-height: 1.2;
    background-color: rgb(0 0 0 / 40%);
    border-radius: 1em;
    width: 250px;
    text-align: left;
    margin: 0 0 10px 0;
    border: 1px solid rgba(255, 255, 255, .4);
}
.stat-box{
    font-size: 1em;
}
#fps-block p {
    margin: 0;
    padding: 0 5px;
}

/*gradient border*/
.colorfulbg {
    /* background: linear-gradient(-45deg, rgb(169 68 60 / 95%), rgb(184 43 91 / 95%), rgb(156 39 176 / 95%), rgb(103 58 182 / 95%),rgb(47 113 166 / 95%), rgb(47 130 167 / 95%),rgb(51 151 55 / 95%), rgb(78 80 53 / 95%), rgb(179 141 37 / 95%), rgb(177 126 45 / 95%),rgb(165 54 42 / 95%)); */
    /*background: linear-gradient(-45deg, rgb(244 67 54 / 90%), rgb(233 30 99 / 0.9), rgb(156 39 176 / 90%), rgb(103 58 182 / 90%),rgb(33 150 243 / 90%), rgb(3 169 244 / 90%),rgb(76 175 80 / 90%), rgb(205 220 57 / 90%), rgb(255 193 7 / 90%), rgb(255 152 0 / 90%),rgb(244 67 54 / 90%));*/
    background-color: #2e313a;
    background-size: 1000% 1000%;
    animation: gradient 150s ease infinite;
}
div.colorful {
    background: linear-gradient(-45deg, #f44336, #e91e63, #9c27b0, #673ab7,#2196f3, #03a9f4,#4caf50, #cddc39, #ffc107, #ff9800,#f44336);
    background-size: 1000% 1000%;
    animation: gradient 30s ease infinite;
    width: 130px;
    height: 130px;
    margin: 0 auto;
    border-radius: 100px;
    padding: 7px;
}
div.colorful div {
    width: 115px;
    height: 115px;
    background-color: rgb(31 34 39);
    border-radius: 100px;
    margin: 0 auto;
}
div.colorful div img{
    width: 9vh;
    height: 9vh;
    border-radius: 100vh;
}
@keyframes gradient {
	0% {
		background-position: 0% 0%;
	}
	10% {
		background-position: 20% 20%;
	}
	20% {
		background-position: 40% 40%;
	}
	30% {
		background-position: 60% 60%;
	}
	40% {
		background-position: 75% 75%;
	}
	50% {
		background-position: 100% 100%;
	}
	60% {
		background-position: 75% 75%;
	}
	70% {
		background-position: 60% 60%;
	}
	80% {
		background-position: 40% 40%;
	}
	90% {
		background-position: 20% 20%;
	}
	100% {
		background-position: 0% 0%;
	}

}
.buynow, .price, .buycoin {
    pointer-events: none!important;
}


.bootbox {
    background-color: rgb(0 0 0 / 50%);
}
.bootbox .modal-dialog {
    width: 350px;
    max-width: 350px;
    padding: 0;
    margin: 0 auto;
}
.bootbox .modal-content {
    background-color: #202630;
    border: 6px solid #0c0d10;
    border-radius: 20px;
    height: auto;
}
.bootbox .modal-header {
    background-color: #181a20;
    border-radius: 14px 14px 0 0;
    border: 0;
}
.bootbox .modal-footer {
    background-color: #181a20;
    border: 0;
    border-radius: 0 0 14px 14px;
}
.bootbox  .modal-title {
    font-weight: 900;
    text-transform: uppercase;
    color: #fafafa;
}

.bootbox .bootbox-body {
    color: #919eaa;
}
.bootbox .bootbox-accept, .bootbox .bootbox-cancel {
    font-size: 12px;
    background-color: rgb(32 38 48);
    color: #fafafa;
    border: 0;
    padding: 5px 5px;
    border-radius: 4px;
    transition: linear 0.15s;
}
.bootbox .bootbox-accept:hover, .bootbox .bootbox-cancel:hover{
    background-color: rgb(255 255 255 / 60%);
}


.shop-nav{
    background-color: #202630;
}

.shop-nav .nav{
    width: fit-content;
    margin: 0 auto;
}
.shop-nav .nav-link {
    font-weight: 800;
    color: #fafafa;
}
.shop-nav .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: transparent;
    border-bottom: 3px solid #fff;
}
.shop-nav .nav-pills .nav-link {
    border-radius: 0;
    width: 130px;
    text-transform: uppercase;
}

.tabs-container {
    position: fixed;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
}

/* Ваши прежние стили... */
.custom-container {
    /* background-color: rgb(0 0 0 / 40%); */
    padding: 15px;
    border-radius: 20px;
    width: 300px;
}
/* 
.custom-container {
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(0 0 0 / 40%);
    padding: 15px;
    border-radius: 20px;
    width: 300px;
} */

.custom-progress-container {
    flex-grow: 1;
    background-color: rgb(0 0 0 / 20%);
    border-radius: .75rem;
    position: relative;
    margin-right: .5rem;
    display: flex;
    gap: 2px;
    overflow: hidden;
    height:25px;
}

.grid-section {
    flex-grow: 1;
    height: 100%;
    background-color: rgb(0 0 0 / 20%);
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 100%;
    background-color: aquamarine;
    transition: 1s;
}
.skillsprogress-fill {
    height: 100%;
    width: 100%;
    background-color: red;
    transition: 0.2s;
}

.progress-gap {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 15px;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
}

.custom-plus-button {
    border-radius: 50%;
    background-color: red;
    color: white;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-container {
    width: 120px;
    height: 120px;
    background-color: rgb(0 0 0 / 40%);
    border-radius: 50%;
    overflow: hidden;
}

.circular-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
}

.progress-ring__circle,
.progress-ring__overlay {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.progress-ring__overlay {
    stroke-dasharray: 0;
}


.fullwidth-progress-container {
    background-color: rgb(0 0 0 / 20%);
    position: relative;
    height: 25px;
    overflow: hidden;
}

.fullwidth-progress-fill {
    height: 100%;
    background-color: red;
    transition: 0.2s;
}

.fullwidth-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 15px;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
}



.abilitiesbutton {

    /* width: 50px; */
    /* height: 50px; */
    border-radius: 10px;
    background-color: rgb(0 0 0 / 20%);
    font-size: 25px;
    font-weight: 900;
    cursor: pointer;
    color: wheat;
    text-align: center;
    vertical-align: middle;
    margin-top: 5px;

}

.abilities-row {
    position: relative;
    background: #7c4320;
    box-sizing: border-box;
    border-radius: 5px;
    width: 660px;
    height: 97px;
    margin-bottom: 4px;
}
.abilities-row-name {
    position: absolute;
    width: 200px;
    font-size: 16px;
    font-weight: 700;
    left: 15px;
    top: 14px;
    color: #fff;
    width: 150px;
    line-height: .9;
    display: flex;
}
.abilities-row-desc {
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    left: 15px;
    top: 35px;
    color: aquamarine;
    display: flex;
}
.abilities-row-progress-bar {
    position: absolute;
    top: 65px;
    left: 16px;
}
.abilities-row-buy-button {
    position: absolute;
    top: 25px;
    right: 15px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    background: rgb(158 92 51);
    border-radius: 15px;
    width: 100px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}
.abilities-row-buy-button:hover {
    scale: 1.1;
    background: rgb(66 42 27);
}
.abilities-row-buy-button-price {
    pointer-events: none;
}

.abilities-table {
    width: 680px;
    height: 90%;
    overflow-x: hidden;
}

.abilities-table::-webkit-scrollbar {
    width: 6px;
    background-color:rgb(124 67 32);
    border-radius:10em;
}

.abilities-table::-webkit-scrollbar-track {
    border-radius: 6px;
}
.abilities-table::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #ffe6c2;
}

.menu-support-dock {
    position: fixed;
    left: 50%;
    top: max(12px, env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
}
.menu-support-btn {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: clamp(240px, 24vw, 360px);
    height: clamp(54px, 6.2vh, 68px);
    padding: 0 clamp(22px, 2.4vw, 36px);
    border-radius: 999px;
    border: none;
    outline: none;
    background: #111;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.48);
    font-family: 'Nunito', sans-serif;
    font-size: clamp(21px, 1.85vw, 34px);
    font-weight: 1000;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 0 rgba(7, 16, 30, 0.35);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.menu-support-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: inherit;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    filter: blur(5px);
    opacity: 0;
    z-index: -1;
    transition: opacity .3s ease-in-out;
    animation: supportButtonGlowing 20s linear infinite;
}
.menu-support-btn::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #111;
    z-index: -1;
}
.menu-support-btn:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.62);
}
.menu-support-btn:hover::before {
    opacity: 1;
}
.menu-support-btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.56);
}
.menu-support-btn:active::after {
    background: transparent;
}
.menu-support-icon {
    width: clamp(20px, 1.8vw, 30px);
    height: clamp(20px, 1.8vw, 30px);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
}
.menu-support-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.menu-support-text {
    line-height: 1;
}
@keyframes supportButtonGlowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
@media (max-width: 900px) {
    .menu-support-dock {
        top: max(10px, env(safe-area-inset-top));
    }
    .menu-support-btn {
        min-width: min(86vw, 330px);
        height: 52px;
        padding: 0 20px;
        font-size: 22px;
    }
    .menu-support-icon {
        width: 24px;
        height: 24px;
    }
}
.namepurchase {
    width: 200px;
    cursor: pointer;
    text-align: center;
    border-radius: 10px;
    background-color: #078aff;
    box-shadow: 0 -6px 0 0 inset #0e76d3;
    border: 0;
    padding: 11px 0;
    line-height: 1;
    color: white;
}
#nicktoregister {
    width: 255px;
    text-align: center;
    font-weight: 900;
    height: 40px;
    outline: none;
    font-size: 15px;
    background-color: #fcfcfc;
    border: 0;
    box-shadow: inset 0 8px 0 rgb(24 26 32 / 15%);
    color: #181a20!important;
    border-radius: 10px;
}
#nicktoregister:active, #nicktoregister:link {
    outline: none;
}
#nicktoregister::placeholder{
    color: #2026308c;
}
.namebtn {
    width: 255px;
    text-align: center;
    border-radius: 6px;
    background: #333b47;
    font-size: 15px;
    font-weight: 900;
    height: 40px;
    color: #fcfcfc;
    cursor: pointer;
    align-items: center;
    display: flex;
    justify-content: center;
    transition: linear 0.15s;
}
.namebtn:hover{
    scale: 0.98;
    background: #475261;
}
.registernamemodall {
    max-height: 364px;
    overflow: auto;
}

.registernamemodall::-webkit-scrollbar {
    width: 6px;
    background-color:rgb(124 67 32);
    border-radius:10em;
}

.registernamemodall::-webkit-scrollbar-track {
    border-radius: 6px;
}
.registernamemodall::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #ffe6c2;
}

.fuserdiv {
    padding: 5px;margin: 0;height: 30px;pointer-events: auto;cursor: pointer;
    transition: 0.2s;
}
.fuserdiv:hover {
    background: rgba(255, 255, 255, 0.6)
}
.cbtn-disabled {
    transition: linear 0.15s;
    pointer-events: none;
}

#chatDownArrow {
    opacity: 0;
    pointer-events: none;
    width: 55px;
    height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .4);
    will-change: auto;font-weight: 600;
    background-color: rgb(0 0 0 / 40%);
    padding: 2px;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    z-index: 5;
}

#chatDownArrow.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#chatDownArrow img {
    display: block;
    pointer-events: none;
}

#chatDownArrow:hover {
    background: rgb(255 255 255 / 8%);
}

#chatDownArrow.is-visible:hover {
    opacity: 1;
    transform: translateY(0);
}



.gradient-border {
 
    position: relative;
    padding: 20px;
/* фон контента */
    border-radius: 10px;
    overflow: hidden;
  }

  /* Стиль для анимированной обводки */
  .gradient-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 10px;
    background: linear-gradient(45deg, #186975, #2a3a5c, #202c32, #39578b);
    background-size: 400% 400%;
    -webkit-mask-image: linear-gradient(white, white); /* Обеспечивает видимость */
    mask-image: linear-gradient(white, white); /* Маска для видимости */
    animation: gradient-animation 5s ease infinite;
  }

  /* Анимация изменения градиента */
  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

#item-user div img {
    margin: auto 0;
    width: 1.5vh;
    animation: pulse 1s infinite ease-in-out;
    height: 1.5vh;
}  

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}