/* custom.css */
:root {
    --cont-width: 77.5rem;
    --cont-section-gap: 5rem;
}

.dropdown {
    z-index: 1;
}

.bottom-wrapper,.top-wrapper{
    background-size:100% auto;
    background-position:bottom;
    background-repeat:no-repeat
}

.more-btn{
    text-transform:uppercase;
    font-weight:600;
    margin-top:1rem;
    display:inline-block;
    color:var(--w-clr);
    font-size:.8rem;
    line-height:1.5rem;
    -webkit-text-decoration-line:underline;
    text-decoration-line:underline;
}
@media (hover:hover) and (pointer:fine){
    .more-btn:hover{
        text-decoration:none
    }
}
@media only screen and (min-width:40em){
    .more-btn{
        font-size:1rem
    }
}

.numeric-table{
    display:table;
    width:100%
}
.numeric-table__thead{
    display:table-header-group
}
.numeric-table__tbody{
    display:table-row-group
}
.numeric-table__tr{
    display:table-row
}
.numeric-table__tr .numeric-table__td:first-child,.numeric-table__tr .numeric-table__th:first-child{
    padding-right:.9375rem
}
.numeric-table__tr .numeric-table__td:last-child,.numeric-table__tr .numeric-table__th:last-child{
    text-align:right
}
.numeric-table__td,.numeric-table__th{
    display:table-cell;
    font-weight:600;
    white-space:nowrap
}
.numeric-table__th{
    color:rgba(var(--w-clr),.24);
    font-size:.88rem;
    line-height:1.25rem
}
.numeric-table__td{
    color:var(--w-clr);
    font-size:1rem;
    line-height:1.44rem;
    padding-top:.75rem
}

.numeric-table__td img{
    margin-right: 0;
}
.block-icons {
    display: flex;
    justify-content: flex-start;
}
.clan-icon-group {
    min-width: 29px;
}

.streams{
    --streams-grid-gap:1.5rem;
    --streams-item-h:16.5rem;

    --streams-item-clr:255,255,255;
    --streams-border-clr:255,255,255;
    --streams-icon-color:56, 56, 56;

    --add-btn-ratio:2rem;
    position:relative;
    margin-bottom:var(--cont-section-gap)
}
.streams__row{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(18.25rem,1fr));
    grid-gap:var(--streams-grid-gap)
}
.streams__row-item{
    background-color:rgba(var(--streams-item-clr), 0.03);
    border:2px solid rgba(var(--streams-border-clr), 0.14);
    border-radius:.375rem;
    min-height:var(--streams-item-h);
    cursor:pointer;
    position:relative;
    -webkit-transition:200ms ease;
    transition:200ms ease
}
@media (hover:hover) and (pointer:fine){
    .streams__row-item:hover{
        border:1px solid rgba(var(--w-clr),.25);
        -webkit-transform:scale(1.015);
        transform:scale(1.015)
    }
}
.streams__video-container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2
}
.streams__video-container iframe,.streams__video-container video{
    width:100%!important;
    height:100%!important
}
.streams__add-btn,.streams__add-btn span{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}
.streams__add-btn{
    width:var(--add-btn-ratio);
    height:var(--add-btn-ratio)
}
.streams__add-btn span{
    display:block;
    border-radius:.5rem;
    background-color:rgba(var(--streams-icon-color), 1)
}
.streams__add-btn span:nth-child(1){
    width:100%;
    height:.1875rem
}
.streams__add-btn span:nth-child(2){
    width:.1875rem;
    height:100%
}
@media only screen and (min-width:40em){
    .streams{
        --streams-item-h:12.5rem
    }
    .streams__heading{
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-direction:row;
        flex-direction:row
    }
}

.statistics__btn-arrow{
    -webkit-transform:scaleY(-1);
    transform:scaleY(-1)
}
.statistics__btn-arrow{
    -webkit-clip-path:var(--arrow-shape);
    clip-path:var(--arrow-shape);
    width:var(--arrow-width);
    height:var(--arrow-height);
    background-color:rgba(var(--w-clr),.8);
    -webkit-transition:300ms ease;
    transition:300ms ease;
    display:block
}
.statistics{
    --statistics-grid-gap:2rem;
    --statistics-item-h:18.5rem;
    --statistics-item-clr:  255, 255, 255;
    --statistics-border-clr: 255, 255, 255;
    --add-btn-ratio:2rem;
    position:relative
}
.statistics__footer{
    text-align:center
}
.statistics__row{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(18.75rem,1fr));
    grid-gap:var(--statistics-grid-gap)
}
.statistics__row-item{
    background: rgba(var(--statistics-item-clr), 0.03);
    border: 2px solid rgba(var(--statistics-border-clr), 0.14);
    backdrop-filter: blur(24px);

    border-radius:.375rem;
    min-height:var(--statistics-item-h);
    padding:1.5rem;
    position:relative;
    -webkit-transition:200ms ease;
    transition:200ms ease
}
.statistics__btn,.statistics__heading{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-direction:normal;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.statistics__heading{
    -webkit-box-orient:vertical;
    -ms-flex-direction:column;
    flex-direction:column;
    grid-gap:1rem;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin-bottom:.75rem
}
.statistics__btn{
    width: 18.75rem;
    max-width: 100%;
    -webkit-box-orient:horizontal;
    -ms-flex-direction:row;
    flex-direction:row;
    justify-content: center;
    grid-gap:.625rem;
    padding:.625rem 1.25rem;
    -webkit-transition:200ms ease;
    transition:200ms ease;
    border:1px solid rgba(var(--w-clr),.6);
    border-radius:.375rem;
    color:rgba(var(--w-clr),1)
}
@media (hover:hover) and (pointer:fine){
    .statistics__btn:hover{
        border-color: rgba(var(--w-clr), .56);
    }
}
.statistics__btn--dropdown{
    --dropdown-m:3.5rem;
    cursor:default;
    position:relative
}
.statistics__btn--dropdown .dropdown{
    top: 0;
    padding-top: 45px;
    background-color: transparent;
    border: none;
}
.statistics__btn--dropdown .dropdown__link {
    display: block;
}
.statistics__btn--dropdown:hover .dropdown{
    -webkit-transform:translateY(0);
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:all;
}
.statistics__btn--dropdown:hover .statistics__btn-arrow{
    -webkit-transform:scaleY(-1);
    transform:scaleY(-1)
}
.statistics__btn--dropdown .dropdown__list{
    border-color: rgba(var(--w-clr), .56);
    border-radius:.375rem;
    background-color:#070606;
    text-align: left;
}
.statistics__btn span{
    font-weight:600;
    color:rgba(var(--w-clr),1);
    text-transform:uppercase
}
.statistics__name{
    display:block;
    margin-bottom:.625rem;
    font-weight:600;
    font-size:1rem
}
@media only screen and (min-width:40em){
    .statistics{
        --statistics-grid-gap:1.5rem;
        --statistics-item-h:18.5rem
    }
    .statistics__name{
        font-size:1.38rem
    }
    .statistics__heading{
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-direction:row;
        flex-direction:row
    }
    .statistics__row-item{
        padding:1.6875rem 2.625rem
    }
}

#main-bg {
    position: absolute;
    left: 0;
    right: 0;
    z-index: -2;
    top: calc(100vh + 11.875rem);
    bottom: calc(100vh + 11.875rem);
    background: linear-gradient(0.00deg, rgba(0, 0, 0, 0) 51%,rgb(7, 6, 6) 100%),linear-gradient(0.00deg, rgb(7, 6, 6),rgba(0, 0, 0, 0) 59.5%),url(../img/main-bg.png);
    background-size: auto, auto, cover;
}

@media (prefers-color-scheme: dark) {
    :root {
        background-color: black;
        color: white;
    }
}

.telegram-post-widget {
    text-align: center;
}

.info .widget .telegram-post-widget iframe {
    max-width: 100% !important;
    width: 500px;
}

.servers__links span,
.servers__links a {
    color: unset;
}
.servers__links span {
    color: rgb(var(--w-clr));
    font-size: .75rem;
    font-weight: 600;
    text-decoration: underline;
    -webkit-transition: 300ms ease;
    transition: 300ms ease;
}

@media (max-width: 1172px) {
    .unsimple {
        width: 100%;
    }
}

.unsimple a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.unsimple a:hover img {
    opacity: 1;
}

.unsimple a img {
    transition: opacity .3s ease;
    opacity: 0.5;
    width: 32px;
}

.modal__flex-link {padding: .3125rem 0.25rem !important;}

.modal__grid-descr a {
    color: #469ad5;
    text-decoration: underline;
}
.modal__grid-descr a:hover {
    color: #fee893 !important;
}

.navigation__box {
    width: 100%; 
    height: auto; 
    display: flex;
    justify-content: left;
    position: relative;
}

/* Убираем стандартные иконки */
.gwi_c-telegram:before,
.gwi_discord:before {
    content: "" !important;
}

/* Добавляем свои иконки как фоновые изображения */
.soc__ico-c-telegram {
    background-image: url(../images/soc/telegram.png); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    display: inline-block;
}

.soc__ico-discord {
    background-image: url(../images/soc/discord.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 60px;
    height: 60px;
    display: inline-block;
}

.soc__item:hover .soc__ico-c-telegram,
.soc__item:hover .soc__ico-discord {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.soc__item:hover .soc__ico-c-telegram {
    filter: drop-shadow(0 0 8px #ffe9b0);
}

.soc__item:hover .soc__ico-discord {
    filter: drop-shadow(0 0 8px #ffe9b0);
}

/* Базовые стили (для мобильных и всех устройств) */
.server-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 199px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.content-title {
    font-size: 24px;
    font-weight: bold;
    color: #d8b789;
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.server-card {
    position: relative;
    width: 100%;
    max-width: 199px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
}

.server-card__bg {
    width: 100%;
    height: 20%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.server-card__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    background: none !important;
    pointer-events: none;
}

.server-card__name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    margin-top: -6px; 
    margin-left: 15px;
    text-align: left;
    text-transform: uppercase;
}

.server-card__details-container {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}

.server-card__details {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.server-card__rate {
    font-size: 13px;
    font-weight: 600;
    color: #d8b789;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    margin-left: 110px;
    margin-top: -21px;
}

.server-card__online {
    font-size: 14px;
    font-weight: 600;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    color: #0ac00a;
    margin-top: 7px;
    position: absolute;
    left: 51.5%;
    transform: translateX(-50%);
    width: max-content;
    right: auto;
}

.server-card__online.offline {
    color: #ff0000;
}

/* Стили для списка */
.widget-table__list {
    padding: 0;
    list-style: none;
}

.widget-table__item {
    background: transparent;
    border: none;
}

.ac-header {
    padding: 0;
    background: transparent !important;
}

.server-card-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Полное отключение маркеров */
.widget-table__list,
.widget-table__list li {
    list-style: none !important;
    padding-left: 0 !important;
}

.widget-table__list li::marker {
    display: none !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
}

/* Для основного контейнера */
.servers__list {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.scale-wrapper {
    transform-origin: top center;
}

/* Масштабируем только на экранах больше 1920px */
@media (min-width: 1921px) {
    .scale-wrapper {
        transform: scale(calc(100vw / 1920));
    }
}